[enhancement]: add server menu on Navidrome error page

src/renderer/features/action-required/routes/action-required-route.tsx

@@ -1,6 +1,6 @@
 import { Center, Group, Stack } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
-import { RiCheckFill } from 'react-icons/ri';
+import { RiCheckFill, RiEdit2Line, RiHome4Line } from 'react-icons/ri';
 import { Link } from 'react-router-dom';
 import { Button, PageHeader, Text } from '/@/renderer/components';
 import { ActionRequiredContainer } from '/@/renderer/features/action-required/components/action-required-container';
@@ -9,6 +9,8 @@ import { ServerRequired } from '/@/renderer/features/action-required/components/
 import { AnimatedPage } from '/@/renderer/features/shared';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer } from '/@/renderer/store';
+import { openModal } from '@mantine/modals';
+import { ServerList } from '/@/renderer/features/servers';
 
 const ActionRequiredRoute = () => {
     const { t } = useTranslation();
@@ -32,6 +34,13 @@ const ActionRequiredRoute = () => {
     const canReturnHome = checks.every((c) => c.valid);
     const displayedCheck = checks.find((c) => !c.valid);
 
+    const handleManageServersModal = () => {
+        openModal({
+            children: <ServerList />,
+            title: 'Manage Servers',
+        });
+    };
+
     return (
         <AnimatedPage>
             <PageHeader />
@@ -63,6 +72,7 @@ const ActionRequiredRoute = () => {
                                 <Button
                                     component={Link}
                                     disabled={!canReturnHome}
+                                    leftIcon={<RiHome4Line />}
                                     to={AppRoute.HOME}
                                     variant="filled"
                                 >
@@ -70,6 +80,19 @@ const ActionRequiredRoute = () => {
                                 </Button>
                             </>
                         )}
+                        <Group
+                            noWrap
+                            position="center"
+                        >
+                            <Button
+                                fullWidth
+                                leftIcon={<RiEdit2Line />}
+                                variant="filled"
+                                onClick={handleManageServersModal}
+                            >
+                                {t('page.appMenu.manageServers', { postProcess: 'sentenceCase' })}
+                            </Button>
+                        </Group>
                     </Stack>
                 </Stack>
             </Center>

src/renderer/features/servers/components/server-list.tsx

@@ -1,6 +1,6 @@
 import { ChangeEvent } from 'react';
 import { Divider, Group, Stack } from '@mantine/core';
-import { Accordion, Button, ContextModalVars, Switch } from '/@/renderer/components';
+import { Accordion, Button, ContextModalVars, Switch, Text } from '/@/renderer/components';
 import { useLocalStorage } from '@mantine/hooks';
 import { openContextModal } from '@mantine/modals';
 import isElectron from 'is-electron';
@@ -8,13 +8,14 @@ import { useTranslation } from 'react-i18next';
 import { RiAddFill, RiServerFill } from 'react-icons/ri';
 import { AddServerForm } from '/@/renderer/features/servers/components/add-server-form';
 import { ServerListItem } from '/@/renderer/features/servers/components/server-list-item';
-import { useServerList } from '/@/renderer/store';
+import { useCurrentServer, useServerList } from '/@/renderer/store';
 import { titleCase } from '/@/renderer/utils';
 
 const localSettings = isElectron() ? window.electron.localSettings : null;
 
 export const ServerList = () => {
     const { t } = useTranslation();
+    const currentServer = useCurrentServer();
     const serverListQuery = useServerList();
 
     const handleAddServerModal = () => {
@@ -90,7 +91,9 @@ export const ServerList = () => {
                             >
                                 <Accordion.Control icon={<RiServerFill size={15} />}>
                                     <Group position="apart">
-                                        {titleCase(server?.type)} - {server?.name}
+                                        <Text weight={server.id === currentServer?.id ? 800 : 400}>
+                                            {titleCase(server?.type)} - {server?.name}
+                                        </Text>
                                     </Group>
                                 </Accordion.Control>
                                 <Accordion.Panel>

src/renderer/hooks/use-server-authenticated.ts

@@ -4,6 +4,7 @@ import { AuthState, ServerListItem, ServerType } from '/@/renderer/types';
 import { api } from '/@/renderer/api';
 import { SongListSort, SortOrder } from '/@/renderer/api/types';
 import { debounce } from 'lodash';
+import { toast } from '/@/renderer/components';
 
 export const useServerAuthenticated = () => {
     const priorServerId = useRef<string>();
@@ -29,6 +30,7 @@ export const useServerAuthenticated = () => {
 
             setReady(AuthState.VALID);
         } catch (error) {
+            toast.error({ message: (error as Error).message });
             setReady(AuthState.INVALID);
         }
     }, []);