671 lines
33 KiB
TypeScript
671 lines
33 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import { Bell, BellRing, ChevronDown, Clock3, Languages, LayoutDashboard, 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";
|
|
import { LanguageToggle } from "@/components/ui/language-toggle";
|
|
import { ThemeToggle } from "@/components/ui/theme-toggle";
|
|
import { useMeteoStationPositions } from "@/hooks/use-meteo-stations";
|
|
import { useWeatherStations } from "@/hooks/use-weather-stations";
|
|
import { APP_SECTION_SETTINGS } from "@/lib/app-sections";
|
|
import { DEFAULT_STATION_ID } from "@/lib/constants";
|
|
import { DASHBOARD_SECTION_SETTINGS } from "@/lib/dashboard-sections";
|
|
import { useI18n } from "@/lib/i18n";
|
|
import { locateSynopStations } from "@/lib/location-utils";
|
|
import { decodeBase64UrlKey, deletePushSubscription, fetchVapidPublicKey, savePushSubscription, sendTestPushNotification } from "@/lib/notification-api";
|
|
import { formatProvinceName, getProvinceForSelection, PROVINCES } from "@/lib/provinces";
|
|
import { useWeatherStore } from "@/lib/store";
|
|
import { TEMPERATURE_UNITS, WIND_SPEED_UNITS } from "@/lib/weather-utils";
|
|
import type { TemperatureUnit, WindSpeedUnit } from "@/types/units";
|
|
|
|
type NotificationSupportStatus = "checking" | "unconfigured" | "unsupported" | "needs-install" | "default" | "denied" | "granted";
|
|
|
|
function isStandaloneApp() {
|
|
if (typeof window === "undefined") return false;
|
|
const navigatorWithStandalone = window.navigator as Navigator & { standalone?: boolean };
|
|
return window.matchMedia("(display-mode: standalone)").matches || navigatorWithStandalone.standalone === true;
|
|
}
|
|
|
|
function isAppleMobilePlatform() {
|
|
if (typeof window === "undefined") return false;
|
|
const userAgent = window.navigator.userAgent;
|
|
const platform = window.navigator.platform;
|
|
const isIPadOSDesktopMode = platform === "MacIntel" && window.navigator.maxTouchPoints > 1;
|
|
return /iPad|iPhone|iPod/.test(userAgent) || isIPadOSDesktopMode;
|
|
}
|
|
|
|
function getNotificationSupportStatus(): NotificationSupportStatus {
|
|
if (typeof window === "undefined") return "checking";
|
|
if (!("Notification" in window) || !("serviceWorker" in navigator) || !("PushManager" in window)) return "unsupported";
|
|
if (isAppleMobilePlatform() && !isStandaloneApp()) return "needs-install";
|
|
return Notification.permission;
|
|
}
|
|
|
|
function SettingsRow({ icon: Icon, title, description, children }: { icon: typeof Settings; title: string; description: string; children: React.ReactNode }) {
|
|
return (
|
|
<div className="flex flex-col gap-4 border-t border-border/65 py-4 first:border-t-0 first:pt-0 last:pb-0 sm:flex-row sm:items-center sm:justify-between">
|
|
<div className="flex items-start gap-3">
|
|
<div className="rounded-control border border-border/70 bg-surface-muted/70 p-2 text-accent">
|
|
<Icon className="size-4" aria-hidden="true" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-sm font-semibold">{title}</h2>
|
|
<p className="mt-1 max-w-xl text-sm leading-6 text-muted">{description}</p>
|
|
</div>
|
|
</div>
|
|
<div className="shrink-0">{children}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function SwitchIndicator({ checked, disabled }: { checked: boolean; disabled?: boolean }) {
|
|
return (
|
|
<span
|
|
className={`relative inline-flex h-7 w-12 shrink-0 items-center rounded-control border px-0.5 transition-colors ${
|
|
checked
|
|
? "border-accent/55 bg-accent"
|
|
: "border-border/70 bg-surface-muted"
|
|
} ${disabled ? "opacity-55" : ""}`}
|
|
aria-hidden="true"
|
|
>
|
|
<span className={`size-5 rounded-full bg-surface-raised shadow-soft transition-transform ${checked ? "translate-x-5" : "translate-x-0"}`} />
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function NotificationSwitchLabel({ icon: Icon, title, description, checked, disabled, onChange }: { icon: LucideIcon; title: string; description: string; checked: boolean; disabled?: boolean; onChange: (checked: boolean) => void }) {
|
|
return (
|
|
<label
|
|
className={`mt-3 flex cursor-pointer items-start justify-between gap-4 rounded-card border px-3 py-3 text-sm transition-colors ${
|
|
checked
|
|
? "border-accent/45 bg-accent/10"
|
|
: "border-border/60 bg-surface"
|
|
} ${disabled ? "cursor-not-allowed opacity-65" : "hover:border-accent/45"}`}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={checked}
|
|
disabled={disabled}
|
|
onChange={(event) => onChange(event.target.checked)}
|
|
className="sr-only"
|
|
/>
|
|
<span className="min-w-0">
|
|
<span className="flex items-center gap-2 font-medium">
|
|
<Icon className="size-3.5 text-accent" aria-hidden="true" />
|
|
{title}
|
|
</span>
|
|
<span className="mt-0.5 block text-xs leading-5 text-muted">{description}</span>
|
|
</span>
|
|
<SwitchIndicator checked={checked} disabled={disabled} />
|
|
</label>
|
|
);
|
|
}
|
|
|
|
const windSpeedUnitKeys: Record<WindSpeedUnit, "settings.units.wind.ms" | "settings.units.wind.kmh" | "settings.units.wind.mph"> = {
|
|
ms: "settings.units.wind.ms",
|
|
kmh: "settings.units.wind.kmh",
|
|
mph: "settings.units.wind.mph",
|
|
};
|
|
|
|
const temperatureUnitKeys: Record<TemperatureUnit, "settings.units.temperature.c" | "settings.units.temperature.f"> = {
|
|
c: "settings.units.temperature.c",
|
|
f: "settings.units.temperature.f",
|
|
};
|
|
|
|
export function SettingsPage() {
|
|
const { language, t } = useI18n();
|
|
const [notificationStatus, setNotificationStatus] = useState<NotificationSupportStatus>("checking");
|
|
const [vapidPublicKey, setVapidPublicKey] = useState<string | null>(null);
|
|
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);
|
|
const selectedLocation = useWeatherStore((state) => state.selectedLocation);
|
|
const notificationsEnabled = useWeatherStore((state) => state.warningNotificationsEnabled);
|
|
const morningBriefEnabled = useWeatherStore((state) => state.morningBriefNotificationsEnabled);
|
|
const tomorrowBriefEnabled = useWeatherStore((state) => state.tomorrowBriefNotificationsEnabled);
|
|
const provinceMode = useWeatherStore((state) => state.warningNotificationProvinceMode);
|
|
const manualProvince = useWeatherStore((state) => state.warningNotificationProvince);
|
|
const temperatureUnit = useWeatherStore((state) => state.temperatureUnit);
|
|
const windSpeedUnit = useWeatherStore((state) => state.windSpeedUnit);
|
|
const dashboardSections = useWeatherStore((state) => state.dashboardSections);
|
|
const appSections = useWeatherStore((state) => state.appSections);
|
|
const setNotificationsEnabled = useWeatherStore((state) => state.setWarningNotificationsEnabled);
|
|
const setMorningBriefEnabled = useWeatherStore((state) => state.setMorningBriefNotificationsEnabled);
|
|
const setTomorrowBriefEnabled = useWeatherStore((state) => state.setTomorrowBriefNotificationsEnabled);
|
|
const setProvinceMode = useWeatherStore((state) => state.setWarningNotificationProvinceMode);
|
|
const setManualProvince = useWeatherStore((state) => state.setWarningNotificationProvince);
|
|
const setTemperatureUnit = useWeatherStore((state) => state.setTemperatureUnit);
|
|
const setWindSpeedUnit = useWeatherStore((state) => state.setWindSpeedUnit);
|
|
const setDashboardSectionVisible = useWeatherStore((state) => state.setDashboardSectionVisible);
|
|
const setAppSectionVisible = useWeatherStore((state) => state.setAppSectionVisible);
|
|
|
|
const selectedStation = stations?.find((station) => station.id === selectedStationId)
|
|
?? stations?.find((station) => station.id === DEFAULT_STATION_ID)
|
|
?? stations?.[0];
|
|
const activeLocation = selectedLocation;
|
|
const selectedRegion = activeLocation?.region ?? "PL";
|
|
const stationPosition = selectedStation
|
|
? locateSynopStations(stations ?? [], positions).find((station) => station.id === selectedStation.id)
|
|
: null;
|
|
const notificationLatitude = Number.isFinite(activeLocation?.latitude) ? activeLocation?.latitude : stationPosition?.latitude ?? null;
|
|
const notificationLongitude = Number.isFinite(activeLocation?.longitude) ? activeLocation?.longitude : stationPosition?.longitude ?? null;
|
|
const notificationLocationName = activeLocation?.name ?? selectedStation?.name ?? null;
|
|
const notificationTimezone = activeLocation?.timezone ?? (selectedRegion === "PL" ? "Europe/Warsaw" : null);
|
|
const notificationCountyTeryt = selectedRegion === "PL" ? activeLocation?.countyTeryt ?? null : null;
|
|
const selectedProvince = selectedRegion === "PL" ? getProvinceForSelection(selectedLocation?.province, selectedStationId ?? DEFAULT_STATION_ID) : null;
|
|
const effectiveProvince = selectedRegion === "PL" ? provinceMode === "manual" ? manualProvince : selectedProvince : null;
|
|
const canUseOfficialWarnings = selectedRegion === "PL" && Boolean(effectiveProvince);
|
|
const effectiveProvinceLabel = selectedRegion === "GLOBAL"
|
|
? t("settings.notifications.globalRegion")
|
|
: effectiveProvince ? formatProvinceName(effectiveProvince, language) : t("settings.notifications.noProvince");
|
|
const manualProvinceValue = manualProvince ?? selectedProvince ?? "mazowieckie";
|
|
|
|
useEffect(() => {
|
|
const abortController = new AbortController();
|
|
const animationFrame = window.requestAnimationFrame(() => {
|
|
setNotificationStatus(getNotificationSupportStatus());
|
|
fetchVapidPublicKey(abortController.signal)
|
|
.then((config) => {
|
|
setVapidPublicKey(config.publicKey);
|
|
if (!config.configured) setNotificationStatus("unconfigured");
|
|
})
|
|
.catch(() => setNotificationStatus("unconfigured"));
|
|
});
|
|
return () => {
|
|
abortController.abort();
|
|
window.cancelAnimationFrame(animationFrame);
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!notificationsEnabled || !vapidPublicKey || notificationStatus !== "granted") return;
|
|
const province = effectiveProvince;
|
|
let cancelled = false;
|
|
|
|
async function syncSubscriptionProvince() {
|
|
const registration = await navigator.serviceWorker?.getRegistration();
|
|
const subscription = await registration?.pushManager.getSubscription();
|
|
if (!subscription || cancelled) return;
|
|
await savePushSubscription(subscription, province, language, {
|
|
region: selectedRegion,
|
|
officialWarningsEnabled: canUseOfficialWarnings && notificationsEnabled,
|
|
morningBriefEnabled,
|
|
tomorrowBriefEnabled,
|
|
latitude: notificationLatitude,
|
|
longitude: notificationLongitude,
|
|
locationName: notificationLocationName,
|
|
timezone: notificationTimezone,
|
|
countyTeryt: notificationCountyTeryt,
|
|
temperatureUnit,
|
|
windSpeedUnit,
|
|
}).catch(() => undefined);
|
|
}
|
|
|
|
syncSubscriptionProvince();
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [canUseOfficialWarnings, effectiveProvince, language, morningBriefEnabled, notificationCountyTeryt, notificationLatitude, notificationLocationName, notificationLongitude, notificationStatus, notificationsEnabled, notificationTimezone, selectedRegion, 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":
|
|
return t("settings.notifications.statusUnconfigured");
|
|
case "unsupported":
|
|
return t("settings.notifications.statusUnsupported");
|
|
case "needs-install":
|
|
return t("settings.notifications.statusNeedsInstall");
|
|
case "denied":
|
|
return t("settings.notifications.statusDenied");
|
|
case "granted":
|
|
return t("settings.notifications.statusGranted");
|
|
case "default":
|
|
return t("settings.notifications.statusReady");
|
|
default:
|
|
return t("settings.notifications.statusChecking");
|
|
}
|
|
}, [notificationStatus, t]);
|
|
|
|
const canUsePush = Boolean(vapidPublicKey && (selectedRegion === "GLOBAL" || effectiveProvince) && notificationStatus !== "unsupported" && notificationStatus !== "needs-install" && notificationStatus !== "denied" && notificationStatus !== "unconfigured");
|
|
|
|
async function getServiceWorkerRegistration() {
|
|
if (!("serviceWorker" in navigator)) throw new Error("Service worker is not available.");
|
|
return await navigator.serviceWorker.getRegistration() ?? await navigator.serviceWorker.register("/sw.js");
|
|
}
|
|
|
|
async function enableWarningNotifications() {
|
|
if (!vapidPublicKey || (selectedRegion === "PL" && !effectiveProvince)) {
|
|
setNotificationMessage(t("settings.notifications.saveError"));
|
|
return;
|
|
}
|
|
if (!("Notification" in window)) {
|
|
setNotificationStatus("unsupported");
|
|
return;
|
|
}
|
|
setIsSavingSubscription(true);
|
|
setNotificationMessage(null);
|
|
try {
|
|
const permission = Notification.permission === "granted" ? "granted" : await Notification.requestPermission();
|
|
setNotificationStatus(permission);
|
|
if (permission !== "granted") {
|
|
setNotificationsEnabled(false);
|
|
return;
|
|
}
|
|
const registration = await getServiceWorkerRegistration();
|
|
const existingSubscription = await registration.pushManager.getSubscription();
|
|
const subscription = existingSubscription ?? await registration.pushManager.subscribe({
|
|
userVisibleOnly: true,
|
|
applicationServerKey: decodeBase64UrlKey(vapidPublicKey),
|
|
});
|
|
await savePushSubscription(subscription, effectiveProvince, language, {
|
|
region: selectedRegion,
|
|
officialWarningsEnabled: canUseOfficialWarnings,
|
|
morningBriefEnabled,
|
|
tomorrowBriefEnabled,
|
|
latitude: notificationLatitude,
|
|
longitude: notificationLongitude,
|
|
locationName: notificationLocationName,
|
|
timezone: notificationTimezone,
|
|
countyTeryt: notificationCountyTeryt,
|
|
temperatureUnit,
|
|
windSpeedUnit,
|
|
});
|
|
setNotificationsEnabled(true);
|
|
setNotificationMessage(t("settings.notifications.saveSuccess"));
|
|
} catch {
|
|
setNotificationsEnabled(false);
|
|
setNotificationMessage(t("settings.notifications.saveError"));
|
|
} finally {
|
|
setIsSavingSubscription(false);
|
|
}
|
|
}
|
|
|
|
async function disableWarningNotifications() {
|
|
setIsSavingSubscription(true);
|
|
setNotificationMessage(null);
|
|
try {
|
|
const registration = await navigator.serviceWorker?.getRegistration();
|
|
const subscription = await registration?.pushManager.getSubscription();
|
|
if (subscription) {
|
|
await deletePushSubscription(subscription.endpoint).catch(() => undefined);
|
|
await subscription.unsubscribe();
|
|
}
|
|
setNotificationsEnabled(false);
|
|
setMorningBriefEnabled(false);
|
|
setTomorrowBriefEnabled(false);
|
|
setNotificationMessage(t("settings.notifications.disableSuccess"));
|
|
} catch {
|
|
setNotificationMessage(t("settings.notifications.saveError"));
|
|
} finally {
|
|
setIsSavingSubscription(false);
|
|
}
|
|
}
|
|
|
|
async function sendTestNotification() {
|
|
setIsSendingTestNotification(true);
|
|
setNotificationMessage(null);
|
|
try {
|
|
const registration = await navigator.serviceWorker?.getRegistration();
|
|
const subscription = await registration?.pushManager.getSubscription();
|
|
if (!subscription) throw new Error("Push subscription is not available.");
|
|
await sendTestPushNotification(subscription.endpoint);
|
|
setNotificationMessage(t("settings.notifications.testSuccess"));
|
|
} catch {
|
|
setNotificationMessage(t("settings.notifications.testError"));
|
|
} finally {
|
|
setIsSendingTestNotification(false);
|
|
}
|
|
}
|
|
|
|
async function updateMorningBriefPreference(enabled: boolean) {
|
|
setMorningBriefEnabled(enabled);
|
|
if (!notificationsEnabled || !canUsePush || notificationStatus !== "granted") return;
|
|
try {
|
|
const registration = await navigator.serviceWorker?.getRegistration();
|
|
const subscription = await registration?.pushManager.getSubscription();
|
|
if (!subscription) return;
|
|
await savePushSubscription(subscription, effectiveProvince, language, {
|
|
region: selectedRegion,
|
|
officialWarningsEnabled: canUseOfficialWarnings && notificationsEnabled,
|
|
morningBriefEnabled: enabled,
|
|
tomorrowBriefEnabled,
|
|
latitude: notificationLatitude,
|
|
longitude: notificationLongitude,
|
|
locationName: notificationLocationName,
|
|
timezone: notificationTimezone,
|
|
countyTeryt: notificationCountyTeryt,
|
|
temperatureUnit,
|
|
windSpeedUnit,
|
|
});
|
|
} catch {
|
|
setNotificationMessage(t("settings.notifications.saveError"));
|
|
}
|
|
}
|
|
|
|
async function updateTomorrowBriefPreference(enabled: boolean) {
|
|
setTomorrowBriefEnabled(enabled);
|
|
if (!notificationsEnabled || !canUsePush || notificationStatus !== "granted") return;
|
|
try {
|
|
const registration = await navigator.serviceWorker?.getRegistration();
|
|
const subscription = await registration?.pushManager.getSubscription();
|
|
if (!subscription) return;
|
|
await savePushSubscription(subscription, effectiveProvince, language, {
|
|
region: selectedRegion,
|
|
officialWarningsEnabled: canUseOfficialWarnings && notificationsEnabled,
|
|
morningBriefEnabled,
|
|
tomorrowBriefEnabled: enabled,
|
|
latitude: notificationLatitude,
|
|
longitude: notificationLongitude,
|
|
locationName: notificationLocationName,
|
|
timezone: notificationTimezone,
|
|
countyTeryt: notificationCountyTeryt,
|
|
temperatureUnit,
|
|
windSpeedUnit,
|
|
});
|
|
} catch {
|
|
setNotificationMessage(t("settings.notifications.saveError"));
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<section>
|
|
<p className="section-kicker flex items-center gap-2"><Settings className="size-4" />{t("settings.section")}</p>
|
|
<h1 className="mt-2 text-3xl font-semibold tracking-tight">{t("settings.title")}</h1>
|
|
<p className="mt-2 max-w-2xl text-sm leading-6 text-muted">{t("settings.description")}</p>
|
|
</section>
|
|
|
|
<Card className="p-4 sm:p-5">
|
|
<SettingsRow icon={Languages} title={t("settings.language.title")} description={t("settings.language.description")}>
|
|
<LanguageToggle />
|
|
</SettingsRow>
|
|
<SettingsRow icon={Palette} title={t("settings.theme.title")} description={t("settings.theme.description")}>
|
|
<ThemeToggle />
|
|
</SettingsRow>
|
|
<SettingsRow icon={Thermometer} title={t("settings.units.temperature.title")} description={t("settings.units.temperature.description")}>
|
|
<div className="surface-control inline-flex rounded-full p-1" role="radiogroup" aria-label={t("settings.units.temperature.label")}>
|
|
{TEMPERATURE_UNITS.map((unit) => (
|
|
<button
|
|
key={unit}
|
|
type="button"
|
|
role="radio"
|
|
aria-checked={temperatureUnit === unit}
|
|
className={`min-w-14 rounded-full border px-3.5 py-1.5 text-sm font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${
|
|
temperatureUnit === unit
|
|
? "border-accent/45 bg-accent/10 text-accent shadow-soft"
|
|
: "border-transparent text-muted hover:bg-surface-muted/70 hover:text-foreground"
|
|
}`}
|
|
onClick={() => setTemperatureUnit(unit)}
|
|
>
|
|
{t(temperatureUnitKeys[unit])}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</SettingsRow>
|
|
<SettingsRow icon={Wind} title={t("settings.units.wind.title")} description={t("settings.units.wind.description")}>
|
|
<div className="surface-control inline-flex rounded-full p-1" role="radiogroup" aria-label={t("settings.units.wind.label")}>
|
|
{WIND_SPEED_UNITS.map((unit) => (
|
|
<button
|
|
key={unit}
|
|
type="button"
|
|
role="radio"
|
|
aria-checked={windSpeedUnit === unit}
|
|
className={`min-w-14 rounded-full border px-3.5 py-1.5 text-sm font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${
|
|
windSpeedUnit === unit
|
|
? "border-accent/45 bg-accent/10 text-accent shadow-soft"
|
|
: "border-transparent text-muted hover:bg-surface-muted/70 hover:text-foreground"
|
|
}`}
|
|
onClick={() => setWindSpeedUnit(unit)}
|
|
>
|
|
{t(windSpeedUnitKeys[unit])}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</SettingsRow>
|
|
</Card>
|
|
|
|
<Card className="p-4 sm:p-5">
|
|
<div className="flex items-start gap-3">
|
|
<div className="rounded-control border border-border/70 bg-surface-muted/70 p-2 text-accent">
|
|
<LayoutDashboard className="size-4" aria-hidden="true" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-sm font-semibold">{t("settings.dashboardSections.title")}</h2>
|
|
<p className="mt-1 max-w-2xl text-sm leading-6 text-muted">{t("settings.dashboardSections.description")}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-2">
|
|
{DASHBOARD_SECTION_SETTINGS.map((section) => (
|
|
<NotificationSwitchLabel
|
|
key={section.id}
|
|
icon={LayoutDashboard}
|
|
title={t(section.titleKey)}
|
|
description={t(section.descriptionKey)}
|
|
checked={dashboardSections[section.id]}
|
|
onChange={(checked) => setDashboardSectionVisible(section.id, checked)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
|
|
<Card className="p-4 sm:p-5">
|
|
<div className="flex items-start gap-3">
|
|
<div className="rounded-control border border-border/70 bg-surface-muted/70 p-2 text-accent">
|
|
<Settings className="size-4" aria-hidden="true" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-sm font-semibold">{t("settings.appSections.title")}</h2>
|
|
<p className="mt-1 max-w-2xl text-sm leading-6 text-muted">{t("settings.appSections.description")}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-2">
|
|
{APP_SECTION_SETTINGS.map((section) => (
|
|
<NotificationSwitchLabel
|
|
key={section.id}
|
|
icon={Settings}
|
|
title={t(section.titleKey)}
|
|
description={t(section.descriptionKey)}
|
|
checked={appSections[section.id]}
|
|
onChange={(checked) => setAppSectionVisible(section.id, checked)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
|
|
<Card className="p-4 sm:p-5">
|
|
<div className="flex items-start gap-3">
|
|
<div className="rounded-control border border-warning/30 bg-warning/10 p-2 text-warning">
|
|
<BellRing className="size-4" aria-hidden="true" />
|
|
</div>
|
|
<div>
|
|
<p className="text-[0.68rem] font-semibold uppercase tracking-[0.16em] text-warning">IMGW</p>
|
|
<h2 className="mt-1 text-lg font-semibold tracking-tight">{t("settings.notifications.title")}</h2>
|
|
<p className="mt-1 max-w-2xl text-sm leading-6 text-muted">{t("settings.notifications.description")}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-5 grid gap-3 lg:grid-cols-2">
|
|
<div className="rounded-card border border-border/65 bg-surface-muted/45 p-4">
|
|
<div className="flex items-start gap-3">
|
|
<MapPinned className="mt-0.5 size-4 text-accent" aria-hidden="true" />
|
|
<div>
|
|
<h3 className="text-sm font-semibold">{t("settings.notifications.regionTitle")}</h3>
|
|
<p className="mt-1 text-sm leading-6 text-muted">{t("settings.notifications.regionDescription", { province: effectiveProvinceLabel })}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 space-y-3">
|
|
<label className="flex items-start gap-3 rounded-card border border-border/60 bg-surface px-3 py-3 text-sm">
|
|
<input
|
|
type="radio"
|
|
name="warning-notification-province-mode"
|
|
checked={provinceMode === "selected"}
|
|
disabled={selectedRegion === "GLOBAL"}
|
|
onChange={() => setProvinceMode("selected")}
|
|
className="mt-1 accent-accent"
|
|
/>
|
|
<span>
|
|
<span className="block font-medium">{t("settings.notifications.regionSelected")}</span>
|
|
<span className="mt-0.5 block text-xs leading-5 text-muted">{selectedProvince ? formatProvinceName(selectedProvince, language) : t("settings.notifications.noProvince")}</span>
|
|
</span>
|
|
</label>
|
|
<label className="flex items-start gap-3 rounded-card border border-border/60 bg-surface px-3 py-3 text-sm">
|
|
<input
|
|
type="radio"
|
|
name="warning-notification-province-mode"
|
|
checked={provinceMode === "manual"}
|
|
disabled={selectedRegion === "GLOBAL"}
|
|
onChange={() => {
|
|
setProvinceMode("manual");
|
|
if (!manualProvince) setManualProvince(selectedProvince ?? "mazowieckie");
|
|
}}
|
|
className="mt-1 accent-accent"
|
|
/>
|
|
<span className="min-w-0 flex-1">
|
|
<span className="block font-medium">{t("settings.notifications.regionManual")}</span>
|
|
<span className="relative mt-2 block">
|
|
<button
|
|
type="button"
|
|
aria-label={t("settings.notifications.regionManual")}
|
|
aria-haspopup="listbox"
|
|
aria-expanded={provinceDropdownOpen}
|
|
disabled={selectedRegion === "GLOBAL" || provinceMode !== "manual"}
|
|
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) => (
|
|
<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>
|
|
{selectedRegion === "GLOBAL" && (
|
|
<p className="rounded-card border border-border/60 bg-surface px-3 py-3 text-xs leading-5 text-muted">
|
|
{t("settings.notifications.globalAlertsUnavailable")}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-card border border-border/65 bg-surface-muted/45 p-4">
|
|
<div className="flex items-start gap-3">
|
|
<Smartphone className="mt-0.5 size-4 text-accent" aria-hidden="true" />
|
|
<div>
|
|
<h3 className="text-sm font-semibold">{t("settings.notifications.deviceTitle")}</h3>
|
|
<p className="mt-1 text-sm leading-6 text-muted">{notificationStatusLabel}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
role="switch"
|
|
aria-checked={notificationsEnabled}
|
|
disabled={(!notificationsEnabled && !canUsePush) || isSavingSubscription}
|
|
onClick={notificationsEnabled ? disableWarningNotifications : enableWarningNotifications}
|
|
className={`mt-4 flex w-full items-start justify-between gap-4 rounded-card border px-3 py-3 text-left text-sm transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:cursor-not-allowed disabled:opacity-65 ${
|
|
notificationsEnabled
|
|
? "border-accent/45 bg-accent/10"
|
|
: "border-border/60 bg-surface hover:border-accent/45"
|
|
}`}
|
|
>
|
|
<span className="min-w-0">
|
|
<span className="flex items-center gap-2 font-medium">
|
|
<Bell className="size-3.5 text-accent" aria-hidden="true" />
|
|
{selectedRegion === "GLOBAL" ? t("settings.notifications.enableDevice") : t("settings.notifications.enable")}
|
|
</span>
|
|
<span className="mt-0.5 block text-xs leading-5 text-muted">{selectedRegion === "GLOBAL" ? t("settings.notifications.enableGlobalDescription") : t("settings.notifications.enableDescription")}</span>
|
|
<span className="mt-2 block text-xs font-semibold text-accent">
|
|
{isSavingSubscription
|
|
? t("settings.notifications.saving")
|
|
: notificationsEnabled
|
|
? t("settings.notifications.enabledStatus")
|
|
: t("settings.notifications.disabledStatus")}
|
|
</span>
|
|
</span>
|
|
<SwitchIndicator checked={notificationsEnabled} disabled={(!notificationsEnabled && !canUsePush) || isSavingSubscription} />
|
|
</button>
|
|
{notificationMessage && <p className="mt-3 text-xs font-medium text-accent">{notificationMessage}</p>}
|
|
|
|
<NotificationSwitchLabel
|
|
icon={Clock3}
|
|
title={t("settings.notifications.morningBrief")}
|
|
description={t("settings.notifications.morningBriefDescription")}
|
|
checked={morningBriefEnabled}
|
|
disabled={!notificationsEnabled || isSavingSubscription}
|
|
onChange={updateMorningBriefPreference}
|
|
/>
|
|
|
|
<NotificationSwitchLabel
|
|
icon={Clock3}
|
|
title={t("settings.notifications.tomorrowBrief")}
|
|
description={t("settings.notifications.tomorrowBriefDescription")}
|
|
checked={tomorrowBriefEnabled}
|
|
disabled={!notificationsEnabled || isSavingSubscription}
|
|
onChange={updateTomorrowBriefPreference}
|
|
/>
|
|
|
|
<div className="mt-4">
|
|
<Button type="button" variant="glass" disabled={!notificationsEnabled || isSavingSubscription || isSendingTestNotification} onClick={sendTestNotification}>
|
|
<BellRing className="size-4" />
|
|
{isSendingTestNotification ? t("settings.notifications.sendingTest") : t("settings.notifications.sendTest")}
|
|
</Button>
|
|
</div>
|
|
|
|
<p className="mt-4 text-xs leading-5 text-muted">{t("settings.notifications.implementationNote")}</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|