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

packages/frontend/admin/src/modules/accounts/components/data-table-row-actions.tsx

@@ -15,7 +15,7 @@ import {
 import { useCallback, useState } from 'react';
 import { toast } from 'sonner';
 
-import { useRightPanel } from '../../layout';
+import { useRightPanel } from '../../panel/context';
 import type { UserType } from '../schema';
 import { DeleteAccountDialog } from './delete-account';
 import { DiscardChanges } from './discard-changes';
@@ -31,8 +31,7 @@ export function DataTableRowActions({ user }: DataTableRowActionsProps) {
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [resetPasswordDialogOpen, setResetPasswordDialogOpen] = useState(false);
   const [discardDialogOpen, setDiscardDialogOpen] = useState(false);
-  const { setRightPanelContent, openPanel, isOpen, closePanel } =
-    useRightPanel();
+  const { openPanel, isOpen, closePanel, setPanelContent } = useRightPanel();
 
   const deleteUser = useDeleteUser();
   const { resetPasswordLink, onResetPassword } = useResetUserPassword();
@@ -81,7 +80,7 @@ export function DataTableRowActions({ user }: DataTableRowActionsProps) {
   }, []);
 
   const handleConfirm = useCallback(() => {
-    setRightPanelContent(
+    setPanelContent(
       <UpdateUserForm
         user={user}
         onComplete={closePanel}
@@ -92,7 +91,6 @@ export function DataTableRowActions({ user }: DataTableRowActionsProps) {
     if (discardDialogOpen) {
       handleDiscardChangesCancel();
     }
-
     if (!isOpen) {
       openPanel();
     }
@@ -104,7 +102,7 @@ export function DataTableRowActions({ user }: DataTableRowActionsProps) {
     openDeleteDialog,
     openPanel,
     openResetPasswordDialog,
-    setRightPanelContent,
+    setPanelContent,
     user,
   ]);
 

packages/frontend/admin/src/modules/accounts/components/data-table-toolbar.tsx

@@ -12,7 +12,7 @@ import {
   useState,
 } from 'react';
 
-import { useRightPanel } from '../../layout';
+import { useRightPanel } from '../../panel/context';
 import { DiscardChanges } from './discard-changes';
 import { CreateUserForm } from './user-form';
 
@@ -59,19 +59,18 @@ export function DataTableToolbar<TData>({
   const [value, setValue] = useState('');
   const [dialogOpen, setDialogOpen] = useState(false);
   const debouncedValue = useDebouncedValue(value, 1000);
-  const { setRightPanelContent, openPanel, closePanel, isOpen } =
-    useRightPanel();
+  const { setPanelContent, openPanel, closePanel, isOpen } = useRightPanel();
   const { result, query } = useSearch();
 
   const handleConfirm = useCallback(() => {
-    setRightPanelContent(<CreateUserForm onComplete={closePanel} />);
+    setPanelContent(<CreateUserForm onComplete={closePanel} />);
     if (dialogOpen) {
       setDialogOpen(false);
     }
     if (!isOpen) {
       openPanel();
     }
-  }, [setRightPanelContent, closePanel, dialogOpen, isOpen, openPanel]);
+  }, [setPanelContent, closePanel, dialogOpen, isOpen, openPanel]);
 
   useEffect(() => {
     query(debouncedValue);

packages/frontend/admin/src/modules/accounts/components/user-form.tsx

@@ -4,11 +4,12 @@ import { Label } from '@affine/admin/components/ui/label';
 import { Separator } from '@affine/admin/components/ui/separator';
 import { Switch } from '@affine/admin/components/ui/switch';
 import type { FeatureType } from '@affine/graphql';
-import { CheckIcon, ChevronRightIcon, XIcon } from 'lucide-react';
+import { ChevronRightIcon } from 'lucide-react';
 import type { ChangeEvent } from 'react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { useServerConfig } from '../../common';
+import { RightPanelHeader } from '../../header';
 import type { UserInput, UserType } from '../schema';
 import { useCreateUser, useUpdateUser } from './use-user-management';
 
@@ -92,29 +93,12 @@ function UserForm({
 
   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">{title}</span>
-        <Button
-          type="submit"
-          size="icon"
-          className="w-7 h-7"
-          variant="ghost"
-          onClick={handleConfirm}
-          disabled={!canSave}
-        >
-          <CheckIcon size={20} />
-        </Button>
-      </div>
-      <Separator />
+      <RightPanelHeader
+        title={title}
+        handleClose={handleClose}
+        handleConfirm={handleConfirm}
+        canSave={canSave}
+      />
       <div className="p-4 flex-grow overflow-y-auto space-y-[10px]">
         <div className="flex flex-col rounded-md border py-4 gap-4">
           <InputItem

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

@@ -1,18 +1,13 @@
-import { Separator } from '@affine/admin/components/ui/separator';
-
+import { Header } from '../header';
 import { columns } from './components/columns';
 import { DataTable } from './components/data-table';
 import { useUserList } from './use-user-list';
 
 export function AccountPage() {
   const { users, pagination, setPagination } = useUserList();
-
   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">Accounts</div>
-      </div>
-      <Separator />
+      <Header title="Accounts" />
 
       <DataTable
         data={users}