From 04e6875be281c511128c392a19b72729d05b1611 Mon Sep 17 00:00:00 2001
From: Sean Edmunds <sean.edmunds@cottonteam.com>
Date: Fri, 14 Mar 2025 12:01:57 -0500
Subject: [PATCH] State fixes, Tab routing

---
 src/App.tsx                                   |   4 +
 .../homepage/components/SettingsButton.tsx    |   2 +-
 src/pages/settings/Settings.tsx               |  11 +-
 .../settings/components/ThemeMiniCard.tsx     |   5 +-
 .../settings/components/ThemePlaylistCard.tsx |  38 +++---
 .../components/ThemePlaylistModal.tsx         |  21 ++--
 .../settings/components/ThemePlaylists.tsx    | 118 +++++++++++++-----
 7 files changed, 138 insertions(+), 61 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 0004f20..487c4ea 100644
--- a/src/App.tsx
+++ b/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>,
 		),
diff --git a/src/pages/homepage/components/SettingsButton.tsx b/src/pages/homepage/components/SettingsButton.tsx
index 6a0689d..b1e3592 100644
--- a/src/pages/homepage/components/SettingsButton.tsx
+++ b/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) => {
diff --git a/src/pages/settings/Settings.tsx b/src/pages/settings/Settings.tsx
index c14f227..86439da 100644
--- a/src/pages/settings/Settings.tsx
+++ b/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'>
diff --git a/src/pages/settings/components/ThemeMiniCard.tsx b/src/pages/settings/components/ThemeMiniCard.tsx
index 51738b4..feb7329 100644
--- a/src/pages/settings/components/ThemeMiniCard.tsx
+++ b/src/pages/settings/components/ThemeMiniCard.tsx
@@ -9,13 +9,14 @@ function ThemeMiniCard({ allThemes, item }: any) {
 			justify='center'
 			display={'grid'}
 			pos={'relative'}
-			w={'200px'}
-			h={'75px'}
+			w={'175px'}
+			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
diff --git a/src/pages/settings/components/ThemePlaylistCard.tsx b/src/pages/settings/components/ThemePlaylistCard.tsx
index b72b9b9..537f27d 100644
--- a/src/pages/settings/components/ThemePlaylistCard.tsx
+++ b/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>
-							<ScrollArea h={'240px'} w={'100%'} style={{ zIndex: 2 }}>
-								{themeList.length > 0 &&
-									themeList.map((item: any) => {
-										return <ThemeMiniCard key={item} item={item} allThemes={allThemes} />;
-									})}
+							<Text mt={8} mb={-8}>
+								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} />
+											);
+										})}
+								</Stack>
 							</ScrollArea>
 						</>
 					) : (
 						<>
-							<Text>Timed Themes</Text>
-							<ScrollArea h={'240px'} w={'100%'} style={{ zIndex: 2 }}>
-								<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} />
+							<Text mt={8} mb={-8}>
+								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>
 						</>
 					)}
diff --git a/src/pages/settings/components/ThemePlaylistModal.tsx b/src/pages/settings/components/ThemePlaylistModal.tsx
index dc06bd4..e5409c7 100644
--- a/src/pages/settings/components/ThemePlaylistModal.tsx
+++ b/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>
diff --git a/src/pages/settings/components/ThemePlaylists.tsx b/src/pages/settings/components/ThemePlaylists.tsx
index db32286..13ba93a 100644
--- a/src/pages/settings/components/ThemePlaylists.tsx
+++ b/src/pages/settings/components/ThemePlaylists.tsx
@@ -91,40 +91,90 @@ function ThemePlaylists() {
 					</Group>
 				</Group>
 				<Group justify='center' align='center' pos={'relative'}>
-					{themePlaylists?.map((cardPlaylist: any) => {
-						return (
-							<Group key={cardPlaylist.name} pos={'relative'}>
-								{cardPlaylist.name === currentThemePlaylist && (
-									<FiChevronRight
-										style={{
-											position: 'absolute',
-											left: -14,
-											zIndex: 1,
-											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>
-						);
-					})}
+					<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 && (
+										<FiChevronRight
+											style={{
+												position: 'absolute',
+												left: -14,
+												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%',
+												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>
 			</Stack>
 		</>