Background uploads

package-lock.json

@@ -13,9 +13,9 @@
 				"@mantine/form": "^8.1.1",
 				"@mantine/hooks": "^8.1.1",
 				"@mantine/notifications": "^8.1.1",
-				"@tanstack/react-query": "^5.80.7",
+				"@tanstack/react-query": "^5.80.10",
-				"@tanstack/react-query-devtools": "^5.80.7",
+				"@tanstack/react-query-devtools": "^5.80.10",
-				"@tanstack/react-query-persist-client": "^5.80.7",
+				"@tanstack/react-query-persist-client": "^5.80.10",
 				"idb-keyval": "^6.2.2",
 				"jotai": "^2.12.5",
 				"react": "^19.1.0",
@@ -1592,9 +1592,9 @@
 			}
 		},
 		"node_modules/@tanstack/query-core": {
-			"version": "5.80.7",
+			"version": "5.80.10",
-			"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.80.7.tgz",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.80.10.tgz",
-			"integrity": "sha512-s09l5zeUKC8q7DCCCIkVSns8zZrK4ZDT6ryEjxNBFi68G4z2EBobBS7rdOY3r6W1WbUDpc1fe5oY+YO/+2UVUg==",
+			"integrity": "sha512-mUNQOtzxkjL6jLbyChZoSBP6A5gQDVRUiPvW+/zw/9ftOAz+H754zCj3D8PwnzPKyHzGkQ9JbH48ukhym9LK1Q==",
 			"license": "MIT",
 			"funding": {
 				"type": "github",
@@ -1612,12 +1612,12 @@
 			}
 		},
 		"node_modules/@tanstack/query-persist-client-core": {
-			"version": "5.80.7",
+			"version": "5.80.10",
-			"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.80.7.tgz",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.80.10.tgz",
-			"integrity": "sha512-/V+zw5cGseMzzI9SfI5eem+826gMhnouMi0X7Da41dVC96xNvdyed+FHtIKaSXyCm4YpcPUtyA5eHG4Ng7yU8g==",
+			"integrity": "sha512-3fcLDW4hDkiGfG/NRj6hgl/+G94lsgtx/Wj9jxuUN0LiawKpIMfGrSNCERFPYpJMuTtCyX9A2mqHE++sV13lsA==",
 			"license": "MIT",
 			"dependencies": {
-				"@tanstack/query-core": "5.80.7"
+				"@tanstack/query-core": "5.80.10"
 			},
 			"funding": {
 				"type": "github",
@@ -1625,12 +1625,12 @@
 			}
 		},
 		"node_modules/@tanstack/react-query": {
-			"version": "5.80.7",
+			"version": "5.80.10",
-			"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.80.7.tgz",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.80.10.tgz",
-			"integrity": "sha512-u2F0VK6+anItoEvB3+rfvTO9GEh2vb00Je05OwlUe/A0lkJBgW1HckiY3f9YZa+jx6IOe4dHPh10dyp9aY3iRQ==",
+			"integrity": "sha512-6zM098J8sLy9oU60XAdzUlAH4wVzoMVsWUWiiE/Iz4fd67PplxeyL4sw/MPcVJJVhbwGGXCsHn9GrQt2mlAzig==",
 			"license": "MIT",
 			"dependencies": {
-				"@tanstack/query-core": "5.80.7"
+				"@tanstack/query-core": "5.80.10"
 			},
 			"funding": {
 				"type": "github",
@@ -1641,9 +1641,9 @@
 			}
 		},
 		"node_modules/@tanstack/react-query-devtools": {
-			"version": "5.80.7",
+			"version": "5.80.10",
-			"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.80.7.tgz",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.80.10.tgz",
-			"integrity": "sha512-7Dz/19fVo0i+jgLVBabV5vfGOlLyN5L1w8w1/ogFhe6ItNNsNA+ZgNTbtiKpbR3CcX2WDRRTInz1uMSmHzTsoQ==",
+			"integrity": "sha512-6JL63fSc7kxyGOLV2w466SxhMn/m7LZk/ximQciy6OpVt+n2A8Mq3S0QwhIzfm4WEwLK/F3OELfzRToQburnYA==",
 			"license": "MIT",
 			"dependencies": {
 				"@tanstack/query-devtools": "5.80.0"
@@ -1653,24 +1653,24 @@
 				"url": "https://github.com/sponsors/tannerlinsley"
 			},
 			"peerDependencies": {
-				"@tanstack/react-query": "^5.80.7",
+				"@tanstack/react-query": "^5.80.10",
 				"react": "^18 || ^19"
 			}
 		},
 		"node_modules/@tanstack/react-query-persist-client": {
-			"version": "5.80.7",
+			"version": "5.80.10",
-			"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.80.7.tgz",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.80.10.tgz",
-			"integrity": "sha512-ZRu+rx43hiamk+oz6cY+ecaviavE+0Lt2jFjuM2zOtvl3Q4/PNHCwd3YrHafvDpJESFmhnMCZb8YfQl304S/8w==",
+			"integrity": "sha512-0LcPhQElmffSNXh+omPOOZJnutk7Z7NMTrWl9WP3aH7Xn4OaFXImkyey1ajez5o23D8TFwj3kHmi/85J+E6sgQ==",
 			"license": "MIT",
 			"dependencies": {
-				"@tanstack/query-persist-client-core": "5.80.7"
+				"@tanstack/query-persist-client-core": "5.80.10"
 			},
 			"funding": {
 				"type": "github",
 				"url": "https://github.com/sponsors/tannerlinsley"
 			},
 			"peerDependencies": {
-				"@tanstack/react-query": "^5.80.7",
+				"@tanstack/react-query": "^5.80.10",
 				"react": "^18 || ^19"
 			}
 		},

