State fixes, Tab routing

src/pages/settings/Settings.tsx

@@ -11,7 +11,7 @@ import {
 	FiSearch,
 	FiUser,
 } from 'react-icons/fi';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { actionIconClasses, tabClasses, textClasses } from 'styles';
 import Applications from './components/Applications';
 import Bookmarks from './components/Bookmarks';
@@ -26,7 +26,7 @@ import WolClients from './components/WolClients';
 export function Settings() {
 	const { isMobile } = useCommonHooks();
 	const navigate = useNavigate();
-
+	const { tabValue } = useParams();
 	return (
 		<Stack px={'2rem'}>
 			<Group gap={0}>
@@ -44,9 +44,14 @@ export function Settings() {
 			</Group>
 			<Tabs
 				orientation={isMobile ? 'horizontal' : 'vertical'}
-				defaultValue={'personalization'}
+				defaultValue={tabValue ?? 'personalization'}
 				className={tabClasses.settingsTabs}
 				classNames={tabClasses}
+				keepMounted={false}
+				value={tabValue}
+				onChange={(value) =>
+					navigate(`/${import.meta.env.VITE_BASE_URL}/settings/${value}`)
+				}
 			>
 				<Tabs.List style={{ justifyContent: isMobile ? 'space-between' : undefined }}>
 					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='personalization'>