# Navigation: Lesen and Hören

diora's areas are sorted by what one does, not where things come from:

| Group | Sections |
|-------|----------|
| —     | Home |
| Lesen | Bücher · Zeitschriften · Nachrichten · Blogs |
| 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):** 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 groups. Managing (subscribing, settings,
folders) is in "Abos & Quellen" (docs/sources.md; done).

## One definition: `static/js/nav.js` (diora-web)

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. **It is the one source for the
navigation.**

Underneath, `static/js/app/20-tabs.js` keeps `TOP_TABS`: the list of *panels*
(`#tab-<name>`) 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'|'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
}
```

| Section id | Group | Label | Panel | View inside the panel |
|------------|-------|-------|-------|-----------------------|
| `home` | — | Home | `#tab-home` | |
| `books` | lesen | Bücher | `#tab-books` | e-books (not magazines) |
| `magazines` | lesen | Zeitschriften | `#tab-books` | magazines |
| `news` | lesen | Nachrichten | `#tab-feeds` | news |
| `blogs` | lesen | Blogs | `#tab-feeds` | blogs |
| `audiobooks` | hoeren | Hörbücher | `#tab-audiobooks` | (audiobooks.js) |
| `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:
`window.__dioraBooksView('books'|'magazines')`,
`window.__dioraFeedsView('news'|'blogs')`. The panels' own switches for that
choice (feeds.js News/Blogs) are hidden. `_currentTopTab` stays the panel name.

Hash: `#books`, `#magazines`, `#news`, `#blogs`, `#audiobooks`, … (old hashes
`#feeds`, `#radio/saved` keep working). Remembered: `localStorage`
`diora_nav_section` and `diora_nav_last_<group>`.

**Zeitschriften**: the books marked as magazines (encrypted meta `magazine`), or, unmarked,
those in a library folder called "Zeitschriften" (or "Magazine"); issues and articles:
docs/library.md.

### The segment row (phone)

nav.js draws `#nav-segments` above the panels: the current group's sections,
when the layout is the tab bar (not `html.nui-sidebar`) and the group has more
than one available section. Styled with the theme tokens; the native CSS may
restyle it.

## Who draws what

| Where | Bar | Drawn by |
|-------|-----|----------|
| 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
`DioraNav.onChange`.

## Phases

1. Navigation (this document), Hörbücher as their own panel, Zeitschriften by folder.
2. "Abos & Quellen": podcasts, YouTube channels, news sources, blogs and the
   audiobook mark in one place; the everyday views without managing.
3. Library (done): audiobook series are found in the titles ("Das Kapital –
   Erster Band" …) and shown as one stack; audiobooks have folders
   (`PodcastFeed.folders`, a list; `folder` is its first, for older clients); a book is marked as a magazine in its encrypted
   meta (`magazine: true/false`; unset: the "Zeitschriften" folder decides), and
   Zeitschriften groups the issues by periodical.