package.json

@@ -15,9 +15,9 @@
 		"@mantine/form": "^8.1.1",
 		"@mantine/hooks": "^8.1.1",
 		"@mantine/notifications": "^8.1.1",
-		"@tanstack/react-query": "^5.80.7",
+		"@tanstack/react-query": "^5.80.10",
-		"@tanstack/react-query-devtools": "^5.80.7",
+		"@tanstack/react-query-devtools": "^5.80.10",
-		"@tanstack/react-query-persist-client": "^5.80.7",
+		"@tanstack/react-query-persist-client": "^5.80.10",
 		"idb-keyval": "^6.2.2",
 		"jotai": "^2.12.5",
 		"react": "^19.1.0",

src/hooks/useAPI.tsx

@@ -224,37 +224,63 @@ export function useFileUploadAPI() {
 		endpoint: string,
 		body?: object | FormData | undefined | null,
 	) => {
+		const id = notifications.show({
+			loading: true,
+			title: (
+				<Text fw={600} c={'var(--mantine-color-accent-0)'}>
+					{method} {endpoint}
+				</Text>
+			),
+			message: <Text c={'var(--mantine-color-primary-0)'}>{'Uploading image...'}</Text>,
+			autoClose: false,
+			withCloseButton: false,
+			icon: <VscLoading size={24} />,
+		});
 		const options = {
 			method: method,
-			headers: headers,
 			body: body ?? undefined,
 		};
-		const response = await fetch(url, options as unknown as Body);
+		const response = await fetch(`${url}/${endpoint}`, options as unknown as Body);
 		if (!response.ok) {
 			const responseData = await response.json();
-			if (typeof responseData.detail !== 'string') {
+			if (typeof responseData === 'object') {
-				const errorResponse = JSON.stringify({
+				if (responseData.error.code === 'ER_DUP_ENTRY') {
-					status: response.status,
+					setTimeout(() => {
-					statusText: response.statusText,
+						notifications.update({
-					method: options.method,
+							id: id,
-					endpoint: endpoint,
+							loading: false,
-					msg: responseData.detail[0].msg,
+							title: (
-					loc: responseData.detail[0].loc,
+								<Text fw={600} c={'var(--mantine-color-accent-0)'}>
-					type: responseData.detail[0].type,
+									{method} Failure!
-				});
+								</Text>
-
+							),
-				throw new Error(errorResponse);
+							message: (
+								<Text c={'var(--mantine-color-primary-0)'}>
+									Entry with that name already exists.
+								</Text>
+							),
+							autoClose: 2500,
+							icon: <FaCheck size={24} />,
+						});
+					}, 2500);
+				}
 			}
-			const errorResponse = JSON.stringify({
+			return await responseData;
-				status: response.status,
-				statusText: response.statusText,
-				method: options.method,
-				endpoint: endpoint,
-				msg: responseData.detail,
-			});
-
-			throw new Error(errorResponse);
 		}
+		setTimeout(() => {
+			notifications.update({
+				id: id,
+				loading: false,
+				title: (
+					<Text fw={600} c={'var(--mantine-color-accent-0)'}>
+						{method} Success!
+					</Text>
+				),
+				message: <Text c={'var(--mantine-color-primary-0)'}>{response.statusText}</Text>,
+				autoClose: 2500,
+				icon: <FaCheck size={24} />,
+			});
+		}, 2500);
 		return await response.json();
 	};
 
@@ -270,12 +296,8 @@ export function useFileUploadAPI() {
 			body: object | FormData | undefined | null;
 		}) => callEndpoint(method, endpoint, body),
 		onMutate: () => {},
