@agent-native/core 0.79.27 → 0.80.0

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

@@ -22,6 +22,8 @@ import {
   IconCheck,
   IconEye,
   IconEyeOff,
+  IconLayoutSidebarLeftCollapse,
+  IconLayoutSidebarLeftExpand,
 } from "@tabler/icons-react";
 import {
   startOfMonth,
@@ -99,6 +101,8 @@ const navItems = [
 interface SidebarProps {
   open: boolean;
   onClose: () => void;
+  collapsed?: boolean;
+  onCollapsedChange?: (collapsed: boolean) => void;
 }
 
 const MONTH_LABELS = [
@@ -597,7 +601,12 @@ function GoogleAccountsSection({
   );
 }
 
-export function Sidebar({ open, onClose }: SidebarProps) {
+export function Sidebar({
+  open,
+  onClose,
+  collapsed = false,
+  onCollapsedChange,
+}: SidebarProps) {
   const location = useLocation();
   const navigate = useNavigate();
   const t = useT();
@@ -656,348 +665,457 @@ export function Sidebar({ open, onClose }: SidebarProps) {
 
       <aside
         data-open={open ? "true" : "false"}
+        data-collapsed={collapsed ? "true" : "false"}
         className={cn(
-          "agent-layout-left-drawer calendar-app-sidebar fixed start-0 top-0 z-50 flex h-full w-56 min-w-0 flex-col overflow-hidden border-e border-border bg-card transition-transform duration-200 lg:static",
+          "agent-layout-left-drawer calendar-app-sidebar fixed start-0 top-0 z-50 flex h-full min-w-0 flex-col overflow-hidden border-e border-border bg-card transition-[width,translate] duration-200 ease-out lg:static",
+          collapsed ? "w-12" : "w-56",
         )}
       >
         {/* Logo */}
-        <div className="flex h-12 shrink-0 items-center justify-between gap-2.5 border-b border-border px-4">
-          <Link
-            to="/"
-            onClick={onClose}
-            className="flex items-center gap-2 rounded outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            <img
-              src={appPath("/agent-native-icon-light.svg")}
-              alt=""
-              aria-hidden="true"
-              className="block h-4 w-auto shrink-0 dark:hidden"
-            />
-            <img
-              src={appPath("/agent-native-icon-dark.svg")}
-              alt=""
-              aria-hidden="true"
-              className="hidden h-4 w-auto shrink-0 dark:block"
-            />
-            <span className="text-base font-semibold tracking-tight">
-              {t("navigation.brand")}
-            </span>
-          </Link>
-        </div>
-
-        <div className="min-h-0 flex-1 overflow-y-auto">
-          {/* Mini calendar */}
-          <MiniCalendar
-            selectedDate={selectedDate}
-            onDateSelect={handleMiniCalendarDateSelect}
-          />
-
-          {/* Nav */}
-          <nav className="space-y-0.5 border-t border-border p-2.5">
-            {navItems.map((item) => {
-              const isActive =
-                item.path === "/"
-                  ? location.pathname === "/"
-                  : location.pathname.startsWith(item.path);
-
-              return (
-                <Link
-                  key={item.path}
-                  to={item.path}
-                  onClick={onClose}
-                  className={cn(
-                    "flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
-                    isActive
-                      ? "bg-primary/10 text-primary"
-                      : "text-muted-foreground hover:bg-accent/60 hover:text-foreground",
-                  )}
-                >
-                  <item.icon className="h-4 w-4" />
-                  {t(item.labelKey)}
-                </Link>
-              );
-            })}
-          </nav>
-
-          {/* Google status / connect CTA */}
-          {!googleStatus.isLoading && !isConnected && (
-            <GoogleConnectSidebarButton />
-          )}
-
-          {isConnected && (googleStatus.data?.accounts?.length ?? 0) > 0 && (
-            <GoogleAccountsSection
-              accounts={googleStatus.data!.accounts!}
-              onClose={onClose}
-            />
+        <div
+          className={cn(
+            "flex h-12 shrink-0 items-center justify-between gap-2.5 border-b border-border",
+            collapsed ? "px-1" : "px-4",
           )}
-
-          {/* Other Calendars — people overlays + external ICS feeds combined */}
-          <div className="border-t border-border px-1.5 py-1.5">
-            <div className="flex min-h-8 items-center justify-between px-3">
-              <div className="flex items-center gap-1">
-                <span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
-                  {t("sidebar.otherCalendars")}
+        >
+          {collapsed && onCollapsedChange ? (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="h-10 w-10 shrink-0 text-muted-foreground"
+                  onClick={() => onCollapsedChange(false)}
+                  aria-label={t("sidebar.expandSidebar")}
+                >
+                  <IconLayoutSidebarLeftExpand className="h-4 w-4 rtl:-scale-x-100" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="right">
+                {t("sidebar.expandSidebar")}
+              </TooltipContent>
+            </Tooltip>
+          ) : (
+            <>
+              <Link
+                to="/"
+                onClick={onClose}
+                className="flex items-center gap-2 rounded outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                <img
+                  src={appPath("/agent-native-icon-light.svg")}
+                  alt=""
+                  aria-hidden="true"
+                  className="block h-4 w-auto shrink-0 dark:hidden"
+                />
+                <img
+                  src={appPath("/agent-native-icon-dark.svg")}
+                  alt=""
+                  aria-hidden="true"
+                  className="hidden h-4 w-auto shrink-0 dark:block"
+                />
+                <span className="text-base font-semibold tracking-tight">
+                  {t("navigation.brand")}
                 </span>
+              </Link>
+              {onCollapsedChange ? (
                 <Tooltip>
                   <TooltipTrigger asChild>
-                    <span className="flex items-center text-muted-foreground/40 hover:text-muted-foreground cursor-default">
-                      <IconInfoCircle className="h-3 w-3" />
-                    </span>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8 shrink-0 text-muted-foreground"
+                      onClick={() => onCollapsedChange(!collapsed)}
+                      aria-label={
+                        collapsed
+                          ? t("sidebar.expandSidebar")
+                          : t("sidebar.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">
-                    <p>{t("sidebar.otherCalendarsDescription")}</p>
+                    {collapsed
+                      ? t("sidebar.expandSidebar")
+                      : t("sidebar.collapseSidebar")}
                   </TooltipContent>
                 </Tooltip>
-              </div>
-              <button
-                type="button"
-                onClick={() => {
-                  setAddCalendarDefaultTab("people");
-                  setAddCalendarOpen(true);
-                }}
-                className="flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:text-foreground"
-              >
-                <IconPlus className="h-3.5 w-3.5" />
-              </button>
-            </div>
-            {(overlayPeople.length > 0 || externalCalendars.length > 0) && (
-              <div className="mt-1 space-y-1">
-                {overlayPeople.length > 0 && (
-                  <Collapsible
-                    open={peopleGroupOpen}
-                    onOpenChange={setPeopleGroupOpen}
-                  >
-                    <CollapsibleTrigger asChild>
-                      <button
-                        type="button"
-                        className="flex h-7 w-full items-center gap-1 rounded px-3 text-xs text-muted-foreground hover:bg-accent/50 hover:text-foreground"
-                      >
-                        {peopleGroupOpen ? (
-                          <IconChevronDown className="h-3 w-3" />
-                        ) : (
-                          <IconChevronRight className="h-3 w-3 rtl:-scale-x-100" />
+              ) : null}
+            </>
+          )}
+        </div>
+
+        <div className="min-h-0 flex-1 overflow-y-auto">
+          {collapsed ? (
+            <nav className="flex flex-col items-center gap-1 px-1 py-2">
+              {navItems.map((item) => {
+                const isActive =
+                  item.path === "/"
+                    ? location.pathname === "/"
+                    : location.pathname.startsWith(item.path);
+                return (
+                  <Tooltip key={item.path}>
+                    <TooltipTrigger asChild>
+                      <Link
+                        to={item.path}
+                        onClick={onClose}
+                        aria-label={t(item.labelKey)}
+                        className={cn(
+                          "flex h-10 w-10 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground",
+                          isActive && "bg-primary/10 text-primary",
                         )}
-                        <span className="min-w-0 flex-1 text-start">
-                          People
-                        </span>
-                        <span className="text-[10px]">
-                          {overlayPeople.length}
+                      >
+                        <item.icon className="h-4 w-4" />
+                      </Link>
+                    </TooltipTrigger>
+                    <TooltipContent side="right">
+                      {t(item.labelKey)}
+                    </TooltipContent>
+                  </Tooltip>
+                );
+              })}
+            </nav>
+          ) : (
+            <>
+              {/* Mini calendar */}
+              <MiniCalendar
+                selectedDate={selectedDate}
+                onDateSelect={handleMiniCalendarDateSelect}
+              />
+
+              {/* Nav */}
+              <nav className="space-y-0.5 border-t border-border p-2.5">
+                {navItems.map((item) => {
+                  const isActive =
+                    item.path === "/"
+                      ? location.pathname === "/"
+                      : location.pathname.startsWith(item.path);
+
+                  return (
+                    <Link
+                      key={item.path}
+                      to={item.path}
+                      onClick={onClose}
+                      className={cn(
+                        "flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
+                        isActive
+                          ? "bg-primary/10 text-primary"
+                          : "text-muted-foreground hover:bg-accent/60 hover:text-foreground",
+                      )}
+                    >
+                      <item.icon className="h-4 w-4" />
+                      {t(item.labelKey)}
+                    </Link>
+                  );
+                })}
+              </nav>
+
+              {/* Google status / connect CTA */}
+              {!googleStatus.isLoading && !isConnected && (
+                <GoogleConnectSidebarButton />
+              )}
+
+              {isConnected &&
+                (googleStatus.data?.accounts?.length ?? 0) > 0 && (
+                  <GoogleAccountsSection
+                    accounts={googleStatus.data!.accounts!}
+                    onClose={onClose}
+                  />
+                )}
+
+              {/* Other Calendars — people overlays + external ICS feeds combined */}
+              <div className="border-t border-border px-1.5 py-1.5">
+                <div className="flex min-h-8 items-center justify-between px-3">
+                  <div className="flex items-center gap-1">
+                    <span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+                      {t("sidebar.otherCalendars")}
+                    </span>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <span className="flex items-center text-muted-foreground/40 hover:text-muted-foreground cursor-default">
+                          <IconInfoCircle className="h-3 w-3" />
                         </span>
-                      </button>
-                    </CollapsibleTrigger>
-                    <CollapsibleContent className="space-y-0.5">
-                      {overlayPeople.map((person) => (
-                        <div
-                          key={person.email}
-                          className="group flex min-h-7 items-center gap-2 px-3 text-xs"
-                        >
-                          <ColorPickerPopover
-                            color={person.color}
-                            onColorChange={(color) =>
-                              updatePersonColor.mutate({
-                                email: person.email,
-                                color,
-                              })
-                            }
+                      </TooltipTrigger>
+                      <TooltipContent side="right">
+                        <p>{t("sidebar.otherCalendarsDescription")}</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setAddCalendarDefaultTab("people");
+                      setAddCalendarOpen(true);
+                    }}
+                    className="flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:text-foreground"
+                  >
+                    <IconPlus className="h-3.5 w-3.5" />
+                  </button>
+                </div>
+                {(overlayPeople.length > 0 || externalCalendars.length > 0) && (
+                  <div className="mt-1 space-y-1">
+                    {overlayPeople.length > 0 && (
+                      <Collapsible
+                        open={peopleGroupOpen}
+                        onOpenChange={setPeopleGroupOpen}
+                      >
+                        <CollapsibleTrigger asChild>
+                          <button
+                            type="button"
+                            className="flex h-7 w-full items-center gap-1 rounded px-3 text-xs text-muted-foreground hover:bg-accent/50 hover:text-foreground"
                           >
-                            <button
-                              type="button"
-                              className="shrink-0 cursor-pointer rounded-full p-0.5 hover:ring-2 hover:ring-border"
+                            {peopleGroupOpen ? (
+                              <IconChevronDown className="h-3 w-3" />
+                            ) : (
+                              <IconChevronRight className="h-3 w-3 rtl:-scale-x-100" />
+                            )}
+                            <span className="min-w-0 flex-1 text-start">
+                              People
+                            </span>
+                            <span className="text-[10px]">
+                              {overlayPeople.length}
+                            </span>
+                          </button>
+                        </CollapsibleTrigger>
+                        <CollapsibleContent className="space-y-0.5">
+                          {overlayPeople.map((person) => (
+                            <div
+                              key={person.email}
+                              className="group flex min-h-7 items-center gap-2 px-3 text-xs"
                             >
+                              <ColorPickerPopover
+                                color={person.color}
+                                onColorChange={(color) =>
+                                  updatePersonColor.mutate({
+                                    email: person.email,
+                                    color,
+                                  })
+                                }
+                              >
+                                <button
+                                  type="button"
+                                  className="shrink-0 cursor-pointer rounded-full p-0.5 hover:ring-2 hover:ring-border"
+                                >
+                                  <span
+                                    className={cn(
+                                      "block h-2.5 w-2.5 rounded-full",
+                                      isHiddenCalendar(
+                                        "people",
+                                        person.email,
+                                      ) && "opacity-40",
+                                    )}
+                                    style={{ backgroundColor: person.color }}
+                                  />
+                                </button>
+                              </ColorPickerPopover>
                               <span
                                 className={cn(
-                                  "block h-2.5 w-2.5 rounded-full",
-                                  isHiddenCalendar("people", person.email) &&
-                                    "opacity-40",
+                                  "min-w-0 flex-1 truncate",
+                                  isHiddenCalendar("people", person.email)
+                                    ? "text-muted-foreground/40"
+                                    : "text-muted-foreground",
                                 )}
-                                style={{ backgroundColor: person.color }}
-                              />
-                            </button>
-                          </ColorPickerPopover>
-                          <span
-                            className={cn(
-                              "min-w-0 flex-1 truncate",
-                              isHiddenCalendar("people", person.email)
-                                ? "text-muted-foreground/40"
-                                : "text-muted-foreground",
-                            )}
-                          >
-                            {person.name || person.email}
-                          </span>
-                          <div className="flex items-center">
-                            <Tooltip>
-                              <TooltipTrigger asChild>
+                              >
+                                {person.name || person.email}
+                              </span>
+                              <div className="flex items-center">
+                                <Tooltip>
+                                  <TooltipTrigger asChild>
+                                    <button
+                                      type="button"
+                                      onClick={() =>
+                                        toggleHiddenCalendar(
+                                          "people",
+                                          person.email,
+                                        )
+                                      }
+                                      className="flex h-6 w-6 items-center justify-center rounded text-muted-foreground/40 hover:text-foreground group-hover:text-muted-foreground/80"
+                                    >
+                                      {isHiddenCalendar(
+                                        "people",
+                                        person.email,
+                                      ) ? (
+                                        <IconEyeOff className="h-3 w-3" />
+                                      ) : (
+                                        <IconEye className="h-3 w-3" />
+                                      )}
+                                    </button>
+                                  </TooltipTrigger>
+                                  <TooltipContent side="right">
+                                    {isHiddenCalendar("people", person.email)
+                                      ? t("sidebar.showCalendar")
+                                      : t("sidebar.hideCalendar")}
+                                  </TooltipContent>
+                                </Tooltip>
                                 <button
                                   type="button"
                                   onClick={() =>
-                                    toggleHiddenCalendar("people", person.email)
+                                    removePerson.mutate(person.email)
                                   }
-                                  className="flex h-6 w-6 items-center justify-center rounded text-muted-foreground/40 hover:text-foreground group-hover:text-muted-foreground/80"
+                                  className="flex h-6 w-6 items-center justify-center rounded text-muted-foreground/60 opacity-0 hover:text-foreground group-hover:opacity-100"
                                 >
-                                  {isHiddenCalendar("people", person.email) ? (
-                                    <IconEyeOff className="h-3 w-3" />
-                                  ) : (
-                                    <IconEye className="h-3 w-3" />
-                                  )}
+                                  <IconX className="h-3 w-3" />
                                 </button>
-                              </TooltipTrigger>
-                              <TooltipContent side="right">
-                                {isHiddenCalendar("people", person.email)
-                                  ? t("sidebar.showCalendar")
-                                  : t("sidebar.hideCalendar")}
-                              </TooltipContent>
-                            </Tooltip>
-                            <button
-                              type="button"
-                              onClick={() => removePerson.mutate(person.email)}
-                              className="flex h-6 w-6 items-center justify-center rounded text-muted-foreground/60 opacity-0 hover:text-foreground group-hover:opacity-100"
-                            >
-                              <IconX className="h-3 w-3" />
-                            </button>
-                          </div>
-                        </div>
-                      ))}
-                    </CollapsibleContent>
-                  </Collapsible>
-                )}
+                              </div>
+                            </div>
+                          ))}
+                        </CollapsibleContent>
+                      </Collapsible>
+                    )}
 
-                {externalCalendars.length > 0 && (
-                  <Collapsible
-                    open={feedsGroupOpen}
-                    onOpenChange={setFeedsGroupOpen}
-                  >
-                    <CollapsibleTrigger asChild>
-                      <button
-                        type="button"
-                        className="flex h-7 w-full items-center gap-1 rounded px-3 text-xs text-muted-foreground hover:bg-accent/50 hover:text-foreground"
+                    {externalCalendars.length > 0 && (
+                      <Collapsible
+                        open={feedsGroupOpen}
+                        onOpenChange={setFeedsGroupOpen}
                       >
-                        {feedsGroupOpen ? (
-                          <IconChevronDown className="h-3 w-3" />
-                        ) : (
-                          <IconChevronRight className="h-3 w-3 rtl:-scale-x-100" />
-                        )}
-                        <span className="min-w-0 flex-1 text-start">Feeds</span>
-                        <span className="text-[10px]">
-                          {externalCalendars.length}
-                        </span>
-                      </button>
-                    </CollapsibleTrigger>
-                    <CollapsibleContent className="space-y-0.5">
-                      {externalCalendars.map((cal) => (
-                        <div
-                          key={cal.id}
-                          className="group flex min-h-7 items-center gap-2 px-3 text-xs"
-                        >
-                          <ColorPickerPopover
-                            color={cal.color}
-                            onColorChange={(color) =>
-                              updateExternalColor.mutate({ id: cal.id, color })
-                            }
+                        <CollapsibleTrigger asChild>
+                          <button
+                            type="button"
+                            className="flex h-7 w-full items-center gap-1 rounded px-3 text-xs text-muted-foreground hover:bg-accent/50 hover:text-foreground"
                           >
-                            <button
-                              type="button"
-                              className="shrink-0 cursor-pointer rounded-full p-0.5 hover:ring-2 hover:ring-border"
+                            {feedsGroupOpen ? (
+                              <IconChevronDown className="h-3 w-3" />
+                            ) : (
+                              <IconChevronRight className="h-3 w-3 rtl:-scale-x-100" />
+                            )}
+                            <span className="min-w-0 flex-1 text-start">
+                              Feeds
+                            </span>
+                            <span className="text-[10px]">
+                              {externalCalendars.length}
+                            </span>
+                          </button>
+                        </CollapsibleTrigger>
+                        <CollapsibleContent className="space-y-0.5">
+                          {externalCalendars.map((cal) => (
+                            <div
+                              key={cal.id}
+                              className="group flex min-h-7 items-center gap-2 px-3 text-xs"
                             >
+                              <ColorPickerPopover
+                                color={cal.color}
+                                onColorChange={(color) =>
+                                  updateExternalColor.mutate({
+                                    id: cal.id,
+                                    color,
+                                  })
+                                }
+                              >
+                                <button
+                                  type="button"
+                                  className="shrink-0 cursor-pointer rounded-full p-0.5 hover:ring-2 hover:ring-border"
+                                >
+                                  <span
+                                    className={cn(
+                                      "block h-2.5 w-2.5 rounded-full",
+                                      isHiddenCalendar("external", cal.id) &&
+                                        "opacity-40",
+                                    )}
+                                    style={{ backgroundColor: cal.color }}
+                                  />
+                                </button>
+                              </ColorPickerPopover>
                               <span
                                 className={cn(
-                                  "block h-2.5 w-2.5 rounded-full",
-                                  isHiddenCalendar("external", cal.id) &&
-                                    "opacity-40",
+                                  "min-w-0 flex-1 truncate",
+                                  isHiddenCalendar("external", cal.id)
+                                    ? "text-muted-foreground/40"
+                                    : "text-muted-foreground",
                                 )}
-                                style={{ backgroundColor: cal.color }}
-                              />
-                            </button>
-                          </ColorPickerPopover>
-                          <span
-                            className={cn(
-                              "min-w-0 flex-1 truncate",
-                              isHiddenCalendar("external", cal.id)
-                                ? "text-muted-foreground/40"
-                                : "text-muted-foreground",
-                            )}
-                          >
-                            {cal.name}
-                          </span>
-                          <div className="flex items-center">
-                            <Tooltip>
-                              <TooltipTrigger asChild>
+                              >
+                                {cal.name}
+                              </span>
+                              <div className="flex items-center">
+                                <Tooltip>
+                                  <TooltipTrigger asChild>
+                                    <button
+                                      type="button"
+                                      onClick={() =>
+                                        toggleHiddenCalendar("external", cal.id)
+                                      }
+                                      className="flex h-6 w-6 items-center justify-center rounded text-muted-foreground/40 hover:text-foreground group-hover:text-muted-foreground/80"
+                                    >
+                                      {isHiddenCalendar("external", cal.id) ? (
+                                        <IconEyeOff className="h-3 w-3" />
+                                      ) : (
+                                        <IconEye className="h-3 w-3" />
+                                      )}
+                                    </button>
+                                  </TooltipTrigger>
+                                  <TooltipContent side="right">
+                                    {isHiddenCalendar("external", cal.id)
+                                      ? t("sidebar.showCalendar")
+                                      : t("sidebar.hideCalendar")}
+                                  </TooltipContent>
+                                </Tooltip>
                                 <button
                                   type="button"
-                                  onClick={() =>
-                                    toggleHiddenCalendar("external", cal.id)
-                                  }
-                                  className="flex h-6 w-6 items-center justify-center rounded text-muted-foreground/40 hover:text-foreground group-hover:text-muted-foreground/80"
+                                  onClick={() => removeExternal.mutate(cal.id)}
+                                  className="flex h-6 w-6 items-center justify-center rounded text-muted-foreground/60 opacity-0 hover:text-foreground group-hover:opacity-100"
                                 >
-                                  {isHiddenCalendar("external", cal.id) ? (
-                                    <IconEyeOff className="h-3 w-3" />
-                                  ) : (
-                                    <IconEye className="h-3 w-3" />
-                                  )}
+                                  <IconX className="h-3 w-3" />
                                 </button>
-                              </TooltipTrigger>
-                              <TooltipContent side="right">
-                                {isHiddenCalendar("external", cal.id)
-                                  ? t("sidebar.showCalendar")
-                                  : t("sidebar.hideCalendar")}
-                              </TooltipContent>
-                            </Tooltip>
-                            <button
-                              type="button"
-                              onClick={() => removeExternal.mutate(cal.id)}
-                              className="flex h-6 w-6 items-center justify-center rounded text-muted-foreground/60 opacity-0 hover:text-foreground group-hover:opacity-100"
-                            >
-                              <IconX className="h-3 w-3" />
-                            </button>
-                          </div>
-                        </div>
-                      ))}
-                    </CollapsibleContent>
-                  </Collapsible>
+                              </div>
+                            </div>
+                          ))}
+                        </CollapsibleContent>
+                      </Collapsible>
+                    )}
+                  </div>
                 )}
               </div>
-            )}
-          </div>
+            </>
+          )}
         </div>
 
-        <div className="shrink-0 border-t border-border">
-          <div className="px-2.5 py-1.5">
-            <ExtensionsSidebarSection />
-          </div>
+        {!collapsed ? (
+          <div className="shrink-0">
+            <div className="px-2.5 py-1.5">
+              <ExtensionsSidebarSection />
+            </div>
 
-          <div className="border-t border-border px-3 py-2">
-            <OrgSwitcher reserveSpace />
-          </div>
+            <div className="px-3 py-2">
+              <OrgSwitcher reserveSpace />
+            </div>
 
-          <div className="flex items-center gap-1 border-t border-border px-1.5 py-1.5">
-            <DevDatabaseLink />
-            <div className="min-w-0 flex-1">
-              <FeedbackButton className="px-3 py-2" />
+            <div className="flex items-center gap-1 px-1.5 py-1.5">
+              <DevDatabaseLink />
+              <div className="min-w-0 flex-1">
+                <FeedbackButton className="px-3 py-2" />
+              </div>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 text-muted-foreground"
+                    onClick={() =>
+                      window.dispatchEvent(new Event("calendar:open-shortcuts"))
+                    }
+                  >
+                    <IconKeyboard className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="top">
+                  <p>
+                    {t("keyboardShortcuts.title")}{" "}
+                    <kbd className="ms-1 rounded border border-border bg-muted px-1 font-mono text-[10px]">
+                      ?
+                    </kbd>
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+              <ThemeToggle className="h-8 w-8" />
             </div>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-8 w-8 text-muted-foreground"
-                  onClick={() =>
-                    window.dispatchEvent(new Event("calendar:open-shortcuts"))
-                  }
-                >
-                  <IconKeyboard className="h-4 w-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent side="top">
-                <p>
-                  {t("keyboardShortcuts.title")}{" "}
-                  <kbd className="ms-1 rounded border border-border bg-muted px-1 font-mono text-[10px]">
-                    ?
-                  </kbd>
-                </p>
-              </TooltipContent>
-            </Tooltip>
-            <ThemeToggle className="h-8 w-8" />
           </div>
-        </div>
+        ) : null}
       </aside>
     </>
   );