Status tag and filing

import { Filing, StatusTag } from "@/pages/library/parts";
import "@/pages/library/library.css"; // for Filing

Two small pieces that sit on every workspace card in the Library. StatusTag says whether the agent may use a component yet. Filing shows where the component is filed, and lets people filter the grid by a tag with one click.

StatusTagCopy Anchor Link

A component in the workspace is a draft until someone publishes it. Only published components are given to the agent, so this is the one thing a card has to say clearly.

<StatusTag status="published" />
<StatusTag status="draft" />

Both are the small Tag: 10px text on a 16px line, 2px by 8px padding, --radius-md corners, --color-text-primary text.

FilingCopy Anchor Link

Filing shows a folder with a FolderSimple icon, then the tags. Pass onTag and each tag becomes a button that toggles a filter. The active tag turns blue.

<Filing folder="Demo campaigns" tags={["demo", "product", "q4"]} activeTag={tag} onTag={setTag} />

onTag is called with the tag, or with null when the active tag is clicked again. The Library page passes the same tag state to the toolbar, which shows it as a chip.

Read-onlyCopy Anchor Link

Without onTag the tags are plain text. Either the folder or the tags can be missing. With neither, Filing renders nothing.

<Filing folder="Shared" tags={["every page"]} />
<Filing folder="Launch" />
<Filing tags={["proof", "q4"]} />

On a cardCopy Anchor Link

How the workspace card puts them together: the category and StatusTag on one line, then the name, the description and Filing.

<div className="lib-card__body">
  <div className="lib-card__meta">
    <span className="lib-card__category lib-card__category--component"><DiamondsFour size={12} /> Hero</span>
    <StatusTag status={item.status} />
  </div>
  <h3 className="lib-card__name">{item.name}</h3>
  <p className="lib-card__text">{item.description}</p>
  <Filing folder={item.folder} tags={item.tags} activeTag={tag} onTag={setTag} />
</div>

Anatomy of FilingCopy Anchor Link

PropsCopy Anchor Link

StatusTagCopy Anchor Link

FilingCopy Anchor Link

AccessibilityCopy Anchor Link

• StatusTag is text, so "Published" and "Draft" are read out. The colour only repeats what the word says.
• Clickable tags are <button type="button"> elements, reachable with Tab. They do not set aria-pressed, so a screen reader cannot tell which tag is active. Only the colour shows it.
• The folder icon has no label. The folder name next to it carries the meaning.

Do and don'tCopy Anchor Link

• Do use StatusTag for anything with the library's draft and published lifecycle: workspace components and the component editor header.
• Do pass onTag on grids that can be filtered, and leave it out where clicking a tag would lead nowhere.
• Don't use StatusTag for page or creative status. It cannot show "Unpublished changes" or "Approved"; render a Tag with the right colour instead.
• Don't write tags in title case. They are stored lowercase and compared exactly.

When to use itCopy Anchor Link

Use these inside the library. Everywhere else, use Tag from @/ui directly. Note that src/pages/workbook/list/WorkbookList.jsx has its own, unrelated StatusTag for workbooks.

Where it is usedCopy Anchor Link