move settings page to modal instead of route

src/renderer/features/search/components/go-to-commands.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router';
 
 import { Command, CommandPalettePages } from '/@/renderer/features/search/components/command';
+import { openSettingsModal } from '/@/renderer/features/settings/utils/open-settings-modal';
 import { AppRoute } from '/@/renderer/router/routes';
 
 interface GoToCommandsProps {
@@ -34,7 +35,14 @@ export const GoToCommands = ({ handleClose, setPages, setQuery }: GoToCommandsPr
                 <Command.Item onSelect={() => goTo(AppRoute.SEARCH)}>
                     {t('page.sidebar.search', { postProcess: 'titleCase' })}
                 </Command.Item>
-                <Command.Item onSelect={() => goTo(AppRoute.SETTINGS)}>
+                <Command.Item
+                    onSelect={() => {
+                        openSettingsModal();
+                        handleClose();
+                        setPages([CommandPalettePages.HOME]);
+                        setQuery('');
+                    }}
+                >
                     {t('page.sidebar.settings', { postProcess: 'titleCase' })}
                 </Command.Item>
             </Command.Group>

src/renderer/features/settings/components/settings-content.tsx

@@ -2,6 +2,7 @@ import isElectron from 'is-electron';
 import { lazy } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { useSettingsStore, useSettingsStoreActions } from '/@/renderer/store/settings.store';
 import { Tabs } from '/@/shared/components/tabs/tabs';
 
@@ -41,51 +42,53 @@ export const SettingsContent = () => {
     const { setSettings } = useSettingsStoreActions();
 
     return (
-        <div style={{ height: '100%', overflow: 'scroll', padding: '1rem', width: '100%' }}>
+        <LibraryContainer>
-            <Tabs
+            <div style={{ height: '100%', overflow: 'scroll', padding: '1rem', width: '100%' }}>
-                keepMounted={false}
+                <Tabs
-                onChange={(e) => e && setSettings({ tab: e })}
+                    keepMounted={false}
-                orientation="horizontal"
+                    onChange={(e) => e && setSettings({ tab: e })}
-                value={currentTab}
+                    orientation="horizontal"
-                variant="default"
+                    value={currentTab}
-            >
+                    variant="default"
-                <Tabs.List>
+                >
-                    <Tabs.Tab value="general">
+                    <Tabs.List>
-                        {t('page.setting.generalTab', { postProcess: 'sentenceCase' })}
+                        <Tabs.Tab value="general">
-                    </Tabs.Tab>
+                            {t('page.setting.generalTab', { postProcess: 'sentenceCase' })}
-                    <Tabs.Tab value="playback">
-                        {t('page.setting.playbackTab', { postProcess: 'sentenceCase' })}
-                    </Tabs.Tab>
-                    <Tabs.Tab value="hotkeys">
-                        {t('page.setting.hotkeysTab', { postProcess: 'sentenceCase' })}
-                    </Tabs.Tab>
-                    {isElectron() && (
-                        <Tabs.Tab value="window">
-                            {t('page.setting.windowTab', { postProcess: 'sentenceCase' })}
                         </Tabs.Tab>
-                    )}
+                        <Tabs.Tab value="playback">
-                    <Tabs.Tab value="advanced">
+                            {t('page.setting.playbackTab', { postProcess: 'sentenceCase' })}
-                        {t('page.setting.advanced', { postProcess: 'sentenceCase' })}
+                        </Tabs.Tab>
-                    </Tabs.Tab>
+                        <Tabs.Tab value="hotkeys">
-                </Tabs.List>
+                            {t('page.setting.hotkeysTab', { postProcess: 'sentenceCase' })}
-                <Tabs.Panel value="general">
+                        </Tabs.Tab>
-                    <GeneralTab />
+                        {isElectron() && (
-                </Tabs.Panel>
+                            <Tabs.Tab value="window">
-                <Tabs.Panel value="playback">
+                                {t('page.setting.windowTab', { postProcess: 'sentenceCase' })}
-                    <PlaybackTab />
+                            </Tabs.Tab>
-                </Tabs.Panel>
+                        )}
-                <Tabs.Panel value="hotkeys">
+                        <Tabs.Tab value="advanced">
-                    <HotkeysTab />
+                            {t('page.setting.advanced', { postProcess: 'sentenceCase' })}
-                </Tabs.Panel>
+                        </Tabs.Tab>
-                {isElectron() && (
+                    </Tabs.List>
-                    <Tabs.Panel value="window">
+                    <Tabs.Panel value="general">
-                        <ApplicationTab />
+                        <GeneralTab />
                     </Tabs.Panel>
-                )}
+                    <Tabs.Panel value="playback">
-                <Tabs.Panel value="advanced">
+                        <PlaybackTab />
-                    <AdvancedTab />
+                    </Tabs.Panel>
-                </Tabs.Panel>
+                    <Tabs.Panel value="hotkeys">
-            </Tabs>
+                        <HotkeysTab />
-        </div>
+                    </Tabs.Panel>
+                    {isElectron() && (
+                        <Tabs.Panel value="window">
+                            <ApplicationTab />
+                        </Tabs.Panel>
+                    )}
+                    <Tabs.Panel value="advanced">
+                        <AdvancedTab />
+                    </Tabs.Panel>
+                </Tabs>
+            </div>
+        </LibraryContainer>
     );
 };

src/renderer/features/settings/components/settings-modal.tsx

@@ -0,0 +1,16 @@
+import { useState } from 'react';
+
+import { SettingsContent } from '/@/renderer/features/settings/components/settings-content';
+import { SettingsHeader } from '/@/renderer/features/settings/components/settings-header';
+import { SettingSearchContext } from '/@/renderer/features/settings/context/search-context';
+
+export const SettingsModal = () => {
+    const [search, setSearch] = useState('');
+
+    return (
+        <SettingSearchContext.Provider value={search}>
+            <SettingsHeader setSearch={setSearch} />
+            <SettingsContent />
+        </SettingSearchContext.Provider>
+    );
+};

src/renderer/features/settings/utils/open-settings-modal.ts

@@ -0,0 +1,9 @@
+import { openContextModal } from '@mantine/modals';
+
+export const openSettingsModal = () => {
+    openContextModal({
+        fullScreen: true,
+        innerProps: {},
+        modalKey: 'settings',
+    });
+};

src/renderer/features/titlebar/components/app-menu.tsx

@@ -5,7 +5,7 @@ import { Link, useNavigate } from 'react-router';
 
 import packageJson from '../../../../../package.json';
 
-import { AppRoute } from '/@/renderer/router/routes';
+import { openSettingsModal } from '/@/renderer/features/settings/utils/open-settings-modal';
 import { useAppStore, useAppStoreActions, useSidebarStore } from '/@/renderer/store';
 import { DropdownMenu, MenuItemProps } from '/@/shared/components/dropdown-menu/dropdown-menu';
 import { Icon } from '/@/shared/components/icon/icon';
@@ -181,11 +181,10 @@ export const AppMenu = () => {
             type: 'divider',
         },
         {
-            component: Link,
             icon: 'settings',
             id: 'settings',
             label: t('page.appMenu.settings', { postProcess: 'sentenceCase' }),
-            to: AppRoute.SETTINGS,
+            onClick: openSettingsModal,
             type: 'item',
         },
         {

src/renderer/router/app-router.tsx

@@ -3,6 +3,7 @@ import { HashRouter, Route, Routes } from 'react-router';
 
 import { RouterErrorBoundary } from '/@/renderer/components/error-boundary/router-error-boundary';
 import { AddToPlaylistContextModal } from '/@/renderer/features/playlists/components/add-to-playlist-context-modal';
+import { SettingsModal } from '/@/renderer/features/settings/components/settings-modal';
 import { ShareItemContextModal } from '/@/renderer/features/sharing/components/share-item-context-modal';
 import { ResponsiveLayout } from '/@/renderer/layouts/responsive-layout';
 import { AppOutlet } from '/@/renderer/router/app-outlet';
@@ -62,8 +63,6 @@ const DummyAlbumDetailRoute = lazy(
 
 const GenreListRoute = lazy(() => import('/@/renderer/features/genres/routes/genre-list-route'));
 
-const SettingsRoute = lazy(() => import('/@/renderer/features/settings/routes/settings-route'));
-
 const SearchRoute = lazy(() => import('/@/renderer/features/search/routes/search-route'));
 
 const RouteErrorBoundary = lazy(
@@ -78,6 +77,7 @@ export const AppRouter = () => {
                     modals={{
                         addToPlaylist: AddToPlaylistContextModal,
                         base: BaseContextModal,
+                        settings: SettingsModal,
                         shareItem: ShareItemContextModal,
                     }}
                 >
@@ -100,11 +100,6 @@ export const AppRouter = () => {
                                         errorElement={<RouteErrorBoundary />}
                                         path={AppRoute.SEARCH}
                                     />
-                                    <Route
-                                        element={<SettingsRoute />}
-                                        errorElement={<RouteErrorBoundary />}
-                                        path={AppRoute.SETTINGS}
-                                    />
                                     <Route
                                         element={<NowPlayingRoute />}
                                         errorElement={<RouteErrorBoundary />}