From 68217d29678e4263732093f101424cc2aba8987b Mon Sep 17 00:00:00 2001
From: Jiang Bohan <bhjiang@outlook.com>
Date: Tue, 31 Mar 2026 17:02:23 +0800
Subject: [PATCH] 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
---
 apps/web/features/modals/create-issue.tsx | 34 +++++++++++++++++------
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/apps/web/features/modals/create-issue.tsx b/apps/web/features/modals/create-issue.tsx
index 3d77a379..908a1b25 100644
--- a/apps/web/features/modals/create-issue.tsx
+++ b/apps/web/features/modals/create-issue.tsx
@@ -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>
                 }
               />