social overhaul

2026-07-22 15:47:34 -07:00
parent 9db3fa697d
commit 86cda294f9
45 changed files with 3026 additions and 430 deletions
@@ -0,0 +1,82 @@
+import { Box, Title, Stack, Switch, Button, Text, Group } from "@mantine/core";
+import { useWebPush } from "@/hooks/use-web-push";
+import toast from "@/lib/sonner";
+
+export function NotificationsSection() {
+  const { supported, configured, permission, subscribed, busy, enable, disable, sendTest } =
+    useWebPush();
+
+  if (!supported || !configured) {
+    return (
+      <Box
+        px="md"
+        py="sm"
+        style={{ borderBottom: "1px solid var(--mantine-color-default-border)" }}
+      >
+        <Title order={3}>Notifications</Title>
+        <Text size="sm" c="dimmed" mt="xs">
+          {supported
+            ? "Notifications aren't available right now."
+            : "This device doesn't support push notifications. On iOS, install the app to your Home Screen first."}
+        </Text>
+      </Box>
+    );
+  }
+
+  const handleToggle = async (checked: boolean) => {
+    if (checked) {
+      const ok = await enable();
+      if (ok) {
+        toast.success("Notifications enabled on this device");
+      } else if (permission === "denied") {
+        toast.error(
+          "Notifications are blocked. Enable them in your browser settings."
+        );
+      } else {
+        toast.error("Couldn't enable notifications");
+      }
+    } else {
+      const ok = await disable();
+      if (ok) toast.success("Notifications disabled on this device");
+      else toast.error("Couldn't disable notifications");
+    }
+  };
+
+  const handleTest = async () => {
+    const ok = await sendTest();
+    if (ok) toast.success("Test notification sent");
+    else toast.error("Couldn't send test notification");
+  };
+
+  return (
+    <Box
+      px="md"
+      py="sm"
+      style={{ borderBottom: "1px solid var(--mantine-color-default-border)" }}
+    >
+      <Title order={3}>Notifications</Title>
+      <Stack mt="xs" gap="sm">
+        <Switch
+          checked={subscribed}
+          onChange={(e) => handleToggle(e.currentTarget.checked)}
+          disabled={busy}
+          label="Enable notifications on this device"
+        />
+        {subscribed && (
+          <Group>
+            <Button
+              variant="light"
+              size="xs"
+              onClick={handleTest}
+              loading={busy}
+            >
+              Send test notification
+            </Button>
+          </Group>
+        )}
+      </Stack>
+    </Box>
+  );
+}
+
+export default NotificationsSection;