Updates to styles; misc bugfixes

src/pages/homepage/components/Applications/AppItem.tsx

@@ -1,80 +0,0 @@
-import { Box, Stack, Text } from '@mantine/core';
-import { useCommonHooks } from 'hooks';
-import { useState } from 'react';
-import * as fa6 from 'react-icons/fa6';
-import * as si from 'react-icons/si';
-import * as vsc from 'react-icons/vsc';
-import { boxClasses, textClasses } from 'styles';
-
-function AppItem({ url, icon, name }: { url: string; icon: string; name: string }) {
-	const allIcons: any = { ...fa6, ...vsc, ...si };
-	const Icon = allIcons[icon];
-	const { isMobile } = useCommonHooks();
-	const [textDecoration, setTextDecoration] = useState<string>('none');
-	const [hover, setHover] = useState<boolean>(false);
-	const validUrl =
-		url.startsWith('http://') || url.startsWith('https://') ? url : `http://${url}`;
-	return (
-		<Box
-			component='a'
-			href={validUrl}
-			onMouseOver={() => {
-				setTextDecoration('underline');
-				setHover(true);
-			}}
-			onMouseOut={() => {
-				setTextDecoration('none');
-				setHover(false);
-			}}
-			className={boxClasses.appItemBox}
-			h={'64px'}
-		>
-			{hover && (
-				<svg
-					style={{ position: 'absolute', borderRadius: '6px' }}
-					height='100%'
-					width='100%'
-					xmlns='http://www.w3.org/2000/svg'
-				>
-					<rect rx='8' ry='8' height='100%' width='100%' strokeLinejoin='round' />
-				</svg>
-			)}
-			<Stack
-				align={isMobile ? 'center' : undefined}
-				justify={isMobile ? 'center' : undefined}
-				style={{
-					width: isMobile ? '100%' : undefined,
-					marginRight: isMobile ? 0 : '1rem',
-					marginLeft: isMobile ? 0 : '1rem',
-					paddingTop: isMobile ? 0 : '1rem',
-				}}
-			>
-				{Icon && <Icon style={{ height: '2rem', width: '2rem' }} />}
-			</Stack>
-			<Stack
-				justify='center'
-				style={{
-					overflow: 'hidden',
-					whiteSpace: 'nowrap',
-					gap: 0,
-					flex: 1,
-				}}
-			>
-				<Text className={textClasses.appName} classNames={textClasses}>
-					{name}
-				</Text>
-				<Text
-					className={textClasses.appUrl}
-					classNames={textClasses}
-					style={{
-						textDecoration: textDecoration,
-					}}
-				>
-					{url}
-				</Text>
-			</Stack>
-		</Box>
-	);
-}
-
-export default AppItem;

src/pages/homepage/components/Applications/Applications.tsx

@@ -1,15 +1,15 @@
 import { Stack, Text } from '@mantine/core';
