Notezbeta
Zurück zum Blog

Die Liste, die du bei jedem Öffnen einer Notiz verlierst

ProductivityDenis Povarov

Diese Schleife hast du schon hundertmal durchlaufen, ohne es zu merken.

Du schaust auf eine gefilterte Notizliste – alles mit dem Tag research, sortiert nach der letzten Bearbeitung. Du klickst auf die dritte Notiz. Es ist nicht die, die du wolltest. Du gehst zurück. Die Liste lädt neu und steht wieder oben, und deine Scrollposition, vier Bildschirme weiter unten, ist weg. Du suchst deine Stelle wieder. Du klickst auf die vierte.

Zwanzig durchgesehene Notizen bedeuten vierzig Navigationen, und neunzehnmal musst du dich neu orientieren. Der Preis ist nicht das Laden der Seite. Der Preis ist, dass die Liste das ist, womit du eigentlich gearbeitet hast, und dass jede Notiz, die du öffnest, sie zerstört.

Notizen öffnen sich jetzt stattdessen in einem Seitenpanel über der Liste.

Was sich geändert hat

Klicke auf eine Notiz im Raster, in der Tabelle oder auf dem Board, und sie öffnet sich in einem Panel rechts. Die Liste bleibt genau, wo sie war – gleiche Scrollposition, gleiche Filter, gleiche Board-Spalten, gleiche Mehrfachauswahl. J und K springen zur nächsten und zur vorherigen Notiz in der Reihenfolge, die du gerade vor dir hast. Esc schließt das Panel.

Das Panel ist keine Vorschau. Es ist derselbe Editor, mit demselben automatischen Speichern, denselben Tags und Eigenschaften, denselben Unternotizen, verknüpften Notizen und demselben Bereich Ähnliche Notizen. Alles, was du mit einer Notiz auf ihrer eigenen Seite machen kannst, geht auch dort.

Die ganze Seite gibt es weiterhin: Als ganze Seite öffnen in der Werkzeugleiste des Panels oder ein Mittelklick auf die Karte.

Drei Entscheidungen, mit denen es funktioniert

Das Panel ist kein Modal

Die naheliegende Umsetzung ist ein Dialog: Overlay, Fokusfalle, Scroll-Sperre. Ich habe bewusst nichts davon eingebaut.

Ein Overlay würde den ganzen Sinn zunichtemachen. Die Liste bleibt auf dem Bildschirm, damit du sie benutzen kannst – scrollen, eine Karte in eine andere Spalte ziehen, mit einem Auswahlrahmen mehrere Karten markieren, während eine Notiz offen ist. Eine abgedunkelte Ebene, die Klicks schluckt, gibt dir ein Bild deiner Liste statt deiner Liste.

Deshalb ist das Panel nicht modal: kein Overlay, keine Fokusfalle, keine Scroll-Sperre, und ein Klick daneben schließt es nicht. Wann es zugeht, entscheidest immer du – mit dem ✕, mit Esc, mit dem Zurück-Button des Browsers oder mit einem Klick auf die Kante am linken Rand des Panels.

Das Letzte verdient einen eigenen Absatz. Die Kante ist sowieso da, um das Panel breiter zu ziehen. Die Maustaste darauf zu drücken, ohne zu ziehen, hat bisher nichts bewirkt, deshalb klappt ein Klick darauf das Panel jetzt zu. Dieselbe Geste funktioniert bei der Seitenleiste und beim Panel des KI-Chats, und die Seitenleiste hat bei der Gelegenheit das Tastenkürzel ⌘\ zum Ein- und Ausblenden bekommen.

Die offene Notiz steht in der URL

Das Panel wird über einen Query-Parameter gesteuert – /notes?peek=<id> –, nicht über den Zustand einer Komponente.

Das ist die Art Entscheidung, die nach Mehrarbeit aussieht und sich sofort auszahlt. Der Zurück-Button des Browsers schließt das Panel, weil Schließen eine Navigation ist. Neu laden stellt es wieder her. Den Link kannst du teilen oder als Lesezeichen speichern. Sortieren, Filtern oder Tippen in der Suche lässt eine offene Notiz offen, weil all das nur weitere Parameter derselben URL sind.

