@estiva-app/ui 0.74.1 → 0.75.0

package/src/CardUnder.mdx

@@ -0,0 +1,53 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'
+import * as CardUnderStories from './CardUnder.stories'
+
+<Meta of={CardUnderStories} />
+
+# CardUnder
+
+The one card added under a piece of text, and the ✕ that removes it.
+
+<Canvas of={CardUnderStories.WhileWriting} />
+
+## When
+
+- **while writing** — under the box: the ✕ always shows.
+- **after sending** — `revealOnHover`: the ✕ shows when the pointer is over the card or the ✕ has focus, and always on a screen that cannot hover, so a tap reaches it.
+- **no ✕** — no `onRemove`: to anyone but who wrote it.
+
+<Canvas of={CardUnderStories.AfterSending} />
+
+## When not
+
+- A link alone on its line, with no card chosen → **LinkRow**.
+- A part of something longer: it has no ✕ → **PartCard**.
+
+## How
+
+```tsx
+import { CardUnder } from '@estiva-app/ui'
+
+<CardUnder link={link} onRemove={isAuthor ? removeCard : undefined} revealOnHover={sent} />
+```
+
+- **Which link gets the card is the app's**, by the rule every app reads by (`defaultCardOf` in `@estiva-app/protocol`). This draws the one it is given.
+- `onRemove` is the app's: before sending it drops the card from what will be sent; after, it sends the edit that removes it.
+- It is at most 480px wide.
+
+## What it owns
+
+| It does | So you never write |
+|---|---|
+| Places the ✕ at the card's top corner | a remove button of your own |
+| Reveals the ✕ on hover and focus, and always shows it on touch | a hover or touch check |
+
+## Keys
+
+| Key | Does |
+|---|---|
+| Tab | Reaches the ✕, and shows it when it was waiting for hover |
+| Enter, Space | Removes the card |
+
+## Props
+
+<Controls of={CardUnderStories.NoRemove} />

package/src/CardUnder.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import { Button } from './Button'
+import { CardUnder } from './CardUnder'
+import { ITEM, LOADING, ready, SAID, UNAVAILABLE } from './linked.examples'
+
+const meta = {
+  title: 'Components/CardUnder',
+  component: CardUnder,
+  parameters: { layout: 'padded' },
+  args: { link: ready(ITEM) },
+} satisfies Meta<typeof CardUnder>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** Under a box being written in: the ✕ always shows. Press it to remove the card. */
+export const WhileWriting: Story = {
+  render: (args) => {
+    const [removed, setRemoved] = useState(false)
+    if (removed) return <Button onClick={() => setRemoved(false)}>Put it back</Button>
+    return <CardUnder {...args} onRemove={() => setRemoved(true)} />
+  },
+}
+
+/** Under text already sent: the ✕ shows on hover or focus, and always on a screen that cannot hover. */
+export const AfterSending: Story = {
+  render: (args) => {
+    const [removed, setRemoved] = useState(false)
+    if (removed) return <Button onClick={() => setRemoved(false)}>Put it back</Button>
+    return <CardUnder {...args} revealOnHover onRemove={() => setRemoved(true)} />
+  },
+}
+
+/** To anyone but who wrote it: no ✕. */
+export const NoRemove: Story = {}
+
+/** Words a person wrote, as the card. */
+export const WordsAPersonWrote: Story = { args: { link: ready(SAID) }, render: (args) => <CardUnder {...args} onRemove={() => {}} /> }
+
+/** Still being looked up: at the card's height, with its ✕. */
+export const Loading: Story = { args: { link: LOADING }, render: (args) => <CardUnder {...args} onRemove={() => {}} /> }
+
+/** Deleted, or not this reader's to see. */
+export const NotAvailable: Story = { args: { link: UNAVAILABLE }, render: (args) => <CardUnder {...args} onRemove={() => {}} /> }

package/src/CardUnder.test.tsx

