T45a Site · Stack: reloads open in the current mode, the first paint keeps the system's, plain route changes

frontend/src/Live.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Icon } from "./icons";
 import { mode, useMode } from "./theme";
 
@@ -14,7 +14,8 @@ export function Live({ page, story, title }: { page: string; story: string; titl
   const [state, setState] = useState<State>("starting");
   const [full, setFull] = useState(false);
   const [run, setRun] = useState(0);
-  const [start] = useState(mode);
+  // Each new frame opens in the mode the site has then.
+  const start = useMemo(() => mode(), [run]);
   const src = (t: string) => `/gallery/?page=${page}&story=${story}&theme=${t}`;
 
   useEffect(() => {

frontend/src/data.ts

@@ -16,8 +16,6 @@ export interface Chapter {
 
 export const chapters: Chapter[] = manifest.pages;
 
-export const storyCount = chapters.reduce((sum, chapter) => sum + chapter.stories.length, 0);
-
 export const componentCount = new Set(chapters.flatMap((c) => c.stories.flatMap((s) => s.components))).size;
 
 /** Every story in reading order, for paging and search. */

frontend/src/icons.tsx

@@ -1,16 +1,11 @@
-import ArrowLeft from "reicon/icons/ArrowLeft";
-import ArrowRight from "reicon/icons/ArrowRight";
 import ArrowRightUp from "reicon/icons/ArrowRightUp";
 import Maximize from "reicon/icons/Maximize";
 import Minimize from "reicon/icons/Minimize";
 import Moon from "reicon/icons/Moon";
 import Refresh from "reicon/icons/Refresh";
-import Search from "reicon/icons/Search";
-import Sound from "reicon/icons/Sound";
 import Sun from "reicon/icons/Sun";
-import VolumeCross from "reicon/icons/VolumeCross";
 
-const set = { ArrowLeft, ArrowRight, ArrowRightUp, Maximize, Minimize, Moon, Refresh, Search, Sound, Sun, VolumeCross };
+const set = { ArrowRightUp, Maximize, Minimize, Moon, Refresh, Sun };
 
 // simple-icons' GitHub mark (CC0); Reicon has none.
 const GITHUB =

frontend/src/main.tsx

@@ -29,7 +29,6 @@ const router = createRouter({
   routeTree: root.addChildren([home, index, chapter, story]),
   trailingSlash: "always",
   scrollRestoration: true,
-  defaultViewTransition: true,
 });
 
 declare module "@tanstack/react-router" {

frontend/src/styles.css

@@ -115,5 +115,4 @@ img.shot { display: block; max-width: 100%; height: auto; }
 
 @media (prefers-reduced-motion: reduce) {
   * { transition: none !important; animation: none !important; }
-  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
 }