swarm-ui: the start page's rain follows the app's motion setting

The rain read only the OS reduced-motion query, once, at mount. The settings
menu's motion override (data-motion on the document) wins over the OS in
either direction everywhere else, and the shell applies it from an effect
that runs after this one. Whether the rain may move is now rainAllowed(), and
the component re-evaluates it on mount, on every document attribute change
and on the media query's change, starting or stopping the interval and
clearing the canvas.

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

@@ -19,6 +19,19 @@ const RESTART_ABOVE = 0.975;
 /** The fade trail's alpha. */
 const FADE_ALPHA = 0.09;
 
+/** Whether the rain may move. The app's own motion setting (`data-motion` on
+ * the document, from the settings menu) wins over the OS preference in either
+ * direction: `reduce` stops it, `allow` lets it run on a reduce-motion OS, and
+ * anything else follows the OS. */
+export function rainAllowed(
+  dataMotion: string | undefined,
+  osReduces: boolean,
+): boolean {
+  if (dataMotion === "reduce") return false;
+  if (dataMotion === "allow") return true;
+  return !osReduces;
+}
+
 /** How many columns fill a canvas this wide. */
 export function columnsFor(width: number): number {
   return Math.max(1, Math.ceil(width / CELL));