Style updates

src/hooks/useAPI.tsx

@@ -135,6 +135,8 @@ export function useMutationAPI() {
 				queryClient.refetchQueries({ queryKey: ['GET', 'api/bookmarkCategories'] });
 			endpoint === 'api/applicationOrder' &&
 				queryClient.refetchQueries({ queryKey: ['GET', 'api/applicationOrder'] });
+			endpoint === 'api/bookmarks' &&
+				queryClient.refetchQueries({ queryKey: ['GET', 'api/themes'] });
 		},
 		onSuccess: (_, { endpoint }) => {
 			queryClient.refetchQueries({
@@ -146,6 +148,8 @@ export function useMutationAPI() {
 				queryClient.refetchQueries({ queryKey: ['GET', 'api/bookmarkCategories'] });
 			endpoint === 'api/applicationOrder' &&
 				queryClient.refetchQueries({ queryKey: ['GET', 'api/applicationOrder'] });
+			endpoint === 'api/bookmarks' &&
+				queryClient.refetchQueries({ queryKey: ['GET', 'api/themes'] });
 		},
 	});
 }

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

@@ -16,8 +16,8 @@ import {
 import { useCommonHooks } from 'hooks';
 import { useFileUploadAPI, useMutationAPI } from 'hooks/useAPI';
 import { useState } from 'react';
-import { FiTrash } from 'react-icons/fi';
+import { FiEdit, FiTrash } from 'react-icons/fi';
-import { modalClasses, scrollAreaClasses } from 'styles';
+import { modalClasses, scrollAreaClasses, textInputClasses } from 'styles';
 
 function BackgroundModal({
 	backgroundModalOpened,
@@ -33,8 +33,10 @@ function BackgroundModal({
 	const [background, setBackground] = useState<File | null>(null);
 	const [fileName, setFileName] = useState<string>('');
 	const [newFileName, setNewFileName] = useState<string>('');
+	const [rename, setRename] = useState<string>('');
 	const [err, setErr] = useState<boolean>(false);
 	const [confirm, setConfirm] = useState<boolean>(false);
+	const [editing, setEditing] = useState<boolean>(false);
 	const { isMobile } = useCommonHooks();
 	const { mutateAsync: uploadAsync } = useFileUploadAPI();
 	const { mutateAsync } = useMutationAPI();
@@ -56,6 +58,7 @@ function BackgroundModal({
 				setNewFileName('');
 				handleBackgroundModalClose();
 				setConfirm(false);
+				setEditing(false);
 			}}
 			fullScreen={isMobile}
 			centered
@@ -72,7 +75,7 @@ function BackgroundModal({
 				</Modal.Header>
 				<Modal.Body p={'1rem'}>
 					<Stack align='center' w={'100%'}>
-						{confirm ? (
+						{confirm && (
 							<Stack
 								justify='center'
 								align='center'
@@ -144,7 +147,105 @@ function BackgroundModal({
 									</Button>
 								</Group>
 							</Stack>
-						) : (
+						)}
+						{editing && (
+							<Stack
+								justify='center'
+								align='center'
+								style={{
+									width: '100%',
+									height: '30rem',
+									backgroundColor: 'var(--mantine-color-search-0)',
+									padding: '1rem',
+									borderRadius: '.5rem',
+									backgroundFilter: 'blur(5px)',
+								}}
+							>
+								<Text fw={600} fz={'2rem'}>
+									Editing {fileName}
+								</Text>
+								{inUseBackgrounds.includes(fileName) && (
+									<Text fw={600} fz={'1.5rem'}>
+										Updating the name will update the associated themes.
+									</Text>
+								)}
+								<Group h={'100%'} mb={'1rem'}>
+									<TextInput
+										className={textInputClasses.settingsItem}
+										classNames={textInputClasses}
+										label='New Name'
+										onChange={(e) => setRename(e.target.value)}
+									/>
+									<Card
+										style={{
+											aspectRatio: '16/9',
+											height: '100%',
+											backgroundImage: `url(../../api/backgroundImages/${fileName})`,
+											backgroundSize: 'cover',
+											backgroundPosition: 'center',
+											backgroundRepeat: 'no-repeat',
+											padding: '2rem',
+											margin: '1rem',
+										}}
+									/>
+								</Group>
+								<Group>
+									<Button
+										mt={'auto'}
+										w={'min-content'}
+										color='green'
+										onClick={() => {
+											if (
+												!rename.endsWith('.png') &&
+												!rename.endsWith('.jpg') &&
+												!rename.endsWith('.jpeg')
+											) {
+												mutateAsync({
+													method: 'PATCH',
+													endpoint: 'api/backgrounds',
+													body: {
+														fileName,
+														newFileName: `${rename}${fileName.substring(
+															fileName.lastIndexOf('.'),
+															fileName.length,
+														)}`,
+													},
+												});
+											} else {
+												mutateAsync({
+													method: 'PATCH',
+													endpoint: 'api/backgrounds',
+													body: {
+														fileName,
+														newFileName: rename,
+													},
+												});
+											}
+											setBackground(null);
+											setFileName('');
+											setNewFileName('');
+											setEditing(false);
+										}}
+									>
+										Save
+									</Button>
+									<Button
+										mt={'auto'}
+										w={'min-content'}
+										onClick={() => {
+											setBackground(null);
+											setFileName('');
+											setNewFileName('');
+											setEditing(false);
+											setFileName('');
+										}}
+									>
+										Cancel
+									</Button>
+								</Group>
+							</Stack>
+						)}
+						{!editing && !confirm && (
 							<ScrollArea
 								className={scrollAreaClasses.default}
 								classNames={scrollAreaClasses}
@@ -189,6 +290,20 @@ function BackgroundModal({
 														margin: '1rem',
 													}}
 												/>
+												<ActionIcon
+													style={{
+														position: 'absolute',
+														bottom: '.5rem',
+														right: '2.5rem',
+														zIndex: 3,
+													}}
+													onClick={() => {
+														setFileName(background);
+														setEditing(true);
+													}}
+												>
+													<FiEdit />
+												</ActionIcon>
 												<ActionIcon
 													color='var(--mantine-color-red-6)'
 													style={{
@@ -217,13 +332,14 @@ function BackgroundModal({
 							justify='space-between'
 							p={16}
 						>
-							{confirm && (
+							{confirm ||
-								<Overlay
+								(editing && (
-									opacity={1}
+									<Overlay
-									color='var(--mantine-color-search-0)'
+										opacity={1}
-									style={{ borderRadius: '.5rem', backdropFilter: 'blur(5px)' }}
+										color='var(--mantine-color-search-0)'
-								/>
+										style={{ borderRadius: '.5rem', backdropFilter: 'blur(5px)' }}
-							)}
+									/>
+								))}
 							<Group gap={0}>
 								<Stack gap={0} w={'60%'}>
 									<FileInput

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

@@ -89,9 +89,19 @@ function ThemeCard({
 				h={'115px'}
 				disabled={currentTheme === 'random'}
 				style={{
-					background: `linear-gradient(${cardTheme.backgroundColor}33, ${cardTheme.backgroundColor}33), no-repeat center url(../../api/backgroundImages/${cardTheme.backgroundImage})`,
+					backgroundImage:
-					backgroundSize: 'cover',
+						cardTheme?.backgroundImage.toLocaleLowerCase() !== 'none'
-					backgroundColor: cardTheme.backgroundColor,
+							? `linear-gradient(${cardTheme?.backgroundColor}33, ${cardTheme?.backgroundColor}33), url(../../api/backgroundImages/${cardTheme?.backgroundImage})`
+							: undefined,
+					backgroundSize:
+						cardTheme?.backgroundImage.toLocaleLowerCase() !== 'none'
+							? 'cover'
+							: undefined,
+					backgroundColor:
+						cardTheme?.backgroundImage.toLocaleLowerCase() === 'none'
+							? cardTheme?.backgroundColor
+							: undefined,
+					backgroundPosition: 'center',
 					border: `solid ${cardTheme.borderColor}`,
 					filter: cardTheme.randomEnabled === 0 ? 'saturate(0)' : undefined,
 				}}

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

@@ -14,9 +14,16 @@ function ThemeMiniCard({ allThemes, item }: { allThemes: Theme[]; item: number }
 			w={'175px'}
 			h={'60px'}
 			style={{
-				backgroundImage: `linear-gradient(${theme?.backgroundColor}33, ${theme?.backgroundColor}33), url(../../api/backgroundImages/${theme?.backgroundImage})`,
+				backgroundImage:
-				backgroundSize: 'cover',
+					theme?.backgroundImage.toLocaleLowerCase() !== 'none'
-				backgroundColor: theme?.backgroundColor,
+						? `linear-gradient(${theme?.backgroundColor}33, ${theme?.backgroundColor}33), url(../../api/backgroundImages/${theme?.backgroundImage})`
+						: undefined,
+				backgroundSize:
+					theme?.backgroundImage.toLocaleLowerCase() !== 'none' ? 'cover' : undefined,
+				backgroundColor:
+					theme?.backgroundImage.toLocaleLowerCase() === 'none'
+						? theme?.backgroundColor
+						: undefined,
 				backgroundPosition: 'center',
 				border: `solid ${theme?.borderColor}`,
 				borderRadius: '8px',

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

@@ -18,7 +18,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
 						: undefined,
 				backgroundPosition: 'center',
 				borderRadius: '10px',
-				border: '2px solid',
+				border: '2px solid var(--mantine-color-primary-0)',
 			}}
 		>
 			<Group

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

@@ -11,7 +11,7 @@ import { useCommonHooks } from 'hooks';
 import { useEffect, useState } from 'react';
 import { modalClasses, textInputClasses } from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
-import ThemeMiniCard from './ThemeMiniCard';
+import ThemePreviewMiddleware from './ThemePreivewMiddleware';
 import TimeOfDay from './TimeOfDay';
 
 function ThemePlaylistModal({
@@ -45,6 +45,7 @@ function ThemePlaylistModal({
 	if (selectedPlaylist?.name === undefined) {
 		setSelectedPlaylist(defaultPlaylist);
 	}
+
 	return (
 		<Modal.Root
 			size={'50%'}
@@ -100,31 +101,15 @@ function ThemePlaylistModal({
 									allThemes?.map((miniTheme: Theme) => {
 										const newThemeList = themeList;
 										return (
-											<Group
+											<ThemePreviewMiddleware
 												key={miniTheme.id}
-												style={{
+												newThemeList={newThemeList}
-													cursor: 'pointer',
+												miniTheme={miniTheme}
-													filter:
+												themeList={themeList}
-														newThemeList && !newThemeList?.includes(miniTheme.id)
+												allThemes={allThemes}
-															? 'saturate(0)'
+												selectedPlaylist={selectedPlaylist}
-															: undefined,
+												setSelectedPlaylist={setSelectedPlaylist}
-												}}
+											/>
-												onClick={() => {
-													const newSelectedPlaylist = { ...selectedPlaylist };
-													if (themeList?.includes(miniTheme.id)) {
-														newThemeList.splice(themeList.indexOf(miniTheme.id), 1);
-													} else {
-														newThemeList.push(miniTheme.id);
-													}
-													newSelectedPlaylist.themeList = JSON.stringify(newThemeList);
-													setSelectedPlaylist(newSelectedPlaylist);
-												}}
-											>
-												<ThemeMiniCard
-													allThemes={allThemes}
-													item={Number(miniTheme.id)}
-												/>
-											</Group>
 										);
 									})}
 							</SimpleGrid>

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

@@ -68,6 +68,7 @@ function ThemePlaylists() {
 			setIsLoading(false);
 		}
 	}, [themePlaylistData, isThemePlaylistDataFetched, debouncedSearch]);
+
 	return (
 		<Stack>
 			<ThemePlaylistModal
@@ -228,7 +229,10 @@ function ThemePlaylists() {
 								<Box>
 									<ThemePlaylistCard
 										cardPlaylist={{
-											id: undefined,
+											id:
+												themePlaylists?.filter(
+													(a: ThemePlaylist) => a.name === 'Time of Day',
+												)[0]?.id ?? undefined,
 											name: 'Time of Day',
 											default: 1,
 											themeList:

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

@@ -0,0 +1,85 @@
+import { Group, Overlay, Popover } from '@mantine/core';
+import { useLongPress } from '@mantine/hooks';
+import { useState } from 'react';
+import ThemeMiniCard from './ThemeMiniCard';
+import ThemeModalContent from './ThemeModalContent';
+
+function ThemePreviewMiddleware({
+	newThemeList,
+	miniTheme,
+	themeList,
+	allThemes,
+	selectedPlaylist,
+	setSelectedPlaylist,
+}: {
+	newThemeList: number[];
+	miniTheme: any;
+	themeList: number[];
+	allThemes: any;
+	selectedPlaylist: any;
+	setSelectedPlaylist: (selectedPlaylist: any) => void;
+}) {
+	const [pressed, setPressed] = useState<any>(false);
+	const handlers = useLongPress(() => {
+		setPressed(true);
+	});
+	return (
+		<Popover
+			key={miniTheme.id}
+			withArrow
+			opened={pressed}
+			{...handlers}
+			arrowSize={16}
+			transitionProps={{ duration: 200, timingFunction: 'ease' }}
+		>
+			<Popover.Target>
+				<Group
+					style={{
+						cursor: 'pointer',
+						filter:
+							newThemeList && !newThemeList?.includes(miniTheme.id)
+								? 'saturate(0)'
+								: undefined,
+					}}
+					onClick={() => {
+						if (!pressed) {
+							const newSelectedPlaylist = { ...selectedPlaylist };
+							if (themeList?.includes(miniTheme.id)) {
+								newThemeList.splice(themeList.indexOf(miniTheme.id), 1);
+							} else {
+								newThemeList.push(miniTheme.id);
+							}
+							newSelectedPlaylist.themeList = JSON.stringify(newThemeList);
+							setSelectedPlaylist(newSelectedPlaylist);
+						} else {
+							setPressed(false);
+						}
+					}}
+				>
+					<ThemeMiniCard allThemes={allThemes} item={Number(miniTheme.id)} />
+				</Group>
+			</Popover.Target>
+			<Popover.Dropdown
+				bg={'var(--mantine-color-primary-0)'}
+				p={0}
+				style={{ border: 'none' }}
+			>
+				<Overlay
+					w={'calc(300%)'}
+					h={'calc(300%)'}
+					pos={'absolute'}
+					left={'-100%'}
+					top={'-100%'}
+					zIndex={-1}
+					opacity={0.8}
+					bg={
+						'radial-gradient(circle, var(--mantine-color-primary-0) 0%, transparent 60%)'
+					}
+				/>
+				<ThemeModalContent selectedTheme={miniTheme} />
+			</Popover.Dropdown>
+		</Popover>
+	);
+}
+
+export default ThemePreviewMiddleware;

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

@@ -59,9 +59,17 @@ function ThemeSelect({
 						textAlign: 'center',
 						height: '60px',
 						color: theme?.primaryColor,
-						background: `linear-gradient(${theme?.backgroundColor}33, ${theme?.backgroundColor}33), no-repeat center url(../../api/backgroundImages/${theme?.backgroundImage})`,
+						backgroundImage:
-						backgroundSize: 'cover',
+							theme?.backgroundImage.toLocaleLowerCase() !== 'none'
-						backgroundColor: theme?.backgroundColor,
+								? `linear-gradient(${theme?.backgroundColor}33, ${theme?.backgroundColor}33), url(../../api/backgroundImages/${theme?.backgroundImage})`
+								: undefined,
+						backgroundSize:
+							theme?.backgroundImage.toLocaleLowerCase() !== 'none' ? 'cover' : undefined,
+						backgroundColor:
+							theme?.backgroundImage.toLocaleLowerCase() === 'none'
+								? theme?.backgroundColor
+								: undefined,
+						backgroundPosition: 'center',
 						border: `solid ${theme?.borderColor}`,
 						borderRadius: '8px',
 					},
@@ -78,9 +86,19 @@ function ThemeSelect({
 							w={'100%'}
 							h={'60px'}
 							style={{
-								background: `linear-gradient(${theme?.backgroundColor}33, ${theme?.backgroundColor}33), no-repeat center url(../../api/backgroundImages/${theme?.backgroundImage})`,
+								backgroundImage:
-								backgroundSize: 'cover',
+									theme?.backgroundImage.toLocaleLowerCase() !== 'none'
-								backgroundColor: theme?.backgroundColor,
+										? `linear-gradient(${theme?.backgroundColor}33, ${theme?.backgroundColor}33), url(../../api/backgroundImages/${theme?.backgroundImage})`
+										: undefined,
+								backgroundSize:
+									theme?.backgroundImage.toLocaleLowerCase() !== 'none'
+										? 'cover'
+										: undefined,
+								backgroundColor:
+									theme?.backgroundImage.toLocaleLowerCase() === 'none'
+										? theme?.backgroundColor
+										: undefined,
+								backgroundPosition: 'center',
 								border: `solid ${theme?.borderColor}`,
 								borderRadius: '8px',
 							}}