@@ -0,0 +1,40 @@
+// @vitest-environment jsdom
+/** What the CardUnder page claims, pinned: the ✕ removes the card, by pointer and by keyboard, and only where it is given. */
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { CardUnder } from './CardUnder'
+import { ITEM, ready } from './linked.examples'
+
+afterEach(cleanup)
+
+describe('CardUnder', () => {
+  it('draws the card it is given', () => {
+    render(<CardUnder link={ready(ITEM)} />)
+    expect(screen.getByRole('link', { name: ITEM.title })).toBeTruthy()
+  })
+
+  it('removes the card when the ✕ is pressed', async () => {
+    const user = userEvent.setup()
+    const onRemove = vi.fn()
+    render(<CardUnder link={ready(ITEM)} onRemove={onRemove} />)
+    await user.click(screen.getByRole('button', { name: 'Remove card' }))
+    expect(onRemove).toHaveBeenCalledTimes(1)
+  })
+
+  it('reaches the ✕ from the keyboard once sent, and removes the card with Enter', async () => {
+    const user = userEvent.setup()
+    const onRemove = vi.fn()
+    render(<CardUnder link={ready({ ...ITEM, conversation: undefined, status: undefined, owner: undefined })} onRemove={onRemove} revealOnHover />)
+    await user.tab()
+    await user.tab()
+    expect(document.activeElement).toBe(screen.getByRole('button', { name: 'Remove card' }))
+    await user.keyboard('{Enter}')
+    expect(onRemove).toHaveBeenCalledTimes(1)
+  })
+
+  it('has no ✕ for anyone but who wrote it', () => {
+    render(<CardUnder link={ready(ITEM)} />)
+    expect(screen.queryByRole('button', { name: 'Remove card' })).toBeNull()
+  })
+})

package/src/CardUnder.tsx

