null
/
Pipeline
1
0
Fork 0
Code Issues 15 Pull Requests Packages Projects Releases Wiki Activity

style: enhance styling and layout of ForgejoIssueDetailDialog component

This commit is contained in:
null 2026-05-24 17:31:55 -05:00
parent f0bd9b4950
commit 3685cbf761
1 changed files with 29 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
frontend/src/components/git/ForgejoIssueDetailDialog.tsx
View File

@ -100,7 +100,9 @@ export function ForgejoIssueDetailDialog({
if (!cancelled) setIsLoading(false);
}
})();
return () => { cancelled = true; };
return () => {
cancelled = true;
};
};
useEffect(() => {
@ -178,14 +180,14 @@ export function ForgejoIssueDetailDialog({
return (
<>
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-4xl">
<DialogHeader className="gap-4">
<div className="grid gap-3 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-start">
<DialogContent className="max-w-4xl border-[color:var(--border-strong)] bg-[color:var(--surface)]/95 backdrop-blur-xl">
<DialogHeader className="gap-5 border-b border-[color:var(--border)] pb-5">
<div className="grid gap-4 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-start">
<div className="min-w-0 space-y-2">
<DialogTitle className="break-words text-base sm:text-lg">
{active.title}
</DialogTitle>
<DialogDescription className="flex flex-wrap items-center gap-2 text-xs sm:text-sm">
<DialogDescription className="flex flex-wrap items-center gap-x-3 gap-y-2 text-xs sm:text-sm">
<span className="font-medium text-strong">
{repositoryName}
</span>
@ -193,8 +195,12 @@ export function ForgejoIssueDetailDialog({
#{active.forgejo_issue_number}
</span>
<Badge variant={stateVariant}>{active.state}</Badge>
<span>Opened {formatDateTime(active.forgejo_created_at)}</span>
<span>Updated {formatDateTime(active.forgejo_updated_at)}</span>
<span>
Opened {formatDateTime(active.forgejo_created_at)}
</span>
<span>
Updated {formatDateTime(active.forgejo_updated_at)}
</span>
</DialogDescription>
</div>
{showCloseIssue ? (
@ -209,11 +215,11 @@ export function ForgejoIssueDetailDialog({
</Button>
) : null}
</div>
<div className="flex flex-wrap items-center gap-2">
<div className="flex flex-wrap items-center gap-2 rounded-2xl border border-[color:var(--border)] bg-[color:var(--surface-muted)]/45 p-1.5">
<Button
variant="outline"
size="sm"
className="h-9 gap-2 rounded-xl px-3 text-xs font-semibold"
className="h-9 gap-2 rounded-xl bg-[color:var(--surface)]/60 px-3 text-xs font-semibold"
onClick={() => setIsEditDialogOpen(true)}
>
<Pencil className="h-3.5 w-3.5" />
@ -222,7 +228,7 @@ export function ForgejoIssueDetailDialog({
<Button
variant="outline"
size="sm"
className="h-9 gap-2 rounded-xl px-3 text-xs font-semibold"
className="h-9 gap-2 rounded-xl bg-[color:var(--surface)]/60 px-3 text-xs font-semibold"
onClick={() => {
setActiveTab("comments");
setIsCommentDialogOpen(true);
@ -234,7 +240,7 @@ export function ForgejoIssueDetailDialog({
<Button
variant="outline"
size="sm"
className="h-9 gap-2 rounded-xl px-3 text-xs font-semibold"
className="h-9 gap-2 rounded-xl bg-[color:var(--surface)]/60 px-3 text-xs font-semibold"
onClick={() => setIsAssignDialogOpen(true)}
>
<UserPlus className="h-3.5 w-3.5" />
@ -243,7 +249,7 @@ export function ForgejoIssueDetailDialog({
<Button
variant="outline"
size="sm"
className="h-9 gap-2 rounded-xl px-3 text-xs font-semibold"
className="h-9 gap-2 rounded-xl bg-[color:var(--surface)]/60 px-3 text-xs font-semibold"
onClick={handleDispatchToClaudeCode}
title="Copy issue as VSCode prompt"
>
@ -254,7 +260,7 @@ export function ForgejoIssueDetailDialog({
href={active.html_url}
target="_blank"
rel="noopener noreferrer"
className="inline-flex h-9 items-center gap-2 rounded-xl border border-[color:var(--border)] px-3 text-xs font-semibold text-muted transition hover:border-[color:var(--accent)] hover:text-[color:var(--accent)]"
className="inline-flex h-9 items-center gap-2 rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)]/60 px-3 text-xs font-semibold text-muted transition hover:border-[color:var(--accent)] hover:text-[color:var(--accent)]"
>
Open in Forgejo
<ExternalLink className="h-3.5 w-3.5" />
@ -275,22 +281,24 @@ export function ForgejoIssueDetailDialog({
</div>
) : null}
<Tabs value={activeTab} onValueChange={setActiveTab} className="mt-1">
<TabsList>
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="comments">
<Tabs value={activeTab} onValueChange={setActiveTab} className="mt-5">
<TabsList className="max-w-full overflow-x-auto rounded-2xl bg-[color:var(--surface-muted)]/45">
<TabsTrigger className="shrink-0 rounded-xl" value="overview">
Overview
</TabsTrigger>
<TabsTrigger className="shrink-0 rounded-xl" value="comments">
Comments ({comments.length})
</TabsTrigger>
<TabsTrigger value="timeline">
<TabsTrigger className="shrink-0 rounded-xl" value="timeline">
Timeline ({timeline.length})
</TabsTrigger>
<TabsTrigger value="reactions">
<TabsTrigger className="shrink-0 rounded-xl" value="reactions">
Reactions ({reactions.length})
</TabsTrigger>
</TabsList>
<TabsContent value="overview">
<div className="rounded-xl border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-4">
<div className="rounded-2xl border border-[color:var(--border)] bg-[color:var(--surface-muted)]/70 p-5 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]">
{body ? (
<Markdown content={body} variant="comment" />
) : (
@ -401,8 +409,7 @@ export function ForgejoIssueDetailDialog({
</div>
) : (
reactions.map((reaction, idx) => {
const content =
asString(reaction.content) ?? "reaction";
const content = asString(reaction.content) ?? "reaction";
const login =
asString(
reaction.user &&