@lovett/ui 0.0.11 → 0.2.0

package/src/thread/actions.tsx

@@ -0,0 +1,196 @@
+/**
+ * The byline action cluster — `↩ Reply` and a `•••` overflow, at the inline-end
+ * of the byline row.
+ *
+ * WHY THESE ARE QUIET, AND WHY THAT IS A DELIBERATE EXCEPTION
+ *
+ * CLAUDE.md §2 bans `variant="ghost"` as the default lesser-button: "buttons
+ * must read as buttons, with at least a 1px border", with ghost "reserved for
+ * genuinely chrome-dense contexts — side-panel modals, inline icon toolbars".
+ * A per-comment byline action cluster is exactly that context, and there is a
+ * second, product reason on top of it:
+ *
+ *   Owner direction, 2026-09-06: Reply sits slightly OUT OF THE WAY, so people
+ *   reach for the main comment box instead of threading every remark. A
+ *   bordered button beside a name is an invitation. A muted, borderless one is
+ *   available without asking to be used.
+ *
+ * So this is intentional. Do not "fix" it back to bordered secondary buttons in
+ * an audit — that would reverse a product decision, not correct a slip.
+ *
+ * NO REFLOW. Two separate guarantees, because they fail differently:
+ *
+ *   • The cluster is ALWAYS VISIBLE, never revealed on hover. A hover-revealed
+ *     control changes the row's occupied width as the pointer crosses it, and
+ *     with a flexible name beside it that re-truncates the name on every pass.
+ *   • The cluster reserves a fixed `min-inline-size`, so a comment with no
+ *     actions at all (a tombstone) truncates its name at the same column as a
+ *     live one. The identity group beside it is `min-w-0 flex-1` with the name
+ *     truncating, and the cluster is `shrink-0`, so a long name eats its own
+ *     width rather than pushing the actions off the row.
+ */
+
+import { useCallback } from 'react'
+import { Copy, CornerDownRight, Link2, MoreHorizontal, Pencil, Trash2 } from 'lucide-react'
+import type { CSSProperties } from 'react'
+import { cn } from '../lib/utils'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../dropdown-menu'
+
+/**
+ * Quiet: no border, no fill at rest, muted ink. The hover fill and the focus
+ * ring are what make it legible as a control — an interactive element still has
+ * to look interactive (better-layout §2), it just does not have to shout.
+ */
+const QUIET = cn(
+  'inline-flex items-center justify-center gap-[var(--space-1)] border-0 bg-transparent',
+  'text-[12px] font-semibold text-[rgb(var(--text-tertiary))]',
+  'transition-[background-color,color] duration-[var(--dur-fast)] ease-[var(--ease-out)]',
+  'motion-reduce:transition-none',
+  'hover:bg-[rgb(var(--surface-overlay))] hover:text-[rgb(var(--foreground))]',
+  'focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]',
+  'disabled:cursor-default disabled:opacity-60',
+)
+
+/** 24x24 floor from the interface standards §6, met by padding rather than ink. */
+const QUIET_BOX: CSSProperties = {
+  minBlockSize: 'var(--space-6)',
+  minInlineSize: 'var(--space-6)',
+  paddingInline: 'var(--space-2)',
+  borderRadius: 'var(--radius-xs)',
+}
+
+const QUIET_ICON_BOX: CSSProperties = {
+  ...QUIET_BOX,
+  paddingInline: '0',
+}
+
+/**
+ * Reserved so a byline with no actions truncates its name at the same column as
+ * one with both. Sized for the widest cluster this renders — `↩ Reply` plus the
+ * overflow — as a multiple of the spacing scale rather than a measured pixel
+ * count, because the exact width moves with the font and the reserve only has
+ * to be *at least* the real width.
+ */
+const CLUSTER: CSSProperties = {
+  minInlineSize: 'calc(var(--space-12) * 2)',
+}
+
+export interface CommentActionsProps {
+  /** Author display name. Thirty "Reply" buttons need thirty distinct names. */
+  readonly label: string
+  readonly replyOpen: boolean
+  /** Omitted, no Reply is rendered — a read-only surface, or a tombstone. */
+  readonly onReplyToggle?: (() => void) | undefined
+  readonly onCopyLink?: (() => void) | undefined
+  /** The body to put on the clipboard. Omitted, the item is not rendered. */
+  readonly copyText?: string | undefined
+  /** Reports the clipboard outcome so a host can toast either way. */
+  readonly onCopyText?: ((ok: boolean) => void) | undefined
+  readonly onEdit?: (() => void) | undefined
+  readonly onDelete?: (() => void) | undefined
+}
+
+/**
+ * `navigator.clipboard` is absent in an insecure context and in some embedded
+ * webviews. Checked before the item is RENDERED, so we never offer an
+ * affordance that cannot work — and the write is still guarded, because
+ * permission can be denied at the moment of the call.
+ */
+function clipboardAvailable(): boolean {
+  return typeof navigator !== 'undefined' && 'clipboard' in navigator
+}
+
+export function CommentActions({
+  label,
+  replyOpen,
+  onReplyToggle,
+  onCopyLink,
+  copyText,
+  onCopyText,
+  onEdit,
+  onDelete,
+}: CommentActionsProps) {
+  const canCopyText = copyText !== undefined && copyText !== '' && clipboardAvailable()
+
+  const copy = useCallback(() => {
+    if (copyText === undefined) return
+    // Never assume it resolves: a denied permission, a document that is not
+    // focused, and a webview with no clipboard all reject here. The host is
+    // told which happened so it can say so rather than silently doing nothing.
+    navigator.clipboard.writeText(copyText).then(
+      () => {
+        onCopyText?.(true)
+      },
+      () => {
+        onCopyText?.(false)
+      },
+    )
+  }, [copyText, onCopyText])
+
+  const hasMenu = onCopyLink !== undefined || canCopyText || onEdit !== undefined || onDelete !== undefined
+
+  return (
+    <div
+      className="flex shrink-0 items-center justify-end gap-[var(--space-1)]"
+      style={CLUSTER}
+    >
+      {onReplyToggle === undefined ? null : (
+        <button
+          type="button"
+          onClick={onReplyToggle}
+          aria-label={`Reply to ${label}`}
+          aria-expanded={replyOpen}
+          className={QUIET}
+          style={QUIET_BOX}
+        >
+          <CornerDownRight size={12} strokeWidth={1.75} aria-hidden="true" />
+          Reply
+        </button>
+      )}
+
+      {hasMenu ? (
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            unstyled
+            aria-label={`More actions for ${label}'s comment`}
+            className={QUIET}
+            style={QUIET_ICON_BOX}
+          >
+            <MoreHorizontal size={12} strokeWidth={1.75} aria-hidden="true" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {onCopyLink === undefined ? null : (
+              <DropdownMenuItem onClick={onCopyLink}>
+                <Link2 size={12} strokeWidth={1.75} aria-hidden="true" />
+                Copy link
+              </DropdownMenuItem>
+            )}
+            {canCopyText ? (
+              <DropdownMenuItem onClick={copy}>
+                <Copy size={12} strokeWidth={1.75} aria-hidden="true" />
+                Copy text
+              </DropdownMenuItem>
+            ) : null}
+            {onEdit === undefined ? null : (
+              <DropdownMenuItem onClick={onEdit}>
+                <Pencil size={12} strokeWidth={1.75} aria-hidden="true" />
+                Edit
+              </DropdownMenuItem>
+            )}
+            {onDelete === undefined ? null : (
+              <DropdownMenuItem variant="destructive" onClick={onDelete}>
+                <Trash2 size={12} strokeWidth={1.75} aria-hidden="true" />
+                Delete
+              </DropdownMenuItem>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ) : null}
+    </div>
+  )
+}