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.

components/ClientProviders.tsx

@@ -4,6 +4,7 @@ import { type ReactNode } from "react";
 import { usePathname } from "next/navigation";
 import { I18nProvider } from "@/lib/i18n";
 import { ThemeProvider } from "@/lib/theme";
+import { TimeRangeProvider } from "@/lib/time-range-context";
 import { Sidebar } from "@/components/Sidebar";
 
 export function ClientProviders({ children }: { children: ReactNode }) {
@@ -13,14 +14,16 @@ export function ClientProviders({ children }: { children: ReactNode }) {
   return (
     <ThemeProvider>
       <I18nProvider>
-        {isPortal ? (
-          <>{children}</>
-        ) : (
-          <>
-            <Sidebar />
-            <main className="ml-[220px] min-h-screen p-6 lg:p-8">{children}</main>
-          </>
-        )}
+        <TimeRangeProvider>
+          {isPortal ? (
+            <>{children}</>
+          ) : (
+            <>
+              <Sidebar />
+              <main className="ml-[220px] min-h-screen p-6 lg:p-8">{children}</main>
+            </>
+          )}
+        </TimeRangeProvider>
       </I18nProvider>
     </ThemeProvider>
   );

components/TimeRangeSelector.tsx

@@ -1,41 +1,156 @@
 "use client";
 
+import { useState, useRef, useEffect } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { Calendar } from "lucide-react";
 import { type TimeRange } from "@/lib/utils";
+import { useTimeRange } from "@/lib/time-range-context";
 import { useI18n } from "@/lib/i18n";
-import { motion } from "motion/react";
 
-export function TimeRangeSelector({
-  value,
-  onChange,
-}: {
-  value: TimeRange;
-  onChange: (v: TimeRange) => void;
-}) {
+export function TimeRangeSelector() {
   const { t } = useI18n();
-  const ranges: { label: string; value: TimeRange }[] = [
+  const { range, setRange, customStart, customEnd, setCustomStart, setCustomEnd } = useTimeRange();
+  const [showPopover, setShowPopover] = useState(false);
+  const [localStart, setLocalStart] = useState(customStart);
+  const [localEnd, setLocalEnd] = useState(customEnd);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Sync local state when context changes
+  useEffect(() => { setLocalStart(customStart); }, [customStart]);
+  useEffect(() => { setLocalEnd(customEnd); }, [customEnd]);
+
+  // Close popover on click outside
+  useEffect(() => {
+    if (!showPopover) return;
+    const handler = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setShowPopover(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [showPopover]);
+
+  const presets: { label: string; value: TimeRange }[] = [
     { label: t("time.today"), value: "today" },
     { label: t("time.7d"), value: "7d" },
     { label: t("time.30d"), value: "30d" },
     { label: t("time.all"), value: "all" },
   ];
 
+  function handlePreset(v: TimeRange) {
+    setRange(v);
+    setShowPopover(false);
+  }
+
+  function handleCustomClick() {
+    if (range === "custom" && showPopover) {
+      setShowPopover(false);
+    } else {
+      setRange("custom");
+      setShowPopover(true);
+    }
+  }
+
+  function handleConfirm() {
+    setCustomStart(localStart);
+    setCustomEnd(localEnd);
+    setShowPopover(false);
+  }
+
   return (
-    <div className="flex gap-1 rounded-lg p-1" style={{ background: "var(--row-hover)", border: "1px solid var(--surface-border)" }}>
-      {ranges.map((r) => (
-        <button key={r.value} onClick={() => onChange(r.value)}
-          className="relative px-3 py-1.5 text-xs font-medium rounded-md transition-colors"
-          style={{ color: value === r.value ? "var(--text-accent)" : "var(--text-muted)" }}
+    <div ref={containerRef} className="relative">
+      <div
+        className="flex gap-1 rounded-lg p-1"
+        style={{ background: "var(--row-hover)", border: "1px solid var(--surface-border)" }}
+      >
+        {presets.map((r) => (
+          <button
+            key={r.value}
+            onClick={() => handlePreset(r.value)}
+            className="relative px-3 py-1.5 text-xs font-medium rounded-md transition-colors"
+            style={{ color: range === r.value ? "var(--text-accent)" : "var(--text-muted)" }}
+          >
+            {range === r.value && (
+              <motion.div
+                layoutId="time-range-bg"
+                className="absolute inset-0 rounded-md"
+                style={{ background: "var(--btn-active-bg)", border: "1px solid var(--surface-border)" }}
+                transition={{ type: "spring", stiffness: 400, damping: 30 }}
+              />
+            )}
+            <span className="relative z-10">{r.label}</span>
+          </button>
+        ))}
+
+        {/* Custom button */}
+        <button
+          onClick={handleCustomClick}
+          className="relative px-3 py-1.5 text-xs font-medium rounded-md transition-colors flex items-center gap-1"
+          style={{ color: range === "custom" ? "var(--text-accent)" : "var(--text-muted)" }}
         >
-          {value === r.value && (
-            <motion.div layoutId="time-range-bg"
+          {range === "custom" && (
+            <motion.div
+              layoutId="time-range-bg"
               className="absolute inset-0 rounded-md"
               style={{ background: "var(--btn-active-bg)", border: "1px solid var(--surface-border)" }}
               transition={{ type: "spring", stiffness: 400, damping: 30 }}
             />
           )}
-          <span className="relative z-10">{r.label}</span>
+          <Calendar className="relative z-10 h-3 w-3" />
+          <span className="relative z-10">{t("time.custom")}</span>
         </button>
-      ))}
+      </div>
+
+      {/* Popover */}
+      <AnimatePresence>
+        {showPopover && (
+          <motion.div
+            ref={popoverRef}
+            initial={{ opacity: 0, y: -4, scale: 0.97 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: -4, scale: 0.97 }}
+            transition={{ duration: 0.15 }}
+            className="absolute right-0 top-full mt-2 z-50 rounded-lg p-4 space-y-3 min-w-[260px]"
+            style={{
+              background: "var(--surface-bg)",
+              border: "1px solid var(--surface-border)",
+              boxShadow: "0 8px 32px rgba(0,0,0,0.2)",
+              backdropFilter: "blur(12px)",
+            }}
+          >
+            <div className="space-y-2">
+              <label className="flex items-center gap-2 text-xs" style={{ color: "var(--text-muted)" }}>
+                {t("time.startDate")}
+              </label>
+              <input
+                type="date"
+                value={localStart}
+                onChange={(e) => setLocalStart(e.target.value)}
+                className="input-glass w-full rounded-md px-3 py-1.5 text-xs font-[family-name:var(--font-geist-mono)]"
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="flex items-center gap-2 text-xs" style={{ color: "var(--text-muted)" }}>
+                {t("time.endDate")}
+              </label>
+              <input
+                type="date"
+                value={localEnd}
+                onChange={(e) => setLocalEnd(e.target.value)}
+                className="input-glass w-full rounded-md px-3 py-1.5 text-xs font-[family-name:var(--font-geist-mono)]"
+              />
+            </div>
+            <button
+              onClick={handleConfirm}
+              className="btn-accent w-full rounded-md py-1.5 text-xs font-medium"
+            >
+              {t("time.confirm")}
+            </button>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 }