@nextclaw/ui 0.15.20 → 0.15.21

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

@@ -0,0 +1,80 @@
+import { Link } from "react-router-dom";
+
+export type AppNotificationToastProps = {
+  title: string;
+  description?: string;
+  href?: string;
+  iconSrc?: string;
+  ariaLabel?: 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";
+
+function AppNotificationContent({
+  title,
+  description,
+  iconSrc,
+}: Pick<AppNotificationToastProps, "title" | "description" | "iconSrc">) {
+  return (
+    <>
+      <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md border border-border/80 bg-background p-[3px]">
+        <img
+          aria-hidden="true"
+          alt=""
+          src={iconSrc ?? "/logo.svg"}
+          className="h-full w-full object-contain"
+        />
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className="block truncate text-[15px] font-semibold leading-5 tracking-[-0.01em]">
+          {title}
+        </span>
+        {description ? (
+          <span className="mt-0.5 block truncate text-[14px] leading-5 text-muted-foreground">
+            {description}
+          </span>
+        ) : null}
+      </span>
+    </>
+  );
+}
+
+export function AppNotificationToast({
+  title,
+  description,
+  href,
+  iconSrc,
+  ariaLabel,
+  onDismiss,
+}: AppNotificationToastProps) {
+  const accessibleLabel = ariaLabel ?? [title, description].filter(Boolean).join(": ");
+
+  if (href) {
+    return (
+      <Link
+        to={href}
+        aria-label={accessibleLabel}
+        className={NOTIFICATION_CARD_CLASS}
+        onClick={onDismiss}
+      >
+        <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>
+  );
+}

package/src/features/notifications/index.ts

@@ -0,0 +1,8 @@
+export {
+  AppNotificationToast,
+  type AppNotificationToastProps,
+} from "./components/app-notification-toast";
+export {
+  AppNotificationManager,
+  type AppNotification,
+} from "./managers/app-notification.manager";

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

@@ -0,0 +1,75 @@
+import { isValidElement } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  AppNotificationManager,
+  AppNotificationToast,
+  type AppNotificationToastProps,
+} from "@/features/notifications";
+
+const mocks = vi.hoisted(() => ({
+  custom: vi.fn(),
+  dismiss: vi.fn(),
+}));
+
+vi.mock("sonner", () => ({
+  toast: {
+    custom: mocks.custom,
+    dismiss: mocks.dismiss,
+  },
+}));
+
+describe("AppNotificationManager", () => {
+  beforeEach(() => {
+    mocks.custom.mockReset();
+    mocks.dismiss.mockReset();
+    mocks.custom.mockReturnValue("toast-result");
+  });
+
+  it("uses the shared custom notification surface and stable lifecycle defaults", () => {
+    const manager = new AppNotificationManager();
+    const result = manager.show({
+      id: "reply:message-1",
+      title: "Research complete",
+      description: "The findings are ready.",
+      href: "/chat/session-1",
+    });
+
+    expect(result).toBe("toast-result");
+    expect(mocks.custom).toHaveBeenCalledWith(expect.any(Function), {
+      id: "reply:message-1",
+      duration: 8_000,
+      unstyled: true,
+    });
+
+    const renderer = mocks.custom.mock.calls[0]?.[0] as (
+      id: string | number,
+    ) => unknown;
+    const element = renderer("toast-rendered");
+    expect(isValidElement<AppNotificationToastProps>(element)).toBe(true);
+    if (!isValidElement<AppNotificationToastProps>(element)) {
+      throw new Error("Expected AppNotificationToast element");
+    }
+    expect(element.type).toBe(AppNotificationToast);
+    expect(element.props).toEqual(expect.objectContaining({
+      title: "Research complete",
+      description: "The findings are ready.",
+      href: "/chat/session-1",
+    }));
+
+    element.props.onDismiss();
+    expect(mocks.dismiss).toHaveBeenCalledWith("toast-rendered");
+  });
+
+  it("supports a caller-owned duration and explicit dismiss", () => {
+    const manager = new AppNotificationManager();
+    manager.show({ title: "Saved", durationMs: 2_500 });
+    manager.dismiss("saved-toast");
+
+    expect(mocks.custom).toHaveBeenCalledWith(expect.any(Function), {
+      id: undefined,
+      duration: 2_500,
+      unstyled: true,
+    });
+    expect(mocks.dismiss).toHaveBeenCalledWith("saved-toast");
+  });
+});

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

@@ -0,0 +1,41 @@
+import { createElement } from "react";
+import { toast } from "sonner";
+import { AppNotificationToast } from "@/features/notifications/components/app-notification-toast";
+
+export type AppNotification = {
+  id?: string | number;
+  title: string;
+  description?: string;
+  href?: string;
+  iconSrc?: string;
+  ariaLabel?: string;
+  durationMs?: number;
+};
+
+const DEFAULT_NOTIFICATION_DURATION_MS = 8_000;
+
+export class AppNotificationManager {
+  show = (notification: AppNotification): string | number =>
+    toast.custom(
+      (toastId) =>
+        createElement(AppNotificationToast, {
+          title: notification.title,
+          description: notification.description,
+          href: notification.href,
+          iconSrc: notification.iconSrc,
+          ariaLabel: notification.ariaLabel,
+          onDismiss: () => {
+            toast.dismiss(toastId);
+          },
+        }),
+      {
+        id: notification.id,
+        duration: notification.durationMs ?? DEFAULT_NOTIFICATION_DURATION_MS,
+        unstyled: true,
+      },
+    );
+
+  dismiss = (id: string | number): void => {
+    toast.dismiss(id);
+  };
+}

package/src/platforms/mobile/components/mobile-bottom-nav.tsx

@@ -6,6 +6,7 @@ import {
   matchesRouteTarget,
 } from "@/app/configs/app-navigation.config";
 import { openApps } from "@/features/panel-apps";
+import { useInboxUnreadCount } from "@/features/inbox";
 import { useDocBrowser } from "@/shared/components/doc-browser";
 import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
@@ -13,6 +14,7 @@ import { cn } from "@/shared/lib/utils";
 export function MobileBottomNav() {
   const { pathname } = useLocation();
   const docBrowser = useDocBrowser();
+  const unreadCount = useInboxUnreadCount();
 
   return (
     <nav
@@ -23,7 +25,7 @@ export function MobileBottomNav() {
         paddingBottom: "calc(env(safe-area-inset-bottom, 0px) + 0.25rem)",
       }}
     >
-      <ul className="grid grid-cols-5 gap-1 px-2 pt-1">
+      <ul className="grid grid-cols-6 gap-1 px-2 pt-1">
         {getMobileBottomNavItems(t).map((item) => {
           const active = item.target === "/settings"
             ? isSettingsRoute(pathname)
@@ -41,12 +43,17 @@ export function MobileBottomNav() {
                     : "text-gray-500 hover:bg-gray-50 hover:text-gray-800",
                 )}
               >
-                <item.icon
-                  className={cn(
-                    "h-3.5 w-3.5",
-                    active ? "text-gray-900" : "text-gray-400",
-                  )}
-                />
+                <span className="relative">
+                  <item.icon
+                    className={cn(
+                      "h-3.5 w-3.5",
+                      active ? "text-gray-900" : "text-gray-400",
+                    )}
+                  />
+                  {item.target === "/inbox" && unreadCount > 0 ? (
+                    <span className="absolute -right-1 -top-1 h-1.5 w-1.5 rounded-full bg-primary ring-1 ring-white" />
+                  ) : null}
+                </span>
                 <span className="max-w-full truncate">{item.label}</span>
               </Link>
             </li>

package/src/shared/lib/i18n/index.ts

@@ -7,6 +7,7 @@ import zhCron from './locales/zh-CN/cron.json';
 import zhDesktopUpdate from './locales/zh-CN/desktop-update.json';
 import zhDocBrowser from './locales/zh-CN/doc-browser.json';
 import zhMarketplace from './locales/zh-CN/marketplace.json';
+import zhInbox from './locales/zh-CN/inbox.json';
 import zhPathPicker from './locales/zh-CN/path-picker.json';
 import zhPwa from './locales/zh-CN/pwa.json';
 import zhRemote from './locales/zh-CN/remote.json';
@@ -21,6 +22,7 @@ import enCron from './locales/en-US/cron.json';
 import enDesktopUpdate from './locales/en-US/desktop-update.json';
 import enDocBrowser from './locales/en-US/doc-browser.json';
 import enMarketplace from './locales/en-US/marketplace.json';
+import enInbox from './locales/en-US/inbox.json';
 import enPathPicker from './locales/en-US/path-picker.json';
 import enPwa from './locales/en-US/pwa.json';
 import enRemote from './locales/en-US/remote.json';
@@ -54,6 +56,7 @@ const zhCatalog: MessageCatalog = {
   ...zhChat,
   ...zhAgents,
   ...zhMarketplace,
+  ...zhInbox,
   ...zhDocBrowser,
   ...zhPathPicker,
   ...zhPwa,
@@ -71,6 +74,7 @@ const enCatalog: MessageCatalog = {
   ...enChat,
   ...enAgents,
   ...enMarketplace,
+  ...enInbox,
   ...enDocBrowser,
   ...enPathPicker,
   ...enPwa,

package/src/shared/lib/i18n/locales/en-US/chat.json

@@ -419,6 +419,9 @@
   "chatSidebarExpandProject": "Expand project",
   "chatSidebarCollapseProject": "Collapse project",
   "chatSidebarProjectViewEmpty": "No projects yet",
+  "chatBackgroundReplyFallbackTitle": "New reply",
+  "chatBackgroundReplyFallbackPreview": "A reply is ready. Open the session to view it.",
+  "chatBackgroundReplyOpenAriaLabel": "Open the new reply in {title}",
   "chatWelcomeTitle": "Hello, how can I help you?",
   "chatWelcomeSubtitle": "Describe the goal, choose the project context, and let NextClaw take it from there.",
   "chatWelcomeProjectPickerLabel": "Choose working directory",

package/src/shared/lib/i18n/locales/en-US/inbox.json

@@ -0,0 +1,30 @@
+{
+  "inboxTitle": "Inbox",
+  "inboxDescription": "Reports, recommendations, and articles delivered by AI",
+  "inboxUnread": "Unread",
+  "inboxAll": "All",
+  "inboxArchived": "Archived",
+  "inboxEmptyTitle": "Nothing here yet",
+  "inboxEmptyDescription": "Reports, recommendations, and articles from AI will be saved here.",
+  "inboxSelectTitle": "Select something to read",
+  "inboxSelectDescription": "Open an item from the list and its reading state will stay in sync.",
+  "inboxDeliveredBy": "Delivered by AI",
+  "inboxReaderPosition": "{current} of {total}",
+  "inboxPrevious": "Previous",
+  "inboxNext": "Next",
+  "inboxOpenInbox": "Open in Inbox",
+  "inboxReadLater": "Read later",
+  "inboxMarkRead": "Mark as read",
+  "inboxMarkUnread": "Mark as unread",
+  "inboxArchive": "Archive",
+  "inboxRestore": "Restore",
+  "inboxDelete": "Delete",
+  "inboxContinueChat": "Continue in chat",
+  "inboxDeleteTitle": "Delete this item?",
+  "inboxDeleteDescription": "It cannot be recovered from Inbox. Any chat already created will remain.",
+  "inboxDeleteConfirm": "Delete",
+  "inboxLoadError": "Inbox could not be loaded. Try again shortly.",
+  "inboxActionError": "The action failed. Please try again.",
+  "inboxUnreadCount": "{count} unread",
+  "inboxNoSummary": "No summary"
+}

package/src/shared/lib/i18n/locales/zh-CN/chat.json

@@ -419,6 +419,9 @@
   "chatSidebarExpandProject": "展开项目",
   "chatSidebarCollapseProject": "收起项目",
   "chatSidebarProjectViewEmpty": "还没有项目",
+  "chatBackgroundReplyFallbackTitle": "有新回复",
+  "chatBackgroundReplyFallbackPreview": "回复已完成，点击查看。",
+  "chatBackgroundReplyOpenAriaLabel": "打开“{title}”的新回复",
   "chatWelcomeTitle": "你好，有什么可以帮你的吗？",
   "chatWelcomeSubtitle": "描述目标，选择项目上下文，让 NextClaw 接住这次任务。",
   "chatWelcomeProjectPickerLabel": "选择工作目录",

package/src/shared/lib/i18n/locales/zh-CN/inbox.json

@@ -0,0 +1,30 @@
+{
+  "inboxTitle": "收件箱",
+  "inboxDescription": "AI 主动送达的报告、推荐和文章",
+  "inboxUnread": "未读",
+  "inboxAll": "全部",
+  "inboxArchived": "已归档",
+  "inboxEmptyTitle": "这里还没有内容",
+  "inboxEmptyDescription": "AI 送达的报告、推荐和文章会保存在这里。",
+  "inboxSelectTitle": "选择一项开始阅读",
+  "inboxSelectDescription": "打开左侧列表中的内容，阅读状态会在这里同步。",
+  "inboxDeliveredBy": "由 AI 送达",
+  "inboxReaderPosition": "第 {current} 项，共 {total} 项",
+  "inboxPrevious": "上一项",
+  "inboxNext": "下一项",
+  "inboxOpenInbox": "在收件箱中打开",
+  "inboxReadLater": "稍后阅读",
+  "inboxMarkRead": "标记已读",
+  "inboxMarkUnread": "标记未读",
+  "inboxArchive": "归档",
+  "inboxRestore": "恢复",
+  "inboxDelete": "删除",
+  "inboxContinueChat": "继续聊",
+  "inboxDeleteTitle": "删除这项内容？",
+  "inboxDeleteDescription": "删除后将无法从收件箱恢复，但已经创建的会话不会被删除。",
+  "inboxDeleteConfirm": "删除",
+  "inboxLoadError": "无法加载收件箱，请稍后重试。",
+  "inboxActionError": "操作失败，请重试。",
+  "inboxUnreadCount": "{count} 项未读",
+  "inboxNoSummary": "没有摘要"
+}