Jede Notizkarte und jede Tabellenzeile bleibt ein echtes <a href="/notes/...">. Abgefangen wird nur ein einfacher Linksklick.

Diese eine Entscheidung ist der Grund, warum Mittelklick, Rechtsklick → In neuem Tab öffnen und „Link-Adresse kopieren“ ohne eine Zeile Code weiter funktionieren. Ein <div> mit onClick hätte jede davon stillschweigend kaputt gemacht, und niemand hätte einen Fehler gemeldet – die Leute hätten es einfach nicht mehr versucht.

Zwei Fehler, von denen ich erzählen will

Die Sperre, die bei jedem Tastendruck auslöste

Notizen speichern automatisch, und eine Sperre fängt Navigationen ab, solange ein Speichervorgang aussteht, damit du eine Notiz nicht mitten im Schreiben verlässt.

Mit dem Panel hatte diese Sperre plötzlich einen viel größeren Wirkungsradius. Die Suche in der Kopfzeile navigiert bei jedem Tastendruck – jedes Zeichen ist eine neue URL. Hast du also mit einer ungespeicherten Notiz im Panel etwas in die Suche getippt, löste die Sperre bei jedem Zeichen aus: Über der Liste blitzte ein modaler Dialog „Notiz wird gespeichert…“ auf, und bei jedem Buchstaben wurde ein Speichern erzwungen.

Die Lösung: Die Sperre blockiert jetzt nur Navigationen, nach denen diese Notiz nicht mehr zu sehen ist – sie schließen, zu einer anderen wechseln, die Route verlassen. Die Liste darunter neu zu sortieren heißt nicht, die Notiz zu verlassen, also löst die Sperre nicht aus.

Ein Tooltip-Pfeil hat den Ziehgriff verschluckt

Die Kante, an der du die Breite des Panels änderst, ist vier Pixel breit. Fährst du mit der Maus darüber, erscheint ein Tooltip: Ziehen ändert die Breite, ein Klick schließt das Panel.

Nur zeichnet der Tooltip einen Pfeil – ein kleines gedrehtes SVG –, und meine Tooltips sitzen standardmäßig bündig an ihrem Auslöser. Der Pfeil landete also genau auf der vier Pixel breiten Kante. Mit der Maus über die Kante fahren, dann drücken: Der Druck auf die Maustaste landete auf dem Pfeil, nicht auf dem Griff. Das Panel änderte weder seine Breite, noch schloss es sich.

Lehrreich ist daran, wie ich den Fehler gefunden habe. Ein End-to-End-Test hat ihn erwischt, und zwar nur, weil er eine echte Maus steuert. Meine frühere manuelle Prüfung hatte synthetische Events direkt an das Element geschickt. Das umgeht den Hit-Test komplett und meldet fröhlich, dass alles funktioniert. Welches Element unter dem Cursor liegt, fragt nur ein echter Zeiger.

document.elementFromPoint() auf der Kante lieferte ein <svg>, und das war schon die ganze Geschichte.

Wo es nicht gilt

  • Auf Smartphones öffnet sich eine Notiz weiterhin als ganze Seite. Ein bildschirmfüllendes Panel ist nur eine Seite mit einem schlechteren Zurück-Button.

  • Auf dem Board bleiben nächste und vorherige Notiz in einer Spalte. Ein Board hat keine durchgehende Reihenfolge über alle Spalten, deshalb gehen J und K durch die Spalte der Karte, die du geöffnet hast.

  • Links in einer Notiz – die [[-Chips, der Verbindungsgraph, Relations-Eigenschaften – öffnen weiterhin die ganze Seite. Einem Link zu folgen heißt, woandershin zu gehen, nicht zum nächsten Eintrag einer Liste. Das Panel ist dafür da, eine Liste durchzugehen, nicht, von ihr abzuschweifen.

Auf dieser letzten Unterscheidung beruht das ganze Feature: Notizkarten und Tabellenzeilen öffnen sich im Panel, jeder andere Weg zu einer Notiz öffnet die Seite. Ein Satz, und du weißt vorher, was jeder Klick tut.

Alle Details stehen in Notizen organisieren und in den Tastenkürzeln.

Weiterlesen