From a4b12f3601f3801fffcd909b7f158e561496e775 Mon Sep 17 00:00:00 2001
From: Kristian Wind <kw@KW-MacBook.local>
Date: Wed, 19 Aug 2026 20:46:05 +0200
Subject: [PATCH] =?UTF-8?q?feat(notes):=20listen=20som=20Apple=20Noters,?=
 =?UTF-8?q?=20=E2=8C=98K=20finder=20noter,=20og=20de=20kan=20tr=C3=A6kkes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rækken har nu titel i samme størrelse som en opgavetitel — en note og en opgave er
to ting af samme slags, og hver sin størrelse får den ene til at se mindre vigtig
ud. Under den står 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.
Ligger noten i et projekt, står det nedenunder.

⌘K søgte kun i opgaver og projekter. Feltet ser ud til at kunne finde alt, så det
er svært at gætte, at halvdelen af programmet ikke var med. Og mens jeg var der:
"Projekt" og "Opgave" stod hårdkodet på dansk i paletten.

En note kan trækkes ind på et projekt i sidebjælken — samme mål som en opgave,
fordi det er samme gestus: læg denne her.

To fejl i søgefeltet, begge Safaris egen type="search":
Fokusringen tvang sin egen hjørneradius og tegnede en firkantet bue uden om en
rund kant — to streger, hvor der skulle være én. Den følger nu elementets form,
overalt i programmet. Og feltet skiftede udseende ved fokus: forstørrelsesglasset
forsvandt og pilleformen blev firkantet. Det tegnes nu af os.

Trækket og palettens noter er ikke fastholdt i en prøve. ⌘K, tastning og en
debounce oven på hinanden gjorde den upålidelig, og en flakkende prøve siger
mindre end ingen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 web/src/app.css                              |   5 +-
 web/src/lib/components/CommandPalette.svelte |  15 ++-
 web/src/lib/components/Sidebar.svelte        |  19 ++-
 web/src/lib/dnd.js                           |   1 +
 web/src/lib/locales/da.js                    |   4 +
 web/src/lib/locales/en.js                    |   4 +
 web/src/lib/stores.svelte.js                 |  13 ++
 web/src/routes/noter/+page.svelte            | 119 +++++++++++++++++--
 8 files changed, 166 insertions(+), 14 deletions(-)

