Default Search Provider support; Style updates

package-lock.json

@@ -25,7 +25,7 @@
 				"recharts": "^3.1.0"
 			},
 			"devDependencies": {
-				"@types/node": "^24.0.15",
+				"@types/node": "^24.1.0",
 				"@types/react": "^19.1.8",
 				"@types/react-dom": "^19.1.6",
 				"@vitejs/plugin-react": "^4.7.0",
@@ -1846,9 +1846,9 @@
 			"license": "MIT"
 		},
 		"node_modules/@types/node": {
-			"version": "24.0.15",
+			"version": "24.1.0",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.15.tgz",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-24.1.0.tgz",
-			"integrity": "sha512-oaeTSbCef7U/z7rDeJA138xpG3NuKc64/rZ2qmUFkFJmnMsAPaluIifqyWd8hSSMxyP9oie3dLAqYPblag9KgA==",
+			"integrity": "sha512-ut5FthK5moxFKH2T1CUOC6ctR67rQRvvHdFLCD2Ql6KXmMuCrjsSsRI9UsLCm9M18BMwClv4pn327UvB7eeO1w==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {

package.json

@@ -27,7 +27,7 @@
 		"recharts": "^3.1.0"
 	},
 	"devDependencies": {
-		"@types/node": "^24.0.15",
+		"@types/node": "^24.1.0",
 		"@types/react": "^19.1.8",
 		"@types/react-dom": "^19.1.6",
 		"@vitejs/plugin-react": "^4.7.0",

src/components/HelpModal/HelpModal.tsx

@@ -5,17 +5,13 @@ import type { Application, Provider } from 'types';
 import HelpSection from './HelpSection';
 
 export function HelpModal({
-	setSearchValue,
+	handleResetSearch,
-	setProviderLabel,
-	setProviderURL,
 	providerModalOpened,
 	closeProviderModal,
 	applicationData,
 	providerData,
 }: {
-	setSearchValue: (value: string) => void;
+	handleResetSearch: () => void;
-	setProviderLabel: (label: string) => void;
-	setProviderURL: (url: string) => void;
 	providerModalOpened: boolean;
 	closeProviderModal: () => void;
 	applicationData: Application[];
@@ -31,10 +27,8 @@ export function HelpModal({
 			fullScreen={isMobile}
 			centered
 			onClose={() => {
-				setSearchValue('');
-				setProviderLabel('Google Search');
-				setProviderURL('https://www.google.com/search?q=');
 				closeProviderModal();
+				handleResetSearch();
 			}}
 			closeOnEscape
 			closeOnClickOutside

src/components/ManagementPill.tsx

@@ -6,10 +6,12 @@ export function ManagementPill({
 	enabled,
 	onChange,
 	openModal,
+	label = ['Disabled', 'Enabled'],
 }: {
 	enabled: number;
 	onChange: any;
 	openModal: () => void;
+	label?: [string, string];
 }) {
 	return (
 		<Group
@@ -30,7 +32,7 @@ export function ManagementPill({
 				c={'var(--mantine-color-primary-0)'}
 				bg={'var(--mantine-color-background-0)'}
 				bd={'solid 1px var(--mantine-color-border-0)'}
-				label={enabled === 1 ? 'Enabled' : 'Disabled'}
+				label={label[enabled]}
 				refProp='rootRef'
 				styles={{
 					tooltip: { marginTop: '-.5rem' },

src/components/WeatherModal/WeatherModal.tsx

@@ -12,17 +12,13 @@ export function WeatherModal({
 	current,
 	extendedForecast,
 	weatherModalOpened,
-	setSearchValue,
+	handleResetSearch,
-	setProviderLabel,
-	setProviderURL,
 	closeWeatherModal,
 }: {
 	current: CW;
 	extendedForecast: ExtendedForecast[];
 	weatherModalOpened: boolean;
-	setSearchValue: (value: string) => void;
+	handleResetSearch: () => void;
-	setProviderLabel: (label: string) => void;
-	setProviderURL: (url: string) => void;
 	closeWeatherModal: () => void;
 }) {
 	const { isMobile, currentUser, currentLocation } = useCommonHooks();
@@ -48,9 +44,7 @@ export function WeatherModal({
 			opened={weatherModalOpened}
 			centered
 			onClose={() => {
-				setSearchValue('');
+				handleResetSearch();
-				setProviderLabel('Google Search');
-				setProviderURL('https://www.google.com/search?q=');
 				closeWeatherModal();
 			}}
 			closeOnEscape

src/hooks/useAPI.tsx

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

src/hooks/useCommonHooks.ts

@@ -1,7 +1,7 @@
 import { useLocalStorage } from '@mantine/hooks';
 import { appTheme } from 'contexts';
 import { useAtom } from 'jotai';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import type { Location, Theme, User } from 'types';
 import { useMutationAPI } from './useAPI';
 
@@ -53,11 +53,29 @@ export function useCommonHooks() {
 		key: 'themePlaylist',
 		defaultValue: 'All',
 	});
-
+	const [defaultProviderLabel, setDefaultProviderLabel] = useLocalStorage<string>({
+		key: 'providerLabel',
+		defaultValue: 'Google Search',
+	});
+	const [defaultProviderURL, setDefaultProviderURL] = useLocalStorage<string>({
+		key: 'providerURL',
+		defaultValue: 'https://www.google.com/search?q=',
+	});
+	const [defaultProviderPrefix, setDefaultProviderPrefix] = useLocalStorage<string>({
+		key: 'providerPrefix',
+		defaultValue: '/g',
+	});
 	const [searchValue, setSearchValue] = useState('');
-	const [providerLabel, setProviderLabel] = useState('Google Search');
+	const [providerLabel, setProviderLabel] = useState(defaultProviderLabel);
-	const [providerURL, setProviderURL] = useState('https://www.google.com/search?q=');
+	const [providerURL, setProviderURL] = useState(defaultProviderURL);
-	const [providerPrefix, setProviderPrefix] = useState('/g');
+	const [providerPrefix, setProviderPrefix] = useState(defaultProviderPrefix);
+
+	useEffect(() => {
+		setProviderLabel(defaultProviderLabel);
+		setProviderURL(defaultProviderURL);
+		setProviderPrefix(defaultProviderPrefix);
+	}, [defaultProviderLabel, defaultProviderURL, defaultProviderPrefix]);
+
 	const [currentUser, setCurrentUser] = useLocalStorage<User>({
 		key: 'user',
 		defaultValue: {
@@ -207,6 +225,12 @@ export function useCommonHooks() {
 		setProviderURL,
 		providerPrefix,
 		setProviderPrefix,
+		defaultProviderLabel,
+		setDefaultProviderLabel,
+		defaultProviderURL,
+		setDefaultProviderURL,
+		defaultProviderPrefix,
+		setDefaultProviderPrefix,
 		currentUser,
 		setCurrentUser,
 		currentLocation,

src/pages/homepage/components/Search/Search.tsx

@@ -37,6 +37,10 @@ export default function Search({
 	const { data: applicationData, isFetching: isApplicationDataFetching } = useQueryAPI({
 		endpoint: 'api/enabledApplications',
 	});
+	const { data: defaultProviderData, isFetched: defaultProviderDataIsFetched } =
+		useQueryAPI({
+			endpoint: 'api/providers/default',
+		});
 	const [applications, setApplications] = useState<Application[]>([]);
 	const searchEndpoint = 'api/searchHistory';
 	const { data: historyData, isFetched: historyDataIsFetched } = useQueryAPI({
@@ -60,14 +64,26 @@ export default function Search({
 		setProviderPrefix,
 		searchValue,
 		setSearchValue,
+		defaultProviderURL,
+		setDefaultProviderURL,
+		defaultProviderLabel,
+		setDefaultProviderLabel,
+		defaultProviderPrefix,
+		setDefaultProviderPrefix,
 	} = useCommonHooks();
 	const [placeholderValue, setPlaceholderValue] = useState<string>('');
 	const [value, setValue] = useState(0);
 
+	const handleResetSearch = () => {
+		setSearchValue('');
+		setProviderLabel(defaultProviderLabel);
+		setProviderURL(defaultProviderURL);
+	};
+
 	const handleSearchHistoryItem = ({ option }: { option: SearchHistoryItem }) => {
 		const url =
 			providerData.find((provider: Provider) => provider.prefix === option.prefix)?.url ??
-			'https://www.google.com/search?q=';
+			defaultProviderURL;
 		open(`${url}${option.searchTerm}`, '_self');
 	};
 
@@ -136,9 +152,7 @@ export default function Search({
 	const handleKeyUp = (item: any) => {
 		if (item.code === 'Escape') {
 			setListIndex(0);
-			setSearchValue('');
+			handleResetSearch();
-			setProviderLabel('Google Search');
-			setProviderPrefix('/g');
 			setPlaceholderValue('');
 			if (dropdownOpened) {
 				closeDropdown();
@@ -242,9 +256,9 @@ export default function Search({
 				setProviderLabel('Invalid function');
 			}
 		} else {
-			setProviderLabel('Google Search');
+			setProviderLabel(defaultProviderLabel);
-			setProviderURL('https://www.google.com/search?q=');
+			setProviderURL(defaultProviderURL);
-			setProviderPrefix('/g');
+			setProviderPrefix(defaultProviderPrefix);
 		}
 	};
 
@@ -321,6 +335,16 @@ export default function Search({
 		setFilteredHistory(filtered);
 	}, [searchValue]);
 
+	useEffect(() => {
+		if (defaultProviderData && defaultProviderDataIsFetched) {
+			setDefaultProviderURL(
+				defaultProviderData[0]?.url ?? 'https://www.google.com/search?q=',
+			);
+			setDefaultProviderPrefix(defaultProviderData[0]?.prefix ?? '/g');
+			setDefaultProviderLabel(defaultProviderData[0]?.name ?? 'Google Search');
+		}
+	}, [defaultProviderData, defaultProviderDataIsFetched]);
+
 	return (
 		<>
 			{dropdownOpened && <Overlay blur={5} />}
@@ -423,9 +447,7 @@ export default function Search({
 					onKeyUp={handleKeyUp}
 				/>
 				<HelpModal
-					setSearchValue={setSearchValue}
+					handleResetSearch={handleResetSearch}
-					setProviderLabel={setProviderLabel}
-					setProviderURL={setProviderURL}
 					applicationData={applications}
 					providerData={providers}
 					providerModalOpened={providerModalOpened}
@@ -435,9 +457,7 @@ export default function Search({
 					current={current}
 					extendedForecast={extendedForecast}
 					weatherModalOpened={weatherModalOpened}
-					setSearchValue={setSearchValue}
+					handleResetSearch={handleResetSearch}
-					setProviderLabel={setProviderLabel}
-					setProviderURL={setProviderURL}
 					closeWeatherModal={closeWeatherModal}
 				/>
 			</Stack>

src/pages/settings/components/Applications/DebouncedApplication.tsx

@@ -85,11 +85,7 @@ function DebouncedApplication({
 				}}
 				openModal={openModal}
 			/>
-			<Group
+			<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
-				justify='center'
-				pos={'relative'}
-				style={{ flexDirection: isMobile ? 'column' : 'row' }}
-			>
 				<TextInput
 					label={'Name'}
 					className={textInputClasses.settingsItem}

src/pages/settings/components/Search/DebouncedSearchProvider.tsx

@@ -1,9 +1,8 @@
-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 } from 'components';
+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 { Provider } from 'types';
 
@@ -68,24 +67,17 @@ function DebouncedSearchProvider({
 					</Stack>
 				}
 			/>
-			<Tooltip
+			<ManagementPill
-				c={'var(--mantine-color-primary-0)'}
+				enabled={provider.default}
-				bg={'var(--mantine-color-background-0)'}
+				onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-				bd={'solid 1px var(--mantine-color-border-0)'}
+					setUpdate({
-				label={'Delete'}
+						...provider,
-			>
+						default: event.target.checked ? 1 : 0,
-				<ActionIcon
+					});
-					pos={'absolute'}
+				}}
-					right={'1rem'}
+				openModal={openModal}
-					color='red'
+				label={['Non-Default', 'Default']}
-					onClick={() => {
+			/>
-						setIsOpen(true);
-						openModal();
-					}}
-				>
-					<FiTrash color='black' />
-				</ActionIcon>
-			</Tooltip>
 			<Stack w={'100%'} align='center'>
 				<Group w={'100%'} justify='center'>
 					<TextInput

src/pages/settings/components/Search/SearchProviderSettingsItem.tsx

@@ -1,4 +1,4 @@
-import { Card, Stack, Text } from '@mantine/core';
+import { Card, isLightColor, Stack, Text } from '@mantine/core';
 import HintItem from 'components/HelpModal/HintItem';
 import { cardClasses } from 'styles';
 import type { Provider } from 'types';
@@ -6,6 +6,35 @@ import type { Provider } from 'types';
 function SearchProviderSettingsItem({ provider }: { provider: Provider }) {
 	return (
 		<Card className={cardClasses.settingsItemHover} classNames={cardClasses}>
+			<Stack
+				gap={0}
+				style={{
+					zIndex: 2,
+					paddingRight: 0,
+					position: 'absolute',
+					right: 3,
+					top: 3,
+					marginRight: 0,
+					transition: 'all 0.2s',
+				}}
+				align='center'
+				justify='center'
+				h={'100%'}
+			>
+				{provider.default === 1 && (
+					<Text
+						style={{
+							writingMode: 'sideways-lr',
+							color: isLightColor('var(--mantine-color-background-0)')
+								? 'black'
+								: 'white',
+							opacity: 0.5,
+						}}
+					>
+						DEFAULT
+					</Text>
+				)}
+			</Stack>
 			<Stack gap={0} w={'100%'} align='center'>
 				<HintItem command={provider.prefix} name={provider.name} />
 				<Text

src/pages/settings/components/Search/SearchProviders.tsx

@@ -6,14 +6,17 @@ import {
 	Group,
 	Popover,
 	Stack,
+	Switch,
 	TextInput,
+	Tooltip,
 } 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 { popoverClasses, textInputClasses } from 'styles';
+import { FiPower } from 'react-icons/fi';
+import { popoverClasses, switchClasses, textInputClasses } from 'styles';
 import type { Provider } from 'types';
 import DebouncedSearchProvider from './DebouncedSearchProvider';
 import SearchProviderSettingsItem from './SearchProviderSettingsItem';
@@ -24,6 +27,7 @@ const SearchProviderSettings = () => {
 		name: '',
 		url: '',
 		prefix: '',
+		default: 0,
 	};
 	const form = useForm({
 		initialValues: defaultProvider,
@@ -139,6 +143,43 @@ const SearchProviderSettings = () => {
 									}
 								/>
 							</Stack>
+							<Group
+								style={{
+									position: 'absolute',
+									right: '1rem',
+									top: '.5rem',
+									width: 'fit-content',
+									backgroundColor:
+										'color-mix(in srgb, var(--mantine-color-background-0), transparent 50%)',
+									padding: '.5rem',
+									borderRadius: '10px',
+									color: 'var(--mantine-color-search-0)',
+									backdropFilter: 'brightness(0.5)',
+								}}
+							>
+								<Tooltip
+									c={'var(--mantine-color-primary-0)'}
+									bg={'var(--mantine-color-background-0)'}
+									bd={'solid 1px var(--mantine-color-border-0)'}
+									label={'Default'}
+									refProp='rootRef'
+									styles={{
+										tooltip: { marginTop: '-.5rem' },
+										arrow: { border: 'solid 1px var(--mantine-color-accent-0)' },
+									}}
+									withArrow
+								>
+									<Switch
+										key={form.key('default')}
+										{...form.getInputProps('default')}
+										className={switchClasses.enable}
+										classNames={switchClasses}
+										defaultChecked={false}
+										thumbIcon={<FiPower />}
+									/>
+								</Tooltip>
+							</Group>
+
 							<Group mt={'1rem'}>
 								<Button type='submit' color={'green'}>
 									Save
@@ -191,11 +232,7 @@ const SearchProviderSettings = () => {
 									position='bottom'
 								>
 									<Popover.Target>
-										<Box
+										<Box>
-											onClick={(e) => {
-												e.stopPropagation();
-											}}
-										>
 											<SearchProviderSettingsItem provider={provider} />
 										</Box>
 									</Popover.Target>

src/pages/settings/components/Theming/Backgrounds/AddBackground.tsx

@@ -0,0 +1,144 @@
+import { Button, Card, FileInput, Group, Image, Stack, TextInput } from '@mantine/core';
+import { useFileUploadAPI } from 'hooks/useAPI';
+
+export function AddBackground({
+	fileName,
+	setFileName,
+	newFileName,
+	setNewFileName,
+	background,
+	setBackground,
+	err,
+	setErr,
+	handleAddBackgroundModalClose,
+}: {
+	fileName: string;
+	setFileName: (name: string) => void;
+	newFileName: string;
+	setNewFileName: (name: string) => void;
+	background: File | null;
+	setBackground: (file: File | null) => void;
+	err: boolean;
+	setErr: (err: boolean) => void;
+	handleAddBackgroundModalClose: () => void;
+}) {
+	const { mutateAsync: uploadAsync } = useFileUploadAPI();
+	const fd = new FormData();
+	const handleFileUpload = (e: any) => {
+		setErr(false);
+		setBackground(e);
+		setFileName(e?.name);
+	};
+	return (
+		<Stack p={16}>
+			<Group gap={0}>
+				<Stack gap={0} w={'60%'}>
+					<FileInput
+						clearable
+						accept='image/png,image/jpeg'
+						value={background}
+						onChange={handleFileUpload}
+						label={'Upload Background'}
+						placeholder={'Select...'}
+						error={err && 'Please upload a background'}
+						description={
+							'Max size: 50MB for upload. Images are resized to 300kb after upload.'
+						}
+						pr={'xl'}
+						pl={0}
+						styles={{
+							input: {
+								color: 'var(--mantine-color-primary-0)',
+								borderColor: 'var(--mantine-color-primary-0)',
+							},
+							placeholder: {
+								color: 'var(--mantine-color-accent-0)',
+							},
+						}}
+					/>
+					<TextInput
+						label={'File Name'}
+						placeholder={fileName}
+						value={newFileName}
+						onChange={(e) => setNewFileName(e.target.value)}
+						pr={'xl'}
+						pl={0}
+						styles={{
+							input: {
+								color: 'var(--mantine-color-primary-0)',
+								borderColor: 'var(--mantine-color-primary-0)',
+							},
+						}}
+					/>
+				</Stack>
+				<Card
+					style={{
+						aspectRatio: '16/9',
+						width: '35%',
+						backgroundSize: 'cover',
+						backgroundPosition: 'center',
+						backgroundRepeat: 'no-repeat',
+						backgroundColor: 'var(--mantine-color-search-0)',
+						padding: '2rem',
+						margin: '1rem',
+						marginRight: 0,
+					}}
+				>
+					{background ? (
+						<Image src={URL.createObjectURL(background)} w={'100%'} h={'100%'} />
+					) : (
+						<Image
+							src={'https://placehold.co/800x450?text=Upload%20an%20Image'}
+							w={'100%'}
+							h={'100%'}
+						/>
+					)}
+				</Card>
+			</Group>
+			<Group justify='center'>
+				<Button
+					disabled={!background}
+					onClick={() => {
+						if (background) {
+							const extension = background.name.substring(
+								background.name.lastIndexOf('.'),
+							);
+							let validatedName;
+							if (newFileName.length === 0) {
+								validatedName = fileName;
+							} else {
+								validatedName = newFileName.endsWith(extension)
+									? newFileName
+									: `${newFileName}${extension}`;
+							}
+							const newBackground = new File(
+								[background],
+								validatedName || background.name,
+								{ type: background.type },
+							);
+							fd.append('background', newBackground || '');
+							uploadAsync({
+								method: 'POST',
+								endpoint: 'api/backgrounds',
+								body: fd,
+							});
+							handleAddBackgroundModalClose();
+						} else {
+							setErr(true);
+						}
+					}}
+				>
+					Upload
+				</Button>
+				<Button
+					color='var(--mantine-color-red-6)'
+					onClick={() => {
+						handleAddBackgroundModalClose();
+					}}
+				>
+					Cancel
+				</Button>
+			</Group>
+		</Stack>
+	);
+}

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

@@ -2,9 +2,7 @@ import {
 	ActionIcon,
 	Button,
 	Card,
-	FileInput,
 	Group,
-	Image,
 	Modal,
 	ScrollArea,
 	SimpleGrid,
@@ -14,7 +12,6 @@ import {
 } from '@mantine/core';
 import { useDebouncedValue, useDisclosure, useElementSize } from '@mantine/hooks';
 import { useCommonHooks } from 'hooks';
-import { useFileUploadAPI } from 'hooks/useAPI';
 import { useEffect, useState } from 'react';
 import { FiEdit, FiLoader, FiPlus, FiTrash, FiX } from 'react-icons/fi';
 import {
@@ -24,18 +21,19 @@ import {
 	scrollAreaClasses,
 	textInputClasses,
 } from 'styles';
+import { AddBackground } from './AddBackground';
 import { BackgroundLightbox } from './BackgroundLightbox';
 import { DeleteBackground } from './DeleteBackground';
 import { EditBackground } from './EditBackground';
 
 export function BackgroundModal({
 	backgroundModalOpened,
-	handleBackgroundModalClose,
+	closeModal,
 	backgroundList,
 	inUseBackgrounds,
 }: {
 	backgroundModalOpened: boolean;
-	handleBackgroundModalClose: () => void;
+	closeModal: () => void;
 	backgroundList: string[];
 	inUseBackgrounds: string[];
 }) {
@@ -54,12 +52,23 @@ export function BackgroundModal({
 	const [searchValue, setSearchValue] = useState<string>('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
 	const { isMobile, theme } = useCommonHooks();
-	const { mutateAsync: uploadAsync } = useFileUploadAPI();
+
-	const fd = new FormData();
+	const handleAddBackgroundModalClose = () => {
-	const handleFileUpload = (e: any) => {
+		setAdding(false);
+		setFileName('');
+		setNewFileName('');
+		setBackground(null);
 		setErr(false);
-		setBackground(e);
+	};
-		setFileName(e?.name);
+	const handleEditBackgroundModalClose = () => {
+		setEditing(false);
+		setFileName('');
+		setNewFileName('');
+		setBackground(null);
+	};
+	const handleDeleteBackgroundModalClose = () => {
+		setConfirm(false);
+		setFileName('');
 	};
 	useEffect(() => {
 		if (debouncedSearch === searchValue) {
@@ -78,12 +87,13 @@ export function BackgroundModal({
 				classNames={modalClasses}
 				opened={backgroundModalOpened}
 				onClose={() => {
-					setBackground(null);
+					closeModal();
+					setAdding(false);
+					setEditing(false);
+					setConfirm(false);
 					setFileName('');
 					setNewFileName('');
-					handleBackgroundModalClose();
+					setBackground(null);
-					setConfirm(false);
-					setEditing(false);
 				}}
 				fullScreen={isMobile}
 				centered
@@ -160,21 +170,15 @@ export function BackgroundModal({
 							{confirm && (
 								<DeleteBackground
 									fileName={fileName}
-									setFileName={setFileName}
 									inUseBackgrounds={inUseBackgrounds}
-									setBackground={setBackground}
+									handleDeleteBackgroundModalClose={handleDeleteBackgroundModalClose}
-									setNewFileName={setNewFileName}
-									setConfirm={setConfirm}
 								/>
 							)}
 							{editing && (
 								<EditBackground
 									fileName={fileName}
-									setFileName={setFileName}
 									inUseBackgrounds={inUseBackgrounds}
-									setBackground={setBackground}
+									handleEditBackgroundModalClose={handleEditBackgroundModalClose}
-									setNewFileName={setNewFileName}
-									setEditing={setEditing}
 								/>
 							)}
 							{!editing && !confirm && !adding && (
@@ -292,130 +296,17 @@ export function BackgroundModal({
 								</ScrollArea>
 							)}
 							{adding && (
-								<Stack
+								<AddBackground
-									display={'flex'}
+									fileName={fileName}
-									pos={'relative'}
+									setFileName={setFileName}
-									w={'100%'}
+									newFileName={newFileName}
-									align={'center'}
+									setNewFileName={setNewFileName}
-									justify='space-between'
+									background={background}
-									p={16}
+									setBackground={setBackground}
-								>
+									err={err}
-									<Group gap={0}>
+									setErr={setErr}
-										<Stack gap={0} w={'60%'}>
+									handleAddBackgroundModalClose={handleAddBackgroundModalClose}
-											<FileInput
+								/>
-												clearable
-												accept='image/png,image/jpeg'
-												value={background}
-												onChange={handleFileUpload}
-												label={'Upload Background'}
-												placeholder={'Select...'}
-												error={err && 'Please upload a background'}
-												description={
-													'Max size: 50MB for upload. Images are resized to 300kb after upload.'
-												}
-												pr={'xl'}
-												pl={0}
-												styles={{
-													input: {
-														color: 'var(--mantine-color-primary-0)',
-														borderColor: 'var(--mantine-color-primary-0)',
-													},
-													placeholder: {
-														color: 'var(--mantine-color-accent-0)',
-													},
-												}}
-											/>
-											<TextInput
-												label={'File Name'}
-												placeholder={fileName}
-												value={newFileName}
-												onChange={(e) => setNewFileName(e.target.value)}
-												pr={'xl'}
-												pl={0}
-												styles={{
-													input: {
-														color: 'var(--mantine-color-primary-0)',
-														borderColor: 'var(--mantine-color-primary-0)',
-													},
-												}}
-											/>
-										</Stack>
-										<Card
-											style={{
-												aspectRatio: '16/9',
-												width: '35%',
-												backgroundSize: 'cover',
-												backgroundPosition: 'center',
-												backgroundRepeat: 'no-repeat',
-												backgroundColor: 'var(--mantine-color-search-0)',
-												padding: '2rem',
-												margin: '1rem',
-												marginRight: 0,
-											}}
-										>
-											{background ? (
-												<Image
-													src={URL.createObjectURL(background)}
-													w={'100%'}
-													h={'100%'}
-												/>
-											) : (
-												<Image
-													src={'https://placehold.co/800x450?text=Upload%20an%20Image'}
-													w={'100%'}
-													h={'100%'}
-												/>
-											)}
-										</Card>
-									</Group>
-									<Group w={'100%'} justify='center'>
-										<Button
-											w={'min-content'}
-											disabled={!background}
-											onClick={() => {
-												if (background) {
-													const extension = background.name.substring(
-														background.name.lastIndexOf('.'),
-													);
-													const validatedName = newFileName.endsWith(extension)
-														? newFileName
-														: `${newFileName}${extension}`;
-													const newBackground = new File(
-														[background],
-														validatedName || background.name,
-														{ type: background.type },
-													);
-													fd.append('background', newBackground || '');
-													uploadAsync({
-														method: 'POST',
-														endpoint: 'api/backgrounds',
-														body: fd,
-													});
-													setAdding(false);
-													setBackground(null);
-													setNewFileName('');
-													setErr(false);
-												} else {
-													setErr(true);
-												}
-											}}
-										>
-											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>

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

@@ -3,18 +3,12 @@ import { useMutationAPI } from 'hooks';
 
 export function DeleteBackground({
 	fileName,
-	setFileName,
 	inUseBackgrounds,
-	setBackground,
+	handleDeleteBackgroundModalClose,
-	setNewFileName,
-	setConfirm,
 }: {
 	fileName: string;
-	setFileName: (searchValue: string) => void;
 	inUseBackgrounds: string[];
-	setBackground: React.Dispatch<React.SetStateAction<File | null>>;
+	handleDeleteBackgroundModalClose: () => void;
-	setNewFileName: (searchValue: string) => void;
-	setConfirm: (value: boolean) => void;
 }) {
 	const { mutateAsync } = useMutationAPI();
 	return (
@@ -57,14 +51,9 @@ export function DeleteBackground({
 			<Group>
 				<Button
 					mt={'auto'}
-					w={'min-content'}
 					color='red'
 					onClick={() => {
-						setBackground(null);
+						handleDeleteBackgroundModalClose();
-						setFileName('');
-						setNewFileName('');
-						setConfirm(false);
-						setFileName('');
 						mutateAsync({
 							method: 'DELETE',
 							endpoint: 'api/backgrounds',
@@ -74,17 +63,7 @@ export function DeleteBackground({
 				>
 					DELETE
 				</Button>
-				<Button
+				<Button mt={'auto'} onClick={handleDeleteBackgroundModalClose}>
-					mt={'auto'}
-					w={'min-content'}
-					onClick={() => {
-						setBackground(null);
-						setFileName('');
-						setNewFileName('');
-						setConfirm(false);
-						setFileName('');
-					}}
-				>
 					Cancel
 				</Button>
 			</Group>

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

@@ -5,18 +5,12 @@ import { textInputClasses } from 'styles';
 
 export function EditBackground({
 	fileName,
-	setFileName,
 	inUseBackgrounds,
-	setBackground,
+	handleEditBackgroundModalClose,
-	setNewFileName,
-	setEditing,
 }: {
 	fileName: string;
-	setFileName: (searchValue: string) => void;
 	inUseBackgrounds: string[];
-	setBackground: React.Dispatch<React.SetStateAction<File | null>>;
+	handleEditBackgroundModalClose: () => void;
-	setNewFileName: (searchValue: string) => void;
-	setEditing: React.Dispatch<React.SetStateAction<boolean>>;
 }) {
 	const [rename, setRename] = useState<string>('');
 	const { mutateAsync } = useMutationAPI();
@@ -60,7 +54,6 @@ export function EditBackground({
 			<Group>
 				<Button
 					mt={'auto'}
-					w={'min-content'}
 					color='green'
 					onClick={() => {
 						if (
@@ -89,25 +82,15 @@ export function EditBackground({
 								},
 							});
 						}
-						setBackground(null);
+						handleEditBackgroundModalClose();
-						setFileName('');
-						setNewFileName('');
-						setEditing(false);
 					}}
 				>
 					Save
 				</Button>
 				<Button
 					mt={'auto'}
-					w={'min-content'}
 					color={'var(--mantine-color-red-6)'}
-					onClick={() => {
+					onClick={handleEditBackgroundModalClose}
-						setBackground(null);
-						setFileName('');
-						setNewFileName('');
-						setEditing(false);
-						setFileName('');
-					}}
 				>
 					Cancel
 				</Button>

src/pages/settings/components/Theming/Backgrounds/index.ts

@@ -1,3 +1,5 @@
+export { AddBackground } from './AddBackground';
+export { BackgroundLightbox } from './BackgroundLightbox';
 export { BackgroundModal } from './BackgroundModal';
 export { DeleteBackground } from './DeleteBackground';
 export { EditBackground } from './EditBackground';

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

@@ -19,7 +19,7 @@ import { useCommonHooks } from 'hooks';
 import { useEffect, useRef, useState } from 'react';
 import { FiImage, FiSave, FiX } from 'react-icons/fi';
 import { modalClasses, scrollAreaClasses, textClasses, textInputClasses } from 'styles';
-import type { Theme } from 'types';
+import { BackgroundProperties, type Theme } from 'types';
 import { ThemeModalContent } from './ThemeModalContent';
 
 export function ThemeModal({
@@ -304,7 +304,8 @@ export function ThemeModal({
 												: undefined,
 										}}
 									>
-										Change {colorId}
+										Change{' '}
+										{BackgroundProperties[colorId as keyof typeof BackgroundProperties]}
 									</Text>
 									{colorId === 'backgroundColor' && (
 										<ColorPicker
@@ -556,7 +557,13 @@ export function ThemeModal({
 																		gap={0}
 																		key={key}
 																	>
-																		<Text key={key}>{key}</Text>
+																		<Text key={key}>
+																			{
+																				BackgroundProperties[
+																					key as keyof typeof BackgroundProperties
+																				]
+																			}
+																		</Text>
 																		{key === 'name' && (
 																			<Group w={'100%'} justify='center'>
 																				<Text>{defaultTheme[key as keyof Theme]}</Text>
@@ -568,14 +575,18 @@ export function ThemeModal({
 																			<Group w={'100%'} justify='center'>
 																				<Image
 																					w={'40%'}
-																					src={`../../api/backgroundImages/thumbs/${defaultTheme[key as keyof Theme] as string}`}
+																					src={
-																					alt='None'
+																						(
+																							defaultTheme[key as keyof Theme] as string
+																						).toLocaleLowerCase() === 'none'
+																							? 'https://placehold.co/540x360?text=None'
+																							: `../../api/backgroundImages/thumbs/${defaultTheme[key as keyof Theme] as string}`
+																					}
 																				/>
 																				<Text>→</Text>
 																				<Image
 																					w={'40%'}
 																					src={`../../api/backgroundImages/thumbs/${designerTheme[key as keyof Theme] as string}`}
-																					alt='None'
 																				/>
 																			</Group>
 																		)}
@@ -621,6 +632,7 @@ export function ThemeModal({
 										onClick={() => {
 											setSelectedTheme({ ...defaultTheme });
 										}}
+										mih={'36px'}
 									>
 										Reset Changes
 									</Button>

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

@@ -85,10 +85,6 @@ export function Themes() {
 		});
 	};
 
-	const handleBackgroundModalClose = () => {
-		closeBackgroundModal();
-	};
-
 	const handleSaveTheme = () => {
 		mutateAsync({
 			method: selectedTheme?.id === undefined ? 'POST' : 'PATCH',
@@ -154,7 +150,7 @@ export function Themes() {
 			/>
 			<BackgroundModal
 				backgroundModalOpened={backgroundModalOpened}
-				handleBackgroundModalClose={handleBackgroundModalClose}
+				closeModal={closeBackgroundModal}
 				backgroundList={backgroundList}
 				inUseBackgrounds={inUseBackgrounds}
 			/>

src/types/index.ts

@@ -7,6 +7,7 @@ export type { PersonalData } from './personalData';
 export type { Provider } from './provider';
 export type { SearchHistoryItem, SearchShortcut } from './search';
 export type { Theme, ThemePlaylist } from './theme';
+export { BackgroundProperties } from './theme';
 export type { User } from './user';
 export type {
 	CurrentWeather,

src/types/provider.ts

@@ -3,4 +3,5 @@ export interface Provider {
 	name: string;
 	url: string;
 	prefix: string;
+	default: number;
 }

src/types/theme.ts

@@ -18,3 +18,15 @@ export interface ThemePlaylist {
 	default: number;
 	themeList: string;
 }
+
+export enum BackgroundProperties {
+	backgroundImage = 'Background Image',
+	backgroundColor = 'Background Color',
+	searchColor = 'Search Color',
+	primaryColor = 'Primary Color',
+	accentColor = 'Accent Color',
+	borderColor = 'Border Color',
+	randomEnabled = 'Random',
+	textShadowsEnabled = 'Text Shadows',
+	appShadowsEnabled = 'App Shadows',
+}