Lay the notes screen out like a notes app

The list of notes and the note being written are one screen now, two
panes: the notes on the left, the open one on the right, side by side
where there is room and one at a time on a phone, where the back button
returns to the list.

The search box moved into the top of that list, and its results *are*
the list — searching is a way of finding a note, not a separate place to
be, and a tab for it was a tab too many. Emptying the box brings the
whole list back. Opening a hit opens that day at the lesson that
matched, rather than at the top of a day with six of them.

A row has to say what the note holds, so the listing carries it: the
subjects a day covers, how many lessons, and the first line actually
written in it. One request for the whole list rather than one per note.

`plainText` is now one rule in one place for wherever a note is shown
rather than edited — the search snippet and the list row both went
through their own half-copy of it, and the row's copy rendered a table
as `| | |` and left `_Fazit_` wearing its markers. It strips one leading
marker, not each in turn, because `## 1. Deutsch` keeps its lesson
number and the list rule was eating it.

Driven in Firefox at both widths: the list, the search, opening a hit,
the jump to the lesson, and the phone's list-then-note. 390 unit tests,
116/117 smoke.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
MechaCat02
2026-09-21 18:22:47 +02:00
parent 5db098b67f
commit 48c6cf39d5
9 changed files with 478 additions and 190 deletions

View File

@@ -27,13 +27,29 @@
<header>
<nav class="tabs">
<button type="button" id="tab-notes" class="tab" aria-current="page">Notizen</button>
<button type="button" id="tab-search" class="tab">Suche</button>
<button type="button" id="tab-settings" class="tab">Einstellungen</button>
</nav>
</header>
<!-- Notes: one school day per note, one heading per lesson. -->
<main id="view-notes" class="view">
<!-- Two panes: the notes on the left, the open one on the right. Side by
side where there is room; one at a time on a phone, where `data-pane`
says which, and the back button returns to the list. -->
<main id="view-notes" class="view notes" data-pane="list">
<aside class="rail">
<div class="rail-head">
<form id="search-form" class="searchbar" role="search">
<input id="search-input" type="search" inputmode="search" autocomplete="off"
placeholder="Durchsuchen" aria-label="Notizen durchsuchen">
</form>
<button type="button" id="today" aria-label="Heutiger Tag" title="Heutiger Tag">+</button>
</div>
<p id="rail-status" class="status" role="status" aria-live="polite"></p>
<div id="rail-list" class="rail-list"></div>
</aside>
<section class="detail">
<button type="button" id="back" class="back">‹ Notizen</button>
<div class="daybar">
<button type="button" id="prev" aria-label="Vorheriger Tag">‹</button>
<div class="daybar-centre">
@@ -84,23 +100,15 @@
<button type="button" id="fill" hidden>Stunden ergänzen</button>
<span id="lessons-hint" class="hint"></span>
</div>
</main>
<!-- Search: the notes themselves, read from disk rather than the index, so a
lesson written this morning is findable this morning. -->
<main id="view-search" class="view" hidden>
<form id="search-form" class="searchbar">
<input id="search-input" type="search" inputmode="search" autocomplete="off"
placeholder="In den eigenen Notizen suchen" aria-label="Suchbegriff">
<button type="submit">Suchen</button>
</form>
<p id="search-status" class="status" role="status" aria-live="polite"></p>
<div id="search-results" class="results"></div>
<article id="search-note" class="note-preview" hidden>
<button type="button" id="search-back">‹ Zurück zu den Treffern</button>
<h2 id="search-note-title"></h2>
<div id="search-note-body" class="editor" aria-readonly="true"></div>
<!-- A note that is not a school day — one from the import, a page of
revision — has no day to open, so it is shown rather than edited. -->
<article id="note-preview" class="note-preview" hidden>
<h2 id="note-preview-title"></h2>
<p id="note-preview-path" class="hint"></p>
<div id="note-preview-body" class="editor" aria-readonly="true"></div>
</article>
</section>
</main>
<!-- Settings: the Schulcloud token, and what the server is doing. -->