5e770b2e2f
- Remove align-middle from IssueMentionCard (alignment is container's job) - Add inline align-middle wrapper span in ReadonlyContent for vertical alignment - Add img component with max-width constraint to prevent overflow - Issue mention clicks open in new tab (matches Tiptap behavior) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { issueListOptions } from "@core/issues/queries";
|
|
import { useWorkspaceId } from "@core/hooks";
|
|
import { StatusIcon } from "./status-icon";
|
|
|
|
interface IssueMentionCardProps {
|
|
issueId: string;
|
|
/** Fallback text when issue is not in store (e.g. "MUL-7") */
|
|
fallbackLabel?: string;
|
|
}
|
|
|
|
export function IssueMentionCard({ issueId, fallbackLabel }: IssueMentionCardProps) {
|
|
const wsId = useWorkspaceId();
|
|
const { data: issues = [] } = useQuery(issueListOptions(wsId));
|
|
const issue = issues.find((i) => i.id === issueId);
|
|
|
|
if (!issue) {
|
|
return (
|
|
<Link
|
|
href={`/issues/${issueId}`}
|
|
className="issue-mention inline-flex items-center gap-1.5 rounded-md border mx-0.5 px-2 py-0.5 text-xs hover:bg-accent transition-colors cursor-pointer max-w-72"
|
|
>
|
|
<span className="font-medium text-muted-foreground">
|
|
{fallbackLabel ?? issueId.slice(0, 8)}
|
|
</span>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Link
|
|
href={`/issues/${issueId}`}
|
|
className="issue-mention inline-flex items-center gap-1.5 rounded-md border mx-0.5 px-2 py-0.5 text-xs hover:bg-accent transition-colors cursor-pointer max-w-72"
|
|
>
|
|
<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="text-foreground truncate">{issue.title}</span>
|
|
</Link>
|
|
);
|
|
}
|