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]>

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

@@ -132,10 +132,7 @@
 		if (days === 1) return { key: 'i-gaar', label: t('notes.groupYesterday') };
 		if (days < 7) return { key: 'ugen', label: t('notes.groupWeek') };
 
-		// 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);
+		const label = at.toLocaleDateString(tag(), { month: 'long', year: 'numeric' });
 		return { key: `m-${at.getFullYear()}-${at.getMonth()}`, label };
 	}
 
@@ -838,38 +835,41 @@
 										ondragstart={(e) => onDragStart(e, note)}
 										ondragend={() => (dragging = null)}
 									>
-										<!-- 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. -->
+										<!-- 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. -->
 										<span class="head">
 											<strong>{note.title || t('notes.untitled')}</strong>
-										</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 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}
 											{#if note.shared_with_me && note.owner}
-												<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>
+												<!-- 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>
 											{/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,
@@ -1326,20 +1326,13 @@
 	 * målt på en rigtig række: titel plus én linje uddrag. */
 	li {
 		content-visibility: auto;
-		contain-intrinsic-size: auto 74px;
+		contain-intrinsic-size: auto 54px;
 	}
 
-	/* 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
@@ -1497,25 +1490,19 @@
 	/* 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;
 	}
 
-	/* 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`. */
+	/* `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. */
 	.preview {
-		display: flex;
-		align-items: baseline;
-		gap: 0.45em;
-		min-width: 0;
-	}
-
-	.snippet {
+		display: block;
 		min-width: 0;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -1532,30 +1519,31 @@
 	 * 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.4em;
-		min-width: 0;
-		margin-top: 1px;
+		gap: 0.375em;
+		flex: none;
+		margin-left: auto;
+		max-width: 45%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 		font-size: var(--text-xs);
 		color: var(--ink-muted);
 	}
 
-	.filed-icon {
-		width: 13px;
-		height: 13px;
+	.filed .dot {
+		width: 6px;
+		height: 6px;
 		flex: none;
-		color: var(--ink-faint);
+		border-radius: var(--radius-full);
+		background: var(--project, var(--line-strong));
 	}
 
-	.filed-name {
-		min-width: 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
+	.filed::before {
+		content: '▸ ';
+		opacity: 0.7;
 	}
 
 	/* Noten er et ark, ikke en flade i appen.
@@ -1775,6 +1763,17 @@
 		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);

web/static/icon.svg

@@ -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>