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