move settings page back into modal

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 {
@@ -36,7 +37,7 @@ export const GoToCommands = ({ handleClose, setPages, setQuery }: GoToCommandsPr
                 </Command.Item>
                 <Command.Item
                     onSelect={() => {
-                        goTo(AppRoute.SETTINGS);
+                        openSettingsModal();
                     }}
                 >
                     {t('page.sidebar.settings', { postProcess: 'titleCase' })}

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

@@ -41,7 +41,7 @@ export const SettingsHeader = ({ setSearch }: SettingsHeaderProps) => {
     return (
         <Flex>
             <PageHeader>
-                <LibraryHeaderBar ignoreMaxWidth>
+                <LibraryHeaderBar>
                     <Flex align="center" justify="space-between" w="100%">
                         <Group wrap="nowrap">
                             <Icon icon="settings" size="5xl" />

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

@@ -10,9 +10,8 @@ export const openSettingsModal = () => {
         size: '2xl',
         styles: {
             content: {
-                height: '80%',
+                height: '100%',
-                maxWidth: '960px',
+                maxWidth: 'var(--theme-content-max-width)',
-                minHeight: '540px',
                 width: '100%',
             },
         },

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

@@ -7,7 +7,7 @@ import { Link, useNavigate } from 'react-router';
 import packageJson from '../../../../../package.json';
 
 import { ServerList } from '/@/renderer/features/servers/components/server-list';
-import { AppRoute } from '/@/renderer/router/routes';
+import { openSettingsModal } from '/@/renderer/features/settings/utils/open-settings-modal';
 import { useAppStore, useAppStoreActions, useCommandPalette } from '/@/renderer/store';
 import { DropdownMenu, MenuItemProps } from '/@/shared/components/dropdown-menu/dropdown-menu';
 import { Icon } from '/@/shared/components/icon/icon';
@@ -195,7 +195,7 @@ export const AppMenu = () => {
             icon: 'settings',
             id: 'settings',
             label: t('page.appMenu.settings', { postProcess: 'sentenceCase' }),
-            onClick: () => navigate(AppRoute.SETTINGS),
+            onClick: () => openSettingsModal(),
             type: 'item',
         },
         {