Themes modal udpated

2024-08-15 17:07:48 -05:00
parent a47f201fff
commit a37ab84f65
45 changed files with 1480 additions and 1177 deletions
--- a/src/pages/homepage/Homepage.tsx
+++ b/src/pages/homepage/Homepage.tsx
@@ -1,28 +1,31 @@
-import { Stack } from '@mantine/core';
-import stackClasses from '../../styles/Stack.module.css';
-import {useQueryAPI} from '../../hooks/useAPI';
-import Search from './components/Search';
-import Header from './components/Header';
-import Applications from './components/Applications';
-import Bookmarks from './components/Bookmarks';
-import SettingsButton from './components/SettingsButton';
-import { useEffect, useState } from 'react';
-import '../../index.css';
-import { useLocalStorage } from '@mantine/hooks';
+import { Stack } from "@mantine/core";
+import stackClasses from "../../styles/Stack.module.css";
+import { useQueryAPI } from "../../hooks/useAPI";
+import Search from "./components/Search";
+import Header from "./components/Header";
+import Applications from "./components/Applications";
+import Bookmarks from "./components/Bookmarks";
+import SettingsButton from "./components/SettingsButton";
+import { useEffect, useState } from "react";
+import "../../index.css";
+import { useLocalStorage } from "@mantine/hooks";