@@ -0,0 +1,45 @@
+/**
+ * The one card added under a piece of text, and the ✕ that removes it (why:
+ * https://github.com/estiva-app/estiva-docs/blob/main/decisions/where-a-link-sits-and-which-file-gets-the-card.md).
+ *
+ * Under a box being written in, the ✕ always shows. Under text already sent
+ * (`revealOnHover`) it shows when the pointer is over the card or the ✕ has
+ * focus, and always on a screen that cannot hover, so a tap reaches it (Miky,
+ * 16 Oct, kickoff).
+ */
+import { IconX } from '@tabler/icons-react'
+import { cn } from './cn'
+import { IconButton } from './IconButton'
+import { LinkCard } from './LinkCard'
+import type { LinkState } from './linked'
+
+export interface CardUnderProps {
+  link: LinkState
+  /** Draws the ✕. Without it the card shows with none, as it does to anyone but the author. */
+  onRemove?: () => void
+  /** The ✕ waits for hover or focus: under text already sent. Always shown on a screen that cannot hover. */
+  revealOnHover?: boolean
+}
+
+export function CardUnder({ link, onRemove, revealOnHover = false }: CardUnderProps) {
+  return (
+    <div className="group/card flex max-w-[480px] items-start gap-1">
+      <div className="min-w-0 flex-1">
+        <LinkCard link={link} />
+      </div>
+      {onRemove && (
+        // At the card's top corner: halfway down a tall card a ✕ reads as belonging to nothing.
+        <div
+          className={cn(
+            'flex shrink-0 self-start pt-2',
+            revealOnHover && 'opacity-0 transition-opacity group-hover/card:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100',
+          )}
+        >
+          <IconButton aria-label="Remove card" tooltip="Remove card" onClick={onRemove}>
+            <IconX size={16} />
+          </IconButton>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/InlineChip.tsx

@@ -45,6 +45,8 @@ export const INLINE_CHIP_TONE_CLASSES = {
    * copy of this chip still has the 16.8px box).
    */
   quiet: 'h-[19.6px] bg-bg-active text-text-muted font-mono text-caption',
+  /** A file this reader cannot open — deleted, or not theirs to see: said in words, quieter than a link. */
+  muted: 'bg-bg-active text-text-muted',
 } as const
 
 export type InlineChipTone = keyof typeof INLINE_CHIP_TONE_CLASSES

package/src/LinkCard.mdx

@@ -0,0 +1,58 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'
+import * as LinkCardStories from './LinkCard.stories'
+
+<Meta of={LinkCardStories} />
+
+# LinkCard
+
+A link's card: what a row cannot hold, and the changes the reader may make from it.
+
+<Canvas of={LinkCardStories.Default} />
+
+## When
+
+- **ready** — the title as the link (the icon opens it too), the key and what it is in, its summary, the items inside it, its newest conversation, and a footer: the pickers and the conversation count, or who wrote it and when. No summary, the title alone.
+- **read only** — a picker the app passed no `onChange` for reads as words in the same place: the reader may not change it. `readOnly` makes every value words, as the hover preview does.
+- **words a person wrote** — their face, their name, the time as the link, and the words.
+- **loading** — the card it will become in bars, at its own height: `shape` from `loadingShapeOf(linked)` the last time it drew, or the kind's usual card. **LinkCardLoading**, from this file.
+- **unavailable** — one line, as **LinkRow** draws it.
+
+<Canvas of={LinkCardStories.ReadOnly} />
+<Canvas of={LinkCardStories.Loading} />
+
+## When not
+
+- A link alone on its line, where the card was not chosen → **LinkRow**.
+- The one card under a piece of text, with its ✕ → **CardUnder**, which draws this.
+- A part of something longer → **PartCard**.
+
+## How
+
+```tsx
+import { LinkCard } from '@estiva-app/ui'
+
+const linked = {
+  ...fromLookup,
+  status: { value: statusKey, options: statuses, onChange: mayChange ? setStatus : undefined },
+  owner: { value: ownerKey, options: people, onChange: mayChange ? setOwner : undefined },
+  ownerLabel: 'Owner',
+}
+<LinkCard link={{ state: 'ready', linked }} />
+```
+
+- **Whether the reader may change it is the app's.** Pass `onChange` only to a reader who may; anyone else sees words.
+- The picker offers only the options it is given: to let the reader set nobody as the owner, include an option for it.
+- `linked.latest` is drawn whenever it is given: pass it only to a reader who may read it.
+- `linked.conversation.unread` only for a member of it.
+
+## What it owns
+
+| It does | So you never write |
+|---|---|
+| Draws the pickers, or the same values as words | a read-only variant of your own |
+| Holds its own height while it loads | a placeholder height of your own |
+| Opens each item inside it on its own | a row click handler |
+
+## Props
+
+<Controls of={LinkCardStories.ReadOnly} />

package/src/LinkCard.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import { LinkCard, LinkCardLoading } from './LinkCard'
+import { loadingShapeOf, type Linked } from './linked'
+import { GROUP, ITEM, ITEM_NO_SUMMARY, ITEM_READ_ONLY, ITEM_UNREAD, PAGE, PLACE, ready, SAID, UNAVAILABLE } from './linked.examples'
+
+const meta = {
+  title: 'Components/LinkCard',
+  component: LinkCard,
+  parameters: { layout: 'padded' },
+  args: { link: ready(ITEM) },
+  decorators: [(Story) => <div className="max-w-[480px]">{Story()}</div>],
+} satisfies Meta<typeof LinkCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** Its status and owner change from the card: pick one. */
+export const Default: Story = {
+  render: () => {
+    const [status, setStatus] = useState('doing')
+    const [owner, setOwner] = useState<string>('a')
+    const linked: Linked = { ...ITEM, status: { ...ITEM.status!, value: status, onChange: setStatus }, owner: { ...ITEM.owner!, value: owner, onChange: setOwner } }
+    return <LinkCard link={ready(linked)} />
+  },
+}
+
+/** To a reader who may not change it: the same two values, as words. */
+export const ReadOnly: Story = { args: { link: ready(ITEM_READ_ONLY) } }
+
+/** Something unread in its conversation, to a member: the count is brighter, with a dot. */
+export const Unread: Story = { args: { link: ready(ITEM_UNREAD) } }
+
+/** No summary: the title alone. */
+export const NoSummary: Story = { args: { link: ready(ITEM_NO_SUMMARY) } }
+
+/** A group: its progress, its lead, and each item inside, which opens on its own. */
+export const WithItems: Story = { args: { link: ready(GROUP) } }
+
+/** A place people talk: its members and its newest conversation. */
+export const WithLatest: Story = { args: { link: ready(PLACE) } }
+
+/** A page of text: who wrote it, and when. */
+export const WithAuthors: Story = { args: { link: ready(PAGE) } }
+
+/** Words a person wrote: their face, the time as the link, and the words. */
+export const WordsAPersonWrote: Story = { args: { link: ready(SAID) } }
+
+/** Still being looked up, beside the card it becomes: the same height. */
+export const Loading: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      {[ITEM, GROUP, PLACE, PAGE].map((linked) => (
+        // Each at a card's full width, as under a message: a narrower column wraps the summary.
+        <div key={linked.id} className="grid w-[968px] grid-cols-[480px_480px] items-start gap-2">
+          <LinkCardLoading kind={linked.kind} shape={loadingShapeOf(linked)} />
+          <LinkCard link={ready(linked)} />
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+/** Nothing remembered of it: the kind's usual card. */
+export const LoadingByKind: Story = { args: { link: { state: 'loading', kind: 'issue' } } }
+
+/** Deleted, or not this reader's to see: one line. */
+export const NotAvailable: Story = { args: { link: UNAVAILABLE } }

package/src/LinkCard.test.tsx

@@ -0,0 +1,103 @@
+// @vitest-environment jsdom
+/**
+ * What the LinkCard and LinkParts pages claim, pinned: the pickers for a
+ * reader who may change it and words for one who may not, the conversation
+ * count and its unread, what each kind draws, and the loading and
+ * not-available states.
+ */
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { LinkCard } from './LinkCard'
+import { GROUP, ITEM, ITEM_NO_SUMMARY, ITEM_READ_ONLY, ITEM_UNREAD, LOADING, PAGE, PLACE, ready, SAID, UNAVAILABLE } from './linked.examples'
+
+afterEach(cleanup)
+
+describe('LinkCard', () => {
+  it('opens what it links from its title', () => {
+    render(<LinkCard link={ready(ITEM)} />)
+    expect(screen.getByRole('link', { name: ITEM.title }).getAttribute('href')).toBe('#item')
+  })
+
+  it('lets a reader who may change it pick a new status and owner', async () => {
+    const user = userEvent.setup()
+    const onStatus = vi.fn()
+    const onOwner = vi.fn()
+    render(<LinkCard link={ready({ ...ITEM, status: { ...ITEM.status!, onChange: onStatus }, owner: { ...ITEM.owner!, onChange: onOwner } })} />)
+    await user.click(screen.getByRole('combobox', { name: 'Status' }))
+    await user.click(await screen.findByRole('option', { name: /Done/ }))
+    expect(onStatus).toHaveBeenCalledWith('done')
+    await user.click(screen.getByRole('combobox', { name: 'Owner' }))
+    await user.click(await screen.findByRole('option', { name: /Person three/ }))
+    expect(onOwner).toHaveBeenCalledWith('c')
+  })
+
+  it('shows the same values as words to a reader who may not change them', () => {
+    render(<LinkCard link={ready(ITEM_READ_ONLY)} />)
+    expect(screen.queryByRole('combobox')).toBeNull()
+    expect(screen.getByText('In progress')).toBeTruthy()
+    expect(screen.getByText('Person one')).toBeTruthy()
+  })
+
+  it('shows words, never pickers, when read only, even to a reader who could change it', () => {
+    render(<LinkCard link={ready(ITEM)} readOnly />)
+    expect(screen.queryByRole('combobox')).toBeNull()
+  })
+
+  it('says nobody owns it when nobody does', () => {
+    render(<LinkCard link={ready({ ...ITEM_READ_ONLY, owner: { value: undefined, options: [] } })} />)
+    expect(screen.getByText('Unassigned')).toBeTruthy()
+  })
+
+  it('shows the title alone when there is no summary', () => {
+    render(<LinkCard link={ready(ITEM_NO_SUMMARY)} />)
+    expect(screen.getByRole('link', { name: 'Item two' })).toBeTruthy()
+    expect(screen.queryByText(ITEM.summary!)).toBeNull()
+  })
+
+  it('opens the conversation from its count, and says when it holds something unread', () => {
+    const { rerender } = render(<LinkCard link={ready(ITEM)} />)
+    const count = screen.getByRole('link', { name: /comments — open the conversation/ })
+    expect(count.getAttribute('href')).toBe('#item-conversation')
+    expect(count.textContent).not.toContain('unread')
+    rerender(<LinkCard link={ready(ITEM_UNREAD)} />)
+    expect(screen.getByRole('link', { name: /comments, unread — open the conversation/ })).toBeTruthy()
+  })
+
+  it('opens each item inside it on its own', () => {
+    render(<LinkCard link={ready(GROUP)} />)
+    expect(screen.getByRole('link', { name: 'Item three' }).getAttribute('href')).toBe('#c3')
+    expect(screen.getByText('2/5')).toBeTruthy()
+  })
+
+  it('shows the newest conversation where it is given, and who wrote a page', () => {
+    render(
+      <>
+        <LinkCard link={ready(PLACE)} />
+        <LinkCard link={ready(PAGE)} />
+      </>,
+    )
+    expect(screen.getByText('Latest conversation')).toBeTruthy()
+    expect(screen.getByText(PLACE.latest!.body)).toBeTruthy()
+    expect(screen.getByText('Yesterday')).toBeTruthy()
+  })
+
+  it('draws a person’s words as theirs, with the time as the link', () => {
+    render(<LinkCard link={ready(SAID)} />)
+    expect(screen.getByText('Person one')).toBeTruthy()
+    expect(screen.getByText(SAID.body!)).toBeTruthy()
+    expect(screen.getByRole('link', { name: '10:42' }).getAttribute('href')).toBe('#said')
+  })
+
+  it('while it loads, is busy and shows nothing of it', () => {
+    const { container } = render(<LinkCard link={LOADING} />)
+    expect(container.querySelector('[aria-busy="true"]')).not.toBeNull()
+    expect(screen.queryByRole('link')).toBeNull()
+  })
+
+  it('says it is not available, and where it may still open', () => {
+    render(<LinkCard link={UNAVAILABLE} />)
+    expect(screen.getByText('Item — not available.')).toBeTruthy()
+    expect(screen.getByRole('link', { name: /Open in App one/ }).getAttribute('href')).toBe('#elsewhere')
+  })
+})

package/src/LinkCard.tsx

@@ -0,0 +1,209 @@
+/**
+ * A link's card: what a row cannot hold. The header is the row's line (icon
+ * and title as the link; a ring or faces in the corner), then the key and
+ * what it is in, its summary, the items inside it, the newest thing said in
+ * it, and a footer: the pickers and the conversation count, or who and when.
+ * Words a person wrote draw as themselves, with their face and the time.
+ *
+ * While it loads it holds the card's own height, so what is around it does
+ * not jump; not available is one line.
+ */
+import { Avatar } from './Avatar'
+import { AvatarGroup } from './AvatarGroup'
+import { Card } from './Card'
+import { Link } from './Link'
+import type { Linked, LinkedKind, LinkState, LoadingShape } from './linked'
+import { CommentCount, LinkedIcon, LinkKey, LinkPickers, ProgressRing, StatusMark } from './LinkParts'
+import { LinkUnavailable } from './LinkRow'
+import { SkeletonBar } from './Skeleton'
+
+export interface LinkCardProps {
+  link: LinkState
+  /** The values read as words, never pickers: the hover preview. */
+  readOnly?: boolean
+  /** No frame of its own: inside a box that draws one, as the hover preview's. */
+  bare?: boolean
+}
+
+export function LinkCard({ link, readOnly = false, bare = false }: LinkCardProps) {
+  if (link.state === 'loading') return <LinkCardLoading kind={link.kind} shape={link.shape} />
+  if (link.state === 'unavailable') return <LinkUnavailable kind={link.kind} noun={link.noun} openIn={link.openIn} />
+  const { linked } = link
+  const body = linked.kind === 'message' && linked.author ? <SaidBody linked={linked} /> : <CardBody linked={linked} readOnly={readOnly} />
+  if (bare) return <div className="flex flex-col gap-2 p-3">{body}</div>
+  return (
+    <Card fill="inset" className="flex flex-col gap-2 p-3">
+      {body}
+    </Card>
+  )
+}
+
+function CardBody({ linked, readOnly }: { linked: Linked; readOnly: boolean }) {
+  return (
+    <>
+      <div className="flex min-h-[19.6px] items-center gap-2">
+        {/* The icon opens it too, so the target is larger than the words. */}
+        <span className="flex min-w-0 flex-1 text-body-2-strong text-text-primary">
+          <Link href={linked.href} variant="quiet" className="flex min-w-0 flex-1 items-center gap-2">
+            <LinkedIcon kind={linked.kind} />
+            <span className="truncate">{linked.title}</span>
+          </Link>
+        </span>
+        {linked.done && <ProgressRing done={linked.done.done} total={linked.done.total} />}
+        {linked.members && <AvatarGroup members={linked.members} size={16} />}
+      </div>
+      {(linked.key || linked.subtitle) && <p className="-mt-1 pl-6 text-caption text-text-secondary">{[linked.key, linked.subtitle].filter(Boolean).join(' · ')}</p>}
+      {linked.summary && <p className="line-clamp-2 text-body-2 text-text-secondary">{linked.summary}</p>}
+      {linked.children && linked.children.length > 0 && (
+        <div className="flex flex-col divide-y divide-border-subtle rounded-md border border-border-subtle leaf:divide-border-strong leaf:border-border-strong">
+          {linked.children.map((child) => (
+            <div key={child.id} className="relative flex h-8 items-center gap-2 px-2 hover:bg-bg-active">
+              {/* The status is the row's icon: a list needs no kind icon on every row. */}
+              <StatusMark status={child.status} />
+              {child.key && <LinkKey>{child.key}</LinkKey>}
+              {/* Each opens on its own; the link covers its row. */}
+              <span className="contents text-body-2 text-text-primary">
+                <Link href={child.href} variant="quiet" cover truncate className="min-w-0 flex-1">
+                  {child.title}
+                </Link>
+              </span>
+              {child.owner ? <Avatar name={child.owner.name} src={child.owner.picture} size={16} /> : <span className="size-4 shrink-0" aria-hidden />}
+            </div>
+          ))}
+        </div>
+      )}
+      {linked.latest && (
+        <div className="flex flex-col gap-1">
+          {/* "Latest" in words: the card follows it, so this is not necessarily what the link was sent about. */}
+          <span className="text-caption text-text-muted">Latest conversation</span>
+          <div className="flex gap-2 rounded-md border border-border-subtle p-2 leaf:border-border-strong">
+            <Avatar name={linked.latest.author.name} src={linked.latest.author.picture} size={16} />
+            <div className="min-w-0 flex-1">
+              <div className="flex items-baseline gap-2 text-caption">
+                <span className="text-text-primary">{linked.latest.author.name}</span>
+                <span className="text-text-muted">{linked.latest.at}</span>
+              </div>
+              <p className="line-clamp-2 text-body-2 text-text-secondary">{linked.latest.body}</p>
+            </div>
+          </div>
+        </div>
+      )}
+      <div className="flex min-h-6 items-center gap-2 border-t border-border-subtle pt-2 leaf:border-border-strong">
+        {(linked.status || linked.owner) && <LinkPickers status={linked.status} owner={linked.owner} ownerLabel={linked.ownerLabel} readOnly={readOnly} />}
+        {/* Faces only: names would not fit once several people wrote it. */}
+        {linked.authors ? (
+          <span className="flex min-w-0 items-center gap-2 text-caption text-text-secondary">
+            <AvatarGroup members={linked.authors} size={16} />
+            {linked.updated && <span className="shrink-0">{linked.updated}</span>}
+          </span>
+        ) : (
+          !linked.status && !linked.owner && linked.updated && <span className="text-caption text-text-secondary">Updated {linked.updated}</span>
+        )}
+        {linked.conversation && (
+          <span className="ml-auto flex">
+            <CommentCount conversation={linked.conversation} noun={linked.conversation.noun} />
+          </span>
+        )}
+      </div>
+    </>
+  )
+}
+
+/** Words a person wrote, linked: their face, their name, the time as the link, and the words. */
+function SaidBody({ linked }: { linked: Linked }) {
+  const author = linked.author!
+  return (
+    <>
+      <div className="flex items-center gap-2">
+        <Avatar name={author.name} src={author.picture} size={24} />
+        <span className="text-body-2-strong text-text-primary">{author.name}</span>
+        <span className="text-caption text-text-muted">
+          <Link href={linked.href} variant="quiet">
+            {linked.updated ?? 'Open'}
+          </Link>
+        </span>
+      </div>
+      <p className="line-clamp-4 text-body-2 text-text-primary">{linked.body ?? linked.title}</p>
+    </>
+  )
+}
+
+/** Each kind's usual card, for a placeholder when the app remembers nothing of it. */
+const KIND_SHAPE: Record<LinkedKind, LoadingShape> = {
+  issue: { subtitle: true, summary: true, footer: 'pickers' },
+  project: { subtitle: false, summary: true, rows: 3, ring: true, footer: 'pickers' },
+  topic: { summary: true, latest: true, footer: 'line' },
+  page: { subtitle: true, summary: true, footer: 'people' },
+  file: { summary: false, footer: 'line' },
+  message: { summary: true, footer: 'none' },
+}
+
+export interface LinkCardLoadingProps {
+  kind: LinkedKind
+  /** What the card will hold (`loadingShapeOf` from the last time it drew); the kind's usual card otherwise. */
+  shape?: LoadingShape
+}
+
+/** The card it will become, drawn in bars at the card's own height. */
+export function LinkCardLoading({ kind, shape }: LinkCardLoadingProps) {
+  const { subtitle = false, summary = true, rows = 0, latest = false, ring = false, footer = 'line' } = shape ?? KIND_SHAPE[kind]
+  return (
+    <div className="animate-skeleton-in" aria-busy>
+      <Card fill="inset" aria-hidden className="flex flex-col gap-2 p-3">
+        <div className="flex h-[19.6px] items-center gap-2">
+          <LinkedIcon kind={kind} />
+          <SkeletonBar on="inset" className="h-3.5 w-1/2" />
+          {ring && <SkeletonBar on="inset" shape="round" className="ml-auto size-4" />}
+        </div>
+        {subtitle && (
+          <div className="-mt-1 flex h-[14.4px] items-center pl-6">
+            <SkeletonBar on="inset" className="h-2.5 w-20" />
+          </div>
+        )}
+        {summary && (
+          <div className="flex h-[19.6px] items-center">
+            <SkeletonBar on="inset" className="h-3 w-4/5" />
+          </div>
+        )}
+        {rows > 0 && (
+          <div className="flex flex-col divide-y divide-border-subtle rounded-md border border-border-subtle leaf:divide-border-strong leaf:border-border-strong">
+            {Array.from({ length: rows }, (_, i) => (
+              <div key={i} className="flex h-8 items-center px-2">
+                <SkeletonBar on="inset" className="h-3 w-1/3" />
+              </div>
+            ))}
+          </div>
+        )}
+        {latest && (
+          <div className="flex flex-col gap-1">
+            <div className="flex h-[14.4px] items-center">
+              <SkeletonBar on="inset" className="h-2.5 w-28" />
+            </div>
+            <div className="flex h-[71.6px] flex-col justify-center gap-2 rounded-md border border-border-subtle p-2 leaf:border-border-strong">
+              <SkeletonBar on="inset" className="h-2.5 w-24" />
+              <SkeletonBar on="inset" className="h-3 w-full" />
+              <SkeletonBar on="inset" className="h-3 w-3/5" />
+            </div>
+          </div>
+        )}
+        {footer !== 'none' && (
+          <div className="flex min-h-6 items-center gap-2 border-t border-border-subtle pt-2 leaf:border-border-strong">
+            {footer === 'pickers' ? (
+              <>
+                <SkeletonBar on="inset" shape="control" className="h-6 w-24" />
+                <SkeletonBar on="inset" shape="control" className="h-6 w-28" />
+              </>
+            ) : footer === 'people' ? (
+              <>
+                <SkeletonBar on="inset" shape="round" className="size-4" />
+                <SkeletonBar on="inset" className="h-3 w-40" />
+              </>
+            ) : (
+              <SkeletonBar on="inset" className="h-3 w-40" />
+            )}
+          </div>
+        )}
+      </Card>
+    </div>
+  )
+}