Point the range picker at the shared segmented control

RangePicker carried a byte-for-byte copy of ui/segmented.tsx's markup; it
now renders that component instead.

The dashboard's own segmented widget stays where it is: it is not a copy
but a look-aware control, drawn per look in
Dashboard/ui/{fluksio,glass,material}/Controls.tsx over the shared
useSegmented behaviour. Note that in segmented.tsx in place of the stale
size-prop plan.

frontend/src/components/ui/segmented.tsx

@@ -1,6 +1,5 @@
 // The thumb's transition lives beside the dashboard's own widgets, and CSS is
-// chunked per entry — so the rule is pulled in wherever this control is used,
-// or two copies of one shape would move differently.
+// chunked per entry — so the rule is pulled in wherever this control is used.
 import "@/components/Dashboard/dashboard.css"
 import { cn } from "@/lib/utils"
 
@@ -9,9 +8,11 @@ import { cn } from "@/lib/utils"
  * transparent segments, and `bg-accent` held by a thumb that slides rather than
  * a fill that jumps from cell to cell (root DESIGN-GUIDELINES.md).
  *
- * ponytail: sized for editor chrome — `w-fit`, `text-xs`, a mouse-sized target.
- * The widget-side copy in `Dashboard/widgets.tsx` is a full-width pill with a
- * 44px touch target, so pointing that one here needs a size prop first.
+ * App-side chrome only — `w-fit`, `text-xs`, a mouse-sized target. The
+ * dashboard's own segmented widget is not this component and never will be:
+ * it is drawn per look by `Dashboard/ui/{fluksio,glass,material}/Controls.tsx`
+ * over the shared `useSegmented` behaviour, as a full-width pill with a 44px
+ * touch target. Folding the two together would flatten the three looks.
  */
 export function Segmented({
   value,