+import { AppItem } from 'components';
 import { useCommonHooks, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 import type { Application } from 'types';
-import AppItem from './AppItem';
 
 function Applications({ contentType }: { contentType: string[] }) {
 	const { data: applicationData, isFetching: isApplicationDataFetching } = useQueryAPI({
 		endpoint: 'api/enabledApplications',
 	});
-	const { appSort, appDensity } = useCommonHooks();
+	const { appSort, appDensity, appScale } = useCommonHooks();
 	const [applications, setApplications] = useState<Application[]>([]);
 
 	useEffect(() => {
@@ -42,7 +42,11 @@ function Applications({ contentType }: { contentType: string[] }) {
 		<>
 			{applications.length > 0 && contentType.length > 0 && (
 				<Stack gap={0}>
-					<Text className={textClasses.sectionTitle} classNames={textClasses}>
+					<Text
+						fz={appScale * 20}
+						className={textClasses.sectionTitle}
+						classNames={textClasses}
+					>
 						Applications
 					</Text>
 					<Stack
@@ -65,6 +69,9 @@ function Applications({ contentType }: { contentType: string[] }) {
 										name={application.name}
 										url={application.url}
 										icon={application.icon}
+										enabled={application.enabled}
+										scale={appScale}
+										linksActive
 									/>
 								);
 							})}

src/pages/homepage/components/Bookmarks/BookmarkGroups.tsx

@@ -6,9 +6,11 @@ import BookmarkItem from './BookmarkItem';
 function BookmarkGroups({
 	bookmarks,
 	category,
+	bookmarkScale,
 }: {
 	bookmarks: Bookmark[];
 	category: string;
+	bookmarkScale: number;
 }) {
 	return (
 		<Stack
@@ -18,13 +20,21 @@ function BookmarkGroups({
 				whiteSpace: 'nowrap',
 			}}
 		>
-			<Text className={textClasses.bookmarkCategory} classNames={textClasses}>
+			<Text
+				fz={bookmarkScale * 14}
+				className={textClasses.bookmarkCategory}
+				classNames={textClasses}
+			>
 				{category}
 			</Text>
 			{bookmarks
 				?.toSorted((a: Bookmark, b: Bookmark) => (a.index > b.index ? 1 : -1))
 				.map((bookmark: Bookmark) => (
-					<BookmarkItem key={bookmark.name} bookmark={bookmark} />
+					<BookmarkItem
+						key={bookmark.name}
+						bookmark={bookmark}
+						bookmarkScale={bookmarkScale}
+					/>
 				))}
 		</Stack>
 	);

src/pages/homepage/components/Bookmarks/BookmarkItem.tsx

@@ -2,13 +2,20 @@ import { Text } from '@mantine/core';
 import { textClasses } from 'styles';
 import type { Bookmark } from 'types';
 
-function BookmarkItem({ bookmark }: { bookmark: Bookmark }) {
+function BookmarkItem({
+	bookmark,
+	bookmarkScale,
+}: {
+	bookmark: Bookmark;
+	bookmarkScale: number;
+}) {
 	return (
 		<Text
 			className={textClasses.bookmarkItem}
 			classNames={textClasses}
 			component='a'
 			href={bookmark.url}
+			fz={bookmarkScale * 14}
 		>
 			{bookmark.name}
 		</Text>

src/pages/homepage/components/Bookmarks/Bookmarks.tsx

@@ -12,7 +12,7 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
 	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
 		endpoint: 'api/bookmarkCategories',
 	});
-	const { bookmarkSort, bookmarkDensity } = useCommonHooks();
+	const { bookmarkSort, bookmarkDensity, bookmarkScale } = useCommonHooks();
 	const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
 	const [groups, setGroups] = useState<BookmarkGroup[]>([]);
 
@@ -59,7 +59,11 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
 				groups?.length > 0 &&
 				contentType.length > 0 && (
 					<Stack gap={0}>
-						<Text className={textClasses.sectionTitle} classNames={textClasses}>
+						<Text
+							fz={bookmarkScale * 20}
+							className={textClasses.sectionTitle}
+							classNames={textClasses}
+						>
 							Bookmarks
 						</Text>
 						<Stack
@@ -85,6 +89,7 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
 												(bookmark: Bookmark) =>
 													bookmark.category === category.categoryName,
 											)}
+											bookmarkScale={bookmarkScale}
 										/>
 									);
 								})}

src/pages/homepage/components/SettingsButton/SettingsButton.tsx

@@ -1,4 +1,4 @@
-import { Button, Group, Menu, Stack } from '@mantine/core';
+import { Box, Button, Group, Menu, Overlay, Stack } from '@mantine/core';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FiMenu, FiSettings } from 'react-icons/fi';
@@ -31,12 +31,16 @@ function SettingsButton() {
 		setAppSort,
 		appDensity,
 		setAppDensity,
+		appScale,
+		setAppScale,
 		bookmarkSort,
 		setBookmarkSort,
 		bookmarkFilter,
 		setBookmarkFilter,
 		bookmarkDensity,
 		setBookmarkDensity,
+		bookmarkScale,
+		setBookmarkScale,
 	} = useCommonHooks();
 
 	const handleWakeRequest = () => {
@@ -96,12 +100,20 @@ function SettingsButton() {
 							width: isMobile ? '100%' : undefined,
 						}}
 					>
