feat: global time range context with custom date picker

Lift time range state into a shared React context so the selected
range persists across page navigation and browser refreshes
(localStorage). Add a "Custom" option with a popover date picker
that lets users specify arbitrary start/end dates. All preset end
times now use endOf("day") (23:59:59) instead of the current moment.

app/detail/[...slug]/page.tsx

@@ -8,7 +8,8 @@ import Link from "next/link";
 import { StatsCard } from "@/components/StatsCard";
 import { TimeRangeSelector } from "@/components/TimeRangeSelector";
 import { TrendChart } from "@/components/charts/TrendChart";
-import { type TimeRange, getTimeRange, buildQuery, formatNumber, formatTokens } from "@/lib/utils";
+import { buildQuery, formatNumber, formatTokens } from "@/lib/utils";
+import { useTimeRange } from "@/lib/time-range-context";
 import { useI18n } from "@/lib/i18n";
 
 interface DetailData {
@@ -27,14 +28,14 @@ export default function DetailPage() {
   const id = segments[1] || "";
   const decodedId = decodeURIComponent(id);
 
-  const [range, setRange] = useState<TimeRange>("30d");
+  const { getEffectiveRange } = useTimeRange();
   const [data, setData] = useState<DetailData | null>(null);
   const [trends, setTrends] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
 
   const fetchData = useCallback(async () => {
     setLoading(true);
-    const { start, end } = getTimeRange(range);
+    const { start, end } = getEffectiveRange();
     const tp = { start, end };
     const [detail, tr] = await Promise.all([
       fetch(buildQuery(`/api/detail/${type}/${encodeURIComponent(decodedId)}`, tp)).then(r => r.json()),
@@ -45,7 +46,7 @@ export default function DetailPage() {
       })).then(r => r.json()),
     ]);
     setData(detail); setTrends(tr); setLoading(false);
-  }, [range, type, decodedId]);
+  }, [type, decodedId, getEffectiveRange]);
 
   useEffect(() => { fetchData(); }, [fetchData]);
 
@@ -66,7 +67,7 @@ export default function DetailPage() {
             <h1 className="text-2xl font-bold" style={{ color: "var(--text-primary)" }}>{title}</h1>
           </div>
         </motion.div>
-        <TimeRangeSelector value={range} onChange={setRange} />
+        <TimeRangeSelector />
       </div>
 
       {loading ? (