feat(notes): datoerne følger med, billederne bliver tegnet, og listen kan sorteres

Fire ting, som en rigtig import af tolv hundrede noter fandt på en time.

**Billederne blev vist som ord.** `markdownToHtml` havde ingen regel for
`![](…)` overhovedet, så en note fra Apple Noter viste sin egen billedadresse som
tekst. Filen var hentet, gemt og hæftet på noten; det eneste, der manglede, var
at nogen tegnede den. Kun vores egen adresse bliver til et billede — et
`![](http://…)` fra en indsat tekst ville ellers hente fra en fremmed vært, når
noten åbnes, og en note er det sidste sted, man vil have en sporingspixel. Og
vejen tilbage skulle med: uden `IMG` i inlineToMarkdown ville den første gemning
have taget hvert billede ud af noten igen.

**Titlen blev revet i stykker.** Noter deler en linje op i så mange stumper, den
har brug for — "Aalborg Kommune" står som
`<h1>A</h1><h1>alb</h1><h1>org Kom</h1><h1>mune</h1>`, fordi der er en
attributkørsel bag hver stump — og eksporten læste et linjeskift ved hver af dem.
Noten kom ud som fire overskrifter oven på hinanden, altså ødelagt på den mest
synlige måde der findes: i sin egen titel. Samme rod gav `**M****øde**` for fed
og `*M**øde*` for kursiv, hvor de to stjerner i midten læses som fed. Nu brydes
der kun, når blokken skifter, og et mærke, der lukkes og straks åbnes igen, er
ingenting.

**Datoerne fandtes ikke.** Eksporten læste dem aldrig, og Markdown havde ingen
plads til dem — så en flytning af tolv hundrede noter blev en bunke, der alle var
skrevet samme aften. Rækkefølgen er halvdelen af, hvad et arkiv er. Nu står de i
et YAML-hoved, som Obsidian og Bear allerede skriver, og importen læser det.
`SetNoteTimes` frem for gennem SaveNote: `updated_at` betyder "hvornår skrev
*dette* program noten sidst", og lod man enhver kalder sætte den, ville kolonnen
betyde det, den sidste skriver havde lyst til.

**Og listen kan sorteres** — senest rørt, oprettet, navn. Favoritter står øverst
uanset hvad; det er hele meningen med at gøre en note til favorit.

Eksporten henter nu i klumper. Ét kald pr. note tog halvanden time for tolv
hundrede, ikke fordi Noter er langsom, men fordi hvert kald er en proces, der
skal startes — og det gjorde det umuligt at rette en fejl i oversættelsen og se
resultatet, for hver runde var en frokostpause. Antallet af bilag kom med i
klumpen af samme grund: ni ud af ti kald var en proces startet for at få svaret
nul.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/src/lib/components/NoteEditor.svelte

@@ -805,6 +805,16 @@
 		margin-bottom: var(--s1);
 	}
 
