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

Style updates

Browse Source
This commit is contained in:
Sean Edmunds
2025-10-14 16:17:10 -05:00
parent 982c0aca80
commit c8d4922ca4
10 changed files with 179 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@@ -116,5 +116,4 @@ sudo pm2 start server.cjs
- Mobile improvements
- Debounce all inputs
- Update to use forms
- Text formatting in background ScrollArea

54
package-lock.json generated
View File

@@ -10,10 +10,10 @@
"dependencies": {
"@gfazioli/mantine-text-animate": "^2.3.1",
"@hello-pangea/dnd": "^18.0.1",
"@mantine/core": "^8.3.4",
"@mantine/form": "^8.3.4",
"@mantine/hooks": "^8.3.4",
"@mantine/notifications": "^8.3.4",
"@mantine/core": "^8.3.5",
"@mantine/form": "^8.3.5",
"@mantine/hooks": "^8.3.5",
"@mantine/notifications": "^8.3.5",
"@tanstack/react-query": "^5.90.3",
"@tanstack/react-query-devtools": "^5.90.2",
"@tanstack/react-query-persist-client": "^5.90.5",
@@ -33,7 +33,7 @@
"@vitest/coverage-v8": "^3.2.4",
"@vitest/ui": "^3.2.4",
"typescript": "^5.9.3",
"vite": "^7.1.9",
"vite": "^7.1.10",
"vite-plugin-dts": "~4.5.4",
"vite-tsconfig-paths": "^5.1.4",
"vitest": "^3.2.4"
@@ -961,9 +961,9 @@
}
},
"node_modules/@mantine/core": {
"version": "8.3.4",
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-8.3.4.tgz",
"integrity": "sha512-RJ5QUe2FLLJ1uF8xWUpNhDqRFbaOn4S5yTjqLuaurqtZvzee85O/T90dRcR8UNDuE8e/Qqie/jsF/G9RiSxC6g==",
"version": "8.3.5",
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-8.3.5.tgz",
"integrity": "sha512-PdVNLMgOS2vFhOujRi6/VC9ic8w3UDyKX7ftwDeJ7yQT8CiepUxfbWWYpVpnq23bdWh/7fIT2Pn1EY8r8GOk7g==",
"license": "MIT",
"peer": true,
"dependencies": {
@@ -975,15 +975,15 @@
"type-fest": "^4.41.0"
},
"peerDependencies": {
"@mantine/hooks": "8.3.4",
"@mantine/hooks": "8.3.5",
"react": "^18.x || ^19.x",
"react-dom": "^18.x || ^19.x"
}
},
"node_modules/@mantine/form": {
"version": "8.3.4",
"resolved": "https://registry.npmjs.org/@mantine/form/-/form-8.3.4.tgz",
"integrity": "sha512-mfJ5tFTLP5IGBn1yY+ZpOMNF0/NPjjv+C8T1wL6Xcoik1FvfavdE/1viE1Dy7VlFZWxIb1mr0L0OrqRTL/8g0A==",
"version": "8.3.5",
"resolved": "https://registry.npmjs.org/@mantine/form/-/form-8.3.5.tgz",
"integrity": "sha512-i9UFiHtO1dlrJXZkquyt+71YcNNxPPSkIcJCRp7k0Tif7bPqWK2xijPDEXzqvA53YvMvEMoqaQCEQLVmH7Esdg==",
"license": "MIT",
"dependencies": {
"fast-deep-equal": "^3.1.3",
@@ -994,9 +994,9 @@
}
},
"node_modules/@mantine/hooks": {
"version": "8.3.4",
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-8.3.4.tgz",
"integrity": "sha512-zsgFa9yzJ4tz0BZmI+yAjI3uNEe6SoQHZlXmvDNXuWrWImpl6Zhoxxr/oVaISB4+KZJd3pRPajklQ+CETrMdhg==",
"version": "8.3.5",
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-8.3.5.tgz",
"integrity": "sha512-0Wf08eWLKi3WkKlxnV1W5vfuN6wcvAV2VbhQlOy0R9nrWorGTtonQF6qqBE3PnJFYF1/ZE+HkYZQ/Dr7DmYSMQ==",
"license": "MIT",
"peer": true,
"peerDependencies": {
@@ -1004,25 +1004,25 @@
}
},
"node_modules/@mantine/notifications": {
"version": "8.3.4",
"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-8.3.4.tgz",
"integrity": "sha512-4qgvHYCTdfUVBI0FGEL/1NbmMFlmdYHk0ATuyOjJbmpw+y6OnA8FsCqfu0PHagntm+YmWJJwJRwq7TQMbULTaA==",
"version": "8.3.5",
"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-8.3.5.tgz",
"integrity": "sha512-8TvzrPxfdtOLGTalv7Ei1hy2F6KbR3P7/V73yw3AOKhrf1ydS89sqV2ShbsucHGJk9Pto0wjdTPd8Q7pm5MAYw==",
"license": "MIT",
"dependencies": {
"@mantine/store": "8.3.4",
"@mantine/store": "8.3.5",
"react-transition-group": "4.4.5"
},
"peerDependencies": {
"@mantine/core": "8.3.4",
"@mantine/hooks": "8.3.4",
"@mantine/core": "8.3.5",
"@mantine/hooks": "8.3.5",
"react": "^18.x || ^19.x",
"react-dom": "^18.x || ^19.x"
}
},
"node_modules/@mantine/store": {
"version": "8.3.4",
"resolved": "https://registry.npmjs.org/@mantine/store/-/store-8.3.4.tgz",
"integrity": "sha512-EzHu8ZPtjs4fUsougpnNOZ03Oe/9sXY9Azgqu3uR7TjxyPhbY3p8Vmh+MfQDdAiKt3+rlJqSr980gtlHJFdKNw==",
"version": "8.3.5",
"resolved": "https://registry.npmjs.org/@mantine/store/-/store-8.3.5.tgz",
"integrity": "sha512-qN4fFsDMy86IV9oh1gZlDTv41RAsO0grjx90FGyT5QCv7NTgcavwxB74GBkhp45W8xn+Ms/awKy+6NxnmLmW1w==",
"license": "MIT",
"peerDependencies": {
"react": "^18.x || ^19.x"
@@ -4573,9 +4573,9 @@
}
},
"node_modules/vite": {
"version": "7.1.9",
"resolved": "https://registry.npmjs.org/vite/-/vite-7.1.9.tgz",
"integrity": "sha512-4nVGliEpxmhCL8DslSAUdxlB6+SMrhB0a1v5ijlh1xB1nEPuy1mxaHxysVucLHuWryAxLWg6a5ei+U4TLn/rFg==",
"version": "7.1.10",
"resolved": "https://registry.npmjs.org/vite/-/vite-7.1.10.tgz",
"integrity": "sha512-CmuvUBzVJ/e3HGxhg6cYk88NGgTnBoOo7ogtfJJ0fefUWAxN/WDSUa50o+oVBxuIhO8FoEZW0j2eW7sfjs5EtA==",
"dev": true,
"license": "MIT",
"peer": true,

10
package.json
View File

@@ -12,10 +12,10 @@
"dependencies": {
"@gfazioli/mantine-text-animate": "^2.3.1",
"@hello-pangea/dnd": "^18.0.1",
"@mantine/core": "^8.3.4",
"@mantine/form": "^8.3.4",
"@mantine/hooks": "^8.3.4",
"@mantine/notifications": "^8.3.4",
"@mantine/core": "^8.3.5",
"@mantine/form": "^8.3.5",
"@mantine/hooks": "^8.3.5",
"@mantine/notifications": "^8.3.5",
"@tanstack/react-query": "^5.90.3",
"@tanstack/react-query-devtools": "^5.90.2",
"@tanstack/react-query-persist-client": "^5.90.5",
@@ -35,7 +35,7 @@
"@vitest/coverage-v8": "^3.2.4",
"@vitest/ui": "^3.2.4",
"typescript": "^5.9.3",
"vite": "^7.1.9",
"vite": "^7.1.10",
"vite-plugin-dts": "~4.5.4",
"vite-tsconfig-paths": "^5.1.4",
"vitest": "^3.2.4"

3
src/components/ManagementPill.tsx
View File

@@ -16,9 +16,6 @@ export function ManagementPill({
return (
<Group
style={{
position: 'absolute',
right: '1rem',
top: '.5rem',
width: 'fit-content',
backgroundColor:
'color-mix(in srgb, var(--mantine-color-background-0), transparent 50%)',

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

@@ -1,4 +1,5 @@
import {
Box,
Card,
type ComboboxItem,
type ComboboxLikeRenderOptionInput,
@@ -68,16 +69,25 @@ function DebouncedApplication({
</Stack>
}
/>
<ManagementPill
enabled={app.enabled}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setUpdate({
...app,
enabled: event.target.checked ? 1 : 0,
});
<Box
style={{
position: 'absolute',
right: '1rem',
top: '.5rem',
}}
openModal={openModal}
/>
>
<ManagementPill
enabled={app.enabled}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setUpdate({
...app,
enabled: event.target.checked ? 1 : 0,
});
}}
openModal={openModal}
/>
</Box>
<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
<TextInput
label={'Name'}

29
src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx
View File

@@ -1,4 +1,4 @@
import { Card, Group, Select, Stack, Text, TextInput } from '@mantine/core';
import { Box, Card, Group, Select, Stack, Text, TextInput } from '@mantine/core';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { DeleteItemModal, ManagementPill } from 'components';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
@@ -72,16 +72,25 @@ function DebouncedBookmarkItem({
}
title='Delete Bookmark'
/>
<ManagementPill
enabled={bookmark.enabled}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setUpdate({
...bookmark,
enabled: event.target.checked ? 1 : 0,
});
<Box
style={{
position: 'absolute',
right: '1rem',
top: '.5rem',
}}
openModal={openModal}
/>
>
<ManagementPill
enabled={bookmark.enabled}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setUpdate({
...bookmark,
enabled: event.target.checked ? 1 : 0,
});
}}
openModal={openModal}
/>
</Box>
<Group
justify='space-between'
pos={'relative'}

26
src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx
View File

@@ -212,16 +212,24 @@ function DebouncedGroupSettingsItem({
top: '-3.25rem',
}}
>
<ManagementPill
enabled={group.enabled}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setUpdate({
...group,
enabled: event.target.checked ? 1 : 0,
});
<Box
style={{
position: 'absolute',
right: '1rem',
top: '.5rem',
}}
openModal={openModal}
/>
>
<ManagementPill
enabled={group.enabled}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setUpdate({
...group,
enabled: event.target.checked ? 1 : 0,
});
}}
openModal={openModal}
/>
</Box>
</Group>
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId={`${bookmarkGroup.id}`}>

29
src/pages/settings/components/Messages/DebouncedMessage.tsx
View File

@@ -1,4 +1,4 @@
import { Card, Stack, Text, TextInput } from '@mantine/core';
import { Box, Card, Stack, Text, TextInput } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { DeleteItemModal, ManagementPill } from 'components';
import { useCommonHooks } from 'hooks';
@@ -39,16 +39,25 @@ function DebouncedMessage({
</Stack>
}
/>
<ManagementPill
enabled={message.customGreeting}
onChange={() => {
setMessage({
...message,
customGreeting: message.customGreeting === 1 ? 0 : 1,
});
<Box
style={{
position: 'absolute',
right: '1rem',
top: '.5rem',
}}
openModal={openModal}
/>
>
<ManagementPill
enabled={message.customGreeting}
onChange={() => {
setMessage({
...message,
customGreeting: message.customGreeting === 1 ? 0 : 1,
});
}}
openModal={openModal}
/>
</Box>
<TextInput
label={label}
disabled={message.customGreeting === 0}

102
src/pages/settings/components/Messages/Messages.tsx
View File

@@ -1,4 +1,5 @@
import { Button, Grid, GridCol, Group, Stack, TextInput } 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';
@@ -12,11 +13,17 @@ const MessageSettings = () => {
const { data: messageData, isFetched: isMessagesFetched } = useQueryAPI({
endpoint: endpoint,
});
const form = useForm({
initialValues: {
message: '',
},
validate: {
message: isNotEmpty('Message is required'),
},
});
const { isMobile, theme } = useCommonHooks();
const { mutateAsync } = useMutationAPI();
const [messages, setMessages] = useState<Message[]>([]);
const [newMessage, setNewMessage] = useState('');
const [newMessageError, setNewMessageError] = useState<string>('');
const [message, setMessage] = useState({});
const [debounced] = useDebouncedValue(message, 1000);
const [searchValue, setSearchValue] = useState('');
@@ -25,9 +32,8 @@ const MessageSettings = () => {
const [isLoading, setIsLoading] = useState(false);
const handleClose = () => {
setNewMessage('');
setNewMessageError('');
closeModal();
form.reset();
};
useEffect(() => {
@@ -78,51 +84,49 @@ const MessageSettings = () => {
handleClose={handleClose}
title={'Add a new message'}
body={
<Stack gap={0} align='center'>
<TextInput
label='Message text'
autoFocus={!isMobile}
w={'75%'}
className={textInputClasses.settingsItem}
classNames={textInputClasses}
onChange={(event) => {
setNewMessage(event.target.value);
}}
error={newMessageError}
styles={
theme.textShadowsEnabled
? {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
: undefined
}
/>
<Group mt={'1rem'}>
<Button
color={'green'}
onClick={() => {
if (newMessage) {
mutateAsync({
method: 'POST',
endpoint: endpoint,
body: { message: newMessage },
}).then(handleClose);
} else {
setNewMessageError('Please enter a message');
}
}}
>
Save
</Button>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={handleClose}
>
Cancel
</Button>
</Group>
</Stack>
<form
onSubmit={form.onSubmit((values) => {
mutateAsync({
method: 'POST',
endpoint: endpoint,
body: { message: values.message },
});
handleClose();
})}
>
<Stack gap={0} align='center'>
<TextInput
autoFocus={!isMobile}
key={form.key('message')}
{...form.getInputProps('message')}
label={'Message'}
placeholder='eg. Hello, World!'
w={'45%'}
className={textInputClasses.settingsItem}
classNames={textInputClasses}
withAsterisk
styles={
theme.textShadowsEnabled
? {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
: undefined
}
/>
<Group mt={'1rem'}>
<Button type='submit' color={'green'}>
Save
</Button>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={handleClose}
>
Cancel
</Button>
</Group>
</Stack>
</form>
}
/>
<Stack

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

@@ -1,4 +1,4 @@
import { Card, Group, Stack, Text, TextInput } from '@mantine/core';
import { Box, Card, Group, Stack, Text, TextInput } from '@mantine/core';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { DeleteItemModal, ManagementPill } from 'components';
import { useCommonHooks, useMutationAPI } from 'hooks';
@@ -60,17 +60,26 @@ function DebouncedSearchProvider({
</Stack>
}
/>
<ManagementPill
enabled={provider.default}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setUpdate({
...provider,
default: event.target.checked ? 1 : 0,
});
<Box
style={{
position: 'absolute',
right: '1rem',
top: '.5rem',
}}
openModal={openModal}
label={['Non-Default', 'Default']}
/>
>
<ManagementPill
enabled={provider.default}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setUpdate({
...provider,
default: event.target.checked ? 1 : 0,
});
}}
openModal={openModal}
label={['Non-Default', 'Default']}
/>
</Box>
<Stack w={'100%'} align='center'>
<Group w={'100%'} justify='center'>
<TextInput