@allbluecn/web-app 0.12.0 → 0.12.2

package/src/components/story/inline-editors/dependency-type-select.tsx

@@ -127,25 +127,29 @@ export function DependencyTypeSelect({
     return (
       <Popover open={open} onOpenChange={handleOpenChange}>
         <Tooltip>
-          <TooltipTrigger asChild>
-            <PopoverTrigger asChild>
-              {/* 行打开按钮是 button，此处必须用 span 复刻 Button 样式（button 嵌 button 会 hydration 报错） */}
-              <span
-                className={cn(
-                  buttonVariants({ variant: "outline", size: "sm" }),
-                  "h-7 max-w-56 gap-1 rounded-md px-2 text-xs font-normal",
-                  className,
-                )}
-                onClick={(e) => e.stopPropagation()}
-              >
-                {current && <OptionIcon option={current} />}
-                <span className="truncate">
-                  {current
-                    ? current.badgeLabel({ identifier: identifier ?? "" })
-                    : m.story_dependency_typePlaceholder()}
-                </span>
-              </span>
-            </PopoverTrigger>
+          <TooltipTrigger
+            render={
+              <PopoverTrigger
+                render={
+                  /* 行打开按钮是 button，此处必须用 span 复刻 Button 样式（button 嵌 button 会 hydration 报错） */
+                  <span
+                    className={cn(
+                      buttonVariants({ variant: "outline", size: "sm" }),
+                      "h-7 max-w-56 gap-1 rounded-md px-2 text-xs font-normal",
+                      className,
+                    )}
+                    onClick={(e) => e.stopPropagation()}
+                  />
+                }
+              />
+            }
+          >
+            {current && <OptionIcon option={current} />}
+            <span className="truncate">
+              {current
+                ? current.badgeLabel({ identifier: identifier ?? "" })
+                : m.story_dependency_typePlaceholder()}
+            </span>
           </TooltipTrigger>
           {tooltipLabelFn && (
             <TooltipContent side="top" className="text-xs">
@@ -163,20 +167,16 @@ export function DependencyTypeSelect({
 
   return (
     <Popover open={open} onOpenChange={handleOpenChange}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="ghost"
+      <PopoverTrigger render={<Button variant="ghost"
           size="sm"
-          className={cn("h-9 gap-1.5", !value && "text-muted-foreground", className)}
-        >
+          className={cn("h-9 gap-1.5", !value && "text-muted-foreground", className)} />}>
           {current ? (
             <OptionIcon option={current} className="text-current" />
           ) : (
             <Waypoints className="size-3.5" />
           )}
           {current ? current.optionLabel() : m.story_dependency_typePlaceholder()}
-        </Button>
-      </PopoverTrigger>
+        </PopoverTrigger>
       {content}
     </Popover>
   );

package/src/components/story/inline-editors/inline-trigger.tsx

@@ -34,22 +34,16 @@ interface InlineTriggerProps {
 export function InlineTrigger({ title, value, hasValue, icon, label, className }: InlineTriggerProps) {
   return (
     <Tooltip>
-      <TooltipTrigger asChild>
-        <PopoverTrigger asChild>
-          <Button
-            variant="outline"
+      <TooltipTrigger render={<PopoverTrigger render={<Button variant="outline"
             size="sm"
             className={cn(
               "h-7 gap-1 rounded-md text-xs font-normal",
               hasValue ? "px-2" : "size-7 shrink-0 justify-center px-0",
               className,
-            )}
-          >
+            )} />} />}>
             {icon}
             {hasValue && label}
-          </Button>
-        </PopoverTrigger>
-      </TooltipTrigger>
+          </TooltipTrigger>
       <TooltipContent side="top" sideOffset={6} className="flex flex-col items-start gap-0.5 text-xs">
         <span className="opacity-80">{title}</span>
         <span className="font-medium">{hasValue ? value : m.story_inline_notSelected()}</span>

package/src/components/story/inline-editors/labels-editor.tsx

@@ -21,7 +21,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 import { Checkbox } from "@/components/ui/checkbox";
 import { cn } from "@/lib/utils";
 import { useSession } from "@/lib/auth/auth-client";
-import { toast } from "sonner";
+import { toast } from "@/components/ui/toast";
 import { createLabelFn, suggestStoryLabelsFn } from "@/server/serverFns/story";
 import { InlineTrigger } from "./inline-trigger";
 import { m } from "@/paraglide/messages.js";
@@ -126,8 +126,7 @@ export function LabelsEditor({ labelIds, labels, onChange, mode = "multi", class
   return (
     <Popover open={open} onOpenChange={setOpen}>
       {showChip && labelIds.length > 0 ? (
-        <PopoverTrigger asChild>
-          <div className="flex items-center gap-1">
+        <PopoverTrigger render={<div className="flex items-center gap-1" />}>
             {labelIds.map((id) => {
               const l = labels.find((lb) => lb.id === id);
               return l ? (
@@ -137,8 +136,7 @@ export function LabelsEditor({ labelIds, labels, onChange, mode = "multi", class
                 </span>
               ) : null;
             })}
-          </div>
-        </PopoverTrigger>
+          </PopoverTrigger>
       ) : (
         <InlineTrigger
           title={m.story_inline_labels()}
@@ -149,7 +147,7 @@ export function LabelsEditor({ labelIds, labels, onChange, mode = "multi", class
           className={className}
         />
       )}
-      <PopoverContent className="w-52 p-1" align="start" onCloseAutoFocus={(e) => e.preventDefault()}>
+      <PopoverContent className="w-52 p-1" align="start" finalFocus={false}>
         {labels.length === 0 ? (
           <div className="px-2 py-1.5 text-xs text-muted-foreground">{m.story_inline_noLabels()}</div>
         ) : (

package/src/components/story/inline-editors/priority-editor.tsx

@@ -51,25 +51,21 @@ export function PriorityEditor({ value, onChange, mode = "single", selected, onM
   return (
     <Popover open={open} onOpenChange={setOpen}>
       {showChip && isMulti && selected && selected.length > 0 ? (
-        <PopoverTrigger asChild>
-          <div className="flex items-center gap-1">
+        <PopoverTrigger render={<div className="flex items-center gap-1" />}>
             {selected.map((s) => (
               <span key={s} className="inline-flex items-center gap-1 rounded-sm border border-border px-1.5 py-0.5">
                 <PriorityIcon priority={s as StoryPriority} />
                 <span className="text-xs">{PRIORITY_LABEL[s as StoryPriority]?.() ?? s}</span>
               </span>
             ))}
-          </div>
-        </PopoverTrigger>
+          </PopoverTrigger>
       ) : showChip && !isMulti ? (
-        <PopoverTrigger asChild>
-          <div className="flex items-center gap-1">
+        <PopoverTrigger render={<div className="flex items-center gap-1" />}>
             <span className="inline-flex items-center gap-1 rounded-sm border border-border px-1.5 py-0.5">
               <PriorityIcon priority={value} />
               <span className="text-xs">{triggerText}</span>
             </span>
-          </div>
-        </PopoverTrigger>
+          </PopoverTrigger>
       ) : (
         <InlineTrigger
           title={m.story_column_priority()}

package/src/components/story/inline-editors/state-editor.tsx

@@ -49,8 +49,7 @@ export function StateEditor({ value, onChange, mode = "single", selected, onMult
   return (
     <Popover open={open} onOpenChange={setOpen}>
       {showChip && isMulti && selected && selected.length > 0 ? (
-        <PopoverTrigger asChild>
-          <div className="flex items-center gap-1">
+        <PopoverTrigger render={<div className="flex items-center gap-1" />}>
             {selected.map((s) => {
               const st = STORY_STATES.find((st) => st.value === s);
               const SI = st ? STATE_ICON[st.value] : null;
@@ -62,17 +61,14 @@ export function StateEditor({ value, onChange, mode = "single", selected, onMult
                 </span>
               );
             })}
-          </div>
-        </PopoverTrigger>
+          </PopoverTrigger>
       ) : showChip && !isMulti && value ? (
-        <PopoverTrigger asChild>
-          <div className="flex items-center gap-1">
+        <PopoverTrigger render={<div className="flex items-center gap-1" />}>
             <span className="inline-flex items-center gap-1 rounded-sm border border-border px-1.5 py-0.5">
               {Icon && <Icon className={cn("size-3", STATE_COLOR[value as StoryState].split(" ").find((c) => c.startsWith("text")))} />}
               <span className="text-xs">{triggerText}</span>
             </span>
-          </div>
-        </PopoverTrigger>
+          </PopoverTrigger>
       ) : (
         <InlineTrigger
           title={m.story_column_state()}

package/src/components/story/inline-editors/story-select-dialog.tsx

@@ -36,7 +36,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { toast } from "sonner";
+import { toast } from "@/components/ui/toast";
 import type { ActivityItem } from "../types";
 import {
   listProjectStoriesFn,
@@ -365,24 +365,20 @@ export function StorySelectDialog({
           <div className="px-3">
             <div className="flex items-center gap-2">
               <Popover open={statePopoverOpen} onOpenChange={setStatePopoverOpen}>
-                <PopoverTrigger asChild>
-                  <Button
-                    variant="outline"
+                <PopoverTrigger render={<Button variant="outline"
                     size="sm"
                     className={cn(
                       "h-9 gap-1.5 shrink-0",
                       selectedStates.size < ALL_STATES.length
                         && "border-primary/40 text-primary"
-                    )}
-                  >
+                    )} />}>
                     <ListFilter className="size-3.5" />
                     {m.story_select_state()}
                     <Badge variant="secondary" className="rounded-sm px-1 min-w-4 h-4 text-[10px]">
                       {selectedStates.size}
                     </Badge>
                     <ChevronsUpDown className="size-3 text-muted-foreground" />
-                  </Button>
-                </PopoverTrigger>
+                  </PopoverTrigger>
                 <PopoverContent className="w-44 p-1" align="start">
                   {STORY_STATES.map((s) => {
                     const checked = selectedStates.has(s.value);
@@ -414,24 +410,20 @@ export function StorySelectDialog({
               </Popover>
 
               <Popover open={priorityPopoverOpen} onOpenChange={setPriorityPopoverOpen}>
-                <PopoverTrigger asChild>
-                  <Button
-                    variant="outline"
+                <PopoverTrigger render={<Button variant="outline"
                     size="sm"
                     className={cn(
                       "h-9 gap-1.5 shrink-0",
                       selectedPriorities.size < ALL_PRIORITIES.length
                         && "border-primary/40 text-primary"
-                    )}
-                  >
+                    )} />}>
                     <Flag className="size-3.5" />
                     {m.story_select_priority()}
                     <Badge variant="secondary" className="rounded-sm px-1 min-w-4 h-4 text-[10px]">
                       {selectedPriorities.size}
                     </Badge>
                     <ChevronsUpDown className="size-3 text-muted-foreground" />
-                  </Button>
-                </PopoverTrigger>
+                  </PopoverTrigger>
                 <PopoverContent className="w-44 p-1" align="start">
                   {STORY_PRIORITIES.map((p) => {
                     const checked = selectedPriorities.has(p.value);
@@ -472,12 +464,9 @@ export function StorySelectDialog({
               </div>
               {projects && projects.length > 0 && (
                 <Popover open={projectPopoverOpen} onOpenChange={setProjectPopoverOpen}>
-                  <PopoverTrigger asChild>
-                    <Button
-                      variant="outline"
+                  <PopoverTrigger render={<Button variant="outline"
                       size="sm"
-                      className="h-9 gap-1.5 shrink-0"
-                    >
+                      className="h-9 gap-1.5 shrink-0" />}>
                       {activeFilterProject ? (
                         <span className="flex items-center gap-1.5">
                           <LucideIconByName name={activeFilterProject.icon} size={14} />
@@ -490,8 +479,7 @@ export function StorySelectDialog({
                         </span>
                       )}
                       <ChevronsUpDown className="size-3 text-muted-foreground" />
-                    </Button>
-                  </PopoverTrigger>
+                    </PopoverTrigger>
                   <PopoverContent className="w-56 p-1" align="end">
                     {!hideAllProjects && (
                       <button
@@ -669,7 +657,8 @@ export function StorySelectDialog({
                 }}
               >
                 <Checkbox
-                  checked={allChecked}
+                  checked={allChecked === true}
+                  indeterminate={allChecked === "indeterminate"}
                   onClick={(e) => e.stopPropagation()}
                   onCheckedChange={handleSelectAll}
                   aria-label={m.story_ai_selectAll()}

package/src/components/story/peek-panel.tsx

@@ -367,7 +367,7 @@ export function StoryPeekPanel({
         <DialogContent
           showCloseButton={false}
           className={`flex flex-col overflow-hidden shadow-2xl transition-all duration-300 p-0 gap-0 translate-x-0 translate-y-0 data-open:zoom-in-0 data-closed:zoom-out-0 ${OVERLAY_CLASS[mode]} ${CONTENT_CLASS[mode]}`}
-          onOpenAutoFocus={(e) => e.preventDefault()}
+          initialFocus={false}
         >
           {header}
           {body}

package/src/components/story/relations/__tests__/attachment-manage-dialog.test.tsx

@@ -29,7 +29,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, screen, fireEvent, waitFor, type RenderResult } from "@testing-library/react";
 import { TooltipProvider } from "@/components/ui/tooltip";
 
-vi.mock("sonner", () => ({
+vi.mock("@/components/ui/toast", () => ({
   toast: { success: vi.fn(), error: vi.fn(), warning: vi.fn(), info: vi.fn() },
 }));
 
@@ -140,7 +140,7 @@ describe("AttachmentManageDialog", () => {
   });
 
   it("上传接口报错时 toast 提示且不回调 onUpdate", async () => {
-    const { toast } = await import("sonner");
+    const { toast } = await import("@/components/ui/toast");
     fns.uploadFetch.mockResolvedValue({ ok: false, json: () => Promise.resolve({ error: "文件大小需在 10MB 以内" }) });
     const { onUpdate } = setup();
     const file = new File(["hello"], "新文件.txt", { type: "text/plain" });
@@ -151,7 +151,7 @@ describe("AttachmentManageDialog", () => {
   });
 
   it("超过 10MB 的文件被拒绝且不入暂存列表", async () => {
-    const { toast } = await import("sonner");
+    const { toast } = await import("@/components/ui/toast");
     setup();
     const big = new File([new ArrayBuffer(11 * 1024 * 1024)], "大文件.zip", { type: "application/zip" });
     stageFile(big);

package/src/components/story/relations/__tests__/knowledge-select-dialog.test.tsx

@@ -36,7 +36,7 @@ vi.mock("@/server/serverFns/story", () => ({
   unlinkDocFn: fns.unlink,
 }));
 
-vi.mock("sonner", () => ({
+vi.mock("@/components/ui/toast", () => ({
   toast: { success: vi.fn(), error: vi.fn(), warning: vi.fn() },
 }));
 
@@ -97,11 +97,9 @@ describe("KnowledgeSelectDialog", () => {
     const { onUpdate } = setup();
     await waitFor(() => screen.getByText("普通页"));
     // 勾选 d3（新增）
-    const checkboxes = screen.getAllByRole("checkbox");
-    // d3 是第三个（已关联页、子页、普通页）
-    fireEvent.click(checkboxes[2]);
+    fireEvent.click(screen.getByText("普通页"));
     // 取消 d1
-    fireEvent.click(checkboxes[0]);
+    fireEvent.click(screen.getByText("已关联页"));
     fireEvent.click(screen.getByRole("button", { name: "确认" }));
     await waitFor(() => expect(fns.link).toHaveBeenCalledWith({
       data: { storyId: "s1", docIds: expect.arrayContaining(["d3"]) },
@@ -114,11 +112,10 @@ describe("KnowledgeSelectDialog", () => {
 
   it("linkDocsFn 返回 failed 时 toast warning 且不关弹窗", async () => {
     fns.link.mockResolvedValue({ linked: [], skipped: [], failed: [{ docId: "d9", reason: "outOfScope" }] });
-    const { toast } = await import("sonner");
+    const { toast } = await import("@/components/ui/toast");
     setup();
     await waitFor(() => screen.getByText("普通页"));
-    const checkboxes = screen.getAllByRole("checkbox");
-    fireEvent.click(checkboxes[2]);
+    fireEvent.click(screen.getByText("普通页"));
     fireEvent.click(screen.getByRole("button", { name: "确认" }));
     await waitFor(() => expect(toast.warning).toHaveBeenCalled());
   });

package/src/components/story/relations/__tests__/link-manage-dialog.test.tsx

@@ -34,7 +34,7 @@ vi.mock("@/server/serverFns/story", () => ({
   removeLinkFn: fns.removeLink,
 }));
 
-vi.mock("sonner", () => ({
+vi.mock("@/components/ui/toast", () => ({
   toast: { success: vi.fn(), error: vi.fn(), warning: vi.fn() },
 }));
 

package/src/components/story/relations/attachment-manage-dialog.tsx

@@ -16,7 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import * as React from "react";
-import { toast } from "sonner";
+import { toast } from "@/components/ui/toast";
 import { UploadCloud, X, ChevronLeft, ChevronRight } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {

package/src/components/story/relations/knowledge-select-dialog.tsx

@@ -17,7 +17,7 @@
 
 import * as React from "react";
 import { useServerFn } from "@tanstack/react-start";
-import { toast } from "sonner";
+import { toast } from "@/components/ui/toast";
 import { BookOpenText, BookMarked, Bookmark, Check, Scale, ShieldCheck, Sprout } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -298,7 +298,8 @@ export function KnowledgeSelectDialog({
           <div className="flex items-center gap-2 ml-3">
             <Checkbox
               id="kb-select-all"
-              checked={allSelected ? true : someSelected ? "indeterminate" : false}
+              checked={allSelected}
+              indeterminate={!allSelected && someSelected}
               onCheckedChange={toggleSelectAll}
               disabled={listedIds.length === 0}
               aria-label={m.story_knowledgeDialog_selectAll()}

package/src/components/story/relations/link-manage-dialog.tsx

@@ -17,7 +17,7 @@
 
 import * as React from "react";
 import { useServerFn } from "@tanstack/react-start";
-import { toast } from "sonner";
+import { toast } from "@/components/ui/toast";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";

package/src/components/story/relations/story-ref-row.tsx

@@ -28,7 +28,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useServerFn } from "@tanstack/react-start";
-import { toast } from "sonner";
+import { toast } from "@/components/ui/toast";
 import {
   updateStoryFn,
   archiveStoryFn,
@@ -187,14 +187,10 @@ export function StoryRefRow({
       >
         {crossProject && storyProjectInfo ? (
           <Tooltip>
-            <TooltipTrigger asChild>
-              <span
-                className="shrink-0"
-                style={{ color: "oklch(80.517% 0.20237 152.675 / 0.909)" }}
-              >
+            <TooltipTrigger render={<span className="shrink-0"
+                style={{ color: "oklch(80.517% 0.20237 152.675 / 0.909)" }} />}>
                 <LucideIconByName name={storyProjectInfo.icon} size={14} />
-              </span>
-            </TooltipTrigger>
+              </TooltipTrigger>
             <TooltipContent side="top" sideOffset={6} className="flex flex-col items-start gap-0.5 text-xs">
               <span className="opacity-80">{m.story_children_crossProject()}</span>
               <span className="font-medium">{storyProjectInfo.name}</span>
@@ -209,14 +205,10 @@ export function StoryRefRow({
         ) : null}
         {crossProject && storyProjectInfo ? (
           <Tooltip>
-            <TooltipTrigger asChild>
-              <span
-                className="font-mono text-xs shrink-0"
-                style={{ color: "oklch(80.517% 0.20237 152.675 / 0.909)" }}
-              >
+            <TooltipTrigger render={<span className="font-mono text-xs shrink-0"
+                style={{ color: "oklch(80.517% 0.20237 152.675 / 0.909)" }} />}>
                 {storyState.identifier}
-              </span>
-            </TooltipTrigger>
+              </TooltipTrigger>
             <TooltipContent side="top" sideOffset={6} className="flex flex-col items-start gap-0.5 text-xs">
               <span className="opacity-80">{m.story_children_crossProject()}</span>
               <span className="font-medium">{storyProjectInfo.name}</span>
@@ -255,11 +247,9 @@ export function StoryRefRow({
         <LabelsEditor labelIds={currentLabelIds} labels={labels} onChange={(v) => updateField({ labelIds: v })} variant="button" aiContext={{ name: () => storyState.name }} />
       )}
       <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="icon" className="size-7 p-0 ml-auto border border-border/60 rounded hover:bg-muted">
+        <DropdownMenuTrigger render={<Button variant="ghost" size="icon" className="size-7 p-0 ml-auto border border-border/60 rounded hover:bg-muted" />}>
             <MoreHorizontal className="size-4" />
-          </Button>
-        </DropdownMenuTrigger>
+          </DropdownMenuTrigger>
         <DropdownMenuContent align="end" className="w-40" sideOffset={4}>
           <DropdownMenuItem onClick={() => onRemove(story.id)}>
             <Waypoints className="mr-2 size-4" />

package/src/components/story/search-popover.tsx

@@ -74,19 +74,21 @@ export function StorySearchPopover({
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        {trigger || (
-          <button
-            type="button"
-            className={cn(
-              "flex items-center gap-2 px-3 py-2 text-sm rounded-md hover:bg-muted transition-colors"
-            )}
-          >
-            <Search className="h-4 w-4" />
-            {placeholderText}
-          </button>
-        )}
-      </PopoverTrigger>
+      <PopoverTrigger
+        render={
+          (trigger as React.ReactElement) || (
+            <button
+              type="button"
+              className={cn(
+                "flex items-center gap-2 px-3 py-2 text-sm rounded-md hover:bg-muted transition-colors"
+              )}
+            >
+              <Search className="h-4 w-4" />
+              {placeholderText}
+            </button>
+          )
+        }
+      />
       <PopoverContent className="w-80 p-0" align="start">
         <Command>
           <div className="flex items-center border-b px-3">

package/src/components/story/story-list-view.tsx

@@ -41,7 +41,7 @@ import { useDisplayOptions } from "./display/use-display-options";
 import { useDisplayOptionsSearch } from "./display/use-display-options-search";
 import { useGroupedStories } from "./display/use-grouped-stories";
 import { usePagedStoryGroups } from "./display/use-paged-story-groups";
-import { toast } from "sonner";
+import { toast } from "@/components/ui/toast";
 import {
   AlertDialog,
   AlertDialogAction,