diff --git a/src/components/AppShelf/AddAppShelfItem.tsx b/src/components/AppShelf/AddAppShelfItem.tsx index 2d41feaee..009472bbe 100644 --- a/src/components/AppShelf/AddAppShelfItem.tsx +++ b/src/components/AppShelf/AddAppShelfItem.tsx @@ -8,8 +8,8 @@ import { LoadingOverlay, Modal, MultiSelect, - ScrollArea, Select, + Stack, Switch, Tabs, TextInput, @@ -18,7 +18,7 @@ import { } from '@mantine/core'; import { useForm } from '@mantine/form'; import { useDebouncedValue } from '@mantine/hooks'; -import { IconApps as Apps } from '@tabler/icons'; +import { IconApps } from '@tabler/icons'; import { useEffect, useState } from 'react'; import { v4 as uuidv4 } from 'uuid'; import { useConfig } from '../../tools/state'; @@ -38,18 +38,18 @@ export function AddItemShelfButton(props: any) { > - setOpened(true)} - > - - - - + + setOpened(true)} + > + + + ); } @@ -192,151 +192,153 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } & form.reset(); })} > - - - - - + + + Options + Advanced options + + + + - - - - { - e.preventDefault(); - }} - getCreateLabel={(query) => `+ Create "${query}"`} - onCreate={(query) => {}} - {...form.getInputProps('category')} - /> - - {(form.values.type === 'Sonarr' || - form.values.type === 'Radarr' || - form.values.type === 'Lidarr' || - form.values.type === 'Readarr') && ( - <> - { - form.setFieldValue('apiKey', event.currentTarget.value); - }} - error={form.errors.apiKey && 'Invalid API key'} - /> - - Get your API key{' '} - - here. - - - - )} - {form.values.type === 'qBittorrent' && ( - <> - { - form.setFieldValue('username', event.currentTarget.value); - }} - error={form.errors.username && 'Invalid username'} - /> - { - form.setFieldValue('password', event.currentTarget.value); - }} - error={form.errors.password && 'Invalid password'} - /> - - )} - {form.values.type === 'Deluge' && ( - <> - { - form.setFieldValue('password', event.currentTarget.value); - }} - error={form.errors.password && 'Invalid password'} - /> - - )} - {form.values.type === 'Transmission' && ( - <> - { - form.setFieldValue('username', event.currentTarget.value); - }} - error={form.errors.username && 'Invalid username'} - /> - { - form.setFieldValue('password', event.currentTarget.value); - }} - error={form.errors.password && 'Invalid password'} - /> - - )} - - - - - + + + + { + e.preventDefault(); + }} + getCreateLabel={(query) => `+ Create "${query}"`} + onCreate={(query) => {}} + {...form.getInputProps('category')} + /> + + {(form.values.type === 'Sonarr' || + form.values.type === 'Radarr' || + form.values.type === 'Lidarr' || + form.values.type === 'Readarr') && ( + <> + { + form.setFieldValue('apiKey', event.currentTarget.value); + }} + error={form.errors.apiKey && 'Invalid API key'} + /> + + Get your API key{' '} + + here. + + + + )} + {form.values.type === 'qBittorrent' && ( + <> + { + form.setFieldValue('username', event.currentTarget.value); + }} + error={form.errors.username && 'Invalid username'} + /> + { + form.setFieldValue('password', event.currentTarget.value); + }} + error={form.errors.password && 'Invalid password'} + /> + + )} + {form.values.type === 'Deluge' && ( + <> + { + form.setFieldValue('password', event.currentTarget.value); + }} + error={form.errors.password && 'Invalid password'} + /> + + )} + {form.values.type === 'Transmission' && ( + <> + { + form.setFieldValue('username', event.currentTarget.value); + }} + error={form.errors.username && 'Invalid username'} + /> + { + form.setFieldValue('password', event.currentTarget.value); + }} + error={form.errors.password && 'Invalid password'} + /> + + )} + + + + void } & defaultChecked={form.values.newTab} {...form.getInputProps('newTab')} /> - - + + diff --git a/src/components/AppShelf/AppShelf.tsx b/src/components/AppShelf/AppShelf.tsx index 2d461663f..c0c81690b 100644 --- a/src/components/AppShelf/AppShelf.tsx +++ b/src/components/AppShelf/AppShelf.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { Accordion, createStyles, Grid, Group, Paper, useMantineColorScheme } from '@mantine/core'; +import { Accordion, createStyles, Grid, Group, Paper, Stack, useMantineColorScheme } from '@mantine/core'; import { closestCenter, DndContext, @@ -156,7 +156,7 @@ const AppShelf = (props: any) => { // Create an item with 0: true, 1: true, 2: true... For each category return ( // Return one item for each category - + { ) : null} - + ); } return ( - + {item()} - + ); }; diff --git a/src/components/AppShelf/AppShelfMenu.tsx b/src/components/AppShelf/AppShelfMenu.tsx index 78f9b10ad..2ab76a183 100644 --- a/src/components/AppShelf/AppShelfMenu.tsx +++ b/src/components/AppShelf/AppShelfMenu.tsx @@ -1,7 +1,7 @@ -import { Menu, Modal, Text, useMantineTheme } from '@mantine/core'; +import { ActionIcon, Menu, Modal, Text, useMantineTheme } from '@mantine/core'; import { showNotification } from '@mantine/notifications'; import { useState } from 'react'; -import { IconCheck as Check, IconEdit as Edit, IconTrash as Trash } from '@tabler/icons'; +import { IconCheck as Check, IconEdit as Edit, IconMenu, IconTrash as Trash } from '@tabler/icons'; import { useConfig } from '../../tools/state'; import { serviceItem } from '../../tools/types'; import { AddAppShelfItemForm } from './AddAppShelfItem'; @@ -23,49 +23,60 @@ export default function AppShelfMenu(props: any) { - Settings - } - // TODO: #2 Add the ability to edit the service. - onClick={() => setOpened(true)} - > - Edit - - Danger zone - { - setConfig({ - ...config, - services: config.services.filter((s) => s.id !== service.id), - }); - showNotification({ - autoClose: 5000, - title: ( - - Service {service.name} removed successfully! - - ), - color: 'green', - icon: , - message: undefined, - }); - }} - icon={} - > - Delete - + + + + + + + Settings + } + // TODO: #2 Add the ability to edit the service. + onClick={() => setOpened(true)} + > + Edit + + Danger zone + { + setConfig({ + ...config, + services: config.services.filter((s) => s.id !== service.id), + }); + showNotification({ + autoClose: 5000, + title: ( + + Service {service.name} removed successfully! + + ), + color: 'green', + icon: , + message: undefined, + }); + }} + icon={} + > + Delete + + ); diff --git a/src/components/Config/ConfigChanger.tsx b/src/components/Config/ConfigChanger.tsx index 14e8cf5e5..b2c5a3898 100644 --- a/src/components/Config/ConfigChanger.tsx +++ b/src/components/Config/ConfigChanger.tsx @@ -5,25 +5,27 @@ import { useConfig } from '../../tools/state'; export default function ConfigChanger() { const { config, loadConfig, setConfig, getConfigs } = useConfig(); - const [configList, setConfigList] = useState([] as string[]); + const [configList, setConfigList] = useState([]); + const [value, setValue] = useState(config.name); useEffect(() => { getConfigs().then((configs) => setConfigList(configs)); - // setConfig(initialConfig); }, [config]); // If configlist is empty, return a loading indicator if (configList.length === 0) { return ( -
- + +
- -
+
+ ); } + // return { loadConfig(e ?? 'default'); setCookie('config-name', e ?? 'default', { diff --git a/src/components/Config/LoadConfig.tsx b/src/components/Config/LoadConfig.tsx index 6935c1f72..f29d65a75 100644 --- a/src/components/Config/LoadConfig.tsx +++ b/src/components/Config/LoadConfig.tsx @@ -6,11 +6,11 @@ import { IconCheck as Check, TablerIcon, } from '@tabler/icons'; -import { DropzoneStatus, FullScreenDropzone } from '@mantine/dropzone'; import { showNotification } from '@mantine/notifications'; import { useRef } from 'react'; import { useRouter } from 'next/router'; import { setCookie } from 'cookies-next'; +import { Dropzone } from '@mantine/dropzone'; import { useConfig } from '../../tools/state'; import { Config } from '../../tools/types'; import { migrateToIdConfig } from '../../tools/migrate'; @@ -62,7 +62,7 @@ export default function LoadConfigComponent(props: any) { const openRef = useRef<() => void>(); return ( - { files[0].text().then((e) => { try { @@ -100,7 +100,7 @@ export default function LoadConfigComponent(props: any) { }} accept={['application/json']} > - {(status) => dropzoneChildren(status, theme)} - + {(status: any) => dropzoneChildren(status, theme)} + ); } diff --git a/src/components/Settings/AdvancedSettings.tsx b/src/components/Settings/AdvancedSettings.tsx index 4c7d6a50e..05f631d6b 100644 --- a/src/components/Settings/AdvancedSettings.tsx +++ b/src/components/Settings/AdvancedSettings.tsx @@ -1,4 +1,4 @@ -import { TextInput, Group, Button } from '@mantine/core'; +import { TextInput, Group, Button, Stack } from '@mantine/core'; import { useForm } from '@mantine/form'; import { useConfig } from '../../tools/state'; import { ColorSelector } from './ColorSelector'; @@ -37,9 +37,9 @@ export default function TitleChanger() { }; return ( - +
saveChanges(values))}> - + - +
- + ); } diff --git a/src/components/Settings/AppCardWidthSelector.tsx b/src/components/Settings/AppCardWidthSelector.tsx index 945778e67..bd9e74223 100644 --- a/src/components/Settings/AppCardWidthSelector.tsx +++ b/src/components/Settings/AppCardWidthSelector.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Group, Text, Slider } from '@mantine/core'; +import { Group, Text, Slider, Stack } from '@mantine/core'; import { useConfig } from '../../tools/state'; export function AppCardWidthSelector() { @@ -16,7 +16,7 @@ export function AppCardWidthSelector() { }; return ( - + App Width setappCardWidth(value)} /> - + ); } diff --git a/src/components/Settings/ColorSelector.tsx b/src/components/Settings/ColorSelector.tsx index e7f175b3d..cd8ed5af3 100644 --- a/src/components/Settings/ColorSelector.tsx +++ b/src/components/Settings/ColorSelector.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { ColorSwatch, Group, Popover, Text, useMantineTheme } from '@mantine/core'; +import { ColorSwatch, Grid, Group, Popover, Text, useMantineTheme } from '@mantine/core'; import { useConfig } from '../../tools/state'; import { useColorTheme } from '../../tools/color'; @@ -44,51 +44,44 @@ export function ColorSelector({ type }: ColorControlProps) { }; const swatches = colors.map(({ color, swatch }) => ( - setConfigColor(color)} - key={color} - color={swatch} - size={22} - style={{ color: theme.white, cursor: 'pointer' }} - /> + + setConfigColor(color)} + key={color} + color={swatch} + size={22} + style={{ cursor: 'pointer' }} + /> + )); return ( - + setOpened(false)} - transitionDuration={0} - target={ + position="left" + withArrow + > + setOpened((o) => !o)} size={22} - style={{ display: 'block', cursor: 'pointer' }} + style={{ cursor: 'pointer' }} /> - } - styles={{ - root: { - marginRight: theme.spacing.xs, - }, - body: { - width: 152, - backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white, - }, - arrow: { - backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white, - }, - }} - position="bottom" - placement="end" - withArrow - arrowSize={3} - > - {swatches} + + + + {swatches} + + {type[0].toUpperCase() + type.slice(1)} color diff --git a/src/components/Settings/CommonSettings.tsx b/src/components/Settings/CommonSettings.tsx index 4d55eee18..d65850ec4 100644 --- a/src/components/Settings/CommonSettings.tsx +++ b/src/components/Settings/CommonSettings.tsx @@ -1,4 +1,4 @@ -import { Group, Text, SegmentedControl, TextInput } from '@mantine/core'; +import { Group, Text, SegmentedControl, TextInput, Stack } from '@mantine/core'; import { useState } from 'react'; import { useConfig } from '../../tools/state'; import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch'; @@ -24,8 +24,8 @@ export default function CommonSettings(args: any) { ); return ( - - + + Search engine Use the prefixes !yt and !t in front of your query to search on YouTube or @@ -74,13 +74,13 @@ export default function CommonSettings(args: any) { /> )} - + Upload your config file by dragging and dropping it onto the page! - + ); } diff --git a/src/components/Settings/OpacitySelector.tsx b/src/components/Settings/OpacitySelector.tsx index f94225cd8..8a898ded2 100644 --- a/src/components/Settings/OpacitySelector.tsx +++ b/src/components/Settings/OpacitySelector.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Group, Text, Slider } from '@mantine/core'; +import { Group, Text, Slider, Stack } from '@mantine/core'; import { useConfig } from '../../tools/state'; export function OpacitySelector() { @@ -29,7 +29,7 @@ export function OpacitySelector() { }; return ( - + App Opacity setConfigOpacity(value)} /> - + ); } diff --git a/src/components/Settings/SettingsMenu.tsx b/src/components/Settings/SettingsMenu.tsx index fcd6d1b91..af1a265a1 100644 --- a/src/components/Settings/SettingsMenu.tsx +++ b/src/components/Settings/SettingsMenu.tsx @@ -8,17 +8,21 @@ import Credits from './Credits'; function SettingsMenu(props: any) { return ( - - + + + Common + Customizations + + - - + + - + ); } diff --git a/src/components/Settings/ShadeSelector.tsx b/src/components/Settings/ShadeSelector.tsx index ebd55e84d..f05b3dfc5 100644 --- a/src/components/Settings/ShadeSelector.tsx +++ b/src/components/Settings/ShadeSelector.tsx @@ -1,5 +1,14 @@ import React, { useState } from 'react'; -import { ColorSwatch, Group, Popover, Text, useMantineTheme, MantineTheme } from '@mantine/core'; +import { + ColorSwatch, + Group, + Popover, + Text, + useMantineTheme, + MantineTheme, + Stack, + Grid, +} from '@mantine/core'; import { useConfig } from '../../tools/state'; import { useColorTheme } from '../../tools/color'; @@ -31,36 +40,44 @@ export function ShadeSelector() { }; const primarySwatches = primaryShades.map(({ swatch, shade }) => ( - setConfigShade(shade)} - key={Number(shade)} - color={swatch} - size={22} - style={{ color: theme.white, cursor: 'pointer' }} - /> + + setConfigShade(shade)} + key={Number(shade)} + color={swatch} + size={22} + style={{ cursor: 'pointer' }} + /> + )); const secondarySwatches = secondaryShades.map(({ swatch, shade }) => ( - setConfigShade(shade)} - key={Number(shade)} - color={swatch} - size={22} - style={{ color: theme.white, cursor: 'pointer' }} - /> + + setConfigShade(shade)} + key={Number(shade)} + color={swatch} + size={22} + style={{ cursor: 'pointer' }} + /> + )); return ( - + setOpened(false)} - transitionDuration={0} - target={ + position="left" + withArrow + > + - } - styles={{ - root: { - marginRight: theme.spacing.xs, - }, - body: { - backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white, - }, - arrow: { - backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white, - }, - }} - position="bottom" - placement="end" - withArrow - arrowSize={3} - > - - {primarySwatches} - {secondarySwatches} - + + + + + {primarySwatches} + {secondarySwatches} + + + Shade diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index be3120a8d..7d675f5a8 100644 --- a/src/components/layout/Header.tsx +++ b/src/components/layout/Header.tsx @@ -1,5 +1,4 @@ import { Box, createStyles, Group, Header as Head } from '@mantine/core'; -import { useBooleanToggle } from '@mantine/hooks'; import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem'; import DockerMenuButton from '../../modules/docker/DockerModule'; @@ -23,9 +22,7 @@ const useStyles = createStyles((theme) => ({ })); export function Header(props: any) { - const [opened, toggleOpened] = useBooleanToggle(false); const { classes, cx } = useStyles(); - const [hidden, toggleHidden] = useBooleanToggle(true); return ( diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx index 0df7c4374..d91a3122d 100644 --- a/src/components/layout/Layout.tsx +++ b/src/components/layout/Layout.tsx @@ -18,6 +18,7 @@ export default function Layout({ children, style }: any) { return ( } navbar={widgetPosition ? : undefined} aside={widgetPosition ? undefined :