From 3e0be782c4afb725a607518563a00d85561a54c3 Mon Sep 17 00:00:00 2001
From: Mark Henderson <mark@getacquired.com>
Date: Mon, 2 Mar 2026 17:13:54 -0800
Subject: [PATCH] Make sidebar collapse toggle more prominent

Made-with: Cursor
---
 components/layout/vibn-sidebar.tsx | 49 +++++++++++-------------------
 1 file changed, 18 insertions(+), 31 deletions(-)

diff --git a/components/layout/vibn-sidebar.tsx b/components/layout/vibn-sidebar.tsx
index a1172d7..2bf5022 100644
--- a/components/layout/vibn-sidebar.tsx
+++ b/components/layout/vibn-sidebar.tsx
@@ -99,7 +99,7 @@ export function VIBNSidebar({ workspace }: VIBNSidebarProps) {
 
       {/* Logo row */}
       <div style={{
-        padding: collapsed ? "20px 0" : "22px 18px 18px",
+        padding: collapsed ? "16px 10px" : "16px 12px 16px 18px",
         display: "flex",
         alignItems: "center",
         justifyContent: collapsed ? "center" : "space-between",
@@ -126,42 +126,29 @@ export function VIBNSidebar({ workspace }: VIBNSidebarProps) {
           )}
         </Link>
 
-        {/* Collapse toggle — only visible in expanded mode, or as a tiny button in collapsed */}
-        {!collapsed && (
-          <button
-            onClick={toggle}
-            title="Collapse sidebar"
-            style={{
-              background: "none", border: "none", cursor: "pointer",
-              color: "#c5c0b8", padding: "4px 6px", borderRadius: 5,
-              fontSize: "0.75rem", lineHeight: 1, flexShrink: 0,
-              transition: "color 0.12s",
-            }}
-            onMouseEnter={e => (e.currentTarget.style.color = "#6b6560")}
-            onMouseLeave={e => (e.currentTarget.style.color = "#c5c0b8")}
-          >
-            ‹‹
-          </button>
-        )}
-      </div>
-
-      {/* Expand button shown in collapsed mode */}
-      {collapsed && (
+        {/* Collapse / expand toggle */}
         <button
           onClick={toggle}
-          title="Expand sidebar"
+          title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
           style={{
-            background: "none", border: "none", cursor: "pointer",
-            color: "#c5c0b8", fontSize: "0.7rem", lineHeight: 1,
-            padding: "4px 0 8px", width: "100%", textAlign: "center",
-            transition: "color 0.12s", flexShrink: 0,
+            background: "#f0ece4", border: "none", cursor: "pointer",
+            color: "#6b6560", width: 26, height: 26, borderRadius: 6,
+            display: "flex", alignItems: "center", justifyContent: "center",
+            fontSize: "0.78rem", flexShrink: 0, transition: "background 0.12s, color 0.12s",
+            fontWeight: 600,
+          }}
+          onMouseEnter={e => {
+            (e.currentTarget.style.background = "#e8e4dc");
+            (e.currentTarget.style.color = "#1a1a1a");
+          }}
+          onMouseLeave={e => {
+            (e.currentTarget.style.background = "#f0ece4");
+            (e.currentTarget.style.color = "#6b6560");
           }}
-          onMouseEnter={e => (e.currentTarget.style.color = "#6b6560")}
-          onMouseLeave={e => (e.currentTarget.style.color = "#c5c0b8")}
         >
-          ››
+          {collapsed ? "›" : "‹"}
         </button>
-      )}
+      </div>
 
       {/* Top nav */}
       <div style={{ padding: collapsed ? "4px 8px" : "4px 10px", flexShrink: 0 }}>