@agent-native/core 0.178.1 → 0.178.2-nightly-20260910195009

package/corpus/templates/design/app/components/layout/Sidebar.tsx

@@ -1,41 +1,19 @@
 import { DevDatabaseLink } from "@agent-native/core/client/db-admin";
 import { useT } from "@agent-native/core/client/i18n";
-import { openCommandMenu } from "@agent-native/core/client/navigation";
 import { OrgSwitcher } from "@agent-native/core/client/org";
-import { AgentNativeIcon, FeedbackButton } from "@agent-native/core/client/ui";
-import { SidebarFooterActions } from "@agent-native/toolkit/app-shell";
 import {
-  IconPencil,
-  IconTemplate,
+  AppSidebar,
+  FeedbackButton,
+  type AppSidebarItemDefinition,
+} from "@agent-native/core/client/ui";
+import {
   IconComponents,
+  IconPencil,
   IconSettings,
-  IconLayoutSidebarLeftCollapse,
-  IconLayoutSidebarLeftExpand,
-  IconSearch,
+  IconTemplate,
 } from "@tabler/icons-react";
 import { useEffect, useState } from "react";
-import { Link, useLocation } from "react-router";
-
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
-
-const navItems = [
-  { icon: IconPencil, labelKey: "navigation.designs", href: "/home" },
-  { icon: IconTemplate, labelKey: "navigation.templates", href: "/templates" },
-  {
-    icon: IconComponents,
-    labelKey: "navigation.designSystems",
-    href: "/design-systems",
-  },
-];
-
-const bottomNavItems = [
-  { icon: IconSettings, labelKey: "navigation.settings", href: "/settings" },
-];
+import { useLocation } from "react-router";
 
 const COLLAPSE_KEY = "design.sidebar.collapsed";
 
@@ -60,191 +38,56 @@ export function Sidebar() {
     }
   }, [collapsed]);
 
-  const collapseButton = (
-    <Tooltip delayDuration={0}>
-      <TooltipTrigger asChild>
-        <button
-          type="button"
-          onClick={() => setCollapsed((value) => !value)}
-          className="flex size-8 items-center justify-center rounded-md text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground"
-          aria-label={
-            collapsed
-              ? t("navigation.expandSidebar")
-              : t("navigation.collapseSidebar")
-          }
-        >
-          {collapsed ? (
-            <IconLayoutSidebarLeftExpand className="h-4 w-4 rtl:-scale-x-100" />
-          ) : (
-            <IconLayoutSidebarLeftCollapse className="h-4 w-4 rtl:-scale-x-100" />
-          )}
-        </button>
-      </TooltipTrigger>
-      <TooltipContent side="right">
-        {collapsed
-          ? t("navigation.expandSidebar")
-          : t("navigation.collapseSidebar")}
-      </TooltipContent>
-    </Tooltip>
-  );
-  const searchButton = (
-    <Tooltip delayDuration={0}>
-      <TooltipTrigger asChild>
-        <button
-          type="button"
-          onClick={openCommandMenu}
-          className="flex size-8 items-center justify-center rounded-md text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground"
-          aria-label={t("root.commandSearch")}
-        >
-          <IconSearch className="h-4 w-4" />
-        </button>
-      </TooltipTrigger>
-      <TooltipContent side="right">{t("root.commandSearch")}</TooltipContent>
-    </Tooltip>
-  );
-  const feedbackButton = (
-    <FeedbackButton
-      variant={collapsed ? "icon" : "sidebar"}
-      side="right"
-      className={collapsed ? "h-8 w-8" : "min-w-0"}
-    />
-  );
+  const items: AppSidebarItemDefinition[] = [
+    {
+      to: "/home",
+      label: t("navigation.designs"),
+      icon: IconPencil,
+      active:
+        location.pathname === "/home" ||
+        location.pathname.startsWith("/design/") ||
+        location.pathname.startsWith("/d/"),
+    },
+    {
+      to: "/templates",
+      label: t("navigation.templates"),
+      icon: IconTemplate,
+      active: location.pathname.startsWith("/templates"),
+    },
+    {
+      to: "/design-systems",
+      label: t("navigation.designSystems"),
+      icon: IconComponents,
+      active: location.pathname.startsWith("/design-systems"),
+    },
+  ];
 
