Merge pull request #46 from kristianwind/app-icon-refresh

Centre and strengthen the app icon
Merge pull request #45 from kristianwind/notes-three-line-rows
2026-09-03 15:01:15 +02:00 · 2026-09-03 15:01:06 +02:00 · 2026-09-03 14:53:21 +02:00 · 2026-09-03 14:52:56 +02:00 · 2026-09-03 14:35:20 +02:00 · 2026-09-03 14:35:10 +02:00
12 changed files with 98 additions and 83 deletions
@@ -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>

@@ -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
-										     i gruppens overskrift og ikke her — undtagen når der er sorteret
-										     på navn, for så er der ingen overskrift, der siger den, og så er
-										     den det eneste tilbage, der gør. -->
+										<!-- Tre linjer, som Apple Noter: titlen, så datoen og uddraget, og
+										     nederst hvor noten er lagt. Datoen står forrest på linje to og
+										     venstrestillet, ikke ude til højre. -->
 										<span class="head">
 											<strong>{note.title || t('notes.untitled')}</strong>
-											{#if order === 'title'}
-												<span class="when" title={stamp(note)}>{when(shownDate(note))}</span>
-											{/if}
-											{#if note.project_id}
-												<!-- Projektets egen farve, den samme som prikken i sidebjælken.
-												     Mærkaten sagde det samme som alle de andre i en grå, der var
-												     lysere end uddraget — og projektet er dét, man skanner efter,
-												     når man leder i tolv hundrede noter. Nu kan Hjem kendes fra
-												     Claude uden at læse ordet. -->
-												<span class="filed" style="--project: {projectColour(note.project_id)}">
-													<span class="dot" aria-hidden="true"></span>
-													{projectName(note.project_id)}
-												</span>
-											{/if}
+										</span>
+										<span class="preview">
+											<span class="when" title={stamp(note)}>{when(shownDate(note))}</span>
+											<span class="snippet">{preview(note)}</span>
+										</span>
+										<!-- Linje tre: hvor noten er lagt, med den samme mappe som grupperne i
+										     menuen — projektets navn, ejerens hvis den er en andens, ellers bare
+										     "Noter", når den ikke hører til et projekt. -->
+										<span class="filed">
 											{#if note.shared_with_me && note.owner}
-												<!-- Hvis note delt med mig: hvem den kom fra, i personens egen
-												     avatar-farve. Samme form som projekt-mærkaten, så listen har
-												     ét sprog for "det her hører til nogen". -->
-												<span
-													class="filed person"
-													style="--project: {note.owner.avatar_color}"
-													title={t('notes.sharedBy', { name: note.owner.name })}
-												>
-													<span class="dot" aria-hidden="true"></span>
-													{note.owner.name}
-												</span>
+												<svg class="filed-icon" viewBox="0 0 16 16" aria-hidden="true">
+													<circle cx="8" cy="6" r="2.3" fill="none" stroke="currentColor" stroke-width="1.4" />
+													<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" />
+												</svg>
+												<span class="filed-name" title={t('notes.sharedBy', { name: note.owner.name })}>{note.owner.name}</span>
+											{:else if note.project_id}
+												<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">{projectName(note.project_id)}</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;
-		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 +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.
-	 *
-	 * Uddraget lå før inde i en flex-boks, der ejede afkortningen. Da datoen flyttede
-	 * 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. */
+	/* 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
+	   `overflow: hidden`. */
 	.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;
-		flex: none;
-		margin-left: auto;
-		max-width: 45%;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
+		gap: 0.4em;
+		min-width: 0;
+		margin-top: 1px;
 		font-size: var(--text-xs);
 		color: var(--ink-muted);
 	}

-	.filed .dot {
-		width: 6px;
-		height: 6px;
+	.filed-icon {
+		width: 13px;
+		height: 13px;
 		flex: none;
-		border-radius: var(--radius-full);
-		background: var(--project, var(--line-strong));
+		color: var(--ink-faint);
 	}

-	.filed::before {
-		content: '▸ ';
-		opacity: 0.7;
+	.filed-name {
+		min-width: 0;
+		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);
@@ -1,9 +1,13 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <!-- Wunjo, the rune Verdande's name begins with. Drawn as strokes rather than
-       as a filled glyph so it stays legible at 16px in a browser tab. -->
+       as a filled glyph so it stays legible at 16px in a browser tab. Bigger and
+       heavier than it was, to read clearly as a home-screen icon, and nudged right
+       of the geometric centre so the heavy stave and the light flag balance about
+       the middle of the tile — a bounding box centred on 32 leaves the stave
+       looking left-hung. -->
  <rect width="64" height="64" rx="14" fill="#111312"/>
-  <g fill="none" stroke="#5fbf8f" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M22 14v36"/>
-    <path d="M22 17l17 8-17 8"/>
+  <g fill="none" stroke="#5fbf8f" stroke-width="6.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M26 11v42"/>
+    <path d="M26 15l17 9.5L26 34"/>
  </g>
 </svg>
Author	SHA1	Message	Date
Kristian Wind	8dc601d09a	Merge pull request #46 from kristianwind/app-icon-refresh CI / OpenAPI is valid (push) Successful in 9s Details CI / End-to-end (push) Successful in 9m19s Details CI / Docker image builds (push) Successful in 1m56s Details Release / Build and publish image (push) Failing after 6s Details CI / Go (push) Failing after 14m31s Details Centre and strengthen the app icon	2026-09-03 15:01:15 +02:00
Kristian Wind	85e769a603	Merge pull request #45 from kristianwind/notes-three-line-rows Notes: three-line rows with a filed line and dividers	2026-09-03 15:01:06 +02:00
kristianwindandClaude Opus 4.8	0363d5f422	feat(icon): centre and strengthen the app icon The Wunjo rune sat left of centre and thin. It is heavier now (a 6.5 stroke), bigger, and nudged right of the geometric centre so the heavy stave and the light flag balance about the middle of the tile — so it reads clearly as a home-screen icon. Co-Authored-By: Claude Opus 4.8 <[email protected]>	2026-09-03 14:53:21 +02:00
kristianwindandClaude Opus 4.8	05b7dac713	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]>	2026-09-03 14:52:56 +02:00
Kristian Wind	cfd382e3df	Merge pull request #44 from kristianwind/settings-link-style CI / OpenAPI is valid (push) Successful in 11s Details CI / End-to-end (push) Successful in 10m3s Details CI / Docker image builds (push) Successful in 2m8s Details Release / Build and publish image (push) Failing after 6s Details CI / Go (push) Failing after 14m58s Details Style the unstyled "open completed tasks" link in settings	2026-09-03 14:35:20 +02:00
Kristian Wind	bbcff40401	Merge pull request #43 from kristianwind/notes-header-new-design Notes list: headers in the new heading design, rounded boxes	2026-09-03 14:35:10 +02:00
kristianwindandClaude Opus 4.8	01001d0980	fix(settings): the "open completed tasks" link was unstyled It carried class="ghost", which nothing in the data page styles — so it fell back to the browser's blue underline while every link beside it is the accent-coloured .link. Now it matches them. Co-Authored-By: Claude Opus 4.8 <[email protected]>	2026-09-03 14:27:20 +02:00
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 <[email protected]>	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 <[email protected]>	2026-09-03 14:22:19 +02:00
Kristian Wind	f89fb21502	Merge pull request #42 from kristianwind/sidebar-drop-chevrons CI / OpenAPI is valid (push) Successful in 12s Details CI / End-to-end (push) Successful in 8m44s Details CI / Docker image builds (push) Successful in 1m49s Details Release / Build and publish image (push) Failing after 5s Details CI / Go (push) Failing after 14m26s Details Drop the fold arrows from sidebar headers and groups	2026-09-03 13:39:35 +02:00