CreatePost

Location: src/components/CreatePost.jsx

Overview

CreatePost implements a two-phase post creation flow. In phase one, the user selects an intent (e.g., "Thinking Out Loud", "Asking for Help"). In phase two, the compose form appears with text input, image upload, voice recording, audience selector, and a sharing toggle. This intent-first design ensures every post carries context before any content is written.

The component also provides a gateway to the AdvancedComposer for users who want richer editing capabilities (longform, drawing, magnetic poetry, style customization).

Relevant Invariants

• Invariant #4: "Intent Precedes Interpretation" -- Intent must be selected before composing begins.
• Invariant #1: "Participation Is Always Voluntary" -- No placeholder text like "What is on your mind?"; the form only appears when explicitly opened.
• Invariant #18: "Defaults Are Moral Decisions" -- Sharing defaults to allowed; audience defaults to public.

Props

Prop	Type	Required	Default	Description
session	object	Yes	--	Supabase auth session
onPostCreated	function	Yes	--	Callback after successful post creation
userProfile	object	No	--	Current user profile for display

Constants

Constant	Value	Description
MAX_FILE_SIZE	5242880 (5 MB)	Maximum image file size
MAX_IMAGES	10	Maximum images per post
ALLOWED_TYPES	[image/jpeg, image/png, image/gif, image/webp]	Accepted image MIME types

Key Behaviors

• Intent Pills: Rendered as an ARIA radiogroup. On mobile, horizontally scrollable with fade indicators.
• Rate Limiting: Uses useRateLimit hook with RATE_LIMIT_ACTIONS.POST_CREATE to prevent spam.
• Image Upload: Files uploaded to Supabase Storage post-images bucket, with progress tracking.
• Voice Attachment: Integrates VoiceRecorder component; voice data attached to post on submit.
• Audience Selector: Choose between public, friends-only, or specific circles.
• Advanced Composer Link: "Open full editor" button navigates to /compose with current state passed via location.state.
• Intent Styles: Loads the user custom intent styles via useMyIntentStyles for visual preview in the compose area.

Usage

import CreatePost from '@/components/CreatePost';

<CreatePost
  session={session}
  onPostCreated={() => refreshFeed()}
  userProfile={profile}
/>

Related

• AdvancedComposer -- Full-page editor for richer posts
• Feed -- Parent that embeds CreatePost inline
• Post -- Displays the created post
• VoiceRecorder -- Voice attachment component

---

Last updated: 2026-02-07