Theme updates and style fixes

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

@@ -197,7 +197,7 @@ function ThemeCard({
 							setShiftEdit(0);
 						}}
 						onClick={() => {
-							setShiftEdit(0);
+							handleOpen(cardTheme);
 						}}
 						gap={0}
 						style={{
@@ -216,9 +216,6 @@ function ThemeCard({
 						}}
 					>
 						<FiEdit
-							onClick={() => {
-								handleOpen(cardTheme);
-							}}
 							style={{
 								fontSize: '2em',
 								fontWeight: 'bold',
@@ -234,7 +231,15 @@ function ThemeCard({
 							setShiftShuffle(0);
 						}}
 						onClick={() => {
-							setShiftShuffle(0);
+							const themeList = JSON.parse(
+								themePlaylists?.find(
+									(t: ThemePlaylist) => t?.name === currentThemePlaylist,
+								)?.themeList ?? '[]',
+							);
+							const filteredThemes = allThemes.filter((t: Theme) =>
+								themeList.includes(t.id),
+							);
+							handleThemeChange(filteredThemes, false);
 						}}
 						gap={0}
 						style={{
@@ -254,17 +259,6 @@ function ThemeCard({
 						}}
 					>
 						<FiShuffle
-							onClick={() => {
-								const themeList = JSON.parse(
-									themePlaylists?.find(
-										(t: ThemePlaylist) => t?.name === currentThemePlaylist,
-									)?.themeList ?? '[]',
-								);
-								const filteredThemes = allThemes.filter((t: Theme) =>
-									themeList.includes(t.id),
-								);
-								handleThemeChange(filteredThemes, false);
-							}}
 							style={{
 								fontSize: '2em',
 								fontWeight: 'bold',

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

@@ -8,9 +8,9 @@ import {
 	Text,
 } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { useCommonHooks, useMutationAPI } from 'hooks';
+import { useCommonHooks } from 'hooks';
 import { useState } from 'react';
-import { FiEdit, FiRefreshCcw, FiTrash } from 'react-icons/fi';
+import { FiEdit, FiTrash } from 'react-icons/fi';
 import type { Theme, ThemePlaylist } from 'types';
 import DeleteItemModal from '../Shared/DeleteItemModal';
 import ThemeMiniCard from './ThemeMiniCard';
@@ -24,14 +24,12 @@ function ThemePlaylistCard({
 	handleOpen: (cardPlaylist: ThemePlaylist) => void;
 	allThemes: Theme[];
 }) {
-	const themePlaylistEndpoint = 'api/themePlaylists';
 	const [hover, setHover] = useState(false);
 	const { setThemeName, setCurrentThemePlaylist, theme, handleDelete } = useCommonHooks();
-	const syncableLists = ['All', 'Backgrounds', 'No Backgrounds'];
-	const { mutateAsync } = useMutationAPI();
+	const defaultLists = ['All', 'Backgrounds', 'No Backgrounds'];
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const themeList = JSON.parse(
-		cardPlaylist.themeList.name === 'Time of Day' ? '[]' : cardPlaylist.themeList,
+		cardPlaylist?.themeList?.name === 'Time of Day' ? '[]' : cardPlaylist.themeList,
 	);
 	return (
 		<Group
@@ -84,7 +82,7 @@ function ThemePlaylistCard({
 			>
 				{cardPlaylist.name}
 			</Text>
-			{syncableLists.includes(cardPlaylist.name) ? (
+			{!defaultLists.includes(cardPlaylist.name) && (
 				<ActionIcon
 					style={{
 						position: 'absolute',
@@ -100,104 +98,35 @@ function ThemePlaylistCard({
 								: 'var(--mantine-color-background-0)',
 						zIndex: 3,
 					}}
-					onClick={(event) => {
-						event.stopPropagation();
-						if (cardPlaylist.name === 'All') {
-							mutateAsync({
-								method: 'PATCH',
-								endpoint: themePlaylistEndpoint,
-								body: {
-									id: cardPlaylist.id,
-									name: 'All',
-									themeList: JSON.stringify(allThemes.map((theme: Theme) => theme.id)),
-								},
-							});
-						}
-						if (cardPlaylist.name === 'Backgrounds') {
-							mutateAsync({
-								method: 'PATCH',
-								endpoint: themePlaylistEndpoint,
-								body: {
-									id: cardPlaylist.id,
-									name: 'Backgrounds',
-									themeList: JSON.stringify(
-										allThemes
-											.filter(
-												(theme: Theme) => theme.backgroundImage.toLowerCase() !== 'none',
-											)
-											.map((theme: Theme) => theme.id),
-									),
-								},
-							});
-						}
-						if (cardPlaylist.name === 'No Backgrounds') {
-							mutateAsync({
-								method: 'PATCH',
-								endpoint: themePlaylistEndpoint,
-								body: {
-									id: cardPlaylist.id,
-									name: 'No Backgrounds',
-									themeList: JSON.stringify(
-										allThemes
-											.filter(
-												(theme: Theme) => theme.backgroundImage.toLowerCase() === 'none',
-											)
-											.map((theme: Theme) => theme.id),
-									),
-								},
-							});
-						}
+					onClick={() => {
+						handleOpen(cardPlaylist);
 					}}
 				>
-					<FiRefreshCcw />
+					<FiEdit />
+				</ActionIcon>
+			)}
+			{cardPlaylist.default === 0 && (
+				<ActionIcon
+					style={{
+						position: 'absolute',
+						top: -10,
+						right: 40,
+						paddingRight: 4,
+						paddingLeft: 4,
+						backgroundColor: 'var(--mantine-color-border-0)',
+						borderRadius: '4px',
+						color:
+							theme.borderColor === theme.primaryColor
+								? 'var(--mantine-color-accent-0)'
+								: 'var(--mantine-color-background-0)',
+						zIndex: 3,
+					}}
+					onClick={() => {
+						openModal();
+					}}
+				>
+					<FiTrash />
 				</ActionIcon>
-			) : (
-				<>
-					<ActionIcon
-						style={{
-							position: 'absolute',
-							top: -10,
-							right: 6,
-							paddingRight: 4,
-							paddingLeft: 4,
-							backgroundColor: 'var(--mantine-color-border-0)',
-							borderRadius: '4px',
-							color:
-								theme.borderColor === theme.primaryColor
-									? 'var(--mantine-color-accent-0)'
-									: 'var(--mantine-color-background-0)',
-							zIndex: 3,
-						}}
-						onClick={() => {
-							handleOpen(cardPlaylist);
-						}}
-					>
-						<FiEdit />
-					</ActionIcon>
-					{cardPlaylist.default === 0 && (
-						<ActionIcon
-							style={{
-								position: 'absolute',
-								top: -10,
-								right: 40,
-								paddingRight: 4,
-								paddingLeft: 4,
-								backgroundColor: 'var(--mantine-color-border-0)',
-								borderRadius: '4px',
-								color:
-									theme.borderColor === theme.primaryColor
-										? 'var(--mantine-color-accent-0)'
-										: 'var(--mantine-color-background-0)',
-								zIndex: 3,
-							}}
-							onClick={() => {
-								openModal();
-							}}
-						>
-							<FiTrash />
-						</ActionIcon>
-					)}
-				</>
 			)}
 			<Button
 				w={'275px'}

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

@@ -4,7 +4,7 @@ import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FiChevronRight } from 'react-icons/fi';
 import { textClasses } from 'styles';
-import type { ThemePlaylist } from 'types';
+import type { Theme, ThemePlaylist } from 'types';
 import NoItemsFound from '../Shared/NoItemsFound';
 import SettingsHeader from '../Shared/SettingsHeader';
 import ThemePlaylistCard from './ThemePlaylistCard';
@@ -66,7 +66,6 @@ function ThemePlaylists() {
 			setIsLoading(false);
 		}
 	}, [themePlaylistData, isThemePlaylistDataFetched, debouncedSearch]);
-
 	return (
 		<Stack>
 			<ThemePlaylistModal
@@ -96,102 +95,207 @@ function ThemePlaylists() {
 					isLoading={isLoading}
 					setIsLoading={setIsLoading}
 				/>
-				<Group mt={'6rem'} justify='center' align='center' pos={'relative'}>
-					<Text p={0} className={textClasses.settingsSubTitle} classNames={textClasses}>
-						Defaults
-					</Text>
-				</Group>
-				<Group justify='center' align='center' pos={'relative'}>
-					{themePlaylists.length > 0 ? (
-						themePlaylists
-							.filter((playlist: ThemePlaylist) => playlist.default === 1)
-							.map((cardPlaylist: ThemePlaylist) => {
-								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: 'var(--mantine-color-border-0)',
-													color:
-														theme.borderColor === theme.primaryColor
-															? 'var(--mantine-color-accent-0)'
-															: 'var(--mantine-color-background-0)',
-												}}
-											/>
-										)}
-										<Box>
-											<ThemePlaylistCard
-												cardPlaylist={cardPlaylist}
-												handleOpen={handleOpen}
-												allThemes={allThemeData}
-											/>
-										</Box>
-									</Group>
-								);
-							})
-					) : (
-						<Group w={'100%'} style={{ display: 'flex', justifyContent: 'center' }}>
-							<NoItemsFound />
+				{allThemeData ? (
+					<>
+						<Group mt={'6rem'} justify='center' align='center' pos={'relative'}>
+							<Text
+								p={0}
+								className={textClasses.settingsSubTitle}
+								classNames={textClasses}
+							>
+								Defaults
+							</Text>
 						</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'}
-					mb={isMobile ? '6rem' : undefined}
-				>
-					{themePlaylists.length > 0 ? (
-						themePlaylists
-							.filter((playlist: ThemePlaylist) => playlist.default === 0)
-							.sort((a: ThemePlaylist, b: ThemePlaylist) => (a.name > b.name ? 1 : -1))
-							.map((cardPlaylist: ThemePlaylist) => {
-								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: 'var(--mantine-color-border-0)',
-													color:
-														theme.borderColor === theme.primaryColor
-															? 'var(--mantine-color-accent-0)'
-															: 'var(--mantine-color-primary-0)',
-												}}
-											/>
-										)}
-										<Box>
-											<ThemePlaylistCard
-												cardPlaylist={cardPlaylist}
-												handleOpen={handleOpen}
-												allThemes={allThemeData}
-											/>
-										</Box>
-									</Group>
-								);
-							})
-					) : (
-						<Group w={'100%'} style={{ display: 'flex', justifyContent: 'center' }}>
-							<NoItemsFound />
+						<Group justify='center' align='center' pos={'relative'}>
+							<Group pos={'relative'}>
+								{'All' === currentThemePlaylist && (
+									<FiChevronRight
+										style={{
+											position: 'absolute',
+											left: -14,
+											zIndex: 10,
+											fontSize: '2em',
+											fontWeight: 'bold',
+											borderRadius: '50%',
+											backgroundColor: 'var(--mantine-color-border-0)',
+											color:
+												theme.borderColor === theme.primaryColor
+													? 'var(--mantine-color-accent-0)'
+													: 'var(--mantine-color-background-0)',
+										}}
+									/>
+								)}
+								<Box>
+									<ThemePlaylistCard
+										cardPlaylist={{
+											id: undefined,
+											name: 'All',
+											default: 1,
+											themeList: `[${allThemeData?.map((a: Theme) => a.id) ?? ''}]`,
+										}}
+										handleOpen={handleOpen}
+										allThemes={allThemeData}
+									/>
+								</Box>
+							</Group>
+							<Group pos={'relative'}>
+								{'Backgrounds' === currentThemePlaylist && (
+									<FiChevronRight
+										style={{
+											position: 'absolute',
+											left: -14,
+											zIndex: 10,
+											fontSize: '2em',
+											fontWeight: 'bold',
+											borderRadius: '50%',
+											backgroundColor: 'var(--mantine-color-border-0)',
+											color:
+												theme.borderColor === theme.primaryColor
+													? 'var(--mantine-color-accent-0)'
+													: 'var(--mantine-color-background-0)',
+										}}
+									/>
+								)}
+								<Box>
+									<ThemePlaylistCard
+										cardPlaylist={{
+											id: undefined,
+											name: 'Backgrounds',
+											default: 1,
+											themeList: `[${allThemeData?.filter((a: any) => !a.backgroundImage.toLowerCase().includes('none')).map((a: Theme) => a.id) ?? ''}]`,
+										}}
+										handleOpen={handleOpen}
+										allThemes={allThemeData}
+									/>
+								</Box>
+							</Group>
+							<Group pos={'relative'}>
+								{'No Backgrounds' === currentThemePlaylist && (
+									<FiChevronRight
+										style={{
+											position: 'absolute',
+											left: -14,
+											zIndex: 10,
+											fontSize: '2em',
+											fontWeight: 'bold',
+											borderRadius: '50%',
+											backgroundColor: 'var(--mantine-color-border-0)',
+											color:
+												theme.borderColor === theme.primaryColor
+													? 'var(--mantine-color-accent-0)'
+													: 'var(--mantine-color-background-0)',
+										}}
+									/>
+								)}
+								<Box>
+									<ThemePlaylistCard
+										cardPlaylist={{
+											id: undefined,
+											name: 'No Backgrounds',
+											default: 1,
+											themeList: `[${allThemeData?.filter((a: any) => a.backgroundImage.toLowerCase().includes('none')).map((a: Theme) => a.id) ?? ''}]`,
+										}}
+										handleOpen={handleOpen}
+										allThemes={allThemeData}
+									/>
+								</Box>
+							</Group>
+							<Group pos={'relative'}>
+								{'Time of Day' === currentThemePlaylist && (
+									<FiChevronRight
+										style={{
+											position: 'absolute',
+											left: -14,
+											zIndex: 10,
+											fontSize: '2em',
+											fontWeight: 'bold',
+											borderRadius: '50%',
+											backgroundColor: 'var(--mantine-color-border-0)',
+											color:
+												theme.borderColor === theme.primaryColor
+													? 'var(--mantine-color-accent-0)'
+													: 'var(--mantine-color-background-0)',
+										}}
+									/>
+								)}
+								<Box>
+									<ThemePlaylistCard
+										cardPlaylist={{
+											id: undefined,
+											name: 'Time of Day',
+											default: 1,
+											themeList:
+												themePlaylists?.filter(
+													(a: ThemePlaylist) => a.name === 'Time of Day',
+												)[0]?.themeList ?? '[]',
+										}}
+										handleOpen={handleOpen}
+										allThemes={allThemeData}
+									/>
+								</Box>
+							</Group>
 						</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'}
+							mb={isMobile ? '6rem' : undefined}
+						>
+							{themePlaylists.length > 0 ? (
+								themePlaylists
+									.filter((playlist: ThemePlaylist) => playlist.default === 0)
+									.sort((a: ThemePlaylist, b: ThemePlaylist) =>
+										a.name > b.name ? 1 : -1,
+									)
+									.map((cardPlaylist: ThemePlaylist) => {
+										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: 'var(--mantine-color-border-0)',
+															color:
+																theme.borderColor === theme.primaryColor
+																	? 'var(--mantine-color-accent-0)'
+																	: 'var(--mantine-color-primary-0)',
+														}}
+													/>
+												)}
+												<Box>
+													<ThemePlaylistCard
+														cardPlaylist={cardPlaylist}
+														handleOpen={handleOpen}
+														allThemes={allThemeData}
+													/>
+												</Box>
+											</Group>
+										);
+									})
+							) : (
+								<Group w={'100%'} style={{ display: 'flex', justifyContent: 'center' }}>
+									<NoItemsFound />
+								</Group>
+							)}
+						</Group>
+					</>
+				) : (
+					<></>
+				)}
 			</Stack>
 		</Stack>
 	);

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

@@ -1,10 +1,11 @@
-import { Box, Group, Overlay, Stack, Switch, Text } from '@mantine/core';
+import { Box, Button, Group, Overlay, Stack, Switch, Text, Tooltip } from '@mantine/core';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FaDice } from 'react-icons/fa';
 import { FiChevronRight } from 'react-icons/fi';
-import { switchClasses } from 'styles';
+import { useNavigate } from 'react-router-dom';
+import { switchClasses, textClasses } from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
 import NoItemsFound from '../Shared/NoItemsFound';
 import SettingsHeader from '../Shared/SettingsHeader';
@@ -45,8 +46,15 @@ function ThemesSettings() {
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
 	const [isLoading, setIsLoading] = useState(false);
-	const { currentTheme, setCurrentTheme, theme, isMobile, setCurrentThemePlaylist } =
-		useCommonHooks();
+	const navigate = useNavigate();
+	const {
+		currentTheme,
+		setCurrentTheme,
+		theme,
+		isMobile,
+		currentThemePlaylist,
+		setCurrentThemePlaylist,
+	} = useCommonHooks();
 
 	const handleOpen = (theme: Theme) => {
 		setSelectedTheme(theme);
@@ -102,7 +110,6 @@ function ThemesSettings() {
 			setIsLoading(false);
 		}
 	}, [allThemeData, isAllThemeDataFetched, debouncedSearch]);
-
 	return (
 		<Stack w={'100%'} align='center'>
 			<ThemeModal
@@ -136,36 +143,13 @@ function ThemesSettings() {
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
 			/>
-			<Switch
-				label={
-					isMobile ? (
-						<FaDice size={20} color={'var(--mantine-color-primary-0)'} />
-					) : (
-						<Text c={'var(--mantine-color-primary-0)'}>Random Theme</Text>
-					)
-				}
-				labelPosition='left'
-				pos={'absolute'}
-				right={isMobile ? '2rem' : '1rem'}
-				top={isMobile ? '3.5rem' : '2rem'}
-				checked={currentTheme === 'random'}
-				onChange={(e) => {
-					setCurrentTheme(e.target.checked ? 'random' : theme.name);
-					setCurrentThemePlaylist('All');
-				}}
-				className={switchClasses.default}
-				classNames={switchClasses}
-				style={{
-					zIndex: 250,
-				}}
-			/>
 			<Group
 				w={'85%'}
 				justify='center'
 				align='center'
 				pos={'relative'}
 				mt={isMobile ? '10rem' : '7rem'}
-				mb={isMobile ? '6rem' : '1rem'}
+				mb={isMobile ? '8rem' : '6.5rem'}
 			>
 				<Overlay
 					display={currentTheme === 'random' && debouncedSearch === '' ? 'flex' : 'none'}
@@ -202,7 +186,16 @@ function ThemesSettings() {
 							<Box
 								style={{
 									zIndex:
-										currentTheme === 'random' && cardTheme.name === theme.name ? 195 : 0,
+										currentTheme === 'random' &&
+										(themePlaylists
+											.filter(
+												(t: ThemePlaylist) =>
+													t.name.toLowerCase() === currentThemePlaylist.toLowerCase(),
+											)[0]
+											?.themeList.includes(`${cardTheme.id}`) ||
+											cardTheme.name === theme.name)
+											? 195
+											: 0,
 								}}
 							>
 								<ThemeCard
@@ -223,6 +216,96 @@ function ThemesSettings() {
 					</Group>
 				)}
 			</Group>
+			<Group
+				align='center'
+				justify='center'
+				style={{
+					backdropFilter: 'blur(10px) brightness(.75)',
+					zIndex: 199,
+					paddingTop: '1.5rem',
+					paddingBottom: '1.5rem',
+					paddingLeft: '1rem',
+					paddingRight: '1rem',
+					height: 'min-content',
+					width: '100%',
+					marginTop: 0,
+					position: 'absolute',
+					bottom: 0,
+				}}
+			>
+				<Group w={isMobile ? undefined : '100%'}>
+					<Text
+						miw={isMobile ? 100 : undefined}
+						className={textClasses.settingsSubTitle}
+						classNames={textClasses}
+					>
+						Current Settings:
+					</Text>
+					<Group pos={isMobile ? undefined : 'absolute'} w={'100%'} justify='center'>
+						<Group align='center' justify='center'>
+							<Text
+								style={{
+									color: 'var(--mantine-color-accent-0)',
+									fontWeight: 'bold',
+								}}
+							>
+								Active Playlist:
+							</Text>
+							<Text
+								style={{
+									color: 'var(--mantine-color-primary-0)',
+									fontWeight: 'bold',
+									fontSize: '1.2em',
+								}}
+							>
+								{currentThemePlaylist === 'All' ? 'All' : currentThemePlaylist}
+							</Text>
+						</Group>
+						<Button
+							onClick={() => {
+								if (currentThemePlaylist === 'All') {
+									navigate(`/${import.meta.env.VITE_BASE_URL}/settings/themePlaylists`);
+								} else {
+									setCurrentThemePlaylist('All');
+									setCurrentTheme('random');
+								}
+							}}
+						>
+							{currentThemePlaylist === 'All' ? 'Select Playlist' : 'Disable Playlist'}
+						</Button>
+						<Tooltip
+							label='Shuffle is always on when a playlist is active.'
+							c={'var(--mantine-color-primary-0)'}
+							bg={'var(--mantine-color-background-0)'}
+							disabled={currentThemePlaylist === 'All'}
+						>
+							<Group>
+								<Switch
+									disabled={currentThemePlaylist !== 'All'}
+									label={
+										isMobile ? (
+											<FaDice size={20} color={'var(--mantine-color-primary-0)'} />
+										) : (
+											<Text c={'var(--mantine-color-primary-0)'}>Shuffle Enabled</Text>
+										)
+									}
+									labelPosition='left'
+									checked={currentTheme === 'random'}
+									onChange={(e) => {
+										setCurrentTheme(e.target.checked ? 'random' : theme.name);
+										setCurrentThemePlaylist('All');
+									}}
+									className={switchClasses.default}
+									classNames={switchClasses}
+									style={{
+										zIndex: 250,
+									}}
+								/>
+							</Group>
+						</Tooltip>
+					</Group>
+				</Group>
+			</Group>
 		</Stack>
 	);
 }