-export default function Homepage({theme}:any) {
-	const { data, isFetching } = useQueryAPI({ endpoint: 'api/messages' });
-	const [displayedGreeting, setDisplayedGreeting] = useState('');
-	const [contentType, setContentType] = useLocalStorage<any>({ key: 'contenttype', defaultValue: 'All' });
+export default function Homepage({ theme }: any) {
+	const { data, isFetching } = useQueryAPI({ endpoint: "api/messages" });
+	const [displayedGreeting, setDisplayedGreeting] = useState("");
+	const [contentType, setContentType] = useLocalStorage<any>({
+		key: "contenttype",
+		defaultValue: "All",
+	});
 	function date() {
 		const currentDate = new Date();
 		const dateOptions: Intl.DateTimeFormatOptions = {
-			weekday: 'long',
-			year: 'numeric',
-			month: 'long',
-			day: 'numeric',
+			weekday: "long",
+			year: "numeric",
+			month: "long",
+			day: "numeric",
 		};
-		const date = currentDate.toLocaleDateString('en-GB', dateOptions);
+		const date = currentDate.toLocaleDateString("en-GB", dateOptions);
 		return date;
 	}
 	function greet(list: any) {
@@ -32,7 +35,7 @@ export default function Homepage({theme}:any) {
 		let timeBased: any = [];
 		let easterEggs: any = [];
 		for (const l of list) {
-			if (l.easteregg === 'N') {
+			if (l.easteregg === "N") {
 				timeBased = timeBased.concat(l);
 			} else {
 				easterEggs = easterEggs.concat(l);
@@ -51,12 +54,16 @@ export default function Homepage({theme}:any) {
 	}, [isFetching]);

 	return (
-		<Stack gap={0} className={stackClasses.containerStack} justify='center'>
+		<Stack gap={0} className={stackClasses.containerStack} justify="center">
 			<Search />
 			<Header date={date()} greet={displayedGreeting} />
-			<Applications contentType={contentType}/>
-			<Bookmarks contentType={contentType}/>
-			<SettingsButton theme={theme} contentType={contentType} setContentType={setContentType}/>
+			<Applications contentType={contentType} />
+			<Bookmarks contentType={contentType} />
+			<SettingsButton
+				theme={theme}
+				contentType={contentType}
+				setContentType={setContentType}
+			/>
 		</Stack>
 	);
 }
--- a/src/pages/homepage/components/AppItem.tsx
+++ b/src/pages/homepage/components/AppItem.tsx
@@ -1,41 +1,43 @@
-import { Icon } from '@iconify/react';
-import { Box, Stack, Text } from '@mantine/core';
-import { useState } from 'react';
-import stacks from '../../../styles/Stack.module.css';
-import texts from '../../../styles/Text.module.css';
+import { Icon } from "@iconify/react";
+import { Box, Stack, Text } from "@mantine/core";
+import { useState } from "react";
+import stacks from "../../../styles/Stack.module.css";
+import texts from "../../../styles/Text.module.css";

 function AppItem({ url, icon, name }: any) {
-	const [textDecoration, setTextDecoration] = useState<string>('none');
+	const [textDecoration, setTextDecoration] = useState<string>("none");

 	return (
 		<Box
-			component='a'
+			component="a"
 			href={`https://${url}`}
-			onMouseOver={() => setTextDecoration('underline')}
-			onMouseOut={() => setTextDecoration('none')}
+			onMouseOver={() => setTextDecoration("underline")}
+			onMouseOut={() => setTextDecoration("none")}
 			className={stacks.appItemBox}
 		>
 			<Stack
 				style={{
-					height: '64px',
-					marginRight: '1em',
-					marginLeft: '1em',
-					paddingTop: '15px',
+					height: "64px",
+					marginRight: "1em",
+					marginLeft: "1em",
+					paddingTop: "15px",
 				}}
 			>
 				<Icon icon={`mdi:${icon}`} height={32} width={32} />
 			</Stack>
 			<Stack
 				style={{
-					display: 'flex',
-					flexDirection: 'column',
-					justifyContent: 'center',
+					display: "flex",
+					flexDirection: "column",
+					justifyContent: "center",
 					flex: 1,
-					overflow: 'hidden',
+					overflow: "hidden",
 					gap: 0,
 				}}
 			>
-				<Text className={texts.appName} classNames={texts}>{name}</Text>
+				<Text className={texts.appName} classNames={texts}>
+					{name}
+				</Text>
 				<Text
 					className={texts.appUrl}
 					classNames={texts}
--- a/src/pages/homepage/components/Applications.tsx
+++ b/src/pages/homepage/components/Applications.tsx
@@ -1,11 +1,11 @@
-import { Stack, Text } from '@mantine/core';
-import { useEffect, useState } from 'react';
-import {useQueryAPI} from '../../../hooks/useAPI';
-import texts from '../../../styles/Text.module.css';
-import AppItem from './AppItem';
+import { Stack, Text } from "@mantine/core";
+import { useEffect, useState } from "react";
+import { useQueryAPI } from "../../../hooks/useAPI";
+import texts from "../../../styles/Text.module.css";
+import AppItem from "./AppItem";

-function Applications({contentType}: any) {
-	const { data, isFetching } = useQueryAPI({ endpoint: 'api/apps' });
+function Applications({ contentType }: any) {
+	const { data, isFetching } = useQueryAPI({ endpoint: "api/apps" });
 	const [applications, setApplications] = useState([]);
 	useEffect(() => {
 		if (!isFetching) {
@@ -13,24 +13,26 @@ function Applications({contentType}: any) {
 		}
 	}, [isFetching]);
 	return (
-		<Stack id='apps' style={{ gap: 0 }}>
-			<Text className={texts.sectionTitle} classNames={texts}>Applications</Text>
+		<Stack id="apps" style={{ gap: 0 }}>
+			<Text className={texts.sectionTitle} classNames={texts}>
+				Applications
+			</Text>
 			<Stack
 				style={{
-					background: 'var(--color-background)',
-					gap: '.25rem',
-					backgroundSize: 'cover',
-					borderBottom: '0px solid',
-					display: 'grid',
-					gridColumnGap: '5px',
-					gridRowGap: '5px',
-					gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr 1fr',
-					gridTemplateRows: '64px',
-					paddingBottom: 'var(--module-spacing)',
+					background: "var(--color-background)",
+					gap: ".25rem",
+					backgroundSize: "cover",
+					borderBottom: "0px solid",
+					display: "grid",
+					gridColumnGap: "5px",
+					gridRowGap: "5px",
+					gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr",
+					gridTemplateRows: "64px",
+					paddingBottom: "var(--module-spacing)",
 				}}
 			>
 				{applications?.map((item: any) => {
-					if (item.category === contentType || contentType === 'All')
+					if (item.category === contentType || contentType === "All")
 						return (
 							<AppItem
 								key={item.name}
--- a/src/pages/homepage/components/BookmarkGroups.tsx
+++ b/src/pages/homepage/components/BookmarkGroups.tsx
@@ -1,15 +0,0 @@
-import BookmarkDetails from './BookmarkDetails';
-
-function BookmarkGroups(props) {
-	const links = props.links;
-	return (
-		<div id='bookmarkForm'>
-			<h3>{links?.category}</h3>
-			{links?.map((links) => (
-				<BookmarkDetails key={links.name} name={links.name} url={links.url} />
-			))}
-		</div>
-	);
-}
-
-export default BookmarkGroups;
--- a/src/pages/homepage/components/Bookmarks.tsx
+++ b/src/pages/homepage/components/Bookmarks.tsx
@@ -1,15 +1,15 @@
-import { Stack, Text } from '@mantine/core';
-import { useEffect, useState } from 'react';
-import {useQueryAPI} from '../../../hooks/useAPI';
-import texts from '../../../styles/Text.module.css';
-import LinkGroups from './LinkGroups';
+import { Stack, Text } from "@mantine/core";
+import { useEffect, useState } from "react";
+import { useQueryAPI } from "../../../hooks/useAPI";
+import texts from "../../../styles/Text.module.css";
+import LinkGroups from "./LinkGroups";

-function Links({contentType}: any) {
+function Links({ contentType }: any) {
 	const { data: linkData, isFetched: linksIsFetched } = useQueryAPI({
-		endpoint: 'api/links',
+		endpoint: "api/links",
 	});
 	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
-		endpoint: 'api/categories',
+		endpoint: "api/categories",
 	});
 	const [bookmarks, setBookmarks] = useState([]);
 	const [categories, setCategories] = useState([]);
@@ -24,29 +24,32 @@ function Links({contentType}: any) {
 	return (
 		<>
 			{groupsIsFetched && linksIsFetched && categories?.length > 0 && (
-				<Stack id='links' style={{ gap: 0 }}>
-					<Text className={texts.sectionTitle} classNames={texts}>Bookmarks</Text>
+				<Stack id="links" style={{ gap: 0 }}>
+					<Text className={texts.sectionTitle} classNames={texts}>
+						Bookmarks
+					</Text>
 					<Stack
 						style={{
-							display: 'grid',
-							flexWrap: 'nowrap',
-							gridColumnGap: '20px',
-							gridRowGap: '0px',
-							gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr',
-							gridTemplateRows: 'auto',
+							display: "grid",
+							flexWrap: "nowrap",
+							gridColumnGap: "20px",
+							gridRowGap: "0px",
+							gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr",
+							gridTemplateRows: "auto",
 						}}
 					>
 						{categories.map((category: any) => {
 							if (
 								category.column_filter === contentType ||
-								contentType === 'All'
+								contentType === "All"
 							) {
 								return (
 									<LinkGroups
 										key={category.id}
 										category={category.category_name}
 										links={bookmarks.filter(
-											(bookmark: any) => bookmark.category === category.category_index,
+											(bookmark: any) =>
+												bookmark.category === category.category_index,
 										)}
 									/>
 								);
--- a/src/pages/homepage/components/Header.tsx
+++ b/src/pages/homepage/components/Header.tsx
@@ -1,6 +1,6 @@
-import { Stack, Text } from '@mantine/core';
-import { useEffect, useState } from 'react';
-import {textClasses} from '../../../styles';
+import { Stack, Text } from "@mantine/core";
+import { useEffect, useState } from "react";
+import { textClasses } from "../../../styles";

 function Header({ greet, date }: any) {
 	const [time, setTime] = useState(new Date());
@@ -22,50 +22,56 @@ function Header({ greet, date }: any) {
 	return (
 		<Stack
 			style={{
-				borderBottom: '0px solid',
-				zIndex: '1',
-				clear: 'both',
-				display: 'flex',
-				flexDirection: 'row',
+				borderBottom: "0px solid",
+				zIndex: "1",
+				clear: "both",
+				display: "flex",
+				flexDirection: "row",
 				gap: 0,
 			}}
 		>
 			<Stack
 				style={{
-					display: 'grid',
-					width: '100%',
+					display: "grid",
+					width: "100%",
 				}}
 			>
-				<Text className={textClasses.greeting} classNames={textClasses}>{greet}</Text>
+				<Text className={textClasses.greeting} classNames={textClasses}>
+					{greet}
+				</Text>
 			</Stack>
 			<Stack
 				style={{
-					display: 'flex',
-					float: 'right',
-					justifyContent: 'right',
-					width: 'auto',
+					display: "flex",
+					float: "right",
+					justifyContent: "right",
+					width: "auto",
 					gap: 0,
 				}}
 			>
-				<Text className={textClasses.dateTime} classNames={textClasses} style={{ width: 'max-content' }}>
+				<Text
+					className={textClasses.dateTime}
+					classNames={textClasses}
+					style={{ width: "max-content" }}
+				>
 					{date}
 				</Text>
 				<Text
-					component='h2'
+					component="h2"
 					className={textClasses.dateTime}
 					classNames={textClasses}
 					style={{
-						justifyContent: 'right',
-						display: 'grid',
+						justifyContent: "right",
+						display: "grid",
 					}}
 				>
 					{`${
 						time.getHours() === 0
 							? 12
 							: time.getHours() > 12
-							  ? time.getHours() - 12
-							  : time.getHours()
-					}:${fixDigits(time.getMinutes())} ${time.getHours() >= 12 ? 'PM' : 'AM'}`}
+								? time.getHours() - 12
+								: time.getHours()
+					}:${fixDigits(time.getMinutes())} ${time.getHours() >= 12 ? "PM" : "AM"}`}
 				</Text>
 			</Stack>
 		</Stack>
--- a/src/pages/homepage/components/LinkGroups.tsx
+++ b/src/pages/homepage/components/LinkGroups.tsx
@@ -1,17 +1,19 @@
-import { Stack, Text } from '@mantine/core';
-import texts from '../../../styles/Text.module.css';
-import LinkItem from './LinkItem';
+import { Stack, Text } from "@mantine/core";
+import texts from "../../../styles/Text.module.css";
+import LinkItem from "./LinkItem";

 function LinkGroups({ links, category }: any) {
 	return (
 		<Stack
 			style={{
-				marginBottom: '0em',
-				display: 'block',
-				lineHeight: '1.5rem',
+				marginBottom: "0em",
+				display: "block",
+				lineHeight: "1.5rem",
 			}}
 		>
-			<Text className={texts.linkCategory} classNames={texts}>{category}</Text>
+			<Text className={texts.linkCategory} classNames={texts}>
+				{category}
+			</Text>
 			{links?.map((link: any) => (
 				<LinkItem key={link.name} link={link} />
 			))}
--- a/src/pages/homepage/components/LinkItem.tsx
+++ b/src/pages/homepage/components/LinkItem.tsx
@@ -1,9 +1,14 @@
-import { Text } from '@mantine/core';
-import texts from '../../../styles/Text.module.css';
+import { Text } from "@mantine/core";
+import texts from "../../../styles/Text.module.css";

 function LinkItem({ link }: any) {
 	return (
-		<Text className={texts.linkItem} classNames={texts} component='a' href={link.url}>
+		<Text
+			className={texts.linkItem}
+			classNames={texts}
+			component="a"
+			href={link.url}
+		>
 			{link.name}
 		</Text>
 	);
--- a/src/pages/homepage/components/MessageInfo.jsx
+++ b/src/pages/homepage/components/MessageInfo.jsx
@@ -1,9 +1,9 @@
-import { useEffect, useState } from 'react';
-import Messages from '../../../components/Messages';
-import useQueryAPI from '../../../hooks/useAPI';
+import { useEffect, useState } from "react";
+import Messages from "../../../components/Messages";
+import useQueryAPI from "../../../hooks/useAPI";

 function MessageInfo() {
-	const messageData = useQueryAPI({ endpoint: 'api/messages' });
+	const messageData = useQueryAPI({ endpoint: "api/messages" });
 	const [greetings, setGreetings] = useState([]);

 	useEffect(() => {
@@ -15,7 +15,7 @@ function MessageInfo() {
 	return (
 		<>
 			{greetings && (
-				<div id='messageForm'>
+				<div id="messageForm">
 					{greetings.map((greeting, index) => (
 						<Messages
 							key={greeting.id}
--- a/src/pages/homepage/components/Search.tsx
+++ b/src/pages/homepage/components/Search.tsx
@@ -4,72 +4,85 @@ import { useQueryAPI } from "../../../hooks";
 import { useState } from "react";

 export default function Search() {
-    const { data: providers } = useQueryAPI({ endpoint: 'api/providers' });
+	const { data: providers } = useQueryAPI({ endpoint: "api/providers" });

-    const [providerLabel, setProviderLabel] = useState('Google Search');
-    const [providerURL, setProviderURL] = useState('https://www.google.com/search?q=');
-    
-    const handleKeyPress = (item: any) => {
-        const option = item.target.value.substr(1, item.target.value.indexOf(' ') - 1) || item.target.value.substr(1);
-			const subtext = item.target.value.substr(2 + option.length);
-        if (item.key === 'Enter') {
-            if (item.target.value.startsWith('/')) {
-                open(`${providerURL}${subtext}`, '_self');
-            } else if (validURL(item.target.value)) {
-                if (containsProtocol(item.target.value)) window.location = item.target.value;
-		        else open(`https://${item.target.value}`, '_self');
-            } else {
-                open(`${providerURL}${subtext}`, '_self');
-            }
-        }
-    }
+	const [providerLabel, setProviderLabel] = useState("Google Search");
+	const [providerURL, setProviderURL] = useState(
+		"https://www.google.com/search?q=",
+	);

-    function validURL(str: any) {
-        const pattern = new RegExp(
-            '^(https?:\\/\\/)?' + // protocol
-                '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
-                '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
-                '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
-                '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
-                '(\\#[-a-z\\d_]*)?$',
-            'i',
-        ); // fragment locator
-        return !!pattern.test(str);
-    }
-    function containsProtocol(str: any) {
-        const pattern = /^(https?:\/\/){1}.*/i;
-        return !!pattern.test(str);
-    }
+	const handleKeyPress = (item: any) => {
+		const option =
+			item.target.value.substr(1, item.target.value.indexOf(" ") - 1) ||
+			item.target.value.substr(1);
+		const subtext = item.target.value.substr(2 + option.length);
+		if (item.key === "Enter") {
+			if (item.target.value.startsWith("/")) {
+				open(`${providerURL}${subtext}`, "_self");
+			} else if (validURL(item.target.value)) {
+				if (containsProtocol(item.target.value))
+					window.location = item.target.value;
+				else open(`https://${item.target.value}`, "_self");
+			} else {
+				open(`${providerURL}${subtext}`, "_self");
+			}
+		}
+	};

-    return (
+	function validURL(str: any) {
+		const pattern = new RegExp(
+			"^(https?:\\/\\/)?" + // protocol
+				"((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" + // domain name
+				"((\\d{1,3}\\.){3}\\d{1,3}))" + // OR ip (v4) address
+				"(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" + // port and path
+				"(\\?[;&a-z\\d%_.~+=-]*)?" + // query string
+				"(\\#[-a-z\\d_]*)?$",
+			"i",
+		); // fragment locator
+		return !!pattern.test(str);
+	}
+	function containsProtocol(str: any) {
+		const pattern = /^(https?:\/\/){1}.*/i;
+		return !!pattern.test(str);
+	}
+
+	return (
 		<Stack
 			style={{
-				backgroundColor: 'transparent',
-				textAlign: 'center',
-				position: 'relative',
-				padding: '.3em',
-				display: 'inline-block',
+				backgroundColor: "transparent",
+				textAlign: "center",
+				position: "relative",
+				padding: ".3em",
+				display: "inline-block",
 				gap: 0,
 			}}
 		>
 			<TextInput
 				className={textInputClasses.search}
-                classNames={textInputClasses}
-				spellCheck='true'
-                leftSection={providerLabel}
+				classNames={textInputClasses}
+				spellCheck="true"
+				leftSection={providerLabel}
 				onChange={(item: any) => {
-                    if(item.target.value.startsWith('/')) {
-                        setProviderLabel(providers?.find((p: any) => p.prefix === item.target.value.split(' ')[0]).name);
-                        setProviderURL(providers?.find((p: any) => p.prefix === item.target.value.split(' ')[0]).url);
-                    } else {
-                        setProviderLabel('Google Search');
-                        setProviderURL('https://www.google.com/search?q=');
-                    }
-                }}
-                onKeyUp={(item: any) => {
-                    handleKeyPress(item);
-                }}
+					if (item.target.value.startsWith("/")) {
+						setProviderLabel(
+							providers?.find(
+								(p: any) => p.prefix === item.target.value.split(" ")[0],
+							).name,
+						);
+						setProviderURL(
+							providers?.find(
+								(p: any) => p.prefix === item.target.value.split(" ")[0],
+							).url,
+						);
+					} else {
+						setProviderLabel("Google Search");
+						setProviderURL("https://www.google.com/search?q=");
+					}
+				}}
+				onKeyUp={(item: any) => {
+					handleKeyPress(item);
+				}}
 			/>
 		</Stack>
 	);
-}
+}
--- a/src/pages/homepage/components/SettingsButton.tsx
+++ b/src/pages/homepage/components/SettingsButton.tsx
@@ -1,58 +1,58 @@
-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';
-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 { Button, Menu, NavLink, Select } from "@mantine/core";
+import { useEffect, useState } from "react";
+import { FiMenu, FiMonitor } from "react-icons/fi";
+import { useQueryAPI } from "../../../hooks/useAPI";
+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";
+
+function SettingsButton({ contentType, setContentType, theme }: any) {
+	const { data, isFetched } = useQueryAPI({ endpoint: "api/appCategories" });
+	const [categories, setCategories] = useState([
+		{ value: "All", label: "All" },
+	]);

-function SettingsButton({contentType, setContentType, theme}: any) {
-	const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
-	const [categories, setCategories] = useState([{value: 'All', label: 'All'}]);
-	
 	useEffect(() => {
-		if(data) {
-			const list: [any] = data.map((category: any) => {return {value: category.category, label: category.category}}) || [];
-			list.unshift({value: 'All', label: 'All'});
+		if (data) {
+			const list: [any] =
+				data.map((category: any) => {
+					return { value: category.category, label: category.category };
+				}) || [];
+			list.unshift({ value: "All", label: "All" });
 			setCategories(list);
 		}
 	}, [data, isFetched]);

 	function runWakeCommand() {
 		const requestOptions = {
-			method: 'GET',
-			headers: { 'Content-Type': 'application/json' },
+			method: "GET",
+			headers: { "Content-Type": "application/json" },
 		};
-		fetch('/trigger/api/wakeDakota', requestOptions);
+		fetch("/trigger/api/wakeDakota", requestOptions);
 	}
 	return (
-		<Menu
-			withinPortal={false}
-			withArrow
-			shadow='md'
-			position='top'
-		>
+		<Menu withinPortal={false} withArrow shadow="md" position="top">
 			<Menu.Target>
 				<Button className={button.settingsButton} classNames={button}>
 					<FiMenu />
 				</Button>
 			</Menu.Target>
-			<Menu.Dropdown
-				className={menu.dropdown}
-			>
+			<Menu.Dropdown className={menu.dropdown}>
 				<NavLink
-					label='Settings'
-					component='a'
-					href='/trigger/settings'
+					label="Settings"
+					component="a"
+					href="/trigger/settings"
 					className={navLink.defaultNavLink}
 					classNames={navLink}
 				/>
-				<NavLink label='Quick Actions'
+				<NavLink
+					label="Quick Actions"
 					className={navLink.defaultNavLink}
-					classNames={navLink}>
+					classNames={navLink}
+				>
 					<NavLink
-						label='Wake Dakota'
+						label="Wake Dakota"
 						leftSection={<FiMonitor />}
 						onClick={() => runWakeCommand()}
 						className={navLink.defaultNavLink}
@@ -60,12 +60,12 @@ function SettingsButton({contentType, setContentType, theme}: any) {
 					/>
 				</NavLink>
 				<Select
-					label='Homepage Filter'
+					label="Homepage Filter"
 					data={categories ?? []}
 					defaultValue={contentType}
 					withCheckIcon={false}
 					onChange={(data: any) => {
-						setContentType(data)
+						setContentType(data);
 					}}
 					classNames={selectClasses}
 					comboboxProps={{ withinPortal: false }}