Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration * various design changes and improvements
2026-01-01 10:23:33 +00:00 · 2025-06-24 00:04:36 -07:00 · 2025-06-24 00:04:36 -07:00 · c1330d92b2
commit c1330d92b2
parent bea55d48a8
473 changed files with 12469 additions and 11607 deletions
--- a/src/renderer/features/action-required/components/action-required-container.tsx
+++ b/src/renderer/features/action-required/components/action-required-container.tsx
@ -1,8 +1,9 @@
-import { Group, Stack } from '@mantine/core';
 import { ReactNode } from 'react';
-import { RiAlertFill } from 'react-icons/ri';

-import { Text } from '/@/renderer/components';
+import { Group } from '/@/shared/components/group/group';
+import { Icon } from '/@/shared/components/icon/icon';
+import { Stack } from '/@/shared/components/stack/stack';
+import { Text } from '/@/shared/components/text/text';

 interface ActionRequiredContainerProps {
    children: ReactNode;
@ -10,15 +11,16 @@ interface ActionRequiredContainerProps {
 }

 export const ActionRequiredContainer = ({ children, title }: ActionRequiredContainerProps) => (
-    <Stack sx={{ cursor: 'default', maxWidth: '700px' }}>
+    <Stack style={{ cursor: 'default', maxWidth: '700px' }}>
        <Group>
-            <RiAlertFill
-                color="var(--warning-color)"
-                size={30}
+            <Icon
+                fill="warn"
+                icon="warn"
+                size="lg"
            />
            <Text
                size="xl"
-                sx={{ textTransform: 'uppercase' }}
+                style={{ textTransform: 'uppercase' }}
            >
                {title}
            </Text>
--- a/src/renderer/features/action-required/components/error-fallback.module.css
+++ b/src/renderer/features/action-required/components/error-fallback.module.css
@ -0,0 +1,3 @@
+.container {
+    background: var(--theme-colors-background);
+}
--- a/src/renderer/features/action-required/components/error-fallback.tsx
+++ b/src/renderer/features/action-required/components/error-fallback.tsx
@ -1,39 +1,42 @@
 import type { FallbackProps } from 'react-error-boundary';

-import { Box, Center, Group, Stack } from '@mantine/core';
-import { RiErrorWarningLine } from 'react-icons/ri';
+import { useTranslation } from 'react-i18next';
 import { useRouteError } from 'react-router';
-import styled from 'styled-components';

-import { Button, Text } from '/@/renderer/components';
+import styles from './error-fallback.module.css';

-const Container = styled(Box)`
-    background: var(--main-bg);
-`;
+import { Button } from '/@/shared/components/button/button';
+import { Center } from '/@/shared/components/center/center';
+import { Group } from '/@/shared/components/group/group';
+import { Icon } from '/@/shared/components/icon/icon';
+import { Stack } from '/@/shared/components/stack/stack';
+import { Text } from '/@/shared/components/text/text';

 export const ErrorFallback = ({ resetErrorBoundary }: FallbackProps) => {
    const error = useRouteError() as any;
+    const { t } = useTranslation();

    return (
-        <Container>
-            <Center sx={{ height: '100vh' }}>
-                <Stack sx={{ maxWidth: '50%' }}>
-                    <Group spacing="xs">
-                        <RiErrorWarningLine
-                            color="var(--danger-color)"
-                            size={30}
+        <div className={styles.container}>
+            <Center style={{ height: '100vh' }}>
+                <Stack style={{ maxWidth: '50%' }}>
+                    <Group gap="xs">
+                        <Icon
+                            fill="error"
+                            icon="error"
+                            size="lg"
                        />
-                        <Text size="lg">Something went wrong</Text>
+                        <Text size="lg">{t('error.genericError')}</Text>
                    </Group>
                    <Text>{error?.message}</Text>
                    <Button
                        onClick={resetErrorBoundary}
                        variant="filled"
                    >
-                        Reload
+                        {t('common.reload')}
                    </Button>
                </Stack>
            </Center>
-        </Container>
+        </div>
    );
 };
--- a/src/renderer/features/action-required/components/mpv-required.tsx
+++ b/src/renderer/features/action-required/components/mpv-required.tsx
@ -2,8 +2,11 @@ import isElectron from 'is-electron';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';

-import { Button, Checkbox, FileInput, Text } from '/@/renderer/components';
 import { usePlaybackSettings, useSettingsStoreActions } from '/@/renderer/store';
+import { Button } from '/@/shared/components/button/button';
+import { Checkbox } from '/@/shared/components/checkbox/checkbox';
+import { FileInput } from '/@/shared/components/file-input/file-input';
+import { Text } from '/@/shared/components/text/text';
 import { PlaybackType } from '/@/shared/types/types';

 const localSettings = isElectron() ? window.api.localSettings : null;
@ -15,7 +18,8 @@ export const MpvRequired = () => {
    const [disabled, setDisabled] = useState(false);
    const { t } = useTranslation();

-    const handleSetMpvPath = (e: File) => {
+    const handleSetMpvPath = (e: File | null) => {
+        if (!e) return;
        localSettings?.set('mpv_path', e.path);
    };

--- a/src/renderer/features/action-required/components/route-error-boundary.tsx
+++ b/src/renderer/features/action-required/components/route-error-boundary.tsx
@ -1,12 +1,20 @@
-import { Box, Center, Divider, Group, Stack } from '@mantine/core';
-import { RiArrowLeftSLine, RiErrorWarningLine, RiHome4Line, RiMenuFill } from 'react-icons/ri';
+import { useTranslation } from 'react-i18next';
 import { useNavigate, useRouteError } from 'react-router';

-import { Button, DropdownMenu, Text } from '/@/renderer/components';
 import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
 import { AppRoute } from '/@/renderer/router/routes';
+import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
+import { Button } from '/@/shared/components/button/button';
+import { Center } from '/@/shared/components/center/center';
+import { Divider } from '/@/shared/components/divider/divider';
+import { DropdownMenu } from '/@/shared/components/dropdown-menu/dropdown-menu';
+import { Group } from '/@/shared/components/group/group';
+import { Icon } from '/@/shared/components/icon/icon';
+import { Stack } from '/@/shared/components/stack/stack';
+import { Text } from '/@/shared/components/text/text';

 const RouteErrorBoundary = () => {
+    const { t } = useTranslation();
    const navigate = useNavigate();
    const error = useRouteError() as any;
    console.log('error', error);
@ -24,47 +32,47 @@ const RouteErrorBoundary = () => {
    };

    return (
-        <Box bg="var(--main-bg)">
-            <Center sx={{ height: '100vh' }}>
-                <Stack sx={{ maxWidth: '50%' }}>
+        <div style={{ backgroundColor: 'var(--theme-colors-background)' }}>
+            <Center style={{ height: '100vh' }}>
+                <Stack style={{ maxWidth: '50%' }}>
                    <Group>
-                        <Button
+                        <ActionIcon
+                            icon="arrowLeftS"
                            onClick={handleReturn}
                            px={10}
                            variant="subtle"
-                        >
-                            <RiArrowLeftSLine size={20} />
-                        </Button>
-                        <RiErrorWarningLine
-                            color="var(--danger-color)"
-                            size={30}
                        />
-                        <Text size="lg">Something went wrong</Text>
+                        <Icon
+                            fill="error"
+                            icon="error"
+                            size="lg"
+                        />
+                        <Text size="lg">{t('error.genericError')}</Text>
                    </Group>
                    <Divider my={5} />
                    <Text size="sm">{error?.message}</Text>
                    <Group
+                        gap="sm"
                        grow
-                        spacing="sm"
                    >
                        <Button
-                            leftIcon={<RiHome4Line />}
+                            leftSection={<Icon icon="home" />}
                            onClick={handleHome}
                            size="md"
-                            sx={{ flex: 0.5 }}
+                            style={{ flex: 0.5 }}
                            variant="default"
                        >
-                            Go home
+                            {t('page.home.title')}
                        </Button>
                        <DropdownMenu position="bottom-start">
                            <DropdownMenu.Target>
                                <Button
-                                    leftIcon={<RiMenuFill />}
+                                    leftSection={<Icon icon="menu" />}
                                    size="md"
-                                    sx={{ flex: 0.5 }}
+                                    style={{ flex: 0.5 }}
                                    variant="default"
                                >
-                                    Menu
+                                    {t('common.menu')}
                                </Button>
                            </DropdownMenu.Target>
                            <DropdownMenu.Dropdown>
@ -78,12 +86,12 @@ const RouteErrorBoundary = () => {
                            size="md"
                            variant="filled"
                        >
-                            Reload
+                            {t('common.reload')}
                        </Button>
                    </Group>
                </Stack>
            </Center>
-        </Box>
+        </div>
    );
 };

--- a/src/renderer/features/action-required/components/server-credential-required.tsx
+++ b/src/renderer/features/action-required/components/server-credential-required.tsx
@ -1,5 +1,5 @@
-import { Text } from '/@/renderer/components';
 import { useCurrentServer } from '/@/renderer/store';
+import { Text } from '/@/shared/components/text/text';

 export const ServerCredentialRequired = () => {
    const currentServer = useCurrentServer();
--- a/src/renderer/features/action-required/components/server-required.tsx
+++ b/src/renderer/features/action-required/components/server-required.tsx
@ -1,25 +1,161 @@
-import { RiMenuFill } from 'react-icons/ri';
+import { closeAllModals, openModal } from '@mantine/modals';
+import isElectron from 'is-electron';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router';

-import { Button, DropdownMenu, Text } from '/@/renderer/components';
-import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
+import { AddServerForm } from '/@/renderer/features/servers';
+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 { EditServerForm } from '/@/renderer/features/servers/components/edit-server-form';
+import { AppRoute } from '/@/renderer/router/routes';
+import { useAuthStoreActions, useCurrentServer, useServerList } from '/@/renderer/store';
+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 { ScrollArea } from '/@/shared/components/scroll-area/scroll-area';
+import { Stack } from '/@/shared/components/stack/stack';
+import { Text } from '/@/shared/components/text/text';
+import { ServerListItem, ServerType } from '/@/shared/types/domain-types';
+
+const localSettings = isElectron() ? window.api.localSettings : null;

 export const ServerRequired = () => {
+    const { t } = useTranslation();
+    const serverList = useServerList();
+
+    const serverLock =
+        (localSettings
+            ? !!localSettings.env.SERVER_LOCK
+            : !!window.SERVER_LOCK &&
+              window.SERVER_TYPE &&
+              window.SERVER_NAME &&
+              window.SERVER_URL) || false;
+
+    if (Object.keys(serverList).length > 0) {
+        return (
+            <ScrollArea>
+                <Stack miw="300px">
+                    <ServerSelector />
+                    {serverLock && (
+                        <>
+                            <Divider my="lg" />
+                            <Accordion>
+                                <Accordion.Item value="add-server">
+                                    <Accordion.Control>
+                                        {t('form.addServer.title', { postProcess: 'titleCase' })}
+                                    </Accordion.Control>
+                                    <Accordion.Panel>
+                                        <AddServerForm onCancel={null} />
+                                    </Accordion.Panel>
+                                </Accordion.Item>
+                            </Accordion>
+                        </>
+                    )}
+                </Stack>
+            </ScrollArea>
+        );
+    }
+
+    return <AddServerForm onCancel={null} />;
+};
+
+function ServerSelector() {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const serverList = useServerList();
+    const currentServer = useCurrentServer();
+    const { setCurrentServer } = useAuthStoreActions();
+
+    const handleSetCurrentServer = (server: ServerListItem) => {
+        navigate(AppRoute.HOME);
+        setCurrentServer(server);
+    };
+
+    const handleCredentialsModal = async (server: ServerListItem) => {
+        let password: null | string = null;
+
+        try {
+            if (localSettings && server.savePassword) {
+                password = await localSettings.passwordGet(server.id);
+            }
+        } catch (error) {
+            console.error(error);
+        }
+        openModal({
+            children: server && (
+                <EditServerForm
+                    isUpdate
+                    onCancel={closeAllModals}
+                    password={password}
+                    server={server}
+                />
+            ),
+            size: 'sm',
+            title: t('form.updateServer.title', { postProcess: 'titleCase' }),
+        });
+    };
+
    return (
        <>
-            <Text>No server selected.</Text>
-            <DropdownMenu>
-                <DropdownMenu.Target>
+            {Object.keys(serverList).map((serverId) => {
+                const server = serverList[serverId];
+                const isNavidromeExpired =
+                    server.type === ServerType.NAVIDROME && !server.ndCredential;
+                const isJellyfinExpired = server.type === ServerType.JELLYFIN && !server.credential;
+                const isSessionExpired = isNavidromeExpired || isJellyfinExpired;
+
+                const logo =
+                    server.type === ServerType.NAVIDROME
+                        ? NavidromeLogo
+                        : server.type === ServerType.JELLYFIN
+                          ? JellyfinLogo
+                          : OpenSubsonicLogo;
+
+                return (
                    <Button
-                        leftIcon={<RiMenuFill />}
-                        variant="filled"
+                        key={`server-${server.id}`}
+                        onClick={() => {
+                            if (!isSessionExpired) return handleSetCurrentServer(server);
+                            return handleCredentialsModal(server);
+                        }}
+                        size="lg"
+                        styles={{
+                            label: {
+                                width: '100%',
+                            },
+                            root: {
+                                padding: 'var(--theme-spacing-sm)',
+                            },
+                        }}
+                        variant={server.id === currentServer?.id ? 'filled' : 'default'}
                    >
-                        Open menu
+                        <Group
+                            justify="space-between"
+                            w="100%"
+                        >
+                            <Group>
+                                <img
+                                    src={logo}
+                                    style={{
+                                        height: 'var(--theme-font-size-2xl)',
+                                        width: 'var(--theme-font-size-2xl)',
+                                    }}
+                                />
+                                <Text
+                                    fw={600}
+                                    size="lg"
+                                >
+                                    {server.name}
+                                </Text>
+                            </Group>
+                            {isSessionExpired ? <Icon icon="lock" /> : <Icon icon="arrowRight" />}
+                        </Group>
                    </Button>
-                </DropdownMenu.Target>
-                <DropdownMenu.Dropdown>
-                    <AppMenu />
-                </DropdownMenu.Dropdown>
-            </DropdownMenu>
+                );
+            })}
        </>
    );
-};
+}
--- a/src/renderer/features/action-required/routes/action-required-route.tsx
+++ b/src/renderer/features/action-required/routes/action-required-route.tsx
@ -1,10 +1,8 @@
-import { Center, Group, Stack } from '@mantine/core';
 import { openModal } from '@mantine/modals';
 import { useTranslation } from 'react-i18next';
-import { RiCheckFill, RiEdit2Line, RiHome4Line } from 'react-icons/ri';
-import { Link } from 'react-router-dom';
+import { Navigate } from 'react-router-dom';

-import { Button, PageHeader, Text } from '/@/renderer/components';
+import { PageHeader } from '/@/renderer/components/page-header/page-header';
 import { ActionRequiredContainer } from '/@/renderer/features/action-required/components/action-required-container';
 import { ServerCredentialRequired } from '/@/renderer/features/action-required/components/server-credential-required';
 import { ServerRequired } from '/@/renderer/features/action-required/components/server-required';
@ -12,6 +10,11 @@ import { ServerList } from '/@/renderer/features/servers';
 import { AnimatedPage } from '/@/renderer/features/shared';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer } from '/@/renderer/store';
+import { Button } from '/@/shared/components/button/button';
+import { Center } from '/@/shared/components/center/center';
+import { Group } from '/@/shared/components/group/group';
+import { Icon } from '/@/shared/components/icon/icon';
+import { Stack } from '/@/shared/components/stack/stack';

 const ActionRequiredRoute = () => {
    const { t } = useTranslation();
@ -45,12 +48,12 @@ const ActionRequiredRoute = () => {
    return (
        <AnimatedPage>
            <PageHeader />
-            <Center sx={{ height: '100%', width: '100vw' }}>
+            <Center style={{ height: '100%', width: '100vw' }}>
                <Stack
-                    spacing="xl"
-                    sx={{ maxWidth: '50%' }}
+                    gap="xl"
+                    style={{ maxWidth: '50%' }}
                >
-                    <Group noWrap>
+                    <Group wrap="nowrap">
                        {displayedCheck && (
                            <ActionRequiredContainer title={displayedCheck.title}>
                                {displayedCheck?.component}
@ -58,37 +61,15 @@ const ActionRequiredRoute = () => {
                        )}
                    </Group>
                    <Stack mt="2rem">
-                        {canReturnHome && (
-                            <>
-                                <Group
-                                    noWrap
-                                    position="center"
-                                >
-                                    <RiCheckFill
-                                        color="var(--success-color)"
-                                        size={30}
-                                    />
-                                    <Text size="xl">No issues found</Text>
-                                </Group>
-                                <Button
-                                    component={Link}
-                                    disabled={!canReturnHome}
-                                    leftIcon={<RiHome4Line />}
-                                    to={AppRoute.HOME}
-                                    variant="filled"
-                                >
-                                    Go back
-                                </Button>
-                            </>
-                        )}
+                        {canReturnHome && <Navigate to={AppRoute.HOME} />}
                        {!displayedCheck && (
                            <Group
-                                noWrap
-                                position="center"
+                                justify="center"
+                                wrap="nowrap"
                            >
                                <Button
                                    fullWidth
-                                    leftIcon={<RiEdit2Line />}
+                                    leftSection={<Icon icon="edit" />}
                                    onClick={handleManageServersModal}
                                    variant="filled"
                                >
--- a/src/renderer/features/action-required/routes/invalid-route.tsx
+++ b/src/renderer/features/action-required/routes/invalid-route.tsx
@ -1,35 +1,41 @@
-import { Center, Group, Stack } from '@mantine/core';
-import { RiQuestionLine } from 'react-icons/ri';
+import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';

-import { Button, Text } from '/@/renderer/components';
 import { AnimatedPage } from '/@/renderer/features/shared';
+import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
+import { Center } from '/@/shared/components/center/center';
+import { Group } from '/@/shared/components/group/group';
+import { Icon } from '/@/shared/components/icon/icon';
+import { Stack } from '/@/shared/components/stack/stack';
+import { Text } from '/@/shared/components/text/text';

 const InvalidRoute = () => {
+    const { t } = useTranslation();
    const navigate = useNavigate();
    const location = useLocation();

    return (
        <AnimatedPage>
-            <Center sx={{ height: '100%', width: '100%' }}>
+            <Center style={{ height: '100%', width: '100%' }}>
                <Stack>
                    <Group
-                        noWrap
-                        position="center"
+                        justify="center"
+                        wrap="nowrap"
                    >
-                        <RiQuestionLine
-                            color="var(--warning-color)"
-                            size={30}
+                        <Icon
+                            color="warn"
+                            icon="error"
                        />
-                        <Text size="xl">Page not found</Text>
+                        <Text size="xl">
+                            {t('error.apiRouteError', { postProcess: 'sentenceCase' })}
+                        </Text>
                    </Group>
                    <Text>{location.pathname}</Text>
-                    <Button
+                    <ActionIcon
+                        icon="arrowLeftS"
                        onClick={() => navigate(-1)}
                        variant="filled"
-                    >
-                        Go back
-                    </Button>
+                    />
                </Stack>
            </Center>
        </AnimatedPage>