Skip to content

Commit de223af

Browse files
ObservedObserverObservedObserver
committed
feat: new design
1 parent 4a8deed commit de223af

File tree

4 files changed

+160
-99
lines changed

4 files changed

+160
-99
lines changed

‎async-code-web/app/page.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -308,10 +308,10 @@ export default function Home() {
308308
</header>
309309

310310
{/* Main Content */}
311-
<main className="container mx-auto px-6 py-8 max-w-8xl">
312-
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
313-
{/* Left Column - Task Creation */}
314-
<div className="lg:col-span-2 space-y-6">
311+
<main className="container mx-auto px-6 py-8 max-w-6xl">
312+
<div className="space-y-8">
313+
{/* Task Creation Section */}
314+
<div className="space-y-6">
315315
{/* Main Input Card */}
316316
<Card>
317317
<CardHeader>
@@ -487,7 +487,7 @@ export default function Home() {
487487
)}
488488
</div>
489489

490-
{/* Right Column - Task List */}
490+
{/* Task List Section */}
491491
<div className="space-y-6">
492492
<Card>
493493
<CardHeader>
@@ -566,7 +566,6 @@ export default function Home() {
566566
)}
567567
</CardContent>
568568
</Card>
569-
570569
</div>
571570
</div>
572571
</main>

‎async-code-web/app/tasks/page.tsx‎

