# 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 |
| —     | Abos & Quellen (managing all subscriptions; phase 2) |

- **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.
- **diora Reader** (tolino, e-readers): only Lesen, without Home. **TV:** Hören.

Anything new goes into one of the two groups. Managing (subscribing, settings,
folders) moves out of the everyday views into "Abos & Quellen" (phase 2).

## 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.

```
window.DioraNav = {
  sections(),   // [{id, group, label, icon, available}] in order (only those the page has)
  groups(),     // [{id: 'home'|'lesen'|'hoeren', label, icon, sections: [id…]}]
  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` | |

`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** (phase 1): the books in a library folder called
"Zeitschriften" (or "Magazine"); a per-book mark follows with phase 3.

### 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 | 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()` |
| 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.folder`); 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.