From afe310d66c6eae82cec88f656b27c3af2c7a9513 Mon Sep 17 00:00:00 2001
From: Luan Nguyen <luannn010@gmail.com>
Date: Thu, 12 Nov 2026 03:01:24 +1100
Subject: [PATCH 1/2] fix(notes): match compact library toolbar controls

---
 docs/architecture.md                          |  17 +
 web/src/styles/library.css                    |  87 +++++
 web/src/ui/Workspace.tsx                      |  55 ++-
 .../integration/library-toolbar-browser.mjs   | 332 ++++++++++++++++++
 4 files changed, 461 insertions(+), 30 deletions(-)
 create mode 100644 web/tests/integration/library-toolbar-browser.mjs

diff --git a/docs/architecture.md b/docs/architecture.md
index 45d84fd..4b3b9b1 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -315,3 +315,20 @@ Search 240/170ms surface motion, review/Done, errors, Settings sections and the
 absent native caption title remain separate contracts. The source is design
 revision f610ced1da443b04699137333c1309925092fffa, Motion `sidenav`, Notes
 `layout-desktop` and `lock`.
+
+
+## Notes library toolbar geometry
+
+The Notes list/grid/filter/Trash header uses a dedicated scoped toolbar. View
+choices form a 28px segmented group with 24px buttons; the real sort select is a
+single 28px control; Import Markdown/New note and Empty Trash use 30px controls.
+The sort select retains its accessible name and existing CAS/disable behavior.
+Explicit centered cross-axis alignment prevents a stacked form label from
+stretching every action to the tallest control. Header title/count are inline;
+the current h1 node and heading-motion ref are retained. Narrow/long-title layouts
+wrap the actual actions without a fixed total header height. Import Markdown is
+an existing beta action retained alongside the source main-toolbar controls.
+All CSS is scoped to Notes library classes; other action groups, dialogs and the
+native caption/editor toolbar retain their own geometry. Design reference:
+f610ced1da443b04699137333c1309925092fffa, Notes `library-list`, `library-grid`
+and `empty-library` (blob 706a8d07e5ccfb77850f4a490ab38e0c90a31a04).
diff --git a/web/src/styles/library.css b/web/src/styles/library.css
index d883823..4f70339 100644
--- a/web/src/styles/library.css
+++ b/web/src/styles/library.css
@@ -148,3 +148,90 @@
   flex: 1;
   min-width: 180px;
 }
