PostActions
Location: src/components/post-parts/PostActions.jsx
Overview
PostActions renders the action button bar at the bottom of a post card. It provides contextual actions based on whether the current user is the author and the post's current state. Actions include replying, editing, deleting, sharing (copy link), sharing to a circle, building on a post, reporting, and saving with shelf options.
All buttons use data-tooltip attributes for accessible labels and consistent tooltip styling.
Relevant Invariants
- Invariant #6: "No Public Comparative Metrics" -- The comment count is shown but no likes, views, or other engagement metrics.
- Invariant #5: "Repair Over Punishment" -- Edit is available as a standard action, not hidden.
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
commentCount | number | Yes | -- | Number of responses on the post |
isAuthor | boolean | Yes | -- | Whether the current user authored this post |
isSaved | boolean | Yes | -- | Whether the post is currently saved |
saving | boolean | Yes | -- | Whether a save operation is in progress |
hideSaveButton | boolean | No | -- | Hides the save button group (used on SavedPage) |
showAddNote | boolean | No | -- | Shows an "Add Note" button (used on SavedPage for posts without notes) |
saveButtonRef | ref | No | -- | Ref attached to the save button for popover positioning |
onCommentClick | function | Yes | -- | Handler for clicking the reply button |
onEditClick | function | No | -- | Handler for clicking edit (author only) |
onDeleteClick | function | No | -- | Handler for clicking delete (author only) |
onShareClick | function | Yes | -- | Handler for copying the post link |
onShareToCircle | function | No | -- | Handler for sharing to a circle |
canShareToCircle | boolean | No | false | Whether circle sharing is available |
onBuildOn | function | No | -- | Handler for building on the post |
canBuildOn | boolean | No | false | Whether the build-on action is available |
onQuickSave | function | No | -- | Handler for quick-saving (default shelf) |
onShowSaveOptions | function | No | -- | Handler for opening the save options popover |
onStartAddNote | function | No | -- | Handler for starting to add a note to a saved post |
onReportClick | function | No | -- | Handler for reporting the post (non-author only) |
onSettingsClick | function | No | -- | Handler for post settings menu (author only) |
Key Behaviors
- Author Actions: Edit, Delete, and Settings buttons appear only for the post author.
- Save Button Group: A split button with quick-save and a dropdown chevron for shelf selection. Hidden on the saved posts page.
- Report Button: Appears only for non-authors when
onReportClickis provided. - Build On: A reply icon that lets users create a new post that references this one. Only shown when
canBuildOnis true. - Share to Circle: A Users icon for sharing the post to a circle. Only shown when
canShareToCircleis true.
Usage
import PostActions from '@/components/post-parts/PostActions';
<PostActions
commentCount={post.comments?.length || 0}
isAuthor={session.user.id === post.user_id}
isSaved={isSaved}
saving={saving}
onCommentClick={handleComment}
onEditClick={handleEdit}
onDeleteClick={handleDelete}
onShareClick={handleShare}
onQuickSave={handleQuickSave}
onShowSaveOptions={handleShowSaveOptions}
/>
Related
- Post -- Parent component that renders PostActions
- SavePopover -- Shelf selection popover triggered by save options
Last updated: 2026-02-07