Fix a bundle regression, silent save failures and duplicate dates

Quality pass. Three real bugs, one of which I introduced last change.

The report sheet was imported eagerly by App, and it pulls in the
Firestore SDK — which silently undid the entry-chunk split and took
first load from 103 KB back to 236 KB gzipped. A signed-out visitor was
downloading the whole database SDK again. It's lazy now, like Home, and
the entry chunk is back to 103 KB.

No write path handled failure. Firestore applies a write locally and
rolls it back if the server rejects it, so a refused save looked like
the date appearing and then vanishing by itself, with nothing said.
Failures now surface as a dismissable alert.

Double-tapping "add it" created duplicate dates. The first fix for this
was wrong and the test caught it: setSaving(true) lands on the next
render, so three taps in one tick all read false. It uses a ref now,
which updates synchronously — verified three taps produce one date.

Also: "back to today" on the calendar, appearing only once you've paged
away from the current month, and dropped the "what gets sent with it"
disclosure from the report form.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: Kjubikstronk

src/App.tsx

@@ -1,7 +1,6 @@
 import { Suspense, lazy, useState } from 'react'
 import Device from './components/Device'
 import PixelHeart from './components/PixelHeart'
-import ReportSheet from './components/ReportSheet'
 import Login from './screens/Login'
 import { AuthProvider, useAuth } from './lib/auth'
 import { isConfigured } from './lib/firebase'
@@ -15,6 +14,13 @@ import { PREVIEW } from './lib/preview'
  */
 const Home = lazy(() => import('./screens/Home'))
 
