Skip to content

fix(notes): match compact library toolbar controls #60

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
luannn010 wants to merge 2 commits into from
Open

fix(notes): match compact library toolbar controls #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
afe310d
fix(notes): match compact library toolbar controls
luannn010 Nov 11, 2026
51866af
fix(notes): isolate library heading spacing
luannn010 Nov 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions docs/architecture.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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).
87 changes: 87 additions & 0 deletions web/src/styles/library.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
.page-heading.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; }
}
55 changes: 25 additions & 30 deletions web/src/ui/Workspace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,6 @@ import {
Settings,
Plus,
Menu,
Grid2X2,
List,
Pin,
Paperclip,
Tags,
Expand Down Expand Up @@ -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
Expand All @@ -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}
Expand All @@ -2490,7 +2499,7 @@ export function Workspace({
<option value="created">Created</option>
<option value="title">Title</option>
</select>
</label>
</div>
)}
{trash && library && snapshot && (
<button
Expand All @@ -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()}
Expand All @@ -2535,7 +2530,7 @@ export function Workspace({
disabled={readOnly || creatingNote}
onClick={() => void create()}
>
<Plus size={15} />
<Plus size={13} />
New note
</button>
</>
Expand Down
Loading
Loading