Engagement Bar

When to use

Anywhere a row of like / comment / share / bookmark / view-count actions is needed under content. Designed for social posts but retrofits cleanly into news cards, event cards, video overlays, and product cards via the actions slot pattern.

Minimal usage

import { EngagementBar } from "@/components/engagement-bar"

<EngagementBar
  actions={[
    { kind: "like", count: 142, liked: false, onToggle: (next) => onLike(post.id, next) },
    { kind: "comment", count: 23, onClick: () => openComments(post.id) },
    { kind: "share", onClick: () => share(post.id) },
    { kind: "bookmark", bookmarked: false, onToggle: (next) => onBookmark(post.id, next) },
  ]}
/>

Split heart vs count (kasder UX)

Pass onCountClick on a like action and the bar splits the heart icon and the count number into two separate click targets. Heart fires onToggle; count fires onCountClick. Typical use: heart toggles like, count opens a likers panel.

<EngagementBar
  actions={[
    {
      kind: "like",
      count: 142,
      liked: false,
      onToggle: (next) => onLike(post.id, next),
      onCountClick: () => openLikersPanel(post.id),
    },
    { kind: "comment", count: 23, onClick: () => openComments(post.id) },
  ]}
/>

Backwards-compatible: omit onCountClick and the bar renders the heart + count as a single button (the original behavior).

Controlled vs uncontrolled (per action)

Per-action: pass liked / bookmarked → controlled (host owns state, must update on toggle). Omit them → uncontrolled (component flips state internally on click).

// Uncontrolled — component manages liked/bookmarked internally
<EngagementBar
  actions={[
    { kind: "like", count: 0, onToggle: console.log },
    { kind: "bookmark", onToggle: console.log },
  ]}
/>

// Controlled — host owns state
const [liked, setLiked] = useState(false)
<EngagementBar
  actions={[
    { kind: "like", count: 142, liked, onToggle: setLiked },
  ]}
/>

Realtime via subscribe

Pass a memoized subscribe function. In uncontrolled mode, deltas patch internal state. In controlled mode, deltas only fire onSubscribeDelta — you translate them into prop updates.

const subscribe = useCallback(
  (handler) => channel.on("post.delta", handler),
  [channel],
)

<EngagementBar
  actions={[...]}
  subscribe={subscribe}
  onSubscribeDelta={(delta) => analytics.track("post.delta", delta)}
/>

Heart-burst (Instagram-style)

EngagementHeartBurst is a sibling sub-export — RSC compatible (no "use client"), CSS-keyframe driven. Host increments a counter to trigger; key={trigger} remounts the burst, restarting the animation.

import { EngagementBar, EngagementHeartBurst } from "@/components/engagement-bar"

const barRef = useRef<EngagementBarHandle>(null)
const [burstKey, setBurstKey] = useState(0)

<div className="relative">
  <MediaCarousel
    items={post.media}
    onDoubleTap={() => {
      barRef.current?.triggerLike()
      setBurstKey((k) => k + 1)
    }}
  />
  <EngagementHeartBurst
    trigger={burstKey}
    className="absolute inset-0 flex items-center justify-center pointer-events-none"
  />
</div>
<EngagementBar ref={barRef} actions={[...]} />

Custom action

import { Wand2 } from "lucide-react"

<EngagementBar
  actions={[
    { kind: "like", count: 89, onToggle },
    {
      kind: "custom",
      id: "remix",
      label: "Remix",
      icon: <Wand2 className="h-5 w-5" />,
      onClick: openRemixSheet,
    },
  ]}
/>

News-card retrofit

Drop into news-card's actions slot. variant="compact" keeps the bar tight; no framer-motion cost (heart-burst not imported).

<NewsCard
  title={article.title}
  /* ... */
  actions={
    <EngagementBar
      variant="compact"
      actions={[
        { kind: "like", count: article.likes, liked: article.viewerLiked, onToggle },
        { kind: "share", onClick: () => share(article) },
        { kind: "bookmark", bookmarked: article.saved, onToggle },
      ]}
    />
  }
/>

Notes

• actions order is preserved within each align group. Default rule: bookmark + view-count right; everything else left. Per-action align overrides.
• Stacked variant ignores align — actions render in a single vertical column.
• Memoize subscribe via useCallback. New identity = re-subscription (clean teardown + re-call).
• engagementReducer + useEngagementState are public exports — drive your own state machine if you need cross-component coordination.
• Heart-burst CSS lives in a sibling .css file shipped via shadcn registry:file. Import is automatic; consumer's globals.css is untouched.