Updated names for uniformity

src/components/WeatherModal/ExtendedForecastCard.tsx

@@ -1,5 +1,4 @@
-import { Group, Stack, Text } from '@mantine/core';
+import { Group, SimpleGrid, Stack, Text } from '@mantine/core';
-import { useCommonHooks } from 'hooks';
 import { textClasses } from 'styles';
 import type { ExtendedForecast } from 'types';
 import WeatherIcon from './WeatherIcon';
@@ -9,8 +8,6 @@ export default function ExtendedForecastCard({
 }: { forecast: ExtendedForecast[] }) {
 	const day = forecast.slice(2, 14).filter((item: ExtendedForecast) => item.isDaytime);
 	const night = forecast.slice(2, 14).filter((item: ExtendedForecast) => !item.isDaytime);
-
-	const { isMobile } = useCommonHooks();
 	return (
 		<Stack
 			gap={0}
@@ -33,7 +30,7 @@ export default function ExtendedForecastCard({
 					Extended Forecast
 				</Text>
 			</Group>
-			<Group w={'100%'} align='center' justify='space-between'>
+			<SimpleGrid w={'100%'} cols={6}>
 				{day.map((item: ExtendedForecast, index: number) => {
 					const short = item.shortForecast.includes('And')
 						? item.shortForecast.substring(0, item.shortForecast.indexOf('And'))
@@ -43,7 +40,6 @@ export default function ExtendedForecastCard({
 
 					return (
 						<Stack
-							w={isMobile ? '30%' : '15%'}
 							key={item.name}
 							gap={0}
 							align='center'
@@ -78,7 +74,7 @@ export default function ExtendedForecastCard({
 						</Stack>
 					);
 				})}
-			</Group>
+			</SimpleGrid>
 		</Stack>
 	);
 }

src/hooks/useAPI.ts

@@ -127,10 +127,10 @@ export function useMutationAPI() {
 			queryClient.refetchQueries({
 				queryKey: ['GET', endpoint],
 			});
-			endpoint === 'api/linkOrder' &&
+			endpoint === 'api/bookmarkOrder' &&
-				queryClient.refetchQueries({ queryKey: ['GET', 'api/links'] });
+				queryClient.refetchQueries({ queryKey: ['GET', 'api/bookmarks'] });
-			endpoint === 'api/categoryOrder' &&
+			endpoint === 'api/bookmarkCategoryOrder' &&
-				queryClient.refetchQueries({ queryKey: ['GET', 'api/categories'] });
+				queryClient.refetchQueries({ queryKey: ['GET', 'api/bookmarkCategories'] });
 			endpoint === 'api/applicationOrder' &&
 				queryClient.refetchQueries({ queryKey: ['GET', 'api/applicationOrder'] });
 		},
@@ -138,10 +138,10 @@ export function useMutationAPI() {
 			queryClient.refetchQueries({
 				queryKey: ['GET', endpoint],
 			});
-			endpoint === 'api/linkOrder' &&
+			endpoint === 'api/bookmarkOrder' &&
-				queryClient.refetchQueries({ queryKey: ['GET', 'api/links'] });
+				queryClient.refetchQueries({ queryKey: ['GET', 'api/bookmarks'] });
-			endpoint === 'api/categoryOrder' &&
+			endpoint === 'api/bookmarkCategoryOrder' &&
-				queryClient.refetchQueries({ queryKey: ['GET', 'api/categories'] });
+				queryClient.refetchQueries({ queryKey: ['GET', 'api/bookmarkCategories'] });
 			endpoint === 'api/applicationOrder' &&
 				queryClient.refetchQueries({ queryKey: ['GET', 'api/applicationOrder'] });
 		},

src/pages/homepage/Homepage.tsx

@@ -19,7 +19,7 @@ import Search from './components/Search/Search';
 import SettingsButton from './components/SettingsButton/SettingsButton';
 
 export function Homepage() {
-	const { data: personal, isFetched: personalIsFetched } = useQueryAPI({
+	const { data: personalData, isFetched: personalIsFetched } = useQueryAPI({
 		endpoint: 'api/personalData',
 	});
 	const {
@@ -27,7 +27,7 @@ export function Homepage() {
 		isFetching: isMessagesFetching,
 		isFetched: isMessagesFetched,
 	} = useQueryAPI({
-		endpoint: 'api/messages',
+		endpoint: 'api/displayedGreeting',
 	});
 	const {
 		appFilter,
@@ -37,8 +37,8 @@ export function Homepage() {
 		currentLocation,
 		setCurrentLocation,
 	} = useCommonHooks();
-	const [personalData, setPersonalData] = useState<PersonalData>();
+	const [personal, setPersonal] = useState<PersonalData>();
-	const [messages, setMessages] = useState<Message[]>([]);
+	const [message, setMessage] = useState<Message>();
 	const [displayedGreeting, setDisplayedGreeting] = useState('');
 	const [weatherModalOpened, { open: openWeatherModal, close: closeWeatherModal }] =
 		useDisclosure(false);
@@ -53,36 +53,36 @@ export function Homepage() {
 	const date = new Date().toLocaleDateString('en-US', dateOptions);
 	useEffect(() => {
 		if (messageData && isMessagesFetched) {
-			setMessages(messageData);
+			setMessage(messageData[0]);
 		}
 	}, [messageData, isMessagesFetched]);
 	useEffect(() => {
-		if (personal && personalIsFetched) {
+		if (personalData && personalIsFetched) {
-			setCurrentUser(personal[0]);
+			setCurrentUser(personalData[0]);
-			setPersonalData(personal[0]);
+			setPersonal(personalData[0]);
 		}
-	}, [personal, personalIsFetched]);
+	}, [personalData, personalIsFetched]);
 	useEffect(() => {
-		if (messages && personalData) {
+		if (message !== undefined && personal) {
 			setDisplayedGreeting(() => {
-				if (Math.floor(Math.random() * 100) > 10 || messages.length === 0) {
+				if (Math.floor(Math.random() * 100) > 10 || message === undefined) {
 					switch (Math.floor(new Date().getHours() / 6)) {
 						case 0:
-							return `Good night, ${personalData?.firstName}!`;
+							return `Good night, ${personal?.firstName}!`;
 						case 1:
-							return `Good morning, ${personalData?.firstName}!`;
+							return `Good morning, ${personal?.firstName}!`;
 						case 2:
-							return `Good afternoon, ${personalData?.firstName}!`;
+							return `Good afternoon, ${personal?.firstName}!`;
 						case 3:
-							return `Good evening, ${personalData?.firstName}!`;
+							return `Good evening, ${personal?.firstName}!`;
 					}
 				}
-				return messages[Math.floor(Math.random() * messages.length)].message;
+				return message.message;
 			});
 		}
-	}, [messages, personalData, isMessagesFetching]);
+	}, [message, personal, isMessagesFetching]);
 	const { data: weatherMetadata } = useOSMAPI({
-		address: personal?.[0]?.physicalAddress,
+		address: personalData?.[0]?.physicalAddress,
 	});
 	const { data: points } = useWeatherAPI({
 		endpoint: 'points',

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

@@ -6,18 +6,16 @@ import type { Application } from 'types';
 import AppItem from './AppItem';
 
 function Applications({ contentType }: { contentType: string[] }) {
-	const { data: apps, isFetching: isAppsFetching } = useQueryAPI({
+	const { data: applicationData, isFetching: isApplicationDataFetching } = useQueryAPI({
-		endpoint: 'api/apps',
+		endpoint: 'api/enabledApplications',
 	});
 	const { isMobile, appSort, appDensity } = useCommonHooks();
-	const [applicationData, setApplicationData] = useState<Application[]>([]);
+	const [applications, setApplications] = useState<Application[]>([]);
 
 	useEffect(() => {
-		if (apps && !isAppsFetching) {
+		if (applicationData && !isApplicationDataFetching) {
-			setApplicationData(
+			setApplications(
-				apps
+				applicationData.sort((a: Application, b: Application) => {
-					.filter((a: Application) => a.enabled === 1)
-					.sort((a: Application, b: Application) => {
 					switch (appSort) {
 						case 'A>Z':
 							return a.name > b.name ? 1 : -1;
@@ -27,13 +25,11 @@ function Applications({ contentType }: { contentType: string[] }) {
 							if (a.id && b.id) {
 								return a.id < b.id ? 1 : -1;
 							}
-
 							return -1;
 						case 'Oldest':
 							if (a.id && b.id) {
 								return a.id > b.id ? 1 : -1;
 							}
-
 							return -1;
 						case 'Custom':
 							return a.index > b.index ? 1 : -1;
@@ -41,11 +37,11 @@ function Applications({ contentType }: { contentType: string[] }) {
 				}),
 			);
 		}
-	}, [apps, isAppsFetching, appSort]);
+	}, [applicationData, isApplicationDataFetching, appSort]);
 	return (
 		<>
-			{applicationData.length > 0 && contentType.length > 0 && (
+			{applications.length > 0 && contentType.length > 0 && (
-				<Stack id='apps' style={{ gap: 0 }}>
+				<Stack style={{ gap: 0 }}>
 					<Text className={textClasses.sectionTitle} classNames={textClasses}>
 						Applications
 					</Text>
@@ -63,7 +59,7 @@ function Applications({ contentType }: { contentType: string[] }) {
 							gridTemplateRows: '64px',
 						}}
 					>
-						{applicationData
+						{applications
 							?.filter(
 								(application: Application) =>
 									contentType.includes(application.filterName) ||

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

@@ -1,9 +1,12 @@
 import { Stack, Text } from '@mantine/core';
 import { textClasses } from 'styles';
 import type { Bookmark } from 'types';
-import LinkItem from './LinkItem';
+import BookmarkItem from './BookmarkItem';
 
-function LinkGroups({ links, category }: { links: Bookmark[]; category: string }) {
+function BookmarkGroups({
+	bookmarks,
+	category,
+}: { bookmarks: Bookmark[]; category: string }) {
 	return (
 		<Stack
 			style={{
@@ -14,16 +17,16 @@ function LinkGroups({ links, category }: { links: Bookmark[]; category: string }
 				whiteSpace: 'nowrap',
 			}}
 		>
-			<Text className={textClasses.linkCategory} classNames={textClasses}>
+			<Text className={textClasses.bookmarkCategory} classNames={textClasses}>
 				{category}
 			</Text>
-			{links
+			{bookmarks
 				?.toSorted((a: Bookmark, b: Bookmark) => (a.index > b.index ? 1 : -1))
-				.map((link: Bookmark) => (
+				.map((bookmark: Bookmark) => (
-					<LinkItem key={link.name} link={link} />
+					<BookmarkItem key={bookmark.name} bookmark={bookmark} />
 				))}
 		</Stack>
 	);
 }
 
-export default LinkGroups;
+export default BookmarkGroups;

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

@@ -2,17 +2,17 @@ import { Text } from '@mantine/core';
 import { textClasses } from 'styles';
 import type { Bookmark } from 'types';
 
-function LinkItem({ link }: { link: Bookmark }) {
+function BookmarkItem({ bookmark }: { bookmark: Bookmark }) {
 	return (
 		<Text
-			className={textClasses.linkItem}
+			className={textClasses.bookmarkItem}
 			classNames={textClasses}
 			component='a'
-			href={link.url}
+			href={bookmark.url}
 		>
-			{link.name}
+			{bookmark.name}
 		</Text>
 	);
 }
 
-export default LinkItem;
+export default BookmarkItem;

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

@@ -3,24 +3,24 @@ import { useCommonHooks, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 import type { Bookmark, BookmarkGroup } from 'types';
-import LinkGroups from './LinkGroups';
+import BookmarkGroups from './BookmarkGroups';
 
-function Links({ contentType }: { contentType: string[] }) {
+function Bookmarks({ contentType }: { contentType: string[] }) {
-	const { data: linkData, isFetched: linksIsFetched } = useQueryAPI({
+	const { data: bookmarkData, isFetched: bookmarksIsFetched } = useQueryAPI({
-		endpoint: 'api/links',
+		endpoint: 'api/bookmarks',
 	});
 	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
-		endpoint: 'api/categories',
+		endpoint: 'api/bookmarkCategories',
 	});
 	const { isMobile, bookmarkSort, bookmarkDensity } = useCommonHooks();
-	const [bookmarkData, setBookmarkData] = useState<Bookmark[]>([]);
+	const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
 	const [groups, setGroups] = useState<BookmarkGroup[]>([]);
 
 	useEffect(() => {
-		if (linkData && linksIsFetched) {
+		if (bookmarkData && bookmarksIsFetched) {
-			setBookmarkData(linkData);
+			setBookmarks(bookmarkData);
 		}
-	}, [linksIsFetched, linkData]);
+	}, [bookmarksIsFetched, bookmarkData]);
 
 	useEffect(() => {
 		if (groupData && groupsIsFetched) {
@@ -57,10 +57,10 @@ function Links({ contentType }: { contentType: string[] }) {
 	return (
 		<>
 			{groupsIsFetched &&
-				linksIsFetched &&
+				bookmarksIsFetched &&
 				groups?.length > 0 &&
 				contentType.length > 0 && (
-					<Stack id='links' style={{ gap: 0 }}>
+					<Stack style={{ gap: 0 }}>
 						<Text className={textClasses.sectionTitle} classNames={textClasses}>
 							Bookmarks
 						</Text>
@@ -85,10 +85,10 @@ function Links({ contentType }: { contentType: string[] }) {
 
 								.map((category: BookmarkGroup) => {
 									return (
-										<LinkGroups
+										<BookmarkGroups
 											key={category.categoryName}
 											category={category.categoryName}
-											links={bookmarkData.filter(
+											bookmarks={bookmarks.filter(
 												(bookmark: Bookmark) =>
 													bookmark.category === category.categoryName,
 											)}
@@ -102,4 +102,4 @@ function Links({ contentType }: { contentType: string[] }) {
 	);
 }
 
-export default Links;
+export default Bookmarks;

src/pages/homepage/components/Header/Header.tsx

@@ -30,7 +30,6 @@ function Header({
 			setTime(newDate);
 		}, 1000);
 	}, []);
-
 	useEffect(() => {
 		if (weather !== undefined && basicWeather !== undefined) {
 			setCurrent({
@@ -92,7 +91,7 @@ function Header({
 					fz={isMobile ? 24 : undefined}
 				>
 					{greet
-						.replace('$firstName', currentUser.firstName)
+						?.replace('$firstName', currentUser.firstName)
 						.replace('$lastName', currentUser.lastName)
 						.replace('$^firstName', currentUser.firstName.toUpperCase())
 						.replace('$^lastName', currentUser.lastName.toUpperCase())}

src/pages/homepage/components/Search/Search.tsx

@@ -33,16 +33,17 @@ export default function Search({
 	closeWeatherModal: () => void;
 	openWeatherModal: () => void;
 }) {
-	const { data: providers, isFetched: providersIsFetched } = useQueryAPI({
+	const { data: providerData, isFetched: providerDataIsFetched } = useQueryAPI({
 		endpoint: 'api/providers',
 	});
-	const [providerData, setProviderData] = useState<Provider[]>([]);
+	const [providers, setProviders] = useState<Provider[]>([]);
-	const { data: apps, isFetching: isAppsFetching } = useQueryAPI({
+	const { data: applicationData, isFetching: isApplicationDataFetching } = useQueryAPI({
-		endpoint: 'api/apps',
+		endpoint: 'api/enabledApplications',
 	});
-	const [applicationData, setApplicationData] = useState<Application[]>([]);
+	const [applications, setApplications] = useState<Application[]>([]);
-	const { data: history, isFetched: historyIsFetched } = useQueryAPI({
+	const searchEndpoint = 'api/searchHistory';
-		endpoint: 'api/searchHistory',
+	const { data: historyData, isFetched: historyDataIsFetched } = useQueryAPI({
+		endpoint: searchEndpoint,
 	});
 	const [searchHistory, setSearchHistory] = useState<SearchHistoryItem[]>([]);
 	const [filteredHistory, setFilteredHistory] = useState<SearchHistoryItem[]>([]);
@@ -69,7 +70,7 @@ export default function Search({
 
 	const handleSearchHistoryItem = ({ option }: { option: SearchHistoryItem }) => {
 		const url =
-			providers.find((provider: Provider) => provider.prefix === option.prefix)?.url ??
+			providerData.find((provider: Provider) => provider.prefix === option.prefix)?.url ??
 			'https://www.google.com/search?q=';
 		open(`${url}${option.searchTerm}`, '_self');
 	};
@@ -99,7 +100,7 @@ export default function Search({
 			} else if (item.target.value.startsWith('/')) {
 				mutateAsync({
 					method: 'POST',
-					endpoint: 'api/searchHistory',
+					endpoint: searchEndpoint,
 					body: { prefix: providerPrefix, provider: providerLabel, searchTerm: subtext },
 				}).then(() => {
 					open(`${providerURL}${subtext}`, '_self');
@@ -107,7 +108,7 @@ export default function Search({
 			} else if (providerLabel === 'Show weather') {
 				openWeatherModal();
 			} else if (providerLabel.startsWith('Launch')) {
-				const url = applicationData.find(
+				const url = applications.find(
 					(app: Application) =>
 						app.baseUrl.substring(1).toLowerCase() === item.target.value.substr(1),
 				)?.url;
@@ -123,7 +124,7 @@ export default function Search({
 			} else {
 				mutateAsync({
 					method: 'POST',
-					endpoint: 'api/searchHistory',
+					endpoint: searchEndpoint,
 					body: { prefix: providerPrefix, provider: providerLabel, searchTerm: subtext },
 				}).then(() => {
 					open(`${providerURL}${subtext}`, '_self');
@@ -221,7 +222,7 @@ export default function Search({
 			setProviderURL('https://www.google.com/search?q=');
 			setProviderPrefix('/g');
 		} else if (item.target.value.startsWith('/')) {
-			const provider = providerData?.find(
+			const provider = providers?.find(
 				(p: Provider) => p.prefix === item.target.value.split(' ')[0],
 			);
 			setProviderLabel(provider?.name ?? 'Invalid Search');
@@ -231,7 +232,7 @@ export default function Search({
 			if (item.target.value === '!w' || item.target.value === '!weather') {
 				setProviderLabel('Show weather');
 			} else if (
-				applicationData?.find(
+				applications?.find(
 					(app: Application) =>
 						app.baseUrl.substring(1).toLowerCase() === item.target.value.substr(1),
 				)
@@ -250,7 +251,7 @@ export default function Search({
 	const optionsFilter: OptionsFilter = ({ options, search }) => {
 		const splittedSearch = search.toLowerCase().trim().split(' ');
 		if (splittedSearch[0].startsWith('!')) {
-			return apps
+			return applicationData
 				.filter((app: Application) =>
 					app.name.toLowerCase().includes(splittedSearch[0].substring(1).toLowerCase()),
 				)
@@ -341,7 +342,7 @@ export default function Search({
 								e.stopPropagation();
 								mutateAsync({
 									method: 'DELETE',
-									endpoint: 'api/searchHistory',
+									endpoint: searchEndpoint,
 									body: { id: item.option.id },
 								});
 							}}
@@ -392,25 +393,25 @@ export default function Search({
 	}
 
 	useEffect(() => {
-		if (providers && providersIsFetched) {
+		if (providerData && providerDataIsFetched) {
-			setProviderData(providers);
+			setProviders(providerData);
 		}
-	}, [providers, providersIsFetched]);
+	}, [providerData, providerDataIsFetched]);
 
 	useEffect(() => {
-		if (apps && !isAppsFetching) {
+		if (applicationData && !isApplicationDataFetching) {
-			setApplicationData(apps);
+			setApplications(applicationData);
 		}
-	}, [apps, isAppsFetching]);
+	}, [applicationData, isApplicationDataFetching]);
 
 	useEffect(() => {
-		if (history && historyIsFetched) {
+		if (historyData && historyDataIsFetched) {
-			setSearchHistory(history);
+			setSearchHistory(historyData);
 			if (filteredHistory.length === 0) {
-				setFilteredHistory(history.slice(0, 10));
+				setFilteredHistory(historyData.slice(0, 10));
 			}
 		}
-	}, [history, historyIsFetched]);
+	}, [historyData, historyDataIsFetched]);
 
 	useEffect(() => {
 		if (dropdownOpened) {
@@ -494,8 +495,8 @@ export default function Search({
 				setSearchValue={setSearchValue}
 				setProviderLabel={setProviderLabel}
 				setProviderURL={setProviderURL}
-				applicationData={applicationData}
+				applicationData={applications}
-				providerData={providerData}
+				providerData={providers}
 				providerModalOpened={providerModalOpened}
 				closeProviderModal={closeProviderModal}
 			/>

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

@@ -31,21 +31,23 @@ import {
 import type { AppCategory, Theme, ThemePlaylist, WolClient } from 'types';
 
 function SettingsButton() {
-	const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
+	const { data: appCategoryData, isFetched: appCategoryDataIsFetched } = useQueryAPI({
-	const { data: wolClients, isFetched: wolClientsIsFetched } = useQueryAPI({
+		endpoint: 'api/appCategories',
+	});
+	const { data: wolClientData, isFetched: wolClientDataIsFetched } = useQueryAPI({
 		endpoint: 'api/wolClients',
 	});
-	const [wolClientsData, setWolClientsData] = useState<WolClient[]>([]);
+	const [wolClients, setWolClients] = useState<WolClient[]>([]);
-	const { data: allThemes, isFetched: isAllThemesFetched } = useQueryAPI({
+	const { data: allThemeData, isFetched: allThemeDataIsFetched } = useQueryAPI({
 		endpoint: 'api/themes',
 	});
-	const { data: themePlaylists } = useQueryAPI({
+	const { data: themePlaylistData } = useQueryAPI({
 		endpoint: 'api/themePlaylists',
 	});
 	const { mutateAsync } = useMutationAPI();
-	const [allThemeData, setAllThemeData] = useState<Theme[]>([]);
+	const [allThemes, setAllThemes] = useState<Theme[]>([]);
 	const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
-	const [selectedClient, setSelectedClient] = useState<WolClient>(wolClients?.[0]);
+	const [selectedClient] = useState<WolClient>(wolClientData?.[0]);
 	const [overlayOpened, setOverlayOpened] = useState(false);
 	const navigate = useNavigate();
 	const notify = (notification: any) => toast(notification, { position: 'bottom-right' });
@@ -75,7 +77,7 @@ function SettingsButton() {
 		mutateAsync({
 			method: 'POST',
 			endpoint: 'api/wakeClient',
-			body: selectedClient || wolClients?.[0],
+			body: selectedClient || wolClientData?.[0],
 		});
 	};
 
@@ -86,26 +88,26 @@ function SettingsButton() {
 	};
 
 	useEffect(() => {
-		if (data) {
+		if (appCategoryData) {
-			const list: [any] = data.map((category: AppCategory) => {
+			const list: [any] = appCategoryData.map((category: AppCategory) => {
 				return { value: category.filterName, label: category.filterName };
 			});
 			list.unshift({ value: 'All', label: 'All' });
 			setCategories(list);
 		}
-	}, [data, isFetched]);
+	}, [appCategoryData, appCategoryDataIsFetched]);
 
 	useEffect(() => {
-		if (wolClients && wolClientsIsFetched) {
+		if (wolClientData && wolClientDataIsFetched) {
-			setWolClientsData(wolClients);
+			setWolClients(wolClientData);
 		}
-	}, [wolClients, wolClientsIsFetched]);
+	}, [wolClientData, wolClientDataIsFetched]);
 
 	useEffect(() => {
-		if (allThemes && isAllThemesFetched) {
+		if (allThemeData && allThemeDataIsFetched) {
-			setAllThemeData(allThemes);
+			setAllThemes(allThemeData);
 		}
-	}, [allThemes, isAllThemesFetched]);
+	}, [allThemeData, allThemeDataIsFetched]);
 	return (
 		<>
 			{overlayOpened && <Overlay pos={'fixed'} />}
@@ -146,7 +148,7 @@ function SettingsButton() {
 								<Button
 									classNames={buttonClasses}
 									className={buttonClasses.wakeButton}
-									disabled={!wolClientsData?.length || selectedClient === null}
+									disabled={!wolClients?.length || selectedClient === null}
 									onClick={() => {
 										handleWakeRequest();
 										notify('Wake command sent');
@@ -159,9 +161,9 @@ function SettingsButton() {
 								<Select
 									labelProps={{ display: 'none' }}
 									placeholder='Pick a host...'
-									defaultValue={wolClientsData?.[0]?.hostname}
+									defaultValue={wolClients?.[0]?.hostname}
 									data={
-										wolClientsData
+										wolClients
 											?.map((wolClient: WolClient) => {
 												return {
 													value: wolClient.hostname,
@@ -227,7 +229,7 @@ function SettingsButton() {
 											}}
 											onClick={() => {
 												setCurrentThemePlaylist('All');
-												handleThemeChange(allThemeData, true);
+												handleThemeChange(allThemes, true);
 											}}
 										>
 											<FaDice />
@@ -246,7 +248,7 @@ function SettingsButton() {
 									placeholder='Pick a playlist...'
 									value={currentThemePlaylist}
 									data={
-										themePlaylists
+										themePlaylistData
 											?.map((playlist: ThemePlaylist) => {
 												return {
 													value: playlist.name,
@@ -271,12 +273,12 @@ function SettingsButton() {
 											setThemeName('random');
 										} else {
 											const themeList = JSON.parse(
-												themePlaylists.find(
+												themePlaylistData.find(
 													(t: ThemePlaylist) => t.name === 'Time of Day',
 												).themeList,
 											);
 											setThemeName(
-												allThemes.find(
+												allThemeData.find(
 													(t: Theme) =>
 														t.id ===
 														Number(themeList[Math.floor(new Date().getHours() / 6)]),

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

@@ -40,12 +40,12 @@ const ApplicationSettings = () => {
 		index: 0,
 		enabled: 1,
 	};
-	const appsEndpoint = 'api/apps';
+	const appsEndpoint = 'api/applications';
 	const appsOrderEndpoint = 'api/applicationOrder';
-	const { data: apps, isFetching: isAppsFetching } = useQueryAPI({
+	const { data: applicationData, isFetching: isAppsFetching } = useQueryAPI({
 		endpoint: appsEndpoint,
 	});
-	const [applicationData, setApplicationData] = useState<Application[]>([]);
+	const [applications, setApplications] = useState<Application[]>([]);
 	const [applicationList, setApplicationList] = useState<Application[]>([]);
 	const { theme, isMobile, reorder } = useCommonHooks();
 	const [newApplication, setNewApplication] = useState<Application>(defaultApplication);
@@ -64,7 +64,7 @@ const ApplicationSettings = () => {
 			return;
 		}
 
-		const items = reorder(applicationData, result.source.index, result.destination.index);
+		const items = reorder(applications, result.source.index, result.destination.index);
 		setApplicationList(
 			items.map((item: any, index: number) => {
 				return {
@@ -83,19 +83,19 @@ const ApplicationSettings = () => {
 	};
 
 	useEffect(() => {
-		if (apps && !isAppsFetching) {
+		if (applicationData && !isAppsFetching) {
-			setApplicationData(
+			setApplications(
-				apps
+				applicationData
 					.filter((a: Application) =>
 						a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
 					)
 					.sort((a: Application, b: Application) => (a.index > b.index ? 1 : -1)),
 			);
 		}
-	}, [apps, isAppsFetching, debouncedSearch]);
+	}, [applicationData, isAppsFetching, debouncedSearch]);
 
 	useEffect(() => {
-		if (applicationList.length > 0 && applicationList !== applicationData) {
+		if (applicationList.length > 0 && applicationList !== applications) {
 			mutateAsync({
 				method: 'PATCH',
 				endpoint: appsOrderEndpoint,
@@ -229,7 +229,7 @@ const ApplicationSettings = () => {
 											endpoint: appsEndpoint,
 											body: {
 												...newApplication,
-												index: applicationData.length,
+												index: applications.length,
 											},
 										}).then(handleClose);
 									}
@@ -253,10 +253,11 @@ const ApplicationSettings = () => {
 				openModal={openModal}
 				title={'Applications'}
 				tooltip={{
-					title: 'Applications are the apps that will be displayed on the homepage.',
+					title:
+						'Applications are the applicationData that will be displayed on the homepage.',
 					highlightList: [
 						'Applications',
-						'apps',
+						'applicationData',
 						'application',
 						'name',
 						'base url',
@@ -288,7 +289,7 @@ const ApplicationSettings = () => {
 									ref={provided.innerRef}
 									{...provided.droppableProps}
 								>
-									{applicationData?.map((app: Application) => (
+									{applications?.map((app: Application) => (
 										<Draggable
 											key={app.id}
 											draggableId={`${app.id}`}
@@ -361,7 +362,7 @@ const ApplicationSettings = () => {
 					align='center'
 				>
 					<Grid columns={18} w={'75%'}>
-						{applicationData?.map((application: Application) => (
+						{applications?.map((application: Application) => (
 							<GridCol span={6} key={application.id}>
 								<Popover
 									withArrow

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

@@ -1,6 +1,5 @@
 import {
 	ActionIcon,
-	Button,
 	Card,
 	type ComboboxItem,
 	type ComboboxLikeRenderOptionInput,
@@ -38,7 +37,7 @@ function DebouncedApplication({
 	};
 	useEffect(() => {
 		if (debounced && Object.keys(debounced).length > 0) {
-			mutateAsync({ method: 'PATCH', endpoint: 'api/apps', body: debounced });
+			mutateAsync({ method: 'PATCH', endpoint: 'api/applications', body: debounced });
 		}
 	}, [debounced]);
 
@@ -52,6 +51,7 @@ function DebouncedApplication({
 			<DeleteItemModal
 				modalOpened={modalOpened}
 				handleClose={handleClose}
+				handleDelete={() => handleDelete(app, 'api/applications')}
 				title='Delete Application'
 				body={
 					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
@@ -68,25 +68,6 @@ function DebouncedApplication({
 							}}
 						>{`"${app.name}"`}</Text>
 						<Text c='red'>This action cannot be undone!</Text>
-						<Group pos={'absolute'} bottom={8}>
-							<Button
-								color={'red'}
-								styles={{ label: { color: 'black' } }}
-								onClick={() => {
-									handleDelete(app, 'api/apps');
-									handleClose();
-								}}
-							>
-								Delete
-							</Button>
-							<Button
-								color={'grey'}
-								styles={{ label: { color: 'black' } }}
-								onClick={handleClose}
-							>
-								Cancel
-							</Button>
-						</Group>
 					</Stack>
 				}
 			/>

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

@@ -15,12 +15,12 @@ const BookmarkSettings = () => {
 		categoryIndex: 0,
 		filterName: '',
 	};
-	const linksEndpoint = 'api/links';
+	const bookmarksEndpoint = 'api/bookmarks';
-	const { data: linkData, isFetched: linksIsFetched } = useQueryAPI({
+	const { data: bookmarkData, isFetched: bookmarksIsFetched } = useQueryAPI({
-		endpoint: linksEndpoint,
+		endpoint: bookmarksEndpoint,
 	});
 	const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
-	const categoriesEndpoint = 'api/categories';
+	const categoriesEndpoint = 'api/bookmarkCategories';
 	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
 		endpoint: categoriesEndpoint,
 	});
@@ -60,10 +60,10 @@ const BookmarkSettings = () => {
 	}
 
 	useEffect(() => {
-		if (linkData && linksIsFetched) {
+		if (bookmarkData && bookmarksIsFetched) {
-			setBookmarks(linkData);
+			setBookmarks(bookmarkData);
 		}
-	}, [linksIsFetched, linkData]);
+	}, [bookmarksIsFetched, bookmarkData]);
 
 	useEffect(() => {
 		if (groupData && groupsIsFetched) {
@@ -98,7 +98,11 @@ const BookmarkSettings = () => {
 
 	useEffect(() => {
 		if (groupList.length > 0 && groupList !== groups) {
-			mutateAsync({ method: 'PATCH', endpoint: 'api/categoryOrder', body: groupList });
+			mutateAsync({
+				method: 'PATCH',
+				endpoint: 'api/bookmarkCategoryOrder',
+				body: groupList,
+			});
 		}
 	}, [groupList]);
 

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

@@ -1,13 +1,4 @@
-import {
+import { ActionIcon, Card, Group, Stack, Text, TextInput, Tooltip } from '@mantine/core';
-	ActionIcon,
-	Button,
-	Card,
-	Group,
-	Stack,
-	Text,
-	TextInput,
-	Tooltip,
-} from '@mantine/core';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
@@ -33,7 +24,7 @@ function DebouncedBookmarkItem({
 	};
 	useEffect(() => {
 		if (Object.keys(debounced).length) {
-			mutateAsync({ method: 'PATCH', endpoint: 'api/links', body: debounced });
+			mutateAsync({ method: 'PATCH', endpoint: 'api/bookmarks', body: debounced });
 		}
 	}, [debounced]);
 
@@ -48,6 +39,7 @@ function DebouncedBookmarkItem({
 			<DeleteItemModal
 				modalOpened={modalOpened}
 				handleClose={handleClose}
+				handleDelete={() => handleDelete(bookmark, 'api/bookmarks')}
 				body={
 					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
 						<Text>Are you sure you want to delete this bookmark?</Text>
@@ -63,25 +55,6 @@ function DebouncedBookmarkItem({
 							}}
 						>{`"${bookmark.name}"`}</Text>
 						<Text c='red'>This action cannot be undone!</Text>
-						<Group pos={'absolute'} bottom={8}>
-							<Button
-								color={'red'}
-								styles={{ label: { color: 'black' } }}
-								onClick={() => {
-									handleDelete(bookmark, 'api/links');
-									handleClose();
-								}}
-							>
-								Delete
-							</Button>
-							<Button
-								color={'grey'}
-								styles={{ label: { color: 'black' } }}
-								onClick={handleClose}
-							>
-								Cancel
-							</Button>
-						</Group>
 					</Stack>
 				}
 				title='Delete Bookmark'

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

@@ -72,7 +72,11 @@ function DebouncedGroupSettingsItem({
 
 	useEffect(() => {
 		if (Object.keys(debounced).length) {
-			mutateAsync({ method: 'PATCH', endpoint: 'api/categories', body: debounced });
+			mutateAsync({
+				method: 'PATCH',
+				endpoint: 'api/bookmarkCategories',
+				body: debounced,
+			});
 			setUpdate({});
 		}
 	}, [debounced]);
@@ -85,7 +89,7 @@ function DebouncedGroupSettingsItem({
 
 	useEffect(() => {
 		if (bookmarkList && bookmarkList !== bookmarks) {
-			mutateAsync({ method: 'PATCH', endpoint: 'api/linkOrder', body: bookmarkList });
+			mutateAsync({ method: 'PATCH', endpoint: 'api/bookmarkOrder', body: bookmarkList });
 		}
 	}, [bookmarkList]);
 
@@ -94,6 +98,10 @@ function DebouncedGroupSettingsItem({
 			<DeleteItemModal
 				modalOpened={modalOpened}
 				handleClose={closeModal}
+				handleDelete={() => {
+					handleDelete(bookmarks, 'api/bookmarks');
+					handleDelete(group, 'api/bookmarkCategories');
+				}}
 				title='Delete message'
 				body={
 					<Stack gap={0} w={'100%'} h={'175px'} align='center'>
@@ -113,28 +121,6 @@ function DebouncedGroupSettingsItem({
 							This will also delete all bookmarks in this group!
 						</Text>
 						<Text c='red'>This action cannot be undone!</Text>
-						<Group pos={'absolute'} bottom={8}>
-							<Button
-								color={'red'}
-								styles={{ label: { color: 'black' } }}
-								onClick={() => {
-									handleDelete(bookmarks, 'api/links');
-									handleDelete(group, 'api/categories');
-									closeModal();
-								}}
-							>
-								Delete
-							</Button>
-							<Button
-								color={'var(--color-text-acc)'}
-								styles={{ label: { color: 'var(--color-text-pri)' } }}
-								onClick={() => {
-									closeModal();
-								}}
-							>
-								Cancel
-							</Button>
-						</Group>
 					</Stack>
 				}
 			/>
@@ -401,7 +387,7 @@ function DebouncedGroupSettingsItem({
 												if (newBookmark) {
 													mutateAsync({
 														method: 'POST',
-														endpoint: 'api/links',
+														endpoint: 'api/bookmarks',
 														body: { ...newBookmark, index: bookmarks.length },
 													});
 													setPopoverOpened(false);

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

@@ -1,13 +1,4 @@
-import {
+import { ActionIcon, Card, Stack, Text, TextInput, Tooltip } from '@mantine/core';
-	ActionIcon,
-	Button,
-	Card,
-	Group,
-	Stack,
-	Text,
-	TextInput,
-	Tooltip,
-} from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { useCommonHooks } from 'hooks';
 import { FiTrash } from 'react-icons/fi';
@@ -31,6 +22,7 @@ function DebouncedMessage({
 			<DeleteItemModal
 				modalOpened={modalOpened}
 				handleClose={closeModal}
+				handleDelete={() => handleDelete(message, 'api/messages')}
 				title='Delete message'
 				body={
 					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
@@ -47,25 +39,6 @@ function DebouncedMessage({
 							}}
 						>{`"${message.message}"`}</Text>
 						<Text c='red'>This action cannot be undone!</Text>
-						<Group pos={'absolute'} bottom={8}>
-							<Button
-								color={'red'}
-								styles={{ label: { color: 'black' } }}
-								onClick={() => {
-									handleDelete(message, 'api/messages');
-									closeModal();
-								}}
-							>
-								Delete
-							</Button>
-							<Button
-								color={'grey'}
-								styles={{ label: { color: 'black' } }}
-								onClick={closeModal}
-							>
-								Cancel
-							</Button>
-						</Group>
 					</Stack>
 				}
 			/>

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

@@ -1,13 +1,4 @@
-import {
+import { ActionIcon, Card, Group, Stack, Text, TextInput, Tooltip } from '@mantine/core';
-	ActionIcon,
-	Button,
-	Card,
-	Group,
-	Stack,
-	Text,
-	TextInput,
-	Tooltip,
-} from '@mantine/core';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
@@ -53,6 +44,7 @@ function DebouncedSearchProvider({
 			<DeleteItemModal
 				modalOpened={modalOpened}
 				handleClose={handleClose}
+				handleDelete={() => handleDelete(provider, 'api/providers')}
 				title={'Delete Search Provider'}
 				body={
 					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
@@ -69,25 +61,6 @@ function DebouncedSearchProvider({
 							}}
 						>{`"${provider.name}"`}</Text>
 						<Text c='red'>This action cannot be undone!</Text>
-						<Group pos={'absolute'} bottom={8}>
-							<Button
-								color={'red'}
-								styles={{ label: { color: 'black' } }}
-								onClick={() => {
-									handleDelete(provider, 'api/providers');
-									handleClose();
-								}}
-							>
-								Delete
-							</Button>
-							<Button
-								color={'grey'}
-								styles={{ label: { color: 'black' } }}
-								onClick={handleClose}
-							>
-								Cancel
-							</Button>
-						</Group>
 					</Stack>
 				}
 			/>

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

@@ -27,10 +27,10 @@ const SearchProviderSettings = () => {
 		prefix: '',
 	};
 	const endpoint = 'api/providers';
-	const { data: providers, isFetched: providersIsFetched } = useQueryAPI({
+	const { data: providerData, isFetched: providerDataIsFetched } = useQueryAPI({
 		endpoint: endpoint,
 	});
-	const [providerData, setProviderData] = useState<Provider[]>([]);
+	const [providers, setProviders] = useState<Provider[]>([]);
 	const { isMobile } = useCommonHooks();
 	const { mutateAsync } = useMutationAPI();
 	const [newProvider, setNewProvider] = useState<Provider>(defaultProvider);
@@ -45,16 +45,16 @@ const SearchProviderSettings = () => {
 	};
 
 	useEffect(() => {
-		if (providers && providersIsFetched) {
+		if (providerData && providerDataIsFetched) {
-			setProviderData(
+			setProviders(
-				providers
+				providerData
 					.filter((a: Provider) =>
 						a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
 					)
 					.sort((a: Provider, b: Provider) => (a.prefix > b.prefix ? 1 : -1)),
 			);
 		}
-	}, [providers, providersIsFetched, debouncedSearch]);
+	}, [providerData, providerDataIsFetched, debouncedSearch]);
 
 	return (
 		<Stack>
@@ -138,16 +138,16 @@ const SearchProviderSettings = () => {
 			<SettingsHeader
 				setDragging={undefined}
 				openModal={openModal}
-				title={'Search Providers'}
+				title={'Search providerData'}
 				tooltip={{
-					title: 'Search providers and shortcuts can be configured here.',
+					title: 'Search providerData and shortcuts can be configured here.',
-					highlightList: ['Providers', 'search', 'provider', 'prefix'],
+					highlightList: ['providerData', 'search', 'provider', 'prefix'],
 					description:
-						'Providers can be used in the search bar. By starting a search with the prefix, it will be redirected to the url of the provider to complete the search.',
+						'providerData can be used in the search bar. By starting a search with the prefix, it will be redirected to the url of the provider to complete the search.',
 				}}
 				searchValue={searchValue}
 				setSearchValue={setSearchValue}
-				searchPlaceholder={'Search Search Providers...'}
+				searchPlaceholder={'Search Search providerData...'}
 			/>
 			<Stack
 				mt={isMobile ? '9rem' : '6rem'}
@@ -156,7 +156,7 @@ const SearchProviderSettings = () => {
 				align='center'
 			>
 				<Grid columns={18} w={'75%'}>
-					{providerData?.map((provider: Provider) => (
+					{providers?.map((provider: Provider) => (
 						<GridCol span={isMobile ? 18 : 6} key={provider.id}>
 							<Popover
 								withArrow

src/pages/settings/components/Shared/DeleteItemModal.tsx

@@ -1,15 +1,17 @@
-import { Card, Modal } from '@mantine/core';
+import { Button, Card, Group, Modal } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import { cardClasses, modalClasses } from 'styles';
 
 function DeleteItemModal({
 	modalOpened,
 	handleClose,
+	handleDelete,
 	body,
 	title,
 }: {
 	modalOpened: boolean;
 	handleClose: () => void;
+	handleDelete: () => void;
 	body: React.ReactNode;
 	title: string;
 }) {
@@ -36,6 +38,25 @@ function DeleteItemModal({
 				<Modal.Body pb={'2rem'}>
 					<Card className={cardClasses.settingsItem} classNames={cardClasses}>
 						{body}
+						<Group w={'100%'} justify='center' bottom={8}>
+							<Button
+								color={'red'}
+								styles={{ label: { color: 'black' } }}
+								onClick={() => {
+									handleDelete();
+									handleClose();
+								}}
+							>
+								Delete
+							</Button>
+							<Button
+								color={'grey'}
+								styles={{ label: { color: 'white' } }}
+								onClick={handleClose}
+							>
+								Cancel
+							</Button>
+						</Group>
 					</Card>
 				</Modal.Body>
 			</Modal.Content>

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

@@ -46,6 +46,7 @@ function ThemeCard({
 			<DeleteItemModal
 				modalOpened={modalOpened}
 				handleClose={closeModal}
+				handleDelete={() => handleDelete(cardTheme, 'api/themes')}
 				title={'Delete Theme'}
 				body={
 					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
@@ -62,27 +63,6 @@ function ThemeCard({
 							}}
 						>{`"${cardTheme.name}"`}</Text>
 						<Text c='red'>This action cannot be undone!</Text>
-						<Group pos={'absolute'} bottom={8}>
-							<Button
-								color={'red'}
-								styles={{ label: { color: 'black' } }}
-								onClick={() => {
-									handleDelete(cardTheme, 'api/themes');
-									closeModal();
-								}}
-							>
-								Delete
-							</Button>
-							<Button
-								color={'grey'}
-								styles={{ label: { color: 'black' } }}
-								onClick={() => {
-									closeModal();
-								}}
-							>
-								Cancel
-							</Button>
-						</Group>
 					</Stack>
 				}
 			/>

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

@@ -188,7 +188,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
 						}}
 						component='a'
 					>
-						{'Link 1'}
+						{'Bookmark 1'}
 					</Text>
 					<Text
 						style={{
@@ -199,7 +199,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
 						}}
 						component='a'
 					>
-						{'Link 2'}
+						{'Bookmark 2'}
 					</Text>
 				</Stack>
 				<Stack
@@ -235,7 +235,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
 						}}
 						component='a'
 					>
-						{'Link 1'}
+						{'Bookmark 1'}
 					</Text>
 					<Text
 						style={{
@@ -246,7 +246,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
 						}}
 						component='a'
 					>
-						{'Link 2'}
+						{'Bookmark 2'}
 					</Text>
 				</Stack>
 			</Stack>

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

@@ -24,6 +24,7 @@ function ThemePlaylistCard({
 	handleOpen: (cardPlaylist: ThemePlaylist) => void;
 	allThemes: Theme[];
 }) {
+	const themePlaylistEndpoint = 'api/themePlaylists';
 	const [hover, setHover] = useState(false);
 	const { setThemeName, setCurrentThemePlaylist, theme, handleDelete } = useCommonHooks();
 	const syncableLists = ['All', 'Backgrounds', 'No Backgrounds'];
@@ -45,6 +46,7 @@ function ThemePlaylistCard({
 			<DeleteItemModal
 				modalOpened={modalOpened}
 				handleClose={closeModal}
+				handleDelete={() => handleDelete(cardPlaylist, 'api/themePlaylists')}
 				title='Delete Theme Playlist'
 				body={
 					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
@@ -61,27 +63,6 @@ function ThemePlaylistCard({
 							}}
 						>{`"${cardPlaylist.name}"`}</Text>
 						<Text c='red'>This action cannot be undone!</Text>
-						<Group pos={'absolute'} bottom={8}>
-							<Button
-								color={'red'}
-								styles={{ label: { color: 'black' } }}
-								onClick={() => {
-									handleDelete(cardPlaylist, 'api/themePlaylists');
-									closeModal();
-								}}
-							>
-								Delete
-							</Button>
-							<Button
-								color={'grey'}
-								styles={{ label: { color: 'black' } }}
-								onClick={() => {
-									closeModal();
-								}}
-							>
-								Cancel
-							</Button>
-						</Group>
 					</Stack>
 				}
 			/>
@@ -124,7 +105,7 @@ function ThemePlaylistCard({
 						if (cardPlaylist.name === 'All') {
 							mutateAsync({
 								method: 'PATCH',
-								endpoint: 'api/themePlaylists',
+								endpoint: themePlaylistEndpoint,
 								body: {
 									id: cardPlaylist.id,
 									name: 'All',
@@ -135,7 +116,7 @@ function ThemePlaylistCard({
 						if (cardPlaylist.name === 'Backgrounds') {
 							mutateAsync({
 								method: 'PATCH',
-								endpoint: 'api/themePlaylists',
+								endpoint: themePlaylistEndpoint,
 								body: {
 									id: cardPlaylist.id,
 									name: 'Backgrounds',
@@ -152,7 +133,7 @@ function ThemePlaylistCard({
 						if (cardPlaylist.name === 'No Backgrounds') {
 							mutateAsync({
 								method: 'PATCH',
-								endpoint: 'api/themePlaylists',
+								endpoint: themePlaylistEndpoint,
 								body: {
 									id: cardPlaylist.id,
 									name: 'No Backgrounds',

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

@@ -11,11 +11,11 @@ import ThemePlaylistModal from './ThemePlaylistModal';
 
 function ThemePlaylists() {
 	const themesEndpoint = 'api/themes';
-	const { data: allThemes } = useQueryAPI({
+	const { data: allThemeData } = useQueryAPI({
 		endpoint: themesEndpoint,
 	});
 	const themePlaylistsEndpoint = 'api/themePlaylists';
-	const { data: themePlaylists } = useQueryAPI({
+	const { data: themePlaylistData } = useQueryAPI({
 		endpoint: themePlaylistsEndpoint,
 	});
 	const defaultPlaylist = {
@@ -60,7 +60,7 @@ function ThemePlaylists() {
 				defaultPlaylist={defaultPlaylist}
 				setSelectedPlaylist={setSelectedPlaylist}
 				handleSavePlaylist={handleSavePlaylist}
-				allThemes={allThemes}
+				allThemes={allThemeData}
 				createPlaylist={mutateAsync}
 			/>
 			<Stack h={'100%'} w={'100%'}>
@@ -84,7 +84,7 @@ function ThemePlaylists() {
 					</Text>
 				</Group>
 				<Group justify='center' align='center' pos={'relative'}>
-					{themePlaylists
+					{themePlaylistData
 						?.filter((playlist: ThemePlaylist) => playlist.default === 1)
 						?.filter((a: ThemePlaylist) =>
 							a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
@@ -113,7 +113,7 @@ function ThemePlaylists() {
 										<ThemePlaylistCard
 											cardPlaylist={cardPlaylist}
 											handleOpen={handleOpen}
-											allThemes={allThemes}
+											allThemes={allThemeData}
 										/>
 									</Box>
 								</Group>
@@ -131,7 +131,7 @@ function ThemePlaylists() {
 					pos={'relative'}
 					mb={isMobile ? '6rem' : undefined}
 				>
-					{themePlaylists
+					{themePlaylistData
 						?.filter((playlist: ThemePlaylist) => playlist.default === 0)
 						?.filter((a: ThemePlaylist) =>
 							a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
@@ -161,7 +161,7 @@ function ThemePlaylists() {
 										<ThemePlaylistCard
 											cardPlaylist={cardPlaylist}
 											handleOpen={handleOpen}
-											allThemes={allThemes}
+											allThemes={allThemeData}
 										/>
 									</Box>
 								</Group>

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

@@ -13,7 +13,7 @@ import ThemeModal from './ThemeModal';
 function ThemesSettings() {
 	const themesEndpoint = 'api/themes';
 	const backgroundsEndpoint = 'api/backgrounds';
-	const { data: allThemes } = useQueryAPI({
+	const { data: allThemeData } = useQueryAPI({
 		endpoint: 'api/themes',
 	});
 	const { data: backgroundData, isFetched: isBackgroundFetched } = useQueryAPI({
@@ -161,7 +161,7 @@ function ThemesSettings() {
 					}}
 					pos={'absolute'}
 				/>
-				{allThemes
+				{allThemeData
 					?.filter((a: Theme) =>
 						a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
 					)
@@ -191,7 +191,7 @@ function ThemesSettings() {
 								}}
 							>
 								<ThemeCard
-									allThemes={allThemes}
+									allThemes={allThemeData}
 									cardTheme={cardTheme}
 									handleOpen={handleOpen}
 									themePlaylists={themePlaylists}

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

@@ -1,13 +1,4 @@
-import {
+import { ActionIcon, Card, Group, Stack, Text, TextInput, Tooltip } from '@mantine/core';
-	ActionIcon,
-	Button,
-	Card,
-	Group,
-	Stack,
-	Text,
-	TextInput,
-	Tooltip,
-} from '@mantine/core';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
@@ -52,6 +43,7 @@ function DebouncedWolClient({
 			<DeleteItemModal
 				modalOpened={modalOpened}
 				handleClose={handleClose}
+				handleDelete={() => handleDelete(client, 'api/WolClients')}
 				title={'Delete WoL Client'}
 				body={
 					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
@@ -68,25 +60,6 @@ function DebouncedWolClient({
 							}}
 						>{`"${client.hostname}"`}</Text>
 						<Text c='red'>This action cannot be undone!</Text>
-						<Group pos={'absolute'} bottom={8}>
-							<Button
-								color={'red'}
-								styles={{ label: { color: 'black' } }}
-								onClick={() => {
-									handleDelete(client, 'api/WolClients');
-									handleClose();
-								}}
-							>
-								Delete
-							</Button>
-							<Button
-								color={'grey'}
-								styles={{ label: { color: 'black' } }}
-								onClick={handleClose}
-							>
-								Cancel
-							</Button>
-						</Group>
 					</Stack>
 				}
 			/>

src/styles/Text.module.css

@@ -69,7 +69,7 @@
 	}
 }
 
-.linkCategory {
+.bookmarkCategory {
 	&.root {
 		font-size: 14px;
 		font-weight: 400;
@@ -81,7 +81,7 @@
 	}
 }
 
-.linkItem {
+.bookmarkItem {
 	&.root {
 		display: block;
 		font-size: 14px;