feat(admin): init project (#7197)

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

@@ -0,0 +1,113 @@
+import { Button } from '@affine/admin/components/ui/button';
+import {
+  Sheet,
+  SheetContent,
+  SheetTrigger,
+} from '@affine/admin/components/ui/sheet';
+import { Menu, Package2 } from 'lucide-react';
+import type { PropsWithChildren } from 'react';
+import { Link } from 'react-router-dom';
+
+import { UserDropdown } from './user-dropdown';
+
+export function Nav({ children }: PropsWithChildren<unknown>) {
+  return (
+    <div className="flex min-h-screen w-full flex-col">
+      <header className="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
+        <nav className="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
+          <Link
+            to="/"
+            className="flex items-center gap-2 text-lg font-semibold md:text-base"
+          >
+            <Package2 className="h-6 w-6" />
+            <span className="sr-only">AFFiNE</span>
+          </Link>
+          <Link
+            to="/"
+            className="text-foreground transition-colors hover:text-foreground"
+          >
+            Dashboard
+          </Link>
+          <Link
+            to="/admin/users"
+            className="text-muted-foreground transition-colors hover:text-foreground"
+          >
+            Users
+          </Link>
+          <Link
+            to="/"
+            className="text-muted-foreground transition-colors hover:text-foreground"
+          >
+            Configs
+          </Link>
+          <Link
+            to="/"
+            className="text-muted-foreground transition-colors hover:text-foreground"
+          >
+            Backups
+          </Link>
+          <Link
+            to="/"
+            className="text-muted-foreground transition-colors hover:text-foreground"
+          >
+            Analytics
+          </Link>
+        </nav>
+        <Sheet>
+          <SheetTrigger asChild>
+            <Button
+              variant="outline"
+              size="icon"
+              className="shrink-0 md:hidden"
+            >
+              <Menu className="h-5 w-5" />
+              <span className="sr-only">Toggle navigation menu</span>
+            </Button>
+          </SheetTrigger>
+          <SheetContent side="left">
+            <nav className="grid gap-6 text-lg font-medium">
+              <Link
+                to="/"
+                className="flex items-center gap-2 text-lg font-semibold"
+              >
+                <Package2 className="h-6 w-6" />
+                <span className="sr-only">Acme Inc</span>
+              </Link>
+              <Link to="/" className="hover:text-foreground">
+                Dashboard
+              </Link>
+              <Link
+                to="/"
+                className="text-muted-foreground hover:text-foreground"
+              >
+                Orders
+              </Link>
+              <Link
+                to="/"
+                className="text-muted-foreground hover:text-foreground"
+              >
+                Products
+              </Link>
+              <Link
+                to="/"
+                className="text-muted-foreground hover:text-foreground"
+              >
+                Customers
+              </Link>
+              <Link
+                to="/"
+                className="text-muted-foreground hover:text-foreground"
+              >
+                Analytics
+              </Link>
+            </nav>
+          </SheetContent>
+        </Sheet>
+        <div className="flex w-full items-center justify-end gap-4 md:ml-auto md:gap-2 lg:gap-4">
+          <UserDropdown />
+        </div>
+      </header>
+      {children}
+    </div>
+  );
+}

packages/frontend/admin/src/modules/nav/user-dropdown.tsx

@@ -0,0 +1,59 @@
+import { Button } from '@affine/admin/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@affine/admin/components/ui/dropdown-menu';
+import { useQuery } from '@affine/core/hooks/use-query';
+import { FeatureType, getCurrentUserFeaturesQuery } from '@affine/graphql';
+import { CircleUser } from 'lucide-react';
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
+
+export function UserDropdown() {
+  const {
+    data: { currentUser },
+  } = useQuery({
+    query: getCurrentUserFeaturesQuery,
+  });
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!currentUser) {
+      navigate('/admin/auth');
+      return;
+    }
+    if (!currentUser?.features.includes?.(FeatureType.Admin)) {
+      toast.error('You are not an admin, please login the admin account.');
+      navigate('/admin/auth');
+      return;
+    }
+  }, [currentUser, navigate]);
+  const avatar = currentUser?.avatarUrl ? (
+    <img src={currentUser?.avatarUrl} />
+  ) : (
+    <CircleUser size={24} />
+  );
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="secondary" size="icon" className="rounded-full">
+          {avatar}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuLabel>{currentUser?.name}</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>Settings</DropdownMenuItem>
+        <DropdownMenuItem>Support</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>Logout</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}