Table fixes

This commit is contained in:
Sean Edmunds
2025-11-07 14:15:54 -06:00
parent 1b23933875
commit f37cf84a61
10 changed files with 238 additions and 170 deletions

View File

@@ -108,23 +108,6 @@ const SearchHistory = () => {
setGlobalFilter={setGlobalFilter}
/>
</Stack>
<Group
w={'100%'}
style={{
backgroundColor: 'var(--mantine-color-primary-0)',
}}
align='center'
justify='center'
>
<Text
style={{
color: 'var(--mantine-color-background-0)',
fontWeight: 'bold',
}}
>
Results: {searchHistory.length}
</Text>
</Group>
</Stack>
</Stack>
</Stack>

View File

@@ -221,15 +221,15 @@ export function ThemePlaylists() {
<ThemePlaylistCard
cardPlaylist={{
id:
themePlaylists?.filter(
themePlaylists?.find(
(a: ThemePlaylist) => a.name === 'Time of Day',
)[0]?.id ?? undefined,
)?.id ?? undefined,
name: 'Time of Day',
default: 1,
themeList:
themePlaylists?.filter(
themePlaylists?.find(
(a: ThemePlaylist) => a.name === 'Time of Day',
)[0]?.themeList ?? '[]',
)?.themeList ?? '[]',
}}
handleOpen={handleOpen}
allThemes={allThemeData}

View File

@@ -67,7 +67,7 @@ export function ThemePlaylistCard({
paddingLeft: '.25rem',
backgroundColor: 'var(--mantine-color-border-0)',
borderRadius: '4px',
color: 'var(--mantine-color-background-0)',
color: 'var(--mantine-color-primary-0)',
zIndex: 3,
}}
>
@@ -130,44 +130,7 @@ export function ThemePlaylistCard({
>
{hover && <Overlay opacity={0.5} zIndex={1} />}
<Stack h={'100%'} w={'100%'} align='center' mt={'.75rem'}>
{cardPlaylist.name !== 'Time of Day' ? (
<>
<Text
px={'.5rem'}
mt={'.5rem'}
mb={'-.5rem'}
style={{
color: 'var(--mantine-color-background-0)',
backgroundColor: 'var(--mantine-color-primary-0)',
borderRadius: '4px',
zIndex: 160,
}}
>
Count: {themeList.length}
</Text>
<ScrollArea
className={scrollAreaClasses.default}
classNames={scrollAreaClasses}
h={'255px'}
w={'100%'}
style={{ zIndex: 2 }}
>
<Stack gap={4}>
{themeList.length > 0 &&
themeList
.sort((a: number, b: number) => (a > b ? 1 : -1))
.map((item: number) => {
const miniTheme: any = allThemes.find(
(theme: Theme) => theme.id === item,
);
return (
<ThemeMiniCard key={miniTheme?.id} miniTheme={miniTheme} />
);
})}
</Stack>
</ScrollArea>
</>
) : (
{cardPlaylist.name === 'Time of Day' ? (
<>
<Text
px={'.5rem'}
@@ -207,6 +170,43 @@ export function ThemePlaylistCard({
</Stack>
</ScrollArea>
</>
) : (
<>
<Text
px={'.5rem'}
mt={'.5rem'}
mb={'-.5rem'}
style={{
color: 'var(--mantine-color-background-0)',
backgroundColor: 'var(--mantine-color-primary-0)',
borderRadius: '4px',
zIndex: 160,
}}
>
Count: {themeList.length}
</Text>
<ScrollArea
className={scrollAreaClasses.default}
classNames={scrollAreaClasses}
h={'255px'}
w={'100%'}
style={{ zIndex: 2 }}
>
<Stack gap={4}>
{themeList.length > 0 &&
themeList
.sort((a: number, b: number) => (a > b ? 1 : -1))
.map((item: number) => {
const miniTheme: any = allThemes.find(
(theme: Theme) => theme.id === item,
);
return (
<ThemeMiniCard key={miniTheme?.id} miniTheme={miniTheme} />
);
})}
</Stack>
</ScrollArea>
</>
)}
</Stack>
</Button>