Make sidebar collapse toggle more prominent

Made-with: Cursor

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,43 +126,30 @@ export function VIBNSidebar({ workspace }: VIBNSidebarProps) {
           )}
         </Link>
 
-        {/* Collapse toggle — only visible in expanded mode, or as a tiny button in collapsed */}
+        {/* Collapse / expand toggle */}
-        {!collapsed && (
         <button
           onClick={toggle}
-            title="Collapse sidebar"
+          title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
           style={{
-              background: "none", border: "none", cursor: "pointer",
+            background: "#f0ece4", border: "none", cursor: "pointer",
-              color: "#c5c0b8", padding: "4px 6px", borderRadius: 5,
+            color: "#6b6560", width: 26, height: 26, borderRadius: 6,
-              fontSize: "0.75rem", lineHeight: 1, flexShrink: 0,
+            display: "flex", alignItems: "center", justifyContent: "center",
-              transition: "color 0.12s",
+            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>
 
-      {/* Expand button shown in collapsed mode */}
-      {collapsed && (
-        <button
-          onClick={toggle}
-          title="Expand 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,
-          }}
-          onMouseEnter={e => (e.currentTarget.style.color = "#6b6560")}
-          onMouseLeave={e => (e.currentTarget.style.color = "#c5c0b8")}
-        >
-          ››
-        </button>
-      )}
-
       {/* Top nav */}
       <div style={{ padding: collapsed ? "4px 8px" : "4px 10px", flexShrink: 0 }}>
         {topNavItems.map((n) => {