Small refactoring

src/components/Columns/SearchHistoryColumns.tsx

@@ -5,7 +5,7 @@ import type { SearchHistoryItem } from 'types';
 
 const columnHelper = createColumnHelper<SearchHistoryItem>();
 export const SearchHistoryColumns = (
-	setSelectedItem: React.Dispatch<React.SetStateAction<any>>,
+	setSelectedItem: React.Dispatch<React.SetStateAction<SearchHistoryItem | undefined>>,
 	deleteItemOpen: () => void,
 	filtersEnabled: boolean,
 	setFiltersEnabled: React.Dispatch<React.SetStateAction<boolean>>,

src/components/HelpModal/HelpModal.tsx

@@ -6,14 +6,14 @@ import HelpSection from './HelpSection';
 
 export function HelpModal({
 	handleResetSearch,
-	providerModalOpened,
+	modalOpened,
 	closeProviderModal,
 	applicationData,
 	providerData,
 	clientData,
 }: {
 	handleResetSearch: () => void;
-	providerModalOpened: boolean;
+	modalOpened: boolean;
 	closeProviderModal: () => void;
 	applicationData: Application[];
 	providerData: Provider[];
@@ -25,7 +25,7 @@ export function HelpModal({
 			size={'60%'}
 			className={modalClasses.helpModal}
 			classNames={modalClasses}
-			opened={providerModalOpened}
+			opened={modalOpened}
 			fullScreen={isMobile}
 			centered
 			onClose={() => {

src/components/index.ts

@@ -1,5 +1,6 @@
 export { AddItemModal } from './AddItemModal';
 export { AppItem } from './Applications/AppItem';
+export { SearchHistoryColumns } from './Columns/SearchHistoryColumns';
 export { DataTable } from './DataTable/DataTable';
 export { DebouncedInput } from './DebouncedInput';
 export { DeleteItemModal } from './DeleteItemModal';

src/pages/homepage/Homepage.tsx

@@ -10,12 +10,14 @@ import type {
 	Message,
 	PersonalData,
 } from 'types';
-import Applications from './components/Applications/Applications';
+import {
-import Bookmarks from './components/Bookmarks/Bookmarks';
+	Applications,
-import Header from './components/Header/Header';
+	Bookmarks,
-import LargeHeader from './components/Header/LargeHeader';
+	Header,
-import Search from './components/Search/Search';
+	LargeHeader,
-import SettingsButton from './components/SettingsButton/SettingsButton';
+	Search,
+	SettingsButton,
+} from './components';
 
 export function Homepage() {
 	const {

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

@@ -4,7 +4,7 @@ import { useCommonHooks, useQueryAPI } from 'hooks';
 import { textClasses } from 'styles';
 import type { Application } from 'types';
 
-function Applications({ contentType }: { contentType: string[] }) {
+export function Applications({ contentType }: { contentType: string[] }) {
 	const { data: applicationData } = useQueryAPI({
 		endpoint: 'api/enabledApplications',
 	});
@@ -76,5 +76,3 @@ function Applications({ contentType }: { contentType: string[] }) {
 		</>
 	);
 }
-
-export default Applications;

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

@@ -4,7 +4,7 @@ import { textClasses } from 'styles';
 import type { Bookmark, BookmarkGroup } from 'types';
 import BookmarkGroups from './BookmarkGroups';
 
-function Bookmarks({ contentType }: { contentType: string[] }) {
+export function Bookmarks({ contentType }: { contentType: string[] }) {
 	const { data: bookmarkData, isFetched: bookmarksIsFetched } = useQueryAPI({
 		endpoint: 'api/bookmarks',
 	});
@@ -95,5 +95,3 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
 		</>
 	);
 }
-
-export default Bookmarks;

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

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 import type { CurrentWeather } from 'types';
 
-function Header({
+export function Header({
 	greet,
 	date,
 	current,
@@ -140,5 +140,3 @@ function Header({
 		</Stack>
 	);
 }
-
-export default Header;

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

@@ -3,7 +3,13 @@ import { useCommonHooks } from 'hooks';
 import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 
-function LargeHeader({ greet, date }: { greet: string | undefined; date: string }) {
+export function LargeHeader({
+	greet,
+	date,
+}: {
+	greet: string | undefined;
+	date: string;
+}) {
 	const [time, setTime] = useState(new Date());
 	const {
 		isMobile,
@@ -79,5 +85,3 @@ function LargeHeader({ greet, date }: { greet: string | undefined; date: string
 		</Stack>
 	);
 }
-
-export default LargeHeader;

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

@@ -30,7 +30,7 @@ import RecommendedBookmarks from './components/RecommendedBookmarks';
 import RecommendedClients from './components/RecommendedClients';
 import RenderItem from './components/RenderItem';
 
-export default function Search({
+export function Search({
 	current,
 	extendedForecast,
 	weatherModalOpened,
@@ -634,14 +634,17 @@ export default function Search({
 					</Card>
 				)}
 			</Stack>
+			{providerModalOpened && (
 				<HelpModal
 					handleResetSearch={handleResetSearch}
 					applicationData={applications}
 					providerData={providers}
 					clientData={guacamoleClients}
-				providerModalOpened={providerModalOpened}
+					modalOpened={providerModalOpened}
 					closeProviderModal={closeProviderModal}
 				/>
+			)}
+			{weatherModalOpened && (
 				<WeatherModal
 					current={current}
 					extendedForecast={extendedForecast}
@@ -649,6 +652,7 @@ export default function Search({
 					handleResetSearch={handleResetSearch}
 					closeWeatherModal={closeWeatherModal}
 				/>
+			)}
 		</>
 	);
 }

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

@@ -9,7 +9,7 @@ import SettingsCard from './SettingsCard';
 import ThemingCard from './ThemingCard';
 import WakeOnLan from './WakeOnLanCard';
 
-function SettingsButton({ openProviderModal }: { openProviderModal: () => void }) {
+export function SettingsButton({ openProviderModal }: { openProviderModal: () => void }) {
 	const { data: appCategoryData } = useQueryAPI({
 		endpoint: 'api/appCategories',
 	});
@@ -171,5 +171,3 @@ function SettingsButton({ openProviderModal }: { openProviderModal: () => void }
 		</Menu>
 	);
 }
-
-export default SettingsButton;

src/pages/homepage/components/index.ts

@@ -0,0 +1,6 @@
+export { Applications } from './Applications/Applications';
+export { Bookmarks } from './Bookmarks/Bookmarks';
+export { Header } from './Header/Header';
+export { LargeHeader } from './Header/LargeHeader';
+export { Search } from './Search/Search';
+export { SettingsButton } from './SettingsButton/SettingsButton';

src/pages/settings/Settings.tsx

@@ -13,16 +13,18 @@ import {
 import { useNavigate, useParams } from 'react-router-dom';
 import { actionIconClasses, scrollAreaClasses, tabClasses, textClasses } from 'styles';
 import type { PersonalData } from 'types';
-import Applications from './components/Applications/Applications';
+import {
-import Bookmarks from './components/Bookmarks/Bookmarks';
+	Applications,
-import GuacamoleClients from './components/GuacamoleClients/GuacamoleClients';
+	Bookmarks,
-import Messages from './components/Messages/Messages';
+	GuacamoleClients,
-import Personalization from './components/Personalization/Personalization';
+	Messages,
-import SearchHistory from './components/Search/SearchHistory';
+	Personalization,
-import SearchProviders from './components/Search/SearchProviders';
+	SearchHistory,
-import { ThemePlaylists } from './components/Theming/ThemePlaylists';
+	SearchProviders,
-import { Themes } from './components/Theming/Themes';
+	ThemePlaylists,
-import WolClients from './components/WoL/WolClients';
+	Themes,
+	WolClients,
+} from './components';
 
 export function Settings() {
 	const endpoint = 'api/personalData';

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

@@ -26,7 +26,7 @@ import { buttonClasses, popoverClasses, selectClasses, textInputClasses } from '
 import type { Application } from 'types';
 import DebouncedApplication from './DebouncedApplication';
 
-const ApplicationSettings = () => {
+export function Applications() {
 	const allIcons: any = { ...fa6, ...vsc, ...si };
 	const defaultApplication: Application = {
 		id: null,
@@ -141,6 +141,7 @@ const ApplicationSettings = () => {
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
 			/>
+			{modalOpened && (
 				<AddItemModal
 					modalOpened={modalOpened}
 					handleClose={handleClose}
@@ -300,6 +301,7 @@ const ApplicationSettings = () => {
 						</form>
 					}
 				/>
+			)}
 			<DragDropContext onDragEnd={onDragEnd}>
 				<Stack
 					mt={isMobile ? '10rem' : '6rem'}
@@ -410,5 +412,4 @@ const ApplicationSettings = () => {
 			</DragDropContext>
 		</Stack>
 	);
-};
+}
-export default ApplicationSettings;

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

@@ -30,7 +30,7 @@ function DebouncedApplication({
 	const { mutateAsync } = useMutationAPI();
 
 	const [app, setApp] = useState<Application>(application);
-	const [update, setUpdate] = useState<any>();
+	const [update, setUpdate] = useState<Application>();
 	const [debounced] = useDebouncedValue(update, 1000);
 	const handleClose = () => {
 		setIsOpen(false);
@@ -53,6 +53,7 @@ function DebouncedApplication({
 			className={cardClasses.settingsItem}
 			classNames={cardClasses}
 		>
+			{modalOpened && (
 				<DeleteItemModal
 					modalOpened={modalOpened}
 					handleClose={handleClose}
@@ -69,6 +70,7 @@ function DebouncedApplication({
 						</Stack>
 					}
 				/>
+			)}
 			<Box
 				style={{
 					position: 'absolute',
@@ -192,7 +194,7 @@ function DebouncedApplication({
 					onChange={(value: string | null) => {
 						setUpdate({
 							...app,
-							icon: value,
+							icon: value as Application['icon'],
 						});
 					}}
 					renderOption={(item: ComboboxLikeRenderOptionInput<ComboboxItem>) => {

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

@@ -18,7 +18,7 @@ import { buttonClasses, textInputClasses } from 'styles';
 import type { Bookmark, BookmarkGroup } from 'types';
 import DebouncedGroupSettingsItem from './DebouncedGroupSettingsItem';
 
-const BookmarkSettings = () => {
+export function Bookmarks() {
 	const defaultGroup = {
 		id: null,
 		categoryName: '',
@@ -68,7 +68,7 @@ const BookmarkSettings = () => {
 				),
 		),
 	];
-	const foundGroups: BookmarkGroup[] = groupData.filter((a: BookmarkGroup) =>
+	const foundGroups: BookmarkGroup[] = groupData?.filter((a: BookmarkGroup) =>
 		a.categoryName.toLowerCase().includes((debouncedGroupSearch as string).toLowerCase()),
 	);
 	const handleClose = () => {
@@ -121,6 +121,7 @@ const BookmarkSettings = () => {
 
 	return (
 		<Stack>
+			{modalOpened && (
 				<AddItemModal
 					modalOpened={modalOpened}
 					handleClose={handleClose}
@@ -194,6 +195,7 @@ const BookmarkSettings = () => {
 						</form>
 					}
 				/>
+			)}
 			<SettingsHeader
 				setDragging={groups.length > 0 ? setDragging : undefined}
 				openModal={openModal}
@@ -337,5 +339,4 @@ const BookmarkSettings = () => {
 			)}
 		</Stack>
 	);
-};
+}
-export default BookmarkSettings;

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

@@ -25,20 +25,20 @@ function DebouncedBookmarkItem({
 			(a: BookmarkGroup, b: BookmarkGroup) =>
 				a.categoryName.toLocaleLowerCase() > b.categoryName.toLocaleLowerCase(),
 		) || [];
-	const [update, setUpdate] = useState<any>({});
+	const [update, setUpdate] = useState<Bookmark>();
 	const [debounced] = useDebouncedValue(update, 1000);
 	const handleClose = () => {
 		setIsOpen(false);
 		closeModal();
 	};
 	useEffect(() => {
-		if (Object.keys(debounced).length) {
+		if (debounced && Object.keys(debounced).length) {
 			mutateAsync({ method: 'PATCH', endpoint: 'api/bookmarks', body: debounced });
 		}
 	}, [debounced]);
 
 	useEffect(() => {
-		if (update !== bookmark && Object.keys(update).length) {
+		if (update && update !== bookmark && Object.keys(update).length) {
 			setBookmark(update);
 		}
 	}, [update]);
@@ -49,6 +49,7 @@ function DebouncedBookmarkItem({
 			className={cardClasses.settingsItem}
 			classNames={cardClasses}
 		>
+			{modalOpened && (
 				<DeleteItemModal
 					modalOpened={modalOpened}
 					handleClose={handleClose}
@@ -65,6 +66,7 @@ function DebouncedBookmarkItem({
 					}
 					title='Delete Bookmark'
 				/>
+			)}
 			<Box
 				style={{
 					position: 'absolute',
@@ -142,7 +144,7 @@ function DebouncedBookmarkItem({
 					onChange={(value: string | null) => {
 						setUpdate({
 							...bookmark,
-							category: value,
+							category: value as BookmarkGroup['categoryName'],
 						});
 					}}
 					searchable

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

@@ -48,7 +48,7 @@ function DebouncedGroupSettingsItem({
 	const [popoverOpened, setPopoverOpened] = useState(false);
 	const { mutateAsync } = useMutationAPI();
 	const [group, setGroup] = useState<BookmarkGroup>(bookmarkGroup);
-	const [update, setUpdate] = useState<any>({});
+	const [update, setUpdate] = useState<BookmarkGroup>();
 	const [debounced] = useDebouncedValue(update, 1000);
 	const [newBookmark, setNewBookmark] = useState<Bookmark>({
 		id: undefined,
@@ -89,18 +89,18 @@ function DebouncedGroupSettingsItem({
 	}
 
 	useEffect(() => {
-		if (Object.keys(debounced).length) {
+		if (debounced && Object.keys(debounced).length) {
 			mutateAsync({
 				method: 'PATCH',
 				endpoint: 'api/bookmarkCategories',
 				body: debounced,
 			});
-			setUpdate({});
+			setUpdate(undefined);
 		}
 	}, [debounced]);
 
 	useEffect(() => {
-		if (update !== group && Object.keys(update).length) {
+		if (update && update !== group && Object.keys(update).length) {
 			setGroup(update);
 		}
 	}, [update]);
@@ -113,6 +113,7 @@ function DebouncedGroupSettingsItem({
 
 	return (
 		<Card w={'400px'} className={cardClasses.settingsItem} classNames={cardClasses}>
+			{modalOpened && (
 				<DeleteItemModal
 					modalOpened={modalOpened}
 					handleClose={closeModal}
@@ -135,6 +136,7 @@ function DebouncedGroupSettingsItem({
 						</Stack>
 					}
 				/>
+			)}
 			<Card.Section
 				p={'1rem'}
 				pt={0}

src/pages/settings/components/GuacamoleClients/DebouncedGuacamoleClient.tsx

@@ -38,7 +38,7 @@ function DebouncedGuacamoleClient({
 	const { mutateAsync } = useMutationAPI();
 	const types: string[] = ['SSH', 'RDP', 'VNC'];
 	const [client, setClient] = useState<GuacamoleClient>(guacamoleClient);
-	const [update, setUpdate] = useState<any>({});
+	const [update, setUpdate] = useState<GuacamoleClient>();
 	const [debounced] = useDebouncedValue(update, 1000);
 	const handleClose = () => {
 		setIsOpen(false);
@@ -46,13 +46,13 @@ function DebouncedGuacamoleClient({
 	};
 
 	useEffect(() => {
-		if (Object.keys(debounced).length) {
+		if (debounced && Object.keys(debounced).length) {
 			mutateAsync({ method: 'PATCH', endpoint: 'api/guacamoleClients', body: debounced });
 		}
 	}, [debounced]);
 
 	useEffect(() => {
-		if (update !== client && Object.keys(update).length) {
+		if (update && update !== client && Object.keys(update).length) {
 			setClient(update);
 		}
 	}, [update]);
@@ -62,6 +62,7 @@ function DebouncedGuacamoleClient({
 			className={cardClasses.settingsItem}
 			classNames={cardClasses}
 		>
+			{modalOpened && (
 				<DeleteItemModal
 					modalOpened={modalOpened}
 					handleClose={handleClose}
@@ -78,6 +79,7 @@ function DebouncedGuacamoleClient({
 						</Stack>
 					}
 				/>
+			)}
 			<Tooltip
 				className={toolTipClasses.default}
 				classNames={toolTipClasses}
@@ -177,7 +179,7 @@ function DebouncedGuacamoleClient({
 					onChange={(value: string | null) => {
 						setUpdate({
 							...guacamoleClient,
-							type: value,
+							type: value as GuacamoleClient['type'],
 						});
 					}}
 					searchable

src/pages/settings/components/GuacamoleClients/GuacamoleClientSettingsItem.tsx

@@ -1,6 +1,5 @@
 import { Card, Stack, Text } from '@mantine/core';
-import { FaDesktop, FaTerminal } from 'react-icons/fa';
+import { FaComputer, FaDesktop, FaTerminal } from 'react-icons/fa6';
-import { FaComputer } from 'react-icons/fa6';
 import { cardClasses } from 'styles';
 import type { GuacamoleClient } from 'types';
 

src/pages/settings/components/GuacamoleClients/GuacamoleClients.tsx

@@ -16,14 +16,13 @@ import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { AddItemModal, NoItemsFound, SettingsHeader } from 'components';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { FaTerminal } from 'react-icons/fa';
+import { FaComputer, FaDesktop, FaTerminal } from 'react-icons/fa6';
-import { FaComputer, FaDesktop } from 'react-icons/fa6';
 import { buttonClasses, popoverClasses, selectClasses, textInputClasses } from 'styles';
 import type { GuacamoleClient } from 'types';
 import DebouncedGuacamoleClient from './DebouncedGuacamoleClient';
 import GuacamoleClientSettingsItem from './GuacamoleClientSettingsItem';
 
-const GuacamoleClients = () => {
+export function GuacamoleClients() {
 	const defaultGuacamoleClient: GuacamoleClient = {
 		id: undefined,
 		clientName: '',
@@ -73,6 +72,7 @@ const GuacamoleClients = () => {
 
 	return (
 		<Stack>
+			{modalOpened && (
 				<AddItemModal
 					modalOpened={modalOpened}
 					handleClose={handleClose}
@@ -194,6 +194,7 @@ const GuacamoleClients = () => {
 						</form>
 					}
 				/>
+			)}
 			<SettingsHeader
 				setDragging={undefined}
 				openModal={openModal}
@@ -267,5 +268,4 @@ const GuacamoleClients = () => {
 			</Stack>
 		</Stack>
 	);
-};
+}
-export default GuacamoleClients;

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

@@ -23,6 +23,7 @@ function DebouncedMessage({
 			w={'100%'}
 			style={{ alignItems: 'center' }}
 		>
+			{modalOpened && (
 				<DeleteItemModal
 					modalOpened={modalOpened}
 					handleClose={closeModal}
@@ -39,6 +40,7 @@ function DebouncedMessage({
 						</Stack>
 					}
 				/>
+			)}
 			<Box
 				style={{
 					position: 'absolute',

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

@@ -16,7 +16,7 @@ import { buttonClasses, textInputClasses } from 'styles';
 import type { Message } from 'types';
 import DebouncedMessage from './DebouncedMessage';
 
-const MessageSettings = () => {
+export function Messages() {
 	const endpoint = 'api/messages';
 	const { data: messageData, isFetching: messageDataIsFetching } = useQueryAPI({
 		endpoint: endpoint,
@@ -83,6 +83,7 @@ const MessageSettings = () => {
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
 			/>
+			{modalOpened && (
 				<AddItemModal
 					modalOpened={modalOpened}
 					handleClose={handleClose}
@@ -137,6 +138,7 @@ const MessageSettings = () => {
 						</form>
 					}
 				/>
+			)}
 			<Stack
 				mt={isMobile ? '10rem' : '6rem'}
 				mb={isMobile ? '6rem' : undefined}
@@ -173,5 +175,4 @@ const MessageSettings = () => {
 			</Stack>
 		</Stack>
 	);
-};
+}
-export default MessageSettings;

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

@@ -16,7 +16,7 @@ import FontPicker from 'react-fontpicker-ts';
 import { cardClasses, switchClasses, textClasses, textInputClasses } from 'styles';
 import type { PersonalData } from 'types';
 
-const PersonalizationSettings = () => {
+export function Personalization() {
 	const endpoint = 'api/personalData';
 	const { data: personalData, isFetching: personalDataIsFetching } = useQueryAPI({
 		endpoint: endpoint,
@@ -27,14 +27,14 @@ const PersonalizationSettings = () => {
 		personal?.enableGuacamole === 1,
 	);
 	const [defaultFont, setDefaultFont] = useState<string>(personal?.defaultFont);
-	const [update, setUpdate] = useState<any>({});
+	const [update, setUpdate] = useState<PersonalData>();
 	const [debounced] = useDebouncedValue(update, 1000);
 	const { mutateAsync } = useMutationAPI();
 	const { isMobile, theme } = useCommonHooks();
 	useEffect(() => {
-		if (Object.keys(debounced).length) {
+		if (debounced && Object.keys(debounced).length) {
 			mutateAsync({ method: 'PATCH', endpoint: endpoint, body: debounced });
-			setUpdate({});
+			setUpdate(undefined);
 		}
 	}, [debounced]);
 
@@ -322,5 +322,4 @@ const PersonalizationSettings = () => {
 			</Stack>
 		</Stack>
 	);
-};
+}
-export default PersonalizationSettings;

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

@@ -30,7 +30,7 @@ function DebouncedSearchProvider({
 	const { mutateAsync } = useMutationAPI();
 
 	const [provider, setProvider] = useState<Provider>(searchProvider);
-	const [update, setUpdate] = useState<any>({});
+	const [update, setUpdate] = useState<Provider>();
 	const [debounced] = useDebouncedValue(update, 1000);
 
 	const handleClose = () => {
@@ -39,13 +39,13 @@ function DebouncedSearchProvider({
 	};
 
 	useEffect(() => {
-		if (Object.keys(debounced).length) {
+		if (debounced && Object.keys(debounced).length) {
 			mutateAsync({ method: 'PATCH', endpoint: 'api/providers', body: debounced });
 		}
 	}, [debounced]);
 
 	useEffect(() => {
-		if (update !== provider && Object.keys(update).length) {
+		if (update && update !== provider && Object.keys(update).length) {
 			setProvider(update);
 		}
 	}, [update]);
@@ -56,6 +56,7 @@ function DebouncedSearchProvider({
 			className={cardClasses.settingsItem}
 			classNames={cardClasses}
 		>
+			{modalOpened && (
 				<DeleteItemModal
 					modalOpened={modalOpened}
 					handleClose={handleClose}
@@ -72,6 +73,7 @@ function DebouncedSearchProvider({
 						</Stack>
 					}
 				/>
+			)}
 			<Box
 				style={{
 					position: 'absolute',

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

@@ -1,13 +1,17 @@
 import { Group, Stack, Text } from '@mantine/core';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
-import { DataTable, DeleteItemModal, SettingsHeader } from 'components';
+import {
-import { SearchHistoryColumns } from 'components/Columns/SearchHistoryColumns';
+	DataTable,
+	DeleteItemModal,
+	SearchHistoryColumns,
+	SettingsHeader,
+} from 'components';
 import { useCommonHooks, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 import type { SearchHistoryItem } from 'types';
 
-const SearchHistory = () => {
+export function SearchHistory() {
 	const searchEndpoint = 'api/searchHistory';
 	const { data: historyData, isFetching: historyDataIsFetching } = useQueryAPI({
 		endpoint: searchEndpoint,
@@ -41,6 +45,7 @@ const SearchHistory = () => {
 
 	return (
 		<Stack w={'100%'}>
+			{modalOpened && (
 				<DeleteItemModal
 					modalOpened={modalOpened}
 					handleClose={handleClose}
@@ -63,6 +68,7 @@ const SearchHistory = () => {
 						</Stack>
 					}
 				/>
+			)}
 			<SettingsHeader
 				setDragging={undefined}
 				openModal={undefined}
@@ -107,6 +113,4 @@ const SearchHistory = () => {
 			</Stack>
 		</Stack>
 	);
-};
+}
-
-export default SearchHistory;

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

@@ -35,7 +35,7 @@ import type { Provider } from 'types';
 import DebouncedSearchProvider from './DebouncedSearchProvider';
 import SearchProviderSettingsItem from './SearchProviderSettingsItem';
 
-const SearchProviderSettings = () => {
+export function SearchProviders() {
 	const allIcons: any = { ...fa6, ...vsc, ...si };
 	const defaultProvider: Provider = {
 		id: undefined,
@@ -88,6 +88,7 @@ const SearchProviderSettings = () => {
 
 	return (
 		<Stack>
+			{modalOpened && (
 				<AddItemModal
 					modalOpened={modalOpened}
 					handleClose={handleClose}
@@ -117,7 +118,9 @@ const SearchProviderSettings = () => {
 											styles={
 												theme.textShadowsEnabled
 													? {
-														label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+															label: {
+																boxShadow: '2px 2px var(--mantine-color-border-0)',
+															},
 														}
 													: undefined
 											}
@@ -134,7 +137,9 @@ const SearchProviderSettings = () => {
 											styles={
 												theme.textShadowsEnabled
 													? {
-														label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+															label: {
+																boxShadow: '2px 2px var(--mantine-color-border-0)',
+															},
 														}
 													: undefined
 											}
@@ -166,11 +171,15 @@ const SearchProviderSettings = () => {
 											styles={
 												theme.textShadowsEnabled
 													? {
-														label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+															label: {
+																boxShadow: '2px 2px var(--mantine-color-border-0)',
+															},
 														}
 													: undefined
 											}
-										renderOption={(item: ComboboxLikeRenderOptionInput<ComboboxItem>) => {
+											renderOption={(
+												item: ComboboxLikeRenderOptionInput<ComboboxItem>,
+											) => {
 												const Icon = allIcons[item.option.value];
 												return (
 													<Group>
@@ -256,6 +265,7 @@ const SearchProviderSettings = () => {
 						</form>
 					}
 				/>
+			)}
 			<SettingsHeader
 				setDragging={undefined}
 				openModal={openModal}
@@ -333,5 +343,4 @@ const SearchProviderSettings = () => {
 			</Stack>
 		</Stack>
 	);
-};
+}
-export default SearchProviderSettings;

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

@@ -67,6 +67,7 @@ export function ThemePlaylists() {
 
 	return (
 		<Stack>
+			{opened && (
 				<ThemePlaylistModal
 					opened={opened}
 					handleClose={handleClose}
@@ -77,6 +78,7 @@ export function ThemePlaylists() {
 					allThemes={allThemeData}
 					createPlaylist={mutateAsync}
 				/>
+			)}
 			<SettingsHeader
 				setDragging={undefined}
 				openModal={open}

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

@@ -42,6 +42,7 @@ export function ThemePlaylistCard({
 			onMouseEnter={() => setHover(true)}
 			onMouseLeave={() => setHover(false)}
 		>
+			{modalOpened && (
 				<DeleteItemModal
 					modalOpened={modalOpened}
 					handleClose={closeModal}
@@ -58,6 +59,7 @@ export function ThemePlaylistCard({
 						</Stack>
 					}
 				/>
+			)}
 			<Text
 				style={{
 					position: 'absolute',

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

@@ -28,7 +28,6 @@ export function ThemePlaylistModal({
 }) {
 	const { isMobile } = useCommonHooks();
 	const [themeList, setThemeList] = useState<any>([]);
-
 	useEffect(() => {
 		if (selectedPlaylist?.themeList) {
 			setThemeList(JSON.parse(selectedPlaylist?.themeList));
@@ -49,7 +48,7 @@ export function ThemePlaylistModal({
 			centered
 			onClose={() => {
 				handleClose();
-				setThemeList('[]');
+				setThemeList([]);
 			}}
 			keepMounted={false}
 		>

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

@@ -1,8 +1,7 @@
 import { ActionIcon, Group, isLightColor, Stack, Text } from '@mantine/core';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useState } from 'react';
-import { FaTrashAlt } from 'react-icons/fa';
+import { FaPencil, FaTrash } from 'react-icons/fa6';
-import { FaPencil } from 'react-icons/fa6';
 import { FiEdit, FiPower, FiShuffle } from 'react-icons/fi';
 import { actionIconClasses } from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
@@ -238,7 +237,7 @@ export function ThemeManagementPill({
 							onClick={openModal}
 							disabled={cardTheme.name === theme.name}
 						>
-							<FaTrashAlt
+							<FaTrash
 								style={{ padding: '.25rem', filter: 'brightness(1.25)' }}
 								color='Brown'
 							/>

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

@@ -27,7 +27,7 @@ export function NewThemeStarter({
 	setSelectedTheme: (selectedTheme: Theme) => void;
 	setDefaultTheme: (selectedTheme: Theme) => void;
 }) {
-	const [pressed, setPressed] = useState<any>(false);
+	const [pressed, setPressed] = useState<boolean>(false);
 	const handlers = useLongPress(() => {
 		setPressed(true);
 	});

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

@@ -10,8 +10,7 @@ import {
 } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import { useCommonHooks } from 'hooks';
-import { FaClipboard } from 'react-icons/fa';
+import { FaClipboard, FaX } from 'react-icons/fa6';
-import { FiX } from 'react-icons/fi';
 import { scrollAreaClasses, toolTipClasses } from 'styles';
 import { type Theme, ThemeProperties } from 'types';
 
@@ -104,7 +103,7 @@ export default function ThemeChanges({
 													pos={'absolute'}
 													right={0}
 												>
-													<FiX />
+													<FaX />
 												</ActionIcon>
 											</Tooltip>
 										</Group>

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

@@ -1,55 +0,0 @@
-import { Box, Stack, Text } from '@mantine/core';
-import { useState } from 'react';
-import { FiCheck } from 'react-icons/fi';
-import { boxClasses, textClasses } from 'styles';
-import type { Theme } from 'types';
-
-export function ThemeExampleApp({ selectedTheme }: { selectedTheme: Theme }) {
-	const [textDecoration, setTextDecoration] = useState<string>('none');
-
-	return (
-		<Box
-			component='a'
-			onMouseOver={() => setTextDecoration('underline')}
-			onMouseOut={() => setTextDecoration('none')}
-			className={boxClasses.appItemBox}
-			h={'64px'}
-		>
-			<Stack
-				style={{
-					marginRight: '1rem',
-					marginLeft: '1rem',
-				}}
-				justify='center'
-			>
-				<FiCheck style={{ color: selectedTheme?.primaryColor }} />
-			</Stack>
-			<Stack
-				style={{
-					justifyContent: 'center',
-					overflow: 'hidden',
-					textOverflow: 'ellipsis',
-					gap: 0,
-				}}
-			>
-				<Text
-					c={selectedTheme?.primaryColor}
-					className={textClasses.appName}
-					classNames={textClasses}
-				>
-					{'Example App'}
-				</Text>
-				<Text
-					c={selectedTheme?.accentColor}
-					className={textClasses.appUrl}
-					classNames={textClasses}
-					style={{
-						textDecoration: textDecoration,
-					}}
-				>
-					{'https://www.example.com'}
-				</Text>
-			</Stack>
-		</Box>
-	);
-}

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

@@ -11,9 +11,7 @@ import {
 } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import FontPicker from 'react-fontpicker-ts';
-import { FaFont, FaGoogle } from 'react-icons/fa';
+import { FaFont, FaGoogle, FaShuffle, FaX } from 'react-icons/fa6';
-import { FaShuffle } from 'react-icons/fa6';
-import { FiX } from 'react-icons/fi';
 import { textClasses, toolTipClasses } from 'styles';
 import type { Theme } from 'types';
 import ThemeChanges from './ThemeChanges';
@@ -192,7 +190,7 @@ export default function ThemeOptions({
 								borderRadius: '0px',
 							}}
 						>
-							<FiX />
+							<FaX />
 						</ActionIcon>
 					</Tooltip>
 				</Group>

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

@@ -17,7 +17,7 @@ export function ThemePreviewMiddleware({
 	selectedPlaylist: any;
 	setSelectedPlaylist: (selectedPlaylist: any) => void;
 }) {
-	const [pressed, setPressed] = useState<any>(false);
+	const [pressed, setPressed] = useState<boolean>(false);
 	const handlers = useLongPress(() => {
 		setPressed(true);
 	});

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

@@ -3,7 +3,7 @@ import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { DeleteItemModal } from 'components';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { FiTrash } from 'react-icons/fi';
+import { FaTrash } from 'react-icons/fa';
 import { cardClasses, textClasses, textInputClasses, toolTipClasses } from 'styles';
 import type { WolClient } from 'types';
 
@@ -19,7 +19,7 @@ function DebouncedWolClient({
 	const { mutateAsync } = useMutationAPI();
 
 	const [client, setClient] = useState<WolClient>(wolClient);
-	const [update, setUpdate] = useState<any>({});
+	const [update, setUpdate] = useState<WolClient>();
 	const [debounced] = useDebouncedValue(update, 1000);
 	const handleClose = () => {
 		setIsOpen(false);
@@ -27,13 +27,13 @@ function DebouncedWolClient({
 	};
 
 	useEffect(() => {
-		if (Object.keys(debounced).length) {
+		if (debounced && Object.keys(debounced).length) {
 			mutateAsync({ method: 'PATCH', endpoint: 'api/WolClients', body: debounced });
 		}
 	}, [debounced]);
 
 	useEffect(() => {
-		if (update !== client && Object.keys(update).length) {
+		if (update && update !== client && Object.keys(update).length) {
 			setClient(update);
 		}
 	}, [update]);
@@ -44,6 +44,7 @@ function DebouncedWolClient({
 			className={cardClasses.settingsItem}
 			classNames={cardClasses}
 		>
+			{modalOpened && (
 				<DeleteItemModal
 					modalOpened={modalOpened}
 					handleClose={handleClose}
@@ -60,6 +61,7 @@ function DebouncedWolClient({
 						</Stack>
 					}
 				/>
+			)}
 			<Tooltip
 				className={toolTipClasses.default}
 				classNames={toolTipClasses}
@@ -73,7 +75,7 @@ function DebouncedWolClient({
 						openModal();
 					}}
 				>
-					<FiTrash color='black' />
+					<FaTrash color='black' />
 				</ActionIcon>
 			</Tooltip>
 			<Group w={'100%'} justify='center'>

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

@@ -18,7 +18,7 @@ import type { WolClient } from 'types';
 import DebouncedWolClient from './DebouncedWolClient';
 import WolClientSettingsItem from './WolClientSettingsItem';
 
-const WolClientSettings = () => {
+export function WolClients() {
 	const defaultWolClient: WolClient = {
 		id: undefined,
 		hostname: '',
@@ -65,6 +65,7 @@ const WolClientSettings = () => {
 
 	return (
 		<Stack>
+			{modalOpened && (
 				<AddItemModal
 					modalOpened={modalOpened}
 					handleClose={handleClose}
@@ -135,6 +136,7 @@ const WolClientSettings = () => {
 						</form>
 					}
 				/>
+			)}
 			<SettingsHeader
 				setDragging={undefined}
 				openModal={openModal}
@@ -204,5 +206,4 @@ const WolClientSettings = () => {
 			</Stack>
 		</Stack>
 	);
-};
+}
-export default WolClientSettings;

src/pages/settings/components/index.ts

@@ -0,0 +1,10 @@
+export { Applications } from './Applications/Applications';
+export { Bookmarks } from './Bookmarks/Bookmarks';
+export { GuacamoleClients } from './GuacamoleClients/GuacamoleClients';
+export { Messages } from './Messages/Messages';
+export { Personalization } from './Personalization/Personalization';
+export { SearchHistory } from './Search/SearchHistory';
+export { SearchProviders } from './Search/SearchProviders';
+export { ThemePlaylists } from './Theming/ThemePlaylists';
+export { Themes } from './Theming/Themes';
+export { WolClients } from './WoL/WolClients';