smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Style fixes
All checks were successful
Deploy to production / build (push) Successful in 21s
Details

Browse Source
This commit is contained in:
Sean Edmunds
2026-10-12 11:17:21 -05:00
parent 68fa451d19
commit bf761df56d
1 changed files with 225 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

425
src/pages/settings/components/Theming/ThemePlaylists/ThemePlaylists.tsx
View File

@@ -2,7 +2,7 @@ import { Box, Group, LoadingOverlay, SimpleGrid, Stack, Text } from '@mantine/co
import { useDebouncedValue, useDisclosure } from '@mantine/hooks'; import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { NoItemsFound, SettingsHeader } from 'components'; import { NoItemsFound, SettingsHeader } from 'components';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks'; import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState, useMemo, useCallback } from 'react'; import { useCallback, useEffect, useMemo, useState } from 'react';
import { FiChevronRight } from 'react-icons/fi'; import { FiChevronRight } from 'react-icons/fi';
import { textClasses } from 'styles'; import { textClasses } from 'styles';
import type { Theme, ThemePlaylist } from 'types'; import type { Theme, ThemePlaylist } from 'types';
@@ -23,11 +23,13 @@ export function ThemePlaylists() {
const [debouncedSearch] = useDebouncedValue(searchValue, 500); const [debouncedSearch] = useDebouncedValue(searchValue, 500);
const themePlaylists: ThemePlaylist[] = useMemo(() => { const themePlaylists: ThemePlaylist[] = useMemo(() => {
return themePlaylistData?.filter( return (
(a: ThemePlaylist) => themePlaylistData?.filter(
a.name.toLowerCase().includes((debouncedSearch as string).toLowerCase()) || (a: ThemePlaylist) =>
a.name.includes('Time of Day'), a.name.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
) || []; a.name.includes('Time of Day'),
) || []
);
}, [themePlaylistData, debouncedSearch]); }, [themePlaylistData, debouncedSearch]);
const defaultPlaylist: ThemePlaylist = { const defaultPlaylist: ThemePlaylist = {
id: undefined, id: undefined,
@@ -42,10 +44,13 @@ export function ThemePlaylists() {
const { currentThemePlaylist, theme, isMobile } = useCommonHooks(); const { currentThemePlaylist, theme, isMobile } = useCommonHooks();
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const handleOpen = useCallback((playlist: ThemePlaylist) => { const handleOpen = useCallback(
setSelectedPlaylist(playlist); (playlist: ThemePlaylist) => {
open(); setSelectedPlaylist(playlist);
}, [open]); open();
},
[open],
);
const handleClose = useCallback(() => { const handleClose = useCallback(() => {
setSelectedPlaylist(defaultPlaylist); setSelectedPlaylist(defaultPlaylist);
@@ -67,17 +72,26 @@ export function ThemePlaylists() {
} }
}, [debouncedSearch, searchValue]); }, [debouncedSearch, searchValue]);
const allThemesIds = useMemo(() => const allThemesIds = useMemo(
allThemeData?.map((a: Theme) => a.id) ?? [], () => allThemeData?.map((a: Theme) => a.id) ?? [],
[allThemeData]); [allThemeData],
);
const backgroundsThemes = useMemo(() => const backgroundsThemes = useMemo(
allThemeData?.filter((a: any) => !a.backgroundImage.toLowerCase().includes('none')) ?? [], () =>
[allThemeData]); allThemeData?.filter(
(a: any) => !a.backgroundImage.toLowerCase().includes('none'),
) ?? [],
[allThemeData],
);
const noBackgroundsThemes = useMemo(() => const noBackgroundsThemes = useMemo(
allThemeData?.filter((a: any) => a.backgroundImage.toLowerCase().includes('none')) ?? [], () =>
[allThemeData]); allThemeData?.filter((a: any) =>
a.backgroundImage.toLowerCase().includes('none'),
) ?? [],
[allThemeData],
);
const timeOfDayPlaylist = useMemo(() => { const timeOfDayPlaylist = useMemo(() => {
const found = themePlaylists?.find((a: ThemePlaylist) => a.name === 'Time of Day'); const found = themePlaylists?.find((a: ThemePlaylist) => a.name === 'Time of Day');
@@ -89,26 +103,35 @@ export function ThemePlaylists() {
}; };
}, [themePlaylists]); }, [themePlaylists]);
const allStack = useMemo(() => ({ const allStack = useMemo(
id: undefined, () => ({
name: 'All', id: undefined,
default: 1, name: 'All',
themeList: `[${allThemesIds.join(',')}]`, default: 1,
}), [allThemesIds]); themeList: `[${allThemesIds.join(',')}]`,
}),
[allThemesIds],
);
const backgroundsStack = useMemo(() => ({ const backgroundsStack = useMemo(
id: undefined, () => ({
name: 'Backgrounds', id: undefined,
default: 1, name: 'Backgrounds',
themeList: `[${backgroundsThemes.map((a: Theme) => a.id).join(',')}]`, default: 1,
}), [backgroundsThemes]); themeList: `[${backgroundsThemes.map((a: Theme) => a.id).join(',')}]`,
}),
[backgroundsThemes],
);
const noBackgroundsStack = useMemo(() => ({ const noBackgroundsStack = useMemo(
id: undefined, () => ({
name: 'No Backgrounds', id: undefined,
default: 1, name: 'No Backgrounds',
themeList: `[${noBackgroundsThemes.map((a: Theme) => a.id).join(',')}]`, default: 1,
}), [noBackgroundsThemes]); themeList: `[${noBackgroundsThemes.map((a: Theme) => a.id).join(',')}]`,
}),
[noBackgroundsThemes],
);
return ( return (
<Stack> <Stack>
@@ -153,7 +176,7 @@ export function ThemePlaylists() {
/> />
{allThemeData && ( {allThemeData && (
<> <>
<Group justify='center' align='center' pos={'relative'}> <Stack w={'100%'} justify='center' align='center' pos={'relative'}>
<Text <Text
p={0} p={0}
className={textClasses.settingsSubTitle} className={textClasses.settingsSubTitle}
@@ -161,169 +184,171 @@ export function ThemePlaylists() {
> >
Defaults Defaults
</Text> </Text>
</Group> <Group>
<Group justify='center' align='center' pos={'relative'}> <Group pos={'relative'}>
<Group pos={'relative'}> {'All' === currentThemePlaylist && (
{'All' === currentThemePlaylist && ( <FiChevronRight
<FiChevronRight style={{
style={{ position: 'absolute',
position: 'absolute', left: -14,
left: -14, zIndex: 10,
zIndex: 10, fontSize: '2rem',
fontSize: '2rem', fontWeight: 'bold',
fontWeight: 'bold', borderRadius: '50%',
borderRadius: '50%', backgroundColor: 'var(--mantine-color-border-0)',
backgroundColor: 'var(--mantine-color-border-0)', color: 'var(--mantine-color-background-0)',
color: 'var(--mantine-color-background-0)', }}
}} />
/> )}
)} <Box>
<Box> <ThemePlaylistStack
<ThemePlaylistStack cardPlaylist={allStack}
cardPlaylist={allStack} handleOpen={handleOpen}
handleOpen={handleOpen} allThemes={allThemeData}
allThemes={allThemeData} />
/> </Box>
</Box>
</Group>
</Group>
<Group pos={'relative'}>
{'Backgrounds' === currentThemePlaylist && (
<FiChevronRight
style={{
position: 'absolute',
left: -14,
zIndex: 10,
fontSize: '2rem',
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>
<ThemePlaylistStack
cardPlaylist={backgroundsStack}
handleOpen={handleOpen}
allThemes={allThemeData}
/>
</Box>
</Group>
<Group pos={'relative'}>
{'No Backgrounds' === currentThemePlaylist && (
<FiChevronRight
style={{
position: 'absolute',
left: -14,
zIndex: 10,
fontSize: '2rem',
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>
<ThemePlaylistStack
cardPlaylist={noBackgroundsStack}
handleOpen={handleOpen}
allThemes={allThemeData}
/>
</Box>
</Group>
<Group pos={'relative'}>
{'Time of Day' === currentThemePlaylist && (
<FiChevronRight
style={{
position: 'absolute',
left: -14,
zIndex: 10,
fontSize: '2rem',
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>
<ThemePlaylistStack
cardPlaylist={timeOfDayPlaylist}
handleOpen={handleOpen}
allThemes={allThemeData}
/>
</Box>
</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 > 1 ? (
<SimpleGrid cols={isMobile ? 1 : 4}>
{themePlaylists
.filter((playlist: ThemePlaylist) => playlist.default === 0)
.sort((a: ThemePlaylist, b: ThemePlaylist) =>
a.name.toLocaleLowerCase() > b.name.toLocaleLowerCase() ? 1 : -1,
)
.map((cardPlaylist: ThemePlaylist) => {
return (
<Group key={cardPlaylist.name} pos={'relative'}>
{cardPlaylist.name === currentThemePlaylist && (
<FiChevronRight
style={{
position: 'absolute',
left: -14,
zIndex: 10,
fontSize: '2rem',
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>
<ThemePlaylistStack
cardPlaylist={cardPlaylist}
handleOpen={handleOpen}
allThemes={allThemeData}
/>
</Box>
</Group>
);
})}
</SimpleGrid>
) : (
<Group w={'100%'} style={{ display: 'flex', justifyContent: 'center' }}>
<NoItemsFound />
</Group> </Group>
)} <Group pos={'relative'}>
</Group> {'Backgrounds' === currentThemePlaylist && (
<FiChevronRight
style={{
position: 'absolute',
left: -14,
zIndex: 10,
fontSize: '2rem',
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>
<ThemePlaylistStack
cardPlaylist={backgroundsStack}
handleOpen={handleOpen}
allThemes={allThemeData}
/>
</Box>
</Group>
<Group pos={'relative'}>
{'No Backgrounds' === currentThemePlaylist && (
<FiChevronRight
style={{
position: 'absolute',
left: -14,
zIndex: 10,
fontSize: '2rem',
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>
<ThemePlaylistStack
cardPlaylist={noBackgroundsStack}
handleOpen={handleOpen}
allThemes={allThemeData}
/>
</Box>
</Group>
<Group pos={'relative'}>
{'Time of Day' === currentThemePlaylist && (
<FiChevronRight
style={{
position: 'absolute',
left: -14,
zIndex: 10,
fontSize: '2rem',
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>
<ThemePlaylistStack
cardPlaylist={timeOfDayPlaylist}
handleOpen={handleOpen}
allThemes={allThemeData}
/>
</Box>
</Group>
</Group>
</Stack>
<Stack w={'100%'} justify='center' align='center' pos={'relative'}>
<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 > 1 ? (
<SimpleGrid cols={isMobile ? 1 : 4}>
{themePlaylists
.filter((playlist: ThemePlaylist) => playlist.default === 0)
.sort((a: ThemePlaylist, b: ThemePlaylist) =>
a.name.toLocaleLowerCase() > b.name.toLocaleLowerCase() ? 1 : -1,
)
.map((cardPlaylist: ThemePlaylist) => {
return (
<Group key={cardPlaylist.name} pos={'relative'}>
{cardPlaylist.name === currentThemePlaylist && (
<FiChevronRight
style={{
position: 'absolute',
left: -14,
zIndex: 10,
fontSize: '2rem',
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>
<ThemePlaylistStack
cardPlaylist={cardPlaylist}
handleOpen={handleOpen}
allThemes={allThemeData}
/>
</Box>
</Group>
);
})}
</SimpleGrid>
) : (
<Group w={'100%'} style={{ display: 'flex', justifyContent: 'center' }}>
<NoItemsFound />
</Group>
)}
</Group>
</Stack>
</> </>
)} )}
</Stack> </Stack>