From 4d4ba7acac78e528a88f2d3228d3ae456febc44e Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@chihlas.com>
Date: Fri, 20 Feb 2026 21:25:10 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20Phase=205=20=E2=80=94=20Sidebar=20pinne?=
 =?UTF-8?q?d=20section=20dual=20collapse=20+=20show=20more/less?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Header collapse hides entire section, resets to 5 items on re-expand
- List truncation: show first 5, "Show more (N)" expands to all
- Clicking a flow auto-collapses back to 5
- Smooth max-height CSS transition (250ms ease-out)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/sidebar/PinnedFlowsSection.tsx | 88 +++++++++++++------
 1 file changed, 63 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/sidebar/PinnedFlowsSection.tsx b/frontend/src/components/sidebar/PinnedFlowsSection.tsx
index 0e1ae165..79c8968f 100644
--- a/frontend/src/components/sidebar/PinnedFlowsSection.tsx
+++ b/frontend/src/components/sidebar/PinnedFlowsSection.tsx
@@ -10,51 +10,89 @@ interface PinnedFlowsSectionProps {
   onUnpin: (treeId: string) => void
 }
 
+const TRUNCATE_COUNT = 5
+
 export function PinnedFlowsSection({ flows, onUnpin }: PinnedFlowsSectionProps) {
   const navigate = useNavigate()
   const [collapsed, setCollapsed] = useState(false)
+  const [showAll, setShowAll] = useState(false)
+
+  const handleToggleCollapse = () => {
+    if (collapsed) {
+      setShowAll(false) // Reset to truncated on re-expand
+    }
+    setCollapsed(!collapsed)
+  }
+
+  const visibleFlows = showAll ? flows : flows.slice(0, TRUNCATE_COUNT)
+  const hasMore = flows.length > TRUNCATE_COUNT
+
+  const handleFlowClick = (flow: PinnedFlow) => {
+    setShowAll(false) // Collapse back to 5 on navigation
+    navigate(getTreeNavigatePath(flow.tree_id, flow.tree_type))
+  }
 
   return (
     <div className="px-3 py-2">
       <button
-        onClick={() => setCollapsed(!collapsed)}
+        onClick={handleToggleCollapse}
         className="flex w-full items-center gap-1 px-3 mb-1 font-heading text-[0.6875rem] font-bold uppercase tracking-[0.04em] text-muted-foreground hover:text-foreground transition-colors"
       >
         {collapsed ? <ChevronRight size={12} /> : <ChevronDown size={12} />}
         Pinned
+        {flows.length > 0 && (
+          <span className="ml-auto text-[0.625rem] font-normal">{flows.length}</span>
+        )}
       </button>
 
-      {!collapsed && (
-        <div className="space-y-0.5 max-h-[280px] overflow-y-auto">
+      <div
+        className="overflow-hidden transition-[max-height] duration-[250ms] ease-out"
+        style={{
+          maxHeight: collapsed ? 0 : showAll
+            ? `${flows.length * 36 + 40}px`
+            : `${Math.min(flows.length, TRUNCATE_COUNT) * 36 + 40}px`,
+        }}
+      >
+        <div className="space-y-0.5">
           {flows.length === 0 ? (
             <p className="px-3 py-2 text-xs text-muted-foreground">
               Pin your most-used flows here
             </p>
           ) : (
-            flows.map(flow => (
-              <button
-                key={flow.tree_id}
-                onClick={() => navigate(getTreeNavigatePath(flow.tree_id, flow.tree_type))}
-                onContextMenu={(e) => {
-                  e.preventDefault()
-                  onUnpin(flow.tree_id)
-                }}
-                className={cn(
-                  'group flex w-full items-center gap-2.5 rounded-lg px-3 py-1.5 text-[0.8125rem] font-medium transition-colors',
-                  'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
-                )}
-                title={`${flow.tree_name} (right-click to unpin)`}
-              >
-                <span className="text-sm shrink-0">
-                  {flow.tree_type === 'procedural' ? '📋' : flow.tree_type === 'maintenance' ? '🛠️' : '🔧'}
-                </span>
-                <span className="truncate flex-1 text-left">{flow.tree_name}</span>
-                <Pin size={12} className="shrink-0 opacity-0 group-hover:opacity-40 transition-opacity" />
-              </button>
-            ))
+            <>
+              {visibleFlows.map(flow => (
+                <button
+                  key={flow.tree_id}
+                  onClick={() => handleFlowClick(flow)}
+                  onContextMenu={(e) => {
+                    e.preventDefault()
+                    onUnpin(flow.tree_id)
+                  }}
+                  className={cn(
+                    'group flex w-full items-center gap-2.5 rounded-lg px-3 py-1.5 text-[0.8125rem] font-medium transition-colors',
+                    'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
+                  )}
+                  title={`${flow.tree_name} (right-click to unpin)`}
+                >
+                  <span className="text-sm shrink-0">
+                    {flow.tree_type === 'procedural' ? '📋' : flow.tree_type === 'maintenance' ? '🛠️' : '🔧'}
+                  </span>
+                  <span className="truncate flex-1 text-left">{flow.tree_name}</span>
+                  <Pin size={12} className="shrink-0 opacity-0 group-hover:opacity-40 transition-opacity" />
+                </button>
+              ))}
+              {hasMore && (
+                <button
+                  onClick={() => setShowAll(!showAll)}
+                  className="w-full px-3 py-1 text-xs text-muted-foreground hover:text-foreground transition-colors text-left"
+                >
+                  {showAll ? 'Show less' : `Show more (${flows.length})`}
+                </button>
+              )}
+            </>
           )}
         </div>
-      )}
+      </div>
     </div>
   )
 }