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

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

@@ -13,11 +13,13 @@ 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 {
+  AppSidebar,
+  AppSidebarNavItem,
   AgentNativeIcon,
   buildSignInReturnHref,
   FeedbackButton,
+  type AppSidebarItemDefinition,
 } from "@agent-native/core/client/ui";
-import { SidebarFooterActions } from "@agent-native/toolkit/app-shell";
 import {
   ChatHistoryRail,
   type ChatHistoryItem,
@@ -25,13 +27,10 @@ import {
 import {
   IconClipboardCheck,
   IconEdit,
-  IconLayoutSidebarLeftCollapse,
-  IconLayoutSidebarLeftExpand,
   IconMessageCircle,
   IconPlus,
   IconRefresh,
   IconSettings,
-  IconSearch,
 } from "@tabler/icons-react";
 import { useEffect, useMemo, useState, type MouseEvent } from "react";
 import { Link, useLocation, useNavigate } from "react-router";
@@ -540,216 +539,92 @@ export function Sidebar({
   const { session, isLoading: sessionLoading } = useSession();
   const t = useT();
   const returnPath = planReturnPathFromLocation(location);
-  const ToggleIcon = collapsed
-    ? IconLayoutSidebarLeftExpand
-    : IconLayoutSidebarLeftCollapse;
-  const collapseButton = collapsible ? (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          type="button"
-          size="icon"
-          variant="ghost"
-          className="size-8 shrink-0 text-muted-foreground"
-          onClick={() => onCollapsedChange?.(!collapsed)}
-          aria-label={
-            collapsed
-              ? t("sidebar.expandSidebar")
-              : t("sidebar.collapseSidebar")
-          }
-        >
-          <ToggleIcon className="size-4" />
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent side="right">
-        {collapsed ? t("sidebar.expandSidebar") : t("sidebar.collapseSidebar")}
-      </TooltipContent>
-    </Tooltip>
-  ) : null;
-  const searchButton = (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          type="button"
-          size="icon"
-          variant="ghost"
-          className="size-8 shrink-0 text-muted-foreground"
-          onClick={openCommandMenu}
-          aria-label={t("plansPage.overview.searchPlaceholder")}
-        >
-          <IconSearch className="size-4" />
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent side="right">
-        {t("plansPage.overview.searchPlaceholder")}
-      </TooltipContent>
-    </Tooltip>
-  );
+
+  const secondaryItems: AppSidebarItemDefinition[] = [
+    {
+      to: "/settings",
+      label: t("navigation.settings"),
+      icon: IconSettings,
+      active: pathname.startsWith("/settings"),
+    },
+  ];
+
   const feedbackButton = (
-    <FeedbackButton
-      variant={collapsed ? "icon" : "sidebar"}
-      side="right"
-      className={collapsed ? "size-8" : "min-w-0"}
-    />
+    <FeedbackButton variant={collapsed ? "icon" : "sidebar"} side="right" />
   );
 
-  return (
-    <aside
-      data-collapsed={collapsed ? "true" : "false"}
-      className={cn(
-        "flex h-full min-w-0 shrink-0 flex-col overflow-hidden border-e border-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-out",
-        collapsed ? "w-14" : "w-60",
-      )}
+  const orgSwitcher = session ? (
+    <OrgSwitcher compact={collapsed} />
+  ) : !sessionLoading ? (
+    <Button
+      type="button"
+      size="sm"
+      variant="outline"
+      className={collapsed ? "!size-9 !p-0 text-xs" : "h-8 w-full px-3 text-xs"}
+      onClick={() => signInWithReturnPath(returnPath)}
     >
-      <div
-        className={cn(
-          "group/brand flex h-12 shrink-0 items-center border-b border-border",
-          collapsed ? "justify-center px-0" : "gap-2 px-3",
-        )}
-      >
-        <button
-          type="button"
-          onClick={() => onCollapsedChange?.(!collapsed)}
-          className={cn(
-            "flex min-w-0 items-center gap-2 rounded outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            collapsed ? "justify-center" : "flex-1 text-start",
-          )}
-          aria-label={
-            collapsible
-              ? collapsed
-                ? t("sidebar.expandSidebar")
-                : t("sidebar.collapseSidebar")
-              : undefined
-          }
-          disabled={!collapsible || !onCollapsedChange}
-          data-sidebar-brand-toggle
-        >
-          <AgentNativeIcon
-            aria-hidden="true"
-            className="h-3.5 w-6 shrink-0 text-sidebar-foreground"
-          />
-          {!collapsed && (
-            <span className="truncate text-sm font-semibold tracking-tight">
-              {APP_TITLE}
-            </span>
-          )}
-        </button>
-        {!collapsed && <BrandingCustomizePopover />}
-      </div>
-
-      <nav className="flex-1 space-y-1 overflow-y-auto px-2 py-2">
-        {navItems.map((item) => {
-          const Icon = item.icon;
-          const isActive =
-            item.href === "/chat"
-              ? pathname === "/chat"
-              : item.href === "/plans"
-                ? pathname.startsWith("/plans") ||
-                  pathname.startsWith("/recaps") ||
-                  pathname.startsWith("/local-plans")
-                : pathname.startsWith(item.href);
-          const link = (
-            <Link
-              to={item.href}
-              className={cn(
-                "flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
-                isActive
-                  ? "bg-sidebar-accent text-sidebar-accent-foreground"
-                  : "text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground",
-                collapsed && "justify-center gap-0 px-0",
-              )}
-            >
-              <Icon className="h-4 w-4 shrink-0" />
-              {collapsed ? (
-                <span className="sr-only">{t(item.labelKey)}</span>
-              ) : (
-                t(item.labelKey)
-              )}
-            </Link>
-          );
-          return (
-            <div key={item.href}>
-              {link}
-              {item.href === "/chat" ? (
-                <PlanChatsSection collapsed={collapsed} open={isActive} />
-              ) : null}
-              {item.href === "/plans" && isActive ? (
-                <PlansSidebarSection collapsed={collapsed} />
-              ) : null}
-            </div>
-          );
-        })}
-      </nav>
-
-      <nav className="grid shrink-0 gap-1 px-2 py-1">
-        {bottomNavItems.map((item) => {
-          const Icon = item.icon;
-          const isActive = pathname.startsWith(item.href);
-          const link = (
-            <Link
-              to={item.href}
-              className={cn(
-                "flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
-                isActive
-                  ? "bg-sidebar-accent text-sidebar-accent-foreground"
-                  : "text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground",
-                collapsed && "justify-center gap-0 px-0",
-              )}
-              aria-label={collapsed ? t(item.labelKey) : undefined}
-            >
-              <Icon className="h-4 w-4 shrink-0" />
-              {collapsed ? (
-                <span className="sr-only">{t(item.labelKey)}</span>
-              ) : (
-                t(item.labelKey)
-              )}
-            </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>
-
-      {!collapsed && session ? (
-        <div className="space-y-2 px-3 py-2 empty:hidden">
-          <DevDatabaseLink />
-          <OrgSwitcher />
-        </div>
-      ) : null}
+      {collapsed ? "In" : t("sidebar.signIn")}
+    </Button>
+  ) : null;
 
-      {!collapsed && !sessionLoading && !session ? (
-        <div className="space-y-2 px-3 py-2">
-          <DevDatabaseLink />
-          <Button
-            type="button"
-            size="sm"
-            variant="outline"
-            className="h-8 px-3 text-xs"
-            onClick={() => signInWithReturnPath(returnPath)}
+  return (
+    <AppSidebar
+      collapsed={collapsed}
+      collapsible={collapsible}
+      onCollapsedChange={onCollapsedChange}
+      brandName={APP_TITLE}
+      brandHref="/plans"
+      brandLink={
+        <div className="group/brand flex min-w-0 items-center gap-1">
+          <Link
+            to="/plans"
+            className="flex min-w-0 items-center gap-2 rounded text-start outline-none focus-visible:ring-2 focus-visible:ring-ring"
           >
-            {t("sidebar.signIn")}
-          </Button>
+            <AgentNativeIcon
+              aria-hidden="true"
+              className="h-3.5 w-6 shrink-0 text-primary"
+            />
+            {!collapsed && (
+              <span className="truncate text-sm font-semibold text-primary">
+                {APP_TITLE}
+              </span>
+            )}
+          </Link>
+          {!collapsed ? <BrandingCustomizePopover /> : null}
         </div>
-      ) : null}
+      }
+      secondaryItems={secondaryItems}
+      feedback={feedbackButton}
+      orgSwitcher={orgSwitcher}
+      footerExtras={<DevDatabaseLink />}
+    >
+      <div>
+        <AppSidebarNavItem
+          to="/chat"
+          label={t("navigation.ask")}
+          icon={IconMessageCircle}
+          active={pathname === "/chat"}
+        />
+        <PlanChatsSection collapsed={collapsed} open={pathname === "/chat"} />
+      </div>
 
-      {!collapsed && sessionLoading ? (
-        <div className="px-3 py-2">
-          <DevDatabaseLink />
-        </div>
-      ) : null}
-
-      <SidebarFooterActions
-        collapsed={collapsed}
-        feedback={feedbackButton}
-        search={searchButton}
-        collapse={collapseButton}
-      />
-    </aside>
+      <div>
+        <AppSidebarNavItem
+          to="/plans"
+          label={t("navigation.plan")}
+          icon={IconClipboardCheck}
+          active={
+            pathname.startsWith("/plans") ||
+            pathname.startsWith("/recaps") ||
+            pathname.startsWith("/local-plans")
+          }
+        />
+        {pathname.startsWith("/plans") ||
+        pathname.startsWith("/recaps") ||
+        pathname.startsWith("/local-plans") ? (
+          <PlansSidebarSection collapsed={collapsed} />
+        ) : null}
+      </div>
+    </AppSidebar>
   );
 }

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

@@ -2,42 +2,28 @@ 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 {
+  AppSidebar,
+  FeedbackButton,
+  type AppSidebarItemDefinition,
+} from "@agent-native/core/client/ui";
 import {
   IconLayoutGrid,
   IconComponents,
-  IconSettings,
-  IconLayoutSidebarLeftCollapse,
-  IconLayoutSidebarLeftExpand,
   IconSearch,
+  IconSettings,
 } from "@tabler/icons-react";
-import { Link, useLocation } from "react-router";
+import { useLocation } from "react-router";
 
+import { Button } from "@/components/ui/button";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
-
-const navItems = [
-  { icon: IconLayoutGrid, labelKey: "navigation.decks", href: "/home" },
-  {
-    icon: IconComponents,
-    labelKey: "navigation.designSystems",
-    href: "/design-systems",
-  },
-];
-
-const bottomNavItems = [
-  { icon: IconSettings, labelKey: "navigation.settings", href: "/settings" },
-];
 
 interface SidebarProps {
   collapsed: boolean;
-  /** Omit to hide the collapse/expand toggle (e.g. inside the mobile drawer,
-   * where toggling the desktop preference is meaningless). */
   onToggleCollapsed?: () => void;
 }
 
@@ -50,230 +36,71 @@ export function Sidebar({ collapsed, onToggleCollapsed }: SidebarProps) {
       ? location.pathname === "/home"
       : location.pathname.startsWith(href);
 
-  const collapseButton = onToggleCollapsed ? (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <button
-          type="button"
-          onClick={onToggleCollapsed}
-          aria-label={
-            collapsed
-              ? t("sidebar.expandSidebar")
-              : t("sidebar.collapseSidebar")
-          }
-          className="flex size-8 items-center justify-center rounded-md text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground"
-        >
-          {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("sidebar.expandSidebar") : t("sidebar.collapseSidebar")}
-      </TooltipContent>
-    </Tooltip>
-  ) : null;
+  const items: AppSidebarItemDefinition[] = [
+    {
+      to: "/home",
+      label: t("navigation.decks"),
+      icon: IconLayoutGrid,
+      active: isItemActive("/home"),
+    },
+    {
+      to: "/design-systems",
+      label: t("navigation.designSystems"),
+      icon: IconComponents,
+      active: isItemActive("/design-systems"),
+    },
+  ];
+
+  const secondaryItems: AppSidebarItemDefinition[] = [
+    {
+      to: "/settings",
+      label: t("navigation.settings"),
+      icon: IconSettings,
+      active: isItemActive("/settings"),
+    },
+  ];
+
+  const feedbackButton = (
+    <FeedbackButton variant={collapsed ? "icon" : "sidebar"} side="right" />
+  );
+
+  const orgSwitcher = <OrgSwitcher compact={collapsed} />;
+
   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.searchDecks")}
-          className="flex size-8 items-center justify-center rounded-md text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground"
         >
-          <IconSearch className="h-4 w-4" />
-        </button>
+          <IconSearch className="size-4" />
+        </Button>
       </TooltipTrigger>
       <TooltipContent side="right">{t("root.searchDecks")}</TooltipContent>
     </Tooltip>
   );
-  const feedbackButton = (
-    <FeedbackButton
-      variant={collapsed ? "icon" : "sidebar"}
-      side="right"
-      className={collapsed ? "size-8" : "min-w-0"}
-    />
-  );
-
-  const brand = (
-    <div
-      className={cn(
-        "flex items-center gap-2",
-        collapsed ? "size-8 justify-center" : "min-w-0 flex-1",
-      )}
-    >
-      <AgentNativeIcon
-        aria-hidden="true"
-        className="h-3.5 w-6 shrink-0 text-sidebar-foreground"
-      />
-      {!collapsed && (
-        <span className="truncate text-sm font-semibold tracking-tight">
-          {t("navigation.brand")}
-        </span>
-      )}
-    </div>
-  );
-  const brandControl = onToggleCollapsed ? (
-    <Tooltip delayDuration={0}>
-      <TooltipTrigger asChild>
-        <button
-          type="button"
-          onClick={onToggleCollapsed}
-          aria-label={
-            collapsed
-              ? t("sidebar.expandSidebar")
-              : t("sidebar.collapseSidebar")
-          }
-          className={cn(
-            "flex min-w-0 items-center rounded-md text-foreground outline-none transition-colors hover:bg-sidebar-accent/50 focus-visible:ring-2 focus-visible:ring-ring",
-            collapsed
-              ? "size-8 justify-center"
-              : "w-full gap-2 px-1 py-1 text-start",
-          )}
-          data-sidebar-brand-toggle
-        >
-          {brand}
-        </button>
-      </TooltipTrigger>
-      <TooltipContent side="right">
-        {collapsed ? t("sidebar.expandSidebar") : t("sidebar.collapseSidebar")}
-      </TooltipContent>
-    </Tooltip>
-  ) : (
-    brand
-  );
-
-  if (collapsed) {
-    return (
-      <aside className="flex h-full w-12 shrink-0 flex-col items-center overflow-hidden bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-out">
-        <div className="flex h-12 w-full shrink-0 items-center justify-center">
-          {brandControl}
-        </div>
-        <nav className="flex min-h-0 flex-1 flex-col items-center gap-1 overflow-y-auto pt-1">
-          {navItems.map((item) => {
-            const Icon = item.icon;
-            const isActive = isItemActive(item.href);
-            return (
-              <Tooltip key={item.href} delayDuration={0}>
-                <TooltipTrigger asChild>
-                  <Link
-                    to={item.href}
-                    aria-label={t(item.labelKey)}
-                    className={cn(
-                      "flex h-10 w-10 items-center justify-center rounded-md transition-colors",
-                      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" />
-                  </Link>
-                </TooltipTrigger>
-                <TooltipContent side="right">{t(item.labelKey)}</TooltipContent>
-              </Tooltip>
-            );
-          })}
-        </nav>
-        <nav className="flex shrink-0 flex-col items-center gap-1 py-1">
-          {bottomNavItems.map((item) => {
-            const Icon = item.icon;
-            return (
-              <Tooltip key={item.href} delayDuration={0}>
-                <TooltipTrigger asChild>
-                  <Link
-                    to={item.href}
-                    aria-label={t(item.labelKey)}
-                    className={cn(
-                      "flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground",
-                      isItemActive(item.href) &&
-                        "bg-sidebar-accent text-sidebar-accent-foreground",
-                    )}
-                  >
-                    <Icon className="h-4 w-4 shrink-0" />
-                  </Link>
-                </TooltipTrigger>
-                <TooltipContent side="right">{t(item.labelKey)}</TooltipContent>
-              </Tooltip>
-            );
-          })}
-        </nav>
-        <SidebarFooterActions
-          collapsed
-          feedback={feedbackButton}
-          search={searchButton}
-          collapse={collapseButton}
-        />
-      </aside>
-    );
-  }
 
   return (
-    <aside className="flex h-full w-56 min-w-0 shrink-0 flex-col overflow-hidden bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-out">
-      <div className="flex h-12 shrink-0 items-center px-4">{brandControl}</div>
-
-      <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
-        <nav className="space-y-1 px-2 py-2">
-          {navItems.map((item) => {
-            const Icon = item.icon;
-            const isActive = isItemActive(item.href);
-            return (
-              <Link
-                key={item.href}
-                to={item.href}
-                className={cn(
-                  "flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
-                  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" />
-                {t(item.labelKey)}
-              </Link>
-            );
-          })}
-        </nav>
-
-        <div className="mt-auto shrink-0">
-          <nav className="space-y-1 px-2 py-1">
-            {bottomNavItems.map((item) => {
-              const Icon = item.icon;
-              const isActive = isItemActive(item.href);
-              return (
-                <Link
-                  key={item.href}
-                  to={item.href}
-                  className={cn(
-                    "flex items-center gap-3 rounded-lg px-3 py-2 text-sm",
-                    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" />
-                  {t(item.labelKey)}
-                </Link>
-              );
-            })}
-          </nav>
-
-          <div className="px-3 py-2 empty:hidden">
-            <OrgSwitcher />
-          </div>
-
-          <div className="px-3 py-2 empty:hidden">
-            <DevDatabaseLink />
-          </div>
-          <SidebarFooterActions
-            feedback={feedbackButton}
-            search={searchButton}
-            collapse={collapseButton}
-          />
-        </div>
-      </div>
-    </aside>
+    <AppSidebar
+      collapsed={collapsed}
+      collapsible={Boolean(onToggleCollapsed)}
+      onCollapsedChange={onToggleCollapsed}
+      brandName={t("navigation.brand")}
+      brandHref="/home"
+      items={items}
+      secondaryItems={secondaryItems}
+      feedback={feedbackButton}
+      orgSwitcher={orgSwitcher}
+      footerExtras={
+        <>
+          {searchButton}
+          <DevDatabaseLink />
+        </>
+      }
+    />
   );
 }