added in browser notifications for notifications in settings

2026-05-24 00:14:06 -06:00
parent dfafba0c94
commit 3cb22a4089
10 changed files with 394 additions and 59 deletions
--- a/components/profile/profile-preferences-form.tsx
+++ b/components/profile/profile-preferences-form.tsx
@@ -17,14 +17,20 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import {
  clearDailyReminderSentToday,
+  deliverTestDailyReminder,
  getNotificationPermissionLabel,
  getNotificationPermissionState,
  isNotificationSupported,
  requestNotificationPermission,
-  showTestDailyReminderNotification,
 } from "@/lib/daily-reminders";
 import { getDailyReminderStatus } from "@/lib/daily-reminder-status";
 import { getTodayDateKey } from "@/lib/habits-storage";
+import {
+  reminderDeliveryOptions,
+  usesInAppReminders,
+  usesSystemReminders,
+  type ReminderDeliveryMethod,
+} from "@/lib/reminder-delivery";
 import {
  avatarVibeOptions,
  defaultProfilePreferences,
@@ -86,7 +92,8 @@ export function ProfilePreferencesForm({ email }: ProfilePreferencesFormProps) {

      if (
        "dailyReminderEnabled" in updates ||
-        "dailyReminderTime" in updates
+        "dailyReminderTime" in updates ||
+        "dailyReminderDelivery" in updates
      ) {
        clearDailyReminderSentToday(getTodayDateKey());
      }
@@ -102,37 +109,16 @@ export function ProfilePreferencesForm({ email }: ProfilePreferencesFormProps) {
    }
  };

-  const handleDailyReminderToggle = async (checked: boolean) => {
-    if (checked) {
-      if (!isNotificationSupported()) {
-        setError("This browser does not support notifications.");
-        return;
-      }
-
-      const permission = await requestNotificationPermission();
-      setNotificationPermission(permission);
-
-      if (permission !== "granted") {
-        setError(
-          permission === "denied"
-            ? "Notifications are blocked. Enable them in your browser settings to use daily reminders."
-            : "Notification permission was not granted.",
-        );
-        return;
-      }
+  const ensureSystemReminderPermission = async (
+    deliveryMethod: ReminderDeliveryMethod,
+  ) => {
+    if (!usesSystemReminders(deliveryMethod)) {
+      return true;
    }

-    setError(null);
-    await updatePreferences({ dailyReminderEnabled: checked });
-  };
-
-  const handleTestNotification = async () => {
-    setNotificationMessage(null);
-    setError(null);
-
    if (!isNotificationSupported()) {
-      setError("This browser does not support notifications.");
-      return;
+      setError("This browser does not support browser (OS) notifications.");
+      return false;
    }

    const permission = await requestNotificationPermission();
@@ -141,22 +127,86 @@ export function ProfilePreferencesForm({ email }: ProfilePreferencesFormProps) {
    if (permission !== "granted") {
      setError(
        permission === "denied"
-          ? "Notifications are blocked. Enable them in your browser settings."
-          : "Notification permission was not granted.",
+          ? "Browser notifications are blocked. Enable them in your browser settings or choose In-app delivery."
+          : "Browser notification permission was not granted.",
+      );
+      return false;
+    }
+
+    return true;
+  };
+
+  const handleDailyReminderToggle = async (checked: boolean) => {
+    if (checked) {
+      const allowed = await ensureSystemReminderPermission(
+        preferences.dailyReminderDelivery,
+      );
+
+      if (!allowed) {
+        return;
+      }
+    }
+
+    setError(null);
+    await updatePreferences({ dailyReminderEnabled: checked });
+  };
+
+  const handleDeliveryMethodChange = async (
+    deliveryMethod: ReminderDeliveryMethod,
+  ) => {
+    if (
+      preferences.dailyReminderEnabled &&
+      usesSystemReminders(deliveryMethod)
+    ) {
+      const allowed = await ensureSystemReminderPermission(deliveryMethod);
+
+      if (!allowed) {
+        return;
+      }
+    }
+
+    setError(null);
+    await updatePreferences({ dailyReminderDelivery: deliveryMethod });
+  };
+
+  const handleTestNotification = async () => {
+    setNotificationMessage(null);
+    setError(null);
+
+    const deliveryMethod = preferences.dailyReminderDelivery;
+
+    if (usesSystemReminders(deliveryMethod)) {
+      const allowed = await ensureSystemReminderPermission(deliveryMethod);
+
+      if (!allowed) {
+        return;
+      }
+    }
+
+    const status = await getDailyReminderStatus();
+    const shown = deliverTestDailyReminder(status, deliveryMethod);
+
+    if (!shown) {
+      setError("Could not show a test reminder.");
+      return;
+    }
+
+    if (deliveryMethod === "in_app") {
+      setNotificationMessage(
+        "In-app test reminder sent. Look for the banner above the bottom navigation.",
      );
      return;
    }

-    const status = await getDailyReminderStatus();
-    const shown = showTestDailyReminderNotification(status);
-
-    if (!shown) {
-      setError("Could not show a test notification.");
+    if (deliveryMethod === "system") {
+      setNotificationMessage(
+        "Browser test notification sent. Check your browser or OS notification center.",
+      );
      return;
    }

    setNotificationMessage(
-      "Test notification sent. Check the corner of your screen or Windows notification center.",
+      "Test reminder sent in-app and through your browser notification center.",
    );
  };

@@ -239,19 +289,44 @@ export function ProfilePreferencesForm({ email }: ProfilePreferencesFormProps) {
            <Label htmlFor="daily-reminder">Daily reminder</Label>
            <Checkbox
              id="daily-reminder"
-              disabled={isSaving || !isNotificationSupported()}
+              disabled={isSaving}
              checked={preferences.dailyReminderEnabled}
              onCheckedChange={(checked) =>
                void handleDailyReminderToggle(checked === true)
              }
            />
          </div>
-          <div className="flex items-center justify-between rounded-lg border px-3 py-2">
-            <span className="text-sm">Browser permission</span>
-            <Badge variant="secondary">
-              {getNotificationPermissionLabel(notificationPermission)}
-            </Badge>
+          <div className="space-y-2">
+            <Label>Reminder delivery</Label>
+            <div className="space-y-2">
+              {reminderDeliveryOptions.map((option) => (
+                <button
+                  key={option.value}
+                  type="button"
+                  disabled={isSaving}
+                  onClick={() => void handleDeliveryMethodChange(option.value)}
+                  className={`w-full rounded-lg border px-3 py-3 text-left transition-colors ${
+                    preferences.dailyReminderDelivery === option.value
+                      ? "border-primary bg-primary/10"
+                      : "hover:bg-muted/40"
+                  }`}
+                >
+                  <p className="text-sm font-medium">{option.label}</p>
+                  <p className="mt-1 text-xs text-muted-foreground">
+                    {option.description}
+                  </p>
+                </button>
+              ))}
+            </div>
          </div>
+          {usesSystemReminders(preferences.dailyReminderDelivery) ? (
+            <div className="flex items-center justify-between rounded-lg border px-3 py-2">
+              <span className="text-sm">Browser permission</span>
+              <Badge variant="secondary">
+                {getNotificationPermissionLabel(notificationPermission)}
+              </Badge>
+            </div>
+          ) : null}
          <div className="space-y-2">
            <Label htmlFor="reminder-time">Daily reminder time</Label>
            <Input
@@ -265,21 +340,19 @@ export function ProfilePreferencesForm({ email }: ProfilePreferencesFormProps) {
            />
          </div>
          <p className="text-xs text-muted-foreground">
-            Reminders use your browser&apos;s local time and notify you once
-            per day when the quiz or habits are still incomplete. Keep this app
-            open in a tab for reminders to fire. On Windows, check Focus Assist
-            if notifications are hidden.
+            In-app reminders appear inside Habit Pet while a tab is open.
+            Browser (OS) reminders use the Web Notifications API and may appear
+            in your system notification center. Reminders fire once per day at
+            your chosen local time.
          </p>
          <Button
            type="button"
            variant="outline"
            className="w-full"
-            disabled={
-              isSaving || notificationPermission !== "granted"
-            }
+            disabled={isSaving}
            onClick={() => void handleTestNotification()}
          >
-            Send test notification
+            Send test reminder
          </Button>
          {notificationMessage ? (
            <p className="text-xs text-emerald-600">{notificationMessage}</p>
--- a/components/reminders/daily-reminder-provider.tsx
+++ b/components/reminders/daily-reminder-provider.tsx
@@ -5,17 +5,18 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { HABIT_PET_DATA_UPDATED_EVENT } from "@/lib/app-events";
 import { getDailyReminderStatus } from "@/lib/daily-reminder-status";
 import {
+  deliverDailyReminder,
  getNotificationPermissionState,
  getReminderCheckIntervalMs,
  hasReachedReminderTime,
  markDailyReminderSentToday,
-  showDailyReminderNotification,
  wasDailyReminderSentToday,
 } from "@/lib/daily-reminders";
 import {
  getProfilePreferences,
  type ProfilePreferences,
 } from "@/lib/profile-preferences-storage";
+import { usesInAppReminders, usesSystemReminders } from "@/lib/reminder-delivery";

 export function DailyReminderProvider() {
  const [preferences, setPreferences] = useState<ProfilePreferences | null>(
@@ -47,7 +48,11 @@ export function DailyReminderProvider() {
          return;
        }

-        if (getNotificationPermissionState() !== "granted") {
+        if (
+          usesSystemReminders(activePreferences.dailyReminderDelivery) &&
+          !usesInAppReminders(activePreferences.dailyReminderDelivery) &&
+          getNotificationPermissionState() !== "granted"
+        ) {
          return;
        }

@@ -62,7 +67,10 @@ export function DailyReminderProvider() {
        }

        if (status.needsReminder) {
-          showDailyReminderNotification(status);
+          deliverDailyReminder(
+            status,
+            activePreferences.dailyReminderDelivery,
+          );
        }

        markDailyReminderSentToday(status.dateKey);
--- a/components/reminders/in-app-reminder-banner.tsx
+++ b/components/reminders/in-app-reminder-banner.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import { Bell, X } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  IN_APP_REMINDER_EVENT,
+  type InAppReminderPayload,
+} from "@/lib/in-app-reminders";
+
+export function InAppReminderBanner() {
+  const router = useRouter();
+  const [reminder, setReminder] = useState<InAppReminderPayload | null>(null);
+
+  useEffect(() => {
+    const handleReminder = (event: Event) => {
+      const customEvent = event as CustomEvent<InAppReminderPayload>;
+      setReminder(customEvent.detail);
+    };
+
+    window.addEventListener(IN_APP_REMINDER_EVENT, handleReminder);
+
+    return () => {
+      window.removeEventListener(IN_APP_REMINDER_EVENT, handleReminder);
+    };
+  }, []);
+
+  if (!reminder) {
+    return null;
+  }
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className="fixed inset-x-0 bottom-16 z-50 px-4"
+    >
+      <div className="mx-auto flex max-w-lg items-start gap-3 rounded-xl border border-primary/30 bg-card p-4 shadow-lg">
+        <div className="rounded-full bg-primary/10 p-2">
+          <Bell aria-hidden="true" className="h-4 w-4 text-primary" />
+        </div>
+        <div className="min-w-0 flex-1 space-y-2">
+          <div>
+            <p className="font-medium leading-tight">{reminder.title}</p>
+            <p className="mt-1 text-sm text-muted-foreground">{reminder.body}</p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Button
+              type="button"
+              size="sm"
+              onClick={() => {
+                setReminder(null);
+                router.push(reminder.targetUrl);
+              }}
+            >
+              Open Pet tab
+            </Button>
+            <Button
+              type="button"
+              size="sm"
+              variant="outline"
+              onClick={() => setReminder(null)}
+            >
+              Dismiss
+            </Button>
+          </div>
+        </div>
+        <Button
+          type="button"
+          size="icon"
+          variant="ghost"
+          className="h-8 w-8 shrink-0"
+          aria-label="Dismiss reminder"
+          onClick={() => setReminder(null)}
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}