+/**
+ * Lazy for the same reason as Home: it pulls in the Firestore SDK, and a
+ * signed-out visitor must not download that. Importing it eagerly here silently
+ * undid the entry-chunk split and more than doubled first load.
+ */
+const ReportSheet = lazy(() => import('./components/ReportSheet'))
+
 export default function App() {
   return (
     <AuthProvider>
@@ -51,7 +57,11 @@ function Gate() {
         <Suspense fallback={<Booting />}>
           <Home />
         </Suspense>
-        <ReportSheet openRequest={reportReq} onClose={() => setReportReq(0)} />
+        {reportReq > 0 && (
+          <Suspense fallback={null}>
+            <ReportSheet openRequest={reportReq} onClose={() => setReportReq(0)} />
+          </Suspense>
+        )}
       </Device>
     )
   }

src/components/Calendar.tsx

@@ -94,9 +94,20 @@ export default function Calendar({
           ◀
         </button>
 
-        <h2 className="font-[family-name:var(--font-display)] text-base font-bold sm:text-lg">
-          {format(month, 'MMMM yyyy').toLowerCase()}
-        </h2>
+        <span className="flex min-w-0 flex-col items-center">
+          <h2 className="truncate font-[family-name:var(--font-display)] text-base font-bold sm:text-lg">
+            {format(month, 'MMMM yyyy').toLowerCase()}
+          </h2>
+          {!isSameMonth(month, new Date()) && (
+            <button
+              type="button"
+              className="legend mt-0.5 px-2 py-1 text-[var(--color-deep)] underline underline-offset-2"
+              onClick={() => onMonthChange(startOfMonth(new Date()))}
+            >
+              back to today
+            </button>
+          )}
+        </span>
 
         <button
           type="button"

src/components/EditSheet.tsx

@@ -48,6 +48,10 @@ export default function EditSheet({
   const [place, setPlace] = useState<Place | null>(null)
   const [day, setDay] = useState('')
   const [time, setTime] = useState('')
+  const [saving, setSaving] = useState(false)
+  // A ref, not the state above: state updates on the next render, so three
+  // taps in one tick would all read `saving === false` and each save a copy.
+  const savingRef = useRef(false)
 
   // Reset the form whenever the sheet opens, so a cancelled edit never leaks
   // into the next one.
@@ -59,6 +63,8 @@ export default function EditSheet({
     setPlace(editing?.place ?? defaultPlace ?? null)
     setDay(editing?.scheduledFor ?? defaultDay ?? '')
     setTime(editing?.time ?? '')
+    setSaving(false)
+    savingRef.current = false
     // Keyed on openRequest so reopening always starts from a clean form.
   }, [openRequest, open, editing, defaultDay, defaultPlace])
 
@@ -81,7 +87,11 @@ export default function EditSheet({
 
   function submit(e: React.FormEvent) {
     e.preventDefault()
-    if (!title.trim()) return
+    // A double tap on a phone is easy, and onSave isn't awaited — without this
+    // guard the second tap created a duplicate date.
+    if (!title.trim() || savingRef.current) return
+    savingRef.current = true
+    setSaving(true)
 
     // Scheduling is what promotes a wish into a plan. An existing `done` or
     // `cancelled` record keeps its status — re-saving shouldn't rewrite history.
@@ -206,7 +216,7 @@ export default function EditSheet({
           <button
             type="submit"
             className="pixel-btn pixel-btn-primary flex-1 px-4 py-2"
-            disabled={!title.trim()}
+            disabled={!title.trim() || saving}
           >
             {editing ? 'save' : 'add it'}
           </button>

src/components/ReportSheet.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import { captureContext, useReports, type Report } from '../lib/reports'
+import { useReports, type Report } from '../lib/reports'
 
 type Props = {
   /** Counter, not a boolean — see the note on EditSheet's `openRequest`. */
@@ -115,17 +115,6 @@ export default function ReportSheet({ openRequest, onClose }: Props) {
               />
             </label>
 
-            {/* Say what's attached rather than collecting it silently. */}
-            <details className="pixel-box-sm p-2">
-              <summary className="legend cursor-pointer">what gets sent with it</summary>
-              <ul className="prose mt-2 space-y-0.5 text-xs text-[var(--color-ink)]/70">
-                <li>screen: {captureContext().screen}</li>
-                <li>where you are: {captureContext().view}</li>
-                <li>your phone or browser</li>
-                <li>the time</li>
-              </ul>
-            </details>
-
             <div aria-live="polite">
               {sent && (
                 <p className="pixel-box-sm bg-[var(--color-aqua)] px-3 py-2 text-sm">

src/lib/dates.ts

@@ -35,6 +35,26 @@ export function useDates() {
   const [items, setItems] = useState<DateIdea[]>(PREVIEW ? SAMPLE_DATES : [])
   const [loading, setLoading] = useState(!PREVIEW)
   const [error, setError] = useState<string | null>(null)
+  const [writeError, setWriteError] = useState<string | null>(null)
+
+  /**
+   * Firestore applies a write locally first and rolls it back if the server
+   * rejects it. Without this, a refused save looked like the date appearing
+   * and then vanishing on its own.
+   */
+  const guard = useCallback(async (run: () => Promise<unknown>) => {
+    try {
+      await run()
+      setWriteError(null)
+    } catch (err) {
+      const code = (err as { code?: string })?.code
+      setWriteError(
+        code === 'permission-denied'
+          ? "That didn't save — this account isn't allowed to write here."
+          : "That didn't save. Check your connection and try again.",
+      )
+    }
+  }, [])
 
   useEffect(() => {
     if (PREVIEW) return
@@ -77,13 +97,15 @@ export function useDates() {
       }
       if (!db || !user) return
       // The rules require this stamp to match the caller, so it can't be forged.
-      await addDoc(collection(db, COLLECTION), {
-        ...draft,
-        createdBy: user.uid,
-        createdAt: Date.now(),
-      })
+      await guard(() =>
+        addDoc(collection(db, COLLECTION), {
+          ...draft,
+          createdBy: user.uid,
+          createdAt: Date.now(),
+        }),
+      )
     },
-    [user],
+    [user, guard],
   )
 
   const update = useCallback(async (id: string, patch: Partial<DateDraft>) => {
@@ -94,17 +116,17 @@ export function useDates() {
     if (!db) return
     // `createdBy` and `createdAt` are deliberately not patchable — the rules
     // reject an update that changes authorship anyway.
-    await updateDoc(doc(db, COLLECTION, id), patch)
-  }, [])
+    await guard(() => updateDoc(doc(db, COLLECTION, id), patch))
+  }, [guard])
 
   const remove = useCallback(async (id: string) => {
     if (PREVIEW) {
       setItems((prev) => prev.filter((it) => it.id !== id))
       return
     }
     if (!db) return
-    await deleteDoc(doc(db, COLLECTION, id))
-  }, [])
+    await guard(() => deleteDoc(doc(db, COLLECTION, id)))
+  }, [guard])
 
   /** Scheduled dates bucketed by `yyyy-MM-dd`, which is what the grid needs. */
   const byDay = useMemo(() => {
@@ -128,5 +150,16 @@ export function useDates() {
     [items],
   )
 
-  return { items, byDay, ideas, loading, error, add, update, remove }
+  return {
+    items,
+    byDay,
+    ideas,
+    loading,
+    error,
+    writeError,
+    dismissWriteError: () => setWriteError(null),
+    add,
+    update,
+    remove,
+  }
 }

src/screens/Home.tsx

@@ -14,7 +14,8 @@ import type { DateIdea, Place } from '../types'
 type View = 'calendar' | 'map' | 'ideas'
 
 export default function Home() {
-  const { items, byDay, loading, error, add, update, remove } = useDates()
+  const { items, byDay, loading, error, writeError, dismissWriteError, add, update, remove } =
+    useDates()
 
   const [month, setMonth] = useState(() => startOfMonth(new Date()))
   const [selected, setSelected] = useState<string | null>(null)
@@ -216,6 +217,23 @@ export default function Home() {
       <div className="relative flex min-h-0 flex-1 flex-col">
         {body}
 
+        {/* A refused write used to just revert with no explanation. */}
+        {writeError && (
+          <div
+            role="alert"
+            className="absolute inset-x-3 top-3 z-40 flex items-start gap-2 border-[3px] border-[var(--color-ink)] bg-[var(--color-card)] p-3 shadow-[4px_4px_0_var(--color-ink)]"
+          >
+            <p className="flex-1 text-sm text-[var(--color-deep)]">{writeError}</p>
+            <button
+              type="button"
+              className="pixel-btn legend shrink-0 px-2 py-1"
+              onClick={dismissWriteError}
+            >
+              ok
+            </button>
+          </div>
+        )}
+
         {/* Adding a date is the one thing you do most, so it gets a permanent
             thumb-reachable button rather than living behind a menu.