@allbluecn/web-app 0.12.0 → 0.12.3

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

@@ -15,9 +15,9 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-import { useState } from "react";
-import type { ReactNode } from "react";
-import { Link } from "@tanstack/react-router";
+import { useCallback, useMemo, useState } from "react";
+import type { ReactNode, ReactElement } from "react";
+import { Link, useNavigate } from "@tanstack/react-router";
 import {
   Archive,
   ArrowLeft,
@@ -31,6 +31,7 @@ import {
   PanelLeft,
   Trash2,
   X,
+  Sparkles,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
@@ -44,10 +45,17 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { toast } from "sonner";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { toast } from "@/components/ui/toast";
 import { NameConfirmDialog } from "@/components/shared-kit/dialogs/name-confirm-dialog";
+import AISuggestedPrompts, { type SuggestedPrompt } from "@/components/hextaui/ai-suggested-prompts";
 import { archiveStoryFn, deleteStoryFn } from "@/server/serverFns/story";
 import { TransferStoryPopover } from "./transfer-story-popover";
+import { startHandoffWithContext } from '@/lib/ai/chat-handoff'
 import { m } from "@/paraglide/messages.js";
 
 export type PeekMode = "side-peek" | "modal" | "full-screen";
@@ -127,6 +135,7 @@ export function StoryPanelHeader({
 }: StoryPanelHeaderProps) {
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [archiveLoading, setArchiveLoading] = useState(false);
+  const navigate = useNavigate();
 
   const currentMode = PEEK_MODE_OPTIONS.find((o) => o.value === mode) ?? PEEK_MODE_OPTIONS[0];
   const CurrentModeIcon = currentMode.icon;
@@ -179,11 +188,25 @@ export function StoryPanelHeader({
     onDeleted();
   };
 
+  const handleAskAiSelect = useCallback((prompt: SuggestedPrompt) => {
+    startHandoffWithContext(
+      prompt.prompt,
+      { board: 'story', entityId: storyId ?? '' },
+    )
+    void navigate({ to: "/harness" })
+  }, [storyId, navigate])
+
+  const storyPrompts = useMemo(() => [
+    { id: "story-analyze", title: m.story_askAi_analyze(), prompt: `请帮我分析故事「${identifier ?? storyId}」的情节结构与人物动机`, category: m.story_askAi_cat_analysis() },
+    { id: "story-refine", title: m.story_askAi_refine(), prompt: `请帮我把故事「${identifier ?? storyId}」的高潮部分细化得更具体`, category: m.story_askAi_cat_refine() },
+    { id: "story-test", title: m.story_askAi_test(), prompt: `请检查故事「${identifier ?? storyId}」的情节逻辑是否有漏洞`, category: m.story_askAi_cat_test() },
+  ], [identifier, storyId])
+
   return (
     <>
       <div className="flex h-11 shrink-0 items-center gap-1.5 mt-2 px-3">
         <Tooltip>
-          <TooltipTrigger asChild>{closeButtonWithLink}</TooltipTrigger>
+          <TooltipTrigger render={closeButtonWithLink as ReactElement} />
           <TooltipContent>{closeTooltip}</TooltipContent>
         </Tooltip>
 
@@ -191,22 +214,18 @@ export function StoryPanelHeader({
 
         {!hideFullscreen && onFullscreen && (
           <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon" className="size-8" onClick={onFullscreen} aria-label={m.story_panel_fullscreen()}>
+            <TooltipTrigger render={<Button variant="ghost" size="icon" className="size-8" onClick={onFullscreen} aria-label={m.story_panel_fullscreen()} />}>
                 <Maximize2 className="size-4" />
-              </Button>
-            </TooltipTrigger>
+              </TooltipTrigger>
             <TooltipContent>{m.story_panel_fullscreen()}</TooltipContent>
           </Tooltip>
         )}
 
         {!hideLayoutSwitcher && mode && onModeChange && (
           <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="ghost" size="icon" className="size-8" aria-label={m.story_panel_switchLayout()}>
+            <DropdownMenuTrigger render={<Button variant="ghost" size="icon" className="size-8" aria-label={m.story_panel_switchLayout()} />}>
                 <CurrentModeIcon className="size-4" />
-              </Button>
-            </DropdownMenuTrigger>
+              </DropdownMenuTrigger>
             <DropdownMenuContent align="center" className="w-40" sideOffset={4}>
               <DropdownMenuRadioGroup value={mode} onValueChange={(v) => onModeChange(v as PeekMode)}>
                 {PEEK_MODE_OPTIONS.map((o) => (
@@ -228,35 +247,27 @@ export function StoryPanelHeader({
             </div>
             {onPrevious && (
               <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="ghost"
+                <TooltipTrigger render={<Button variant="ghost"
                     size="icon"
                     className="size-8"
                     onClick={onPrevious}
                     disabled={prevDisabled}
-                    aria-label={m.story_panel_previousStory()}
-                  >
+                    aria-label={m.story_panel_previousStory()} />}>
                     <ChevronUp className="size-4" />
-                  </Button>
-                </TooltipTrigger>
+                  </TooltipTrigger>
                 <TooltipContent>{m.story_panel_previousStory()}</TooltipContent>
               </Tooltip>
             )}
             {onNext && (
               <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="ghost"
+                <TooltipTrigger render={<Button variant="ghost"
                     size="icon"
                     className="size-8"
                     onClick={onNext}
                     disabled={nextDisabled}
-                    aria-label={m.story_panel_nextStory()}
-                  >
+                    aria-label={m.story_panel_nextStory()} />}>
                     <ChevronDown className="size-4" />
-                  </Button>
-                </TooltipTrigger>
+                  </TooltipTrigger>
                 <TooltipContent>{m.story_panel_nextStory()}</TooltipContent>
               </Tooltip>
             )}
@@ -264,6 +275,29 @@ export function StoryPanelHeader({
         )}
 
         <div className="ml-auto flex items-center gap-1.5">
+          {storyId && (
+            <Popover>
+              <PopoverTrigger render={<Tooltip />}>
+                  <TooltipTrigger render={<Button variant="ghost"
+                      size="icon"
+                      className="size-8"
+                      aria-label={m.story_panel_askAi()} />}>
+                      <Sparkles className="size-4" />
+                    </TooltipTrigger>
+                  <TooltipContent>{m.story_panel_askAi()}</TooltipContent>
+                </PopoverTrigger>
+              <PopoverContent className="w-96 p-3" align="end" side="bottom" sideOffset={4}>
+                <AISuggestedPrompts
+                  categories={[m.story_askAi_cat_all(), m.story_askAi_cat_analysis(), m.story_askAi_cat_refine(), m.story_askAi_cat_test()]}
+                  onSelect={handleAskAiSelect}
+                  prompts={storyPrompts}
+                  showCategories
+                  showSearch={false}
+                />
+              </PopoverContent>
+            </Popover>
+          )}
+
           {!hideTransfer && projects && onTransferred && storyId && (
             <TransferStoryPopover
               storyId={storyId}
@@ -275,22 +309,18 @@ export function StoryPanelHeader({
 
           {!hideCopyLink && (
             <Tooltip>
-              <TooltipTrigger asChild>
-                <Button variant="ghost" size="icon" className="size-8" onClick={handleCopyLink} aria-label={m.story_panel_copyLink()}>
+              <TooltipTrigger render={<Button variant="ghost" size="icon" className="size-8" onClick={handleCopyLink} aria-label={m.story_panel_copyLink()} />}>
                   <Link2 className="size-4" />
-                </Button>
-              </TooltipTrigger>
+                </TooltipTrigger>
               <TooltipContent>{m.story_panel_copyLink()}</TooltipContent>
             </Tooltip>
           )}
 
           {!hideMoreMenu && storyId && (onArchived || onDeleted) && (
             <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="icon" className="size-8" aria-label={m.story_panel_more()}>
+              <DropdownMenuTrigger render={<Button variant="ghost" size="icon" className="size-8" aria-label={m.story_panel_more()} />}>
                   <MoreHorizontal className="size-4" />
-                </Button>
-              </DropdownMenuTrigger>
+                </DropdownMenuTrigger>
               <DropdownMenuContent align="end" className="w-40" sideOffset={4}>
                 {onArchived && (
                   <>

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

@@ -115,8 +115,7 @@ export function StoryToolbar({ filters, filterConditions, onFilterChange, onFilt
     <div className="flex flex-col gap-3">
       <div className="flex items-center gap-2">
         <Popover open={projectOpen} onOpenChange={setProjectOpen}>
-          <PopoverTrigger asChild>
-             <Button variant="outline" size="sm" className="h-8 gap-1.5 border-0 px-2.5 text-sm font-medium shrink-0 hover:bg-muted" onMouseEnter={() => setProjectHover(true)} onMouseLeave={() => setProjectHover(false)}>
+          <PopoverTrigger render={<Button variant="outline" size="sm" className="h-8 gap-1.5 border-0 px-2.5 text-sm font-medium shrink-0 hover:bg-muted" onMouseEnter={() => setProjectHover(true)} onMouseLeave={() => setProjectHover(false)} />}>
                {filters.projectId === "__archived__" ? (
                  <Archive className="size-4 text-muted-foreground" />
                ) : filters.projectId ? (
@@ -125,8 +124,7 @@ export function StoryToolbar({ filters, filterConditions, onFilterChange, onFilt
                  <Trees className="size-4 text-muted-foreground" />
                )}
                {filters.projectId === "__archived__" ? m.story_toolbar_archived() : filters.projectId ? (projects.find((p) => p.id === filters.projectId)?.name ?? m.story_toolbar_project()) : m.story_toolbar_allProjects()}
-            </Button>
-          </PopoverTrigger>
+            </PopoverTrigger>
           <PopoverContent className="w-56 p-1" align="start">
             <div className="[&>button+button]:mt-1">
             <button
@@ -226,11 +224,9 @@ export function StoryToolbar({ filters, filterConditions, onFilterChange, onFilt
             <Plus className="size-4" /> {m.story_toolbar_addStory()}
           </Button>
           <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="outline" size="icon" className="h-8 w-8">
+            <DropdownMenuTrigger render={<Button variant="outline" size="icon" className="h-8 w-8" />}>
                 <MoreHorizontal className="size-4" />
-              </Button>
-            </DropdownMenuTrigger>
+              </DropdownMenuTrigger>
             <DropdownMenuContent align="end" className="w-44 space-y-1.5 py-1.5">
               <DropdownMenuItem>
                 <MessagesSquare className="size-4 mr-2 h-6" />

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

@@ -30,7 +30,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { toast } from "sonner";
+import { toast } from "@/components/ui/toast";
 import { transferStoryToProjectFn, transferStoryAsChildFn } from "@/server/serverFns/story";
 import { StorySelectDialog } from "./inline-editors/story-select-dialog";
 import { m } from "@/paraglide/messages.js";
@@ -153,19 +153,23 @@ export function TransferStoryPopover({
     <>
       <Popover open={open} onOpenChange={handleOpenChange}>
         <Tooltip>
-          <TooltipTrigger asChild>
-            <PopoverTrigger asChild>
-              {trigger ?? (
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="size-8"
-                  aria-label={m.story_transfer_transfer()}
-                >
-                  <GitCompareArrows className="size-4" />
-                </Button>
-              )}
-            </PopoverTrigger>
+          <TooltipTrigger
+            render={
+              <PopoverTrigger
+      render={
+        (trigger as React.ReactElement) ?? (
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="size-8"
+                      aria-label={m.story_transfer_transfer()}
+                    />
+                  )
+                }
+              />
+            }
+          >
+            <GitCompareArrows className="size-4" />
           </TooltipTrigger>
           <TooltipContent>
             {isBatch ? m.story_transfer_transferCount({ count: storyIds.length }) : m.story_transfer_transfer()}

package/src/components/story/views/calendar-view.tsx

@@ -25,7 +25,7 @@ import {
   type DragEndEvent,
 } from "@dnd-kit/react";
 import { useServerFn } from "@tanstack/react-start";
-import { toast } from "sonner";
+import { toast } from "@/components/ui/toast";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -254,14 +254,10 @@ function DayCell({ date, inMonth, isToday, stories, onCreate, onOpenStory }: {
         {stories.slice(0, 3).map((s) => <CalendarCard key={s.id} story={s} onOpenStory={onOpenStory} />)}
         {stories.length > 3 && (
           <Dialog>
-            <DialogTrigger asChild>
-              <button
-                type="button"
-                className="text-left text-[10px] text-muted-foreground hover:text-foreground"
-              >
+            <DialogTrigger render={<button type="button"
+                className="text-left text-[10px] text-muted-foreground hover:text-foreground" />}>
                 +{stories.length - 3} {m.story_calendar_more()}
-              </button>
-            </DialogTrigger>
+              </DialogTrigger>
             <DialogContent className="max-w-md">
               <DialogHeader>
                 <DialogTitle>{m.story_calendar_dayStories({ date: formatDate(date), count: stories.length })}</DialogTitle>

package/src/components/story/views/create-view-dialog.tsx

@@ -151,20 +151,16 @@ export function CreateViewDialog({ open, onOpenChange, mode, initialValues, view
         <div className="space-y-3 overflow-y-auto px-4 py-2 max-h-[60vh]">
           <div className="space-y-3">
             <Popover open={projectOpen} onOpenChange={setProjectOpen}>
-              <PopoverTrigger asChild>
-                <Button
-                  variant="outline"
+              <PopoverTrigger render={<Button variant="outline"
                   size="sm"
-                  className="h-8 gap-1.5 border-0 bg-muted/50 px-2.5 text-sm font-medium"
-                >
+                  className="h-8 gap-1.5 border-0 bg-muted/50 px-2.5 text-sm font-medium" />}>
                   {selectedProject ? (
                     <LucideIconByName name={selectedProject.icon} size={16} />
                   ) : (
                     <Trees className="size-4 text-muted-foreground" />
                   )}
                   {selectedProject?.name ?? m.story_view_allProjects()}
-                </Button>
-              </PopoverTrigger>
+                </PopoverTrigger>
               <PopoverContent className="w-56 p-1" align="start">
                 <div className="[&>button+button]:mt-1">
                   <button

package/src/components/story/views/kanban-board.tsx

@@ -24,7 +24,7 @@ import {
   type DragEndEvent,
 } from "@dnd-kit/react";
 import { useServerFn } from "@tanstack/react-start";
-import { toast } from "sonner";
+import { toast } from "@/components/ui/toast";
 import { updateStoryFn, reorderStoriesFn } from "@/server/serverFns/story";
 import type { StoryListItem, UserBrief } from "../types";
 import type { DisplayOptions, DisplayProperty, GroupNode } from "../display/types";

package/src/components/story/views/story-list/__tests__/batch-toolbar.test.tsx

@@ -105,19 +105,19 @@ describe("BatchToolbar", () => {
     renderWithProviders(<BatchToolbar {...baseProps} />);
     expect(screen.getByText("已选 2 条")).toBeTruthy();
     const checkbox = screen.getByRole("checkbox", { name: "全选" });
-    expect((checkbox as HTMLButtonElement).getAttribute("data-state")).toBe("indeterminate");
+    expect((checkbox as HTMLButtonElement).getAttribute("aria-checked")).toBe("mixed");
   });
 
   it("allSelected 时复选框 checked", () => {
     renderWithProviders(<BatchToolbar {...baseProps} allSelected />);
     const checkbox = screen.getByRole("checkbox", { name: "全选" });
-    expect((checkbox as HTMLButtonElement).getAttribute("data-state")).toBe("checked");
+    expect((checkbox as HTMLButtonElement).getAttribute("aria-checked")).toBe("true");
   });
 
   it("部分选中时复选框 indeterminate", () => {
     renderWithProviders(<BatchToolbar {...baseProps} selectedCount={3} totalLoaded={5} allSelected={false} />);
     const checkbox = screen.getByRole("checkbox", { name: "全选" });
-    expect((checkbox as HTMLButtonElement).getAttribute("data-state")).toBe("indeterminate");
+    expect((checkbox as HTMLButtonElement).getAttribute("aria-checked")).toBe("mixed");
   });
 
   it("onToggleAll 点击全选触发", () => {

package/src/components/story/views/story-list/batch-preview-dialog.tsx

@@ -35,7 +35,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { toast } from "sonner";
+import { toast } from "@/components/ui/toast";
 import { cn } from "@/lib/utils";
 import {
   STATE_COLOR,
@@ -263,24 +263,20 @@ export function BatchPreviewDialog({
         <div className="space-y-2 px-1 pb-2">
           <div className="flex items-center gap-2 px-3">
             <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 < allDisplayStates.length
                       && "border-primary/40 text-primary"
-                  )}
-                >
+                  )} />}>
                   <ListFilter className="size-3.5" />
                   {m.story_column_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">
                 {displayStates.map((value) => {
                   const state = value as StoryState;
@@ -313,24 +309,20 @@ export function BatchPreviewDialog({
             </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 < allDisplayPriorities.length
                       && "border-primary/40 text-primary"
-                  )}
-                >
+                  )} />}>
                   <Flag className="size-3.5" />
                   {m.story_column_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);
@@ -408,7 +400,8 @@ export function BatchPreviewDialog({
               }}
             >
               <Checkbox
-                checked={allChecked}
+                checked={allChecked === true}
+                indeterminate={allChecked === "indeterminate"}
                 onClick={(e) => e.stopPropagation()}
                 onCheckedChange={handleSelectAll}
                 aria-label={m.story_batchPreview_selectAll()}
@@ -427,14 +420,10 @@ export function BatchPreviewDialog({
                   {m.story_batchPreview_confirmHint()}
                 </span>
                 <Tooltip>
-                  <TooltipTrigger asChild>
-                    <span
-                      className="shrink-0 font-mono text-xs text-foreground cursor-pointer"
-                      onClick={handleCopyConfirmText}
-                    >
+                  <TooltipTrigger render={<span className="shrink-0 font-mono text-xs text-foreground cursor-pointer"
+                      onClick={handleCopyConfirmText} />}>
                       {confirmText}
-                    </span>
-                  </TooltipTrigger>
+                    </TooltipTrigger>
                   <TooltipContent side="top" className="text-xs">
                     {m.story_batchPreview_copyHint()}
                   </TooltipContent>

package/src/components/story/views/story-list/batch-toolbar.tsx

@@ -15,7 +15,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-import { useState } from "react";
+import { useState, type ReactElement } from "react";
 import { ArrowUp, ArrowDown, Archive, Trash2, BrushCleaning, CalendarCheck, CalendarPlus2, GitCompareArrows, Waypoints } from "lucide-react";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Button } from "@/components/ui/button";
@@ -99,22 +99,19 @@ export function BatchToolbar({
     <>
       <div className="flex h-10 shrink-0 items-center gap-2 border-t bg-background px-3">
         <Checkbox
-          checked={checked}
+          checked={checked === true}
+          indeterminate={checked === "indeterminate"}
           onCheckedChange={onToggleAll}
           aria-label={m.story_ai_selectAll()}
         />
         <span className="text-xs shrink-0 text-muted-foreground">{m.story_batchToolbar_selected({ count: selectedCount })}</span>
         <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant="ghost"
+          <TooltipTrigger render={<Button variant="ghost"
               size="icon"
               className="size-7 text-muted-foreground hover:text-foreground"
-              onClick={onClearSelection}
-            >
+              onClick={onClearSelection} />}>
               <BrushCleaning className="size-4" />
-            </Button>
-          </TooltipTrigger>
+            </TooltipTrigger>
           <TooltipContent side="top" className="text-xs">
             {m.story_batchToolbar_clear()}
           </TooltipContent>
@@ -219,7 +216,7 @@ function ToolbarIconButton({
     button
   ) : (
     <Tooltip>
-      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipTrigger render={button as ReactElement} />
       <TooltipContent side="top" className="text-xs">
         {label}
       </TooltipContent>

package/src/components/story/views/story-list/group.tsx

@@ -62,7 +62,8 @@ export const VirtualGroupHeader = memo(function VirtualGroupHeader({ node, depth
     <div className={cn("flex h-full items-center", sticky ? (depth === 0 ? "bg-[color-mix(in_oklch,var(--muted)_50%,var(--card)_50%)]" : "bg-[color-mix(in_oklch,var(--muted)_35%,var(--card)_65%)]") : depth === 0 ? "bg-muted/50" : "bg-muted/35", depth > 0 && "pl-4")}>
       {showSelect && (
         <Checkbox
-          checked={selectState}
+          checked={selectState === true}
+          indeterminate={selectState === "indeterminate"}
           onCheckedChange={onToggleSelect}
           aria-label={m.story_group_selectAll({ label: node.label })}
           className="ml-2 shrink-0"

package/src/components/story/views/story-list/index.tsx

@@ -24,7 +24,7 @@ import {
   bulkUpdateStoriesFn,
   reorderStoriesFn,
 } from "@/server/serverFns/story";
-import { toast } from "sonner";
+import { toast } from "@/components/ui/toast";
 import type { UserBrief, StoryListItem } from "../../types";
 import type { StoryState, StoryPriority } from "../../constants";
 import type { DisplayOptions, DisplayProperty } from "../../display/types";

package/src/components/story/views/story-list/row.tsx

@@ -17,7 +17,7 @@
 
 import { memo, useCallback, useMemo } from "react";
 import { useServerFn } from "@tanstack/react-start";
-import { toast } from "sonner";
+import { toast } from "@/components/ui/toast";
 import { CalendarCheck, CalendarPlus2 } from "lucide-react";
 import { Checkbox } from "@/components/ui/checkbox";
 import { updateStoryFn } from "@/server/serverFns/story";

package/src/components/story/views/timeline-view.tsx

@@ -24,7 +24,7 @@ import {
   type DragEndEvent,
 } from "@dnd-kit/react";
 import { useServerFn } from "@tanstack/react-start";
-import { toast } from "sonner";
+import { toast } from "@/components/ui/toast";
 import { Button } from "@/components/ui/button";
 import { updateStoryFn } from "@/server/serverFns/story";
 import { buildTimelineRange, getRangeFromDates, parseDate, formatDate } from "@/lib/date-utils";

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

@@ -141,16 +141,12 @@ function ViewRow({ view, active, onApply, onEdit, onDelete }: ViewRowProps) {
             <Pencil className="size-3" />
           </button>
           <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
-            <AlertDialogTrigger asChild>
-              <button
-                type="button"
+            <AlertDialogTrigger render={<button type="button"
                 aria-label={m.story_view_delete()}
                 title={m.story_view_delete()}
-                className="grid size-5 place-items-center rounded text-muted-foreground hover:bg-background hover:text-destructive"
-              >
+                className="grid size-5 place-items-center rounded text-muted-foreground hover:bg-background hover:text-destructive" />}>
                 <Trash2 className="size-3" />
-              </button>
-            </AlertDialogTrigger>
+              </AlertDialogTrigger>
             <AlertDialogContent>
               <AlertDialogHeader>
                 <AlertDialogTitle>{m.story_view_deleteTitle()}</AlertDialogTitle>

package/src/components/story/views/view-selector-button.tsx

@@ -45,13 +45,11 @@ export function ViewSelectorButton({ views, activeViewId, projects, onApplyView,
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-         <Button variant="outline" size="sm" className="h-8 gap-1.5 border-0 px-2.5 text-sm font-medium shrink-0 hover:bg-muted">
+      <PopoverTrigger render={<Button variant="outline" size="sm" className="h-8 gap-1.5 border-0 px-2.5 text-sm font-medium shrink-0 hover:bg-muted" />}>
           <Icon className="size-4 text-muted-foreground" />
           {active?.name ?? m.story_view_default()}
           <ChevronsUpDown className="size-3 text-muted-foreground" />
-        </Button>
-      </PopoverTrigger>
+        </PopoverTrigger>
       <PopoverContent className="w-56 p-1" align="start">
         <div className="flex flex-col gap-1">
           {views.length === 0 && (

package/src/components/story/views/view-switcher.tsx

@@ -48,20 +48,16 @@ export function ViewSwitcher({ view, onViewChange }: ViewSwitcherProps) {
         const active = view === v.value;
         return (
           <Tooltip key={v.value}>
-            <TooltipTrigger asChild>
-              <button
-                type="button"
+            <TooltipTrigger render={<button type="button"
                 onClick={() => onViewChange(v.value)}
                 aria-pressed={active}
                 className={cn(
                   "flex h-7 w-8 items-center justify-center rounded transition-colors",
                   active ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground",
                 )}
-                aria-label={v.label()}
-              >
+                aria-label={v.label()} />}>
                 <Icon className="size-4" />
-              </button>
-            </TooltipTrigger>
+              </TooltipTrigger>
             <TooltipContent side="bottom">{v.label()}</TooltipContent>
           </Tooltip>
         );