From 0bda242a98c499310ded420532efcb581815a47e Mon Sep 17 00:00:00 2001 From: Jonathan Sykes Date: Tue, 6 Oct 2026 02:01:56 +0800 Subject: [PATCH] Add Framework7 Swipe layout with swipeout rows, up-next sheet and mini-bar gestures --- CLAUDE.md | 6 + frontend/app.js | 5 +- frontend/f7-layout.js | 151 ++++++++++++++ frontend/f7-layout.test.js | 19 ++ frontend/index.html | 2 + frontend/sw.js | 3 + frontend/theme-f7.css | 139 +++++++++++++ frontend/vendor/framework7-swipe.entry.js | 13 ++ frontend/vendor/framework7-swipe.min.js | 234 ++++++++++++++++++++++ 9 files changed, 570 insertions(+), 2 deletions(-) create mode 100644 frontend/f7-layout.js create mode 100644 frontend/f7-layout.test.js create mode 100644 frontend/theme-f7.css create mode 100644 frontend/vendor/framework7-swipe.entry.js create mode 100644 frontend/vendor/framework7-swipe.min.js diff --git a/CLAUDE.md b/CLAUDE.md index 086758d..fef2392 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -54,6 +54,12 @@ JSON shapes mirror the Tauri Rust bridge exactly — don't change one side alone refreshed every 1.5 s by the `glassStage` IIFE), four stacked icon tiles and secondary actions as a pill row, floating mini player. Elements that only this theme shows (`.stg-overlay`, `.skip10`, `.deck-chips`, `.vol-pod` extras, `.mode-name`) are in the shared markup and hidden by default. +- **f7-swipe** (`frontend/f7-layout.js` + `theme-f7.css`): classic look + Framework7 gestures. Loads + `vendor/framework7-swipe.min.js` (F7 9.2.0 core+Store+Swipeout+Modal+Sheet, rebuilt from + `vendor/framework7-swipe.entry.js`) only when picked. Cards are wrapped in `li.swipeout` (Queue / Playlist / + Remove, via `card._video`), swipe up on the mini bar = F7 "Up next" sheet, sideways = next/prev, left-edge + swipe = sidebar. F7's touch module swallows programmatic `.click()`s, so `app.off('click')` + + `app.off('touchend')` run after init — keep that, or app.js buttons driven by `.click()` silently stop working. - Now-playing tiles are `[svg.ti][span.tl]`; change state text with `setTile(btn, label)`, never `textContent`. ## Saved searches + caching notes diff --git a/frontend/app.js b/frontend/app.js index bee05cd..83ec757 100755 --- a/frontend/app.js +++ b/frontend/app.js @@ -658,7 +658,7 @@ const DEFAULT_SETTINGS = { density: 'comfortable', // 'comfortable' | 'compact' perfMode: false, // disable heavy visual effects for speed reduceMotion: false, // disable animations - layout: 'classic', // 'classic'|'glass-stage'|'sanctuary-stage'|'liturgical'|'living-hymnal'|'broadcaster'|'contemplative'|'bento-hub' + layout: 'classic', // 'classic'|'glass-stage'|'sanctuary-stage'|'liturgical'|'living-hymnal'|'broadcaster'|'contemplative'|'bento-hub'|'f7-swipe' autoBackupEnabled: false, autoBackupIntervalDays: 7, serviceVideo: false, // show the video panel inside service mode (lyric videos) @@ -9535,7 +9535,7 @@ async function renderSettings() {