harden draft persistence and dirty tracking

dnywh · dnywh · commit 29fbf5bb9179 · 2026-05-08T16:15:15.000+10:00
diff --git a/e2e/chat.spec.ts b/e2e/chat.spec.ts
@@ -210,9 +210,9 @@ test("chat restores unsent drafts after leaving and returning in the same tab",
   await expect(page.getByTestId("thread-list")).toBeVisible();
 
   await page.goto(`/chats/${SEEDED_THREAD_ID}`);
-  await expect(page.getByTestId("chat-composer-input")).toHaveValue(
-    draftMessage
-  );
+  await expect(
+    page.getByRole("textbox", { name: "Send a message to Avery..." })
+  ).toHaveValue(draftMessage);
 });
 
 test("unsent chat drafts warn before closing or reloading the page", async ({
diff --git a/src/components/ChatWindow/ChatWindow.tsx b/src/components/ChatWindow/ChatWindow.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { theme } from "@/styles/theme.yak";
-import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { User } from "@supabase/supabase-js";
 
 import { createClient } from "@/utils/supabase/client";
@@ -85,6 +85,42 @@ function getChatDraftStorageKey({
   return `peels:chat-draft:${userId}:${threadId}`;
 }
 
+function readChatDraft(key: string) {
+  if (typeof window === "undefined") {
+    return "";
+  }
+
+  try {
+    return window.sessionStorage.getItem(key) || "";
+  } catch {
+    return "";
+  }
+}
+
+function writeChatDraft(key: string, message: string) {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  try {
+    window.sessionStorage.setItem(key, message);
+  } catch {
+    // Ignore storage failures, such as private browsing restrictions.
+  }
+}
+
+function removeChatDraft(key: string) {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  try {
+    window.sessionStorage.removeItem(key);
+  } catch {
+    // Ignore storage failures, such as private browsing restrictions.
+  }
+}
+
 function getClientTimeZone() {
   return (
     Intl.DateTimeFormat().resolvedOptions().timeZone ?? CHAT_RENDER_TIME_ZONE
@@ -247,14 +283,14 @@ const ChatWindow = memo(function ChatWindow({
     return errorMessage;
   }
 
-  function clearPendingDraftWrite() {
+  const clearPendingDraftWrite = useCallback(() => {
     if (draftWriteTimeoutRef.current) {
       clearTimeout(draftWriteTimeoutRef.current);
       draftWriteTimeoutRef.current = null;
     }
-  }
+  }, []);
 
-  function flushPendingDraftWrite() {
+  const flushPendingDraftWrite = useCallback(() => {
     clearPendingDraftWrite();
 
     if (!pendingDraftWriteRef.current) {
@@ -263,28 +299,55 @@ const ChatWindow = memo(function ChatWindow({
 
     const { key, message } = pendingDraftWriteRef.current;
     pendingDraftWriteRef.current = null;
-    sessionStorage.setItem(key, message);
-  }
+    writeChatDraft(key, message);
+  }, [clearPendingDraftWrite]);
 
-  function scheduleDraftWrite(key: string, nextMessage: string) {
-    clearPendingDraftWrite();
-    pendingDraftWriteRef.current = {
-      key,
-      message: nextMessage,
-    };
-    draftWriteTimeoutRef.current = setTimeout(() => {
+  const scheduleDraftWrite = useCallback(
+    (key: string, nextMessage: string) => {
+      clearPendingDraftWrite();
+      pendingDraftWriteRef.current = {
+        key,
+        message: nextMessage,
+      };
+      draftWriteTimeoutRef.current = setTimeout(() => {
+        flushPendingDraftWrite();
+      }, CHAT_DRAFT_WRITE_DELAY_MS);
+    },
+    [clearPendingDraftWrite, flushPendingDraftWrite]
+  );
+
+  const removeDraftWrite = useCallback(
+    (key: string) => {
+      if (pendingDraftWriteRef.current?.key === key) {
+        clearPendingDraftWrite();
+        pendingDraftWriteRef.current = null;
+      }
+
+      removeChatDraft(key);
+    },
+    [clearPendingDraftWrite]
+  );
+
+  useEffect(() => {
+    const handlePageHide = () => {
       flushPendingDraftWrite();
-    }, CHAT_DRAFT_WRITE_DELAY_MS);
-  }
+    };
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "hidden") {
+        flushPendingDraftWrite();
+      }
+    };
 
-  function removeDraftWrite(key: string) {
-    if (pendingDraftWriteRef.current?.key === key) {
-      clearPendingDraftWrite();
-      pendingDraftWriteRef.current = null;
-    }
+    window.addEventListener("beforeunload", handlePageHide);
+    window.addEventListener("pagehide", handlePageHide);
+    document.addEventListener("visibilitychange", handleVisibilityChange);
 
-    sessionStorage.removeItem(key);
-  }
+    return () => {
+      window.removeEventListener("beforeunload", handlePageHide);
+      window.removeEventListener("pagehide", handlePageHide);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [flushPendingDraftWrite]);
 
   useEffect(() => {
     setClientTimeZone(getClientTimeZone());
@@ -294,17 +357,15 @@ const ChatWindow = memo(function ChatWindow({
     flushPendingDraftWrite();
     setThreadId(existingThread?.id ?? null);
     setMessages(getThreadMessages(existingThread));
-    setMessage(
-      draftStorageKey ? sessionStorage.getItem(draftStorageKey) || "" : ""
-    );
+    setMessage(draftStorageKey ? readChatDraft(draftStorageKey) : "");
     lastReadSignatureRef.current = null;
-  }, [draftStorageKey, existingThread]);
+  }, [draftStorageKey, existingThread, flushPendingDraftWrite]);
 
   useEffect(
     () => () => {
       flushPendingDraftWrite();
     },
-    []
+    [flushPendingDraftWrite]
   );
 
   useEffect(() => {
diff --git a/src/components/ListingWrite/ListingWrite.tsx b/src/components/ListingWrite/ListingWrite.tsx
@@ -2,6 +2,7 @@
 
 import { theme } from "@/styles/theme.yak";
 import {
+  useCallback,
   useEffect,
   useMemo,
   useState,
@@ -224,6 +225,9 @@ export default function ListingWrite({
   );
   const [pendingPhotos, setPendingPhotos] = useState<string[]>([]);
   const [hasInteractedWithForm, setHasInteractedWithForm] = useState(false);
+  const markFormInteracted = useCallback(() => {
+    setHasInteractedWithForm(true);
+  }, []);
 
   const isMutating = submitMutation.isPending || deleteMutation.isPending;
   const initialListingValues = useMemo(
@@ -490,14 +494,28 @@ export default function ListingWrite({
     });
   };
 
+  const handlePhotosChange = useCallback(
+    (nextPhotos: string[]) => {
+      markFormInteracted();
+
+      if (initialListing) {
+        setPhotos(nextPhotos);
+        return;
+      }
+
+      setPendingPhotos(nextPhotos);
+    },
+    [initialListing, markFormInteracted]
+  );
+
   return (
     <>
       {initialListing?.is_stub && <Lozenge>{t("Common.stub")}</Lozenge>}
 
       <Form
         onSubmit={handleSubmit}
-        onChange={() => setHasInteractedWithForm(true)}
-        onInput={() => setHasInteractedWithForm(true)}
+        onChange={markFormInteracted}
+        onInput={markFormInteracted}
         data-testid="listing-write-form"
         data-hydrated={isHydrated ? "true" : "false"}
       >
@@ -578,6 +596,7 @@ export default function ListingWrite({
               areaName={areaName}
               setAreaName={setAreaName}
               autoDetectCountry={!initialListing}
+              onLocationInteract={markFormInteracted}
               error={errors.location}
             />
 
@@ -698,7 +717,7 @@ export default function ListingWrite({
               <ListingPhotosManager
                 initialPhotos={initialListing ? photos : pendingPhotos}
                 listingSlug={initialListing?.slug}
-                onPhotosChange={initialListing ? setPhotos : setPendingPhotos}
+                onPhotosChange={handlePhotosChange}
                 isNewListing={!initialListing}
               />
             </FieldsetWithGap>
diff --git a/src/components/ListingWrite/listingWriteController.ts b/src/components/ListingWrite/listingWriteController.ts
@@ -53,6 +53,7 @@ export type LocationSelectProps = {
   setAreaName: Dispatch<SetStateAction<string>>;
   initialPlaceholderText?: string;
   autoDetectCountry?: boolean;
+  onLocationInteract?: () => void;
   error?: string;
 };
 
diff --git a/src/components/LocationSelect/LocationSelect.tsx b/src/components/LocationSelect/LocationSelect.tsx
@@ -58,6 +58,7 @@ type LocationSelectProps = {
   setAreaName: Dispatch<SetStateAction<string>>;
   initialPlaceholderText?: string;
   autoDetectCountry?: boolean;
+  onLocationInteract?: () => void;
   error?: string;
 };
 
@@ -150,6 +151,7 @@ export default function LocationSelect({
   setAreaName,
   initialPlaceholderText,
   autoDetectCountry = true,
+  onLocationInteract,
   error,
 }: LocationSelectProps) {
   const t = useTranslations();
@@ -191,12 +193,13 @@ export default function LocationSelect({
 
   const handleCountryChange = useCallback(
     (e: ChangeEvent<HTMLSelectElement>) => {
+      onLocationInteract?.();
       setCountryCode(e.target.value);
       console.log("Country changed, focusing input...");
       setMapShown(false);
       inputRef.current?.focus();
     },
-    [setCountryCode]
+    [onLocationInteract, setCountryCode]
   );
 
   const handleDragStart = useCallback(() => {
@@ -209,6 +212,7 @@ export default function LocationSelect({
   const handleDragEnd = useCallback(
     async (event: any) => {
       console.log("Drag end. Location:", event.lngLat);
+      onLocationInteract?.();
 
       const nextCoordinates = {
         latitude: event.lngLat.lat,
@@ -224,7 +228,7 @@ export default function LocationSelect({
       setAreaName(nextAreaName);
       setPlaceholderText(nextAreaName);
     },
-    [setCoordinates, setAreaName]
+    [onLocationInteract, setCoordinates, setAreaName]
   );
 
   const handlePick = useCallback(
@@ -235,6 +239,7 @@ export default function LocationSelect({
 
       // Otherwise continue as normal
       console.log("Picked:", event, event.feature?.center);
+      onLocationInteract?.();
 
       const nextCoordinates = {
         latitude: event.feature?.center[1],
@@ -269,7 +274,7 @@ export default function LocationSelect({
         setCoordinates(nextCoordinates);
       }
     },
-    [mapShown, coordinates, setCoordinates, setAreaName]
+    [mapShown, coordinates, onLocationInteract, setCoordinates, setAreaName]
   );
 
   return (
