feat(notes): opgaven viser de noter, der nævner den — og har fået en adresse

Den anden vej af samme forbindelse. En note, der nævner en opgave, viste den; nu
viser opgaven noten. Uden det virker forbindelsen kun, hvis man tilfældigvis
sidder og læser noten, og det er den halvdel, ingen har brug for hjælp til.

Undervejs viste det sig, at en opgave slet ikke havde en adresse. Skuffen åbner
over den liste, man står på, og ændrer ingenting i URL'en — hvilket er rigtigt for
et klik og ubrugeligt for et link: man kan ikke sende nogen en opgave, og en note,
der nævner en, har ingen steder at sende dem hen. Min egen henvisningsform pegede
altså på noget, der ikke fandtes.

/opgave/{id} findes nu. Den åbner skuffen og træder til side — erstatter sig selv
med opgavens eget projekt, så man lander hvor opgaven bor, med den åben, og
tilbage-knappen ikke går gennem en side, der kun nogensinde viderestillede.

Prøven henter opgavens id fra API'et frem for fra adresselinjen, netop fordi den
ikke står der.

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

web/src/lib/components/TaskDetail.svelte

@@ -43,6 +43,7 @@
 	let subtasks = $state([]);
 	let comments = $state([]);
 	let attachments = $state([]);
+	let notes = $state([]);
 	let reminders = $state([]);
 
 	let newSubtask = $state('');
@@ -80,6 +81,7 @@
 		subtasks = [];
 		comments = [];
 		attachments = [];
+		notes = [];
 		reminders = [];
 
 		const id = task.id;
@@ -96,6 +98,11 @@
 		api.listReminders(id)
 			.then((r) => id === seededId && (reminders = r.reminders))
 			.catch(() => {});
+		// Quietly, because a task with no notes is the ordinary case and a failure
+		// here must not put an error in front of somebody reading a task.
+		api.notesLinking('task', id)
+			.then((r) => id === seededId && (notes = r.notes ?? []))
+			.catch(() => {});
 	});
 
 	/**
@@ -540,6 +547,22 @@
 			</form>
 		</section>
 
+		<!-- What has been written about this task.
+		     The other direction of the same link: a note that mentions a task shows
+		     it, and this is the task showing the note. Without it the connection only
+		     works if you happen to be reading the note — which is the half nobody
+		     needs help with. -->
+		{#if notes.length}
+			<section class="linked-notes">
+				<h3>{t('notes.title')}</h3>
+				{#each notes as note (note.id)}
+					<a class="linked-note" href="/noter?note={note.id}">
+						<strong>{note.title || t('notes.untitled')}</strong>
+					</a>
+				{/each}
+			</section>
+		{/if}
+
 		<section>
 			<h3>{t('detail.comments')}</h3>
 
@@ -582,6 +605,24 @@
 </aside>
 
 <style>
+	.linked-note {
+		display: block;
+		padding: var(--s2);
+		border-radius: var(--radius);
+		color: var(--ink-muted);
+		text-decoration: none;
+	}
+
+	.linked-note:hover {
+		background: var(--surface);
+		color: var(--ink);
+	}
+
+	.linked-note strong {
+		font-size: var(--text-sm);
+		font-weight: 560;
+	}
+
 	.scrim {
 		position: fixed;
 		inset: 0;