Bug fixes

package-lock.json

@@ -13,19 +13,19 @@
 				"@mantine/form": "^8.1.2",
 				"@mantine/hooks": "^8.1.2",
 				"@mantine/notifications": "^8.1.2",
-				"@tanstack/react-query": "^5.81.4",
+				"@tanstack/react-query": "^5.81.5",
-				"@tanstack/react-query-devtools": "^5.81.4",
+				"@tanstack/react-query-devtools": "^5.81.5",
-				"@tanstack/react-query-persist-client": "^5.81.4",
+				"@tanstack/react-query-persist-client": "^5.81.5",
 				"idb-keyval": "^6.2.2",
 				"jotai": "^2.12.5",
 				"react": "^19.1.0",
 				"react-dom": "^19.1.0",
 				"react-icons": "^5.5.0",
-				"react-router-dom": "^7.6.2",
+				"react-router-dom": "^7.6.3",
 				"recharts": "^3.0.2"
 			},
 			"devDependencies": {
-				"@types/node": "^24.0.4",
+				"@types/node": "^24.0.8",
 				"@types/react": "^19.1.8",
 				"@types/react-dom": "^19.1.6",
 				"@vitejs/plugin-react": "^4.6.0",
@@ -1630,9 +1630,9 @@
 			"license": "MIT"
 		},
 		"node_modules/@tanstack/query-core": {
-			"version": "5.81.4",
+			"version": "5.81.5",
-			"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.81.4.tgz",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.81.5.tgz",
-			"integrity": "sha512-z0yBgRFTPIEYcjFFiahOwtEU3kEKpF5Rwls7UjBCsRghmhwIXyxd5U2p0yEmUfcwm85W4XZkt4dc1OWc5my3Yw==",
+			"integrity": "sha512-ZJOgCy/z2qpZXWaj/oxvodDx07XcQa9BF92c0oINjHkoqUPsmm3uG08HpTaviviZ/N9eP1f9CM7mKSEkIo7O1Q==",
 			"license": "MIT",
 			"funding": {
 				"type": "github",
@@ -1650,12 +1650,12 @@
 			}
 		},
 		"node_modules/@tanstack/query-persist-client-core": {
-			"version": "5.81.4",
+			"version": "5.81.5",
-			"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.81.4.tgz",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.81.5.tgz",
-			"integrity": "sha512-8SlCCzIPBYCOfWRPUGkzJAdPMu+7JT42J51n6rWvaLVj20mzrVX2EKTtm7QoP19LdX+prS8ndCMClrILQi7nUA==",
+			"integrity": "sha512-imiMWYXf8KuXavOgVRc5IDixqP0VKEN6IxZ/vyuX87Wk0eX7QmRtjLn1AD4Hz7GxYPM3RalRzP5Bshc30hgOcg==",
 			"license": "MIT",
 			"dependencies": {
-				"@tanstack/query-core": "5.81.4"
+				"@tanstack/query-core": "5.81.5"
 			},
 			"funding": {
 				"type": "github",
@@ -1663,12 +1663,12 @@
 			}
 		},
 		"node_modules/@tanstack/react-query": {
-			"version": "5.81.4",
+			"version": "5.81.5",
-			"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.81.4.tgz",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.81.5.tgz",
-			"integrity": "sha512-bBrf5kTNr9t5BnskvyHQGwe2LRZsgnmx1sClyRQbAHxhSJfnT6z9h27IfGpY6JtfEH5y5R9jJegTG/93zyox/A==",
+			"integrity": "sha512-lOf2KqRRiYWpQT86eeeftAGnjuTR35myTP8MXyvHa81VlomoAWNEd8x5vkcAfQefu0qtYCvyqLropFZqgI2EQw==",
 			"license": "MIT",
 			"dependencies": {
-				"@tanstack/query-core": "5.81.4"
+				"@tanstack/query-core": "5.81.5"
 			},
 			"funding": {
 				"type": "github",
@@ -1679,9 +1679,9 @@
 			}
 		},
 		"node_modules/@tanstack/react-query-devtools": {
-			"version": "5.81.4",
+			"version": "5.81.5",
-			"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.81.4.tgz",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.81.5.tgz",
-			"integrity": "sha512-zFg7rzOmM9Q+Ym/TujWR4HD+jKwQd+N8WuWZRmHU8sjI2flyxWTWIEQvl9BFt+HiNA6leS3ODZ9SHYmEb3zduw==",
+			"integrity": "sha512-lCGMu4RX0uGnlrlLeSckBfnW/UV+KMlTBVqa97cwK7Z2ED5JKnZRSjNXwoma6sQBTJrcULvzgx2K6jEPvNUpDw==",
 			"license": "MIT",
 			"dependencies": {
 				"@tanstack/query-devtools": "5.81.2"
@@ -1691,24 +1691,24 @@
 				"url": "https://github.com/sponsors/tannerlinsley"
 			},
 			"peerDependencies": {
-				"@tanstack/react-query": "^5.81.4",
+				"@tanstack/react-query": "^5.81.5",
 				"react": "^18 || ^19"
 			}
 		},
 		"node_modules/@tanstack/react-query-persist-client": {
-			"version": "5.81.4",
+			"version": "5.81.5",
-			"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.81.4.tgz",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.81.5.tgz",
-			"integrity": "sha512-8SlkNDZmWUZLKYYm6DvYybJYrZngnERx/7W1KLUQ3IPaANM9tfmtQjBQBhr1dagyebNK1h/c69IY24dfUaNVIA==",
+			"integrity": "sha512-ZV69n636C22RkbFK0rzel80oWjyWbMKiUwUE2MKhYWTSr42+JmqoehDwJ5sWcO8CxHNm4vWF8pyG+goRzluMYw==",
 			"license": "MIT",
 			"dependencies": {
-				"@tanstack/query-persist-client-core": "5.81.4"
+				"@tanstack/query-persist-client-core": "5.81.5"
 			},
 			"funding": {
 				"type": "github",
 				"url": "https://github.com/sponsors/tannerlinsley"
 			},
 			"peerDependencies": {
-				"@tanstack/react-query": "^5.81.4",
+				"@tanstack/react-query": "^5.81.5",
 				"react": "^18 || ^19"
 			}
 		},
