@lovett/ui 0.0.11 → 0.2.0

package/src/thread/rail.tsx

@@ -0,0 +1,372 @@
+/**
+ * The depth rail — a CONNECTOR, not a margin decoration.
+ *
+ * WHAT THE PREVIOUS PASS GOT WRONG
+ *
+ * It drew a hairline at the inline-start edge of a nesting level. That line was
+ * anchored to nothing: it started at an arbitrary x, ended at an arbitrary y,
+ * and touched neither the comment it came from nor the comment it led to. Read
+ * as a floating margin rule, which is exactly what it was. It also shipped a
+ * "Collapse" text button at the bottom of every level, so a ten-deep chain
+ * ended in ten stacked Collapse links. Both are gone.
+ *
+ * THE FIGURE, and it is one figure repeated verbatim at every depth:
+ *
+ *     ( A )  Marcus Webb · 4m          ← the avatar, and the byline beside it
+ *      |     body text
+ *      |     reactions   Reply         ← the action row
+ *     (-)                              ← the collapse circle, LEVEL with it
+ *      |
+ *      '--( A )  Dana Ortiz · 3m       ← elbow, terminating ON the child avatar
+ *
+ * The vertical runs down the PARENT AVATAR'S CENTRE LINE. It ends in a circular
+ * collapse control sitting on that line, vertically level with the parent's
+ * action row — the last row of the parent's own content. Below the circle it
+ * continues and turns a rounded elbow into the child's avatar. Parent and child
+ * are physically joined; the line is never ornamental.
+ *
+ * EVERY NUMBER IS DERIVED FROM THE AVATAR SIZE AND ONE INDENT TOKEN, so nothing
+ * can drift. With `A` = `--thread-avatar` and `I` = `--thread-indent`:
+ *
+ *     rail x        = A / 2                 the parent avatar's centre line
+ *     elbow run     = I − A/2               horizontal distance to the child
+ *     elbow radius  = I − A/2               identical, so it is a PURE quarter
+ *                                           arc with no straight horizontal tail
+ *     elbow height  = rowGap + A/2          the child avatar's vertical centre
+ *
+ * Radius equalling the run is not a coincidence to preserve by hand: it falls
+ * out of terminating a quarter turn exactly on the child's avatar edge, and it
+ * holds for any A and any I. Change `--thread-avatar` and the whole figure moves
+ * correctly.
+ *
+ * CONTINUITY ACROSS SIBLINGS is why the connector belongs to the CHILD rather
+ * than to the level. Each child draws the segment that spans its OWN box: an
+ * elbow from its top edge to its avatar, plus — when it is not the last sibling
+ * — a trunk from that avatar down to its bottom edge. Sibling boxes are
+ * flush (all vertical separation is a child's own top padding, never a
+ * container gap), so those segments concatenate into one unbroken line that
+ * stops precisely at the LAST reply's avatar and never dangles past it. No
+ * element has to know any other element's height.
+ *
+ * THE 24x24 FLOOR. The visible mark is a 1px line and a quiet circle; the
+ * TARGET is the whole avatar-width column beneath the avatar — `--thread-avatar`
+ * (32) wide and, at minimum, a circle tall. The transparent padding does the
+ * work, and the focus ring lands on the circle, which is a real visible object,
+ * rather than around a 600px column of nothing.
+ */
+
+import type { ReactNode } from 'react'
+import { ChevronRight, Minus, Plus } from 'lucide-react'
+import { Avatar, AvatarGroup, asAvatarTint } from '../avatar'
+import { cn } from '../lib/utils'
+import { RelativeTime } from './relative-time'
+import type { CommentNode, ThreadAuthor } from './types'
+
+/** Levels deeper than this stop ADDING indent. Nesting itself stays uncapped. */
+export const DEFAULT_INDENT_CLAMP_DEPTH = 6
+
+export interface ThreadRailProps {
+  readonly collapsed: boolean
+  /** Accessible name. The stem is a hairline, so this is most of what a reader gets. */
+  readonly label: string
+  readonly onToggle: () => void
+}
+
+/**
+ * The stem and the circle: ONE control, in the avatar column, under the avatar.
+ *
+ * One per comment that has replies — never one per level plus a footer link,
+ * which is how the previous pass ended up with ten stacked "Collapse"s at the
+ * bottom of a deep chain. The circle is the affordance you aim at; the stem is
+ * the same button, so the whole column beneath the avatar is live.
+ *
+ * It is `flex-1` inside a column that stretches to the comment's content
+ * height, which is what pins the circle level with the action row without
+ * anything measuring anything.
+ */
+export function ThreadRail({ collapsed, label, onToggle }: ThreadRailProps) {
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      aria-label={label}
+      aria-expanded={!collapsed}
+      title={label}
+      className={cn(
+        'group/rail flex w-full flex-1 cursor-pointer flex-col items-center border-0 bg-transparent p-0',
+        'focus-visible:outline-none',
+      )}
+      style={{
+        minBlockSize: 'var(--thread-circle)',
+        // Centres the circle ON the engagement row rather than flush with its
+        // bottom edge: half the difference between that row's floor
+        // (`--thread-action-h`) and the circle lifts it onto the row's centre
+        // line. Derived, so it tracks either token — it followed the row up to
+        // 32 when emoji reactions landed and back down to 24 when the owner
+        // asked for ~30% smaller, with no change here.
+        paddingBlockEnd: 'calc((var(--thread-action-h) - var(--thread-circle)) / 2)',
+      }}
+    >
+      {/* The stem. `flex-1` so it eats whatever height the content has, which
+          is what puts the circle on the action row's line. `--space-1` of clear
+          air under the avatar so the line reads as leaving it, not welded to
+          it. */}
+      <span
+        className={cn(
+          'w-px flex-1 bg-[rgb(var(--border))]',
+          'transition-[background-color] duration-[var(--dur-fast)] ease-[var(--ease-out)]',
+          'motion-reduce:transition-none',
+          'group-hover/rail:bg-[rgb(var(--border-strong))]',
+          'group-focus-visible/rail:bg-[rgb(var(--accent))]',
+        )}
+        style={{ marginBlockStart: 'var(--space-1)' }}
+      />
+      <span
+        className={cn(
+          'flex shrink-0 items-center justify-center rounded-full border',
+          'border-[rgb(var(--border))] bg-[rgb(var(--surface-card))] text-[rgb(var(--text-tertiary))]',
+          'transition-[color,border-color,background-color,box-shadow] duration-[var(--dur-fast)] ease-[var(--ease-out)]',
+          'motion-reduce:transition-none',
+          'group-hover/rail:border-[rgb(var(--border-strong))] group-hover/rail:text-[rgb(var(--foreground))]',
+          'group-focus-visible/rail:border-[rgb(var(--accent))] group-focus-visible/rail:text-[rgb(var(--accent-ink))]',
+          'group-focus-visible/rail:[box-shadow:var(--ring-focus)]',
+          'group-active/rail:scale-[0.96] motion-reduce:group-active/rail:scale-100',
+        )}
+        style={{
+          inlineSize: 'var(--thread-circle)',
+          blockSize: 'var(--thread-circle)',
+        }}
+      >
+        {/* Outline glyph, one asset, recoloured by state. The stroke matches the
+            optical weight of the 14/600 name it sits under. */}
+        {collapsed ? (
+          <Plus size={10} strokeWidth={2} aria-hidden="true" />
+        ) : (
+          <Minus size={10} strokeWidth={2} aria-hidden="true" />
+        )}
+      </span>
+    </button>
+  )
+}
+
+export interface ThreadConnectorProps {
+  /**
+   * Past `indentClampDepth` a level adds no indent, so there is no gutter to
+   * curve in. The elbow's horizontal run collapses to zero and the trunk drops
+   * straight onto the TOP edge of the child's avatar, which sits directly under
+   * the parent's rail. Still connected, still the same figure — it just stops
+   * stepping sideways, which is the whole point of the clamp.
+   */
+  readonly clamped: boolean
+  /** The last sibling terminates the line; every other one carries it onward. */
+  readonly isLast: boolean
+}
+
+/**
+ * The segment of the connector that belongs to ONE child.
+ *
+ * Purely decorative — the rail button above it is the control — so it is hidden
+ * from the accessibility tree entirely.
+ */
+export function ThreadConnector({ clamped, isLast }: ThreadConnectorProps) {
+  const run = clamped ? '0' : 'var(--thread-elbow-run)'
+  return (
+    <>
+      <span
+        aria-hidden="true"
+        className="pointer-events-none absolute"
+        style={{
+          insetBlockStart: '0',
+          insetInlineStart: 'var(--thread-rail-x)',
+          inlineSize: run,
+          // Down to the child avatar's centre when there is an elbow to land
+          // there; only as far as its top edge when the run is zero, so the
+          // avatar itself terminates the line instead of being crossed by it.
+          blockSize: clamped ? 'var(--thread-row-gap)' : 'var(--thread-avatar-center)',
+          borderInlineStartWidth: '1px',
+          borderBlockEndWidth: clamped ? '0' : '1px',
+          borderStyle: 'solid',
+          borderColor: 'rgb(var(--border))',
+          borderEndStartRadius: run,
+        }}
+      />
+      {isLast || clamped ? null : (
+        // Carries the line from this child's avatar down to its bottom edge,
+        // where the next sibling's segment picks it up. Flush, so the join is
+        // invisible.
+        //
+        // Never past the clamp: with no indent there is no gutter for it to run
+        // in, and it would strike straight down through the avatar and the body
+        // text. Clamped siblings each get their own short drop instead.
+        <span
+          aria-hidden="true"
+          className="pointer-events-none absolute w-px"
+          style={{
+            insetBlockStart: clamped
+              ? 'var(--thread-row-gap)'
+              : 'var(--thread-avatar-center)',
+            insetBlockEnd: '0',
+            insetInlineStart: 'var(--thread-rail-x)',
+            background: 'rgb(var(--border))',
+          }}
+        />
+      )}
+    </>
+  )
+}
+
+/**
+ * A bare vertical continuation, for the gap an open reply composer opens up
+ * between the collapse circle and the first child. Without it the trunk breaks
+ * for exactly as long as someone is typing.
+ */
+export function ThreadTrunkSegment() {
+  return (
+    <span
+      aria-hidden="true"
+      className="pointer-events-none absolute inset-y-0 w-px"
+      style={{
+        insetInlineStart: 'var(--thread-rail-x)',
+        background: 'rgb(var(--border))',
+      }}
+    />
+  )
+}
+
+/** An inline icon that centres on the FIRST line of the text beside it. */
+export function LineIcon({ children }: { readonly children: ReactNode }) {
+  // `1lh` is the line box, so the icon tracks the text's own leading rather
+  // than the block's centre — which is what keeps it on line one when the text
+  // beside it wraps to three.
+  return <span className="flex h-[1lh] shrink-0 items-center">{children}</span>
+}
+
+/** Distinct authors in a subtree, first-seen order. Presentation, not data. */
+function subtreeAuthors(node: CommentNode): readonly ThreadAuthor[] {
+  const seen = new Set<string>()
+  const out: ThreadAuthor[] = []
+  const walk = (current: CommentNode): void => {
+    for (const reply of current.replies) {
+      const author = reply.author
+      if (author != null) {
+        // No id (it can be null once the user row is gone) means no identity to
+        // dedupe on, so the name stands in and an unnamed one is skipped
+        // rather than collapsing every anonymous reply into one face.
+        const key = author.id ?? author.name ?? author.email ?? null
+        if (key !== null && !seen.has(key)) {
+          seen.add(key)
+          out.push(author)
+        }
+      }
+      walk(reply)
+    }
+  }
+  walk(node)
+  return out
+}
+
+/** The most recent timestamp anywhere in the subtree. */
+function latestReplyAt(node: CommentNode): number {
+  let latest = 0
+  const walk = (current: CommentNode): void => {
+    for (const reply of current.replies) {
+      if (reply.createdAt > latest) latest = reply.createdAt
+      walk(reply)
+    }
+  }
+  walk(node)
+  return latest
+}
+
+export interface CollapsedRepliesProps {
+  readonly node: CommentNode
+  readonly count: number
+  readonly now: number
+  readonly locale?: string | undefined
+  /** The parent's display name, for the accessible name. */
+  readonly parentLabel: string
+  readonly onExpand: () => void
+}
+
+/**
+ * A collapsed subtree is a SUMMARY, not a count.
+ *
+ * "8 replies" tells you how much you are not reading. Faces plus a recency tell
+ * you whether it is worth opening — who is in there and whether anything
+ * happened since you last looked. That is the actual question.
+ *
+ * It deliberately has NO connector. Collapsed, the rail terminates at the
+ * circle exactly as the reference's does, and a line running on to a chip that
+ * is itself the "there is more here" signal would be saying the same thing
+ * twice.
+ */
+export function CollapsedReplies({
+  node,
+  count,
+  now,
+  locale,
+  parentLabel,
+  onExpand,
+}: CollapsedRepliesProps) {
+  const authors = subtreeAuthors(node)
+  const latest = latestReplyAt(node)
+  const word = count === 1 ? 'reply' : 'replies'
+
+  return (
+    <button
+      type="button"
+      onClick={onExpand}
+      aria-expanded={false}
+      aria-label={`Show ${String(count)} ${word} to ${parentLabel}`}
+      className={cn(
+        'inline-flex items-center gap-[var(--space-2)] border px-[var(--space-2)] py-[var(--space-1)] text-[12px]',
+        'border-[rgb(var(--border))] bg-[rgb(var(--surface-inset))] text-[rgb(var(--text-secondary))]',
+        'transition-[background-color,border-color,color] duration-[var(--dur-fast)] ease-[var(--ease-out)]',
+        'motion-reduce:transition-none',
+        'hover:border-[rgb(var(--border-strong))] hover:bg-[rgb(var(--surface-hover))] hover:text-[rgb(var(--foreground))]',
+        'focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]',
+      )}
+      style={{ minBlockSize: 'var(--space-6)', borderRadius: 'var(--radius-sm)' }}
+    >
+      <LineIcon>
+        <ChevronRight size={10} strokeWidth={1.75} aria-hidden="true" />
+      </LineIcon>
+      {authors.length === 0 ? null : (
+        <AvatarGroup
+          max={3}
+          total={authors.length}
+          size="sm"
+          className="ds-avatar-on-inset"
+        >
+          {authors.map((author, index) => {
+            const tint = asAvatarTint(author.tint)
+            return (
+              <Avatar
+                key={author.id ?? author.email ?? `${author.name ?? 'unknown'}-${String(index)}`}
+                decorative
+                name={author.name ?? author.email ?? null}
+                size="sm"
+                ring
+                src={author.avatarUrl ?? null}
+                {...(tint === undefined ? {} : { tint })}
+                {...(author.id == null ? {} : { seed: author.id })}
+              />
+            )
+          })}
+        </AvatarGroup>
+      )}
+      <span className="font-semibold tabular-nums">
+        {count} {word}
+      </span>
+      {latest === 0 ? null : (
+        <span
+          className="flex items-center gap-[var(--space-1)]"
+          style={{ color: 'rgb(var(--text-tertiary))' }}
+        >
+          ·
+          <RelativeTime value={latest} now={now} {...(locale === undefined ? {} : { locale })} />
+        </span>
+      )}
+    </button>
+  )
+}