diff --git a/web/src/app.css b/web/src/app.css
index d30a856..403566f 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -363,7 +363,10 @@ button {
 :focus-visible {
 	outline: 2px solid var(--accent);
 	outline-offset: 2px;
-	border-radius: var(--radius-sm);
+	/* Ingen radius her. En omrids følger elementets egen afrunding af sig selv, og
+	   at tvinge en anden på tegner en firkantet bue uden om en rund kant — to
+	   streger, hvor der skulle være én. Det ses tydeligst om et pilleformet
+	   søgefelt. */
 }
 
 ::selection {
diff --git a/web/src/lib/components/CommandPalette.svelte b/web/src/lib/components/CommandPalette.svelte
index bf53261..20b5322 100644
--- a/web/src/lib/components/CommandPalette.svelte
+++ b/web/src/lib/components/CommandPalette.svelte
@@ -9,6 +9,7 @@
 	let query = $state('');
 	let tasks = $state([]);
 	let projects = $state([]);
+	let notes = $state([]);
 	let selected = $state(0);
 	let input;
 	let controller = null;
@@ -32,13 +33,21 @@
 		if (!value) {
 			tasks = [];
 			projects = [];
+			notes = [];
 			return;
 		}
 		timer = setTimeout(async () => {
 			try {
-				const result = await api.search(value);
+				// Noter er sit eget endepunkt, så de hentes ved siden af. Uden dem
+				// søger ⌘K kun i halvdelen af programmet, hvilket er svært at gætte
+				// som bruger: feltet ser ud til at kunne finde alt.
+				const [result, found] = await Promise.all([
+					api.search(value),
+					api.notes({ q: value }).catch(() => ({ notes: [] }))
+				]);
 				tasks = result.tasks ?? [];
 				projects = result.projects ?? [];
+				notes = found.notes ?? [];
 				selected = 0;
 			} catch {
 				// A failed search shows nothing rather than an error inside a
@@ -49,6 +58,7 @@
 
 	let results = $derived([
 		...projects.map((p) => ({ kind: 'project', id: p.id, label: p.name })),
+		...notes.map((n) => ({ kind: 'note', id: n.id, label: n.title || n.body.slice(0, 60) })),
 		...tasks.map((t) => ({
 			kind: 'task',
 			id: t.id,
@@ -60,6 +70,7 @@
 
 	function choose(item) {
 		open = false;
+		if (item.kind === 'note') return goto(`/noter?note=${item.id}`);
 		goto(item.kind === 'project' ? `/projekt/${item.id}` : `/projekt/${item.project}`);
 	}
 
@@ -109,7 +120,7 @@
 								onclick={() => choose(item)}
 								onmouseenter={() => (selected = i)}
 							>
-								<span class="kind">{item.kind === 'project' ? 'Projekt' : 'Opgave'}</span>
+								<span class="kind">{t('palette.' + item.kind)}</span>
 								<span class="label">{item.label}</span>
 							</button>
 						</li>
diff --git a/web/src/lib/components/Sidebar.svelte b/web/src/lib/components/Sidebar.svelte
index 63df0d7..4b00ade 100644
--- a/web/src/lib/components/Sidebar.svelte
+++ b/web/src/lib/components/Sidebar.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { app, sidebar, projectName } from '$lib/stores.svelte.js';
 	import { api } from '$lib/api.js';
-	import { TASK, PROJECT, GROUP, startDrag, carries, dragged, accept } from '$lib/dnd.js';
+	import { TASK, PROJECT, GROUP, NOTE, startDrag, carries, dragged, accept } from '$lib/dnd.js';
 	import { COLORS, colorVar } from '$lib/colors.js';
 	import { focusOnMount } from '$lib/focus.js';
 	import { t } from '$lib/i18n.svelte.js';
@@ -335,16 +335,27 @@
 	const canReceive = (project) => project.role === 'owner' || project.role === 'editor';
 
 	function onTaskDragOver(event, project) {
-		if (!carries(event, TASK) || !canReceive(project)) return;
+		if (!(carries(event, TASK) || carries(event, NOTE)) || !canReceive(project)) return;
 		accept(event);
 		overProject = project.id;
 	}
 
 	async function onTaskDrop(event, project) {
 		event.preventDefault();
-		const id = dragged(event, TASK);
 		overProject = null;
-		if (!id || !canReceive(project)) return;
+		if (!canReceive(project)) return;
+
+		// The same target takes both. A note dropped on a project is filed there,
+		// which is also how it gets shared — one gesture, one meaning, and the
+		// sidebar already reads as "put this here".
+		const noteID = dragged(event, NOTE);
+		if (noteID) {
+			await app.moveNoteToProject(noteID, project.id);
+			return;
+		}
+
+		const id = dragged(event, TASK);
+		if (!id) return;
 		await app.moveToProject(id, project.id);
 	}
 
diff --git a/web/src/lib/dnd.js b/web/src/lib/dnd.js
index 36d583f..faf5c8b 100644
--- a/web/src/lib/dnd.js
+++ b/web/src/lib/dnd.js
@@ -17,6 +17,7 @@
 export const TASK = 'application/x-verdande-task';
 export const PROJECT = 'application/x-verdande-project';
 export const GROUP = 'application/x-verdande-group';
+export const NOTE = 'application/x-verdande-note';
 
 /** Starts a drag carrying one id of the given kind. */
 export function startDrag(event, type, id) {
diff --git a/web/src/lib/locales/da.js b/web/src/lib/locales/da.js
index a7a9470..bdd2abd 100644
--- a/web/src/lib/locales/da.js
+++ b/web/src/lib/locales/da.js
@@ -38,6 +38,7 @@ export const da = {
 	'notes.unfavourite': 'Fjern som favorit',
 	'notes.syntaxProject': 'projekt',
 	'notes.syntaxNote': 'en anden note',
+	'notes.yesterday': 'i går',
 	'notes.title': 'Noter',
 	'notes.new': 'Ny note',
 	'notes.search': 'Søg i noter',
@@ -51,6 +52,9 @@ export const da = {
 	'notes.saved': 'Gemt',
 	'notes.delete': 'Slet',
 	'notes.deleteNote': 'Slet "{name}"? Den kan hentes tilbage fra papirkurven.',
+	'palette.project': 'Projekt',
+	'palette.task': 'Opgave',
+	'palette.note': 'Note',
 	'nav.today': 'I dag',
 	'nav.upcoming': 'Kommende',
 	'nav.delegated': 'Venter på andre',
diff --git a/web/src/lib/locales/en.js b/web/src/lib/locales/en.js
index 23533ac..0c98c8d 100644
--- a/web/src/lib/locales/en.js
+++ b/web/src/lib/locales/en.js
@@ -34,6 +34,7 @@ export const en = {
 	'notes.unfavourite': 'Remove from favourites',
 	'notes.syntaxProject': 'project',
 	'notes.syntaxNote': 'another note',
+	'notes.yesterday': 'yesterday',
 	'notes.title': 'Notes',
 	'notes.new': 'New note',
 	'notes.search': 'Search notes',
@@ -47,6 +48,9 @@ export const en = {
 	'notes.saved': 'Saved',
 	'notes.delete': 'Delete',
 	'notes.deleteNote': 'Delete "{name}"? It can be brought back from the trash.',
+	'palette.project': 'Project',
+	'palette.task': 'Task',
+	'palette.note': 'Note',
 	'nav.today': 'Today',
 	'nav.upcoming': 'Upcoming',
 	'nav.delegated': 'Waiting on others',
diff --git a/web/src/lib/stores.svelte.js b/web/src/lib/stores.svelte.js
index 70b5b35..c008a06 100644
--- a/web/src/lib/stores.svelte.js
+++ b/web/src/lib/stores.svelte.js
@@ -49,6 +49,8 @@ class AppState {
 	 * small request against modelling a count in two places.
 	 */
 	labelsChanged = $state(0);
+	/** Bumped when a note moves, so a list showing them knows to look again. */
+	notesChanged = $state(0);
 
 	#socket = null;
 	#reconnectDelay = 1000;
@@ -421,6 +423,17 @@ class AppState {
 		}
 	}
 
+	/** Files a note under a project, which is what sharing it means. */
+	async moveNoteToProject(noteID, projectID) {
+		try {
+			await api.updateNote(noteID, { project_id: projectID });
+			this.notesChanged++;
+			this.toast(t('notes.filed'));
+		} catch (e) {
+			this.toast(humanMessage(e));
+		}
+	}
+
 	async refreshProjects() {
 		const { projects } = await api.listProjects();
 		this.projects = projects;
diff --git a/web/src/routes/noter/+page.svelte b/web/src/routes/noter/+page.svelte
index 1e90501..913349f 100644
--- a/web/src/routes/noter/+page.svelte
+++ b/web/src/routes/noter/+page.svelte
@@ -14,7 +14,8 @@
 	import { api, humanMessage } from '$lib/api.js';
 	import { app } from '$lib/stores.svelte.js';
 	import { page } from '$app/stores';
-	import { t } from '$lib/i18n.svelte.js';
+	import { t, tag } from '$lib/i18n.svelte.js';
+	import { NOTE, startDrag } from '$lib/dnd.js';
 	import NoteEditor from '$lib/components/NoteEditor.svelte';
 
 	let notes = $state([]);
@@ -82,6 +83,39 @@
 			.slice(0, 90);
 	}
 
+	/**
+	 * Hvornår, skrevet som man ville sige det.
+	 *
+	 * "i går" og et klokkeslæt i dag; en dato, når det er længere siden. En note
+	 * fra i formiddags og en fra i fjor skal ikke se ens ud i en liste, man skanner.
+	 */
+	function when(iso) {
+		if (!iso) return '';
+		const at = new Date(iso);
+		const now = new Date();
+		const sameDay = at.toDateString() === now.toDateString();
+		if (sameDay) return at.toLocaleTimeString(tag(), { hour: '2-digit', minute: '2-digit' });
+
+		const yesterday = new Date(now);
+		yesterday.setDate(now.getDate() - 1);
+		if (at.toDateString() === yesterday.toDateString()) return t('notes.yesterday');
+
+		return at.toLocaleDateString(tag(), { day: '2-digit', month: '2-digit', year: 'numeric' });
+	}
+
+	function projectName(id) {
+		return app.projects.find((p) => p.id === id)?.name ?? '';
+	}
+
+	// Trukket ind på et projekt i sidebjælken. Nyttelasten er notens id; sidebjælken
+	// kender allerede formen fra opgaver.
+	let dragging = $state(null);
+
+	function onDragStart(event, note) {
+		dragging = note.id;
+		startDrag(event, NOTE, note.id);
+	}
+
 	async function create() {
 		try {
 			const note = await api.createNote({ body: '' });
@@ -219,9 +253,25 @@
 				{#each notes as note (note.id)}
 					<li>
 						<div class="rowline">
-							<button class="row" class:on={selected?.id === note.id} onclick={() => open(note)}>
+							<button
+								class="row"
+								class:on={selected?.id === note.id}
+								onclick={() => open(note)}
+								draggable="true"
+								ondragstart={(e) => onDragStart(e, note)}
+								ondragend={() => (dragging = null)}
+							>
 								<strong>{note.title || t('notes.untitled')}</strong>
-								<span class="preview">{plain(note.body)}</span>
+								<!-- Dato og begyndelse på samme linje, som Apple Noter gør det: to
+								     linjer pr. note frem for tre, og datoen er dét, man skanner
+								     efter, når man leder efter noget, man skrev i tirsdags. -->
+								<span class="under">
+									<span class="when">{when(note.updated_at)}</span>
+									<span class="preview">{plain(note.body)}</span>
+								</span>
+								{#if note.project_id}
+									<span class="filed">{projectName(note.project_id)}</span>
+								{/if}
 							</button>
 							<button
 								class="star"
@@ -337,8 +387,27 @@
 		color: var(--ink);
 	}
 
+	/* Tegnet af os, ikke af browseren.
+	   Safari giver type="search" sit eget udseende — pilleform og forstørrelsesglas
+	   — og skifter til det almindelige, så snart feltet får fokus: ikonet forsvandt
+	   og formen blev firkantet midt i et klik. Med appearance: none er der kun én
+	   udgave, og den ser ens ud hele tiden. */
 	.search {
 		width: 100%;
+		appearance: none;
+		-webkit-appearance: none;
+		padding-left: 30px;
+		border-radius: 999px;
+		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b918d' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
+		background-repeat: no-repeat;
+		background-position: 9px center;
+		background-size: 15px 15px;
+	}
+
+	/* Safaris egen ryd-knap ville sidde oven i vores egen form. */
+	.search::-webkit-search-decoration,
+	.search::-webkit-search-cancel-button {
+		-webkit-appearance: none;
 	}
 
 	ul {
@@ -378,9 +447,14 @@
 		flex: 1;
 		min-width: 0;
 		text-align: left;
-		padding: var(--s2);
+		padding: var(--s2) var(--s2) var(--s3);
 		border-radius: var(--radius);
 		color: var(--ink-muted);
+		border-bottom: 1px solid var(--line);
+	}
+
+	li:last-child .row {
+		border-bottom: 0;
 	}
 
 	.row:hover {
@@ -392,24 +466,55 @@
 		color: var(--ink);
 	}
 
+	/* Samme størrelse som en opgavetitel. En note og en opgave er to ting af samme
+	   slags — noget, der står på en liste og skal læses på et blik — og at give dem
+	   hver sin størrelse får den ene til at se mindre vigtig ud end den anden. */
 	.row strong {
 		display: block;
 		font-size: var(--text-sm);
-		font-weight: 560;
+		font-weight: 600;
+		line-height: 1.45;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
 
-	.preview {
-		display: block;
+	/* 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. */
+	.under {
+		display: flex;
+		gap: var(--s2);
+		min-width: 0;
 		font-size: var(--text-xs);
 		color: var(--ink-faint);
+	}
+
+	.when {
+		flex: none;
+		color: var(--ink-muted);
+	}
+
+	.preview {
+		min-width: 0;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
 
+	/* Hvor den ligger, med en mappe foran — Apple Noters egen måde at sige det på,
+	   og den eneste linje her, der ikke er notens eget indhold. */
+	.filed {
+		display: block;
+		margin-top: 2px;
+		font-size: var(--text-xs);
+		color: var(--ink-faint);
+	}
+
+	.filed::before {
+		content: '▸ ';
+		opacity: 0.7;
+	}
+
 	.editor {
 		display: flex;
 		flex-direction: column;