Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements
This commit is contained in:
Jeff 2025-06-24 00:04:36 -07:00 committed by GitHub
parent bea55d48a8
commit c1330d92b2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
473 changed files with 12469 additions and 11607 deletions

View file

@ -1,16 +1,25 @@
import { Divider, Group, Stack } from '@mantine/core';
import { useLocalStorage } from '@mantine/hooks';
import { openContextModal } from '@mantine/modals';
import isElectron from 'is-electron';
import { ChangeEvent } from 'react';
import { useTranslation } from 'react-i18next';
import { RiAddFill, RiServerFill } from 'react-icons/ri';
import { Accordion, Button, ContextModalVars, Switch, Text } from '/@/renderer/components';
import JellyfinLogo from '/@/renderer/features/servers/assets/jellyfin.png';
import NavidromeLogo from '/@/renderer/features/servers/assets/navidrome.png';
import OpenSubsonicLogo from '/@/renderer/features/servers/assets/opensubsonic.png';
import { AddServerForm } from '/@/renderer/features/servers/components/add-server-form';
import { ServerListItem } from '/@/renderer/features/servers/components/server-list-item';
import { useCurrentServer, useServerList } from '/@/renderer/store';
import { titleCase } from '/@/renderer/utils';
import { Accordion } from '/@/shared/components/accordion/accordion';
import { Button } from '/@/shared/components/button/button';
import { Divider } from '/@/shared/components/divider/divider';
import { Group } from '/@/shared/components/group/group';
import { Icon } from '/@/shared/components/icon/icon';
import { ContextModalVars } from '/@/shared/components/modal/modal';
import { Stack } from '/@/shared/components/stack/stack';
import { Switch } from '/@/shared/components/switch/switch';
import { Text } from '/@/shared/components/text/text';
import { ServerType } from '/@/shared/types/domain-types';
const localSettings = isElectron() ? window.api.localSettings : null;
@ -59,27 +68,6 @@ export const ServerList = () => {
return (
<>
<Group
mb={10}
position="right"
sx={{
position: 'absolute',
right: 55,
transform: 'translateY(-3.5rem)',
zIndex: 2000,
}}
>
<Button
autoFocus
compact
leftIcon={<RiAddFill size={15} />}
onClick={handleAddServerModal}
size="sm"
variant="filled"
>
{t('form.addServer.title', { postProcess: 'titleCase' })}
</Button>
</Group>
<Stack>
<Accordion variant="separated">
{Object.keys(serverListQuery)?.map((serverId) => {
@ -89,10 +77,23 @@ export const ServerList = () => {
key={server.id}
value={server.name}
>
<Accordion.Control icon={<RiServerFill size={15} />}>
<Group position="apart">
<Text weight={server.id === currentServer?.id ? 800 : 400}>
{titleCase(server?.type)} - {server?.name}
<Accordion.Control>
<Group>
<img
src={
server.type === ServerType.NAVIDROME
? NavidromeLogo
: server.type === ServerType.JELLYFIN
? JellyfinLogo
: OpenSubsonicLogo
}
style={{
height: 'var(--theme-font-size-lg)',
width: 'var(--theme-font-size-lg)',
}}
/>
<Text fw={server.id === currentServer?.id ? 600 : 400}>
{server?.name}
</Text>
</Group>
</Accordion.Control>
@ -102,6 +103,18 @@ export const ServerList = () => {
</Accordion.Item>
);
})}
<Group
grow
pt="md"
>
<Button
autoFocus
leftSection={<Icon icon="add" />}
onClick={handleAddServerModal}
>
{t('form.addServer.title', { postProcess: 'titleCase' })}
</Button>
</Group>
</Accordion>
{isElectron() && (
<>