fix: sidebar dock layout for 5 buttons, skills panel version badges and marketplace names

Author: Swofty-Developments

crates/tauri-app/frontend/src/components/sidebar/Sidebar.tsx

@@ -115,36 +115,36 @@ export function Sidebar() {
         </div>
 
         <div class="sidebar-footer">
-          <div class="sidebar-actions-grid">
-            <button class="sidebar-action" onClick={() => appStore.openVirtualTab("__mcp__")} title="MCP Servers">
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <div class="sidebar-dock">
+            <button class="dock-btn" onClick={() => appStore.openVirtualTab("__mcp__")} title="MCP Servers">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <rect x="2" y="2" width="20" height="8" rx="2" /><rect x="2" y="14" width="20" height="8" rx="2" /><circle cx="6" cy="6" r="1" fill="currentColor" /><circle cx="6" cy="18" r="1" fill="currentColor" />
               </svg>
-              MCP
+              <span>MCP</span>
             </button>
-            <button class="sidebar-action" onClick={() => appStore.openVirtualTab("__themes__")} title="Themes">
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <button class="dock-btn" onClick={() => appStore.openVirtualTab("__themes__")} title="Themes">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <circle cx="13.5" cy="6.5" r="2.5" /><circle cx="17.5" cy="10.5" r="2.5" /><circle cx="8.5" cy="7.5" r="2.5" /><circle cx="6.5" cy="12.5" r="2.5" /><path d="M12 22C6.5 22 2 17.5 2 12S6.5 2 12 2s10 4.5 10 10-1.5 4-3 4h-1.7c-.8 0-1.3.8-.9 1.5.6 1.1 1 2.2 1 3.5 0 1.5-.5 2-1.4 2z" />
               </svg>
-              Themes
+              <span>Themes</span>
             </button>
-            <button class="sidebar-action" onClick={() => appStore.openVirtualTab("__search__")} title="Search (Cmd+Shift+F)">
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <button class="dock-btn" onClick={() => appStore.openVirtualTab("__search__")} title="Search (Cmd+Shift+F)">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                 <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
               </svg>
-              Search
+              <span>Search</span>
             </button>
-            <button class="sidebar-action" onClick={() => appStore.openVirtualTab("__skills__")} title="Skills & Plugins">
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <button class="dock-btn" onClick={() => appStore.openVirtualTab("__skills__")} title="Skills & Plugins">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z" />
               </svg>
-              Skills
+              <span>Skills</span>
             </button>
-            <button class="sidebar-action" onClick={() => setStore("usageDashboardOpen", true)} title="Usage (Cmd+Shift+U)">
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+            <button class="dock-btn" onClick={() => setStore("usageDashboardOpen", true)} title="Usage (Cmd+Shift+U)">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
                 <line x1="18" y1="20" x2="18" y2="10" /><line x1="12" y1="20" x2="12" y2="4" /><line x1="6" y1="20" x2="6" y2="14" />
               </svg>
-              Usage
+              <span>Usage</span>
             </button>
           </div>
           <button class="new-thread-btn" onClick={() => newThread()}>
@@ -261,6 +261,38 @@ export function Sidebar() {
           background: rgba(107, 124, 255, 0.08);
           color: var(--text);
         }
+        .sidebar-dock {
+          display: flex;
+          justify-content: space-between;
+          padding: 4px 2px;
+          background: var(--bg-muted);
+          border-radius: var(--radius-md);
+        }
+        .dock-btn {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 2px;
+          padding: 6px 4px;
+          border-radius: var(--radius-sm);
+          color: var(--text-tertiary);
+          font-size: 9px;
+          font-weight: 500;
+          letter-spacing: 0.01em;
+          flex: 1;
+          transition: all 0.12s;
+        }
+        .dock-btn:hover {
+          color: var(--text-secondary);
+          background: var(--bg-accent);
+        }
+        .dock-btn svg {
+          flex-shrink: 0;
+          transition: color 0.12s;
+        }
+        .dock-btn:hover svg {
+          color: var(--primary);
+        }
         .sidebar-actions-grid {
           display: grid;
           grid-template-columns: 1fr 1fr;

crates/tauri-app/frontend/src/components/skills/SkillsPanel.tsx

@@ -427,6 +427,20 @@ if (!document.getElementById("skills-panel-styles")) {
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+    .sk-item-version {
+      font-size: 9px;
+      font-family: var(--font-mono);
+      color: var(--text-tertiary);
+      background: var(--bg-accent);
+      padding: 1px 5px;
+      border-radius: var(--radius-pill);
+      white-space: nowrap;
+    }
+    .sk-mp-name {
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--text);
+    }
     .sk-item-actions {
       display: flex;
       align-items: center;