+
+/* Notes706a8d07 #library-list / #library-grid: scoped full-library header. */
+.page-heading.notes-library-heading {
+  align-items: baseline;
+  justify-content: flex-start;
+  gap: 12px;
+  padding: 22px 28px 6px;
+  flex-wrap: wrap;
+  line-height: 1.45;
+}
+.notes-library-heading > div:first-child { display: contents; }
+.notes-library-heading h1 {
+  margin: 0;
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  font-size: 22px;
+  font-weight: 500;
+  letter-spacing: -.015em;
+}
+.notes-library-heading .notes-library-count {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  color: var(--t3);
+  font-size: 13px;
+  white-space: nowrap;
+}
+.notes-library-heading .notes-library-toolbar {
+  display: flex;
+  align-items: center;
+  align-self: center;
+  gap: 6px;
+  margin-left: auto;
+  max-width: 100%;
+  flex-wrap: wrap;
+}
+.notes-library-toolbar > button {
+  height: 30px;
+  min-height: 30px;
+  padding: 0 12px;
+  border-radius: 9px;
+  font-size: 12.5px;
+  white-space: nowrap;
+}
+.notes-library-toolbar > button:not(.primary):not(.danger) { color: var(--t2); }
+.notes-library-toolbar > button.primary { padding: 0 13px; font-weight: 500; }
+.notes-library-toolbar .library-sort { display: inline-flex; flex: none; }
+.notes-library-toolbar .library-sort select {
+  width: auto;
+  max-width: 100%;
+  height: 28px;
+  min-height: 28px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: 8px;
+  background: var(--raise);
+  color: var(--t1);
+  font-size: 12.5px;
+}
+.notes-library-toolbar .notes-library-view {
+  display: inline-flex;
+  flex: none;
+  gap: 2px;
+  padding: 2px;
+  border-radius: 9px;
+  background: var(--raise);
+}
+.notes-library-view > button {
+  height: 24px;
+  min-height: 24px;
+  padding: 0 10px;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--t3);
+  font-size: 12px;
+  white-space: nowrap;
+}
+.notes-library-view > button[aria-pressed="true"] {
+  background: var(--main);
+  color: var(--t1);
+  box-shadow: 0 0 0 1px var(--line);
+}
+@media (max-width: 899px) {
+  .page-heading.notes-library-heading { padding: 22px 20px 6px; }
+}
diff --git a/web/src/ui/Workspace.tsx b/web/src/ui/Workspace.tsx
index 0f0860e..46360fd 100644
--- a/web/src/ui/Workspace.tsx
+++ b/web/src/ui/Workspace.tsx
@@ -15,8 +15,6 @@ import {
   Settings,
   Plus,
   Menu,
-  Grid2X2,
-  List,
   Pin,
   Paperclip,
   Tags,
@@ -2437,7 +2435,7 @@ export function Workspace({
           </div>
           {(module === "notes" || editing) && !editing && (
             <>
-              <header className="page-heading">
+              <header className="page-heading notes-library-heading">
                 <div>
                   <h1 ref={notesHeadingRef}>
                     {linkedOnly
@@ -2452,22 +2450,33 @@ export function Workspace({
                               ? "Search results"
                               : "All notes"}
                   </h1>
-                  <span>
+                  <span className="notes-library-count">
                     {linkedOnly && linkedQuery?.status !== "ready"
                       ? "Checking links"
-                      : `${visible.length} ${visible.length === 1 ? "note" : "notes"}`}{" "}
-                    ·
-                    {sort === "created"
-                      ? "Created"
-                      : sort === "title"
-                        ? "Title"
-                        : "Edited"}
+                      : `${visible.length} ${visible.length === 1 ? "note" : "notes"}`}
                   </span>
                 </div>
-                <div className="actions">
+                <div className="actions notes-library-toolbar">
+                  {!trash && (
+                    <div className="notes-library-view" role="group" aria-label="View">
+                      <button
+                        aria-label="List view"
+                        aria-pressed={!grid}
+                        onClick={() => setGrid(false)}
+                      >
+                        List
+                      </button>
+                      <button
+                        aria-label="Grid view"
+                        aria-pressed={grid}
+                        onClick={() => setGrid(true)}
+                      >
+                        Grid
+                      </button>
+                    </div>
+                  )}
                   {library && snapshot && (
-                    <label className="library-sort">
-                      Sort
+                    <div className="library-sort">
                       <select
                         aria-label="Sort notes"
                         value={sort}
@@ -2490,7 +2499,7 @@ export function Workspace({
                         <option value="created">Created</option>
                         <option value="title">Title</option>
                       </select>
-                    </label>
+                    </div>
                   )}
                   {trash && library && snapshot && (
                     <button
@@ -2510,20 +2519,6 @@ export function Workspace({
                   )}
                   {!trash && (
                     <>
-                      <button
-                        aria-label="List view"
-                        aria-pressed={!grid}
-                        onClick={() => setGrid(false)}
-                      >
-                        <List size={16} />
-                      </button>
-                      <button
-                        aria-label="Grid view"
-                        aria-pressed={grid}
-                        onClick={() => setGrid(true)}
-                      >
-                        <Grid2X2 size={16} />
-                      </button>
                       <button
                         disabled={importing || readOnly}
                         onClick={() => chooseMarkdown()}
@@ -2535,7 +2530,7 @@ export function Workspace({
                         disabled={readOnly || creatingNote}
                         onClick={() => void create()}
                       >
-                        <Plus size={15} />
+                        <Plus size={13} />
                         New note
                       </button>
                     </>
diff --git a/web/tests/integration/library-toolbar-browser.mjs b/web/tests/integration/library-toolbar-browser.mjs
new file mode 100644
index 0000000..e1f4ce5
--- /dev/null
+++ b/web/tests/integration/library-toolbar-browser.mjs
@@ -0,0 +1,332 @@
+import { chromium, expect } from "@playwright/test";
+import { mkdir, writeFile } from "node:fs/promises";
+
+const output = process.env.NOTES_UI_OUTPUT ?? "test-results/library-toolbar";
+const base = process.env.NOTES_PREVIEW_URL ?? "http://127.0.0.1:5187";
+await mkdir(output, { recursive: true });
+const browser = await chromium.launch({ channel: "chrome", headless: true });
+const context = await browser.newContext({
+  viewport: { width: 1280, height: 850 },
+});
+const page = await context.newPage(),
+  errors = [],
+  measurements = [];
+page.on("pageerror", (error) => errors.push(error.message));
+await context.route(/\/src\/desktop\/window\.ts(?:\?|$)/, (route) =>
+  route.fulfill({
+    contentType: "application/javascript",
+    body: `export const isDesktop=()=>true; export async function connectWindow(){return{minimize:async()=>{},toggleMaximize:async()=>{},isMaximized:async()=>false,close:async()=>{},startDragging:async()=>{},showSystemMenu:async()=>{},finishClose:async()=>{},dispose:()=>{}}}`,
+  }),
+);
+await context.route(
+  /\/tests\/integration\/library-browser\.html\?desktop-shell/,
+  async (route) => {
+    const response = await route.fetch();
+    await route.fulfill({
+      response,
+      body: (await response.text()).replace(
+        '<div id="fixture-label">',
+        '<div id="fixture-label" style="position:fixed;bottom:2px;left:2px;z-index:99;max-width:180px;font:9px sans-serif;pointer-events:none">Simulated native bridge; ',
+      ),
+    });
+  },
+);
+const sidebar = page.getByLabel("Notes navigation", { exact: true });
+const header = page.locator(".notes-library-heading");
+const toolbar = header.locator(".notes-library-toolbar");
+async function sidebarWidth(value) {
+  const rail = page.getByRole("separator", { name: "Resize sidebar" });
+  await rail.focus();
+  await page.keyboard.press("Enter");
+  if (value === 180)
+    for (let i = 0; i < 3; i++) await page.keyboard.press("ArrowLeft");
+  if (value === 420)
+    for (let i = 0; i < 13; i++) await page.keyboard.press("ArrowRight");
+  await expect(rail).toHaveAttribute("aria-valuenow", String(value));
+}
+async function geometry(id) {
+  const colors = await page.evaluate(() => {
+    const probe = document.createElement("i");
+    probe.style.display = "none";
+    document.body.append(probe);
+    const result = {};
+    for (const token of ["t1", "t2", "t3", "btnt", "btn", "red"]) {
+      probe.style.color = `var(--${token})`;
+      result[token] = getComputedStyle(probe).color;
+    }
+    probe.remove();
+    return result;
+  });
+  await expect(
+    toolbar.getByRole("button", { name: "Import Markdown", exact: true }),
+  ).toHaveCSS("color", colors.t2);
+  await expect(
+    toolbar.getByRole("button", { name: "New note", exact: true }),
+  ).toHaveCSS("color", colors.btnt);
+  await expect(
+    toolbar.getByRole("button", { name: "New note", exact: true }),
+  ).toHaveCSS("background-color", colors.btn);
+  await expect(
+    toolbar.getByRole("button", { name: "New note", exact: true }),
+  ).toHaveCSS("height", "30px");
+  await expect(
+    toolbar.getByRole("button", { name: "Import Markdown", exact: true }),
+  ).toHaveCSS("height", "30px");
+  await expect(toolbar.getByRole("combobox", { name: "Sort notes" })).toHaveCSS(
+    "height",
+    "28px",
+  );
+  await expect(
+    toolbar.getByRole("group", { name: "View", exact: true }),
+  ).toHaveCSS("height", "28px");
+  for (const name of ["List view", "Grid view"])
+    await expect(toolbar.getByRole("button", { name, exact: true })).toHaveCSS(
+      "height",
+      "24px",
+    );
+  await expect(toolbar).toHaveCSS("align-items", "center");
+  await expect(toolbar).toHaveCSS("gap", "6px");
+  await expect(header).toHaveCSS("padding-bottom", "6px");
+  await expect(header.locator("h1")).toHaveCSS("font-size", "22px");
+  await expect(header.locator(".notes-library-count")).toHaveCSS(
+    "font-size",
+    "13px",
+  );
+  const report = await header.evaluate((root) => {
+    const rect = (element) => {
+      const r = element.getBoundingClientRect();
+      return {
+        x: r.x,
+        y: r.y,
+        width: r.width,
+        height: r.height,
+        right: r.right,
+        bottom: r.bottom,
+      };
+    };
+    const controls = [...root.querySelectorAll("button,select")].map(
+      (element) => ({
+        label: element.getAttribute("aria-label") || element.textContent.trim(),
+        rect: rect(element),
+      }),
+    );
+    return {
+      viewport: innerWidth,
+      documentWidth: document.documentElement.scrollWidth,
+      root: rect(root),
+      titleText: root.querySelector("h1").textContent,
+      title: rect(root.querySelector("h1")),
+      count: rect(root.querySelector(".notes-library-count")),
+      controls,
+    };
+  });
+  expect(report.documentWidth).toBeLessThanOrEqual(report.viewport);
+  if (report.titleText === "All notes") {
+    expect(report.count.x - report.title.right).toBeCloseTo(12, 1);
+  }
+  for (const control of report.controls) {
+    expect(control.rect.x).toBeGreaterThanOrEqual(report.root.x);
+    expect(control.rect.right).toBeLessThanOrEqual(report.root.right + 0.1);
+    expect(control.rect.y).toBeGreaterThanOrEqual(44);
+    expect(control.rect.bottom).toBeLessThanOrEqual(report.root.bottom + 0.1);
+  }
+  const choices = report.controls.filter((control) =>
+    ["List view", "Grid view"].includes(control.label),
+  );
+  expect(choices.every((control) => control.rect.height === 24)).toBe(true);
+  measurements.push({ id, colors, ...report });
+  return report;
+}
+try {
+  await page.goto(
+    `${base}/tests/integration/library-browser.html?desktop-shell=1`,
+  );
+  const setup = page.getByRole("dialog", { name: "Set up Orbyn Notes" });
+  await setup.getByRole("button", { name: "Skip", exact: true }).click();
+  await setup.getByRole("button", { name: "Skip", exact: true }).click();
+  await expect(
+    header.getByRole("heading", { name: "All notes", exact: true }),
+  ).toBeVisible();
+  await page.evaluate(() => document.fonts.ready);
+  for (const theme of ["light", "dark", "dim"]) {
+    await page.evaluate(
+      (theme) => (document.documentElement.dataset.theme = theme),
+      theme,
+    );
+    for (const viewport of [1280, 900]) {
+      await page.setViewportSize({ width: viewport, height: 850 });
+      for (const width of [180, 224, 420]) {
+        await sidebarWidth(width);
+        const report = await geometry(`${theme}-${viewport}-${width}`);
+        if (viewport === 1280 && width === 224) {
+          expect(report.count.y + report.count.height).toBeLessThan(
+            report.title.bottom + 2,
+          );
+          expect(report.count.x).toBeGreaterThan(
+            report.title.x + report.title.width,
+          );
+        }
+        await page.screenshot({
+          path: `${output}/${theme}-${viewport}-${width}.png`,
+        });
+      }
+    }
+    for (const viewport of [899, 640, 390]) {
+      await page.setViewportSize({ width: viewport, height: 850 });
+      await geometry(`${theme}-${viewport}-drawer`);
+      await page.screenshot({ path: `${output}/${theme}-${viewport}.png` });
+    }
+  }
+  await page.setViewportSize({ width: 1280, height: 850 });
+  await sidebarWidth(224);
+  await page.evaluate(() => (document.documentElement.dataset.theme = "light"));
+  const grid = toolbar.getByRole("button", { name: "Grid view", exact: true });
+  await grid.focus();
+  expect(
+    await grid.evaluate((element) => getComputedStyle(element).outlineStyle),
+  ).toBe("solid");
+  expect(
+    await grid.evaluate((element) => getComputedStyle(element).outlineWidth),
+  ).toBe("2px");
+  await toolbar.getByRole("button", { name: "New note", exact: true }).click();
+  await page.getByLabel("Note title", { exact: true }).fill("Toolbar Zulu");
+  await page
+    .getByLabel("Note content", { exact: true })
+    .fill("Genuine encrypted toolbar note.");
+  await expect(
+    page.getByText("Saved in this browser", { exact: true }),
+  ).toBeVisible();
+  const longTag =
+    "Averylongunbrokentagheadingthatmustremainreachableatnarrowwidth";
+  await page.getByLabel("New tag", { exact: true }).fill(longTag);
+  await page.getByRole("button", { name: "Add tag", exact: true }).click();
+  await expect(
+    page.getByText("Saved in this browser", { exact: true }),
+  ).toBeVisible();
+  await page
+    .getByRole("button", { name: "← Back to notes", exact: true })
+    .click();
+  await grid.click();
+  await expect(page.locator(".note-collection")).toHaveClass(/grid/);
+  await expect(grid).toHaveAttribute("aria-pressed", "true");
+  await toolbar.getByRole("button", { name: "List view", exact: true }).click();
+  await expect(page.locator(".note-collection")).not.toHaveClass(/grid/);
+  const chooserEvent = page.waitForEvent("filechooser");
+  await toolbar
+    .getByRole("button", { name: "Import Markdown", exact: true })
+    .click();
+  await (
+    await chooserEvent
+  ).setFiles({
+    name: "toolbar-alpha.md",
+    mimeType: "text/markdown",
+    buffer: Buffer.from(
+      "# Toolbar Alpha\n\nReal Markdown imported through the unchanged toolbar action.",
+    ),
+  });
+  const imports = page.getByRole("dialog", {
+    name: "Import Markdown",
+    exact: true,
+  });
+  await expect(imports).toContainText("1 files ready");
+  await imports.getByRole("button", { name: "Cancel", exact: true }).click();
+  await expect(page.locator(".note-row")).toHaveCount(1);
+  const retryChooser = page.waitForEvent("filechooser");
+  await toolbar
+    .getByRole("button", { name: "Import Markdown", exact: true })
+    .click();
+  await (
+    await retryChooser
+  ).setFiles({
+    name: "toolbar-alpha.md",
+    mimeType: "text/markdown",
+    buffer: Buffer.from(
+      "# Toolbar Alpha\n\nReal Markdown imported through the unchanged toolbar action.",
+    ),
+  });
+  await imports
+    .getByRole("button", { name: "Import remaining", exact: true })
+    .click();
+  await expect(imports).toHaveCount(0);
+  await expect(page.locator(".note-row")).toHaveCount(2);
+  await toolbar
+    .getByRole("combobox", { name: "Sort notes" })
+    .selectOption("title");
+  await expect(page.locator(".note-row").first()).toContainText(
+    "Toolbar Alpha",
+  );
+  await page.reload();
+  await expect(
+    toolbar.getByRole("combobox", { name: "Sort notes" }),
+  ).toHaveValue("title");
+  await expect(page.locator(".note-row")).toHaveCount(2);
+  const original = await header.locator("h1").elementHandle();
+  await sidebar
+    .getByRole("button", { name: `${longTag}, 1 note`, exact: true })
+    .click();
+  await expect(header.locator("h1")).toHaveText(`# ${longTag}`);
+  expect(
+    await header
+      .locator("h1")
+      .evaluate((element, original) => element === original, original),
+  ).toBe(true);
+  await page.setViewportSize({ width: 390, height: 850 });
+  await geometry("long-filter-390");
+  await page.screenshot({ path: `${output}/long-filter-390.png` });
+  await page.setViewportSize({ width: 1280, height: 850 });
+  await sidebar.getByRole("button", { name: /^Trash/ }).click();
+  await expect(
+    header.getByRole("button", { name: "Empty Trash", exact: true }),
+  ).toBeDisabled();
+  await expect(
+    header.getByRole("button", { name: "Empty Trash", exact: true }),
+  ).toHaveCSS("height", "30px");
+  await expect(
+    header.getByRole("group", { name: "View", exact: true }),
+  ).toHaveCount(0);
+  await sidebar.getByRole("button", { name: "Clips", exact: true }).click();
+  await expect(
+    page.getByRole("heading", { name: "Clips", exact: true }),
+  ).toBeVisible();
+  await expect(
+    page
+      .locator(".clips-view .page-heading")
+      .getByRole("button", { name: "Save a link", exact: true }),
+  ).toHaveCSS("height", "32px");
+  await sidebar
+    .getByRole("button", { name: "Manage tags", exact: true })
+    .click();
+  await expect(
+    page.getByRole("button", { name: "New tag", exact: true }),
+  ).toHaveCSS("height", "32px");
+  expect(errors).toEqual([]);
+  await writeFile(
+    `${output}/result.json`,
+    JSON.stringify(
+      {
+        scope:
+          "Synthetic account and simulated native bridge; genuine WASM/IndexedDB, no backend/native/FPS qualification.",
+        measurements,
+        checks: [
+          "27 theme/viewport/sidebar geometry cases plus long tag",
+          "keyboard focus ring",
+          "same h1 node",
+          "actual list/grid",
+          "Markdown picker cancel and successful import",
+          "persisted CAS sort/reload",
+          "disabled empty Trash",
+          "Clips/Tags control isolation",
+        ],
+        errors,
+      },
+      null,
+      2,
+    ),
+  );
+} catch (error) {
+  await page.screenshot({ path: `${output}/failed-state.png` });
+  throw error;
+} finally {
+  await context.close();
+  await browser.close();
+}

From 51866af8e084c1d0fe819826aa9f3393c7d8b368 Mon Sep 17 00:00:00 2001
From: Luan Nguyen <luannn010@gmail.com>
Date: Thu, 12 Nov 2026 03:19:03 +1100
Subject: [PATCH 2/2] fix(notes): isolate library heading spacing

---
 web/src/styles/library.css                        | 2 +-
 web/tests/integration/library-toolbar-browser.mjs | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/web/src/styles/library.css b/web/src/styles/library.css
index 4f70339..781c5f0 100644
--- a/web/src/styles/library.css
+++ b/web/src/styles/library.css
@@ -159,7 +159,7 @@
   line-height: 1.45;
 }
 .notes-library-heading > div:first-child { display: contents; }
-.notes-library-heading h1 {
+.page-heading.notes-library-heading h1 {
   margin: 0;
   min-width: 0;
   max-width: 100%;
diff --git a/web/tests/integration/library-toolbar-browser.mjs b/web/tests/integration/library-toolbar-browser.mjs
index e1f4ce5..53094f4 100644
--- a/web/tests/integration/library-toolbar-browser.mjs
+++ b/web/tests/integration/library-toolbar-browser.mjs
@@ -88,6 +88,7 @@ async function geometry(id) {
   await expect(toolbar).toHaveCSS("gap", "6px");
   await expect(header).toHaveCSS("padding-bottom", "6px");
   await expect(header.locator("h1")).toHaveCSS("font-size", "22px");
+  await expect(header.locator("h1")).toHaveCSS("margin-bottom", "0px");
   await expect(header.locator(".notes-library-count")).toHaveCSS(
     "font-size",
     "13px",
@@ -124,6 +125,9 @@ async function geometry(id) {
   if (report.titleText === "All notes") {
     expect(report.count.x - report.title.right).toBeCloseTo(12, 1);
   }
+  if (id.endsWith("-1280-224")) {
+    expect(report.root.height - report.title.height).toBeCloseTo(28, 1);
+  }
   for (const control of report.controls) {
     expect(control.rect.x).toBeGreaterThanOrEqual(report.root.x);
     expect(control.rect.right).toBeLessThanOrEqual(report.root.right + 0.1);