Header

Location: src/components/Header.jsx

Overview

Header is the primary navigation component for CommonPlace. It provides responsive layouts for desktop and mobile, with navigation links, feed pacing controls, notifications, messaging, theme toggling, and a user menu. On mobile, secondary items collapse into a BottomSheet overflow menu to avoid crowding.

The feed pacing selector allows users to choose between slow, normal, and live modes -- controlling how often the feed refreshes. Admin users see an additional link to the admin dashboard.

Relevant Invariants

• Invariant #2: "Calm Is the Default State" -- Feed pacing defaults to normal mode; pacing descriptions emphasize mindfulness.
• Invariant #9: "Time Is Not Weaponized" -- No typing indicators or "last seen" status in the header.
• Invariant #18: "Defaults Are Moral Decisions" -- Normal mode is the default, not live mode.

Props

Prop	Type	Required	Default	Description
session	object	Yes	--	Supabase auth session with user.id
onFeedModeChange	function	No	--	Callback when the user changes the feed pacing mode
onToggleComposer	function	No	--	Callback to toggle the post composer visibility
showComposer	boolean	No	--	Whether the post composer is currently visible

Constants

Constant	Description
FEED_MODES.slow	6-hour check-in pace, healthier rhythm
FEED_MODES.normal	Roughly hourly checks (default)
FEED_MODES.live	Real-time updates, most engaging but least mindful

Key Behaviors

• Responsive Layout: Uses the useIsMobile(640) hook to switch between desktop and mobile rendering.
• Mobile Overflow: Secondary navigation items (circles, your room, theme toggle, feed pacing, admin, saved, sign out) are placed in a BottomSheet triggered by a "More" button.
• Feed Mode Persistence: Selected feed mode is saved to the user_feed_state table via Supabase.
• Notifications: Integrates useNotifications hook and NotificationsPanel component for the notification bell.
• Admin Detection: Calls get_admin_role RPC to show/hide the admin link.
• User Menu (Desktop): Dropdown with links to Your Room, MeBook, Circles, Messages, Storage, Account, Saved, Clipped Content, and Sign Out.
• Messaging Badge: Shows unread message count from MessagingContext.
• Theme Toggle: Switches between light and dark mode via ThemeContext.

Usage

import Header from '@/components/Header';

<Header
  session={session}
  onFeedModeChange={(mode) => setFeedMode(mode)}
  onToggleComposer={() => setShowComposer(!showComposer)}
  showComposer={showComposer}
/>

Related

• Feed -- Receives feed mode changes from the header
• CreatePost -- Composer toggled via header write button

---

Last updated: 2026-02-07