feat(admin): make the left navigation bar collapsable (#10774)

packages/frontend/admin/src/modules/ai/edit-prompt.tsx

@@ -1,11 +1,10 @@
-import { Button } from '@affine/admin/components/ui/button';
 import { ScrollArea } from '@affine/admin/components/ui/scroll-area';
 import { Separator } from '@affine/admin/components/ui/separator';
 import { Textarea } from '@affine/admin/components/ui/textarea';
-import { CheckIcon, XIcon } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { useRightPanel } from '../layout';
+import { RightPanelHeader } from '../header';
+import { useRightPanel } from '../panel/context';
 import type { Prompt } from './prompts';
 import { usePrompt } from './use-prompt';
 
@@ -56,29 +55,12 @@ export function EditPrompt({
 
   return (
     <div className="flex flex-col h-full gap-1">
-      <div className="flex justify-between items-center py-[10px] px-6 ">
-        <Button
-          type="button"
-          size="icon"
-          className="w-7 h-7"
-          variant="ghost"
-          onClick={handleClose}
-        >
-          <XIcon size={20} />
-        </Button>
-        <span className="text-base font-medium">Edit Prompt</span>
-        <Button
-          type="submit"
-          size="icon"
-          className="w-7 h-7"
-          variant="ghost"
-          onClick={onConfirm}
-          disabled={disableSave}
-        >
-          <CheckIcon size={20} />
-        </Button>
-      </div>
-      <Separator />
+      <RightPanelHeader
+        title="Edit Prompt"
+        handleClose={handleClose}
+        handleConfirm={onConfirm}
+        canSave={!disableSave}
+      />
       <ScrollArea>
         <div className="grid">
           <div className="px-5 py-4 overflow-y-auto space-y-[10px] flex flex-col gap-5">

packages/frontend/admin/src/modules/ai/index.tsx

@@ -1,26 +1,42 @@
-import { Separator } from '@affine/admin/components/ui/separator';
+import { Switch } from '@affine/admin/components/ui/switch';
 import { cn } from '@affine/admin/utils';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { useState } from 'react';
 
-import { Prompts } from './prompts';
+import { Header } from '../header';
 
 function AiPage() {
+  const [enableAi, setEnableAi] = useState(false);
+
   return (
-    <div className=" h-screen flex-1 flex-col flex">
-      <div className="flex items-center justify-between px-6 py-3 my-[2px] max-md:ml-9 max-md:mt-[2px]">
-        <div className="text-base font-medium">AI</div>
-      </div>
-      <Separator />
+    <div className="h-screen flex-1 flex-col flex">
+      <Header title="AI" />
       <ScrollAreaPrimitive.Root
         className={cn('relative overflow-hidden w-full')}
       >
         <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit] [&>div]:!block">
-          <Prompts />
+          <div className="p-6 max-w-3xl mx-auto">
+            <div className="text-[20px]">AI</div>
+            <div className="flex justify-between items-center">
+              <div>
+                <p className="text-[15px] font-medium mt-6">Enable AI</p>
+                <p className="text-sm text-muted-foreground mt-1">
+                  AI functionality is not currently supported. Self-hosted AI
+                  support is in progress.
+                </p>
+              </div>
+              <Switch
+                checked={enableAi}
+                onCheckedChange={setEnableAi}
+                disabled={true}
+              />
+            </div>
+          </div>
+          {/* <Prompts /> */}
         </ScrollAreaPrimitive.Viewport>
         <ScrollAreaPrimitive.ScrollAreaScrollbar
           className={cn(
             'flex touch-none select-none transition-colors',
-
             'h-full w-2.5 border-l border-l-transparent p-[1px]'
           )}
         >

packages/frontend/admin/src/modules/ai/prompts.tsx

@@ -3,7 +3,7 @@ import { Separator } from '@affine/admin/components/ui/separator';
 import type { CopilotPromptMessageRole } from '@affine/graphql';
 import { useCallback, useState } from 'react';
 
-import { useRightPanel } from '../layout';
+import { useRightPanel } from '../panel/context';
 import { DiscardChanges } from './discard-changes';
 import { EditPrompt } from './edit-prompt';
 import { usePrompt } from './use-prompt';
@@ -52,7 +52,7 @@ export function Prompts() {
 }
 
 export const PromptRow = ({ item, index }: { item: Prompt; index: number }) => {
-  const { setRightPanelContent, openPanel, isOpen } = useRightPanel();
+  const { setPanelContent, openPanel, isOpen } = useRightPanel();
   const [dialogOpen, setDialogOpen] = useState(false);
   const [canSave, setCanSave] = useState(false);
 
@@ -63,7 +63,7 @@ export const PromptRow = ({ item, index }: { item: Prompt; index: number }) => {
 
   const handleConfirm = useCallback(
     (item: Prompt) => {
-      setRightPanelContent(<EditPrompt item={item} setCanSave={setCanSave} />);
+      setPanelContent(<EditPrompt item={item} setCanSave={setCanSave} />);
       if (dialogOpen) {
         handleDiscardChangesCancel();
       }
@@ -72,13 +72,7 @@ export const PromptRow = ({ item, index }: { item: Prompt; index: number }) => {
         openPanel();
       }
     },
-    [
-      dialogOpen,
-      handleDiscardChangesCancel,
-      isOpen,
-      openPanel,
-      setRightPanelContent,
-    ]
+    [dialogOpen, handleDiscardChangesCancel, isOpen, openPanel, setPanelContent]
   );
 
   const handleEdit = useCallback(