feat(notes): three-line rows like Apple Notes, with a filed line and dividers

Each note is three lines now: the title, then the date and the excerpt,
then where the note is filed — a folder like the menu's groups and the
project's name, the owner's when it is someone else's, or simply "Noter"
when it belongs to no project. The date leads the second line, left
aligned, instead of being pushed to the right of the title. A faint
hairline separates one note from the next, and a month heading is
capitalised ("August 2026", not "august 2026").

Co-Authored-By: Claude Opus 4.8 <[email protected]>

web/e2e/smoke.spec.js

@@ -371,9 +371,9 @@ test('en projektgruppe kan foldes, fyldes og slettes uden at tage projekterne me
 	await sidebar.getByLabel('Gruppens navn').fill('Arbejde');
 	await sidebar.getByLabel('Gruppens navn').press('Enter');
 
-	// The name is a link to the group's own page; the chevron beside it is a
+	// The name is a link to the group's own page; the folder icon beside it is a
 	// separate button that folds. Two intentions, two targets — the single one they
-	// used to share could only ever serve the smaller.
+	// used to share could only ever serve the smaller, and neither wears an arrow.
 	//
 	// `exact` on the link, because a group's name is a user-chosen word that can
 	// turn up inside another control's name, and Playwright matches an accessible
@@ -389,13 +389,14 @@ test('en projektgruppe kan foldes, fyldes og slettes uden at tage projekterne me
 	// The clipping half is here because it was once broken: "Omdøb" and "Slet" sat
 	// in the flow reserving their width even while invisible, so ARBEJDE was drawn
 	// as "ARBE". The alignment half changed meaning with the redesign: a group now
-	// carries a fold chevron and a section icon just like "Projekter" above it, and
+	// carries a section icon just like "Projekter" above it, and belongs to that
-	// belongs to that heading tier rather than to the project rows below.
+	// heading tier rather than to the project rows below.
 	const shape = await sidebar.locator('.folder-head').evaluate((el) => {
 		const link = el.querySelector('h2 a');
-		// The leading mark is now the section icon, the same folder/funnel/tag glyph
+		// The leading mark is the section icon in its own fold button, the same
-		// the system headings carry — a group and a section read identically.
+		// folder/funnel/tag glyph the system headings carry — a group and a section
-		const name = { ...link.querySelector('.head-icon').getBoundingClientRect().toJSON() };
+		// read identically, and the icon sits before the name, not inside the link.
+		const name = { ...el.querySelector('.head-icon').getBoundingClientRect().toJSON() };
 		return {
 			clipped: link.scrollWidth > link.clientWidth + 1,
 			left: name.left,
@@ -408,7 +409,7 @@ test('en projektgruppe kan foldes, fyldes og slettes uden at tage projekterne me
 	expect(shape.count, 'navnet og tallet overlapper').toBeGreaterThanOrEqual(shape.right);
 
 	// A group is a heading, not a project row: it belongs to the same tier as
-	// "Projekter" and the other system sections — chevron, icon, bold name — and
+	// "Projekter" and the other system sections — icon, bold name, no arrow — and
 	// starts where they start, not where the projects filed under it do. Measured
 	// icon to icon, the one mark both headings share.
 	const sectionLeft = await sidebar
@@ -440,13 +441,13 @@ test('en projektgruppe kan foldes, fyldes og slettes uden at tage projekterne me
 		'false'
 	);
 
-	// A group's chevron is in the flow now, the same one the system sections carry —
+	// The fold control is the bare folder icon now — no chevron, and no --surface
-	// no absolute mark with a --surface field behind it, so a folded group no longer
+	// field behind it, so a folded group leaves no pale square beside its name on
-	// leaves a pale square beside its name on the sunken bar.
+	// the sunken bar.
-	const chevronBg = await sidebar
+	const foldBg = await sidebar
-		.locator('.folder-head .chevron-button')
+		.locator('.folder-head .fold-icon')
 		.evaluate((el) => getComputedStyle(el).backgroundColor);
-	expect(chevronBg, 'chevronen har en firkant bag sig').toBe('rgba(0, 0, 0, 0)');
+	expect(foldBg, 'foldeknappen har en firkant bag sig').toBe('rgba(0, 0, 0, 0)');
 
 	await sidebar.getByRole('button', { name: /^Fold Arbejde/ }).click();
 

web/src/lib/components/Sidebar.svelte

@@ -682,13 +682,14 @@
 	<!--
 		A fixed heading that folds, the same way a project group's does.
 
-		One snippet for all four rather than four copies of a chevron and an aria
+		One snippet for all four rather than four copies of an icon and an aria
 		attribute: they have to behave identically, and the group heading is already
 		the proof that they drift otherwise — it grew a fold, a colour and two
 		actions while these stayed plain text.
 
-		The whole heading is the target, not the chevron. At this size a lone chevron
+		The whole heading is the target, and the icon is the mark: no arrow beside it.
-		is something you miss, and the name is where the eye already is.
+		At this size an extra glyph is clutter, and the name is where the eye already
+		is.
 	-->
 	<!-- One monochrome mark per kind of heading, so a section and a group read as the
 	     same kind of thing — a folder of projects, a funnel of filters, a tag of
@@ -749,19 +750,15 @@
 	{/snippet}
 
 	{#snippet foldHeading(key, label)}
+		<!-- No chevron: a system section has no page and nothing to rename, so the
+		     whole heading is one button that folds it. The icon and the bold name are
+		     the whole control — an arrow beside them was only ever saying "clickable"
+		     twice. -->
 		<h2 class="fold">
 			<button
 				onclick={() => app.toggleSection(key)}
 				aria-expanded={!app.sectionCollapsed(key)}
 			>
-				<svg
-					class="chevron"
-					class:collapsed={app.sectionCollapsed(key)}
-					viewBox="0 0 24 24"
-					aria-hidden="true"
-				>
-					<path d="M6 9l6 6 6-6" />
-				</svg>
 				{@render sectionIcon(key)}
 				{label}
 			</button>
@@ -930,31 +927,22 @@
 							</div>
 						</form>
 					{:else}
-						<!-- The button sits inside the heading, not around it, the same way a
+						<!-- No chevron: the folder icon itself folds the group, and the name
-						     project's title does: a group *is* a heading in the sidebar, and
+						     beside it opens the group's own page. Two intentions, two targets,
-						     wrapping an h2 in a button both invalidates the markup and takes
+						     but no arrow to clutter the rail — the icon a section carries is
-						     the heading away from a screen reader. The whole heading folds —
+						     the same one that folds it here. The button sits inside the
-						     at this size a lone chevron is a target you miss, and the name is
+						     heading, not around it: a group *is* a heading, and wrapping an h2
-						     where the eye already is. -->
+						     in a button both invalidates the markup and takes the heading from
-						<!-- The chevron folds; the name opens the group's own page. Two
+						     a screen reader. -->
-						     targets in one heading, because they are two different intentions
-						     and the old single one could only ever serve the smaller. -->
 						<button
-							class="chevron-button"
+							class="fold-icon"
 							onclick={() => app.toggleGroup(group.id)}
 							aria-expanded={!group.collapsed}
 							aria-label={group.collapsed
 								? t('sidebar.unfold', { name: group.name })
 								: t('sidebar.fold', { name: group.name })}
 						>
-							<svg
+							{@render sectionIcon('group')}
-								class="chevron"
-								class:collapsed={group.collapsed}
-								viewBox="0 0 24 24"
-								aria-hidden="true"
-							>
-								<path d="M6 9l6 6 6-6" />
-							</svg>
 						</button>
 						<h2 class="fold">
 							<!-- Navigation waits two tenths of a second for a second click. A
@@ -975,7 +963,6 @@
 									}, 200);
 								}}
 							>
-								{@render sectionIcon('group')}
 								{group.name}
 							</a>
 						</h2>
@@ -1425,35 +1412,17 @@
 		min-width: 0;
 	}
 
-	/* The chevron on its own, so the name beside it can be a link to the group's
+	/* The folder icon is the fold toggle now — no chevron beside it. A bare icon
-	   page. Sized as a target rather than as a glyph: 11px of arrow is something
+	   button the size of the icon it holds: the name next to it opens the group's
-	   you miss. */
+	   page, this folds it, and neither wears an arrow to say so. */
-	/* The chevron sits on top of the group's dot rather than before it. In the flow
+	.fold-icon {
-	   it pushed the name 22px further in than a project's, so groups read as if
-	   they were filed under the projects above them — the opposite of what they
-	   are. Out of the flow, a group's name starts exactly where a project's does.
-	   The dot is the resting state; the chevron takes over on hover or focus, and
-	   stays put while the group is folded, so a folded group still shows the way
-	   back open. */
-	/* Uden baggrund. Knappen dækkede prikken med et felt i --surface, og på den
-	   sænkede bjælke er det en lys firkant: en foldet gruppe stod med en hvid
-	   klods ud for navnet permanent, fordi chevronen bliver stående, når gruppen
-	   er lukket. Prikken tones ud i stedet for at blive dækket — det er samme
-	   skifte, uden noget at male henover den med. */
-	/* A group folds from its own chevron, the same one the system sections carry —
-	   in the flow before the name now, not an absolute mark that appeared on hover,
-	   so a group and a section read identically at rest. The name beside it is still
-	   a link to the group's page; the chevron is the second intention. */
-	.chevron-button {
 		flex: none;
-		width: 14px;
-		height: 14px;
 		display: grid;
 		place-items: center;
 		color: inherit;
 	}
 
-	.chevron-button:hover {
+	.fold-icon:hover {
 		color: var(--ink);
 	}
 
@@ -1482,22 +1451,6 @@
 		text-decoration: none;
 	}
 
-	.chevron {
-		width: 11px;
-		height: 11px;
-		flex: none;
-		fill: none;
-		stroke: currentColor;
-		stroke-width: 2.4;
-		stroke-linecap: round;
-		stroke-linejoin: round;
-		transition: transform var(--fast) var(--ease);
-	}
-
-	.chevron.collapsed {
-		transform: rotate(-90deg);
-	}
-
 	/* Hidden until the heading is hovered, like the section actions on a project
 	   page: two buttons permanently beside a label stop it reading as a label. */
 	.folder-head .count {

web/src/routes/indstillinger/data/+page.svelte

@@ -285,7 +285,7 @@
 		<p class="hint">{t('data.doneHint')}</p>
 	</header>
 	<div class="row">
-		<a class="ghost" href="/faerdige">{t('data.openDone')}</a>
+		<a class="link" href="/faerdige">{t('data.openDone')}</a>
 	</div>
 </section>
 

web/src/routes/noter/+page.svelte

@@ -132,7 +132,10 @@
 		if (days === 1) return { key: 'i-gaar', label: t('notes.groupYesterday') };
 		if (days < 7) return { key: 'ugen', label: t('notes.groupWeek') };
 
-		const label = at.toLocaleDateString(tag(), { month: 'long', year: 'numeric' });
+		// Stort forbogstav på måneden: Intl giver "august 2026" på dansk, og en
+		// overskrift begynder med stort.
+		const month = at.toLocaleDateString(tag(), { month: 'long', year: 'numeric' });
+		const label = month.charAt(0).toUpperCase() + month.slice(1);
 		return { key: `m-${at.getFullYear()}-${at.getMonth()}`, label };
 	}
 
@@ -810,7 +813,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>
@@ -831,41 +838,38 @@
 										ondragstart={(e) => onDragStart(e, note)}
 										ondragend={() => (dragging = null)}
 									>
-										<!-- Titel og projekt på linje ét, uddrag på linje to. Datoen står
+										<!-- Tre linjer, som Apple Noter: titlen, så datoen og uddraget, og
-										     i gruppens overskrift og ikke her — undtagen når der er sorteret
+										     nederst hvor noten er lagt. Datoen står forrest på linje to og
-										     på navn, for så er der ingen overskrift, der siger den, og så er
+										     venstrestillet, ikke ude til højre. -->
-										     den det eneste tilbage, der gør. -->
 										<span class="head">
 											<strong>{note.title || t('notes.untitled')}</strong>
-											{#if order === 'title'}
+										</span>
-												<span class="when" title={stamp(note)}>{when(shownDate(note))}</span>
+										<span class="preview">
-											{/if}
+											<span class="when" title={stamp(note)}>{when(shownDate(note))}</span>
-											{#if note.project_id}
+											<span class="snippet">{preview(note)}</span>
-												<!-- Projektets egen farve, den samme som prikken i sidebjælken.
+										</span>
-												     Mærkaten sagde det samme som alle de andre i en grå, der var
+										<!-- Linje tre: hvor noten er lagt, med den samme mappe som grupperne i
-												     lysere end uddraget — og projektet er dét, man skanner efter,
+										     menuen — projektets navn, ejerens hvis den er en andens, ellers bare
-												     når man leder i tolv hundrede noter. Nu kan Hjem kendes fra
+										     "Noter", når den ikke hører til et projekt. -->
-												     Claude uden at læse ordet. -->
+										<span class="filed">
-												<span class="filed" style="--project: {projectColour(note.project_id)}">
-													<span class="dot" aria-hidden="true"></span>
-													{projectName(note.project_id)}
-												</span>
-											{/if}
 											{#if note.shared_with_me && note.owner}
-												<!-- Hvis note delt med mig: hvem den kom fra, i personens egen
+												<svg class="filed-icon" viewBox="0 0 16 16" aria-hidden="true">
-												     avatar-farve. Samme form som projekt-mærkaten, så listen har
+													<circle cx="8" cy="6" r="2.3" fill="none" stroke="currentColor" stroke-width="1.4" />
-												     ét sprog for "det her hører til nogen". -->
+													<path d="M3.6 13c0-2.5 2-4 4.4-4s4.4 1.5 4.4 4" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" />
-												<span
+												</svg>
-													class="filed person"
+												<span class="filed-name" title={t('notes.sharedBy', { name: note.owner.name })}>{note.owner.name}</span>
-													style="--project: {note.owner.avatar_color}"
+											{:else if note.project_id}
-													title={t('notes.sharedBy', { name: note.owner.name })}
+												<svg class="filed-icon" viewBox="0 0 16 16" aria-hidden="true">
-												>
+													<path d="M2 4.6a1 1 0 011-1h3.1l1.4 1.5H13a1 1 0 011 1v6.3a1 1 0 01-1 1H3a1 1 0 01-1-1z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round" />
-													<span class="dot" aria-hidden="true"></span>
+												</svg>
-													{note.owner.name}
+												<span class="filed-name">{projectName(note.project_id)}</span>
-												</span>
+											{:else}
+												<svg class="filed-icon" viewBox="0 0 16 16" aria-hidden="true">
+													<path d="M2 4.6a1 1 0 011-1h3.1l1.4 1.5H13a1 1 0 011 1v6.3a1 1 0 01-1 1H3a1 1 0 01-1-1z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round" />
+												</svg>
+												<span class="filed-name">{t('notes.title')}</span>
 											{/if}
 										</span>
-										<span class="preview">{preview(note)}</span>
 									</button>
 									<!-- De to knapper står oven på hinanden i en smal søjle.
 									     Ved siden af hinanden tog de toogfyrre pixels af en liste,
@@ -1322,13 +1326,20 @@
 	 * målt på en rigtig række: titel plus én linje uddrag. */
 	li {
 		content-visibility: auto;
-		contain-intrinsic-size: auto 54px;
+		contain-intrinsic-size: auto 74px;
 	}
 
+	/* A faint hairline between notes, as Apple Notes has — the group boxes give the
+	   coarse structure, this separates one note from the next inside a group. */
 	.rowline {
 		display: flex;
 		align-items: center;
 		gap: var(--s1);
+		border-bottom: 1px solid var(--line);
+	}
+
+	li:last-child .rowline {
+		border-bottom: none;
 	}
 
 	/* De sjældne handlinger i en søjle, ikke en række. To knapper ved siden af
@@ -1367,43 +1378,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;
+		letter-spacing: normal;
-		text-transform: uppercase;
+		text-transform: none;
-		color: var(--ink-faint);
+		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 +1435,7 @@
 		margin-left: auto;
 		font-weight: 500;
 		letter-spacing: 0;
+		color: var(--ink-muted);
 	}
 
 	/* Stregen mellem rækkerne er væk.
@@ -1480,19 +1497,25 @@
 	/* Dato og begyndelse på samme linje, som Apple Noter gør det. To linjer pr.
 	   note frem for tre, og datoen først, fordi det er den, man skanner efter. */
 
+	/* Datoen forrest på linje to og venstrestillet, som Apple Noter — ikke skubbet
+	   ud til højre. Tabular-tal, så en søjle af datoer står på lige linjer. */
 	.when {
 		flex: none;
 		color: var(--ink-muted);
+		font-variant-numeric: tabular-nums;
 	}
 
-	/* `display: block`, og det er ikke pynt.
+	/* Linje to er en flex-række: datoen, der ikke krymper, og uddraget, der klippes.
-	 *
+	   Afkortningen skal stå på uddraget selv — et inline-element klippes ikke af
-	 * Uddraget lå før inde i en flex-boks, der ejede afkortningen. Da datoen flyttede
+	   `overflow: hidden`. */
-	 * op i gruppens overskrift, forsvandt den boks — og et inline-element klippes
-	 * ikke af `overflow: hidden`, så den sidste sætning løb videre ind under
-	 * favoritstjernen. Reglerne skal stå på det element, der faktisk skal klippes. */
 	.preview {
-		display: block;
+		display: flex;
+		align-items: baseline;
+		gap: 0.45em;
+		min-width: 0;
+	}
+
+	.snippet {
 		min-width: 0;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -1509,31 +1532,30 @@
 	 * Prikken bærer farven, ikke teksten. Fem projekters farver som skriftfarve på
 	 * en lys flade er fem forskellige grader af læsbarhed, og den lyseste af dem er
 	 * ikke læsbar. */
+	/* Linje tre: hvor noten er lagt. En mappe som grupperne i menuen og et navn,
+	   venstrestillet under uddraget — ikke en mærkat skubbet ud til højre. */
 	.filed {
 		display: flex;
 		align-items: center;
-		gap: 0.375em;
+		gap: 0.4em;
-		flex: none;
+		min-width: 0;
-		margin-left: auto;
+		margin-top: 1px;
-		max-width: 45%;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
 		font-size: var(--text-xs);
 		color: var(--ink-muted);
 	}
 
-	.filed .dot {
+	.filed-icon {
-		width: 6px;
+		width: 13px;
-		height: 6px;
+		height: 13px;
 		flex: none;
-		border-radius: var(--radius-full);
+		color: var(--ink-faint);
-		background: var(--project, var(--line-strong));
 	}
 
-	.filed::before {
+	.filed-name {
-		content: '▸ ';
+		min-width: 0;
-		opacity: 0.7;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 	}
 
 	/* Noten er et ark, ikke en flade i appen.
@@ -1753,17 +1775,6 @@
 		display: block;
 	}
 
-	/* The person chip: the project mark's shape in a person's own colour. No ▸
-	   before it — the coloured dot already says "belongs to", and two markers on
-	   one short chip is noise. It sits next to the title rather than pushed to the
-	   right, so in the Delt med mig group it reads as "Ferieplan — Sofie". */
-	.filed.person {
-		margin-left: 0.5em;
-		max-width: 40%;
-	}
-	.filed.person::before {
-		content: none;
-	}
 
 	.sharepanel .none {
 		font-size: var(--text-xs);