From cb1c4360d97fb0d44f795c6c7531af7057292464 Mon Sep 17 00:00:00 2001
From: xintaofei <itpkcn@gmail.com>
Date: Fri, 12 Jun 2026 10:25:41 +0800
Subject: [PATCH] feat(sidebar): add Open Folder and Clone Repository actions
 to the Folders header

Surface the two "add a folder" actions as hover-revealed buttons on the
left-sidebar Folders section header, reusing the existing open-folder and
clone dialogs.

- Use the FolderOpenDot and FolderGit2 icons for Open Folder and Clone
  Repository across the section header, the new-folder dropdown, and the
  empty-workspace buttons and context menu
- Align every sidebar right-edge hover affordance (section headers, folder
  headers, conversation cards, and the New chat / Search badges) to a uniform
  0.75rem inset, with h-6 action buttons whose icons flush to that edge so the
  icons line up with the badges
- Add unit tests for the section-header actions
---
 .../sidebar-conversation-card.tsx             |  16 ++-
 .../sidebar-conversation-list.test.tsx        |   4 +-
 .../sidebar-conversation-list.tsx             |  37 +++--
 .../sidebar-section-header.test.tsx           | 132 ++++++++++++++++++
 .../conversations/sidebar-section-header.tsx  | 101 ++++++++++++--
 src/components/layout/new-folder-dropdown.tsx |   6 +-
 6 files changed, 265 insertions(+), 31 deletions(-)
 create mode 100644 src/components/conversations/sidebar-section-header.test.tsx