+	/* Et billede fylder sin egen bredde og ikke mere. Et foto fra en telefon er
+	   fire tusind pixels bredt, og uden det her stikker det ud af arket. */
+	.page :global(img) {
+		max-width: 100%;
+		height: auto;
+		border-radius: var(--radius-sm);
+		display: block;
+		margin: var(--s2) 0;
+	}
+
 	.page :global(blockquote) {
 		margin: 0 0 var(--s2);
 		padding-left: var(--s3);

web/src/lib/locales/da.js

@@ -25,6 +25,10 @@ export const da = {
 	'notes.bold': 'Fed',
 	'notes.italic': 'Kursiv',
 	'notes.underline': 'Understreget',
+	'notes.sortBy': 'Rækkefølge',
+	'notes.sortUpdated': 'Senest rørt',
+	'notes.sortCreated': 'Oprettet',
+	'notes.sortTitle': 'Navn',
 	'notes.strike': 'Gennemstreget',
 	'notes.showSource': 'Vis som kode',
 	'notes.source': 'Notens kildetekst',

web/src/lib/locales/en.js

@@ -21,6 +21,10 @@ export const en = {
 	'notes.bold': 'Bold',
 	'notes.italic': 'Italic',
 	'notes.underline': 'Underline',
+	'notes.sortBy': 'Order',
+	'notes.sortUpdated': 'Last touched',
+	'notes.sortCreated': 'Created',
+	'notes.sortTitle': 'Name',
 	'notes.strike': 'Strikethrough',
 	'notes.showSource': 'Show as code',
 	'notes.source': 'Note source',

web/src/lib/richtext.js

@@ -39,12 +39,26 @@ const escapeHtml = (s) =>
 
 /** Inline marks, innermost first so a bold word inside italics survives both. */
 function inlineToHtml(text) {
-	return escapeHtml(text)
-		.replace(/&lt;u&gt;(.+?)&lt;\/u&gt;/g, '<u>$1</u>')
-		.replace(/`([^`]+)`/g, '<code>$1</code>')
-		.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-		.replace(/~~(.+?)~~/g, '<s>$1</s>')
-		.replace(/(^|[^*])\*([^*]+)\*/g, '$1<em>$2</em>');
+	return (
+		escapeHtml(text)
+			// Billedet først, og før alt andet.
+			//
+			// Der var ingen regel for det overhovedet, så en note fra Apple Noter
+			// viste `![](/api/v1/attachments/…)` som ord. Billedet var hentet, gemt og
+			// hæftet på noten — det eneste, der manglede, var at nogen tegnede det.
+			//
+			// Kun vores egen adresse. Et `![](http://…)` fra en indsat tekst ville
+			// ellers hente fra en fremmed vært, når noten åbnes, og fortælle den, at
+			// den er blevet læst — og en note er det sidste sted, man vil have en
+			// sporingspixel. Alt andet står som den tekst, det er.
+			.replace(/!\[([^\]]*)\]\((\/api\/v1\/attachments\/[0-9a-f-]+)\)/g,
+				(_, alt, src) => `<img src="${src}" alt="${alt}">`)
+			.replace(/&lt;u&gt;(.+?)&lt;\/u&gt;/g, '<u>$1</u>')
+			.replace(/`([^`]+)`/g, '<code>$1</code>')
+			.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+			.replace(/~~(.+?)~~/g, '<s>$1</s>')
+			.replace(/(^|[^*])\*([^*]+)\*/g, '$1<em>$2</em>')
+	);
 }
 
 /**
@@ -184,6 +198,11 @@ function inlineToMarkdown(node) {
 
 	const inner = [...node.childNodes].map(inlineToMarkdown).join('');
 	switch (node.tagName) {
+		// Et billede har ingen tekst i sig, så uden det her læses det som ingenting
+		// — og den første gemning ville tage hvert billede ud af noten uden at
+		// nogen havde rørt det.
+		case 'IMG':
+			return `![${node.getAttribute('alt') ?? ''}](${node.getAttribute('src') ?? ''})`;
 		case 'STRONG':
 		case 'B':
 			return inner ? `**${inner}**` : '';

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

@@ -19,6 +19,50 @@
 	import NoteEditor from '$lib/components/NoteEditor.svelte';
 
 	let notes = $state([]);
+
+	/**
+	 * Rækkefølgen, og hvorfor den kan vælges.
+	 *
+	 * Serveren svarer i én rækkefølge — senest rørt øverst — og det er den rigtige,
+	 * når man arbejder: den note, man var i gang med, er den, man skal tilbage til.
+	 * Den er også den eneste, der ikke kan svare på "hvad skrev jeg dengang".
+	 * Tolv hundrede noter flyttet ind fra et andet program er et arkiv, og et arkiv
+	 * læses efter, hvornår noget blev skrevet, og efter navn.
+	 *
+	 * Sorteret her frem for i en forespørgsel: hele listen er allerede hentet, den
+	 * fylder ingenting, og et valg, der ikke koster et kald, kan skiftes så hurtigt
+	 * som man kan ombestemme sig.
+	 */
+	const ORDERS = [
+		{ key: 'updated', label: 'notes.sortUpdated' },
+		{ key: 'created', label: 'notes.sortCreated' },
+		{ key: 'title', label: 'notes.sortTitle' }
+	];
+
+	let order = $state('updated');
+
+	$effect(() => {
+		const saved = localStorage.getItem('notes.order');
+		if (saved && ORDERS.some((o) => o.key === saved)) order = saved;
+	});
+
+	function setOrder(next) {
+		order = next;
+		localStorage.setItem('notes.order', next);
+	}
+
+	// Favoritter står øverst uanset rækkefølge. Det er hele meningen med at gøre en
+	// note til favorit, og en sortering, der blandede dem ind igen, ville tage den.
+	let ordered = $derived(
+		[...notes].sort((a, b) => {
+			if (a.pinned !== b.pinned) return a.pinned ? -1 : 1;
+			if (order === 'title') {
+				return (a.title || '').localeCompare(b.title || '', 'da', { sensitivity: 'base' });
+			}
+			const field = order === 'created' ? 'created_at' : 'updated_at';
+			return new Date(b[field]).getTime() - new Date(a[field]).getTime();
+		})
+	);
 	let selected = $state(null);
 	let query = $state('');
 	let status = $state('loading');
@@ -233,7 +277,22 @@
 	<aside>
 		<div class="head">
 			<h1>{t('notes.title')}</h1>
-			<button class="new" onclick={create} aria-label={t('notes.new')}>+</button>
+			<div class="tools">
+				<!-- En select frem for tre knapper: rækkefølgen vælges sjældent, og tre
+				     knapper ville tage plads fra listen hver eneste dag for at spare et
+				     klik en gang imellem. -->
+				<select
+					class="order"
+					value={order}
+					onchange={(e) => setOrder(e.currentTarget.value)}
+					aria-label={t('notes.sortBy')}
+				>
+					{#each ORDERS as o}
+						<option value={o.key}>{t(o.label)}</option>
+					{/each}
+				</select>
+				<button class="new" onclick={create} aria-label={t('notes.new')}>+</button>
+			</div>
 		</div>
 
 		<input
@@ -250,7 +309,7 @@
 			<p class="hint">{query ? t('notes.noneFound') : t('notes.noneYet')}</p>
 		{:else}
 			<ul>
-				{#each notes as note (note.id)}
+				{#each ordered as note (note.id)}
 					<li>
 						<div class="rowline">
 							<button
@@ -372,6 +431,23 @@
 		display: flex;
 		align-items: baseline;
 		justify-content: space-between;
+		gap: var(--s2);
+	}
+
+	.tools {
+		display: flex;
+		align-items: center;
+		gap: var(--s1);
+		min-width: 0;
+	}
+
+	.order {
+		font-size: var(--text-xs);
+		color: var(--ink-muted);
+		border: 0;
+		background: none;
+		padding: 2px var(--s1);
+		max-width: 11ch;
 	}
 
 	h1 {