Give the film list a scrollbar on the desktop

A list cut off at its edge looks, to a mouse, like a list that ends
there. The open film list shows ten rows of twenty-eight, and nothing
said there were more. The user asked for visible scrollbars on every
platform but Android.

ScrollBar (widgets.slint) is a vertical bar drawn over a Flickable's
right-hand edge. It shows the share on screen and the position, it can
be dragged by the thumb from wherever it was grabbed, a click on the
track moves a page toward the click, and the wheel over it scrolls. It
is the Flickable's sibling rather than a wrapper, bound to
`viewport-y <=> flick.viewport-y` and the two heights, so a scroller
keeps its own sizing. It is drawn over the content rather than beside
it, so the mandated column widths are not reduced. With nothing to
scroll it is not drawn and takes no input.

Whether to draw it is Scrolling.bars, which Rust sets from
dr_plat::is_touch_first(). That is the same function that puts the
develop groups in the rail, and it answers the same question: what is
the user pointing with? On Android, lists still scroll by flick only.
Placing the bar inside another scroller would put it back in that
scroller's arbitration. The film list can have one because it is now a
popup.

docs/gestures.md

@@ -5,7 +5,7 @@
 
 Every entry here is extracted from the comment beside the code that implements it, so this file cannot describe a gesture the application does not have. Add one by writing a `GESTURE:` block next to the implementation; there is nowhere else to write it.
 
-75 gestures, in 7 places.
+76 gestures, in 7 places.
 
 ## Develop
 
@@ -28,7 +28,7 @@ Sampling a neutral is the first move of the tonal pass — every colour judgemen
 
 The list is longer than it is tall, so a way to walk it that cannot be lost to the column's scrolling is part of it being reachable at all. Focus goes back to the photograph's keys when it closes.
 
-<sub>`ui/dr-ui/ui/adjust.slint:1465`</sub>
+<sub>`ui/dr-ui/ui/adjust.slint:1476`</sub>
 
 ### Magnify the photograph by any amount
 
@@ -39,7 +39,7 @@ The list is longer than it is tall, so a way to walk it that cannot be lost to t
 
 Anchored on the fingers' midpoint, and on the pointer, so the gesture reads as magnifying the picture rather than sliding it about. Double-tap is the way to an exact 1:1; this is the way to everything in between. Past 1:1 the pixels are shown as they are, square and unsmoothed; below it, filtered.
 
-<sub>`ui/dr-ui/ui/app.slint:1907`</sub>
+<sub>`ui/dr-ui/ui/app.slint:1908`</sub>
 
 ### Move a magnified photograph about
 
@@ -50,7 +50,7 @@ Anchored on the fingers' midpoint, and on the pointer, so the gesture reads as m
 
 Only once there is something outside the viewport to reach, which is why the cursor becomes a hand exactly then. The view is clamped to the frame: panning past the edge would show undefined area beside the photograph, and that reads as a rendering fault rather than as the end of the picture.
 
-<sub>`ui/dr-ui/ui/app.slint:2003`</sub>
+<sub>`ui/dr-ui/ui/app.slint:2004`</sub>
 
 ### Paint a mask by hand
 
@@ -60,7 +60,7 @@ Only once there is something outside the viewport to reach, which is why the cur
 
 A model's mask stops inside a shoulder and leaks into the hair, and no single edge control fixes two errors that go opposite ways. The whole stroke is one step in the history, so taking a mark back costs one press however long it took to make.
 
-<sub>`ui/dr-ui/ui/app.slint:2094`</sub>
+<sub>`ui/dr-ui/ui/app.slint:2095`</sub>
 
 ### Open this list
 
@@ -70,7 +70,7 @@ A model's mask stops inside a shoulder and leaks into the hair, and no single ed
 
 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.
 
-<sub>`ui/dr-ui/ui/app.slint:2320`</sub>
+<sub>`ui/dr-ui/ui/app.slint:2321`</sub>
 
 ### Take back the last change
 
