feat(groups): a group becomes somewhere you can go

It was a heading over some rows: a name, a colour, and whether it was folded.
Enough to tidy a list, and not enough to be what people mean by it — "Arbejde" is
a body of work with context of its own, and documents that belong to all of it
rather than to any one project inside it.

`/gruppe/{id}` carries three things a heading cannot. The projects in it, each
with what is still open — open tasks, not all of them, because "12" beside a
project somebody finished last year is a number that means nothing. A description,
written in place and saved on blur, the same shape a task's description has. And
the files that govern the whole group: the contract, the drawing, the agreement
everything else rests on.

The name in the sidebar is a link to it and the chevron beside it still folds.
Two intentions, two targets — the single one they used to share could only ever
serve the smaller.

Migration 0012 rebuilds `attachments`, because its CHECK spelled out exactly which
parent columns may be set and SQLite cannot alter a CHECK. The rule is still
"exactly one parent", counted rather than written out as pairwise comparisons:
with three columns that is three clauses, with four it is six, and the version
that is wrong looks exactly like the one that is right.

A group's file is reachable by its owner and nobody else. A group belongs to one
person and is never shared, so `reachAttachment` asks about ownership rather than
a project role — both old callers resolved straight to a task, so a group's
attachment answered 404 for the person who uploaded it.

Three tests also stopped racing their own navigation. Creating a project navigates
and `goto` is a promise nobody was holding, so a quick add fired straight after
could land in the Inbox instead — intermittent, and it read as the quick add
having failed.

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

web/src/lib/api.js

@@ -225,7 +225,9 @@ export const api = {
 
 	listProjectGroups: () => get('/project-groups'),
 	createProjectGroup: (name) => post('/project-groups', { name }),
+	getProjectGroup: (id) => get(`/project-groups/${id}`),
 	updateProjectGroup: (id, data) => patch(`/project-groups/${id}`, data),
+	uploadGroupAttachment: (id, file) => upload(`/project-groups/${id}/attachments`, file),
 	deleteProjectGroup: (id) => del(`/project-groups/${id}`),
 	reorderProjectGroups: (ids) => post('/project-groups/reorder', { ids }),
 

web/src/lib/components/Sidebar.svelte

@@ -590,27 +590,33 @@
 					     the heading away from a screen reader. The whole heading folds —
 					     at this size a lone chevron is a target you miss, and the name is
 					     where the eye already is. -->
+					<!-- The chevron folds; the name opens the group's own page. Two
+					     targets in one heading, because they are two different intentions
+					     and the old single one could only ever serve the smaller. -->
+					<button
+						class="chevron-button"
+						onclick={() => app.toggleGroup(group.id)}
+						aria-expanded={!group.collapsed}
+						aria-label={group.collapsed ? `Fold ${group.name} ud` : `Fold ${group.name} sammen`}
+					>
+						<svg
+							class="chevron"
+							class:collapsed={group.collapsed}
+							viewBox="0 0 24 24"
+							aria-hidden="true"
+						>
+							<path d="M6 9l6 6 6-6" />
+						</svg>
+					</button>
 					<h2 class="fold">
-						<button onclick={() => app.toggleGroup(group.id)} aria-expanded={!group.collapsed}>
-							<svg
-								class="chevron"
-								class:collapsed={group.collapsed}
-								viewBox="0 0 24 24"
-								aria-hidden="true"
-							>
-								<path d="M6 9l6 6 6-6" />
-							</svg>
-							<!-- Inside the button rather than before it, so the heading starts
-							     on the same edge as everything else in the sidebar. As a
-							     sibling it pushed the whole row in, and a group heading that
-							     is indented says the heading is inside something. -->
+						<a href="/gruppe/{group.id}" onclick={onnavigate}>
 							<span
 								class="dot group-dot"
 								style="background: {colorVar(group.color)}"
 								aria-hidden="true"
 							></span>
 							{group.name}
-						</button>
+						</a>
 					</h2>
 					<span class="count">{inside.length}</span>
 					<button
@@ -921,6 +927,25 @@
 		min-width: 0;
 	}
 
+	/* The chevron on its own, so the name beside it can be a link to the group's
+	   page. Sized as a target rather than as a glyph: 11px of arrow is something
+	   you miss. */
+	.chevron-button {
+		flex: none;
+		width: 18px;
+		height: 18px;
+		display: grid;
+		place-items: center;
+		border-radius: var(--radius-sm);
+		color: inherit;
+	}
+
+	.chevron-button:hover {
+		color: var(--ink);
+		background: var(--surface);
+	}
+
+	.fold a,
 	.fold button {
 		display: flex;
 		align-items: center;
@@ -936,10 +961,15 @@
 		white-space: nowrap;
 	}
 
+	.fold a:hover,
 	.fold button:hover {
 		color: var(--ink);
 	}
 
+	.fold a {
+		text-decoration: none;
+	}
+
 	.chevron {
 		width: 11px;
 		height: 11px;