Theme updates and style fixes

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>
 	);