Group Images and Networks by stack, like Volumes (0.55.0)

The same argument as 0.54.0: these pages already sorted a stack's resources next
to each other, and still made you read prefixes to work out where one stack
ended and the next began. Networks are the clearest win — compose names a
stack's own network <project>_default, so the column was almost entirely prefix.

Doing it a second and third time made the shape obvious, so the grouping is now
one function and one heading component shared by all three pages rather than
three copies drifting apart. A stack looks and sorts the same wherever it turns
up. volumeGroups.ts became stackGroups.ts on the way, and the Volumes page moved
onto it with no behaviour change.

Images forced the model to grow, and this is the part worth reading. An image
carries no compose label — the backend derives its owners from the containers
running it, so ownership is a *list*, and postgres:16 may belong to four stacks
at once. Listing it under each owner would show the same image four times with
four sizes, and a page that adds up to more disk than the host has. So anything
with more than one owner is listed once in a "Shared by several stacks" group,
and the Used by column names them. Each resource appears exactly once, which
keeps the per-group totals honest.

Networks needed a second new kind. bridge, host and none belong to no stack, but
they are not leftovers either, and dropping them into the unassigned group pads
the exact list people scan for junk. They get their own group below it. The
built-in check runs before ownership is even considered, so they can never be
counted as unclaimed.

Ordering is unchanged and now stated once: stacks by display name, then shared,
then unclaimed, then built-ins. The trailing three are appended, never sorted
in, so "unassigned at the bottom" holds whatever anything is called — there is a
test for the case where the only real stack sorts after them.

Group headings gained the counts each page can actually produce: volumes show
unused and total size, images total size and how many have an update waiting,
networks how many are idle.

Both row bodies moved into their own components. Nesting them a level deeper
inside the group left the indentation adrift, and the networks row had a second
<tr> for its expanded detail riding along inside an already doubled map.

Fifteen tests on the shared grouping, including the shared and built-in groups
and a stack that has been deleted since. No server change: every one of these
already knew its stack.

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

frontend/src/components/ui/StackGroupHeader.tsx

@@ -0,0 +1,84 @@
+import type { ReactNode } from "react";
+import { Link } from "react-router-dom";
+import { Boxes, Layers, Unlink } from "lucide-react";
+import { StackIcon } from "@/components/ui/StackIcon";
+import type { StackGroup } from "@/lib/stackGroups";
+
+/**
+ * The heading row above a stack's volumes, networks or images.
+ *
+ * One component for all three pages, so a stack looks the same wherever it
+ * appears — same icon, same name, same wording for the leftovers.
+ *
+ * `meta` is whatever the page can count that the others cannot: volumes know
+ * their size, images their update status. It sits at the end in the muted tone
+ * so the stack's name stays the thing you scan for.
+ */
+export function StackGroupHeader<T>({
+  group,
+  colSpan,
+  meta,
+}: {
+  group: StackGroup<T>;
+  colSpan: number;
+  meta?: ReactNode;
+}) {
+  return (
+    <tr className="bg-slate-50/80 dark:bg-slate-800/40">
+      <td colSpan={colSpan} className="px-4 py-2">
+        <div className="flex flex-wrap items-center gap-2">
+          <Label group={group} />
+          {meta && <span className="text-xs text-slate-400">{meta}</span>}
+        </div>
+      </td>
+    </tr>
+  );
+}
+
+function Label<T>({ group }: { group: StackGroup<T> }) {
+  if (group.kind === "shared") {
+    return (
+      <>
+        <Layers className="h-4 w-4 shrink-0 text-slate-400" />
+        <span className="font-semibold text-slate-500">Shared by several stacks</span>
+      </>
+    );
+  }
+  if (group.kind === "builtin") {
+    return (
+      <>
+        <Boxes className="h-4 w-4 shrink-0 text-slate-400" />
+        <span className="font-semibold text-slate-500">Docker built-ins</span>
+      </>
+    );
+  }
+  if (group.kind === "none") {
+    return (
+      <>
+        <Unlink className="h-4 w-4 shrink-0 text-slate-400" />
+        <span className="font-semibold text-slate-500">Not part of a stack</span>
+      </>
+    );
+  }
+  if (group.stack) {
+    return (
+      <>
+        <StackIcon stack={group.stack} status={group.stack.status} size="sm" />
+        <Link to={`/stacks/${group.stack.id}`} className="font-semibold hover:underline">
+          {group.stack.name}
+        </Link>
+      </>
+    );
+  }
+  // Labelled with a compose project that is no longer a stack: exactly where
+  // things left behind by a deleted stack collect.
+  return (
+    <>
+      <Unlink className="h-4 w-4 shrink-0 text-amber-500" />
+      <span className="font-semibold">{group.stackId}</span>
+      <span className="rounded-pill border border-amber-500/40 bg-amber-500/10 px-2 py-0.5 text-[11px] font-semibold text-amber-600 dark:text-amber-400">
+        stack removed
+      </span>
+    </>
+  );
+}