-						<WakeOnLan
-							wolClients={wolClients}
-							selectedClient={selectedClient}
-							setSelectedClient={setSelectedClient}
-							handleWakeRequest={handleWakeRequest}
-						/>
+						<Box
+							pos={'relative'}
+							style={{ filter: wolClients.length === 0 ? 'grayscale(1)' : undefined }}
+						>
+							{wolClients.length === 0 && (
+								<Overlay opacity={0.75} style={{ borderRadius: '10px' }} />
+							)}
+							<WakeOnLan
+								wolClients={wolClients}
+								selectedClient={selectedClient}
+								setSelectedClient={setSelectedClient}
+								handleWakeRequest={handleWakeRequest}
+							/>
+						</Box>
 						<ThemingCard />
 					</Stack>
 					<Stack>
@@ -114,6 +126,8 @@ function SettingsButton() {
 							setSort={setAppSort}
 							density={appDensity}
 							setDensity={setAppDensity}
+							scale={appScale}
+							setScale={setAppScale}
 						/>
 						<SettingsCard
 							categories={categories}
@@ -124,6 +138,8 @@ function SettingsButton() {
 							setSort={setBookmarkSort}
 							density={bookmarkDensity}
 							setDensity={setBookmarkDensity}
+							scale={bookmarkScale}
+							setScale={setBookmarkScale}
 						/>
 					</Stack>
 				</Group>

src/pages/homepage/components/SettingsButton/SettingsCard.tsx

@@ -18,6 +18,8 @@ function SettingsCard({
 	setSort,
 	density,
 	setDensity,
+	scale,
+	setScale,
 }: {
 	categories: ComboboxItem[];
 	sectionTitle: string;
@@ -27,6 +29,8 @@ function SettingsCard({
 	setSort: any;
 	density: any;
 	setDensity: any;
+	scale: any;
+	setScale: any;
 }) {
 	return (
 		<Stack
@@ -53,19 +57,41 @@ function SettingsCard({
 			>
 				{sectionTitle}
 			</Text>
-			<Text fz={'.875rem'} mt={'1rem'}>
-				Density
-			</Text>
-			<Stack m={0} p={0} gap={0} w={'90%'}>
-				<Slider
-					className={sliderClasses.default}
-					classNames={sliderClasses}
-					value={density}
-					onChange={(value) => setDensity(value)}
-					min={1}
-					max={8}
-				/>
-			</Stack>
+			<Group w={'100%'} justify='center'>
+				<Stack w={scale !== undefined ? '60%' : '90%'} align='center'>
+					<Text fz={'.875rem'} mt={'1rem'}>
+						Density
+					</Text>
+					<Slider
+						className={sliderClasses.default}
+						classNames={sliderClasses}
+						value={density}
+						onChange={(value) => setDensity(value)}
+						min={1}
+						max={8}
+						marks={[{ value: 6, label: 'Default' }]}
+						onDoubleClick={() => setDensity(6)}
+					/>
+				</Stack>
+				{scale !== undefined && (
+					<Stack w={'33%'} align='center'>
+						<Text fz={'.875rem'} mt={'1rem'}>
+							Scale
+						</Text>
+						<Slider
+							className={sliderClasses.default}
+							classNames={sliderClasses}
+							value={scale}
+							onChange={(value) => setScale(value)}
+							step={0.1}
+							min={0.5}
+							max={2}
+							marks={[{ value: 1, label: 'Default' }]}
+							onDoubleClick={() => setScale(1)}
+						/>
+					</Stack>
+				)}
+			</Group>
 			<Group justify='center' mb={'.25rem'}>
 				<MultiSelect
 					label='Filter'

src/pages/homepage/components/SettingsButton/WakeOnLanCard.tsx

@@ -27,7 +27,7 @@ function WakeOnLan({
 			<Button
 				classNames={buttonClasses}
 				className={buttonClasses.wakeButton}
-				disabled={!wolClients?.length || selectedClient === null}
+				disabled={!wolClients?.length || selectedClient?.macAddress === undefined}
 				onClick={() => {
 					handleWakeRequest();
 				}}