Group the two visibility switches, and put the drawing tools back where they belong

"Zeichnung" and "Randnotizen" are two halves of one question — how much of your
own work do you want to see right now — and they sat at opposite ends of the
toolbar, each beside the tool that made them. They are now one pair in one shape
at the right-hand end. Each still appears only once there is something of its
kind to hide, so the pair can be lopsided, which is honest.

The drawing tools had drifted past the pin controls as those were added, so
switching to Zeichnen made them appear somewhere other than where the eye
already was. They follow the button that turns them on again.

A separator no longer carries a ×. It sat a few pixels from the label you click
to rename, putting the gesture that tidies the list next to the one that destroys
part of it — so removal is a right-click behind a confirmation that says the
notes are not affected, which is how everything else in that list is acted on.

218 unit tests, 237 browser checks across eleven suites. The toolbar checks
compare measured positions rather than presence, since the complaint was about
where things were, not whether they existed.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

frontend/src/features/notes/NoteList.jsx

@@ -43,8 +43,13 @@ const MIDDLE_W = 132;
  *
  * Draggable like a note, because a divider that cannot move with what it
  * divides is worse than none.
+ *
+ * Removed by right-click rather than by a × on the row. The × sat a few pixels
+ * from the label you click to rename, so the gesture that tidies the list and
+ * the gesture that destroys part of it were neighbours — and right-click is
+ * already how everything else in this list is acted on.
  */
-function SeparatorRow({ T, separator, onRename, onRemove }) {
+function SeparatorRow({ T, separator, onRename, onContextMenu }) {
   const [editing, setEditing] = useState(false);
   const [draft, setDraft] = useState(separator.label);
 
@@ -56,6 +61,7 @@ function SeparatorRow({ T, separator, onRename, onRemove }) {
   return (
     <div
       data-separator={separator.id}
+      onContextMenu={(e) => onContextMenu(e, separator)}
       style={{
         display: "flex",
         alignItems: "center",
@@ -131,23 +137,6 @@ function SeparatorRow({ T, separator, onRename, onRemove }) {
         )}
       </div>
       <div style={{ height: 1, background: T.border, flex: 1, minWidth: 8 }} />
-      <button
-        onClick={() => onRemove(separator.id)}
-        title="Trenner entfernen"
-        aria-label="Remove separator"
-        style={{
-          border: "none",
-          background: "transparent",
-          color: T.faint,
-          cursor: "pointer",
-          fontSize: 13,
-          lineHeight: 1,
-          padding: "0 2px",
-          flexShrink: 0,
-        }}
-      >
-        ×
-      </button>
     </div>
   );
 }
@@ -249,7 +238,7 @@ export function NoteList({
   separators,
   onAddSeparator,
   onRenameSeparator,
-  onRemoveSeparator,
+  onSeparatorContextMenu,
   dnd,
   onToggleSidebar,
   onSelectNote,
@@ -489,7 +478,7 @@ export function NoteList({
                       T={T}
                       separator={entry.separator}
                       onRename={onRenameSeparator}
-                      onRemove={onRemoveSeparator}
+                      onContextMenu={onSeparatorContextMenu}
                     />
                   </div>
                 );