DrivingThatTrain: cryptograss/rabbithole#18, as GitHub has it

2026-11-09T19:06:22Z

cryptograss/rabbithole#18, as GitHub has it

← Older revision		Revision as of 19:06, 9 November 2026
Line 16:		Line 16:
	\|deploy=		\|deploy=
	}}		}}
			<pre class="pr-body">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</pre>

DrivingThatTrain: cryptograss/rabbithole#18, as GitHub has it

2026-11-06T18:05:42Z

cryptograss/rabbithole#18, as GitHub has it

← Older revision		Revision as of 18:05, 6 November 2026
Line 5:		Line 5:
	\|url=https://github.com/cryptograss/rabbithole/pull/18		\|url=https://github.com/cryptograss/rabbithole/pull/18
	\|author=magent-cryptograss		\|author=magent-cryptograss
	\|state=~~open~~		\|state=merged
	\|base=main		\|base=main
	\|branch=vue		\|branch=vue
	\|opened=2026-11-06 11:50:17		\|opened=2026-11-06 11:50:17
	\|pushed=2026-11-06 14:50:23		\|pushed=2026-11-06 14:50:23
	\|merged=		\|merged=2026-11-06 17:09:18
	\|closed=		\|closed=
	\|worked_on_by=magent, justin, skyler		\|worked_on_by=magent, justin, skyler

DrivingThatTrain: cryptograss/rabbithole#18, as GitHub has it

2026-11-06T14:50:30Z

cryptograss/rabbithole#18, as GitHub has it

← Older revision		Revision as of 14:50, 6 November 2026
Line 9:		Line 9:
	\|branch=vue		\|branch=vue
	\|opened=2026-11-06 11:50:17		\|opened=2026-11-06 11:50:17
	\|pushed=2026-11-06 11:49:40		\|pushed=2026-11-06 14:50:23
	\|merged=		\|merged=
	\|closed=		\|closed=

DrivingThatTrain: cryptograss/rabbithole#18, as GitHub has it

2026-11-06T11:50:23Z

cryptograss/rabbithole#18, as GitHub has it

New page

{{PR
|repo=rabbithole
|number=18
|title=Rabbithole as a Vue app: one state, components, an installable PWA
|url=https://github.com/cryptograss/rabbithole/pull/18
|author=magent-cryptograss
|state=open
|base=main
|branch=vue
|opened=2026-11-06 11:50:17
|pushed=2026-11-06 11:49:40
|merged=
|closed=
|worked_on_by=magent, justin, skyler
|moods=rabbithole
|deploy=
}}

VersionControl:PRs/rabbithole/18 - Revision history

DrivingThatTrain: cryptograss/rabbithole#18, as GitHub has it

DrivingThatTrain: cryptograss/rabbithole#18, as GitHub has it

DrivingThatTrain: cryptograss/rabbithole#18, as GitHub has it

DrivingThatTrain: cryptograss/rabbithole#18, as GitHub has it