Lines changed: 54 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -377,49 +377,60 @@ export default function TasksPage() {
377377
<CardContent className="p-6">
378378
<div className="flex items-start justify-between">
379379
<div className="flex-1 min-w-0">
380-
<div className="flex items-center gap-3 mb-3">
381-
<TaskStatusBadge status={task.status || ''} />
382-
{task.pr_url && task.pr_number && (
383-
<PRStatusBadge
384-
prUrl={task.pr_url}
385-
prNumber={task.pr_number}
386-
prBranch={task.pr_branch}
387-
variant="badge"
388-
size="default"
389-
/>
390-
)}
391-
<span className="text-sm text-slate-500">
392-
Task #{task.id}
393-
</span>
394-
<span className="text-sm text-slate-500">•</span>
395-
<span className="text-sm text-slate-500">
396-
{task.agent?.toUpperCase()}
397-
</span>
398-
{task.project && (
399-
<>
400-
<span className="text-sm text-slate-500">•</span>
401-
<div className="flex items-center gap-1 text-sm text-slate-500">
402-
<FolderGit2 className="w-3 h-3" />
403-
{task.project.repo_owner}/{task.project.repo_name}
404-
</div>
405-
</>
406-
)}
407-
</div>
408-
409-
<h3 className="font-medium text-slate-900 mb-2 line-clamp-2">
410-
{getPromptFromTask(task)}
411-
</h3>
412-
413-
<div className="flex items-center gap-4 text-sm text-slate-500 mb-3">
414-
<div className="flex items-center gap-1">
415-
<Github className="w-3 h-3" />
416-
<span className="truncate max-w-[200px]">
417-
{task.repo_url}
418-
</span>
380+
<div className="flex items-start gap-3 mb-3">
381+
<div className="flex-shrink-0 pt-0.5">
382+
<TaskStatusBadge status={task.status || ''} iconOnly={true} />
419383
</div>
420-
<div className="flex items-center gap-1">
421-
<Calendar className="w-3 h-3" />
422-
<span>{new Date(task.created_at || '').toLocaleDateString()}</span>
384+
<div className="flex-1 min-w-0">
385+
<div className="flex items-center gap-2 mb-2">
386+
<h3 className="font-medium text-slate-900 line-clamp-2 text-base">
387+
{getPromptFromTask(task)}
388+
</h3>
389+
{task.pr_url && task.pr_number && (
390+
<div className="flex-shrink-0">
391+
<PRStatusBadge
392+
prUrl={task.pr_url}
393+
prNumber={task.pr_number}
394+
prBranch={task.pr_branch}
395+
prStatus="merged"
396+
variant="badge"
397+
size="sm"
398+
/>
399+
</div>
400+
)}
401+
</div>
402+
403+
<div className="flex items-center gap-4 text-sm text-slate-500 mb-2">
404+
<span className="text-xs">
405+
Task #{task.id}
406+
</span>
407+
<span className="text-xs">•</span>
408+
<span className="text-xs">
409+
{task.agent?.toUpperCase()}
410+
</span>
411+
{task.project && (
412+
<>
413+
<span className="text-xs">•</span>
414+
<div className="flex items-center gap-1 text-xs">
415+
<FolderGit2 className="w-3 h-3" />
416+
{task.project.repo_owner}/{task.project.repo_name}
417+
</div>
418+
</>
419+
)}
420+
</div>
421+
422+
<div className="flex items-center gap-4 text-sm text-slate-500">
423+
<div className="flex items-center gap-1">
424+
<Github className="w-3 h-3" />
425+
<span className="truncate max-w-[200px] text-xs">
426+
{task.repo_url}
427+
</span>
428+
</div>
429+
<div className="flex items-center gap-1">
430+
<Calendar className="w-3 h-3" />
431+
<span className="text-xs">{new Date(task.created_at || '').toLocaleDateString()}</span>
432+
</div>
433+
</div>
423434
</div>
424435
</div>
425436

@@ -451,6 +462,7 @@ export default function TasksPage() {
451462
prUrl={task.pr_url}
452463
prNumber={task.pr_number}
453464
prBranch={task.pr_branch}
465+
prStatus="merged"
454466
variant="button"
455467
size="sm"
456468
/>

‎async-code-web/components/pr-status-badge.tsx‎

Lines changed: 42 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { GitPullRequest, ExternalLink } from "lucide-react";
1+
import { GitPullRequest, ExternalLink, GitMerge } from "lucide-react";
22
import { Badge } from "@/components/ui/badge";
33
import { Button } from "@/components/ui/button";
44
import { cn } from "@/lib/utils";
@@ -7,6 +7,7 @@ interface PRStatusBadgeProps {
77
prUrl?: string | null;
88
prNumber?: number | null;
99
prBranch?: string | null;
10+
prStatus?: "open" | "merged" | "closed";
1011
variant?: "badge" | "button";
1112
size?: "sm" | "default";
1213
className?: string;
@@ -16,6 +17,7 @@ export function PRStatusBadge({
1617
prUrl,
1718
prNumber,
1819
prBranch,
20+
prStatus = "open",
1921
variant = "badge",
2022
size = "sm",
2123
className
@@ -30,17 +32,48 @@ export function PRStatusBadge({
3032
}
3133
};
3234

35+
const getStatusConfig = (status: string) => {
36+
switch (status) {
37+
case "merged":
38+
return {
39+
icon: <GitMerge className="w-4 h-4 text-purple-600" />,
40+
text: "Merged",
41+
className: "bg-background text-foreground border-border hover:bg-muted"
42+
};
43+
case "open":
44+
return {
45+
icon: <GitPullRequest className="w-4 h-4 text-green-600" />,
46+
text: "Open",
47+
className: "bg-background text-foreground border-border hover:bg-muted"
48+
};
49+
case "closed":
50+
return {
51+
icon: <GitPullRequest className="w-4 h-4 text-red-600" />,
52+
text: "Closed",
53+
className: "bg-background text-foreground border-border hover:bg-muted"
54+
};
55+
default:
56+
return {
57+
icon: <GitPullRequest className="w-4 h-4 text-blue-600" />,
58+
text: "PR",
59+
className: "bg-background text-foreground border-border hover:bg-muted"
60+
};
61+
}
62+
};
63+
64+
const config = getStatusConfig(prStatus);
65+
3366
if (variant === "button") {
3467
return (
3568
<Button
3669
onClick={handleClick}
3770
variant="outline"
3871
size={size}
39-
className={cn("gap-2 transition-colors hover:bg-blue-50 hover:border-blue-300", className)}
72+
className={cn("gap-2 transition-colors", config.className, className)}
4073
>
41-
<GitPullRequest className="w-4 h-4 text-blue-600" />
42-
<span className="text-blue-600">PR #{prNumber}</span>
43-
<ExternalLink className="w-3 h-3 text-blue-600" />
74+
{config.icon}
75+
<span>#{prNumber}</span>
76+
<ExternalLink className={cn(size === "sm" ? "w-3 h-3" : "w-4 h-4")} />
4477
</Button>
4578
);
4679
}
@@ -51,14 +84,13 @@ export function PRStatusBadge({
5184
variant="outline"
5285
className={cn(
5386
"gap-1 cursor-pointer transition-all hover:shadow-sm",
54-
"bg-blue-50 border-blue-200 text-blue-700 hover:bg-blue-100 hover:border-blue-300",
55-
size === "sm" ? "text-xs px-2 py-1" : "text-sm px-3 py-1",
87+
config.className,
5688
className
5789
)}
5890
>
59-
<GitPullRequest className={cn(size === "sm" ? "w-3 h-3" : "w-4 h-4")} />
60-
<span>PR #{prNumber}</span>
61-
<ExternalLink className={cn(size === "sm" ? "w-2.5 h-2.5" : "w-3 h-3")} />
91+
{config.icon}
92+
<span>#{prNumber}</span>
93+
<ExternalLink className="w-3 h-3" />
6294
</Badge>
6395
);
6496
}

‎async-code-web/components/task-status-badge.tsx‎

Lines changed: 59 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -5,47 +5,65 @@ import { cn } from "@/lib/utils";
55
interface TaskStatusBadgeProps {
66
status: string;
77
className?: string;
8+
iconOnly?: boolean;
89
}
910

10-
export function TaskStatusBadge({ status, className }: TaskStatusBadgeProps) {
11-
switch (status) {
12-
case "pending":
13-
return (
14-
<Badge variant="secondary" className={cn("gap-1", className)}>
15-
<Clock className="w-4 h-4" />
16-
pending
17-
</Badge>
18-
);
19-
20-
case "running":
21-
return (
22-
<Badge variant="default" className={cn("gap-1", className)}>
23-
<AlertCircle className="w-4 h-4" />
24-
running
25-
</Badge>
26-
);
27-
28-
case "completed":
29-
return (
30-
<Badge variant="secondary" className={cn("gap-1", className, "bg-green-600 text-white dark:bg-green-600 border-green-600")}>
31-
<CheckCircle className="w-4 h-4" />
32-
completed
33-
</Badge>
34-
);
35-
36-
case "failed":
37-
return (
38-
<Badge variant="destructive" className={cn("gap-1", className)}>
39-
<XCircle className="w-4 h-4" />
40-
failed
41-
</Badge>
42-
);
43-
44-
default:
45-
return (
46-
<Badge variant="outline" className={cn("gap-1", className)}>
47-
{status}
48-
</Badge>
49-
);
11+
export function TaskStatusBadge({ status, className, iconOnly = false }: TaskStatusBadgeProps) {
12+
const getIconColor = (status: string) => {
13+
switch (status) {
14+
case "pending":
15+
return "text-amber-600";
16+
case "running":
17+
return "text-blue-600";
18+
case "completed":
19+
return "text-green-600";
20+
case "failed":
21+
return "text-red-600";
22+
default:
23+
return "text-muted-foreground";
24+
}
25+
};
26+
27+
const getIcon = (status: string) => {
28+
switch (status) {
29+
case "pending":
30+
return <Clock className={cn("w-4 h-4", getIconColor(status))} />;
31+
case "running":
32+
return <AlertCircle className={cn("w-4 h-4", getIconColor(status))} />;
33+
case "completed":
34+
return <CheckCircle className={cn("w-4 h-4", getIconColor(status))} />;
35+
case "failed":
36+
return <XCircle className={cn("w-4 h-4", getIconColor(status))} />;
37+
default:
38+
return null;
39+
}
40+
};
41+
42+
if (iconOnly) {
43+
return (
44+
<Badge
45+
variant="outline"
46+
className={cn(
47+
"gap-0 p-1.5 rounded-full border-2 transition-colors bg-background text-foreground border-border hover:bg-muted",
48+
className
49+
)}
50+
title={status}
51+
>
52+
{getIcon(status)}
53+
</Badge>
54+
);
55+
} else {
56+
return (
57+
<Badge
58+
variant="outline"
59+
className={cn(
60+
"gap-1 transition-colors bg-background text-foreground border-border hover:bg-muted",
61+
className
62+
)}
63+
>
64+
{getIcon(status)}
65+
{status}
66+
</Badge>
67+
);
5068
}
51-
}
69+
}

0 commit comments

Comments
 (0)