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

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