Updates to bookmarks

src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx

@@ -15,15 +15,14 @@ import {
 	Stack,
 	Text,
 	TextInput,
-	Tooltip,
 } from '@mantine/core';
 import { isNotEmpty, useForm } from '@mantine/form';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
-import { DeleteItemModal } from 'components';
+import { DeleteItemModal, ManagementPill } from 'components';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FaChevronLeft } from 'react-icons/fa';
-import { FiPlus, FiTrash } from 'react-icons/fi';
+import { FiPlus } from 'react-icons/fi';
 import { buttonClasses, cardClasses, popoverClasses, textInputClasses } from 'styles';
 import type { Bookmark, BookmarkGroup } from 'types';
 import BookmarkSettingsItem from './BookmarkSettingsItem';
@@ -145,7 +144,7 @@ function DebouncedGroupSettingsItem({
 				mt={'-1.5rem'}
 			>
 				<Stack gap={0}>
-					<Group gap={0} align='end' justify='space-between'>
+					<Group w={'100%'} gap={8} align='end' justify='center' pos={'relative'}>
 						<TextInput
 							label={'Name'}
 							w={isMobile ? undefined : '56%'}
@@ -186,49 +185,53 @@ function DebouncedGroupSettingsItem({
 									: undefined
 							}
 						/>
-						<Tooltip
-							c={'var(--mantine-color-primary-0)'}
-							bg={'var(--mantine-color-background-0)'}
-							bd={'solid 1px var(--mantine-color-border-0)'}
-							label={'Delete'}
+						<Text
+							style={{
+								width: '30px',
+								height: '30px',
+								borderRadius: '100%',
+								backgroundColor: 'var(--mantine-color-accent-0)',
+								fontSize: '1.25rem',
+								textAlign: 'center',
+								textJustify: 'auto',
+								marginBottom: '.5rem',
+								marginLeft: '.5rem',
+							}}
 						>
-							<ActionIcon
-								color='red'
-								size={'2.75rem'}
-								onClick={() => {
-									openModal();
-								}}
-							>
-								<FiTrash color='black' />
-							</ActionIcon>
-						</Tooltip>
+							{bookmarks.length}
+						</Text>
 					</Group>
-
-					<Text
-						style={{
-							width: '30px',
-							height: '30px',
-							borderRadius: '100%',
-							backgroundColor: 'var(--mantine-color-accent-0)',
-							position: 'absolute',
-							top: isMobile ? 156 : 78,
-							right: 22,
-							zIndex: 10,
-							fontSize: '1.25rem',
-							textAlign: 'center',
-							textJustify: 'auto',
-						}}
-					>
-						{bookmarks.length}
-					</Text>
 				</Stack>
 			</Card.Section>
 			<Card.Section mt={'1rem'} p={'1rem'}>
-				<Stack>
+				<Stack pos={'relative'}>
+					<Group
+						style={{
+							position: 'absolute',
+							width: '100%',
+							right: '6rem',
+							top: '-3.25rem',
+						}}
+					>
+						<ManagementPill
+							enabled={group.enabled}
+							onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+								setUpdate({
+									...group,
+									enabled: event.target.checked ? 1 : 0,
+								});
+							}}
+							openModal={openModal}
+						/>
+					</Group>
 					<DragDropContext onDragEnd={onDragEnd}>
 						<Droppable droppableId={`${bookmarkGroup.id}`}>
 							{(provided: DroppableProvided) => (
-								<Stack ref={provided.innerRef} {...provided.droppableProps}>
+								<Stack
+									pos={'relative'}
+									ref={provided.innerRef}
+									{...provided.droppableProps}
+								>
 									{bookmarks.map((bookmark: Bookmark) => (
 										<Draggable
 											key={bookmark.id}