Improve unsaved draft handling (#72)

* add unsaved draft warnings

* improve unsaved draft handling

* fix smooth scroll route warning

* address draft warning review feedback

* address dialog and location review feedback

* harden draft persistence and dirty tracking

* fix new chat thread draft sync

* preserve new chat draft on send failure

Author: dnywh

e2e/chat.spec.ts

@@ -125,6 +125,17 @@ test("chat send disables the composer while pending and appends the new message"
   await expect(composerInput).toBeDisabled();
   await expect(messageVisible).toBeVisible();
   await expect(composerInput).toHaveValue("");
+  await expect
+    .poll(async () =>
+      page.evaluate((threadId) => {
+        const draftEntry = Object.entries(sessionStorage).find(([key]) =>
+          key.endsWith(`:${threadId}`)
+        );
+
+        return draftEntry?.[1] ?? null;
+      }, SEEDED_THREAD_ID)
+    )
+    .toBeNull();
 });
 
 test("chat send failures preserve the draft and show inline feedback", async ({
@@ -148,6 +159,103 @@ test("chat send failures preserve the draft and show inline feedback", async ({
   await expect(page.getByText("Synthetic chat failure")).toBeVisible();
 });
 
+test("chat preserves unsent drafts when switching threads", async ({
+  page,
+}) => {
+  await signIn(page, {
+    email: DONOR_EMAIL,
+    redirectTo: `/chats/${SEEDED_THREAD_ID}`,
+  });
+
+  const composerInput = page.getByTestId("chat-composer-input");
+  const draftMessage = `Thread switch draft ${Date.now()}`;
+
+  await composerInput.click();
+  await composerInput.pressSequentially(draftMessage);
+  await expect(composerInput).toHaveValue(draftMessage);
+
+  await page.getByTestId(`thread-preview-${SECOND_SEEDED_THREAD_ID}`).click();
+  await expect(page).toHaveURL(
+    new RegExp(`/chats/${SECOND_SEEDED_THREAD_ID}$`)
+  );
+  await expect(page.getByTestId("chat-composer-input")).toHaveValue("");
+
+  await page.getByTestId(`thread-preview-${SEEDED_THREAD_ID}`).click();
+  await expect(page).toHaveURL(new RegExp(`/chats/${SEEDED_THREAD_ID}$`));
+  await expect(page.getByTestId("chat-composer-input")).toHaveValue(
+    draftMessage
+  );
+});
+
+test("chat restores unsent drafts after leaving and returning in the same tab", async ({
+  page,
+}) => {
+  await signIn(page, {
+    email: DONOR_EMAIL,
+    redirectTo: `/chats/${SEEDED_THREAD_ID}`,
+  });
+
+  const draftMessage = `Route return draft ${Date.now()}`;
+
+  await page.getByTestId("chat-composer-input").pressSequentially(draftMessage);
+  await expect(page.getByTestId("chat-composer-input")).toHaveValue(
+    draftMessage
+  );
+
+  page.once("dialog", async (dialog) => {
+    expect(dialog.type()).toBe("beforeunload");
+    await dialog.accept();
+  });
+  await page.goto("/chats");
+  await expect(page.getByTestId("thread-list")).toBeVisible();
+
+  await page.goto(`/chats/${SEEDED_THREAD_ID}`);
+  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 ({
+  page,
+}) => {
+  await signIn(page, {
+    email: DONOR_EMAIL,
+    redirectTo: `/chats/${SEEDED_THREAD_ID}`,
+  });
+
+  const composerInput = page.getByTestId("chat-composer-input");
+  await composerInput.click();
+  await composerInput.pressSequentially(`Unsent chat draft ${Date.now()}`);
+
+  const dialogPromise = page.waitForEvent("dialog");
+  const reloadPromise = page.reload({ waitUntil: "domcontentloaded" });
+  const dialog = await dialogPromise;
+  expect(dialog.type()).toBe("beforeunload");
+  await dialog.accept();
+  await reloadPromise;
+});
+
+test("empty chat composers reload without an unsaved draft warning", async ({
+  page,
+}) => {
+  await signIn(page, {
+    email: DONOR_EMAIL,
+    redirectTo: `/chats/${SEEDED_THREAD_ID}`,
+  });
+
+  await expect(page.getByTestId("chat-composer-input")).toHaveValue("");
+
+  const dialogMessages: string[] = [];
+  page.once("dialog", async (dialog) => {
+    dialogMessages.push(dialog.message());
+    await dialog.dismiss();
+  });
+
+  await page.reload({ waitUntil: "domcontentloaded" });
+
+  expect(dialogMessages).toEqual([]);
+});
+
 test("invalid chat thread ids redirect back to the chat index", async ({
   page,
 }) => {

e2e/listings.spec.ts

@@ -15,6 +15,19 @@ const RESIDENTIAL_LISTING_EDIT_PATH =
 const ALTERNATE_BUSINESS_DESCRIPTION =
   "A demo business listing with a slightly different description for e2e coverage.";
 
+function requireHref(href: string | null) {
+  expect(
+    href,
+    "Expected listing photo thumbnail to have an href"
+  ).not.toBeNull();
+
+  if (!href) {
+    throw new Error("Expected listing photo thumbnail to have an href");
+  }
+
+  return href;
+}
+
 test("profile loads the seeded host account and listings", async ({ page }) => {
   await signIn(page, { email: HOST_EMAIL, redirectTo: "/profile" });
 
@@ -83,7 +96,7 @@ test("listing edit saves and restores seeded business fields", async ({
   const listingWriteForm = page.getByTestId("listing-write-form");
   await expect(listingWriteForm).toBeVisible();
   const descriptionInput = listingWriteForm.locator("#description").first();
-  const visibilityInput = listingWriteForm.locator("#visibility");
+  const visibilityInput = listingWriteForm.locator("#visibility").first();
   const originalDescription = await descriptionInput.inputValue();
   const originalVisibility = await visibilityInput.inputValue();
   const updatedDescription =
@@ -111,7 +124,7 @@ test("listing edit saves and restores seeded business fields", async ({
   await expect(listingWriteForm.locator("#description").first()).toHaveValue(
     updatedDescription
   );
-  await expect(listingWriteForm.locator("#visibility")).toHaveValue(
+  await expect(listingWriteForm.locator("#visibility").first()).toHaveValue(
     updatedVisibility
   );
 
@@ -132,11 +145,87 @@ test("listing edit saves and restores seeded business fields", async ({
   await expect(listingWriteForm.locator("#description").first()).toHaveValue(
     originalDescription
   );
-  await expect(listingWriteForm.locator("#visibility")).toHaveValue(
+  await expect(listingWriteForm.locator("#visibility").first()).toHaveValue(
     originalVisibility
   );
 });
 
+test("dirty listing edit asks before viewing the saved listing", async ({
+  page,
+}) => {
+  await signIn(page, {
+    email: HOST_EMAIL,
+    redirectTo: BUSINESS_LISTING_EDIT_PATH,
+  });
+
+  const listingWriteForm = page.getByTestId("listing-write-form");
+  await expect(listingWriteForm).toBeVisible();
+  const descriptionInput = listingWriteForm.locator("#description").first();
+  const draftDescription = `Unsaved listing preview draft ${Date.now()}`;
+  const viewListingButton = page.getByRole("button", { name: "View listing" });
+
+  await descriptionInput.fill(draftDescription);
+
+  await viewListingButton.click();
+  await expect(
+    page.getByRole("heading", { name: "Discard changes" })
+  ).toBeVisible();
+  await expect(
+    page.getByText(
+      "You have unsaved changes. Are you sure you want to discard them and leave?"
+    )
+  ).toBeVisible();
+  await page.getByRole("button", { name: "No, go back" }).click();
+
+  await expect(page).toHaveURL(/\/profile\/listings\/demo-inner-west-cafe$/);
+  await expect(descriptionInput).toHaveValue(draftDescription);
+
+  await viewListingButton.click();
+  await page.getByRole("button", { name: "Yes, discard" }).click();
+
+  await expect(page).toHaveURL(/\/listings\/demo-inner-west-cafe$/);
+});
+
+test("dirty new listing forms warn before closing or reloading the page", async ({
+  page,
+}) => {
+  await signIn(page, {
+    email: HOST_EMAIL,
+    redirectTo: "/profile/listings/new/business",
+  });
+
+  await expect(page.getByTestId("listing-write-form")).toBeVisible();
+  await page.locator("#name").fill(`Unsaved new listing ${Date.now()}`);
+
+  const dialogPromise = page.waitForEvent("dialog");
+  const reloadPromise = page.reload({ waitUntil: "domcontentloaded" });
+  const dialog = await dialogPromise;
+  expect(dialog.type()).toBe("beforeunload");
+  await dialog.accept();
+  await reloadPromise;
+});
+
+test("clean listing edit views the saved listing without asking", async ({
+  page,
+}) => {
+  await signIn(page, {
+    email: HOST_EMAIL,
+    redirectTo: BUSINESS_LISTING_EDIT_PATH,
+  });
+
+  await expect(page.getByTestId("listing-write-form")).toBeVisible();
+  const dialogMessages: string[] = [];
+  page.on("dialog", async (dialog) => {
+    dialogMessages.push(dialog.message());
+    await dialog.dismiss();
+  });
+
+  await page.getByRole("link", { name: "View listing" }).click();
+
+  await expect(page).toHaveURL(/\/listings\/demo-inner-west-cafe$/);
+  expect(dialogMessages).toEqual([]);
+});
+
 test("residential listing edit leaves avatar management on the profile page", async ({
   page,
 }) => {
@@ -159,13 +248,13 @@ test("listing photos open in a dedicated photo tab", async ({ page }) => {
   await expect(firstThumbnail).toBeVisible();
   await expect(firstThumbnail).toHaveAttribute("target", "_blank");
 
-  const href = await firstThumbnail.getAttribute("href");
+  const href = requireHref(await firstThumbnail.getAttribute("href"));
   expect(href).toBe(
     "/listings/demo-marrickville-compost/photos/demo/garden.jpg"
   );
 
   const photoPage = await page.context().newPage();
-  await photoPage.goto(`http://127.0.0.1:3000${href}`);
+  await photoPage.goto(new URL(href, page.url()).toString());
   await expect(photoPage.getByTestId("listing-photo-tab-viewer")).toBeVisible();
   await expect(photoPage.getByRole("navigation")).toHaveCount(0);
   await expect(page).toHaveURL(PUBLIC_MULTI_PHOTO_LISTING_PATH);
@@ -192,13 +281,13 @@ test("map listing photos open in a dedicated photo tab without disturbing the dr
   await expect(firstThumbnail).toBeVisible();
   await expect(firstThumbnail).toHaveAttribute("target", "_blank");
 
-  const href = await firstThumbnail.getAttribute("href");
+  const href = requireHref(await firstThumbnail.getAttribute("href"));
   expect(href).toBe(
     "/listings/demo-marrickville-compost/photos/demo/garden.jpg"
   );
 
   const photoPage = await page.context().newPage();
-  await photoPage.goto(`http://127.0.0.1:3000${href}`);
+  await photoPage.goto(new URL(href, page.url()).toString());
   await expect(photoPage.getByTestId("listing-photo-tab-viewer")).toBeVisible();
   await expect(page).toHaveURL(MAP_MULTI_PHOTO_LISTING_PATH);
   await expect(firstThumbnail).toBeVisible();

messages/de.json

@@ -350,7 +350,11 @@
     },
     "edit": {
       "title": "Eintrag bearbeiten",
-      "notFound": "Eintrag nicht gefunden"
+      "notFound": "Eintrag nicht gefunden",
+      "discardChangesTitle": "Änderungen verwerfen",
+      "discardChangesBody": "Du hast ungespeicherte Änderungen. Möchtest du sie wirklich verwerfen und die Seite verlassen?",
+      "discardChangesCancel": "Nein, zurück",
+      "discardChangesConfirm": "Ja, verwerfen"
     },
     "form": {
       "basics": "Grundlagen",

messages/en.json

@@ -350,7 +350,11 @@
     },
     "edit": {
       "title": "Edit listing",
-      "notFound": "Listing not found"
+      "notFound": "Listing not found",
+      "discardChangesTitle": "Discard changes",
+      "discardChangesBody": "You have unsaved changes. Are you sure you want to discard them and leave?",
+      "discardChangesCancel": "No, go back",
+      "discardChangesConfirm": "Yes, discard"
     },
     "form": {
       "basics": "Basics",

messages/es.json

@@ -350,7 +350,11 @@
     },
     "edit": {
       "title": "Editar anuncio",
-      "notFound": "Anuncio no encontrado"
+      "notFound": "Anuncio no encontrado",
+      "discardChangesTitle": "Descartar cambios",
+      "discardChangesBody": "Tienes cambios sin guardar. ¿Seguro que quieres descartarlos y salir?",
+      "discardChangesCancel": "No, volver",
+      "discardChangesConfirm": "Sí, descartar"
     },
     "form": {
       "basics": "Datos básicos",

messages/fr.json

@@ -350,7 +350,11 @@
     },
     "edit": {
       "title": "Modifier l’annonce",
-      "notFound": "Annonce introuvable"
+      "notFound": "Annonce introuvable",
+      "discardChangesTitle": "Ignorer les modifications",
+      "discardChangesBody": "Vous avez des modifications non enregistrées. Voulez-vous vraiment les ignorer et quitter la page ?",
+      "discardChangesCancel": "Non, revenir",
+      "discardChangesConfirm": "Oui, ignorer"
     },
     "form": {
       "basics": "Informations de base",

messages/pt-BR.json

@@ -350,7 +350,11 @@
     },
     "edit": {
       "title": "Editar anúncio",
-      "notFound": "Anúncio não encontrado"
+      "notFound": "Anúncio não encontrado",
+      "discardChangesTitle": "Descartar alterações",
+      "discardChangesBody": "Você tem alterações não salvas. Tem certeza de que quer descartá-las e sair?",
+      "discardChangesCancel": "Não, voltar",
+      "discardChangesConfirm": "Sim, descartar"
     },
     "form": {
       "basics": "Informações básicas",

src/app/layout.tsx

@@ -79,7 +79,7 @@ export default async function RootLayout({
   const inlineFontFaces = hostedFontFaces.trim();
 
   return (
-    <html lang={locale}>
+    <html lang={locale} data-scroll-behavior="smooth">
       <body>
         {inlineFontFaces ? <style>{inlineFontFaces}</style> : null}
         <AuthHashCompletion />

src/components/ButtonToDialog/ButtonToDialog.tsx

@@ -15,6 +15,7 @@ import {
 } from "react";
 import { useTranslations } from "next-intl";
 import type { FormSubmitHandler } from "@/types/events";
+import type { ButtonVariant } from "@/components/Button";
 
 const DialogContent = styled(Dialog.Content)`
   background: ${theme.colors.background.top};
@@ -66,8 +67,11 @@ const DialogOverlay = styled(Dialog.Overlay)`
   z-index: 3;
 `;
 
+type DialogVariant = Extract<ButtonVariant, "primary" | "secondary" | "danger">;
+
 type ButtonToDialogProps = {
-  variant?: "primary" | "secondary" | "danger";
+  variant?: DialogVariant;
+  triggerVariant?: ButtonVariant;
   size?: "massive" | "large" | "normal" | "small";
   initialButtonText: ReactNode;
   dialogTitle: ReactNode;
@@ -83,6 +87,7 @@ type ButtonToDialogProps = {
 
 function ButtonToDialog({
   variant = "danger",
+  triggerVariant,
   size,
   initialButtonText,
   dialogTitle,
@@ -138,7 +143,7 @@ function ButtonToDialog({
       <Dialog.Trigger asChild>
         <Button
           width="contained"
-          variant={variant}
+          variant={triggerVariant ?? variant}
           size={size}
           disabled={disabled || isPending}
         >