Skip to main content

IntentBadge

Location: src/components/post-parts/IntentBadge.jsx

Overview​

IntentBadge renders the post author's avatar in the corner of a post card with an overlapping circular badge showing the post's intent emoji. The avatar links to the author's HomeRoom. The intent indicator uses the intent's accent color for its border and displays a tooltip with the intent label.

This is a key visual element of CommonPlace's intent-first design, making the purpose of each post immediately visible.

Relevant Invariants​

  • Invariant #4: "Intent Precedes Interpretation" -- Every post's intent is visually prominent via this badge.

Props​

PropTypeRequiredDefaultDescription
authorobjectYes--Author profile with id, username, and display_name
intentInfoobjectNo--Intent metadata with emoji and label fields
intentCssKeystringNo--CSS key for the intent (used for color variables like --intent-{key}-accent)
avatarUrlstringNo--Avatar image URL (intent-specific or profile avatar)
onStopPropagationfunctionNo--Click handler to prevent post card navigation

Key Behaviors​

  • Avatar Link: The avatar links to /room/:username (or /room/:id as fallback). Uses onStopPropagation to prevent the parent post card click from firing.
  • Avatar Image: If avatarUrl is provided, renders an <img>. Otherwise, shows the first letter of the author's display name via getInitial.
  • Intent Indicator: A small circular badge positioned to overlap the bottom-right of the avatar. Shows the intent emoji with a colored border using var(--intent-{key}-accent).
  • Tooltip: The intent indicator has a data-tooltip attribute with the intent label for hover tooltips.
  • Conditional Rendering: The intent indicator only renders when intentInfo is provided.

Usage​

import IntentBadge from '@/components/post-parts/IntentBadge';

<IntentBadge
  author={post.profiles}
  intentInfo={{ emoji: '💭', label: 'Thinking Aloud' }}
  intentCssKey="thinking"
  avatarUrl={intentAvatarUrl || author.avatar_url}
  onStopPropagation={(e) => e.stopPropagation()}
/>
  • Post -- Parent component that renders IntentBadge
  • PostHeader -- Rendered alongside IntentBadge in the post card
  • IntentStylesSettings -- Where users configure per-intent avatars

Last updated: 2026-02-07