Social

import * as React from "react"

import { REFERENCE_DATE } from "@/lib/sample-data"
import { AppShell } from "@/components/ui/app-shell"
import { ProductArt } from "@/components/ui/product-art"

import { signOut } from "./actions"
import { SocialView } from "./components/social-view"
import {
  currentUser,
  feed,
  linkChoices,
  productChoices,
  profileCard,
  shellNotifications,
  suggestions,
  trending,
} from "./data"
import { NAV, ROUTES } from "@/lib/dashboards/projects/nav"

/**
 * The team feed. The page is a server component: it reads the posts, their
 * replies and the people through `db`, and draws every product a post
 * carries — or the composer offers — here, with ProductArt, so the island
 * takes finished drawings as props rather than bundling every glyph the set
 * has. One client island owns the feed, the composer and the rail's counts.
 */
export default function SocialPage() {
  const posts = feed()
  const products = productChoices()
  const drawn = new Map<string, { name: string; category: string }>()
  for (const post of posts) {
    if (post.media?.kind === "product") drawn.set(post.media.productId, post.media)
  }
  for (const product of products) drawn.set(product.id, product)
  const art = Object.fromEntries(
    [...drawn].map(([id, product]) => [id, <ProductArt key={id} name={product.name} category={product.category} className="rounded-md" />])
  )

  return (
    <AppShell
      nav={NAV}
      activeHref={ROUTES.social}
      user={currentUser()}
      notifications={shellNotifications()}
      now={REFERENCE_DATE}
      onSignOut={signOut}
    >
      <SocialView
        posts={posts}
        profile={profileCard()}
        suggestions={suggestions()}
        trends={trending()}
        links={linkChoices()}
        products={products}
        art={art}
      />
    </AppShell>
  )
}

/**
 * What the team feed reads. Posts come from `db.posts`, their replies from
 * `db.comments`, a product post's name and price from `db.products`, and the
 * people from `db.members`; the signed-in member is the first member row.
 * What no entity records — who follows whom — is a rule over the members,
 * drawn once from `seeded("projects-social")`, never a literal. Every time is
 * written into words here against `REFERENCE_DATE`, pinned to UTC, so the
 * island never needs a clock or the store.
 */
import { formatCurrency, formatRelative, getInitials } from "@/lib/format"
import {
  daysAgo,
  db,
  handleFor,
  REFERENCE_DATE,
  seeded,
  shuffle,
  type Comment,
  type Post,
  type PostMedia,
} from "@/lib/sample-data"
import { LOGO_MARKS, type LogoName } from "@/components/ui/logo-mark"

export type Person = { name: string; handle: string; avatarUrl: string }

export type CommentRow = { id: string; postId: string; author: { name: string; avatarUrl: string }; text: string; when: string }

export type MediaRow =
  | { kind: "link"; title: string; domain: string; mark: LogoName | null }
  | { kind: "poll"; options: { label: string; votes: number }[]; voted: number | null }
  | { kind: "product"; productId: string; name: string; category: string; price: number }
  | { kind: "stat"; label: string; values: number[]; risingIsGood: boolean }

/** A post as the feed draws it, its replies oldest first. */
export type PostRow = {
  id: string
  author: Person
  at: Date
  when: string
  text: string
  media: MediaRow | null
  likes: number
  liked: boolean
  shares: number
  comments: CommentRow[]
  /** The topics its text is tagged with, as Trending counts them, so a topic matches whole tags only. */
  tags: string[]
}

const DAY_MS = 86_400_000

