feat(02-05): ColorLegend, AppNav, ViewToolbar, SkeletonCalendar, EmptyState; retire EventProof

- ColorLegend: per-member color swatches (12px circle, label) + always-visible Family row - AppNav: phone 48px top bar (avatar with aria-label/title) + tablet/desktop 240px sidebar with ColorLegend - ViewToolbar: Today/prev/next + Day/Week/Month/Agenda view switcher; 44px min-height; active state uses surface tint not accent - SkeletonCalendar: shimmer month (6x7 grid) and agenda (4 date-group blocks) variants; aria-busy=true - EmptyState: CalendarDays icon + 'Nothing here' heading + body copy per UI-SPEC - CalendarShell: full phone/desktop layout with AppNav + ViewToolbar + ColorLegend chrome - CalendarShell: state branches — loading→SkeletonCalendar, empty→EmptyState, error→'Couldn't load events' + Retry button (refetchQueries) - EventProof.tsx deleted; legacy types removed from client.ts - CalendarShell.test.tsx: updated to waitFor ScheduleXCalendar after data loads - All 36 tests pass, tsc clean, vite build clean (490kB)
2026-06-05 10:58:06 -04:00
parent 3eebfbff42
commit 216ddcedf4
9 changed files with 840 additions and 230 deletions
@@ -0,0 +1,152 @@
+/**
+ * AppNav — top navigation bar (phone) / left sidebar (tablet/desktop).
+ *
+ * UI-SPEC §AppNav:
+ *   - Phone: 48px top bar, app name "FamilySync" left, user color swatch right
+ *   - Tablet/Desktop: 240px left sidebar, app name + ColorLegend
+ *   - Accent colors NOT on chrome (60/30/10 split)
+ *
+ * Reviewer note (UI-SPEC §Post-Verification):
+ *   - Phone-nav avatar/color swatch needs aria-label + title (icon-only affordance)
+ *   - Grid is primary focal point; AppNav is secondary chrome
+ */
+
+import { ColorLegend, type LegendMember } from './ColorLegend.js'
+
+interface AppNavProps {
+  members?: LegendMember[]
+  currentUserColor?: string
+  currentUserName?: string
+}
+
+export function AppNav({ members = [], currentUserColor, currentUserName }: AppNavProps) {
+  const isMobile = typeof window !== 'undefined' && window.matchMedia('(max-width: 767px)').matches
+
+  if (isMobile) {
+    return <PhoneNav currentUserColor={currentUserColor} currentUserName={currentUserName} />
+  }
+
+  return <DesktopNav members={members} />
+}
+
+/** Phone: 48px top bar — app name left, user avatar right */
+function PhoneNav({
+  currentUserColor,
+  currentUserName,
+}: {
+  currentUserColor?: string
+  currentUserName?: string
+}) {
+  const displayName = currentUserName ?? 'User'
+  const color = currentUserColor ?? 'var(--color-member-0)'
+
+  return (
+    <header
+      style={{
+        height: '48px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '0 var(--space-4)',
+        background: 'var(--color-surface)',
+        borderBottom: '1px solid var(--color-border)',
+        flexShrink: 0,
+        fontFamily: 'var(--font-family-base)',
+      }}
+    >
+      {/* App name */}
+      <span
+        style={{
+          fontSize: 'var(--text-display-size)',
+          fontWeight: 'var(--text-display-weight)',
+          lineHeight: 'var(--text-display-line-height)',
+          color: 'var(--color-text-primary)',
+          letterSpacing: '-0.01em',
+        }}
+      >
+        FamilySync
+      </span>
+
+      {/* User color avatar — aria-label + title per reviewer note */}
+      <div
+        style={{
+          width: '32px',
+          height: '32px',
+          borderRadius: '50%',
+          background: color,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexShrink: 0,
+          cursor: 'default',
+          // Ensure 44px tap area with padding
+          minWidth: '44px',
+          minHeight: '44px',
+          padding: '6px',
+          boxSizing: 'border-box',
+        }}
+        aria-label={displayName}
+        title={displayName}
+        role="img"
+      >
+        <div
+          style={{
+            width: '100%',
+            height: '100%',
+            borderRadius: '50%',
+            background: color,
+          }}
+        />
+      </div>
+    </header>
+  )
+}
+
+/** Tablet/Desktop: 240px left sidebar — app name + color legend */
+function DesktopNav({ members }: { members: LegendMember[] }) {
+  return (
+    <nav
+      style={{
+        width: '240px',
+        flexShrink: 0,
+        background: 'var(--color-surface)',
+        borderRight: '1px solid var(--color-border)',
+        display: 'flex',
+        flexDirection: 'column',
+        padding: 'var(--space-6) var(--space-4)',
+        fontFamily: 'var(--font-family-base)',
+        overflowY: 'auto',
+      }}
+      aria-label="Main navigation"
+    >
+      {/* App name */}
+      <div
+        style={{
+          fontSize: 'var(--text-display-size)',
+          fontWeight: 'var(--text-display-weight)',
+          lineHeight: 'var(--text-display-line-height)',
+          color: 'var(--color-text-primary)',
+          marginBottom: 'var(--space-6)',
+          letterSpacing: '-0.01em',
+        }}
+      >
+        FamilySync
+      </div>
+
+      {/* Color legend */}
+      <div
+        style={{
+          fontSize: 'var(--text-label-size)',
+          fontWeight: 600,
+          color: 'var(--color-text-muted)',
+          marginBottom: 'var(--space-2)',
+          textTransform: 'uppercase',
+          letterSpacing: '0.06em',
+        }}
+      >
+        Calendars
+      </div>
+      <ColorLegend members={members} />
+    </nav>
+  )
+}