zv/wtr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: use custom province dropdown
All checks were successful
CI / Lint, typecheck and build (push) Successful in 9m56s
Details

Browse Source
This commit is contained in:
zv
2026-06-14 11:28:24 +02:00
parent bb03657c58
commit 50d46be617
1 changed files with 53 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
components/settings/settings-page.tsx
View File

@@ -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)}
className="surface-control w-full appearance-none rounded-control py-2 pl-3 pr-9 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"
>
{PROVINCES.map((province) => (
<option key={province} value={province}>{formatProvinceName(province, language)}</option>
))}
</select>
<ChevronDown className="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-muted" aria-hidden="true" />
<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) => (
<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>