feat: unify chart range controls

frontend/src/pages/service-tabs/QbittorrentTab.tsx

@@ -1,6 +1,7 @@
 import { Activity, Clock, Play, RefreshCw, TriangleAlert } from "lucide-react";
 import { useState } from "react";
 import { LineSeriesChart } from "../../components/LineSeriesChart";
+import { chartRangesThrough } from "../../components/chartRanges";
 import {
 	useRunSchedulerAction,
 	useSchedulerRuns,
@@ -12,23 +13,8 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
 import { Skeleton } from "@/components/ui/skeleton";
 
-const WINDOWS = [
-	{ value: 900, label: "15 minutes" },
-	{ value: 1800, label: "30 minutes" },
-	{ value: 3600, label: "1 hour" },
-	{ value: 21600, label: "6 hours" },
-	{ value: 86400, label: "24 hours" },
-];
-
 function formatTimestamp(value: number | null): string {
 	return value ? new Date(value * 1000).toLocaleString() : "Never";
 }
@@ -111,32 +97,24 @@ export function QbittorrentTab({ instance }: { instance: ServiceInstance }) {
 			)}
 
 			<Card>
-				<CardHeader className="flex flex-row items-center justify-between space-y-0">
+				<CardHeader>
 					<CardTitle className="flex items-center gap-2">
 						<Activity className="h-4 w-4" />
 						Speed history
 					</CardTitle>
-					<Select
-						value={String(windowSeconds)}
-						onValueChange={(value) => setWindowSeconds(Number(value))}
-					>
-						<SelectTrigger className="w-[150px]" size="sm">
-							<SelectValue />
-						</SelectTrigger>
-						<SelectContent>
-							{WINDOWS.map((window) => (
-								<SelectItem key={window.value} value={String(window.value)}>
-									{window.label}
-								</SelectItem>
-							))}
-						</SelectContent>
-					</Select>
 				</CardHeader>
 				<CardContent>
 					{samples.isLoading ? (
 						<Skeleton className="h-[300px] w-full" />
 					) : (
-						<LineSeriesChart series={chartSeries} unit="bytes" height={300} />
+						<LineSeriesChart
+							series={chartSeries}
+							unit="bytes"
+							height={300}
+							rangeOptions={chartRangesThrough(86400)}
+							rangeSeconds={windowSeconds}
+							onRangeChange={setWindowSeconds}
+						/>
 					)}
 				</CardContent>
 			</Card>