diff --git a/README.md b/README.md index a641009..5738f6a 100644 --- a/README.md +++ b/README.md @@ -116,5 +116,4 @@ sudo pm2 start server.cjs - Mobile improvements - Debounce all inputs -- Update to use forms - Text formatting in background ScrollArea diff --git a/package-lock.json b/package-lock.json index 2d81dc2..8f12478 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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, diff --git a/package.json b/package.json index e0ac8d1..4db5816 100644 --- a/package.json +++ b/package.json @@ -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" diff --git a/src/components/ManagementPill.tsx b/src/components/ManagementPill.tsx index 6214c5f..fb80fca 100644 --- a/src/components/ManagementPill.tsx +++ b/src/components/ManagementPill.tsx @@ -16,9 +16,6 @@ export function ManagementPill({ return ( } /> - ) => { - setUpdate({ - ...app, - enabled: event.target.checked ? 1 : 0, - }); + + > + ) => { + setUpdate({ + ...app, + enabled: event.target.checked ? 1 : 0, + }); + }} + openModal={openModal} + /> + + - ) => { - setUpdate({ - ...bookmark, - enabled: event.target.checked ? 1 : 0, - }); + + > + ) => { + setUpdate({ + ...bookmark, + enabled: event.target.checked ? 1 : 0, + }); + }} + openModal={openModal} + /> + + - ) => { - setUpdate({ - ...group, - enabled: event.target.checked ? 1 : 0, - }); + + > + ) => { + setUpdate({ + ...group, + enabled: event.target.checked ? 1 : 0, + }); + }} + openModal={openModal} + /> + diff --git a/src/pages/settings/components/Messages/DebouncedMessage.tsx b/src/pages/settings/components/Messages/DebouncedMessage.tsx index 54ab509..d4361b4 100644 --- a/src/pages/settings/components/Messages/DebouncedMessage.tsx +++ b/src/pages/settings/components/Messages/DebouncedMessage.tsx @@ -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({ } /> - { - setMessage({ - ...message, - customGreeting: message.customGreeting === 1 ? 0 : 1, - }); + + > + { + setMessage({ + ...message, + customGreeting: message.customGreeting === 1 ? 0 : 1, + }); + }} + openModal={openModal} + /> + + { 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([]); - const [newMessage, setNewMessage] = useState(''); - const [newMessageError, setNewMessageError] = useState(''); 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={ - - { - setNewMessage(event.target.value); - }} - error={newMessageError} - styles={ - theme.textShadowsEnabled - ? { - label: { boxShadow: '2px 2px var(--mantine-color-border-0)' }, - } - : undefined - } - /> - - - - - +
{ + mutateAsync({ + method: 'POST', + endpoint: endpoint, + body: { message: values.message }, + }); + handleClose(); + })} + > + + + + + + + +
} /> } /> - ) => { - setUpdate({ - ...provider, - default: event.target.checked ? 1 : 0, - }); + + > + ) => { + setUpdate({ + ...provider, + default: event.target.checked ? 1 : 0, + }); + }} + openModal={openModal} + label={['Non-Default', 'Default']} + /> + +