item-card

"use client"

// AN ITEM CARD: one thing a person reads and acts on (a ticket, a step, a post), on
// `card` (swift-utils Ink's `inkCard` and its parts on the web). The box is a card's
// own, its hue by the flare rule, its padding and the hand's light being card's
// options:
//
//   <Card hue="oklch(68% 0.13 250)" padding="compact" interactive>
//     <CardKind number="#21">feat</CardKind>
//     <CardTitle>offline downloads</CardTitle>
//     <CardFooter>
//       <CardAuthor name="Adrian Galilea" />
//       <CardCount icon={ArrowUp} count={12} on={voted} said="votes" onClick={vote} />
//     </CardFooter>
//   </Card>
//
// What only an item has lives here: its kind, who wrote it, its counts, and opening it
// whole (Ink's `inkFullView`: `useCardView` and `CardView`, a card growing out of its
// place into a centred card over the page dimmed and blurred, and back). An item of
// its own because those parts need an avatar, a dialog and a button, which a card
// holding a form or a list should never install; the parts read the card they stand
// in (`useCardFace`) and its hue (`--card-ink`), told nothing twice.

import { X } from "lucide-react"
import * as React from "react"
import { flushSync } from "react-dom"
import { cn } from "@/lib/utils"
import { Avatar } from "@/registry/base-nova/ui/avatar"
import { Button } from "@/registry/base-nova/ui/button"
import { Card, useCardFace } from "@/registry/base-nova/ui/card"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogTitle,
} from "@/registry/base-nova/ui/dialog"
import type { Material } from "@/registry/base-nova/ui/material"

/** An item's kind, the word in its hue (`feat`, `fix`), and its number after it,
 *  at the muted 65%. Monospaced and small: it files the card, the title says it. */
export function CardKind({
  number,
  className,
  children,
}: {
  number?: React.ReactNode
  className?: string
  children: React.ReactNode
}) {
  useCardFace("CardKind")
  return (
    <p
      data-slot="card-kind"
      className={cn("flex gap-2 font-mono text-[10px] leading-none", className)}
    >
      <span className="text-[var(--card-ink,color-mix(in_oklab,currentColor_65%,transparent))]">
        {children}
      </span>
      {number !== undefined && (
        <span className="text-current/65">{number}</span>
      )}
    </p>
  )
}

/** Who wrote an item: their round face (their initial when there is none, avatar's
 *  own) and their name, small and at the muted 65%. In a footer it takes the leading
 *  side. */
export function CardAuthor({
  name,
  src,
  className,
}: {
  name: string
  /** Their picture; absent, their initial. */
  src?: string
  className?: string
}) {
  useCardFace("CardAuthor")
  return (
    <span
      data-slot="card-author"
      className={cn("flex min-w-0 items-center gap-2", className)}
    >
      {/* The name stands beside it: the face is decorative. */}
      <Avatar src={src} alt="" name={name} size="sm" />
      <span className="truncate text-current/65">{name}</span>
    </span>
  )
}

/** A count an item carries and a person acts on (its comments, its votes): vote's
 *  pill, the icon and the number. `on` is a count that is theirs (their vote): the
 *  icon filled in the card's hue. `said` names what is counted, for a screen reader. */
export function CardCount({
  icon: Icon,
  count,
  on = false,
  said,
  onClick,
  className,
}: {
  icon: React.ComponentType<{ className?: string; "aria-hidden"?: boolean }>
  count: number
  on?: boolean
  said: string
  onClick?: () => void
  className?: string
}) {
  const { material } = useCardFace("CardCount")
  return (
    <Button
      variant="ghost"
      size="sm"
      corners="pill"
      material={material}
      pressed={on}
      aria-label={`${count} ${said}`}
      data-carry-ignore=""
      onClick={(e) => {
        // A count on a card that opens is its own press.
        e.stopPropagation()
        onClick?.()
      }}
      className={cn("gap-1 tabular-nums", className)}
    >
      <Icon
        aria-hidden
        className={cn(
          "size-3.5",
          on
            ? "fill-current text-[var(--card-ink,currentColor)]"
            : "text-current/55",
        )}
      />
      {count}
    </Button>
  )
}

/** The name a card opened whole wears for its view transition, shown copy by copy. */
const LIFTED_NAME = "card-full"

/** A card opened whole: which one (`opened`), whether it stands open, and the props
 *  its source card wears so the view transition knows where it comes from and goes
 *  back to. One at a time. */
export function useCardView<ID>() {
  const [lifted, setLifted] = React.useState<ID | null>(null)
  const [open, setOpen] = React.useState(false)
  const move = (f: () => void) => {
    if (!document.startViewTransition) {
      f()
      return null
    }
    return document.startViewTransition(() => flushSync(f))
  }
  return {
    /** The card opened, or being carried back. */
    opened: lifted,
    open,
    show: (id: ID) => {
      // The source wears the name first, then hands it to the open copy.
      flushSync(() => setLifted(id))
      move(() => setOpen(true))
    },
    hide: () => {
      const t = move(() => setOpen(false))
      if (!t) setLifted(null)
      else void t.finished.then(() => setLifted(null))
    },
    /** What the card `id` wears in its place: the name while it is the one opened
     *  and not open, so it is where the open card comes from and goes back to. */
    source: (id: ID): React.CSSProperties | undefined =>
      id === lifted && !open ? { viewTransitionName: LIFTED_NAME } : undefined,
  }
}

/** The card opened whole, over the page dimmed and blurred: a card of its own, its hue
 *  and material the source's, as wide as reading wants and as tall as what it holds
 *  (then it scrolls), its ✕ at its corner; esc and a press outside put it back.
 *  `title` names it for a screen reader (and is its heading). */
export function CardView<ID>({
  view,
  title,
  hue,
  material,
  children,
}: {
  view: ReturnType<typeof useCardView<ID>>
  title: string
  hue?: string
  material?: Material
  children: React.ReactNode
}) {
  return (
    <Dialog
      open={view.open}
      onOpenChange={(next) => {
        if (!next) view.hide()
      }}
    >
      <DialogContent
        bare
        backdrop="bg-black/50 backdrop-blur-sm"
        className="top-[10vh] w-[min(36rem,calc(100vw-2rem))] translate-y-0"
      >
        <Card
          hue={hue}
          material={material}
          padding="regular"
          lifted
          style={view.open ? { viewTransitionName: LIFTED_NAME } : undefined}
          // edge: its foot is the card's band, the end of the card itself, which a
          // fade would fade; what is taller than the window scrolls under its head.
          className="max-h-[80vh] overflow-auto"
        >
          <div className="flex items-start justify-between gap-4">
            <DialogTitle className="font-semibold text-base">
              {title}
            </DialogTitle>
            <DialogClose
              render={
                <Button
                  variant="ghost"
                  size="icon-sm"
                  corners="pill"
                  aria-label="close"
                  className="-mt-1 -mr-1"
                />
              }
            >
              <X />
            </DialogClose>
          </div>
          {children}
        </Card>
      </DialogContent>
    </Dialog>
  )
}