/** A post's topic tags: "#release", "#support" — whole words after a hash, each once. */
function tagsOf(text: string): string[] {
  return [...new Set(text.match(/#[a-z][a-z-]*/g) ?? [])]
}
const shortDay = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", timeZone: "UTC" })

/** "2h ago" against `REFERENCE_DATE`, and the day itself past a week. */
export function since(at: Date): string {
  const days = (REFERENCE_DATE.getTime() - at.getTime()) / DAY_MS
  return days < 7 ? formatRelative(at, REFERENCE_DATE) : shortDay.format(at)
}

export function toCommentRow(comment: Comment): CommentRow {
  return { id: comment.id, postId: comment.postId, author: comment.author, text: comment.text, when: since(comment.at) }
}

/**
 * Minutes waited and tickets left open are better going down; every other
 * series the feed carries is better going up. A rule over the stat's own
 * label, so the pill beside a falling wait reads as the good news it is.
 */
const FALLING_IS_GOOD = /\bminutes\b|\btickets\b/i

/** A post's media as the card draws it: a product is read from the catalogue now, not when it was posted. */
/** A stored mark as logo-mark names it: the store keeps a plain string, so it is checked before it is drawn. */
const logoFor = (mark: string): LogoName | null =>
  (LOGO_MARKS as readonly string[]).includes(mark) ? (mark as LogoName) : null

function toMediaRow(media: PostMedia | undefined): MediaRow | null {
  if (!media) return null
  if (media.kind === "link") return { ...media, mark: logoFor(media.mark) }
  if (media.kind === "poll") return { ...media, options: media.options.map((option) => ({ ...option })) }
  if (media.kind === "stat") return { ...media, risingIsGood: !FALLING_IS_GOOD.test(media.label) }
  const product = db.products.all().find((row) => row.id === media.productId)
  if (!product) return null
  return { kind: "product", productId: product.id, name: product.name, category: product.category, price: product.priceCents / 100 }
}

/** One post shaped for the feed; the actions return posts through it too. */
export function toPostRow(post: Post, comments: Comment[] = repliesTo(post.id)): PostRow {
  return {
    id: post.id,
    author: post.author,
    at: post.at,
    when: since(post.at),
    text: post.text,
    media: toMediaRow(post.media),
    likes: post.likes,
    liked: post.liked,
    shares: post.shares,
    comments: comments.map(toCommentRow),
    tags: tagsOf(post.text),
  }
}

function repliesTo(postId: string): Comment[] {
  return db.comments
    .all()
    .filter((comment) => comment.postId === postId)
    .sort((a, b) => a.at.getTime() - b.at.getTime())
}

/** The feed, newest first, every post with its replies. */
export function feed(): PostRow[] {
  const byPost = new Map<string, Comment[]>()
  for (const comment of [...db.comments.all()].sort((a, b) => a.at.getTime() - b.at.getTime())) {
    byPost.set(comment.postId, [...(byPost.get(comment.postId) ?? []), comment])
  }
  return db.posts
    .all()
    .sort((a, b) => b.at.getTime() - a.at.getTime())
    .map((post) => toPostRow(post, byPost.get(post.id) ?? []))
}

/** The signed-in member — the first member row — read per call, so a rename shows. */
const meRow = () => db.members.all()[0]

/** Who follows whom: drawn once per member from the page's own seed, so the counts hold still. */
function network() {
  const rand = seeded("projects-social")
  const me = meRow()
  const others = db.members.all().filter((member) => member.status === "active" && member.id !== me.id)
  const following = new Set(shuffle(rand, others).slice(0, Math.round(others.length * 0.55)).map((member) => member.id))
  const followers = shuffle(rand, others).slice(0, Math.round(others.length * 0.7)).length
  return { others, following, followers }
}

export type ProfileCard = Person & { followers: number; following: number; posts: number }

/** The signed-in member as the rail's profile card shows them. */
export function profileCard(): ProfileCard {
  const { following, followers } = network()
  const me = meRow()
  return {
    name: me.name,
    handle: handleFor(me.name),
    avatarUrl: me.avatarUrl ?? "",
    followers,
    following: following.size,
    posts: db.posts.all().filter((post) => post.author.name === me.name).length,
  }
}

export type Suggestion = Person & { id: string; posts: number }

/** Who to follow: the teammates the member does not follow yet, the most prolific first. */
export function suggestions(count = 4): Suggestion[] {
  const { others, following } = network()
  const posted = (name: string) => db.posts.all().filter((post) => post.author.name === name).length
  return others
    .filter((member) => !following.has(member.id))
    .map((member) => ({
      id: member.id,
      name: member.name,
      handle: handleFor(member.name),
      avatarUrl: member.avatarUrl ?? "",
      posts: posted(member.name),
    }))
    .sort((a, b) => b.posts - a.posts || a.name.localeCompare(b.name))
    .slice(0, count)
}

export type Trend = { tag: string; posts: number }

/** The topics tagged most across the feed, and how many posts carry each. */
export function trending(count = 5): Trend[] {
  const counts = new Map<string, number>()
  for (const post of db.posts.all()) {
    for (const tag of tagsOf(post.text)) counts.set(tag, (counts.get(tag) ?? 0) + 1)
  }
  return [...counts]
    .map(([tag, posts]) => ({ tag, posts }))
    .sort((a, b) => b.posts - a.posts || a.tag.localeCompare(b.tag))
    .slice(0, count)
}

export type LinkChoice = { domain: string; title: string }
export type ProductChoice = { id: string; name: string; category: string; price: string }

/** The links the composer can attach: every link card the feed has carried, one per site. */
export function linkChoices(): LinkChoice[] {
  const seen = new Map<string, LinkChoice>()
  for (const post of db.posts.all()) {
    if (post.media?.kind === "link" && !seen.has(post.media.domain)) {
      seen.set(post.media.domain, { domain: post.media.domain, title: post.media.title })
    }
  }
  return [...seen.values()].sort((a, b) => a.title.localeCompare(b.title))
}

/** How far back the store's best sellers are counted. */
const SALES_DAYS = 90
const SHORTLIST = 8

/**
 * The products the composer can attach: the store's best sellers over the
 * last 90 days, counted from the orders that were paid for — the things worth
 * telling the team about — still on sale, most units first.
 */
export function productChoices(): ProductChoice[] {
  const since = daysAgo(SALES_DAYS).getTime()
  const units = new Map<string, number>()
  for (const order of db.orders.all()) {
    const at = order.placedAt.getTime()
    if ((order.status !== "paid" && order.status !== "fulfilled") || at < since || at > REFERENCE_DATE.getTime()) continue
    for (const item of order.items) units.set(item.productId, (units.get(item.productId) ?? 0) + item.qty)
  }
  return db.products
    .all()
    .filter((product) => product.status === "active")
    .sort((a, b) => (units.get(b.id) ?? 0) - (units.get(a.id) ?? 0) || a.name.localeCompare(b.name))
    .slice(0, SHORTLIST)
    .map((product) => ({
      id: product.id,
      name: product.name,
      category: product.category,
      price: formatCurrency(product.priceCents / 100),
    }))
}

/** The person looking at the page: the member every post is read by. */
export function currentUser() {
  const me = meRow()
  return { name: me.name, email: me.email, initials: getInitials(me.name), avatarUrl: me.avatarUrl }
}

export function shellNotifications() {
  return db.notifications
    .all()
    .sort((a, b) => b.at.getTime() - a.at.getTime())
    .slice(0, 6)
    .map(({ id, title, description, at, read, href }) => ({ id, title, description, at, read, href }))
}

"use server"

import { mockAuthAdapter } from "@/lib/auth-adapter"
import { avatarFor, db, handleFor, REFERENCE_DATE, type PostMedia, type Result } from "@/lib/sample-data"

import { toCommentRow, toPostRow, type CommentRow, type PostRow } from "./data"

/**
 * What the feed changes. Server actions, so the page stays a server component
 * and still hands its island something to call; `Result`, so a refusal says
 * what was refused and why, and the island prints it beside the control that
 * asked. Who is posting, liking or voting is the signed-in member, decided
 * here; a product, a link or a poll option is looked up again in the store,
 * never taken from the form.
 */

export async function signOut(): Promise<Result<{ signedOut: true }>> {
  await mockAuthAdapter.signOut()
  return { ok: true, data: { signedOut: true } }
}

/** What the composer can attach: a poll's options, a link by its site, a product by its id. */
export type DraftMedia =
  | { kind: "poll"; options: string[] }
  | { kind: "link"; domain: string }
  | { kind: "product"; productId: string }

export type NewPost = { text: string; media?: DraftMedia }

const MAX_POST = 500
const MAX_COMMENT = 300
const MAX_OPTION = 60

function me() {
  return db.members.all()[0]
}

const refuse = (code: string, message: string, field?: string) =>
  ({ ok: false, error: { code, message, ...(field ? { field } : {}) } }) as const

/** The media a draft asks for, as the store will keep it — or the reason it cannot be kept. */
function resolveMedia(media: DraftMedia): { ok: true; media: PostMedia } | ReturnType<typeof refuse> {
  if (media.kind === "poll") {
    const options = (Array.isArray(media.options) ? media.options : []).map((option) => String(option).trim())
    if (options.length < 2 || options.length > 4 || options.some((option) => !option)) {
      return refuse("invalid", "A poll needs two to four options, none of them blank.", "poll")
    }
    if (options.some((option) => option.length > MAX_OPTION)) {
      return refuse("invalid", `Keep each option under ${MAX_OPTION} characters.`, "poll")
    }
    if (new Set(options.map((option) => option.toLowerCase())).size !== options.length) {
      return refuse("invalid", "Two of the options say the same thing.", "poll")
    }
    return { ok: true, media: { kind: "poll", options: options.map((label) => ({ label, votes: 0 })), voted: null } }
  }
  if (media.kind === "link") {
    const known = db.posts
      .all()
      .flatMap((post) => (post.media?.kind === "link" ? [post.media] : []))
      .find((link) => link.domain === media.domain)
    if (!known) return refuse("not_found", "That link is not one the feed can show a card for.", "link")
    return { ok: true, media: { kind: "link", title: known.title, domain: known.domain, mark: known.mark } }
  }
  if (media.kind === "product") {
    const product = db.products.all().find((row) => row.id === media.productId)
    if (!product || product.status !== "active") {
      return refuse("not_found", "That product is no longer in the store.", "product")
    }
    return { ok: true, media: { kind: "product", productId: product.id } }
  }
  return refuse("invalid", "A post can carry a poll, a link or a product.")
}

/** Posts as the signed-in member; the new post leads the feed. */
export async function createPost(input: NewPost): Promise<Result<PostRow>> {
  const text = String(input?.text ?? "").trim()
  if (!text && !input?.media) {
    return refuse("required", "Write something, or attach a poll, a link or a product.", "text")
  }
  if (text.length > MAX_POST) return refuse("invalid", `Keep a post under ${MAX_POST} characters.`, "text")

  let media: PostMedia | undefined
  if (input.media) {
    const resolved = resolveMedia(input.media)
    if (!resolved.ok) return resolved
    media = resolved.media
  }

  const author = me()
  const created = await db.posts.create({
    author: { name: author.name, handle: handleFor(author.name), avatarUrl: avatarFor(author.name) },
    at: REFERENCE_DATE,
    text,
    ...(media ? { media } : {}),
    likes: 0,
    liked: false,
    shares: 0,
  })
  if (!created.ok) return created
  return { ok: true, data: toPostRow(created.data, []) }
}

/** Likes a post, or takes the like back; the count follows. */
export async function toggleLike(id: string): Promise<Result<PostRow>> {
  const post = await db.posts.get(id)
  if (!post) return refuse("not_found", "That post is no longer on the feed.")
  const liked = !post.liked
  const updated = await db.posts.update(id, { liked, likes: Math.max(0, post.likes + (liked ? 1 : -1)) })
  if (!updated.ok) return updated
  return { ok: true, data: toPostRow(updated.data) }
}

/** Replies to a post as the signed-in member; the reply goes last, the newest. */
export async function addComment(postId: string, text: string): Promise<Result<CommentRow>> {
  const body = String(text ?? "").trim()
  if (!body) return refuse("required", "Write a comment before posting it.", "text")
  if (body.length > MAX_COMMENT) return refuse("invalid", `Keep a comment under ${MAX_COMMENT} characters.`, "text")
  const post = await db.posts.get(postId)
  if (!post) return refuse("not_found", "That post is no longer on the feed.")

  const author = me()
  const created = await db.comments.create({
    postId: post.id,
    author: { name: author.name, avatarUrl: avatarFor(author.name) },
    at: REFERENCE_DATE,
    text: body,
  })
  if (!created.ok) return created
  return { ok: true, data: toCommentRow(created.data) }
}

/** Casts the signed-in member's one vote in a poll. A second vote is refused, whichever option it is for. */
export async function votePoll(postId: string, option: number): Promise<Result<PostRow>> {
  const post = await db.posts.get(postId)
  if (!post) return refuse("not_found", "That post is no longer on the feed.")
  if (post.media?.kind !== "poll") return refuse("invalid", "That post has no poll to vote in.")
  const poll = post.media
  if (poll.voted !== null) {
    return refuse("conflict", `You have already voted in this poll, for “${poll.options[poll.voted].label}”.`)
  }
  if (!Number.isInteger(option) || option < 0 || option >= poll.options.length) {
    return refuse("invalid", "Pick one of the poll's options.")
  }
  const options = poll.options.map((entry, index) => (index === option ? { ...entry, votes: entry.votes + 1 } : entry))
  const updated = await db.posts.update(post.id, { media: { kind: "poll", options, voted: option } })
  if (!updated.ok) return updated
  return { ok: true, data: toPostRow(updated.data) }
}

"use client"

import * as React from "react"
import { HeartIcon, MessageCircleIcon, Share2Icon } from "lucide-react"

import { cn } from "@/lib/utils"
import { formatNumber, getInitials } from "@/lib/format"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Callout } from "@/components/ui/callout"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

import { type PostRow } from "../data"
import { PostComments } from "./post-comments"
import { PostMedia } from "./post-media"

export type PostCardProps = {
  post: PostRow
  art: Record<string, React.ReactNode>
  me: { name: string; avatarUrl?: string }
  onLike: () => void
  onVote: (option: number) => void
  onShare: () => void
  onComment: (text: string) => Promise<boolean>
  /** Something done to this post is on its way to the server. */
  busy: boolean
  /** A refusal of something done to this post: a like or a vote, or — `comment` — a reply. */
  refusal?: { where: "post" | "comment"; message: string }
}

const count = (value: number, one: string, many: string) => `${formatNumber(value)} ${value === 1 ? one : many}`

/**
 * One post: who wrote it and when on the strip; the text and what it carries
 * on the sheet; then the reactions — a like that is a toggle, the comments
 * that open in place under it, and a share that copies the post's link.
 */
export function PostCard({ post, art, me, onLike, onVote, onShare, onComment, busy, refusal }: PostCardProps) {
  const [open, setOpen] = React.useState(false)
  const nameId = React.useId()
  const timeId = React.useId()
  const threadId = React.useId()

  return (
    // Named by who wrote it and when: the feed's people write several posts each.
    <article data-slot="post-card" aria-labelledby={`${nameId} ${timeId}`}>
      <Card>
        <CardHeader className="flex items-center gap-3">
          <Avatar>
            <AvatarImage src={post.author.avatarUrl} alt="" />
            <AvatarFallback className="text-xs">{getInitials(post.author.name)}</AvatarFallback>
          </Avatar>
          <div className="flex min-w-0 flex-col">
            <CardTitle>
              <h2 id={nameId} className="truncate">
                {post.author.name}
              </h2>
            </CardTitle>
            <p className="flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
              <span className="truncate font-mono">@{post.author.handle}</span>
              <span aria-hidden="true">·</span>
              <time id={timeId} dateTime={post.at.toISOString()} className="shrink-0 tabular-nums">
                {post.when}
              </time>
            </p>
          </div>
        </CardHeader>

        <CardContent className="flex flex-col gap-3">
          {post.text ? <p className="text-sm leading-6 text-pretty whitespace-pre-line text-foreground">{post.text}</p> : null}
          {post.media ? <PostMedia media={post.media} art={art} onVote={onVote} voting={busy} /> : null}
          {refusal?.where === "post" ? (
            <Callout variant="danger" role="alert">
              {refusal.message}
            </Callout>
          ) : null}

          <div className="-mx-1 flex items-center gap-1">
            <Button
              type="button"
              variant="ghost"
              size="sm"
              aria-pressed={post.liked}
              aria-label={`Like, ${count(post.likes, "like", "likes")}`}
              // Busy but focusable, as AsyncButton is: a natively disabled
              // button drops the focus it was pressed with.
              disabled={busy}
              focusableWhenDisabled
              aria-disabled={busy || undefined}
              aria-busy={busy || undefined}
              onClick={onLike}
              className="aria-pressed:text-foreground"
            >
              <HeartIcon aria-hidden="true" data-icon="inline-start" className={cn(post.liked && "fill-current")} />
              <span className="tabular-nums">{formatNumber(post.likes)}</span>
            </Button>
            <Button
              type="button"
              variant="ghost"
              size="sm"
              aria-expanded={open}
              aria-controls={open ? threadId : undefined}
              aria-label={`Comments, ${count(post.comments.length, "comment", "comments")}`}
              onClick={() => setOpen((current) => !current)}
              className="aria-expanded:bg-brand-muted"
            >
              <MessageCircleIcon aria-hidden="true" data-icon="inline-start" />
              <span className="tabular-nums">{formatNumber(post.comments.length)}</span>
            </Button>
            <Button
              type="button"
              variant="ghost"
              size="sm"
              aria-label={`Share, ${count(post.shares, "share", "shares")}`}
              onClick={onShare}
              className="ml-auto"
            >
              <Share2Icon aria-hidden="true" data-icon="inline-start" />
              <span className="tabular-nums">{formatNumber(post.shares)}</span>
            </Button>
          </div>

          {open ? (
            <PostComments
              id={threadId}
              comments={post.comments}
              author={post.author.name}
              me={me}
              onComment={onComment}
              refusal={refusal?.where === "comment" ? refusal.message : undefined}
            />
          ) : null}
        </CardContent>
      </Card>
    </article>
  )
}

"use client"

import * as React from "react"

import { getInitials } from "@/lib/format"
import { AsyncButton } from "@/components/ui/async-button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Callout } from "@/components/ui/callout"
import { Input } from "@/components/ui/input"

import { type CommentRow } from "../data"

export type PostCommentsProps = {
  id: string
  comments: CommentRow[]
  /** The post's author, so the field can say who it answers. */
  author: string
  me: { name: string; avatarUrl?: string }
  /** Posts the reply; true when it went, so the field can empty itself. */
  onComment: (text: string) => Promise<boolean>
  refusal?: string
}

/**
 * A post's thread, opened in place under it: every reply oldest first, so the
 * newest sits last beside the field that adds one. A refusal is printed under
 * the field that asked.
 */
export function PostComments({ id, comments, author, me, onComment, refusal }: PostCommentsProps) {
  const [text, setText] = React.useState("")
  const [sending, setSending] = React.useState(false)
  const fieldId = React.useId()
  const errorId = React.useId()

  async function send() {
    if (sending) return
    setSending(true)
    const ok = await onComment(text)
    setSending(false)
    if (ok) setText("")
  }

  return (
    <div id={id} data-slot="post-comments" className="flex flex-col gap-3 border-t pt-3">
      {comments.length > 0 ? (
        <ol aria-label="Comments" className="flex flex-col gap-3">
          {comments.map((comment) => (
            <li key={comment.id} className="flex gap-2.5">
              <Avatar size="sm" className="mt-0.5">
                <AvatarImage src={comment.author.avatarUrl} alt="" />
                <AvatarFallback className="text-2xs">{getInitials(comment.author.name)}</AvatarFallback>
              </Avatar>
              <div className="flex min-w-0 flex-1 flex-col gap-0.5 rounded-lg bg-muted/60 px-3 py-2">
                <p className="flex flex-wrap items-baseline gap-x-2 text-xs">
                  <span className="font-medium text-foreground">{comment.author.name}</span>
                  <span className="text-muted-foreground tabular-nums">{comment.when}</span>
                </p>
                <p className="text-sm leading-5 text-foreground">{comment.text}</p>
              </div>
            </li>
          ))}
        </ol>
      ) : (
        <p className="text-sm text-muted-foreground">No comments yet. Start the thread.</p>
      )}

      <form
        className="flex items-start gap-2.5"
        onSubmit={(event) => {
          event.preventDefault()
          void send()
        }}
      >
        <Avatar size="sm" className="mt-1.5">
          {me.avatarUrl ? <AvatarImage src={me.avatarUrl} alt="" /> : null}
          <AvatarFallback className="text-2xs">{getInitials(me.name)}</AvatarFallback>
        </Avatar>
        <div className="flex min-w-0 flex-1 flex-col gap-2">
          <label htmlFor={fieldId} className="sr-only">
            Comment on {author}’s post
          </label>
          <div className="flex gap-2">
            <Input
              id={fieldId}
              value={text}
              placeholder="Add a comment…"
              aria-invalid={refusal ? true : undefined}
              aria-describedby={refusal ? errorId : undefined}
              onChange={(event) => setText(event.target.value)}
              className="min-w-0 flex-1"
            />
            <AsyncButton type="submit" variant="outline" loading={sending}>
              Comment
            </AsyncButton>
          </div>
          {refusal ? (
            <Callout id={errorId} variant="danger" role="alert">
              {refusal}
            </Callout>
          ) : null}
        </div>
      </form>
    </div>
  )
}

"use client"

import * as React from "react"
import { ChartBarIcon, Link2Icon, PlusIcon, ShoppingBagIcon, XIcon } from "lucide-react"

import { getInitials } from "@/lib/format"
import { AsyncButton } from "@/components/ui/async-button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Callout } from "@/components/ui/callout"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"
import { Textarea } from "@/components/ui/textarea"

import { type DraftMedia, type NewPost } from "../actions"
import { type LinkChoice, type ProductChoice } from "../data"

export type PostComposerProps = {
  me: { name: string; avatarUrl?: string }
  links: LinkChoice[]
  products: ProductChoice[]
  /** Posts the draft; true when it went, so the composer can empty itself. */
  onPost: (post: NewPost) => Promise<boolean>
  refusal?: string
}

const KINDS = [
  { kind: "poll", label: "Poll", icon: ChartBarIcon },
  { kind: "link", label: "Link", icon: Link2Icon },
  { kind: "product", label: "Product", icon: ShoppingBagIcon },
] as const

const MAX_OPTIONS = 4

/**
 * The composer: the member's face, the text, and three things a post can
 * carry — a poll, a link card or a product from the store. Each attach button
 * adds its kind to the draft and pressing it again takes it off; the draft's
 * media is edited under the text. The server decides what goes out, and a
 * refusal is printed here, above the Post button.
 */
export function PostComposer({ me, links, products, onPost, refusal }: PostComposerProps) {
  const [text, setText] = React.useState("")
  const [media, setMedia] = React.useState<DraftMedia | null>(null)
  const [posting, setPosting] = React.useState(false)
  const titleId = React.useId()
  const errorId = React.useId()

  function attach(kind: DraftMedia["kind"]) {
    if (media?.kind === kind) return setMedia(null)
    if (kind === "poll") setMedia({ kind, options: ["", ""] })
    if (kind === "link") setMedia({ kind, domain: links[0]?.domain ?? "" })
    if (kind === "product") setMedia({ kind, productId: products[0]?.id ?? "" })
  }

  async function post() {
    if (posting) return
    setPosting(true)
    const ok = await onPost({ text, ...(media ? { media } : {}) })
    setPosting(false)
    if (ok) {
      setText("")
      setMedia(null)
    }
  }

  return (
    <Card data-slot="post-composer" role="region" aria-labelledby={titleId}>
      <CardHeader>
        <CardTitle>
          <h2 id={titleId}>Share with the team</h2>
        </CardTitle>
      </CardHeader>
      <form
        className="contents"
        onSubmit={(event) => {
          event.preventDefault()
          void post()
        }}
      >
        <CardContent className="flex flex-col gap-3">
          <div className="flex gap-3">
            <Avatar className="mt-1">
              {me.avatarUrl ? <AvatarImage src={me.avatarUrl} alt="" /> : null}
              <AvatarFallback className="text-xs">{getInitials(me.name)}</AvatarFallback>
            </Avatar>
            <Textarea
              aria-label="Post"
              placeholder="What is new with you and your work?"
              rows={3}
              value={text}
              aria-invalid={refusal ? true : undefined}
              aria-describedby={refusal ? errorId : undefined}
              onChange={(event) => setText(event.target.value)}
              className="min-h-20"
            />
          </div>

          {media ? (
            <div className="flex flex-col gap-2 panel p-3 sm:ml-11">
              <div className="flex items-center justify-between gap-2">
                <p className="type-label text-foreground">
                  {media.kind === "poll" ? "Poll" : media.kind === "link" ? "Link card" : "Product"}
                </p>
                <Button type="button" variant="ghost" size="icon-xs" aria-label="Remove the attachment" onClick={() => setMedia(null)}>
                  <XIcon aria-hidden="true" />
                </Button>
              </div>
              {media.kind === "poll" ? (
                <div className="flex flex-col gap-2">
                  {media.options.map((option, index) => (
                    <div key={index} className="flex items-center gap-2">
                      <Input
                        aria-label={`Option ${index + 1}`}
                        placeholder={`Option ${index + 1}`}
                        value={option}
                        onChange={(event) =>
                          setMedia({ kind: "poll", options: media.options.map((entry, at) => (at === index ? event.target.value : entry)) })
                        }
                      />
                      {media.options.length > 2 ? (
                        <Button
                          type="button"
                          variant="ghost"
                          size="icon-sm"
                          aria-label={`Remove option ${index + 1}`}
                          onClick={() => setMedia({ kind: "poll", options: media.options.filter((_, at) => at !== index) })}
                        >
                          <XIcon aria-hidden="true" />
                        </Button>
                      ) : null}
                    </div>
                  ))}
                  {media.options.length < MAX_OPTIONS ? (
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      className="self-start"
                      onClick={() => setMedia({ kind: "poll", options: [...media.options, ""] })}
                    >
                      <PlusIcon data-icon="inline-start" />
                      Add an option
                    </Button>
                  ) : null}
                </div>
              ) : media.kind === "link" ? (
                <NativeSelect aria-label="Link to share" value={media.domain} onChange={(event) => setMedia({ kind: "link", domain: event.target.value })}>
                  {links.map((link) => (
                    <NativeSelectOption key={link.domain} value={link.domain}>
                      {link.title} — {link.domain}
                    </NativeSelectOption>
                  ))}
                </NativeSelect>
              ) : (
                <NativeSelect
                  aria-label="Product to share"
                  value={media.productId}
                  onChange={(event) => setMedia({ kind: "product", productId: event.target.value })}
                >
                  {products.map((product) => (
                    <NativeSelectOption key={product.id} value={product.id}>
                      {product.name} — {product.price}
                    </NativeSelectOption>
                  ))}
                </NativeSelect>
              )}
            </div>
          ) : null}

          {refusal ? (
            <Callout id={errorId} variant="danger" role="alert">
              {refusal}
            </Callout>
          ) : null}
        </CardContent>

        <CardFooter className="flex-wrap">
          <div role="group" aria-label="Attach" className="flex flex-wrap items-center gap-1">
            {KINDS.map(({ kind, label, icon: Icon }) => (
              <Button
                key={kind}
                type="button"
                variant="ghost"
                size="sm"
                aria-pressed={media?.kind === kind}
                onClick={() => attach(kind)}
                className="aria-pressed:bg-brand-muted aria-pressed:font-medium"
              >
                <Icon data-icon="inline-start" />
                {label}
              </Button>
            ))}
          </div>
          <AsyncButton type="submit" loading={posting} className="ml-auto">
            Post
          </AsyncButton>
        </CardFooter>
      </form>
    </Card>
  )
}

"use client"

import * as React from "react"
import { CheckIcon, LinkIcon, PackageIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { formatNumber } from "@/lib/format"
import { LogoMark } from "@/components/ui/logo-mark"
import { CHART_BG, PercentageBar, segmentPercentages, type ChartToken } from "@/components/ui/percentage-bar"
import { Price } from "@/components/ui/price"
import { Sparkline } from "@/components/ui/sparkline"
import { StatCard } from "@/components/ui/stat-card"

import { type MediaRow } from "../data"

/** A poll's options take the chart's hues from the second slot on, the first being the grey. */
const POLL_COLORS: readonly ChartToken[] = ["chart-2", "chart-3", "chart-4", "chart-5"]

const votes = (count: number) => `${formatNumber(count)} ${count === 1 ? "vote" : "votes"}`

export type PostMediaProps = {
  media: MediaRow
  /** The product drawings, rendered on the server and handed in by product id. */
  art: Record<string, React.ReactNode>
  onVote: (option: number) => void
  /** A vote on its way to the server. */
  voting: boolean
}

/** What a post carries, drawn — never a photograph: a link card, a poll, a product or a figure. */
export function PostMedia({ media, art, onVote, voting }: PostMediaProps) {
  if (media.kind === "link") return <LinkCard media={media} />
  if (media.kind === "poll") return <PollCard media={media} onVote={onVote} voting={voting} />
  if (media.kind === "product") return <ProductCard media={media} art={art[media.productId]} />
  return <StatMedia media={media} />
}

function LinkCard({ media }: { media: Extract<MediaRow, { kind: "link" }> }) {
  return (
    <figure data-slot="post-link" className="flex flex-col gap-3 panel p-4">
      {media.mark ? (
        <LogoMark name={media.mark} size="sm" className="text-muted-foreground" />
      ) : (
        <LinkIcon aria-hidden="true" className="size-4 text-muted-foreground" />
      )}
      <figcaption className="flex flex-col gap-0.5">
        <span className="text-sm leading-5 font-medium text-foreground">{media.title}</span>
        <span className="text-xs text-muted-foreground">{media.domain}</span>
      </figcaption>
    </figure>
  )
}

function PollCard({
  media,
  onVote,
  voting,
}: {
  media: Extract<MediaRow, { kind: "poll" }>
  onVote: (option: number) => void
  voting: boolean
}) {
  const total = media.options.reduce((sum, option) => sum + option.votes, 0)
  // The bar's own rounding — largest remainders — so the printed shares add
  // up to 100 and match the segments exactly.
  const shares = segmentPercentages(media.options.map((option) => ({ value: option.votes })))
  const voted = media.voted
  // Once a vote is cast, or on its way, the options only report. The one the
  // reader pressed stays focusable — aria-disabled, not disabled, as a busy
  // AsyncButton is — so a keyboard reader keeps their place; the others,
  // which nobody is on, are simply disabled once the vote has landed.
  const locked = voted !== null || voting

  return (
    <div data-slot="post-poll" className="flex flex-col gap-3 panel p-4">
      <ul className="flex flex-col gap-1">
        {media.options.map((option, index) => {
          const mine = voted === index
          return (
            <li key={option.label}>
              <button
                type="button"
                disabled={voted !== null && !mine}
                aria-disabled={locked || undefined}
                aria-pressed={mine}
                onClick={() => {
                  if (!locked) onVote(index)
                }}
                className={cn(
                  "flex h-9 w-full items-center gap-2 rounded-md px-2.5 text-left text-sm transition-colors duration-(--duration-fast) ease-(--ease-standard) focus-ring",
                  locked ? "cursor-default" : "hover:bg-muted",
                  mine && "bg-brand-muted font-medium"
                )}
              >
                <span aria-hidden="true" className={cn("size-2 shrink-0 rounded-full", CHART_BG[POLL_COLORS[index]])} />
                <span className="min-w-0 flex-1 truncate">{option.label}</span>
                {mine ? <CheckIcon aria-hidden="true" className="size-4 shrink-0" /> : null}
                <span className="shrink-0 text-xs tabular-nums text-muted-foreground">
                  {shares[index]}%<span className="sr-only">, {votes(option.votes)}</span>
                </span>
              </button>
            </li>
          )
        })}
      </ul>
      <PercentageBar
        height="sm"
        showLegend={false}
        segments={media.options.map((option, index) => ({
          label: option.label,
          value: option.votes,
          color: POLL_COLORS[index],
        }))}
      />
      <p className="text-xs text-muted-foreground tabular-nums">
        {votes(total)}
        {voted !== null ? ` · You voted for ${media.options[voted].label}` : " · Pick one to vote"}
      </p>
    </div>
  )
}

function ProductCard({ media, art }: { media: Extract<MediaRow, { kind: "product" }>; art: React.ReactNode }) {
  return (
    <div data-slot="post-product" className="flex items-center gap-4 panel p-3">
      <div className="w-20 shrink-0 overflow-hidden rounded-md sm:w-24">
        {art ?? (
          <div className="flex aspect-square items-center justify-center bg-muted text-muted-foreground">
            <PackageIcon aria-hidden="true" className="size-6" />
          </div>
        )}
      </div>
      <div className="flex min-w-0 flex-col gap-1">
        <span className="text-xs text-muted-foreground">{media.category}</span>
        <span className="text-sm leading-5 font-medium text-foreground">{media.name}</span>
        <Price amount={media.price} size="sm" />
      </div>
    </div>
  )
}

/** A figure, as a small figure inside a card is drawn: the kit's StatCard, its delta against where the series began and the series under it. */
function StatMedia({ media }: { media: Extract<MediaRow, { kind: "stat" }> }) {
  const first = media.values[0]
  const last = media.values[media.values.length - 1]
  const change = first === 0 ? 0 : last / first - 1

  return (
    <StatCard
      data-slot="post-stat"
      size="sm"
      label={media.label}
      value={formatNumber(last)}
      delta={change}
      positiveIsGood={media.risingIsGood}
      description={`Over the last ${media.values.length} weeks`}
      footer={
        <Sparkline data={media.values} height={32} aria-label={`${media.label}, the last ${media.values.length} weeks`} />
      }
    />
  )
}

"use client"

import * as React from "react"
import { UserCheckIcon, UserPlusIcon } from "lucide-react"

import { formatNumber, getInitials } from "@/lib/format"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

import { type ProfileCard, type Suggestion, type Trend } from "../data"

export type SocialRailProps = {
  profile: ProfileCard
  /** The member's own posts, which the feed adds to. */
  posts: number
  /** How many people the member follows now, the rail's own toggles counted in. */
  following: number
  suggestions: Suggestion[]
  followed: ReadonlySet<string>
  onFollow: (person: Suggestion) => void
  trends: Trend[]
  topic: string | null
  onTopic: (tag: string | null) => void
}

/** A figure on the profile card: the number, and what it counts. */
function Figure({ label, value }: { label: string; value: number }) {
  return (
    <div className="flex flex-col items-center gap-0.5 px-2 py-2.5">
      <dt className="order-last text-xs text-muted-foreground">{label}</dt>
      <dd className="type-numeral text-lg tabular-nums">{formatNumber(value)}</dd>
    </div>
  )
}

/**
 * The rail beside the feed — under it below 1024px: the member's own card
 * with the three counts, the teammates they do not follow yet, and the topics
 * tagged most, each of which narrows the feed to itself.
 */
export function SocialRail({
  profile,
  posts,
  following,
  suggestions,
  followed,
  onFollow,
  trends,
  topic,
  onTopic,
}: SocialRailProps) {
  return (
    <aside aria-label="About you and the team" className="flex flex-col gap-4">
      <Card data-slot="social-profile">
        <CardHeader>
          <CardTitle>
            <h2>Your profile</h2>
          </CardTitle>
        </CardHeader>
        <CardContent className="flex flex-col items-center gap-3 text-center">
          <Avatar size="lg" className="size-14">
            {profile.avatarUrl ? <AvatarImage src={profile.avatarUrl} alt="" /> : null}
            <AvatarFallback>{getInitials(profile.name)}</AvatarFallback>
          </Avatar>
          <div className="flex flex-col gap-0.5">
            <p className="text-sm font-semibold text-foreground">{profile.name}</p>
            <p className="font-mono text-xs text-muted-foreground">@{profile.handle}</p>
          </div>
          <dl className="grid w-full grid-cols-3 divide-x rounded-lg bg-muted/50">
            <Figure label="Followers" value={profile.followers} />
            <Figure label="Following" value={following} />
            <Figure label="Posts" value={posts} />
          </dl>
        </CardContent>
      </Card>

      <Card data-slot="social-suggestions">
        <CardHeader>
          <CardTitle>
            <h2>Who to follow</h2>
          </CardTitle>
        </CardHeader>
        <CardContent className="p-0">
          <ul className="divide-y">
            {suggestions.map((person) => {
              const on = followed.has(person.id)
              return (
                <li key={person.id} className="flex items-center gap-3 px-3 py-2.5">
                  <Avatar>
                    <AvatarImage src={person.avatarUrl} alt="" />
                    <AvatarFallback className="text-xs">{getInitials(person.name)}</AvatarFallback>
                  </Avatar>
                  <div className="flex min-w-0 flex-1 flex-col">
                    <span className="truncate text-sm font-medium text-foreground">{person.name}</span>
                    <span className="truncate font-mono text-xs text-muted-foreground">@{person.handle}</span>
                  </div>
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    aria-pressed={on}
                    aria-label={`Follow ${person.name}`}
                    onClick={() => onFollow(person)}
                    className="aria-pressed:bg-brand-muted aria-pressed:font-medium"
                  >
                    {/* The label stays "Follow", inside the button's name; the pressed state, the fill and the tick say it took. */}
                    {on ? <UserCheckIcon data-icon="inline-start" /> : <UserPlusIcon data-icon="inline-start" />}
                    Follow
                  </Button>
                </li>
              )
            })}
          </ul>
        </CardContent>
      </Card>

      <Card data-slot="social-trending">
        <CardHeader>
          <CardTitle>
            <h2>Trending</h2>
          </CardTitle>
        </CardHeader>
        <CardContent className="p-2">
          <ul className="flex flex-col gap-0.5">
            {trends.map((trend) => {
              const on = trend.tag === topic
              return (
                <li key={trend.tag}>
                  <button
                    type="button"
                    aria-pressed={on}
                    onClick={() => onTopic(on ? null : trend.tag)}
                    className="flex h-9 w-full items-center justify-between gap-3 rounded-md px-2 text-sm transition-colors duration-(--duration-fast) ease-(--ease-standard) focus-ring hover:bg-muted aria-pressed:bg-brand-muted aria-pressed:font-medium"
                  >
                    <span className="font-medium text-foreground">{trend.tag}</span>{" "}
                    <span className="text-xs tabular-nums text-muted-foreground">
                      {trend.posts} {trend.posts === 1 ? "post" : "posts"}
                    </span>
                  </button>
                </li>
              )
            })}
          </ul>
        </CardContent>
      </Card>
    </aside>
  )
}

"use client"

import * as React from "react"

import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
import { Button } from "@/components/ui/button"
import { EmptyState } from "@/components/ui/empty-state"
import { PageHeader } from "@/components/ui/page-header"

import { addComment, createPost, toggleLike, votePoll, type NewPost } from "../actions"
import { type LinkChoice, type PostRow, type ProductChoice, type ProfileCard, type Suggestion, type Trend } from "../data"
import { PostCard } from "./post-card"
import { PostComposer } from "./post-composer"
import { SocialRail } from "./social-rail"

export type SocialViewProps = {
  posts: PostRow[]
  profile: ProfileCard
  suggestions: Suggestion[]
  trends: Trend[]
  links: LinkChoice[]
  products: ProductChoice[]
  /** The product drawings, rendered on the server, by product id. */
  art: Record<string, React.ReactNode>
}

type Refusal = { postId: string | null; where: "post" | "comment" | "composer"; message: string }

/**
 * The team feed. One island, because the composer, the posts and the rail's
 * counts are one piece of state: a post written here leads the feed and adds
 * to the member's own count, a follow in the rail moves the Following figure.
 * Every change goes through a server action; a success is said once, in the
 * status line under the title, and a refusal where the reader was looking —
 * in the composer, on the post, or under the comment field.
 */
export function SocialView({ posts: seeded, profile, suggestions, trends, links, products, art }: SocialViewProps) {
  const [posts, setPosts] = React.useState(seeded)
  const [followed, setFollowed] = React.useState<ReadonlySet<string>>(new Set())
  const [topic, setTopic] = React.useState<string | null>(null)
  const [notice, setNotice] = React.useState("")
  const [refusal, setRefusal] = React.useState<Refusal | null>(null)
  // The posts with a like or a vote on its way, each on its own: one post's
  // answer frees that post's controls and nobody else's. The ref answers a
  // second press before the state has caught up with the first.
  const [busy, setBusy] = React.useState<ReadonlySet<string>>(() => new Set())
  const running = React.useRef(new Set<string>())
  const { copy } = useCopyToClipboard()

  const me = { name: profile.name, avatarUrl: profile.avatarUrl }
  // Only the member adds posts here, so the feed's growth is theirs.
  const mine = profile.posts + posts.length - seeded.length
  const visible = topic ? posts.filter((post) => post.tags.includes(topic)) : posts

  /** Runs one post's like or vote, once at a time, and hands back the server's answer. */
  async function busyWith<T>(id: string, work: () => Promise<T>): Promise<T | null> {
    if (running.current.has(id)) return null
    running.current.add(id)
    setBusy(new Set(running.current))
    try {
      return await work()
    } finally {
      running.current.delete(id)
      setBusy(new Set(running.current))
    }
  }

  /** A post as the server returned it, merged into the row as it stands now: a comment added meanwhile stays. */
  const merge = (row: Omit<PostRow, "comments">) =>
    setPosts((current) => current.map((post) => (post.id === row.id ? { ...row, comments: post.comments } : post)))

  function refuse(next: Refusal) {
    setNotice("")
    setRefusal(next)
  }

  async function publish(draft: NewPost): Promise<boolean> {
    setRefusal(null)
    const result = await createPost(draft)
    if (!result.ok) {
      refuse({ postId: null, where: "composer", message: result.error.message })
      return false
    }
    setPosts((current) => [result.data, ...current])
    setTopic(null)
    setNotice("Posted to the feed.")
    return true
  }

  async function like(post: PostRow) {
    setRefusal(null)
    const result = await busyWith(post.id, () => toggleLike(post.id))
    if (!result) return
    if (!result.ok) return refuse({ postId: post.id, where: "post", message: result.error.message })
    merge(result.data)
    setNotice(result.data.liked ? `You like ${post.author.name}’s post.` : `You no longer like ${post.author.name}’s post.`)
  }

  async function vote(post: PostRow, option: number) {
    if (post.media?.kind !== "poll") return
    const label = post.media.options[option]?.label
    setRefusal(null)
    const result = await busyWith(post.id, () => votePoll(post.id, option))
    if (!result) return
    if (!result.ok) return refuse({ postId: post.id, where: "post", message: result.error.message })
    merge(result.data)
    setNotice(`Voted for ${label}.`)
  }

  async function comment(post: PostRow, text: string): Promise<boolean> {
    setRefusal(null)
    const result = await addComment(post.id, text)
    if (!result.ok) {
      refuse({ postId: post.id, where: "comment", message: result.error.message })
      return false
    }
    setPosts((current) =>
      current.map((entry) => (entry.id === post.id ? { ...entry, comments: [...entry.comments, result.data] } : entry))
    )
    setNotice(`Comment added to ${post.author.name}’s post.`)
    return true
  }

  async function share(post: PostRow) {
    const href = typeof window === "undefined" ? `#${post.id}` : `${window.location.href.split("#")[0]}#${post.id}`
    const copied = await copy(href)
    setRefusal(null)
    setNotice(copied ? `Link to ${post.author.name}’s post copied.` : `The clipboard is not available here — the link is ${href}.`)
  }

  function follow(person: Suggestion) {
    const on = !followed.has(person.id)
    setFollowed((current) => {
      const next = new Set(current)
      if (on) next.add(person.id)
      else next.delete(person.id)
      return next
    })
    setNotice(on ? `Following ${person.name}.` : `Stopped following ${person.name}.`)
  }

  return (
    <div data-slot="social-view" className="flex flex-col gap-3">
      <PageHeader title="Social" description="What the team is shipping, asking and reading." />
      <p data-slot="social-status" role="status" aria-live="polite" className="-mt-1 min-h-5 text-sm text-muted-foreground">
        {notice}
      </p>

      <div className="grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_18rem] xl:grid-cols-[minmax(0,42rem)_20rem] xl:justify-center">
        <section aria-label="Feed" className="flex min-w-0 flex-col gap-4">
          <PostComposer
            me={me}
            links={links}
            products={products}
            onPost={publish}
            refusal={refusal?.where === "composer" ? refusal.message : undefined}
          />
          {topic ? (
            <div className="flex items-center justify-between gap-3 text-sm text-muted-foreground">
              <p>
                Posts tagged <span className="font-medium text-foreground">{topic}</span>
              </p>
              <Button type="button" variant="ghost" size="sm" onClick={() => setTopic(null)}>
                Show every post
              </Button>
            </div>
          ) : null}
          {visible.length === 0 ? (
            <EmptyState title="Nothing here yet" description="No post carries that topic." />
          ) : (
            visible.map((post) => (
              <div key={post.id} id={post.id} className="scroll-mt-20">
                <PostCard
                  post={post}
                  art={art}
                  me={me}
                  busy={busy.has(post.id)}
                  refusal={refusal?.postId === post.id && refusal.where !== "composer" ? { where: refusal.where, message: refusal.message } : undefined}
                  onLike={() => void like(post)}
                  onVote={(option) => void vote(post, option)}
                  onShare={() => void share(post)}
                  onComment={(text) => comment(post, text)}
                />
              </div>
            ))
          )}
        </section>

        <SocialRail
          profile={profile}
          posts={mine}
          following={profile.following + followed.size}
          suggestions={suggestions}
          followed={followed}
          onFollow={follow}
          trends={trends}
          topic={topic}
          onTopic={setTopic}
        />
      </div>
    </div>
  )
}