-		onSuccess: (variables) => {
+		onSuccess: (_variables) => {
-			queryClient.invalidateQueries({ queryKey: ['GET', variables.endpoint] });
+			queryClient.invalidateQueries({ queryKey: ['GET', 'api/backgrounds'] });
-			if (variables.endpoint?.includes('/')) {
-				const GetEndpoint = variables.endpoint.split('/')[1];
-				queryClient.invalidateQueries({ queryKey: ['GET', `/${GetEndpoint}`] });
-			}
 		},
 	});
 }

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

@@ -0,0 +1,163 @@
+import {
+	ActionIcon,
+	Button,
+	Card,
+	FileInput,
+	Group,
+	Modal,
+	ScrollArea,
+	SimpleGrid,
+	Text,
+} from '@mantine/core';
+import { useCommonHooks } from 'hooks';
+import { useFileUploadAPI, useMutationAPI } from 'hooks/useAPI';
+import { useState } from 'react';
+import { FiTrash } from 'react-icons/fi';
+import { modalClasses } from 'styles';
+
+function BackgroundModal({
+	backgroundModalOpened,
+	handleBackgroundModalClose,
+	backgroundList,
+}: {
+	backgroundModalOpened: boolean;
+	handleBackgroundModalClose: () => void;
+	backgroundList: string[];
+}) {
+	const [background, setBackground] = useState<File | null>(null);
+	const [err, setErr] = useState<boolean>(false);
+	const { isMobile } = useCommonHooks();
+	const { mutateAsync: uploadAsync } = useFileUploadAPI();
+	const { mutateAsync } = useMutationAPI();
+	const fd = new FormData();
+	const handleFileUpload = (e: any) => {
+		setErr(false);
+		setBackground(e);
+	};
+	return (
+		<Modal.Root
+			size={'50%'}
+			className={modalClasses.editThemeModal}
+			classNames={modalClasses}
+			opened={backgroundModalOpened}
+			onClose={() => {
+				handleBackgroundModalClose();
+				setBackground(null);
+			}}
+			fullScreen={isMobile}
+			centered
+		>
+			<Modal.Overlay style={{ backdropFilter: 'blur(5px)' }} />
+			<Modal.Content>
+				<Modal.Header style={{ justifyContent: 'center' }}>
+					<Group pos={'absolute'}>
+						<Text c={'var(--mantine-color-background-0)'}>Backgrounds</Text>
+					</Group>
+					<Modal.CloseButton />
+				</Modal.Header>
+				<Modal.Body p={'2rem'}>
+					<ScrollArea
+						type={'always'}
+						style={{
+							width: '100%',
+							height: '20rem',
+							backgroundColor: 'var(--mantine-color-background-0)',
+						}}
+					>
+						<SimpleGrid w={'100%'} cols={3} p={'.5rem'}>
+							{backgroundList
+								.filter((background) => background !== 'None')
+								.map((background) => (
+									<Group key={background} display={'flex'} pos={'relative'}>
+										<Text
+											style={{
+												color: 'var(--mantine-color-primary-0)',
+												backgroundColor: 'var(--mantine-color-accent-0)',
+												padding: '.25rem',
+												borderRadius: '.5rem',
+												position: 'absolute',
+												top: '-.5rem',
+												left: 0,
+												zIndex: 3,
+											}}
+										>
+											{background}
+										</Text>
+										<Card
+											style={{
+												aspectRatio: '16/9',
+												width: '100%',
+												backgroundImage: `url(/backgrounds/${background})`,
+												backgroundSize: 'cover',
+												backgroundPosition: 'center',
+												backgroundRepeat: 'no-repeat',
+												padding: '2rem',
+												margin: '1rem',
+											}}
+										/>
+										<ActionIcon
+											style={{
+												color: 'red',
+												position: 'absolute',
+												bottom: '.5rem',
+												right: '.5rem',
+												zIndex: 3,
+											}}
+											onClick={() => {
+												mutateAsync({
+													method: 'DELETE',
+													endpoint: 'api/backgrounds',
+													body: { background },
+												});
+											}}
+										>
+											<FiTrash />
+										</ActionIcon>
+									</Group>
+								))}
+						</SimpleGrid>
+					</ScrollArea>
+					<FileInput
+						clearable
+						accept='image/png,image/jpeg'
+						value={background}
+						onChange={handleFileUpload}
+						label={'Upload Background'}
+						placeholder={'Upload Background'}
+						p={'xl'}
+						w={'100%'}
+						error={err && 'Please upload a background'}
+						styles={{
+							input: {
+								color: 'var(--mantine-color-primary-0)',
+							},
+							placeholder: {
+								color: 'var(--mantine-color-accent-0)',
+							},
+						}}
+					/>
+					<Button
+						onClick={() => {
+							if (background) {
+								fd.append('background', background || '');
+								uploadAsync({
+									method: 'POST',
+									endpoint: 'api/backgrounds',
+									body: fd,
+								});
+								handleBackgroundModalClose();
+								setBackground(null);
+								setErr(false);
+							} else {
+								setErr(true);
+							}
+						}}
+					>
+						Upload
+					</Button>
+				</Modal.Body>
+			</Modal.Content>
+		</Modal.Root>
+	);
+}
+export default BackgroundModal;

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

