Styled Homepage

src/pages/homepage/Homepage.tsx

@@ -6,16 +6,14 @@ import Header from './components/Header';
 import Applications from './components/Applications';
 import Bookmarks from './components/Bookmarks';
 import SettingsButton from './components/SettingsButton';
-import { useAtom } from 'jotai';
-import { HomepageFilters } from '../../contexts/HomepageFilters';
 import { useEffect, useState } from 'react';
+import '../../index.css';
+import { useLocalStorage } from '@mantine/hooks';
 
-
-export default function Homepage() {
+export default function Homepage({theme}:any) {
 	const { data, isFetching } = useQueryAPI({ endpoint: 'api/messages' });
 	const [displayedGreeting, setDisplayedGreeting] = useState('');
-	const [homepageFilter, setHomepageFilter] = useAtom<any>(HomepageFilters);
-	
+	const [contentType, setContentType] = useLocalStorage<any>({ key: 'contenttype', defaultValue: 'All' });
 	function date() {
 		const currentDate = new Date();
 		const dateOptions: Intl.DateTimeFormatOptions = {
@@ -27,7 +25,6 @@ export default function Homepage() {
 		const date = currentDate.toLocaleDateString('en-GB', dateOptions);
 		return date;
 	}
-
 	function greet(list: any) {
 		const currentTime = new Date();
 		const greet = Math.floor(currentTime.getHours() / 6);
@@ -54,12 +51,12 @@ export default function Homepage() {
 	}, [isFetching]);
 
 	return (
-		<Stack className={stackClasses.containerStack}>
+		<Stack gap={0} className={stackClasses.containerStack} justify='center'>
 			<Search />
 			<Header date={date()} greet={displayedGreeting} />
-			<Applications />
-			<Bookmarks />
-			<SettingsButton />
+			<Applications contentType={contentType}/>
+			<Bookmarks contentType={contentType}/>
+			<SettingsButton theme={theme} contentType={contentType} setContentType={setContentType}/>
 		</Stack>
 	);
 }

src/pages/homepage/components/Applications.tsx

@@ -4,16 +4,14 @@ import {useQueryAPI} from '../../../hooks/useAPI';
 import texts from '../../../styles/Text.module.css';
 import AppItem from './AppItem';
 
-function Applications() {
+function Applications({contentType}: any) {
 	const { data, isFetching } = useQueryAPI({ endpoint: 'api/apps' });
 	const [applications, setApplications] = useState([]);
-	const contentType = localStorage.getItem('contenttype');
 	useEffect(() => {
 		if (!isFetching) {
 			setApplications(data);
 		}
 	}, [isFetching]);
-
 	return (
 		<Stack id='apps' style={{ gap: 0 }}>
 			<Text className={texts.sectionTitle} classNames={texts}>Applications</Text>

src/pages/homepage/components/Bookmarks.tsx

@@ -4,7 +4,7 @@ import {useQueryAPI} from '../../../hooks/useAPI';
 import texts from '../../../styles/Text.module.css';
 import LinkGroups from './LinkGroups';
 
-function Links() {
+function Links({contentType}: any) {
 	const { data: linkData, isFetched: linksIsFetched } = useQueryAPI({
 		endpoint: 'api/links',
 	});
@@ -38,8 +38,8 @@ function Links() {
 					>
 						{categories.map((category: any) => {
 							if (
-								category.column_filter === localStorage.getItem('contenttype') ||
-								localStorage.getItem('contenttype') === 'All'
+								category.column_filter === contentType ||
+								contentType === 'All'
 							) {
 								return (
 									<LinkGroups

src/pages/homepage/components/Header.tsx

@@ -44,6 +44,7 @@ function Header({ greet, date }: any) {
 					float: 'right',
 					justifyContent: 'right',
 					width: 'auto',
+					gap: 0,
 				}}
 			>
 				<Text className={textClasses.dateTime} classNames={textClasses} style={{ width: 'max-content' }}>

src/pages/homepage/components/Search.tsx

@@ -53,10 +53,10 @@ export default function Search() {
 			}}
 		>
 			<TextInput
-				className={textInputClasses.keyword}
+				className={textInputClasses.search}
                 classNames={textInputClasses}
 				spellCheck='true'
-                label={providerLabel}
+                leftSection={providerLabel}
 				onChange={(item: any) => {
                     if(item.target.value.startsWith('/')) {
                         setProviderLabel(providers?.find((p: any) => p.prefix === item.target.value.split(' ')[0]).name);

src/pages/homepage/components/SettingsButton.tsx

@@ -1,4 +1,4 @@
-import { Button, Menu, NavLink, Select, Stack } from '@mantine/core';
+import { Button, Menu, NavLink, Select } from '@mantine/core';
 import { useEffect, useState } from 'react';
 import { FiMenu, FiMonitor } from 'react-icons/fi';
 import {useQueryAPI} from '../../../hooks/useAPI';
@@ -6,25 +6,14 @@ import button from '../../../styles/Button.module.css';
 import menu from '../../../styles/Menu.module.css';
 import navLink from '../../../styles/NavLink.module.css';
 import selectClasses from '../../../styles/Select.module.css';
-import { useAtom } from 'jotai';
-import { HomepageFilters } from '../../../contexts/HomepageFilters';
 
-function SettingsButton() {
+function SettingsButton({contentType, setContentType, theme}: any) {
 	const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
 	const [categories, setCategories] = useState([{value: 'All', label: 'All'}]);
-	const [homepageFilter, setHomepageFilter] = useAtom<object>(HomepageFilters);
-	const classNames = {
-		root: navLink.root,
-		body: navLink.body,
-		section: navLink.section,
-		label: navLink.label,
-		description: navLink.description,
-		chevron: navLink.chevron,
-	};
 	
 	useEffect(() => {
 		if(data) {
-			let list: [any] = data.map((category: any) => {return {value: category.category, label: category.category}}) || [];
+			const list: [any] = data.map((category: any) => {return {value: category.category, label: category.category}}) || [];
 			list.unshift({value: 'All', label: 'All'});
 			setCategories(list);
 		}
@@ -39,18 +28,10 @@ function SettingsButton() {
 	}
 	return (
 		<Menu
-			withinPortal
+			withinPortal={false}
 			withArrow
 			shadow='md'
 			position='top'
-			classNames={{
-				dropdown: menu.dropdown
-			}}
-			styles={{
-				dropdown: {
-					backgroundColor: 'var(--color-background)',
-				},
-			}}
 		>
 			<Menu.Target>
 				<Button className={button.settingsButton} classNames={button}>
@@ -58,40 +39,36 @@ function SettingsButton() {
 				</Button>
 			</Menu.Target>
 			<Menu.Dropdown
-				style={{
-					position: 'absolute',
-				}}
+				className={menu.dropdown}
 			>
 				<NavLink
 					label='Settings'
 					component='a'
 					href='/trigger/settings'
-					classNames={classNames}
+					className={navLink.defaultNavLink}
+					classNames={navLink}
 				/>
-				<NavLink label='Quick Actions' classNames={classNames}>
+				<NavLink label='Quick Actions'
+					className={navLink.defaultNavLink}
+					classNames={navLink}>
 					<NavLink
 						label='Wake Dakota'
 						leftSection={<FiMonitor />}
 						onClick={() => runWakeCommand()}
-						classNames={classNames}
+						className={navLink.defaultNavLink}
+						classNames={navLink}
 					/>
 				</NavLink>
 				<Select
 					label='Homepage Filter'
 					data={categories ?? []}
-					defaultValue={localStorage.getItem('contenttype')}
+					defaultValue={contentType}
 					withCheckIcon={false}
 					onChange={(data: any) => {
-						localStorage.setItem('contenttype', data || 'All');
-						setHomepageFilter({value: data, label: data});
+						setContentType(data)
 					}}
-					className={selectClasses.filterSelect}
 					classNames={selectClasses}
-					styles={{
-						label: {
-							color: 'var(--color-text-pri)',
-						},
-					}}
+					comboboxProps={{ withinPortal: false }}
 				/>
 			</Menu.Dropdown>
 		</Menu>

src/pages/settings/Settings.tsx

@@ -6,31 +6,34 @@ import { actionIconClasses } from "../../styles";
 import Messages from "./components/Messages";
 import Applications from "./components/Applications";
 import Bookmarks from "./components/Bookmarks";
+import Categories from "./components/Categories";
+import SearchProviders from "./components/SearchProviders";
+import Themes from "./components/Themes";
 
-function Settings() {
+function Settings({theme}:any) {
 	return (
-        <Stack h={'100vh'} px={'2rem'}>
+        <Stack h={'100vh'} px={'2rem'} bg={'var(--color-background)'}>
             <Group gap={0} >
                 <ActionIcon className={actionIconClasses.backButton} classNames={actionIconClasses} component="a" href="/trigger"><FiArrowLeftCircle/></ActionIcon>
                 <h1>Settings</h1>
             </Group>
-            <Tabs keepMounted orientation="vertical" defaultValue={'personalization'} className={tabClasses.settingsTabs} classNames={tabClasses}>
+            <Tabs orientation="vertical" defaultValue={'personalization'} className={tabClasses.settingsTabs} classNames={tabClasses}>
                 <Tabs.List>
                     <Tabs.Tab value="personalization">Personal Info</Tabs.Tab>
                     <Tabs.Tab value="messages">Messages</Tabs.Tab>
                     <Tabs.Tab value="applications">Applications</Tabs.Tab>
-                    <Tabs.Tab value="bookmarksCategories">Bookmark Categories</Tabs.Tab>
                     <Tabs.Tab value="bookmarks">Bookmarks</Tabs.Tab>
+                    <Tabs.Tab value="bookmarksCategories">Categories</Tabs.Tab>
                     <Tabs.Tab value="themes">Themes</Tabs.Tab>
                     <Tabs.Tab value="providers">Search Providers</Tabs.Tab>
                 </Tabs.List>
                 <Tabs.Panel value="personalization"><Personalization/></Tabs.Panel>
                 <Tabs.Panel value="messages"><Messages/></Tabs.Panel>
                 <Tabs.Panel value="applications"><Applications/></Tabs.Panel>
-                <Tabs.Panel value="bookmarksCategories">Bookmark Categories</Tabs.Panel>
                 <Tabs.Panel value="bookmarks"><Bookmarks/></Tabs.Panel>
-                <Tabs.Panel value="themes">Themes</Tabs.Panel>
-                <Tabs.Panel value="providers">Search Providers</Tabs.Panel>
+                <Tabs.Panel value="bookmarksCategories"><Categories/></Tabs.Panel>
+                <Tabs.Panel value="themes"><Themes/></Tabs.Panel>
+                <Tabs.Panel value="providers"><SearchProviders/></Tabs.Panel>
             </Tabs>
         </Stack>
 	);

src/pages/settings/components/Applications.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import {useMutationAPI, useQueryAPI} from "../../../hooks/useAPI";
 import { DataTable } from "../../../DataTable/DataTable";
 import { toast } from "react-toastify";
-import { MRT_TableOptions } from "mantine-react-table";
+import type { MRT_TableOptions } from "mantine-react-table";
 import ApplicationColumns from "../../../DataTable/columns/ApplicationColumns";
 import { Stack } from "@mantine/core";
 const ApplicationSettings = () => {

src/pages/settings/components/Bookmarks.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import {useMutationAPI, useQueryAPI} from "../../../hooks/useAPI";
 import { DataTable } from "../../../DataTable/DataTable";
 import { toast } from "react-toastify";
-import { MRT_TableOptions } from "mantine-react-table";
+import type { MRT_TableOptions } from "mantine-react-table";
 import { Stack } from "@mantine/core";
 import BookmarkColumns from "../../../DataTable/columns/BookmarkColumns";
 const BookmarkSettings = () => {
@@ -30,7 +30,7 @@ const BookmarkSettings = () => {
 
 	useEffect(() => {
 		if (groupDataisFetched) {
-			let groupList = groupData.map((category: any) => {
+			const groupList = groupData.map((category: any) => {
 				return category.category_name;
 			});
 			setGroups(groupList);

src/pages/settings/components/Categories.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useState } from "react";
+import {useMutationAPI, useQueryAPI} from "../../../hooks/useAPI";
+import { DataTable } from "../../../DataTable/DataTable";
+import { toast } from "react-toastify";
+import type { MRT_TableOptions } from "mantine-react-table";
+import CategoryColumns from "../../../DataTable/columns/CategoryColumns";
+import { Stack } from "@mantine/core";
+const CategorySettings = () => {
+    const endpoint = "api/categories";
+	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
+		endpoint: endpoint,
+	});
+	const [categoryData, setCategoryData] = useState<any>([]);
+
+    const {mutateAsync: createRow, isPending: isCreatingRow} = useMutationAPI();
+    const {mutateAsync: editRow, isPending: isEditingRow} = useMutationAPI();
+
+    useEffect(() => {
+        if(isFetched) {
+            setCategoryData(data);
+        }
+    })
+
+    const handleCreateRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+        values,
+        exitCreatingMode,
+      }) => {
+        
+        createRow({method: "POST", endpoint: endpoint, body: values}).then(() => {
+            toast.success("Category created successfully");
+        })
+        exitCreatingMode();
+      };
+    const handleEditRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+        values,
+        table,
+      }) => {
+        editRow({method: "PATCH", endpoint: endpoint, body: values}).then(() => {
+            toast.success("Category updated successfully");
+        });
+        table.setEditingRow(null);
+      };
+
+	return (
+        <Stack>
+            <h2>Categories</h2>
+            <DataTable
+                tableName="Categories"
+                columns={CategoryColumns()}
+                tableData={categoryData}
+                isFetching={isFetching}
+                isLoading={isLoading}
+                onCreatingRowSave={handleCreateRow}
+                onEditingRowSave={handleEditRow}
+            />
+        </Stack>
+    )
+};
+export default CategorySettings;

src/pages/settings/components/Messages.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import {useMutationAPI, useQueryAPI} from "../../../hooks/useAPI";
 import { DataTable } from "../../../DataTable/DataTable";
 import { toast } from "react-toastify";
-import { MRT_TableOptions } from "mantine-react-table";
+import type { MRT_TableOptions } from "mantine-react-table";
 import MessagesColumns from "../../../DataTable/columns/MessagesColumns";
 import { Stack } from "@mantine/core";
 const MessageSettings = () => {

src/pages/settings/components/Personalization.tsx

@@ -3,7 +3,7 @@ import {useMutationAPI, useQueryAPI} from "../../../hooks/useAPI";
 import { DataTable } from "../../../DataTable/DataTable";
 import PersonalizationColumns from "../../../DataTable/columns/PersonalizationColumns";
 import { toast } from "react-toastify";
-import { MRT_TableOptions } from "mantine-react-table";
+import type { MRT_TableOptions } from "mantine-react-table";
 const PersonalizationSettings = () => {
     const endpoint = "api/personaldata";
 	const { data, isFetching, isLoading, isFetched } = useQueryAPI({

src/pages/settings/components/SearchProviders.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useState } from "react";
+import {useMutationAPI, useQueryAPI} from "../../../hooks/useAPI";
+import { DataTable } from "../../../DataTable/DataTable";
+import { toast } from "react-toastify";
+import type { MRT_TableOptions } from "mantine-react-table";
+import SearchProviderColumns from "../../../DataTable/columns/SearchProviderColumns";
+import { Stack } from "@mantine/core";
+const SearchProviderSettings = () => {
+    const endpoint = "api/providers";
+	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
+		endpoint: endpoint,
+	});
+	const [providerData, setProviderData] = useState<any>([]);
+
+    const {mutateAsync: createRow, isPending: isCreatingRow} = useMutationAPI();
+    const {mutateAsync: editRow, isPending: isEditingRow} = useMutationAPI();
+
+    useEffect(() => {
+        if(isFetched) {
+            setProviderData(data);
+        }
+    })
+
+    const handleCreateRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+        values,
+        exitCreatingMode,
+      }) => {
+        
+        createRow({method: "POST", endpoint: endpoint, body: values}).then(() => {
+            toast.success("Search provider created successfully");
+        })
+        exitCreatingMode();
+      };
+    const handleEditRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+        values,
+        table,
+      }) => {
+        editRow({method: "PATCH", endpoint: endpoint, body: values}).then(() => {
+            toast.success("Search provider updated successfully");
+        });
+        table.setEditingRow(null);
+      };
+
+	return (
+        <Stack>
+            <h2>Search Providers</h2>
+            <DataTable
+                tableName="Categories"
+                columns={SearchProviderColumns()}
+                tableData={providerData}
+                isFetching={isFetching}
+                isLoading={isLoading}
+                onCreatingRowSave={handleCreateRow}
+                onEditingRowSave={handleEditRow}
+            />
+        </Stack>
+    )
+};
+export default SearchProviderSettings;

src/pages/settings/components/Themes.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useState } from "react";
+import { useQueryAPI } from "../../../hooks/useAPI";
+import { ActionIcon, Button, ColorPicker, ColorSwatch, Group, Modal, SimpleGrid, Stack } from "@mantine/core";
+import AppItem from "../../homepage/components/AppItem";
+import { FiEdit } from "react-icons/fi";
+import { useDisclosure, useLocalStorage } from "@mantine/hooks";
+import '@mantine/core/styles/ModalBase.css';
+import '@mantine/core/styles/Modal.css';
+function ThemesSettings() {
+    const [opened, { open, close }] = useDisclosure(false);
+    const [value, setValue] = useLocalStorage<any>({ key: 'theme', defaultValue: {} });
+	const { data, isFetched } = useQueryAPI({
+		endpoint: "api/themes",
+	});
+	const [themesList, setThemesList] = useState([]);
+    const [selectedTheme, setSelectedTheme] = useState<any>({});
+	useEffect(() => {
+		if (isFetched) {
+			setThemesList(data);
+		}
+	}, [isFetched]);
+
+    const handleOpen = (theme: any) => {
+        setSelectedTheme(theme);
+        open();
+    }
+
+	return (
+        <>
+            <Modal.Root opened={opened} onClose={close}>
+                <Modal.Overlay />
+                <Modal.Content>
+                <Modal.Header>
+                    <Modal.Title>Edit Theme</Modal.Title>
+                    <Modal.CloseButton />
+                </Modal.Header>
+                    <Modal.Body>
+                        <Stack style={{ backgroundColor: selectedTheme.colorbackground, borderRadius: '10px' }}>
+                            <Group justify="center" style={{ color: selectedTheme.colortextpri }}>{selectedTheme.name}</Group>
+                            <AppItem
+								name={'Example App'}
+								url={'https://example.com'}
+								icon={'mdi:apps'}
+								category={'Default'}
+							/>
+                        </Stack>
+                    </Modal.Body>
+                </Modal.Content>
+            </Modal.Root>
+            <Stack h={'100%'} w={'100%'}>
+                <h2>Themes</h2>
+                <SimpleGrid cols={5}>
+                    {themesList.map((theme: any) => (
+                        <Stack key={theme.name}>
+                            <Button
+                                style={{
+                                    backgroundColor: theme.colorbackground,
+                                    border: `solid ${theme.colorborder}`,
+                                    color: theme.colortextpri,
+                                }}
+                                data-theme={theme.name}
+                                onClick={() => {
+                                    setValue(theme.name)
+                                }}
+                            >
+                                {theme.name}
+                            </Button>
+                            <Group justify="space-between">
+                                <Group className="theme-palette">
+                                    <ColorSwatch color={theme.colorbackground} />
+                                    <ColorSwatch color={theme.colorsearchbackground} />
+                                    <ColorSwatch color={theme.colortextpri} />
+                                    <ColorSwatch color={theme.colortextacc} />
+                                    <ColorSwatch color={theme.colorborder} />
+                                </Group>
+                                <ActionIcon
+                                    onClick={() => handleOpen(theme)}
+                                ><FiEdit/></ActionIcon>
+                            </Group>
+                        </Stack>
+                    ))}
+                </SimpleGrid>
+            </Stack>
+        </>
+	);
+}
+export default ThemesSettings;