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
+		const label = at.toLocaleDateString(tag(), { month: 'long', year: 'numeric' });
-		// 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 };
 	}
 
@@ -838,38 +835,41 @@
 										ondragstart={(e) => onDragStart(e, note)}
 										ondragend={() => (dragging = null)}
 									>
-										<!-- Tre linjer, som Apple Noter: titlen, så datoen og uddraget, og
+										<!-- Titel og projekt på linje ét, uddrag på linje to. Datoen står
-										     nederst hvor noten er lagt. Datoen står forrest på linje to og
+										     i gruppens overskrift og ikke her — undtagen når der er sorteret
-										     venstrestillet, ikke ude til højre. -->
+										     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>
+											{#if order === 'title'}
-										<span class="preview">
 												<span class="when" title={stamp(note)}>{when(shownDate(note))}</span>
-											<span class="snippet">{preview(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>
-										<!-- Linje tre: hvor noten er lagt, med den samme mappe som grupperne i
+											{/if}
-										     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}
-												<svg class="filed-icon" viewBox="0 0 16 16" aria-hidden="true">
+												<!-- Hvis note delt med mig: hvem den kom fra, i personens egen
-													<circle cx="8" cy="6" r="2.3" fill="none" stroke="currentColor" stroke-width="1.4" />
+												     avatar-farve. Samme form som projekt-mærkaten, så listen har
-													<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" />
+												     ét sprog for "det her hører til nogen". -->
-												</svg>
+												<span
-												<span class="filed-name" title={t('notes.sharedBy', { name: note.owner.name })}>{note.owner.name}</span>
+													class="filed person"
-											{:else if note.project_id}
+													style="--project: {note.owner.avatar_color}"
-												<svg class="filed-icon" viewBox="0 0 16 16" aria-hidden="true">
+													title={t('notes.sharedBy', { name: note.owner.name })}
-													<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="dot" aria-hidden="true"></span>
-												<span class="filed-name">{projectName(note.project_id)}</span>
+													{note.owner.name}
-											{:else}
+												</span>
-												<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,
@@ -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.
+	/* `display: block`, og det er ikke pynt.
-	   Afkortningen skal stå på uddraget selv — et inline-element klippes ikke af
+	 *
-	   `overflow: hidden`. */
+	 * 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;
+		display: block;
-		align-items: baseline;
-		gap: 0.45em;
-		min-width: 0;
-	}
-
-	.snippet {
 		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;
+		gap: 0.375em;
-		min-width: 0;
+		flex: none;
-		margin-top: 1px;
+		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 {
+	.filed .dot {
-		width: 13px;
+		width: 6px;
-		height: 13px;
+		height: 6px;
 		flex: none;
-		color: var(--ink-faint);
+		border-radius: var(--radius-full);
+		background: var(--project, var(--line-strong));
 	}
 
-	.filed-name {
+	.filed::before {
-		min-width: 0;
+		content: '▸ ';
-		overflow: hidden;
+		opacity: 0.7;
-		text-overflow: ellipsis;
-		white-space: nowrap;
 	}
 
 	/* 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">
+  <g fill="none" stroke="#5fbf8f" stroke-width="6.5" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M22 14v36"/>
+    <path d="M26 11v42"/>
-    <path d="M22 17l17 8-17 8"/>
+    <path d="M26 15l17 9.5L26 34"/>
   </g>
 </svg>