Default Search Provider support; Style updates

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 handleFileUpload = (e: any) => {
+
+	const handleAddBackgroundModalClose = () => {
+		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();
-					setConfirm(false);
-					setEditing(false);
+					setBackground(null);
 				}}
 				fullScreen={isMobile}
 				centered
@@ -160,21 +170,15 @@ export function BackgroundModal({
 							{confirm && (
 								<DeleteBackground
 									fileName={fileName}
-									setFileName={setFileName}
 									inUseBackgrounds={inUseBackgrounds}
-									setBackground={setBackground}
-									setNewFileName={setNewFileName}
-									setConfirm={setConfirm}
+									handleDeleteBackgroundModalClose={handleDeleteBackgroundModalClose}
 								/>
 							)}
 							{editing && (
 								<EditBackground
 									fileName={fileName}
-									setFileName={setFileName}
 									inUseBackgrounds={inUseBackgrounds}
-									setBackground={setBackground}
-									setNewFileName={setNewFileName}
-									setEditing={setEditing}
+									handleEditBackgroundModalClose={handleEditBackgroundModalClose}
 								/>
 							)}
 							{!editing && !confirm && !adding && (
@@ -292,130 +296,17 @@ export function BackgroundModal({
 								</ScrollArea>
 							)}
 							{adding && (
-								<Stack
-									display={'flex'}
-									pos={'relative'}
-									w={'100%'}
-									align={'center'}
-									justify='space-between'
-									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 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>
+								<AddBackground
+									fileName={fileName}
+									setFileName={setFileName}
+									newFileName={newFileName}
+									setNewFileName={setNewFileName}
+									background={background}
+									setBackground={setBackground}
+									err={err}
+									setErr={setErr}
+									handleAddBackgroundModalClose={handleAddBackgroundModalClose}
+								/>
 							)}
 						</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,
-	setNewFileName,
-	setConfirm,
+	handleDeleteBackgroundModalClose,
 }: {
 	fileName: string;
-	setFileName: (searchValue: string) => void;
 	inUseBackgrounds: string[];
-	setBackground: React.Dispatch<React.SetStateAction<File | null>>;
-	setNewFileName: (searchValue: string) => void;
-	setConfirm: (value: boolean) => void;
+	handleDeleteBackgroundModalClose: () => void;
 }) {
 	const { mutateAsync } = useMutationAPI();
 	return (
@@ -57,14 +51,9 @@ export function DeleteBackground({
 			<Group>
 				<Button
 					mt={'auto'}
-					w={'min-content'}
 					color='red'
 					onClick={() => {
-						setBackground(null);
-						setFileName('');
-						setNewFileName('');
-						setConfirm(false);
-						setFileName('');
+						handleDeleteBackgroundModalClose();
 						mutateAsync({
 							method: 'DELETE',
 							endpoint: 'api/backgrounds',
@@ -74,17 +63,7 @@ export function DeleteBackground({
 				>
 					DELETE
 				</Button>
-				<Button
-					mt={'auto'}
-					w={'min-content'}
-					onClick={() => {
-						setBackground(null);
-						setFileName('');
-						setNewFileName('');
-						setConfirm(false);
-						setFileName('');
-					}}
-				>
+				<Button mt={'auto'} onClick={handleDeleteBackgroundModalClose}>
 					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,
-	setNewFileName,
-	setEditing,
+	handleEditBackgroundModalClose,
 }: {
 	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>>;
+	handleEditBackgroundModalClose: () => void;
 }) {
 	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);
-						setFileName('');
-						setNewFileName('');
-						setEditing(false);
+						handleEditBackgroundModalClose();
 					}}
 				>
 					Save
 				</Button>
 				<Button
 					mt={'auto'}
-					w={'min-content'}
 					color={'var(--mantine-color-red-6)'}
-					onClick={() => {
-						setBackground(null);
-						setFileName('');
-						setNewFileName('');
-						setEditing(false);
-						setFileName('');
-					}}
+					onClick={handleEditBackgroundModalClose}
 				>
 					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';