@allbluecn/web-app 0.3.0

package/src/components/layout/sidebar-03/nav-main.tsx

@@ -0,0 +1,256 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Badge } from "@/components/ui/badge";
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuItem as SidebarMenuSubItem,
+  useSidebar,
+} from "@/components/ui/sidebar";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { cn } from "@/lib/utils";
+import {
+  ChevronDown, ChevronUp, Plus,
+  FileText, Folder, BarChart3, Users, Settings, Package,
+  Database, ShoppingCart, Heart, Sparkles, Link as LinkIcon,
+  MessageSquare, Calendar, Bell, BadgePlus, Building2,
+  SquareChartGantt, HeartHandshake, Shrimp, Fish, VenetianMask,
+  GraduationCap, HandFist, LoaderPinwheel, ToolCase, PartyPopper,
+  PencilRuler, CircleStar, Brain, BadgeDollarSign, Earth, Music4
+} from "lucide-react";
+import { Link } from "@tanstack/react-router";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useLocation } from "@tanstack/react-router";
+import type { Route } from "@/config/sidebar-routes";
+import { isParentActive } from "@/lib/sidebar-utils";
+
+import { AnimatedGradientText } from "@/components/magicui/animated-gradient-text";
+
+const ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
+  file: FileText,
+  folder: Folder,
+  chart: BarChart3,
+  users: Users,
+  settings: Settings,
+  package: Package,
+  database: Database,
+  cart: ShoppingCart,
+  heart: Heart,
+  sparkles: Sparkles,
+  link: LinkIcon,
+  message: MessageSquare,
+  calendar: Calendar,
+  bell: Bell,
+  building2: Building2,
+  squareChartGantt: SquareChartGantt,
+  heartHandshake: HeartHandshake,
+  shrimp: Shrimp,
+  fish: Fish,
+  venetianMask: VenetianMask,
+  graduationCap: GraduationCap,
+  handFist: HandFist,
+  loaderPinwheel: LoaderPinwheel,
+  toolCase: ToolCase,
+  partyPopper: PartyPopper,
+  pencilRuler: PencilRuler,
+  circleStar: CircleStar,
+  brain: Brain,
+  badgeDollarSign: BadgeDollarSign,
+  earth: Earth,
+  music4: Music4,
+};
+
+function getIconComponent(iconName: string | undefined) {
+  if (!iconName) return null;
+  const IconComponent = ICON_MAP[iconName];
+  return IconComponent ? <IconComponent className="size-4 mr-2" /> : null;
+}
+import { CreatePRDDialog } from "@allbluecn/plugins-core/prd/components/dialog/create-prd-dialog";
+
+export default function DashboardNavigation({ routes }: { routes: Route[] }) {
+  const { state } = useSidebar();
+  const { pathname } = useLocation();
+  const { t } = useTranslation('common');
+  const isCollapsed = state === "collapsed";
+  const [openCollapsible, setOpenCollapsible] = useState<string | null>(null);
+  const [createPRDOpen, setCreatePRDOpen] = useState(false);
+
+  const isActive = (link: string) => {
+    if (link === "/dashboard") return pathname === "/dashboard";
+    if (link === "#") return false;
+    return pathname.startsWith(link);
+  };
+
+  return (
+    <>
+      <SidebarMenu className="space-y-1">
+        {routes.map((route) => {
+          const hasSubRoutes = !!route.subs?.length;
+          const isPRDRoute = route.id === "prd";
+          const isOpen = hasSubRoutes && !isCollapsed && openCollapsible === route.id;
+          const active = hasSubRoutes
+            ? isParentActive(pathname, route.link)
+            : isActive(route.link);
+
+          return (
+            <SidebarMenuItem key={route.id}>
+              {hasSubRoutes || isPRDRoute ? (
+                <Collapsible
+                  open={isOpen}
+                  onOpenChange={(open) =>
+                    setOpenCollapsible(open ? route.id : null)
+                  }
+                  className="w-full"
+                >
+                  <div className="relative">
+                    <SidebarMenuButton
+                      asChild
+                      isActive={active}
+                      className={cn(
+                        "flex w-full items-center rounded-lg px-2",
+                        !isCollapsed && (isPRDRoute || hasSubRoutes) && "pr-16",
+                        isCollapsed && "justify-center"
+                      )}
+                    >
+                      <Link to={route.link}
+                        className="flex w-full items-center"
+                      >
+                        {route.icon}
+                        {!isCollapsed && (
+<span className="ml-2 flex-1 text-sm font-medium">
+                             {t(route.title)}
+                             {route.badge?.trim() && (
+                               <Badge className="ml-2 bg-green-50 text-green-700 border-green-400 dark:bg-green-950 dark:text-green-300 ">
+                                 <AnimatedGradientText speed={2} colorFrom="#8ECEAA" colorTo="#2A7E3B">{t(route.badge)}</AnimatedGradientText>
+                               </Badge>
+                             )}
+                           </span>
+                        )}
+                      </Link>
+                    </SidebarMenuButton>
+
+                    {!isCollapsed && (
+                      <span className="absolute right-1 top-1/2 -translate-y-1/2 flex items-center gap-1 z-10">
+                        {isPRDRoute && (
+                          <span
+                            role="button"
+                            aria-label={t("pr.create")}
+                            className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-muted"
+                            onClick={() => setCreatePRDOpen(true)}
+                          >
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <BadgePlus className="h-4 w-4" />
+                              </TooltipTrigger>
+                                <TooltipContent>
+                                  <p>{t('pr.create')}</p>
+                                </TooltipContent>
+                            </Tooltip>
+                          </span>
+                        )}
+                        {hasSubRoutes && (
+                          <span
+                            role="button"
+                            aria-label={isOpen ? t('sidebar.collapseSubMenu') : t('sidebar.expandSubMenu')}
+                            className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-muted"
+                            onClick={() =>
+                              setOpenCollapsible(isOpen ? null : route.id)
+                            }
+                          >
+                            {isOpen ? (
+                              <ChevronUp className="size-4" />
+                            ) : (
+                              <ChevronDown className="size-4" />
+                            )}
+                          </span>
+                        )}
+                      </span>
+                    )}
+                  </div>
+
+                  {!isCollapsed && (
+                    <CollapsibleContent>
+                      <SidebarMenuSub className="my-1 ml-3.5">
+                        {route.subs?.map((subRoute) => (
+                          <SidebarMenuSubItem
+                            key={subRoute.link}
+                            className="h-auto"
+                          >
+                            <SidebarMenuSubButton asChild isActive={isActive(subRoute.link)}>
+                              <Link to={subRoute.link}
+                                className="flex items-center rounded-md px-2.5 py-1.5 text-sm font-medium"
+                              >
+                                {getIconComponent(subRoute.icon as string)}
+                                <span className="truncate min-w-0">{subRoute.title}</span>
+                                {/* {subRoute.badge?.trim() && (
+                                  <Badge variant="destructive" >
+                                    {subRoute.badge}
+                                  </Badge>
+                                )} */}
+                              </Link>
+                            </SidebarMenuSubButton>
+                          </SidebarMenuSubItem>
+                        ))}
+                      </SidebarMenuSub>
+                    </CollapsibleContent>
+                  )}
+                </Collapsible>
+              ) : (
+                <SidebarMenuButton asChild tooltip={t(route.title)} isActive={active}>
+                  <Link to={route.link}
+                    className={cn(
+                      "flex items-center rounded-lg px-2",
+                      isCollapsed && "justify-center"
+                    )}
+                  >
+                    {route.icon}
+                    {!isCollapsed && (
+<span className="ml-2 text-sm font-medium">
+                         {t(route.title)}
+                       </span>
+                    )}
+                  </Link>
+                </SidebarMenuButton>
+              )}
+            </SidebarMenuItem>
+          );
+        })}
+      </SidebarMenu>
+
+      <CreatePRDDialog
+        key={createPRDOpen ? "open" : "closed"}
+        open={createPRDOpen}
+        onOpenChange={setCreatePRDOpen}
+      />
+    </>
+  );
+}

