feat(sidebar): colours you can choose, and projects indented under their group

`projects.color` has been in the schema since the first migration, has
defaulted to 'graphite' on every row ever written, and nothing has ever
read it. There was no palette, no name-to-colour mapping, and the dot in
the sidebar was hardcoded to a border grey. So this is not "add a picker";
it is implementing colour for the first time.

Names, not hex values. A hex in ten thousand rows is a decision nobody can
revisit; a name is resolved when the interface paints and can be retuned
for a new theme or a new display. It is also the difference between a
database that stores a fact and one that stores a rendering. The set is
closed and refused at the edge — an unknown name would be stored happily
and painted as the default, which looks like a colour that did not save.

One palette across all five themes, and this is the one place in app.css
that is not redefined per theme. Everything else there is text, a ground or
a border and has to be measured against what sits behind it. These are
small solid marks beside a label that already carries the meaning: what
they owe is to be told apart, and to be visible on both a near-black and a
white ground, which is why all ten sit in the mid-tone band. It also keeps
them out of the trap the themes are in — a colour added to four blocks and
forgotten in the fifth looks finished and falls back silently. There is no
fifth block to forget.

The list is written down three times: Go for validation, colors.js for the
picker, app.css for the tokens that paint. So a test reads the other two —
the same small-scanner approach openapi_test.go takes to the spec — and
fails if the server accepts a colour nothing can draw, or the picker offers
one the server refuses.

Groups get a colour of their own (migration 0006) and projects inside a
group are indented. The indent is to the group's *name*, not to its dot:
the eye follows the text, and lining the projects up under the dot leaves
them looking a step short of where the heading starts. The drop line is
indented with them, so a drop inside a group reads as landing in the group.

The group's dot is the control as well as the preview — you press the thing
you are about to change, as on the project page. That was not the first
design: a third text action, "Farve", sat beside Omdøb and Slet, and those
carry `opacity: 0` rather than `display: none`, so they take their width
whether or not you can see them. A group called "Arbejde" rendered as
"ARBEJD". Moving the control onto the dot gave the name its room back.

The smoke test measures the indent at the content edge rather than the
element's, because the indent is padding and the box does not move — which
is how the first version of that assertion passed 12 against 12.

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

web/src/lib/components/Sidebar.svelte

@@ -2,6 +2,7 @@
 	import { app, sidebar } from '$lib/stores.svelte.js';
 	import { api } from '$lib/api.js';
 	import { TASK, PROJECT, GROUP, startDrag, carries, dragged, accept } from '$lib/dnd.js';
+	import { COLORS, colorVar } from '$lib/colors.js';
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
 
@@ -78,6 +79,8 @@
 	let newGroupName = $state('');
 	let renamingGroup = $state(null);
 	let groupName = $state('');
+	/** The group whose swatches are open, if any. */
+	let coloringGroup = $state(null);
 
 	async function createGroup(event) {
 		event.preventDefault();
@@ -353,7 +356,7 @@
 			}}
 			ondrop={(e) => (carries(e, TASK) ? onTaskDrop(e, project) : sortable && onDrop(e, project))}
 		>
-			<span class="dot" aria-hidden="true"></span>
+			<span class="dot" style="background: {colorVar(project.color)}" aria-hidden="true"></span>
 			{project.name}
 			{#if project.shared}
 				<span class="count">{project.member_count}</span>
@@ -480,6 +483,20 @@
 					     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 dot is the control as well as the preview: what you press is
+					     the thing you are about to change. It also keeps the heading's
+					     actions down to two — they carry `opacity: 0` rather than
+					     `display: none`, so they take their width whether or not you can
+					     see them, and a third one squeezed the group's name until it
+					     truncated. -->
+					<button
+						class="dot group-dot"
+						style="background: {colorVar(group.color)}"
+						onclick={() => (coloringGroup = coloringGroup === group.id ? null : group.id)}
+						aria-expanded={coloringGroup === group.id}
+						aria-label="Farve på {group.name}"
+						title="Farve"
+					></button>
 					<h2 class="fold">
 						<button onclick={() => app.toggleGroup(group.id)} aria-expanded={!group.collapsed}>
 							<svg
@@ -505,6 +522,25 @@
 				{/if}
 			</div>
 
+			{#if coloringGroup === group.id}
+				<div class="swatches" role="group" aria-label="Farve på {group.name}">
+					{#each COLORS as color (color.id)}
+						<button
+							class="swatch"
+							class:chosen={(group.color ?? 'graphite') === color.id}
+							style="background: {colorVar(color.id)}"
+							title={color.name}
+							aria-label={color.name}
+							aria-pressed={(group.color ?? 'graphite') === color.id}
+							onclick={() => {
+								app.setGroupColor(group.id, color.id);
+								coloringGroup = null;
+							}}
+						></button>
+					{/each}
+				</div>
+			{/if}
+
 			{#if !group.collapsed}
 				{#each inside as project (project.id)}
 					{@render projectRow(project, true)}
@@ -852,6 +888,72 @@
 		margin-left: 0;
 	}
 
+	/* The group's own mark, in front of the chevron so the colours of the headings
+	   line up with each other rather than with the projects underneath. */
+	.group-dot {
+		margin-left: var(--s2);
+		padding: 0;
+		box-shadow: 0 0 0 2px var(--surface-sunken);
+		transition: box-shadow var(--fast) var(--ease);
+	}
+
+	.group-dot:hover,
+	.group-dot:focus-visible {
+		box-shadow:
+			0 0 0 2px var(--surface-sunken),
+			0 0 0 3px var(--line-strong);
+		outline: none;
+	}
+
+	/* Projects inside a group are indented to the group's name, not to its dot:
+	   the eye follows the text, and lining up under the dot leaves the names
+	   looking a step short of where the heading starts. */
+	.folder > a {
+		padding-left: calc(var(--s2) + var(--s4));
+	}
+
+	/* The line is indented with them, so a drop between two projects in a group
+	   reads as landing in the group rather than across the whole sidebar. */
+	.folder > a.sortable::before {
+		left: calc(var(--s2) + var(--s4));
+	}
+
+	.folder > .empty {
+		padding-left: calc(var(--s2) + var(--s4));
+	}
+
+	.swatches {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--s2);
+		padding: var(--s2) var(--s2) var(--s3);
+	}
+
+	.swatch {
+		width: 16px;
+		height: 16px;
+		border-radius: var(--radius-full);
+		flex: none;
+		/* A ring in the ground colour, so the chosen one reads as selected without
+		   the swatch changing size and shuffling the row as you move along it. */
+		box-shadow: 0 0 0 2px var(--surface-sunken);
+		transition: box-shadow var(--fast) var(--ease);
+	}
+
+	.swatch:hover,
+	.swatch:focus-visible {
+		box-shadow:
+			0 0 0 2px var(--surface-sunken),
+			0 0 0 3px var(--line-strong);
+		outline: none;
+	}
+
+	.swatch.chosen {
+		box-shadow:
+			0 0 0 2px var(--surface-sunken),
+			0 0 0 3px var(--ink);
+	}
+
 	.folder-head form {
 		flex: 1;
 		min-width: 0;