diff --git a/src/components/conversations/sidebar-conversation-card.tsx b/src/components/conversations/sidebar-conversation-card.tsx
index 4f6f9900f..0a7bccb99 100644
--- a/src/components/conversations/sidebar-conversation-card.tsx
+++ b/src/components/conversations/sidebar-conversation-card.tsx
@@ -219,7 +219,12 @@ export const SidebarConversationCard = memo(function SidebarConversationCard({
                   clicks don't select the conversation; `tabIndex={-1}` keeps them
                   mouse-only (the context menu Pin/Unpin + Status is the keyboard/
                   AT-accessible path). */}
-              <div className="flex h-full shrink-0 items-center pr-[0.5rem]">
+              {/* pr-[0.375rem] + the list's px-1.5 (0.375rem) puts the time
+                  badge / hover action buttons at a uniform 0.75rem inset from the
+                  sidebar border — the same right edge as the section-header
+                  actions, folder-header actions, and New chat / Search shortcut
+                  badges. */}
+              <div className="flex h-full shrink-0 items-center pr-[0.375rem]">
                 <span className="flex items-center group-hover:hidden">
                   {isRunning ? (
                     <span
@@ -265,7 +270,10 @@ export const SidebarConversationCard = memo(function SidebarConversationCard({
                     that still clears the 3:1 non-text-contrast bar over the row's
                     hover background; hover deepens to full foreground. The folder
                     ⋯ button shares this exact palette so all action icons stay a
-                    consistent two colors. */}
+                    consistent two colors. Each button is justify-end so its 14px
+                    glyph flushes to the slot's right edge (0.75rem) — the same edge
+                    the default time/status badge fills — instead of sitting ~5px in
+                    as a centred icon in a transparent box would. */}
                 <div className="hidden items-center gap-px group-hover:flex">
                   {onTogglePin && (
                     <button
@@ -278,7 +286,7 @@ export const SidebarConversationCard = memo(function SidebarConversationCard({
                       title={isPinned ? t("unpin") : t("pin")}
                       aria-label={isPinned ? t("unpin") : t("pin")}
                       className={cn(
-                        "flex h-6 w-6 shrink-0 items-center justify-center rounded-[0.375rem]",
+                        "flex h-6 w-6 shrink-0 items-center justify-end rounded-[0.375rem]",
                         "cursor-pointer outline-none transition-colors duration-150",
                         "text-muted-foreground/90 hover:text-sidebar-foreground"
                       )}
@@ -303,7 +311,7 @@ export const SidebarConversationCard = memo(function SidebarConversationCard({
                     title={isCompleted ? t("reopen") : t("markCompleted")}
                     aria-label={isCompleted ? t("reopen") : t("markCompleted")}
                     className={cn(
-                      "flex h-6 w-6 shrink-0 items-center justify-center rounded-[0.375rem]",
+                      "flex h-6 w-6 shrink-0 items-center justify-end rounded-[0.375rem]",
                       "cursor-pointer outline-none transition-colors duration-150",
                       "text-muted-foreground/90 hover:text-sidebar-foreground"
                     )}
diff --git a/src/components/conversations/sidebar-conversation-list.test.tsx b/src/components/conversations/sidebar-conversation-list.test.tsx
index 1944e9ec5..2c7302659 100644
--- a/src/components/conversations/sidebar-conversation-list.test.tsx
+++ b/src/components/conversations/sidebar-conversation-list.test.tsx
@@ -129,7 +129,9 @@ vi.mock("virtua", () => ({
 }))
 
 // FolderHeader renders exactly one of FolderClosed/FolderOpen in its body →
-// folder re-render probe. Every other icon stays real.
+// folder re-render probe. Every other icon stays real. (The Folders section
+// header's Open Folder / Clone Repository actions use FolderOpenDot / FolderGit2,
+// which are NOT mocked here, so they never inflate this probe.)
 vi.mock("lucide-react", async (importOriginal) => {
   const actual = await importOriginal<typeof import("lucide-react")>()
   return {
diff --git a/src/components/conversations/sidebar-conversation-list.tsx b/src/components/conversations/sidebar-conversation-list.tsx
index 09b419e8c..7cd52953e 100644
--- a/src/components/conversations/sidebar-conversation-list.tsx
+++ b/src/components/conversations/sidebar-conversation-list.tsx
@@ -22,8 +22,9 @@ import {
   ChevronRight,
   Download,
   ExternalLink,
+  FolderGit2,
   FolderOpen,
-  GitBranch,
+  FolderOpenDot,
   ListChecks,
   Loader2,
   MoreHorizontal,
@@ -364,7 +365,7 @@ const FolderHeader = memo(function FolderHeader({
               aria-label={t("moreOptions")}
               aria-haspopup="menu"
               className={cn(
-                "flex h-7 w-7 shrink-0 items-center justify-center",
+                "flex h-6 w-6 shrink-0 items-center justify-end",
                 // Shares the card action-icon palette: default /90 is the lightest
                 // muted shade clearing 3:1 non-text contrast (incl. on touch, where
                 // this stays visible); hover deepens to full foreground.
@@ -386,8 +387,14 @@ const FolderHeader = memo(function FolderHeader({
               className={cn(
                 // Mirrors the ⋯ button's action-icon palette and hover-reveal so
                 // the two read as one trailing control cluster. As the rightmost
-                // control it carries the small right-edge margin.
-                "mr-[0.125rem] flex h-7 w-7 shrink-0 items-center justify-center",
+                // control it carries the right-edge margin that lines this cluster
+                // up with the other sidebar affordances: 0.375rem + the list's
+                // px-1.5 (0.375rem) = a uniform 0.75rem inset from the border,
+                // matching the section-header actions and conversation-card badges.
+                // h-6 (not h-7) keeps every action-icon centre on the same axis, and
+                // justify-end flushes the glyph to that 0.75rem edge so the visible
+                // icon — not the transparent button box — lines up with the badges.
+                "mr-[0.375rem] flex h-6 w-6 shrink-0 items-center justify-end",
                 "rounded-[0.375rem] cursor-pointer outline-none text-muted-foreground/90",
                 "opacity-0 group-hover:opacity-100 focus-visible:opacity-100 [@media(hover:none)]:opacity-100",
                 "transition-[opacity,color] duration-150 hover:text-sidebar-foreground"
@@ -1628,6 +1635,11 @@ export function SidebarConversationList({
     }
   }, [openFolder])
 
+  // Stable trigger for the Clone Repository dialog, passed to the memoized
+  // Folders section header. Empty deps (setCloneOpen is a stable setter) so the
+  // header doesn't re-render on every parent render.
+  const handleOpenCloneDialog = useCallback(() => setCloneOpen(true), [])
+
   const handleBrowserSelect = useCallback(
     (path: string) => {
       openFolder(path).catch((err) => {
@@ -1722,6 +1734,15 @@ export function SidebarConversationList({
           // entry point, reachable even when empty). `openChatModeTab` is a stable
           // context callback, so the memo holds.
           onNewChat={row.section === "chats" ? openChatModeTab : undefined}
+          // The folders section gets two right-edge hover actions mirroring the
+          // top-of-page NewFolderDropdown: Open Folder and Clone Repository.
+          // Both handlers are stable, so the memo holds.
+          onOpenFolder={
+            row.section === "folders" ? handleOpenFolderAction : undefined
+          }
+          onCloneRepository={
+            row.section === "folders" ? handleOpenCloneDialog : undefined
+          }
           // Every section header carries a top gap: it separates "Folders" from
           // the "Pinned" section above it, and — now that a fixed New chat /
           // Search region sits above the scrolled list — gives the first section
@@ -1832,7 +1853,7 @@ export function SidebarConversationList({
             className="w-full max-w-[14rem] justify-start"
             onClick={handleOpenFolderAction}
           >
-            <FolderOpen className="h-3.5 w-3.5 mr-1.5" />
+            <FolderOpenDot className="h-3.5 w-3.5 mr-1.5" />
             {tFolderDropdown("openFolder")}
           </Button>
           <Button
@@ -1841,7 +1862,7 @@ export function SidebarConversationList({
             className="w-full max-w-[14rem] justify-start"
             onClick={() => setCloneOpen(true)}
           >
-            <GitBranch className="h-3.5 w-3.5 mr-1.5" />
+            <FolderGit2 className="h-3.5 w-3.5 mr-1.5" />
             {tFolderDropdown("cloneRepository")}
           </Button>
           <Button
@@ -1953,11 +1974,11 @@ export function SidebarConversationList({
             </ContextMenuItem>
             <ContextMenuSeparator />
             <ContextMenuItem onSelect={handleOpenFolderAction}>
-              <FolderOpen className="h-4 w-4" />
+              <FolderOpenDot className="h-4 w-4" />
               {tFolderDropdown("openFolder")}
             </ContextMenuItem>
             <ContextMenuItem onSelect={() => setCloneOpen(true)}>
-              <GitBranch className="h-4 w-4" />
+              <FolderGit2 className="h-4 w-4" />
               {tFolderDropdown("cloneRepository")}
             </ContextMenuItem>
             <ContextMenuItem onSelect={handleProjectBoot}>
diff --git a/src/components/conversations/sidebar-section-header.test.tsx b/src/components/conversations/sidebar-section-header.test.tsx
new file mode 100644
index 000000000..05c16eac6
--- /dev/null
+++ b/src/components/conversations/sidebar-section-header.test.tsx
@@ -0,0 +1,132 @@
+import { type ReactElement } from "react"
+import { fireEvent, render } from "@testing-library/react"
+import { NextIntlClientProvider } from "next-intl"
+import { describe, expect, it, vi, beforeEach } from "vitest"
+
+import { SidebarSectionHeader } from "./sidebar-section-header"
+import enMessages from "@/i18n/messages/en.json"
+
+// The hover-reveal action buttons carry only an aria-label (icon, no text), so
+// getByLabelText addresses them unambiguously. CSS hides them until hover, but
+// fireEvent dispatches directly on the node regardless of pointer-events, so the
+// wiring is testable without a real pointer.
+const onToggle = vi.fn()
+const onNewChat = vi.fn()
+const onOpenFolder = vi.fn()
+const onCloneRepository = vi.fn()
+
+function renderWithIntl(ui: ReactElement) {
+  return render(
+    <NextIntlClientProvider locale="en" messages={enMessages}>
+      {ui}
+    </NextIntlClientProvider>
+  )
+}
+
+beforeEach(() => {
+  onToggle.mockClear()
+  onNewChat.mockClear()
+  onOpenFolder.mockClear()
+  onCloneRepository.mockClear()
+})
+
+describe("SidebarSectionHeader folders-section actions", () => {
+  it("renders Open Folder and Clone Repository buttons on the folders section", () => {
+    const { getByLabelText } = renderWithIntl(
+      <SidebarSectionHeader
+        section="folders"
+        expanded
+        onToggle={onToggle}
+        onOpenFolder={onOpenFolder}
+        onCloneRepository={onCloneRepository}
+      />
+    )
+    expect(getByLabelText("Open Folder")).not.toBeNull()
+    expect(getByLabelText("Clone Repository")).not.toBeNull()
+  })
+
+  it("invokes the matching handler without toggling the section", () => {
+    const { getByLabelText } = renderWithIntl(
+      <SidebarSectionHeader
+        section="folders"
+        expanded
+        onToggle={onToggle}
+        onOpenFolder={onOpenFolder}
+        onCloneRepository={onCloneRepository}
+      />
+    )
+
+    fireEvent.click(getByLabelText("Open Folder"))
+    expect(onOpenFolder).toHaveBeenCalledTimes(1)
+
+    fireEvent.click(getByLabelText("Clone Repository"))
+    expect(onCloneRepository).toHaveBeenCalledTimes(1)
+
+    // The actions are siblings of the toggle button (never nested), so clicking
+    // them never collapses/expands the section.
+    expect(onToggle).not.toHaveBeenCalled()
+  })
+
+  it("renders only the actions whose callbacks are provided", () => {
+    const { getByLabelText, queryByLabelText } = renderWithIntl(
+      <SidebarSectionHeader
+        section="folders"
+        expanded
+        onToggle={onToggle}
+        onOpenFolder={onOpenFolder}
+      />
+    )
+    expect(getByLabelText("Open Folder")).not.toBeNull()
+    expect(queryByLabelText("Clone Repository")).toBeNull()
+  })
+
+  it("still toggles the section when the header label is clicked", () => {
+    const { getByText } = renderWithIntl(
+      <SidebarSectionHeader
+        section="folders"
+        expanded
+        onToggle={onToggle}
+        onOpenFolder={onOpenFolder}
+        onCloneRepository={onCloneRepository}
+      />
+    )
+    fireEvent.click(getByText("Folders"))
+    expect(onToggle).toHaveBeenCalledWith("folders")
+  })
+})
+
+describe("SidebarSectionHeader action gating by section", () => {
+  it("offers only New chat on the chats section, never the folder actions", () => {
+    // Pass the folder callbacks too: they must be gated by `section`, not merely
+    // by callback presence.
+    const { getByLabelText, queryByLabelText } = renderWithIntl(
+      <SidebarSectionHeader
+        section="chats"
+        expanded
+        onToggle={onToggle}
+        onNewChat={onNewChat}
+        onOpenFolder={onOpenFolder}
+        onCloneRepository={onCloneRepository}
+      />
+    )
+    expect(getByLabelText("New chat")).not.toBeNull()
+    expect(queryByLabelText("Open Folder")).toBeNull()
+    expect(queryByLabelText("Clone Repository")).toBeNull()
+  })
+
+  it("offers no action buttons on the pinned section", () => {
+    const { queryByLabelText } = renderWithIntl(
+      <SidebarSectionHeader
+        section="pinned"
+        expanded
+        onToggle={onToggle}
+        onNewChat={onNewChat}
+        onOpenFolder={onOpenFolder}
+        onCloneRepository={onCloneRepository}
+      />
+    )
+    expect(queryByLabelText("New chat")).toBeNull()
+    expect(queryByLabelText("Open Folder")).toBeNull()
+    expect(queryByLabelText("Clone Repository")).toBeNull()
+  })
+})
diff --git a/src/components/conversations/sidebar-section-header.tsx b/src/components/conversations/sidebar-section-header.tsx
index e70daf80c..535125a31 100644
--- a/src/components/conversations/sidebar-section-header.tsx
+++ b/src/components/conversations/sidebar-section-header.tsx
@@ -1,7 +1,12 @@
 "use client"
 
 import { memo } from "react"
-import { ChevronRight, SquarePen } from "lucide-react"
+import {
+  ChevronRight,
+  FolderGit2,
+  FolderOpenDot,
+  SquarePen,
+} from "lucide-react"
 import { useTranslations } from "next-intl"
 import { cn } from "@/lib/utils"
 
@@ -24,6 +29,8 @@ export const SidebarSectionHeader = memo(function SidebarSectionHeader({
   expanded,
   onToggle,
   onNewChat,
+  onOpenFolder,
+  onCloneRepository,
   topGap = false,
 }: {
   section: "pinned" | "folders" | "chats"
@@ -37,6 +44,16 @@ export const SidebarSectionHeader = memo(function SidebarSectionHeader({
    * toggles the section. Must be referentially stable to preserve the memo.
    */
   onNewChat?: () => void
+  /**
+   * When provided on the "folders" section, render two right-edge action
+   * buttons — Open Folder and Clone Repository — the same "add a folder"
+   * actions as the top-of-page NewFolderDropdown, revealed on hover/focus (and
+   * always on touch). Siblings of — not nested in — the toggle button, so
+   * clicking never toggles the section. Must be referentially stable to
+   * preserve the memo.
+   */
+  onOpenFolder?: () => void
+  onCloneRepository?: () => void
   /**
    * Adds breathing room above the header so the "Folders" section reads as
    * visually separated from the "Pinned" section above it. Implemented as
@@ -47,6 +64,11 @@ export const SidebarSectionHeader = memo(function SidebarSectionHeader({
   topGap?: boolean
 }) {
   const t = useTranslations("Folder.sidebar")
+  // Tooltips/aria-labels for the folders-section actions reuse the existing
+  // top-of-page dropdown strings (Open Folder / Clone Repository), so no new
+  // locale keys are introduced. Owned here (not received) to preserve the memo,
+  // same as `t`.
+  const tDropdown = useTranslations("Folder.folderNameDropdown")
   const label =
     section === "pinned"
       ? t("sectionPinned")
@@ -54,6 +76,31 @@ export const SidebarSectionHeader = memo(function SidebarSectionHeader({
         ? t("sectionChats")
         : t("sectionFolders")
   const showNewChat = section === "chats" && onNewChat != null
+  // The folders section mirrors the chats section's right-edge affordance, but
+  // with two buttons (Open Folder / Clone Repository) — the same "add a folder"
+  // actions the top-of-page NewFolderDropdown offers.
+  const showFolderActions =
+    section === "folders" && (onOpenFolder != null || onCloneRepository != null)
+  // Shared styling for the right-edge hover-revealed action buttons (New chat on
+  // the chats section; Open Folder / Clone Repository on the folders section).
+  // Revealed only while the row is hovered (group/header lives on the row
+  // container, NOT the toggle button — so moving onto a button to click it keeps
+  // the row hovered and the button from flickering). Stays shown on keyboard
+  // focus and on touch (no hover). /90 clears the 3:1 non-text bar; hover deepens
+  // to full foreground. h-6/w-6 + 14px icon match the folder rows' right-edge
+  // action icons so every affordance reads as one family. justify-end (not
+  // -center) flushes the 14px glyph to the button's right edge: the box is
+  // transparent, so a centred icon would read ~5px further in than the
+  // conversation time / shortcut badges (which fill to their own right edge),
+  // breaking the shared 0.75rem right alignment.
+  const actionButtonClassName = cn(
+    "flex h-6 w-6 items-center justify-end rounded-[0.375rem]",
+    "cursor-pointer text-muted-foreground/90 outline-none",
+    "opacity-0 group-hover/header:opacity-100 focus-visible:opacity-100",
+    "[@media(hover:none)]:opacity-100",
+    "transition-[color,opacity] duration-150 hover:text-sidebar-foreground",
+    "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
+  )
   return (
     <div className={cn(topGap && "pt-[0.75rem]")}>
       <div className="group/header relative h-[2rem]">
@@ -107,27 +154,51 @@ export const SidebarSectionHeader = memo(function SidebarSectionHeader({
             }}
             title={t("newChatAction")}
             aria-label={t("newChatAction")}
+            // Sized to match the folder rows' right-edge ⋯ action icon
+            // (`h-[0.875rem]`, 14px) so the two affordances read as one family —
+            // a hair smaller than the default `h-4` glyph.
             className={cn(
               "absolute top-1/2 right-[0.375rem] -translate-y-1/2",
-              "flex h-6 w-6 items-center justify-center rounded-[0.375rem]",
-              // Revealed only while the row is hovered (group/header on the row
-              // container, NOT the toggle button — so moving onto the button to
-              // click it keeps the row hovered and the button from flickering).
-              // Stays shown on keyboard focus and on touch (no hover). /90 clears
-              // the 3:1 non-text bar; hover deepens to full foreground.
-              "cursor-pointer text-muted-foreground/90 outline-none",
-              "opacity-0 group-hover/header:opacity-100 focus-visible:opacity-100",
-              "[@media(hover:none)]:opacity-100",
-              "transition-[color,opacity] duration-150 hover:text-sidebar-foreground",
-              "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
+              actionButtonClassName
             )}
           >
-            {/* Sized to match the folder rows' right-edge ⋯ action icon
-                (`h-[0.875rem]`, 14px) so the two affordances read as one
-                family — a hair smaller than the default `h-4` glyph. */}
             <SquarePen className="h-[0.875rem] w-[0.875rem]" />
           </button>
         )}
+        {showFolderActions && (
+          <div className="absolute top-1/2 right-[0.375rem] flex -translate-y-1/2 items-center gap-px">
+            {onCloneRepository != null && (
+              <button
+                type="button"
+                // Sibling of the toggle button, so it never toggles the section;
+                // stop propagation defensively anyway.
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onCloneRepository()
+                }}
+                title={tDropdown("cloneRepository")}
+                aria-label={tDropdown("cloneRepository")}
+                className={actionButtonClassName}
+              >
+                <FolderGit2 className="h-[0.875rem] w-[0.875rem]" />
+              </button>
+            )}
+            {onOpenFolder != null && (
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onOpenFolder()
+                }}
+                title={tDropdown("openFolder")}
+                aria-label={tDropdown("openFolder")}
+                className={actionButtonClassName}
+              >
+                <FolderOpenDot className="h-[0.875rem] w-[0.875rem]" />
+              </button>
+            )}
+          </div>
+        )}
       </div>
     </div>
   )
diff --git a/src/components/layout/new-folder-dropdown.tsx b/src/components/layout/new-folder-dropdown.tsx
index 7c59984da..c25e75981 100644
--- a/src/components/layout/new-folder-dropdown.tsx
+++ b/src/components/layout/new-folder-dropdown.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useState } from "react"
-import { FolderOpen, FolderPlus, GitBranch, Rocket } from "lucide-react"
+import { FolderGit2, FolderOpenDot, FolderPlus, Rocket } from "lucide-react"
 import { useTranslations } from "next-intl"
 import {
   DropdownMenu,
@@ -57,11 +57,11 @@ export function NewFolderDropdown() {
         </DropdownMenuTrigger>
         <DropdownMenuContent className="min-w-56" align="start">
           <DropdownMenuItem onSelect={handleOpenFolder}>
-            <FolderOpen className="h-3.5 w-3.5 shrink-0" />
+            <FolderOpenDot className="h-3.5 w-3.5 shrink-0" />
             {t("openFolder")}
           </DropdownMenuItem>
           <DropdownMenuItem onSelect={() => setCloneOpen(true)}>
-            <GitBranch className="h-3.5 w-3.5 shrink-0" />
+            <FolderGit2 className="h-3.5 w-3.5 shrink-0" />
             {t("cloneRepository")}
           </DropdownMenuItem>
           <DropdownMenuItem onSelect={() => openProjectBootWindow()}>