La liste que vous perdez chaque fois que vous ouvrez une note

Productivity

Voici une boucle que vous avez parcourue cent fois sans la remarquer.

Vous regardez une liste filtrée de notes : tout ce qui porte l’étiquette research, trié par dernière modification. Vous cliquez sur la troisième. Ce n’est pas celle que vous vouliez. Vous revenez en arrière. La liste se recharge en haut, et votre position de défilement, quatre écrans plus bas, a disparu. Vous retrouvez votre place. Vous cliquez sur la quatrième.

Passer en revue vingt notes, c’est quarante navigations et dix-neuf fois retrouver ses repères. Le coût n’est pas le chargement de la page. C’est que la liste est ce sur quoi vous travailliez vraiment, et chaque note que vous ouvrez la détruit.

Désormais, les notes s’ouvrent dans un panneau latéral par-dessus la liste.

Ce qui a changé

Cliquez sur une note dans la grille, la table ou le tableau, et elle s’ouvre dans un panneau à droite. La liste reste exactement où elle était : même position de défilement, mêmes filtres, mêmes colonnes de tableau, même sélection multiple. J et K passent à la note suivante et à la précédente, dans l’ordre que vous avez sous les yeux. Esc ferme le panneau.

Le panneau n’est pas un aperçu. C’est le même éditeur, avec le même enregistrement automatique, les mêmes étiquettes et propriétés, les mêmes notes enfants, notes liées et notes similaires. Tout ce que vous faites sur la page d’une note, vous le faites aussi là.

La pleine page n’a pas disparu : Ouvrir en pleine page dans la barre d’outils du panneau, ou un clic du milieu sur la carte.

Trois décisions qui font que ça marche

Le panneau n’est pas une fenêtre modale

L’implémentation évidente, c’est une boîte de dialogue : un voile, un piège à focus, un blocage du défilement. J’ai délibérément évité les trois.

Un voile ruinerait tout l’intérêt. Si la liste reste à l’écran, c’est pour que vous puissiez vous en servir : la faire défiler, glisser une carte dans une autre colonne, sélectionner un lot au lasso pendant qu’une note est ouverte. Une couche grisée qui avale les clics vous donne une image de votre liste, pas votre liste.

Le panneau n’est donc pas modal : pas de voile, pas de piège à focus, pas de blocage du défilement, et un clic à l’extérieur ne le ferme pas. C’est toujours vous qui le fermez : le ✕, Esc, le bouton retour du navigateur, ou un clic sur la bordure gauche du panneau.

Ce dernier point mérite qu’on s’y arrête. La bordure est déjà là pour élargir le panneau en la faisant glisser. Jusqu’ici, appuyer dessus sans bouger la souris ne faisait rien ; désormais, un clic dessus replie le panneau. Le même geste fonctionne sur la barre latérale et sur le panneau du chat IA, et la barre latérale a gagné au passage le raccourci ⌘\ pour l’afficher ou la masquer.

La note ouverte vit dans l’URL

Le panneau est piloté par un paramètre d’URL, /notes?peek=<id>, et non par l’état d’un composant.

C’est le genre de décision qui ressemble à du travail en plus et qui se rentabilise aussitôt. Le bouton retour du navigateur ferme le panneau, parce que fermer le panneau est une navigation. Recharger la page le rouvre. Le lien peut être partagé ou mis en favori. Trier, filtrer ou taper une recherche pendant qu’une note est ouverte la laisse ouverte, parce que ce ne sont que d’autres paramètres de la même URL.

Les cartes restent des liens

Chaque carte de note et chaque ligne de table reste un vrai <a href="/notes/...">. Seul un clic gauche simple est intercepté.

C’est cette seule décision qui fait que le clic du milieu, clic droit → ouvrir dans un nouvel onglet et « copier l’adresse du lien » fonctionnent encore sans une ligne de code. Une <div> avec un onClick les aurait tous cassés en silence, et personne n’aurait signalé de bug : les gens auraient simplement arrêté d’essayer.

Deux bugs qui méritent d’être racontés

Le garde-fou d’enregistrement qui se déclenchait à chaque frappe

Les notes s’enregistrent automatiquement, et un garde-fou intercepte la navigation tant qu’un enregistrement est en attente, pour que vous ne quittiez pas une note en pleine écriture.

Avec le panneau, ce garde-fou a soudain eu un rayon d’action bien plus large. La recherche de l’en-tête navigue à chaque frappe : chaque caractère est une nouvelle URL. Taper une recherche avec une note non enregistrée ouverte dans le panneau déclenchait donc le garde-fou à chaque caractère, faisait clignoter une fenêtre modale « Enregistrement de la note… » par-dessus la liste et forçait un enregistrement à chaque lettre.

La correction : le garde-fou ne bloque plus que les navigations qui cessent d’afficher cette note (la fermer, passer à une autre, quitter la route). Retrier la liste en dessous ne revient pas à quitter la note, donc rien ne se déclenche.

Une flèche d’infobulle a mangé la poignée de redimensionnement

La bordure de redimensionnement du panneau fait quatre pixels de large. Survolez-la et une infobulle explique qu’on peut la faire glisser pour redimensionner ou cliquer pour fermer.

Sauf que l’infobulle dessine une flèche, un petit SVG pivoté, et que les infobulles de Notez sont collées à leur déclencheur par défaut. La flèche tombait donc pile sur la bordure de quatre pixels. Survolez la bordure, puis appuyez : votre clic touchait la flèche, pas la poignée. Le panneau ne se redimensionnait pas et ne se fermait pas non plus.

Ce qui rend celui-ci instructif, c’est la façon dont je l’ai trouvé. Un test de bout en bout l’a détecté, et seulement parce qu’il pilote une vraie souris. Ma vérification manuelle précédente envoyait des événements synthétiques directement sur l’élément, ce qui contourne entièrement le hit-testing et annonce sans broncher que tout fonctionne. Seul un vrai pointeur demande quel élément se trouve sous le curseur.

document.elementFromPoint() sur la bordure renvoyait un <svg>, et toute l’histoire était là.

Là où ça ne s’applique pas

  • Sur téléphone, une note s’ouvre toujours en pleine page. Un tiroir plein écran n’est qu’une page avec un moins bon bouton retour.

  • Sur le tableau, suivante et précédente restent dans une seule colonne. Un tableau n’a pas d’ordre unique d’une colonne à l’autre, donc J et K parcourent la colonne de la carte ouverte.

  • Les liens dans une note — les pastilles [[, le graphe des connexions, les propriétés de relation — ouvrent toujours la pleine page. Suivre un lien, c’est aller ailleurs, pas passer à l’élément suivant d’une liste. Le panneau sert à parcourir une liste, pas à s’en éloigner.

Cette dernière distinction est la règle sur laquelle repose toute la fonctionnalité : les cartes de notes et les lignes de table s’ouvrent dans le panneau ; tous les autres chemins vers une note ouvrent la page. Une phrase, et vous pouvez prédire ce que fera n’importe quel clic.


Tous les détails dans Organiser les notes et la liste des raccourcis clavier.

À lire aussi