feat(web): redesign issue creation toast to match Linear's style
Replace the small one-line sonner toast with a richer card showing: - Green checkmark with "Issue created" title - Status icon + issue identifier + title on second line - Clickable "View issue" link to navigate to the new issue
This commit is contained in:
parent
6b2df8a356
commit
68217d2967
1 changed files with 26 additions and 8 deletions
|
|
@ -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>
|
||||
}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue