Let the sidebar be resized by dragging its edge

The sidebar's right edge is now a splitter, like the one between the
message list and the reading pane: drag it between 240 and 480px, move it
with the arrow keys, double-click to put it back. The width is a device
setting, and stays null until someone drags, so a width set in the
reader's own CSS through --sidebar-w is kept until they choose otherwise.
Hidden on a phone, where the sidebar is a drawer, and while collapsed.

Arrow keys on either splitter moved the pane and never saved it: the
keyboard path called onResize without onEnd. It ends each key press now,
and both views keep the in-progress size in a ref as well as state, so
the end reads the value set in the same tick.

The message-list splitter's accessible name was an untranslated literal.
It goes through translate() now, and it and the sidebar's new name are in
all nine catalogues.

Closes #345

web/src/store/settings.ts

@@ -256,6 +256,13 @@ export interface Settings {
   listPaneWidth: number;
   /** Height (px) of the message list when the reading pane is below. */
   listPaneHeight: number;
+  /**
+   * Width (px) of the sidebar, dragged by its edge (#345). Null until someone
+   * drags it, and null again after a double-click resets it -- which leaves the
+   * width to the stylesheet's `--sidebar-w`, so a reader who already widens the
+   * sidebar with their own CSS keeps what they had until they choose otherwise.
+   */
+  sidebarWidth: number | null;
   /** Outlook-style colour categories for calendar events. */
   eventCategories: Array<{ name: string; color: string }>;
   /** Default sending identity per account (JMAP has no such flag). */
@@ -370,6 +377,7 @@ export const DEFAULT_SETTINGS: Settings = {
   sendAndArchive: false,
   listPaneWidth: 520,
   listPaneHeight: 340,
+  sidebarWidth: null,
   eventCategories: [
     { name: "Important", color: "#dc2626" },
     { name: "Work", color: "#2563eb" },
@@ -400,6 +408,7 @@ export const DEVICE_KEYS: ReadonlySet<keyof Settings> = new Set<keyof Settings>(
   "notificationSound",
   "listPaneWidth",
   "listPaneHeight",
+  "sidebarWidth",
 ]);
 
 /** The part of the settings that is written to the account's settings file. */