fix: sidebar nav layout — proper vertical stack, cleaner styling

- Fixed expanded nav: flex-col gap-0.5 (was space-y causing layout issues)
- Added position:relative for active indicator pseudo-element
- Cleaner button styles: border:none, background:transparent, text-align:left
- Reduced font to 13px/500 weight for tighter fit
- Mapped view items declaratively for consistency
- Restored Prompts view in both collapsed and expanded states

Author: BunsDev

app/globals.css

@@ -3470,16 +3470,21 @@ p {
 
 /* Expanded sidebar view navigation */
 .sidebar-view-nav {
+  position: relative;
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 10px;
   width: 100%;
-  padding: 8px 12px;
+  padding: 7px 10px;
   border-radius: 8px;
-  font-size: 14px;
+  border: none;
+  background: transparent;
+  font-size: 13px;
+  font-weight: 500;
   color: var(--text-secondary);
   transition: all 180ms ease;
   cursor: pointer;
+  text-align: left;
   position: relative;
   text-align: left;
 }

components/workspace-sidebar.tsx

@@ -201,7 +201,7 @@ export function WorkspaceSidebar({ collapsed, onToggle, repoName }: Props) {
           <button
             onClick={() => setView('prompts')}
             className={`activity-bar-btn ${activeView === 'prompts' ? 'activity-bar-btn--active' : ''}`}
-            title="Prompt Library"
+            title="Prompts"
           >
             <Icon icon="lucide:book-open" width={24} height={24} />
           </button>
@@ -274,54 +274,29 @@ export function WorkspaceSidebar({ collapsed, onToggle, repoName }: Props) {
             </div>
 
             {/* View Navigation */}
-            <div className="mt-2 space-y-0.5">
-              <button
-                onClick={() => setView('chat')}
-                className={`sidebar-view-nav ${activeView === 'chat' ? 'sidebar-view-nav--active' : ''}`}
-              >
-                <Icon icon="lucide:message-circle" width={18} height={18} />
-                Chat
-              </button>
-              <button
-                onClick={() => setView('editor')}
-                className={`sidebar-view-nav ${activeView === 'editor' ? 'sidebar-view-nav--active' : ''}`}
-              >
-                <Icon icon="lucide:code" width={18} height={18} />
-                Editor
-              </button>
-              <button
-                onClick={() => setView('git')}
-                className={`sidebar-view-nav ${activeView === 'git' ? 'sidebar-view-nav--active' : ''}`}
-              >
-                <Icon icon="lucide:git-branch" width={18} height={18} />
-                Git
-                {dirtyCount > 0 && (
-                  <span className="ml-auto px-2 min-w-[22px] text-center rounded-full bg-[var(--brand)] text-[var(--brand-contrast)] text-[11px] leading-[18px] font-bold">
-                    {dirtyCount}
-                  </span>
-                )}
-              </button>
-              <button
-                onClick={() => setView('mcp')}
-                className={`sidebar-view-nav ${activeView === 'mcp' ? 'sidebar-view-nav--active' : ''}`}
-              >
-                <Icon icon="lucide:plug" width={18} height={18} />
-                MCP
-              </button>
-              <button
-                onClick={() => setView('skills')}
-                className={`sidebar-view-nav ${activeView === 'skills' ? 'sidebar-view-nav--active' : ''}`}
-              >
-                <Icon icon="lucide:wand-2" width={18} height={18} />
-                Skills
-              </button>
-              <button
-                onClick={() => setView('prompts')}
-                className={`sidebar-view-nav ${activeView === 'prompts' ? 'sidebar-view-nav--active' : ''}`}
-              >
-                <Icon icon="lucide:book-open" width={18} height={18} />
-                Prompts
-              </button>
+            <div className="mt-2 flex flex-col gap-0.5">
+              {([
+                { id: 'chat' as const, icon: 'lucide:message-circle', label: 'Chat' },
+                { id: 'editor' as const, icon: 'lucide:code', label: 'Editor' },
+                { id: 'git' as const, icon: 'lucide:git-branch', label: 'Git' },
+                { id: 'mcp' as const, icon: 'lucide:plug', label: 'MCP' },
+                { id: 'skills' as const, icon: 'lucide:wand-2', label: 'Skills' },
+                { id: 'prompts' as const, icon: 'lucide:book-open', label: 'Prompts' },
+              ] as const).map((item) => (
+                <button
+                  key={item.id}
+                  onClick={() => setView(item.id)}
+                  className={`sidebar-view-nav ${activeView === item.id ? 'sidebar-view-nav--active' : ''}`}
+                >
+                  <Icon icon={item.icon} width={16} height={16} className="shrink-0" />
+                  <span className="truncate">{item.label}</span>
+                  {item.id === 'git' && dirtyCount > 0 && (
+                    <span className="ml-auto px-1.5 min-w-[20px] text-center rounded-full bg-[var(--brand)] text-[var(--brand-contrast)] text-[10px] leading-[18px] font-bold shrink-0">
+                      {dirtyCount}
+                    </span>
+                  )}
+                </button>
+              ))}
             </div>
           </div>