-  return (
-    <aside
-      className={cn(
-        "flex h-full min-w-0 shrink-0 flex-col overflow-hidden bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-out",
-        collapsed ? "w-14" : "w-56",
-      )}
-    >
-      <div
-        className={cn(
-          "flex h-12 shrink-0 items-center border-b border-border",
-          collapsed ? "justify-center px-2" : "justify-between px-4",
-        )}
-      >
-        <button
-          type="button"
-          onClick={() => setCollapsed((value) => !value)}
-          aria-label={
-            collapsed
-              ? t("navigation.expandSidebar")
-              : t("navigation.collapseSidebar")
-          }
-          className={cn(
-            "flex items-center gap-2 rounded outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            collapsed ? "size-8 justify-center" : "text-start",
-          )}
-          data-sidebar-brand-toggle
-        >
-          <AgentNativeIcon
-            aria-hidden="true"
-            className="h-3.5 w-6 shrink-0 text-sidebar-foreground"
-          />
-          {!collapsed && (
-            <span className="text-sm font-semibold tracking-tight">
-              {t("navigation.brand")}
-            </span>
-          )}
-        </button>
-      </div>
+  const secondaryItems: AppSidebarItemDefinition[] = [
+    {
+      to: "/settings",
+      label: t("navigation.settings"),
+      icon: IconSettings,
+      active: location.pathname.startsWith("/settings"),
+    },
+  ];
 
-      <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
-        <nav className={cn("space-y-1 py-2", collapsed ? "px-1.5" : "px-2")}>
-          {navItems.map((item) => {
-            const Icon = item.icon;
-            const isActive =
-              item.href === "/home"
-                ? location.pathname === "/home" ||
-                  location.pathname.startsWith("/design/")
-                : location.pathname.startsWith(item.href);
-            const link = (
-              <Link
-                key={item.href}
-                to={item.href}
-                className={cn(
-                  "flex items-center rounded-lg text-sm",
-                  collapsed ? "h-9 w-9 justify-center" : "gap-3 px-3 py-2",
-                  isActive
-                    ? "bg-sidebar-accent text-sidebar-accent-foreground"
-                    : "text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground",
-                )}
-              >
-                <Icon className="h-4 w-4 shrink-0" />
-                {!collapsed && t(item.labelKey)}
-              </Link>
-            );
-            if (collapsed) {
-              return (
-                <Tooltip key={item.href} delayDuration={0}>
-                  <TooltipTrigger asChild>{link}</TooltipTrigger>
-                  <TooltipContent side="right">
-                    {t(item.labelKey)}
-                  </TooltipContent>
-                </Tooltip>
-              );
-            }
-            return link;
-          })}
-        </nav>
+  const feedbackButton = (
+    <FeedbackButton variant={collapsed ? "icon" : "sidebar"} side="right" />
+  );
 
-        <div className="mt-auto shrink-0">
-          <nav
-            className={cn(
-              "grid gap-1",
-              collapsed ? "justify-items-center px-1.5 py-1" : "px-2 py-1",
-            )}
-          >
-            {bottomNavItems.map((item) => {
-              const Icon = item.icon;
-              const isActive = location.pathname.startsWith(item.href);
-              const link = (
-                <Link
-                  to={item.href}
-                  className={cn(
-                    "flex items-center rounded-lg text-sm",
-                    collapsed ? "h-9 w-9 justify-center" : "gap-3 px-3 py-2",
-                    isActive
-                      ? "bg-sidebar-accent text-sidebar-accent-foreground"
-                      : "text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground",
-                  )}
-                  aria-label={collapsed ? t(item.labelKey) : undefined}
-                >
-                  <Icon className="h-4 w-4 shrink-0" />
-                  {!collapsed && t(item.labelKey)}
-                </Link>
-              );
-              return collapsed ? (
-                <Tooltip key={item.href} delayDuration={0}>
-                  <TooltipTrigger asChild>{link}</TooltipTrigger>
-                  <TooltipContent side="right">
-                    {t(item.labelKey)}
-                  </TooltipContent>
-                </Tooltip>
-              ) : (
-                <div key={item.href}>{link}</div>
-              );
-            })}
-          </nav>
+  const orgSwitcher = <OrgSwitcher compact={collapsed} />;
 
-          {!collapsed && (
-            <div className="mt-auto shrink-0">
-              <div className="px-3 py-2 empty:hidden">
-                <OrgSwitcher reserveSpace />
-              </div>
-              <div className="px-3 py-2 empty:hidden">
-                <DevDatabaseLink />
-              </div>
-            </div>
-          )}
-        </div>
-        <SidebarFooterActions
-          collapsed={collapsed}
-          feedback={feedbackButton}
-          search={searchButton}
-          collapse={collapseButton}
-        />
-      </div>
-    </aside>
+  return (
+    <AppSidebar
+      collapsed={collapsed}
+      onCollapsedChange={setCollapsed}
+      brandName={t("navigation.brand")}
+      brandHref="/home"
+      items={items}
+      secondaryItems={secondaryItems}
+      feedback={feedbackButton}
+      orgSwitcher={orgSwitcher}
+      footerExtras={<DevDatabaseLink />}
+    />
   );
 }

