@nextclaw/ui 0.15.21 → 0.15.23

package/src/features/inbox/components/inbox-reader-dialog.tsx

@@ -89,7 +89,7 @@ export function InboxReaderDialog() {
     });
   };
 
-  const positionControls = (
+  const positionControls = unreadDeliveries.length > 1 ? (
     <div className="flex shrink-0 items-center gap-1 pr-1">
       <span className="mr-1 text-[11px] tabular-nums text-muted-foreground">
         {formatPosition(activeIndex + 1, unreadDeliveries.length)}
@@ -107,7 +107,7 @@ export function InboxReaderDialog() {
         onClick={() => selectAt(activeIndex + 1)}
       />
     </div>
-  );
+  ) : null;
 
   return (
     <Dialog
@@ -127,64 +127,40 @@ export function InboxReaderDialog() {
       >
         {activeDelivery ? (
           <>
-            {isHtml ? (
-              <header className="shrink-0 border-b border-border/60 px-6 py-3 pr-14 sm:px-8">
-                <div className="flex min-h-8 items-center justify-between gap-4">
-                  <div className="flex min-w-0 items-center gap-2 text-xs text-muted-foreground">
-                    <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-muted">
-                      <Inbox className="h-3.5 w-3.5" />
-                    </span>
-                    <DialogTitle
-                      ref={titleRef}
-                      tabIndex={-1}
-                      className="truncate text-sm font-semibold text-foreground outline-none"
-                    >
-                      {activeDelivery.title}
-                    </DialogTitle>
-                    <span aria-hidden="true">·</span>
-                    <time className="shrink-0" dateTime={activeDelivery.createdAt}>
-                      {formatDateTime(activeDelivery.createdAt)}
-                    </time>
-                  </div>
-                  {positionControls}
-                </div>
-                <DialogDescription className="sr-only">
-                  {activeDelivery.summary ?? t("inboxNoSummary")}
-                </DialogDescription>
-              </header>
-            ) : (
-              <header className="shrink-0 border-b border-border/60 px-6 pb-4 pt-5 pr-14 sm:px-8 sm:pb-5 sm:pt-6">
-                <div className="mb-5 flex min-h-8 items-center justify-between gap-4">
-                  <div className="flex min-w-0 items-center gap-2 text-xs text-muted-foreground">
-                    <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-muted">
-                      <Inbox className="h-3.5 w-3.5" />
-                    </span>
-                    <span className="truncate">{t("inboxDeliveredBy")}</span>
-                    <span aria-hidden="true">·</span>
-                    <time dateTime={activeDelivery.createdAt}>
-                      {formatDateTime(activeDelivery.createdAt)}
-                    </time>
-                  </div>
-                  {positionControls}
+            <header className="shrink-0 border-b border-border/50 px-5 py-3 pr-14 sm:px-6">
+              <div className="flex min-h-7 items-center justify-between gap-3">
+                <div className="flex min-w-0 items-center gap-2">
+                  <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-muted/70 text-muted-foreground">
+                    <Inbox className="h-3.5 w-3.5" />
+                  </span>
+                  <DialogTitle
+                    ref={titleRef}
+                    tabIndex={-1}
+                    title={activeDelivery.title}
+                    className="min-w-0 truncate text-sm font-medium text-foreground outline-none"
+                  >
+                    {activeDelivery.title}
+                  </DialogTitle>
+                  <span className="hidden shrink-0 text-muted-foreground sm:inline" aria-hidden="true">·</span>
+                  <time
+                    className="hidden shrink-0 text-[11px] tabular-nums text-muted-foreground sm:block"
+                    dateTime={activeDelivery.createdAt}
+                  >
+                    {formatDateTime(activeDelivery.createdAt)}
+                  </time>
                 </div>
-                <DialogTitle
-                  ref={titleRef}
-                  tabIndex={-1}
-                  className="max-w-[680px] text-balance text-2xl font-semibold leading-tight tracking-[-0.02em] outline-none sm:text-[28px]"
-                >
-                  {activeDelivery.title}
-                </DialogTitle>
-                <DialogDescription className="mt-2 max-w-[680px] text-sm leading-6 text-muted-foreground">
-                  {activeDelivery.summary ?? t("inboxNoSummary")}
-                </DialogDescription>
-              </header>
-            )}
+                {positionControls}
+              </div>
+              <DialogDescription className="sr-only">
+                {activeDelivery.summary ?? t("inboxNoSummary")}
+              </DialogDescription>
+            </header>
 
             <div className={cn(
               "min-h-0 flex-1",
               isHtml
-                ? "p-4 sm:p-5"
-                : "custom-scrollbar overflow-y-auto px-6 py-6 sm:px-8 sm:py-7",
+                ? "p-3 sm:p-4"
+                : "custom-scrollbar overflow-y-auto px-6 py-5 sm:px-8 sm:py-6",
             )}>
               <InboxDeliveryContent
                 className={isHtml ? "h-full" : undefined}
@@ -195,23 +171,23 @@ export function InboxReaderDialog() {
               />
             </div>
 
-            <footer className="shrink-0 border-t border-border/60 bg-background/95 px-6 py-4 backdrop-blur sm:px-8">
+            <footer className="shrink-0 border-t border-border/50 bg-background px-5 py-3 sm:px-6">
               {error ? (
                 <p role="alert" className="mb-3 text-sm text-destructive">{error}</p>
               ) : null}
               <div className="flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-between">
-                <div className="flex flex-col-reverse gap-2 sm:flex-row">
-                  <Button variant="ghost" onClick={inboxManager.closeReader}>
+                <div className="flex flex-col-reverse gap-1 sm:flex-row sm:flex-wrap">
+                  <Button size="sm" variant="ghost" onClick={inboxManager.closeReader}>
                     {t("inboxReadLater")}
                   </Button>
-                  <Button variant="outline" disabled={pendingAction !== null} onClick={markRead}>
+                  <Button size="sm" variant="outline" disabled={pendingAction !== null} onClick={markRead}>
                     {t("inboxMarkRead")}
                   </Button>
-                  <Button variant="outline" disabled={pendingAction !== null} onClick={openInbox}>
+                  <Button size="sm" variant="ghost" disabled={pendingAction !== null} onClick={openInbox}>
                     {t("inboxOpenInbox")}
                   </Button>
                 </div>
-                <Button disabled={pendingAction !== null} onClick={continueInChat}>
+                <Button size="sm" disabled={pendingAction !== null} onClick={continueInChat}>
                   {t("inboxContinueChat")}
                 </Button>
               </div>

package/src/features/inbox/pages/inbox-page.tsx

@@ -3,12 +3,13 @@ import type { InboxDelivery } from "@nextclaw/shared";
 import { Archive, ArrowLeft, Inbox, MessageCircle, RotateCcw, Trash2 } from "lucide-react";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { useAppPresenter } from "@/app/components/app-presenter-provider";
+import { PageHeader } from "@/app/components/layout/page-layout";
 import { useViewportLayout } from "@/app/hooks/use-viewport-layout";
 import { InboxDeliveryContent } from "@/features/inbox/components/inbox-delivery-content";
 import { useInboxDeliveries } from "@/features/inbox/hooks/use-inbox-deliveries";
 import { Button } from "@/shared/components/ui/button";
 import { useConfirmDialog } from "@/shared/hooks/use-confirm-dialog";
-import { formatDateTime, t } from "@/shared/lib/i18n";
+import { formatDateShort, formatDateTime, t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
 
 type InboxFilter = "unread" | "all" | "archived";
@@ -51,26 +52,6 @@ function InboxEmptyState({ selection = false }: { selection?: boolean }) {
   );
 }
 
-function InboxPageHeader({ unreadCount }: { unreadCount: number }) {
-  return (
-    <header className="shrink-0 px-4 pb-4 pt-1 sm:px-0">
-      <div className="flex items-end justify-between gap-4">
-        <div>
-          <h1 className="text-xl font-semibold tracking-tight text-foreground sm:text-2xl">
-            {t("inboxTitle")}
-          </h1>
-          <p className="mt-1 text-sm text-muted-foreground">{t("inboxDescription")}</p>
-        </div>
-        {unreadCount > 0 ? (
-          <span className="shrink-0 rounded-full bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary">
-            {t("inboxUnreadCount").replace("{count}", String(unreadCount))}
-          </span>
-        ) : null}
-      </div>
-    </header>
-  );
-}
-
 function InboxListPane({
   activeDeliveryId,
   deliveries,
@@ -82,69 +63,76 @@ function InboxListPane({
   filter: InboxFilter;
   onFilterChange: (filter: InboxFilter) => void;
 }) {
-  const filterItems: Array<{ id: InboxFilter; label: string }> = [
-    { id: "unread", label: t("inboxUnread") },
-    { id: "all", label: t("inboxAll") },
-    { id: "archived", label: t("inboxArchived") },
+  const filterItems: Array<{ id: InboxFilter; label: string; count: number }> = [
+    {
+      id: "unread",
+      label: t("inboxUnread"),
+      count: filterDeliveries(deliveries, "unread").length,
+    },
+    { id: "all", label: t("inboxAll"), count: filterDeliveries(deliveries, "all").length },
+    {
+      id: "archived",
+      label: t("inboxArchived"),
+      count: filterDeliveries(deliveries, "archived").length,
+    },
   ];
   const filteredDeliveries = filterDeliveries(deliveries, filter);
   return (
-    <aside className="flex min-h-0 flex-col border-border/60 md:border-r">
-      <div className="flex shrink-0 gap-1 border-b border-border/60 p-3">
+    <aside className="flex min-h-0 flex-col border-border/60 bg-muted/20 md:border-r">
+      <div className="flex shrink-0 gap-1 border-b border-border/50 px-3 py-2">
         {filterItems.map((item) => (
           <button
             key={item.id}
             type="button"
             onClick={() => onFilterChange(item.id)}
             className={cn(
-              "rounded-full px-3 py-1.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
+              "inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
               filter === item.id
-                ? "bg-foreground text-background"
-                : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                ? "bg-[var(--interaction-selection)] text-foreground"
+                : "text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-foreground",
             )}
           >
             {item.label}
+            <span aria-hidden="true" className="text-[10px] font-normal tabular-nums opacity-60">
+              {item.count}
+            </span>
           </button>
         ))}
       </div>
       <div className="custom-scrollbar min-h-0 flex-1 overflow-y-auto p-2">
         {filteredDeliveries.length > 0 ? (
-          <ul className="space-y-1">
+          <ul className="space-y-0.5">
             {filteredDeliveries.map((delivery) => (
               <li key={delivery.id}>
                 <Link
                   to={`/inbox/${encodeURIComponent(delivery.id)}`}
                   className={cn(
-                    "block rounded-xl px-3 py-3 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
-                    activeDeliveryId === delivery.id ? "bg-muted" : "hover:bg-muted/70",
+                    "block rounded-lg px-2.5 py-2 text-[13px] transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
+                    activeDeliveryId === delivery.id
+                      ? "bg-[var(--interaction-selection)] text-foreground"
+                      : "text-foreground/80 hover:bg-[var(--interaction-hover)] hover:text-foreground",
                   )}
                 >
-                  <div className="flex items-start gap-2">
-                    <span
-                      className={cn(
-                        "mt-1.5 h-2 w-2 shrink-0 rounded-full",
-                        !delivery.readAt && "bg-primary",
-                      )}
-                      aria-label={!delivery.readAt ? t("inboxUnread") : undefined}
-                      aria-hidden={delivery.readAt ? "true" : undefined}
-                    />
-                    <div className="min-w-0 flex-1">
-                      <h2 className={cn(
-                        "line-clamp-2 text-sm leading-5 text-foreground",
-                        !delivery.readAt && "font-semibold",
-                      )}>
-                        {delivery.title}
-                      </h2>
-                      <p className="mt-1 line-clamp-2 text-xs leading-5 text-muted-foreground">
-                        {delivery.summary ?? t("inboxNoSummary")}
-                      </p>
-                      <time
-                        className="mt-2 block text-[11px] text-muted-foreground/80"
-                        dateTime={delivery.createdAt}
-                      >
-                        {formatDateTime(delivery.createdAt)}
+                  <h2 className={cn(
+                    "truncate font-medium leading-5",
+                    !delivery.readAt && "font-semibold text-foreground",
+                  )}>
+                    {delivery.title}
+                  </h2>
+                  <div className="mt-0.5 flex items-center gap-2 text-[11px] leading-4 text-muted-foreground/65">
+                    <p className="min-w-0 flex-1 truncate">
+                      {delivery.summary ?? t("inboxNoSummary")}
+                    </p>
+                    {!delivery.readAt ? (
+                      <span
+                        className="h-2 w-2 shrink-0 rounded-full bg-primary"
+                        aria-label={t("inboxUnread")}
+                      />
+                    ) : (
+                      <time className="shrink-0 tabular-nums" dateTime={delivery.createdAt}>
+                        {formatDateShort(delivery.createdAt)}
                       </time>
-                    </div>
+                    )}
                   </div>
                 </Link>
               </li>
@@ -183,42 +171,40 @@ function InboxDetailPane({
   const isHtml = delivery.contentType === "html";
   return (
     <main className="flex min-h-0 flex-col">
-      <div className={cn(
-        "shrink-0 border-b border-border/60 px-5 sm:px-8",
-        isHtml ? "py-3 sm:py-4" : "py-4 sm:py-6",
-      )}>
+      <div className="shrink-0 border-b border-border/50 px-5 py-3 sm:px-6">
         {isMobile ? (
           <button
             type="button"
             onClick={onBack}
-            className="mb-4 inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
+            className="mb-3 inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
           >
             <ArrowLeft className="h-4 w-4" />
             {t("inboxTitle")}
           </button>
         ) : null}
-        <div className="text-xs text-muted-foreground">
-          {t("inboxDeliveredBy")} · {formatDateTime(delivery.createdAt)}
+        <div className="flex min-h-7 min-w-0 items-center gap-2">
+          <h2
+            title={delivery.title}
+            className="min-w-0 truncate text-sm font-medium text-foreground"
+          >
+            {delivery.title}
+          </h2>
+          <span className="hidden shrink-0 text-muted-foreground sm:inline" aria-hidden="true">·</span>
+          <time
+            className="hidden shrink-0 text-[11px] tabular-nums text-muted-foreground sm:block"
+            dateTime={delivery.createdAt}
+          >
+            {formatDateTime(delivery.createdAt)}
+          </time>
         </div>
-        <h2 className={cn(
-          "text-balance font-semibold leading-tight tracking-[-0.02em] text-foreground",
-          isHtml ? "mt-2 text-lg sm:text-xl" : "mt-3 text-2xl",
-        )}>
-          {delivery.title}
-        </h2>
-        {delivery.summary && !isHtml ? (
-          <p className="mt-2 max-w-3xl text-sm leading-6 text-muted-foreground">
-            {delivery.summary}
-          </p>
-        ) : null}
       </div>
       <div className={cn(
         "min-h-0 flex-1",
         isHtml
-          ? "p-4 sm:p-5"
-          : "custom-scrollbar overflow-y-auto px-5 py-6 sm:px-8 sm:py-8",
+          ? "p-3 sm:p-4"
+          : "custom-scrollbar overflow-y-auto px-5 py-5 sm:px-6 sm:py-6",
       )}>
-        <div className={cn("mx-auto", isHtml ? "h-full max-w-5xl" : "max-w-3xl")}>
+        <div className={cn("mx-auto max-w-5xl", isHtml && "h-full")}>
           <InboxDeliveryContent
             className={isHtml ? "h-full" : undefined}
             content={delivery.content}
@@ -228,26 +214,28 @@ function InboxDetailPane({
           />
         </div>
       </div>
-      <div className="shrink-0 border-t border-border/60 px-5 py-3 sm:px-8">
+      <div className="shrink-0 border-t border-border/50 px-5 py-3 sm:px-6">
         {error ? <p role="alert" className="mb-2 text-sm text-destructive">{error}</p> : null}
-        <div className="flex flex-wrap items-center gap-2">
-          <Button disabled={pending} onClick={onContinue}>
+        <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+          <div className="flex flex-wrap items-center gap-1">
+            <Button size="sm" variant="outline" disabled={pending} onClick={onReadToggle}>
+              {delivery.readAt ? t("inboxMarkUnread") : t("inboxMarkRead")}
+            </Button>
+            <Button size="sm" variant="ghost" disabled={pending} onClick={onArchiveToggle}>
+              {delivery.archivedAt
+                ? <RotateCcw className="mr-2 h-4 w-4" />
+                : <Archive className="mr-2 h-4 w-4" />}
+              {delivery.archivedAt ? t("inboxRestore") : t("inboxArchive")}
+            </Button>
+            <Button size="sm" variant="ghost" disabled={pending} onClick={onDelete}>
+              <Trash2 className="mr-2 h-4 w-4" />
+              {t("inboxDelete")}
+            </Button>
+          </div>
+          <Button size="sm" disabled={pending} onClick={onContinue}>
             <MessageCircle className="mr-2 h-4 w-4" />
             {t("inboxContinueChat")}
           </Button>
-          <Button variant="outline" disabled={pending} onClick={onReadToggle}>
-            {delivery.readAt ? t("inboxMarkUnread") : t("inboxMarkRead")}
-          </Button>
-          <Button variant="ghost" disabled={pending} onClick={onArchiveToggle}>
-            {delivery.archivedAt
-              ? <RotateCcw className="mr-2 h-4 w-4" />
-              : <Archive className="mr-2 h-4 w-4" />}
-            {delivery.archivedAt ? t("inboxRestore") : t("inboxArchive")}
-          </Button>
-          <Button variant="ghost" disabled={pending} onClick={onDelete}>
-            <Trash2 className="mr-2 h-4 w-4" />
-            {t("inboxDelete")}
-          </Button>
         </div>
       </div>
     </main>
@@ -351,14 +339,18 @@ export function InboxPage() {
   const showDetail = !isMobile || Boolean(activeDelivery);
 
   return (
-    <div className="flex h-full min-h-0 flex-col">
-      <InboxPageHeader unreadCount={deliveriesQuery.data?.unreadCount ?? 0} />
+    <div className="flex h-full min-h-0 flex-col gap-6">
+      <PageHeader
+        headingLevel={1}
+        title={t("inboxTitle")}
+        className="px-4 sm:px-0"
+      />
 
       <div className="min-h-0 flex-1 overflow-hidden border-y border-border/60 bg-background sm:rounded-2xl sm:border">
         {deliveriesQuery.isError ? (
           <div role="alert" className="p-6 text-sm text-destructive">{t("inboxLoadError")}</div>
         ) : (
-          <div className="grid h-full min-h-0 grid-cols-1 md:grid-cols-[320px_minmax(0,1fr)]">
+          <div className="grid h-full min-h-0 grid-cols-1 md:grid-cols-[300px_minmax(0,1fr)]">
             {showList ? <InboxListPane
               activeDeliveryId={activeDelivery?.id ?? null}
               deliveries={deliveries}

package/src/features/marketplace/components/marketplace-page-parts.tsx

@@ -37,7 +37,7 @@ export function FilterPanel({
             value={searchText}
             onChange={(event) => onSearchTextChange(event.target.value)}
             placeholder={searchPlaceholder}
-            className="h-9 w-full rounded-xl border border-border/75 bg-card pl-9 pr-9 text-sm transition-colors focus:outline-none focus:ring-0 focus:border-border"
+            className="h-9 w-full rounded-xl border border-border/75 bg-card pl-9 pr-9 text-sm transition-colors focus:outline-none focus:ring-0"
           />
           {isRefreshing && (
             <Loader2

package/src/features/notifications/components/__tests__/app-notification-toast.test.tsx

@@ -1,22 +1,28 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter, useLocation } from "react-router-dom";
 import { describe, expect, it, vi } from "vitest";
 import { AppNotificationToast } from "@/features/notifications";
 
+function CurrentPathname() {
+  return <span data-testid="current-pathname">{useLocation().pathname}</span>;
+}
+
 describe("AppNotificationToast", () => {
-  it("renders a keyboard-accessible route notification and dismisses it on activation", async () => {
+  it("keeps opening and dismissing a route notification as separate actions", async () => {
     const onDismiss = vi.fn();
     const user = userEvent.setup();
     render(
-      <MemoryRouter>
+      <MemoryRouter initialEntries={["/chat/current"]}>
         <AppNotificationToast
           title="Background task"
           description="The requested summary is ready."
           href="/chat/session-1"
           ariaLabel="Open the background task reply"
+          dismissLabel="Dismiss notification"
           onDismiss={onDismiss}
         />
+        <CurrentPathname />
       </MemoryRouter>,
     );
 
@@ -24,25 +30,44 @@ describe("AppNotificationToast", () => {
       name: "Open the background task reply",
     });
     expect(notification.getAttribute("href")).toBe("/chat/session-1");
+    expect(notification.className).not.toMatch(
+      /(?:hover|active):bg-\S*\/\d+/,
+    );
     expect(screen.getByText("Background task")).toBeTruthy();
     expect(screen.getByText("The requested summary is ready.")).toBeTruthy();
+    expect(notification.querySelector("button")).toBeNull();
 
-    await user.click(notification);
+    const dismiss = screen.getByRole("button", { name: "Dismiss notification" });
+    await user.tab();
+    expect(document.activeElement).toBe(notification);
+    await user.tab();
+    expect(document.activeElement).toBe(dismiss);
+    await user.click(dismiss);
     expect(onDismiss).toHaveBeenCalledOnce();
+    expect(screen.getByTestId("current-pathname").textContent).toBe("/chat/current");
+
+    await user.click(notification);
+    expect(onDismiss).toHaveBeenCalledTimes(2);
+    expect(screen.getByTestId("current-pathname").textContent).toBe("/chat/session-1");
   });
 
-  it("keeps informational notifications non-interactive when no route exists", () => {
+  it("lets users dismiss an informational notification without making its content interactive", async () => {
+    const onDismiss = vi.fn();
+    const user = userEvent.setup();
     render(
       <MemoryRouter>
         <AppNotificationToast
           title="All caught up"
           description="There is nothing else to review."
-          onDismiss={vi.fn()}
+          dismissLabel="Dismiss notification"
+          onDismiss={onDismiss}
         />
       </MemoryRouter>,
     );
 
     expect(screen.getByRole("status")).toBeTruthy();
     expect(screen.queryByRole("link")).toBeNull();
+    await user.click(screen.getByRole("button", { name: "Dismiss notification" }));
+    expect(onDismiss).toHaveBeenCalledOnce();
   });
 });

package/src/features/notifications/components/app-notification-toast.tsx

@@ -1,4 +1,6 @@
+import { X } from "lucide-react";
 import { Link } from "react-router-dom";
+import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
 
 export type AppNotificationToastProps = {
   title: string;
@@ -6,11 +8,15 @@ export type AppNotificationToastProps = {
   href?: string;
   iconSrc?: string;
   ariaLabel?: string;
+  dismissLabel: string;
   onDismiss: () => void;
 };
 
 const NOTIFICATION_CARD_CLASS =
-  "group ml-auto flex min-h-[74px] w-[320px] max-w-[calc(100vw-2rem)] items-center gap-3 rounded-[20px] border border-border/80 bg-background px-[18px] py-3 text-left text-foreground shadow-[0_8px_18px_rgba(0,0,0,0.12),0_2px_5px_rgba(0,0,0,0.06)] transition-colors duration-150 hover:bg-muted/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background active:bg-muted/20 motion-reduce:transition-none";
+  "relative ml-auto flex min-h-[74px] w-[320px] max-w-[calc(100vw-2rem)] rounded-[20px] border border-border/80 bg-background text-left text-foreground shadow-[0_8px_18px_rgba(0,0,0,0.12),0_2px_5px_rgba(0,0,0,0.06)]";
+
+const NOTIFICATION_CONTENT_CLASS =
+  "flex min-h-[72px] min-w-0 flex-1 items-center gap-3 rounded-[inherit] py-3 pl-[18px] pr-[52px]";
 
 function AppNotificationContent({
   title,
@@ -41,39 +47,72 @@ function AppNotificationContent({
   );
 }
 
+function AppNotificationDismissButton({
+  dismissLabel,
+  onDismiss,
+}: Pick<AppNotificationToastProps, "dismissLabel" | "onDismiss">) {
+  return (
+    <IconActionButton
+      className="absolute right-2.5 top-2.5 z-10"
+      icon={<X className="h-4 w-4" aria-hidden="true" />}
+      label={dismissLabel}
+      onClick={onDismiss}
+      size="lg"
+      tooltipSide="left"
+    />
+  );
+}
+
 export function AppNotificationToast({
   title,
   description,
   href,
   iconSrc,
   ariaLabel,
+  dismissLabel,
   onDismiss,
 }: AppNotificationToastProps) {
   const accessibleLabel = ariaLabel ?? [title, description].filter(Boolean).join(": ");
 
   if (href) {
     return (
-      <Link
-        to={href}
+      <div className={NOTIFICATION_CARD_CLASS}>
+        <Link
+          to={href}
+          aria-label={accessibleLabel}
+          className={`${NOTIFICATION_CONTENT_CLASS} focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary/50`}
+          onClick={onDismiss}
+        >
+          <AppNotificationContent
+            title={title}
+            description={description}
+            iconSrc={iconSrc}
+          />
+        </Link>
+        <AppNotificationDismissButton
+          dismissLabel={dismissLabel}
+          onDismiss={onDismiss}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={NOTIFICATION_CARD_CLASS}>
+      <div
+        role="status"
         aria-label={accessibleLabel}
-        className={NOTIFICATION_CARD_CLASS}
-        onClick={onDismiss}
+        className={NOTIFICATION_CONTENT_CLASS}
       >
         <AppNotificationContent
           title={title}
           description={description}
           iconSrc={iconSrc}
         />
-      </Link>
-    );
-  }
-
-  return (
-    <div role="status" aria-label={accessibleLabel} className={NOTIFICATION_CARD_CLASS}>
-      <AppNotificationContent
-        title={title}
-        description={description}
-        iconSrc={iconSrc}
+      </div>
+      <AppNotificationDismissButton
+        dismissLabel={dismissLabel}
+        onDismiss={onDismiss}
       />
     </div>
   );

package/src/features/notifications/managers/__tests__/app-notification.manager.test.ts

@@ -5,6 +5,7 @@ import {
   AppNotificationToast,
   type AppNotificationToastProps,
 } from "@/features/notifications";
+import { t } from "@/shared/lib/i18n";
 
 const mocks = vi.hoisted(() => ({
   custom: vi.fn(),
@@ -54,6 +55,7 @@ describe("AppNotificationManager", () => {
       title: "Research complete",
       description: "The findings are ready.",
       href: "/chat/session-1",
+      dismissLabel: t("notificationDismiss"),
     }));
 
     element.props.onDismiss();