@@ -1,4 +1,4 @@
-import { Box, Group, Stack, Text } from '@mantine/core';
+import { Box, Group, SimpleGrid, Stack, Text } from '@mantine/core';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
@@ -258,41 +258,43 @@ function ThemePlaylists() {
 							mb={isMobile ? '6rem' : undefined}
 						>
 							{themePlaylists.length > 0 ? (
-								themePlaylists
+								<SimpleGrid cols={4}>
-									.filter((playlist: ThemePlaylist) => playlist.default === 0)
+									{themePlaylists
-									.sort((a: ThemePlaylist, b: ThemePlaylist) =>
+										.filter((playlist: ThemePlaylist) => playlist.default === 0)
-										a.name > b.name ? 1 : -1,
+										.sort((a: ThemePlaylist, b: ThemePlaylist) =>
-									)
+											a.name > b.name ? 1 : -1,
-									.map((cardPlaylist: ThemePlaylist) => {
+										)
-										return (
+										.map((cardPlaylist: ThemePlaylist) => {
-											<Group key={cardPlaylist.name} pos={'relative'}>
+											return (
-												{cardPlaylist.name === currentThemePlaylist && (
+												<Group key={cardPlaylist.name} pos={'relative'}>
-													<FiChevronRight
+													{cardPlaylist.name === currentThemePlaylist && (
-														style={{
+														<FiChevronRight
-															position: 'absolute',
+															style={{
-															left: -14,
+																position: 'absolute',
-															zIndex: 10,
+																left: -14,
-															fontSize: '2rem',
+																zIndex: 10,
-															fontWeight: 'bold',
+																fontSize: '2rem',
-															borderRadius: '50%',
+																fontWeight: 'bold',
-															backgroundColor: 'var(--mantine-color-border-0)',
+																borderRadius: '50%',
-															color:
+																backgroundColor: 'var(--mantine-color-border-0)',
-																theme.borderColor === theme.primaryColor
+																color:
-																	? 'var(--mantine-color-accent-0)'
+																	theme.borderColor === theme.primaryColor
-																	: 'var(--mantine-color-primary-0)',
+																		? 'var(--mantine-color-accent-0)'
-														}}
+																		: 'var(--mantine-color-primary-0)',
-													/>
+															}}
-												)}
+														/>
-												<Box>
+													)}
-													<ThemePlaylistCard
+													<Box>
-														cardPlaylist={cardPlaylist}
+														<ThemePlaylistCard
-														handleOpen={handleOpen}
+															cardPlaylist={cardPlaylist}
-														allThemes={allThemeData}
+															handleOpen={handleOpen}
-													/>
+															allThemes={allThemeData}
-												</Box>
+														/>
-											</Group>
+													</Box>
-										);
+												</Group>
-									})
+											);
+										})}
+								</SimpleGrid>
 							) : (
 								<Group w={'100%'} style={{ display: 'flex', justifyContent: 'center' }}>
 									<NoItemsFound />

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

@@ -9,6 +9,7 @@ import { switchClasses, textClasses } from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
 import NoItemsFound from '../Shared/NoItemsFound';
 import SettingsHeader from '../Shared/SettingsHeader';
+import BackgroundModal from './BackgroundModal';
 import ThemeCard from './ThemeCard';
 import ThemeModal from './ThemeModal';
 
@@ -27,7 +28,12 @@ function ThemesSettings() {
 	});
 	const [themePlaylists, setThemePlaylists] = useState<ThemePlaylist[]>([]);
 	const { mutateAsync } = useMutationAPI();
-	const [opened, { open, close }] = useDisclosure(false);
+	const [themeModalOpened, { open: openThemeModal, close: closeThemeModal }] =
+		useDisclosure(false);
+	const [
+		backgroundModalOpened,
+		{ open: openBackgroundModal, close: closeBackgroundModal },
+	] = useDisclosure(false);
 	const [colorId, setColorId] = useState<string>('');
 	const [colorValue, setColorValue] = useState('#000000');
 	const [backgroundList, setBackgroundList] = useState<string[]>(['None']);
@@ -57,11 +63,11 @@ function ThemesSettings() {
 	} = useCommonHooks();
 	const handleOpen = (theme: Theme) => {
 		setSelectedTheme(theme);
-		open();
+		openThemeModal();
 	};
 
 	const handleClose = () => {
-		close();
+		closeThemeModal();
 		closePicker();
 		setSelectedTheme({
 			id: undefined,
@@ -76,6 +82,10 @@ function ThemesSettings() {
 		});
 	};
 
+	const handleBackgroundModalClose = () => {
+		closeBackgroundModal();
+	};
+
 	const handleSaveTheme = () => {
 		mutateAsync({
 			method: selectedTheme?.id === undefined ? 'POST' : 'PATCH',
@@ -112,7 +122,7 @@ function ThemesSettings() {
 	return (
 		<Stack w={'100%'} align='center'>
 			<ThemeModal
-				opened={opened}
+				opened={themeModalOpened}
 				handleClose={handleClose}
 				selectedTheme={selectedTheme}
 				setSelectedTheme={setSelectedTheme}
@@ -126,9 +136,14 @@ function ThemesSettings() {
 				closePicker={closePicker}
 				handleSaveTheme={handleSaveTheme}
 			/>
+			<BackgroundModal
+				backgroundModalOpened={backgroundModalOpened}
+				handleBackgroundModalClose={handleBackgroundModalClose}
+				backgroundList={backgroundList}
+			/>
 			<SettingsHeader
 				setDragging={undefined}
-				openModal={open}
+				openModal={openThemeModal}
 				title={'Themes'}
 				tooltip={{
 					title: 'Themes can be created here and applied to the homepage.',
@@ -232,7 +247,7 @@ function ThemesSettings() {
 					bottom: isMobile ? '3.25rem' : 0,
 				}}
 			>
-				<Group w={isMobile ? undefined : '100%'}>
+				<Group w={isMobile ? undefined : '100%'} justify='space-between'>
 					<Text
 						miw={isMobile ? 100 : undefined}
 						className={textClasses.settingsSubTitle}
@@ -303,6 +318,16 @@ function ThemesSettings() {
 							</Group>
 						</Tooltip>
 					</Group>
+					<Button
+						style={{
+							zIndex: 200,
+						}}
+						onClick={() => {
+							openBackgroundModal();
+						}}
+					>
+						Manage Backgrounds
+					</Button>
 				</Group>
 			</Group>
 		</Stack>