Drag the date range on the axis it is chosen from

The range could be turned on with a finger and not aimed with one. Its two
ends were typed as `YYYY-MM-DD` into 108px fields behind a soft keyboard, to
name days already drawn on the axis a thumb away; and the chip that seeds them
takes its span from the timeline's zoom and pan, which are a wheel and a middle
button. A touch screen has neither, so on Android the filter was a switch with
no aim.

The band is now on the timeline. Two ends with grips, dragged along the bars,
released to filter — the histogram was already how a period is found, and this
makes it how a period is stated. Both ends snap to whole days, which is what
the typed fields mean, what `show_range` reads back out, and a floor under a
range dragged shut. The fields stay for what dragging cannot do: name an exact
day, and say in words what the range is.

For that to work the axis had to stop following the range. Redrawn to the band,
it moved the ground under the very handles doing the narrowing, and there was
nothing outside the range left to widen back into.

While there: a fixed number of equal bins instead of calendar buckets. Between
one calendar unit and the next the bar count is free to wander by a factor of
twelve, so zooming in halved it two steps out of three — the same picture drawn
wider until it jumped back to fine. Equal bins also include the empty ones, so
a bar's position on the track and the date under it are finally the same
quantity; before, a library with gaps drew a February six months wide and the
marker, the band and a click all pointed somewhere else. The count is a
setting, 32 or 64, because the right answer is a question about the screen.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

ui/dr-ui/ui/settings.slint

@@ -111,6 +111,16 @@ export component SettingsPage inherits Rectangle {
     callback keep-opened-toggled(bool);
     callback copy-includes-framing-toggled(bool);
 
+    // --- library -------------------------------------------------------
+    /// TRACES: FR-CAT-6
+    /// The bar counts the capture-time axis can be cut into, and which one is
+    /// chosen. Labels from Rust, like every other choice row: the numbers are
+    /// the ones the settings record offers, and a list written again here
+    /// would be a second place for them to go stale.
+    in property <[string]> timeline-bar-labels;
+    in property <int> timeline-bars-selected: 0;
+    callback timeline-bars-picked(int);
+
     // --- export --------------------------------------------------------
     in property <[string]> format-labels;
     in property <int> format-selected: 0;
@@ -472,6 +482,34 @@ export component SettingsPage inherits Rectangle {
                     }
                 }
 
+                // --- library ---------------------------------------------
+                Rectangle {
+                    width: content.column;
+                    height: library-panel.preferred-height;
+
+                    library-panel := Panel {
+                        width: 100%;
+                        spacing: Theme.gap;
+
+                        PanelHeading { text: "LIBRARY"; }
+
+                        Segmented {
+                            label: "Timeline detail";
+                            // Says what the choice is *about*, since neither
+                            // number means anything on its own: it is how
+                            // finely the capture-time axis beside the grid is
+                            // divided, and the honest trade is precision
+                            // against being able to hit a bar with a thumb.
+                            hint: "bars on the capture-time axis — fewer are "
+                                  + "easier to hit with a finger, more show "
+                                  + "finer structure";
+                            options: root.timeline-bar-labels;
+                            selected: root.timeline-bars-selected;
+                            picked(i) => { root.timeline-bars-picked(i); }
+                        }
+                    }
+                }
+
                 // --- export ----------------------------------------------
                 Rectangle {
                     width: content.column;