From f2599772f623f6e058664a27a62cb4255d70a375 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20G=C3=B3mez?= <alejandrogomez@bitrefill.com>
Date: Thu, 18 Dec 2025 12:27:54 +0100
Subject: [PATCH] fix(ui): reorganize bottom bar and clarify preset
 requirements

Changes:
- Added TODO comment about IndexedDB unavailability in test runtime
- Moved layout preset selector to rightmost side of bottom bar
- Moved window settings button to rightmost side as well
- Removed per-workspace settings icon (now global button on right)
- Added spacer to separate workspace tabs from layout controls
- Changed preset descriptions to show "4+ windows" instead of "4 windows"
  to clarify that presets work with more windows than the minimum
- Changed dropdown alignment from "start" to "end" for right-aligned opening

The bottom bar now has clearer visual separation:
[Workspace Tabs] [+] ................ [Layout Presets] [Settings]

Generated with [Claude Code](https://claude.com/claude-code)
---
 src/components/TabBar.tsx    | 73 +++++++++++++++++++-----------------
 src/lib/nostr-schema.test.ts |  4 ++
 2 files changed, 43 insertions(+), 34 deletions(-)

diff --git a/src/components/TabBar.tsx b/src/components/TabBar.tsx
index 26e0d99..478ba77 100644
--- a/src/components/TabBar.tsx
+++ b/src/components/TabBar.tsx
@@ -76,50 +76,54 @@ export function TabBar() {
   return (
     <>
       <div className="h-8 border-t border-border bg-background flex items-center px-2 gap-1 overflow-x-auto">
+        {/* Left side: Workspace tabs + new workspace button */}
         <div className="flex items-center gap-1 flex-nowrap">
           {sortedWorkspaces.map((ws) => (
-            <div key={ws.id} className="relative group flex-shrink-0">
-              <button
-                onClick={() => setActiveWorkspace(ws.id)}
-                className={cn(
-                  "px-3 py-1 pr-7 text-xs font-mono rounded transition-colors whitespace-nowrap",
-                  ws.id === activeWorkspaceId
-                    ? "bg-primary text-primary-foreground"
-                    : "text-muted-foreground hover:text-foreground hover:bg-muted",
-                )}
-              >
-                {ws.label && ws.label.trim()
-                  ? `${ws.number} ${ws.label}`
-                  : ws.number}
-              </button>
-              <button
-                onClick={(e) => handleSettingsClick(e)}
-                className={cn(
-                  "absolute right-0.5 top-1/2 -translate-y-1/2 p-0.5 rounded opacity-0 group-hover:opacity-100 transition-opacity",
-                  ws.id === activeWorkspaceId
-                    ? "text-primary-foreground hover:bg-primary-foreground/20"
-                    : "text-muted-foreground hover:text-foreground hover:bg-muted",
-                )}
-                aria-label="Layout settings"
-              >
-                <SlidersHorizontal className="h-3 w-3" />
-              </button>
-            </div>
+            <button
+              key={ws.id}
+              onClick={() => setActiveWorkspace(ws.id)}
+              className={cn(
+                "px-3 py-1 text-xs font-mono rounded transition-colors whitespace-nowrap flex-shrink-0",
+                ws.id === activeWorkspaceId
+                  ? "bg-primary text-primary-foreground"
+                  : "text-muted-foreground hover:text-foreground hover:bg-muted",
+              )}
+            >
+              {ws.label && ws.label.trim()
+                ? `${ws.number} ${ws.label}`
+                : ws.number}
+            </button>
           ))}
 
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6 ml-1 flex-shrink-0"
+            onClick={handleNewTab}
+            aria-label="Create new workspace"
+          >
+            <Plus className="h-3 w-3" />
+          </Button>
+        </div>
+
+        {/* Spacer to push right side controls to the end */}
+        <div className="flex-1" />
+
+        {/* Right side: Layout controls */}
+        <div className="flex items-center gap-1 flex-shrink-0">
           {/* Layout Preset Dropdown */}
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button
                 variant="ghost"
                 size="icon"
-                className="h-6 w-6 ml-1 flex-shrink-0"
+                className="h-6 w-6"
                 aria-label="Apply layout preset"
               >
                 <Grid2X2 className="h-3 w-3" />
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="start" className="w-64">
+            <DropdownMenuContent align="end" className="w-64">
               <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
                 Apply Layout Preset
               </div>
@@ -137,7 +141,7 @@ export function TabBar() {
                       <div className="font-medium text-sm">{preset.name}</div>
                       <div className="text-xs text-muted-foreground truncate">
                         {canApply
-                          ? `${preset.slots} windows`
+                          ? `${preset.slots}+ windows`
                           : `Needs ${preset.slots} (have ${windowCount})`}
                       </div>
                     </div>
@@ -147,14 +151,15 @@ export function TabBar() {
             </DropdownMenuContent>
           </DropdownMenu>
 
+          {/* Window/Layout Settings */}
           <Button
             variant="ghost"
             size="icon"
-            className="h-6 w-6 ml-1 flex-shrink-0"
-            onClick={handleNewTab}
-            aria-label="Create new workspace"
+            className="h-6 w-6"
+            onClick={handleSettingsClick}
+            aria-label="Layout settings"
           >
-            <Plus className="h-3 w-3" />
+            <SlidersHorizontal className="h-3 w-3" />
           </Button>
         </div>
       </div>
diff --git a/src/lib/nostr-schema.test.ts b/src/lib/nostr-schema.test.ts
index 816f260..e45c7b7 100644
--- a/src/lib/nostr-schema.test.ts
+++ b/src/lib/nostr-schema.test.ts
@@ -8,6 +8,10 @@ import {
   getContentTypeDescription,
 } from "./nostr-schema";
 
+// TODO: Some tests in this file fail because IndexedDB is not available in the Vitest runtime.
+// The failures are related to Dexie/IndexedDB operations that can't run in the Node.js test environment.
+// Future work: Mock IndexedDB or use an in-memory IndexedDB implementation for testing.
+
 describe("nostr-schema", () => {
   describe("loadSchema", () => {
     it("should load and parse the schema", () => {