VersionControl:PRs/rabbithole/18

rabbithole#18: Rabbithole as a Vue app: one state, components, an installable PWA

State	🟣 merged 2026-11-06 17:09:18
Worked on by	magent, justin, skyler
Moods	#rabbithole
Deploy	not said
Branch	vue → main, by magent-cryptograss
Opened · last pushed	2026-11-06 11:50:17 · 2026-11-06 14:50:23

Justin, 6 Nov 2026, block 26,355,457: "Can you make a Vue version, based on the current version plus the six PRs? I think this might just be the moment to transition the whole thing." This is that. It includes #10, #12, #13, #15, #16 and #17, merged first; merging this merges them.

The write-up that led here: [26355303 Rabbithole framework question](https://pickipedia.xyz/wiki/26355303_Rabbithole_framework_question). The short of it: three sources of truth for what is playing and 38 timers coordinating them. Eleven of the audit's fifteen findings were two things synced by time instead of state.

**The rule, everywhere:** a view is a function of state.

**What it is now**
- Vite + Vue 3 + Pinia, built with vite-plugin-pwa: manifest, icons, a service worker (app shell precached; wiki API network-first; styles, peaks, fonts cached; audio left to the gateway). Base path `/rabbithole/`; the wiki's API proxied in development.
- `src/player/model.js`: Webamp wrapped as a model. It subscribes to Webamp's store and mirrors status, time, duration, current track and playlist into one reactive state; the chart is derived from (song, time) by the pure functions in `src/player/timeline.js`. The rules timers used to enforce are consequences now: the chart follows Webamp's current track because the store says which that is; a loaded song is paused the first time Webamp reports it playing, no 50ms poll (audit 8); pausing freezes the cards because nothing renders from "status changed" (audit 9). Effects are the one place a duration is a duration.
- Four stores: `player`, `song`, `layout`, `pane` (newest ask wins, as #16).
- Thirteen components. The ensemble renders from the model's cards with `TransitionGroup` moving them, which is what Packery was for: Packery is gone, and so is the transform fight (audit 4). The layout switch no longer reloads the page.
- `src/wiki/api.js`: PickiPedia read and written as functions; `interpretEditResponse` is #15's rule as a pure function. `pane-html.js`, `queue.js` (now, next, or a trail).
- The timeline editor still renders itself by hand into the container `EditorPanel.vue` gives it, through the names it always used on the player. Its model already is one; converting its rendering is the next piece of work, not this PR.
- Webamp stays vendored in `public/vendor/`, loaded as a classic script.

**Gone:** `pickipedia-demo.html`, `shell.html`, `embed.html`, `video-player.html` (the PWA is the product, which settles the two-shells question), the standalone library surface, the legacy `Recording:/Rabbithole` save path, the old player class, `rabbithole.css`.

**Tests:** 146 pass. The chart's pure functions; the model against a toy store (follow, pause-on-load, queue, effects); the pane store with a slow wiki; the Ensemble component under happy-dom (one card per musician, two loads leave one set, soloist first and starred, cards hold while paused); the wiki's answers; and a shell test that pins no `setTimeout`, `setInterval` or `MutationObserver` in any component or store.

**Checked in a browser** against the real wiki through the dev proxy, on Swords: both layouts; the live switch between them with Webamp intact and no navigation; play; seek by the parts strip with the cards and the pane following; the editor opening with its 21 markers and waveform, Save reading "No changes"; the bar collapsing to a shaded player; the phone layout.

**Deploying it needs** cryptograss/maybelle-config's companion PR (Node on the box, `npm ci && npm run build`, Caddy serving `dist/`). Merge that first, then this, then redeploy.

**Known, not in this PR:** the editor's rendering (above); the four-song demo selector only shows when there is no `?track=`; `hunter` is at 98% disk, unrelated but seen while installing.

Redeploy: pickipedia (after the maybelle-config PR)
Worked on by: magent, Justin, Skyler, in #rabbithole