Formatting and typos

package.json

@@ -12,46 +12,45 @@
 	"dependencies": {
 		"@emotion/react": "^11.14.0",
 		"@iconify/react": "^5.2.0",
-		"@mantine/core": "^7.16.3",
+		"@mantine/core": "^7.17.2",
-		"@mantine/dates": "^7.16.3",
+		"@mantine/dates": "^7.17.2",
-		"@mantine/form": "^7.16.3",
+		"@mantine/form": "^7.17.2",
-		"@mantine/hooks": "^7.16.3",
+		"@mantine/hooks": "^7.17.2",
-		"@mantine/modals": "^7.16.3",
+		"@mantine/modals": "^7.17.2",
-		"@tabler/icons-react": "^3.30.0",
+		"@tabler/icons-react": "^3.31.0",
-		"@tanstack/react-query": "^5.66.0",
+		"@tanstack/react-query": "^5.69.0",
-		"@tanstack/react-query-devtools": "^5.66.0",
+		"@tanstack/react-query-devtools": "^5.69.0",
-		"@tanstack/react-query-persist-client": "^5.66.0",
+		"@tanstack/react-query-persist-client": "^5.69.0",
 		"clsx": "^2.1.1",
 		"dayjs": "^1.11.13",
 		"dotenv": "^16.4.7",
 		"idb-keyval": "^6.2.1",
-		"jotai": "^2.12.0",
+		"jotai": "^2.12.2",
-		"mantine-react-table": "^2.0.0-beta.6",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0",
-		"react-icons": "^5.4.0",
+		"react-icons": "^5.5.0",
 		"react-query": "^3.39.3",
-		"react-router-dom": "^7.1.5",
+		"react-router-dom": "^7.4.0",
-		"react-toastify": "^11.0.3",
+		"react-toastify": "^11.0.5",
 		"recharts": "^2.15.1"
 	},
 	"devDependencies": {
-		"@types/node": "^22.13.1",
+		"@types/node": "^22.13.11",
-		"@types/react": "^19.0.8",
+		"@types/react": "^19.0.12",
-		"@types/react-dom": "^19.0.3",
+		"@types/react-dom": "^19.0.4",
-		"@typescript-eslint/eslint-plugin": "^8.24.0",
+		"@typescript-eslint/eslint-plugin": "^8.27.0",
-		"@typescript-eslint/parser": "^8.24.0",
+		"@typescript-eslint/parser": "^8.27.0",
 		"@vitejs/plugin-react": "^4.3.4",
-		"@vitest/coverage-v8": "^3.0.5",
+		"@vitest/coverage-v8": "^3.0.9",
-		"@vitest/ui": "^3.0.5",
+		"@vitest/ui": "^3.0.9",
-		"eslint": "^9.20.1",
+		"eslint": "^9.22.0",
-		"eslint-plugin-react-hooks": "^5.1.0",
+		"eslint-plugin-react-hooks": "^5.2.0",
 		"eslint-plugin-react-refresh": "^0.4.19",
-		"typescript": "^5.7.3",
+		"typescript": "^5.8.2",
-		"vite": "^6.1.0",
+		"vite": "^6.2.2",
-		"vite-plugin-dts": "~4.5.0",
+		"vite-plugin-dts": "~4.5.3",
 		"vite-plugin-eslint": "^1.8.1",
 		"vite-tsconfig-paths": "^5.1.4",
-		"vitest": "^3.0.5"
+		"vitest": "^3.0.9"
 	}
 }

src/App.tsx

@@ -16,8 +16,6 @@ import {
 } from 'react-router-dom';
 import { MainLayout, ThemeProvider } from './components';
 import '@mantine/core/styles.css'; //import Mantine V7 styles needed by MRT
-import '@mantine/dates/styles.css'; //if using mantine date picker features
-import 'mantine-react-table/styles.css'; //import MRT styles
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import './index.css';
 import { Homepage, Settings } from 'pages';

src/components/HelpModal/HelpModal.tsx

