mirror of
https://github.com/multica-ai/multica.git
synced 2026-08-14 15:20:07 +02:00
7803a5b9ea
tokens.css defined colours, radii and font families but not a single --text-* step, so font sizes had no baseline to align to and grew wherever they were needed: 51 distinct sizes across web + desktop, 370 written as arbitrary values, six at half a pixel (10.5 / 11.5 / 12.5 / 13.5 / 14.5 / 15.5px). text-xs and text-sm carried nearly all UI text while the range between them — 11, 13, 15px — could only be reached with arbitrary values. Hierarchy does not come from having more sizes; past a handful, each extra size makes the hierarchy blurrier. Add ten role-named steps, each with its own line-height so leading cannot fragment the way size did, and move every product-UI call site onto them. Steps are named for what the text is for, not for a t-shirt size, because that is what keeps the scale from drifting again. Six steps deliberately keep the exact size/line-height pairs of the Tailwind defaults they replace, so the ~1,900-call-site rename moves nothing on screen. The visible changes are confined to former arbitrary values snapping to a step: 8/9/10px -> micro (11px) on badges and overlines; 17 -> 18; 22 -> 24; 30 (text-3xl) -> 36 on headings and stat numbers; 12.8px -> label (13px) on small buttons and toggles. Half-pixel sizes are gone. This supersedes #6108, which was reverted by #6116 because the sidebar group labels rendered at the inherited 16px. The cause was not the scale but cn(): `text-<x>` is ambiguous in Tailwind, and tailwind-merge resolves it against a table listing only the default sizes, so it filed every role step under text-colour and dropped whichever of `text-caption` / `text-sidebar-foreground/70` came first. Registering the steps as a font-size class group restores the real conflict groups — size beats size, colour beats colour, the two coexist — and a test pins the list against the scale, since the failure is silent in source. Hand-written CSS is covered too. The transcript kept a 12.5px body long after every Tailwind call site was on the scale, so the "no half-pixel sizes" claim was true of the classes and false of the product; the editor's prose, code and mermaid ramps had the same blind spot, and seven of their eight values already equalled a step exactly. All now reference var(--text-*). The guard test reads raw `font-size:` declarations as well as class names, exempting only the 16px iOS input-zoom workaround in base.css and the landing pages' marketing ramp. apps/mobile (own NativeWind config) and apps/docs (fumadocs' own type system) keep Tailwind's default scale and are untouched. Landing display type (rem/clamp, 2.2-6.4rem) stays on its separate ramp, as do four decorative emoji / serif-hero sizes. Verified on a running local stack: pinned sidebar rows and group labels measure 12px/16px, nav items 14px/20px — identical to pre-migration. An audit of every rendered font size across the product surfaces finds nothing off the scale; the only exceptions are avatar initials and emoji, which actor-avatar.tsx sizes proportionally to the avatar diameter by design. Co-authored-by: Lambda <lambda@multica.ai> Co-authored-by: multica-agent <github@multica.ai>
73 lines
2.9 KiB
TypeScript
73 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { issueListOptions, issueDetailOptions } from "@multica/core/issues/queries";
|
|
import { useWorkspaceId } from "@multica/core/hooks";
|
|
import { StatusIcon } from "./status-icon";
|
|
|
|
/**
|
|
* Compact, presentation-only representation of an issue —
|
|
* `<StatusIcon> <identifier> <title>`, bordered, capped at the container width
|
|
* (`max-w-full`) with the title truncating to an ellipsis. As an atomic inline
|
|
* box it wraps to the next line as a unit when it doesn't fit at the current
|
|
* position; the ellipsis only kicks in once a whole line can't hold it. The cap
|
|
* lives here (single source of truth) — wrappers must NOT add their own flex
|
|
* container around it, or a percentage cap gets dropped during the wrapper's
|
|
* intrinsic sizing and the clickable box diverges from the truncated chip.
|
|
*
|
|
* This is the single source of truth for the "issue-mention card" look.
|
|
* It is intentionally **not** a link or button: callers wrap it in whatever
|
|
* interactive shell they need (AppLink for markdown mentions, an <a> with
|
|
* cmd-click support inside the editor's NodeView, a plain span next to a
|
|
* dismiss button in chat's context anchor card, …).
|
|
*
|
|
* Size budget: must fit within a 14px line-box when used inline — hence
|
|
* `py-0.5` + text-caption (see MentionView docstring for the math).
|
|
*/
|
|
export interface IssueChipProps {
|
|
issueId: string;
|
|
/** Shown when the issue can't be resolved (deleted, other workspace, …). */
|
|
fallbackLabel?: string;
|
|
/** Extra classes — callers layer interaction hints here
|
|
* (e.g. `hover:bg-accent cursor-pointer` for navigable variants). */
|
|
className?: string;
|
|
}
|
|
|
|
const BASE_CLASS =
|
|
"issue-mention inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-md border mx-0.5 px-2 py-0.5 text-caption";
|
|
|
|
export function IssueChip({ issueId, fallbackLabel, className }: IssueChipProps) {
|
|
const wsId = useWorkspaceId();
|
|
const { data: issues = [] } = useQuery(issueListOptions(wsId));
|
|
const listIssue = issues.find((i) => i.id === issueId);
|
|
|
|
// Fallback fetch for issues outside the first page of the list (e.g. Done).
|
|
const { data: detailIssue } = useQuery({
|
|
...issueDetailOptions(wsId, issueId),
|
|
enabled: !listIssue,
|
|
});
|
|
|
|
const issue = listIssue ?? detailIssue;
|
|
const cls = className ? `${BASE_CLASS} ${className}` : BASE_CLASS;
|
|
|
|
if (!issue) {
|
|
return (
|
|
<span className={cls}>
|
|
<span className="min-w-0 truncate font-medium text-muted-foreground">
|
|
{fallbackLabel ?? issueId.slice(0, 8)}
|
|
</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<span className={cls}>
|
|
<StatusIcon status={issue.status} className="h-3.5 w-3.5 shrink-0" />
|
|
<span className="font-medium text-muted-foreground shrink-0">
|
|
{issue.identifier}
|
|
</span>
|
|
<span className="min-w-0 truncate text-foreground">{issue.title}</span>
|
|
</span>
|
|
);
|
|
}
|