Post
Location: src/components/Post.jsx
Overview
Post is the primary content display component for CommonPlace. It renders a single post card with intent-based visual styling, author information, content (text, images, drawings, magnetic poetry, voice, external clips), and interaction actions (save, share, respond, report). When a post is a share (is_share === true), it renders a SharedPostCard for the referenced content.
Intent styling applies CSS custom properties and classes derived from the author per-intent style preferences (surface, frame, font, emphasis, effects), giving each post a unique visual identity controlled by its creator rather than by algorithmic ranking.
Relevant Invariants
- Invariant #4: "Intent Precedes Interpretation" -- Posts display their intent badge and styling, never ranked or scored.
- Invariant #6: "No Public Comparative Metrics" -- No like counts, view counts, or ranking indicators.
- Invariant #10: "Expressive Freedom Is Spatially Contained" -- Style customization is authored by the poster, contained to the post card.
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
post | object | Yes | -- | Post data including id, content, intent, user_id, profiles, post_images, etc. |
session | object | Yes | -- | Supabase auth session |
onUpdate | function | No | -- | Callback after post update (edit/delete) |
isSaved | boolean | No | false | Initial saved state |
onToggleSave | function | No | -- | Callback when save state changes |
savedData | object | No | -- | Existing saved_posts record (note, shelf) |
userShelves | array | No | -- | User shelf list for save popover |
onShelvesChange | function | No | -- | Callback when shelves are modified |
authorIntentStyles | object | No | -- | Intent-to-style map for this post's author (pre-scoped by Feed via authorIntentStyles[post.user_id]) |
hideSaveButton | boolean | No | false | Hides the save action (used on SavedPage) |
onShareToCircle | function | No | -- | Callback to open share-to-circle modal |
Key Behaviors
- Intent Styling: Resolves
DEFAULT_INTENT_STYLEmerged withauthorIntentStyles[post.intent]to compute surface, frame, font, emphasis, and effects CSS classes. The parent (Feed/SavedPage) passes the already-scoped per-author map, so Post accesses by intent key directly. - Editor Types: Renders different content views based on
post.editor_type:simple(default text),longform(rich HTML),drawing(canvas image),magnetic_poetry(tile display). - Save Popover: Portal-based popover for shelf selection, note adding, and inline shelf creation.
- Lightbox: Full-screen image viewing for post images.
- Share Posts: When
post.is_shareis true, renders aSharedPostCardreferencing the original. - Build-On: Supports build-on replies via
useBuildOnhook. - Content Notes: Renders
ContentNoteDisplayif the post has a content_note. - Voice: Renders
VoicePlayerifpost.voice_urlis present.
Sub-components
| Component | Location | Purpose |
|---|---|---|
PostHeader | src/components/post-parts/PostHeader.jsx | Author name, timestamp, intent label |
PostContent | src/components/post-parts/PostContent.jsx | Text/HTML content display |
PostImages | src/components/post-parts/PostImages.jsx | Image grid with lightbox trigger |
PostActions | src/components/post-parts/PostActions.jsx | Respond, save, share, report buttons |
IntentBadge | src/components/post-parts/IntentBadge.jsx | Corner avatar + intent emoji badge |
SavePopover | src/components/post-parts/SavePopover.jsx | Save-to-shelf popover |
Lightbox | src/components/post-parts/Lightbox.jsx | Full-screen image viewer |
Usage
import Post from '@/components/Post';
<Post
post={postData}
session={session}
onUpdate={refreshFeed}
authorIntentStyles={stylesMap}
/>
Related
- Feed -- Parent component that renders Post lists
- IntentBadge -- Avatar + intent indicator
- CreatePost -- Post creation
- AdvancedComposer -- Full editor for styled posts
Last updated: 2026-02-07