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,6 +69,13 @@ function DebouncedApplication({
 					</Stack>
 				}
 			/>
+			<Box
+				style={{
+					position: 'absolute',
+					right: '1rem',
+					top: '.5rem',
+				}}
+			>
 				<ManagementPill
 					enabled={app.enabled}
 					onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
@@ -78,6 +86,8 @@ function DebouncedApplication({
 					}}
 					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,6 +72,13 @@ function DebouncedBookmarkItem({
 				}
 				title='Delete Bookmark'
 			/>
+			<Box
+				style={{
+					position: 'absolute',
+					right: '1rem',
+					top: '.5rem',
+				}}
+			>
 				<ManagementPill
 					enabled={bookmark.enabled}
 					onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
@@ -82,6 +89,8 @@ function DebouncedBookmarkItem({
 					}}
 					openModal={openModal}
 				/>
+			</Box>
+
 			<Group
 				justify='space-between'
 				pos={'relative'}

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

@@ -211,6 +211,13 @@ function DebouncedGroupSettingsItem({
 							right: '6rem',
 							top: '-3.25rem',
 						}}
+					>
+						<Box
+							style={{
+								position: 'absolute',
+								right: '1rem',
+								top: '.5rem',
+							}}
 						>
 							<ManagementPill
 								enabled={group.enabled}
@@ -222,6 +229,7 @@ function DebouncedGroupSettingsItem({
 								}}
 								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,6 +39,13 @@ function DebouncedMessage({
 					</Stack>
 				}
 			/>
+			<Box
+				style={{
+					position: 'absolute',
+					right: '1rem',
+					top: '.5rem',
+				}}
+			>
 				<ManagementPill
 					enabled={message.customGreeting}
 					onChange={() => {
@@ -49,6 +56,8 @@ function DebouncedMessage({
 					}}
 					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,17 +84,27 @@ const MessageSettings = () => {
 				handleClose={handleClose}
 				title={'Add a new message'}
 				body={
+					<form
+						onSubmit={form.onSubmit((values) => {
+							mutateAsync({
+								method: 'POST',
+								endpoint: endpoint,
+								body: { message: values.message },
+							});
+							handleClose();
+						})}
+					>
 						<Stack gap={0} align='center'>
 							<TextInput
-							label='Message text'
 								autoFocus={!isMobile}
-							w={'75%'}
+								key={form.key('message')}
+								{...form.getInputProps('message')}
+								label={'Message'}
+								placeholder='eg. Hello, World!'
+								w={'45%'}
 								className={textInputClasses.settingsItem}
 								classNames={textInputClasses}
-							onChange={(event) => {
+								withAsterisk
-								setNewMessage(event.target.value);
-							}}
-							error={newMessageError}
 								styles={
 									theme.textShadowsEnabled
 										? {
@@ -98,20 +114,7 @@ const MessageSettings = () => {
 								}
 							/>
 							<Group mt={'1rem'}>
-							<Button
+								<Button type='submit' color={'green'}>
-								color={'green'}
-								onClick={() => {
-									if (newMessage) {
-										mutateAsync({
-											method: 'POST',
-											endpoint: endpoint,
-											body: { message: newMessage },
-										}).then(handleClose);
-									} else {
-										setNewMessageError('Please enter a message');
-									}
-								}}
-							>
 									Save
 								</Button>
 								<Button
@@ -123,6 +126,7 @@ const MessageSettings = () => {
 								</Button>
 							</Group>
 						</Stack>
+					</form>
 				}
 			/>
 			<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,6 +60,13 @@ function DebouncedSearchProvider({
 					</Stack>
 				}
 			/>
+			<Box
+				style={{
+					position: 'absolute',
+					right: '1rem',
+					top: '.5rem',
+				}}
+			>
 				<ManagementPill
 					enabled={provider.default}
 					onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
@@ -71,6 +78,8 @@ function DebouncedSearchProvider({
 					openModal={openModal}
 					label={['Non-Default', 'Default']}
 				/>
+			</Box>
+
 			<Stack w={'100%'} align='center'>
 				<Group w={'100%'} justify='center'>
 					<TextInput