From fd69ec34721adc86eb999cd7afb1153bf9b6833e Mon Sep 17 00:00:00 2001 From: mrwnslz Date: Sat, 24 Oct 2026 16:03:34 +0200 Subject: [PATCH] Doku nachgezogen: Navigation mit Projekte/Suche/Fokus und TOP_TABS (Panels) vs. nav.js (Navigation); app.js-Verweise auf static/js/app/ Co-Authored-By: Claude Opus 5.5 --- docs/navigation.md | 38 +++++++++++++++++++++++++++++--------- docs/progress-sync.md | 2 +- docs/refactoring.md | 5 +++-- 3 files changed, 33 insertions(+), 12 deletions(-) diff --git a/docs/navigation.md b/docs/navigation.md index 2e77a86..35e4d04 100644 --- a/docs/navigation.md +++ b/docs/navigation.md @@ -6,14 +6,20 @@ diora's areas are sorted by what one does, not where things come from: |-------|----------| | — | Home | | Lesen | Bücher · Zeitschriften · Nachrichten · Blogs | -| Hören | Hörbücher · Podcasts · Radio · Ambient | -| — | Abos & Quellen (managing all subscriptions; phase 2) | +| Hören | Hörbücher · Podcasts · Radio · Ambient (· Fokus, web page only) | +| Projekte | Projekte (docs/projects.md; `side`) | +| — (foot) | Suche (docs/search.md; `footer`, `transient`) · Abos & Quellen (docs/sources.md; `footer`) | - **Desktop / wide window (sidebar):** every section is its own entry, under its group's heading. Nothing inside a section repeats the choice. -- **Phone (tab bar):** three tabs, **Home · Lesen · Hören**. Lesen and Hören - show a row of their sections at the top (segments); each group remembers - the section last used. The mini player stays below as it is. +- **Phone (tab bar):** four tabs, **Home · Lesen · Hören · Projekte** (since 2026-10-19). + Lesen and Hören show a row of their sections at the top (segments); each group remembers + the section last used. The search is a magnifier in the bar on top (the apps' section bars, + the page's narrow bar), never a tab; Abos & Quellen is in the app menu. The mini player + stays below as it is. +- **Sidebar / wide bar:** `side` sections (Projekte) and then the `footer` ones (Suche, + Abos & Quellen) stand at its foot. A `transient` section (Suche) is never remembered as + the one to open next. - **diora Reader** (tolino, e-readers): only Lesen, without Home. **TV:** Hören. Anything new goes into one of the two groups. Managing (subscribing, settings, @@ -23,12 +29,21 @@ folders) moves out of the everyday views into "Abos & Quellen" (phase 2). Loaded by the page on every platform, before the other area scripts. It owns the sections, which panel shows each, switching between them, the URL hash -and the remembered choice. The bars are drawn from it. +and the remembered choice. The bars are drawn from it. **It is the one source for the +navigation.** + +Underneath, `static/js/app/20-tabs.js` keeps `TOP_TABS`: the list of *panels* +(`#tab-`) that `showTab(name)` can show — home, radio, focus, podcasts, books, feeds, +ambient, audiobooks, sources, suche, projekte. That is not a second navigation: nav.js +maps each section to one of these panels (several sections share one: Bücher/Zeitschriften +→ books, Nachrichten/Blogs → feeds) and calls `showTab`. A new area needs both: its panel in +`TOP_TABS` (and the template) and its section in nav.js. ``` window.DioraNav = { sections(), // [{id, group, label, icon, available}] in order (only those the page has) - groups(), // [{id: 'home'|'lesen'|'hoeren', label, icon, sections: [id…]}] + groups(), // [{id: 'home'|'lesen'|'hoeren'|'projekte', label, icon, sections: [id…]}] + icon(name), // a section's or group's icon as SVG (also 'menu') current(), // the section id shown now go(id), // show a section ('lesen'/'hoeren': that group's last section) onChange(fn), // fn(sectionId) after every change @@ -46,6 +61,10 @@ window.DioraNav = { | `podcasts` | hoeren | Podcasts | `#tab-podcasts` | | | `radio` | hoeren | Radio | `#tab-radio` | | | `ambient` | hoeren | Ambient | `#tab-ambient` | | +| `focus` | hoeren | Fokus | `#tab-focus` | web page only (`webOnly`) | +| `projekte` | projekte | Projekte | `#tab-projekte` | (projects.js) | +| `suche` | (foot) | Suche | `#tab-suche` | (search.js); never remembered | +| `sources` | (foot) | Abos & Quellen | `#tab-sources` | (sources.js) | `go()` calls the page's `showTab(panel)` as before (so everything hooked onto showTab keeps working) and then the panel's view hook: @@ -71,8 +90,9 @@ restyle it. | Where | Bar | Drawn by | |-------|-----|----------| -| Android (phone) | `#nui-tabbar`: Home · Lesen · Hören | native-radio.js, from `DioraNav.groups()` | -| Android tablet, desktop (`html.nui-sidebar`) | rail: Home, headings Lesen/Hören with their sections, Menü | native-radio.js, from `DioraNav.sections()` | +| Android (phone) | `#nui-tabbar`: Home · Lesen · Hören · Projekte | native-radio.js, from `DioraNav.groups()` | +| Android tablet, desktop (`html.nui-sidebar`) | rail: Home, headings Lesen/Hören with their sections, at the foot Projekte · Suche · Abos & Quellen, Menü | native-radio.js, from `DioraNav.sections()` | +| Apps, every section | a bar on top (`.nui-tab-bar`; `.nui-section-bar` for the generic ones) with the section's name, its actions and the search magnifier | native-ui.js `SECTION_BARS`, native-radio.js, native-podcast.js | | Web page | `#tabs` (narrow: groups + segments; wide: all sections under headings) | nav.js | A tab/rail button calls `DioraNav.go(id)`; the active state comes from diff --git a/docs/progress-sync.md b/docs/progress-sync.md index 1cefc30..9ab05ac 100644 --- a/docs/progress-sync.md +++ b/docs/progress-sync.md @@ -3,7 +3,7 @@ Since 2026-10-12 the place to continue a book is **where it was last read, on any device**, not the furthest place ever reached. The furthest place is still kept, as a hint ("Weiteste Stelle"). This file is the contract between the server (books/views.py `save_progress`), the web reader -(static/js/app.js), diora-android (Ops.kt / SyncEngine.kt / native-*.js) and diora-desktop +(static/js/app/46-readpos.js, with the reader in 62-reader.js), diora-android (Ops.kt / SyncEngine.kt / native-*.js) and diora-desktop (src/main/ops.js / sync.js). They must apply the same rules. ## The state per book diff --git a/docs/refactoring.md b/docs/refactoring.md index 16c22bf..5a4ef5b 100644 --- a/docs/refactoring.md +++ b/docs/refactoring.md @@ -13,7 +13,7 @@ This is the plan for tidying it up without breaking anything. * Whoever owns a file does its refactoring (web-native/* → the Android session; app.js, home.js, templates, desktop → the desktop session); shared contracts live in docs/. -## The numbers (2026-10-14) +## The numbers (2026-10-14, before step 2; app.js is now `static/js/app/`) | file | lines | |---|---| @@ -37,7 +37,8 @@ Android Ops.kt), each tested separately or not at all. * Shared test vectors for the reading-position rules (`docs/progress-cases.json`), run by the Django tests, desktop's node tests and Android's OpsTest — one contract, checked in all four places. -2. **Split app.js** by its sections into plain scripts loaded in order (radio, focus, +2. **Split app.js** (done: 656520f, sw v106 — `static/js/app/NN-*.js`, 33 files; the + template lists them in order) by its sections into plain scripts loaded in order (radio, focus, ambient, crypto, epub, books, reading position, reader, tts, highlights, margin, …). They stay classic scripts sharing globals, so the native layers that wrap `window.*` keep working unchanged; template, sw.js SHELL and Android's build_web list them. No code