Make develop's Help a "?" beside Settings, so Settings fits at 1600

Adding a labelled Help button to develop's top bar made the strip about
100 pixels wider than a 1600-pixel window. The strip scrolls, so nothing
became unreachable, but Settings was off the right-hand end until the
bar was dragged.

Help is now a square IconButton with a drawn question mark (a new "help"
icon, drawn rather than typed for the reason icons.slint gives about
Android's fonts), and screen readers still hear it as "Help". That saves
60 pixels, which was not enough alone: the strip had fit with 3 to spare
before. The rest comes from the spacing. Controls that belong together
now sit in groups at gap-sm with gap between groups: Pick and Reject,
Undo and Redo, Copy, Paste and Presets, and "?" and Settings. The empty
export-status caption no longer takes a slot and two spacings while it
has nothing to say. At 1600 wide with the panel open the whole bar now
shows, Settings included.

The grid's header keeps its worded Help button; it has room for it.
The develop "Open this list" gesture now names the "?" button, and the
gesture book is regenerated from it.

docs/gestures.md

@@ -53,8 +53,8 @@ A model's mask stops inside a shoulder and leaks into the hair, and no single ed
 
 ### Open this list
 
-- **Touch** — Press Help in the top bar, and Done to put it away
+- **Touch** — Press "?" in the top bar, beside Settings, and Done to put it away
-- **Pointer** — Press Help in the top bar, and Done to put it away
+- **Pointer** — Press "?" in the top bar, beside Settings, and Done to put it away
 - **Keyboard** — `F1`; the key that closes any sheet puts it away
 
 Most of the keys are develop's, and a reference that could only be opened from the grid had to be looked up before opening the photograph they were wanted for.

ui/dr-ui/src/gesture_book.rs

@@ -59,8 +59,8 @@ pub const GESTURES: &[Gesture] = &[
     Gesture {
         title: "Open this list",
         section: "Develop",
-        touch: "Press Help in the top bar, and Done to put it away",
+        touch: "Press \"?\" in the top bar, beside Settings, and Done to put it away",
-        pointer: "Press Help in the top bar, and Done to put it away",
+        pointer: "Press \"?\" in the top bar, beside Settings, and Done to put it away",
         keys: "F1; the key that closes any sheet puts it away",
         manual: "",
     },

ui/dr-ui/ui/app.slint

@@ -2307,10 +2307,10 @@ in property <bool> panel-visible: true;
                             }
                             // GESTURE: Open this list
                             //   where:   Develop
-                            //   touch:   Press Help in the top bar, and Done to
+                            //   touch:   Press "?" in the top bar, beside
-                            //            put it away
+                            //            Settings, and Done to put it away
-                            //   pointer: Press Help in the top bar, and Done to
+                            //   pointer: Press "?" in the top bar, beside
-                            //            put it away
+                            //            Settings, and Done to put it away
                             //   keys:    `F1`; the key that closes any sheet
                             //            puts it away
                             //   why:     Most of the keys are develop's, and a

ui/dr-ui/ui/develop.slint

@@ -10,7 +10,7 @@
 import { Theme } from "theme.slint";
 import { Develop } from "session.slint";
 import { Transfer } from "adjust.slint";
-import { Button, PanelHeading, Label, Value, Caption, Panel } from "widgets.slint";
+import { Button, IconButton, PanelHeading, Label, Value, Caption, Panel } from "widgets.slint";
 import { Labels, LabelMark, LabelPicker } from "labels.slint";
 import { StarStrip } from "library.slint";
 
@@ -99,6 +99,11 @@ export component StatusBar inherits Rectangle {
         viewport-height: self.height;
         viewport-width: max(self.width, strip.preferred-width);
 
+    // Related controls sit closer together than unrelated ones: Pick and
+    // Reject, Undo and Redo, Copy, Paste and Presets, Help and Settings are
+    // each a group at `gap-sm`, with `gap` between groups. It reads as the
+    // pairs it is, and it is also what keeps Settings on screen at 1600
+    // pixels wide once Help joined the strip.
     strip := HorizontalLayout {
         width: parent.viewport-width;
         height: parent.viewport-height;
@@ -175,6 +180,9 @@ export component StatusBar inherits Rectangle {
             rate(n) => { root.rated(n); }
         }
 
+        HorizontalLayout {
+            spacing: Theme.gap-sm;
+
             // Pressed again, a flag comes off: two buttons that each toggle,
             // rather than a third for "none" that is only ever pressed to undo
             // one of the other two.
@@ -193,6 +201,7 @@ export component StatusBar inherits Rectangle {
                 y: (parent.height - self.height) / 2;
                 clicked => { root.flagged(root.flag == 2 ? 0 : 2); }
             }
+        }
 
         Rectangle { horizontal-stretch: 1; }
 
@@ -227,6 +236,9 @@ export component StatusBar inherits Rectangle {
         // mis-drag must not go away with it. Disabled rather than hidden, so
         // the pair keeps its place and the keyboard shortcut has something
         // visible to correspond to.
+        HorizontalLayout {
+            spacing: Theme.gap-sm;
+
             Button {
                 text: "Undo";
                 enabled: root.can-undo;
@@ -240,6 +252,7 @@ export component StatusBar inherits Rectangle {
                 y: (parent.height - self.height) / 2;
                 clicked => { root.redo(); }
             }
+        }
 
         // TRACES: FR-DEV-6
         // Copy and paste, in the strip beside undo for the reason undo is
@@ -251,6 +264,9 @@ export component StatusBar inherits Rectangle {
         // The paste button names what would be pasted — "3 adjustments", and
         // whether the crop is staying behind — because "Paste" alone asks the
         // user to remember what they copied.
+        HorizontalLayout {
+            spacing: Theme.gap-sm;
+
             Button {
                 text: "Copy";
                 enabled: Develop.enabled;
@@ -276,6 +292,7 @@ export component StatusBar inherits Rectangle {
                 y: (parent.height - self.height) / 2;
                 clicked => { Transfer.open-presets(); }
             }
+        }
 
         // Show or hide the develop column. On a tablet the panel is 280px of a
         // screen that is mostly photograph, and the whole point of opening an
@@ -289,7 +306,10 @@ export component StatusBar inherits Rectangle {
             clicked => { root.toggle-panel(); }
         }
 
-        Caption {
+        // Only while there is something to say. Empty, it still took a slot
+        // and the spacing either side of it, and this strip has no pixels to
+        // spare: at 1600 wide they are what kept Settings on screen.
+        if root.export-status != "": Caption {
             text: root.export-status;
             vertical-alignment: center;
             overflow: elide;
@@ -306,13 +326,20 @@ export component StatusBar inherits Rectangle {
             clicked => { root.export-image(); }
         }
 
+        HorizontalLayout {
+            spacing: Theme.gap-sm;
+
             // TRACES: FR-UI-4
             // The pointer and touch way to the reference F1 opens. Beside
-        // Settings, as in the library header, because it is about the
+            // Settings, as Help is in the library header, because it is about the
-        // application rather than about the photograph — and in the same
+            // application rather than about the photograph.
-        // place on both screens, so it is found where it was last seen.
+            //
-        Button {
+            // A square "?" rather than a word: this strip is already full at
-            text: "Help";
+            // 1600 pixels, and a labelled button pushed Settings off its end.
+            // Screen readers still hear "Help".
+            IconButton {
+                icon: "help";
+                label: "Help";
                 y: (parent.height - self.height) / 2;
                 clicked => { root.open-help(); }
             }
@@ -325,6 +352,7 @@ export component StatusBar inherits Rectangle {
                 y: (parent.height - self.height) / 2;
                 clicked => { root.open-settings(); }
             }
+        }
 
     }
     }

ui/dr-ui/ui/icons.slint

@@ -61,6 +61,7 @@ component Ink inherits Path {
 //   offline  offline-held
 //   photo  crop  mask  repair
 //   eye  eye-closed
+//   help
 export component Icon inherits Rectangle {
     in property <string> name;
     /// The single colour the whole drawing takes. Named `ink` rather than
@@ -363,6 +364,17 @@ export component Icon inherits Rectangle {
                 + "M 12 19.2 L 12 22 M 6.6 18 L 5 20.4 M 17.4 18 L 19 20.4";
     }
 
+    // TRACES: FR-UI-4
+    // Help: a question mark, drawn rather than typed for the reason at the
+    // top of this file. The dot is a zero-length stroke, which the round cap
+    // turns into a disc the weight of the hook above it.
+    if root.name == "help": Ink {
+        stroke: root.ink;
+        stroke-width: root.weight;
+        commands: "M 8.2 8.6 C 8.2 6.2 9.9 4.6 12.1 4.6 C 14.3 4.6 15.9 6.1 15.9 8.1 "
+                + "C 15.9 10.6 12.1 11.2 12.1 14.4 M 12.1 18.9 L 12.1 19";
+    }
+
     // TRACES: FR-DEV-8
     // A repair: two circles, one sampling into the other. That is literally
     // what a spot is here — a source and a destination, which is why its