Speed up recognition filters and align database UI

app/download/page.jsx

@@ -1,17 +1,23 @@
 import DashboardLayout from "@/components/layout/MainLayout";
 import TitleNavbar from "@/components/layout/TitleNav";
 import PlateExportForm from "@/components/PlateExportForm";
-import { getCameraNames, getPlateViewSettings, getTags } from "@/app/actions";
+import {
+  getCameraNames,
+  getPlateViewSettings,
+  getTags,
+  getTimeFormat,
+} from "@/app/actions";
 import { requirePagePermission } from "@/lib/page-permission.mjs";
 
 export const dynamic = "force-dynamic";
 
 export default async function DownloadPage() {
   await requirePagePermission("export.create");
-  const [tagsResult, camerasResult, settings] = await Promise.all([
+  const [tagsResult, camerasResult, settings, timeFormat] = await Promise.all([
     getTags(),
     getCameraNames(),
     getPlateViewSettings(),
+    getTimeFormat(),
   ]);
 
   return (
@@ -21,6 +27,7 @@ export default async function DownloadPage() {
           tags={tagsResult.success ? tagsResult.data : []}
           cameras={camerasResult.success ? camerasResult.data : []}
           matchingSettings={settings.plateMatching}
+          timeFormat={timeFormat}
         />
       </TitleNavbar>
     </DashboardLayout>

components/FilterHourRange.jsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { Clock } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+function hourLabel(hour, timeFormat) {
+  if (timeFormat === 24) return `${String(hour).padStart(2, "0")}:00`;
+  const suffix = hour >= 12 ? "PM" : "AM";
+  return `${hour % 12 || 12}${suffix}`;
+}
+
+export default function FilterHourRange({
+  value = null,
+  onChange,
+  timeFormat = 12,
+  triggerClassName = "",
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [draft, setDraft] = useState({ from: null, to: null });
+  const valueFrom = Number.isInteger(value?.from) ? value.from : null;
+  const valueTo = Number.isInteger(value?.to) ? value.to : null;
+  const hours = useMemo(
+    () =>
+      Array.from({ length: 24 }, (_, hour) => ({
+        value: hour,
+        label: hourLabel(hour, timeFormat),
+      })),
+    [timeFormat]
+  );
+
+  useEffect(() => {
+    setDraft({ from: valueFrom, to: valueTo });
+  }, [valueFrom, valueTo]);
+
+  const hasRange = valueFrom !== null && valueTo !== null;
+  const label = hasRange
+    ? `${hourLabel(valueFrom, timeFormat)} - ${hourLabel(valueTo, timeFormat)}`
+    : "Hour Range";
+
+  const clear = () => {
+    setDraft({ from: null, to: null });
+    onChange(null);
+    setIsOpen(false);
+  };
+
+  const apply = () => {
+    if (!Number.isInteger(draft.from) || !Number.isInteger(draft.to)) return;
+    onChange({ from: draft.from, to: draft.to });
+    setIsOpen(false);
+  };
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          className={`h-9 w-full justify-start gap-2 dark:bg-[#161618] ${triggerClassName}`}
+        >
+          <Clock className="h-4 w-4" />
+          {label}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[300px] p-4" align="start">
+        <div className="space-y-4">
+          <h4 className="font-medium">Filter by Hour</h4>
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label>From</Label>
+              <Select
+                value={draft.from === null ? undefined : String(draft.from)}
+                onValueChange={(next) =>
+                  setDraft((current) => ({ ...current, from: Number(next) }))
+                }
+              >
+                <SelectTrigger><SelectValue placeholder="Start hour" /></SelectTrigger>
+                <SelectContent>
+                  {hours.map((hour) => (
+                    <SelectItem key={hour.value} value={String(hour.value)}>
+                      {hour.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label>To</Label>
+              <Select
+                value={draft.to === null ? undefined : String(draft.to)}
+                onValueChange={(next) =>
+                  setDraft((current) => ({ ...current, to: Number(next) }))
+                }
+              >
+                <SelectTrigger><SelectValue placeholder="End hour" /></SelectTrigger>
+                <SelectContent>
+                  {hours.map((hour) => (
+                    <SelectItem key={hour.value} value={String(hour.value)}>
+                      {hour.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <div className="flex gap-2">
+            <Button variant="outline" className="flex-1" onClick={clear}>
+              Clear
+            </Button>
+            <Button
+              className="flex-1"
+              onClick={apply}
+              disabled={!Number.isInteger(draft.from) || !Number.isInteger(draft.to)}
+            >
+              Apply
+            </Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

components/LiveFeedDateRangeFilter.jsx

@@ -22,6 +22,7 @@ export default function LiveFeedDateRangeFilter({
   onInteractionChange = () => {},
   embedded = false,
   triggerClassName = "",
+  mobileVisible = false,
 }) {
   const fromMs = value?.from?.getTime?.() ?? null;
   const toMs = value?.to?.getTime?.() ?? null;
@@ -67,7 +68,7 @@ export default function LiveFeedDateRangeFilter({
       <PopoverTrigger asChild>
         <Button
           variant="outline"
-          className={`hidden gap-2 dark:bg-[#161618] sm:flex ${triggerClassName}`}
+          className={`${mobileVisible ? "flex" : "hidden sm:flex"} gap-2 dark:bg-[#161618] ${triggerClassName}`}
         >
           <CalendarDays className="h-4 w-4" />
           {value?.from ? (