fix: Clear report form draft on successful submission (#907)

The localStorage draft was persisting after successful submission because
the server action redirects before the cleanup effect could run.

Fix: Add ClearReportDraft component to success page that clears localStorage
when mounted, ensuring the draft is cleared before user navigates back.

Added E2E test to verify:
- Title and description are empty after "Report Another Issue"
- Machine resets to default (not restored from draft)
- localStorage is cleared on success page

Closes PinPoint-gdk

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: timothyfroehlich

e2e/smoke/public-reporting.spec.ts

@@ -157,4 +157,62 @@ test.describe("Public Issue Reporting", () => {
     await page.getByRole("link", { name: "Report Another Issue" }).click();
     await expect(page).toHaveURL("/report");
   });
+
+  test("should clear form draft after successful submission", async ({
+    page,
+  }) => {
+    // Submit an issue first - select the SECOND machine (index 1)
+    await page.goto("/report");
+    const select = page.getByTestId("machine-select");
+
+    // Get the first (default) machine value before changing
+    const defaultMachineId = await select.inputValue();
+    expect(defaultMachineId).toBeTruthy(); // Should have a default
+
+    // Select a different machine (use index 3 to ensure it's different from default)
+    await select.selectOption({ index: 3 });
+    const selectedMachineId = await select.inputValue();
+    expect(selectedMachineId).not.toBe(defaultMachineId);
+    await expect(page).toHaveURL(/machine=/);
+
+    const issueTitle = `${PUBLIC_PREFIX} Draft Clear Test ${Date.now()}`;
+    await fillReportForm(page, {
+      title: issueTitle,
+      description: "This should not persist after submission.",
+      includePriority: false,
+    });
+
+    await page.getByRole("button", { name: "Submit Issue Report" }).click();
+    await expect(page).toHaveURL("/report/success");
+
+    // Wait for success page to load and ClearReportDraft effect to run
+    await expect(
+      page.getByRole("heading", { name: "Issue Sent!" })
+    ).toBeVisible();
+
+    // Verify localStorage was cleared on success page
+    const draftAfterSuccess = await page.evaluate(() =>
+      window.localStorage.getItem("report_form_state")
+    );
+    expect(draftAfterSuccess).toBeNull();
+
+    // Click "Report Another Issue"
+    await page.getByRole("link", { name: "Report Another Issue" }).click();
+
+    // Wait for the report page to load
+    await expect(page).toHaveURL("/report");
+    await expect(
+      page.getByRole("heading", { name: "Report an Issue" })
+    ).toBeVisible();
+
+    // Verify text fields are empty (draft cleared, not restored)
+    await expect(page.getByLabel("Issue Title")).toHaveValue("");
+    await expect(page.getByLabel("Description")).toHaveValue("");
+
+    // Machine should be back to DEFAULT (first in list), not the one we selected
+    // This verifies draft wasn't restored - the form uses first machine as default
+    const machineAfterReset = await select.inputValue();
+    expect(machineAfterReset).toBe(defaultMachineId);
+    expect(machineAfterReset).not.toBe(selectedMachineId);
+  });
 });

src/app/report/success/clear-draft.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { useEffect } from "react";
+
+/**
+ * Client component that clears the report form draft from localStorage.
+ * Mounted on the success page to ensure drafts are cleared after successful submission.
+ *
+ * This is needed because the server action redirects before the client-side
+ * cleanup effect in the form component can run.
+ */
+export function ClearReportDraft(): null {
+  useEffect(() => {
+    window.localStorage.removeItem("report_form_state");
+  }, []);
+
+  return null;
+}

src/app/report/success/page.tsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 import { CheckCircle } from "lucide-react";
 import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
+import { ClearReportDraft } from "./clear-draft";
 
 export default async function ReportSuccessPage({
   searchParams,
@@ -35,6 +36,7 @@ export default async function ReportSuccessPage({
 
   return (
     <main className="min-h-screen bg-surface py-12">
+      <ClearReportDraft />
       <div className="container mx-auto max-w-xl px-4">
         <Card className="border-outline-variant bg-surface shadow-lg text-center p-6">
           <CardHeader className="space-y-3 pb-4">