package/corpus/templates/factory/app/components/layout/Sidebar.tsx

@@ -6,15 +6,17 @@ import {
 import { useT } from "@agent-native/core/client/i18n";
 import { openCommandMenu } from "@agent-native/core/client/navigation";
 import { OrgSwitcher } from "@agent-native/core/client/org";
-import { AgentNativeIcon, FeedbackButton } from "@agent-native/core/client/ui";
-import { SidebarFooterActions } from "@agent-native/toolkit/app-shell";
+import {
+  AppSidebar,
+  AppSidebarNavItem,
+  FeedbackButton,
+  type AppSidebarItemDefinition,
+} from "@agent-native/core/client/ui";
 import {
   ChatHistoryRail,
   type ChatHistoryItem,
 } from "@agent-native/toolkit/chat-history";
 import {
-  IconLayoutSidebarLeftCollapse,
-  IconLayoutSidebarLeftExpand,
   IconGitPullRequest,
   IconHierarchy2,
   IconMessageCircle,
@@ -22,46 +24,16 @@ import {
   IconSettings,
 } from "@tabler/icons-react";
 import { useEffect, useMemo } from "react";
-import { Link, useLocation, useNavigate } from "react-router";
+import { useLocation, useNavigate } from "react-router";
 import { toast } from "sonner";
 
+import { Button } from "@/components/ui/button";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { APP_TITLE } from "@/lib/app-config";
-import { cn } from "@/lib/utils";
-
-const navItems = [
-  {
-    icon: IconMessageCircle,
-    labelKey: "navigation.chat",
-    href: "/chat",
-    view: "chat",
-  },
-  {
-    icon: IconGitPullRequest,
-    labelKey: "navigation.triage",
-    href: "/factory",
-    view: "factory",
-  },
-  {
-    icon: IconHierarchy2,
-    labelKey: "navigation.agents",
-    href: "/agents",
-    view: "agents",
-  },
-];
-
-const bottomNavItems = [
-  {
-    icon: IconSettings,
-    labelKey: "navigation.settings",
-    href: "/settings",
-    view: "settings",
-  },
-];
 
 const CHAT_STORAGE_KEY = "chat";
 const CHAT_ACTIVE_THREAD_KEY = `agent-chat-active-thread:${CHAT_STORAGE_KEY}`;
@@ -292,248 +264,88 @@ export function Sidebar({
   const t = useT();
   const isChatRoute =
     location.pathname === "/chat" || location.pathname.startsWith("/chat/");
-  const ToggleIcon = collapsed
-    ? IconLayoutSidebarLeftExpand
-    : IconLayoutSidebarLeftCollapse;
-  const navClass = ({ isActive }: { isActive: boolean }) =>
-    cn(
-      "flex items-center text-sm transition-colors",
-      collapsed
-        ? "relative h-10 w-full justify-center rounded-none px-0"
-        : "h-9 rounded-md gap-3 px-3",
-      isActive
-        ? collapsed
-          ? "bg-sidebar-accent text-sidebar-accent-foreground"
-          : "bg-sidebar-accent text-sidebar-accent-foreground"
-        : collapsed
-          ? "text-sidebar-foreground/70 hover:bg-sidebar-accent/55 hover:text-sidebar-accent-foreground"
-          : "text-sidebar-foreground hover:bg-sidebar-accent/65 hover:text-sidebar-accent-foreground",
-    );
-  const collapseButton = collapsible ? (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <button
-          type="button"
-          onClick={() => onCollapsedChange?.(!collapsed)}
-          className={cn(
-            "flex shrink-0 items-center justify-center rounded-md text-sidebar-foreground/65 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            collapsed ? "size-8" : "size-7",
-          )}
-          aria-label={
-            collapsed
-              ? t("navigation.expandSidebar")
-              : t("navigation.collapseSidebar")
-          }
-        >
-          <ToggleIcon className="size-4" />
-        </button>
-      </TooltipTrigger>
-      <TooltipContent side="right">
-        {collapsed
-          ? t("navigation.expandSidebar")
-          : t("navigation.collapseSidebar")}
-      </TooltipContent>
-    </Tooltip>
-  ) : null;
+
+  const secondaryItems: AppSidebarItemDefinition[] = [
+    {
+      to: "/settings",
+      label: t("navigation.settings"),
+      icon: IconSettings,
+      active: location.pathname.startsWith("/settings"),
+    },
+  ];
+
+  const feedbackButton = (
+    <FeedbackButton variant={collapsed ? "icon" : "sidebar"} side="right" />
+  );
+
+  const orgSwitcher = <OrgSwitcher compact={collapsed} reserveSpace />;
+
   const searchButton = (
     <Tooltip>
       <TooltipTrigger asChild>
-        <button
+        <Button
           type="button"
+          variant="ghost"
+          size="icon"
+          className="size-9 shrink-0 text-primary hover:bg-accent/60 hover:text-primary"
           onClick={openCommandMenu}
           aria-label={t("root.commandSearch")}
-          className="flex size-8 items-center justify-center rounded-md text-sidebar-foreground/65 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
         >
           <IconSearch className="size-4" />
-        </button>
+        </Button>
       </TooltipTrigger>
       <TooltipContent side="right">{t("root.commandSearch")}</TooltipContent>
     </Tooltip>
   );
-  const feedbackButton = (
-    <FeedbackButton
-      variant={collapsed ? "icon" : "sidebar"}
-      side="right"
-      className={collapsed ? "h-8 w-8" : "min-w-0"}
-    />
-  );
 
   return (
-    <aside
-      data-collapsed={collapsed ? "true" : "false"}
-      className={cn(
-        "flex h-full min-w-0 shrink-0 flex-col overflow-hidden border-e border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-out",
-        collapsed ? "w-12" : "w-60",
-      )}
+    <AppSidebar
+      collapsed={collapsed}
+      collapsible={collapsible}
+      onCollapsedChange={onCollapsedChange}
+      brandName={APP_TITLE}
+      brandHref="/chat"
+      secondaryItems={secondaryItems}
+      feedback={feedbackButton}
+      orgSwitcher={orgSwitcher}
+      footerExtras={searchButton}
     >
-      <div
-        className={cn(
-          "flex shrink-0 items-center border-b border-sidebar-border",
-          collapsed ? "h-12 justify-center px-0" : "h-14 px-3",
-        )}
-      >
-        <Link
-          to="/home"
-          onClick={(event) => {
-            if (
-              !collapsible ||
-              !onCollapsedChange ||
-              event.metaKey ||
-              event.ctrlKey ||
-              event.shiftKey ||
-              event.altKey ||
-              event.button !== 0
-            ) {
-              return;
-            }
+      <AppSidebarNavItem
+        to="/chat"
+        label={t("navigation.chat")}
+        icon={IconMessageCircle}
+        active={isChatRoute}
+        onClick={(event) => {
+          if (
+            !isChatRoute &&
+            !event.metaKey &&
+            !event.ctrlKey &&
+            !event.shiftKey &&
+            !event.altKey
+          ) {
             event.preventDefault();
-            onCollapsedChange(!collapsed);
-          }}
-          className={cn(
-            "flex min-w-0 items-center rounded outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            collapsed ? "size-7 justify-center" : "flex-1 gap-3",
-          )}
-          aria-label={
-            collapsible && onCollapsedChange
-              ? collapsed
-                ? t("navigation.expandSidebar")
-                : t("navigation.collapseSidebar")
-              : collapsed
-                ? APP_TITLE
-                : undefined
+            navigateWithAgentChatViewTransition(navigate, "/chat");
           }
-        >
-          <AgentNativeIcon
-            aria-hidden="true"
-            className="h-3.5 w-6 shrink-0 text-sidebar-accent-foreground"
-          />
-          <div className={cn("min-w-0", collapsed && "sr-only")}>
-            <p className="truncate text-sm font-semibold text-sidebar-accent-foreground">
-              {APP_TITLE}
-            </p>
-          </div>
-        </Link>
-      </div>
-
-      <nav
-        className={cn(
-          "flex-1 overflow-y-auto",
-          collapsed ? "px-0 py-2" : "px-2 py-3",
-        )}
-      >
-        <div className={cn("grid", collapsed ? "gap-0" : "gap-1")}>
-          {navItems.map((item) => {
-            const Icon = item.icon;
-            const isActive =
-              item.href === "/chat"
-                ? isChatRoute
-                : item.href === "/factory"
-                  ? location.pathname === "/factory" ||
-                    location.pathname === "/new-factory"
-                  : location.pathname.startsWith(item.href);
-            const link = (
-              <Link
-                to={item.href}
-                onClick={(event) => {
-                  if (
-                    item.href === "/chat" &&
-                    !isChatRoute &&
-                    !event.metaKey &&
-                    !event.ctrlKey &&
-                    !event.shiftKey &&
-                    !event.altKey
-                  ) {
-                    event.preventDefault();
-                    navigateWithAgentChatViewTransition(navigate, "/chat");
-                  }
-                }}
-                className={navClass({ isActive })}
-                aria-current={isActive ? "page" : undefined}
-                aria-label={collapsed ? t(item.labelKey) : undefined}
-              >
-                <Icon className="size-4 shrink-0" />
-                <span className={collapsed ? "sr-only" : "truncate"}>
-                  {t(item.labelKey)}
-                </span>
-              </Link>
-            );
-            return (
-              <div key={item.href}>
-                {collapsed ? (
-                  <Tooltip>
-                    <TooltipTrigger asChild>{link}</TooltipTrigger>
-                    <TooltipContent side="right">
-                      {t(item.labelKey)}
-                    </TooltipContent>
-                  </Tooltip>
-                ) : (
-                  link
-                )}
-                {!collapsed && item.view === "chat" ? (
-                  <ChatThreadsSection open={isChatRoute} />
-                ) : null}
-              </div>
-            );
-          })}
-        </div>
-      </nav>
+        }}
+      />
+      {!collapsed && <ChatThreadsSection open={isChatRoute} />}
 
-      <div className={cn("mt-auto shrink-0", collapsed && "py-2")}>
-        <nav
-          className={cn(
-            "grid",
-            collapsed ? "gap-0 px-1 py-1" : "gap-1 px-2 py-1",
-          )}
-        >
-          {bottomNavItems.map((item) => {
-            const Icon = item.icon;
-            const isActive = location.pathname.startsWith(item.href);
-            const link = (
-              <Link
-                to={item.href}
-                className={navClass({ isActive })}
-                aria-current={isActive ? "page" : undefined}
-                aria-label={collapsed ? t(item.labelKey) : undefined}
-              >
-                <Icon className="size-4 shrink-0" />
-                <span className={collapsed ? "sr-only" : "truncate"}>
-                  {t(item.labelKey)}
-                </span>
-              </Link>
-            );
-            return collapsed ? (
-              <Tooltip key={item.href}>
-                <TooltipTrigger asChild>{link}</TooltipTrigger>
-                <TooltipContent side="right">{t(item.labelKey)}</TooltipContent>
-              </Tooltip>
-            ) : (
-              <div key={item.href}>{link}</div>
-            );
-          })}
-        </nav>
+      <AppSidebarNavItem
+        to="/factory"
+        label={t("navigation.triage")}
+        icon={IconGitPullRequest}
+        active={
+          location.pathname === "/factory" ||
+          location.pathname === "/new-factory"
+        }
+      />
 
-        <div
-          className={cn(
-            collapsed ? "px-1 py-1 empty:hidden" : "px-3 py-2 empty:hidden",
-          )}
-        >
-          <OrgSwitcher
-            reserveSpace
-            className={
-              collapsed
-                ? "h-8 justify-center px-0 [&>span]:sr-only [&>svg:last-child]:hidden"
-                : undefined
-            }
-          />
-        </div>
-
-        <SidebarFooterActions
-          collapsed={collapsed}
-          feedback={feedbackButton}
-          search={searchButton}
-          collapse={collapseButton}
-        />
-      </div>
-    </aside>
+      <AppSidebarNavItem
+        to="/agents"
+        label={t("navigation.agents")}
+        icon={IconHierarchy2}
+        active={location.pathname.startsWith("/agents")}
+      />
+    </AppSidebar>
   );
 }