Release 0.7.0

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

.gitignore

@@ -2,3 +2,4 @@
 /node_modules
 /test-results
 /playwright-report
+/web/dist

CHANGELOG.md

@@ -10,6 +10,120 @@ The long form, with what was wrong before and how it was found, is in
 
 ## [Unreleased]
 
+## [0.7.0] - 2026-09-18
+
+### Added
+
+- Six more themes in Settings: Dracula, Material, Adwaita, Flat Remix, Paper and Nordic, beside
+  Classic and Modern (the existing dark and light). Each that comes both ways has its own Light,
+  Dark or Auto setting; Classic and Paper come one way only, so that setting is hidden for them.
+  A theme chosen before this carries over.
+- Your theme is kept on your account rather than in the browser, so it follows you to another
+  browser or computer, and the page arrives in it with no flash of the default. The theme a
+  browser already had is saved to your account the first time you load the page.
+- Pin a feed to the top of the feed list with the pin on its page, a feed from inside an OPML or
+  Patreon folder included, which comes out of the folder while pinned. Pins are yours alone.
+- Touch gestures: pull the item list down from its top to check the feed for new items, and
+  swipe the item you are reading left for the next one and right for the one before, or back
+  to the list from the first.
+
+### Changed
+
+- The server's settings, the accounts and the log are on their own admin page, /admin, reached by
+  the wrench in the header. Only an admin is sent the page, its script, or the link to it.
+  Settings is now yours alone: your theme and your subscriptions.
+- A feed that fails to check gets a red exclamation mark in the feed list, in the margin where a
+  folder's triangle sits, and its page says why, in place of a pop-up per failure that everyone
+  saw during a scan of every feed. A folder holding a failing feed has its triangle turn red.
+- The theme is chosen in Settings only; the button beside the iPodderX name is gone.
+- Add a feed asks only for the feed; Popular and Directory in the sidebar are where you browse.
+- On a phone, an item's files, with play and delete, sit above its show notes rather than below
+  them, where long notes left them looking missing.
+- On a phone, an item with no files goes straight to its text, without a box saying "No files".
+- The page is served minified, about a quarter smaller. Its script is now TypeScript in
+  `web/src`, type-checked, and built with swc; building ipx needs node.
+- The script is its own file, `/app.js`, rather than inside the page. Your browser keeps it
+  between visits and fetches it again only when an update changes it.
+
+### Fixed
+
+- Switching tabs straight after marking everything read no longer shows the previous tab's
+  items: of two lists asked for at once, only the later one is shown.
+- ipx has a favicon: the logo, squared up, also at /favicon.ico for browsers that ask there on
+  their own, and on white for an iPhone's home screen.
+- The file icon of an item not yet downloaded sits level with the rest of its row, instead of
+  higher than a downloaded one's.
+- Images in posts from sites that refuse images to other sites' pages, such as Jeff Geerling's,
+  now show: ipx asks for them without saying it is the page showing them.
+- While an episode plays, its play buttons in the files pane, its row and the toolbar show
+  pause, as the player bar's does, and pause it when pressed.
+- An item you open stays read. A list refresh that crossed with marking it read could put its
+  unread dot back until the next refresh.
+- On the Unread tab, the item you were reading leaves the list as soon as you move to the next
+  one, rather than a few read items lingering until a refresh cleared them.
+- The Log button no longer shows for a moment on every load for anyone but an admin; the server
+  leaves it out of their page.
+- An image or link in a post given relative to the post, such as The Observation Deck's, now
+  points at the post's site rather than at ipx, and shows.
+
+## [0.6.1] - 2026-09-15
+
+### Fixed
+
+- Time left, and when an episode counts as finished, go by the length your player measured
+  rather than the feed's, which can be minutes out: one episode said 0:08 left with 2:33 to play.
+- A player left open in another tab or on another device no longer saves its older place over
+  where you have got to since, which could drop an episode out of Currently Listening.
+
+## [0.6.0] - 2026-09-15
+
+### Added
+
+- Each episode in Currently Listening has a cross that takes it off the list. It forgets where you
+  got to, so playing it again starts from the beginning.
+- An admin can give a feed a Directory category in its settings (`category` in config.toml), for
+  the blogs and other feeds that name none of their own. A feed's own iTunes category still wins.
+- Keyboard shortcuts after Feedly's: j and k through items, Shift-J and Shift-K through feeds,
+  g and a letter to go to a place, o to play, s to pin, and more. Press ? for the whole list.
+- Directory can be filtered to Podcasts or Blogs, and by each show's own iTunes category as a row
+  of chips, the narrower one where a show gives two (Games, not Leisure). The two combine, and
+  both filter in place.
+
+### Changed
+
+- Currently Listening marks the episode in the player with the EQ bars, as the item list does,
+  and its progress and time left move as it plays. Each row says how much is left.
+- Directory shows each feed as its cover art in a grid, title and subscriber count underneath,
+  instead of a list. Popular and the Add a feed dialog keep their rows.
+- The pages are set in Inter, served by ipx itself. Classic keeps Lucida Grande.
+- Keeping an item is now pinning it: a thumbtack in place of the flag, and Pin, Pinned and Unpin
+  in place of Keep, Kept and Stop keeping. A pinned item is still never deleted.
+- Currently Listening is its own place in the feed list, below Popular, instead of a section at
+  the bottom of the Popular page.
+- The first scan after upgrading fetches every feed in full once, on its usual schedule, so each
+  picks up its category without waiting for the publisher to change something.
+
+### Fixed
+
+- An episode that fails to load, or is paused before it has, no longer forgets where you left off
+  in it, and so no longer drops out of Currently Listening.
+- Currently Listening lists the episodes you have started. It left out anything marked read, and
+  opening an episode marks it read, so it usually showed nothing. An episode now leaves the list
+  once 90% of it has played.
+- A WordPress post that embeds the file it encloses no longer lists, and downloads, that file
+  twice. Items that already had it twice are folded into one at startup, and the spare copy
+  deleted.
+- The pinned column's heading lines up with the pins under it, and every heading sits a pixel
+  further right, over its column.
+- The feeds left behind by an OPML subscription removed before ipx retired them are cleared at
+  startup: forgotten if nothing was downloaded, kept as orphaned if something was. Feeds from it
+  that have since been given their own settings stay as they are, with their items. Removing an
+  OPML or Patreon subscription no longer deletes the items of a feed inside it that has its own
+  settings.
+- Titles that arrive as HTML, such as The Verge's, no longer show their entities as text:
+  "Meta’s" reads "Meta’s". Titles already stored are corrected the next time their feed
+  changes.
+
 ## [0.5.5] - 2026-09-14
 
 ### Changed
@@ -372,7 +486,10 @@ The long form, with what was wrong before and how it was found, is in
 - Torrent enclosures through librqbit, seeding to a ratio or a time, with a stall timeout.
 - `ipx import` and `ipx export` for OPML, and systemd units in `contrib/`.
 
-[unreleased]: https://git.sdf1.net/rays/ipodderx-rs/compare/v0.5.5...main
+[unreleased]: https://git.sdf1.net/rays/ipodderx-rs/compare/v0.6.1...main
+[0.7.0]: https://git.sdf1.net/rays/ipodderx-rs/compare/v0.6.1...v0.7.0
+[0.6.1]: https://git.sdf1.net/rays/ipodderx-rs/compare/v0.6.0...v0.6.1
+[0.6.0]: https://git.sdf1.net/rays/ipodderx-rs/compare/v0.5.5...v0.6.0
 [0.5.5]: https://git.sdf1.net/rays/ipodderx-rs/compare/v0.5.4...v0.5.5
 [0.5.4]: https://git.sdf1.net/rays/ipodderx-rs/compare/v0.5.3...v0.5.4
 [0.5.3]: https://git.sdf1.net/rays/ipodderx-rs/compare/v0.5.2...v0.5.3

CLAUDE.md

@@ -61,18 +61,34 @@ the shell running the command and kills the session (exit 144). This has happene
 
 ## Before you touch the page
 
-`web/index.html` is `include_str!`d into the binary, so **every page change needs a rebuild** before
+There are three pages: the app (`web/index.html`), the admin page (`web/admin.html`, sent to
-it is visible. It is one file: markup, CSS and script.
+admins only) and sign-in (`web/login.html`). The app and admin pages share one stylesheet,
+`web/app.css`, and their script is TypeScript in `web/src/`; `web/build.mjs` lists which files
+make up each page's script. `build.rs` runs
+`web/build.mjs`, which uses swc to strip the types and minify the script into `app.js` (and
+`login.js`), and minifies the page, and the results are `include_str!`d into the binary. The page
+loads its script as `/app.js?v=<hash of its contents>`, and `/app.css` the same way: the page is
+served `no-cache` and the script and stylesheet `immutable`, so a browser keeps them until a
+deploy changes them and their names. So **every page change needs a
+rebuild** before it is visible, and building needs node and `npm ci` run once.
+
+The files in `web/src` are not modules. They are one script split up, concatenated in the order
+`web/build.mjs` lists them, sharing one top-level scope as the single inline script did; a new
+file goes into that list. Top-level names are kept as they are, because markup calls some by
+name (`onclick="closeModal()"`) and the browser tests reach others through `page.evaluate`.
 
 After any edit to it:
 
 ```sh
+npx tsc -p .
 node tests/page-smoke.js
 ```
 
-That loads the script against a stub DOM and checks every selector it wires at load actually
+The first type-checks `web/src` (loosely: `strict` is off, and `$` returns `any`). The second
-exists. It exists because a patch once anchored on a deleted function, `String.replace` silently
+builds the page as shipped and runs its script against a stub DOM, checking every selector it
-matched nothing, and the whole UI died with a `ReferenceError` while every server-side test passed.
+wires at load actually exists. That check exists because a patch once anchored on a deleted
+function, `String.replace` silently matched nothing, and the whole UI died with a
+`ReferenceError` while every server-side test passed.
 
 Patching that file by guessing an anchor string has failed repeatedly. Read the exact block first
 (`sed -n 'START,ENDp'`), match it verbatim, and assert the replacement happened rather than hoping.
@@ -80,9 +96,10 @@ Patching that file by guessing an anchor string has failed repeatedly. Read the
 ## Tests
 
 ```sh
-cargo test                # ~51 tests: parsing, filters, retention, schedules, SQL, per-user state
+cargo test                # ~80 tests: parsing, filters, retention, schedules, SQL, per-user state
+npx tsc -p .              # type-checks web/src
 node tests/page-smoke.js
-npx playwright test       # 16 browser tests against a real daemon on fixture feeds
+npx playwright test       # 40 browser tests against a real daemon on fixture feeds
 ```
 
 Things about the browser suite that have cost time:

Cargo.lock

@@ -1605,7 +1605,7 @@ checksum = "791930b43c0d5973160d90a8f3894509f2b273430f5c5c73b668636d0287c5c0"
 
 [[package]]
 name = "ipx"
-version = "0.5.5"
+version = "0.7.0"
 dependencies = [
  "ammonia",
  "anyhow",

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "ipx"
-version = "0.5.5"
+version = "0.7.0"
 edition = "2024"
 
 [dependencies]
@@ -15,7 +15,7 @@ futures-util = { version = "0.3.34", default-features = false, features = ["std"
 librqbit = { version = "9.0.1", default-features = false, features = ["rust-tls", "http-api-client"] }
 opml = "1.1.6"
 percent-encoding = "2.3.2"
-quick-xml = "0.42.0"
+quick-xml = { version = "0.42.0", features = ["escape-html"] }
 reqwest = { version = "0.13.5", default-features = false, features = ["rustls", "http2", "gzip", "stream", "json", "charset", "system-proxy"] }
 rss = "2.1.1"
 rusqlite = { version = "0.40.2", features = ["bundled"] }

Dockerfile

@@ -1,17 +1,23 @@
 # Build. rusqlite is bundled (compiles SQLite from source) and librqbit needs a C
 # toolchain, so the builder needs cc. TLS is rustls throughout, so no OpenSSL headers.
+# build.rs builds the web pages from TypeScript with swc, which needs node.
 FROM rust:1-slim-bookworm AS build
 RUN apt-get update && apt-get install -y --no-install-recommends \
-        build-essential \
+        build-essential nodejs npm \
     && rm -rf /var/lib/apt/lists/*
 WORKDIR /src
 
+# swc only: Playwright and TypeScript are for testing and type-checking, not for building.
+COPY package.json package-lock.json ./
+RUN npm ci --omit=dev
+
 # Dependencies first, so editing the source does not rebuild librqbit every time.
 COPY Cargo.toml Cargo.lock ./
 RUN mkdir src && echo 'fn main(){}' > src/main.rs \
     && cargo build --release --locked \
     && rm -rf src
 
+COPY build.rs ./
 COPY src ./src
 COPY web ./web
 # cargo skips a rebuild if mtimes look untouched; make sure it does not.

README.md

@@ -12,7 +12,7 @@ behind iPodderX (2004-2008, Ray Slakinski & August Trometer).
 - **The web UI.** It has a toolbar, and a feed list that opens with Directory, Popular and All
   Subscriptions. Items sit in a sortable table with a Files pane, and there is a player bar. It
   comes in Dark, Light and Classic themes, and works on a phone.
-- **Several people, one copy.** Each person has their own subscriptions and their own read, kept
+- **Several people, one copy.** Each person has their own subscriptions and their own read, pinned
   and playback state. There is one file on disk per episode, however many people want it. People
   sign in with a password or through a proxy (Cloudflare Zero Trust or Authentik), and admins
   manage accounts and settings.
@@ -21,7 +21,7 @@ behind iPodderX (2004-2008, Ray Slakinski & August Trometer).
   on new downloads per scan.
 - **Downloads.** Files come over HTTP or BitTorrent and are filed into a folder per feed.
   Retention deletes the oldest files to stay under a disk quota or an age limit, and never touches
-  an item someone has kept.
+  an item someone has pinned.
 - **OPML.** You can import and export your own subscriptions. You can also subscribe to an OPML
   URL, which keeps a whole list in step as a folder.
 

build.rs

@@ -0,0 +1,14 @@
+//! Builds web/index.html and web/login.html from their TypeScript (web/build.mjs) into OUT_DIR,
+//! where src/web.rs include_str!s them. Needs node and `npm ci` run first.
+use std::process::Command;
+
+fn main() {
+    println!("cargo:rerun-if-changed=web");
+    println!("cargo:rerun-if-changed=package-lock.json");
+    let out = std::env::var("OUT_DIR").unwrap();
+    let status = Command::new("node")
+        .args(["web/build.mjs", &out])
+        .status()
+        .expect("building the web pages needs node on PATH (and `npm ci` run once)");
+    assert!(status.success(), "web/build.mjs failed; run `node web/build.mjs` to see why");
+}

docs/architecture.md

@@ -19,9 +19,15 @@ it to a running daemon.
 | `src/auth.rs` | Argon2id hashing, session tokens, header names | — |
 | `src/web.rs` | axum: HTTP API, auth, SSE, media streaming | — |
 | `src/logbuf.rs` | Ring buffer behind the UI's Log view | — |
-| `web/index.html` | The whole front end, `include_str!`d into the binary | — |
+| `web/index.html` | The app's markup | — |
+| `web/admin.html` | The admin page's markup: server settings, accounts, the log. Sent to admins only | — |
+| `web/app.css` | The stylesheet both pages share | — |
+| `web/src/*.ts` | The page's script, one scope split across files, type-checked by `npx tsc` | — |
+| `web/build.mjs` | swc: strips the types into `app.js`/`login.js`, named in the page by a hash of their contents, and minifies | — |
+| `build.rs` | Runs `web/build.mjs` into `OUT_DIR`, where `web.rs` `include_str!`s the result | — |
 
-The page is compiled in, so **editing `web/index.html` needs a rebuild**.
+The page is compiled in, so **editing `web/index.html` or `web/src` needs a rebuild**, and a
+build needs node and `npm ci` run once.
 
 ## A scan
 
@@ -119,7 +125,7 @@ else a `401`.
 | `POST /api/enclosures/{id}/download`, `DELETE /api/enclosures/{id}` | `?force=true` overrides the shared-file warning |
 | `POST /api/fetch` | |
 | `GET /api/opml`, `POST /api/opml` | export your subscriptions; subscribe to every feed in an OPML |
-| `GET /api/popular`, `GET /api/directory`, `POST /api/popular/{id}` | the ten most subscribed feeds, and every listable feed A to Z, with an OPML's feeds in place of the OPML and everyone counted (id, title, art, count, whether it is yours; never a URL, never a private feed); subscribe by id |
+| `GET /api/popular`, `GET /api/directory`, `POST /api/popular/{id}` | the ten most subscribed feeds, and every listable feed A to Z, with an OPML's feeds in place of the OPML and everyone counted (id, title, art, count, whether it is yours, the feed's iTunes category, whether it carries audio or video; never a URL, never a private feed); subscribe by id |
 | `GET /api/settings`, `PATCH /api/settings` | admin-only to write |
 | `GET /api/users`, `POST /api/users`, `PATCH /api/users/{id}`, `DELETE /api/users/{id}` | admin-only; the only admin cannot be demoted or removed |
 | `GET /api/events` | SSE, the same broadcast the socket carries |

docs/configuration.md

@@ -97,6 +97,7 @@ url                = "https://atp.fm/rss"
 folder             = "Accidental Tech Podcast"   # default: the feed title
 schedule           = "every 6h"                  # overrides [general] for this feed
 media_types        = ["audio"]                   # overrides [general] for this feed
+category           = "Technology"                # the Directory's, if the feed names none
 username           = "ray"                       # HTTP basic auth
 password_env       = "IPX_ATP_PASS"              # preferred over a literal `password`
 ```

docs/history.md

@@ -6,6 +6,68 @@ reasoning lives. New write-ups go at the top.
 
 See [README.md](../README.md) for what the thing is.
 
+## 2026-09-15 — Kristen Bell again: a length minutes out, and an idle player
+
+After 0.6.0 the Kristen Bell episode dropped out of Currently Listening again, with eleven
+minutes left in the player. Its saved position was 41:15 of a file 43:48 long, 94% and finished
+by any measure, while the listener was at about 32:48. The first guess was a wrong length from
+the feed, and it was wrong: the feed does say 41:23, but no length makes 41:15 unfinished.
+
+The log had the answer. Saves every ten seconds while it played, then two that were not
+playback: one beside the only request for the file since the restart, and the last in the same
+millisecond as a page load. The likeliest reading was a player left paused further on, in
+another tab or on another device, saving its place as its page reloaded, since every save goes
+through `savePos` and it saved whatever the player held whether or not anyone had played it
+since. That was never confirmed. Fifteen minutes later the listener was playing on from 41:15
+and heard 2:33 left, which fits that position having been theirs all along.
+
+`savePos` now saves only once the player has played since its last save, so an idle one never
+writes, and only playing counts: the seek to where you left off happens paused, and counting it
+would save back whatever the list said, however old. A jump back is also saved at once, where
+the ten-second check only ever looked forward. The fixture audio does not decode, so the browser
+test stands in for a loaded player and counts what `savePos` sends.
+
+What was certainly wrong was the length. At 41:15 the item list said 0:08 left and the player
+2:33: the feed gives 41:23 for a file that decodes to 43:48. The length the player measures now
+goes into `entry_state` beside the position, and wins over the feed's for the 90% line and every
+time left. Not into `entries`, where each scan writes the feed's figure back, and per listener,
+so one person's player never changes what another sees.
+
+## 2026-09-15 — Currently Listening, empty for anyone who opens what they play
+
+Issue #14: an episode 32 minutes into 41 was missing from Currently Listening, which said nothing
+was in progress. The filter was "position past five seconds and unread", on the reasoning that
+`markPlayed` marks an episode read at 90%. But opening an item marks it read too, and you open an
+episode to play it. In production every one of the twelve episodes with a saved position was read,
+so the list was empty for everyone. The browser test for it had set the episode unread before
+checking, to cope with an earlier test having opened it, and so tested around exactly this.
+
+Finished now means the saved position is 90% of the episode's length or more, the same line
+`markPlayed` draws, and read plays no part. Three of those twelve episodes had no length in their
+feed, and with no length there is no telling finished from started, so they would have stayed
+listed for good. The player now sends the length it measured with each saved position, and that
+fills in a missing one, never replacing a length the feed gave.
+
+## 2026-09-15 — davewiner's 922 rows, retired at last
+
+davewiner's OPML subscription left config.toml before `retire_group` existed, so nothing ever
+retired the 922 feeds derived from it. The backstop in `subscriptions()` kept them from being
+scanned, but the rows stayed, and 56 of the 75 errors stored in production were theirs: stale, and
+never going to change.
+
+Retiring them the obvious way would have done damage. Eleven of the 922 -- xkcd, The Verge,
+TechCrunch, Hacker News and others -- had since been given config entries of their own and were
+scanned from there, but their rows still said `managed = 1`. `managed_feeds()` returned them, so
+`retire_group("davewiner")` would have dropped the ten with no files as derived feeds, deleting
+the entries people were reading. `unmanage` exists for exactly this and had never been applied.
+
+`retire_group` now unmanages a feed that has its own config entry instead of dropping it, which
+also covers removing any OPML or Patreon subscription from the page, and the daemon retires every
+group whose parent is gone from config when it starts. In production that is davewiner alone: 792
+rows with nothing downloaded forgotten, 119 with files kept as orphaned, 11 unmanaged. One of the
+792, `ars-technica-all-content-2`, has a subscriber but neither a config entry nor a file; the
+backstop had already hidden it, so nobody could see it to lose it.
+
 ## 2026-09-14 — Settings, for everyone with an account
 
 A user reported that Settings disappeared shortly after they signed in: it showed for a moment,

docs/users.md

@@ -8,7 +8,7 @@ fetch, one parse and one file.
 
 | Yours alone | The same for everyone |
 |---|---|
-| Read, kept, playback position | The feed's URL |
+| Read, pinned, playback position | The feed's URL |
 | Which feeds you see at all | Its download folder |
 | Keywords, auto-download, explicit, per-scan cap | When it is scanned |
 | | The file on disk |
@@ -34,10 +34,10 @@ is shared.
 
 Deleting a file deletes everyone's copy. A feed with other subscribers labels the button **Delete
 for everyone** and names them in the confirmation, and the server has the last word: if anyone else
-has kept the item or not played it yet, `DELETE /api/enclosures/{id}` answers `409` with the
+has pinned the item or not played it yet, `DELETE /api/enclosures/{id}` answers `409` with the
 reason, and only `?force=true` goes through.
 
-Retention follows the same rule: an item anyone kept keeps its file, and it counts as read only once
+Retention follows the same rule: an item anyone pinned keeps its file, and it counts as read only once
 every subscriber has read it.
 
 ## Signing in
@@ -72,7 +72,9 @@ re-subscribing does not pull the back catalogue again.
 
 **Popular** and **Directory** sit at the top of the feed list, above your own feeds. Popular, also
 shown in the Add feed dialog, lists the ten feeds with the most subscribers on this server, you
-included. Directory lists every one of them A to Z. Your own feeds are marked Subscribed.
+included. Directory shows every one of them A to Z as a grid of cover art. Above it, a filter
+picks Podcasts (anything with audio or video) or Blogs (the rest), and chips pick the category
+each show gives itself in iTunes; the two combine. Your own feeds are marked Subscribed.
 It shows a title, artwork and a count, never a URL or who reads it. An OPML subscription is listed
 as the feeds inside it, one by one, and never the OPML itself, so you can take just the shows you
 want. Anything that looks private is left out: a login configured for the feed, credentials in its URL,

package-lock.json

@@ -1,12 +1,17 @@
 {
-  "name": "ipx-ui-tests",
+  "name": "ipx-web",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "ipx-ui-tests",
+      "name": "ipx-web",
+      "dependencies": {
+        "@swc/core": "^1.16.2",
+        "@swc/html": "^1.16.2"
+      },
       "devDependencies": {
-        "@playwright/test": "^1.56.0"
+        "@playwright/test": "^1.56.0",
+        "typescript": "^7.0.2"
       }
     },
     "node_modules/@playwright/test": {
@@ -25,6 +30,847 @@
         "node": ">=20"
       }
     },
+    "node_modules/@swc/core": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.16.2.tgz",
+      "integrity": "sha512-95I4kiSMeveI/Mhi+tE4fiWcWLUMfzfKrk0jtr8LRMqHgOgq+xHS+zExkDqoO4b5OeeuXHMWVdD5MeP3X6sULw==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/counter": "^0.1.3",
+        "@swc/types": "^0.1.28"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/swc"
+      },
+      "optionalDependencies": {
+        "@swc/core-darwin-arm64": "1.16.2",
+        "@swc/core-darwin-x64": "1.16.2",
+        "@swc/core-linux-arm-gnueabihf": "1.16.2",
+        "@swc/core-linux-arm64-gnu": "1.16.2",
+        "@swc/core-linux-arm64-musl": "1.16.2",
+        "@swc/core-linux-ppc64-gnu": "1.16.2",
+        "@swc/core-linux-s390x-gnu": "1.16.2",
+        "@swc/core-linux-x64-gnu": "1.16.2",
+        "@swc/core-linux-x64-musl": "1.16.2",
+        "@swc/core-win32-arm64-msvc": "1.16.2",
+        "@swc/core-win32-ia32-msvc": "1.16.2",
+        "@swc/core-win32-x64-msvc": "1.16.2"
+      },
+      "peerDependencies": {
+        "@swc/helpers": ">=0.5.17"
+      },
+      "peerDependenciesMeta": {
+        "@swc/helpers": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@swc/core-darwin-arm64": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.16.2.tgz",
+      "integrity": "sha512-i/j0HNbnn79qnTVPicvay92Nark8fW8NQqn1e2mGERjUXNpBV0+SwQxlRpk2zBhn6laJ8PDI6Kn1nHZhnz3LCA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-darwin-x64": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.16.2.tgz",
+      "integrity": "sha512-HrwqHyEyHVXO3qTk8EkNK7/b6sOZSEoNh+pot6RdE5x0LbNqfo8LtJUvi3UTXr+5ja/o5HbJdW80eCXo+NjbiA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm-gnueabihf": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.16.2.tgz",
+      "integrity": "sha512-MdXi83Z/gGp1LIrg+h7HKxiul/z/Bty/ZJSvYAFqDl9zteC1XLSAZdScquKtXPp50rdyXqritTDCqQBhwVfZKA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm64-gnu": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.16.2.tgz",
+      "integrity": "sha512-/jcTmK6Ktz3owM3YtiKvjofV6p3VpHnYzTIrOGwDIOsDigRAAVuZ8east33wYO/7UTdKYFlyHNnJNT0WJqOA3Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm64-musl": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.16.2.tgz",
+      "integrity": "sha512-4gFarKaFnlJTSlJYKmMhV4u+3YE4uYfiydpBoYjmgQhCf9lAieOq+WilZaK9vVSHeqLuQpTEiGULZqAdsRX5Dw==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-ppc64-gnu": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-ppc64-gnu/-/core-linux-ppc64-gnu-1.16.2.tgz",
+      "integrity": "sha512-syqSLGd6KlZ1PciNzs6bIUlhOuFztZufebOHaERjc4N4SqNZxyqYd4I+jj/EfOYnpe0kNjccn9HJLN1p5dz3+w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-s390x-gnu": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-s390x-gnu/-/core-linux-s390x-gnu-1.16.2.tgz",
+      "integrity": "sha512-ZBBLK+ewGyXLzWeMS7wbKtWBdnif6etn7xvPY/iOfbdsjX/+bgkp1pQt2lWF2wlu2hXYZuhJ/tHZE/QR8/apzg==",
+      "cpu": [
+        "s390x"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-x64-gnu": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.16.2.tgz",
+      "integrity": "sha512-LyHJgxCA4Tje0ysBMbEb0tt/ie8kgUKoFE3JAKFhpevmTmhYEoC0H9s47WuDsqiFckF1ITUguZIXJG6K5e0dvg==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-x64-musl": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.16.2.tgz",
+      "integrity": "sha512-PghXJlVM1cgtLfNUR1vxFo1z+PDRAe8cWAJlZZ7spmeiN7BospGXg/MHUg7oNSgwSX7Zo//YKv9P5yD9apsFJQ==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-arm64-msvc": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.16.2.tgz",
+      "integrity": "sha512-StTOSefYBxemvNYYUI3UmO1a8y+hSPjjfHogC2TEHL+Z1PlEBim/XtLas5rS04jAzT9RrNmbtX911SZ42H9jSQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-ia32-msvc": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.16.2.tgz",
+      "integrity": "sha512-fycER209DYIzsibpTMC+chND05OfOjgztWL9U8OE6/uUlsOUZH3eh98isBLEnOymYUhlJLEt5++W1+KL/FOh5Q==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-x64-msvc": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.16.2.tgz",
+      "integrity": "sha512-cSd1z6ivSrJPVr+moVwOHWjeKy6TpO4/Shwcv5KCrKYXCccxwh4pRy1C3fDioNx2PF1jPZWHKZjtXt+Be9VbaQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@swc/html": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@swc/html/-/html-1.16.2.tgz",
+      "integrity": "sha512-RmWH8m5dePWDFpHpmFKquZCRe5SyD/Sb0FBPxWcWv/tsjtlJl6oHeaxBsTL2edvaHuW385Fy5nPuTjDD/a+GEA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/counter": "^0.1.3"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "optionalDependencies": {
+        "@swc/html-darwin-arm64": "1.16.2",
+        "@swc/html-darwin-x64": "1.16.2",
+        "@swc/html-linux-arm-gnueabihf": "1.16.2",
+        "@swc/html-linux-arm64-gnu": "1.16.2",
+        "@swc/html-linux-arm64-musl": "1.16.2",
+        "@swc/html-linux-ppc64-gnu": "1.16.2",
+        "@swc/html-linux-s390x-gnu": "1.16.2",
+        "@swc/html-linux-x64-gnu": "1.16.2",
+        "@swc/html-linux-x64-musl": "1.16.2",
+        "@swc/html-win32-arm64-msvc": "1.16.2",
+        "@swc/html-win32-ia32-msvc": "1.16.2",
+        "@swc/html-win32-x64-msvc": "1.16.2"
+      }
+    },
+    "node_modules/@swc/html-darwin-arm64": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@swc/html-darwin-arm64/-/html-darwin-arm64-1.16.2.tgz",
+      "integrity": "sha512-SNBUxkxLBXD0ATwnOG1rF8mpSrRtFDfqWnEUmbm/g4KwmCt7NuHHv9YYqA3lqfq90Ucc+Xlk7afx8KAW/utz4A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/html-darwin-x64": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@swc/html-darwin-x64/-/html-darwin-x64-1.16.2.tgz",
+      "integrity": "sha512-WVBgn6yrBPMZu+DL95/XGAXYcgd1nhd67Ml1UjMtFoFMVKY+VRpCq8JpTZTMXhWbVoRENUHk+3PHu0nNjlE/Fg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/html-linux-arm-gnueabihf": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@swc/html-linux-arm-gnueabihf/-/html-linux-arm-gnueabihf-1.16.2.tgz",
+      "integrity": "sha512-V9F/Akd2TXrf5nUhdLgdy3FoVFxQbw8pA2AOyqnEOa2Mbm1R7DZJJ0GdShEMcoyMyMDB9r/4pWuWfxNtP4mFHA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/html-linux-arm64-gnu": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@swc/html-linux-arm64-gnu/-/html-linux-arm64-gnu-1.16.2.tgz",
+      "integrity": "sha512-jonZVtHc6BesMjC/muUEJGzE1L2kVdgiPVuHc7CL79MrUm0Hjf8LS4Wmtjqe2bLTfRcaMfaYl/60ZcRXHCaYSQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/html-linux-arm64-musl": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@swc/html-linux-arm64-musl/-/html-linux-arm64-musl-1.16.2.tgz",
+      "integrity": "sha512-dvki9/sgacHk9ouORmnIok5FbpeE9zUE8yqGGhL1kitNJi6/TKzfnMOpRxSxeDk1/ccvJTAdjRGDIGkT45+b3Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/html-linux-ppc64-gnu": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@swc/html-linux-ppc64-gnu/-/html-linux-ppc64-gnu-1.16.2.tgz",
+      "integrity": "sha512-6m0vVWHl9MW7cmWKVgKlFW6yhRv0uahMEaDxNIvXrPC3LdbbiiYZui+ryhyQGIYeVps3OMujzUjc0GihNz/afQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/html-linux-s390x-gnu": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@swc/html-linux-s390x-gnu/-/html-linux-s390x-gnu-1.16.2.tgz",
+      "integrity": "sha512-TOlz6wgKyZjg4THJsNZfDz/rAMO+rBa0s2eewTeHEfuJhI+jGu7H6Co6bdbMpN3oyDvTMG7N1f1ktSbkE0erAg==",
+      "cpu": [
+        "s390x"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/html-linux-x64-gnu": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@swc/html-linux-x64-gnu/-/html-linux-x64-gnu-1.16.2.tgz",
+      "integrity": "sha512-5EduoVpsnuAAkG9BW8COxcIKAe5swgNAEo+BVkAJCOy1ZMZm0krQYBdvlaDCsGGE9yLDKVPm7rpYIi7vTTZTbA==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/html-linux-x64-musl": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@swc/html-linux-x64-musl/-/html-linux-x64-musl-1.16.2.tgz",
+      "integrity": "sha512-c0Z84dvBd0oh1ZcBHnM18itmvJFLbCZBKFF2lEDHsGBSLQ/1sPbggEKsVO4KgWkkhwQV2l9AB4jnsw1HrwZJCg==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/html-win32-arm64-msvc": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@swc/html-win32-arm64-msvc/-/html-win32-arm64-msvc-1.16.2.tgz",
+      "integrity": "sha512-Aq7V2B5gS23X59DzV2z892c4NBHYtJbwhvsCjJN1MBMx723htjgNE9KVIJp9dQaJBr2PrNfb/u3QFwnWV2tAoQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/html-win32-ia32-msvc": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@swc/html-win32-ia32-msvc/-/html-win32-ia32-msvc-1.16.2.tgz",
+      "integrity": "sha512-9gslPcsfXxKvAZtOvDkxGuEbM7lqBrONzLAyRsyUtw8KxFcSYkGIO48RDTstGWOkgTgKjjAq/WWqt9qr/NcE3A==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/html-win32-x64-msvc": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@swc/html-win32-x64-msvc/-/html-win32-x64-msvc-1.16.2.tgz",
+      "integrity": "sha512-Kdb4VdC8FyF5s1MQaFUNeASLckHECrb/oYy/6OCtU+hbgxQ/o/JCgE4uCe8YAg0LCWSOjhx73PCZDGwPf1TpKw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/types": {
+      "version": "0.1.28",
+      "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.28.tgz",
+      "integrity": "sha512-V6Mnml8v09QALx6K0elJ7o9K/MkVDtW3t6L+7Ou/JcWtb3xwId2AH4FeOceySd2JaO87IMw4+6vSZxLm34LPbw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/counter": "^0.1.3"
+      }
+    },
+    "node_modules/@typescript/typescript-aix-ppc64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-aix-ppc64/-/typescript-aix-ppc64-7.0.2.tgz",
+      "integrity": "sha512-MTKKkWB7p/0E9xi1d1tHtZ5PiLkGEMIq88pK2CubZjOsLtYTLqhgIgi6zepFa+9GHZ6h05NMCkQxGKiPXMxXtQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-darwin-arm64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-darwin-arm64/-/typescript-darwin-arm64-7.0.2.tgz",
+      "integrity": "sha512-gowzar9MwS/aRWp6f3a4KUqzRjAZjOsmGNCM6LcTgXum+dBfgsBVMN+AgvOCCbguXyick6LJhpBszxMebJ8syA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-darwin-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-darwin-x64/-/typescript-darwin-x64-7.0.2.tgz",
+      "integrity": "sha512-SZ9xZInqApNlNGc9s0W1VSsktYSOe9cFqNOIqmN1Gs8SmkjKZYFt017G4VwPxASInODuAdbTW7sXiFUf893RgA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-freebsd-arm64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-freebsd-arm64/-/typescript-freebsd-arm64-7.0.2.tgz",
+      "integrity": "sha512-W5NH4y/J0plIIS5b2xvTEkU7JFxyqdMAOgf+Ilhl0vHQXKO5dZoxd+C/jEtq56c4F3wk71RB4BMRQ2XdI+bwYQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-freebsd-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-freebsd-x64/-/typescript-freebsd-x64-7.0.2.tgz",
+      "integrity": "sha512-UMGDx5sTpzNw3WiPebH7l90IWfJggEd+egHt/q6p7/Cm3zqoV7VxkGXt+3DxPIw8CcmvAB0j3sVVfbhX+M4Tpw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-arm": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-arm/-/typescript-linux-arm-7.0.2.tgz",
+      "integrity": "sha512-gffT3xPz9sR7j/YJExkyPntrI0P2EP9XbOyWzth2/Gs0RstK+90RBcO0ncXoXy/beYll1SXw846Nf2zdnEz0QQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-arm64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-arm64/-/typescript-linux-arm64-7.0.2.tgz",
+      "integrity": "sha512-Qh4eU4/y3yDjnfjjyPYihMj5/ODIlmt+Bzu17OI+fiSRDW57QmU5SiN63exPRNJPKUzcc1INa1NXdrJ+MqHjUQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-loong64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-loong64/-/typescript-linux-loong64-7.0.2.tgz",
+      "integrity": "sha512-uEHck9i8hoAzXPiYRib1O7miOnz23SxIeVl6F4LXox+qov1K35jHcEW6VHKvZI+pyvl7fZEP4MCU5LYvIq1GuQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-mips64el": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-mips64el/-/typescript-linux-mips64el-7.0.2.tgz",
+      "integrity": "sha512-R4KvAMnE43W5Qeqb0Ly56O3mWMWIAgsMyz36DCaycd5nbg/9kzm0liw3JocfRqyJY0KPmzFjbswozXyW0DnIYA==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-ppc64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-ppc64/-/typescript-linux-ppc64-7.0.2.tgz",
+      "integrity": "sha512-DORx5b3sd/4S7eayxm4FQv+A7CrkUIGRaHiwI8oiHTAI1fAPWhF4J0vAlkC8biAlHSVVwxMQ3tjZ2/DVbnQiiA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-riscv64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-riscv64/-/typescript-linux-riscv64-7.0.2.tgz",
+      "integrity": "sha512-wf0jqEDOjrPRnKwYRyyJDRo11KMbvMFrU+q4zqKyChODBzvlkbhNQfKvLxQCcwTpdDaXSHZTVuh0JoCrKCUMHQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-s390x": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-s390x/-/typescript-linux-s390x-7.0.2.tgz",
+      "integrity": "sha512-IkwJc3L7yhytWd/ewjyxNDfOmswCm9GWMJT/ue/dU4aZNbwZeYAetq42VyLmsmSjvoX7z74X6ZaYCtzAr0EuGw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-x64/-/typescript-linux-x64-7.0.2.tgz",
+      "integrity": "sha512-EYdf2cNg7rgCWJnxCdJ+F3V39O8ihb37eHAu1LK8oAFizgTQbPOK7zHHXbPt8rX24COqODXeI3sIf0fCXG7H/A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-netbsd-arm64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-netbsd-arm64/-/typescript-netbsd-arm64-7.0.2.tgz",
+      "integrity": "sha512-+polYF4MF04aPpO5FTkHran9yUQDSXqy5GiSDKpsll5jy3l3+g9QLhpf39T+ePtefhXLOGrLl0QIjkQP6VnelA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-netbsd-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-netbsd-x64/-/typescript-netbsd-x64-7.0.2.tgz",
+      "integrity": "sha512-8YIT0EHM/3dq10ZOVF/A7pc/YSMtbcecct4rWtexrnSCHOPcpC2KTLXfTCR6vDpnSiY12heNb1GiN/wu+T/FyA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-openbsd-arm64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-openbsd-arm64/-/typescript-openbsd-arm64-7.0.2.tgz",
+      "integrity": "sha512-APT8+ClYnuYm1u9+kgGXoMj2VzWzcymwh2gNSQVySHfkRDGOTVkoWLjCmOQSaO+PoqQ57B0flRp9SA+7GnnkzQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-openbsd-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-openbsd-x64/-/typescript-openbsd-x64-7.0.2.tgz",
+      "integrity": "sha512-yX7s+Q0Dln0Dt9tEzZsAjXXR/+ytBM7AlglaqyeMPxQszJ1JhlJdZ6jLA+IzldHtflX81em7lDao1xXu+aRRkg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-sunos-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-sunos-x64/-/typescript-sunos-x64-7.0.2.tgz",
+      "integrity": "sha512-dLJDGaLZ1D4HPQn62u1n8mBDkJREwMsAkCdkwd4Ieqw+x3TUyTsqY0YiBCtE6H6OzzgGk3iuZ3vFWRS+E8/d1g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-win32-arm64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-win32-arm64/-/typescript-win32-arm64-7.0.2.tgz",
+      "integrity": "sha512-Gyl1Vy6OsWesLzmq+EP0Fb7b4Nid5232AvcA2SFcdYreldpNtYFFofPjnt62y9hQy7VTaZp65ICJjuAQRaVcIQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-win32-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-win32-x64/-/typescript-win32-x64-7.0.2.tgz",
+      "integrity": "sha512-0BQ3HkAHHlKLSp1qRvf3SUhGpGsDuhB/jgFw75guyqbxJqEaS0Cw/VFO8i2nHglJUzQCRtMMR/IBAKE3ETMC4g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
     "node_modules/playwright": {
       "version": "1.63.0",
       "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.63.0.tgz",
@@ -53,6 +899,41 @@
       "engines": {
         "node": ">=20"
       }
+    },
+    "node_modules/typescript": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-7.0.2.tgz",
+      "integrity": "sha512-8FYau96o3NKOhbjKi/qNvG/W5jhzxkbdm5sj9AbZ/5T5sWqn3hJgLfGx27sRKZWTvyzCP8dLRBTf5tBTSRVUNA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc"
+      },
+      "engines": {
+        "node": ">=16.20.0"
+      },
+      "optionalDependencies": {
+        "@typescript/typescript-aix-ppc64": "7.0.2",
+        "@typescript/typescript-darwin-arm64": "7.0.2",
+        "@typescript/typescript-darwin-x64": "7.0.2",
+        "@typescript/typescript-freebsd-arm64": "7.0.2",
+        "@typescript/typescript-freebsd-x64": "7.0.2",
+        "@typescript/typescript-linux-arm": "7.0.2",
+        "@typescript/typescript-linux-arm64": "7.0.2",
+        "@typescript/typescript-linux-loong64": "7.0.2",
+        "@typescript/typescript-linux-mips64el": "7.0.2",
+        "@typescript/typescript-linux-ppc64": "7.0.2",
+        "@typescript/typescript-linux-riscv64": "7.0.2",
+        "@typescript/typescript-linux-s390x": "7.0.2",
+        "@typescript/typescript-linux-x64": "7.0.2",
+        "@typescript/typescript-netbsd-arm64": "7.0.2",
+        "@typescript/typescript-netbsd-x64": "7.0.2",
+        "@typescript/typescript-openbsd-arm64": "7.0.2",
+        "@typescript/typescript-openbsd-x64": "7.0.2",
+        "@typescript/typescript-sunos-x64": "7.0.2",
+        "@typescript/typescript-win32-arm64": "7.0.2",
+        "@typescript/typescript-win32-x64": "7.0.2"
+      }
     }
   }
 }

package.json

@@ -1,13 +1,20 @@
 {
-  "name": "ipx-ui-tests",
+  "name": "ipx-web",
   "private": true,
-  "description": "Browser tests for the ipx web UI. The Rust tests cover the server; these cover the page.",
+  "description": "Builds the ipx web pages from web/src (web/build.mjs, run by build.rs) and tests them. The Rust tests cover the server.",
   "scripts": {
+    "build": "node web/build.mjs",
+    "typecheck": "tsc -p .",
+    "smoke": "node tests/page-smoke.js",
     "test": "playwright test",
-    "test:headed": "playwright test --headed",
+    "test:headed": "playwright test --headed"
-    "smoke": "node tests/page-smoke.js"
   },
   "devDependencies": {
-    "@playwright/test": "^1.56.0"
+    "@playwright/test": "^1.56.0",
+    "typescript": "^7.0.2"
+  },
+  "dependencies": {
+    "@swc/core": "^1.16.2",
+    "@swc/html": "^1.16.2"
   }
 }

src/config.rs

@@ -115,6 +115,10 @@ pub struct Feed {
     /// Download folder name; defaults to the sanitized feed title.
     #[serde(skip_serializing_if = "Option::is_none")]
     pub folder: Option<String>,
+    /// The Directory's category for a feed that names none of its own, as most blogs do not.
+    /// The feed's own iTunes category wins where there is one.
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub category: Option<String>,
     /// Every whitespace-separated word of a keyword must appear in the
     /// url/title/description/categories for an enclosure to be taken.
     #[serde(default, skip_serializing_if = "Vec::is_empty")]
@@ -469,7 +473,7 @@ mod tests {
         taken.insert("the-daily".to_string(), Feed {
             url: "u".into(), folder: None, group: None, media_types: None, schedule: None, keywords: vec![], allow_explicit: false,
             auto_download: true, max_new_per_check: None, username: None,
-            password: None, password_env: None,
+            password: None, password_env: None, category: None,
         });
         assert_eq!(unique_slug("The Daily", &taken), "the-daily-2");
     }
@@ -489,6 +493,7 @@ mod tests {
             username: Some("ray".into()),
             password: Some("literal".into()),
             password_env: None,
+            category: None,
         };
         assert_eq!(f.password().as_deref(), Some("literal"));
 

src/db.rs

@@ -17,6 +17,8 @@ CREATE TABLE IF NOT EXISTS feeds (
     url           TEXT NOT NULL,
     title         TEXT,
     image         TEXT,
+    -- The channel's first <itunes:category>, for the Directory.
+    category      TEXT,
     etag          TEXT,
     last_modified TEXT,
     last_checked  INTEGER,
@@ -79,7 +81,10 @@ CREATE TABLE IF NOT EXISTS users (
     is_admin  INTEGER NOT NULL DEFAULT 0,
     -- For whoever maintains the server. NULL where it is not known.
     created    INTEGER,
-    last_login INTEGER
+    last_login INTEGER,
+    -- The theme chosen in Settings, and light, dark or auto. NULL until one is chosen.
+    theme      TEXT,
+    theme_mode TEXT
 );
 
 -- What one person wants from a feed. The feed, its items and its files are shared; this
@@ -91,6 +96,8 @@ CREATE TABLE IF NOT EXISTS subscriptions (
     auto_download     INTEGER,
     allow_explicit    INTEGER,
     max_new_per_check INTEGER,
+    -- Pinned to the top of this person's feed list, a feed inside a folder included.
+    pinned            INTEGER NOT NULL DEFAULT 0,
     PRIMARY KEY (user_id, feed_id)
 );
 
@@ -103,6 +110,8 @@ CREATE TABLE IF NOT EXISTS entry_state (
     read     INTEGER NOT NULL DEFAULT 0,
     flagged  INTEGER NOT NULL DEFAULT 0,
     position INTEGER NOT NULL DEFAULT 0,
+    -- The length this person's player measured, beside the position it is measured against.
+    duration INTEGER,
     PRIMARY KEY (user_id, feed_id, guid)
 );
 
@@ -170,6 +179,12 @@ fn migrate(conn: &Connection) -> Result<()> {
         ("users", "created", "INTEGER"),
         ("users", "last_login", "INTEGER"),
         ("feeds", "error_since", "INTEGER"),
+        ("feeds", "category", "TEXT"),
+        ("entry_state", "duration", "INTEGER"),
+        // Kept per account so a theme follows you to another browser; it was in localStorage.
+        ("users", "theme", "TEXT"),
+        ("users", "theme_mode", "TEXT"),
+        ("subscriptions", "pinned", "INTEGER NOT NULL DEFAULT 0"),
     ];
     let retired: &[(&str, &str)] = &[
         // Read state from before accounts, long since moved to entry_state. Two bugs came from
@@ -192,6 +207,13 @@ fn migrate(conn: &Connection) -> Result<()> {
         if !has(table, column)? {
             tracing::info!(table, column, "adding column");
             conn.execute_batch(&format!("ALTER TABLE {table} ADD COLUMN {column} {ty}"))?;
+            // A category is only read from a 200, and a feed with a validator mostly gets a
+            // 304, so most would never pick one up until the publisher changed something.
+            // Dropping the validators once makes each re-read on its normal schedule; leaving
+            // last_checked alone, unlike clear_validators, keeps them from all coming due at once.
+            if (*table, *column) == ("feeds", "category") {
+                conn.execute_batch("UPDATE feeds SET etag = NULL, last_modified = NULL")?;
+            }
         }
     }
     for (table, column) in retired {
@@ -208,6 +230,7 @@ fn migrate(conn: &Connection) -> Result<()> {
 pub struct FeedSummary {
     pub title: Option<String>,
     pub image: Option<String>,
+    pub category: Option<String>,
     /// Came from a subscribed OPML that no longer lists it, but it has downloads, so it
     /// was kept rather than removed.
     pub orphaned: bool,
@@ -256,7 +279,8 @@ impl Db {
         let conn = self.conn.lock().unwrap();
         let mut sum: FeedSummary = conn
             .query_row(
-                "SELECT title, image, last_checked, last_error, coalesce(orphaned, 0), error_since
+                "SELECT title, image, last_checked, last_error, coalesce(orphaned, 0), error_since,
+                        category
                  FROM feeds WHERE id = ?1",
                 [feed_id],
                 |r| {
@@ -267,6 +291,7 @@ impl Db {
                         last_error: r.get(3)?,
                         orphaned: r.get::<_, i64>(4)? != 0,
                         error_since: r.get(5)?,
+                        category: r.get(6)?,
                         ..Default::default()
                     })
                 },
@@ -328,11 +353,14 @@ impl Db {
         last_modified: Option<&str>,
         ttl_mins: Option<u64>,
         image: Option<&str>,
+        category: Option<&str>,
     ) -> Result<()> {
         let conn = self.conn.lock().unwrap();
+        // category is taken as it comes, unlike title and image: a show that leaves a category
+        // should leave the Directory's chip too.
         conn.execute(
-            "INSERT INTO feeds (id, url, title, etag, last_modified, last_checked, ttl_mins, last_error, image)
+            "INSERT INTO feeds (id, url, title, etag, last_modified, last_checked, ttl_mins, last_error, image, category)
-             VALUES (?1, ?2, ?3, ?4, ?5, ?6, ?7, NULL, ?8)
+             VALUES (?1, ?2, ?3, ?4, ?5, ?6, ?7, NULL, ?8, ?9)
              ON CONFLICT(id) DO UPDATE SET
                 url = excluded.url,
                 title = coalesce(excluded.title, feeds.title),
@@ -341,9 +369,10 @@ impl Db {
                 last_checked = excluded.last_checked,
                 ttl_mins = excluded.ttl_mins,
                 image = coalesce(excluded.image, feeds.image),
+                category = excluded.category,
                 last_error = NULL,
                 error_since = NULL",
-            rusqlite::params![feed_id, url, title, etag, last_modified, now(), ttl_mins.map(|t| t as i64), image],
+            rusqlite::params![feed_id, url, title, etag, last_modified, now(), ttl_mins.map(|t| t as i64), image, category],
         )?;
         Ok(())
     }
@@ -685,9 +714,12 @@ pub enum Filter {
     Unread,
     Downloaded,
     Flagged,
-    /// Started (a saved playback position past the first few seconds) but not finished
+    /// Started (a saved playback position past the first few seconds) and short of the 90%
-    /// (`markPlayed` in the UI marks an item read at 90% played, so unread is "not finished"
+    /// where `markPlayed` in the UI calls it finished. Not `read`: opening an item marks it
-    /// here too). Currently Listening, below Popular, is this filter on every feed at once.
+    /// read, so filtering on that hid nearly every episode anyone had started. The length is the
+    /// one this person's player measured where there is one (`set_position`), else the feed's;
+    /// with neither, the episode counts as unfinished.
+    /// Currently Listening, below Popular, is this filter on every feed at once.
     InProgress,
 }
 
@@ -713,7 +745,11 @@ impl Filter {
                 "EXISTS (SELECT 1 FROM enclosures x
                          WHERE x.feed_id = e.feed_id AND x.guid = e.guid AND x.path IS NOT NULL)"
             }
-            Self::InProgress => "coalesce(s.position, 0) > 5 AND coalesce(s.read, 0) = 0",
+            Self::InProgress => {
+                "coalesce(s.position, 0) > 5
+                 AND (coalesce(s.duration, e.duration, 0) = 0
+                      OR s.position * 10 < coalesce(s.duration, e.duration) * 9)"
+            }
         }
     }
 }
@@ -751,7 +787,8 @@ impl Db {
             .unwrap_or_default();
         let sql = format!(
             "SELECT e.guid, e.feed_id, e.title, e.link, e.published, e.description,
-                    coalesce(s.read, 0), coalesce(s.flagged, 0), e.image, e.duration,
+                    coalesce(s.read, 0), coalesce(s.flagged, 0), e.image,
+                    coalesce(s.duration, e.duration),
                     e.episode, e.season, coalesce(s.position, 0)
              FROM entries e
              LEFT JOIN entry_state s
@@ -849,12 +886,26 @@ impl Db {
     }
 
     /// Where playback got to, so it resumes there next time -- for this listener only.
-    pub fn set_position(&self, user_id: i64, feed_id: &str, guid: &str, secs: i64) -> Result<()> {
+    /// `duration` is the length their player measured, kept beside the position and preferred to
+    /// the feed's for time left and for when an episode counts as finished. A feed can be minutes
+    /// out: ReThinking's gave 41:23 for a 43:48 file, which said 0:08 left with 2:33 to play.
+    /// Not written to `entries`, where every scan puts the feed's figure back, and kept per
+    /// listener so one person's player never changes what anyone else sees.
+    pub fn set_position(
+        &self,
+        user_id: i64,
+        feed_id: &str,
+        guid: &str,
+        secs: i64,
+        duration: Option<i64>,
+    ) -> Result<()> {
         let conn = self.conn.lock().unwrap();
         conn.execute(
-            "INSERT INTO entry_state (user_id, feed_id, guid, position) VALUES (?1, ?2, ?3, ?4)
+            "INSERT INTO entry_state (user_id, feed_id, guid, position, duration)
-             ON CONFLICT(user_id, feed_id, guid) DO UPDATE SET position = excluded.position",
+             VALUES (?1, ?2, ?3, ?4, ?5)
-            rusqlite::params![user_id, feed_id, guid, secs.max(0)],
+             ON CONFLICT(user_id, feed_id, guid) DO UPDATE SET position = excluded.position,
+                 duration = coalesce(excluded.duration, duration)",
+            rusqlite::params![user_id, feed_id, guid, secs.max(0), duration.filter(|d| *d > 0)],
         )?;
         Ok(())
     }
@@ -972,6 +1023,17 @@ impl Db {
         Ok(out)
     }
 
+    /// Feeds with any audio or video enclosure: the Directory's Podcasts, with the rest Blogs.
+    /// Reaped files keep their rows, so a show whose files have all been purged still counts.
+    pub fn media_feeds(&self) -> Result<std::collections::HashSet<String>> {
+        let conn = self.conn.lock().unwrap();
+        let mut stmt = conn.prepare(
+            "SELECT DISTINCT feed_id FROM enclosures WHERE mime LIKE 'audio/%' OR mime LIKE 'video/%'",
+        )?;
+        let out = stmt.query_map([], |r| r.get(0))?.collect::<rusqlite::Result<_>>()?;
+        Ok(out)
+    }
+
     /// Who else would miss this file: subscribers other than `user_id` who have starred
     /// the item or have not read it yet. Deleting is deleting their copy too.
     pub fn others_wanting(&self, enclosure_id: i64, user_id: i64) -> Result<(i64, i64)> {
@@ -1001,6 +1063,24 @@ impl Db {
         Ok(())
     }
 
+    /// The feeds this person pinned to the top of their list. Kept apart from `Sub`, which is
+    /// what the scanner merges into its policy, and which a pin has nothing to do with.
+    pub fn pinned_feeds(&self, user_id: i64) -> Result<std::collections::HashSet<String>> {
+        let conn = self.conn.lock().unwrap();
+        let mut stmt = conn.prepare("SELECT feed_id FROM subscriptions WHERE user_id = ?1 AND pinned")?;
+        let ids = stmt.query_map([user_id], |r| r.get(0))?.collect::<rusqlite::Result<_>>()?;
+        Ok(ids)
+    }
+
+    /// False when they do not subscribe to it, since there is then no row in their list to pin.
+    pub fn set_pinned(&self, user_id: i64, feed_id: &str, on: bool) -> Result<bool> {
+        let conn = self.conn.lock().unwrap();
+        Ok(conn.execute(
+            "UPDATE subscriptions SET pinned = ?3 WHERE user_id = ?1 AND feed_id = ?2",
+            params![user_id, feed_id, on as i64],
+        )? > 0)
+    }
+
     pub fn unsubscribe(&self, user_id: i64, feed_id: &str) -> Result<()> {
         let conn = self.conn.lock().unwrap();
         conn.execute(
@@ -1127,6 +1207,23 @@ impl Db {
         Ok(())
     }
 
+    /// The theme this person chose, and light, dark or auto; None for either until they choose.
+    pub fn theme(&self, user_id: i64) -> Result<(Option<String>, Option<String>)> {
+        let conn = self.conn.lock().unwrap();
+        Ok(conn.query_row("SELECT theme, theme_mode FROM users WHERE id = ?1", [user_id], |r| {
+            Ok((r.get(0)?, r.get(1)?))
+        })?)
+    }
+
+    pub fn set_theme(&self, user_id: i64, theme: &str, mode: &str) -> Result<()> {
+        let conn = self.conn.lock().unwrap();
+        conn.execute(
+            "UPDATE users SET theme = ?2, theme_mode = ?3 WHERE id = ?1",
+            params![user_id, theme, mode],
+        )?;
+        Ok(())
+    }
+
     /// The user behind a session cookie, if it is still live. Idle sessions expire after
     /// `max_idle_secs`; touching `seen` is what keeps a session in daily use alive.
     pub fn session_user(&self, token: &str, max_idle_secs: i64) -> Result<Option<User>> {
@@ -1317,6 +1414,58 @@ impl Db {
         Ok(())
     }
 
+    /// Folds enclosures of one item that `key` says are the same file into the first of them, for
+    /// WordPress's numbered player URLs (`feed::same_file_key`). The first is the one the parser
+    /// keeps, so it keeps its row, taking a repeat's file if it has none of its own; the repeats'
+    /// rows go. Returns how many went and the copies left spare, for the caller to delete.
+    pub fn merge_repeated_enclosures(&self, key: impl Fn(&str) -> String) -> Result<(usize, Vec<String>)> {
+        use std::collections::hash_map::Entry;
+        let mut conn = self.conn.lock().unwrap();
+        let tx = conn.transaction()?;
+        let rows: Vec<(i64, String, String, String, Option<String>)> = {
+            let mut stmt = tx.prepare(
+                "SELECT id, feed_id, guid, url, path FROM enclosures
+                  WHERE (feed_id, guid) IN
+                        (SELECT feed_id, guid FROM enclosures WHERE url GLOB '*[?&]_=[0-9]*')
+                  ORDER BY id",
+            )?;
+            stmt.query_map([], |r| Ok((r.get(0)?, r.get(1)?, r.get(2)?, r.get(3)?, r.get(4)?)))?
+                .collect::<rusqlite::Result<_>>()?
+        };
+        // The first row of each file, and whether it has the file on disk yet.
+        let mut first: std::collections::HashMap<(String, String, String), (i64, bool)> = Default::default();
+        let (mut gone, mut spare) = (0, vec![]);
+        for (id, feed, guid, url, path) in rows {
+            match first.entry((feed, guid, key(&url))) {
+                Entry::Vacant(v) => {
+                    v.insert((id, path.is_some()));
+                }
+                Entry::Occupied(mut o) => {
+                    let (keep, has) = o.get_mut();
+                    if let Some(p) = path {
+                        if *has {
+                            spare.push(p);
+                        } else {
+                            // The only copy is the repeat's: Rands' episode 97 was downloaded
+                            // under its ?_=2 URL alone.
+                            tx.execute(
+                                "UPDATE enclosures SET (path, state, bytes_done, downloaded_at) =
+                                    (SELECT path, state, bytes_done, downloaded_at FROM enclosures WHERE id = ?2)
+                                  WHERE id = ?1",
+                                params![*keep, id],
+                            )?;
+                            *has = true;
+                        }
+                    }
+                    tx.execute("DELETE FROM enclosures WHERE id = ?1", [id])?;
+                    gone += 1;
+                }
+            }
+        }
+        tx.commit()?;
+        Ok((gone, spare))
+    }
+
     /// Stops treating a feed as derived, because it now has its own config entry.
     pub fn unmanage(&self, id: &str) -> Result<()> {
         let conn = self.conn.lock().unwrap();
@@ -1441,6 +1590,64 @@ pub fn now() -> i64 {
 mod tests {
     use super::*;
 
+    #[test]
+    fn a_file_wordpress_listed_twice_is_folded_into_one() {
+        let db = Db::memory().unwrap();
+        db.exec_for_test(
+            "INSERT INTO enclosures (id, feed_id, guid, url, path, state) VALUES
+                (1,'f','a','https://x/a.mp3','/d/a-2.mp3','done'),
+                (2,'f','a','https://x/a.mp3?_=2','/d/a.mp3','done'),
+                (3,'f','b','https://x/b.mp3',NULL,'reaped'),
+                (4,'f','b','https://x/b.mp3?_=2','/d/b.mp3','done'),
+                (5,'f','c','https://x/c.mp3?_=1','/d/c.mp3','done'),
+                (6,'f','d','https://x/d1.mp3?_=1','/d/d1.mp3','done'),
+                (7,'f','d','https://x/d2.mp3?_=2','/d/d2.mp3','done');",
+        )
+        .unwrap();
+        let key = crate::feed::same_file_key;
+        assert_eq!(db.merge_repeated_enclosures(key).unwrap(), (2, vec!["/d/a.mp3".to_string()]));
+        {
+            let conn = db.conn.lock().unwrap();
+            let ids: Vec<i64> = conn
+                .prepare("SELECT id FROM enclosures ORDER BY id")
+                .unwrap()
+                .query_map([], |r| r.get(0))
+                .unwrap()
+                .collect::<rusqlite::Result<_>>()
+                .unwrap();
+            assert_eq!(ids, [1, 3, 5, 6, 7], "a lone ?_=1 and two different files stay");
+            let (path, state): (String, String) =
+                conn.query_row("SELECT path, state FROM enclosures WHERE id = 3", [], |r| Ok((r.get(0)?, r.get(1)?))).unwrap();
+            assert_eq!((path.as_str(), state.as_str()), ("/d/b.mp3", "done"), "the only copy moves, not deleted");
+        }
+        assert_eq!(db.merge_repeated_enclosures(key).unwrap(), (0, vec![]), "and only once");
+    }
+
+    #[test]
+    fn adding_category_drops_validators_once_and_keeps_the_schedule() {
+        let conn = Connection::open_in_memory().unwrap();
+        conn.execute_batch(SCHEMA).unwrap();
+        // A database from before the column, holding a feed that would answer 304.
+        conn.execute_batch(
+            "ALTER TABLE feeds DROP COLUMN category;
+             INSERT INTO feeds (id, url, etag, last_modified, last_checked) VALUES ('f','u','e','lm',5);",
+        )
+        .unwrap();
+        let row = |conn: &Connection| -> (Option<String>, Option<String>, Option<i64>) {
+            conn.query_row("SELECT etag, last_modified, last_checked FROM feeds", [], |r| {
+                Ok((r.get(0)?, r.get(1)?, r.get(2)?))
+            })
+            .unwrap()
+        };
+        migrate(&conn).unwrap();
+        assert_eq!(row(&conn), (None, None, Some(5)), "re-read on its normal schedule");
+
+        // Only the once: every later open keeps the validators the next poll stored.
+        conn.execute_batch("UPDATE feeds SET etag = 'e2'").unwrap();
+        migrate(&conn).unwrap();
+        assert_eq!(row(&conn).0.as_deref(), Some("e2"));
+    }
+
     #[test]
     fn every_sort_column_runs_and_orders_both_ways() {
         let db = Db::memory().unwrap();
@@ -1520,7 +1727,7 @@ mod tests {
 
         // Starring and position are just as private.
         db.set_entry_flag(1, "f", "b", EntryFlag::Flagged, true).unwrap();
-        db.set_position(2, "f", "b", 42).unwrap();
+        db.set_position(2, "f", "b", 42, Some(600)).unwrap();
         let order = order_sql("published", "desc");
         let page = |user| db.entries_in(user, Some("f"), Filter::All, None, 0, 50, &order).unwrap();
         let (ray, sam) = (page(1), page(2));
@@ -1528,6 +1735,9 @@ mod tests {
         let sam_b = sam.iter().find(|e| e.guid == "b").unwrap();
         assert!(ray_b.flagged && ray_b.position == 0);
         assert!(!sam_b.flagged && sam_b.position == 42);
+        // So is the length sam's player measured.
+        assert_ne!(ray_b.duration, Some(600));
+        assert_eq!(sam_b.duration, Some(600));
 
         // Marking a whole feed read is likewise one person's business.
         assert_eq!(db.mark_all_read(2, &["f".to_string()]).unwrap(), 2);
@@ -1659,13 +1869,14 @@ mod tests {
         // so plain filtering failed with "Wrong number of parameters passed to query".
         let db = Db::memory().unwrap();
         db.exec_for_test(
-            "INSERT INTO entries (feed_id, guid, title, description, first_seen) VALUES
+            "INSERT INTO entries (feed_id, guid, title, description, first_seen, duration) VALUES
-                ('f','a','Alpha dive','notes one',100),
+                ('f','a','Alpha dive','notes one',  100,NULL),
-                ('f','b','Beta',      'notes two',200),
+                ('f','b','Beta',      'notes two',  200,NULL),
-                ('f','c','Gamma dive','notes three',300),
+                ('f','c','Gamma dive','notes three',300,NULL),
-                ('f','d','Delta',     'notes four',400),
+                ('f','d','Delta',     'notes four', 400,NULL),
-                ('f','e','Epsilon',   'notes five',500),
+                ('f','e','Epsilon',   'notes five', 500,45),
-                ('f','g','Gimel',     'notes six',600);
+                ('f','g','Gimel',     'notes six',  600,NULL),
+                ('f','h','Heth',      'notes seven',700,900);
              INSERT INTO enclosures (id, feed_id, guid, url, path, state) VALUES
                 (1,'f','b','u1','/tmp/b','done');
              -- Read and starred belong to a person now, so say which one.
@@ -1673,12 +1884,15 @@ mod tests {
              INSERT INTO entry_state (user_id, feed_id, guid, read, flagged, position) VALUES
                 (7,'f','b',1,0,0),
                 (7,'f','c',1,1,0),
-                -- Started and not finished: this is Currently Listening.
+                -- Started, length unknown: this is Currently Listening.
                 (7,'f','d',0,0,42),
-                -- Already finished: not Currently Listening, however far it got.
+                -- 42 of 45 seconds is past the 90% the player calls finished.
                 (7,'f','e',1,0,42),
                 -- Barely touched (opened, closed within seconds): not Currently Listening.
-                (7,'f','g',0,0,3);",
+                (7,'f','g',0,0,3),
+                -- Opened, and so read, but 42 of 900 seconds in: still Currently Listening.
+                -- Filtering on read hid exactly these (issue #14).
+                (7,'f','h',1,0,42);",
         )
         .unwrap();
 
@@ -1694,7 +1908,7 @@ mod tests {
             assert_eq!(rows.len() as i64, n, "{f:?} with search disagrees");
         }
 
-        assert_eq!(db.count_in(7, Some("f"), Filter::All, None).unwrap(), 6);
+        assert_eq!(db.count_in(7, Some("f"), Filter::All, None).unwrap(), 7);
         assert_eq!(db.count_in(7, Some("f"), Filter::Unread, None).unwrap(), 3);
         assert_eq!(db.count_in(7, Some("f"), Filter::Downloaded, None).unwrap(), 1);
         assert_eq!(db.count_in(7, Some("f"), Filter::Flagged, None).unwrap(), 1);
@@ -1703,8 +1917,24 @@ mod tests {
             "search is case-insensitive and covers the description");
 
         // Currently Listening: started, not finished, and not just an accidental tap.
-        let listening = db.entries_in(7, Some("f"), Filter::InProgress, None, 0, 50, &order_sql("published", "desc")).unwrap();
+        let order = order_sql("published", "desc");
-        assert_eq!(listening.iter().map(|e| e.guid.as_str()).collect::<Vec<_>>(), ["d"]);
+        let listening = || {
+            let rows = db.entries_in(7, Some("f"), Filter::InProgress, None, 0, 50, &order).unwrap();
+            rows.into_iter().map(|e| e.guid).collect::<Vec<_>>()
+        };
+        assert_eq!(listening(), ["h", "d"]);
+
+        // The player's measured length is the one that counts, in place of a missing one or over
+        // the feed's: d, 42 of a measured 45 seconds, is finished; e, which its feed calls 45
+        // seconds long, is 42 into a 9000-second file and is not. Times left use it too.
+        db.set_position(7, "f", "d", 42, Some(45)).unwrap();
+        db.set_position(7, "f", "e", 42, Some(9000)).unwrap();
+        assert_eq!(listening(), ["h", "e"]);
+        let rows = db.entries_in(7, Some("f"), Filter::All, None, 0, 50, &order).unwrap();
+        assert_eq!(rows.iter().find(|r| r.guid == "e").unwrap().duration, Some(9000));
+        // A save without one (before the player knows) keeps the length already measured.
+        db.set_position(7, "f", "e", 43, None).unwrap();
+        assert_eq!(listening(), ["h", "e"]);
     }
 
     #[test]
@@ -1820,6 +2050,21 @@ mod tests {
         assert_eq!(after.error_since, None, "a clean check ends the run of failures");
     }
 
+    #[test]
+    fn a_pin_survives_saving_the_feeds_settings_and_needs_a_subscription() {
+        let db = Db::memory().unwrap();
+        let me = db.create_user("pat", None, false).unwrap();
+        assert!(!db.set_pinned(me, "f", true).unwrap(), "not subscribed: nothing to pin");
+        db.subscribe(me, "f").unwrap();
+        assert!(db.set_pinned(me, "f", true).unwrap());
+        // set_subscription writes the rest of the row; it must leave the pin alone.
+        db.set_subscription(me, &Sub { feed_id: "f".into(), auto_download: Some(false), ..Default::default() })
+            .unwrap();
+        assert!(db.pinned_feeds(me).unwrap().contains("f"));
+        db.set_pinned(me, "f", false).unwrap();
+        assert!(db.pinned_feeds(me).unwrap().is_empty());
+    }
+
     #[test]
     fn enclosure_url_is_the_dedupe_key() {
         let db = Db::memory().unwrap();

src/download.rs

@@ -387,7 +387,7 @@ mod tests {
         let mut f = crate::config::Feed {
             url: "u".into(), folder: Some("Subscriptions/Some | Show".into()), group: None, media_types: None,
             schedule: None, keywords: vec![], allow_explicit: false, auto_download: true,
-            max_new_per_check: None, username: None, password: None, password_env: None,
+            max_new_per_check: None, username: None, password: None, password_env: None, category: None,
         };
         assert_eq!(folder_for(&cfg, "id", &f, None), "Subscriptions/Some - Show");
 

src/feed.rs

@@ -11,6 +11,8 @@ pub struct ParsedFeed {
     pub title: Option<String>,
     pub ttl_mins: Option<u64>,
     pub image: Option<String>,
+    /// The channel's first `<itunes:category>`, for the Directory's chips.
+    pub category: Option<String>,
     pub entries: Vec<Entry>,
 }
 
@@ -478,7 +480,7 @@ fn from_rss(ch: rss::Channel, bytes: &[u8]) -> ParsedFeed {
         .filter_map(|(idx, item)| {
             // Straight from the XML, so an item with several keeps all of them. Falls
             // back to the parsed one if the scan and the parser disagree on item count.
-            let enclosures: Vec<Enclosure> = per_item.get(idx).cloned().unwrap_or_else(|| {
+            let mut enclosures: Vec<Enclosure> = per_item.get(idx).cloned().unwrap_or_else(|| {
                 item.enclosure()
                     .into_iter()
                     .map(|e| Enclosure {
@@ -489,6 +491,7 @@ fn from_rss(ch: rss::Channel, bytes: &[u8]) -> ParsedFeed {
                     .filter(|e| !e.url.is_empty())
                     .collect()
             });
+            drop_player_repeats(&mut enclosures);
 
             let guid = pick_guid(
                 item.guid().map(|g| g.value()),
@@ -505,7 +508,7 @@ fn from_rss(ch: rss::Channel, bytes: &[u8]) -> ParsedFeed {
 
             Some(Entry {
                 guid,
-                title: non_empty(item.title()),
+                title: title_text(item.title()),
                 link: non_empty(item.link()),
                 published: item.pub_date().and_then(parse_date),
                 // Content wins over description, as __getEntries preferred entry.content.
@@ -527,7 +530,7 @@ fn from_rss(ch: rss::Channel, bytes: &[u8]) -> ParsedFeed {
         .collect();
 
     ParsedFeed {
-        title: non_empty(Some(ch.title())),
+        title: title_text(Some(ch.title())),
         ttl_mins: ch.ttl().and_then(|t| t.trim().parse().ok()),
         // itunes:image is the square artwork; <image><url> is the older, often smaller one.
         image: ch
@@ -535,6 +538,14 @@ fn from_rss(ch: rss::Channel, bytes: &[u8]) -> ParsedFeed {
             .and_then(|i| i.image())
             .map(str::to_owned)
             .or_else(|| ch.image().map(|i| i.url().to_owned())),
+        // Only the iTunes one: Apple's list is fixed, while a plain <category> is freeform and
+        // would fill the Directory with one-off tags. The subcategory where there is one: Apple
+        // files every tabletop and gaming show under Leisure, which says little; Games says it.
+        category: ch
+            .itunes_ext()
+            .and_then(|i| i.categories().first())
+            .map(|c| c.subcategory().filter(|s| !s.text().trim().is_empty()).unwrap_or(c))
+            .and_then(|c| non_empty(Some(c.text().trim()))),
         entries,
     }
 }
@@ -545,7 +556,7 @@ fn from_atom(feed: atom_syndication::Feed) -> ParsedFeed {
         .iter()
         .filter_map(|e| {
             // Atom carries enclosures as <link rel="enclosure">.
-            let enclosures: Vec<Enclosure> = e
+            let mut enclosures: Vec<Enclosure> = e
                 .links()
                 .iter()
                 .filter(|l| l.rel() == "enclosure")
@@ -556,6 +567,7 @@ fn from_atom(feed: atom_syndication::Feed) -> ParsedFeed {
                 })
                 .filter(|e| !e.url.is_empty())
                 .collect();
+            drop_player_repeats(&mut enclosures);
 
             let alt = e
                 .links()
@@ -572,7 +584,7 @@ fn from_atom(feed: atom_syndication::Feed) -> ParsedFeed {
 
             Some(Entry {
                 guid,
-                title: non_empty(Some(e.title().as_str())),
+                title: title_text(Some(e.title().as_str())),
                 link: alt.map(str::to_owned),
                 published: e.published().or(Some(e.updated())).map(|d| d.timestamp()),
                 description: body(e.content().and_then(|c| c.value()), e.summary().map(|s| s.as_str())),
@@ -588,9 +600,10 @@ fn from_atom(feed: atom_syndication::Feed) -> ParsedFeed {
         .collect();
 
     ParsedFeed {
-        title: non_empty(Some(feed.title().as_str())),
+        title: title_text(Some(feed.title().as_str())),
         ttl_mins: None,
         image: feed.logo().or_else(|| feed.icon()).map(str::to_owned),
+        category: None,
         entries,
     }
 }
@@ -620,6 +633,64 @@ fn non_empty(s: Option<&str>) -> Option<String> {
     s.map(str::trim).filter(|s| !s.is_empty()).map(str::to_owned)
 }
 
+/// WordPress numbers each audio player on a page by adding `?_=N` to its file's URL, so a post
+/// that embeds the file it encloses lists the same file twice: Rands in Repose's "The Promotion
+/// Paradox" was downloaded twice and offered two play buttons for one mp3. The first stays.
+fn drop_player_repeats(encs: &mut Vec<Enclosure>) {
+    let mut seen = std::collections::HashSet::new();
+    encs.retain(|e| seen.insert(same_file_key(&e.url)));
+}
+
+/// An enclosure URL without WordPress's player number, for telling repeats of one file apart
+/// from different files.
+pub fn same_file_key(url: &str) -> String {
+    let Ok(mut u) = url::Url::parse(url) else { return url.to_owned() };
+    let kept: Vec<(String, String)> = u
+        .query_pairs()
+        .filter(|(k, v)| !(k == "_" && !v.is_empty() && v.bytes().all(|b| b.is_ascii_digit())))
+        .map(|(k, v)| (k.into_owned(), v.into_owned()))
+        .collect();
+    if kept.is_empty() {
+        u.set_query(None);
+    } else {
+        u.query_pairs_mut().clear().extend_pairs(kept);
+    }
+    u.to_string()
+}
+
+/// A title as plain text. An Atom title of `type="html"`, or an RSS one in CDATA, comes through
+/// the XML parser with its HTML entities intact: The Verge's "Meta&#8217;s" reached the page as
+/// typed. Decoded one entity at a time, so an `&` that starts none, as in "Q&A", stays as it is
+/// instead of failing the whole title.
+fn title_text(s: Option<&str>) -> Option<String> {
+    let s = non_empty(s)?;
+    let mut out = String::with_capacity(s.len());
+    let mut rest = s.as_str();
+    while let Some(at) = rest.find('&') {
+        out.push_str(&rest[..at]);
+        rest = &rest[at..];
+        let len = 1 + rest[1..]
+            .find(|c: char| !(c.is_ascii_alphanumeric() || c == '#'))
+            .unwrap_or(rest.len() - 1);
+        let decoded = rest[len..]
+            .starts_with(';')
+            .then(|| quick_xml::escape::unescape_with(&rest[..=len], quick_xml::escape::resolve_html5_entity).ok())
+            .flatten();
+        match decoded {
+            Some(v) => {
+                out.push_str(&v);
+                rest = &rest[len + 1..];
+            }
+            None => {
+                out.push('&');
+                rest = &rest[1..];
+            }
+        }
+    }
+    out.push_str(rest);
+    non_empty(Some(&out))
+}
+
 /// An item's show notes: its full body when that is whole, else its description.
 ///
 /// libsyn served Daily Meditation Podcast's `content:encoded` cut at the `>` inside a class name
@@ -708,6 +779,7 @@ mod tests {
 
         assert_eq!(feed.title.as_deref(), Some("Test Cast"));
         assert_eq!(feed.ttl_mins, Some(45));
+        assert_eq!(feed.category.as_deref(), Some("Podcasting"), "the first, by its subcategory");
         assert_eq!(feed.entries.len(), 3);
 
         let ep = &feed.entries[0];
@@ -732,6 +804,37 @@ mod tests {
         );
     }
 
+    #[test]
+    fn a_file_wordpress_lists_twice_is_one_enclosure() {
+        let xml = br#"<?xml version="1.0"?><rss version="2.0"><channel><title>R</title>
+        <item><title>The Promotion Paradox</title><guid>p</guid>
+        <enclosure url="https://x/ep.mp3" length="1" type="audio/mpeg"/>
+        <enclosure url="https://x/ep.mp3?_=2" length="1" type="audio/mpeg"/>
+        <enclosure url="https://x/other.mp3?_=3&amp;key=k" length="1" type="audio/mpeg"/>
+        </item></channel></rss>"#;
+        let urls: Vec<String> =
+            parse(xml).unwrap().entries[0].enclosures.iter().map(|e| e.url.clone()).collect();
+        assert_eq!(urls, ["https://x/ep.mp3", "https://x/other.mp3?_=3&key=k"], "the repeat goes, a different file stays");
+        assert_eq!(same_file_key("https://x/a.mp3?key=k&_=2"), same_file_key("https://x/a.mp3?key=k"));
+        assert_ne!(same_file_key("https://x/a.mp3?_=x"), same_file_key("https://x/a.mp3"), "only a number");
+    }
+
+    #[test]
+    fn titles_are_read_as_text_not_html() {
+        // The Verge: an Atom title of type="html", its entity inside CDATA.
+        let xml = br#"<?xml version="1.0"?>
+        <feed xmlns="http://www.w3.org/2005/Atom"><title type="text">V</title><id>v</id>
+        <updated>2026-09-15T00:00:00Z</updated>
+        <entry><title type="html"><![CDATA[Meta&#8217;s new One]]></title><id>e1</id>
+        <updated>2026-09-15T00:00:00Z</updated></entry></feed>"#;
+        assert_eq!(parse(xml).unwrap().entries[0].title.as_deref(), Some("Meta\u{2019}s new One"));
+        // HTML names as well as numbers; a bare `&` and an unknown name are left as they are.
+        assert_eq!(
+            title_text(Some("Pe&ntilde;a &amp; &#x201C;Q&A&#8221; &bogus; AT&T;")).as_deref(),
+            Some("Pe\u{f1}a & \u{201c}Q&A\u{201d} &bogus; AT&T;")
+        );
+    }
+
     #[test]
     fn a_body_cut_off_mid_tag_gives_way_to_the_description() {
         // How libsyn served Daily Meditation Podcast #3477: content:encoded began inside a tag.

src/main.rs

@@ -392,6 +392,27 @@ async fn daemon(
         Err(e) => tracing::warn!(error = ?e, "could not requeue interrupted downloads"),
     }
 
+    match retire_stranded(&ctx) {
+        Ok(0) => {}
+        Ok(n) => tracing::info!(feeds = n, "retired feeds whose OPML is no longer in config"),
+        Err(e) => tracing::warn!(error = ?e, "could not retire feeds whose OPML is no longer in config"),
+    }
+
+    // Before the parser knew WordPress's numbered player URLs, a file it listed twice was
+    // downloaded twice. The repeats fold into the first, and their spare copies are deleted.
+    match ctx.db.merge_repeated_enclosures(feed::same_file_key) {
+        Ok((0, _)) => {}
+        Ok((n, spare)) => {
+            for path in &spare {
+                if let Err(e) = std::fs::remove_file(path) {
+                    tracing::warn!(path, error = %e, "could not delete a spare copy");
+                }
+            }
+            tracing::info!(enclosures = n, files = spare.len(), "folded files WordPress listed twice");
+        }
+        Err(e) => tracing::warn!(error = ?e, "could not fold files WordPress listed twice"),
+    }
+
     let (tx_cmd, mut rx_cmd) = mpsc::channel::<Cmd>(64);
 
     let web = start_web(&ctx, &config_path, web_addr, &tx_cmd, &events).await?;
@@ -581,6 +602,7 @@ pub async fn add_one(
         username: None,
         password: None,
         password_env: None,
+        category: None,
     };
 
     let title = match feed::fetch(&ctx.client, &probe, None, None).await {
@@ -707,6 +729,7 @@ pub fn subscribe_opml(
                         username: None,
                         password: None,
                         password_env: None,
+                        category: None,
                     },
                 );
                 grew = true;
@@ -950,6 +973,7 @@ pub fn subscriptions(ctx: &Ctx) -> Result<Vec<Sub>> {
                 username: parent.and_then(|p| p.username.clone()),
                 password: parent.and_then(|p| p.password.clone()),
                 password_env: parent.and_then(|p| p.password_env.clone()),
+                category: None,
             },
             managed: true,
         });
@@ -962,10 +986,16 @@ pub fn subscriptions(ctx: &Ctx) -> Result<Vec<Sub>> {
 /// Patreon feed that listed them: the same rule `sync_group` applies to one the list drops --
 /// removed if nothing was downloaded, orphaned and kept otherwise. Called once the parent
 /// itself is removed, since `subscriptions()` would otherwise keep scanning them under a
-/// fallback policy meant for a feed with no parent at all.
+/// fallback policy meant for a feed with no parent at all. A feed promoted to config is not
+/// derived any more, so it is only unmanaged.
 pub fn retire_group(ctx: &Ctx, parent_id: &str) -> Result<()> {
+    let cfg = ctx.cfg();
     for m in ctx.db.managed_feeds()?.into_iter().filter(|m| m.group_id == parent_id) {
-        if ctx.db.downloaded_count(&m.id).unwrap_or(1) > 0 {
+        if cfg.feeds.contains_key(&m.id) {
+            // Scanned from its config entry and still read. Dropped as derived, its stored
+            // entries would go with it: davewiner's 11 were promoted without being unmanaged.
+            ctx.db.unmanage(&m.id)?;
+        } else if ctx.db.downloaded_count(&m.id).unwrap_or(1) > 0 {
             ctx.db.set_orphaned(&m.id, true)?;
         } else {
             ctx.db.drop_managed(&m.id)?;
@@ -974,6 +1004,24 @@ pub fn retire_group(ctx: &Ctx, parent_id: &str) -> Result<()> {
     Ok(())
 }
 
+/// Retires every group whose parent is gone from config, and returns how many derived rows that
+/// dropped or unmanaged. An OPML removed before `retire_group` existed left its feeds behind:
+/// davewiner's 922 were skipped by every scan and never cleared, and their stale errors were
+/// most of the ones stored.
+fn retire_stranded(ctx: &Ctx) -> Result<usize> {
+    let cfg = ctx.cfg();
+    let before = ctx.db.managed_feeds()?;
+    let stranded: std::collections::BTreeSet<&str> = before
+        .iter()
+        .map(|m| m.group_id.as_str())
+        .filter(|g| !cfg.feeds.contains_key(*g))
+        .collect();
+    for group in stranded {
+        retire_group(ctx, group)?;
+    }
+    Ok(before.len() - ctx.db.managed_feeds()?.len())
+}
+
 /// Seconds to wait before re-checking a feed.
 ///
 /// A per-feed schedule is an explicit instruction and wins outright. Without one, the
@@ -1084,6 +1132,7 @@ async fn scan_one(
         last_modified.as_deref(),
         parsed.ttl_mins,
         parsed.image.as_deref(),
+        parsed.category.as_deref(),
     )?;
 
     let policy = policy_for(ctx, id, feed_cfg)?;
@@ -1627,6 +1676,7 @@ mod tests {
             username: None,
             password: None,
             password_env: None,
+            category: None,
         }
     }
 
@@ -1712,4 +1762,24 @@ mod tests {
         assert!(managed.iter().any(|m| m.id == "has-file"), "has a file on disk, so it is kept");
         assert!(ctx.db.feed_summary("has-file").unwrap().orphaned, "and flagged as orphaned");
     }
+
+    #[test]
+    fn a_stranded_group_is_retired_but_a_promoted_feed_keeps_its_entries() {
+        // davewiner: the OPML left config before retire_group existed, and 11 of its feeds
+        // promoted to config since still said managed = 1.
+        let mut cfg = config::Config::default();
+        cfg.feeds.insert("promoted".into(), feed());
+        cfg.feeds.insert("live-opml".into(), feed());
+        let ctx = test_ctx(cfg);
+        ctx.db.upsert_managed("promoted", "http://x/p.xml", "Promoted", "gone-opml").unwrap();
+        ctx.db.upsert_managed("empty", "http://x/e.xml", "Empty", "gone-opml").unwrap();
+        ctx.db.upsert_managed("listed", "http://x/l.xml", "Listed", "live-opml").unwrap();
+        ctx.db.record_entry("promoted", &feed::Entry { guid: "g1".into(), ..Default::default() }).unwrap();
+
+        assert_eq!(retire_stranded(&ctx).unwrap(), 2, "empty dropped, promoted unmanaged");
+
+        let managed: Vec<String> = ctx.db.managed_feeds().unwrap().into_iter().map(|m| m.id).collect();
+        assert_eq!(managed, ["listed"], "a group still in config is left alone");
+        assert_eq!(ctx.db.feed_summary("promoted").unwrap().entries, 1, "its entries survive");
+    }
 }

src/web.rs

@@ -36,7 +36,7 @@ pub struct WebState {
 pub fn router(state: WebState) -> Router {
     Router::new()
         .route("/", get(index))
-        .route("/api/me", get(me))
+        .route("/api/me", get(me).patch(patch_me))
         .route("/api/logout", post(logout))
         .route("/api/feeds", get(feeds).post(add_feed))
         .route("/api/feeds/{id}", patch(patch_feed).delete(remove_feed))
@@ -59,12 +59,21 @@ pub fn router(state: WebState) -> Router {
         .route("/api/users/{id}", patch(patch_user).delete(remove_user))
         .route("/api/logs", get(logs))
         .route("/api/events", get(events))
+        .route("/admin", get(admin_page))
+        .route("/admin.js", get(admin_js))
         .route("/media/{id}", get(media))
         .layer(middleware::from_fn_with_state(state.clone(), auth))
         // Signing in cannot require being signed in, so these sit outside the auth layer.
         .route("/login", get(login_page))
         .route("/api/login", post(login))
         .route("/icon.png", get(icon))
+        .route("/favicon.ico", get(favicon))
+        .route("/favicon.png", get(favicon))
+        .route("/apple-touch-icon.png", get(touch_icon))
+        .route("/app.js", get(app_js))
+        .route("/app.css", get(app_css))
+        .route("/login.js", get(login_js))
+        .route("/inter.woff2", get(inter))
         .layer(middleware::from_fn(access_log))
         .with_state(state)
 }
@@ -311,7 +320,37 @@ async fn me(
 ) -> Json<serde_json::Value> {
     let url = state.ctx.cfg().web.sign_out_url.clone();
     let sign_out = (by_proxy && !url.is_empty()).then_some(url);
-    Json(serde_json::json!({ "name": user.name, "admin": user.is_admin, "sign_out": sign_out }))
+    let (theme, mode) = state.ctx.db.theme(user.id).unwrap_or_default();
+    Json(serde_json::json!({
+        "name": user.name, "admin": user.is_admin, "sign_out": sign_out, "theme": theme, "mode": mode,
+    }))
+}
+
+#[derive(Deserialize)]
+struct MePatch {
+    theme: String,
+    mode: String,
+}
+
+/// Saves the theme to the account, so it follows the person rather than the browser.
+async fn patch_me(
+    State(state): State<WebState>,
+    user: crate::db::User,
+    Json(body): Json<MePatch>,
+) -> Result<StatusCode, ApiError> {
+    // The page's script knows the themes; this only makes sure what is kept is safe to write
+    // into the page's <html> tag, which is where index() puts it.
+    if !theme_ok(&body.theme, &body.mode) {
+        return Err(ApiError::bad_request("not a theme"));
+    }
+    state.ctx.db.set_theme(user.id, &body.theme, &body.mode)?;
+    Ok(StatusCode::NO_CONTENT)
+}
+
+fn theme_ok(theme: &str, mode: &str) -> bool {
+    (1..=20).contains(&theme.len())
+        && theme.bytes().all(|b| b.is_ascii_lowercase())
+        && ["light", "dark", "auto"].contains(&mode)
 }
 
 // ---- accounts: admin only ----
@@ -440,7 +479,55 @@ async fn login_page(State(state): State<WebState>, req: Request) -> Response {
     if vouched_name(&state.ctx.cfg(), &req).is_some() {
         return Redirect::to("/").into_response();
     }
-    Html(include_str!("../web/login.html")).into_response()
+    ([(header::CACHE_CONTROL, PAGE_CACHE)], Html(include_str!(concat!(env!("OUT_DIR"), "/login.html"))))
+        .into_response()
+}
+
+/// The pages are checked on every visit, so a browser always has the one naming the current
+/// scripts; the scripts, named by a hash of their contents (/app.js?v=<hash>, see
+/// web/build.mjs), are kept a year and never asked for again. A deploy that changes a script
+/// changes its name in the page, and the browser fetches it.
+const PAGE_CACHE: &str = "no-cache";
+const SCRIPT_CACHE: &str = "public, max-age=31536000, immutable";
+
+/// The page's script, and the sign-in page's. Outside the auth layer, like the icon: the sign-in
+/// page needs its own before anyone has signed in, and neither holds anything private.
+async fn app_js() -> impl IntoResponse {
+    script(include_str!(concat!(env!("OUT_DIR"), "/app.js")))
+}
+
+/// The stylesheet the app and admin pages share, named by hash in each as the scripts are.
+async fn app_css() -> impl IntoResponse {
+    (
+        [(header::CONTENT_TYPE, "text/css; charset=utf-8"), (header::CACHE_CONTROL, SCRIPT_CACHE)],
+        include_str!(concat!(env!("OUT_DIR"), "/app.css")),
+    )
+}
+
+/// The admin page and its script go to admins only: not just hidden from everyone else, never
+/// sent. Anyone else asking for the page is sent back to the app.
+async fn admin_page(State(state): State<WebState>, user: crate::db::User) -> Response {
+    if !user.is_admin {
+        return Redirect::to("/").into_response();
+    }
+    let theme = state.ctx.db.theme(user.id).unwrap_or_default();
+    let page = with_theme(include_str!(concat!(env!("OUT_DIR"), "/admin.html")), theme);
+    ([(header::CACHE_CONTROL, PAGE_CACHE)], Html(page)).into_response()
+}
+
+async fn admin_js(user: crate::db::User) -> Response {
+    if !user.is_admin {
+        return (StatusCode::FORBIDDEN, "only an admin").into_response();
+    }
+    script(include_str!(concat!(env!("OUT_DIR"), "/admin.js"))).into_response()
+}
+
+async fn login_js() -> impl IntoResponse {
+    script(include_str!(concat!(env!("OUT_DIR"), "/login.js")))
+}
+
+fn script(js: &'static str) -> impl IntoResponse {
+    ([(header::CONTENT_TYPE, "text/javascript; charset=utf-8"), (header::CACHE_CONTROL, SCRIPT_CACHE)], js)
 }
 
 /// The 2004 icon, served once for both pages rather than inlined as base64 into each. The
@@ -452,6 +539,35 @@ async fn icon() -> impl IntoResponse {
     )
 }
 
+/// The logo, squared up with transparent padding: it is 128x121, and a tab icon that is not
+/// square can be passed over. /favicon.ico is the same PNG, for a browser that asks for that
+/// on its own; behind the auth layer it answered 401, and the tab stayed blank.
+async fn favicon() -> impl IntoResponse {
+    (
+        [(header::CONTENT_TYPE, "image/png"), (header::CACHE_CONTROL, "max-age=86400")],
+        include_bytes!("../web/favicon.png").as_slice(),
+    )
+}
+
+/// For an iPhone's home screen, which paints a transparent icon's background black, so this
+/// one is on white.
+async fn touch_icon() -> impl IntoResponse {
+    (
+        [(header::CONTENT_TYPE, "image/png"), (header::CACHE_CONTROL, "max-age=86400")],
+        include_bytes!("../web/apple-touch-icon.png").as_slice(),
+    )
+}
+
+/// Inter, the pages' typeface, served from the binary as the icon is, so neither page loads
+/// anything from anyone else. Outside the auth layer for the sign-in page. Its licence, the SIL
+/// Open Font License, is web/Inter-LICENSE.txt.
+async fn inter() -> impl IntoResponse {
+    (
+        [(header::CONTENT_TYPE, "font/woff2"), (header::CACHE_CONTROL, "max-age=604800")],
+        include_bytes!("../web/InterVariable.woff2").as_slice(),
+    )
+}
+
 fn constant_time_eq(a: &str, b: &str) -> bool {
     let (a, b) = (a.as_bytes(), b.as_bytes());
     if a.len() != b.len() {
@@ -460,8 +576,45 @@ fn constant_time_eq(a: &str, b: &str) -> bool {
     a.iter().zip(b).fold(0u8, |acc, (x, y)| acc | (x ^ y)) == 0
 }
 
-async fn index() -> Html<&'static str> {
+// Built by build.rs from web/index.html and web/src, and minified: attribute values lose their
-    Html(include_str!("../web/index.html"))
+// quotes, so ADMIN_LINK and HTML_TAG are spelled the way the minifier leaves them.
+const INDEX: &str = include_str!(concat!(env!("OUT_DIR"), "/index.html"));
+const ADMIN_LINK: &str = "<a id=admin ";
+
+/// The page, with the log button left out for anyone but an admin. Hiding it from the page's
+/// script instead showed it for a moment on every load, until /api/me answered.
+async fn index(State(state): State<WebState>, user: crate::db::User) -> impl IntoResponse {
+    let theme = state.ctx.db.theme(user.id).unwrap_or_default();
+    ([(header::CACHE_CONTROL, PAGE_CACHE)], Html(page_for(user.is_admin, theme)))
+}
+
+const HTML_TAG: &str = "<html lang=en>";
+
+/// The page for this person: their theme on its <html> tag, and the link to /admin only if they
+/// are an admin. Not hidden for everyone else but left out: hiding it from the page's script
+/// showed it for a moment on every load, until /api/me answered (issue #29).
+fn page_for(admin: bool, theme: (Option<String>, Option<String>)) -> String {
+    let mut page = with_theme(INDEX, theme);
+    if !admin
+        && let Some(at) = page.find(ADMIN_LINK)
+        && let Some(len) = page[at..].find("</a>")
+    {
+        page.replace_range(at..at + len + "</a>".len(), "");
+    }
+    page
+}
+
+/// A page with the account's theme on its <html> tag, so it is drawn in it from the first frame
+/// on any browser.
+fn with_theme(page: &str, theme: (Option<String>, Option<String>)) -> String {
+    let (Some(t), Some(m)) = theme else { return page.to_owned() };
+    if !theme_ok(&t, &m) {
+        return page.to_owned();
+    }
+    // data-choice is light, dark or auto; data-mode, what the CSS reads, is only known here for
+    // the first two. theme.ts works Auto out from the system.
+    let mode = if m == "auto" { String::new() } else { format!(" data-mode={m}") };
+    page.replacen(HTML_TAG, &format!("<html lang=en data-theme={t} data-choice={m}{mode}>"), 1)
 }
 
 #[derive(Serialize)]
@@ -471,6 +624,9 @@ struct FeedRow {
     title: Option<String>,
     image: Option<String>,
     folder: Option<String>,
+    /// The Directory category an admin gave it, and the one the feed names itself, which wins.
+    category: Option<String>,
+    feed_category: Option<String>,
     keywords: Vec<String>,
     allow_explicit: bool,
     auto_download: bool,
@@ -496,6 +652,8 @@ struct FeedRow {
     unread: i64,
     /// Including you. More than one means every file here is shared.
     subscribers: i64,
+    /// Pinned to the top of your list.
+    pinned: bool,
 }
 
 #[derive(Serialize)]
@@ -523,6 +681,7 @@ async fn feeds(
         .map(|s| (s.feed_id.clone(), s))
         .collect();
     let counts = state.ctx.db.subscriber_counts()?;
+    let pinned = state.ctx.db.pinned_feeds(user.id)?;
     let mut out = Vec::with_capacity(mine.len());
     for sub in &subs {
         let (id, feed) = (&sub.id, &sub.cfg);
@@ -538,6 +697,8 @@ async fn feeds(
             title: s.title,
             image: s.image,
             folder: feed.folder.clone(),
+            category: feed.category.clone(),
+            feed_category: s.category,
             keywords: mine
                 .keywords
                 .clone()
@@ -581,6 +742,7 @@ async fn feeds(
             downloaded: s.downloaded,
             unread: state.ctx.db.unread_count(user.id, id)?,
             subscribers: counts.get(id).copied().unwrap_or(0),
+            pinned: pinned.contains(id),
         });
     }
     Ok(Json(out))
@@ -627,6 +789,11 @@ struct PopularRow {
     subscribers: i64,
     /// Yours already. Everyone counts, you included, so your own feeds are listed too.
     subscribed: bool,
+    /// The feed's own iTunes category, if it names one; most blogs do not.
+    category: Option<String>,
+    /// Any audio or video enclosure. Unlike category, every feed has an answer, so the
+    /// Directory's Podcasts and Blogs between them hold everything.
+    podcast: bool,
 }
 
 /// Every feed that may be listed, with everyone counted, you included, most subscribers
@@ -638,6 +805,7 @@ fn popular(state: &WebState, user_id: i64) -> Result<Vec<PopularRow>> {
     let mine: std::collections::HashSet<String> =
         db.subscriptions_for(user_id)?.into_iter().map(|s| s.feed_id).collect();
     let counts = db.subscriber_counts()?;
+    let media = db.media_feeds()?;
     let catalogue = crate::subscriptions(&state.ctx)?;
     let by_id: std::collections::HashMap<&str, &crate::config::Feed> =
         catalogue.iter().map(|s| (s.id.as_str(), &s.cfg)).collect();
@@ -657,7 +825,16 @@ fn popular(state: &WebState, user_id: i64) -> Result<Vec<PopularRow>> {
         }
         let sum = db.feed_summary(&s.id)?;
         let subscribed = mine.contains(&s.id);
-        out.push(PopularRow { id: s.id.clone(), title: sum.title, image: sum.image, subscribers: n, subscribed });
+        out.push(PopularRow {
+            id: s.id.clone(),
+            title: sum.title,
+            image: sum.image,
+            subscribers: n,
+            subscribed,
+            // The feed's own wins; an admin's is for the feeds, mostly blogs, that name none.
+            category: sum.category.or_else(|| s.cfg.category.clone()),
+            podcast: media.contains(&s.id),
+        });
     }
     out.sort_by(|a, b| b.subscribers.cmp(&a.subscribers).then_with(|| sort_name(a).cmp(&sort_name(b))));
     Ok(out)
@@ -749,6 +926,13 @@ impl ApiError {
             status: StatusCode::FORBIDDEN,
         }
     }
+
+    fn not_found(msg: impl Into<String>) -> Self {
+        Self {
+            error: anyhow::Error::msg(msg.into()),
+            status: StatusCode::NOT_FOUND,
+        }
+    }
 }
 
 impl IntoResponse for ApiError {
@@ -764,6 +948,38 @@ impl IntoResponse for ApiError {
 mod tests {
     use super::*;
 
+    #[test]
+    fn a_relative_image_resolves_against_the_post() {
+        let mut b = feed_sanitizer();
+        let html = r#"<img src="images/a.webp"><a href="/about">x</a><script>bad()</script>"#;
+        let out = clean_description(&mut b, html, Some("https://example.com/2026/04/post/"));
+        assert!(out.contains(r#"src="https://example.com/2026/04/post/images/a.webp""#), "{out}");
+        assert!(out.contains(r#"href="https://example.com/about""#), "{out}");
+        assert!(!out.contains("bad()"), "{out}");
+        assert!(out.contains(r#"referrerpolicy="no-referrer""#), "{out}");
+        assert!(clean_description(&mut b, html, None).contains(r#"src="images/a.webp""#));
+    }
+
+    #[test]
+    fn only_an_admin_is_sent_the_admin_link() {
+        // If the markup drifts from ADMIN_LINK, find matches nothing and says nothing.
+        assert!(page_for(true, (None, None)).contains(ADMIN_LINK));
+        let page = page_for(false, (None, None));
+        assert!(!page.contains(ADMIN_LINK) && !page.contains("href=/admin"), "the link is gone");
+        assert!(page.contains("id=prefs"), "and only the link: the settings button beside it stays");
+    }
+
+    #[test]
+    fn the_page_arrives_in_the_theme_the_account_chose() {
+        let page = |t: &str, m: &str| page_for(true, (Some(t.into()), Some(m.into())));
+        // If the minifier ever writes the tag differently, HTML_TAG matches nothing, silently.
+        assert!(page("dracula", "dark").contains("<html lang=en data-theme=dracula data-choice=dark data-mode=dark>"));
+        assert!(page("nordic", "auto").contains("<html lang=en data-theme=nordic data-choice=auto>"));
+        // Whatever is in the column is written into markup, so only a plain name gets there.
+        assert!(!page("x onload=alert(1)", "dark").contains("onload"));
+        assert!(page("modern", "dark\"").contains("<html lang=en>"));
+    }
+
     #[test]
     fn a_feed_with_a_credential_is_never_popular() {
         let f = |url: &str| crate::config::Feed {
@@ -779,6 +995,7 @@ mod tests {
             username: None,
             password: None,
             password_env: None,
+            category: None,
         };
         assert!(!looks_private(&f("https://feeds.twit.tv/twit.xml")));
         assert!(!looks_private(&f("https://example.com/rss?format=mp3")));
@@ -825,7 +1042,7 @@ mod tests {
         crate::config::Feed {
             url: url.into(), folder: None, group: None, media_types: None, schedule: None, keywords: vec![], allow_explicit: false,
             auto_download: true, max_new_per_check: None, username: None,
-            password: None, password_env: None,
+            password: None, password_env: None, category: None,
         }
     }
 
@@ -837,9 +1054,10 @@ mod tests {
         assert!(absent.schedule.is_none() && absent.folder.is_none());
 
         let cleared: FeedPatch =
-            serde_json::from_str(r#"{"schedule":null,"folder":null,"max_new_per_check":null}"#).unwrap();
+            serde_json::from_str(r#"{"schedule":null,"folder":null,"category":null,"max_new_per_check":null}"#).unwrap();
         assert_eq!(cleared.schedule, Some(None), "null must mean clear");
         assert_eq!(cleared.folder, Some(None));
+        assert_eq!(cleared.category, Some(None));
         assert_eq!(cleared.max_new_per_check, Some(None));
 
         let set: FeedPatch = serde_json::from_str(r#"{"schedule":"every 6h"}"#).unwrap();
@@ -934,20 +1152,40 @@ fn entry_page(
     );
     let mut rows =
         db.entries_in(user_id, feed, filter, search, page.offset, page.limit.clamp(1, 200), &order)?;
-    // Feed HTML is untrusted: it reaches the page only after ammonia has been through it.
+    let mut sanitizer = feed_sanitizer();
-    // Every link opens in a new tab -- ammonia's default rel="noopener noreferrer" already
-    // keeps that safe -- so following one in show notes never navigates away from ipx.
-    let mut sanitizer = ammonia::Builder::new();
-    sanitizer.add_tag_attributes("a", &["target"]).set_tag_attribute_value("a", "target", "_blank");
     for row in &mut rows {
         if let Some(d) = &row.description {
-            row.description = Some(sanitizer.clean(d).to_string());
+            row.description = Some(clean_description(&mut sanitizer, d, row.link.as_deref()));
         }
     }
     let total = db.count_in(user_id, feed, filter, search)?;
     Ok(Json(EntryPage { total, entries: rows }))
 }
 
+/// Feed HTML is untrusted: it reaches the page only after ammonia has been through it.
+fn feed_sanitizer() -> ammonia::Builder<'static> {
+    let mut b = ammonia::Builder::new();
+    // Every link opens in a new tab -- ammonia's default rel="noopener noreferrer" already
+    // keeps that safe -- so following one in show notes never navigates away from ipx.
+    b.add_tag_attributes("a", &["target"]).set_tag_attribute_value("a", "target", "_blank");
+    // An image is asked for without saying it is shown on ipx. A site that refuses images to
+    // other sites' pages goes by that: jeffgeerling.com answers 403, and his posts showed a
+    // broken image on iOS and only the alt text on desktop.
+    b.add_tag_attributes("img", &["referrerpolicy"]).set_tag_attribute_value("img", "referrerpolicy", "no-referrer");
+    b
+}
+
+/// A relative `src` or `href` in a post means relative to the post, not to ipx: The
+/// Observation Deck's `images/37k-a-day-bro.webp` came up as a broken image.
+fn clean_description(sanitizer: &mut ammonia::Builder, html: &str, link: Option<&str>) -> String {
+    let base = link.and_then(|l| url::Url::parse(l).ok());
+    sanitizer.url_relative(match base {
+        Some(b) => ammonia::UrlRelative::RewriteWithBase(b),
+        None => ammonia::UrlRelative::PassThrough,
+    });
+    sanitizer.clean(html).to_string()
+}
+
 #[derive(Deserialize)]
 struct NewFeed {
     url: String,
@@ -1024,11 +1262,14 @@ struct FeedPatch {
     schedule: Option<Option<String>>,
     #[serde(default, deserialize_with = "double_option")]
     folder: Option<Option<String>>,
+    #[serde(default, deserialize_with = "double_option")]
+    category: Option<Option<String>>,
     keywords: Option<Vec<String>>,
     allow_explicit: Option<bool>,
     auto_download: Option<bool>,
     #[serde(default, deserialize_with = "double_option")]
     max_new_per_check: Option<Option<usize>>,
+    pinned: Option<bool>,
 }
 
 fn double_option<'de, T, D>(de: D) -> Result<Option<Option<T>>, D::Error>
@@ -1045,6 +1286,12 @@ async fn patch_feed(
     user: crate::db::User,
     Json(body): Json<FeedPatch>,
 ) -> Result<StatusCode, ApiError> {
+    // Pinning is yours alone too, and means nothing for a feed you do not subscribe to.
+    if let Some(on) = body.pinned
+        && !state.ctx.db.set_pinned(user.id, &id, on)?
+    {
+        return Err(ApiError::not_found("you do not subscribe to that feed"));
+    }
     // What one person wants -- which items, whether to fetch them, how many at a time --
     // is theirs. It goes on their subscription and nobody else sees the change.
     if state.ctx.db.subscription(user.id, &id)?.is_some() {
@@ -1077,13 +1324,14 @@ async fn patch_feed(
 
     // The rest describes the feed itself -- where its files land, its address, when it is
     // polled -- and there is one of those however many people read it.
-    let feed_level = body.url.is_some() || body.folder.is_some() || body.schedule.is_some();
+    let feed_level =
+        body.url.is_some() || body.folder.is_some() || body.schedule.is_some() || body.category.is_some();
     if !feed_level {
         return Ok(StatusCode::NO_CONTENT);
     }
     if !user.is_admin {
         return Err(ApiError::forbidden(
-            "the feed's address, folder and schedule are the same for everyone, so only an admin changes them",
+            "the feed's address, folder, schedule and category are the same for everyone, so only an admin changes them",
         ));
     }
     let mut cfg = (*state.ctx.cfg()).clone();
@@ -1130,6 +1378,9 @@ async fn patch_feed(
     if let Some(v) = body.folder {
         feed.folder = v.filter(|s| !s.trim().is_empty());
     }
+    if let Some(v) = body.category {
+        feed.category = v.map(|s| s.trim().to_owned()).filter(|s| !s.is_empty());
+    }
     cfg.save(&state.config_path)?;
     state.ctx.reload_cfg(&state.config_path)?;
     if url_changed {
@@ -1245,9 +1496,9 @@ async fn delete_file(
         let complaint = match (starred, unread) {
             (0, 0) => None,
             (0, u) => Some(format!("{} subscribed to this feed {} not played it yet", people(u), if u == 1 { "has" } else { "have" })),
-            (st, 0) => Some(format!("another {} kept it", people(st))),
+            (st, 0) => Some(format!("another {} pinned it", people(st))),
             (st, u) => Some(format!(
-                "another {} kept it, and {} not played it yet",
+                "another {} pinned it, and {} not played it yet",
                 people(st),
                 if u == 1 { "one person has".to_string() } else { format!("{u} have") }
             )),
@@ -1335,6 +1586,8 @@ async fn media(
 #[derive(Deserialize)]
 struct Position {
     secs: i64,
+    /// The length the player measured, for an episode whose feed gives none.
+    duration: Option<i64>,
 }
 
 async fn set_position(
@@ -1343,7 +1596,7 @@ async fn set_position(
     user: crate::db::User,
     Json(body): Json<Position>,
 ) -> Result<StatusCode, ApiError> {
-    state.ctx.db.set_position(user.id, &feed_id, &guid, body.secs)?;
+    state.ctx.db.set_position(user.id, &feed_id, &guid, body.secs, body.duration)?;
     Ok(StatusCode::NO_CONTENT)
 }
 

tests/data/rss2.xml

@@ -6,6 +6,8 @@
     <description>A synthetic feed used by the parser tests.</description>
     <ttl>45</ttl>
     <itunes:explicit>no</itunes:explicit>
+    <itunes:category text="Technology"><itunes:category text="Podcasting"/></itunes:category>
+    <itunes:category text="News"/>
 
     <item>
       <title>Episode One</title>

tests/page-smoke.js

@@ -1,4 +1,5 @@
-// Executes web/index.html's script against a stub DOM and fails on anything thrown.
+// Builds a page from web/src as build.rs does, runs its script against a stub DOM, and fails
+// on anything thrown: web/index.html, then web/admin.html in a second run of this file.
 //
 // This exists because a ReferenceError at load once blanked the whole UI: a patch
 // anchored on a function that no longer existed, so `prefsModal` was referenced but
@@ -6,13 +7,20 @@
 // and every server-side test passed too, because the server was fine.
 //
 //   node tests/page-smoke.js
-const fs = require('fs');
-const path = require('path');
 const vm = require('vm');
+const PAGE = process.argv[2] || 'index.html';
 
-const html = fs.readFileSync(path.join(__dirname, '..', 'web', 'index.html'), 'utf8');
+const { buildPage } = require('../web/build.mjs');
-const script = html.split('<script>')[1].split('</script>')[0];
+// What ships: minified, so an id may have lost its quotes.
-const ids = new Set([...html.matchAll(/id="([^"]+)"/g)].map(m => m[1]));
+const { html, js: script, script: file } = buildPage(PAGE);
+if (!/<link rel=stylesheet href="?\/app\.css\?v=[0-9a-f]{12}"?>/.test(html) && PAGE !== 'login.html') {
+  console.error(`FAIL: ${PAGE} does not load /app.css?v=<hash>`); process.exit(1);
+}
+if (!new RegExp(`<script src="?/${file.replace('.', '\\.')}\\?v=[0-9a-f]{12}"?>`).test(html)) {
+  console.error(`FAIL: the page does not load /${file}?v=<hash>`); process.exit(1);
+}
+// Ids in the page, and in the markup the script builds for its dialogs.
+const ids = new Set([...(html + script).matchAll(/\bid=(?:"([^"]+)"|([^\s>"']+))/g)].map(m => m[1] || m[2]));
 
 const missing = [];
 const el = (name) => new Proxy({ style: { setProperty(){}, getPropertyValue(){ return ''; } }, dataset: {}, classList: { add(){}, remove(){}, toggle(){}, contains(){ return false; } },
@@ -60,11 +68,12 @@ const ctx = {
   URLSearchParams, encodeURIComponent, decodeURIComponent, parseInt, parseFloat, isNaN,
 };
 ctx.globalThis = ctx;
-ctx.window.location = { href: '' };
+ctx.window.location = { href: '', hash: '' };
+ctx.location = ctx.window.location;
 
 try {
   vm.createContext(ctx);
-  vm.runInContext(script, ctx, { filename: 'index.html<script>', timeout: 5000 });
+  vm.runInContext(script, ctx, { filename: `${PAGE}<script>`, timeout: 5000 });
 } catch (e) {
   console.error('FAIL: the page script threw while loading\n  ' + e.stack.split('\n').slice(0, 3).join('\n  '));
   process.exit(1);
@@ -78,18 +87,22 @@ const feed = {
   schedule: 'every 6h', schedule_mins: 360, every_mins: 360,
   last_checked: 1, next_check: 2, entries: 1, downloaded: 0, unread: 1, last_error: null,
 };
-const drive = [
+const drive = PAGE === 'admin.html' ? [
+  ['drawServer', () => ctx.drawServer()],
+  ['drawAccounts', () => ctx.drawAccounts()],
+  ['drawLogView', () => ctx.drawLogView()],
+] : [
   ['settingsModal', () => ctx.settingsModal(feed)],
   ['settingsModal (no override)', () => ctx.settingsModal({ ...feed, schedule: null, schedule_mins: null })],
   ['downloadLatestModal', () => ctx.downloadLatestModal(feed)],
   ['removeFeed', () => ctx.removeFeed(feed)],
   ['prefsModal', () => ctx.prefsModal()],
-  ['usersModal', () => ctx.usersModal()],
   ['opmlModal', () => ctx.opmlModal()],
   ['selectFeed (directory)', () => ctx.selectFeed(':directory')],
   ['selectFeed (popular)', () => ctx.selectFeed(':popular')],
+  ['selectFeed (currently listening)', () => ctx.selectFeed(':listening')],
   ['selectFeed (all subscriptions)', () => ctx.selectFeed(':all')],
-  ['logsModal', () => ctx.logsModal()],
+  ['keysModal', () => ctx.keysModal()],
   // `const S` is not reachable from here: top-level const/let do not become properties
   // of a vm context the way var and function declarations do.
   ['renderGroup', () => ctx.renderGroup(feed, [{ ...feed, id: 'child', group: 'f', orphaned: true }])],
@@ -106,10 +119,18 @@ for (const [name, fn] of drive) {
   }
 }
 
+// theme.ts keeps the Settings theme controls in step when Settings is open, and looks before it
+// touches them. The admin page has no Settings, so those are the ones it may ask for and not find.
+const OPTIONAL = new Set(['#stheme', '#smode', '#smodefield']);
+missing.splice(0, missing.length, ...missing.filter(sel => !OPTIONAL.has(sel)));
 if (missing.length) {
   console.error('FAIL: handlers wired to elements that do not exist: ' + [...new Set(missing)].join(', '));
   process.exit(1);
 }
-console.log('OK: page script loads clean, every selector it wires at load exists');
+console.log(`OK: ${PAGE}: its script loads clean, every selector it wires at load exists`);
-// logsModal arms a poll timer; without this the pending interval keeps node alive.
+// The admin page's log arms a poll timer; without an exit the pending interval keeps node alive.
+if (PAGE === 'index.html') {
+  const r = require('child_process').spawnSync(process.execPath, [__filename, 'admin.html'], { stdio: 'inherit' });
+  process.exit(r.status);
+}
 process.exit(0);

tests/ui/app.spec.js

@@ -20,62 +20,130 @@ test('the page loads and lists the configured feeds', async ({ page }) => {
   expect(errors, 'the page script must not throw at load').toEqual([]);
 });
 
-test('the theme toggle actually changes the theme', async ({ page }) => {
+test('the script is its own file, cached until a deploy changes it', async ({ page }) => {
-  // Regression: this button was wired after a line that threw, so it did nothing.
+  const js = page.waitForResponse(r => new URL(r.url()).pathname === '/app.js');
-  const before = await page.evaluate(() => document.documentElement.dataset.theme || 'system');
+  const doc = await page.reload();
-  await page.locator('#theme').click();
+  const r = await js;
-  await expect
+  // The page is checked every visit, so it always names the current script...
-    .poll(() => page.evaluate(() => document.documentElement.dataset.theme))
+  expect(doc.headers()['cache-control']).toBe('no-cache');
-    .not.toBe(before);
+  // ...by a hash of its contents, which is why the script itself can be kept for a year.
+  expect(new URL(r.url()).searchParams.get('v')).toMatch(/^[0-9a-f]{12}$/);
+  expect(r.headers()['cache-control']).toContain('immutable');
+  expect(r.headers()['content-type']).toContain('javascript');
+  expect(await page.locator('script:not([src])').count(), 'no inline script').toBe(0);
+  // The sign-in page's script loads before signing in.
+  const login = await page.request.get('/login.js', { headers: { cookie: '' } });
+  expect(login.status()).toBe(200);
 });
 
-test('the theme button steps through dark, light and classic, and remembers', async ({ page }) => {
+test('Settings picks a theme and, where it has both, light, dark or Auto', async ({ page }) => {
-  const theme = () => page.evaluate(() => document.documentElement.dataset.theme);
+  const root = () => page.evaluate(() => [document.documentElement.dataset.theme, document.documentElement.dataset.mode]);
-  for (let i = 0; i < 3 && (await theme()) !== 'classic'; i++) await page.locator('#theme').click();
+  const bg = () => page.evaluate(() => getComputedStyle(document.body).backgroundColor);
-  expect(await theme()).toBe('classic');
+  await page.locator('#prefs').click();
-  await expect(page.locator('#theme')).toHaveAttribute('title', /Classic.*Click for Auto/);
+  await expect(page.locator('#stheme')).toHaveValue((await root())[0]);
 
+  await page.locator('#stheme').selectOption('modern');
+  await page.locator('#smode').selectOption('auto');
+  // Auto follows the system, live, with no reload.
+  await page.emulateMedia({ colorScheme: 'light' });
+  await expect.poll(root).toEqual(['modern', 'light']);
+  await expect.poll(bg).toBe('rgb(242, 244, 247)');    // Modern's light --bg
+  await page.emulateMedia({ colorScheme: 'dark' });
+  await expect.poll(root).toEqual(['modern', 'dark']);
+  await expect.poll(bg).toBe('rgb(14, 19, 27)');       // Modern's dark --bg
+
+  // Dracula, then its light half, Alucard.
+  await page.locator('#stheme').selectOption('dracula');
+  await page.locator('#smode').selectOption('dark');
+  await expect.poll(bg).toBe('rgb(40, 42, 54)');       // #282A36
+  await page.locator('#smode').selectOption('light');
+  await expect.poll(bg).toBe('rgb(255, 251, 235)');    // #FFFBEB
+
+  // Classic and Paper come one way only, so there is nothing to choose.
+  await page.locator('#stheme').selectOption('paper');
+  await expect(page.locator('#smode')).toBeHidden();
+  await expect.poll(bg).toBe('rgb(242, 238, 222)');    // #F2EEDE
+  // The save that says Classic: the ones before it may still be answering.
+  const saved = page.waitForResponse(r => r.url().endsWith('/api/me') && r.request().method() === 'PATCH'
+    && r.request().postDataJSON().theme === 'classic');
+  await page.locator('#stheme').selectOption('classic');
+  await expect(page.locator('#smode')).toBeHidden();
+  await saved;                                         // kept on the account, not the browser
   await page.reload();
-  await expect.poll(theme).toBe('classic');
+  await expect.poll(root).toEqual(['classic', 'light']);
   // The 2004 Mac app set its type in Lucida Grande.
   expect(await page.evaluate(() => getComputedStyle(document.body).fontFamily)).toContain('Lucida Grande');
+  expect(await page.locator('#theme').count(), 'the theme lives in Settings only').toBe(0);
+
+  // Back to Nordic, dark: the mode chosen before Classic is kept for the themes that have one.
+  await page.locator('#prefs').click();
+  await page.locator('#stheme').selectOption('nordic');
+  await expect(page.locator('#smode')).toHaveValue('light');
+  await page.locator('#smode').selectOption('dark');
+  await expect.poll(bg).toBe('rgb(46, 52, 64)');       // nord0
 });
 
-test('the theme dropdown in Settings jumps straight to a theme, including Auto', async ({ page }) => {
+test('the theme is kept on the account, and follows it to another browser', async ({ page, browser }) => {
-  const theme = () => page.evaluate(() => document.documentElement.dataset.theme);
   await page.locator('#prefs').click();
-  await expect(page.locator('#stheme')).toHaveValue(await theme());
+  const saved = page.waitForResponse(r => r.url().endsWith('/api/me') && r.request().method() === 'PATCH');
+  await page.locator('#stheme').selectOption('flatremix');
+  expect((await saved).status()).toBe(204);
+  const saved2 = page.waitForResponse(r => r.url().endsWith('/api/me') && r.request().method() === 'PATCH');
+  await page.locator('#smode').selectOption('light');
+  await saved2;
 
-  await page.locator('#stheme').selectOption('auto');
+  // Another browser: nothing in its localStorage, and the page still arrives in the theme,
-  await expect.poll(theme).toBe('auto');
+  // written onto <html> by the server rather than set once the script has run.
-  // Auto follows the system; emulating a light system must show the light palette live,
+  const other = await browser.newContext();
-  // no reload needed, since it is a media query rather than something JS picks per click.
+  const p2 = await other.newPage();
-  await page.emulateMedia({ colorScheme: 'light' });
+  const res = await p2.goto(`/?token=${TOKEN}`);
-  await expect.poll(() => page.evaluate(() => getComputedStyle(document.body).backgroundColor))
+  expect(await res.text()).toContain('data-theme=flatremix data-choice=light data-mode=light');
-    .toBe('rgb(242, 244, 247)');   // --bg in the light palette
+  expect(await p2.evaluate(() => [document.documentElement.dataset.theme, document.documentElement.dataset.mode]))
-  await page.emulateMedia({ colorScheme: 'dark' });
+    .toEqual(['flatremix', 'light']);
-  await expect.poll(() => page.evaluate(() => getComputedStyle(document.body).backgroundColor))
+  await other.close();
-    .toBe('rgb(14, 19, 27)');      // the bare :root is already dark; Auto adds nothing here
-
-  // The header button and the dropdown are the same one setting, not two.
-  await page.locator('#modalCard .cardacts .btn').first().click();   // Cancel, closing the modal
-  await page.locator('#theme').click();
-  expect(await theme()).toBe('dark');
 });
 
-test('settings opens and saves the global schedule', async ({ page }) => {
+test('a theme this browser kept before themes were on the account goes up to it once', async ({ browser }) => {
-  await page.locator('#prefs').click();
+  // A new account, made by the proxy header on first sight, so it has no theme of its own yet.
-  await expect(page.locator('#modal.on')).toBeVisible();
+  const who = `theme-${Date.now()}@example.com`;
-  await expect(page.locator('#gnum')).toBeVisible();
+  const ctx = await browser.newContext({ extraHTTPHeaders: { 'X-Test-User': who } });
+  // From before light and dark: ipx.theme alone, 'light' meaning Modern, light.
+  await ctx.addInitScript(() => { localStorage.setItem('ipx.theme', 'light'); localStorage.removeItem('ipx.mode'); });
+  const page = await ctx.newPage();
+  const saved = page.waitForResponse(r => r.url().endsWith('/api/me') && r.request().method() === 'PATCH');
+  await page.goto('/');
+  expect(await page.evaluate(() => [document.documentElement.dataset.theme, document.documentElement.dataset.mode]))
+    .toEqual(['modern', 'light']);
+  expect((await saved).request().postDataJSON()).toEqual({ theme: 'modern', mode: 'light' });
+  await ctx.close();
+
+  // Anywhere else now, it comes from the account.
+  const fresh = await browser.newContext({ extraHTTPHeaders: { 'X-Test-User': who } });
+  const p2 = await fresh.newPage();
+  const res = await p2.goto('/');
+  expect(await res.text()).toContain('data-theme=modern data-choice=light');
+  await fresh.close();
+});
+
+test('the admin page saves the global schedule', async ({ page }) => {
+  // Reached from the header's Admin link, and on its own page, not in Settings (issue #19).
+  await page.locator('#admin').click();
+  await expect(page).toHaveURL(/\/admin$/);
+  await expect(page.locator('#atabs a.on')).toHaveText('Server');
   await page.locator('#gnum').fill('4');
   await page.locator('#gunit').selectOption('h');
   await page.locator('#gsave').click();
-  await expect(page.locator('#modal.on')).toBeHidden();
+  await expect(page.locator('#toasts')).toContainText('Settings saved');
 
   // It must survive a reload, i.e. actually reach the config.
-  await page.locator('#prefs').click();
+  await page.reload();
   await expect(page.locator('#gnum')).toHaveValue('4');
   await expect(page.locator('#gunit')).toHaveValue('h');
+  // And Settings in the app no longer has it.
+  await page.goto('/');
+  await page.locator('#prefs').click();
+  await expect(page.locator('#modalCard')).toContainText('Theme');
+  await expect(page.locator('#gnum')).toHaveCount(0);
 });
 
 test('episodes show with their metadata, and the text opens below', async ({ page }) => {
@@ -120,6 +188,35 @@ test('the three panes are there and the item text lands in the bottom one', asyn
   await expect(page.locator('#files [data-a="play"]')).toHaveCount(0);
 });
 
+test('while an episode plays, its play buttons all say pause, and pause it', async ({ page }) => {
+  await page.locator('.feed', { hasText: 'Test Show' }).click();
+  await page.locator('.tabs button', { hasText: 'All' }).first().click();
+  const downloaded = page.locator('.ep', { has: page.locator('.kind.here') }).first();
+  await expect(downloaded).toBeVisible({ timeout: 20_000 });
+  await downloaded.click();
+  // What the buttons do, not whether this browser decodes the fixture: it does not, reliably,
+  // and a load error pauses the player, rightly turning every button back to play. So the
+  // player plays and pauses here as a real one does, events and all, with no file behind it.
+  await page.evaluate(() => {
+    let paused = true;
+    Object.defineProperty(audio, 'paused', { get: () => paused, configurable: true });
+    audio.play = async () => { paused = false; audio.dispatchEvent(new Event('play')); };
+    audio.pause = () => { paused = true; audio.dispatchEvent(new Event('pause')); };
+  });
+  const pane = page.locator('#files [data-a="play"]');
+  await pane.click();
+  await expect.poll(() => page.evaluate(() => !audio.paused)).toBe(true);
+  // The files pane, the row and the toolbar all follow the player bar, not only the bar.
+  await expect(pane).toHaveAttribute('title', 'Pause');
+  await expect(downloaded.locator('[data-a="play"]')).toHaveAttribute('title', 'Pause');
+  await expect(page.locator('#tbPlay')).toHaveAttribute('title', 'Pause');
+  await pane.click();                                           // and pressing it pauses
+  await expect.poll(() => page.evaluate(() => audio.paused)).toBe(true);
+  await expect(pane).toHaveAttribute('title', 'Play');
+  await expect(page.locator('#tbPlay')).toHaveAttribute('title', 'Play the selected item');
+  await page.locator('#pclose').click();
+});
+
 test('a downloaded file that is not audio gets no player', async ({ page }) => {
   // Regression: anything with a file got an <audio> element and a play button, so a blog's
   // header image rendered as a broken player.
@@ -155,30 +252,69 @@ test('an item with several enclosures lists them all', async ({ page }) => {
   await expect(page.locator('#files .encbox').nth(1).locator('.kind[title^="image"]')).toBeVisible();
 });
 
-test('Currently Listening, below Popular, resumes an episode you started', async ({ page }) => {
+test('Currently Listening, its own place below Popular, resumes an episode you started or forgets it', async ({ page }) => {
-  // Second Episode (900s) is 42 seconds in and unfinished. Which of Test Show's two episodes
+  // Second Episode (900s) is 42 seconds in and unfinished. An earlier test may have opened it,
-  // the daemon auto-downloaded is not fixed (see the three-panes test above), so an earlier
+  // and opening marks it read; it is listed all the same, because read is not finished. This
-  // test may have opened -- and so read -- this one already; reset it before relying on it.
+  // test used to set it unread first, which hid exactly the bug in issue #14.
   await page.evaluate(() =>
-    api('/api/entries/test-show/ui-2/flags', { method: 'POST', body: JSON.stringify({ read: false }) }));
+    api('/api/entries/test-show/ui-2/flags', { method: 'POST', body: JSON.stringify({ read: true }) }));
   await page.evaluate(() =>
     api('/api/entries/test-show/ui-2/position', { method: 'POST', body: JSON.stringify({ secs: 42 }) }));
 
+  // Popular lists feeds and nothing else; the episodes have a place of their own under it.
   await page.locator('#feedlist .place', { hasText: 'Popular' }).click();
+  await expect(page.locator('#popular')).toBeVisible();
+  await expect(page.locator('#listening')).toHaveCount(0);
+  const places = await page.locator('#feedlist .place b').allTextContents();
+  expect(places.indexOf('Currently Listening')).toBe(places.indexOf('Popular') + 1);
+
+  await page.locator('#feedlist .place', { hasText: 'Currently Listening' }).click();
   const row = page.locator('#listening .childrow', { hasText: 'Second Episode' });
   await expect(row).toBeVisible({ timeout: 20_000 });
-  await expect(row).toContainText('0:42 of 15:00');
+  await expect(row).toContainText('14:18 left');
 
+  // Removing it forgets where you got to, so it is still gone on the next visit.
+  await row.locator('[data-a=remove]').click();
+  await expect(row).toHaveCount(0);
+  await expect(page.locator('#player')).not.toBeVisible();
+  await page.locator('#feedlist .place', { hasText: 'Currently Listening' }).click();
+  await expect(page.locator('#listening')).not.toContainText('Second Episode', { timeout: 20_000 });
+
+  // Started again, it is back, and clicking the row resumes it. Finishing it (90%) is
+  // covered in the Rust tests; here the player's own save on close would race it.
+  await page.evaluate(() =>
+    api('/api/entries/test-show/ui-2/position', { method: 'POST', body: JSON.stringify({ secs: 42 }) }));
+  await page.locator('#feedlist .place', { hasText: 'Currently Listening' }).click();
+  await expect(row).toBeVisible({ timeout: 20_000 });
   await row.click();
   await expect(page.locator('#player')).toBeVisible();
   await expect(page.locator('#ptitle')).toHaveText('Second Episode');
+  // The row in the player carries the EQ bars, as the feed view's does, until the player closes.
+  await expect(row).toHaveClass(/\bnow\b/);
+  await expect(row.locator('.eq')).toBeVisible();
   await page.locator('#pclose').click();
+  await expect(row).not.toHaveClass(/\bnow\b/);
+  await expect(row.locator('.eq')).toBeHidden();
+});
 
-  // Finished (read) drops it from the list, however far it got.
+test('a player nobody has played since it last saved does not save again', async ({ page }) => {
-  await page.evaluate(() =>
+  // A tab left paused at 41:15 saved that as it reloaded, over the 32:48 another had reached,
-    api('/api/entries/test-show/ui-2/flags', { method: 'POST', body: JSON.stringify({ read: true }) }));
+  // and the episode dropped out of Currently Listening. The fixture audio does not decode, so
-  await page.locator('#feedlist .place', { hasText: 'Popular' }).click();
+  // this stands in for a loaded file paused at 2 seconds and counts what savePos sends.
-  await expect(page.locator('#listening')).not.toContainText('Second Episode', { timeout: 20_000 });
+  const sent = await page.evaluate(() => {
+    Object.defineProperty(audio, 'readyState', { get: () => 4 });
+    Object.defineProperty(audio, 'currentTime', { get: () => 2, set() {} });
+    let n = 0;
+    navigator.sendBeacon = () => (n++, true);
+    player.guid = 'ui-2'; player.feed = 'test-show'; player.entry = null; player.moved = false;
+    savePos();                     // what a reload, a pause or the close button calls
+    const idle = n;
+    player.moved = true;           // what playing sets
+    savePos();
+    savePos();                     // and once saved, it is idle again
+    return [idle, n];
+  });
+  expect(sent).toEqual([0, 1]);
 });
 
 test('the filter tabs change what is listed', async ({ page }) => {
@@ -190,10 +326,36 @@ test('the filter tabs change what is listed', async ({ page }) => {
   await page.locator('.tabs button', { hasText: 'Unread' }).first().click();
   expect(await page.locator('.ep').count()).toBeLessThanOrEqual(all);
 
-  await page.locator('.tabs button', { hasText: 'Kept' }).first().click();
+  await page.locator('.tabs button', { hasText: 'Pinned' }).first().click();
   await expect(page.locator('#count')).toContainText('0 items');
 });
 
+test('on the Unread tab an item stays while you read it and goes when you move on', async ({ page }) => {
+  await page.locator('.feed', { hasText: 'Test Show' }).click();
+  await page.locator('.tabs button', { hasText: 'All' }).first().click();
+  await expect(page.locator('.ep').nth(1)).toBeVisible({ timeout: 20_000 });
+  // Earlier tests read things; make the first two unread with their own dots.
+  for (const i of [0, 1]) {
+    const row = page.locator('.ep').nth(i);
+    if (await row.evaluate(r => r.classList.contains('read'))) {
+      await row.locator('[data-a="read"]').click();
+      await expect(page.locator('.ep').nth(i)).not.toHaveClass(/\bread\b/);
+    }
+  }
+  await page.locator('.tabs button', { hasText: 'Unread' }).first().click();
+  const first = page.locator('.ep').first();
+  const guid = await first.getAttribute('data-guid');
+  await first.click();
+  const it = page.locator(`.ep[data-guid="${guid}"]`);
+  await expect(it).toHaveClass(/\bread\b/);
+  await page.waitForTimeout(1500);   // past the SSE refresh debounce and loadFeeds
+  await expect(it).toBeVisible();
+
+  await page.locator('.ep').nth(1).click();
+  await expect(it).toHaveCount(0);
+  await page.locator('.tabs button', { hasText: 'All' }).first().click();
+});
+
 test('a feed URL is editable and has a copy button', async ({ page }) => {
   await page.locator('.feed', { hasText: 'Test Show' }).click();
   await page.locator('#content .acts [data-a="settings"]').click();
@@ -209,7 +371,7 @@ test('a feed URL is editable and has a copy button', async ({ page }) => {
 });
 
 test('the log view has tabs and shows daemon traffic', async ({ page }) => {
-  await page.locator('#logs').click();
+  await page.goto('/admin#log');
   await expect(page.locator('#logbox')).toBeVisible();
   await expect(page.locator('#logtabs button')).toHaveCount(4);
 
@@ -407,18 +569,22 @@ test('a second person has their own feeds and their own read state', async ({ br
 
   // Sam subscribes to nothing yet, so sees nothing -- the admin's feeds are not theirs.
   await expect(page.locator('#feedlist')).toContainText('No feeds.');
-  // Settings stays: Sam has their own subscriptions to export and import, and the
+  // Settings stays: Sam has their own theme and subscriptions. The admin page -- the server's
-  // schedule and quota are worth seeing even without a say in them. Only the log and the
+  // settings, the accounts and the log -- is an admin's alone, and Sam is not even sent the
-  // users screen -- and the server -- are an admin's alone.
+  // link to it, never mind the page.
   await expect(page.locator('#prefs')).toBeVisible();
   await page.locator('#prefs').click();
   await expect(page.locator('#modalCard')).toContainText('Subscriptions');
-  await expect(page.locator('#gsave')).toBeHidden();
+  await expect(page.locator('#modalCard')).toContainText('Only an admin changes this');
-  await expect(page.locator('#gusers')).toBeHidden();
   await page.locator('#modalCard .cardacts .btn').first().click();
-  // Hiding the button is not the guard; the server is.
+  await expect(page.locator('#admin')).toHaveCount(0);
+  expect(await (await page.request.get('/')).text()).not.toContain('href=/admin');
+  // Asking for it anyway goes back to the app, and its script is refused.
+  await page.goto('/admin');
+  await expect(page).toHaveURL(/:8791\/$/);
+  expect((await page.request.get('/admin.js')).status()).toBe(403);
+  // Hiding the way in is not the guard; the server is.
   expect((await page.request.get('/api/users')).status()).toBe(403);
-  await expect(page.locator('#logs')).toBeHidden();
   expect((await page.request.get('/api/logs')).status()).toBe(403);
 
   // Subscribing to a feed the admin already has costs no second fetch: same feed, same
@@ -474,11 +640,12 @@ test('deleting a shared file warns that it is everyone\'s copy', async ({ page }
 
 // Every row says "Admin" on its checkbox, so match the name exactly.
 const userRow = (page, name) =>
-  page.locator('#modalCard [data-id]').filter({ has: page.locator('b', { hasText: new RegExp(`^${name}$`) }) });
+  page.locator('#accounts [data-id]').filter({ has: page.locator('b', { hasText: new RegExp(`^${name}$`) }) });
 
 async function openUsers(page) {
-  await page.locator('#prefs').click();
+  await page.goto('/admin');
-  await page.locator('#gusers').click();
+  await page.locator('#atabs a', { hasText: 'Accounts' }).click();
+  await expect(page).toHaveURL(/\/admin#accounts$/);
   await expect(userRow(page, 'admin')).toBeVisible();
 }
 
@@ -695,25 +862,47 @@ test('Popular lists what everyone here reads, but never a private feed', async (
   expect(top.every(t => ids.includes(t.id))).toBe(true);
   expect(ids).not.toContain('paid-show');
 
-  // Subscribe from the directory this time; the popular list shares the same rows.
+  // Subscribe from the directory this time: the same feeds, as a grid of cover art.
+  const tiles = piper.locator('#popular .tile');
+  const pick = (row, name) => piper.locator(`#dirbar .${row} button`, { hasText: new RegExp(`^${name}$`) });
   await piper.locator('#feedlist .place', { hasText: 'Directory' }).click();
   await expect(piper.locator('#count')).toContainText(`Directory: ${dir.length} feed`);
-  await expect(offered.filter({ hasText: 'Test Show' })).toBeVisible();
+  await expect(tiles.filter({ hasText: 'Test Show' })).toBeVisible();
-  await expect(offered.filter({ hasText: /Grouped Show|grouped-show/ })).toBeVisible();
+  await expect(tiles.filter({ hasText: /Grouped Show|grouped-show/ })).toBeVisible();
-  await expect(offered.filter({ hasText: /Test Subscriptions/ })).toHaveCount(0);
+  await expect(tiles.filter({ hasText: /Test Subscriptions/ })).toHaveCount(0);
-  await expect(offered.filter({ hasText: /Paid Show|paid-show/ })).toHaveCount(0);
+  await expect(tiles.filter({ hasText: /Paid Show|paid-show/ })).toHaveCount(0);
+  await expect(tiles).toHaveCount(dir.length);
 
-  // Add a feed opened over Directory fills its own list, not the pane behind it.
+  // Two filters that combine: what a feed is, and what it is about.
+  expect(dir.find(p => p.id === 'test-show')).toMatchObject({ podcast: true, category: 'Technology' });
+  expect(dir.find(p => p.id === 'picture-blog')).toMatchObject({ podcast: false });
+  await pick('tabs', 'Blogs').click();
+  await expect(tiles).toHaveCount(dir.filter(p => !p.podcast).length);
+  await expect(tiles.filter({ hasText: 'Test Show' })).toHaveCount(0);
+  // No empty chips: no blog here names Technology, so Blogs does not offer it.
+  await expect(pick('chips', 'Technology')).toHaveCount(0);
+  await pick('tabs', 'Podcasts').click();
+  await pick('chips', 'Technology').click();
+  await expect(pick('chips', 'Technology')).toHaveAttribute('aria-pressed', 'true');
+  await expect(tiles).toHaveCount(dir.filter(p => p.podcast && p.category === 'Technology').length);
+  // A second press lifts the chip and leaves the kind as it was.
+  await pick('chips', 'Technology').click();
+  await expect(tiles).toHaveCount(dir.filter(p => p.podcast).length);
+  await pick('tabs', 'All').click();
+  await expect(tiles).toHaveCount(dir.length);
+
+  // Add a feed is for an address; Popular and Directory are where you browse (issue #30).
   await piper.locator('#addFeed').click();
-  await expect(piper.locator('#modalCard .childrow', { hasText: 'Test Show' })).toBeVisible();
+  await expect(piper.locator('#nurl')).toBeVisible();
-  await expect(offered).toHaveCount(dir.length);
+  await expect(piper.locator('#modalCard .childrow')).toHaveCount(0);
+  await expect(tiles).toHaveCount(dir.length);
   await piper.locator('#modalCard button[title="Cancel"]').click();
 
   const row = async () =>
     (await (await piper.request.get('/api/popular')).json()).find(p => p.id === 'test-show');
   const before = await row();
   expect(before.subscribed).toBe(false);
-  await offered.filter({ hasText: 'Test Show' }).locator('button[title="Subscribe"]').click();
+  await tiles.filter({ hasText: 'Test Show' }).locator('button[title="Subscribe"]').click();
   await expect(piper.locator('#feedlist .feed', { hasText: 'Test Show' })).toBeVisible({ timeout: 20_000 });
 
   // Everyone counts, you included: it stays listed, marked as yours, with one more subscriber.
@@ -759,13 +948,14 @@ test('a deleted file looks as if it was never downloaded', async ({ page }) => {
 });
 
 test('one action, one icon: the toolbar, the page and every dialog agree', async ({ page }) => {
-  const icon = loc => loc.locator('svg path').first().getAttribute('d');
+  // The whole glyph, not just its path: pinned and not pinned share one outline and differ in fill.
+  const icon = loc => loc.locator('svg').first().innerHTML();
   await page.locator('#feedlist .feed', { hasText: 'Test Show' }).first().click();
 
   // Unsubscribe is a minus in the toolbar and the feed header, never the x that closes things.
   expect(await icon(page.locator('#content .acts [data-a="rm"]'))).toBe(await icon(page.locator('#tbRemove')));
 
-  // The toolbar's read and keep show the selected item's state, as its own buttons do, and follow
+  // The toolbar's read and pin show the selected item's state, as its own buttons do, and follow
   // a change made from the toolbar.
   await page.locator('.ep').first().click();
   const pair = async a => [await icon(page.locator(a === 'read' ? '#tbRead' : '#tbFlag')),
@@ -781,9 +971,7 @@ test('one action, one icon: the toolbar, the page and every dialog agree', async
   const dialogs = [
     () => page.locator('#addFeed').click(),
     () => page.locator('#prefs').click(),
-    async () => { await page.locator('#prefs').click(); await page.locator('#gusers').click(); },
     async () => { await page.locator('#prefs').click(); await page.locator('#gopml').click(); },
-    () => page.locator('#logs').click(),
     () => page.locator('#content .acts [data-a="settings"]').click(),
     () => page.locator('#content .acts [data-a="dl"]').click(),
     () => page.locator('#content .acts [data-a="rm"]').click(),
@@ -808,6 +996,9 @@ test('All Subscriptions marks everything read, across every feed', async ({ page
   // its own button makes it unread again.
   await page.locator('.ep').first().click();
   await page.locator('#detail [data-a="read"][title="Mark unread"]').click();
+  // The button turns only once the server has it. The badge was no proof: it was seldom 0 to
+  // begin with, and a mark-unread still in flight could land after the read-all below.
+  await expect(page.locator('#detail [data-a="read"][title="Mark read"]')).toBeVisible();
   await expect(all.locator('.badge')).not.toHaveText('0');
 
   page.once('dialog', d => d.accept());
@@ -890,3 +1081,221 @@ test('someone the proxy signs in never sees the password page, and signs out thr
   await expect(proxied).toHaveURL(/\/signed-out-by-the-proxy$/);
   await ctx.close();
 });
+
+test('keys move through items and places, after Feedly', async ({ page }) => {
+  // Last in the file: selecting an item marks it read, which would change what later tests see.
+  await page.locator('.feed', { hasText: 'Test Show' }).click();
+  const rows = page.locator('#eps .ep');
+  await expect(rows.nth(1)).toBeVisible({ timeout: 20_000 });
+  const sel = page.locator('#eps .ep.sel');
+  const guid = i => rows.nth(i).getAttribute('data-guid');
+  await page.keyboard.press('j');
+  await expect(sel).toHaveAttribute('data-guid', await guid(0));
+  await page.keyboard.press('j');
+  await expect(sel).toHaveAttribute('data-guid', await guid(1));
+  await page.keyboard.press('k');
+  await expect(sel).toHaveAttribute('data-guid', await guid(0));
+
+  // g and a letter go somewhere; typed into a box, the same letters are only text.
+  await page.keyboard.press('g');
+  await page.keyboard.press('d');
+  await expect(page.locator('#count')).toContainText('Directory');
+  await page.locator('#epSearch').focus();
+  await page.keyboard.type('ga');
+  await expect(page.locator('#count')).toContainText('Directory');
+  await page.locator('#epSearch').fill('');
+  await page.locator('#epSearch').blur();
+
+  await page.keyboard.press('?');
+  await expect(page.locator('#modalCard')).toContainText('Keyboard shortcuts');
+  await page.keyboard.press('Escape');
+  await page.keyboard.press('g');
+  await page.keyboard.press('a');
+  await expect(page.locator('#count')).toContainText('All Subscriptions');
+});
+
+test('an admin can give a blog its Directory category', async ({ page }) => {
+  const patch = (id, category) => page.evaluate(([id, category]) =>
+    api(`/api/feeds/${id}`, { method: 'PATCH', body: JSON.stringify({ category }) }), [id, category]);
+  const listed = async id => (await page.evaluate(() => api('/api/directory'))).find(p => p.id === id);
+
+  await patch('picture-blog', 'Visual Arts');
+  expect(await listed('picture-blog')).toMatchObject({ podcast: false, category: 'Visual Arts' });
+  // A feed's own iTunes category wins over one given here.
+  await patch('test-show', 'Comedy');
+  expect((await listed('test-show')).category).toBe('Technology');
+
+  for (const id of ['picture-blog', 'test-show']) await patch(id, null);
+  expect((await listed('picture-blog')).category).toBeNull();
+});
+
+test('the pinned heading sits over its pins, and the page is set in Inter', async ({ page }) => {
+  await page.locator('.feed', { hasText: 'Test Show' }).click();
+  await expect(page.locator('#eps .ep').first()).toBeVisible({ timeout: 20_000 });
+  const boxes = {
+    headCell: await page.locator('.ephead [data-sort="kept"]').boundingBox(),
+    headIcon: await page.locator('.ephead [data-sort="kept"] svg').first().boundingBox(),
+    rowCell: await page.locator('#eps .ep .fl').first().boundingBox(),
+    rowIcon: await page.locator('#eps .ep .fl svg').first().boundingBox(),
+  };
+  const mid = b => b.x + b.width / 2;
+  expect(Math.abs(mid(boxes.headIcon) - mid(boxes.rowIcon)), JSON.stringify(boxes)).toBeLessThan(1);
+
+  // From ipx itself, not a font service.
+  expect((await page.request.get('/inter.woff2')).headers()['content-type']).toBe('font/woff2');
+  expect(await page.evaluate(() => document.fonts.ready.then(() => document.fonts.check('14px Inter')))).toBe(true);
+});
+
+test.describe('on a phone', () => {
+  test.use({ viewport: { width: 390, height: 844 }, hasTouch: true, isMobile: true });
+
+  test('a downloaded file can be deleted, from above the show notes', async ({ page }) => {
+    await page.locator('#burger').click();
+    await page.locator('.feed', { hasText: 'Test Show' }).click();
+    await page.locator('.tabs button', { hasText: 'Downloaded' }).first().click();
+    await page.locator('.ep').first().click();
+    const del = page.locator('#detail [data-a="del"]');
+    await expect(del).toBeInViewport();
+    // Below a long set of notes it was screens down and looked missing (issue #21).
+    expect(await page.locator('#detail').evaluate(d =>
+      !!(d.querySelector('.encbox').compareDocumentPosition(d.querySelector('.dbody')) & Node.DOCUMENT_POSITION_FOLLOWING)))
+      .toBe(true);
+  });
+});
+
+test('a file not yet downloaded has its icon in line with the rest of its row', async ({ page }) => {
+  await page.locator('#feedlist .place', { hasText: 'All Subscriptions' }).click();
+  await expect(page.locator('.ep .dlbar').first()).toBeAttached({ timeout: 20_000 });
+  // The icon's middle against the date's, downloaded or not. The download bar used to take a
+  // line of its own and lift the icon of every pending file (issue #31).
+  const offsets = await page.$$eval('.ep', rows => rows.map(r => {
+    const k = r.querySelector('.file .kind'), d = r.querySelector('.date');
+    if (!k || !d) return null;
+    const a = k.getBoundingClientRect(), b = d.getBoundingClientRect();
+    return Math.round((a.top + a.height / 2) - (b.top + b.height / 2));
+  }).filter(x => x !== null));
+  expect(offsets.length).toBeGreaterThan(1);
+  for (const o of offsets) expect(Math.abs(o)).toBeLessThanOrEqual(1);
+});
+
+test('the favicon is the logo, square, from both pages', async ({ page }) => {
+  await expect(page.locator('link[rel="icon"]')).toHaveAttribute('href', '/favicon.png');
+  // A browser asks for /favicon.ico on its own, signed in or not.
+  for (const path of ['/favicon.ico', '/favicon.png', '/apple-touch-icon.png']) {
+    const r = await page.request.get(path, { headers: { cookie: '' } });
+    expect(r.status(), path).toBe(200);
+    expect(r.headers()['content-type'], path).toBe('image/png');
+  }
+});
+
+test('a feed error is marked in the same column as the folder triangles', async ({ page }) => {
+  await expect(page.locator('.feed.group .chev').first()).toBeVisible();
+  if ((await page.locator('.feed.group .chev').first().getAttribute('aria-expanded')) !== 'true')
+    await page.locator('.feed.group .chev').first().click();
+  // Faked in the page: no fixture feed fails. A feed on its own, and one inside a folder.
+  await page.evaluate(() => {
+    S.feeds.find(f => f.group).last_error = 'HTTP 404';
+    S.feeds.find(f => !f.group && !S.feeds.some(c => c.group === f.id)).last_error = 'timed out';
+    renderFeeds();
+  });
+  await expect(page.locator('.ferr')).toHaveCount(2);
+  await expect(page.locator('.ferr svg')).toHaveCount(2);            // the icon, not a "!"
+  await expect(page.locator('.chev.bad')).toHaveCount(1);            // the folder holding one
+  const xs = await page.$$eval('.chev, .ferr', els =>
+    els.map(e => { const r = e.getBoundingClientRect(); return Math.round(r.left + r.width / 2); }));
+  expect(new Set(xs).size, JSON.stringify(xs)).toBe(1);
+  await page.reload();                                               // put the real list back
+});
+
+test.describe('touch gestures on a phone', () => {
+  test.use({ viewport: { width: 390, height: 844 }, hasTouch: true, isMobile: true });
+
+  // Playwright's touchscreen only taps; a drag goes through the DevTools protocol.
+  async function drag(page, from, to) {
+    const cdp = await page.context().newCDPSession(page);
+    const steps = 8;
+    await cdp.send('Input.dispatchTouchEvent', { type: 'touchStart', touchPoints: [from] });
+    for (let i = 1; i <= steps; i++)
+      await cdp.send('Input.dispatchTouchEvent', { type: 'touchMove', touchPoints: [{
+        x: from.x + (to.x - from.x) * i / steps, y: from.y + (to.y - from.y) * i / steps }] });
+    await cdp.send('Input.dispatchTouchEvent', { type: 'touchEnd', touchPoints: [] });
+  }
+
+  test('a swipe moves between items, and right from the first goes back to the list', async ({ page }) => {
+    await page.locator('#burger').click();
+    await page.locator('.feed', { hasText: 'Test Show' }).click();
+    await page.locator('.tabs button', { hasText: 'All' }).first().click();
+    await expect(page.locator('.ep').nth(1)).toBeVisible({ timeout: 20_000 });
+    const titles = await page.locator('.ep .t').allTextContents();
+    await page.locator('.ep').first().click();
+    const shown = page.locator('#detail .dt');
+    await expect(shown).toHaveText(titles[0]);
+
+    await drag(page, { x: 300, y: 400 }, { x: 80, y: 410 });      // left: the next item
+    await expect(shown).toHaveText(titles[1]);
+    await drag(page, { x: 300, y: 400 }, { x: 80, y: 410 });      // left on the last: stays
+    await expect(shown).toHaveText(titles[1]);
+    await drag(page, { x: 80, y: 400 }, { x: 300, y: 410 });      // right: the one before
+    await expect(shown).toHaveText(titles[0]);
+    await drag(page, { x: 200, y: 300 }, { x: 210, y: 600 });     // down: a scroll, not a swipe
+    await expect(shown).toHaveText(titles[0]);
+    await drag(page, { x: 80, y: 400 }, { x: 300, y: 410 });      // right on the first: the list
+    await expect(page.locator('body')).not.toHaveClass(/reading/);
+  });
+
+  test('pulling the list down from its top checks the feed for new items', async ({ page }) => {
+    await page.locator('#burger').click();
+    await page.locator('.feed', { hasText: 'Test Show' }).click();
+    await expect(page.locator('.ep').first()).toBeVisible({ timeout: 20_000 });
+    const box = await page.locator('#list').boundingBox();
+    const fetch = page.waitForRequest(r => r.url().endsWith('/api/fetch') && r.method() === 'POST');
+    await drag(page, { x: 200, y: box.y + 20 }, { x: 200, y: box.y + 220 });
+    expect((await fetch).postDataJSON()).toEqual({ feed: 'test-show', force: true });
+    await expect(page.locator('#pulltip')).toHaveCount(0);        // the note goes on letting go
+  });
+});
+
+test.describe('an item with no files, on a phone', () => {
+  test.use({ viewport: { width: 390, height: 844 }, hasTouch: true, isMobile: true });
+
+  test('shows no files box at all', async ({ page }) => {
+    await page.locator('#burger').click();
+    await page.locator('#feedlist .place', { hasText: 'All Subscriptions' }).click();
+    await page.locator('.tabs button', { hasText: 'All' }).first().click();
+    await expect(page.locator('.ep').first()).toBeVisible({ timeout: 20_000 });
+    // An item with no enclosure, found from the list the page itself has.
+    const guid = await page.evaluate(() => S.entries.find(e => !e.enclosures.length)?.guid);
+    expect(guid, 'the fixtures have an item with no files').toBeTruthy();
+    await page.locator(`.ep[data-guid="${guid}"]`).click();
+    await expect(page.locator('#detail .dt')).toBeVisible();
+    await expect(page.locator('#detail .encbox')).toHaveCount(0);
+    await expect(page.locator('#detail')).not.toContainText('No files');
+  });
+});
+
+test('a pinned feed, even one from inside a folder, goes to the top of the list', async ({ page }) => {
+  const rows = page.locator('#feedlist .feed');
+  const group = page.locator('.feed.group').first();
+  if ((await group.locator('.chev').getAttribute('aria-expanded')) !== 'true') await group.locator('.chev').click();
+  const child = page.locator('.feed.child').first();
+  const name = (await child.locator('.txt b').textContent()).trim();
+  await child.click();
+  await page.locator('#content .acts [data-a="pin"]').click();
+
+  // First in the list, out of its folder, marked, and with the rule under it.
+  await expect(rows.first().locator('.txt b')).toHaveText(name);
+  await expect(rows.first()).toHaveClass(/\bpinned\b/);
+  await expect(rows.first()).not.toHaveClass(/\bchild\b/);
+  await expect(rows.first()).toHaveClass(/\blastpin\b/);
+  await expect(page.locator('.feed.child', { hasText: name })).toHaveCount(0);
+  await expect(page.locator('#content .acts [data-a="pin"]')).toHaveAttribute('aria-pressed', 'true');
+  // It is on the account: a reload keeps it.
+  await page.reload();
+  await expect(rows.first().locator('.txt b')).toHaveText(name);
+
+  // Unpinned, it goes back into its folder.
+  await rows.first().click();
+  await page.locator('#content .acts [data-a="pin"]').click();
+  await expect(page.locator('.feed.pinned')).toHaveCount(0);
+  await expect(page.locator('.feed.child', { hasText: name })).toHaveCount(1);
+});

tests/ui/fixtures/show.xml

@@ -2,6 +2,7 @@
 <rss version="2.0" xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd">
 <channel><title>Test Show</title><link>http://127.0.0.1:8792/</link><description>A fixture feed.</description>
 <itunes:image href="http://127.0.0.1:8792/art.png"/>
+<itunes:category text="Technology"/>
 <item><title>First Episode</title><guid>ui-1</guid>
   <pubDate>Mon, 01 Sep 2026 10:00:00 +0000</pubDate>
   <description>&lt;p&gt;Show notes for the first one.&lt;/p&gt;</description>

tsconfig.json

@@ -0,0 +1,12 @@
+{
+  // Type-checks web/src (npx tsc). Nothing is emitted: web/build.mjs does that with swc.
+  // The files are one script in one scope, not modules, which is why there are no imports.
+  "compilerOptions": {
+    "target": "es2022",
+    "lib": ["es2022", "dom", "dom.iterable"],
+    "noEmit": true,
+    "strict": false,
+    "skipLibCheck": true
+  },
+  "include": ["web/src/*.ts"]
+}

web/Inter-LICENSE.txt

@@ -0,0 +1,92 @@
+Copyright (c) 2016 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION AND CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

web/admin.html

@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="dark light">
+<title>iPodderX admin</title>
+<link rel="icon" type="image/png" sizes="128x128" href="/favicon.png">
+<link rel="apple-touch-icon" href="/apple-touch-icon.png">
+<link rel="stylesheet" data-src="app.css">
+</head>
+<body class="adminpage">
+<!-- The server sends this page, and its script, to admins only. -->
+<header id="topbar">
+  <a class="btn ico" href="/" title="Back to iPodderX" aria-label="Back to iPodderX" data-icon="left"></a>
+  <img class="logo" src="/icon.png" alt="" width="26">
+  <h1>Admin</h1>
+  <span class="grow"></span>
+  <nav class="tabs" id="atabs">
+    <a href="#server" data-t="server">Server</a>
+    <a href="#accounts" data-t="accounts">Accounts</a>
+    <a href="#log" data-t="log">Log</a>
+  </nav>
+</header>
+<main class="wrap plain" id="admin">
+  <section id="server" hidden></section>
+  <section id="accounts" hidden></section>
+  <section id="log" hidden></section>
+</main>
+<div id="toasts"></div>
+
+<script data-src="web/src"></script>
+</body>
+</html>

web/app.css

@@ -0,0 +1,847 @@
+/* Inter, served by ipx itself (/inter.woff2) rather than a font CDN, so the page asks nothing of
+   anyone else. One variable file covers every weight used here; italics are synthesized. Classic
+   keeps Lucida Grande, the 2004 app's face. */
+@font-face{font-family:Inter;src:url(/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
+/* Palette taken from the 2004 iPodderX icon: the silver device body, the blue
+   screen, and the amber EQ bars. Hex values in comments are sampled straight from it. */
+:root {
+  --bg:#0e131b;      /* the screen's navy (#314B74), taken right down */
+  --panel:#151c27;
+  --panel2:#1c2431;
+  --raise:#25303f;
+  --line:#2c3849;
+  --fg:#f5f5f5;      /* #F5F5F5 device highlight */
+  --dim:#95a0b1;     /* #95A0B1 straight from the icon's blue-grey */
+  --faint:#7a8799;  /* lifted from the icon ramp until it clears AA at small sizes */
+  --accent:#92b2e6;  /* #92B2E6 the screen blue */
+  --accent2:#f49e2c; /* #F49E2C the EQ bars */
+  --ink:#0e131b;     /* text on an accent fill */
+  --good:#6fbf8b;
+  --warn:#f49e2c;    /* the amber doubles as the pending colour */
+  --bad:#e2705f;
+  --shadow:0 8px 28px rgba(6,10,16,.55);
+}
+/* Every other theme overrides the same variables, under data-theme and data-mode. The page's
+   script sets data-mode to light or dark, working Auto out from the system, so each theme has
+   one block per variant here and none needs repeating under a media query. */
+:root[data-theme="modern"][data-mode="light"] {
+  --bg:#f2f4f7;
+  --panel:#ffffff;   /* #FFFFFF device body */
+  --panel2:#e9edf3;
+  --raise:#dde3ec;
+  --line:#d6d6d6;    /* #D6D6D6 device edge */
+  --fg:#1a1a1a;      /* #1A1A1A icon outline */
+  --dim:#606060;     /* #606060 */
+  --faint:#767676;   /* between the icon's #929292 and #606060, to clear AA */
+  --accent:#2d5391;  /* #2D5391 the deep screen blue reads better on white */
+  --accent2:#9a5f0a;  /* the EQ amber, taken down until white on it clears AA */
+  --ink:#ffffff;
+  --good:#2f7d4f;
+  --warn:#b06f10;
+  --bad:#b3402f;
+  --shadow:0 8px 28px rgba(45,83,145,.14);
+}
+/* Dracula, and Alucard, its light half, from draculatheme.com/spec. The spec's comment colour
+   (#6272A4, #6C664B) is too faint for small text on its own background, so --faint is lifted. */
+:root[data-theme="dracula"] {
+  --bg:#282a36;
+  --panel:#21222c;
+  --panel2:#343746;
+  --raise:#44475a;   /* selection */
+  --line:#414558;
+  --fg:#f8f8f2;
+  --dim:#c9cbd6;
+  --faint:#9ea8c7;
+  --accent:#bd93f9;  /* purple */
+  --accent2:#ff79c6; /* pink */
+  --ink:#282a36;
+  --good:#50fa7b;
+  --warn:#ffb86c;
+  --bad:#ff8080;
+  --shadow:0 8px 28px rgba(0,0,0,.45);
+}
+:root[data-theme="dracula"][data-mode="light"] {
+  --bg:#fffbeb;
+  --panel:#f7f2df;
+  --panel2:#efe9d3;
+  --raise:#cfcfde;   /* selection */
+  --line:#ddd6bd;
+  --fg:#1f1f1f;
+  --dim:#454137;
+  --faint:#635d44;
+  --accent:#644ac9;
+  --accent2:#a3144d;
+  --ink:#ffffff;
+  --good:#14710a;
+  --warn:#a34d14;
+  --bad:#b83322;
+  --shadow:0 8px 28px rgba(108,102,75,.18);
+}
+/* Material 3's baseline scheme: surface, the surface containers, outline and primary. */
+:root[data-theme="material"] {
+  --bg:#141218;      /* surface */
+  --panel:#1d1b20;   /* surface-container-low */
+  --panel2:#211f26;  /* surface-container */
+  --raise:#36343b;   /* surface-container-highest */
+  --line:#49454f;    /* outline-variant */
+  --fg:#e6e0e9;      /* on-surface */
+  --dim:#cac4d0;     /* on-surface-variant */
+  --faint:#9a95a0;   /* outline, a shade up to clear AA on the containers */
+  --accent:#d0bcff;  /* primary */
+  --accent2:#efb8c8; /* tertiary */
+  --ink:#381e72;     /* on-primary */
+  --good:#8fd6a0;
+  --warn:#f2c46b;
+  --bad:#f2b8b5;     /* error */
+  --shadow:0 8px 28px rgba(0,0,0,.5);
+}
+:root[data-theme="material"][data-mode="light"] {
+  --bg:#fef7ff;
+  --panel:#f7f2fa;
+  --panel2:#f3edf7;
+  --raise:#e6e0e9;
+  --line:#cac4d0;
+  --fg:#1d1b20;
+  --dim:#49454f;
+  --faint:#67626c;   /* outline (#79747E), a shade down to clear AA on the containers */
+  --accent:#6750a4;
+  --accent2:#7d5260;
+  --ink:#ffffff;
+  --good:#2b6c3c;
+  --warn:#7c5800;
+  --bad:#b3261e;
+  --shadow:0 8px 28px rgba(103,80,164,.14);
+}
+/* Adwaita, from libadwaita's own CSS variables: view, window and sidebar backgrounds, the blue
+   accent, and its destructive, success and warning colours. */
+:root[data-theme="adwaita"] {
+  --bg:#1d1d20;      /* view */
+  --panel:#2e2e32;   /* sidebar, headerbar */
+  --panel2:#222226;  /* window */
+  --raise:#3a3a3f;
+  --line:#3f3f45;
+  --fg:#ffffff;
+  --dim:#c4c4c8;
+  --faint:#a0a0a7;
+  --accent:#81d0ff;
+  --accent2:#3584e4;
+  --ink:#1d1d20;
+  --good:#78e9ab;
+  --warn:#ffc252;
+  --bad:#ff938c;
+  --shadow:0 8px 28px rgba(0,0,0,.5);
+}
+:root[data-theme="adwaita"][data-mode="light"] {
+  --bg:#ffffff;
+  --panel:#ebebed;
+  --panel2:#fafafb;
+  --raise:#dcdce0;
+  --line:#d9d9dd;
+  --fg:#333338;      /* rgb(0 0 6 / 80%) on white */
+  --dim:#57575d;
+  --faint:#66666c;
+  --accent:#0461be;
+  --accent2:#3584e4;
+  --ink:#ffffff;
+  --good:#00753a;
+  --warn:#905400;
+  --bad:#c30000;
+  --shadow:0 8px 28px rgba(0,0,6,.12);
+}
+/* Flat Remix, from its GTK theme's _colors.scss: base and bg, fg, the selection blue, and its
+   link colours, which are the selection blue taken down (light) or up (dark) until readable. */
+:root[data-theme="flatremix"] {
+  --bg:#272a34;      /* base */
+  --panel:#23262f;   /* bg: base darkened 2% */
+  --panel2:#2e323d;
+  --raise:#363b48;
+  --line:#3a3f4c;
+  --fg:#eeeeec;
+  --dim:#babec8;
+  --faint:#959baa;
+  --accent:#8fb6ff;  /* link */
+  --accent2:#fd7d00; /* warning orange */
+  --ink:#1a1c23;
+  --good:#4cc28c;
+  --warn:#ff9a3c;
+  --bad:#ff6b6b;
+  --shadow:0 8px 28px rgba(0,0,0,.3);
+}
+:root[data-theme="flatremix"][data-mode="light"] {
+  --bg:#fafafa;      /* base */
+  --panel:#ffffff;   /* bg */
+  --panel2:#f0f0f1;
+  --raise:#e4e5e7;
+  --line:#d9d9d9;    /* borders: bg darkened 15% */
+  --fg:#22252b;
+  --dim:#5c616c;     /* fg */
+  --faint:#686d78;
+  --accent:#0060f0;  /* link */
+  --accent2:#fd7d00;
+  --ink:#ffffff;
+  --good:#23794f;
+  --warn:#a85400;
+  --bad:#d41919;
+  --shadow:0 8px 28px rgba(0,0,0,.1);
+}
+/* Paper: a single light palette, black on the colour of paper, colour kept for what matters.
+   Its blue and red are taken down a shade to clear AA on that background. */
+:root[data-theme="paper"] {
+  --bg:#f2eede;
+  --panel:#ebe7d7;
+  --panel2:#e4e0d0;
+  --raise:#d8d5c7;   /* highlight */
+  --line:#cdc9b9;
+  --fg:#000000;
+  --dim:#3d3a33;
+  --faint:#5a564c;
+  --accent:#1a5fae;
+  --accent2:#b58900;
+  --ink:#ffffff;
+  --good:#216609;
+  --warn:#795a00;
+  --bad:#b1331f;
+  --shadow:0 8px 28px rgba(0,0,0,.12);
+}
+/* Nordic: the Nord palette. Polar Night for the dark half, Snow Storm for the light, Frost for
+   the accent and Aurora for the rest. Aurora red and Frost blue are shifted until they read. */
+:root[data-theme="nordic"] {
+  --bg:#2e3440;      /* nord0 */
+  --panel:#3b4252;   /* nord1 */
+  --panel2:#434c5e;  /* nord2 */
+  --raise:#4c566a;   /* nord3 */
+  --line:#434c5e;
+  --fg:#eceff4;      /* nord6 */
+  --dim:#d8dee9;     /* nord4 */
+  --faint:#b4bccb;
+  --accent:#93c9d8;  /* nord8, a shade up */
+  --accent2:#ebcb8b; /* nord13 */
+  --ink:#2e3440;
+  --good:#b0c99b;    /* nord14, a shade up */
+  --warn:#ebcb8b;
+  --bad:#f2aeb4;
+  --shadow:0 8px 28px rgba(0,0,0,.35);
+}
+:root[data-theme="nordic"][data-mode="light"] {
+  --bg:#eceff4;      /* nord6 */
+  --panel:#e5e9f0;   /* nord5 */
+  --panel2:#d8dee9;  /* nord4 */
+  --raise:#cdd4e0;
+  --line:#c5cedb;
+  --fg:#2e3440;      /* nord0 */
+  --dim:#3b4252;     /* nord1 */
+  --faint:#4c566a;   /* nord3 */
+  --accent:#3a5e8a;
+  --accent2:#b0674e;
+  --ink:#ffffff;
+  --good:#446632;
+  --warn:#7e590e;
+  --bad:#9c3f49;
+  --shadow:0 8px 28px rgba(46,52,64,.15);
+}
+/* Classic: the 2004 Mac app. Colours here; the chrome it needs is at the end of the sheet. */
+:root[data-theme="classic"] {
+  color-scheme:light;
+  --bg:#ffffff;
+  --panel:#e7ebf1;   /* the source list's pale blue-grey */
+  --panel2:#f2f2f2;
+  --raise:#d5dce7;
+  --line:#a9a9a9;
+  --fg:#000000;
+  --dim:#444444;
+  --faint:#666666;
+  --accent:#3875d7;  /* Aqua selection blue */
+  --accent2:#2a5db0;
+  --ink:#ffffff;
+  --good:#237a23;
+  --warn:#a15f00;
+  --bad:#c42b1c;
+  --shadow:0 4px 16px rgba(0,0,0,.28);
+}
+*{box-sizing:border-box}
+/* A rule that sets display beats the UA's [hidden], and several below do. */
+[hidden]{display:none!important}
+html,body{height:100%}
+body{
+  margin:0;background:var(--bg);color:var(--fg);
+  font:14.5px/1.55 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
+  display:grid;grid-template-rows:auto 1fr auto auto;overflow:hidden;
+  /* iOS Safari's address bar collapses and expands without firing a resize, so 100vh is
+     measured against whichever state happened to be current -- sized too tall while the bar
+     is showing, which puts the topbar (the hamburger included) under Safari's own chrome,
+     where a tap never reaches the page. Only a hard refresh reset it, forcing 100vh to be
+     recomputed. 100dvh tracks the real visible viewport as the bar moves; the 100vh above is
+     the fallback for a browser that does not know dvh. */
+  height:100vh;height:100dvh;
+}
+button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
+a{color:var(--accent)}
+/* Inset wherever a parent clips its overflow, or the toolbar and the feed list cut the ring off. */
+:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
+.tgroup button:focus-visible,.tgroup a:focus-visible,.feed:focus-visible,.place:focus-visible,.chev:focus-visible{outline-offset:-2px}
+@media (prefers-reduced-motion:reduce){
+  *,*::before,*::after{animation:none!important;transition:none!important}
+}
+::-webkit-scrollbar{width:10px;height:10px}
+::-webkit-scrollbar-thumb{background:var(--raise);border-radius:6px}
+::-webkit-scrollbar-track{background:transparent}
+
+/* ---------- shell ---------- */
+#shell{display:grid;grid-template-columns:290px 1fr;min-height:0;min-width:0;overflow:hidden}
+/* [ hides the feed list. A phone slides it over the page instead, so this is for wider screens. */
+@media (min-width:821px){
+  body.nosb #shell{grid-template-columns:minmax(0,1fr)}
+  body.nosb #sidebar{display:none}
+}
+#sidebar{
+  background:var(--panel);border-right:1px solid var(--line);
+  display:flex;flex-direction:column;min-height:0;
+}
+.brand{display:flex;align-items:center;gap:9px;padding:14px 14px 10px}
+.brand .logo{
+  width:30px;height:30px;flex:none;object-fit:contain;
+}
+.brand h1{font-size:16px;margin:0;font-weight:650;letter-spacing:-.01em;color:var(--fg);flex:1}
+.iconbtn{
+  width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
+  color:var(--dim);flex:none;
+}
+.iconbtn:hover{background:var(--raise);color:var(--fg)}
+/* One toolbar across the window, as the original had: grouped buttons, search on the right. */
+#topbar{
+  display:flex;align-items:center;gap:10px;padding:7px 12px;min-width:0;overflow:hidden;
+  background:var(--panel);border-bottom:1px solid var(--line);
+}
+#topbar .grow{flex:1}
+#topbar #epSearch{width:260px;flex:none}
+.tgroup{display:flex;flex:none;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel2)}
+.tgroup button,.tgroup a{padding:5px 11px;min-width:34px;color:var(--dim);font-size:14px;line-height:1.3}
+.tgroup a{display:inline-grid;place-items:center}
+.tgroup button+button,.tgroup button+a{border-left:1px solid var(--line)}
+.tgroup button:hover:not(:disabled),.tgroup a:hover{background:var(--raise);color:var(--fg)}
+.tgroup button:disabled{opacity:.35;cursor:default}
+.sidetools button,.sidefoot button{
+  flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:8px;
+  padding:6px 8px;font-size:12.5px;color:var(--dim);
+}
+.sidetools button:hover,.sidefoot button:hover{border-color:var(--accent);color:var(--fg)}
+/* Settings and the log are housekeeping: they sit under the feeds, out of the way. */
+.sidefoot{
+  display:flex;flex-direction:column;gap:7px;padding:8px 12px;
+  border-top:1px solid var(--line);flex:none;
+}
+.sidefoot .row{display:flex;gap:6px}
+.who{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--faint)}
+.who span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.who button{flex:none;background:none;border:0;padding:2px 4px;color:var(--faint);text-decoration:underline}
+.who button:hover{color:var(--fg)}
+.sidefoot button{display:inline-flex;align-items:center;justify-content:center;gap:6px}
+.sidefoot i{font-style:normal;opacity:.75}
+.searchwrap{padding:0 12px 8px}
+input[type=search],input[type=text],input[type=password],input[type=number],select{
+  width:100%;background:var(--bg);border:1px solid var(--line);color:var(--fg);
+  border-radius:8px;padding:7px 10px;font:inherit;font-size:13.5px;
+}
+input:focus,select:focus{outline:0;border-color:var(--accent)}
+/* The wider left gutter is the folder triangle's; everything in the list shifts with it, so the
+   feeds still line up with the places above. */
+#feedlist{overflow-y:auto;padding:0 8px 12px 16px;flex:1;min-height:0}
+.feed{
+  display:flex;gap:10px;align-items:center;padding:7px 8px;border-radius:9px;
+  cursor:pointer;margin-bottom:1px;position:relative;
+}
+.feed:hover{background:var(--panel2)}
+.feed.sel{background:var(--raise)}
+/* A show sits under its folder's title, a size down, so an open folder reads as one. */
+.feed.child{margin-left:11px}
+/* Pinned feeds, at the top of the list: a small pin before the name, and a rule under the last. */
+.feed .fpin .i{width:10px;height:10px;margin-right:5px;vertical-align:-1px;color:var(--accent)}
+.feed.lastpin{margin-bottom:9px}
+.feed.lastpin::after{content:"";position:absolute;left:8px;right:8px;bottom:-5px;border-bottom:1px solid var(--line)}
+.feed.child .art{width:28px;height:28px;font-size:11px}
+/* Only a folder has a triangle, hung in the margin so every feed's art lines up with the places
+   above it. The button is the row's full height and 24 px wide: a near miss used to open the
+   folder's page, and 16 px left the triangle cramped against the art. */
+.chev{
+  position:absolute;left:-16px;top:0;bottom:0;width:24px;display:grid;place-items:center;
+  border-radius:4px;color:var(--faint);
+}
+.chev:hover{color:var(--fg)}
+.chev.bad,.chev.bad:hover{color:var(--bad)}
+/* A feed's error mark, in the triangle's place: the same column as every folder's triangle,
+   a child's included, which is why it moves left by the child's indent. */
+.ferr{position:absolute;left:-16px;top:0;bottom:0;width:24px;display:grid;place-items:center;color:var(--bad)}
+.ferr .i{width:12px;height:12px}
+.feed.child .ferr{left:-27px}
+.chev .i{width:12px;height:12px;transition:transform .12s}
+.chev[aria-expanded="true"] .i{transform:rotate(90deg)}
+.childlist{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;margin-top:10px}
+.childrow{
+  display:flex;gap:10px;align-items:center;padding:7px 9px;border:1px solid var(--line);
+  border-radius:9px;cursor:pointer;background:var(--panel);
+}
+.childrow:hover{border-color:var(--accent)}
+.childrow .art{width:32px;height:32px;font-size:12px}
+.childrow .txt{flex:1;min-width:0}
+.childrow .txt b{display:block;font-weight:500;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+/* Currently Listening: how far into each episode you are, as a rail along the foot of its row.
+   The one in the player is marked as it is everywhere else, by the amber EQ bars, and its rail
+   and time left move as it plays. The rest stay neutral, so that one is what stands out. */
+#listening .childrow{position:relative;overflow:hidden;gap:12px;padding:10px 10px 13px}
+#listening .childrow .art{width:44px;height:44px;font-size:13px}
+#listening .txt b{display:flex;align-items:center;gap:7px}
+#listening .txt b span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+#listening .txt small{display:flex;gap:12px;margin-top:3px;color:var(--faint);font-size:11.5px}
+#listening .txt small .fd{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+#listening .txt small .left{flex:none;color:var(--dim)}
+#listening .childrow:not(.now) .eq{display:none}
+#listening .rail{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--raise)}
+#listening .rail i{display:block;height:100%;width:0;background:var(--faint);transition:width .25s linear}
+#listening .now{border-color:color-mix(in srgb,var(--accent2) 60%,var(--line))}
+#listening .now .eq,#listening .now .left{color:var(--accent2)}
+#listening .now .rail i{background:var(--accent2)}
+/* Quiet buttons: a filled one on every row outshouted the row that is playing. */
+#listening [data-a=play]{color:var(--accent)}
+#listening [data-a=remove]{color:var(--faint)}
+/* Directory's filters: .tabs for what a feed is, as the item filters are, and chips for what it
+   is about. A picked chip is underlined in --accent2, as the download bar and the now-playing EQ
+   are; a .badge's fill already means unread in the sidebar. */
+.dirbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:4px}
+.dirbar .tabs{flex:none}
+.chips{display:flex;flex-wrap:wrap;gap:2px 6px;flex:1 1 0;min-width:0}
+.chips button{flex:none;padding:4px 6px;font-size:13px;color:var(--dim);white-space:nowrap;border-bottom:2px solid transparent}
+.chips button:hover{color:var(--fg)}
+.chips button[aria-pressed="true"]{color:var(--fg);border-bottom-color:var(--accent2)}
+/* Square cover art, title underneath: podcast art is made to be known at a glance. The subscribe
+   button stays visible, since a button that only shows on hover cannot be reached on a phone. */
+.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:18px 14px;margin-top:14px}
+.tiles>.hint{grid-column:1/-1}
+.tile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 2px;align-items:start;cursor:pointer}
+.tile .art{grid-column:1/-1;width:100%;height:auto;aspect-ratio:1;font-size:34px}
+.tile .txt b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;font-weight:500;font-size:13px;line-height:1.3}
+.tile .txt small{display:block;color:var(--faint);font-size:11.5px}
+.tile:hover .txt b{color:var(--accent)}
+.tag{
+  font-size:11px;font-weight:600;
+  padding:1px 5px;border-radius:4px;background:var(--raise);color:var(--warn);flex:none;
+}
+.art{
+  border-radius:7px;object-fit:cover;background:var(--raise);flex:none;
+  display:grid;place-items:center;color:var(--faint);font-weight:600;overflow:hidden;
+}
+/* Initials, tinted by a hash of the name so two "TS" in a row can be told apart. Mixed into the
+   page ground, not --raise: that is also the selected row, and a selected tile vanished into it. */
+.art.ini{background:color-mix(in srgb,var(--tint) 24%,var(--bg));color:var(--tint)}
+/* A folder: its first four shows' art, as iTunes built a playlist's from its albums. */
+.art.mosaic{grid-template:1fr 1fr/1fr 1fr;place-items:stretch}
+.art.mosaic img{width:100%;height:100%;min-height:0;object-fit:cover;display:block}
+.feed .art{width:34px;height:34px;font-size:13px}
+.feed .txt{min-width:0;flex:1}
+.feed .txt b{display:block;font-weight:500;font-size:13.5px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.feed .txt small{display:block;color:var(--faint);font-size:11.5px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.badge{
+  background:var(--accent2);color:var(--ink);border-radius:20px;padding:1px 7px;
+  font-size:11px;font-weight:600;flex:none;min-width:26px;text-align:center;
+}
+.badge.zero{background:var(--raise);color:var(--faint)}
+/* Counts, sizes and times that change in place should not jiggle the text around them. */
+.badge,.feed small,.childrow small,.tile small,.ep,.fhead .sub,.dmeta,#status,#seekrow{font-variant-numeric:tabular-nums}
+
+/* ---------- main ---------- */
+#main{overflow:hidden;min-height:0;min-width:0;display:flex;flex-direction:column}
+.wrap{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column}
+.wrap.plain{overflow-y:auto;padding:18px 22px 40px;display:block}
+#content{display:flex;flex-direction:column;min-height:0;min-width:0;flex:1}
+#content>.fhead,#content>.toolbar{padding-left:20px;padding-right:20px;flex:none}
+#content>.fhead{padding-top:16px}
+
+/* Three panes, as the original had: feeds beside, items above, the item below. */
+#split{
+  display:grid;flex:1;min-height:0;
+  grid-template-columns:minmax(0,1fr) 270px;
+  grid-template-rows:minmax(90px,var(--listh,60%)) 7px 1fr;
+  grid-template-areas:"list files" "grab grab" "detail detail";
+}
+#list{grid-area:list;overflow:auto;padding:0 14px 10px;overscroll-behavior-y:contain}
+/* Pull-to-refresh's note (gestures.ts). overscroll-behavior keeps the browser's own pull, which
+   reloads the page, from starting on top of it. */
+#pulltip{display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;overflow:hidden;
+  font-size:12px;color:var(--faint)}
+/* The selected item's files, beside the list, as the original's Files pane was. */
+#files{grid-area:files;overflow-y:auto;padding:8px 12px;border-left:1px solid var(--line);background:var(--panel)}
+/* Nothing selected, or an item with no files: the list takes the width. */
+#split:has(>#files[hidden]){grid-template-columns:minmax(0,1fr) 0}
+#files .encbox{margin-top:8px}
+#files .empty{padding:24px 0}
+.fhd{font-size:12px;color:var(--faint)}
+#grab{grid-area:grab;cursor:row-resize;background:var(--line)}
+#grab:hover{background:var(--accent)}
+#detail{grid-area:detail;overflow-y:auto;padding:16px 20px 28px;background:var(--panel);border-top:1px solid var(--line)}
+.dt{font-size:18px;font-weight:650;margin:0 0 5px;line-height:1.3;overflow-wrap:anywhere}
+.dmeta{color:var(--faint);font-size:12.5px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
+.dmeta .btn{padding:3px 9px;font-size:12px}
+#detail .encbox{margin:0 0 10px}
+.dbody{font-size:14.5px;line-height:1.65;overflow-wrap:anywhere;color:var(--fg)}
+.dbody img{max-width:100%;height:auto;border-radius:6px}
+.dbody a{color:var(--accent)}
+.dbody pre{overflow-x:auto;background:var(--panel2);padding:10px;border-radius:8px}
+.encbox{
+  display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px;
+  padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);
+}
+.fhead{display:flex;gap:18px;margin-bottom:18px}
+.fhead .art{width:118px;height:118px;font-size:34px;box-shadow:var(--shadow)}
+.fhead .meta{min-width:0;flex:1;display:flex;flex-direction:column}
+.fhead h2{margin:0 0 3px;font-size:23px;line-height:1.2;overflow-wrap:anywhere}
+.fhead .sub{color:var(--dim);font-size:13px;margin-bottom:8px}
+.fhead .sub a{color:var(--dim);text-decoration:none}
+.fhead .sub a:hover{color:var(--accent)}
+.acts{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:auto}
+.acts .btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px}
+.acts .btn i{font-style:normal;font-size:13px;line-height:1;opacity:.7}
+.acts .btn.primary i{opacity:.9}
+.acts .btn:hover{background:var(--raise)}
+.acts .btn.primary:hover{background:var(--accent)}
+.btn{
+  background:var(--panel2);border:1px solid var(--line);border-radius:8px;
+  padding:6px 12px;font-size:13px;
+}
+.btn:hover{border-color:var(--accent)}
+a.btn{text-decoration:none;color:inherit}
+.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--ink);font-weight:600}
+.btn.primary:hover{filter:brightness(1.08)}
+.btn.danger:hover{border-color:var(--bad);color:var(--bad)}
+/* An icon in place of a word; the word is in its tooltip. */
+.btn.ico{padding:4px 9px;min-width:32px;font-size:14px;line-height:1.25;text-align:center}
+/* Inline in a sentence, next to a plain-word error explanation. */
+.btn.tiny{padding:2px 7px;font-size:11.5px;border-radius:6px;margin-left:2px}
+/* The keys ? lists. */
+.keys{border-collapse:collapse;width:100%;font-size:13px}
+.keys th{text-align:left;font-weight:600;padding:12px 0 4px;color:var(--fg)}
+.keys td{padding:3px 0;color:var(--dim)}
+.keys td:first-child{width:10em;white-space:nowrap}
+kbd{font:inherit;font-size:12px;color:var(--fg);background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:0 5px}
+/* An icon (Font Awesome, embedded as SVG) in the button's own colour. */
+.i{display:inline-block;width:16px;height:16px;vertical-align:-3px;flex:none;fill:currentColor}
+/* A file's type as an icon, in place of the old DOWNLOADED / PENDING / audio chips: green once
+   it is here, red when the download failed. */
+.kind{display:inline-grid;place-items:center;color:var(--dim)}
+.kind.here{color:var(--good)}
+.subbed{display:inline-flex;padding:0 9px;color:var(--good)}
+.subbed .i{width:18px;height:18px}
+.kind.bad{color:var(--bad)}
+.fhead .art .i{width:22px;height:22px}
+.toolbar{
+  display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap;
+  position:sticky;top:0;background:var(--bg);padding:6px 0 8px;z-index:3;
+}
+.tabs{display:flex;gap:2px;background:var(--panel2);border-radius:9px;padding:3px}
+.tabs button{padding:5px 12px;border-radius:7px;font-size:13px;color:var(--dim)}
+.tabs button.on{background:var(--raise);color:var(--fg);font-weight:500}
+.tabs a{padding:5px 12px;border-radius:7px;font-size:13px;color:var(--dim);text-decoration:none}
+.tabs a.on{background:var(--raise);color:var(--fg);font-weight:500}
+
+/* ---------- the admin page (admin.html) ---------- */
+/* One column that scrolls under the same header, rather than the app's fixed panes. */
+body.adminpage{display:block;overflow:auto}
+body.adminpage #topbar{position:sticky;top:0;z-index:5}
+body.adminpage #topbar h1{font-size:16px;margin:0;font-weight:650}
+body.adminpage #topbar .logo{border-radius:5px}
+body.adminpage #topbar > a.btn{text-decoration:none}
+body.adminpage #admin{max-width:780px;margin:0 auto}
+body.adminpage #admin h2{font-size:18px;margin:0 0 12px}
+body.adminpage #log{max-width:none}
+.urow{padding:9px 0;border-bottom:1px solid var(--line)}
+.toolbar .grow{flex:1;min-width:150px;max-width:320px}
+
+/* ---------- items ---------- */
+/* A table, as the original's was: unread, kept, title, feed, file, size, published. */
+.ephead,.ep{
+  display:grid;gap:8px;align-items:center;
+  grid-template-columns:22px 22px minmax(120px,1fr) minmax(0,160px) 56px minmax(0,72px) minmax(0,92px) 64px;
+}
+/* A pixel more side padding than a row's: a row has a 1px border the heading has not, and without
+   it every heading sat a pixel left of its column. */
+.ephead{
+  position:sticky;top:0;z-index:2;background:var(--bg);padding:7px 11px 5px;
+  border-bottom:1px solid var(--line);margin-bottom:3px;
+  font-size:12px;color:var(--faint);
+}
+/* Each heading sorts by its column; the caret says which way. */
+.ephead .hs{display:flex;align-items:center;gap:4px;min-width:0;padding:0;border:0;background:none;
+  font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}
+.ephead .hs:hover,.ephead .hs.on{color:var(--fg)}
+.ephead .hs .arr{display:inline-flex}
+.ephead .hs .arr .i{width:8px;height:8px}
+.ephead .hs .arr.asc{transform:rotate(-90deg)}
+.ephead .hs .arr.desc{transform:rotate(90deg)}
+/* An icon heading is centred over its column, as the icons under it are, and its caret hangs
+   outside so sorting by it does not push the icon off line. */
+.ephead .hs.h-ic{justify-content:center;position:relative;width:100%}
+.ephead .hs.h-ic .arr{position:absolute;left:100%}
+.ep{padding:4px 10px;border-radius:7px;border:1px solid transparent;cursor:pointer;margin-bottom:1px}
+.ep>*{min-width:0}
+.ep.sel{background:var(--raise);border-color:var(--line)}
+.ep:hover{background:var(--panel)}
+/* Amber means new: the unread dot, the badges and a download under way. Blue is for the one
+   primary action and links, so a count no longer looks like a button. */
+/* No padding: a button keeps the browser's side padding, which left too little room for the 16px
+   icon, so it spilled 3px right of centre and off line with its heading. */
+.ep .st,.ep .fl{width:22px;height:22px;padding:0;border-radius:5px;display:grid;place-items:center;font-size:11px;color:var(--accent2)}
+.ep .fl{color:var(--faint);font-size:13px}
+.ep .fl.on{color:var(--fg)}
+/* The icon's EQ bars mark what is playing: standing still, and moving only while it plays. A
+   paused animation was tried first; the frames it held were a pixel apart and read as dots. */
+.eq{display:inline-flex;align-items:flex-end;gap:2px;width:13px;height:12px;flex:none}
+.eq i{flex:1;height:100%;background:currentColor;border-radius:1px;transform-origin:bottom}
+.eq i:nth-child(1){height:60%}
+.eq i:nth-child(3){height:40%}
+body.playing .eq i{animation:eq .9s ease-in-out infinite alternate}
+body.playing .eq i:nth-child(1){animation-delay:-.3s}
+body.playing .eq i:nth-child(3){animation-delay:-.6s}
+@keyframes eq{from{transform:scaleY(.35)}}
+.ep .st:hover,.ep .fl:hover{background:var(--raise)}
+.ep .t{font-weight:600;font-size:13.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ep.read .t{color:var(--dim);font-weight:500}
+.ep .line{display:flex;gap:9px;align-items:center;flex-wrap:wrap;color:var(--faint);font-size:11.5px}
+.ep .line:empty{display:none}
+.ep .fd,.ep .size,.ep .date{color:var(--dim);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ep .file{display:flex;gap:6px;align-items:center;position:relative;color:var(--faint);font-size:11.5px}
+/* Under the icon, not beside it or on a line of its own: taking a line, it lifted the icon of
+   every file not yet downloaded above the downloaded ones' (issue #31). */
+.ep .file .dlbar{position:absolute;left:0;right:0;bottom:-5px;margin:0}
+.ep .rowacts{justify-content:flex-end}
+/* One feed's own table has no need of a Feed column; All Subscriptions does. */
+#split.one .ephead,#split.one .ep{grid-template-columns:22px 22px minmax(120px,1fr) 56px minmax(0,72px) minmax(0,92px) 64px}
+#split.one .h-fd,#split.one .ep .fd{display:none}
+.dot{width:3px;height:3px;border-radius:50%;background:var(--faint);flex:none}
+.ep .rowacts{display:flex;gap:2px;align-items:flex-start;opacity:0;transition:opacity .12s}
+.ep:hover .rowacts{opacity:1}
+.dlbar{height:3px;background:transparent;border-radius:2px;overflow:hidden;margin-top:7px}
+.dlbar.live{background:var(--raise)}
+.dlbar i{display:block;height:100%;width:0;background:var(--accent2);transition:width .25s}
+.empty{color:var(--faint);text-align:center;padding:50px 0}
+#more{display:block;width:100%;margin-top:10px}
+
+/* ---------- player ---------- */
+#player{
+  border-top:1px solid var(--line);background:var(--panel);
+  display:none;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
+  padding:9px 16px;box-shadow:0 -6px 24px rgba(6,10,16,.4);
+}
+#player.on{display:grid}
+/* #audio is a <video> playing double duty as the audio element (see its tag). Only a video
+   file needs to be seen, floated above the bar rather than laid into it, so an audio episode's
+   layout is unchanged. */
+#audio{display:none}
+body.has-video #audio{
+  display:block;position:fixed;z-index:45;right:16px;bottom:120px;
+  width:360px;max-width:calc(100vw - 32px);aspect-ratio:16/9;background:#000;
+  border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.5);
+}
+#pnow{display:flex;gap:11px;align-items:center;min-width:0;width:250px}
+#pnow .art{width:44px;height:44px;font-size:13px}
+#pnow .txt{min-width:0}
+#pnow b{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+#pnow .eq{color:var(--accent2);margin-right:6px}
+#pnow small{color:var(--faint);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
+#pmid{display:flex;flex-direction:column;gap:3px;min-width:0}
+#pbtns{display:flex;gap:5px;align-items:center;justify-content:center}
+#pbtns .iconbtn{width:34px;height:34px}
+#pplay{
+  width:40px!important;height:40px!important;background:var(--fg);color:var(--bg);
+  border-radius:50%;
+}
+#pplay:hover{background:var(--accent);color:var(--ink)}
+#seekrow{display:flex;gap:9px;align-items:center;font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--faint)}
+input[type=range]{
+  -webkit-appearance:none;appearance:none;height:4px;border-radius:3px;flex:1;
+  background:var(--raise);cursor:pointer;
+}
+input[type=range]::-webkit-slider-thumb{
+  -webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);
+}
+input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--accent)}
+#pright{display:flex;gap:8px;align-items:center}
+#pright select{width:auto;padding:4px 6px;font-size:12px}
+#vol{width:78px;flex:none}
+
+/* ---------- overlays ---------- */
+#modal{
+  position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;
+  place-items:center;z-index:50;padding:20px;
+}
+#modal.on{display:grid}
+.card{
+  background:var(--panel);border:1px solid var(--line);border-radius:14px;
+  padding:20px;width:min(460px,100%);box-shadow:var(--shadow);max-height:88vh;overflow:auto;
+}
+.card.wide{width:min(1000px,100%)}
+#logbox{
+  background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:10px 12px;
+  height:min(60vh,520px);overflow:auto;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
+}
+#logbox .l{display:flex;gap:9px;white-space:pre-wrap;overflow-wrap:anywhere}
+#logbox time{color:var(--faint);flex:none}
+#logbox .lv{flex:none;width:42px;font-weight:700}
+#logbox .lv.ERROR{color:var(--bad)} #logbox .lv.WARN{color:var(--warn)}
+#logbox .lv.INFO{color:var(--accent)} #logbox .lv.DEBUG,#logbox .lv.TRACE{color:var(--faint)}
+#logbox .tg{color:var(--faint);flex:none}
+.logbar{display:flex;gap:8px;align-items:center;margin-bottom:9px;flex-wrap:wrap}
+.logbar .grow{flex:1;min-width:120px}
+.card h3{margin:0 0 14px;font-size:17px}
+.field{display:grid;gap:4px;margin-bottom:12px}
+.field label{font-size:12px;color:var(--dim)}
+.field .hint{font-size:11.5px;color:var(--faint)}
+.check{display:flex;gap:8px;align-items:center;font-size:13.5px;margin-bottom:9px}
+.inline{display:flex;gap:6px;align-items:stretch}
+.inline input{flex:1;min-width:0}
+.inline .btn{white-space:nowrap;flex:none}
+.inline select{flex:none;width:auto}
+.inline input[type=number]{flex:none;width:90px}
+.check input{width:16px;height:16px;accent-color:var(--accent)}
+.cardacts{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
+#toasts{position:fixed;bottom:88px;right:18px;display:flex;flex-direction:column;gap:8px;z-index:60}
+.toast{
+  background:var(--raise);border:1px solid var(--line);border-radius:9px;
+  padding:9px 13px;font-size:13px;box-shadow:var(--shadow);animation:in .18s;max-width:340px;
+}
+.toast.bad{border-color:var(--bad);color:var(--bad)}
+@keyframes in{from{opacity:0;transform:translateY(6px)}}
+#burger,#dback{display:none}
+/* Totals for what is showing, along the bottom, as the original's status bar. */
+#status{
+  padding:3px 14px;min-height:22px;font-size:12px;color:var(--faint);background:var(--panel);
+  border-top:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
+}
+/* The feed's own header, kept to one line so the table starts high, as it did. */
+.fhead.slim{align-items:center;gap:8px 12px;margin-bottom:10px;flex-wrap:wrap}
+.fhead.slim .art{width:44px;height:44px;font-size:15px;box-shadow:none}
+.fhead.slim .meta{flex:1 1 260px}
+/* One line each, or a long title wraps to three and pushes the table down. */
+.fhead.slim h2,.fhead.slim .sub.stat{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.fhead.slim h2{font-size:17px}
+.fhead.slim .sub{margin-bottom:0;font-size:12.5px}
+.fhead.slim .acts{margin-top:0;flex:none}
+.fhead.slim .acts .btn{padding:5px 11px;font-size:12.5px}
+/* Places above the feeds: not subscriptions, but where to look. */
+.places{border-bottom:1px solid var(--line);margin:0 0 6px;padding-bottom:6px}
+.place{display:flex;gap:10px;align-items:center;padding:6px 8px;border-radius:9px;cursor:pointer}
+.place:hover{background:var(--panel2)}
+.place.sel{background:var(--raise)}
+.place .ico{width:18px;text-align:center;color:var(--accent);flex:none}
+.place b{flex:1;font-weight:500;font-size:13.5px}
+
+@media (max-width:820px){
+  #shell{grid-template-columns:1fr}
+  #sidebar{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);z-index:42;transform:translateX(-100%);transition:transform .2s;box-shadow:var(--shadow)}
+  #sidebar.open{transform:none}
+  #scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:41}
+  #player{position:relative;z-index:39;padding:7px 10px;gap:8px}
+
+  /* The feed list is reachable whether or not anything is playing. */
+  #burger{display:grid}
+  #topbar{gap:6px;padding:6px 8px}
+  #topbar .grow,.tgroup.item{display:none}
+  #topbar #epSearch{width:auto;flex:1;min-width:0}
+  .tgroup button,.tgroup a{padding:4px 8px;min-width:32px}
+  .fhead.slim .acts{flex:1 1 100%}
+  .iconbtn{width:38px;height:38px}
+
+  /* One pane at a time: the list, then the item over it. */
+  #split{grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:"list"}
+  /* Title and date only; the files sit above the item's text in the reader instead. */
+  #files,.ephead,.ep .fd,.ep .file,.ep .size,.ep .rowacts{display:none}
+  .ep,#split.one .ep{grid-template-columns:20px 20px minmax(0,1fr) auto}
+  #grab{display:none}
+  #detail{position:fixed;inset:0;z-index:38;display:none;border-top:0;padding:12px 16px 90px}
+  body.reading #detail{display:block}
+  #dback{display:inline-block;margin-bottom:10px}
+
+  #content>.fhead,#content>.toolbar{padding-left:14px;padding-right:14px}
+  #content>.fhead{padding-top:12px}
+  .fhead{gap:12px;margin-bottom:12px}
+  .fhead .art{width:64px;height:64px;font-size:20px}
+  .fhead h2{font-size:18px}
+  .fhead .sub{font-size:12px;margin-bottom:6px}
+  .acts{gap:6px}
+  .acts .btn{padding:7px 10px;font-size:12.5px}
+  .toolbar{gap:8px}
+  #list{padding:0 12px 10px}
+  #player{grid-template-columns:1fr auto;grid-template-areas:"now right" "mid mid";gap:2px 8px}
+  #pnow{grid-area:now;width:auto}
+  #pright{grid-area:right}
+  #pmid{grid-area:mid}
+  #pnow .art{width:38px;height:38px}
+  #pnow .txt small,#pright #vol{display:none}
+  .wrap.plain{padding:14px}
+  .card{padding:16px}
+  /* The chips get a line of their own and scroll sideways rather than wrap, so they never push
+     the grid down. */
+  .chips{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto}
+  .tiles{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:14px 10px}
+
+  /* A log line has no room for four columns: keep time and message, wrap as prose. */
+  #logbox{font-size:11.5px;padding:8px}
+  #logbox .l{flex-wrap:wrap;gap:6px}
+  #logbox .lv{width:auto}
+  #logbox .tg{display:none}
+}
+
+/* ---------- Classic: the 2004 Mac app ---------- */
+/* After the iPodderX screenshots: brushed-metal chrome, a pale blue-grey source list, Aqua blue
+   for whatever is selected, red unread badges, a striped table and Lucida Grande. */
+:root[data-theme="classic"] body{
+  font-family:"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;font-size:13px;
+}
+:root[data-theme="classic"] #topbar,
+:root[data-theme="classic"] #status,
+:root[data-theme="classic"] #player{background:linear-gradient(#ececec,#c9c9c9);border-color:#8e8e8e;color:#1a1a1a}
+:root[data-theme="classic"] #status{text-align:center}
+:root[data-theme="classic"] #sidebar{background:#e7ebf1;border-right-color:#a3a3a3}
+:root[data-theme="classic"] #files{background:#f4f4f4}
+:root[data-theme="classic"] .tgroup{background:none;border-color:#8e8e8e;border-radius:6px}
+:root[data-theme="classic"] .tgroup button+button,:root[data-theme="classic"] .tgroup button+a{border-left-color:#8e8e8e}
+:root[data-theme="classic"] .tgroup button,
+:root[data-theme="classic"] .tgroup a,
+:root[data-theme="classic"] .btn,
+:root[data-theme="classic"] .tabs{background:linear-gradient(#ffffff,#d9d9d9);border-color:#8e8e8e;color:#1a1a1a}
+:root[data-theme="classic"] .tabs{border:1px solid #8e8e8e;border-radius:6px}
+:root[data-theme="classic"] .tgroup button:hover:not(:disabled),
+:root[data-theme="classic"] .tgroup a:hover,
+:root[data-theme="classic"] .btn:hover{background:linear-gradient(#f5f9ff,#cbdbf4)}
+:root[data-theme="classic"] .btn.primary,
+:root[data-theme="classic"] .tabs button.on,
+:root[data-theme="classic"] .feed.sel,
+:root[data-theme="classic"] .place.sel{background:linear-gradient(#86b0ec,#3a73cf);border-color:#2d5eae;color:#fff}
+:root[data-theme="classic"] .feed.sel .txt small,
+:root[data-theme="classic"] .place.sel .ico{color:#e6eeff}
+:root[data-theme="classic"] #epSearch{border-radius:14px}
+:root[data-theme="classic"] .badge{background:#c9302c;color:#fff}
+:root[data-theme="classic"] .badge.zero{background:#b4bdc9;color:#fff}
+:root[data-theme="classic"] .ephead,
+:root[data-theme="classic"] .fhd{
+  background:linear-gradient(#fbfbfb,#dcdcdc);color:#1a1a1a;font-size:11px;
+}
+:root[data-theme="classic"] .fhd{padding:3px 6px;border:1px solid #c2c2c2}
+:root[data-theme="classic"] .ephead{border-bottom-color:#a3a3a3}
+:root[data-theme="classic"] .ep{border-radius:0;margin:0}
+:root[data-theme="classic"] #eps .ep:nth-child(even){background:#edf3fe}
+:root[data-theme="classic"] .ep .t{color:#1c4fa8}
+:root[data-theme="classic"] .ep.read .t{color:#333}
+:root[data-theme="classic"] #eps .ep.sel{background:#3875d7;border-color:#3875d7}
+:root[data-theme="classic"] .ep.sel .t,
+:root[data-theme="classic"] .ep.sel .fd,
+:root[data-theme="classic"] .ep.sel .size,
+:root[data-theme="classic"] .ep.sel .date,
+:root[data-theme="classic"] .ep.sel .line,
+:root[data-theme="classic"] .ep.sel .st,
+:root[data-theme="classic"] .ep.sel .fl,
+:root[data-theme="classic"] .ep.sel .file,
+:root[data-theme="classic"] .ep.sel .kind{color:#fff}
+/* Green and red stay green and red on the blue, just lighter so they read. */
+:root[data-theme="classic"] .ep.sel .kind.here{color:#a6f3a6}
+:root[data-theme="classic"] .ep.sel .kind.bad{color:#ffb8ad}
+/* Lists were white in the original; the pale blue-grey belongs to the source list alone. */
+:root[data-theme="classic"] .childrow{background:#fff}
+:root[data-theme="classic"] .dt{background:linear-gradient(#80aae6,#3f78cf);color:#fff;padding:6px 12px;border-radius:4px}

web/build.mjs

@@ -0,0 +1,84 @@
+// Builds the pages ipx serves: each page's TypeScript from web/src, types stripped and minified
+// by swc into a script of its own (app.js, login.js), and the page minified, its
+// <script data-src> pointing at that script. build.rs runs it into OUT_DIR, where web.rs
+// include_str!s the results, so the binary still carries everything and nothing is served
+// from disk.
+//
+// The page names its script with a hash of the script's contents, /app.js?v=<hash>, and the
+// server lets a browser keep that for a year without asking again. A changed script is a new
+// URL, and the page, which the browser checks on every visit, is what carries it.
+//
+//   node web/build.mjs [out-dir]      default out-dir: web/dist
+import crypto from 'node:crypto';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import swc from '@swc/core';
+import html from '@swc/html';
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+
+// The files are one script, concatenated in this order, not modules: they share one top-level
+// scope, as the single inline script did, and code that runs at load needs what came before it.
+const PAGES = {
+  'index.html': { script: 'app.js', src: ['util', 'theme', 'feeds', 'feedpage', 'items', 'player', 'dialogs', 'gestures', 'events'] },
+  'admin.html': { script: 'admin.js', src: ['util', 'theme', 'admin'] },
+  'login.html': { script: 'login.js', src: ['login'] },
+};
+// The stylesheet the app and admin pages share, served and named by hash as the scripts are.
+const STYLE = 'app.css';
+
+const hash = s => crypto.createHash('sha256').update(s).digest('hex').slice(0, 12);
+
+/// The shared stylesheet, minified. @swc/html minifies CSS inside a page, so it goes through as
+/// one; the doctype only keeps it from complaining that a fragment has none.
+export function buildStyle({ minify = true } = {}) {
+  const css = fs.readFileSync(path.join(here, STYLE), 'utf8');
+  if (!minify) return css;
+  const r = html.minifySync(`<!doctype html><style>${css}</style>`, { minifyCss: true, removeComments: true });
+  const bad = (r.errors || []).filter(e => e.level === 'error' || e.level === 'Error');
+  if (bad.length) throw new Error(`${STYLE}: ${bad.map(e => e.message).join('; ')}`);
+  return r.code.slice(r.code.indexOf('<style>') + 7, r.code.lastIndexOf('</style>'));
+}
+
+/// The page and its script, built: { html, js, script }, where script is the file's name.
+export function buildPage(name, { minify = true } = {}) {
+  const { script, src: files } = PAGES[name];
+  const src = files.map(f => fs.readFileSync(path.join(here, 'src', f + '.ts'), 'utf8')).join('\n');
+  const js = swc.transformSync(src, {
+    filename: name + '.ts',
+    jsc: {
+      parser: { syntax: 'typescript' },
+      target: 'es2022',
+      // Top-level names stay as they are: markup calls some of them by name (onclick="closeModal()")
+      // and the browser tests reach others (player, savePos) through page.evaluate.
+      minify: minify ? { compress: { toplevel: false }, mangle: { toplevel: false } } : undefined,
+    },
+    isModule: false,
+    minify,
+  }).code;
+  const page = fs.readFileSync(path.join(here, name), 'utf8');
+  const marker = /<script data-src="[^"]*"><\/script>/;
+  if (!marker.test(page)) throw new Error(`${name} has no <script data-src> to put its script in`);
+  // Where the inline script was, and a plain <script src>, so it still runs in the same place:
+  // after the markup it wires up, before anything else.
+  let out = page.replace(marker, `<script src="/${script}?v=${hash(js)}"></script>`);
+  out = out.replace(/<link rel="stylesheet" data-src="[^"]*">/,
+    () => `<link rel="stylesheet" href="/${STYLE}?v=${hash(buildStyle({ minify }))}">`);
+  if (!minify) return { html: out, js, script };
+  const r = html.minifySync(out, { minifyJs: false, minifyCss: true, removeComments: true });
+  const bad = (r.errors || []).filter(e => e.level === 'Error');
+  if (bad.length) throw new Error(`${name}: ${bad.map(e => e.message).join('; ')}`);
+  return { html: r.code, js, script };
+}
+
+if (process.argv[1] === fileURLToPath(import.meta.url)) {
+  const out = process.argv[2] || path.join(here, 'dist');
+  fs.mkdirSync(out, { recursive: true });
+  fs.writeFileSync(path.join(out, STYLE), buildStyle());
+  for (const name of Object.keys(PAGES)) {
+    const { html, js, script } = buildPage(name);
+    fs.writeFileSync(path.join(out, name), html);
+    fs.writeFileSync(path.join(out, script), js);
+  }
+}

web/login.html

@@ -1,6 +1,9 @@
 <title>Sign in — iPodderX</title>
-<link rel="icon" href="/icon.png">
+<link rel="icon" type="image/png" sizes="128x128" href="/favicon.png">
+<link rel="apple-touch-icon" href="/apple-touch-icon.png">
 <style>
+/* Inter, from ipx itself; see the same rule in index.html. */
+@font-face{font-family:Inter;src:url(/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
 :root {
   --bg:#0e131b;      /* the screen's navy (#314B74), taken right down */
   --panel:#151c27;
@@ -40,7 +43,7 @@
 html,body{height:100%}
 body{
   margin:0;display:grid;place-items:center;background:var(--bg);color:var(--fg);
-  font:14.5px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding:20px;
+  font:14.5px/1.55 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding:20px;
 }
 form{
   width:min(360px,100%);background:var(--panel);border:1px solid var(--line);
@@ -74,20 +77,4 @@ button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
   <p class="msg" id="msg"></p>
 </form>
 
-<script>
+<script data-src="web/src"></script>
-document.getElementById('f').onsubmit = async e => {
-  e.preventDefault();
-  const msg = document.getElementById('msg');
-  msg.textContent = '';
-  const r = await fetch('/api/login', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-      name: document.getElementById('name').value,
-      password: document.getElementById('pw').value,
-    }),
-  });
-  if (r.ok) location.href = '/';
-  else msg.textContent = await r.text() || 'Sign in failed';
-};
-</script>

web/src/admin.ts

@@ -0,0 +1,204 @@
+/* ---------------- admin page ---------------- */
+// /admin: the server's settings, the accounts, and the log, each a section chosen by the URL's
+// hash so a link can go straight to one. The server sends this page and this script to admins
+// only, and refuses every call below to anyone else; they were parts of Settings and the header,
+// shown or hidden by the main page's script (issue #19).
+
+let me: {name: string} | null = null;
+api('/api/me').then(u => { me = u; }).catch(() => {});
+
+const SECTIONS: Record<string, () => void> = {server: drawServer, accounts: drawAccounts, log: drawLogView};
+
+function showSection(){
+  const t = SECTIONS[location.hash.slice(1)] ? location.hash.slice(1) : 'server';
+  for(const s of $$('#admin > section')) s.hidden = s.id !== t;
+  for(const a of $$('#atabs a')) a.classList.toggle('on', a.dataset.t === t);
+  // The log polls every two seconds while it is showing, and not otherwise.
+  if(t !== 'log' && logTimer){ clearInterval(logTimer); logTimer = null; }
+  SECTIONS[t]();
+}
+window.addEventListener('hashchange', showSection);
+
+/* ---------------- server ---------------- */
+async function drawServer(){
+  const box = $('#server');
+  const g = await api('/api/settings');
+  const gs = splitEvery(g.every_mins);
+  box.innerHTML = `<h2>Server</h2>
+    <p class="hint">These apply to everyone. Each person's own choices, such as keywords or how
+    many items a feed downloads for them, are in that feed's settings.</p>
+    <div class="field"><label>Check feeds every</label>
+      <div class="inline">
+        <input type="number" id="gnum" min="1" max="999" value="${gs.n}">
+        <select id="gunit">${unitOptions(gs.u)}</select>
+      </div>
+      <span class="hint">Applies to every feed that does not set its own. A feed's suggested
+      interval (its <b>ttl</b>) is still honoured when it asks to be polled less often.</span></div>
+    <div class="field"><label>Max new downloads per scan, per feed</label>
+      <input type="number" id="gmax" min="0" max="999" value="${g.max_new_per_check}">
+      <span class="hint">Applies to any feed that does not set its own — including every feed
+      inside an OPML subscription. <b>0 means unlimited</b>, which will pull a whole back
+      catalogue the first time a feed is scanned.</span></div>
+    <div class="field"><label>Download these media types automatically</label>
+      <input type="text" id="gtypes" value="${esc((g.media_types||[]).join(', '))}" placeholder="audio, video">
+      <span class="hint">Anything else is still listed and can be downloaded by hand — blog feeds
+      put article images in enclosures, and those are not worth keeping. Empty takes everything.</span></div>
+    <div class="field"><label>Disk quota (GB, 0 = unlimited)</label>
+      <input type="number" id="gquota" min="0" step="0.5" value="${g.max_total_gb}">
+      <span class="hint">Over this, the oldest played items are deleted first. Pinned
+      items are never touched.</span></div>
+    <div class="field"><label>Delete items older than (days, 0 = keep)</label>
+      <input type="number" id="gage" min="0" value="${g.max_age_days}"></div>
+    <div class="field"><label>Download folder</label>
+      <span class="hint" style="overflow-wrap:anywhere">${esc(g.download_dir)}</span></div>
+    <div class="cardacts"><button class="btn primary" id="gsave">${ICON.check} Save</button></div>`;
+  $('#gsave').onclick = async () => {
+    try{
+      await api('/api/settings', {method: 'PATCH', body: JSON.stringify({
+        schedule: `every ${Math.max(1, Number($('#gnum').value) || 1)}${$('#gunit').value}`,
+        max_new_per_check: Math.max(0, Number($('#gmax').value) || 0),
+        media_types: $('#gtypes').value.split(',').map(t => t.trim()).filter(Boolean),
+        max_total_gb: Number($('#gquota').value) || 0,
+        max_age_days: Number($('#gage').value) || 0})});
+      toast('Settings saved');
+    }catch(e){ toast(e.message, true); }
+  };
+}
+
+/* ---------------- accounts ---------------- */
+async function drawAccounts(){
+  const box = $('#accounts');
+  const users = await api('/api/users') || [];
+  box.innerHTML = `<h2>Accounts</h2>
+    ${users.map(u => `<div class="inline urow" data-id="${u.id}">
+      <div style="flex:1;min-width:0"><b style="overflow-wrap:anywhere">${esc(u.name)}</b>
+        <small style="display:block;color:var(--faint)">${u.created ? `Added ${dateOf(u.created)}` : 'Added before this was kept'} · ${
+          u.last_login ? `signed in ${ago(u.last_login)}` : 'never signed in'}</small></div>
+      ${u.password ? '' : '<span class="tag" title="No password: signs in through the proxy">Proxy</span>'}
+      <label class="check" style="margin:0"><input type="checkbox" data-a="admin" ${u.admin ? 'checked' : ''}> Admin</label>
+      <button class="btn ico danger" data-a="rm" title="Remove ${esc(u.name)}" aria-label="Remove ${esc(u.name)}">${ICON.trash}</button></div>`).join('')}
+    <div class="field" style="margin-top:20px"><label>Add someone</label>
+      <div class="inline">
+        <input type="text" id="uname" placeholder="Name" autocomplete="off" spellcheck="false">
+        <input type="password" id="upass" placeholder="Password" autocomplete="new-password">
+      </div>
+      <label class="check" style="margin-top:8px"><input type="checkbox" id="uadmin"> Admin</label>
+      <span class="hint">At least 8 characters. Leave the password empty for someone who signs in
+      through the proxy. New people start with no feeds.</span></div>
+    <div class="cardacts"><button class="btn primary" id="uadd">${ICON.plus} Add</button></div>`;
+  const change = async (u, opts) => {
+    try{
+      await api(`/api/users/${u.id}`, opts);
+      // Demoting yourself takes this page away; go back to the app rather than stay on a page
+      // the server no longer answers. Only on success: a refusal's toast has to stay readable.
+      if(u.name === me?.name){ location.href = '/'; return; }
+    }catch(e){ toast(e.message, true); }
+    drawAccounts();   // on a refusal, this puts the checkbox back where the server left it
+  };
+  for(const row of $$('#accounts [data-id]')){
+    const u = users.find(x => String(x.id) === row.dataset.id);
+    $('[data-a="admin"]', row).onchange = e =>
+      change(u, {method: 'PATCH', body: JSON.stringify({admin: e.target.checked})});
+    $('[data-a="rm"]', row).onclick = () => {
+      if(confirm(`Remove ${u.name}? Their subscriptions and read state go with them. Downloaded files stay.`))
+        change(u, {method: 'DELETE'});
+    };
+  }
+  $('#uadd').onclick = async () => {
+    try{
+      await api('/api/users', {method: 'POST', body: JSON.stringify({
+        name: $('#uname').value, password: $('#upass').value, admin: $('#uadmin').checked})});
+      toast('Added'); drawAccounts();
+    }catch(e){ toast(e.message, true); }   // keep what was typed
+  };
+}
+
+/* ---------------- log ---------------- */
+let logTimer = null, logSeq = 0, logLines = [], logFilter = '', logLevel = '', logTab = 'all';
+// Which sources belong to each tab. "daemon" is the control protocol itself: every
+// command in and every event out, whatever sent it.
+const LOG_TABS = {
+  all:    null,
+  daemon: t => t === 'ipx::io',
+  scan:   t => t === 'ipx::scan',
+  web:    t => t === 'ipx::http',
+};
+const LEVELS = {ERROR: 3, WARN: 2, INFO: 1, DEBUG: 0, TRACE: 0};
+
+function drawLogView(){
+  logSeq = 0; logLines = [];
+  $('#log').innerHTML = `<h2>Log</h2>
+    <div class="logbar">
+      <div class="tabs" id="logtabs">
+        ${Object.keys(LOG_TABS).map(t =>
+          `<button data-t="${t}" class="${logTab === t ? 'on' : ''}">${
+            {all: 'All', daemon: 'Daemon I/O', scan: 'Scans', web: 'HTTP'}[t]}</button>`).join('')}
+      </div>
+      <select id="loglevel" style="width:auto">
+        <option value="">All levels</option>
+        <option value="INFO">Info and above</option>
+        <option value="WARN">Warnings and errors</option>
+        <option value="ERROR">Errors only</option>
+      </select>
+      <input type="search" id="logq" class="grow" placeholder="Filter…">
+      <label class="check" style="margin:0"><input type="checkbox" id="logfollow" checked> Follow</label>
+      <button class="btn ico" id="logcopy" title="Copy what is showing" aria-label="Copy what is showing">${ICON.copy}</button>
+    </div>
+    <div id="logbox"><p class="empty">Loading…</p></div>
+    <span class="hint"><b>Daemon I/O</b> is the control protocol itself — every command in and
+    every event out. <b>Scans</b> is feed and download activity, <b>HTTP</b> is web requests.
+    The buffer keeps debug detail even when the terminal does not; <b>IPX_UI_LOG</b> changes
+    what it captures.</span>`;
+  for(const b of $$('#logtabs button')) b.onclick = () => {
+    logTab = b.dataset.t;
+    for(const x of $$('#logtabs button')) x.classList.toggle('on', x.dataset.t === logTab);
+    drawLog();
+  };
+  $('#loglevel').onchange = e => { logLevel = e.target.value; drawLog(); };
+  $('#logq').oninput = e => { logFilter = e.target.value.toLowerCase(); drawLog(); };
+  $('#logcopy').onclick = () => copyText(visibleLog().map(l =>
+    `${new Date(l.ts * 1000).toISOString()} ${l.level} ${l.target} ${l.msg}`).join('\n'), $('#logcopy'));
+  pollLog();
+  if(!logTimer) logTimer = setInterval(pollLog, 2000);
+}
+
+async function pollLog(){
+  try{
+    const r = await api(`/api/logs?after=${logSeq}&limit=500`);
+    if(r.lines.length){
+      logLines = logLines.concat(r.lines).slice(-2000);
+      logSeq = r.latest;
+      drawLog();
+    }else if(!logLines.length){ drawLog(); }
+  }catch(e){
+    const box = $('#logbox');
+    if(box) box.innerHTML = `<p class="empty">Lost contact with the daemon: ${esc(e.message)}</p>`;
+  }
+}
+function visibleLog(){
+  const min = logLevel ? LEVELS[logLevel] : -1;
+  const tab = LOG_TABS[logTab];
+  return logLines.filter(l =>
+    (!tab || tab(l.target)) &&
+    (LEVELS[l.level] ?? 1) >= min &&
+    (!logFilter || (l.msg + ' ' + l.target).toLowerCase().includes(logFilter)));
+}
+function drawLog(){
+  const box = $('#logbox'); if(!box) return;
+  const follow = $('#logfollow')?.checked;
+  const rows = visibleLog();
+  box.innerHTML = rows.length ? rows.map(l => {
+    const t = new Date(l.ts * 1000).toLocaleTimeString();
+    if(logTab === 'daemon'){
+      const out = l.msg.startsWith('<-');
+      return `<div class="l"><time>${t}</time>` +
+             `<span class="lv" style="color:${out ? 'var(--good)' : 'var(--accent)'}">${out ? 'out' : 'in'}</span>` +
+             `<span>${esc(l.msg.replace(/^[<-]+\s*/, ''))}</span></div>`;
+    }
+    return `<div class="l"><time>${t}</time><span class="lv ${esc(l.level)}">${esc(l.level)}</span>` +
+           `<span class="tg">${esc(l.target.replace(/^ipx::?/, ''))}</span><span>${esc(l.msg)}</span></div>`;
+  }).join('') : '<p class="empty">Nothing matches.</p>';
+  if(follow) box.scrollTop = box.scrollHeight;
+}
+
+showSection();

web/src/dialogs.ts

@@ -0,0 +1,398 @@
+/* ---------------- modals ---------------- */
+function openModal(html: string, wide?: boolean){
+  $('#modalCard').innerHTML=html;
+  $('#modalCard').classList.toggle('wide',!!wide);
+  $('#modal').classList.add('on');
+}
+function closeModal(){
+  $('#modal').classList.remove('on');
+}
+
+$('#modal').onclick=e=>{ if(e.target.id==='modal') closeModal(); };
+
+$('#addFeed').onclick=()=>{
+  openModal(`<h3>Add a feed</h3>
+    <div class="field"><label>Feed URL</label><input type="text" id="nurl" placeholder="https://example.com/rss">
+      <span class="hint">A Patreon token on its own adds every show from that creator.</span></div>
+    <div class="field"><label>Folder (optional)</label><input type="text" id="nfolder" placeholder="Defaults to the feed title"></div>
+    <div class="field"><label>Keywords (optional, comma separated)</label>
+      <input type="text" id="nkw"><span class="hint">Only items matching a keyword are downloaded.</span></div>
+    <label class="check"><input type="checkbox" id="nexp"> Allow items marked explicit</label>
+    <div class="cardacts"><button class="btn ico" onclick="closeModal()" title="Cancel" aria-label="Cancel">${ICON.close}</button>
+      <button class="btn ico primary" id="nsave" title="Add feed" aria-label="Add feed">${ICON.plus}</button></div>`);
+  $('#nurl').focus();
+  $('#nsave').onclick=async()=>{
+    const url=$('#nurl').value.trim(); if(!url) return;
+    $('#nsave').disabled=true; $('#nsave').title='Adding…';
+    try{
+      const r=await api('/api/feeds',{method:'POST',body:JSON.stringify({
+        url, folder:$('#nfolder').value.trim()||null, allow_explicit:$('#nexp').checked,
+        keywords:$('#nkw').value.split(',').map(s=>s.trim()).filter(Boolean)})});
+      closeModal(); toast(r.existing?`Already subscribed as ${r.id}`:`Added ${r.id}`);
+      await loadFeeds(true); selectFeed(r.id);
+    }catch(e){ toast(e.message,true); $('#nsave').title='Add feed'; $('#nsave').disabled=false; }
+  };
+};
+
+// What everyone here reads, you included, as a place to start. The rows carry an id, never a
+// URL, so a key in someone's feed address never reaches this page.
+const NONE_LISTED='<p class="hint">Nothing yet. Feeds people here subscribe to show up here.</p>';
+async function listFeeds(url,box){
+  let rows=[];
+  try{ rows=await api(url)||[]; }catch{}
+  box.innerHTML=rows.length?'':NONE_LISTED;
+  for(const p of rows) box.appendChild(listedFeed(p,'childrow'));
+  return rows.length;
+}
+
+/// One listed feed: a row in Popular and the Add a feed dialog, a tile in Directory's grid. The
+/// parts are the same either way; the class lays them out.
+function listedFeed(p,cls){
+  const el=document.createElement('div');
+  el.className=cls;
+  el.innerHTML=artHTML(p.image,p.title||p.id)+
+    `<div class="txt"><b>${esc(p.title||p.id)}</b>`+
+    `<small class="meta">${p.subscribers} subscriber${p.subscribers===1?'':'s'}</small></div>`+
+    // Green, as a downloaded file is: it is already yours. Plus, beside it, is the way to get one.
+    (p.subscribed?`<span class="subbed" title="Subscribed: click to open it" aria-label="Subscribed">${ICON.subbed}</span>`
+      :`<button class="btn ico" data-a="sub" title="Subscribe" aria-label="Subscribe">${ICON.subbed}</button>`);
+  // Yours already: the row opens it instead.
+  if(p.subscribed){ el.onclick=()=>{ closeModal(); selectFeed(p.id); }; return el; }
+  $('[data-a="sub"]',el).onclick=async()=>{
+    try{
+      await api(`/api/popular/${encodeURIComponent(p.id)}`,{method:'POST'});
+      closeModal(); toast(`Subscribed to ${p.title||p.id}`);
+      await loadFeeds(true); selectFeed(p.id);
+    }catch(e){ toast(e.message,true); }
+  };
+  return el;
+}
+
+// Directory's filters. Kept out here because a finished scan redraws the pane, which would
+// otherwise clear them.
+let dirKind='All', dirCat=null;
+const KINDS={All:()=>true,Podcasts:p=>p.podcast,Blogs:p=>!p.podcast};
+/// Directory: every listed feed as its cover art, under two filters that combine: what a feed is
+/// (Podcasts, anything with audio or video, or Blogs, the rest) and what it is about (its iTunes
+/// category, as chips). Both filter in place, without asking the server again.
+async function renderDirectory(url,box){
+  let rows=[];
+  try{ rows=await api(url)||[]; }catch{}
+  if(!rows.length){ box.innerHTML=NONE_LISTED; return 0; }
+  const bar=$('#dirbar');
+  // Only a filter when the server has both kinds.
+  const both=rows.some(KINDS.Podcasts)&&rows.some(KINDS.Blogs);
+  const btn=(k,v,on)=>`<button type="button" data-${k}="${esc(v)}" class="${on?'on':''}" aria-pressed="${on}">${esc(v)}</button>`;
+  const draw=()=>{
+    if(!both) dirKind='All';
+    const ofKind=rows.filter(KINDS[dirKind]);
+    // No empty chips: only the categories among the feeds the kind lets through.
+    const cats=[...new Set(ofKind.map(p=>p.category).filter(Boolean))].sort();
+    if(!cats.includes(dirCat)) dirCat=null;
+    bar.innerHTML=
+      (both?`<div class="tabs" role="group" aria-label="Kind">${Object.keys(KINDS).map(k=>btn('kind',k,k===dirKind)).join('')}</div>`:'')+
+      (cats.length?`<div class="chips" role="group" aria-label="Category">${cats.map(c=>btn('cat',c,c===dirCat)).join('')}</div>`:'');
+    // A picked chip lifts on a second press. Everything is redrawn, so the keyboard goes back to
+    // the button just pressed.
+    for(const b of $$('button',bar)) b.onclick=()=>{
+      const k=b.dataset.kind!=null?'kind':'cat', v=b.dataset[k];
+      if(k==='kind') dirKind=v; else dirCat=dirCat===v?null:v;
+      draw(); $(`[data-${k}="${CSS.escape(v)}"]`,bar)?.focus();
+    };
+    box.innerHTML='';
+    for(const p of ofKind.filter(p=>!dirCat||p.category===dirCat)) box.appendChild(listedFeed(p,'tile'));
+  };
+  draw();
+  return rows.length;
+}
+
+/// Directory and Popular open in the main pane, as the original's Directory did.
+async function renderListed(v){
+  const box=$('#content');
+  box.classList.add('plain');
+  $('#tbRemove').disabled=true;
+  syncTools(null);
+  $('#epSearch').placeholder='Search items…';
+  const listening=v===VIEWS[':listening'], grid=v===VIEWS[':directory'];
+  box.innerHTML=`
+    <div class="fhead slim">
+      <div class="art">${v.icon}</div>
+      <div class="meta"><h2>${v.title}</h2>
+        <div class="sub">${v.blurb}${listening?'':' Everyone counts, you included. Private feeds are never listed.'}</div></div>
+    </div>
+    ${grid?'<div class="dirbar" id="dirbar"></div>':''}
+    <div class="${grid?'tiles':'childlist'}" id="${listening?'listening':'popular'}"><p class="hint">Loading…</p></div>`;
+  $('#count').textContent=v.title;
+  const n=await (listening?renderListening:grid?renderDirectory:listFeeds)(v.url,$(listening?'#listening':'#popular',box));
+  if(VIEWS[S.feed]===v) $('#count').textContent=`${v.title}: ${plural(n,listening?'episode':'feed')}`;
+}
+
+/// Currently Listening: episodes you started and have not finished, across every feed you
+/// subscribe to. A row resumes the episode in the player bar on click -- a shortcut back to
+/// where you left off, not another way to browse. The one in the player pauses instead.
+async function renderListening(url,box){
+  let rows=[];
+  try{ rows=(await api(url)).entries||[]; }catch{}
+  box.innerHTML=rows.length?'':'<p class="hint">Nothing in progress. Episodes you start and do not finish show up here.</p>';
+  for(const e of rows){
+    // Carries its episode, for paintListenRow to repaint as the player moves.
+    const el: HTMLDivElement & {entry?: any}=document.createElement('div');
+    el.className='childrow';
+    el.entry=e;
+    el.innerHTML=artHTML(e.image||feedArt(e.feed_id),e.title||'')+
+      `<div class="txt"><b>${EQ}<span>${esc(e.title||'(untitled)')}</span></b>`+
+      `<small><span class="fd">${esc(feedName(e.feed_id))}</span><span class="left"></span></small></div>`+
+      `<button class="iconbtn" data-a="play"></button>`+
+      `<button class="iconbtn" data-a="remove" title="Remove from Currently Listening" aria-label="Remove from Currently Listening">${ICON.close}</button>`+
+      `<div class="rail"><i></i></div>`;
+    el.onclick=ev=>(ev.target as Element).closest('[data-a=remove]')?forget(e)
+      :el.classList.contains('now')&&!audio.paused?audio.pause():play(e);
+    paintListenRow(el);
+    box.appendChild(el);
+  }
+  return rows.length;
+}
+
+/// One row's time left, progress and play button, taken from the player when it is the one in it.
+function paintListenRow(el){
+  const e=el.entry, now=player.guid===e.guid&&player.feed===e.feed_id;
+  // Zero until the player has sought to where you left off; the saved position stands till then.
+  if(now&&audio.currentTime) e.position=Math.floor(audio.currentTime);
+  // The player's own length first: a feed's can be minutes out.
+  const d=(now&&isFinite(audio.duration)&&Math.floor(audio.duration))||e.duration;
+  el.classList.toggle('now',now);
+  $('.left',el).textContent=d?`${clock(d-e.position)} left`:`${clock(e.position)} in`;
+  // With no length there is nothing to show, and an empty rail reads as a heavy border.
+  const rail=$('.rail',el); rail.hidden=!d;
+  $('i',rail).style.width=`${d?Math.min(100,e.position/d*100):0}%`;
+  const b=$('[data-a=play]',el), label=now&&!audio.paused?'Pause':'Resume';
+  if(b.title!==label){ b.title=label; b.setAttribute('aria-label',label); b.innerHTML=label==='Pause'?ICON.pause:ICON.play; }
+}
+/// Keeps the list in step with the player. Only a row that is, or was, the one in it changes.
+function syncListening(){
+  for(const el of $$('#listening .childrow'))
+    if(el.entry&&(el.classList.contains('now')||player.guid===el.entry.guid)) paintListenRow(el);
+}
+
+/// Takes an episode off Currently Listening by forgetting where you got to: the list is every
+/// episode with a saved position short of the end, so the position is what has to go.
+async function forget(e){
+  // Closed without saving first, or the player's next save would put it straight back.
+  if(player.guid===e.guid){ player.guid=null; $('#pclose').click(); }
+  try{
+    await api(`/api/entries/${encodeURIComponent(e.feed_id)}/${encodeURIComponent(e.guid)}/position`,
+      {method:'POST',body:JSON.stringify({secs:0})});
+  }catch(err){ toast(err.message,true); }
+  if(S.feed===':listening') renderListed(VIEWS[':listening']);
+}
+
+// The toolbar acts on whatever is selected: the feed on the left, the item in the table.
+$('#tbRemove').onclick=()=>{ const f=S.feeds.find(x=>x.id===S.feed); if(f) removeFeed(f); };
+$('#tbPlay').onclick=()=>{ const e=cur(); if(e) play(e); };
+$('#tbRead').onclick=()=>{ const e=cur(); if(e) epAction('read',e,null); };
+$('#tbFlag').onclick=()=>{ const e=cur(); if(e) epAction('flag',e,null); };
+let searchT;
+$('#epSearch').oninput=ev=>{ clearTimeout(searchT);
+  searchT=setTimeout(()=>{ S.q=ev.target.value; S.offset=0; loadEntries(); },250); };
+// Crossing the phone breakpoint moves the files between their pane and the text.
+window.matchMedia?.('(max-width:820px)')?.addEventListener?.('change',()=>{ const e=cur(); if(e) showDetail(e); });
+
+let expanded = new Set(JSON.parse(localStorage.getItem('ipx.expanded')||'[]'));
+function toggleGroup(id){
+  expanded.has(id) ? expanded.delete(id) : expanded.add(id);
+  try{ localStorage.setItem('ipx.expanded', JSON.stringify([...expanded])); }catch{}
+  renderFeeds();
+}
+let globalMax = 3;
+function due(ts){
+  const d = ts - Date.now()/1000;
+  if(d <= 0) return 'due now';
+  if(d < 3600) return 'in '+Math.max(1,Math.round(d/60))+'m';
+  if(d < 86400) return 'in '+Math.round(d/3600)+'h';
+  return 'in '+Math.round(d/86400)+'d';
+}
+
+/// Your settings: the theme, your subscriptions as OPML, and, to read, what the server does
+/// with feeds. The server's own settings, the accounts and the log are on /admin, which only an
+/// admin is sent (issue #19); this used to hold them too, shown to admins only.
+async function prefsModal(){
+  const g = await api('/api/settings');
+  const admin = !!(S.me&&S.me.admin);
+  openModal(`<h3>Settings</h3>
+    <div class="field"><label>Theme</label>
+      <select id="stheme">${Object.entries(THEMES).map(([k,t])=>
+        `<option value="${k}"${theme.name===k?' selected':''}>${esc(t.name)}</option>`).join('')}</select></div>
+    <div class="field" id="smodefield"${THEMES[theme.name].modes?'':' hidden'}><label>Light or dark</label>
+      <select id="smode">${Object.entries(MODES).map(([k,t])=>
+        `<option value="${k}"${theme.mode===k?' selected':''}>${esc(t)}</option>`).join('')}</select>
+      <span class="hint">Auto follows your system's light/dark setting.</span></div>
+    <div class="field"><label>Subscriptions</label>
+      <div class="inline">
+        <!-- Words as well as icons: a floppy disk and a plus mean nothing on their own here. -->
+        <a class="btn" href="/api/opml" download="ipx-subscriptions.opml" title="Export OPML" aria-label="Export OPML">${ICON.save} Export</a>
+        <button class="btn" id="gopml" title="Import OPML…" aria-label="Import OPML">${ICON.plus} Import…</button>
+      </div>
+      <span class="hint">Export saves your subscriptions as OPML for another podcast app. Import
+      subscribes you to every feed in one.</span></div>
+    <div class="field"><label>Feeds are checked every</label>
+      <span class="hint">${everyText(g.every_mins)}, for every feed that does not set its own.
+      ${admin?'This and the rest of the server\'s settings are on the <a href="/admin">admin page</a>.':'Only an admin changes this.'}</span></div>
+    <div class="field"><label>Download folder</label>
+      <span class="hint" style="overflow-wrap:anywhere">${esc(g.download_dir)}</span></div>
+    <div class="cardacts"><button class="btn ico" onclick="closeModal()" title="Close" aria-label="Close">${ICON.close}</button></div>`);
+  $('#stheme').onchange=e=>setTheme(e.target.value,undefined,true);
+  $('#smode').onchange=e=>setTheme(undefined,e.target.value,true);
+  $('#gopml').onclick=opmlModal;
+}
+
+function settingsModal(f, newUrl?: string){
+  const isGroup = S.feeds.some(c=>c.group===f.id);
+  openModal(`<h3>${esc(f.title||f.id)}</h3>
+    ${isGroup?`<p class="hint" style="margin:-6px 0 12px">This is ${isPatreon(f)?'a Patreon creator':'an OPML subscription'}. These
+      settings apply to it and are inherited by every feed inside it.</p>`:''}
+    ${f.managed?`<p class="hint" style="margin:-6px 0 12px">This feed comes from
+      ${isPatreon(S.feeds.find(p=>p.id===f.group))?'a Patreon creator':'an OPML subscription'} and follows its settings. Saving anything here gives it its own entry in
+      config.toml, and it stops following the subscription's settings.</p>`:''}
+    <p class="hint" style="margin:-4px 0 10px">These are <b>your</b> settings for this feed.
+      Everyone else keeps their own.</p>
+    <div class="field"><label>Keywords</label>
+      <input type="text" id="skw" value="${esc(f.keywords.join(', '))}">
+      <span class="hint">Comma separated. Empty takes everything.</span></div>
+    <div class="field"><label>Max new downloads per scan</label>
+      <input type="number" id="smax" min="0" value="${f.max_new_per_check??''}">
+      <span class="hint">Blank follows the global default (${globalMax}). The rest wait for
+      the next scan.</span></div>
+    <label class="check"><input type="checkbox" id="sauto" ${f.auto_download?'checked':''}> Download new items automatically</label>
+    <label class="check"><input type="checkbox" id="sexp" ${f.allow_explicit?'checked':''}> Allow items marked explicit</label>
+    <div class="field"><label>Feed URL</label>
+      <div class="inline">
+        <input type="text" id="surl" value="${esc(newUrl||f.url)}" spellcheck="false" ${S.me&&S.me.admin?'':'readonly'}>
+        <button type="button" class="btn ico" id="scopy" title="Copy the URL" aria-label="Copy the URL">${ICON.copy}</button>
+      </div>
+      <span class="hint">${S.me&&S.me.admin
+        ? `Shared with everyone reading this feed. Editing it keeps every item and download —
+           handy when an auth token in the URL is rotated. The feed is re-checked from scratch
+           on the next scan.`
+        : `The same for everyone reading this feed, so only an admin can change it.`}</span></div>
+    ${S.me&&S.me.admin?`<div class="field"><label>Download folder (shared)</label>
+      <input type="text" id="sfolder" value="${esc(f.folder||'')}" placeholder="${esc(f.title||f.id)}">
+      <span class="hint">Where the files land. There is one copy however many people
+      subscribe, so this is the same for everyone.</span></div>`:''}
+    ${S.me&&S.me.admin?`<div class="field"><label>Directory category (shared)</label>
+      <input type="text" id="scat" list="scats" value="${esc(f.category||'')}" placeholder="${esc(f.feed_category||'None')}">
+      <datalist id="scats"></datalist>
+      <span class="hint">${f.feed_category
+        ? `The feed names its own, ${esc(f.feed_category)}, and the Directory uses that.`
+        : `The feed names none, so the Directory files it under this. Pick one already listed where it fits.`}</span></div>`:''}
+    <div class="cardacts"><button class="btn ico" onclick="closeModal()" title="Cancel" aria-label="Cancel">${ICON.close}</button>
+      <button class="btn ico primary" id="ssave" title="Save" aria-label="Save">${ICON.check}</button></div>`);
+  $('#scopy').onclick=()=>copyText($('#surl').value,$('#scopy'));
+  // Offer the categories the Directory already shows, so a blog about games joins Games rather
+  // than starting a second chip beside it.
+  if($('#scats')) api('/api/directory').then(rows=>{ $('#scats').innerHTML=[...new Set((rows||[])
+    .map(p=>p.category).filter(Boolean))].sort().map(c=>`<option value="${esc(c)}">`).join(''); }).catch(()=>{});
+  $('#ssave').onclick=async()=>{
+    const max=$('#smax').value;
+    try{
+      const patch: Record<string, unknown>={
+        keywords:$('#skw').value.split(',').map(s=>s.trim()).filter(Boolean),
+        max_new_per_check:max===''?null:Number(max),
+        auto_download:$('#sauto').checked, allow_explicit:$('#sexp').checked};
+      // The shared half is an admin's to change, and the API refuses it from anyone else.
+      if(S.me&&S.me.admin){
+        patch.url=$('#surl').value.trim();
+        patch.folder=$('#sfolder').value.trim()||null;
+        patch.category=$('#scat').value.trim()||null;
+      }
+      await api(`/api/feeds/${encodeURIComponent(f.id)}`,{method:'PATCH',body:JSON.stringify(patch)});
+      closeModal(); toast('Saved — applies on the next scan');
+      await loadFeeds(true); renderFeed(); loadEntries();
+    }catch(e){ toast(e.message,true); }
+  };
+}
+
+function downloadLatestModal(f){
+  openModal(`<h3>Download latest items</h3>
+    <div class="field"><label>How many of the newest undownloaded items?</label>
+      <input type="number" id="dcount" min="1" max="100" value="5">
+      <span class="hint">Queued immediately, ignoring the per-scan limit.</span></div>
+    <div class="cardacts"><button class="btn ico" onclick="closeModal()" title="Cancel" aria-label="Cancel">${ICON.close}</button>
+      <button class="btn ico primary" id="dgo" title="Download" aria-label="Download">${ICON.download}</button></div>`);
+  $('#dgo').onclick=async()=>{
+    const n=Number($('#dcount').value)||5;
+    try{
+      const r=await api(`/api/feeds/${encodeURIComponent(f.id)}/download-latest`,
+        {method:'POST',body:JSON.stringify({count:n})});
+      closeModal(); toast(`Queued ${r.queued} item${r.queued===1?'':'s'}`);
+    }catch(e){ toast(e.message,true); }
+  };
+}
+
+function removeFeed(f){
+  openModal(`<h3>Unsubscribe?</h3>
+    <p style="color:var(--dim)">Removes <b>${esc(f.title||f.id)}</b> from your feeds. Anyone else
+    reading it keeps it, along with their own read state.
+    Downloaded files and history are kept, so re-adding it will not pull the back catalogue again.</p>
+    <div class="cardacts"><button class="btn ico" onclick="closeModal()" title="Cancel" aria-label="Cancel">${ICON.close}</button>
+      <button class="btn ico danger" id="rgo" title="Unsubscribe" aria-label="Unsubscribe">${ICON.circleMinus}</button></div>`);
+  $('#rgo').onclick=async()=>{
+    await api(`/api/feeds/${encodeURIComponent(f.id)}`,{method:'DELETE'});
+    closeModal(); toast('Unsubscribed'); S.feed=null;
+    await loadFeeds(); if(!S.feeds.length) renderFeed();
+  };
+}
+
+function opmlModal(){
+  openModal(`<h3>OPML</h3>
+    <p style="color:var(--dim);font-size:13.5px">Move subscriptions between podcast apps.</p>
+    <div class="field"><label>Export: save your subscriptions as OPML</label>
+      <div class="inline">
+        <a class="btn ico" href="/api/opml" download="ipx-subscriptions.opml" title="Export OPML" aria-label="Export OPML">${ICON.save}</a>
+      </div></div>
+    <div class="field" style="margin-top:16px"><label>Import: choose a file, or paste OPML</label>
+      <input type="file" id="opmlFile" accept=".opml,.xml,text/x-opml,text/xml,application/xml" style="margin-bottom:8px">
+      <textarea id="opmlText" rows="6" style="width:100%;background:var(--bg);border:1px solid var(--line);color:var(--fg);border-radius:8px;padding:8px;font:12px monospace"></textarea></div>
+    <div class="cardacts"><button class="btn ico" onclick="closeModal()" title="Close" aria-label="Close">${ICON.close}</button>
+      <button class="btn ico primary" id="oimp" title="Import: subscribe to every feed in it" aria-label="Import">${ICON.plus}</button></div>`);
+  $('#oimp').onclick=async()=>{
+    // A chosen file is read here and sent as text, so the server never stores it. Clearing
+    // the picker lets go of it on this side too, whether it was refused or imported.
+    const pick=$('#opmlFile'), file=pick.files[0];
+    const xml=file ? await file.text() : $('#opmlText').value;
+    const letGo=()=>{ pick.value=''; };
+    // A quick look before sending anything. The server parses it properly and has the last word.
+    if(!/<opml[\s>]/i.test(xml)){
+      letGo(); toast(`${file?file.name:'That'} is not an OPML file`,true); return;
+    }
+    try{
+      const r=await api('/api/opml',{method:'POST',body:JSON.stringify({xml})});
+      letGo(); closeModal(); toast(`Subscribed to ${r.added} feed(s)`+(r.already?`, ${r.already} you already had`:'')); loadFeeds(true);
+    }catch(e){ letGo(); toast(e.message,true); }
+  };
+}
+
+async function scanAll(){ toast('Scanning all feeds…'); await api('/api/fetch',{method:'POST',body:JSON.stringify({force:true})}); }
+$('#scanAll').onclick=scanAll;
+$('#prefs').onclick=prefsModal;
+// Someone the proxy signed in is signed out by the proxy: ipx's own sign-out cannot stick while
+// the proxy still vouches for them. /api/me says where, when that is the case.
+$('#signout').onclick=async()=>{ await api('/api/logout',{method:'POST'}); location.href=S.me?.sign_out||'/login'; };
+api('/api/me').then(u=>{
+  S.me=u;
+  $('#who').textContent=u.name+(u.admin?' · admin':'');
+}).catch(()=>{});
+$('#feedFilter').oninput=renderFeeds;
+// The feed list from the keyboard: Enter or Space opens a row, Right and Left open and close a
+// folder. Handled keys stop here, or the player's own Space and arrows would act on them too.
+$('#feedlist').onkeydown=ev=>{
+  const row=ev.target.closest('[data-id]'); if(!row) return;
+  const id=row.dataset.id;
+  if((ev.key==='Enter'||ev.key===' ')&&ev.target===row) row.click();
+  else if(row.classList.contains('group')&&
+    (ev.key==='ArrowRight'&&!expanded.has(id)||ev.key==='ArrowLeft'&&expanded.has(id))) toggleGroup(id);
+  else return;
+  ev.preventDefault(); ev.stopPropagation();
+};
+$('#burger').onclick=()=>nav(!$('#sidebar').classList.contains('open'));
+$('#scrim').onclick=()=>nav(false);
+

web/src/events.ts

@@ -0,0 +1,46 @@
+/* ---------------- live events ---------------- */
+let sse;
+function connect(){
+  sse=new EventSource('/api/events');
+  const soon=(fn,ms=500)=>{ let t; return ()=>{ clearTimeout(t); t=setTimeout(fn,ms); }; };
+  const refreshFeeds=soon(()=>loadFeeds(true));
+  const refreshEntries=soon(()=>{ if(S.feed) loadEntries(); });
+  let fresh={};
+  const tellNew=soon(()=>{
+    const feeds=Object.keys(fresh), n=feeds.reduce((a,k)=>a+fresh[k],0);
+    if(n) toast(feeds.length===1 ? `${feeds[0]}: ${n} new` : `${n} new in ${feeds.length} feeds`);
+    fresh={};
+  },900);
+  sse.onmessage=m=>{
+    let ev; try{ ev=JSON.parse(m.data) }catch{ return }
+    if(ev.ev==='progress'){
+      const pct=ev.total?ev.done/ev.total*100:0;
+      // Only the row actually downloading. Without the enclosure id this used to paint
+      // every pending bar at once, so adding a feed looked like it was fetching the lot.
+      const bar=document.querySelector<HTMLElement>(`.dlbar[data-bar="${ev.enclosure}"] i`);
+      if(bar){ bar.style.width=pct+'%'; bar.parentElement.classList.add('live'); }
+      $('#count') && ($('#count').textContent=`downloading ${ev.file} — ${pct.toFixed(0)}%`);
+    }
+    else if(ev.ev==='download_done'){
+      const bar=document.querySelector(`.dlbar[data-bar="${ev.enclosure}"]`);
+      if(bar) bar.classList.remove('live');
+      toast('Downloaded '+ev.path.split('/').pop()); refreshEntries(); refreshFeeds();
+    }
+    else if(ev.ev==='download_error'){
+      const bar=document.querySelector(`.dlbar[data-bar="${ev.enclosure}"]`);
+      if(bar) bar.classList.remove('live');
+      toast('Download failed: '+ev.msg,true); refreshEntries();
+    }
+    else if(ev.ev==='feed_done'){
+      if(ev.new){ fresh[ev.feed]=(fresh[ev.feed]||0)+ev.new; tellNew(); }
+      refreshFeeds(); if(ev.feed===S.feed||S.feed===':all') refreshEntries();
+    }
+    // No toast: a scan of every feed raised one per failure, to everyone. The feed list's
+    // red ! marks the feed instead, and its page says why.
+    else if(ev.ev==='feed_error') refreshFeeds();
+    else if(ev.ev==='scan_done'){ refreshFeeds(); refreshEntries(); }
+  };
+  sse.onerror=()=>{ sse.close(); setTimeout(connect,4000); };
+}
+connect();
+loadFeeds();

web/src/feedpage.ts

@@ -0,0 +1,185 @@
+/* ---------------- feed page ---------------- */
+function renderFeed(){
+  const box=$('#content');
+  box.classList.remove('plain');
+  const v=VIEWS[S.feed];
+  if(v&&v.url) return renderListed(v);
+  const f=v?null:S.feeds.find(x=>x.id===S.feed);
+  $('#tbRemove').disabled=!f;
+  syncTools(null);
+  if(!v&&!f){ box.innerHTML='<p class="empty">Add a feed to get started.</p>'; $('#count').textContent=''; return; }
+  const name=f?(f.title||f.id):v.title;
+  $('#epSearch').placeholder=`Search ${name}…`;
+  const kids=f?S.feeds.filter(c=>c.group===f.id):[];
+  if(kids.length){ box.classList.add('plain'); renderGroup(f,kids); return; }
+  const unreadAll=S.feeds.reduce((n,x)=>n+(x.unread||0),0);
+  box.innerHTML = (f ? `
+    <div class="fhead slim">
+      ${artHTML(f.image,name)}
+      <div class="meta">
+        <h2>${esc(name)}</h2>
+        <div class="sub stat" title="Checked every ${everyText(f.every_mins)}${f.next_check?`, next ${due(f.next_check)}`:''}">${
+          plural(f.entries,'item')}, ${f.downloaded} downloaded · checked ${ago(f.last_checked)}${
+          f.subscribers>1?` · shared with ${f.subscribers-1} other ${f.subscribers===2?'person':'people'}`:''}</div>
+        ${failBannerHTML(f)}
+        ${f.orphaned?`<div class="sub" style="color:var(--warn)">This feed is no longer listed in its
+          OPML subscription. It was kept rather than removed because it has downloaded items.</div>`:''}
+        ${f.group?`<div class="sub">From the OPML subscription <b>${esc(f.group)}</b></div>`:''}
+      </div>
+      <div class="acts">
+        <button class="btn ico primary" data-a="scan" title="Check this feed now" aria-label="Check this feed now">${ICON.scan}</button>
+        <button class="btn ico" data-a="dl" title="Download latest…" aria-label="Download latest">${ICON.download}</button>
+        <button class="btn ico" data-a="read" title="Mark all read" aria-label="Mark all read">${ICON.checks}</button>
+        <button class="btn ico" data-a="pin" title="${f.pinned?'Unpin from the top of the feed list':'Pin to the top of the feed list'}" aria-label="${f.pinned?'Unpin':'Pin'}" aria-pressed="${!!f.pinned}">${f.pinned?ICON.pinOn:ICON.pin}</button>
+        <button class="btn ico" data-a="settings" title="Settings" aria-label="Settings">${ICON.settings}</button>
+        <button class="btn ico danger" data-a="rm" title="Unsubscribe" aria-label="Unsubscribe">${ICON.circleMinus}</button>
+      </div>
+    </div>` : `
+    <div class="fhead slim">
+      <div class="art">${v.icon}</div>
+      <div class="meta">
+        <h2>${v.title}</h2>
+        <div class="sub">Every item from the ${S.feeds.length} feed${S.feeds.length===1?'':'s'} you
+          subscribe to, newest first · ${unreadAll} unread</div>
+      </div>
+      <div class="acts">
+        <button class="btn ico primary" data-a="scanall" title="Check every feed now" aria-label="Check every feed now">${ICON.scan}</button>
+        <button class="btn ico" data-a="readall" title="Mark everything read" aria-label="Mark everything read">${ICON.checks}</button>
+      </div>
+    </div>`) + `
+    <div class="toolbar">
+      <div class="tabs">
+        ${[['all','All'],['unread','Unread'],['downloaded','Downloaded'],['flagged','Pinned']].map(([t,label])=>
+          `<button data-f="${t}" class="${S.filter===t?'on':''}">${label}</button>`).join('')}
+      </div>
+    </div>`;
+
+  const pane=document.createElement('div');
+  pane.id='split';
+  if(f) pane.className='one';
+  pane.innerHTML='<div id="list">'+sortHead()+
+    '<div id="eps"></div></div><div id="files"></div><div id="grab"></div><div id="detail"></div>';
+  $$('.ephead [data-sort]',pane).forEach(b=>b.onclick=()=>sortBy(b.dataset.sort));
+  box.appendChild(pane);
+  pane.style.setProperty('--listh', localStorage.getItem('ipx.listh') || '60%');
+  dragSplit(pane);
+  // Nothing is open any more, so nothing is kept on the Unread tab for being open.
+  S.sel=null;
+  showDetail(null);
+
+  $$('#content .acts .btn').forEach(b=>b.onclick=()=>f?feedAction(b.dataset.a,f):allAction(b.dataset.a));
+  $$('#content .tabs button').forEach(b=>b.onclick=()=>{
+    S.filter=b.dataset.f; S.offset=0;
+    try{ localStorage.setItem('ipx.filter',S.filter); }catch{}
+    renderFeed(); loadEntries();
+  });
+  if(f) wireFailBanner(box,f);
+}
+
+/// The item table's headings, each a button that sorts by its column. The first click goes the
+/// natural way round (A to Z; newest, largest and kept first) and the next one reverses it.
+const COLS=[['kept','Pinned',ICON.pin],['title','Title'],['feed','Feed'],['type','File'],['size','Size'],['published','Published']];
+function sortHead(){
+  return '<div class="ephead"><span></span>'+COLS.map(([k,label,icon])=>{
+    const on=S.sort.col===k;
+    return `<button class="hs${on?' on':''}${k==='feed'?' h-fd':''}${icon?' h-ic':''}" data-sort="${k}"`+
+      ` title="Sort by ${label.toLowerCase()}" aria-label="Sort by ${label.toLowerCase()}">${icon||label}`+
+      `${on?`<span class="arr ${S.sort.dir}">${ICON.caret}</span>`:''}</button>`;
+  }).join('')+'<span></span></div>';
+}
+function sortBy(col){
+  const first=['published','size','kept'].includes(col)?'desc':'asc';
+  S.sort={col,dir:S.sort.col===col?(S.sort.dir==='asc'?'desc':'asc'):first};
+  try{ localStorage.setItem('ipx.sort',JSON.stringify(S.sort)); }catch{}
+  S.offset=0; renderFeed(); loadEntries();
+}
+
+/// An OPML subscription's page lists the feeds inside it rather than items, but keeps
+/// every action a normal feed has -- it is still an ordinary feed entry underneath.
+// A Patreon creator split into its shows is drawn like an OPML, and named for what it is.
+const isPatreon=f=>/patreon\.com\//.test(f&&f.url||'');
+
+function renderGroup(f,kids){
+  const unread=kids.reduce((n,c)=>n+c.unread,0);
+  const saved=kids.reduce((n,c)=>n+c.downloaded,0);
+  const gone=kids.filter(c=>c.orphaned).length;
+  $('#count').textContent=`${f.title||f.id}: ${kids.length} feed${kids.length===1?'':'s'}, ${unread} unread`;
+  // The same header as a feed's, buttons in the same places: it is a feed underneath.
+  $('#content').innerHTML = `
+    <div class="fhead slim">
+      ${folderArt(f,kids)}
+      <div class="meta">
+        <h2>${esc(f.title||f.id)}</h2>
+        <div class="sub stat" title="Checked every ${everyText(f.every_mins)}">${isPatreon(f)?'Patreon creator':'OPML subscription'}
+          · ${plural(kids.length,'feed')}, ${unread} unread, ${saved} downloaded · checked ${ago(f.last_checked)}</div>
+        ${failBannerHTML(f)}
+        ${gone?`<div class="sub" style="color:var(--warn)">${gone} feed${gone===1?' is':'s are'} no longer
+          listed but kept because ${gone===1?'it has':'they have'} downloads.</div>`:''}
+      </div>
+      <div class="acts">
+        <button class="btn ico primary" data-a="scan" title="Re-read the OPML now" aria-label="Re-read the OPML now">${ICON.scan}</button>
+        <button class="btn ico" data-a="read" title="Mark all read" aria-label="Mark all read">${ICON.checks}</button>
+        <button class="btn ico" data-a="pin" title="${f.pinned?'Unpin from the top of the feed list':'Pin to the top of the feed list'}" aria-label="${f.pinned?'Unpin':'Pin'}" aria-pressed="${!!f.pinned}">${f.pinned?ICON.pinOn:ICON.pin}</button>
+        <button class="btn ico" data-a="settings" title="Settings" aria-label="Settings">${ICON.settings}</button>
+        <button class="btn ico danger" data-a="rm" title="Unsubscribe" aria-label="Unsubscribe">${ICON.circleMinus}</button>
+      </div>
+    </div>
+    <div class="toolbar">
+      <input type="search" class="grow" id="kidSearch" placeholder="Search these feeds…">
+      <span style="color:var(--faint);font-size:12.5px">${esc(f.url)}</span>
+    </div>
+    <div class="childlist" id="kidlist"></div>`;
+  $$('#content .acts .btn').forEach(b=>b.onclick=()=>feedAction(b.dataset.a,f));
+  wireFailBanner($('#content'),f);
+  const draw=()=>{
+    const q=($('#kidSearch').value||'').trim().toLowerCase();
+    const box=$('#kidlist'); box.innerHTML='';
+    const rows=kids.filter(c=>!q||(c.title||c.id).toLowerCase().includes(q)).sort(unreadFirst);
+    if(!rows.length){ box.innerHTML='<p class="empty">Nothing matches.</p>'; return; }
+    for(const c of rows){
+      const el=document.createElement('div');
+      el.className='childrow';
+      el.innerHTML = artHTML(c.image,c.title||c.id)+
+        `<div class="txt"><b>${esc(c.title||c.id)}</b>`+
+        `<small class="meta">${plural(c.entries,'item')} · ${c.downloaded} downloaded`+
+        (c.failing?` · <span style="color:var(--bad)" title="${esc(c.failing.reason)}">error</span>`
+          :c.last_error?` · <span style="color:var(--bad)">error</span>`:'')+`</small></div>`+
+        (c.orphaned?'<span class="tag">Gone</span>':'')+
+        (c.failing?`<span class="tag" style="color:var(--bad)" title="${esc(c.failing.reason)}">Error</span>`:'')+
+        `<span class="badge${c.unread?'':' zero'}">${c.unread}</span>`;
+      el.onclick=()=>selectFeed(c.id);
+      box.appendChild(el);
+    }
+  };
+  $('#kidSearch').oninput=draw;
+  draw();
+}
+
+async function feedAction(a,f){
+  if(a==='scan'){ toast('Scanning '+(f.title||f.id)+'…'); await api('/api/fetch',{method:'POST',body:JSON.stringify({feed:f.id,force:true})}); }
+  if(a==='read'){ const r=await api(`/api/feeds/${encodeURIComponent(f.id)}/read-all`,{method:'POST'}); toast(`Marked ${r.marked} read`); await loadFeeds(true); renderFeed(); loadEntries(); }
+  if(a==='rm') removeFeed(f);
+  if(a==='pin'){
+    try{
+      await api(`/api/feeds/${encodeURIComponent(f.id)}`,{method:'PATCH',body:JSON.stringify({pinned:!f.pinned})});
+      await loadFeeds(true); renderFeed();
+    }catch(e){ toast(e.message,true); }
+  }
+  if(a==='settings') settingsModal(f);
+  if(a==='dl') downloadLatestModal(f);
+}
+/// All Subscriptions' own buttons: a feed's, across every feed you read.
+async function allAction(a){
+  if(a==='scanall') return scanAll();
+  if(a==='readall'){
+    const n=S.feeds.reduce((k,x)=>k+(x.unread||0),0);
+    if(!n){ toast('Nothing unread'); return; }
+    // One click across every feed is a lot to take back, so this one asks first.
+    if(!confirm(`Mark all ${n} unread item${n===1?'':'s'} read, in every feed you subscribe to?`)) return;
+    try{
+      const r=await api('/api/read-all',{method:'POST'});
+      toast(`Marked ${r.marked} read`); await loadFeeds(true); renderFeed(); loadEntries();
+    }catch(e){ toast(e.message,true); }
+  }
+}
+

web/src/feeds.ts

@@ -0,0 +1,129 @@
+/* ---------------- feeds ---------------- */
+async function loadFeeds(keepSel?: boolean){
+  S.feeds = await api('/api/feeds');
+  api('/api/settings').then(g=>{globalMax=g.max_new_per_check}).catch(()=>{});
+  renderFeeds();
+  // Land back where you were; a feed you no longer subscribe to, or a first visit, goes to
+  // All Subscriptions rather than picking one alphabetically. Nothing to land on at all (a
+  // brand new account) leaves S.feed alone, so the empty state's own message shows instead.
+  if(!keepSel && S.feeds.length){
+    const known = S.feed && (VIEWS[S.feed] || S.feeds.some(f=>f.id===S.feed));
+    selectFeed(known ? S.feed : ':all');
+  }
+}
+// An OPML can hold dozens of feeds; the ones with something new go first. sort is stable, so the
+// server's alphabetical order still holds within each half.
+const unreadFirst=(a,b)=>Number(b.unread>0)-Number(a.unread>0);
+// The original's source list opened with these, above the feeds. They are places, not feeds:
+// an id starting with ':' can never be a feed's, since feed ids are slugs.
+const VIEWS={
+  ':directory':{title:'Directory',icon:ICON.directory,url:'/api/directory',
+    blurb:'Every feed anyone on this server subscribes to, A to Z. The feeds inside an OPML are listed one by one, not the OPML.'},
+  ':popular':{title:'Popular',icon:ICON.popular,url:'/api/popular',
+    blurb:'The ten feeds with the most subscribers here. The feeds inside an OPML count one by one, not the OPML.'},
+  ':listening':{title:'Currently Listening',icon:ICON.audio,url:'/api/entries?filter=in_progress&limit=50',
+    blurb:'Episodes you started and have not finished, across every feed you subscribe to. Pick one up where you left off.'},
+  ':all':{title:'All Subscriptions',icon:ICON.all},
+};
+function renderFeeds(){
+  const q=$('#feedFilter').value.trim().toLowerCase();
+  const list=$('#feedlist'); const top=list.scrollTop;
+  // Every row is replaced, so put the keyboard back on the row, or the triangle, it was on.
+  const a=document.activeElement, was=a&&a.closest&&a.closest<HTMLElement>('#feedlist [data-id]');
+  const back=was&&([was.dataset.id,a.classList.contains('chev')] as [string, boolean]);
+  const done=()=>{
+    list.scrollTop=top;
+    const row=back&&list.querySelector(`[data-id="${CSS.escape(back[0])}"]`);
+    if(row) (back[1]&&$('.chev',row)||row).focus();
+  };
+  list.innerHTML='';
+  const unreadAll=S.feeds.reduce((n,f)=>n+(f.unread||0),0);
+  const places=document.createElement('div');
+  places.className='places';
+  for(const [id,v] of Object.entries(VIEWS)){
+    const el=document.createElement('div');
+    el.className='place'+(S.feed===id?' sel':'');
+    el.tabIndex=0; el.dataset.id=id;
+    el.innerHTML=`<span class="ico">${v.icon}</span><b>${v.title}</b>`+(id===':all'
+      ?`<span class="badge${unreadAll?'':' zero'}" title="${unreadAll} unread">${unreadAll>999?'999+':unreadAll}</span>`:'');
+    el.onclick=()=>{ selectFeed(id); nav(false); };
+    places.appendChild(el);
+  }
+  list.appendChild(places);
+  const shown=S.feeds.filter(f=>!q||(f.title||f.id).toLowerCase().includes(q));
+  if(!shown.length){ list.insertAdjacentHTML('beforeend','<p class="empty" style="padding:20px 8px">No feeds.</p>'); return done(); }
+
+  // Feeds from a subscribed OPML sit under it, so the group reads as one thing. Pinned feeds
+  // go first: a folder with its feeds under it, a feed from inside one lifted out of it.
+  const byId=Object.fromEntries(shown.map(f=>[f.id,f]));
+  const inside=f=>shown.filter(c=>c.group===f.id&&!c.pinned);
+  const tops=shown.filter(f=>f.pinned||!(f.group&&byId[f.group]));
+  const order=[];
+  for(const f of [...tops.filter(f=>f.pinned),...tops.filter(f=>!f.pinned)]){
+    order.push([f,0]);
+    // A subscription can hold dozens of feeds, so a folder starts closed. Searching
+    // opens them all, or matches inside a closed folder would be invisible.
+    if(expanded.has(f.id) || q)
+      for(const c of inside(f).sort(unreadFirst)) order.push([c,1]);
+  }
+  // The rule under the pinned block goes under its last row: a pinned folder's last feed when
+  // it is open.
+  const lastTop=order.findIndex(([f,d])=>!d&&!f.pinned);
+  const lastPin=(lastTop<0?order.filter(([f])=>f.pinned):order.slice(0,lastTop)).pop()?.[0];
+  for(const [f,depth] of order){
+    const kids=inside(f).length;
+    // A subscription holds no entries itself, so its counts are the sum of what is inside --
+    // taken from every feed it holds, not just the ones a filter left showing.
+    const mine=S.feeds.filter(c=>c.group===f.id);
+    const sum=k=>mine.reduce((n,c)=>n+(c[k]||0),0);
+    const [unread,eps,saved]=mine.length
+      ? [sum('unread'),sum('entries'),sum('downloaded')]
+      : [f.unread,f.entries,f.downloaded];
+    // A group's own row has no error of its own worth mentioning if the OPML itself
+    // reads fine; it is failing when any feed inside it is. The feed's own page says what
+    // went wrong (failBannerHTML); the list only has to make it findable.
+    const bad=c=>c.failing?.reason||c.last_error;
+    const err=mine.length ? mine.map(bad).find(Boolean) : bad(f);
+    const el=document.createElement('div');
+    el.className='feed'+(S.feed===f.id?' sel':'')+(depth?' child':'')+(kids?' group':'')+
+      (f.pinned&&!depth?' pinned':'')+(f===lastPin&&lastTop>=0?' lastpin':'');
+    el.tabIndex=0; el.dataset.id=f.id;
+    const open = !!(kids && (expanded.has(f.id) || q));
+    el.innerHTML =
+      // The error mark hangs in the margin where a folder's triangle does. A folder already has
+      // its triangle there, so that turns red instead, and the feed inside shows the mark.
+      (kids?`<button class="chev${err?' bad':''}" aria-expanded="${open}" title="${err?`A feed inside has a problem: ${esc(err)}`:'Show or hide the feeds inside'}" aria-label="Show or hide the feeds inside">${ICON.caret}</button>`
+        :err?`<span class="ferr" role="img" title="${esc(err)}" aria-label="Error: ${esc(err)}">${ICON.alert}</span>`:'')+
+      (mine.length?folderArt(f,mine):artHTML(f.image,f.title||f.id))+
+      `<div class="txt"><b>${f.pinned?`<span class="fpin" title="Pinned">${ICON.pinOn}</span>`:''}${esc(f.title||f.id)}</b><small>`+
+      `${mine.length?plural(mine.length,'feed'):plural(eps,'item')} · ${saved} downloaded`+
+      `</small></div>`+
+      (f.orphaned?'<span class="tag" title="No longer listed, kept because it has downloads">Gone</span>':'')+
+      `<span class="badge${unread?'':' zero'}" title="${unread} unread">${unread>999?'999+':unread}</span>`;
+    el.onclick=()=>{ selectFeed(f.id); nav(false); };
+    if(kids) $('.chev',el).onclick=ev=>{ ev.stopPropagation(); toggleGroup(f.id); };
+    list.appendChild(el);
+  }
+  done();
+}
+function selectFeed(id){
+  S.feed=id; S.offset=0; S.sel=null; S.q=''; $('#epSearch').value='';
+  try{ localStorage.setItem('ipx.feed',id); }catch{}
+  renderFeeds(); renderFeed(); loadEntries();
+}
+
+/// A failing feed's error, in plain words with something to do about it, once `failing` is
+/// set (it has been failing for a day and is a kind worth naming -- see `explain_failure` in
+/// src/feed.rs). Anything else still shows the raw error, as before.
+function failBannerHTML(f){
+  if(f.failing) return `<div class="sub" style="color:var(--bad)">${esc(f.failing.reason)}
+    <button type="button" class="btn tiny" data-ffail="unsub">Unsubscribe</button>${
+    f.failing.new_url?` <button type="button" class="btn tiny" data-ffail="newurl">Use the new address</button>`:''}</div>`;
+  if(f.last_error) return `<div class="sub" style="color:var(--bad)">${esc(f.last_error)}</div>`;
+  return '';
+}
+function wireFailBanner(box,f){
+  const un=$('[data-ffail="unsub"]',box); if(un) un.onclick=()=>removeFeed(f);
+  const nu=$('[data-ffail="newurl"]',box); if(nu) nu.onclick=()=>settingsModal(f,f.failing.new_url);
+}
+

web/src/gestures.ts

@@ -0,0 +1,83 @@
+/* ---------------- touch gestures ---------------- */
+// On a touch screen: pull the item list down from its top to check the feed for new items, and
+// swipe the item you are reading left for the next one, right for the one before, or back to
+// the list from the first. Touch events only, so a mouse never sets these off. Listened for on
+// the document because the panes are rebuilt every time a feed renders.
+
+const PULL = 70;    // px down, from the list's top, that counts as a pull
+const SWIPE = 60;   // px across that counts as a swipe
+
+let touch: {x: number, y: number, t: number, pane: 'list' | 'detail', dx: number, dy: number} | null = null;
+
+/// Something that scrolls sideways, or takes typing, keeps its own gestures: a wide code block
+/// or table in a post, the player's seek bar, a text box.
+function ownsSwipe(el: Element | null){
+  for(let n = el; n && n.id !== 'detail'; n = n.parentElement){
+    if(/^(INPUT|TEXTAREA|SELECT|AUDIO|VIDEO)$/.test(n.tagName)) return true;
+    if(n.scrollWidth > n.clientWidth + 1 && /(auto|scroll)/.test(getComputedStyle(n).overflowX)) return true;
+  }
+  return false;
+}
+
+/// How far the list has been pulled: a note at its top, growing with the pull and pushing the
+/// items down, that says what letting go will do.
+function pullShow(dy: number){
+  const list = $('#list'); if(!list) return;
+  const d = Math.round(Math.min(dy, PULL * 1.6) / 2);
+  let tip = $('#pulltip');
+  if(!d){ tip?.remove(); return; }
+  if(!tip){ tip = document.createElement('div'); tip.id = 'pulltip'; list.prepend(tip); }
+  tip.style.height = d + 'px';
+  tip.textContent = dy >= PULL ? 'Release to check for new items' : 'Pull to check for new items';
+}
+
+function refreshFeed(){
+  const f = S.feeds.find(x => x.id === S.feed);
+  if(!f && S.feed !== ':all') return;
+  toast(f ? `Checking ${f.title || f.id} for new items…` : 'Checking every feed for new items…');
+  // New items arrive by the event stream when the scan finishes, as they do for a button press.
+  api('/api/fetch', {method: 'POST', body: JSON.stringify(f ? {feed: f.id, force: true} : {force: true})})
+    .catch(e => toast(e.message, true));
+  loadEntries();
+}
+
+document.addEventListener('touchstart', ev => {
+  touch = null;
+  if(ev.touches.length !== 1 || $('#modal')?.classList.contains('on')) return;
+  const t = ev.touches[0], target = ev.target as Element;
+  const detail = target.closest?.('#detail'), list = target.closest?.('#list');
+  // Reading means an item is open; the reader is its own screen on a phone, a pane otherwise.
+  if(detail && S.sel && !ownsSwipe(target)) touch = {x: t.clientX, y: t.clientY, t: Date.now(), pane: 'detail', dx: 0, dy: 0};
+  else if(list && list.scrollTop <= 0 && !VIEWS[S.feed]?.url) touch = {x: t.clientX, y: t.clientY, t: Date.now(), pane: 'list', dx: 0, dy: 0};
+}, {passive: true});
+
+document.addEventListener('touchmove', ev => {
+  if(!touch) return;
+  const t = ev.touches[0];
+  touch.dx = t.clientX - touch.x; touch.dy = t.clientY - touch.y;
+  if(touch.pane === 'list'){
+    // Only a pull that starts at the top and goes down; anything else is an ordinary scroll.
+    if(touch.dy < 0 || $('#list').scrollTop > 0){ pullShow(0); touch = null; return; }
+    pullShow(touch.dy);
+    if(ev.cancelable) ev.preventDefault();   // or the list rubber-bands under the finger as well
+  }else if(Math.abs(touch.dy) > 10 && Math.abs(touch.dy) > Math.abs(touch.dx)){
+    touch = null;                            // scrolling the text, not swiping; the first few px
+                                             // decide nothing, being mostly jitter
+  }
+}, {passive: false});
+
+document.addEventListener('touchend', () => {
+  const g = touch; touch = null;
+  if(!g) return;
+  if(g.pane === 'list'){
+    pullShow(0);
+    if(g.dy >= PULL) refreshFeed();
+    return;
+  }
+  // Across, mostly sideways, and not a slow drag while selecting text.
+  if(Math.abs(g.dx) < SWIPE || Math.abs(g.dx) < 2 * Math.abs(g.dy) || Date.now() - g.t > 800) return;
+  const i = S.entries.findIndex(x => x.guid === S.sel);
+  if(g.dx < 0){ if(i < S.entries.length - 1) stepEntry(1); return; }
+  if(i > 0) stepEntry(-1); else showDetail(null);
+});
+document.addEventListener('touchcancel', () => { if(touch?.pane === 'list') pullShow(0); touch = null; });

web/src/items.ts

@@ -0,0 +1,344 @@
+/* ---------------- items ---------------- */
+let loadSeq=0;
+async function loadEntries(append?: boolean){
+  // Directory and Popular list feeds, not items.
+  if(!S.feed || VIEWS[S.feed]?.url) return;
+  const p=new URLSearchParams({offset:String(S.offset),limit:String(LIMIT),filter:S.filter,sort:S.sort.col,dir:S.sort.dir});
+  if(S.q) p.set('q',S.q);
+  const asked=performance.now(), seq=++loadSeq;
+  const r=await api(S.feed===':all' ? `/api/entries?${p}`
+    : `/api/feeds/${encodeURIComponent(S.feed)}/entries?${p}`);
+  // Only the latest list counts: marking everything read reloads the All tab, and clicking
+  // Unread straight after could have that answer land last and replace the Unread one.
+  if(seq!==loadSeq) return;
+  S.total=r.total;
+  for(const e of r.entries){
+    const w=readWrites.get(readKey(e));
+    if(w && !(w.done<asked)) e.read=w.read;
+  }
+  let entries = append ? S.entries.concat(r.entries) : r.entries;
+  // A background scan finishing refreshes the list from the server, which -- on the Unread
+  // tab -- would drop the item you have open the moment reading it took it off the filter.
+  // Keep it until you pick a different one; the next refresh after that no longer protects it.
+  if(S.filter==='unread') entries=entries.filter(e=>!e.read||e.guid===S.sel);
+  if(!append && S.sel && !entries.some(e=>e.guid===S.sel)){
+    const open=S.entries.find(e=>e.guid===S.sel);
+    if(open) entries=[open,...entries];
+  }
+  S.entries = entries;
+  renderEntries();
+}
+function renderEntries(){
+  const box=$('#eps'); if(!box) return;
+  const f=S.feeds.find(x=>x.id===S.feed), v=VIEWS[S.feed];
+  const unread=f?f.unread:S.feeds.reduce((n,x)=>n+(x.unread||0),0);
+  $('#count').textContent=
+    `${f?(f.title||f.id):v?v.title:''}: ${S.total} item${S.total===1?'':'s'}, ${unread} unread`;
+  const pane=$('#list'), top=pane?pane.scrollTop:0;
+  box.innerHTML='';
+  if(!S.entries.length){
+    box.innerHTML=`<p class="empty">${S.q?'Nothing matches that search.':'Nothing here yet — try Scan now.'}</p>`;
+    return;
+  }
+  for(const e of S.entries) box.appendChild(epEl(e));
+  syncPlayButtons();
+  if(pane) pane.scrollTop=top;
+  if(S.entries.length < S.total){
+    const b=document.createElement('button');
+    b.className='btn'; b.id='more'; b.textContent=`Load more (${S.entries.length} of ${S.total})`;
+    b.onclick=()=>{S.offset+=LIMIT;loadEntries(true)};
+    box.appendChild(b);
+  }
+}
+function epEl(e){
+  // An item may carry several files. The row summarises the one you would act on --
+  // the playable one, else anything already downloaded, else the first -- and says how
+  // many others there are; the pane below lists them all.
+  const enc=e.enclosures.find(isPlayable) || e.enclosures.find(x=>x.path) || e.enclosures[0];
+  const has=!!(enc&&enc.path);
+  const playable=isPlayable(enc);
+  const others=e.enclosures.length-1;
+  const el=document.createElement('div');
+  el.className='ep'+(e.read?' read':'')+(S.sel===e.guid?' sel':'');
+  el.dataset.guid=e.guid;
+  const num=[e.season?`S${e.season}`:'',e.episode?`E${e.episode}`:''].filter(Boolean).join('');
+  const left = e.position>10 && e.duration ? `${clock(e.duration-e.position)} left` : (e.duration?clock(e.duration):'');
+  el.innerHTML=`
+    <button class="st" data-a="read" title="Mark ${e.read?'unread':'read'}">${
+      player.guid===e.guid?EQ:(e.read?'':'●')}</button>
+    <button class="fl${e.flagged?' on':''}" data-a="flag" title="${
+      e.flagged?'Unpin':'Pin, so it is never deleted'}">${e.flagged?ICON.pinOn:ICON.pin}</button>
+    <div class="body">
+      <span class="t">${esc(e.title||'(untitled)')}</span>
+      <div class="line">${[
+        num&&`<span>${num}</span>`,
+        left&&`<span>${left}</span>`,
+        others>0&&`<span>+${others} more file${others===1?'':'s'}</span>`,
+        enc&&enc.last_error&&enc.state==='error'&&`<span style="color:var(--bad)">${esc(enc.last_error)}</span>`,
+      ].filter(Boolean).join('<span class="dot"></span>')}</div>
+    </div>
+    <span class="fd">${esc(feedName(e.feed_id))}</span>
+    <div class="file">
+      ${enc?kindIcon(enc):''}
+      ${enc&&!has?`<div class="dlbar" data-bar="${enc.id}"><i></i></div>`:''}
+    </div>
+    <span class="size">${enc?mb(enc.length):''}</span>
+    <span class="date">${dateOf(e.published)}</span>
+    <div class="rowacts">
+      ${playable?`<button class="iconbtn" data-a="play" title="Play" aria-label="Play">${ICON.play}</button>`:
+            (enc&&!has?`<button class="iconbtn" data-a="get" title="Download this ${
+              enc.state==='skipped'?kindOf(enc):'file'}">${ICON.download}</button>`:'')}
+      ${has?`<button class="iconbtn" data-a="del" title="Delete file" aria-label="Delete file">${ICON.trash}</button>`:''}
+    </div>`;
+  el.onclick=()=>selectEntry(e);
+  $$('button[data-a]',el).forEach(b=>b.onclick=ev=>{ev.stopPropagation();epAction(b.dataset.a,e,el)});
+  return el;
+}
+/// Whether the browser can play it. Having a file is not the same as being playable:
+/// blog feeds put article images in enclosures, and an <audio> element pointed at a JPEG
+/// is just a broken player.
+function isPlayable(x){
+  if(!x || !x.path) return false;
+  const m=(x.mime||'').toLowerCase();
+  if(m.startsWith('audio/')||m.startsWith('video/')) return true;
+  if(m) return false;
+  // No declared type: fall back to the file's extension.
+  return /\.(mp3|m4a|m4b|aac|ogg|oga|opus|flac|wav|mp4|m4v|mov|webm|mkv)$/i
+    .test((x.path||x.url||'').split('?')[0]);
+}
+
+/// What an enclosure is, for a row that is not media: "image", "pdf", "document".
+function kindOf(enc){
+  const m=(enc.mime||'').toLowerCase();
+  if(m.startsWith('image/')) return 'image';
+  if(m.startsWith('video/')) return 'video';
+  if(m.startsWith('audio/')) return 'audio';
+  if(m.includes('pdf')) return 'pdf';
+  if(m.includes('torrent')) return 'torrent';
+  const ext=(enc.url||'').split('?')[0].split('.').pop();
+  return (ext && ext.length<=5) ? ext.toLowerCase() : 'file';
+}
+
+/// What a file is, as one icon coloured by whether it is here: green once downloaded, red when
+/// the download failed, plain otherwise, so a file waiting and one deleted read alike. One icon
+/// either way keeps the column lined up; the words are in its tooltip.
+function kindIcon(enc){
+  const k=kindOf(enc);
+  const i={audio:ICON.audio,video:ICON.video,image:ICON.image,pdf:ICON.doc,torrent:ICON.torrent}[k]||ICON.file;
+  const [cls,label]=enc.path ? [' here',`${k}, downloaded`]
+    : enc.state==='error' ? [' bad',`${k}, download failed${enc.last_error?': '+enc.last_error:''}`]
+    : ['',k];
+  return `<span class="kind${cls}" title="${esc(label)}" aria-label="${esc(label)}">${i}</span>`;
+}
+
+function feedArt(id=S.feed){ const f=S.feeds.find(x=>x.id===id); return f&&f.image; }
+const feedName=id=>{ const f=S.feeds.find(x=>x.id===id); return f?(f.title||f.id):id; };
+
+/// Selecting an item shows it in the pane below, rather than expanding the row.
+/// Replaces one row with a fresh one, leaving the rest of the list and its scroll alone.
+function swapRow(e){
+  const row=$(`#eps .ep[data-guid="${CSS.escape(e.guid)}"]`);
+  if(row){ row.replaceWith(epEl(e)); syncPlayButtons(); }
+}
+
+/// Read and unread as this page last set them, and when the server had it. A list asked for
+/// before then answers with the old state: it put the dot back on an item just read, until
+/// the next refresh took it off again (loadEntries).
+const readWrites=new Map();
+const readKey=e=>e.feed_id+'\n'+e.guid;
+function setRead(e,read){
+  e.read=read;
+  const w: {read: boolean, done?: number}={read}; readWrites.set(readKey(e),w);
+  return api(`/api/entries/${encodeURIComponent(e.feed_id)}/${encodeURIComponent(e.guid)}/flags`,
+      {method:'POST',body:JSON.stringify({read})})
+    .then(()=>{ w.done=performance.now(); loadFeeds(true); });
+}
+
+/// Opening an item is reading it. The row is redrawn where it stands rather than the list
+/// reloaded, so an item does not vanish from under the pointer on the Unread tab.
+function markRead(e){
+  if(e.read) return;
+  setRead(e,true).catch(err=>{ e.read=false; readWrites.delete(readKey(e)); toast(err.message,true); });
+}
+
+function selectEntry(e){
+  // On the Unread tab the item you were reading goes as you move on, not whenever a refresh
+  // next happens to come along, which left a few read ones in the list for a while.
+  const prev=S.filter==='unread' && S.sel!==e.guid && S.entries.find(x=>x.guid===S.sel);
+  if(prev&&prev.read){
+    S.entries=S.entries.filter(x=>x!==prev); S.total--;
+    $(`#eps .ep[data-guid="${CSS.escape(prev.guid)}"]`)?.remove();
+  }
+  S.sel=e.guid;
+  markRead(e);
+  $$('#eps .ep').forEach(x=>x.classList.toggle('sel', x.dataset.guid===e.guid));
+  swapRow(e);
+  showDetail(e);
+  const d=$('#detail'); if(d) d.scrollTop=0;
+}
+
+/// Drag the divider between the item list and the item text.
+function dragSplit(pane){
+  const grab=$('#grab',pane);
+  if(!grab) return;
+  const move=ev=>{
+    const box=pane.getBoundingClientRect();
+    const pct=Math.min(80,Math.max(12,((ev.clientY-box.top)/box.height)*100));
+    pane.style.setProperty('--listh',pct.toFixed(1)+'%');
+  };
+  const stop=()=>{
+    document.removeEventListener('mousemove',move);
+    document.removeEventListener('mouseup',stop);
+    document.body.style.userSelect='';
+    try{ localStorage.setItem('ipx.listh', pane.style.getPropertyValue('--listh')); }catch{}
+  };
+  grab.onmousedown=ev=>{
+    ev.preventDefault();
+    document.body.style.userSelect='none';
+    document.addEventListener('mousemove',move);
+    document.addEventListener('mouseup',stop);
+  };
+}
+
+/// Which item the toolbar's play, read and keep buttons act on.
+// ponytail: matched by guid alone; two feeds sharing a guid in All Subscriptions would pick
+// the first. Key rows by feed as well if that ever happens.
+const cur=()=>S.entries.find(x=>x.guid===S.sel);
+function syncTools(e){
+  $('#tbPlay').disabled=!(e&&e.enclosures.some(isPlayable));
+  $('#tbRead').disabled=$('#tbFlag').disabled=!e;
+  // The same icons as the item's own buttons beside its title, so the two never disagree.
+  $('#tbRead').innerHTML=e&&e.read?ICON.unread:ICON.check;
+  $('#tbFlag').innerHTML=e&&e.flagged?ICON.pinOn:ICON.pin;
+  if(e){
+    $('#tbRead').title=`Mark ${e.read?'unread':'read'}`;
+    $('#tbFlag').title=e.flagged?'Unpin':'Pin, so it is never deleted';
+  }
+}
+
+/// The item's text in the pane below the list, and its files in the pane beside it.
+function showDetail(e){
+  const box=$('#detail'), files=$('#files'); if(!box) return;
+  // A pane that can only say "No files" gives its width to the list instead.
+  if(files) files.hidden=!(e&&e.enclosures.length);
+  document.body.classList.toggle('reading',!!e);
+  syncTools(e);
+  if(!e){
+    box.innerHTML='<p class="empty">Pick an item to read it.</p>';
+    if(files) files.innerHTML='<p class="empty">No files</p>';
+    return;
+  }
+  // Nothing when there are no files: the pane that would say so is hidden above, and on a phone,
+  // where the files sit over the text, a box saying "No files" only pushed the text down.
+  const encs=e.enclosures.map(encBox).join('');
+  // A phone has no room for the files pane, so the files go above the text there instead.
+  // Below it, a long set of show notes pushed play and delete screens down, and on an iPhone
+  // it looked as if a downloaded file could not be deleted at all (issue #21).
+  const narrow=!!window.matchMedia?.('(max-width:820px)')?.matches;
+  const f=S.feeds.find(x=>x.id===e.feed_id);
+  const num=[e.season?`S${e.season}`:'',e.episode?`E${e.episode}`:''].filter(Boolean).join('');
+  box.innerHTML=`
+    <button class="btn ico" id="dback" title="Back to the items" aria-label="Back to the items">${ICON.left}</button>
+    <h3 class="dt">${esc(e.title||'(untitled)')}</h3>
+    <div class="dmeta">
+      ${/* Joined, so a missing date or number leaves no stray dot behind. */
+        [f&&esc(f.title||f.id), num, dateOf(e.published), e.duration&&clock(e.duration)]
+        .filter(Boolean).map(s=>`<span>${s}</span>`).join('<span class="dot"></span>')}
+      <button class="btn ico" data-a="read" title="Mark ${e.read?'unread':'read'}"
+        aria-label="Mark ${e.read?'unread':'read'}">${e.read?ICON.unread:ICON.check}</button>
+      <button class="btn ico" data-a="flag" title="${e.flagged?'Pinned: never deleted. Unpin':'Pin, so it is never deleted'}"
+        aria-label="${e.flagged?'Unpin':'Pin'}">${e.flagged?ICON.pinOn:ICON.pin}</button>
+      ${e.link?`<a class="btn ico" href="${esc(e.link)}" target="_blank" rel="noopener noreferrer"
+        title="Open the original" aria-label="Open the original">${ICON.open}</a>`:''}
+    </div>
+    ${narrow?encs:''}
+    <div class="dbody">${(e.description&&e.description.trim())||'<em>No show notes.</em>'}</div>`;
+  if(files) files.innerHTML=narrow?'':`<div class="fhd">Files</div>${encs}`;
+  // description was sanitized server-side with ammonia before it ever reached here
+  $('#dback').onclick=()=>showDetail(null);
+  for(const root of [box,files]) if(root) $$('button[data-a]',root).forEach(b=>
+    b.onclick=()=>epAction(b.dataset.a,e,null,b.dataset.enc?Number(b.dataset.enc):null));
+  syncPlayButtons();
+}
+
+/// One enclosure: a play button when the file is here, otherwise what it is and a way to get it.
+function encBox(x){
+  const size=x.length?mb(x.length):'';
+  // One file serves everyone reading the feed, so deleting is not a private act.
+  const f=S.feeds.find(y=>y.id===x.feed_id);
+  const shared=f&&f.subscribers>1;
+  // Icons, with the words in the tooltip and for screen readers.
+  const delLabel=shared
+    ? `Delete for everyone (shared with ${f.subscribers-1} other ${f.subscribers===2?'person':'people'} reading this feed)`
+    : 'Delete file';
+  const delBtn=`<button class="btn ico danger" data-a="del" data-enc="${x.id}" title="${delLabel}" aria-label="${delLabel}">${ICON.trash}</button>`;
+  const saveBtn=`<a class="btn ico" href="/media/${x.id}" download title="Save to this computer" aria-label="Save to this computer">${ICON.save}</a>`;
+  if(x.path && !isPlayable(x)){
+    // On disk, but not audio or video: view it, keep it, or remove it -- no player.
+    return `<div class="encbox">
+      ${kindIcon(x)}
+      <span class="meta" style="flex:1">${size}</span>
+      <a class="btn ico" href="/media/${x.id}" target="_blank" rel="noopener noreferrer" title="View in a new tab" aria-label="View in a new tab">${ICON.open}</a>
+      ${saveBtn}
+      ${delBtn}
+    </div>`;
+  }
+  if(x.path){
+    // One player, the bar at the bottom. This pane had an <audio> of its own, and playing it
+    // started the bar as well, so the same file played twice at once.
+    return `<div class="encbox">
+      ${kindIcon(x)}
+      <span class="meta" style="flex:1">${size}</span>
+      <button class="btn ico" data-a="play" data-enc="${x.id}" title="Play" aria-label="Play">${ICON.play}</button>
+      ${saveBtn}
+      ${delBtn}
+    </div>`;
+  }
+  // Nothing on disk. For an image or a PDF you usually just want to look at it, so link
+  // straight to the publisher's copy in a new tab -- no download, and nothing proxied
+  // through here, which would make ipx a fetch-anything relay.
+  const viewable = !isPlayable(x) && x.state !== 'pending';
+  return `<div class="encbox">
+    ${kindIcon(x)}
+    <span class="meta" style="flex:1">${size}</span>
+    ${x.state==='error'&&x.last_error?`<span class="err">${esc(x.last_error)}</span>`:''}
+    ${viewable?`<a class="btn ico" href="${esc(x.url)}" target="_blank" rel="noopener noreferrer" title="View in a new tab" aria-label="View in a new tab">${ICON.open}</a>`:''}
+    <button class="btn ico" data-a="get" data-enc="${x.id}" title="Download to the server" aria-label="Download to the server">${ICON.download}</button>
+  </div>`;
+}
+
+async function epAction(a: string, e, el, encId?: number){
+  // Swap the row in place and refresh the text below when it is the one being read.
+  const redraw=()=>{ swapRow(e); if(!el || S.sel===e.guid) showDetail(e); };
+  const enc=(encId!=null && e.enclosures.find(x=>x.id===encId)) || e.enclosures[0];
+  const path=`/api/entries/${encodeURIComponent(e.feed_id)}/${encodeURIComponent(e.guid)}`;
+  try{
+    if(a==='play') play(e, encId!=null ? enc : undefined);
+    if(a==='flag'){ e.flagged=!e.flagged; await api(path+'/flags',{method:'POST',body:JSON.stringify({flagged:e.flagged})}); redraw(); }
+    if(a==='read'){ await setRead(e,!e.read); redraw(); }
+    if(a==='get'){
+      if(!enc) return;
+      await api(`/api/enclosures/${enc.id}/download`,{method:'POST'});
+      toast('Queued: '+(e.title||'item'));
+    }
+    if(a==='del'){
+      const f=S.feeds.find(x=>x.id===e.feed_id);
+      const shared=f&&f.subscribers>1;
+      if(!confirm(shared
+        ? `Delete this file?\n\nThere is one copy, shared with ${f.subscribers-1} other `
+          +`${f.subscribers===2?'person':'people'} reading this feed. The item stays listed `
+          +`and will not be downloaded again automatically.`
+        : 'Delete the downloaded file?\n\nThe item stays listed and will not be downloaded again automatically.')) return;
+      try{
+        await api(`/api/enclosures/${enc.id}`,{method:'DELETE'});
+      }catch(err){
+        // 409: somebody else has it starred or unplayed. Their reason, their words.
+        if(!/one copy of this file/.test(err.message)) throw err;
+        if(!confirm(err.message+'\n\nDelete it anyway?')) return;
+        await api(`/api/enclosures/${enc.id}?force=true`,{method:'DELETE'});
+      }
+      toast('Deleted'); loadEntries(); loadFeeds(true);
+    }
+  }catch(err){ toast(err.message,true); }
+}
+

web/src/login.ts

@@ -0,0 +1,15 @@
+document.getElementById('f').onsubmit = async e => {
+  e.preventDefault();
+  const msg = document.getElementById('msg');
+  msg.textContent = '';
+  const r = await fetch('/api/login', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      name: (document.getElementById('name') as HTMLInputElement).value,
+      password: (document.getElementById('pw') as HTMLInputElement).value,
+    }),
+  });
+  if (r.ok) location.href = '/';
+  else msg.textContent = await r.text() || 'Sign in failed';
+};

web/src/player.ts

@@ -0,0 +1,198 @@
+/* ---------------- player ---------------- */
+const audio=$('#audio');
+const player: {guid: string|null, feed: string|null, entry: any, enc?: number, moved?: boolean,
+  saveAt: number, marked: boolean}={guid:null,feed:null,entry:null,saveAt:0,marked:false};
+
+// Marked read when an item has actually been listened to -- at the end, or past 90%.
+// NOT on play: doing that made the item vanish from the Unread list the instant
+// you pressed play, which looks exactly like it went missing.
+function markPlayed(){
+  if(!player.guid||player.marked) return;
+  player.marked=true;
+  const e=player.entry;
+  if(!e||e.read) return;
+  setRead(e,true).catch(()=>{});
+}
+
+/// Plays one of the item's files in the player bar: the one asked for, or its first playable one.
+function play(e,enc=e.enclosures.find(isPlayable)){
+  if(!isPlayable(enc)){
+    toast(e.enclosures.some(x=>x.path) ? 'That file is not audio or video' : 'Not downloaded yet', true);
+    return;
+  }
+  // The same file carries on where it was; another of the item's files starts from its top.
+  const resuming = player.guid===e.guid && player.enc===enc.id;
+  // Every play button is a pause button for what is playing, as the player bar's is.
+  if(resuming && !audio.paused){ audio.pause(); return; }
+  if(!resuming){
+    player.guid=e.guid; player.feed=e.feed_id; player.entry=e; player.enc=enc.id; player.moved=false;
+    document.body.classList.toggle('has-video', kindOf(enc)==='video');
+    audio.src=`/media/${enc.id}`;
+    audio.currentTime=0;
+    if(e.position>5) audio.addEventListener('loadedmetadata',()=>{audio.currentTime=e.position},{once:true});
+    // Initials, if it comes to that, are the feed's: the episode's read as "SE" beside the feed's art.
+    $('#partwrap').innerHTML=artHTML(e.image||feedArt(e.feed_id),feedName(e.feed_id));
+    $('#ptitle').textContent=e.title||'(untitled)';
+    const f=S.feeds.find(x=>x.id===e.feed_id);
+    $('#pfeed').textContent=f?(f.title||f.id):'';
+    $('#player').classList.add('on');
+    mediaSession(e,f);
+    player.marked=false;
+  }
+  audio.play().catch(err=>toast('Playback failed: '+err.message,true));
+  renderEntries();
+}
+function mediaSession(e,f){
+  if(!('mediaSession' in navigator)) return;
+  navigator.mediaSession.metadata=new MediaMetadata({
+    title:e.title||'', artist:f?(f.title||f.id):'', album:f?(f.title||''):'',
+    artwork:(e.image||(f&&f.image))?[{src:e.image||f.image,sizes:'512x512'}]:[],
+  });
+  const h={play:()=>audio.play(),pause:()=>audio.pause(),
+    seekbackward:()=>audio.currentTime-=15,seekforward:()=>audio.currentTime+=30};
+  for(const k in h){ try{navigator.mediaSession.setActionHandler(k as MediaSessionAction,h[k])}catch{} }
+}
+audio.addEventListener('timeupdate',()=>{
+  const d=audio.duration||player.entry?.duration||0;
+  $('#pcur').textContent=clock(audio.currentTime);
+  $('#pdur').textContent=clock(d);
+  if(d) $('#seek').value=String(Math.round(audio.currentTime/d*1000));
+  // Only playing counts as moving: the seek to where you left off happens paused, and saving
+  // that would write back whatever the list said, however old.
+  if(!audio.paused) player.moved=true;
+  // Persist roughly every 10s so a reload resumes where you were. Either way: a jump back used
+  // to wait for the next pause to be saved.
+  if(player.guid && Math.abs(audio.currentTime-player.saveAt)>10){ savePos(); }
+  if(d && audio.currentTime/d >= 0.9) markPlayed();
+});
+function savePos(){
+  // Before the file has loaded, currentTime is 0 rather than where you are: saving it then --
+  // a failed load, or a pause before the seek to where you left off -- wiped the position.
+  // Nor from a player nobody has played since it last saved: one left paused in another tab
+  // saved its older place as that tab reloaded, over where you had got to since.
+  if(!player.guid||!audio.readyState||!player.moved) return;
+  player.moved=false;
+  player.saveAt=audio.currentTime;
+  if(player.entry) player.entry.position=Math.floor(audio.currentTime);
+  // The measured length stands in for one the feed left out: without it Currently Listening
+  // cannot tell a finished episode from a started one. NaN before metadata, Infinity on a stream.
+  const duration=isFinite(audio.duration)?Math.floor(audio.duration):null;
+  navigator.sendBeacon?.(
+    `/api/entries/${encodeURIComponent(player.feed)}/${encodeURIComponent(player.guid)}/position`,
+    new Blob([JSON.stringify({secs:Math.floor(audio.currentTime),duration})],{type:'application/json'}));
+}
+audio.addEventListener('pause',savePos);
+audio.addEventListener('ended',()=>{savePos();markPlayed();$('#pplay').innerHTML=ICON.play});
+// body.playing is what sets the EQ bars moving.
+audio.addEventListener('play',()=>{ $('#pplay').innerHTML=ICON.pause; document.body.classList.add('playing'); });
+audio.addEventListener('pause',()=>{ $('#pplay').innerHTML=ICON.play; document.body.classList.remove('playing'); });
+for(const ev of ['play','pause','ended']) audio.addEventListener(ev,syncPlayButtons);
+
+/// Every play button for what is playing shows pause, like the player bar's: a row's, the files
+/// pane's, the toolbar's. Only the bar's used to change, so the others said play while it played.
+function syncPlayButtons(){
+  const on=(guid,enc?)=>!audio.paused&&player.guid===guid&&(enc==null||player.enc===enc);
+  const paint=(b,now,idle)=>{
+    const label=now?'Pause':idle;
+    if(b.title===label) return;
+    b.title=label; b.setAttribute('aria-label',label); b.innerHTML=now?ICON.pause:ICON.play;
+  };
+  for(const b of $$('#eps .ep [data-a=play]')) paint(b,on(b.closest('.ep').dataset.guid),'Play');
+  for(const b of $$('#files [data-a=play][data-enc], #detail [data-a=play][data-enc]'))
+    paint(b,on(S.sel,Number(b.dataset.enc)),'Play');
+  const e=cur(); paint($('#tbPlay'),!!e&&on(e.guid),'Play the selected item');
+}
+for(const ev of ['play','pause','timeupdate']) audio.addEventListener(ev,syncListening);
+window.addEventListener('beforeunload',savePos);
+$('#pplay').onclick=()=>audio.paused?audio.play():audio.pause();
+$('#pback').onclick=()=>audio.currentTime-=15;
+$('#pfwd').onclick=()=>audio.currentTime+=30;
+$('#seek').oninput=e=>{const d=audio.duration;if(d)audio.currentTime=d*e.target.value/1000};
+$('#rate').onchange=e=>{audio.playbackRate=+e.target.value;localStorage.setItem('ipx.rate',e.target.value)};
+$('#vol').oninput=e=>{audio.volume=e.target.value/100;localStorage.setItem('ipx.vol',e.target.value)};
+$('#pclose').onclick=()=>{savePos();audio.pause();audio.removeAttribute('src');player.guid=null;$('#player').classList.remove('on');document.body.classList.remove('has-video');renderEntries();
+  // Called here, not left to the pause event: closing a player already paused fires none.
+  syncListening()};
+(function restore(){
+  const r=localStorage.getItem('ipx.rate'), v=localStorage.getItem('ipx.vol');
+  if(r){$('#rate').value=r;audio.playbackRate=+r}
+  if(v){$('#vol').value=v;audio.volume=Number(v)/100}
+})();
+
+document.addEventListener('keydown',ev=>{
+  // Escape leaves a dialog even from inside one of its boxes. It used to sit below the check
+  // that follows, so Add feed, which opens with the cursor in its URL box, ignored it.
+  if(ev.key==='Escape'){closeModal();nav(false);return}
+  // The rest are single keys that would otherwise eat what you type.
+  if(/^(INPUT|TEXTAREA|SELECT)$/.test((ev.target as Element).tagName)) return;
+  if(ev.key===' '&&player.guid){ev.preventDefault();audio.paused?audio.play():audio.pause()}
+  else if(ev.key==='ArrowLeft'&&player.guid){audio.currentTime-=15}
+  else if(ev.key==='ArrowRight'&&player.guid){audio.currentTime+=30}
+  else if(ev.key==='/'){ev.preventDefault();$('#epSearch')?.focus()}
+  else if(!ev.ctrlKey&&!ev.metaKey&&!ev.altKey&&!$('#modal').classList.contains('on')) typed(ev);
+});
+
+// Feedly's keys, vim's j and k among them: a letter to move through items or feeds, g and a
+// letter to go somewhere, ? to list them. None fire with Ctrl, Alt or Cmd held, so the browser's
+// own shortcuts still work, or while a dialog is open.
+const GO={a:':all',d:':directory',p:':popular',l:':listening'};
+let gAt=0;
+function stepEntry(by){
+  if(VIEWS[S.feed]?.url||!S.entries.length) return;
+  const i=S.entries.findIndex(x=>x.guid===S.sel);
+  const e=S.entries[i<0?0:Math.min(S.entries.length-1,Math.max(0,i+by))];
+  selectEntry(e);
+  $(`#eps .ep[data-guid="${CSS.escape(e.guid)}"]`)?.scrollIntoView({block:'nearest'});
+}
+function stepFeed(by){
+  const rows=$$('#feedlist [data-id]'), i=rows.findIndex(r=>r.dataset.id===S.feed), id=rows[i+by]?.dataset.id;
+  if(!id) return;
+  selectFeed(id);
+  $(`#feedlist [data-id="${CSS.escape(id)}"]`)?.scrollIntoView({block:'nearest'});
+}
+const KEYS={
+  j:()=>stepEntry(1), n:()=>stepEntry(1), k:()=>stepEntry(-1), p:()=>stepEntry(-1),
+  J:()=>stepFeed(1), K:()=>stepFeed(-1),
+  // The toolbar's own buttons, so a key does exactly what the click does, and nothing while
+  // they are disabled.
+  o:()=>$('#tbPlay').click(), m:()=>$('#tbRead').click(), s:()=>$('#tbFlag').click(),
+  v:()=>{ const e=cur(); if(e&&e.link) window.open(e.link,'_blank','noopener'); },
+  A:()=>$('#content .fhead [data-a="read"], #content .fhead [data-a="readall"]')?.click(),
+  r:async()=>{ await loadFeeds(true); if(S.feed){ renderFeed(); loadEntries(); } },
+  '[':()=>matchMedia('(max-width:820px)').matches
+    ? nav(!$('#sidebar').classList.contains('open')) : document.body.classList.toggle('nosb'),
+  '?':()=>keysModal(),
+  g:()=>{ gAt=Date.now(); },
+};
+function typed(ev){
+  // The second key of a g pair counts only if it follows within a second and a half.
+  const pair=Date.now()-gAt<1500; gAt=0;
+  const fn=pair ? (GO[ev.key]&&(()=>selectFeed(GO[ev.key])))||(ev.key==='s'&&prefsModal) : KEYS[ev.key];
+  if(!fn) return;
+  ev.preventDefault(); fn();
+}
+/// What ? shows: every key, grouped as Feedly's own list is.
+function keysModal(){
+  const k=s=>`<kbd>${esc(s)}</kbd>`, g=c=>k('g')+' '+k(c);
+  const rows=[
+    ['Go to'],
+    [g('a'),'All Subscriptions'],[g('d'),'Directory'],[g('p'),'Popular'],
+    [g('l'),'Currently Listening'],[g('s'),'Settings'],
+    [k('Shift')+' '+k('J'),'Next feed'],[k('Shift')+' '+k('K'),'Previous feed'],
+    [k('/'),'Search items'],[k('r'),'Refresh'],[k('['),'Show or hide the feed list'],
+    ['Items'],
+    [k('j')+' or '+k('n'),'Next item'],[k('k')+' or '+k('p'),'Previous item'],
+    [k('Shift')+' '+k('A'),'Mark all read'],
+    ['The selected item'],
+    [k('o'),'Play it'],[k('m'),'Mark it read or unread'],[k('s'),'Pin it, or unpin it'],
+    [k('v'),'Open the original in a new tab'],
+    ['The player'],
+    [k('Space'),'Play or pause'],[k('←')+' '+k('→'),'Back 15 seconds, forward 30'],
+    ['Anywhere'],
+    [k('?'),'This list'],[k('Esc'),'Close a dialog'],
+  ];
+  openModal(`<h3>Keyboard shortcuts</h3><table class="keys">${rows.map(([a,b])=>b===undefined
+      ?`<tr><th colspan="2">${a}</th></tr>`:`<tr><td>${a}</td><td>${b}</td></tr>`).join('')}</table>
+    <div class="cardacts"><button class="btn ico" onclick="closeModal()" title="Close" aria-label="Close">${ICON.close}</button></div>`);
+}
+

web/src/theme.ts

@@ -0,0 +1,58 @@
+/* ---------------- theme ---------------- */
+// A theme, and for those that come in both, light, dark or Auto, chosen in Settings and kept on
+// the account, so it follows you to another browser or computer. The server writes it onto the
+// page's <html> tag (data-theme, data-choice) so the page is drawn in it from the start. The
+// page gets data-mode, light or dark, which is all the CSS reads: Auto is worked out here, from
+// the system, so no palette is written twice.
+const THEMES: Record<string, {name: string, modes: boolean}> = {
+  modern: {name: 'Modern', modes: true},
+  classic: {name: 'Classic, the 2004 Mac app', modes: false},
+  dracula: {name: 'Dracula', modes: true},
+  material: {name: 'Material', modes: true},
+  adwaita: {name: 'Adwaita', modes: true},
+  flatremix: {name: 'Flat Remix', modes: true},
+  paper: {name: 'Paper', modes: false},
+  nordic: {name: 'Nordic', modes: true},
+};
+const MODES: Record<string, string> = {auto: 'Auto (matches your system)', light: 'Light', dark: 'Dark'};
+// Before themes came in light and dark, ipx.theme in localStorage held one of these.
+const OLD_THEMES: Record<string, [string, string]> = {dark: ['modern', 'dark'], light: ['modern', 'light'], auto: ['modern', 'auto']};
+const systemDark = window.matchMedia?.('(prefers-color-scheme: dark)');
+const theme = {name: 'modern', mode: 'dark'};
+
+/// `save` for a choice made in Settings, which goes to the account; not for applying one.
+function setTheme(name = theme.name, mode = theme.mode, save = false){
+  theme.name = THEMES[name] ? name : 'modern';
+  theme.mode = MODES[mode] ? mode : 'dark';
+  const both = THEMES[theme.name].modes;
+  const root = document.documentElement;
+  root.dataset.theme = theme.name;
+  // A theme with one palette has it whatever the mode; both of those are light.
+  root.dataset.mode = !both ? 'light'
+    : theme.mode === 'auto' ? (systemDark && !systemDark.matches ? 'light' : 'dark') : theme.mode;
+  const sel = $('#stheme'); if(sel) sel.value = theme.name;
+  const ms = $('#smode'); if(ms) ms.value = theme.mode;
+  const mf = $('#smodefield'); if(mf) mf.hidden = !both;
+  if(save) saveTheme();
+}
+
+/// One save at a time, each sending the choice as it stands when it goes. Sent as they came,
+/// several at once, a quick run through the list could reach the server out of order and
+/// leave the account on a theme passed on the way.
+let themeSaving = Promise.resolve();
+function saveTheme(){
+  themeSaving = themeSaving
+    .then(() => api('/api/me', {method: 'PATCH', body: JSON.stringify({theme: theme.name, mode: theme.mode})}))
+    .catch(e => toast(`Your theme was not saved: ${e.message}`, true));
+}
+systemDark?.addEventListener?.('change', () => { if(theme.mode === 'auto') setTheme(); });
+(() => {
+  const root = document.documentElement;
+  if(root.dataset.choice) return setTheme(root.dataset.theme, root.dataset.choice);
+  // Nothing on the account yet. A theme this browser kept, from before themes were kept on the
+  // account, goes up to it once, so nobody has to choose again.
+  let name: string | null = null, mode: string | null = null;
+  try{ name = localStorage.getItem('ipx.theme'); mode = localStorage.getItem('ipx.mode'); }catch{}
+  if(OLD_THEMES[name]) [name, mode] = OLD_THEMES[name];
+  setTheme(name ?? undefined, mode ?? undefined, !!name);
+})();

web/src/util.ts

@@ -0,0 +1,178 @@
+'use strict';
+// `any`: the page reads .value, .dataset and .onclick off whatever it looks up, and the
+// smoke test, not the type checker, is what makes sure a selector exists.
+const $ = (s: string, r: ParentNode = document): any => r.querySelector(s);
+const $$ = (s: string, r: ParentNode = document): any[] => [...r.querySelectorAll(s)];
+const esc = s => (s??'').replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+// Icons: Font Awesome Free 7.3.1 by @fontawesome - https://fontawesome.com
+// License - https://fontawesome.com/license/free (Icons: CC BY 4.0). Embedded as SVG, only the
+// ones used, so there is no font to download and nothing is fetched from anyone else. Each takes
+// the button's own colour. To add one, copy the path from svgs/<style>/<name>.svg at the same tag.
+const fa=(box,body)=>`<svg class="i" viewBox="${box}" aria-hidden="true">${body}</svg>`;
+const ICON={
+  plus:fa('0 0 448 512','<path fill="currentColor" d="M256 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 160-160 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l160 0 0 160c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160 160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-160 0 0-160z"/>'), // solid/plus
+  circleMinus:fa('0 0 512 512','<path fill="currentColor" d="M512 256A256 256 0 1 0 0 256a256 256 0 1 0 512 0zM184 232l144 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-144 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z"/>'), // solid/circle-minus, for Unsubscribe
+  play:fa('0 0 448 512','<path fill="currentColor" d="M91.2 36.9c-12.4-6.8-27.4-6.5-39.6 .7S32 57.9 32 72l0 368c0 14.1 7.5 27.2 19.6 34.4s27.2 7.5 39.6 .7l336-184c12.8-7 20.8-20.5 20.8-35.1s-8-28.1-20.8-35.1l-336-184z"/>'), // solid/play
+  check:fa('0 0 448 512','<path fill="currentColor" d="M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z"/>'), // solid/check
+  checks:fa('0 0 384 512','<path fill="currentColor" d="M249.9 66.8c10.4-14.3 7.2-34.3-7.1-44.7s-34.3-7.2-44.7 7.1l-106 145.7-37.5-37.5c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c6.6 6.6 15.8 10 25.1 9.3s17.9-5.5 23.4-13.1l128-176zm128 136c10.4-14.3 7.2-34.3-7.1-44.7s-34.3-7.2-44.7 7.1l-170 233.7-69.5-69.5c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l96 96c6.6 6.6 15.8 10 25.1 9.3s17.9-5.5 23.4-13.1l192-264z"/>'), // solid/check-double
+  // Pinned is the solid thumbtack; not pinned, the same shape outlined, as the flag had its regular
+  // and solid pair (Font Awesome's free set has no regular thumbtack). Both share a viewBox padded
+  // for the outline's stroke, so the two draw the same size.
+  pin:fa('-18 -18 420 548','<path fill="none" stroke="currentColor" stroke-width="36" stroke-linejoin="round" d="M32 32C32 14.3 46.3 0 64 0L320 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-29.5 0 11.4 148.2c36.7 19.9 65.7 53.2 79.5 94.7l1 3c3.3 9.8 1.6 20.5-4.4 28.8s-15.7 13.3-26 13.3L32 352c-10.3 0-19.9-4.9-26-13.3s-7.7-19.1-4.4-28.8l1-3c13.8-41.5 42.8-74.8 79.5-94.7L93.5 64 64 64C46.3 64 32 49.7 32 32zM160 384l64 0 0 96c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-96z"/>'), // solid/thumbtack, outlined
+  pinOn:fa('-18 -18 420 548','<path fill="currentColor" d="M32 32C32 14.3 46.3 0 64 0L320 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-29.5 0 11.4 148.2c36.7 19.9 65.7 53.2 79.5 94.7l1 3c3.3 9.8 1.6 20.5-4.4 28.8s-15.7 13.3-26 13.3L32 352c-10.3 0-19.9-4.9-26-13.3s-7.7-19.1-4.4-28.8l1-3c13.8-41.5 42.8-74.8 79.5-94.7L93.5 64 64 64C46.3 64 32 49.7 32 32zM160 384l64 0 0 96c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-96z"/>'), // solid/thumbtack
+  scan:fa('0 0 512 512','<path fill="currentColor" d="M65.9 228.5c13.3-93 93.4-164.5 190.1-164.5 53 0 101 21.5 135.8 56.2 .2 .2 .4 .4 .6 .6l7.6 7.2-47.9 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l128 0c17.7 0 32-14.3 32-32l0-128c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 53.4-11.3-10.7C390.5 28.6 326.5 0 256 0 127 0 20.3 95.4 2.6 219.5 .1 237 12.2 253.2 29.7 255.7s33.7-9.7 36.2-27.1zm443.5 64c2.5-17.5-9.7-33.7-27.1-36.2s-33.7 9.7-36.2 27.1c-13.3 93-93.4 164.5-190.1 164.5-53 0-101-21.5-135.8-56.2-.2-.2-.4-.4-.6-.6l-7.6-7.2 47.9 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 320c-8.5 0-16.7 3.4-22.7 9.5S-.1 343.7 0 352.3l1 127c.1 17.7 14.6 31.9 32.3 31.7S65.2 496.4 65 478.7l-.4-51.5 10.7 10.1c46.3 46.1 110.2 74.7 180.7 74.7 129 0 235.7-95.4 253.4-219.5z"/>'), // solid/arrows-rotate
+  download:fa('0 0 448 512','<path fill="currentColor" d="M256 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 210.7-41.4-41.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l96 96c12.5 12.5 32.8 12.5 45.3 0l96-96c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 242.7 256 32zM64 320c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-46.9 0-56.6 56.6c-31.2 31.2-81.9 31.2-113.1 0L110.9 320 64 320zm304 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/>'), // solid/download
+  save:fa('0 0 448 512','<path fill="currentColor" d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-242.7c0-17-6.7-33.3-18.7-45.3L352 50.7C340 38.7 323.7 32 306.7 32L64 32zm32 96c0-17.7 14.3-32 32-32l160 0c17.7 0 32 14.3 32 32l0 64c0 17.7-14.3 32-32 32l-160 0c-17.7 0-32-14.3-32-32l0-64zM224 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/>'), // solid/floppy-disk
+  trash:fa('0 0 448 512','<path fill="currentColor" d="M136.7 5.9C141.1-7.2 153.3-16 167.1-16l113.9 0c13.8 0 26 8.8 30.4 21.9L320 32 416 32c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 96C14.3 96 0 81.7 0 64S14.3 32 32 32l96 0 8.7-26.1zM32 144l384 0 0 304c0 35.3-28.7 64-64 64L96 512c-35.3 0-64-28.7-64-64l0-304zm88 64c-13.3 0-24 10.7-24 24l0 192c0 13.3 10.7 24 24 24s24-10.7 24-24l0-192c0-13.3-10.7-24-24-24zm104 0c-13.3 0-24 10.7-24 24l0 192c0 13.3 10.7 24 24 24s24-10.7 24-24l0-192c0-13.3-10.7-24-24-24zm104 0c-13.3 0-24 10.7-24 24l0 192c0 13.3 10.7 24 24 24s24-10.7 24-24l0-192c0-13.3-10.7-24-24-24z"/>'), // solid/trash-can
+  open:fa('0 0 512 512','<path fill="currentColor" d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0-201.4 201.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3 448 192c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 96C35.8 96 0 131.8 0 176L0 432c0 44.2 35.8 80 80 80l256 0c44.2 0 80-35.8 80-80l0-80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 80c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l80 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 96z"/>'), // solid/arrow-up-right-from-square
+  settings:fa('0 0 512 512','<path fill="currentColor" d="M195.1 9.5C198.1-5.3 211.2-16 226.4-16l59.8 0c15.2 0 28.3 10.7 31.3 25.5L332 79.5c14.1 6 27.3 13.7 39.3 22.8l67.8-22.5c14.4-4.8 30.2 1.2 37.8 14.4l29.9 51.8c7.6 13.2 4.9 29.8-6.5 39.9L447 233.3c.9 7.4 1.3 15 1.3 22.7s-.5 15.3-1.3 22.7l53.4 47.5c11.4 10.1 14 26.8 6.5 39.9l-29.9 51.8c-7.6 13.1-23.4 19.2-37.8 14.4l-67.8-22.5c-12.1 9.1-25.3 16.7-39.3 22.8l-14.4 69.9c-3.1 14.9-16.2 25.5-31.3 25.5l-59.8 0c-15.2 0-28.3-10.7-31.3-25.5l-14.4-69.9c-14.1-6-27.2-13.7-39.3-22.8L73.5 432.3c-14.4 4.8-30.2-1.2-37.8-14.4L5.8 366.1c-7.6-13.2-4.9-29.8 6.5-39.9l53.4-47.5c-.9-7.4-1.3-15-1.3-22.7s.5-15.3 1.3-22.7L12.3 185.8c-11.4-10.1-14-26.8-6.5-39.9L35.7 94.1c7.6-13.2 23.4-19.2 37.8-14.4l67.8 22.5c12.1-9.1 25.3-16.7 39.3-22.8L195.1 9.5zM256.3 336a80 80 0 1 0 -.6-160 80 80 0 1 0 .6 160z"/>'), // solid/gear
+  log:fa('0 0 384 512','<path fill="currentColor" d="M0 64C0 28.7 28.7 0 64 0L213.5 0c17 0 33.3 6.7 45.3 18.7L365.3 125.3c12 12 18.7 28.3 18.7 45.3L384 448c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 64zm208-5.5l0 93.5c0 13.3 10.7 24 24 24L325.5 176 208 58.5zM120 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z"/>'), // solid/file-lines
+  close:fa('0 0 384 512','<path fill="currentColor" d="M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z"/>'), // solid/xmark
+  menu:fa('0 0 448 512','<path fill="currentColor" d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/>'), // solid/bars
+  directory:fa('0 0 448 512','<path fill="currentColor" d="M0 96C0 60.7 28.7 32 64 32l320 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zm64 0l0 64 64 0 0-64-64 0zm320 0l-192 0 0 64 192 0 0-64zM64 224l0 64 64 0 0-64-64 0zm320 0l-192 0 0 64 192 0 0-64zM64 352l0 64 64 0 0-64-64 0zm320 0l-192 0 0 64 192 0 0-64z"/>'), // solid/table-list
+  popular:fa('0 0 576 512','<path fill="currentColor" d="M309.5-18.9c-4.1-8-12.4-13.1-21.4-13.1s-17.3 5.1-21.4 13.1L193.1 125.3 33.2 150.7c-8.9 1.4-16.3 7.7-19.1 16.3s-.5 18 5.8 24.4l114.4 114.5-25.2 159.9c-1.4 8.9 2.3 17.9 9.6 23.2s16.9 6.1 25 2L288.1 417.6 432.4 491c8 4.1 17.7 3.3 25-2s11-14.2 9.6-23.2L441.7 305.9 556.1 191.4c6.4-6.4 8.6-15.8 5.8-24.4s-10.1-14.9-19.1-16.3L383 125.3 309.5-18.9z"/>'), // solid/star
+  all:fa('0 0 512 512','<path fill="currentColor" d="M232.5 5.2c14.9-6.9 32.1-6.9 47 0l218.6 101c8.5 3.9 13.9 12.4 13.9 21.8s-5.4 17.9-13.9 21.8l-218.6 101c-14.9 6.9-32.1 6.9-47 0L13.9 149.8C5.4 145.8 0 137.3 0 128s5.4-17.9 13.9-21.8L232.5 5.2zM48.1 218.4l164.3 75.9c27.7 12.8 59.6 12.8 87.3 0l164.3-75.9 34.1 15.8c8.5 3.9 13.9 12.4 13.9 21.8s-5.4 17.9-13.9 21.8l-218.6 101c-14.9 6.9-32.1 6.9-47 0L13.9 277.8C5.4 273.8 0 265.3 0 256s5.4-17.9 13.9-21.8l34.1-15.8zM13.9 362.2l34.1-15.8 164.3 75.9c27.7 12.8 59.6 12.8 87.3 0l164.3-75.9 34.1 15.8c8.5 3.9 13.9 12.4 13.9 21.8s-5.4 17.9-13.9 21.8l-218.6 101c-14.9 6.9-32.1 6.9-47 0L13.9 405.8C5.4 401.8 0 393.3 0 384s5.4-17.9 13.9-21.8z"/>'), // solid/layer-group
+  unread:fa('0 0 512 512','<path fill="currentColor" d="M48 64c-26.5 0-48 21.5-48 48 0 15.1 7.1 29.3 19.2 38.4l208 156c17.1 12.8 40.5 12.8 57.6 0l208-156c12.1-9.1 19.2-23.3 19.2-38.4 0-26.5-21.5-48-48-48L48 64zM0 196L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-188-198.4 148.8c-34.1 25.6-81.1 25.6-115.2 0L0 196z"/>'), // solid/envelope: a closed letter, not a record button
+  audio:fa('0 0 448 512','<path fill="currentColor" d="M64 224c0-88.4 71.6-160 160-160s160 71.6 160 160l0 37.5c-10-3.5-20.8-5.5-32-5.5l-16 0c-26.5 0-48 21.5-48 48l0 128c0 26.5 21.5 48 48 48l16 0c53 0 96-43 96-96l0-160C448 100.3 347.7 0 224 0S0 100.3 0 224L0 384c0 53 43 96 96 96l16 0c26.5 0 48-21.5 48-48l0-128c0-26.5-21.5-48-48-48l-16 0c-11.2 0-22 1.9-32 5.5L64 224z"/>'), // solid/headphones
+  video:fa('0 0 576 512','<path fill="currentColor" d="M96 64c-35.3 0-64 28.7-64 64l0 256c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-256c0-35.3-28.7-64-64-64L96 64zM464 336l73.5 58.8c4.2 3.4 9.4 5.2 14.8 5.2 13.1 0 23.7-10.6 23.7-23.7l0-240.6c0-13.1-10.6-23.7-23.7-23.7-5.4 0-10.6 1.8-14.8 5.2L464 176 464 336z"/>'), // solid/video
+  image:fa('0 0 448 512','<path fill="currentColor" d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm64 80a48 48 0 1 1 0 96 48 48 0 1 1 0-96zM272 224c8.4 0 16.1 4.4 20.5 11.5l88 144c4.5 7.4 4.7 16.7 .5 24.3S368.7 416 360 416L88 416c-8.9 0-17.2-5-21.3-12.9s-3.5-17.5 1.6-24.8l56-80c4.5-6.4 11.8-10.2 19.7-10.2s15.2 3.8 19.7 10.2l26.4 37.8 61.4-100.5c4.4-7.1 12.1-11.5 20.5-11.5z"/>'), // solid/image
+  doc:fa('0 0 576 512','<path fill="currentColor" d="M96 0C60.7 0 32 28.7 32 64l0 384c0 35.3 28.7 64 64 64l80 0 0-112c0-35.3 28.7-64 64-64l176 0 0-165.5c0-17-6.7-33.3-18.7-45.3L290.7 18.7C278.7 6.7 262.5 0 245.5 0L96 0zM357.5 176L264 176c-13.3 0-24-10.7-24-24L240 58.5 357.5 176zM240 380c-11 0-20 9-20 20l0 128c0 11 9 20 20 20s20-9 20-20l0-28 12 0c33.1 0 60-26.9 60-60s-26.9-60-60-60l-32 0zm32 80l-12 0 0-40 12 0c11 0 20 9 20 20s-9 20-20 20zm96-80c-11 0-20 9-20 20l0 128c0 11 9 20 20 20l32 0c28.7 0 52-23.3 52-52l0-64c0-28.7-23.3-52-52-52l-32 0zm20 128l0-88 12 0c6.6 0 12 5.4 12 12l0 64c0 6.6-5.4 12-12 12l-12 0zm88-108l0 128c0 11 9 20 20 20s20-9 20-20l0-44 28 0c11 0 20-9 20-20s-9-20-20-20l-28 0 0-24 28 0c11 0 20-9 20-20s-9-20-20-20l-48 0c-11 0-20 9-20 20z"/>'), // solid/file-pdf
+  torrent:fa('0 0 448 512','<path fill="currentColor" d="M0 176L0 288C0 411.7 100.3 512 224 512S448 411.7 448 288l0-112-128 0 0 112c0 53-43 96-96 96s-96-43-96-96l0-112-128 0zm0-48l128 0 0-64c0-17.7-14.3-32-32-32L32 32C14.3 32 0 46.3 0 64l0 64zm320 0l128 0 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64z"/>'), // solid/magnet
+  file:fa('0 0 384 512','<path fill="currentColor" d="M64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-277.5c0-17-6.7-33.3-18.7-45.3L258.7 18.7C246.7 6.7 230.5 0 213.5 0L64 0zM325.5 176L232 176c-13.3 0-24-10.7-24-24L208 58.5 325.5 176z"/>'), // solid/file
+  copy:fa('0 0 448 512','<path fill="currentColor" d="M192 0c-35.3 0-64 28.7-64 64l0 256c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-200.6c0-17.4-7.1-34.1-19.7-46.2L370.6 17.8C358.7 6.4 342.8 0 326.3 0L192 0zM64 128c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-16-64 0 0 16-192 0 0-256 16 0 0-64-16 0z"/>'), // solid/copy
+  users:fa('0 0 640 512','<path fill="currentColor" d="M320 16a104 104 0 1 1 0 208 104 104 0 1 1 0-208zM96 88a72 72 0 1 1 0 144 72 72 0 1 1 0-144zM0 416c0-70.7 57.3-128 128-128 12.8 0 25.2 1.9 36.9 5.4-32.9 36.8-52.9 85.4-52.9 138.6l0 16c0 11.4 2.4 22.2 6.7 32L32 480c-17.7 0-32-14.3-32-32l0-32zm521.3 64c4.3-9.8 6.7-20.6 6.7-32l0-16c0-53.2-20-101.8-52.9-138.6 11.7-3.5 24.1-5.4 36.9-5.4 70.7 0 128 57.3 128 128l0 32c0 17.7-14.3 32-32 32l-86.7 0zM472 160a72 72 0 1 1 144 0 72 72 0 1 1 -144 0zM160 432c0-88.4 71.6-160 160-160s160 71.6 160 160l0 16c0 17.7-14.3 32-32 32l-256 0c-17.7 0-32-14.3-32-32l0-16z"/>'), // solid/users
+  signout:fa('0 0 512 512','<path fill="currentColor" d="M505 273c9.4-9.4 9.4-24.6 0-33.9L361 95c-6.9-6.9-17.2-8.9-26.2-5.2S320 102.3 320 112l0 80-112 0c-26.5 0-48 21.5-48 48l0 32c0 26.5 21.5 48 48 48l112 0 0 80c0 9.7 5.8 18.5 14.8 22.2s19.3 1.7 26.2-5.2L505 273zM160 96c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 32C43 32 0 75 0 128L0 384c0 53 43 96 96 96l64 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l64 0z"/>'), // solid/right-from-bracket
+  back:fa('0 0 512 512','<path fill="currentColor" d="M24 192l144 0c9.7 0 18.5-5.8 22.2-14.8s1.7-19.3-5.2-26.2l-46.7-46.7c75.3-58.6 184.3-53.3 253.5 15.9 75 75 75 196.5 0 271.5s-196.5 75-271.5 0c-10.2-10.2-19-21.3-26.4-33-9.5-14.9-29.3-19.3-44.2-9.8s-19.3 29.3-9.8 44.2C49.7 408.7 61.4 423.5 75 437 175 537 337 537 437 437S537 175 437 75C342.8-19.3 193.3-24.7 92.7 58.8L41 7C34.1 .2 23.8-1.9 14.8 1.8S0 14.3 0 24L0 168c0 13.3 10.7 24 24 24z"/>'), // solid/rotate-left
+  fwd:fa('0 0 512 512','<path fill="currentColor" d="M488 192l-144 0c-9.7 0-18.5-5.8-22.2-14.8s-1.7-19.3 5.2-26.2l46.7-46.7c-75.3-58.6-184.3-53.3-253.5 15.9-75 75-75 196.5 0 271.5s196.5 75 271.5 0c8.2-8.2 15.5-16.9 21.9-26.1 10.1-14.5 30.1-18 44.6-7.9s18 30.1 7.9 44.6c-8.5 12.2-18.2 23.8-29.1 34.7-100 100-262.1 100-362 0S-25 175 75 75c94.3-94.3 243.7-99.6 344.3-16.2L471 7c6.9-6.9 17.2-8.9 26.2-5.2S512 14.3 512 24l0 144c0 13.3-10.7 24-24 24z"/>'), // solid/rotate-right
+  pause:fa('0 0 384 512','<path fill="currentColor" d="M48 32C21.5 32 0 53.5 0 80L0 432c0 26.5 21.5 48 48 48l64 0c26.5 0 48-21.5 48-48l0-352c0-26.5-21.5-48-48-48L48 32zm224 0c-26.5 0-48 21.5-48 48l0 352c0 26.5 21.5 48 48 48l64 0c26.5 0 48-21.5 48-48l0-352c0-26.5-21.5-48-48-48l-64 0z"/>'), // solid/pause
+  alert:fa('0 0 128 512','<path fill="currentColor" d="M64 432c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40c0-22.1 17.9-40 40-40zM64 0c26.5 0 48 21.5 48 48 0 .6 0 1.1 0 1.7l-16 304c-.9 17-15 30.3-32 30.3S33 370.7 32 353.7L16 49.7c0-.6 0-1.1 0-1.7 0-26.5 21.5-48 48-48z"/>'), // solid/exclamation
+  admin:fa('0 0 576 512','<path fill="currentColor" d="M70.8-6.7c5.4-5.4 13.8-6.2 20.2-2L209.9 70.5c8.9 5.9 14.2 15.9 14.2 26.6l0 49.6 90.8 90.8c33.3-15 73.9-8.9 101.2 18.5L542.2 382.1c18.7 18.7 18.7 49.1 0 67.9l-60.1 60.1c-18.7 18.7-49.1 18.7-67.9 0L288.1 384c-27.4-27.4-33.5-67.9-18.5-101.2l-90.8-90.8-49.6 0c-10.7 0-20.7-5.3-26.6-14.2L23.4 58.9c-4.2-6.3-3.4-14.8 2-20.2L70.8-6.7zm145 303.5c-6.3 36.9 2.3 75.9 26.2 107.2l-94.9 95c-28.1 28.1-73.7 28.1-101.8 0s-28.1-73.7 0-101.8l135.4-135.5 35.2 35.1zM384.1 0c20.1 0 39.4 3.7 57.1 10.5 10 3.8 11.8 16.5 4.3 24.1L388.8 91.3c-3 3-4.7 7.1-4.7 11.3l0 41.4c0 8.8 7.2 16 16 16l41.4 0c4.2 0 8.3-1.7 11.3-4.7l56.7-56.7c7.6-7.5 20.3-5.7 24.1 4.3 6.8 17.7 10.5 37 10.5 57.1 0 43.2-17.2 82.3-45 111.1l-49.1-49.1c-33.1-33-78.5-45.7-121.1-38.4l-56.8-56.8 0-29.7-.2-5c-.8-12.4-4.4-24.3-10.5-34.9 29.4-35 73.4-57.2 122.7-57.3z"/>'), // solid/screwdriver-wrench
+  caret:fa('0 0 256 512','<path fill="currentColor" d="M249.3 235.8c10.2 12.6 9.5 31.1-2.2 42.8l-128 128c-9.2 9.2-22.9 11.9-34.9 6.9S64.5 396.9 64.5 384l0-256c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l128 128 2.2 2.4z"/>'), // solid/caret-right
+  left:fa('0 0 512 512','<path fill="currentColor" d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 288 480 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-370.7 0 105.4-105.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/>'), // solid/arrow-left
+  subbed:fa('0 0 512 512','<path fill="currentColor" d="M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zM374 145.7c-10.7-7.8-25.7-5.4-33.5 5.3L221.1 315.2 169 263.1c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l72 72c5 5 11.8 7.5 18.8 7s13.4-4.1 17.5-9.8L379.3 179.2c7.8-10.7 5.4-25.7-5.3-33.5z"/>'), // solid/circle-check
+};
+// What is playing, as the icon's EQ bars; the stylesheet moves them.
+const EQ='<span class="eq" aria-hidden="true"><i></i><i></i><i></i></span>';
+// One meaning per icon: minus unsubscribes, x closes or cancels, plus adds or subscribes, and a
+// dialog's confirm button carries the icon of what it does. Words go in the tooltip.
+// The page's own buttons name their icon; this draws it in, ahead of any label they carry.
+for(const b of $$('[data-icon]')) b.insertAdjacentHTML('afterbegin',ICON[b.dataset.icon]);
+
+async function api(url: string, opts?: RequestInit): Promise<any>{
+  const r = await fetch(url,{headers:{'Content-Type':'application/json'},...opts});
+  if(r.status===401){ location.href='/login'; throw new Error('signed out'); }
+  if(!r.ok) throw new Error(await r.text().catch(()=>'')||String(r.status));
+  return r.status===204?null:r.json().catch(()=>null);
+}
+// navigator.clipboard only exists in a secure context. Served over plain HTTP on a LAN
+// address it is undefined, so fall back to the old selection-based copy.
+async function copyText(text,btn){
+  const flash=ok=>{
+    if(!btn) return;
+    // The button is an icon, so it is the markup that has to come back, not just its text.
+    const was=btn.innerHTML;
+    btn.textContent=ok?'Copied':'Failed';
+    setTimeout(()=>btn.innerHTML=was,1300);
+  };
+  try{
+    if(navigator.clipboard&&window.isSecureContext){
+      await navigator.clipboard.writeText(text);
+    }else{
+      const ta=document.createElement('textarea');
+      ta.value=text; ta.setAttribute('readonly','');
+      ta.style.cssText='position:fixed;top:-1000px;opacity:0';
+      document.body.appendChild(ta);
+      ta.select(); ta.setSelectionRange(0,ta.value.length);
+      const ok=document.execCommand('copy');
+      ta.remove();
+      if(!ok) throw new Error('copy rejected');
+    }
+    flash(true);
+  }catch(e){
+    flash(false);
+    toast('Could not copy automatically — select the URL and copy it manually',true);
+  }
+}
+
+function toast(msg: string, bad?: boolean){
+  const t=document.createElement('div');
+  t.className='toast'+(bad?' bad':''); t.textContent=msg;
+  $('#toasts').appendChild(t);
+  setTimeout(()=>{t.style.opacity='0';t.style.transition='opacity .3s';setTimeout(()=>t.remove(),320)},bad?6000:3200);
+}
+const clock = s => {
+  s=Math.max(0,Math.floor(s||0));
+  const h=Math.floor(s/3600),m=Math.floor(s%3600/60),x=s%60;
+  return h?`${h}:${String(m).padStart(2,'0')}:${String(x).padStart(2,'0')}`:`${m}:${String(x).padStart(2,'0')}`;
+};
+const ago = t => {
+  if(!t) return 'never';
+  const d=(Date.now()/1000)-t;
+  if(d<3600) return Math.max(1,Math.round(d/60))+'m ago';
+  if(d<86400) return Math.round(d/3600)+'h ago';
+  if(d<2592000) return Math.round(d/86400)+'d ago';
+  return new Date(t*1000).toLocaleDateString(undefined,{month:'short',day:'numeric',year:'numeric'});
+};
+const dateOf = t => t?new Date(t*1000).toLocaleDateString(undefined,{month:'short',day:'numeric',year:'numeric'}):'';
+// A podcast episode is tens of MB, an article's image a few KB: whole MB made the small ones "0 MB".
+const mb = n => !n?'' : n<1048576?Math.max(1,Math.round(n/1024))+' KB'
+  : n<1073741824?Math.round(n/1048576)+' MB' : (n/1073741824).toFixed(1)+' GB';
+const initials = s => (s||'?').replace(/[^A-Za-z0-9 ]/g,'').split(/\s+/).filter(Boolean).slice(0,2).map(w=>w[0]).join('').toUpperCase()||'?';
+const plural=(n,word)=>`${n} ${word}${n===1?'':'s'}`;
+// An initials tile takes one of these, by a hash of the name, so neighbours rarely match.
+const TINTS=['var(--accent)','var(--good)','var(--dim)','color-mix(in srgb,var(--accent),var(--good))'];
+const tint=name=>{ let h=0; for(const c of name||'?') h=(h*31+c.charCodeAt(0))>>>0; return TINTS[h%TINTS.length]; };
+function tileHTML(name,cls){
+  return `<div class="art ini ${cls||''}" style="--tint:${tint(name)}">${esc(initials(name))}</div>`;
+}
+function artHTML(url: string | null, name: string, cls?: string){
+  return url
+    ? `<img class="art ${cls||''}" src="${esc(url)}" alt="" loading="lazy" onerror="this.outerHTML=${esc(JSON.stringify(tileHTML(name,cls)))}">`
+    : tileHTML(name,cls);
+}
+/// A folder's tile is its first four shows' art. With fewer than four to show, the folder's own.
+function folderArt(f,kids){
+  const art=kids.filter(c=>c.image).slice(0,4);
+  if(art.length<4) return artHTML(f.image,f.title||f.id);
+  // Tinted underneath, so art that fails to load leaves colour behind rather than a hole.
+  return `<div class="art ini mosaic" style="--tint:${tint(f.title||f.id)}">${art.map(c=>
+    `<img src="${esc(c.image)}" alt="" loading="lazy" onerror="this.style.visibility='hidden'">`).join('')}</div>`;
+}
+
+/// The sidebar slides over the page on a phone, so it needs a scrim to tap away.
+function nav(on){ $('#sidebar').classList.toggle('open',on); $('#scrim').hidden=!on; }
+
+/* ---------------- state ---------------- */
+const S = {
+  feeds:[],
+  // Which feed (or place) and which tab were open last time, so a refresh lands back where
+  // you were instead of jumping to the first feed alphabetically.
+  feed:(()=>{ try{ return localStorage.getItem('ipx.feed'); }catch{ return null; } })(),
+  entries:[], total:0, offset:0,
+  filter:(()=>{ try{ return localStorage.getItem('ipx.filter'); }catch{ return null; } })()||'all',
+  q:'', sel:null, me:null,
+  // The item table's order, kept across visits. The server sorts: a list arrives fifty at a time.
+  sort:(()=>{ try{ return JSON.parse(localStorage.getItem('ipx.sort')); }catch{ return null; } })()
+    ||{col:'published',dir:'desc'},
+};
+const LIMIT = 50;
+
+const UNITS = [['m','minutes'],['h','hours'],['d','days'],['w','weeks']];
+const UNIT_MINS = {m:1, h:60, d:1440, w:10080};
+
+/// Largest unit that divides evenly, so 120 reads "2 hours" not "120 minutes".
+function splitEvery(m){
+  if(!m) return {n:1, u:'h'};
+  for(const u of ['w','d','h']) if(m % UNIT_MINS[u] === 0) return {n:m/UNIT_MINS[u], u};
+  return {n:m, u:'m'};
+}
+function unitOptions(sel){
+  return UNITS.map(([v,l]) =>
+    `<option value="${v}"${sel===v?' selected':''}>${l}</option>`).join('');
+}
+function everyText(m){
+  if(!m) return '\u2014';
+  const {n,u} = splitEvery(m);
+  const name = {m:'min', h:'hour', d:'day', w:'week'}[u];
+  return n + ' ' + name + (u!=='m' && n!==1 ? 's' : '');
+}