Style updates

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

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/core": "^8.3.5",
-				"@mantine/form": "^8.3.4",
+				"@mantine/form": "^8.3.5",
-				"@mantine/hooks": "^8.3.4",
+				"@mantine/hooks": "^8.3.5",
-				"@mantine/notifications": "^8.3.4",
+				"@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",
+			"version": "8.3.5",
-			"resolved": "https://registry.npmjs.org/@mantine/core/-/core-8.3.4.tgz",
+			"resolved": "https://registry.npmjs.org/@mantine/core/-/core-8.3.5.tgz",
-			"integrity": "sha512-RJ5QUe2FLLJ1uF8xWUpNhDqRFbaOn4S5yTjqLuaurqtZvzee85O/T90dRcR8UNDuE8e/Qqie/jsF/G9RiSxC6g==",
+			"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",
+			"version": "8.3.5",
-			"resolved": "https://registry.npmjs.org/@mantine/form/-/form-8.3.4.tgz",
+			"resolved": "https://registry.npmjs.org/@mantine/form/-/form-8.3.5.tgz",
-			"integrity": "sha512-mfJ5tFTLP5IGBn1yY+ZpOMNF0/NPjjv+C8T1wL6Xcoik1FvfavdE/1viE1Dy7VlFZWxIb1mr0L0OrqRTL/8g0A==",
+			"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",
+			"version": "8.3.5",
-			"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-8.3.4.tgz",
+			"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-8.3.5.tgz",
-			"integrity": "sha512-zsgFa9yzJ4tz0BZmI+yAjI3uNEe6SoQHZlXmvDNXuWrWImpl6Zhoxxr/oVaISB4+KZJd3pRPajklQ+CETrMdhg==",
+			"integrity": "sha512-0Wf08eWLKi3WkKlxnV1W5vfuN6wcvAV2VbhQlOy0R9nrWorGTtonQF6qqBE3PnJFYF1/ZE+HkYZQ/Dr7DmYSMQ==",
 			"license": "MIT",
 			"peer": true,
 			"peerDependencies": {
@@ -1004,25 +1004,25 @@
 			}
 		},
 		"node_modules/@mantine/notifications": {
-			"version": "8.3.4",
+			"version": "8.3.5",
-			"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-8.3.4.tgz",
+			"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-8.3.5.tgz",
-			"integrity": "sha512-4qgvHYCTdfUVBI0FGEL/1NbmMFlmdYHk0ATuyOjJbmpw+y6OnA8FsCqfu0PHagntm+YmWJJwJRwq7TQMbULTaA==",
+			"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/core": "8.3.5",
-				"@mantine/hooks": "8.3.4",
+				"@mantine/hooks": "8.3.5",
 				"react": "^18.x || ^19.x",
 				"react-dom": "^18.x || ^19.x"
 			}
 		},
 		"node_modules/@mantine/store": {
-			"version": "8.3.4",
+			"version": "8.3.5",
-			"resolved": "https://registry.npmjs.org/@mantine/store/-/store-8.3.4.tgz",
+			"resolved": "https://registry.npmjs.org/@mantine/store/-/store-8.3.5.tgz",
-			"integrity": "sha512-EzHu8ZPtjs4fUsougpnNOZ03Oe/9sXY9Azgqu3uR7TjxyPhbY3p8Vmh+MfQDdAiKt3+rlJqSr980gtlHJFdKNw==",
+			"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",
+			"version": "7.1.10",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-7.1.9.tgz",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-7.1.10.tgz",
-			"integrity": "sha512-4nVGliEpxmhCL8DslSAUdxlB6+SMrhB0a1v5ijlh1xB1nEPuy1mxaHxysVucLHuWryAxLWg6a5ei+U4TLn/rFg==",
+			"integrity": "sha512-CmuvUBzVJ/e3HGxhg6cYk88NGgTnBoOo7ogtfJJ0fefUWAxN/WDSUa50o+oVBxuIhO8FoEZW0j2eW7sfjs5EtA==",
 			"dev": true,
 			"license": "MIT",
 			"peer": true,

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/core": "^8.3.5",
-		"@mantine/form": "^8.3.4",
+		"@mantine/form": "^8.3.5",
-		"@mantine/hooks": "^8.3.4",
+		"@mantine/hooks": "^8.3.5",
-		"@mantine/notifications": "^8.3.4",
+		"@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"

src/components/ManagementPill.tsx

@@ -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%)',

