276 lines
8.0 KiB
TypeScript
276 lines
8.0 KiB
TypeScript
import { ActionIcon, Divider, Group, ScrollArea, Stack, Tabs, Text } from '@mantine/core';
|
|
import { useCommonHooks, useQueryAPI } from 'hooks';
|
|
import { useEffect, useState } from 'react';
|
|
import { FaPaintBrush, FaRegListAlt } from 'react-icons/fa';
|
|
import {
|
|
FiArrowLeftCircle,
|
|
FiBookmark,
|
|
FiGlobe,
|
|
FiMail,
|
|
FiMonitor,
|
|
FiSearch,
|
|
FiUser,
|
|
} from 'react-icons/fi';
|
|
import { useNavigate, useParams } from 'react-router-dom';
|
|
import { actionIconClasses, scrollAreaClasses, tabClasses, textClasses } from 'styles';
|
|
import type { PersonalData } from 'types';
|
|
import Applications from './components/Applications/Applications';
|
|
import Bookmarks from './components/Bookmarks/Bookmarks';
|
|
import GuacamoleClients from './components/GuacamoleClients/GuacamoleClients';
|
|
import Messages from './components/Messages/Messages';
|
|
import Personalization from './components/Personalization/Personalization';
|
|
import SearchHistory from './components/Search/SearchHistory';
|
|
import SearchProviders from './components/Search/SearchProviders';
|
|
import { ThemePlaylists } from './components/Theming/ThemePlaylists';
|
|
import { Themes } from './components/Theming/Themes';
|
|
import WolClients from './components/WoL/WolClients';
|
|
|
|
export function Settings() {
|
|
const endpoint = 'api/personalData';
|
|
const { data: personalData, isFetched: personalDataIsFetched } = useQueryAPI({
|
|
endpoint: endpoint,
|
|
});
|
|
const [personal, setPersonal] = useState<PersonalData>();
|
|
const { isMobile, theme } = useCommonHooks();
|
|
const navigate = useNavigate();
|
|
const { tabValue } = useParams();
|
|
|
|
useEffect(() => {
|
|
if (personalData && personalDataIsFetched) {
|
|
setPersonal(personalData[0]);
|
|
}
|
|
}, [personalData, personalDataIsFetched]);
|
|
return (
|
|
<Stack h={'100%'} gap={0}>
|
|
<Group gap={0} style={{ position: 'relative', paddingBottom: '1rem' }}>
|
|
<ActionIcon
|
|
className={actionIconClasses.backButton}
|
|
classNames={actionIconClasses}
|
|
component='a'
|
|
onClick={() => navigate(`/${import.meta.env.VITE_BASE_URL}`)}
|
|
>
|
|
<FiArrowLeftCircle />
|
|
</ActionIcon>
|
|
<Text
|
|
className={textClasses.settingsTitle}
|
|
classNames={textClasses}
|
|
style={{
|
|
boxShadow:
|
|
theme.textShadowsEnabled === 1
|
|
? '4px -4px color-mix(in srgb, var(--mantine-color-border-0), transparent 50%)'
|
|
: undefined,
|
|
}}
|
|
>
|
|
Settings
|
|
</Text>
|
|
</Group>
|
|
<Tabs
|
|
orientation={isMobile ? 'horizontal' : 'vertical'}
|
|
defaultValue={tabValue ?? 'personalization'}
|
|
className={tabClasses.settingsTabs}
|
|
classNames={tabClasses}
|
|
keepMounted={false}
|
|
value={tabValue}
|
|
h={isMobile ? undefined : '100%'}
|
|
onChange={(value) =>
|
|
navigate(`/${import.meta.env.VITE_BASE_URL}/settings/${value}`)
|
|
}
|
|
>
|
|
<Tabs.List style={{ justifyContent: isMobile ? 'space-between' : undefined }}>
|
|
<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='personalization'>
|
|
{isMobile ? <FiUser /> : 'Personal Info'}
|
|
</Tabs.Tab>
|
|
{!isMobile && (
|
|
<Group w={'100%'} gap={0} justify='center'>
|
|
<Divider
|
|
label='Homepage Items'
|
|
w={'90%'}
|
|
h={3}
|
|
mb={'1rem'}
|
|
color={'var(--mantine-color-primary-0)'}
|
|
variant='dashed'
|
|
labelPosition='center'
|
|
styles={{
|
|
label: {
|
|
color: 'var(--mantine-color-accent-0)',
|
|
},
|
|
}}
|
|
/>
|
|
</Group>
|
|
)}
|
|
<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='messages'>
|
|
{isMobile ? <FiMail /> : 'Messages'}
|
|
</Tabs.Tab>
|
|
<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='applications'>
|
|
{isMobile ? <FiGlobe /> : 'Applications'}
|
|
</Tabs.Tab>
|
|
<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='bookmarks'>
|
|
{isMobile ? <FiBookmark /> : 'Bookmarks'}
|
|
</Tabs.Tab>
|
|
{!isMobile && (
|
|
<Group w={'100%'} gap={0} justify='center'>
|
|
<Divider
|
|
label='Theming'
|
|
w={'90%'}
|
|
h={3}
|
|
mb={'1rem'}
|
|
color={'var(--mantine-color-primary-0)'}
|
|
variant='dashed'
|
|
labelPosition='center'
|
|
styles={{
|
|
label: {
|
|
color: 'var(--mantine-color-accent-0)',
|
|
},
|
|
}}
|
|
/>
|
|
</Group>
|
|
)}
|
|
<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='themes'>
|
|
{isMobile ? <FaPaintBrush /> : 'Themes'}
|
|
</Tabs.Tab>
|
|
<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='themePlaylists'>
|
|
{isMobile ? <FaRegListAlt /> : 'Theme Playlists'}
|
|
</Tabs.Tab>
|
|
{!isMobile && (
|
|
<Group w={'100%'} gap={0} justify='center'>
|
|
<Divider
|
|
label='Search'
|
|
w={'90%'}
|
|
h={3}
|
|
mb={'1rem'}
|
|
color={'var(--mantine-color-primary-0)'}
|
|
variant='dashed'
|
|
labelPosition='center'
|
|
styles={{
|
|
label: {
|
|
color: 'var(--mantine-color-accent-0)',
|
|
},
|
|
}}
|
|
/>
|
|
</Group>
|
|
)}
|
|
<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='providers'>
|
|
{isMobile ? <FiSearch /> : 'Search Providers'}
|
|
</Tabs.Tab>
|
|
<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='history'>
|
|
{isMobile ? <FiSearch /> : 'Search History'}
|
|
</Tabs.Tab>
|
|
{!isMobile && (personal?.enableWol || personal?.enableGuacamole) ? (
|
|
<Group w={'100%'} gap={0} justify='center'>
|
|
<Divider
|
|
label='Extras'
|
|
w={'90%'}
|
|
h={3}
|
|
mb={'1rem'}
|
|
color={'var(--mantine-color-primary-0)'}
|
|
variant='dashed'
|
|
labelPosition='center'
|
|
styles={{
|
|
label: {
|
|
color: 'var(--mantine-color-accent-0)',
|
|
},
|
|
}}
|
|
/>
|
|
</Group>
|
|
) : null}
|
|
{personal?.enableWol ? (
|
|
<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='wolClients'>
|
|
{isMobile ? <FiMonitor /> : 'WoL Clients'}
|
|
</Tabs.Tab>
|
|
) : null}
|
|
{personal?.enableGuacamole ? (
|
|
<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='guacamoleClients'>
|
|
{isMobile ? <FiMonitor /> : 'Guacamole Clients'}
|
|
</Tabs.Tab>
|
|
) : null}
|
|
</Tabs.List>
|
|
<Tabs.Panel value='personalization'>
|
|
<ScrollArea
|
|
className={scrollAreaClasses.default}
|
|
classNames={scrollAreaClasses}
|
|
>
|
|
<Personalization />
|
|
</ScrollArea>
|
|
</Tabs.Panel>
|
|
<Tabs.Panel value='messages'>
|
|
<ScrollArea
|
|
className={scrollAreaClasses.default}
|
|
classNames={scrollAreaClasses}
|
|
>
|
|
<Messages />
|
|
</ScrollArea>
|
|
</Tabs.Panel>
|
|
<Tabs.Panel value='applications'>
|
|
<ScrollArea
|
|
className={scrollAreaClasses.default}
|
|
classNames={scrollAreaClasses}
|
|
>
|
|
<Applications />
|
|
</ScrollArea>
|
|
</Tabs.Panel>
|
|
<Tabs.Panel value='bookmarks'>
|
|
<ScrollArea
|
|
className={scrollAreaClasses.default}
|
|
classNames={scrollAreaClasses}
|
|
>
|
|
<Bookmarks />
|
|
</ScrollArea>
|
|
</Tabs.Panel>
|
|
<Tabs.Panel value='themes'>
|
|
<ScrollArea
|
|
className={scrollAreaClasses.default}
|
|
classNames={scrollAreaClasses}
|
|
>
|
|
<Themes />
|
|
</ScrollArea>
|
|
</Tabs.Panel>
|
|
<Tabs.Panel value='themePlaylists'>
|
|
<ScrollArea
|
|
className={scrollAreaClasses.default}
|
|
classNames={scrollAreaClasses}
|
|
>
|
|
<ThemePlaylists />
|
|
</ScrollArea>
|
|
</Tabs.Panel>
|
|
<Tabs.Panel value='providers'>
|
|
<ScrollArea
|
|
className={scrollAreaClasses.default}
|
|
classNames={scrollAreaClasses}
|
|
>
|
|
<SearchProviders />
|
|
</ScrollArea>
|
|
</Tabs.Panel>
|
|
<Tabs.Panel value='history'>
|
|
<ScrollArea
|
|
className={scrollAreaClasses.default}
|
|
classNames={scrollAreaClasses}
|
|
>
|
|
<SearchHistory />
|
|
</ScrollArea>
|
|
</Tabs.Panel>
|
|
{personal?.enableWol ? (
|
|
<Tabs.Panel value='wolClients'>
|
|
<ScrollArea
|
|
className={scrollAreaClasses.default}
|
|
classNames={scrollAreaClasses}
|
|
>
|
|
<WolClients />
|
|
</ScrollArea>
|
|
</Tabs.Panel>
|
|
) : null}
|
|
{personal?.enableGuacamole ? (
|
|
<Tabs.Panel value='guacamoleClients'>
|
|
<ScrollArea
|
|
className={scrollAreaClasses.default}
|
|
classNames={scrollAreaClasses}
|
|
>
|
|
<GuacamoleClients />
|
|
</ScrollArea>
|
|
</Tabs.Panel>
|
|
) : null}
|
|
</Tabs>
|
|
</Stack>
|
|
);
|
|
}
|
|
export default Settings;
|