Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

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>

src/renderer/features/action-required/components/error-fallback.module.css

@@ -0,0 +1,3 @@
+.container {
+    background: var(--theme-colors-background);
+}

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>
     );
 };

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);
     };
 

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>
     );
 };
 

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();

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>
+                );
+            })}
         </>
     );
-};
+}