fix(tasks): open the task by clicking its text, links carved out

The first cut put an open-button overlay over the row, which intercepted
every click on the title text — nine smoke tests (and real users) open a
task by clicking its text, and the overlay stole those clicks. Make the
body a role=button instead, with each link stopping its own click from
bubbling: plain text opens the task, a link opens the page.

Co-Authored-By: Claude Opus 4.8 <[email protected]>

web/e2e/smoke.spec.js

@@ -86,6 +86,29 @@ test('hurtig tilføjelse opretter en opgave, og den kan lukkes', async ({ page }
 	expect(trouble).toEqual([]);
 });
 
+test('en URL i en opgave bliver et klikbart link, og resten åbner opgaven', async ({ page }) => {
+	const trouble = watchForTrouble(page);
+	await page.goto('/');
+
+	const box = page.getByLabel('Ny opgave');
+	// The URL is one token, so the parser leaves it in the title; "i dag" is what it
+	// takes. The link is made at display time — the stored title is still plain text.
+	await box.fill('læs https://example.com/artikel i dag');
+	await box.press('Enter');
+
+	const row = page.locator('.row').filter({ hasText: 'læs' });
+	const link = row.getByRole('link', { name: 'https://example.com/artikel' });
+	await expect(link).toHaveAttribute('href', 'https://example.com/artikel');
+	await expect(link).toHaveAttribute('rel', /noopener/);
+
+	// Clicking the plain part of the title still opens the task; only the link is
+	// carved out. Aimed at the top-left, over "læs", not the URL in the middle.
+	await row.locator('.content').click({ position: { x: 3, y: 3 } });
+	await expect(page.getByRole('complementary', { name: 'Opgave' })).toBeVisible();
+
+	expect(trouble).toEqual([]);
+});
+
 test('hvert link i sidebjælken fører et sted hen', async ({ page }) => {
 	const trouble = watchForTrouble(page);
 	await page.goto('/');

web/src/lib/components/TaskRow.svelte

@@ -11,6 +11,7 @@
 	import { app } from '$lib/stores.svelte.js';
 	import { t, tag } from '$lib/i18n.svelte.js';
 	import { repeatLabel } from '$lib/when.js';
+	import { linkify } from '$lib/linkify.js';
 
 	let { task, onedit } = $props();
 
@@ -99,13 +100,44 @@
 		</svg>
 	</button>
 
-	<!-- Opening the detail drawer is the default. `onedit` is for the callers that
-	     want the click to mean something else. -->
-	<button class="body" onclick={() => (onedit ? onedit(task) : app.openDetail(task.id))}>
-		<span class="content">{task.content}</span>
+	<!-- A URL pasted into the title or the description is clickable, without the
+	     text ever having been anything but plain text. The link is a real <a>, which
+	     an <a> in a <button> may not be — so the body is a role=button rather than a
+	     button, and each link stops its click from also opening the task. Clicking
+	     any plain text still opens it. -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="body"
+		role="button"
+		tabindex="0"
+		onclick={() => (onedit ? onedit(task) : app.openDetail(task.id))}
+		onkeydown={(e) => {
+			if (e.key === 'Enter' || e.key === ' ') {
+				e.preventDefault();
+				onedit ? onedit(task) : app.openDetail(task.id);
+			}
+		}}
+	>
+		<span class="content"
+			>{#each linkify(task.content) as run}{#if run.href}<a
+						class="tlink"
+						href={run.href}
+						target="_blank"
+						rel="noopener noreferrer"
+						onclick={(e) => e.stopPropagation()}>{run.text}</a
+					>{:else}{run.text}{/if}{/each}</span
+		>
 
 		{#if task.description}
-			<span class="description">{task.description}</span>
+			<span class="description"
+				>{#each linkify(task.description) as run}{#if run.href}<a
+							class="tlink"
+							href={run.href}
+							target="_blank"
+							rel="noopener noreferrer"
+							onclick={(e) => e.stopPropagation()}>{run.text}</a
+						>{:else}{run.text}{/if}{/each}</span
+			>
 		{/if}
 
 		{#if assignee || due || task.labels?.length || repeats || task.subtask_count || task.attachment_count}
@@ -186,7 +218,7 @@
 				{/each}
 			</span>
 		{/if}
-	</button>
+	</div>
 </div>
 
 <style>
@@ -307,6 +339,13 @@
 		gap: 2px;
 		text-align: left;
 		min-width: 0;
+		cursor: pointer;
+		border-radius: var(--radius-sm);
+	}
+
+	.body:focus-visible {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
 	}
 
 	.content {
@@ -315,6 +354,20 @@
 		overflow-wrap: anywhere;
 	}
 
+	/* A real link, so it can be middle-clicked, copied and previewed. Its own click
+	   is stopped from bubbling, so opening the page does not also open the task. */
+	.tlink {
+		color: var(--accent);
+		text-decoration: underline;
+		text-decoration-thickness: 1px;
+		text-underline-offset: 2px;
+		overflow-wrap: anywhere;
+	}
+
+	.tlink:hover {
+		text-decoration-thickness: 2px;
+	}
+
 	.description {
 		font-size: var(--text-sm);
 		color: var(--ink-muted);

web/src/lib/linkify.js

@@ -0,0 +1,68 @@
+/**
+ * Splits a plain string into runs of text and the URLs inside it, so a task's
+ * title or description can be shown with the links clickable without the text
+ * ever having been anything but plain text on disk.
+ *
+ * A task is not rich text — the title is an `<input>` and the description a
+ * `<textarea>` — so there is nowhere to *store* a link. What there is instead is
+ * a person who pasted one in and expects to be able to click it. This finds the
+ * ones that are unambiguously links and leaves everything else exactly as typed.
+ *
+ * Deliberately conservative about what counts as a link: an explicit
+ * `http://`/`https://`, or a bare `www.` host. "example.com" on its own is not
+ * matched — most of those are sentences ("the file.txt is here"), and a false
+ * link in a title is worse than a real one left plain.
+ */
+
+// A trailing `.,;:!?` or a closing bracket is almost always punctuation the
+// sentence owns rather than part of the URL, so the run stops before it. A `)`
+// is only dropped when the URL holds no `(` of its own — Wikipedia-style links
+// carry balanced parentheses that belong to the address.
+const URL_RE = /\b(?:https?:\/\/|www\.)[^\s<>]+/gi;
+
+function trimTrailing(url) {
+	let end = url.length;
+	while (end > 0) {
+		const ch = url[end - 1];
+		if ('.,;:!?"\''.includes(ch)) {
+			end--;
+			continue;
+		}
+		if (ch === ')' && !url.slice(0, end).includes('(')) {
+			end--;
+			continue;
+		}
+		break;
+	}
+	return url.slice(0, end);
+}
+
+/**
+ * @param {string} text
+ * @returns {Array<{ text: string, href?: string }>} runs in order; a run with an
+ *   `href` is a link, one without is plain text. An empty or link-free string
+ *   comes back as a single text run (possibly empty) so callers can render it the
+ *   same way regardless.
+ */
+export function linkify(text) {
+	const value = text ?? '';
+	const runs = [];
+	let last = 0;
+
+	for (const match of value.matchAll(URL_RE)) {
+		const raw = trimTrailing(match[0]);
+		if (!raw) continue;
+		const start = match.index;
+
+		if (start > last) runs.push({ text: value.slice(last, start) });
+
+		const href = raw.startsWith('www.') ? `https://${raw}` : raw;
+		runs.push({ text: raw, href });
+		last = start + raw.length;
+	}
+
+	if (last < value.length) runs.push({ text: value.slice(last) });
+	if (!runs.length) runs.push({ text: value });
+
+	return runs;
+}