State fixes, Tab routing

src/App.tsx

@@ -51,6 +51,10 @@ function App() {
 						path={`/${import.meta.env.VITE_BASE_URL}/settings`}
 						element={<Settings />}
 					/>
+					<Route
+						path={`/${import.meta.env.VITE_BASE_URL}/settings/:tabValue`}
+						element={<Settings />}
+					/>
 				</Route>
 			</Route>,
 		),

src/pages/homepage/components/SettingsButton.tsx

@@ -229,7 +229,7 @@ function SettingsButton() {
 								<Select
 									labelProps={{ display: 'none' }}
 									placeholder='Pick a playlist...'
-									defaultValue={currentThemePlaylist}
+									value={currentThemePlaylist}
 									data={
 										themePlaylists
 											?.map((playlist: any) => {

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'>

src/pages/settings/components/ThemeMiniCard.tsx

@@ -9,13 +9,14 @@ function ThemeMiniCard({ allThemes, item }: any) {
 			justify='center'
 			display={'grid'}
 			pos={'relative'}
-			w={'200px'}
+			w={'175px'}
-			h={'75px'}
+			h={'60px'}
 			style={{
 				background: `linear-gradient(${theme.backgroundColor}33, ${theme.backgroundColor}33), no-repeat center url(/backgrounds/${theme.backgroundImage})`,
 				backgroundSize: 'cover',
 				backgroundColor: theme.backgroundColor,
 				border: `solid ${theme.borderColor}`,
+				borderRadius: '8px',
 			}}
 		>
 			<Text

src/pages/settings/components/ThemePlaylistCard.tsx

@@ -169,10 +169,10 @@ function ThemePlaylistCard({
 			)}
 			<Button
 				w={'275px'}
-				h={'300px'}
+				h={'310px'}
 				style={{
 					backgroundSize: 'cover',
-					backgroundColor: theme.primaryColor,
+					backgroundColor: theme.searchColor,
 					color: theme.accentColor,
 					border: `solid ${theme.borderColor}`,
 				}}
@@ -185,22 +185,32 @@ function ThemePlaylistCard({
 				<Stack h={'100%'} w={'100%'}>
 					{cardPlaylist.name !== 'Time of Day' ? (
 						<>
-							<Text>Count: {themeList.length}</Text>
+							<Text mt={8} mb={-8}>
-							<ScrollArea h={'240px'} w={'100%'} style={{ zIndex: 2 }}>
+								Count: {themeList.length}
+							</Text>
+							<ScrollArea h={'255px'} w={'100%'} style={{ zIndex: 2 }}>
+								<Stack gap={4}>
 									{themeList.length > 0 &&
 										themeList.map((item: any) => {
-										return <ThemeMiniCard key={item} item={item} allThemes={allThemes} />;
+											return (
+												<ThemeMiniCard key={item} item={item} allThemes={allThemes} />
+											);
 										})}
+								</Stack>
 							</ScrollArea>
 						</>
 					) : (
 						<>
-							<Text>Timed Themes</Text>
+							<Text mt={8} mb={-8}>
-							<ScrollArea h={'240px'} w={'100%'} style={{ zIndex: 2 }}>
+								Timed Themes
+							</Text>
+							<ScrollArea h={'255px'} w={'100%'} style={{ zIndex: 2 }}>
+								<Stack gap={4}>
 									<ThemeMiniCard item={Number(themeList[0])} allThemes={allThemes} />
 									<ThemeMiniCard item={Number(themeList[1])} allThemes={allThemes} />
 									<ThemeMiniCard item={Number(themeList[2])} allThemes={allThemes} />
 									<ThemeMiniCard item={Number(themeList[3])} allThemes={allThemes} />
+								</Stack>
 							</ScrollArea>
 						</>
 					)}

src/pages/settings/components/ThemePlaylistModal.tsx

@@ -25,7 +25,6 @@ function ThemePlaylistModal({
 }: any) {
 	const { theme } = useCommonHooks();
 	const [themeList, setThemeList] = useState<any>('[]');
-
 	useEffect(() => {
 		if (selectedPlaylist.themeList) {
 			setThemeList(JSON.parse(selectedPlaylist?.themeList));
@@ -40,6 +39,7 @@ function ThemePlaylistModal({
 			onClose={() => {
 				handleClose();
 				setThemeList('[]');
+				setSelectedPlaylist({});
 			}}
 			style={{
 				'--color-text-pri': theme.primaryColor,
@@ -59,6 +59,7 @@ function ThemePlaylistModal({
 							className={textInputClasses.default}
 							classNames={textInputClasses}
 							value={selectedPlaylist.name}
+							disabled={selectedPlaylist.name === 'Time of Day'}
 							onChange={(e) =>
 								setSelectedPlaylist({ ...selectedPlaylist, name: e.target.value })
 							}
@@ -80,7 +81,7 @@ function ThemePlaylistModal({
 					{selectedPlaylist.name === 'Time of Day' ? (
 						<Stack>
 							<Group>
-								<Text>00:00-05:59</Text>
+								<Text w={'100px'}>00:00-05:59</Text>
 								<Select
 									labelProps={{ display: 'none' }}
 									placeholder='Select Theme'
@@ -113,7 +114,7 @@ function ThemePlaylistModal({
 								/>
 							</Group>
 							<Group w={'100%'}>
-								<Text>06:00-11:59</Text>
+								<Text w={'100px'}>06:00-11:59</Text>
 								<Select
 									labelProps={{ display: 'none' }}
 									placeholder='Select Theme'
@@ -146,7 +147,7 @@ function ThemePlaylistModal({
 								/>
 							</Group>
 							<Group w={'100%'}>
-								<Text>12:00-17:59</Text>
+								<Text w={'100px'}>12:00-17:59</Text>
 								<Select
 									labelProps={{ display: 'none' }}
 									placeholder='Select Theme'
@@ -179,7 +180,7 @@ function ThemePlaylistModal({
 								/>
 							</Group>
 							<Group w={'100%'}>
-								<Text>18:00-23:59</Text>
+								<Text w={'100px'}>18:00-23:59</Text>
 								<Select
 									labelProps={{ display: 'none' }}
 									placeholder='Select Theme'
@@ -228,12 +229,14 @@ function ThemePlaylistModal({
 														: undefined,
 											}}
 											onClick={() => {
+												const newSelectedPlaylist = { ...selectedPlaylist };
 												if (themeList?.includes(miniTheme.id)) {
 													newThemeList.splice(themeList.indexOf(miniTheme.id), 1);
 												} else {
 													newThemeList.push(miniTheme.id);
 												}
-												selectedPlaylist.themeList = JSON.stringify(newThemeList);
+												newSelectedPlaylist.themeList = JSON.stringify(newThemeList);
+												setSelectedPlaylist(newSelectedPlaylist);
 											}}
 										>
 											<ThemeMiniCard allThemes={allThemes} item={miniTheme.id} />
@@ -254,7 +257,11 @@ function ThemePlaylistModal({
 						<Button
 							color={'red'}
 							styles={{ label: { color: 'black' } }}
-							onClick={handleClose}
+							onClick={() => {
+								handleClose();
+								setThemeList('[]');
+								setSelectedPlaylist({});
+							}}
 						>
 							Cancel
 						</Button>

src/pages/settings/components/ThemePlaylists.tsx

@@ -91,7 +91,14 @@ function ThemePlaylists() {
 					</Group>
 				</Group>
 				<Group justify='center' align='center' pos={'relative'}>
-					{themePlaylists?.map((cardPlaylist: any) => {
+					<Text p={0} className={textClasses.settingsSubTitle} classNames={textClasses}>
+						Defaults
+					</Text>
+				</Group>
+				<Group justify='center' align='center' pos={'relative'}>
+					{themePlaylists
+						?.filter((playlist: any) => playlist.default === 1)
+						.map((cardPlaylist: any) => {
 							return (
 								<Group key={cardPlaylist.name} pos={'relative'}>
 									{cardPlaylist.name === currentThemePlaylist && (
@@ -99,7 +106,50 @@ function ThemePlaylists() {
 											style={{
 												position: 'absolute',
 												left: -14,
-											zIndex: 1,
+												zIndex: 10,
+												fontSize: '2em',
+												fontWeight: 'bold',
+												borderRadius: '50%',
+												backgroundColor: theme.borderColor,
+												color:
+													theme.borderColor === theme.primaryColor
+														? theme.accentColor
+														: theme.primaryColor,
+											}}
+										/>
+									)}
+									<Box>
+										<ThemePlaylistCard
+											cardPlaylist={cardPlaylist}
+											handleOpen={handleOpen}
+											currentThemePlaylist={currentThemePlaylist}
+											setCurrentThemePlaylist={setCurrentThemePlaylist}
+											handleDeletePlaylist={handleDeletePlaylist}
+											allThemes={allThemes}
+											createPlaylist={createPlaylist}
+										/>
+									</Box>
+								</Group>
+							);
+						})}
+				</Group>
+				<Group justify='center' align='center' pos={'relative'}>
+					<Text p={0} className={textClasses.settingsSubTitle} classNames={textClasses}>
+						User Made
+					</Text>
+				</Group>
+				<Group justify='center' align='center' pos={'relative'}>
+					{themePlaylists
+						?.filter((playlist: any) => playlist.default === 0)
+						.map((cardPlaylist: any) => {
+							return (
+								<Group key={cardPlaylist.name} pos={'relative'}>
+									{cardPlaylist.name === currentThemePlaylist && (
+										<FiChevronRight
+											style={{
+												position: 'absolute',
+												left: -14,
+												zIndex: 10,
 												fontSize: '2em',
 												fontWeight: 'bold',
 												borderRadius: '50%',