Updated header and bug fixes

This commit is contained in:
Sean Edmunds
2025-04-03 14:54:24 -05:00
parent d232a7bdb0
commit 8d2700174c
16 changed files with 390 additions and 283 deletions

View File

@@ -1,4 +1,4 @@
import { ActionIcon, Group, Stack, Tabs, Text } from '@mantine/core';
import { ActionIcon, Group, ScrollArea, Stack, Tabs, Text } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { FaPaintBrush, FaRegListAlt } from 'react-icons/fa';
import {
@@ -26,8 +26,8 @@ export function Settings() {
const navigate = useNavigate();
const { tabValue } = useParams();
return (
<Stack px={'2rem'}>
<Group gap={0}>
<Stack h={'100%'}>
<Group gap={0} pl={'2rem'}>
<ActionIcon
className={actionIconClasses.backButton}
classNames={actionIconClasses}
@@ -47,9 +47,13 @@ export function Settings() {
classNames={tabClasses}
keepMounted={false}
value={tabValue}
h={'100%'}
onChange={(value) =>
navigate(`/${import.meta.env.VITE_BASE_URL}/settings/${value}`)
}
style={{
overflow: 'hidden',
}}
>
<Tabs.List style={{ justifyContent: isMobile ? 'space-between' : undefined }}>
<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='personalization'>
@@ -78,28 +82,44 @@ export function Settings() {
</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value='personalization'>
<Personalization />
<ScrollArea h={'100%'}>
<Personalization />
</ScrollArea>
</Tabs.Panel>
<Tabs.Panel value='messages'>
<Messages />
<ScrollArea h={'100%'}>
<Messages />
</ScrollArea>
</Tabs.Panel>
<Tabs.Panel value='applications'>
<Applications />
<ScrollArea h={'100%'}>
<Applications />
</ScrollArea>
</Tabs.Panel>
<Tabs.Panel value='bookmarks'>
<Bookmarks />
<ScrollArea h={'100%'}>
<Bookmarks />
</ScrollArea>
</Tabs.Panel>
<Tabs.Panel value='themes'>
<Themes />
<ScrollArea h={'100%'}>
<Themes />
</ScrollArea>
</Tabs.Panel>
<Tabs.Panel value='themePlaylists'>
<ThemePlaylists />
<ScrollArea h={'100%'}>
<ThemePlaylists />
</ScrollArea>
</Tabs.Panel>
<Tabs.Panel value='providers'>
<SearchProviders />
<ScrollArea h={'100%'}>
<SearchProviders />
</ScrollArea>
</Tabs.Panel>
<Tabs.Panel value='wolClients'>
<WolClients />
<ScrollArea h={'100%'}>
<WolClients />
</ScrollArea>
</Tabs.Panel>
</Tabs>
</Stack>