swarm-ui: test the rain arithmetic and the swarm name loader

The rain's column maths and fade colour move from MatrixRain into
shell/rain.ts, and the request-once swarm name loader from useSwarmName
into shell/swarm-name.ts. Both are plain functions with their input
passed in, so tests cover them; the components keep the DOM and canvas
work.

frontend/packages/swarm-ui/src/shell/useSwarmName.ts

@@ -1,31 +1,16 @@
-// useSwarmName — the swarm's configured display name from `GET /api/swarm`,
-// or `null` until it arrives, when none is configured, or when the fetch
-// fails. The label is cosmetic, so a failure is swallowed rather than shown:
-// callers fall back to their own default, as an operator who never set a
-// name sees. One request per page load, shared by every caller, because the
-// header and the start page both ask for it and the name does not change
-// within a visit.
+// useSwarmName — the swarm's configured display name, or `null` until it
+// arrives, when none is configured, or when the request fails. One request per
+// page load, shared by every caller; see `swarm-name.ts`.
 import { useEffect, useState } from "preact/hooks";
+import { createSwarmNameLoader } from "./swarm-name.js";
 
-let pending: Promise<string | null> | null = null;
-
-function fetchSwarmName(): Promise<string | null> {
-  if (pending === null) {
-    pending = (async () => {
-      const r = await fetch("/api/swarm");
-      if (!r.ok) return null;
-      const data = (await r.json()) as { name: string | null };
-      return data.name || null;
-    })().catch(() => null);
-  }
-  return pending;
-}
+const loadSwarmName = createSwarmNameLoader((url) => fetch(url));
 
 export function useSwarmName(): string | null {
   const [name, setName] = useState<string | null>(null);
   useEffect(() => {
     let cancelled = false;
-    void fetchSwarmName().then((n) => {
+    void loadSwarmName().then((n) => {
       if (!cancelled && n !== null) setName(n);
     });
     return () => {