@@ -1847,9 +1847,9 @@
 			"license": "MIT"
 		},
 		"node_modules/@types/node": {
-			"version": "24.0.4",
+			"version": "24.0.8",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.4.tgz",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.8.tgz",
-			"integrity": "sha512-ulyqAkrhnuNq9pB76DRBTkcS6YsmDALy6Ua63V8OhrOBgbcYt6IOdzpw5P1+dyRIyMerzLkeYWBeOXPpA9GMAA==",
+			"integrity": "sha512-WytNrFSgWO/esSH9NbpWUfTMGQwCGIKfCmNlmFDNiI5gGhgMmEA+V1AEvKLeBNvvtBnailJtkrEa2OIISwrVAA==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -3694,9 +3694,9 @@
 			}
 		},
 		"node_modules/react-router": {
-			"version": "7.6.2",
+			"version": "7.6.3",
-			"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.2.tgz",
+			"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.3.tgz",
-			"integrity": "sha512-U7Nv3y+bMimgWjhlT5CRdzHPu2/KVmqPwKUCChW8en5P3znxUqwlYFlbmyj8Rgp1SF6zs5X4+77kBVknkg6a0w==",
+			"integrity": "sha512-zf45LZp5skDC6I3jDLXQUu0u26jtuP4lEGbc7BbdyxenBN1vJSTA18czM2D+h5qyMBuMrD+9uB+mU37HIoKGRA==",
 			"license": "MIT",
 			"dependencies": {
 				"cookie": "^1.0.1",
@@ -3716,12 +3716,12 @@
 			}
 		},
 		"node_modules/react-router-dom": {
-			"version": "7.6.2",
+			"version": "7.6.3",
-			"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.2.tgz",
+			"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.3.tgz",
-			"integrity": "sha512-Q8zb6VlTbdYKK5JJBLQEN06oTUa/RAbG/oQS1auK1I0TbJOXktqm+QENEVJU6QvWynlXPRBXI3fiOQcSEA78rA==",
+			"integrity": "sha512-DiWJm9qdUAmiJrVWaeJdu4TKu13+iB/8IEi0EW/XgaHCjW/vWGrwzup0GVvaMteuZjKnh5bEvJP/K0MDnzawHw==",
 			"license": "MIT",
 			"dependencies": {
-				"react-router": "7.6.2"
+				"react-router": "7.6.3"
 			},
 			"engines": {
 				"node": ">=20.0.0"

package.json

@@ -15,19 +15,19 @@
 		"@mantine/form": "^8.1.2",
 		"@mantine/hooks": "^8.1.2",
 		"@mantine/notifications": "^8.1.2",
-		"@tanstack/react-query": "^5.81.4",
+		"@tanstack/react-query": "^5.81.5",
-		"@tanstack/react-query-devtools": "^5.81.4",
+		"@tanstack/react-query-devtools": "^5.81.5",
-		"@tanstack/react-query-persist-client": "^5.81.4",
+		"@tanstack/react-query-persist-client": "^5.81.5",
 		"idb-keyval": "^6.2.2",
 		"jotai": "^2.12.5",
 		"react": "^19.1.0",
 		"react-dom": "^19.1.0",
 		"react-icons": "^5.5.0",
-		"react-router-dom": "^7.6.2",
+		"react-router-dom": "^7.6.3",
 		"recharts": "^3.0.2"
 	},
 	"devDependencies": {
-		"@types/node": "^24.0.4",
+		"@types/node": "^24.0.8",
 		"@types/react": "^19.1.8",
 		"@types/react-dom": "^19.1.6",
 		"@vitejs/plugin-react": "^4.6.0",

src/hooks/useAPI.tsx

@@ -60,7 +60,7 @@ export function useMutationAPI() {
 				</Text>
 			),
 			autoClose: false,
-			withCloseButton: false,
+			withCloseButton: true,
 			icon: <VscLoading size={24} />,
 		});
 		const options: { method: string; headers: HeadersInit | undefined; body: string } = {
@@ -73,7 +73,6 @@ export function useMutationAPI() {
 			const responseData = await response.json();
 			if (typeof responseData === 'object') {
 				if (responseData.error.code === 'ER_DUP_ENTRY') {
-					setTimeout(() => {
 					notifications.update({
 						id: id,
 						loading: false,
@@ -90,12 +89,10 @@ export function useMutationAPI() {
 						autoClose: 2500,
 						icon: <FaCheck size={24} />,
 					});
-					}, 2500);
 				}
 			}
 			return await responseData;
 		}
-		setTimeout(() => {
 		notifications.update({
 			id: id,
 			loading: false,
@@ -110,7 +107,6 @@ export function useMutationAPI() {
 			autoClose: 2500,
 			icon: <FaCheck size={24} />,
 		});
-		}, 2500);
 		return await response.json();
 	};
 
@@ -249,7 +245,6 @@ export function useFileUploadAPI() {
 			const responseData = await response.json();
 			if (typeof responseData === 'object') {
 				if (responseData.error.code === 'ER_DUP_ENTRY') {
-					setTimeout(() => {
 					notifications.update({
 						id: id,
 						loading: false,
@@ -266,12 +261,10 @@ export function useFileUploadAPI() {
 						autoClose: 2500,
 						icon: <FaCheck size={24} />,
 					});
-					}, 2500);
 				}
 			}
 			return await responseData;
 		}
-		setTimeout(() => {
 		notifications.update({
 			id: id,
 			loading: false,
@@ -284,7 +277,6 @@ export function useFileUploadAPI() {
 			autoClose: 2500,
 			icon: <FaCheck size={24} />,
 		});
-		}, 2500);
 		return await response.json();
 	};
 

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

@@ -6,18 +6,26 @@ import {
 	Group,
 	Image,
 	Modal,
-	Overlay,
 	ScrollArea,
 	SimpleGrid,
 	Stack,
 	Text,
 	TextInput,
 } from '@mantine/core';
+import { useDebouncedValue } from '@mantine/hooks';
 import { useCommonHooks } from 'hooks';
-import { useFileUploadAPI, useMutationAPI } from 'hooks/useAPI';
+import { useFileUploadAPI } from 'hooks/useAPI';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
-import { FiEdit, FiTrash } from 'react-icons/fi';
+import { FiEdit, FiLoader, FiPlus, FiTrash, FiX } from 'react-icons/fi';
-import { modalClasses, scrollAreaClasses, textInputClasses } from 'styles';
+import {
+	actionIconClasses,
+	buttonClasses,
+	modalClasses,
+	scrollAreaClasses,
+	textInputClasses,
+} from 'styles';
+import DeleteBackground from './DeleteBackground';
+import EditBackground from './EditBackground';
 
 function BackgroundModal({
 	backgroundModalOpened,
@@ -33,19 +41,26 @@ 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 [adding, setAdding] = useState<boolean>(false);
+	const [isLoading, setIsLoading] = useState<boolean>(false);
+	const [searchValue, setSearchValue] = useState<string>('');
+	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
 	const { isMobile } = useCommonHooks();
 	const { mutateAsync: uploadAsync } = useFileUploadAPI();
-	const { mutateAsync } = useMutationAPI();
 	const fd = new FormData();
 	const handleFileUpload = (e: any) => {
 		setErr(false);
 		setBackground(e);
 		setFileName(e?.name);
 	};
+	useEffect(() => {
+		if (debouncedSearch === searchValue) {
+			setIsLoading(false);
+		}
+	}, [debouncedSearch]);
 	return (
 		<Modal.Root
 			size={'75%'}
@@ -75,177 +90,76 @@ function BackgroundModal({
 				</Modal.Header>
 				<Modal.Body p={'1rem'}>
 					<Stack align='center' w={'100%'}>
-						{confirm && (
+						{!editing && !confirm && !adding && searchValue !== undefined && (
-							<Stack
+							<Group w={'100%'} justify='center'>
-								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'}>
-									Are you sure you want to delete {fileName}?
-								</Text>
-								{inUseBackgrounds.includes(fileName) && (
-									<Text fw={600} fz={'1.5rem'}>
-										This background is currently in use! This will result in a blank
-										background on the theme.
-									</Text>
-								)}
-								<Text fw={600} fz={'3rem'}>
-									THIS ACTION CANNOT BE UNDONE!!!
-								</Text>
-								<Card
-									style={{
-										aspectRatio: '16/9',
-										height: '100%',
-										backgroundImage: `url(../../api/backgroundImages/${fileName})`,
-										backgroundSize: 'cover',
-										backgroundPosition: 'center',
-										backgroundRepeat: 'no-repeat',
-										padding: '2rem',
-										margin: '1rem',
-									}}
-								/>
-								<Group>
-									<Button
-										mt={'auto'}
-										w={'min-content'}
-										color='red'
-										onClick={() => {
-											setBackground(null);
-											setFileName('');
-											setNewFileName('');
-											setConfirm(false);
-											setFileName('');
-											mutateAsync({
-												method: 'DELETE',
-												endpoint: 'api/backgrounds',
-												body: { fileName },
-											});
-										}}
-									>
-										DELETE
-									</Button>
-									<Button
-										mt={'auto'}
-										w={'min-content'}
-										onClick={() => {
-											setBackground(null);
-											setFileName('');
-											setNewFileName('');
-											setConfirm(false);
-											setFileName('');
-										}}
-									>
-										Cancel
-									</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
+									w={'50%'}
 									className={textInputClasses.settingsItem}
 									classNames={textInputClasses}
-										label='New Name'
+									autoFocus={!isMobile}
-										onChange={(e) => setRename(e.target.value)}
+									placeholder={'Search...'}
-									/>
+									value={searchValue}
-									<Card
+									onInput={(event: any) => {
+										setIsLoading(true);
+										setSearchValue(event.target.value);
+									}}
 									style={{
-											aspectRatio: '16/9',
+										zIndex: 100,
-											height: '100%',
+										paddingTop: 0,
-											backgroundImage: `url(../../api/backgroundImages/${fileName})`,
-											backgroundSize: 'cover',
-											backgroundPosition: 'center',
-											backgroundRepeat: 'no-repeat',
-											padding: '2rem',
-											margin: '1rem',
 									}}
-									/>
+									rightSection={
-								</Group>
+										isLoading ? (
-								<Group>
+											<ActionIcon
-									<Button
+												className={actionIconClasses.loadingSpinner}
-										mt={'auto'}
+												classNames={actionIconClasses}
-										w={'min-content'}
+											>
-										color='green'
+												<FiLoader />
-										onClick={() => {
+											</ActionIcon>
-											if (
+										) : (
-												!rename.endsWith('.png') &&
+											searchValue && (
-												!rename.endsWith('.jpg') &&
+												<ActionIcon
-												!rename.endsWith('.jpeg')
+													className={actionIconClasses.settingsTooltip}
-											) {
+													classNames={actionIconClasses}
-												mutateAsync({
+													onClick={() => setSearchValue('')}
-													method: 'PATCH',
+												>
-													endpoint: 'api/backgrounds',
+													<FiX />
-													body: {
+												</ActionIcon>
-														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'}
+									className={buttonClasses.newItemButton}
-										w={'min-content'}
+									classNames={buttonClasses}
 									onClick={() => {
-											setBackground(null);
+										setAdding(true);
-											setFileName('');
-											setNewFileName('');
-											setEditing(false);
-											setFileName('');
 									}}
 								>
-										Cancel
+									<FiPlus />
 								</Button>
 							</Group>
-							</Stack>
 						)}
-						{!editing && !confirm && (
+						{confirm && (
+							<DeleteBackground
+								fileName={fileName}
+								setFileName={setFileName}
+								inUseBackgrounds={inUseBackgrounds}
+								setBackground={setBackground}
+								setNewFileName={setNewFileName}
+								setConfirm={setConfirm}
+							/>
+						)}
+						{editing && (
+							<EditBackground
+								fileName={fileName}
+								setFileName={setFileName}
+								inUseBackgrounds={inUseBackgrounds}
+								setBackground={setBackground}
+								setNewFileName={setNewFileName}
+								setEditing={setEditing}
+							/>
+						)}
+						{!editing && !confirm && !adding && (
 							<ScrollArea
 								className={scrollAreaClasses.default}
 								classNames={scrollAreaClasses}
@@ -262,6 +176,13 @@ function BackgroundModal({
 								<SimpleGrid w={'100%'} cols={3} p={'.5rem'}>
 									{backgroundList
 										.filter((background) => background !== 'None')
+										.filter(
+											(background) =>
+												!debouncedSearch ||
+												background
+													.toLocaleLowerCase()
+													.includes(debouncedSearch.toLocaleLowerCase()),
+										)
 										.map((background) => (
 											<Group key={background} display={'flex'} pos={'relative'}>
 												<Text
@@ -324,6 +245,7 @@ function BackgroundModal({
 								</SimpleGrid>
 							</ScrollArea>
 						)}
+						{adding && (
 							<Stack
 								display={'flex'}
 								pos={'relative'}
@@ -332,14 +254,6 @@ function BackgroundModal({
 								justify='space-between'
 								p={16}
 							>
-							{confirm ||
-								(editing && (
-									<Overlay
-										opacity={1}
-										color='var(--mantine-color-search-0)'
-										style={{ borderRadius: '.5rem', backdropFilter: 'blur(5px)' }}
-									/>
-								))}
 								<Group gap={0}>
 									<Stack gap={0} w={'60%'}>
 										<FileInput
@@ -394,7 +308,11 @@ function BackgroundModal({
 										}}
 									>
 										{background ? (
-										<Image src={URL.createObjectURL(background)} w={'100%'} h={'100%'} />
+											<Image
+												src={URL.createObjectURL(background)}
+												w={'100%'}
+												h={'100%'}
+											/>
 										) : (
 											<Image
 												src={'https://placehold.co/800x450?text=Upload%20an%20Image'}
@@ -404,8 +322,10 @@ function BackgroundModal({
 										)}
 									</Card>
 								</Group>
+								<Group w={'100%'} justify='center'>
 									<Button
 										w={'min-content'}
+										disabled={!background}
 										onClick={() => {
 											if (background) {
 												const newBackground = new File(
@@ -419,6 +339,7 @@ function BackgroundModal({
 													endpoint: 'api/backgrounds',
 													body: fd,
 												});
+												setAdding(false);
 												setBackground(null);
 												setNewFileName('');
 												setErr(false);
@@ -429,7 +350,21 @@ function BackgroundModal({
 									>
 										Upload
 									</Button>
+									<Button
+										w={'min-content'}
+										color='var(--mantine-color-red-6)'
+										onClick={() => {
+											setAdding(false);
+											setBackground(null);
+											setNewFileName('');
+											setErr(false);
+										}}
+									>
+										Cancel
+									</Button>
+								</Group>
 							</Stack>
+						)}
 					</Stack>
 				</Modal.Body>
 			</Modal.Content>

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

@@ -0,0 +1,95 @@
+import { Button, Card, Group, Stack, Text } from '@mantine/core';
+import { useMutationAPI } from 'hooks';
+
+function DeleteBackground({
+	fileName,
+	setFileName,
+	inUseBackgrounds,
+	setBackground,
+	setNewFileName,
+	setConfirm,
+}: {
+	fileName: string;
+	setFileName: (searchValue: string) => void;
+	inUseBackgrounds: string[];
+	setBackground: React.Dispatch<React.SetStateAction<File | null>>;
+	setNewFileName: (searchValue: string) => void;
+	setConfirm: (value: boolean) => void;
+}) {
+	const { mutateAsync } = useMutationAPI();
+	return (
+		<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'}>
+				Are you sure you want to delete {fileName}?
+			</Text>
+			{inUseBackgrounds.includes(fileName) && (
+				<Text fw={600} fz={'1.5rem'}>
+					This background is currently in use! This will result in a blank background on
+					the theme.
+				</Text>
+			)}
+			<Text fw={600} fz={'3rem'}>
+				THIS ACTION CANNOT BE UNDONE!!!
+			</Text>
+			<Card
+				style={{
+					aspectRatio: '16/9',
+					height: '100%',
+					backgroundImage: `url(../../api/backgroundImages/${fileName})`,
+					backgroundSize: 'cover',
+					backgroundPosition: 'center',
+					backgroundRepeat: 'no-repeat',
+					padding: '2rem',
+					margin: '1rem',
+				}}
+			/>
+			<Group>
+				<Button
+					mt={'auto'}
+					w={'min-content'}
+					color='red'
+					onClick={() => {
+						setBackground(null);
+						setFileName('');
+						setNewFileName('');
+						setConfirm(false);
+						setFileName('');
+						mutateAsync({
+							method: 'DELETE',
+							endpoint: 'api/backgrounds',
+							body: { fileName },
+						});
+					}}
+				>
+					DELETE
+				</Button>
+				<Button
+					mt={'auto'}
+					w={'min-content'}
+					onClick={() => {
+						setBackground(null);
+						setFileName('');
+						setNewFileName('');
+						setConfirm(false);
+						setFileName('');
+					}}
+				>
+					Cancel
+				</Button>
+			</Group>
+		</Stack>
+	);
+}
+
+export default DeleteBackground;

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

@@ -0,0 +1,123 @@
+import { Button, Card, Group, Stack, Text, TextInput } from '@mantine/core';
+import { useMutationAPI } from 'hooks';
+import { useState } from 'react';
+import { textInputClasses } from 'styles';
+
+function EditBackground({
+	fileName,
+	setFileName,
+	inUseBackgrounds,
+	setBackground,
+	setNewFileName,
+	setEditing,
+}: {
+	fileName: string;
+	setFileName: (searchValue: string) => void;
+	inUseBackgrounds: string[];
+	setBackground: React.Dispatch<React.SetStateAction<File | null>>;
+	setNewFileName: (searchValue: string) => void;
+	setEditing: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+	const [rename, setRename] = useState<string>('');
+	const { mutateAsync } = useMutationAPI();
+	return (
+		<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'}
+					color={'var(--mantine-color-red-6)'}
+					onClick={() => {
+						setBackground(null);
+						setFileName('');
+						setNewFileName('');
+						setEditing(false);
+						setFileName('');
+					}}
+				>
+					Cancel
+				</Button>
+			</Group>
+		</Stack>
+	);
+}
+
+export default EditBackground;

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

@@ -1,9 +1,7 @@
 import { Group, Text } from '@mantine/core';
 import type { Theme } from 'types';
 
-function ThemeMiniCard({ allThemes, item }: { allThemes: Theme[]; item: number }) {
+function ThemeMiniCard({ miniTheme }: { miniTheme: Theme | undefined }) {
-	const theme = allThemes?.find((theme: Theme) => theme.id === item);
-
 	return (
 		<Group
 			gap={0}
@@ -15,30 +13,30 @@ function ThemeMiniCard({ allThemes, item }: { allThemes: Theme[]; item: number }
 			h={'60px'}
 			style={{
 				backgroundImage:
-					theme?.backgroundImage.toLocaleLowerCase() !== 'none'
+					miniTheme?.backgroundImage.toLocaleLowerCase() !== 'none'
-						? `linear-gradient(${theme?.backgroundColor}33, ${theme?.backgroundColor}33), url(../../api/backgroundImages/${theme?.backgroundImage})`
+						? `linear-gradient(${miniTheme?.backgroundColor}33, ${miniTheme?.backgroundColor}33), url(../../api/backgroundImages/${miniTheme?.backgroundImage})`
 						: undefined,
 				backgroundSize:
-					theme?.backgroundImage.toLocaleLowerCase() !== 'none' ? 'cover' : undefined,
+					miniTheme?.backgroundImage.toLocaleLowerCase() !== 'none' ? 'cover' : undefined,
 				backgroundColor:
-					theme?.backgroundImage.toLocaleLowerCase() === 'none'
+					miniTheme?.backgroundImage.toLocaleLowerCase() === 'none'
-						? theme?.backgroundColor
+						? miniTheme?.backgroundColor
 						: undefined,
 				backgroundPosition: 'center',
-				border: `solid ${theme?.borderColor}`,
+				border: `solid ${miniTheme?.borderColor}`,
 				borderRadius: '8px',
 			}}
 		>
 			<Text
-				bg={theme?.backgroundColor}
+				bg={miniTheme?.backgroundColor}
-				c={theme?.primaryColor}
+				c={miniTheme?.primaryColor}
 				size='md'
 				style={{
 					padding: '.25rem',
 					borderRadius: '8px',
 				}}
 			>
-				{allThemes.find((theme: Theme) => theme.id === item)?.name}
+				{miniTheme?.name}
 			</Text>
 		</Group>
 	);

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

@@ -47,6 +47,7 @@ function ThemeModal({
 	const [hovered, setHovered] = useState(-1);
 	const [colorId, setColorId] = useState<string>('');
 	const [colorValue, setColorValue] = useState('#000000');
+	const [defaultTheme, setDefaultTheme] = useState<Theme>({ ...selectedTheme });
 	const [designerTheme, setDesignerTheme] = useState<Theme>({
 		...selectedTheme,
 	});
@@ -118,9 +119,19 @@ function ThemeModal({
 		);
 	});
 
+	const handleSwatchClick = () => {
+		closeBackgroundPicker();
+		openPicker();
+		setDesignerTheme(selectedTheme);
+	};
+
 	useEffect(() => {
 		setDesignerTheme(selectedTheme);
+		if (defaultTheme.name !== selectedTheme.name) {
+			setDefaultTheme(selectedTheme);
+		}
 	}, [selectedTheme]);
+
 	return (
 		<Modal.Root
 			size={'75%'}
@@ -169,10 +180,9 @@ function ThemeModal({
 							>
 								<ColorSwatch
 									onClick={() => {
-										closeBackgroundPicker();
 										setColorId('primaryColor');
-										openPicker();
 										setColorValue(selectedTheme.primaryColor);
+										handleSwatchClick();
 									}}
 									color={selectedTheme.primaryColor}
 									bd={`1px solid ${selectedTheme.primaryColor}`}
@@ -188,10 +198,9 @@ function ThemeModal({
 							>
 								<ColorSwatch
 									onClick={() => {
-										closeBackgroundPicker();
 										setColorId('accentColor');
-										openPicker();
 										setColorValue(selectedTheme.accentColor);
+										handleSwatchClick();
 									}}
 									color={selectedTheme.accentColor}
 									bd={`1px solid ${selectedTheme.primaryColor}`}
@@ -207,10 +216,9 @@ function ThemeModal({
 							>
 								<ColorSwatch
 									onClick={() => {
-										closeBackgroundPicker();
 										setColorId('backgroundColor');
-										openPicker();
 										setColorValue(selectedTheme.backgroundColor);
+										handleSwatchClick();
 									}}
 									color={selectedTheme.backgroundColor}
 									bd={`1px solid ${selectedTheme.primaryColor}`}
@@ -226,10 +234,9 @@ function ThemeModal({
 							>
 								<ColorSwatch
 									onClick={() => {
-										closeBackgroundPicker();
 										setColorId('borderColor');
-										openPicker();
 										setColorValue(selectedTheme.borderColor);
+										handleSwatchClick();
 									}}
 									color={selectedTheme.borderColor}
 									bd={`1px solid ${selectedTheme.primaryColor}`}
@@ -245,10 +252,9 @@ function ThemeModal({
 							>
 								<ColorSwatch
 									onClick={() => {
-										closeBackgroundPicker();
 										setColorId('searchColor');
-										openPicker();
 										setColorValue(selectedTheme.searchColor);
+										handleSwatchClick();
 									}}
 									color={selectedTheme.searchColor}
 									bd={`1px solid ${selectedTheme.primaryColor}`}
@@ -266,6 +272,7 @@ function ThemeModal({
 									onClick={() => {
 										closePicker();
 										openBackgroundPicker();
+										setDesignerTheme(selectedTheme);
 									}}
 									pos={'absolute'}
 									right={0}
@@ -289,6 +296,22 @@ function ThemeModal({
 									<Text className={textClasses.sectionTitle} classNames={textClasses}>
 										Change {colorId}
 									</Text>
+									{colorId === 'backgroundColor' && (
+										<ColorPicker
+											value={colorValue}
+											onChange={(e) => {
+												setColorValue(e);
+												setDesignerTheme({
+													...designerTheme,
+													backgroundColor: e,
+												});
+											}}
+											format={'hex'}
+											w={'90%'}
+											mb={'1.5rem'}
+										/>
+									)}
+									{colorId !== 'backgroundColor' && (
 										<ColorPicker
 											value={colorValue}
 											onChange={(e) => {
@@ -298,10 +321,10 @@ function ThemeModal({
 													[colorId]: e,
 												});
 											}}
-										format={colorId === 'backgroundColor' ? 'hex' : 'hexa'}
+											format={'hexa'}
 											w={'90%'}
-										mb={colorId === 'backgroundColor' ? '1.5rem' : undefined}
 										/>
+									)}
 									<TextInput
 										className={textInputClasses.default}
 										classNames={textInputClasses}
@@ -458,11 +481,25 @@ function ThemeModal({
 									</Group>
 								</Stack>
 							)}
-							{!pickerOpen && !backgroundPicker && <Stack />}
+							{!pickerOpen && !backgroundPicker && (
+								<Stack h={'100%'} align='center' justify='center' gap={0}>
+									<Button
+										onClick={() => {
+											setSelectedTheme({ ...defaultTheme });
+										}}
+									>
+										Reset Changes
+									</Button>
+								</Stack>
+							)}
 						</Stack>
 					</Group>
 					<Group>
-						<Button color={'green'} onClick={handleSaveTheme}>
+						<Button
+							disabled={JSON.stringify(defaultTheme) === JSON.stringify(selectedTheme)}
+							color={'green'}
+							onClick={handleSaveTheme}
+						>
 							Save
 						</Button>
 						<Button

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

@@ -174,8 +174,11 @@ function ThemePlaylistCard({
 										themeList
 											.sort((a: number, b: number) => (a > b ? 1 : -1))
 											.map((item: number) => {
+												const miniTheme: any = allThemes.find(
+													(theme: Theme) => theme.id === item,
+												);
 												return (
-													<ThemeMiniCard key={item} item={item} allThemes={allThemes} />
+													<ThemeMiniCard key={miniTheme?.id} miniTheme={miniTheme} />
 												);
 											})}
 								</Stack>
@@ -198,10 +201,26 @@ function ThemePlaylistCard({
 							</Text>
 							<ScrollArea h={'255px'} w={'100%'} style={{ zIndex: 2 }}>
 								<Stack gap={4}>
-									<ThemeMiniCard item={Number(themeList[0])} allThemes={allThemes} />
+									<ThemeMiniCard
-									<ThemeMiniCard item={Number(themeList[1])} allThemes={allThemes} />
+										miniTheme={allThemes.find(
-									<ThemeMiniCard item={Number(themeList[2])} allThemes={allThemes} />
+											(theme: Theme) => theme.id === Number(themeList[0]),
-									<ThemeMiniCard item={Number(themeList[3])} allThemes={allThemes} />
+										)}
+									/>
+									<ThemeMiniCard
+										miniTheme={allThemes.find(
+											(theme: Theme) => theme.id === Number(themeList[1]),
+										)}
+									/>
+									<ThemeMiniCard
+										miniTheme={allThemes.find(
+											(theme: Theme) => theme.id === Number(themeList[2]),
+										)}
+									/>
+									<ThemeMiniCard
+										miniTheme={allThemes.find(
+											(theme: Theme) => theme.id === Number(themeList[3]),
+										)}
+									/>
 								</Stack>
 							</ScrollArea>
 						</>

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

@@ -98,7 +98,6 @@ function ThemePlaylistModal({
 												newThemeList={newThemeList}
 												miniTheme={miniTheme}
 												themeList={themeList}
-												allThemes={allThemes}
 												selectedPlaylist={selectedPlaylist}
 												setSelectedPlaylist={setSelectedPlaylist}
 											/>

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

@@ -8,14 +8,12 @@ function ThemePreviewMiddleware({
 	newThemeList,
 	miniTheme,
 	themeList,
-	allThemes,
 	selectedPlaylist,
 	setSelectedPlaylist,
 }: {
 	newThemeList: number[];
 	miniTheme: any;
 	themeList: number[];
-	allThemes: any;
 	selectedPlaylist: any;
 	setSelectedPlaylist: (selectedPlaylist: any) => void;
 }) {
@@ -56,7 +54,7 @@ function ThemePreviewMiddleware({
 						}
 					}}
 				>
-					<ThemeMiniCard allThemes={allThemes} item={Number(miniTheme.id)} />
+					<ThemeMiniCard miniTheme={miniTheme} />
 				</Group>
 			</Popover.Target>
 			<Popover.Dropdown

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

@@ -91,7 +91,7 @@ function ThemesSettings() {
 			endpoint: themesEndpoint,
 			body: selectedTheme,
 		});
-		close();
+		handleClose();
 	};
 
 	useEffect(() => {