fix: use custom province dropdown

components/settings/settings-page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useMemo, useState } from "react";
-import { Bell, BellRing, Clock3, Languages, MapPinned, Palette, Settings, Smartphone, Thermometer, Wind } from "lucide-react";
+import { Bell, BellRing, ChevronDown, Clock3, Languages, MapPinned, Palette, Settings, Smartphone, Thermometer, Wind } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
@@ -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":
@@ -455,17 +467,51 @@ export function SettingsPage() {
                 />
                 <span className="min-w-0 flex-1">
                   <span className="block font-medium">{t("settings.notifications.regionManual")}</span>
-                  <select
+                  <span className="relative mt-2 block">
+                    <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)}
-                    className="surface-control mt-2 w-full rounded-control px-3 py-2 text-sm disabled:opacity-60"
+                      onBlur={(event) => {
+                        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"
+                    >
+                      <span className="truncate">{formatProvinceName(manualProvinceValue, language)}</span>
+                      <ChevronDown className="size-4 shrink-0 text-muted" aria-hidden="true" />
+                    </button>
+                    {provinceDropdownOpen && provinceMode === "manual" && (
+                      <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) => (
-                      <option key={province} value={province}>{formatProvinceName(province, language)}</option>
+                          <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>
                         ))}
-                  </select>
+                      </div>
+                    )}
+                  </span>
                 </span>
               </label>
             </div>

components/ui/language-toggle.tsx

@@ -1,23 +1,83 @@
 "use client";
 
-import { Languages } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { ChevronDown, Languages } from "lucide-react";
 import { useI18n, type Language } from "@/lib/i18n";
 
+const languageOptions: Language[] = ["pl", "en"];
+
 export function LanguageToggle() {
   const { language, setLanguage, t } = useI18n();
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const labels: Record<Language, string> = {
+    pl: t("language.polish"),
+    en: t("language.english"),
+  };
+
+  useEffect(() => {
+    if (!open) return;
+
+    function handlePointerDown(event: PointerEvent) {
+      if (!rootRef.current?.contains(event.target as Node)) setOpen(false);
+    }
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") setOpen(false);
+    }
+
+    document.addEventListener("pointerdown", handlePointerDown);
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open]);
+
   return (
-    <label className="relative flex items-center">
-      <span className="sr-only">{t("language.label")}</span>
-      <Languages className="pointer-events-none absolute left-3 size-4 text-muted" />
-      <select
+    <div ref={rootRef} className="relative inline-flex">
+      <button
+        type="button"
         aria-label={t("language.label")}
-        value={language}
-        onChange={(event) => setLanguage(event.target.value as Language)}
-        className="surface-control h-10 appearance-none rounded-control py-2 pl-9 pr-3 text-xs font-semibold uppercase text-foreground transition hover:bg-surface-raised/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+        aria-expanded={open}
+        aria-haspopup="listbox"
+        onClick={() => setOpen((current) => !current)}
+        className="surface-control flex h-11 min-w-36 items-center justify-between gap-3 rounded-control px-3.5 py-2 text-left text-sm font-medium text-foreground transition hover:bg-surface-raised/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
       >
-        <option value="pl">{t("language.polish")}</option>
-        <option value="en">{t("language.english")}</option>
-      </select>
-    </label>
+        <span className="flex min-w-0 items-center gap-2.5">
+          <Languages className="size-4 shrink-0 text-accent" aria-hidden="true" />
+          <span className="truncate">{labels[language]}</span>
+        </span>
+        <ChevronDown className="size-4 shrink-0 text-muted" aria-hidden="true" />
+      </button>
+      {open && (
+        <div
+          role="listbox"
+          aria-label={t("language.label")}
+          className="surface-control absolute right-0 top-[calc(100%+0.5rem)] z-30 w-44 overflow-hidden rounded-panel p-1.5 shadow-card"
+        >
+          {languageOptions.map((option) => (
+            <button
+              key={option}
+              type="button"
+              role="option"
+              aria-selected={language === option}
+              onClick={() => {
+                setLanguage(option);
+                setOpen(false);
+              }}
+              className={`flex w-full items-center justify-between 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 ${
+                language === option
+                  ? "bg-accent/10 font-semibold text-accent"
+                  : "text-foreground hover:bg-surface-muted/70"
+              }`}
+            >
+              {labels[option]}
+              {language === option && <span className="size-1.5 rounded-full bg-accent" aria-hidden="true" />}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
   );
 }