src/pages/settings/components/Applications/DebouncedApplication.tsx

@@ -1,4 +1,5 @@
 import {
+	Box,
 	Card,
 	type ComboboxItem,
 	type ComboboxLikeRenderOptionInput,
@@ -68,16 +69,25 @@ function DebouncedApplication({
 					</Stack>
 				}
 			/>
-			<ManagementPill
+			<Box
-				enabled={app.enabled}
+				style={{
-				onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+					position: 'absolute',
-					setUpdate({
+					right: '1rem',
-						...app,
+					top: '.5rem',
-						enabled: event.target.checked ? 1 : 0,
-					});
 				}}
-				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'}

src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx

@@ -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
+			<Box
-				enabled={bookmark.enabled}
+				style={{
-				onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+					position: 'absolute',
-					setUpdate({
+					right: '1rem',
-						...bookmark,
+					top: '.5rem',
-						enabled: event.target.checked ? 1 : 0,
-					});
 				}}
-				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'}

src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx

@@ -212,16 +212,24 @@ function DebouncedGroupSettingsItem({
 							top: '-3.25rem',
 						}}
 					>
-						<ManagementPill
+						<Box
-							enabled={group.enabled}
+							style={{
-							onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+								position: 'absolute',
-								setUpdate({
+								right: '1rem',
-									...group,
+								top: '.5rem',
-									enabled: event.target.checked ? 1 : 0,
-								});
 							}}
-							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}`}>

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({
 					</Stack>
 				}
 			/>
-			<ManagementPill
+			<Box
-				enabled={message.customGreeting}
+				style={{
-				onChange={() => {
+					position: 'absolute',
-					setMessage({
+					right: '1rem',
-						...message,
+					top: '.5rem',
-						customGreeting: message.customGreeting === 1 ? 0 : 1,
-					});
 				}}
-				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}

src/pages/settings/components/Messages/Messages.tsx

@@ -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'>
+					<form
-						<TextInput
+						onSubmit={form.onSubmit((values) => {
-							label='Message text'
+							mutateAsync({
-							autoFocus={!isMobile}
+								method: 'POST',
-							w={'75%'}
+								endpoint: endpoint,
-							className={textInputClasses.settingsItem}
+								body: { message: values.message },
-							classNames={textInputClasses}
+							});
-							onChange={(event) => {
+							handleClose();
-								setNewMessage(event.target.value);
+						})}
-							}}
+					>
-							error={newMessageError}
+						<Stack gap={0} align='center'>
-							styles={
+							<TextInput
-								theme.textShadowsEnabled
+								autoFocus={!isMobile}
-									? {
+								key={form.key('message')}
-											label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+								{...form.getInputProps('message')}
-										}
+								label={'Message'}
-									: undefined
+								placeholder='eg. Hello, World!'
-							}
+								w={'45%'}
-						/>
+								className={textInputClasses.settingsItem}
-						<Group mt={'1rem'}>
+								classNames={textInputClasses}
-							<Button
+								withAsterisk
-								color={'green'}
+								styles={
-								onClick={() => {
+									theme.textShadowsEnabled
-									if (newMessage) {
+										? {
-										mutateAsync({
+												label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
-											method: 'POST',
+											}
-											endpoint: endpoint,
+										: undefined
-											body: { message: newMessage },
+								}
-										}).then(handleClose);
+							/>
-									} else {
+							<Group mt={'1rem'}>
-										setNewMessageError('Please enter a message');
+								<Button type='submit' color={'green'}>
-									}
+									Save
-								}}
+								</Button>
-							>
+								<Button
-								Save
+									color={'red'}
-							</Button>
+									styles={{ label: { color: 'black' } }}
-							<Button
+									onClick={handleClose}
-								color={'red'}
+								>
-								styles={{ label: { color: 'black' } }}
+									Cancel
-								onClick={handleClose}
+								</Button>
-							>
+							</Group>
-								Cancel
+						</Stack>
-							</Button>
+					</form>
-						</Group>
-					</Stack>
 				}
 			/>
 			<Stack

src/pages/settings/components/Search/DebouncedSearchProvider.tsx

@@ -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
+			<Box
-				enabled={provider.default}
+				style={{
-				onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+					position: 'absolute',
-					setUpdate({
+					right: '1rem',
-						...provider,
+					top: '.5rem',
-						default: event.target.checked ? 1 : 0,
-					});
 				}}
-				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