@allbluecn/web-app 0.12.0 → 0.12.2

package/src/components/story/detail/story-detail-toolbar/associated-attachments-panel.tsx

@@ -19,7 +19,7 @@ import * as React from "react";
 import { useTheme } from "next-themes";
 import { Link as RouterLink } from "@tanstack/react-router";
 import { useServerFn } from "@tanstack/react-start";
-import { toast } from "sonner";
+import { toast } from "@/components/ui/toast";
 import {
   BookOpenText,
   ChevronDown,
@@ -431,11 +431,9 @@ export function AssociatedAttachmentsPanel({
       case "link":
         return (
           <>
-            <Button variant="ghost" size="icon" className="size-7" asChild>
-              <a href={item.data.url} target="_blank" rel="noopener noreferrer" title={m.story_associatedAttachments_open()} onClick={(e) => e.stopPropagation()}>
+            <Button render={<a href={item.data.url} target="_blank" rel="noopener noreferrer" title={m.story_associatedAttachments_open()} onClick={(e) => e.stopPropagation()} />} variant="ghost" size="icon" className="size-7" nativeButton={false}>
                 <ExternalLink className="size-3.5" />
-              </a>
-            </Button>
+              </Button>
             <Button
               variant="ghost"
               size="icon"
@@ -461,17 +459,13 @@ export function AssociatedAttachmentsPanel({
         return (
           <>
             {inPreviewCard && (
-              <Button variant="ghost" size="icon" className="size-7" asChild>
-                <a
-                  href={item.data.storageUrl}
+              <Button render={<a href={item.data.storageUrl}
                   download={item.data.fileName}
                   title={m.story_associatedAttachments_download()}
                   aria-label={m.story_associatedAttachments_download()}
-                  onClick={(e) => e.stopPropagation()}
-                >
+                  onClick={(e) => e.stopPropagation()} />} variant="ghost" size="icon" className="size-7" nativeButton={false}>
                   <Download className="size-3.5" />
-                </a>
-              </Button>
+                </Button>
             )}
             <Button
               variant="ghost"
@@ -499,37 +493,35 @@ export function AssociatedAttachmentsPanel({
         const externalGroup = isExternal ? item.data.kbId.slice("ext:".length) : null;
         return (
           <>
-            <Button variant="ghost" size="icon" className="size-7" asChild>
-              {isExternal && externalGroup ? (
-                externalGroup === "legal" ? (
-                  <RouterLink to="/knowledge/laws/$id" params={{ id: item.data.id }} title={m.story_associatedAttachments_goToDoc()} onClick={(e) => e.stopPropagation()}>
-                    <ExternalLink className="size-3.5" />
-                  </RouterLink>
-                ) : externalGroup === "compliance" ? (
-                  <RouterLink to="/knowledge/compliance/$id" params={{ id: item.data.id }} title={m.story_associatedAttachments_goToDoc()} onClick={(e) => e.stopPropagation()}>
-                    <ExternalLink className="size-3.5" />
-                  </RouterLink>
-                ) : externalGroup === "dictionary" ? (
-                  <RouterLink to="/knowledge/dictionaries/$id" params={{ id: item.data.id }} title={m.story_associatedAttachments_goToDoc()} onClick={(e) => e.stopPropagation()}>
-                    <ExternalLink className="size-3.5" />
-                  </RouterLink>
-                ) : externalGroup === "bookmark" ? (
-                  <RouterLink to="/knowledge/bookmarks/$id" params={{ id: item.data.id }} title={m.story_associatedAttachments_goToDoc()} onClick={(e) => e.stopPropagation()}>
-                    <ExternalLink className="size-3.5" />
-                  </RouterLink>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-7"
+              nativeButton={false}
+              render={
+                isExternal && externalGroup ? (
+                  externalGroup === "legal" ? (
+                    <RouterLink to="/knowledge/laws/$id" params={{ id: item.data.id }} title={m.story_associatedAttachments_goToDoc()} onClick={(e) => e.stopPropagation()} />
+                  ) : externalGroup === "compliance" ? (
+                    <RouterLink to="/knowledge/compliance/$id" params={{ id: item.data.id }} title={m.story_associatedAttachments_goToDoc()} onClick={(e) => e.stopPropagation()} />
+                  ) : externalGroup === "dictionary" ? (
+                    <RouterLink to="/knowledge/dictionaries/$id" params={{ id: item.data.id }} title={m.story_associatedAttachments_goToDoc()} onClick={(e) => e.stopPropagation()} />
+                  ) : externalGroup === "bookmark" ? (
+                    <RouterLink to="/knowledge/bookmarks/$id" params={{ id: item.data.id }} title={m.story_associatedAttachments_goToDoc()} onClick={(e) => e.stopPropagation()} />
+                  ) : (
+                    <span />
+                  )
                 ) : (
-                  <span />
+                  <RouterLink
+                    to="/knowledge/$kbId/doc/$docId"
+                    params={{ kbId: item.data.kbId, docId: item.data.id }}
+                    title={m.story_associatedAttachments_goToDoc()}
+                    onClick={(e) => e.stopPropagation()}
+                  />
                 )
-              ) : (
-                <RouterLink
-                  to="/knowledge/$kbId/doc/$docId"
-                  params={{ kbId: item.data.kbId, docId: item.data.id }}
-                  title={m.story_associatedAttachments_goToDoc()}
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  <ExternalLink className="size-3.5" />
-                </RouterLink>
-              )}
+              }
+            >
+              <ExternalLink className="size-3.5" />
             </Button>
             <Button
               variant="ghost"
@@ -676,20 +668,14 @@ export function AssociatedAttachmentsPanel({
   return (
     <>
       <Collapsible defaultOpen data-testid="associated-panel">
-      <CollapsibleTrigger
-        asChild
-        className="group flex w-full cursor-pointer items-center gap-2 pb-3 pt-4 text-xs font-semibold hover:text-foreground transition-colors"
-      >
-        <div
-          role="button"
+      <CollapsibleTrigger render={<div role="button"
           tabIndex={0}
           onKeyDown={(e) => {
             if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
               (e.currentTarget as HTMLDivElement).click();
             }
-          }}
-        >
+          }} />} className="group flex w-full cursor-pointer items-center gap-2 pb-3 pt-4 text-xs font-semibold hover:text-foreground transition-colors">
           <div className="flex items-center gap-1.5">
             <span>{m.story_associatedAttachments_title()}</span>
             <span className="inline-flex min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
@@ -719,8 +705,7 @@ export function AssociatedAttachmentsPanel({
               <LayoutGrid className="size-3.5" />
             </Button>
           </div>
-        </div>
-      </CollapsibleTrigger>
+        </CollapsibleTrigger>
       <CollapsibleContent className="pb-2">
         <div
           data-testid="associated-items"
@@ -731,28 +716,23 @@ export function AssociatedAttachmentsPanel({
             const isCollapsed = groupCollapsed[group.kind] ?? false;
             return (
               <Collapsible key={group.kind} open={!isCollapsed} onOpenChange={(open) => setGroupCollapsed((p) => ({ ...p, [group.kind]: !open }))}>
-                <CollapsibleTrigger asChild>
-                  <div className="flex h-9 cursor-pointer items-center gap-1.5 border-b border-border/40 bg-muted/50 px-3 text-sm font-medium hover:text-foreground transition-colors">
+                <CollapsibleTrigger render={<div className="flex h-9 cursor-pointer items-center gap-1.5 border-b border-border/40 bg-muted/50 px-3 text-sm font-medium hover:text-foreground transition-colors" />}>
                     <ChevronDown className={`size-3 shrink-0 text-muted-foreground transition-transform ${isCollapsed ? "-rotate-90" : "rotate-0"}`} />
                     <span>{group.label}</span>
                     <span className="ml-1 text-xs text-muted-foreground">{group.count}</span>
                     <div className="ml-auto flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
                       {group.kind === "attachment" && (
                         <Popover>
-                          <PopoverTrigger asChild>
-                            <Button
-                              variant="ghost"
+                          <PopoverTrigger render={<Button variant="ghost"
                               size="sm"
                               className={`size-6 p-0 ${activeTypeFilters.size > 0 ? "bg-muted text-foreground" : ""}`}
                               aria-label={m.story_associatedAttachments_filter()}
-                              title={m.story_associatedAttachments_filter()}
-                            >
+                              title={m.story_associatedAttachments_filter()} />}>
                               <ChartNoAxesGantt className="size-3.5" />
                               {activeTypeFilters.size > 0 && (
                                 <span className="absolute -right-1 -top-1 size-1.5 rounded-full bg-primary" />
                               )}
-                            </Button>
-                          </PopoverTrigger>
+                            </PopoverTrigger>
                           <PopoverContent align="end" className="w-52 p-2">
                             <div className="text-xs font-medium text-muted-foreground my-1 px-1">
                               {m.story_associatedAttachments_filterByType()}
@@ -811,8 +791,7 @@ export function AssociatedAttachmentsPanel({
                         <Plus className="size-3.5" />
                       </Button>
                     </div>
-                  </div>
-                </CollapsibleTrigger>
+                  </CollapsibleTrigger>
                 <CollapsibleContent className={mode === "preview" ? "p-3" : ""}>
                   {mode === "list" ? (
                     <div className="flex flex-col">
@@ -838,7 +817,7 @@ export function AssociatedAttachmentsPanel({
         <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 bg-popover ${FULLSCREEN_CONTENT_CLASS}`}
-          onOpenAutoFocus={(e) => e.preventDefault()}
+          initialFocus={false}
         >
           {fullscreenAttachment && (
             <AttachmentFileView

package/src/components/story/detail/story-detail-toolbar/categories.tsx

@@ -54,17 +54,13 @@ export function StoryDetailCategories() {
             <span className="mx-0.5 h-4 w-px shrink-0 bg-muted-foreground/20" />
           )}
           <Popover>
-            <PopoverTrigger asChild>
-              <Button
-                variant="ghost"
+            <PopoverTrigger render={<Button variant="ghost"
                 size="sm"
                 className="h-7 gap-1.5 px-2.5 text-xs font-normal hover:bg-muted rounded-md"
-                title={cat.tooltip()}
-              >
+                title={cat.tooltip()} />}>
                 <cat.icon className="size-3.5 text-muted-foreground" />
                 {cat.label()}
-              </Button>
-            </PopoverTrigger>
+              </PopoverTrigger>
             <PopoverContent align="start" className="w-[320px] p-4">
               <div className="text-sm text-muted-foreground">
                 {cat.placeholder()}

package/src/components/story/detail/story-detail-toolbar/children.tsx

@@ -34,7 +34,7 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
-import { toast } from "sonner";
+import { toast } from "@/components/ui/toast";
 import {
   removeChildFn,
   bulkArchiveStoriesFn,
@@ -71,19 +71,14 @@ export interface StoryDetailChildrenPanelProps {
 export function StoryDetailChildrenButton({ onAction }: StoryDetailChildrenButtonProps) {
   return (
     <Tooltip>
-      <TooltipTrigger asChild>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="ghost"
+      <TooltipTrigger render={<DropdownMenu />}>
+          <DropdownMenuTrigger render={<Button variant="ghost"
               size="sm"
-              className="h-7 gap-1.5 px-2.5 text-xs font-normal hover:bg-muted rounded-md"
-            >
+              className="h-7 gap-1.5 px-2.5 text-xs font-normal hover:bg-muted rounded-md" />}>
               <GitBranch className="size-3.5 text-muted-foreground" />
               {m.story_children_addChild()}
               <ChevronDown className="size-3 text-muted-foreground" />
-            </Button>
-          </DropdownMenuTrigger>
+            </DropdownMenuTrigger>
           <DropdownMenuContent align="start" className="w-36">
             <DropdownMenuItem onSelect={() => onAction("create")}>
               <Plus className="mr-2 size-4" />{m.story_children_createChild()}
@@ -92,8 +87,7 @@ export function StoryDetailChildrenButton({ onAction }: StoryDetailChildrenButto
               <SquareDashedMousePointer className="mr-2 size-4" />{m.story_children_selectChild()}
             </DropdownMenuItem>
           </DropdownMenuContent>
-        </DropdownMenu>
-      </TooltipTrigger>
+        </TooltipTrigger>
       <TooltipContent side="top">{m.story_children_childStories()}</TooltipContent>
     </Tooltip>
   );
@@ -102,11 +96,9 @@ export function StoryDetailChildrenButton({ onAction }: StoryDetailChildrenButto
 function ChildrenActionDropdown({ onAction }: { onAction: (action: "create" | "select") => void }) {
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="sm" className="size-7 p-0">
+      <DropdownMenuTrigger render={<Button variant="ghost" size="sm" className="size-7 p-0" />}>
           <Plus className="size-3.5" />
-        </Button>
-      </DropdownMenuTrigger>
+        </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-36">
         <DropdownMenuItem onSelect={() => onAction("create")}>
           <Plus className="mr-2 size-4" />{m.story_children_createChild()}
@@ -319,20 +311,14 @@ export function StoryDetailChildrenPanel({
   return (
     <>
       <Collapsible defaultOpen>
-        <CollapsibleTrigger
-          asChild
-          className="group flex w-full cursor-pointer select-none items-center gap-2 pb-3 pt-4 text-xs font-semibold hover:text-foreground transition-colors"
-        >
-          <div
-            role="button"
+        <CollapsibleTrigger render={<div role="button"
             tabIndex={0}
             onKeyDown={(e) => {
               if (e.key === "Enter" || e.key === " ") {
                 e.preventDefault();
                 (e.currentTarget as HTMLDivElement).click();
               }
-            }}
-          >
+            }} />} className="group flex w-full cursor-pointer select-none items-center gap-2 pb-3 pt-4 text-xs font-semibold hover:text-foreground transition-colors">
             <div className="flex items-center gap-1.5">
               <span>{m.story_children_childStories()}</span>
               <span className="inline-flex min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
@@ -342,11 +328,9 @@ export function StoryDetailChildrenPanel({
             </div>
             <div className="flex items-center gap-1 ml-auto" onClick={(e) => e.stopPropagation()}>
               <Popover>
-                <PopoverTrigger asChild>
-                  <Button variant="ghost" size="sm" className="size-7 p-0">
+                <PopoverTrigger render={<Button variant="ghost" size="sm" className="size-7 p-0" />}>
                     <ChartNoAxesGantt className="size-3.5" />
-                  </Button>
-                </PopoverTrigger>
+                  </PopoverTrigger>
                 <PopoverContent align="end" className="w-75 p-0">
                   <div className="max-h-[60vh] overflow-y-auto">
                     <DisplayOptionsBody
@@ -360,8 +344,7 @@ export function StoryDetailChildrenPanel({
               </Popover>
               <ChildrenActionDropdown onAction={onAction} />
             </div>
-          </div>
-        </CollapsibleTrigger>
+          </CollapsibleTrigger>
         <CollapsibleContent className="pb-2">
           <div className="flex flex-col gap-0 border rounded-lg overflow-hidden">
             {groups.map((group) => {

package/src/components/story/detail/story-detail-toolbar/dependency-panel.tsx

@@ -21,7 +21,7 @@ import { Button } from "@/components/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import { useServerFn } from "@tanstack/react-start";
-import { toast } from "sonner";
+import { toast } from "@/components/ui/toast";
 import {
   removeDependencyFn,
   updateDependencyFn,
@@ -433,13 +433,11 @@ export function StoryDetailDependencyPanel({
     const isCollapsed = collapsed[`${sectionKey}:root`] ?? false;
     return (
       <Collapsible open={!isCollapsed} onOpenChange={(open) => setCollapsed((p) => ({ ...p, [`${sectionKey}:root`]: !open }))}>
-        <CollapsibleTrigger asChild>
-          <div className="flex h-9 cursor-pointer select-none items-center gap-1.5 bg-muted/50 px-3 text-sm font-medium hover:text-foreground transition-colors">
+        <CollapsibleTrigger render={<div className="flex h-9 cursor-pointer select-none items-center gap-1.5 bg-muted/50 px-3 text-sm font-medium hover:text-foreground transition-colors" />}>
             <ChevronDown className={`size-3 shrink-0 text-muted-foreground transition-transform ${isCollapsed ? "-rotate-90" : "rotate-0"}`} />
             <span>{SECTION_TITLE_LABELS[titleKey]?.() ?? titleKey}</span>
             <span className="ml-1 text-xs text-muted-foreground">{rows.length}</span>
-          </div>
-        </CollapsibleTrigger>
+          </CollapsibleTrigger>
         <CollapsibleContent>
           {rows.length === 0 ? (
             <p className="flex items-center gap-1.5 px-2 py-1.5 text-xs text-muted-foreground">
@@ -458,20 +456,14 @@ export function StoryDetailDependencyPanel({
 
   return (
     <Collapsible defaultOpen>
-      <CollapsibleTrigger
-        asChild
-        className="group flex w-full cursor-pointer select-none items-center gap-2 pb-3 pt-4 text-xs font-semibold hover:text-foreground transition-colors"
-      >
-        <div
-          role="button"
+      <CollapsibleTrigger render={<div role="button"
           tabIndex={0}
           onKeyDown={(e) => {
             if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
               (e.currentTarget as HTMLDivElement).click();
             }
-          }}
-        >
+          }} />} className="group flex w-full cursor-pointer select-none items-center gap-2 pb-3 pt-4 text-xs font-semibold hover:text-foreground transition-colors">
           <div className="flex items-center gap-1.5">
             <span>{m.story_relations_dependency()}</span>
             <span className="inline-flex min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
@@ -481,11 +473,9 @@ export function StoryDetailDependencyPanel({
           </div>
           <div className="flex items-center gap-1 ml-auto" onClick={(e) => e.stopPropagation()}>
             <Popover>
-              <PopoverTrigger asChild>
-                <Button variant="ghost" size="sm" className="size-7 p-0">
+              <PopoverTrigger render={<Button variant="ghost" size="sm" className="size-7 p-0" />}>
                   <ChartNoAxesGantt className="size-3.5" />
-                </Button>
-              </PopoverTrigger>
+                </PopoverTrigger>
               <PopoverContent align="end" className="w-75 p-0">
                 <div className="max-h-[60vh] overflow-y-auto">
                   <DisplayOptionsBody
@@ -501,8 +491,7 @@ export function StoryDetailDependencyPanel({
               <Plus className="size-3.5" />
             </Button>
           </div>
-        </div>
-      </CollapsibleTrigger>
+        </CollapsibleTrigger>
       <CollapsibleContent className="pb-2">
         <div className="flex flex-col gap-0 border rounded-lg overflow-hidden">
           {renderSection("dependency.dependsOnTitle", "dependsOn", data.dependsOn, dependsOnGroups)}

package/src/components/story/detail/story-detail-toolbar.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 { LinkIcon, Paperclip, BookOpenText } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { StoryDetailChildrenButton, StoryDetailChildrenPanel } from "./story-detail-toolbar/children";

package/src/components/story/display/__tests__/display-dropdown.test.tsx

@@ -203,7 +203,7 @@ describe("DisplayDropdown", () => {
     const onChange = vi.fn();
     renderWithTooltip(<DisplayDropdown filters={makeFilters()} onChange={onChange} layout="list" {...viewProps} />);
     fireEvent.click(screen.getByRole("button", { name: /显示/ }));
-    fireEvent.click(screen.getByLabelText("显示空分组"));
+    fireEvent.click(screen.getByRole("switch", { name: "显示空分组" }));
     const patch = onChange.mock.calls[onChange.mock.calls.length - 1][0];
     expect(patch.showEmptyGroups).toBe(true);
   });

package/src/components/story/display/display-dropdown.tsx

@@ -108,17 +108,13 @@ export function DisplayDropdown({ filters, onChange, layout, projectId, projects
   return (
     <Popover>
       <Tooltip>
-        <PopoverTrigger asChild>
-          <TooltipTrigger asChild>
-            <Button
-              variant="outline"
+        <PopoverTrigger render={<TooltipTrigger render={<Button variant="outline"
               size="sm"
               aria-label={m.display_displayOptions()}
               className={cn(
                 "relative h-8 gap-1.5 px-2.5 text-sm font-normal",
                 changed && "border-primary/50 bg-primary/5 text-primary",
-              )}
-            >
+              )} />} />}>
               <ChartNoAxesGantt className="size-4" />
               {changed && (
                 <span
@@ -126,9 +122,7 @@ export function DisplayDropdown({ filters, onChange, layout, projectId, projects
                   aria-hidden
                 />
               )}
-            </Button>
-          </TooltipTrigger>
-        </PopoverTrigger>
+            </PopoverTrigger>
         <TooltipContent side="bottom">{m.display_viewGrouping()}</TooltipContent>
       </Tooltip>
       <PopoverContent className="w-75 p-0" align="start">

package/src/components/story/filters/add-filter-dropdown.tsx

@@ -34,16 +34,16 @@ export function AddFilterDropdown({ conditions, onAdd }: AddFilterDropdownProps)
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
+      <PopoverTrigger render={
         <Button
           variant="ghost"
           size="sm"
           disabled={available.length === 0}
           className="h-7 gap-1 rounded-sm px-2 text-xs text-muted-foreground hover:text-foreground"
-        >
+        />
+      }>
           <Plus className="size-3.5" />
           {m.story_filter_addCondition()}
-        </Button>
       </PopoverTrigger>
       <PopoverContent className="w-48 p-1" align="start">
         {available.length === 0 ? (

package/src/components/story/filters/filter-condition.tsx

@@ -91,11 +91,9 @@ function PropertySelect({ current, options, onChange }: { current: FilterKey; op
   const CurrentIcon = options.find((o) => o.key === current)?.icon;
   return (
     <Popover>
-      <PopoverTrigger asChild>
-        <button className="flex h-full items-center gap-1 rounded-l-sm px-2 text-muted-foreground hover:bg-muted transition-colors whitespace-nowrap">
+      <PopoverTrigger render={<button className="flex h-full items-center gap-1 rounded-l-sm px-2 text-muted-foreground hover:bg-muted transition-colors whitespace-nowrap" />}>
           {CurrentIcon && <CurrentIcon className="size-3.5 shrink-0" />}
           <span className="pr-1">{options.find((o) => o.key === current)?.label() ?? current}</span>
-        </button>
       </PopoverTrigger>
       <PopoverContent className="w-40 p-1" align="start">
         {options.map((opt) => {
@@ -124,11 +122,9 @@ function OperatorSelect({ current, operators, onChange }: { current: FilterOpera
 
   return (
     <Popover>
-      <PopoverTrigger asChild>
-        <button className="flex h-full items-center px-2 text-muted-foreground hover:bg-muted transition-colors whitespace-nowrap">
+      <PopoverTrigger render={<button className="flex h-full items-center px-2 text-muted-foreground hover:bg-muted transition-colors whitespace-nowrap" />}>
           {OPERATOR_LABELS[current]()}
-        </button>
-      </PopoverTrigger>
+        </PopoverTrigger>
       <PopoverContent className="w-40 p-1" align="start">
         {operators.map((op) => {
           const active = op === current;

package/src/components/story/filters/filter-toggle.tsx

@@ -35,7 +35,7 @@ export function StoryFilterToggle({ visible, conditions, onToggle }: StoryFilter
 
   return (
     <Tooltip>
-      <TooltipTrigger asChild>
+      <TooltipTrigger render={
         <Button
           variant="outline"
           size="sm"
@@ -45,14 +45,14 @@ export function StoryFilterToggle({ visible, conditions, onToggle }: StoryFilter
             hasActive && "border-primary/50 bg-primary/5 text-primary",
             !hasActive && "text-muted-foreground",
           )}
-        >
+        />
+      }>
           {isOpen ? <ListFilterPlus className="size-4" /> : <ListFilter className="size-4" />}
           {activeCount > 0 && (
             <span className="flex size-4 items-center justify-center rounded-full bg-primary text-[10px] text-primary-foreground">
               {activeCount}
             </span>
           )}
-        </Button>
       </TooltipTrigger>
       <TooltipContent>{isOpen ? m.story_filter_cancel() : m.story_filter_toggleOpen()}</TooltipContent>
     </Tooltip>

package/src/components/story/filters/filter-value-input.tsx

@@ -134,11 +134,9 @@ function DateSelect({ operator, value, onChange }: { operator: FilterOperator; v
           }
         }}
       >
-        <PopoverTrigger asChild>
-          <button className="flex h-6 items-center gap-1 rounded-sm bg-muted px-2 text-xs text-foreground hover:bg-muted/80 transition-colors whitespace-nowrap">
+        <PopoverTrigger render={<button className="flex h-6 items-center gap-1 rounded-sm bg-muted px-2 text-xs text-foreground hover:bg-muted/80 transition-colors whitespace-nowrap" />}>
             <CalendarIcon className="size-3.5 text-muted-foreground shrink-0" />
             {from && to ? `${format(from, "MM/dd")}~${format(to, "MM/dd")}` : m.story_filter_selectRange()}
-          </button>
         </PopoverTrigger>
         <PopoverContent className="w-auto p-0" align="start">
           <Calendar
@@ -163,13 +161,11 @@ function DateSelect({ operator, value, onChange }: { operator: FilterOperator; v
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <button className="flex h-6 items-center gap-1 rounded-sm bg-muted px-2 text-xs text-foreground hover:bg-muted/80 transition-colors whitespace-nowrap">
+      <PopoverTrigger render={<button className="flex h-6 items-center gap-1 rounded-sm bg-muted px-2 text-xs text-foreground hover:bg-muted/80 transition-colors whitespace-nowrap" />}>
           <CalendarIcon className="size-3.5 text-muted-foreground shrink-0" />
           {date ? format(date, "yyyy-MM-dd") : m.story_filter_selectDate()}
-        </button>
-      </PopoverTrigger>
-      <PopoverContent className="w-auto p-0" align="start" onOpenAutoFocus={(e) => e.preventDefault()} onCloseAutoFocus={(e) => e.preventDefault()}>
+        </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start" initialFocus={false} finalFocus={false}>
         <Calendar
           mode="single"
           selected={date}

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

@@ -30,7 +30,7 @@ vi.mock("@/lib/auth/auth-client", () => ({
   useSession: () => ({ data: { user: { hasAiKey: true } } }),
 }));
 
-vi.mock("sonner", () => ({
+vi.mock("@/components/ui/toast", () => ({
   toast: { error: vi.fn(), success: vi.fn() },
 }));
 

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

@@ -57,8 +57,7 @@ export function AssigneeEditor({ assignee, users, onChange, mode = "single", sel
   return (
     <Popover open={open} onOpenChange={(v) => { setOpen(v); if (v) setSearch(""); }}>
       {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((id) => {
               const u = users.find((user) => user.id === id);
               return u ? (
@@ -75,11 +74,9 @@ export function AssigneeEditor({ assignee, users, onChange, mode = "single", sel
                 </span>
               ) : null;
             })}
-          </div>
-        </PopoverTrigger>
+          </PopoverTrigger>
       ) : showChip && !isMulti && assignee ? (
-        <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">
               <UserAvatar
                 avatarConfig={assignee.avatarConfig}
@@ -91,8 +88,7 @@ export function AssigneeEditor({ assignee, users, onChange, mode = "single", sel
               />
               <span className="text-xs">{assignee.username}</span>
             </span>
-          </div>
-        </PopoverTrigger>
+          </PopoverTrigger>
       ) : (
         <InlineTrigger
           title={m.story_inline_assignee()}