@@ -81,7 +81,7 @@ Most of the keys are develop's, and a reference that could only be opened from t
 
 A whole drag is one step, so undo takes back a decision rather than a frame of a gesture. The list is there because arriving six steps back costs what arriving from one does.
 
-<sub>`ui/dr-ui/ui/app.slint:2350`</sub>
+<sub>`ui/dr-ui/ui/app.slint:2351`</sub>
 
 ### Do it again after taking it back
 
@@ -90,7 +90,7 @@ A whole drag is one step, so undo takes back a decision rather than a frame of a
 - **Keyboard** — `Ctrl+Shift+Z`, or `Ctrl+Y`
 - **See it** — [in the manual](manual/README.md#history-snapshots-presets)
 
-<sub>`ui/dr-ui/ui/app.slint:2364`</sub>
+<sub>`ui/dr-ui/ui/app.slint:2365`</sub>
 
 ### Remove a repair
 
@@ -98,7 +98,7 @@ A whole drag is one step, so undo takes back a decision rather than a frame of a
 - **Pointer** — Click it, then Delete Repair
 - **Keyboard** — `Delete` or `Backspace`, while repairing
 
-<sub>`ui/dr-ui/ui/app.slint:2384`</sub>
+<sub>`ui/dr-ui/ui/app.slint:2385`</sub>
 
 ### Copy the settings from this photograph
 
@@ -109,7 +109,7 @@ A whole drag is one step, so undo takes back a decision rather than a frame of a
 
 The button is the copy that has to work: a tablet has no modifier key to hold and no menu bar to hang the action from. The shortcut is an accelerator for a control that is on screen either way.
 
-<sub>`ui/dr-ui/ui/app.slint:2403`</sub>
+<sub>`ui/dr-ui/ui/app.slint:2404`</sub>
 
 ### Paste the settings onto this photograph
 
@@ -120,7 +120,7 @@ The button is the copy that has to work: a tablet has no modifier key to hold an
 
 The button names what would be pasted — "3 adjustments", and whether the crop is coming with it — which the shortcut cannot say. Both paste the same scope.
 
-<sub>`ui/dr-ui/ui/app.slint:2416`</sub>
+<sub>`ui/dr-ui/ui/app.slint:2417`</sub>
 
 ### Choose which kinds of edit a copy carries
 
@@ -131,7 +131,7 @@ The button names what would be pasted — "3 adjustments", and whether the crop
 
 Lightroom's Copy Settings. Pasting a look across a shoot usually means leaving each frame's crop and rotation alone, and that is a choice to make at the moment of copying.
 
-<sub>`ui/dr-ui/ui/app.slint:2434`</sub>
+<sub>`ui/dr-ui/ui/app.slint:2435`</sub>
 
 ### Export this photograph as the last one was
 
@@ -142,7 +142,7 @@ Lightroom's Copy Settings. Pasting a look across a shoot usually means leaving e
 
 Every export runs on the defaults in Settings, so "as the last one was" is what the button already does. The chord is Lightroom's and darktable's, kept so hands that learned it there need not learn it again.
 
-<sub>`ui/dr-ui/ui/app.slint:2459`</sub>
+<sub>`ui/dr-ui/ui/app.slint:2460`</sub>
 
 ### Choose how to export, then export
 
@@ -153,7 +153,7 @@ Every export runs on the defaults in Settings, so "as the last one was" is what
 
 The export sheet is the export defaults alone with an Export button. What is chosen there is kept, so it is also what the next Ctrl+Shift+E uses.
 
-<sub>`ui/dr-ui/ui/app.slint:2472`</sub>
+<sub>`ui/dr-ui/ui/app.slint:2473`</sub>
 
 ### Keep a crop that leaves a mask outside
 
@@ -161,7 +161,7 @@ The export sheet is the export defaults alone with an Export button. What is cho
 - **Pointer** — Press "Keep crop" on the notice, or "Undo crop" to take it back
 - **Keyboard** — `Enter` keeps it; `Ctrl+Z` takes the crop back, like any other step
 
-<sub>`ui/dr-ui/ui/app.slint:2537`</sub>
+<sub>`ui/dr-ui/ui/app.slint:2538`</sub>
 
 ### Go back to the grid
 
@@ -171,7 +171,7 @@ The export sheet is the export defaults alone with an Export button. What is cho
 
 Lightroom's key for the grid. Escape gets there too, but a step at a time — out of a mode, then out of a zoom — where this goes straight back.
 
-<sub>`ui/dr-ui/ui/app.slint:2554`</sub>
+<sub>`ui/dr-ui/ui/app.slint:2555`</sub>
 
 ### Nudge the control last moved
 
@@ -181,7 +181,7 @@ Lightroom's key for the grid. Escape gets there too, but a step at a time — ou
 
 Lightroom's keys for the selected slider. There is no focus ring on a slider here, so "selected" is the last one moved — the same control `R` puts back — which covers the framing sliders, perspective included, as well as the adjustments.
 
-<sub>`ui/dr-ui/ui/app.slint:2583`</sub>
+<sub>`ui/dr-ui/ui/app.slint:2584`</sub>
 
 ### Change which group of adjustments is on screen
 
@@ -192,7 +192,7 @@ Lightroom's keys for the selected slider. There is no focus ring on a slider her
 
 The groups are whatever the operation set declares itself to be about, so there are as many as the pipeline has and no key can be assigned to one of them by name. Stepping is the binding that survives a node being added.
 
-<sub>`ui/dr-ui/ui/app.slint:2611`</sub>
+<sub>`ui/dr-ui/ui/app.slint:2612`</sub>
 
 ### Look at the photograph at 1:1
 
@@ -203,7 +203,7 @@ The groups are whatever the operation set declares itself to be about, so there
 
 Noise reduction and capture sharpening are judgements about single pixels, and a fitted view averages several of the file's into each one on screen — so the frame looks softer than it is and the correction goes too far. The point and the magnification survive opening the next photograph, which is what makes checking the same eye across forty portraits forty keystrokes rather than forty pans. From 1:1 on the photograph is drawn as its own pixels, each a hard-edged square, rather than smoothed into a blur.
 
-<sub>`ui/dr-ui/ui/app.slint:2647`</sub>
+<sub>`ui/dr-ui/ui/app.slint:2648`</sub>
 
 ### Rate this photograph
 
@@ -211,7 +211,7 @@ Noise reduction and capture sharpening are judgements about single pixels, and a
 - **Pointer** — Click a star in the top bar
 - **Keyboard** — `0`–`5`
 
-<sub>`ui/dr-ui/ui/app.slint:2704`</sub>
+<sub>`ui/dr-ui/ui/app.slint:2705`</sub>
 
 ### Pick or reject this photograph
 
@@ -221,7 +221,7 @@ Noise reduction and capture sharpening are judgements about single pixels, and a
 
 The grid's keys, on the photograph that is open (FR-UI-5, 2026-09-19). Judging here does not move on to the next frame: that belongs to culling, and in develop the photograph in front of you is the one being worked on.
 
-<sub>`ui/dr-ui/ui/app.slint:2710`</sub>
+<sub>`ui/dr-ui/ui/app.slint:2711`</sub>
 
 ### Give this photograph a colour label
 
@@ -232,7 +232,7 @@ The grid's keys, on the photograph that is open (FR-UI-5, 2026-09-19). Judging h
 
 The grid's keys, on the photograph that is open, so labelling while stepping through a folder is one hand's work. The bar names the label in words beside its mark.
 
-<sub>`ui/dr-ui/ui/app.slint:2740`</sub>
+<sub>`ui/dr-ui/ui/app.slint:2741`</sub>
 
 ### Move to the next or previous photograph
 
@@ -243,7 +243,7 @@ The grid's keys, on the photograph that is open, so labelling while stepping thr
 
 The edit on screen is saved on the way out, so stepping through a folder is as much a departure as going back to the grid and loses nothing. A and D as well as the arrows, so the left hand steps along the roll while the right stays on the mouse.
 
-<sub>`ui/dr-ui/ui/app.slint:2765`</sub>
+<sub>`ui/dr-ui/ui/app.slint:2766`</sub>
 
 ### See the photograph before you edited it
 
@@ -254,7 +254,7 @@ The edit on screen is saved on the way out, so stepping through a folder is as m
 
 Held rather than toggled, and no split screen: a split halves the working image on the tablet the column was sized for, and the comparison photographers describe making is a flick back and forth. It takes no history step, so checking whether a frame is overcooked costs nothing to undo afterwards.
 
-<sub>`ui/dr-ui/ui/app.slint:2895`</sub>
+<sub>`ui/dr-ui/ui/app.slint:2896`</sub>
 
 ### Put one control back to its default
 
@@ -338,7 +338,7 @@ The question a correction raises is whether it did what it was for — whether t
 
 One key for "up one", innermost first: a question before the sheet under it, a sheet before the view, a view before the library. Nothing is left behind a dialogue that the key walked straight past.
 
-<sub>`ui/dr-ui/ui/app.slint:986`</sub>
+<sub>`ui/dr-ui/ui/app.slint:987`</sub>
 
 ### Do what a sheet offers
 
@@ -346,7 +346,15 @@ One key for "up one", innermost first: a question before the sheet under it, a s
 - **Pointer** — Press its button — Export, or Copy
 - **Keyboard** — `Enter`, on the export and copy sheets
 
-<sub>`ui/dr-ui/ui/app.slint:996`</sub>
+<sub>`ui/dr-ui/ui/app.slint:997`</sub>
+
+### Scroll by the scrollbar
+
+- **Pointer** — Drag the bar along the right-hand edge of a list, or click the track above or below it to move by a page
+
+A list cut off at its edge looks, to a mouse, like a list that ends there — the film stocks past the tenth read as deleted. The bar says there is more and where the view is in it, and it is the one way to scroll that needs neither a wheel nor a drag on the content, which may be a row that would take the click.
+
+<sub>`ui/dr-ui/ui/widgets.slint:1074`</sub>
 
 ## Collections sidebar
 

ui/dr-ui/src/gesture_book.rs

@@ -288,6 +288,14 @@ pub const GESTURES: &[Gesture] = &[
         keys: "Enter, on the export and copy sheets",
         manual: "",
     },
+    Gesture {
+        title: "Scroll by the scrollbar",
+        section: "Everywhere",
+        touch: "",
+        pointer: "Drag the bar along the right-hand edge of a list, or click the track above or below it to move by a page",
+        keys: "",
+        manual: "",
+    },
     Gesture {
         title: "Pick a collection up to rearrange the tree",
         section: "Collections sidebar",

ui/dr-ui/src/library_ui/grid.rs

@@ -229,6 +229,15 @@ pub fn wire<F>(
         .global::<Library>()
         .set_library_touched(cfg!(target_os = "android"));
 
+    // TRACES: FR-UI-1
+    // Scrollbars for a pointer, none for a finger: the same question, asked
+    // of the same function, that puts the develop groups in the rail. Set
+    // here, once, because every scroller that draws a bar reads it and none
+    // of them can change it.
+    window
+        .global::<crate::Scrolling>()
+        .set_bars(!dr_plat::is_touch_first());
+
     // TRACES: FR-UI-4
     // The gesture reference. Pushed once, here, rather than on demand: the
     // table is a compiled-in constant, so there is nothing to be fresh about

ui/dr-ui/ui/adjust.slint

@@ -10,7 +10,7 @@
 import { Theme } from "theme.slint";
 import { Develop } from "session.slint";
 import { Keys } from "keys.slint";
-import { PanelHeading, Label, Value, Caption, Button, IconButton, Swatch } from "widgets.slint";
+import { PanelHeading, Label, Value, Caption, Button, IconButton, Swatch, ScrollBar } from "widgets.slint";
 import { SliderTrack, ControlRow, CurveEditor, Segmented, ChoiceChip, ChipGrid, Check } from "controls.slint";
 
 // One parameter, flattened for Slint's model system.
@@ -1462,6 +1462,17 @@ export component AdjustPanel inherits Rectangle {
                             }
                         }
 
+                        // The one scroller the list has, so on a desktop it
+                        // wears the bar: ten rows of twenty-eight must say
+                        // there are more, or the list reads as ending there.
+                        ScrollBar {
+                            x: parent.width - self.width;
+                            y: 0px;
+                            viewport-y <=> film-flick.viewport-y;
+                            viewport-height: film-flick.viewport-height;
+                            visible-height: film-flick.height;
+                        }
+
                         // GESTURE: Choose a film stock from the keyboard
                         //   where:   Develop
                         //   touch:   Tap the Film row, flick the list, tap a stock

ui/dr-ui/ui/app.slint

@@ -9,7 +9,7 @@ import { LaunchScreen } from "launch.slint";
 import { IdentityScreen, IdentityPerson, IdentityFace } from "identity.slint";
 import { LibraryGrid, LibraryCell, TimelineBar, PhotoRoll, KeywordRow, PersonChip, Library } from "library.slint";
 import { GestureRow, GestureSheet } from "gestures.slint";
-import { Button, PanelHeading, Label, Value, Caption, Panel, EmptyState, ProgressBar, ActivityRow } from "widgets.slint";
+import { Button, PanelHeading, Label, Value, Caption, Panel, EmptyState, ProgressBar, ActivityRow, Scrolling } from "widgets.slint";
 import { CollectionsPanel, CollectionRow, Collections, OfflinePrompt, CollectionMenu,
          MembershipSheet, MembershipRow } from "collections.slint";
 import { HistogramPanel, HistogramView, Levels } from "histogram.slint";
@@ -38,6 +38,7 @@ export { Collections }
 export { Library }
 export { ExportOptions }
 export { Duplicates, DuplicateRow, DuplicateCopy }
+export { Scrolling }
 
 /// Which top-level screen is on display. Exactly one at a time — replacing
 /// the `show-launch` / `show-library` / `show-identity` booleans, with

ui/dr-ui/ui/widgets.slint

@@ -1056,3 +1056,128 @@ export component ListView {
         @children
     }
 }
+
+// TRACES: FR-UI-1
+// Whether this build draws scrollbars.
+//
+// Set once by Rust from `dr_plat::is_touch_first()` — the same answer that
+// puts the adjustment groups in the tool rail, and for the same reason: it
+// says what the user points with, which is the only thing a scrollbar is
+// about. A pointer needs one, to see that a list goes on past its edge, how
+// far, and where it is in it, and to get there without a wheel. A finger
+// does not: it flicks, and a thin bar along the edge of a tablet is a target
+// no finger hits on purpose and one a scrolling thumb hits by accident.
+export global Scrolling {
+    in property <bool> bars: true;
+}
+
+// GESTURE: Scroll by the scrollbar
+//   where:   Everywhere
+//   pointer: Drag the bar along the right-hand edge of a list, or click the
+//            track above or below it to move by a page
+//   why:     A list cut off at its edge looks, to a mouse, like a list that
+//            ends there — the film stocks past the tenth read as deleted.
+//            The bar says there is more and where the view is in it, and it
+//            is the one way to scroll that needs neither a wheel nor a drag
+//            on the content, which may be a row that would take the click.
+//
+// A vertical scrollbar for a `Flickable`, drawn over its right-hand edge.
+//
+// **A sibling of the Flickable, not a wrapper around it.** Every scroller in
+// this application has a note on why its viewport is spelled the way it is,
+// and a wrapper would have to re-expose all of it. The bar instead binds to
+// the Flickable the caller already has — `viewport-y <=> flick.viewport-y`
+// and the two heights — so the scroller keeps its sizing and gains a bar.
+// Put both in a plain `Rectangle` the Flickable fills, and place the bar at
+// its right edge: `x: parent.width - self.width; y: 0;`.
+//
+// **Over the content, not beside it.** Beside it would take its width from
+// every column it is added to, and some of those widths are mandated
+// (`panel-width` in `style.yaml`). Over it, it costs the strip it sits on,
+// and only while there is somewhere to scroll to: with nothing overflowing it
+// is not drawn and takes no input at all.
+//
+// **Not in a scroller that scrolls itself.** A bar inside another Flickable
+// is inside that Flickable's arbitration, and the outer one claims a vertical
+// drag before the bar sees the press — the reason the film list is a popup
+// and not a list inside the develop column.
+export component ScrollBar {
+    /// The Flickable's `viewport-y`, two-way: zero at the top, negative below.
+    in-out property <length> viewport-y;
+    /// The Flickable's `viewport-height`: how tall the content is.
+    in property <length> viewport-height;
+    /// The Flickable's own height: how much of the content is on screen.
+    in property <length> visible-height;
+
+    /// How far the content can move.
+    property <length> range: max(0px, root.viewport-height - root.visible-height);
+    property <bool> live: Scrolling.bars && root.range > 0.5px;
+    /// In proportion to the share on screen, and never too small to grab.
+    property <length> thumb-height:
+        min(root.height, max(24px, root.height * root.visible-height / max(1px, root.viewport-height)));
+    property <length> travel: max(1px, root.height - root.thumb-height);
+    property <length> thumb-y:
+        root.travel * clamp(-root.viewport-y / max(1px, root.range), 0, 1);
+    property <bool> lit: area.has-hover || area.pressed;
+
+    width: 10px;
+    height: root.visible-height;
+    visible: root.live;
+
+    function scroll-to(top: length) {
+        root.viewport-y = -clamp(top, 0px, root.range);
+    }
+
+    // The track, drawn only while the pointer is on it: at rest a scroller
+    // shows only its thumb, which is all the "there is more" it needs to say.
+    Rectangle {
+        background: root.lit ? Theme.hover : transparent;
+        border-radius: 3px;
+    }
+
+    Rectangle {
+        x: root.lit ? 2px : 4px;
+        y: root.thumb-y;
+        width: parent.width - self.x - 2px;
+        height: root.thumb-height;
+        border-radius: self.width / 2;
+        background: area.pressed ? Theme.ink : (area.has-hover ? Theme.ink-dim : Theme.rule);
+    }
+
+    area := TouchArea {
+        enabled: root.live;
+        /// Where on the thumb the press landed, so the thumb does not jump to
+        /// centre itself under the pointer when it is grabbed off-centre.
+        property <length> grip: 0px;
+        property <bool> on-thumb: false;
+
+        pointer-event(event) => {
+            if (event.button == PointerEventButton.left && event.kind == PointerEventKind.down) {
+                if (self.mouse-y >= root.thumb-y && self.mouse-y <= root.thumb-y + root.thumb-height) {
+                    self.on-thumb = true;
+                    self.grip = self.mouse-y - root.thumb-y;
+                } else {
+                    // The track: a page toward the click, as a desktop
+                    // scrollbar does. A page and not a jump to the point,
+                    // because a page keeps a line of what was on screen in
+                    // view, and a jump loses the reader's place.
+                    self.on-thumb = false;
+                    root.scroll-to(-root.viewport-y
+                        + (self.mouse-y < root.thumb-y ? -1 : 1) * root.visible-height * 0.9);
+                }
+            }
+        }
+        moved => {
+            if (self.pressed && self.on-thumb) {
+                root.scroll-to((self.mouse-y - self.grip) / root.travel * root.range);
+            }
+        }
+        // The wheel over the bar scrolls what it is the bar of. The bar is
+        // the Flickable's sibling rather than its child, so without this a
+        // wheel here would reach nothing.
+        scroll-event(event) => {
+            root.scroll-to(-root.viewport-y - event.delta-y);
+            accept
+        }
+    }
+}