Merge pull request #233 from multica-ai/agent/j/298fd11b

feat(web): redesign issue creation toast to match Linear
This commit is contained in:
Bohan Jiang 2026-03-31 17:04:48 +08:00 committed by GitHub
commit d0ad32a5b9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -2,7 +2,7 @@
import { useState, useRef } from "react";
import { useRouter } from "next/navigation";
import { Bot, CalendarDays, ChevronRight, Maximize2, Minimize2, UserMinus, X } from "lucide-react";
import { Bot, CalendarDays, Check, ChevronRight, Maximize2, Minimize2, UserMinus, X as XIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import { toast } from "sonner";
import type { IssueStatus, IssuePriority, IssueAssigneeType } from "@/shared/types";
@ -127,12 +127,30 @@ export function CreateIssueModal({ onClose, data }: { onClose: () => void; data?
useIssueStore.getState().addIssue(issue);
clearDraft();
onClose();
toast.success(`${issue.identifier} created`, {
action: {
label: "View issue",
onClick: () => router.push(`/issues/${issue.id}`),
},
});
toast.custom((t) => (
<div className="bg-popover text-popover-foreground border rounded-lg shadow-lg p-4 w-[360px]">
<div className="flex items-center gap-2 mb-2">
<div className="flex items-center justify-center size-5 rounded-full bg-emerald-500/15 text-emerald-500">
<Check className="size-3" />
</div>
<span className="text-sm font-medium">Issue created</span>
</div>
<div className="flex items-center gap-2 text-sm text-muted-foreground ml-7">
<StatusIcon status={issue.status} className="size-3.5 shrink-0" />
<span className="truncate">{issue.identifier} {issue.title}</span>
</div>
<button
type="button"
className="ml-7 mt-2 text-sm text-primary hover:underline cursor-pointer"
onClick={() => {
router.push(`/issues/${issue.id}`);
toast.dismiss(t);
}}
>
View issue
</button>
</div>
), { duration: 5000 });
} catch {
toast.error("Failed to create issue");
} finally {
@ -183,7 +201,7 @@ export function CreateIssueModal({ onClose, data }: { onClose: () => void; data?
onClick={onClose}
className="rounded-sm p-1.5 opacity-70 hover:opacity-100 hover:bg-accent/60 transition-all cursor-pointer"
>
<X className="size-4" />
<XIcon className="size-4" />
</button>
}
/>