fix: ui fixes

components/push/push-toggle.tsx

@@ -9,6 +9,7 @@
 
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
+import { SettingRow, ToggleSwitch } from "@/components/settings/setting-row";
 import {
   disablePush,
   enablePush,
@@ -73,48 +74,29 @@ export function PushToggle() {
     }
   }
 
-  const description = describe(state);
-
   return (
-    <ul className="divide-y divide-border">
-      <li className="flex items-center justify-between gap-4 py-3">
-        <div className="min-w-0">
-          <span className="text-sm text-foreground">
-            Push notifications
+    <SettingRow
+      label="Push notifications"
+      description={describe(state)}
+      control={
+        state === "on" || state === "off" ? (
+          <ToggleSwitch
+            checked={state === "on"}
+            disabled={busy}
+            onToggle={toggle}
+            label="Push notifications"
+          />
+        ) : (
+          <span className="text-xs text-muted-foreground">
+            {state === "loading"
+              ? "…"
+              : state === "ios-install"
+                ? null
+                : "Unavailable"}
           </span>
-          <p className="text-xs text-muted-foreground mt-0.5">{description}</p>
-        </div>
-        <div className="shrink-0">
-          {state === "on" || state === "off" ? (
-            <button
-              type="button"
-              onClick={toggle}
-              disabled={busy}
-              aria-pressed={state === "on"}
-              className={[
-                "relative inline-flex h-6 w-11 items-center rounded-full transition-colors disabled:opacity-60",
-                state === "on" ? "bg-primary" : "bg-muted-foreground/30",
-              ].join(" ")}
-            >
-              <span
-                className={[
-                  "inline-block size-5 transform rounded-full bg-white shadow transition-transform",
-                  state === "on" ? "translate-x-5" : "translate-x-0.5",
-                ].join(" ")}
-              />
-            </button>
-          ) : (
-            <span className="text-xs text-muted-foreground">
-              {state === "loading"
-                ? "…"
-                : state === "ios-install"
-                  ? null
-                  : "Unavailable"}
-            </span>
-          )}
-        </div>
-      </li>
-    </ul>
+        )
+      }
+    />
   );
 }