@agent-native/core 0.79.27 → 0.80.1

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

@@ -13,6 +13,8 @@ import {
   IconArchive,
   IconDots,
   IconEdit,
+  IconLayoutSidebarLeftCollapse,
+  IconLayoutSidebarLeftExpand,
   IconPin,
   IconPlus,
 } from "@tabler/icons-react";
@@ -38,6 +40,12 @@ import { cn } from "@/lib/utils";
 const BRAIN_CHAT_STORAGE_KEY = "brain";
 const BRAIN_ACTIVE_THREAD_KEY = `agent-chat-active-thread:${BRAIN_CHAT_STORAGE_KEY}`;
 
+interface SidebarProps {
+  collapsed?: boolean;
+  collapsible?: boolean;
+  onCollapsedChange?: (collapsed: boolean) => void;
+}
+
 function formatThreadAge(updatedAt: number) {
   const diffMs = Math.max(0, Date.now() - updatedAt);
   const minutes = Math.floor(diffMs / 60_000);
@@ -324,25 +332,73 @@ function BrainChatsSection() {
   );
 }
 
-export function Sidebar() {
+export function Sidebar({
+  collapsed = false,
+  collapsible = true,
+  onCollapsedChange,
+}: SidebarProps) {
   const location = useLocation();
   const navigate = useNavigate();
   const t = useT();
   const isAskRoute = location.pathname === "/";
+  const ToggleIcon = collapsed
+    ? IconLayoutSidebarLeftExpand
+    : IconLayoutSidebarLeftCollapse;
   const navClass = ({ isActive }: { isActive: boolean }) =>
     cn(
-      "flex h-9 items-center gap-3 rounded-md px-3 text-sm transition-colors",
+      "flex items-center text-sm transition-colors",
+      collapsed
+        ? "h-10 w-10 justify-center rounded-md"
+        : "h-9 gap-3 rounded-md px-3",
       isActive
         ? "bg-sidebar-accent 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="flex size-8 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"
+          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;
 
   return (
-    <aside className="flex h-full w-60 min-w-0 shrink-0 flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground">
-      <div className="flex h-14 shrink-0 items-center gap-3 border-b border-sidebar-border px-4">
+    <aside
+      data-collapsed={collapsed ? "true" : "false"}
+      className={cn(
+        "flex h-full min-w-0 shrink-0 flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-out",
+        collapsed ? "w-12" : "w-60",
+      )}
+    >
+      <div
+        className={cn(
+          "flex h-14 shrink-0 items-center border-b border-sidebar-border",
+          collapsed ? "justify-center px-0" : "gap-3 px-4",
+        )}
+      >
         <Link
           to="/"
-          className="flex min-w-0 items-center gap-3 rounded outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className={cn(
+            "flex min-w-0 items-center rounded outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            collapsed ? "size-8 justify-center" : "flex-1 gap-3",
+          )}
+          aria-label={collapsed ? t("navigation.brand") : undefined}
         >
           <img
             src={appPath("/agent-native-icon-light.svg")}
@@ -356,44 +412,67 @@ export function Sidebar() {
             aria-hidden="true"
             className="hidden h-4 w-auto shrink-0 dark:block"
           />
-          <div className="min-w-0">
+          <div className={cn("min-w-0", collapsed && "sr-only")}>
             <p className="truncate text-sm font-semibold text-sidebar-accent-foreground">
               {t("navigation.brand")}
             </p>
           </div>
         </Link>
+        {!collapsed ? collapseButton : null}
       </div>
 
-      <nav className="flex-1 overflow-y-auto px-2 py-3">
-        <div className="grid gap-1">
+      <nav
+        className={cn(
+          "flex-1 overflow-y-auto",
+          collapsed ? "px-1 py-2" : "px-2 py-3",
+        )}
+      >
+        <div
+          className={cn(
+            "grid",
+            collapsed ? "justify-items-center gap-1" : "gap-1",
+          )}
+        >
           {navItems.map((item) => {
             const Icon = item.icon;
+            const label = t(`navigation.${item.view}`);
+            const link = (
+              <NavLink
+                to={item.href}
+                end={item.href === "/"}
+                onClick={(event) => {
+                  if (
+                    item.view === "ask" &&
+                    !isAskRoute &&
+                    !event.metaKey &&
+                    !event.ctrlKey &&
+                    !event.shiftKey &&
+                    !event.altKey
+                  ) {
+                    event.preventDefault();
+                    navigateWithAgentChatViewTransition(navigate, "/");
+                  }
+                }}
+                className={navClass}
+                aria-label={collapsed ? label : undefined}
+              >
+                <Icon className="size-4 shrink-0" />
+                <span className={collapsed ? "sr-only" : "truncate"}>
+                  {label}
+                </span>
+              </NavLink>
+            );
             return (
               <div key={item.href}>
-                <NavLink
-                  to={item.href}
-                  end={item.href === "/"}
-                  onClick={(event) => {
-                    if (
-                      item.view === "ask" &&
-                      !isAskRoute &&
-                      !event.metaKey &&
-                      !event.ctrlKey &&
-                      !event.shiftKey &&
-                      !event.altKey
-                    ) {
-                      event.preventDefault();
-                      navigateWithAgentChatViewTransition(navigate, "/");
-                    }
-                  }}
-                  className={navClass}
-                >
-                  <Icon className="size-4 shrink-0" />
-                  <span className="truncate">
-                    {t(`navigation.${item.view}`)}
-                  </span>
-                </NavLink>
-                {item.view === "ask" && isAskRoute ? (
+                {collapsed ? (
+                  <Tooltip>
+                    <TooltipTrigger asChild>{link}</TooltipTrigger>
+                    <TooltipContent side="right">{label}</TooltipContent>
+                  </Tooltip>
+                ) : (
+                  link
+                )}
+                {!collapsed && item.view === "ask" && isAskRoute ? (
                   <BrainChatsSection />
                 ) : null}
               </div>
@@ -403,18 +482,28 @@ export function Sidebar() {
       </nav>
 
       <div className="mt-auto shrink-0">
-        <div className="border-t border-sidebar-border px-2 py-1">
-          <ExtensionsSidebarSection />
-        </div>
+        {!collapsed ? (
+          <div className="px-2 py-1">
+            <ExtensionsSidebarSection />
+          </div>
+        ) : null}
 
-        <div className="border-t border-sidebar-border px-3 py-2">
-          <OrgSwitcher reserveSpace />
-        </div>
+        {!collapsed ? (
+          <div className="px-3 py-2">
+            <OrgSwitcher reserveSpace />
+          </div>
+        ) : null}
 
-        <div className="border-t border-sidebar-border px-3 py-2">
-          <DevDatabaseLink />
-          <FeedbackButton />
-        </div>
+        {!collapsed ? (
+          <div className="px-3 py-2">
+            <DevDatabaseLink />
+            <FeedbackButton />
+          </div>
+        ) : null}
+
+        {collapseButton ? (
+          <div className="flex justify-center px-2 py-2">{collapseButton}</div>
+        ) : null}
       </div>
     </aside>
   );

package/corpus/templates/brain/app/i18n/zh-TW.ts

@@ -31,6 +31,8 @@ const messages = {
     toggleTheme: "切換主題",
   },
   navigation: {
+    collapseSidebar: "收合側邊欄",
+    expandSidebar: "展開側邊欄",
     brand: "Brain",
     ask: "提問",
     askBrain: "詢問 Brain",

package/corpus/templates/brain/app/i18n-data.ts

@@ -51,6 +51,8 @@ const enUS = {
     extensions: "Extensions",
     settings: "Settings",
     openNavigation: "Open navigation",
+    expandSidebar: "Expand sidebar",
+    collapseSidebar: "Collapse sidebar",
     brainNavigation: "Brain navigation",
     brainNavigationDescription: "Navigate between Brain work surfaces.",
   },
@@ -834,6 +836,8 @@ const baseMessagesByLocale = {
       toggleTheme: "切换主题",
     },
     navigation: {
+      collapseSidebar: "折叠侧边栏",
+      expandSidebar: "展开侧边栏",
       brand: "Brain",
       ask: "提问",
       askBrain: "询问 Brain",
@@ -1037,6 +1041,8 @@ const baseMessagesByLocale = {
       toggleTheme: "Cambiar tema",
     },
     navigation: {
+      collapseSidebar: "Contraer barra lateral",
+      expandSidebar: "Expandir barra lateral",
       ask: "Preguntar",
       askBrain: "Preguntar a Brain",
       search: "Buscar",
@@ -1251,6 +1257,8 @@ const baseMessagesByLocale = {
       toggleTheme: "Changer de thème",
     },
     navigation: {
+      collapseSidebar: "Réduire la barre latérale",
+      expandSidebar: "Développer la barre latérale",
       ask: "Demander",
       askBrain: "Demander à Brain",
       search: "Rechercher",
@@ -1465,6 +1473,8 @@ const baseMessagesByLocale = {
       toggleTheme: "Theme wechseln",
     },
     navigation: {
+      collapseSidebar: "Seitenleiste einklappen",
+      expandSidebar: "Seitenleiste erweitern",
       ask: "Fragen",
       askBrain: "Brain fragen",
       search: "Suchen",
@@ -1673,6 +1683,8 @@ const baseMessagesByLocale = {
       toggleTheme: "テーマを切り替え",
     },
     navigation: {
+      collapseSidebar: "サイドバーを折りたたむ",
+      expandSidebar: "サイドバーを展開",
       ask: "質問",
       askBrain: "Brain に質問",
       search: "検索",
@@ -1881,6 +1893,8 @@ const baseMessagesByLocale = {
       toggleTheme: "테마 전환",
     },
     navigation: {
+      collapseSidebar: "사이드바 접기",
+      expandSidebar: "사이드바 펼치기",
       ask: "질문",
       askBrain: "Brain에 질문",
       search: "검색",
@@ -2088,6 +2102,8 @@ const baseMessagesByLocale = {
       toggleTheme: "Alternar tema",
     },
     navigation: {
+      collapseSidebar: "Recolher barra lateral",
+      expandSidebar: "Expandir barra lateral",
       ask: "Perguntar",
       askBrain: "Perguntar ao Brain",
       search: "Buscar",
@@ -2301,6 +2317,8 @@ const baseMessagesByLocale = {
       toggleTheme: "थीम बदलें",
     },
     navigation: {
+      collapseSidebar: "साइडबार समेटें",
+      expandSidebar: "साइडबार फैलाएं",
       ask: "पूछें",
       askBrain: "Brain से पूछें",
       search: "खोजें",
@@ -2508,6 +2526,8 @@ const baseMessagesByLocale = {
       toggleTheme: "تبديل السمة",
     },
     navigation: {
+      collapseSidebar: "طي الشريط الجانبي",
+      expandSidebar: "توسيع الشريط الجانبي",
       ask: "اسأل",
       askBrain: "اسأل Brain",
       search: "بحث",

package/corpus/templates/brain/changelog/2026-06-28-left-sidebar-collapses-into-an-animated-icon-rail.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-28
+---
+
+The left sidebar now collapses into an animated icon rail with quieter footer controls.

package/corpus/templates/calendar/app/components/layout/AppLayout.tsx

@@ -31,6 +31,7 @@ import { prefetchPeopleContacts } from "@/hooks/use-people";
 import { Sidebar } from "./Sidebar";
 
 const EVENT_DETAIL_MODE_KEY = "calendar-event-detail-mode";
+const SIDEBAR_COLLAPSE_KEY = "calendar.sidebar.collapsed";
 
 /** Routes that render without the full AppLayout chrome (sidebar, agent panel). */
 const BARE_ROUTES = new Set(["/event"]);
@@ -47,6 +48,15 @@ function pageOwnsToolbar(pathname: string): boolean {
   return false;
 }
 
+function readSidebarCollapsed() {
+  if (typeof window === "undefined") return false;
+  try {
+    return window.localStorage.getItem(SIDEBAR_COLLAPSE_KEY) === "1";
+  } catch {
+    return false;
+  }
+}
+
 export type ViewMode = "month" | "week" | "day";
 
 interface CalendarContextValue {
@@ -144,6 +154,8 @@ export function AppLayout({ children }: AppLayoutProps) {
   const isSettingsPage = location.pathname === "/settings";
   const isCalendarPage = location.pathname === "/";
   const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] =
+    useState(readSidebarCollapsed);
   const [selectedDate, setSelectedDate] = useState(new Date());
   const [viewMode, setViewMode] = useState<ViewMode>(isMobile ? "day" : "week");
   const [peopleSearchOpen, setPeopleSearchOpen] = useState(false);
@@ -178,6 +190,17 @@ export function AppLayout({ children }: AppLayoutProps) {
     void prefetchPeopleContacts(queryClient);
   }, [hasAccounts, queryClient]);
 
+  useEffect(() => {
+    try {
+      window.localStorage.setItem(
+        SIDEBAR_COLLAPSE_KEY,
+        sidebarCollapsed ? "1" : "0",
+      );
+    } catch {
+      // Ignore storage failures; the in-memory preference still works.
+    }
+  }, [sidebarCollapsed]);
+
   // Global keyboard-shortcuts help: opens via `?` (or shift+/) or the sidebar
   // button on any page, not just the calendar view. Calendar-specific shortcuts
   // (j/k/c/etc.) still live in CalendarView.
@@ -259,7 +282,12 @@ export function AppLayout({ children }: AppLayoutProps) {
         onClose={() => setShortcutsHelpOpen(false)}
       />
       <div className="agent-layout-shell flex h-screen overflow-hidden bg-background">
-        <Sidebar open={sidebarOpen} onClose={() => setSidebarOpen(false)} />
+        <Sidebar
+          open={sidebarOpen}
+          onClose={() => setSidebarOpen(false)}
+          collapsed={!isMobile && sidebarCollapsed}
+          onCollapsedChange={setSidebarCollapsed}
+        />
         <AgentSidebar
           position="right"
           defaultOpen