State fixes

src/pages/settings/components/ThemeCard.tsx

@@ -1,5 +1,5 @@
 import { ActionIcon, Box, Button, Group, Overlay, Stack, Text } from '@mantine/core';
-import { useCommonHooks } from 'hooks';
+import { useCommonHooks, useQueryAPI } from 'hooks';
 import { useState } from 'react';
 import { FiEdit, FiShuffle, FiTrash, FiX } from 'react-icons/fi';
 import { actionIconClasses } from 'styles';
@@ -11,10 +11,19 @@ function ThemeCard({
 	createTheme,
 	allThemes,
 }: any) {
+	const { data: themePlaylists, isFetched: isThemePlaylistsFetched } = useQueryAPI({
+		endpoint: 'api/themePlaylists',
+	});
 	const [hover, setHover] = useState(false);
 	const [shiftEdit, setShiftEdit] = useState<number>(0);
 	const [shiftShuffle, setShiftShuffle] = useState<number>(0);
-	const { handleThemeChange, currentTheme, setCurrentTheme, theme } = useCommonHooks();
+	const {
+		handleThemeChange,
+		currentTheme,
+		setCurrentTheme,
+		theme,
+		currentThemePlaylist,
+	} = useCommonHooks();
 
 	return (
 		<Group
@@ -211,7 +220,14 @@ function ThemeCard({
 					>
 						<FiShuffle
 							onClick={() => {
-								handleThemeChange(allThemes, false);
+								const themeList = JSON.parse(
+									themePlaylists.find((t: any) => t.name === currentThemePlaylist)
+										.themeList,
+								);
+								const filteredThemes = allThemes.filter((t: any) =>
+									themeList.includes(t.id),
+								);
+								handleThemeChange(filteredThemes, false);
 							}}
 							style={{
 								fontSize: '2em',

src/pages/settings/components/ThemePlaylistCard.tsx

@@ -20,7 +20,7 @@ function ThemePlaylistCard({
 	allThemes,
 }: any) {
 	const [hover, setHover] = useState(false);
-	const { currentThemePlaylist, setCurrentThemePlaylist, theme } = useCommonHooks();
+	const { setThemeName, setCurrentThemePlaylist, theme } = useCommonHooks();
 	const syncableLists = ['All', 'Backgrounds', 'No Backgrounds'];
 	const themeList = JSON.parse(
 		cardPlaylist.themeList.name === 'Time of Day' ? '[]' : cardPlaylist.themeList,
@@ -92,7 +92,9 @@ function ThemePlaylistCard({
 									name: 'Backgrounds',
 									themeList: JSON.stringify(
 										allThemes
-											.filter((theme: any) => theme.backgroundImage !== 'none')
+											.filter(
+												(theme: any) => theme.backgroundImage.toLowerCase() !== 'none',
+											)
 											.map((theme: any) => theme.id),
 									),
 								},
@@ -107,7 +109,9 @@ function ThemePlaylistCard({
 									name: 'No Backgrounds',
 									themeList: JSON.stringify(
 										allThemes
-											.filter((theme: any) => theme.backgroundImage === 'none')
+											.filter(
+												(theme: any) => theme.backgroundImage.toLowerCase() === 'none',
+											)
 											.map((theme: any) => theme.id),
 									),
 								},
@@ -174,6 +178,7 @@ function ThemePlaylistCard({
 				}}
 				onClick={() => {
 					setCurrentThemePlaylist(cardPlaylist.name);
+					setThemeName('random');
 				}}
 			>
 				{hover && <Overlay opacity={0.5} zIndex={1} />}

src/pages/settings/components/ThemePlaylists.tsx

@@ -3,7 +3,7 @@ import { useDisclosure } from '@mantine/hooks';
 import { modals } from '@mantine/modals';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useState } from 'react';
-import { FiPlus } from 'react-icons/fi';
+import { FiChevronRight, FiPlus } from 'react-icons/fi';
 import { buttonClasses, textClasses } from 'styles';
 import ThemePlaylistCard from './ThemePlaylistCard';
 import ThemePlaylistModal from './ThemePlaylistModal';
@@ -19,7 +19,7 @@ function ThemePlaylists() {
 	const { mutateAsync: deletePlaylist } = useMutationAPI();
 	const [opened, { open, close }] = useDisclosure(false);
 	const [selectedPlaylist, setSelectedPlaylist] = useState<any>({});
-	const { currentThemePlaylist, setCurrentThemePlaylist } = useCommonHooks();
+	const { currentThemePlaylist, setCurrentThemePlaylist, theme } = useCommonHooks();
 
 	const handleOpen = (playlist: any) => {
 		setSelectedPlaylist(playlist);
@@ -94,6 +94,23 @@ function ThemePlaylists() {
 					{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}

src/pages/settings/components/Themes.tsx

@@ -24,7 +24,8 @@ function ThemesSettings() {
 	const [backgroundList, setBackgroundList] = useState<any>(['None']);
 	const [selectedTheme, setSelectedTheme] = useState<any>({});
 	const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
-	const { currentTheme, setCurrentTheme, theme } = useCommonHooks();
+	const { currentTheme, setCurrentTheme, theme, setCurrentThemePlaylist } =
+		useCommonHooks();
 
 	const handleOpen = (theme: any) => {
 		setSelectedTheme(theme);
@@ -115,6 +116,7 @@ function ThemesSettings() {
 						checked={currentTheme === 'random'}
 						onChange={(e) => {
 							setCurrentTheme(e.target.checked ? 'random' : theme.name);
+							setCurrentThemePlaylist('All');
 						}}
 						color={theme.primaryColor}
 					/>