fix: improve notification settings switches

components/settings/settings-page.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useMemo, useState } from "react";
 import { Bell, BellRing, Clock3, Languages, MapPinned, Palette, Settings, Smartphone } 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";
@@ -56,6 +57,49 @@ function SettingsRow({ icon: Icon, title, description, children }: { icon: typeo
   );
 }
 
+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>
+  );
+}
+
 export function SettingsPage() {
   const { language, t } = useI18n();
   const [notificationStatus, setNotificationStatus] = useState<NotificationSupportStatus>("checking");
@@ -371,55 +415,55 @@ export function SettingsPage() {
               </div>
             </div>
 
-            <div className="mt-4 rounded-card border border-border/60 bg-surface px-3 py-3 text-sm">
+            <button
-              <p className="font-medium">{t("settings.notifications.enable")}</p>
+              type="button"
-              <p className="mt-0.5 text-xs leading-5 text-muted">{t("settings.notifications.enableDescription")}</p>
+              role="switch"
-              {notificationMessage && <p className="mt-3 text-xs font-medium text-accent">{notificationMessage}</p>}
+              aria-checked={notificationsEnabled}
-            </div>
+              disabled={(!notificationsEnabled && !canUsePush) || isSavingSubscription}
-
+              onClick={notificationsEnabled ? disableWarningNotifications : enableWarningNotifications}
-            <label className="mt-3 flex items-start gap-3 rounded-card border border-border/60 bg-surface px-3 py-3 text-sm">
+              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 ${
-              <input
+                notificationsEnabled
-                type="checkbox"
+                  ? "border-accent/45 bg-accent/10"
-                checked={morningBriefEnabled}
+                  : "border-border/60 bg-surface hover:border-accent/45"
-                disabled={!notificationsEnabled}
+              }`}
-                onChange={(event) => updateMorningBriefPreference(event.target.checked)}
+            >
-                className="mt-1 accent-accent"
+              <span className="min-w-0">
-              />
-              <span>
                 <span className="flex items-center gap-2 font-medium">
-                  <Clock3 className="size-3.5 text-accent" aria-hidden="true" />
+                  <Bell className="size-3.5 text-accent" aria-hidden="true" />
-                  {t("settings.notifications.morningBrief")}
+                  {t("settings.notifications.enable")}
                 </span>
-                <span className="mt-0.5 block text-xs leading-5 text-muted">{t("settings.notifications.morningBriefDescription")}</span>
+                <span className="mt-0.5 block text-xs leading-5 text-muted">{t("settings.notifications.enableDescription")}</span>
-              </span>
+                <span className="mt-2 block text-xs font-semibold text-accent">
-            </label>
-
-            <label className="mt-3 flex items-start gap-3 rounded-card border border-border/60 bg-surface px-3 py-3 text-sm">
-              <input
-                type="checkbox"
-                checked={tomorrowBriefEnabled}
-                disabled={!notificationsEnabled}
-                onChange={(event) => updateTomorrowBriefPreference(event.target.checked)}
-                className="mt-1 accent-accent"
-              />
-              <span>
-                <span className="flex items-center gap-2 font-medium">
-                  <Clock3 className="size-3.5 text-accent" aria-hidden="true" />
-                  {t("settings.notifications.tomorrowBrief")}
-                </span>
-                <span className="mt-0.5 block text-xs leading-5 text-muted">{t("settings.notifications.tomorrowBriefDescription")}</span>
-              </span>
-            </label>
-
-            <div className="mt-4 flex flex-col gap-2 sm:flex-row">
-              <Button type="button" disabled={(!notificationsEnabled && !canUsePush) || isSavingSubscription} onClick={notificationsEnabled ? disableWarningNotifications : enableWarningNotifications}>
-                <Bell className="size-4" />
                   {isSavingSubscription
                     ? t("settings.notifications.saving")
                     : notificationsEnabled
-                    ? t("settings.notifications.disable")
+                      ? t("settings.notifications.enabledStatus")
-                    : t("settings.notifications.enableDevice")}
+                      : t("settings.notifications.disabledStatus")}
-              </Button>
+                </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")}

lib/i18n.tsx

@@ -42,6 +42,8 @@ const translations = {
     "settings.notifications.tomorrowBriefDescription": "Wysyła wieczorem krótką prognozę na kolejny dzień, w tym sygnały burz i opadów z modelu.",
     "settings.notifications.enableDevice": "Włącz na tym urządzeniu",
     "settings.notifications.disable": "Wyłącz na tym urządzeniu",
+    "settings.notifications.enabledStatus": "Włączone",
+    "settings.notifications.disabledStatus": "Wyłączone",
     "settings.notifications.saving": "Zapisuję…",
     "settings.notifications.saveSuccess": "Powiadomienia są włączone dla tego urządzenia.",
     "settings.notifications.disableSuccess": "Powiadomienia są wyłączone dla tego urządzenia.",
@@ -276,6 +278,8 @@ const translations = {
     "settings.notifications.tomorrowBriefDescription": "Sends a short evening forecast for the next day, including storm and rain signals from the model.",
     "settings.notifications.enableDevice": "Enable on this device",
     "settings.notifications.disable": "Disable on this device",
+    "settings.notifications.enabledStatus": "Enabled",
+    "settings.notifications.disabledStatus": "Disabled",
     "settings.notifications.saving": "Saving…",
     "settings.notifications.saveSuccess": "Notifications are enabled for this device.",
     "settings.notifications.disableSuccess": "Notifications are disabled for this device.",