Fix blocklist-import bantime, unify filter bar, and improve config navigation

frontend/src/pages/HistoryPage.tsx

@@ -19,7 +19,6 @@ import {
   Input,
   MessageBar,
   MessageBarBody,
-  Select,
   Spinner,
   Table,
   TableBody,
@@ -30,8 +29,6 @@ import {
   TableHeaderCell,
   TableRow,
   Text,
-  Toolbar,
-  ToolbarButton,
   createTableColumn,
   makeStyles,
   tokens,
@@ -42,8 +39,10 @@ import {
   ChevronLeftRegular,
   ChevronRightRegular,
 } from "@fluentui/react-icons";
+import { DashboardFilterBar } from "../components/DashboardFilterBar";
 import { useHistory, useIpHistory } from "../hooks/useHistory";
 import type { HistoryBanItem, HistoryQuery, TimeRange } from "../types/history";
+import type { BanOriginFilter } from "../types/ban";
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -54,13 +53,6 @@ const HIGH_BAN_THRESHOLD = 5;
 
 const PAGE_SIZE = 50;
 
-const TIME_RANGE_OPTIONS: { label: string; value: TimeRange }[] = [
-  { label: "Last 24 hours", value: "24h" },
-  { label: "Last 7 days", value: "7d" },
-  { label: "Last 30 days", value: "30d" },
-  { label: "Last 365 days", value: "365d" },
-];
-
 // ---------------------------------------------------------------------------
 // Styles
 // ---------------------------------------------------------------------------
@@ -381,7 +373,8 @@ export function HistoryPage(): React.JSX.Element {
   const styles = useStyles();
 
   // Filter state
-  const [range, setRange] = useState<TimeRange | undefined>(undefined);
+  const [range, setRange] = useState<TimeRange>("24h");
+  const [originFilter, setOriginFilter] = useState<BanOriginFilter>("all");
   const [jailFilter, setJailFilter] = useState("");
   const [ipFilter, setIpFilter] = useState("");
   const [appliedQuery, setAppliedQuery] = useState<HistoryQuery>({
@@ -397,11 +390,12 @@ export function HistoryPage(): React.JSX.Element {
   const applyFilters = useCallback((): void => {
     setAppliedQuery({
       range: range,
+      origin: originFilter !== "all" ? originFilter : undefined,
       jail: jailFilter.trim() || undefined,
       ip: ipFilter.trim() || undefined,
       page_size: PAGE_SIZE,
     });
-  }, [range, jailFilter, ipFilter]);
+  }, [range, originFilter, jailFilter, ipFilter]);
 
   const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
 
@@ -452,24 +446,16 @@ export function HistoryPage(): React.JSX.Element {
       {/* Filter bar                                                        */}
       {/* ---------------------------------------------------------------- */}
       <div className={styles.filterRow}>
-        <div className={styles.filterLabel}>
-          <Text size={200}>Time range</Text>
-          <Select
-            aria-label="Time range"
-            value={range ?? ""}
-            onChange={(_ev, data): void => {
-              setRange(data.value === "" ? undefined : (data.value as TimeRange));
-            }}
-            size="small"
-          >
-            <option value="">All time</option>
-            {TIME_RANGE_OPTIONS.map((o) => (
-              <option key={o.value} value={o.value}>
-                {o.label}
-              </option>
-            ))}
-          </Select>
-        </div>
+        <DashboardFilterBar
+          timeRange={range}
+          onTimeRangeChange={(value) => {
+            setRange(value);
+          }}
+          originFilter={originFilter}
+          onOriginFilterChange={(value) => {
+            setOriginFilter(value);
+          }}
+        />
 
         <div className={styles.filterLabel}>
           <Text size={200}>Jail</Text>
@@ -506,7 +492,8 @@ export function HistoryPage(): React.JSX.Element {
           appearance="subtle"
           size="small"
           onClick={(): void => {
-            setRange(undefined);
+            setRange("24h");
+            setOriginFilter("all");
             setJailFilter("");
             setIpFilter("");
             setAppliedQuery({ page_size: PAGE_SIZE });