@nextclaw/ui 0.26.4 → 0.26.5

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

@@ -2,7 +2,7 @@ import { PageResourceActionsMenu } from '@/features/right-panel-resources';
 import { pageResourceFromSystemObject } from '@/features/right-panel-resources';
 import { useEffect, useMemo, useState } from "react";
 import type { InboxDelivery } from "@nextclaw/shared";
-import { Archive, Inbox, MessageCircle, MoreVertical, RotateCcw, Trash2 } from "lucide-react";
+import { Archive, ArrowLeft, Inbox, MessageCircle, MoreVertical, RotateCcw, Trash2 } from "lucide-react";
 import { ContextMenu, ContextMenuTrigger } from '@/shared/components/ui/context-menu/context-menu';
 import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
 import { Link, useNavigate, useParams } from "react-router-dom";
@@ -167,6 +167,7 @@ function InboxListPane({
 
 function InboxDetailPane({
   delivery,
+  isMobile,
   error,
   pending,
   onArchiveToggle,
@@ -175,6 +176,7 @@ function InboxDetailPane({
   onReadToggle,
 }: {
   delivery: InboxDelivery | null;
+  isMobile: boolean;
   error: string | null;
   pending: boolean;
   onArchiveToggle: () => void;
@@ -182,38 +184,52 @@ function InboxDetailPane({
   onDelete: () => void;
   onReadToggle: () => void;
 }) {
+  const navigate = useNavigate();
+  const backButton = <IconActionButton size="sm" icon={<ArrowLeft className="h-4 w-4" />} label={t("inboxTitle")} onClick={() => navigate('/inbox')} />;
   const scrollRestoration = useScrollRestoration<HTMLDivElement>({
     restorationKey: delivery ? `inbox:delivery:${delivery.id}` : null,
   });
   const { onScroll, scrollRef } = scrollRestoration;
   if (!delivery) {
-    return <main className="flex min-h-0 flex-col"><InboxEmptyState selection /></main>;
+    return <main className="flex min-h-0 flex-col"><div className="md:hidden">{backButton}</div><InboxEmptyState selection /></main>;
   }
   const isHtml = delivery.contentType === "html";
   return (
-    <main className="flex min-h-0 flex-col">
-      <div className="shrink-0 px-4 py-2 md:border-b md:border-border/50 md:px-6 md:py-3">
-        <div className="flex min-h-7 min-w-0 items-center gap-2">
+    <main className="flex min-h-0 min-w-0 flex-col max-md:pt-[env(safe-area-inset-top,0px)] max-md:pb-[env(safe-area-inset-bottom,0px)]">
+      <div className="shrink-0 border-b border-border/50 px-2 py-2 md:px-6 md:py-3">
+        <div className="flex min-h-7 min-w-0 items-center gap-1">
+          <div className="md:hidden">{backButton}</div>
           <h2
             title={delivery.title}
-            className="min-w-0 truncate text-sm font-medium text-foreground"
+            className="min-w-0 flex-1 truncate text-sm font-medium text-foreground md:flex-none"
           >
             {delivery.title}
           </h2>
-          <span className="hidden shrink-0 text-muted-foreground sm:inline" aria-hidden="true">·</span>
+          <span className="hidden shrink-0 text-muted-foreground md:inline" aria-hidden="true">·</span>
           <time
-            className="hidden shrink-0 text-[11px] tabular-nums text-muted-foreground sm:block"
+            className="hidden shrink-0 text-[11px] tabular-nums text-muted-foreground md:block"
             dateTime={delivery.createdAt}
           >
             {formatDateTime(delivery.createdAt)}
           </time>
+          {isMobile ? <div className="flex shrink-0 items-center">
+            <IconActionButton size="sm" icon={<MessageCircle className="h-4 w-4" />} label={t('inboxContinueChat')} disabled={pending} onClick={onContinue} />
+            <ContextMenu label={t('inboxTitle')} groups={[{ key: 'delivery', items: [
+              { key: 'read', label: delivery.readAt ? t('inboxMarkUnread') : t('inboxMarkRead'), disabled: pending, onSelect: onReadToggle },
+              { key: 'archive', label: delivery.archivedAt ? t('inboxRestore') : t('inboxArchive'), icon: <Archive className="h-4 w-4" />, disabled: pending, onSelect: onArchiveToggle },
+              { key: 'delete', label: t('inboxDelete'), icon: <Trash2 className="h-4 w-4" />, destructive: true, disabled: pending, onSelect: onDelete },
+            ] }]}>
+              <div><ContextMenuTrigger><IconActionButton size="sm" icon={<MoreVertical className="h-4 w-4" />} label={t('more')} /></ContextMenuTrigger></div>
+            </ContextMenu>
+          </div> : null}
         </div>
       </div>
+      {error ? <p role="alert" className="shrink-0 px-4 py-2 text-sm text-destructive">{error}</p> : null}
       <div className={cn(
         "min-h-0 flex-1",
         isHtml
           ? "p-0 md:p-4"
-          : "custom-scrollbar overflow-y-auto px-5 py-5 sm:px-6 sm:py-6",
+          : "custom-scrollbar overflow-y-auto overscroll-contain px-4 py-4 sm:px-6 sm:py-6",
       )}
       ref={scrollRef}
       onScroll={onScroll}
@@ -228,8 +244,7 @@ function InboxDetailPane({
           />
         </div>
       </div>
-      <div className="shrink-0 border-t border-border/50 px-4 py-2 md:px-6 md:py-3">
-        {error ? <p role="alert" className="mb-2 text-sm text-destructive">{error}</p> : null}
+      {!isMobile ? <div className="shrink-0 border-t border-border/50 px-6 py-3">
         <div className="flex items-center justify-between gap-2">
           <div className="hidden md:flex flex-wrap items-center gap-1">
             <Button size="sm" variant="outline" disabled={pending} onClick={onReadToggle}>
@@ -246,21 +261,12 @@ function InboxDetailPane({
               {t("inboxDelete")}
             </Button>
           </div>
-          <div className="md:hidden">
-            <ContextMenu label={t('inboxTitle')} groups={[{ key: 'delivery', items: [
-              { key: 'read', label: delivery.readAt ? t('inboxMarkUnread') : t('inboxMarkRead'), disabled: pending, onSelect: onReadToggle },
-              { key: 'archive', label: delivery.archivedAt ? t('inboxRestore') : t('inboxArchive'), icon: <Archive className="h-4 w-4" />, disabled: pending, onSelect: onArchiveToggle },
-              { key: 'delete', label: t('inboxDelete'), icon: <Trash2 className="h-4 w-4" />, destructive: true, disabled: pending, onSelect: onDelete },
-            ] }]}>
-              <div><ContextMenuTrigger><IconActionButton icon={<MoreVertical className="h-4 w-4" />} label={t('more')} /></ContextMenuTrigger></div>
-            </ContextMenu>
-          </div>
           <Button size="sm" disabled={pending} onClick={onContinue}>
             <MessageCircle className="mr-2 h-4 w-4" />
             {t("inboxContinueChat")}
           </Button>
         </div>
-      </div>
+      </div> : null}
     </main>
   );
 }
@@ -359,8 +365,8 @@ export function InboxPage() {
     });
   };
 
-  const showList = !isMobile || !activeDelivery;
-  const showDetail = !isMobile || Boolean(activeDelivery);
+  const showList = !isMobile || !deliveryId;
+  const showDetail = !isMobile || Boolean(deliveryId);
 
   return (
     <div className="flex h-full min-h-0 flex-col md:gap-6">
@@ -372,7 +378,7 @@ export function InboxPage() {
 
       <div className="min-h-0 flex-1 overflow-hidden bg-background md:rounded-2xl md:border md:border-border/60">
         {deliveriesQuery.isError ? (
-          <div role="alert" className="p-6 text-sm text-destructive">{t("inboxLoadError")}</div>
+          <div className="p-4">{isMobile && deliveryId ? <IconActionButton icon={<ArrowLeft className="h-4 w-4" />} label={t("inboxTitle")} onClick={() => navigate('/inbox')} /> : null}<p role="alert" className="text-sm text-destructive">{t("inboxLoadError")}</p></div>
         ) : (
           <div className="grid h-full min-h-0 grid-cols-1 md:grid-cols-[300px_minmax(0,1fr)]">
             {showList ? <InboxListPane
@@ -383,6 +389,7 @@ export function InboxPage() {
             /> : null}
             {showDetail ? <InboxDetailPane
               delivery={activeDelivery}
+              isMobile={isMobile}
               error={error}
               pending={pendingAction !== null}
               onArchiveToggle={toggleArchive}

package/src/features/projects/pages/project-home-page.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { useProjects } from "@/shared/hooks/use-projects";
 import { useViewportLayout } from "@/app/hooks/use-viewport-layout";
 import { t } from "@/shared/lib/i18n";
@@ -43,6 +43,7 @@ export function ProjectsPage() {
     tab?: string;
   }>();
   const navigate = useNavigate();
+  const { state } = useLocation();
   const presenter = usePresenter();
   const { isMobile } = useViewportLayout();
   const projects = useProjects();
@@ -86,7 +87,7 @@ export function ProjectsPage() {
         <select
           id="project-home-selection"
           value=""
-          onChange={(event) => navigate(`/projects/${encodeURIComponent(event.target.value)}/overview`)}
+          onChange={(event) => navigate(`/projects/${encodeURIComponent(event.target.value)}/overview`, { state })}
           className="min-h-11 w-full rounded-xl border border-border bg-card px-3 text-base text-foreground"
         >
           <option value="" disabled>{t("projectsChoose")}</option>
@@ -117,6 +118,7 @@ export function ProjectsPage() {
             onValueChange={(value) =>
               navigate(
                 `/projects/${encodeURIComponent(selectedProject.id)}/${value}`,
+                { state },
               )
             }
           >

package/src/platforms/mobile/components/__tests__/mobile-app-shell.test.tsx

@@ -31,6 +31,15 @@ function renderShell(pathname: string) {
 }
 
 describe("MobileAppShell", () => {
+  it("lets inbox details own their reading chrome and restores navigation on the list", () => {
+    const detail = renderShell("/inbox/report-1");
+    expect(screen.queryByTestId("mobile-bottom-nav")).toBeNull();
+    expect(screen.queryByTestId("mobile-topbar")).toBeNull();
+    detail.unmount();
+    renderShell("/inbox");
+    expect(screen.getByTestId("mobile-bottom-nav")).toBeTruthy();
+    expect(screen.getByTestId("mobile-topbar")).toBeTruthy();
+  });
   it("shows the bottom navigation on the chat list route", () => {
     const { shell } = renderShell("/chat");
 

package/src/platforms/mobile/components/mobile-app-shell.tsx

@@ -1,6 +1,7 @@
 import { lazy, Suspense } from "react";
 import {
   isChatSessionDetailRoute,
+  isInboxDetailRoute,
   isMainWorkspaceRoute,
 } from "@/app/configs/app-navigation.config";
 import { MobileBottomNav } from "@/platforms/mobile/components/mobile-bottom-nav";
@@ -32,8 +33,9 @@ export function MobileAppShell({
   children,
 }: MobileAppShellProps) {
   const isMainRoute = isMainWorkspaceRoute(pathname);
-  const showTopbar = pathname !== '/chat' && !isChatSessionDetailRoute(pathname);
-  const showBottomNav = !isChatSessionDetailRoute(pathname);
+  const ownsDetailChrome = isChatSessionDetailRoute(pathname) || isInboxDetailRoute(pathname);
+  const showTopbar = pathname !== '/chat' && !ownsDetailChrome;
+  const showBottomNav = !ownsDetailChrome;
 
   return (
     <div className="flex h-[100svh] flex-col bg-background font-sans text-foreground supports-[height:100dvh]:h-[100dvh]">

package/src/platforms/mobile/components/mobile-topbar.tsx

@@ -6,8 +6,8 @@ import { IconActionButton } from "@/shared/components/ui/actions/icon-action-but
 
 export function MobileTopbar({ leadingInset }: { leadingInset?: string }) {
   const navigate = useNavigate();
-  const { pathname } = useLocation();
-  const routeMeta = resolveMobileRouteMeta(pathname, t);
+  const { pathname, state } = useLocation();
+  const routeMeta = resolveMobileRouteMeta(pathname, t, typeof state?.returnTo === 'string' ? state.returnTo : undefined);
 
   return (
     <header

package/src/shared/components/ui/tab-strip/compact-tab-strip.tsx

@@ -233,12 +233,12 @@ function CompactTabItem({
       onClick={(event) => event.target === event.currentTarget && tab.onSelect()}
       className={cn(
         tabBaseClassName ??
-          "flex max-w-[180px] cursor-pointer items-center gap-1.5 border-r border-gray-200/70 border-b-2 px-2.5 py-2 transition-colors",
+          "flex h-8 max-w-[180px] cursor-pointer items-center gap-1.5 border-r border-border/50 px-2.5 transition-colors",
         "group relative",
         tab.active
-          ? (activeTabClassName ?? "border-b-primary bg-[var(--interaction-selection)] text-foreground")
+          ? (activeTabClassName ?? "bg-background text-foreground")
           : (inactiveTabClassName ??
-            "border-b-transparent bg-transparent text-muted-foreground hover:bg-[var(--interaction-hover)]"),
+            "bg-transparent text-muted-foreground hover:bg-[var(--interaction-hover)]"),
       )}
     >
       <CompactTabLabelButton tab={tab} labelClassName={labelClassName} />

package/src/shared/components/workbench/workbench-surface.tsx

@@ -265,7 +265,7 @@ export function WorkbenchSurface({
       }}
     >
       <header
-        className="flex min-h-10 shrink-0 select-none items-center gap-1 border-b border-border/60 bg-muted/30 px-2"
+        className={cn("flex shrink-0 select-none items-center gap-1 border-b border-border/60 bg-muted/30 pr-2", navigation && !state.minimized ? "min-h-8 pl-0" : "min-h-10 pl-2")}
         style={{ touchAction: floating ? "none" : undefined, paddingTop: isCompact ? "env(safe-area-inset-top, 0px)" : undefined }}
         onPointerDown={(event) => startInteraction(event)}
         onDoubleClick={(event) => {

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

@@ -282,8 +282,6 @@
   "chatHistoryLoadFailed": "Couldn’t load earlier messages",
   "chatHistoryRetry": "Retry",
   "chatProcessSummaryProcessed": "Processed",
-  "chatProcessSummaryError": "Failed",
-  "chatProcessSummaryStopped": "Stopped",
   "chatProcessDurationHoursMinutes": "{hours}h {minutes}m",
   "chatProcessDurationHours": "{hours}h",
   "chatProcessDurationMinutesSeconds": "{minutes}m {seconds}s",
@@ -610,6 +608,7 @@
   "chatMessageCopy": "Copy",
   "chatMessageCopied": "Copied",
   "chatMermaidDiagram": "Diagram",
+  "chatMarkdownFrontmatter": "Document properties",
   "chatMermaidExpand": "Expand diagram",
   "chatMermaidLoading": "Rendering diagram…",
   "chatMermaidRenderError": "Diagram could not be rendered; showing source instead",

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

@@ -282,8 +282,6 @@
   "chatHistoryLoadFailed": "较早消息加载失败",
   "chatHistoryRetry": "重试",
   "chatProcessSummaryProcessed": "已处理",
-  "chatProcessSummaryError": "处理失败",
-  "chatProcessSummaryStopped": "已停止",
   "chatProcessDurationHoursMinutes": "{hours}小时{minutes}分钟",
   "chatProcessDurationHours": "{hours}小时",
   "chatProcessDurationMinutesSeconds": "{minutes}分钟{seconds}秒",
@@ -610,6 +608,7 @@
   "chatMessageCopy": "复制",
   "chatMessageCopied": "已复制",
   "chatMermaidDiagram": "图表",
+  "chatMarkdownFrontmatter": "文档属性",
   "chatMermaidExpand": "放大图表",
   "chatMermaidLoading": "正在渲染图表…",
   "chatMermaidRenderError": "图表无法渲染，已显示源代码",