feat(share-web): /me + /@handle polish — modals, SWR header, row redesign

[graydawnc]

Summary

Polish pass on the share-web /me and /@handle surfaces. Scoped to packages/share-web/ only; no backend or desktop changes.

Changes

Header SWR + cache

• lib/me-cache.ts — versioned localStorage cache of {name, avatar_url} so first paint shows the real avatar instead of a 100ms blank while /api/me round-trips
• lib/auth-cache.ts — module-level memo so cross-page Header mounts share one fetchMe call; invalidated on signOut and on a 401 response
• Header default changes from auth='out' to auth='auto' — paints from cache, revalidates in the background; Reader.tsx, Profile.tsx, Tombstone.tsx, and the Me loading / error states drop the hardcoded auth="out" prop
• Wordmark href / → https://spool.pro/ so logo-click lands on the landing site in both dev and prod

Account surface

• DeleteAccountModal replaces the inline idle / confirming / scheduled / cancelling state machine; opened from a small "Delete account" link in the "Signed in as …" footer row
• onScheduled(at) lifts state to the parent so the deletion-pending banner appears immediately after the user confirms — previously the banner waited for the next reload
• Banner copy carries an inline "Cancel deletion" button that re-opens the same modal in cancel mode
• useRef re-entrancy lock on confirmUnpublish so a double-tap on a slow device cannot fire two parallel revoke calls

ShareRow + Unpublish flow

• Single-line title (ellipsis + title= hover tooltip), meta line with a visibility icon (globe for profile-listed, link-2 for unlisted; title= tooltip, cursor: help) + published date + optional expires + revoked = small red Unpublished pill
• Whole-row click navigates to the reader: title + meta wrap in one <a class="sw-share-link"> so hovering the visibility icon shows its title= naturally without an overlay blocking events
• Hover: row bg → --card-2, title → accent
• Actions live outside the anchor as siblings (copy + eye-off only — the external-link Open icon is removed because the title is now the open affordance)
• UnpublishConfirmModal uses the same .sw-modal-* shell; renders the target row plus a 410-Gone warning before committing

Profile (public /@handle) rows

• Single-line title + mono date, same anchor wrap, no actions

Utilities

• relativeDate(ts, now) + Number.isFinite guards on humanDate / humanDateTime / relativeDate so NaN does not surface as Invalid Date
• .sw-section-label drops text-transform: uppercase, keeps mono + tracking
• .reader-paper gets shadow tokens (light + dark)
• ModalShell shared by both confirm modals — Esc and backdrop click close, gated by busy

Test plan

• pnpm --filter @spool/share-web typecheck — clean
• pnpm --filter @spool/share-web exec vitest run — 70 / 70
  • dates.test.ts (8): humanDate / humanDateTime guards, relativeDate buckets (Today / Yesterday / Nd ago / 7+ days fallback / future / NaN)
  • me-cache.test.ts (7): round-trip, version-mismatch invalidation, malformed-JSON tolerance, clearCachedMe, localStorage-unavailable fallback
  • api-cache.test.ts (5): fetchMe 200 writes cache, 401 clears cache + drops the auth memo, 403 leaves cache intact, signOut clears both layers even when the network call fails
• Manual dogfooding in worktree: sign-in / cross-page header sync, hover tooltips on visibility icons, row click → reader, copy + eye-off actions, Unpublish modal Esc + backdrop close + double-tap block, Delete account modal from both healthy and pending-deletion states, sign-out clears cache + memo

Follow-ups

• /terms and /privacy are placeholder pages — real content needed
• Desktop Spool app Shares → Published tab rows want the same polish

Submitter: @graydawnc

🤖 Generated with Claude Code