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

frontend/src/pages/MapPage.tsx

@@ -12,7 +12,6 @@ import {
   Button,
   MessageBar,
   MessageBarBody,
-  Select,
   Spinner,
   Table,
   TableBody,
@@ -22,19 +21,16 @@ import {
   TableHeaderCell,
   TableRow,
   Text,
-  Toolbar,
-  ToolbarButton,
-  Tooltip,
   makeStyles,
   tokens,
 } from "@fluentui/react-components";
 import { ArrowCounterclockwiseRegular, DismissRegular } from "@fluentui/react-icons";
+import { DashboardFilterBar } from "../components/DashboardFilterBar";
 import { WorldMap } from "../components/WorldMap";
 import { useMapData } from "../hooks/useMapData";
 import { fetchMapColorThresholds } from "../api/config";
 import type { TimeRange } from "../types/map";
 import type { BanOriginFilter } from "../types/ban";
-import { BAN_ORIGIN_FILTER_LABELS } from "../types/ban";
 
 // ---------------------------------------------------------------------------
 // Styles
@@ -56,15 +52,6 @@ const useStyles = makeStyles({
     flexWrap: "wrap",
     gap: tokens.spacingHorizontalM,
   },
-  filterBar: {
-    display: "flex",
-    alignItems: "center",
-    gap: tokens.spacingHorizontalM,
-    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`,
-    background: tokens.colorNeutralBackground3,
-    borderRadius: tokens.borderRadiusMedium,
-    border: `1px solid ${tokens.colorNeutralStroke2}`,
-  },
   tableWrapper: {
     overflow: "auto",
     maxHeight: "420px",
@@ -73,17 +60,6 @@ const useStyles = makeStyles({
   },
 });
 
-// ---------------------------------------------------------------------------
-// Time-range options
-// ---------------------------------------------------------------------------
-
-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" },
-];
-
 // ---------------------------------------------------------------------------
 // MapPage
 // ---------------------------------------------------------------------------
@@ -136,41 +112,20 @@ export function MapPage(): React.JSX.Element {
           World Map
         </Text>
 
-        <Toolbar size="small">
-          <Select
-            aria-label="Time range"
-            value={range}
-            onChange={(_ev, data): void => {
-              setRange(data.value as TimeRange);
+        <div style={{ display: "flex", alignItems: "center", gap: tokens.spacingHorizontalM, flexWrap: "wrap" }}>
+          <DashboardFilterBar
+            timeRange={range}
+            onTimeRangeChange={(value) => {
+              setRange(value);
               setSelectedCountry(null);
             }}
-            size="small"
-          >
-            {TIME_RANGE_OPTIONS.map((o) => (
-              <option key={o.value} value={o.value}>
-                {o.label}
-              </option>
-            ))}
-          </Select>
-
-          {/* Origin filter */}
-          <Select
-            aria-label="Origin filter"
-            value={originFilter}
-            onChange={(_ev, data): void => {
-              setOriginFilter(data.value as BanOriginFilter);
+            originFilter={originFilter}
+            onOriginFilterChange={(value) => {
+              setOriginFilter(value);
               setSelectedCountry(null);
             }}
-            size="small"
-          >
-            {(["all", "blocklist", "selfblock"] as BanOriginFilter[]).map((f) => (
-              <option key={f} value={f}>
-                {BAN_ORIGIN_FILTER_LABELS[f]}
-              </option>
-            ))}
-          </Select>
-
-          <ToolbarButton
+          />
+          <Button
             icon={<ArrowCounterclockwiseRegular />}
             onClick={(): void => {
               refresh();
@@ -178,7 +133,7 @@ export function MapPage(): React.JSX.Element {
             disabled={loading}
             title="Refresh"
           />
-        </Toolbar>
+        </div>
       </div>
 
       {/* ---------------------------------------------------------------- */}