@@ -12,13 +12,14 @@ export function HelpModal({
 	applicationData,
 	providerData,
 }: any) {
-	const { theme } = useCommonHooks();
+	const { theme, isMobile } = useCommonHooks();
 	return (
 		<Modal.Root
 			size={'60%'}
 			className={modalClasses.helpModal}
 			classNames={modalClasses}
 			opened={providerModalOpened}
+			fullScreen={isMobile}
 			onClose={() => {
 				setSearchValue('');
 				setProviderLabel('Google Search');

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

@@ -33,7 +33,7 @@ const ApplicationSettings = () => {
 		endpoint: endpoint,
 	});
 	const [applicationData, setApplicationData] = useState<any>([]);
-	const { theme } = useCommonHooks();
+	const { theme, isMobile } = useCommonHooks();
 	const [newApplication, setNewApplication] = useState<any>({
 		name: '',
 		url: '',
@@ -66,6 +66,7 @@ const ApplicationSettings = () => {
 				className={modalClasses.helpModal}
 				classNames={modalClasses}
 				opened={modalOpened}
+				fullScreen={isMobile}
 				onClose={() => {
 					closeModal();
 				}}
@@ -120,7 +121,6 @@ const ApplicationSettings = () => {
 								<TextInput
 									label={'URL'}
 									className={textInputClasses.settingsItem}
-									w={'59%'}
 									pt={16}
 									classNames={textInputClasses}
 									defaultValue={newApplication.url}

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

@@ -16,7 +16,7 @@ import { useEffect, useState } from 'react';
 import { cardClasses, modalClasses, textInputClasses } from 'styles';
 
 function DebouncedApplication({ application, handleDelete }: any) {
-	const { theme } = useCommonHooks();
+	const { theme, isMobile } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
 
@@ -40,6 +40,7 @@ function DebouncedApplication({ application, handleDelete }: any) {
 		<Card className={cardClasses.settingsItem} classNames={cardClasses}>
 			<Modal.Root
 				size={'60%'}
+				fullScreen={isMobile}
 				className={modalClasses.helpModal}
 				classNames={modalClasses}
 				opened={modalOpened}

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

@@ -32,7 +32,7 @@ const BookmarkSettings = () => {
 	});
 	const [groups, setGroups] = useState([]);
 	const [newGroup, setNewGroup] = useState<any>({});
-	const { theme } = useCommonHooks();
+	const { theme, isMobile } = useCommonHooks();
 	const { mutateAsync } = useMutationAPI();
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedGroupSearch] = useDebouncedValue(searchValue, 500);
@@ -61,6 +61,7 @@ const BookmarkSettings = () => {
 				className={modalClasses.helpModal}
 				classNames={modalClasses}
 				opened={modalOpened}
+				fullScreen={isMobile}
 				onClose={() => {
 					closeModal();
 				}}
@@ -78,7 +79,7 @@ const BookmarkSettings = () => {
 				<Modal.Overlay />
 				<Modal.Content>
 					<Modal.Header>
-						<Modal.Title>Add a new Group</Modal.Title>
+						<Modal.Title>Add a new Bookmark Group</Modal.Title>
 						<Modal.CloseButton />
 					</Modal.Header>
 					<Modal.Body pb={'2rem'}>

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

@@ -16,7 +16,7 @@ import { useEffect, useState } from 'react';
 import { cardClasses, modalClasses, textInputClasses } from 'styles';
 
 function DebouncedBookmarkItem({ bookmarkItem, handleDelete }: any) {
-	const { theme } = useCommonHooks();
+	const { theme, isMobile } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
 
@@ -43,6 +43,7 @@ function DebouncedBookmarkItem({ bookmarkItem, handleDelete }: any) {
 				className={modalClasses.helpModal}
 				classNames={modalClasses}
 				opened={modalOpened}
+				fullScreen={isMobile}
 				onClose={() => {
 					closeModal();
 				}}

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

@@ -20,7 +20,7 @@ import BookmarkSettingsItem from './BookmarkSettingsItem';
 import DebouncedBookmarkItem from './DebouncedBookmarkItem';
 
 function DebouncedGroupSettingsItem({ bookmarkGroup, bookmarks }: any) {
-	const { theme } = useCommonHooks();
+	const { theme, isMobile } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const [popoverOpened, setPopoverOpened] = useState(false);
 	const { mutateAsync } = useMutationAPI();
@@ -54,6 +54,7 @@ function DebouncedGroupSettingsItem({ bookmarkGroup, bookmarks }: any) {
 				className={modalClasses.helpModal}
 				classNames={modalClasses}
 				opened={modalOpened}
+				fullScreen={isMobile}
 				onClose={() => {
 					closeModal();
 				}}
@@ -71,12 +72,12 @@ function DebouncedGroupSettingsItem({ bookmarkGroup, bookmarks }: any) {
 				<Modal.Overlay />
 				<Modal.Content>
 					<Modal.Header>
-						<Modal.Title>Delete Application</Modal.Title>
+						<Modal.Title>Delete Group</Modal.Title>
 						<Modal.CloseButton />
 					</Modal.Header>
 					<Modal.Body pb={'2rem'}>
 						<Stack gap={0} w={'100%'} h={'150px'} align='center'>
-							<Text>Are you sure you want to delete this application?</Text>
+							<Text>Are you sure you want to delete this bookmark group?</Text>
 							<Text
 								style={{
 									fontWeight: 'bold',
@@ -124,7 +125,7 @@ function DebouncedGroupSettingsItem({ bookmarkGroup, bookmarks }: any) {
 									color: theme.primaryColor,
 								},
 							}}
-							w={'58%'}
+							w={isMobile ? undefined : '58%'}
 							className={textInputClasses.settingsItem}
 							classNames={textInputClasses}
 							defaultValue={group.categoryName}
@@ -142,7 +143,7 @@ function DebouncedGroupSettingsItem({ bookmarkGroup, bookmarks }: any) {
 									color: theme.primaryColor,
 								},
 							}}
-							w={'28%'}
+							w={isMobile ? undefined : '28%'}
 							className={textInputClasses.settingsItem}
 							classNames={textInputClasses}
 							defaultValue={group.filterName}
@@ -178,7 +179,7 @@ function DebouncedGroupSettingsItem({ bookmarkGroup, bookmarks }: any) {
 							borderRadius: '100%',
 							backgroundColor: theme.accentColor,
 							position: 'absolute',
-							top: 78,
+							top: isMobile ? 164 : 78,
 							right: 18,
 							zIndex: 10,
 							fontSize: 20,

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

@@ -15,7 +15,7 @@ import { useCommonHooks } from 'hooks';
 import { cardClasses, modalClasses, textInputClasses } from 'styles';
 
 function DebouncedMessage({ label, message, setMessage, handleDelete }: any) {
-	const { theme } = useCommonHooks();
+	const { theme, isMobile } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	return (
 		<Card className={cardClasses.settingsItem} classNames={cardClasses}>
@@ -24,6 +24,7 @@ function DebouncedMessage({ label, message, setMessage, handleDelete }: any) {
 				className={modalClasses.helpModal}
 				classNames={modalClasses}
 				opened={modalOpened}
+				fullScreen={isMobile}
 				onClose={() => {
 					closeModal();
 				}}

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

@@ -29,7 +29,7 @@ const MessageSettings = () => {
 	const { data: messageData, isFetched: isMessagesFetched } = useQueryAPI({
 		endpoint: 'api/messages',
 	});
-	const { theme } = useCommonHooks();
+	const { theme, isMobile } = useCommonHooks();
 	const { mutateAsync } = useMutationAPI();
 	const [messages, setMessages] = useState<any>([]);
 	const [newMessage, setNewMessage] = useState('');
@@ -67,6 +67,7 @@ const MessageSettings = () => {
 				className={modalClasses.helpModal}
 				classNames={modalClasses}
 				opened={modalOpened}
+				fullScreen={isMobile}
 				onClose={() => {
 					closeModal();
 				}}
@@ -197,7 +198,7 @@ const MessageSettings = () => {
 			<Stack w={'100%'} align='center'>
 				<Grid w={'75%'}>
 					{messages?.map((message: any) => (
-						<GridCol span={6} key={message.id}>
+						<GridCol span={isMobile ? 12 : 6} key={message.id}>
 							<DebouncedMessage
 								label={`ID# ${message.id}`}
 								message={message}

src/pages/settings/components/Personalization/Personalization.tsx

@@ -1,6 +1,6 @@
 import { Card, Grid, GridCol, Overlay, Stack, Text, TextInput } from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
-import { useMutationAPI, useQueryAPI } from 'hooks';
+import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { cardClasses, textClasses, textInputClasses } from 'styles';
 const PersonalizationSettings = () => {
@@ -16,6 +16,7 @@ const PersonalizationSettings = () => {
 	const [update, setUpdate] = useState({});
 	const [debounced] = useDebouncedValue(update, 1000);
 	const { mutateAsync: editRow } = useMutationAPI();
+	const { isMobile } = useCommonHooks();
 	useEffect(() => {
 		if (personalData && personalIsFetched) {
 			setPersonal(personalData[0]);
@@ -52,7 +53,7 @@ const PersonalizationSettings = () => {
 							}}
 						/>
 					)}
-					<GridCol span={4}>
+					<GridCol span={isMobile ? 12 : 4}>
 						<Card className={cardClasses.settingsItem} classNames={cardClasses}>
 							<TextInput
 								label={'First Name'}
@@ -69,7 +70,7 @@ const PersonalizationSettings = () => {
 							/>
 						</Card>
 					</GridCol>
-					<GridCol span={4}>
+					<GridCol span={isMobile ? 12 : 4}>
 						<Card className={cardClasses.settingsItem} classNames={cardClasses}>
 							<TextInput
 								label={'Last Name'}
@@ -86,7 +87,7 @@ const PersonalizationSettings = () => {
 							/>
 						</Card>
 					</GridCol>
-					<GridCol span={4}>
+					<GridCol span={isMobile ? 12 : 4}>
 						<Card className={cardClasses.settingsItem} classNames={cardClasses}>
 							<TextInput
 								label={'Email'}

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

@@ -16,7 +16,7 @@ import { useEffect, useState } from 'react';
 import { cardClasses, modalClasses, textInputClasses } from 'styles';
 
 function DebouncedSearchProvider({ searchProvider, handleDelete }: any) {
-	const { theme } = useCommonHooks();
+	const { theme, isMobile } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
 
@@ -43,6 +43,7 @@ function DebouncedSearchProvider({ searchProvider, handleDelete }: any) {
 				className={modalClasses.helpModal}
 				classNames={modalClasses}
 				opened={modalOpened}
+				fullScreen={isMobile}
 				onClose={() => {
 					closeModal();
 				}}
@@ -60,7 +61,7 @@ function DebouncedSearchProvider({ searchProvider, handleDelete }: any) {
 				<Modal.Overlay />
 				<Modal.Content>
 					<Modal.Header>
-						<Modal.Title>Delete Client</Modal.Title>
+						<Modal.Title>Delete Search Provider</Modal.Title>
 						<Modal.CloseButton />
 					</Modal.Header>
 					<Modal.Body pb={'2rem'}>

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

@@ -33,7 +33,7 @@ const SearchProviderSettings = () => {
 		endpoint: endpoint,
 	});
 	const [providerData, setProviderData] = useState<any>([]);
-	const { theme } = useCommonHooks();
+	const { theme, isMobile } = useCommonHooks();
 	const { mutateAsync } = useMutationAPI();
 	const [newProvider, setNewProvider] = useState<any>({});
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
@@ -59,6 +59,7 @@ const SearchProviderSettings = () => {
 				className={modalClasses.helpModal}
 				classNames={modalClasses}
 				opened={modalOpened}
+				fullScreen={isMobile}
 				onClose={() => {
 					closeModal();
 				}}
@@ -76,7 +77,7 @@ const SearchProviderSettings = () => {
 				<Modal.Overlay />
 				<Modal.Content>
 					<Modal.Header>
-						<Modal.Title>Add a new application</Modal.Title>
+						<Modal.Title>Add a new Search Provider</Modal.Title>
 						<Modal.CloseButton />
 					</Modal.Header>
 					<Modal.Body pb={'2rem'}>
@@ -218,7 +219,7 @@ const SearchProviderSettings = () => {
 			<Stack w={'100%'} align='center'>
 				<Grid columns={18} w={'75%'}>
 					{providerData?.map((provider: any) => (
-						<GridCol span={6} key={provider.id}>
+						<GridCol span={isMobile ? 18 : 6} key={provider.id}>
 							<Popover withArrow withOverlay withinPortal={false}>
 								<Popover.Target>
 									<Box

src/pages/settings/components/Theming/ThemeModal.tsx

@@ -32,7 +32,7 @@ function ThemeModal({
 	closePicker,
 	handleSaveTheme,
 }: any) {
-	const { theme } = useCommonHooks();
+	const { theme, isMobile } = useCommonHooks();
 	const viewportRef = useRef<HTMLDivElement>(null);
 	const [query, setQuery] = useState('');
 	const [hovered, setHovered] = useState(-1);
@@ -112,6 +112,7 @@ function ThemeModal({
 			classNames={modalClasses}
 			opened={opened}
 			onClose={handleClose}
+			fullScreen={isMobile}
 			style={{
 				'--color-text-pri': theme.primaryColor,
 				'--color-text-acc': theme.accentColor,

src/pages/settings/components/Theming/ThemePlaylistModal.tsx

@@ -23,7 +23,7 @@ function ThemePlaylistModal({
 	handleSavePlaylist,
 	allThemes,
 }: any) {
-	const { theme } = useCommonHooks();
+	const { theme, isMobile } = useCommonHooks();
 	const [themeList, setThemeList] = useState<any>('[]');
 	useEffect(() => {
 		if (selectedPlaylist.themeList) {
@@ -36,6 +36,7 @@ function ThemePlaylistModal({
 			className={modalClasses.editThemeModal}
 			classNames={modalClasses}
 			opened={opened}
+			fullScreen={isMobile}
 			onClose={() => {
 				handleClose();
 				setThemeList('[]');

src/pages/settings/components/WoL/DebouncedWolClient.tsx

@@ -16,7 +16,7 @@ import { useEffect, useState } from 'react';
 import { cardClasses, modalClasses, textInputClasses } from 'styles';
 
 function DebouncedWolClient({ wolClient, handleDelete }: any) {
-	const { theme } = useCommonHooks();
+	const { theme, isMobile } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
 
@@ -43,6 +43,7 @@ function DebouncedWolClient({ wolClient, handleDelete }: any) {
 				className={modalClasses.helpModal}
 				classNames={modalClasses}
 				opened={modalOpened}
+				fullScreen={isMobile}
 				onClose={() => {
 					closeModal();
 				}}
@@ -60,7 +61,7 @@ function DebouncedWolClient({ wolClient, handleDelete }: any) {
 				<Modal.Overlay />
 				<Modal.Content>
 					<Modal.Header>
-						<Modal.Title>Delete Client</Modal.Title>
+						<Modal.Title>Delete WoL Client</Modal.Title>
 						<Modal.CloseButton />
 					</Modal.Header>
 					<Modal.Body pb={'2rem'}>

src/pages/settings/components/WoL/WolClientSettingsItem.tsx

@@ -1,14 +1,16 @@
 import { Card, Stack, Text } from '@mantine/core';
+import { useCommonHooks } from 'hooks';
 import { FaLaptop } from 'react-icons/fa';
 import { cardClasses } from 'styles';
 
 function WolClientSettingsItem({ client }: any) {
+	const { isMobile } = useCommonHooks();
 	return (
 		<Card
 			className={cardClasses.settingsItemHover}
 			classNames={cardClasses}
 			h={200}
-			w={200}
+			w={isMobile ? '100%' : 200}
 		>
 			<Stack align='center' gap={0}>
 				<FaLaptop fontSize={100} />

src/pages/settings/components/WoL/WolClients.tsx

@@ -34,7 +34,7 @@ const WolClientSettings = () => {
 	});
 	const [wolClients, setWolClients] = useState<any>([]);
 	const { mutateAsync } = useMutationAPI();
-	const { theme } = useCommonHooks();
+	const { theme, isMobile } = useCommonHooks();
 	const [newWolClient, setNewWolClient] = useState<any>({
 		hostname: '',
 		macAddress: '',
@@ -62,6 +62,7 @@ const WolClientSettings = () => {
 				className={modalClasses.helpModal}
 				classNames={modalClasses}
 				opened={modalOpened}
+				fullScreen={isMobile}
 				onClose={() => {
 					closeModal();
 				}}
@@ -79,7 +80,7 @@ const WolClientSettings = () => {
 				<Modal.Overlay />
 				<Modal.Content>
 					<Modal.Header>
-						<Modal.Title>Add a new application</Modal.Title>
+						<Modal.Title>Add a new WoL Client</Modal.Title>
 						<Modal.CloseButton />
 					</Modal.Header>
 					<Modal.Body pb={'2rem'}>
@@ -206,7 +207,7 @@ const WolClientSettings = () => {
 			<Stack w={'100%'} align='center'>
 				<Grid columns={18} w={'75%'}>
 					{wolClients?.map((client: any) => (
-						<GridCol span={6} key={client.id}>
+						<GridCol span={isMobile ? 18 : 6} key={client.id}>
 							<Popover withArrow withOverlay withinPortal={false}>
 								<Popover.Target>
 									<Box