package/src/components/layout/sidebar-03/nav-notifications.tsx

@@ -0,0 +1,78 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { BellIcon } from "lucide-react";
+
+type Notification = {
+  id: string;
+  avatar: string;
+  fallback: string;
+  text: string;
+  time: string;
+};
+
+export function NotificationsPopover({
+  notifications,
+}: {
+  notifications: Notification[];
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="rounded-full"
+          aria-label="Open notifications"
+        >
+          <BellIcon className="size-5" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent side="right" className="w-80 my-6">
+        <DropdownMenuLabel>Notifications</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {notifications.map(({ id, avatar, fallback, text, time }) => (
+          <DropdownMenuItem key={id} className="flex items-start gap-3">
+            <Avatar className="size-8">
+              <AvatarImage src={avatar} alt="Avatar" />
+              <AvatarFallback>{fallback}</AvatarFallback>
+            </Avatar>
+            <div className="flex flex-col">
+              <span className="text-sm font-medium">{text}</span>
+              <span className="text-xs text-muted-foreground">{time}</span>
+            </div>
+          </DropdownMenuItem>
+        ))}
+        <DropdownMenuSeparator />
+        <DropdownMenuItem className="justify-center text-sm text-muted-foreground hover:text-primary">
+          View all notifications
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/layout/sidebar-03/nav-workspace.tsx

@@ -0,0 +1,160 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { Link, useLocation } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Layers, Plus } from "lucide-react";
+import {
+  SidebarGroup,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+import { isParentActive } from "@/lib/sidebar-utils";
+import { ProjectIconDisplay } from "@/components/project/project-icon";
+import { CreateWorkspaceDialog } from "@/components/workspace/create-workspace-dialog";
+import { useLiveQuery } from "@tanstack/react-db";
+import { workspacesCollection } from "@/lib/collections/reference/workspaces-collection";
+
+function WorkspaceLinks({ pathname, t }: { pathname: string; t: any }) {
+  const { data: workspaces } = useLiveQuery((q) =>
+    q.from({ w: workspacesCollection })
+  );
+  const workspacesList =
+    (workspaces as unknown as Array<{
+      id: string;
+      name: string;
+      icon: string;
+    }> | undefined) ?? [];
+
+  return (
+    <SidebarMenu className="space-y-1">
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          asChild
+          tooltip={t('sidebar.workspace.home')}
+          isActive={pathname === "/workspaces"}
+          className="flex w-full items-center rounded-lg px-2 font-medium data-active:text-sidebar-foreground"
+        >
+          <Link to="/workspaces" className="flex w-full items-center">
+            <Layers className="size-4" />
+            <span className="ml-2 text-sm font-medium">{t('sidebar.workspace.home')}</span>
+          </Link>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+      {workspacesList.map((ws) => {
+        const active = pathname.startsWith(`/workspaces/${ws.id}`);
+        return (
+          <SidebarMenuItem key={ws.id}>
+            <SidebarMenuButton
+              asChild
+              tooltip={ws.name}
+              isActive={active}
+              className="flex w-full items-center rounded-lg px-2 font-medium data-active:text-sidebar-foreground"
+            >
+              <Link
+                to="/workspaces/$workspaceId"
+                params={{ workspaceId: ws.id }}
+                className="flex w-full items-center"
+              >
+                <ProjectIconDisplay
+                  name={ws.icon}
+                  size={16}
+                  className="text-sidebar-foreground"
+                />
+                <span className="ml-2 truncate text-sm">{ws.name}</span>
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        );
+      })}
+    </SidebarMenu>
+  );
+}
+
+export function NavWorkspace() {
+  const { state } = useSidebar();
+  const { pathname } = useLocation();
+  const { t } = useTranslation('common');
+  const isCollapsed = state === "collapsed";
+  const [mounted, setMounted] = useState(false);
+  const [createOpen, setCreateOpen] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    const refresh = () => {
+      (workspacesCollection as any).utils?.refetch?.();
+    };
+    window.addEventListener("workspace-created", refresh);
+    window.addEventListener("workspace-deleted", refresh);
+    window.addEventListener("workspace-updated", refresh);
+    return () => {
+      window.removeEventListener("workspace-created", refresh);
+      window.removeEventListener("workspace-deleted", refresh);
+      window.removeEventListener("workspace-updated", refresh);
+    };
+  }, []);
+
+  if (isCollapsed) {
+    return (
+      <SidebarGroup className="p-0">
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton
+              asChild
+              tooltip={t('sidebar.workspace.home')}
+              isActive={isParentActive(pathname, "/workspaces")}
+            >
+              <Link to="/workspaces" className="flex items-center">
+                <Layers className="size-4" />
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+        <CreateWorkspaceDialog open={createOpen} onOpenChange={setCreateOpen} />
+      </SidebarGroup>
+    );
+  }
+
+  return (
+    <SidebarGroup className="p-0">
+      <div className="mb-1 flex h-8 items-center justify-between px-2">
+        <span className="text-xs font-medium text-sidebar-foreground/70">
+          {t('sidebar.workspace.title')}
+        </span>
+        <button
+          type="button"
+          onClick={() => setCreateOpen(true)}
+          className={cn(
+            "flex size-5 items-center justify-center rounded text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+          )}
+          aria-label={t('sidebar.workspace.create')}
+        >
+          <Plus className="size-3.5" />
+        </button>
+      </div>
+      {mounted && <WorkspaceLinks pathname={pathname} t={t} />}
+      <CreateWorkspaceDialog open={createOpen} onOpenChange={setCreateOpen} />
+    </SidebarGroup>
+  );
+}

package/src/components/layout/sidebar-03/sidebar-search-trigger.tsx

@@ -0,0 +1,63 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useTranslation } from "react-i18next"
+import { Search } from "lucide-react"
+import { useSidebar } from "@/components/ui/sidebar"
+import { cn } from "@/lib/utils"
+import { setCommandPaletteOpen } from "@/lib/commands/command-palette-state"
+
+export function SidebarSearchTrigger() {
+  const { t } = useTranslation("common")
+  const { state } = useSidebar()
+  const isCollapsed = state === "collapsed"
+  const openPalette = () => setCommandPaletteOpen(true)
+
+  if (isCollapsed) {
+    return (
+      <button
+        type="button"
+        onClick={openPalette}
+        aria-label={t("command.searchPlaceholder")}
+        className="flex size-8 w-full items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+      >
+        <Search className="size-4" />
+      </button>
+    )
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={openPalette}
+      className={cn(
+        "flex h-8 w-full items-center gap-2 rounded-md border border-input/30 bg-input/30 px-2 text-sm text-muted-foreground",
+        "transition-colors hover:bg-input/50 hover:text-foreground",
+      )}
+    >
+      <Search className="size-4 shrink-0" />
+      <span className="flex-1 truncate text-left">
+        {t("command.searchPlaceholder")}
+      </span>
+      <span className="inline-flex items-center gap-0.5">
+        <kbd className="rounded border border-border bg-muted/60 px-1 py-0.5 text-[10px] font-medium text-muted-foreground">
+          ⌘K
+        </kbd>
+      </span>
+    </button>
+  )
+}

package/src/components/layout/sidebar-03/team-switcher.tsx

@@ -0,0 +1,114 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/components/ui/sidebar";
+import { ChevronsUpDown, Plus } from "lucide-react";
+import * as React from "react";
+
+type Team = {
+  name: string;
+  logo: React.ElementType;
+  plan: string;
+};
+
+const teams: Team[] = [
+  {
+    name: "Team Alpha",
+    logo: () => <div className="bg-blue-500 w-4 h-4 rounded-full" />,
+    plan: "Pro",
+  },]
+  
+
+export function TeamSwitcher({ teams }: { teams: Team[] }) {
+  const { isMobile } = useSidebar();
+  const [activeTeam, setActiveTeam] = React.useState(teams[0]);
+
+  if (!activeTeam) return null;
+
+  const Logo = activeTeam.logo;
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-background text-foreground">
+                <Logo className="size-4" />
+              </div>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">
+                  {activeTeam.name}
+                </span>
+                <span className="truncate text-xs">{activeTeam.plan}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg mb-4"
+            align="start"
+            side={isMobile ? "bottom" : "right"}
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              Teams
+            </DropdownMenuLabel>
+            {teams.map((team, index) => (
+              <DropdownMenuItem
+                key={team.name}
+                onClick={() => setActiveTeam(team)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-sm border">
+                  <team.logo className="size-4 shrink-0" />
+                </div>
+                {team.name}
+                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="gap-2 p-2">
+              <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                <Plus className="size-4" />
+              </div>
+              <div className="font-medium text-muted-foreground">Add team</div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}