fix: use custom province dropdown

components/settings/settings-page.tsx

@@ -16,7 +16,6 @@ import { decodeBase64UrlKey, deletePushSubscription, fetchVapidPublicKey, savePu
 import { formatProvinceName, getProvinceForSelection, PROVINCES } from "@/lib/provinces";
 import { useWeatherStore } from "@/lib/store";
 import { TEMPERATURE_UNITS, WIND_SPEED_UNITS } from "@/lib/weather-utils";
-import type { Province } from "@/types/province";
 import type { TemperatureUnit, WindSpeedUnit } from "@/types/units";
 
 type NotificationSupportStatus = "checking" | "unconfigured" | "unsupported" | "needs-install" | "default" | "denied" | "granted";
@@ -120,6 +119,7 @@ export function SettingsPage() {
   const [isSavingSubscription, setIsSavingSubscription] = useState(false);
   const [isSendingTestNotification, setIsSendingTestNotification] = useState(false);
   const [notificationMessage, setNotificationMessage] = useState<string | null>(null);
+  const [provinceDropdownOpen, setProvinceDropdownOpen] = useState(false);
   const { data: stations } = useWeatherStations();
   const { data: positions = [] } = useMeteoStationPositions();
   const selectedStationId = useWeatherStore((state) => state.selectedStationId);
@@ -153,6 +153,7 @@ export function SettingsPage() {
   const selectedProvince = getProvinceForSelection(selectedLocation?.province, selectedStationId ?? DEFAULT_STATION_ID);
   const effectiveProvince = provinceMode === "manual" ? manualProvince : selectedProvince;
   const effectiveProvinceLabel = effectiveProvince ? formatProvinceName(effectiveProvince, language) : t("settings.notifications.noProvince");
+  const manualProvinceValue = manualProvince ?? selectedProvince ?? "mazowieckie";
 
   useEffect(() => {
     const abortController = new AbortController();
@@ -198,6 +199,17 @@ export function SettingsPage() {
     };
   }, [effectiveProvince, language, morningBriefEnabled, notificationCountyTeryt, notificationLatitude, notificationLocationName, notificationLongitude, notificationStatus, notificationsEnabled, temperatureUnit, tomorrowBriefEnabled, vapidPublicKey, windSpeedUnit]);
 
+  useEffect(() => {
+    if (!provinceDropdownOpen) return;
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") setProvinceDropdownOpen(false);
+    }
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [provinceDropdownOpen]);
+
   const notificationStatusLabel = useMemo(() => {
     switch (notificationStatus) {
       case "unconfigured":
@@ -456,18 +468,49 @@ export function SettingsPage() {
                 <span className="min-w-0 flex-1">
                   <span className="block font-medium">{t("settings.notifications.regionManual")}</span>
                   <span className="relative mt-2 block">
-                    <select
+                    <button
+                      type="button"
                       aria-label={t("settings.notifications.regionManual")}
-                      value={manualProvince ?? selectedProvince ?? "mazowieckie"}
+                      aria-haspopup="listbox"
+                      aria-expanded={provinceDropdownOpen}
                       disabled={provinceMode !== "manual"}
-                      onChange={(event) => setManualProvince(event.target.value as Province)}
+                      onBlur={(event) => {
-                      className="surface-control w-full appearance-none rounded-control py-2 pl-3 pr-9 text-sm disabled:opacity-60"
+                        if (!event.currentTarget.parentElement?.contains(event.relatedTarget as Node | null)) setProvinceDropdownOpen(false);
+                      }}
+                      onClick={() => setProvinceDropdownOpen((current) => !current)}
+                      className="surface-control flex w-full items-center justify-between gap-3 rounded-control py-2 pl-3 pr-3 text-left text-sm disabled:opacity-60"
                     >
-                      {PROVINCES.map((province) => (
+                      <span className="truncate">{formatProvinceName(manualProvinceValue, language)}</span>
-                        <option key={province} value={province}>{formatProvinceName(province, language)}</option>
+                      <ChevronDown className="size-4 shrink-0 text-muted" aria-hidden="true" />
-                      ))}
+                    </button>
-                    </select>
+                    {provinceDropdownOpen && provinceMode === "manual" && (
-                    <ChevronDown className="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-muted" aria-hidden="true" />
+                      <div
+                        role="listbox"
+                        aria-label={t("settings.notifications.regionManual")}
+                        className="surface-control absolute inset-x-0 top-[calc(100%+0.5rem)] z-30 max-h-72 overflow-y-auto rounded-panel p-1.5 shadow-card"
+                      >
+                        {PROVINCES.map((province) => (
+                          <button
+                            key={province}
+                            type="button"
+                            role="option"
+                            aria-selected={manualProvinceValue === province}
+                            onClick={() => {
+                              setManualProvince(province);
+                              setProvinceDropdownOpen(false);
+                            }}
+                            className={`flex w-full items-center justify-between gap-3 rounded-card px-3 py-2.5 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent ${
+                              manualProvinceValue === province
+                                ? "bg-accent/10 font-semibold text-accent"
+                                : "text-foreground hover:bg-surface-muted/70"
+                            }`}
+                          >
+                            <span className="truncate">{formatProvinceName(province, language)}</span>
+                            {manualProvinceValue === province && <span className="size-1.5 rounded-full bg-accent" aria-hidden="true" />}
+                          </button>
+                        ))}
+                      </div>
+                    )}
                   </span>
                 </span>
               </label>