Dotta
4fdbbeced3
## Thinking Path > - Paperclip orchestrates AI agents for zero-human companies > - Task references are a core part of how operators understand issue relationships across the UI > - Those references appear both in markdown bodies and in sidebar relationship panels > - The rendering had drifted between surfaces, and inline markdown pills were reading awkwardly inside prose and lists > - This pull request unifies the underlying issue-reference treatment, routes issue descriptions through `MarkdownBody`, and switches inline markdown references to a cleaner text-link presentation > - The benefit is more consistent issue-reference UX with better readability in markdown-heavy views ## What Changed - unified sidebar and markdown issue-reference rendering around the shared issue-reference components - routed resting issue descriptions through `MarkdownBody` so description previews inherit the richer issue-reference treatment - replaced inline markdown pill chrome with a cleaner inline reference presentation for prose contexts - added and updated UI tests for `MarkdownBody` and `InlineEditor` ## Verification - `pnpm exec vitest run --project @paperclipai/ui ui/src/components/MarkdownBody.test.tsx ui/src/components/InlineEditor.test.tsx` ## Risks - Moderate UI risk: issue-reference rendering now differs intentionally between inline markdown and relationship sidebars, so regressions would show up as styling or hover-preview mismatches > For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and discuss it in `#dev` before opening the PR. Feature PRs that overlap with planned core work may need to be redirected — check the roadmap first. See `CONTRIBUTING.md`. ## Model Used - OpenAI Codex GPT-5-based coding agent with tool use and code execution in the Codex CLI environment ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [ ] If this change affects the UI, I have included before/after screenshots - [ ] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: Paperclip <noreply@paperclip.ing>
59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import type { IssueRelationIssueSummary } from "@paperclipai/shared";
|
|
import { Link } from "@/lib/router";
|
|
import { cn } from "../lib/utils";
|
|
import { StatusIcon } from "./StatusIcon";
|
|
|
|
export function IssueReferencePill({
|
|
issue,
|
|
strikethrough,
|
|
className,
|
|
children,
|
|
}: {
|
|
issue: Pick<IssueRelationIssueSummary, "id" | "identifier" | "title"> &
|
|
Partial<Pick<IssueRelationIssueSummary, "status">>;
|
|
strikethrough?: boolean;
|
|
className?: string;
|
|
children?: ReactNode;
|
|
}) {
|
|
const issueLabel = issue.identifier ?? issue.title;
|
|
const classNames = cn(
|
|
"paperclip-mention-chip paperclip-mention-chip--issue",
|
|
"inline-flex items-center gap-1 rounded-full border border-border px-2 py-0.5 text-xs no-underline",
|
|
issue.identifier && "hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
|
|
strikethrough && "opacity-60 line-through decoration-muted-foreground",
|
|
className,
|
|
);
|
|
const content = (
|
|
<>
|
|
{issue.status ? <StatusIcon status={issue.status} className="h-3 w-3 shrink-0" /> : null}
|
|
{children !== undefined ? children : <span>{issue.identifier ?? issue.title}</span>}
|
|
</>
|
|
);
|
|
|
|
if (!issue.identifier) {
|
|
return (
|
|
<span
|
|
data-mention-kind="issue"
|
|
className={classNames}
|
|
title={issue.title}
|
|
aria-label={`Issue: ${issue.title}`}
|
|
>
|
|
{content}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Link
|
|
to={`/issues/${issueLabel}`}
|
|
data-mention-kind="issue"
|
|
className={classNames}
|
|
title={issue.title}
|
|
aria-label={`Issue ${issueLabel}: ${issue.title}`}
|
|
>
|
|
{content}
|
|
</Link>
|
|
);
|
|
}
|