Updates to bookmarks

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

@@ -1,10 +1,10 @@
-import { Card, Group, Stack, Text, TextInput } from '@mantine/core';
+import { Card, Group, Select, Stack, Text, TextInput } from '@mantine/core';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { DeleteItemModal, ManagementPill } from 'components';
-import { useCommonHooks, useMutationAPI } from 'hooks';
+import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { cardClasses, textInputClasses } from 'styles';
-import type { Bookmark } from 'types';
+import { cardClasses, selectClasses, textInputClasses } from 'styles';
+import type { Bookmark, BookmarkGroup } from 'types';
 
 function DebouncedBookmarkItem({
 	bookmarkItem,
@@ -16,8 +16,11 @@ function DebouncedBookmarkItem({
 	const { handleDelete, isMobile, theme } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
-
+	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
+		endpoint: 'api/bookmarkCategories',
+	});
 	const [bookmark, setBookmark] = useState<Bookmark>(bookmarkItem);
+	const [groups, setGroups] = useState<BookmarkGroup[]>([]);
 	const [update, setUpdate] = useState<any>({});
 	const [debounced] = useDebouncedValue(update, 1000);
 	const handleClose = () => {
@@ -36,6 +39,16 @@ function DebouncedBookmarkItem({
 		}
 	}, [update]);
 
+	useEffect(() => {
+		if (groupData) {
+			setGroups(
+				groupData.sort(
+					(a: BookmarkGroup, b: BookmarkGroup) => a.categoryName > b.categoryName,
+				),
+			);
+		}
+	}, [groupData, groupsIsFetched]);
+
 	return (
 		<Card
 			p={isMobile ? 'xl' : undefined}
@@ -75,7 +88,11 @@ function DebouncedBookmarkItem({
 				}}
 				openModal={openModal}
 			/>
-			<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
+			<Group
+				justify='space-between'
+				pos={'relative'}
+				style={{ flexDirection: isMobile ? 'column' : 'row' }}
+			>
 				<TextInput
 					label={'Name'}
 					className={textInputClasses.settingsItem}
@@ -95,16 +112,29 @@ function DebouncedBookmarkItem({
 							: undefined
 					}
 				/>
-				<TextInput
+				<Select
 					label={'Category'}
-					className={textInputClasses.settingsItem}
-					classNames={textInputClasses}
-					defaultValue={bookmark.category}
-					onChange={(event) => {
-						setUpdate({
-							...bookmark,
-							category: event.target.value,
-						});
+					className={selectClasses.settingsItem}
+					classNames={{
+						wrapper: selectClasses.menuSelectWrapper,
+						input: selectClasses.menuSelectInput,
+						label: selectClasses.menuSelectLabel,
+						options: selectClasses.menuSelectOptions,
+						option: selectClasses.menuSelectOption,
+						dropdown: selectClasses.dropdown,
+					}}
+					mt={'.75rem'}
+					limit={100}
+					defaultSearchValue={bookmark?.category}
+					data={groups.map((group) => {
+						return {
+							label: group.categoryName,
+							value: group.categoryName,
+						};
+					})}
+					defaultValue={bookmark?.category}
+					comboboxProps={{
+						zIndex: 3000,
 					}}
 					styles={
 						theme.textShadowsEnabled
@@ -113,6 +143,16 @@ function DebouncedBookmarkItem({
 								}
 							: undefined
 					}
+					onChange={(value: string | null) => {
+						setUpdate({
+							...bookmark,
+							category: value,
+						});
+					}}
+					searchable
+					maxDropdownHeight={175}
+					onDropdownOpen={() => setIsOpen(true)}
+					onDropdownClose={() => setIsOpen(false)}
 				/>
 			</Group>
 			<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>

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}

src/pages/settings/components/Theming/Themes/ThemeModal/ThemeModal.tsx

@@ -47,6 +47,7 @@ export function ThemeModal({
 					if (playlist.themeList.includes(`${selectedTheme.id}`)) {
 						return playlist;
 					}
+					return null;
 				})
 			: [];
 

src/pages/settings/components/Theming/Themes/Themes.tsx

@@ -109,6 +109,7 @@ export function Themes() {
 							if (t.backgroundImage !== 'none') {
 								return t.backgroundImage;
 							}
+							return undefined;
 						})
 						.map((t) => t.backgroundImage),
 				),