smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Default Search Provider support; Style updates

Browse Source
This commit is contained in:
Sean Edmunds
2025-07-22 14:19:36 -05:00
parent 063bc10094
commit b948abad48
22 changed files with 391 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
package-lock.json generated
View File

@@ -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",
"resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.15.tgz",
"integrity": "sha512-oaeTSbCef7U/z7rDeJA138xpG3NuKc64/rZ2qmUFkFJmnMsAPaluIifqyWd8hSSMxyP9oie3dLAqYPblag9KgA==",
"version": "24.1.0",
"resolved": "https://registry.npmjs.org/@types/node/-/node-24.1.0.tgz",
"integrity": "sha512-ut5FthK5moxFKH2T1CUOC6ctR67rQRvvHdFLCD2Ql6KXmMuCrjsSsRI9UsLCm9M18BMwClv4pn327UvB7eeO1w==",
"dev": true,
"license": "MIT",
"dependencies": {

2
package.json
View File

@@ -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",

12
src/components/HelpModal/HelpModal.tsx
View File

@@ -5,17 +5,13 @@ import type { Application, Provider } from 'types';
import HelpSection from './HelpSection';
export function HelpModal({
setSearchValue,
setProviderLabel,
setProviderURL,
handleResetSearch,
providerModalOpened,
closeProviderModal,
applicationData,
providerData,
}: {
setSearchValue: (value: string) => void;
setProviderLabel: (label: string) => void;
setProviderURL: (url: string) => void;
handleResetSearch: () => 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

4
src/components/ManagementPill.tsx
View File

@@ -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' },

12
src/components/WeatherModal/WeatherModal.tsx
View File

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

4
src/hooks/useAPI.tsx
View File

@@ -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'] });
},
});
}

34
src/hooks/useCommonHooks.ts
View File

@@ -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 [providerURL, setProviderURL] = useState('https://www.google.com/search?q=');
const [providerPrefix, setProviderPrefix] = useState('/g');
const [providerLabel, setProviderLabel] = useState(defaultProviderLabel);
const [providerURL, setProviderURL] = useState(defaultProviderURL);
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,

46
src/pages/homepage/components/Search/Search.tsx
View File

@@ -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('');
setProviderLabel('Google Search');
setProviderPrefix('/g');
handleResetSearch();
setPlaceholderValue('');
if (dropdownOpened) {
closeDropdown();
@@ -242,9 +256,9 @@ export default function Search({
setProviderLabel('Invalid function');
}
} else {
setProviderLabel('Google Search');
setProviderURL('https://www.google.com/search?q=');
setProviderPrefix('/g');
setProviderLabel(defaultProviderLabel);
setProviderURL(defaultProviderURL);
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}
setProviderLabel={setProviderLabel}
setProviderURL={setProviderURL}
handleResetSearch={handleResetSearch}
applicationData={applications}
providerData={providers}
providerModalOpened={providerModalOpened}
@@ -435,9 +457,7 @@ export default function Search({
current={current}
extendedForecast={extendedForecast}
weatherModalOpened={weatherModalOpened}
setSearchValue={setSearchValue}
setProviderLabel={setProviderLabel}
setProviderURL={setProviderURL}
handleResetSearch={handleResetSearch}
closeWeatherModal={closeWeatherModal}
/>
</Stack>

6
src/pages/settings/components/Applications/DebouncedApplication.tsx
View File

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

34
src/pages/settings/components/Search/DebouncedSearchProvider.tsx
View File

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

31
src/pages/settings/components/Search/SearchProviderSettingsItem.tsx
View File

@@ -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

49
src/pages/settings/components/Search/SearchProviders.tsx
View File

@@ -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
onClick={(e) => {
e.stopPropagation();
}}
>
<Box>
<SearchProviderSettingsItem provider={provider} />
</Box>
</Popover.Target>

144
src/pages/settings/components/Theming/Backgrounds/AddBackground.tsx Normal file
View File

@@ -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>
);
}

183
src/pages/settings/components/Theming/Backgrounds/BackgroundModal.tsx
View File

@@ -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>

29
src/pages/settings/components/Theming/Backgrounds/DeleteBackground.tsx
View File

@@ -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>

25
src/pages/settings/components/Theming/Backgrounds/EditBackground.tsx
View File

@@ -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>

2
src/pages/settings/components/Theming/Backgrounds/index.ts
View File

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

24
src/pages/settings/components/Theming/Themes/ThemeModal.tsx
View File

@@ -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}`}
alt='None'
src={
(
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>

6
src/pages/settings/components/Theming/Themes/Themes.tsx
View File

@@ -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}
/>

1
src/types/index.ts
View File

@@ -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,

1
src/types/provider.ts
View File

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

12
src/types/theme.ts
View File

@@ -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',
}