refactor(server): config system (#11081)

packages/frontend/admin/src/modules/nav/collapsible-item.tsx

@@ -5,20 +5,15 @@ import {
   AccordionTrigger,
 } from '@affine/admin/components/ui/accordion';
 import { useCallback } from 'react';
-import { NavLink, useLocation } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 
 export const CollapsibleItem = ({
-  items,
   title,
   changeModule,
 }: {
   title: string;
-  items: string[];
   changeModule?: (module: string) => void;
 }) => {
-  const location = useLocation();
-  const activeSubTab = location.hash.slice(1);
-
   const handleClick = useCallback(
     (id: string) => {
       const targetElement = document.getElementById(id);
@@ -50,26 +45,6 @@ export const CollapsibleItem = ({
             {title}
           </AccordionTrigger>
         </NavLink>
-        <AccordionContent className="flex flex-col gap-2 py-1">
-          {items.map(item => (
-            <NavLink
-              key={item}
-              to={`/admin/settings/${title}#${item}`}
-              className={({ isActive }) => {
-                return isActive && activeSubTab === item
-                  ? `transition-all overflow-hidden w-full bg-zinc-100 inline-flex items-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50`
-                  : '';
-              }}
-            >
-              <AccordionContent
-                onClick={() => handleClick(item)}
-                className={`py-1 px-2 rounded text-ellipsis whitespace-nowrap overflow-hidden`}
-              >
-                {item}
-              </AccordionContent>
-            </NavLink>
-          ))}
-        </AccordionContent>
       </AccordionItem>
     </Accordion>
   );
@@ -79,10 +54,7 @@ export const OtherModules = ({
   moduleList,
   changeModule,
 }: {
-  moduleList: {
-    moduleName: string;
-    keys: string[];
-  }[];
+  moduleList: string[];
   changeModule?: (module: string) => void;
 }) => {
   return (
@@ -94,9 +66,8 @@ export const OtherModules = ({
         <AccordionContent className="flex flex-col gap-2 py-1">
           {moduleList.map(module => (
             <CollapsibleItem
-              key={module.moduleName}
-              items={module.keys}
-              title={module.moduleName}
+              key={module}
+              title={module}
               changeModule={changeModule}
             />
           ))}

packages/frontend/admin/src/modules/nav/nav.tsx

@@ -84,12 +84,6 @@ export function Nav({ isCollapsed = false }: NavProps) {
           isCollapsed && 'items-center px-0 gap-1 overflow-visible'
         )}
       >
-        <NavItem
-          to="/admin/config"
-          icon={<SelfhostIcon fontSize={20} />}
-          label="Server"
-          isCollapsed={isCollapsed}
-        />
         <NavItem
           to="/admin/accounts"
           icon={<AccountIcon fontSize={20} />}
@@ -102,8 +96,13 @@ export function Nav({ isCollapsed = false }: NavProps) {
           label="AI"
           isCollapsed={isCollapsed}
         />
-
         <SettingsItem isCollapsed={isCollapsed} />
+        <NavItem
+          to="/admin/config"
+          icon={<SelfhostIcon fontSize={20} />}
+          label="Server"
+          isCollapsed={isCollapsed}
+        />
       </nav>
       <div
         className={cn(

packages/frontend/admin/src/modules/nav/server-version.tsx

@@ -10,7 +10,9 @@ export const ServerVersion = () => {
   const version = serverConfig?.version;
 
   const handleClick = useCallback(() => {
-    window.open(availableUpgrade.url, '_blank');
+    if (availableUpgrade) {
+      window.open(availableUpgrade.url, '_blank');
+    }
   }, [availableUpgrade]);
 
   if (availableUpgrade) {

packages/frontend/admin/src/modules/nav/settings-item.tsx

@@ -10,23 +10,19 @@ import { SettingsIcon } from '@blocksuite/icons/rc';
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import { cssVarV2 } from '@toeverything/theme/v2';
-import { useMemo } from 'react';
 import { NavLink } from 'react-router-dom';
 
-import { useGetServerRuntimeConfig } from '../settings/use-get-server-runtime-config';
+import { ALL_CONFIGURABLE_MODULES } from '../settings/config';
 import { CollapsibleItem, OtherModules } from './collapsible-item';
 import { useNav } from './context';
-export const SettingsItem = ({ isCollapsed }: { isCollapsed: boolean }) => {
-  const { moduleList } = useGetServerRuntimeConfig();
-  const { setCurrentModule } = useNav();
 
-  const { authModule, otherModules } = useMemo(() => {
-    const authModule = moduleList.find(module => module.moduleName === 'auth');
-    const otherModules = moduleList.filter(
-      module => module.moduleName !== 'auth'
-    );
-    return { authModule, otherModules };
-  }, [moduleList]);
+const authModule = ALL_CONFIGURABLE_MODULES.find(module => module === 'auth');
+const otherModules = ALL_CONFIGURABLE_MODULES.filter(
+  module => module !== 'auth'
+);
+
+export const SettingsItem = ({ isCollapsed }: { isCollapsed: boolean }) => {
+  const { setCurrentModule } = useNav();
 
   if (isCollapsed) {
     return (
@@ -63,10 +59,10 @@ export const SettingsItem = ({ isCollapsed }: { isCollapsed: boolean }) => {
                   borderColor: cssVarV2('layer/insideBorder/blackBorder'),
                 }}
               >
-                {moduleList.map(module => (
-                  <li key={module.moduleName} className="flex">
+                {ALL_CONFIGURABLE_MODULES.map(module => (
+                  <li key={module} className="flex">
                     <NavLink
-                      to={`/admin/settings/${module.moduleName}`}
+                      to={`/admin/settings/${module}`}
                       className={cn(
                         buttonVariants({
                           variant: 'ghost',
@@ -79,9 +75,9 @@ export const SettingsItem = ({ isCollapsed }: { isCollapsed: boolean }) => {
                           ? cssVarV2('selfhost/button/sidebarButton/bg/select')
                           : undefined,
                       })}
-                      onClick={() => setCurrentModule?.(module.moduleName)}
+                      onClick={() => setCurrentModule?.(module)}
                     >
-                      {module.moduleName}
+                      {module}
                     </NavLink>
                   </li>
                 ))}
@@ -93,6 +89,7 @@ export const SettingsItem = ({ isCollapsed }: { isCollapsed: boolean }) => {
       </NavigationMenuPrimitive.Root>
     );
   }
+
   return (
     <Accordion type="multiple" className="w-full h-full  overflow-hidden">
       <AccordionItem
@@ -134,8 +131,7 @@ export const SettingsItem = ({ isCollapsed }: { isCollapsed: boolean }) => {
             <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit] [&>div]:!block">
               {authModule && (
                 <CollapsibleItem
-                  items={authModule.keys}
-                  title={authModule.moduleName}
+                  title={authModule}
                   changeModule={setCurrentModule}
                 />
               )}