Compare commits

...
Author SHA1 Message Date
kristianwindandClaude Opus 4.8 4ac7180cda feat(notes): drop the disclosure arrow from the note-list headers too
Same as the sidebar: the box folds on a click, the star and people icon
are the marks that mean something, and a date group keeps an empty spacer
so every label still starts at the same place.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-09-03 14:25:55 +02:00
kristianwindandClaude Opus 4.8 e1683ef09d feat(notes): match the note-list headers to the new heading design
The note list still wore the old faint-uppercase group header beside the
sidebar's bold plain-case one, so the two columns read as two apps. The
group headers are bold, plainly cased and in the reading ink now, at
menu size, and their separator boxes carry the same rounded corner as an
active menu item — the hard rule underneath is gone, the box is the
separation. The disclosure mark stays: unlike a sidebar section, a
time-group has no icon, so it is the only thing that says "this folds".

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-09-03 14:22:19 +02:00
7 changed files with 23 additions and 13 deletions
Binary file not shown.

Before

Width:  |  Height:  |  Size: 265 KiB

After

Width:  |  Height:  |  Size: 270 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 353 KiB

After

Width:  |  Height:  |  Size: 357 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 336 KiB

After

Width:  |  Height:  |  Size: 343 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 64 KiB

After

Width:  |  Height:  |  Size: 64 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 61 KiB

+23 -13
View File
@@ -810,7 +810,11 @@
</svg>
</span>
{:else}
<span class="mark" class:closed={folded.has(group.key)} aria-hidden="true">▾</span>
<!-- No arrow, to match the sidebar: the box folds on a click,
the star and the people icon are the marks that mean
something, and a date group has none — an empty spacer, so
every label still starts at the same place. -->
<span class="mark" aria-hidden="true"></span>
{/if}
{group.label}
<span class="count">{group.notes.length}</span>
@@ -1367,43 +1371,48 @@
*
* Baggrunden er ikke gennemsigtig. En klæbende overskrift uden en er en
* overskrift med rækkerne kørende igennem sig. */
/* One design with the sidebar headings: a rounded box, the same corner as an
active menu item, filled just enough to separate one group of notes from the
next. The hard rule underneath is gone — the box is the separation now. */
h3.group {
position: sticky;
top: 0;
z-index: 1;
margin: 0;
margin: 0 0 var(--s1);
background: var(--ground);
border-bottom: 1px solid var(--line);
border-radius: var(--radius);
}
/* Bold and plainly cased, in the reading ink — the faint uppercase label read as
a different app's heading beside the sidebar's. Menu size, so the two tiers of
heading in front of the eye at once are the same size. */
h3.group button {
display: flex;
align-items: center;
gap: var(--s2);
width: 100%;
padding: var(--s2) var(--s2);
font-size: var(--text-xs);
font-size: var(--menu-size);
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--ink-faint);
letter-spacing: normal;
text-transform: none;
color: var(--ink);
border-radius: var(--radius);
}
h3.group button:hover {
color: var(--ink-muted);
background: var(--surface-sunken);
}
/* The mark, or an empty box the same width where a date group has none, so every
label starts at the same place. The star and the people icon fill it; the
arrow that used to is gone — the box folds on a click. */
h3.group .mark {
flex: none;
width: 0.75em;
font-size: 0.85em;
line-height: 1;
color: var(--ink-faint);
transition: transform var(--fast) var(--ease);
}
h3.group .mark.closed {
transform: rotate(-90deg);
}
/* Sit eget navn og ikke `.star`. Rækkens favoritknap hedder også det og er
@@ -1419,6 +1428,7 @@
margin-left: auto;
font-weight: 500;
letter-spacing: 0;
color: var(--ink-muted);
}
/* Stregen mellem rækkerne er væk.