[Gap-Audit] 026 Unified Messaging Sidebar: mobile drawer transitions + badge sync latency

[TortoiseWolfe]

Summary

Desktop layout is stable. Mobile experience and real-time badge sync need polish.

What's shipped

• src/components/organisms/UnifiedSidebar/
• src/app/messages/page.tsx consolidated route
• Legacy route redirects
• Tab-switching E2E coverage

Gaps

• Mobile drawer transitions need polish
• Real-time badge count sync has latency issues

Reference

• Spec: features/integrations/026-unified-messaging-sidebar/spec.md

[TortoiseWolfe]

Next-session primer

Goal: polish mobile drawer transitions; fix real-time badge count sync latency.

Effort: small (~2-3h)
Blocked on: nothing

What's already shipped

• src/components/organisms/UnifiedSidebar/ — desktop layout stable
• src/app/messages/page.tsx — consolidated route
• Tab-switching E2E coverage

Two gaps

A. Mobile drawer transitions (UX polish)

• UnifiedSidebar.tsx likely uses CSS transitions for the slide-in/out
• Likely issues: jank on iOS Safari (use will-change: transform), no prefers-reduced-motion respect (the CSS rule from batch 6 covers this, verify), drawer not respecting safe-area-insets at the top
• Test on a real iPhone if possible; emulators miss some behaviors

B. Real-time badge count sync latency

• The badge shows unread count; lag suggests the Supabase realtime subscription is slow to fire OR the count derivation re-runs only on certain events
• Files: src/components/organisms/UnifiedSidebar/ + likely src/hooks/useConversationRealtime.ts or a sibling hook
• Note: useConversationRealtime had its createClient race fixed in batch 1 [Gap-Audit] Stability: createClient() at hook top level destabilizes realtime subscriptions #7 — verify the badge subscription has the same useMemo(() => createClient(), []) pattern, not a fresh client on every render
• If badge derivation walks the full conversation list on every change, debounce or move to a count-only RPC

Verification

1. Open /messages on a mobile viewport (DevTools), open/close drawer 10 times, watch for jank
2. With two browser tabs as different users, send a message from User A to User B — User B's badge should update within <500ms
3. Rotate mobile device — drawer should respect new viewport
4. Run a Pa11y check against /messages mobile width

Watch-outs

• Don't introduce new realtime subscriptions; reuse existing channels
• The Sidebar wireframes don't exist (in-app UI) — no wireframe work needed