Merge pull request 'feat(maestro): hide tab bar when a single tab' (#129) from marcato-lute into main

Reviewed-on: #129

web/src/multiview.test.ts

@@ -523,3 +523,38 @@ describe("multiview mobile single pane", () => {
     expect(mv.el.classList.contains("mv-mobile-solo")).toBe(true);
   });
 });
+
+describe("multiview solo tab bar", () => {
+  beforeEach(() => {
+    stubFetch();
+    document.body.replaceChildren();
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("hides the tab bar while only one tab exists", () => {
+    const layout = emptyLayout();
+    const tab = layout.tabs[0];
+    tab.focusedLeafId = splitLeaf(tab, "", "s1", "row", true);
+    const mv = makeMv(layout);
+    document.body.appendChild(mv.el);
+    mv.render();
+
+    expect(mv.el.classList.contains("mv-solo-tab")).toBe(true);
+  });
+
+  it("shows the tab bar again once a second tab appears", () => {
+    const layout = emptyLayout();
+    const first = layout.tabs[0];
+    first.focusedLeafId = splitLeaf(first, "", "s1", "row", true);
+    const second = addTab(layout);
+    second.focusedLeafId = splitLeaf(second, "", "s2", "row", true);
+    const mv = makeMv(layout);
+    document.body.appendChild(mv.el);
+    mv.render();
+
+    expect(mv.el.classList.contains("mv-solo-tab")).toBe(false);
+  });
+});

web/src/multiview.ts

@@ -472,6 +472,10 @@ export function createMultiView(opts: MultiViewOptions): MultiView {
     // Mobile: the tab bar is a second navigation surface we don't want, so CSS
     // collapses it; the header ☰ keeps the sidebar drawer reachable.
     el.classList.toggle("mv-mobile-solo", isMobile);
+    // A lone tab has nothing to switch between, so the bar is only a strip of
+    // chrome; CSS hides it until a second tab exists. Spawning still opens its
+    // own tab (#100), which brings the bar back with the "+" button on it.
+    el.classList.toggle("mv-solo-tab", layout.tabs.length === 1);
 
     if (!tab.root) {
       pruneForms(tab);

web/src/styles.css

@@ -2204,7 +2204,8 @@ input.leaf-rename:focus {
 }
 /* Mobile: the tab bar is a second navigation surface — collapse it (a floating
    ☰ inside the pane keeps the sidebar drawer reachable). */
-.mv-mobile-solo > .mv-tabs {
+.mv-mobile-solo > .mv-tabs,
+.mv-solo-tab > .mv-tabs {
   display: none;
 }