Rebuild front end in TypeScript with a pager, crossfades and reactive visuals

The front end moves to web/ (Vite, TypeScript, no framework) and is built
into web/dist, which the server embeds. hls.js is bundled from npm and
loaded on demand instead of vendored.

The feed is a custom pager instead of CSS scroll snapping: drag and flick
with a spring that keeps the finger's speed, a rubber band at the ends,
one page per wheel or trackpad gesture, and only three cards in the DOM.

Playback uses two decks. The next track is buffered shortly after the
current one starts and tracks crossfade through a Web Audio graph; on iOS,
where that would break lock-screen playback, they switch with a cut. An
analyser drives a bass pulse of the artwork and its glow, and each card
takes its accent colour from the artist image. Styles start from design
tokens and respect reduced motion.

Docker gets a Node build stage; legal pages use their own small stylesheet.

backend/build.rs

@@ -0,0 +1,11 @@
+// The front end is built separately (`cd web && npm ci && npm run build`) and
+// embedded from web/dist. Create the folder if it is missing so the backend still
+// compiles (and its tests run) without Node; the pages are then empty.
+fn main() {
+    let dist = std::path::Path::new("../web/dist");
+    println!("cargo:rerun-if-changed=../web/dist");
+    if !dist.join("index.html").exists() {
+        std::fs::create_dir_all(dist).expect("create ../web/dist");
+        println!("cargo:warning=web/dist has no index.html; run `npm run build` in web/ to include the front end");
+    }
+}

backend/src/http/mod.rs

@@ -259,8 +259,10 @@ pub type Peer = ConnectInfo<SocketAddr>;
 
 // Static files ------------------------------------------------------------
 
+/// The built front end (`web/`, `npm run build`). Hashed asset names, so they
+/// can be cached for good; index.html and fixed-name files are revalidated.
 #[derive(Embed)]
-#[folder = "../static/"]
+#[folder = "../web/dist/"]
 struct Static;
 
 fn content_type(path: &str) -> &'static str {
@@ -277,8 +279,9 @@ fn content_type(path: &str) -> &'static str {
 }
 
 fn static_file(path: &str) -> Response {
+    let cache = if path.starts_with("assets/") { "public, max-age=31536000, immutable" } else { "no-cache" };
     match Static::get(path) {
-        Some(f) => ([(header::CONTENT_TYPE, content_type(path)), (header::CACHE_CONTROL, "no-cache")], f.data).into_response(),
+        Some(f) => ([(header::CONTENT_TYPE, content_type(path)), (header::CACHE_CONTROL, cache)], f.data).into_response(),
         None => StatusCode::NOT_FOUND.into_response(),
     }
 }

backend/templates/datenschutz.html

@@ -6,7 +6,7 @@
   <meta name="robots" content="noindex">
   <title>Datenschutzerklärung · pl8list ∞</title>
   <link rel="icon" href="/static/icons/icon.svg" type="image/svg+xml">
-  <link rel="stylesheet" href="/static/style.css">
+  <link rel="stylesheet" href="/static/legal.css">
 </head>
 <body class="legal">
   <main>

backend/templates/impressum.html

@@ -6,7 +6,7 @@
   <meta name="robots" content="noindex">
   <title>Impressum · pl8list ∞</title>
   <link rel="icon" href="/static/icons/icon.svg" type="image/svg+xml">
-  <link rel="stylesheet" href="/static/style.css">
+  <link rel="stylesheet" href="/static/legal.css">
 </head>
 <body class="legal">
   <main>