feat: added never remind me to key reminder.

src/core/hooks/useKeyBackupReminder.tsx

@@ -1,15 +1,13 @@
-import { Button } from "../../components/UI/Button.tsx";
-import type { CookieAttributes } from "js-cookie";
+import { Button } from "@components/UI/Button.tsx";
 import { useCallback, useEffect, useRef } from "react";
-import useCookie from "./useCookie.ts";
-import { useToast } from "./useToast.ts";
+import { useToast } from "@core/hooks/useToast.ts";
+import useLocalStorage from "@core/hooks/useLocalStorage.ts";
 
 interface UseBackupReminderOptions {
   reminderInDays?: number;
   message: string;
   onAccept?: () => void | Promise<void>;
   enabled: boolean;
-  cookieOptions?: CookieAttributes;
 }
 
 interface ReminderState {
@@ -17,17 +15,15 @@ interface ReminderState {
   lastShown: string;
 }
 
-const TOAST_APPEAR_DELAY = 10_000; // 10 seconds;
-const TOAST_DURATION = 30_000; // 30 seconds;:
-
-// remind user in 1 year to backup keys again, if they accept the reminder;
+const TOAST_APPEAR_DELAY = 10_000; // 10 seconds
+const TOAST_DURATION = 30_000; // 30 seconds
 const ON_ACCEPT_REMINDER_DAYS = 365;
+const STORAGE_KEY = "key_backup_reminder";
 
 function isReminderExpired(lastShown: string): boolean {
   const lastShownDate = new Date(lastShown);
   const now = new Date();
-  const daysSinceLastShown = (now.getTime() - lastShownDate.getTime()) /
-    (1000 * 60 * 60 * 24);
+  const daysSinceLastShown = (now.getTime() - lastShownDate.getTime()) / (1000 * 60 * 60 * 24);
   return daysSinceLastShown >= 7;
 }
 
@@ -35,36 +31,32 @@ export function useBackupReminder({
   reminderInDays = 7,
   enabled,
   message,
-  onAccept = () => {},
-  cookieOptions,
+  onAccept = () => { },
 }: UseBackupReminderOptions) {
   const { toast } = useToast();
   const toastShownRef = useRef(false);
-  const { value: reminderCookie, setCookie } = useCookie<ReminderState>(
-    "key_backup_reminder",
+  const [reminderState, setReminderState] = useLocalStorage<ReminderState | null>(
+    STORAGE_KEY,
+    null
   );
 
-  const suppressReminder = useCallback(
-    (days: number) => {
-      const expiryDate = new Date();
-      expiryDate.setDate(expiryDate.getDate() + days);
+  // Suppress reminder for 10 years if not specified
+  const suppressReminder = useCallback((days: number = 3563) => {
+    const expiryDate = new Date();
+    expiryDate.setDate(expiryDate.getDate() + days);
 
-      setCookie(
-        {
-          suppressed: true,
-          lastShown: new Date().toISOString(),
-        },
-        { ...cookieOptions, expires: expiryDate },
-      );
-    },
-    [setCookie, cookieOptions],
-  );
+    setReminderState({
+      suppressed: true,
+      lastShown: new Date().toISOString(),
+    });
+  }, [setReminderState]);
 
   useEffect(() => {
     if (!enabled || toastShownRef.current) return;
 
-    const shouldShowReminder = !reminderCookie?.suppressed ||
-      isReminderExpired(reminderCookie.lastShown);
+    const shouldShowReminder =
+      !reminderState?.suppressed || isReminderExpired(reminderState.lastShown);
+
     if (!shouldShowReminder) return;
 
     toastShownRef.current = true;
@@ -75,28 +67,46 @@ export function useBackupReminder({
       delay: TOAST_APPEAR_DELAY,
       description: message,
       action: (
-        <div className="flex gap-2">
-          <Button
-            type="button"
-            variant="default"
-            onClick={() => {
-              onAccept();
-              dismiss();
-              suppressReminder(ON_ACCEPT_REMINDER_DAYS);
-            }}
-          >
-            Back up now
-          </Button>
-          <Button
-            type="button"
-            variant="outline"
-            onClick={() => {
-              dismiss();
-              suppressReminder(reminderInDays);
-            }}
-          >
-            Remind me in {reminderInDays} days
-          </Button>
+        <div className="flex flex-col gap-2">
+          <div className="flex gap-2">
+
+            <Button
+              type="button"
+              variant="outline"
+              className="p-1"
+              onClick={() => {
+                dismiss();
+                suppressReminder(reminderInDays);
+              }}
+            >
+              Remind me in {reminderInDays} days
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              className="p-1"
+              onClick={() => {
+                dismiss();
+                suppressReminder();
+              }}
+            >
+              Never remind me
+            </Button>
+          </div>
+          <div className="flex">
+            <Button
+              type="button"
+              variant="default"
+              className="w-full"
+              onClick={() => {
+                onAccept();
+                dismiss();
+                suppressReminder(ON_ACCEPT_REMINDER_DAYS);
+              }}
+            >
+              Back up now
+            </Button>
+          </div>
         </div>
       ),
     });
@@ -113,6 +123,6 @@ export function useBackupReminder({
     reminderInDays,
     suppressReminder,
     toast,
-    reminderCookie,
+    reminderState,
   ]);
 }