How OpenChronology was built

#236 · Add view mode, and read moments and durations in a reader

2026-10-20T00:35:14Z CE

• timeline-app
• pull request

Fixes #233. ### View mode A **View mode** switch sits at the top of the editor, beside Import and Export, for anyone who can edit the open timeline. - **On:** the editor behaves as it does for a viewer. `editable()` is now `!viewMode && mayEdit()`, so every editing control hides or disables as it already does for viewers: **＋ Event**, the title and description, plugin settings, dragging and so on. - **Off:** everything is back, with unsaved work untouched. Switching closes the event dialog, since it was opened for the other mode. - **Remembered:** the setting is kept in this browser (`localStorage`, guarded). - **Viewers:** people who can't edit always read, and never see the switch (embeds included). ### The reader In view mode, or for anyone who can't edit, clicking a moment or duration opens the **reader** instead of the form. It works the same from the timeline, search, a link, a summary's list or a related entry. The reader is a panel of the event dialog (`src/event-reader.ts`), a full-size hover card. It shows: - **Pictures:** the marker image or duration background as the lead image, with "Image: host" credits, plus any other image fields in a gallery; - **Time:** the moment's time, or the duration's span; - **Tags**, as chips; - **Notes:** Markdown when **Rich text notes** is on, for durations too (the duration editor and hover card still show plain text); - **Plugin fields:** text and note fields as a definition list, link fields as safe https links only, and stack entries as cards; - **Related to:** the existing relationships list, read-only, whose entries open in the reader in turn. It's built from text nodes, links and images only, like the hover card. **Share** and **Report** behave as in the details panel. Sensitive-content notices and image blurring work as elsewhere (#115). On phones (≤650px) the reader fills the screen. Comparisons keep the details panel, since their read-only form shows each track's source and original coordinate. ### Tests - **`test/view-mode-browser.mjs` (new):** - The switch shows for an editor and is off by default. - On, **＋ Event** hides and the title can't be edited. - A moment opens in the reader with its image and credit, time, tags, Markdown notes, the dating plugin's field, safe sources only, no inputs, and its related duration. - Following that opens the duration, with its span and Markdown notes; its band opens it too. - Off, the editor is back. - **Live tests** that open public timelines as guests and embeds now check the reader: `sharing-postgres`, `moderation-live-postgres` and `labels-live-postgres`. I ran all three locally against PostgreSQL with the built platform, and they pass. - `npm test` (301), typecheck, prettier, the browser suite (20) and the offline browser test pass.

Open #236 · Add view mode, and read moments and durations in a reader in the timeline