Style updates and bugfixes

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

@@ -13,12 +13,14 @@ function BookmarkSettingsItem({ bookmark }: { bookmark: Bookmark }) {
 				color: 'var(--mantine-color-primary-0)',
 				backgroundColor: 'var(--mantine-color-search-0)',
 				padding: '.5rem',
+				filter: bookmark.enabled ? '' : 'grayscale(100%)',
 			}}
 			onMouseEnter={() => setHover(true)}
 			onMouseLeave={() => setHover(false)}
 		>
-			<Group>
+			<Group justify='space-between'>
 				<Text>{bookmark.name}</Text>
+				{!bookmark.enabled && !hover && <Text opacity={0.25}>Disabled</Text>}
 				{hover && (
 					<ActionIcon
 						variant='subtle'

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

@@ -2,13 +2,11 @@ import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import { Box, Button, Card, Group, Stack, Text, TextInput } from '@mantine/core';
 import { isNotEmpty, useForm } from '@mantine/form';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
+import { AddItemModal, NoItemsFound, SettingsHeader } from 'components';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { textInputClasses } from 'styles';
 import type { Bookmark, BookmarkGroup } from 'types';
-import AddItemModal from '../Shared/AddItemModal';
-import NoItemsFound from '../Shared/NoItemsFound';
-import SettingsHeader from '../Shared/SettingsHeader';
 import DebouncedGroupSettingsItem from './DebouncedGroupSettingsItem';
 
 const BookmarkSettings = () => {

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

@@ -1,11 +1,10 @@
-import { ActionIcon, Card, Group, Stack, Text, TextInput, Tooltip } from '@mantine/core';
+import { Card, Group, Stack, Text, TextInput } from '@mantine/core';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
+import { DeleteItemModal, ManagementPill } from 'components';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { FiTrash } from 'react-icons/fi';
 import { cardClasses, textInputClasses } from 'styles';
 import type { Bookmark } from 'types';
-import DeleteItemModal from '../Shared/DeleteItemModal';
 
 function DebouncedBookmarkItem({
 	bookmarkItem,
@@ -66,25 +65,16 @@ function DebouncedBookmarkItem({
 				}
 				title='Delete Bookmark'
 			/>
-			<Tooltip
-				c={'var(--mantine-color-primary-0)'}
-				bg={'var(--mantine-color-background-0)'}
-				bd={'solid 1px var(--mantine-color-border-0)'}
-				label={'Delete'}
-			>
-				<ActionIcon
-					pos={'absolute'}
-					right={'1rem'}
-					top={'1rem'}
-					color='red'
-					onClick={() => {
-						setIsOpen(true);
-						openModal();
-					}}
-				>
-					<FiTrash color='black' />
-				</ActionIcon>
-			</Tooltip>
+			<ManagementPill
+				enabled={bookmark.enabled}
+				onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+					setUpdate({
+						...bookmark,
+						enabled: event.target.checked ? 1 : 0,
+					});
+				}}
+				openModal={openModal}
+			/>
 			<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
 				<TextInput
 					label={'Name'}

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

@@ -19,13 +19,13 @@ import {
 } from '@mantine/core';
 import { isNotEmpty, useForm } from '@mantine/form';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
+import { DeleteItemModal } 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 { buttonClasses, cardClasses, popoverClasses, textInputClasses } from 'styles';
 import type { Bookmark, BookmarkGroup } from 'types';
-import DeleteItemModal from '../Shared/DeleteItemModal';
 import BookmarkSettingsItem from './BookmarkSettingsItem';
 import DebouncedBookmarkItem from './DebouncedBookmarkItem';
 
@@ -51,6 +51,7 @@ function DebouncedGroupSettingsItem({
 		url: '',
 		category: group.categoryName,
 		index: 0,
+		enabled: 1,
 	});
 	const form = useForm({
 		initialValues: newBookmark,
@@ -111,7 +112,7 @@ function DebouncedGroupSettingsItem({
 				modalOpened={modalOpened}
 				handleClose={closeModal}
 				handleDelete={() => {
-					handleDelete(bookmarks, 'api/bookmarks');
+					bookmarks.length > 0 && handleDelete(bookmarks, 'api/bookmarks');
 					handleDelete(group, 'api/bookmarkCategories');
 				}}
 				title='Delete message'
@@ -141,12 +142,13 @@ function DebouncedGroupSettingsItem({
 				pt={0}
 				bg={'var(--mantine-color-search-0)'}
 				c={'var(--mantine-color-background-0)'}
+				mt={'-1.5rem'}
 			>
 				<Stack gap={0}>
-					<Group gap={0} align='center' justify='space-between'>
+					<Group gap={0} align='end' justify='space-between'>
 						<TextInput
 							label={'Name'}
-							w={isMobile ? undefined : '58%'}
+							w={isMobile ? undefined : '56%'}
 							className={textInputClasses.settingsItem}
 							classNames={textInputClasses}
 							defaultValue={group.categoryName}
@@ -187,9 +189,8 @@ function DebouncedGroupSettingsItem({
 							label={'Delete'}
 						>
 							<ActionIcon
-								mt={'2.5rem'}
-								size={'lg'}
 								color='red'
+								size={'2.75rem'}
 								onClick={() => {
 									openModal();
 								}}
@@ -206,8 +207,8 @@ function DebouncedGroupSettingsItem({
 							borderRadius: '100%',
 							backgroundColor: 'var(--mantine-color-accent-0)',
 							position: 'absolute',
-							top: isMobile ? 170 : 92,
-							right: 18,
+							top: isMobile ? 156 : 78,
+							right: 22,
 							zIndex: 10,
 							fontSize: '1.25rem',
 							textAlign: 'center',