@allbluecn/web-app 0.18.2 → 0.19.0

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

@@ -15,261 +15,528 @@
 // 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 { memo, useEffect, useMemo, useState } from "react";
-import { ChevronLeft, ChevronRight, Plus } from "lucide-react";
-import {
-  DragDropProvider,
-  DragOverlay,
-  useDroppable,
-  useDraggable,
-  type DragEndEvent,
-} from "@dnd-kit/react";
+/**
+ * 需求日历 = reui EventCalendar 组装（四视图 + 设置面板 + 自定义 chip + 未排期区）。
+ *
+ * 数据流：props.stories → applyOrder → override map 叠加（乐观改期，复用甘特
+ * useDateCommit：同步门卫 + 异步落库 + 失败还原）→ isUnscheduled 拆分
+ * （任一日期存在即入日历，全无落未排期区）→ storyToCalendarEvents 派生。
+ * 创建预填（任务 5）：hover "+"/单击日期 onSlotClick、拖选范围 onSelectSlot
+ * → onCreate 预填弹窗（allDay 拖选尾日 = draft.end − 1 半开换算；timed 拖选
+ * 单日防倒挂）。未排期双通道排期（任务 6）：①月视图 HTML5 拖入日历格
+ * （renderMonthCell drop 层，dragover 阶段只设 effect 不读 data）；②chip 尾部
+ * 「排期」按钮 → Popover 选日（全视图兜底）。两通道同走 commitStoryRange
+ * （同日起止形态转换），乐观呈现 = onCommit 写 override 令 startDate 非空、
+ * 派生链自动移出未排期区。受控 events 使手势提交不落库。
+ */
+import { useCallback, useMemo, useRef, useState } from "react";
 import { useServerFn } from "@tanstack/react-start";
+import { addDays, startOfDay } from "date-fns";
+import { ClockIcon, Settings2Icon } from "lucide-react";
 import { toast } from "@/components/ui/toast";
+import { formatDateLocal } from "@/lib/datetime";
+import { cn } from "@/lib/utils";
+import { updateStoryFn } from "@/server/serverFns/story";
 import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Label } from "@/components/ui/label";
 import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { updateStoryFn } from "@/server/serverFns/story";
-import { getMonthGrid, getWeekGrid, formatDateLocal, isSameDay, parseDate } from "@/lib/datetime";
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { UserAvatar } from "@/components/shared-kit/avatars/user-avatar";
+import { m } from "@/paraglide/messages.js";
+import {
+  EventCalendar,
+  type EventCalendarRenderEventProps,
+} from "@/components/reui/event-calendar/event-calendar";
+import {
+  EventCalendarNav,
+  EventCalendarNavNext,
+  EventCalendarNavPrev,
+  EventCalendarNavToday,
+  EventCalendarTitle,
+  EventCalendarViewSwitcher,
+} from "@/components/reui/event-calendar/event-calendar-nav";
+import { EventCalendarContent } from "@/components/reui/event-calendar/event-calendar-content";
+import type {
+  EventCalendarInteractions,
+  EventCalendarOccurrence,
+  EventCalendarProposedUpdate,
+  EventCalendarSlotDraft,
+  EventCalendarSlotInfo,
+  EventCalendarViewSettings,
+} from "@/components/reui/event-calendar/event-calendar-types";
+import type { WeekStartsOn } from "@/components/reui/event-calendar/event-calendar-lib";
 import type { StoryListItem } from "../types";
 import { applyOrder } from "../display/order-resolver";
 import type { OrderKey } from "../display/types";
-import { cn } from "@/lib/utils";
-import { m } from "@/paraglide/messages.js";
-import { toastError } from "@/lib/toast-error";
-
-const CalendarCard = memo(function CalendarCard({ story, onOpenStory }: { story: StoryListItem; onOpenStory: (id: string) => void }) {
-  const { ref, isDragging } = useDraggable({ id: story.id });
-  return (
-    <div
-      ref={ref}
-      className={cn("cursor-grab truncate rounded px-1 text-xs text-primary hover:bg-accent", isDragging && "opacity-50")}
-    >
-      <button
-        type="button"
-        onClick={(e) => {
-          e.stopPropagation();
-          onOpenStory(story.id);
-        }}
-        className="w-full truncate text-left"
-      >
-        {story.identifier} {story.name}
-      </button>
-    </div>
-  );
-});
+import {
+  isUnscheduled,
+  mergeStoryOverrides,
+  storyToCalendarEvents,
+} from "./calendar/mappers";
+import {
+  buildCalendarI18n,
+  calendarDateFnsLocale,
+} from "./calendar/i18n";
+import { slotDraftToPrefill } from "./calendar/slot-draft";
+import {
+  useDateCommit,
+  type StoryDateOverride,
+} from "./timeline/use-date-commit";
+import {
+  resolveDragBlockedToast,
+  type EventCalendarDragBlockedReason,
+} from "./calendar/drag-blocked";
 
 interface CalendarViewProps {
   stories: StoryListItem[];
-  onCreate: (startDate: string) => void;
+  /**
+   * 打开新建需求弹窗：日历格点位（hover "+" / 单击日期）传 startDate；
+   * 拖选范围再传 targetDate（= 拖选尾日，含端点）。
+   */
+  onCreate: (startDate?: string, targetDate?: string) => void;
   onOpenStory: (id: string) => void;
   orderBy: OrderKey;
 }
 
+/** 设置面板的单行开关（label 包裹：点击文案即切换，Switch 继承可访问名） */
+function SettingRow({
+  label,
+  checked,
+  onCheckedChange,
+}: {
+  label: string;
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+}) {
+  return (
+    <Label className="flex items-center justify-between gap-2 font-normal">
+      <span>{label}</span>
+      <Switch checked={checked} onCheckedChange={onCheckedChange} />
+    </Label>
+  );
+}
+
 export function CalendarView({ stories, onCreate, onOpenStory, orderBy }: CalendarViewProps) {
-  const weekdays = m.calendar_weekdays as unknown as string[];
-  const now = new Date();
-  const [mode, setMode] = useState<"month" | "week">("month");
-  const [year, setYear] = useState(now.getFullYear());
-  const [month, setMonth] = useState(now.getMonth());
-  const [weekDay, setWeekDay] = useState(now.getDate());
-  const [localStories, setLocalStories] = useState(stories);
-  const [dragSource, setDragSource] = useState<StoryListItem | null>(null);
-  useEffect(() => { setLocalStories(stories); }, [stories]);
-  const updateStory = useServerFn(updateStoryFn);
+  // ── 视图设置（Settings Popover 两 tab；初始值即产品默认） ────────────
+  const [viewSettings, setViewSettings] = useState<EventCalendarViewSettings>({
+    weekends: true,
+    weekNumbers: false,
+    nowIndicator: true,
+    offDays: false,
+  });
+  const [interactions, setInteractions] = useState<EventCalendarInteractions>({
+    drag: true,
+    resize: true,
+    selectSlot: true,
+  });
+  const [weekStartsOn, setWeekStartsOn] = useState<WeekStartsOn>(1);
+  const [showDayAddButton, setShowDayAddButton] = useState(true);
 
-  const grid = useMemo(
-    () => (mode === "month" ? getMonthGrid(year, month) : getWeekGrid(year, month, weekDay)),
-    [mode, year, month, weekDay],
+  // ── 乐观改期：override map（storyId → 覆盖日期），复用甘特 useDateCommit ──
+  const updateStory = useServerFn(updateStoryFn);
+  const [overrides, setOverrides] = useState(
+    () => new Map<string, StoryDateOverride>(),
   );
-  const scheduled = useMemo(() => applyOrder(localStories.filter((s) => s.startDate), orderBy), [localStories, orderBy]);
-  const unscheduled = useMemo(() => applyOrder(localStories.filter((s) => !s.startDate), orderBy), [localStories, orderBy]);
+  const handleCommit = useCallback((storyId: string, dates: StoryDateOverride) => {
+    setOverrides((prev) => new Map(prev).set(storyId, dates));
+  }, []);
+  const handleReject = useCallback((storyId: string) => {
+    setOverrides((prev) => {
+      if (!prev.has(storyId)) return prev;
+      const next = new Map(prev);
+      next.delete(storyId);
+      return next;
+    });
+  }, []);
+  const { commitStoryRange, isCommitPending } = useDateCommit(updateStory, {
+    onCommit: handleCommit,
+    onReject: handleReject,
+  });
 
-  const storiesByDay = useMemo(() => {
-    const map = new Map<string, StoryListItem[]>();
-    for (const s of scheduled) {
-      const k = formatDateLocal(parseDate(s.startDate!));
-      const list = map.get(k);
-      if (list) list.push(s);
-      else map.set(k, [s]);
+  // ── 派生链：排序 → override 叠加 → 排期/未排期拆分 → 日历事件 ────────
+  const ordered = useMemo(() => applyOrder(stories, orderBy), [stories, orderBy]);
+  const withOverrides = useMemo(
+    () => mergeStoryOverrides(ordered, overrides, isCommitPending),
+    [ordered, overrides, isCommitPending],
+  );
+  const { scheduled, unscheduled } = useMemo(() => {
+    const scheduled: StoryListItem[] = [];
+    const unscheduled: StoryListItem[] = [];
+    for (const s of withOverrides) {
+      if (isUnscheduled(s)) unscheduled.push(s);
+      else scheduled.push(s);
     }
-    return map;
-  }, [scheduled]);
+    return { scheduled, unscheduled };
+  }, [withOverrides]);
+  const events = useMemo(() => storyToCalendarEvents(scheduled), [scheduled]);
+  const calendarI18n = useMemo(() => buildCalendarI18n(), []);
+
+  // ── 未排期双通道排期（任务 6） ────────────────────────────────────────
+  // 拖入高亮：当前 hover 的月份格日键。HTML5 DnD 无 hover 伪类，此处是
+  // 全组件唯一以 state 实现的 hover 视觉；enter/leave 计数防子元素进出抖动
+  // （月份格互斥，单一计数器跨格成立：任一时刻至多悬停于一格内）
+  const [dragOverDay, setDragOverDay] = useState<string | null>(null);
+  const dragEnterDepth = useRef(0);
+  // 拖拽任意终点（drop/Esc/落格 outside）后清高亮：onDrop 与 chip 的
+  // onDragEnd 双侧兜底，避免取消路径残留 ring
+  const clearDragHighlight = useCallback(() => {
+    dragEnterDepth.current = 0;
+    setDragOverDay(null);
+  }, []);
+  // drop 落库：从拖拽载荷取 storyId，在 override 合并后的列表中查回 story
+  //（id 失效如数据已刷新则静默放弃）；[day, day+1) 半开区间经
+  // fromGanttRangeToStoryDates 落成 { startDate: 当日, targetDate: 当日 }；
+  // 门卫拒绝（cancelled 只读）时以现成文案 toast 反馈
+  const dropStoryOnDay = useCallback(
+    (day: Date, dataTransfer: DataTransfer): void => {
+      const storyId = dataTransfer.getData("text/story-id");
+      if (!storyId) return;
+      const story = withOverrides.find((s) => s.id === storyId);
+      if (!story) return;
+      const dayStart = startOfDay(day);
+      if (!commitStoryRange(story, dayStart, addDays(dayStart, 1))) {
+        toast.info(m.story_calendar_readonlyCancelled());
+      }
+    },
+    [withOverrides, commitStoryRange],
+  );
+  // 通道二：「排期」Popover 当前打开的 story（单态而非每 chip 一份 state）。
+  // 选日回调含 undefined（点已选日取消选择），关弹层须在分支外兜住
+  const [scheduleStoryId, setScheduleStoryId] = useState<string | null>(null);
+  const handleSchedulePick = useCallback(
+    (story: StoryListItem, day: Date | undefined) => {
+      setScheduleStoryId(null);
+      if (!day) return;
+      const dayStart = startOfDay(day);
+      if (!commitStoryRange(story, dayStart, addDays(dayStart, 1))) {
+        toast.info(m.story_calendar_readonlyCancelled());
+      }
+    },
+    [commitStoryRange],
+  );
 
-  const handleDragStart = (event: { operation: { source: { id: unknown } | null } }) => {
-    const sourceId = event.operation.source?.id;
-    if (sourceId == null) return;
-    setDragSource(localStories.find((s) => s.id === String(sourceId)) ?? null);
-  };
+  // ── 交互：点击 chip 开 Peek；slot 创建预填见 handleSlotClick/handleSelectSlot ──
+  const handleEventClick = useCallback(
+    (occurrence: EventCalendarOccurrence<StoryListItem>) => {
+      if (occurrence.event.data) onOpenStory(occurrence.event.data.id);
+    },
+    [onOpenStory],
+  );
 
-  const handleDragEnd = async (event: DragEndEvent) => {
-    if (event.canceled) return;
-    setDragSource(null);
-    const active = event.operation.source;
-    const over = event.operation.target;
-    if (!over) return;
-    const story = localStories.find((s) => s.id === String(active?.id ?? ""));
-    if (!story) return;
-    const targetDate = String(over.id);
-    if (story.startDate && formatDateLocal(parseDate(story.startDate)) === targetDate) return;
-    const prev = localStories;
-    setLocalStories(localStories.map((s) => (s.id === story.id ? { ...s, startDate: targetDate } : s)));
-    try {
-      await updateStory({ data: { storyId: story.id, startDate: targetDate } });
-      toast.success(m.story_calendar_dateUpdated());
-    } catch (e) {
-      setLocalStories(prev);
-      toastError(e, m.story_calendar_dateUpdateFailed());
-    }
-  };
+  // 创建预填：hover "+" 与单击日期 → 预填开始日；拖选范围 → 开始+截止
+  // （allDay 半开尾日换算 / timed 单日防倒挂，口径见 calendar/slot-draft.ts）。
+  // 单日点击宽度不足激活阈值时组件走 onSlotClick 分支，两分支互斥由组件保证
+  const handleSlotClick = useCallback(
+    (slot: EventCalendarSlotInfo) => {
+      onCreate(formatDateLocal(slot.date));
+    },
+    [onCreate],
+  );
+  const handleSelectSlot = useCallback(
+    (draft: EventCalendarSlotDraft) => {
+      const { startDate, targetDate } = slotDraftToPrefill(draft);
+      onCreate(startDate, targetDate);
+    },
+    [onCreate],
+  );
+
+  // 同步门卫：true 接受手势（乐观态由 onCommit 写入），false 拒绝还原
+  // （cancelled 由 hook 二道防线拒绝）；异步落库/失败回滚在 useDateCommit 内部
+  const handleEventUpdate = useCallback(
+    (update: EventCalendarProposedUpdate<StoryListItem>): boolean => {
+      const story = update.event.data;
+      if (!story) return false;
+      return commitStoryRange(story, update.start, update.end);
+    },
+    [commitStoryRange],
+  );
+  // 阻止手势的分支文案：readOnly=cancelled 只读、disabled=单日期不可拉伸、
+  // interactions-off=用户自关开关不弹；reui 只给 not-allowed 光标，消息在此弹出
+  const handleDragBlocked = useCallback(
+    (
+      _occurrence: EventCalendarOccurrence<StoryListItem>,
+      info: { reason: EventCalendarDragBlockedReason },
+    ) => {
+      const message = resolveDragBlockedToast(info.reason);
+      if (message) toast.info(message);
+    },
+    [],
+  );
 
-  const goToToday = () => {
-    const today = new Date();
-    setYear(today.getFullYear());
-    setMonth(today.getMonth());
-    setWeekDay(today.getDate());
-  };
+  // 色底由 chip wrapper 消费 event.color 注入的 --ec-event-color，内容只负责
+  // 图标/标题/负责人。renderEvent 覆盖月/周/日视图 chip；agenda 用 reui 默认行。
+  const renderEvent = useCallback(
+    ({ occurrence, view }: EventCalendarRenderEventProps<StoryListItem>) => {
+      const story = occurrence.event.data;
+      if (!story) return null;
+      const assignee = story.assignee;
+      return (
+        <>
+          {!story.startDate && (
+            <ClockIcon className="size-3 shrink-0" aria-hidden="true" />
+          )}
+          <span className="truncate">
+            {story.identifier} {story.name}
+          </span>
+          {view !== "month" && assignee ? (
+            <UserAvatar
+              avatarConfig={assignee.avatarConfig}
+              bgShape={assignee.bgShape}
+              bgColor={assignee.bgColor}
+              name={assignee.username}
+              size="xs"
+              className="ml-auto shrink-0"
+            />
+          ) : null}
+        </>
+      );
+    },
+    [],
+  );
 
-  return (
-    <div className="flex h-full flex-col gap-3">
-      <div className="flex items-center gap-2">
-        <Button variant="outline" size="sm" onClick={goToToday}>{m.story_calendar_today()}</Button>
-        <Button variant="ghost" size="sm" onClick={() => {
-          if (mode === "month") {
-            const d = new Date(year, month - 1, 1);
-            setYear(d.getFullYear());
-            setMonth(d.getMonth());
-          } else {
-            const d = new Date(year, month, weekDay - 7);
-            setYear(d.getFullYear());
-            setMonth(d.getMonth());
-            setWeekDay(d.getDate());
-          }
-        }}>
-          <ChevronLeft className="size-4" />
-        </Button>
-        <Button variant="ghost" size="sm" onClick={() => {
-          if (mode === "month") {
-            const d = new Date(year, month + 1, 1);
-            setYear(d.getFullYear());
-            setMonth(d.getMonth());
-          } else {
-            const d = new Date(year, month, weekDay + 7);
-            setYear(d.getFullYear());
-            setMonth(d.getMonth());
-            setWeekDay(d.getDate());
-          }
-        }}>
-          <ChevronRight className="size-4" />
-        </Button>
-        <span className="text-sm font-medium">
-          {mode === "month" ? m.story_calendar_monthTitle({ year, month: month + 1 }) : `${formatDateLocal(grid[0].date)} ~ ${formatDateLocal(grid[6].date)}`}
-        </span>
-        <div className="ml-auto flex items-center rounded-md border bg-muted/50 p-0.5">
-          <Button variant={mode === "month" ? "default" : "ghost"} size="sm" className="h-7 px-3" onClick={() => setMode("month")}>{m.story_calendar_month()}</Button>
-          <Button variant={mode === "week" ? "default" : "ghost"} size="sm" className="h-7 px-3" onClick={() => setMode("week")}>{m.story_calendar_week()}</Button>
-        </div>
-      </div>
+  const patchViewSettings = useCallback(
+    (patch: EventCalendarViewSettings) =>
+      setViewSettings((prev) => ({ ...prev, ...patch })),
+    [],
+  );
+  const patchInteractions = useCallback(
+    (patch: EventCalendarInteractions) =>
+      setInteractions((prev) => ({ ...prev, ...patch })),
+    [],
+  );
 
-      <div className="min-h-0 flex-1 overflow-auto">
-        <DragDropProvider onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
-          <div className="grid grid-cols-7 border-b">
-            {weekdays.map((w) => (
-              <div key={w} className="px-2 py-1 text-center text-xs font-medium text-muted-foreground">{w}</div>
-            ))}
-          </div>
-          <div className="grid grid-cols-7">
-            {grid.map(({ date, inMonth }) => (
-              <DayCell
-                key={formatDateLocal(date)}
-                date={date}
-                inMonth={inMonth}
-                isToday={isSameDay(date, now)}
-                stories={storiesByDay.get(formatDateLocal(date)) ?? []}
-                onCreate={onCreate}
-                onOpenStory={onOpenStory}
-              />
-            ))}
-          </div>
-          <DragOverlay dropAnimation={null}>
-            {dragSource ? (
-              <div className="truncate rounded px-1 text-xs text-primary shadow-lg">
-                {dragSource.identifier} {dragSource.name}
+  return (
+    <div className="flex h-full flex-col">
+      <div className="min-h-0 flex-1">
+        <EventCalendar
+          className="h-full"
+          views={["month", "week", "day", "agenda"]}
+          events={events}
+          defaultView="month"
+          locale={calendarDateFnsLocale()}
+          i18n={calendarI18n}
+          viewSettings={viewSettings}
+          onViewSettingsChange={setViewSettings}
+          interactions={interactions}
+          onInteractionsChange={setInteractions}
+          weekStartsOn={weekStartsOn}
+          showDayAddButton={showDayAddButton}
+          onEventClick={handleEventClick}
+          onEventUpdate={handleEventUpdate}
+          onDragBlocked={handleDragBlocked}
+          onSlotClick={handleSlotClick}
+          onSelectSlot={handleSelectSlot}
+          renderEvent={renderEvent}
+          renderMonthCell={({ day, defaultContent }) => {
+            // drop 层包裹 defaultContent（事件容器 + 日期号头整块）：h-full
+            // 令包裹层成为完整 flex 列，内层 defaultContent 的 flex-1/min-h-0
+            // 链不断裂。dragover 阶段浏览器禁止读 data，只 preventDefault +
+            // 设 dropEffect；高亮只在载荷含 story-id 时出现（不响应外来拖拽）
+            const dayKey = formatDateLocal(day);
+            return (
+              <div
+                className={cn(
+                  "flex h-full min-h-0 flex-col",
+                  // inset-ring 画在内侧：格子 overflow-hidden 会裁掉外侧 ring
+                  dragOverDay === dayKey && "inset-ring-1 inset-ring-primary",
+                )}
+                onDragEnter={(e) => {
+                  if (!e.dataTransfer.types.includes("text/story-id")) return;
+                  dragEnterDepth.current += 1;
+                  setDragOverDay(dayKey);
+                }}
+                onDragLeave={() => {
+                  dragEnterDepth.current = Math.max(
+                    0,
+                    dragEnterDepth.current - 1,
+                  );
+                  if (dragEnterDepth.current === 0) setDragOverDay(null);
+                }}
+                onDragOver={(e) => {
+                  if (!e.dataTransfer.types.includes("text/story-id")) return;
+                  e.preventDefault();
+                  e.dataTransfer.dropEffect = "move";
+                }}
+                onDrop={(e) => {
+                  e.preventDefault();
+                  clearDragHighlight();
+                  dropStoryOnDay(day, e.dataTransfer);
+                }}
+              >
+                {defaultContent}
+              </div>
+            );
+          }}
+        >
+          {/* Nav 行 = reui 默认组合的同构复刻（传 children 整体替换默认）：
+              TooltipProvider 字面值 = reui 未配置 navTooltips 时的回退值
+              （delay 600 / closeDelay 0 / timeout 300），hover 行为不变。
+              grow 占位后并入设置入口（原工具栏移除，设置与日期导航同行） */}
+          <EventCalendarNav>
+            <TooltipProvider delay={600} closeDelay={0} timeout={300}>
+              <EventCalendarNavToday />
+              <EventCalendarViewSwitcher />
+              <div className="flex items-center">
+                <EventCalendarNavPrev />
+                <EventCalendarNavNext />
               </div>
-            ) : null}
-          </DragOverlay>
-        </DragDropProvider>
+              {/* ms-3 sets the title apart from the tight control cluster so the
+                  period reads as its own group, not another button */}
+              <EventCalendarTitle className="ms-3" />
+              <div className="grow" />
+              <Popover>
+                <PopoverTrigger
+                  render={
+                    <Button
+                      variant="ghost"
+                      size="icon-sm"
+                      aria-label={m.story_calendar_settings()}
+                    />
+                  }
+                >
+                  <Settings2Icon className="size-4" aria-hidden="true" />
+                </PopoverTrigger>
+                <PopoverContent align="end" className="w-64">
+                  <Tabs defaultValue="view">
+                    <TabsList className="w-full">
+                      <TabsTrigger value="view" className="flex-1">
+                        {m.story_calendar_settings_view()}
+                      </TabsTrigger>
+                      <TabsTrigger value="behavior" className="flex-1">
+                        {m.story_calendar_settings_behavior()}
+                      </TabsTrigger>
+                    </TabsList>
+                    <TabsContent value="view" className="flex flex-col gap-3 pt-2">
+                      <SettingRow
+                        label={m.story_calendar_settings_weekends()}
+                        checked={viewSettings.weekends ?? true}
+                        onCheckedChange={(checked) => patchViewSettings({ weekends: checked })}
+                      />
+                      <SettingRow
+                        label={m.story_calendar_settings_week_numbers()}
+                        checked={viewSettings.weekNumbers ?? false}
+                        onCheckedChange={(checked) => patchViewSettings({ weekNumbers: checked })}
+                      />
+                      <SettingRow
+                        label={m.story_calendar_settings_off_days()}
+                        checked={viewSettings.offDays ?? false}
+                        onCheckedChange={(checked) => patchViewSettings({ offDays: checked })}
+                      />
+                      <SettingRow
+                        label={m.story_calendar_settings_day_add()}
+                        checked={showDayAddButton}
+                        onCheckedChange={setShowDayAddButton}
+                      />
+                      <div className="flex items-center justify-between gap-2">
+                        <Label htmlFor="story-calendar-week-starts-on" className="font-normal">
+                          {m.story_calendar_settings_week_starts_on()}
+                        </Label>
+                        <Select
+                          value={String(weekStartsOn)}
+                          onValueChange={(value) => {
+                            if (value === null) return;
+                            setWeekStartsOn(Number(value) as WeekStartsOn);
+                          }}
+                        >
+                          <SelectTrigger size="sm" className="w-27" id="story-calendar-week-starts-on">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="1">{m.story_calendar_settings_monday()}</SelectItem>
+                            <SelectItem value="0">{m.story_calendar_settings_sunday()}</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </TabsContent>
+                    <TabsContent value="behavior" className="flex flex-col gap-3 pt-2">
+                      <SettingRow
+                        label={m.story_calendar_settings_drag()}
+                        checked={interactions.drag}
+                        onCheckedChange={(checked) => patchInteractions({ ...interactions, drag: checked })}
+                      />
+                      <SettingRow
+                        label={m.story_calendar_settings_resize()}
+                        checked={interactions.resize}
+                        onCheckedChange={(checked) => patchInteractions({ ...interactions, resize: checked })}
+                      />
+                      <SettingRow
+                        label={m.story_calendar_settings_select_slot()}
+                        checked={interactions.selectSlot}
+                        onCheckedChange={(checked) => patchInteractions({ ...interactions, selectSlot: checked })}
+                      />
+                    </TabsContent>
+                  </Tabs>
+                </PopoverContent>
+              </Popover>
+            </TooltipProvider>
+          </EventCalendarNav>
+          <EventCalendarContent />
+        </EventCalendar>
       </div>
 
-      <div className="shrink-0 border-t pt-3">
-        <div className="mb-2 text-xs font-medium text-muted-foreground">{m.story_calendar_unscheduled({ count: unscheduled.length })}</div>
+      <div data-slot="story-calendar-unscheduled" className="shrink-0 border-t pt-3">
+        <div className="mb-2 text-xs font-medium text-muted-foreground">
+          {m.story_calendar_unscheduled({ count: unscheduled.length })}
+        </div>
         <div className="flex flex-wrap gap-2">
           {unscheduled.map((s) => (
-            <button
-              key={s.id}
-              type="button"
-              onClick={() => onOpenStory(s.id)}
-              className="rounded-md border px-2 py-1 text-xs hover:bg-accent"
-            >
-              {s.identifier} {s.name}
-            </button>
+            <div key={s.id} className="flex items-center">
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-7 rounded-r-none border-r-0 px-2 text-xs"
+                draggable
+                onDragStart={(e) => {
+                  e.dataTransfer.setData("text/story-id", s.id);
+                  e.dataTransfer.effectAllowed = "move";
+                }}
+                onDragEnd={clearDragHighlight}
+                onClick={() => onOpenStory(s.id)}
+              >
+                {s.identifier} {s.name}
+              </Button>
+              <Popover
+                open={scheduleStoryId === s.id}
+                onOpenChange={(open) => setScheduleStoryId(open ? s.id : null)}
+              >
+                <PopoverTrigger
+                  render={
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-7 rounded-l-none px-2 text-xs"
+                      // 防冒泡：不触发邻近 chip 点击语义（开 PeekPanel）
+                      onClick={(e) => e.stopPropagation()}
+                    />
+                  }
+                >
+                  {m.story_calendar_schedule()}
+                </PopoverTrigger>
+                <PopoverContent align="start" className="w-auto p-0">
+                  <Calendar
+                    mode="single"
+                    onSelect={(d) => handleSchedulePick(s, d)}
+                  />
+                </PopoverContent>
+              </Popover>
+            </div>
           ))}
         </div>
       </div>
     </div>
   );
 }
-
-function DayCell({ date, inMonth, isToday, stories, onCreate, onOpenStory }: {
-  date: Date;
-  inMonth: boolean;
-  isToday: boolean;
-  stories: StoryListItem[];
-  onCreate: (startDate: string) => void;
-  onOpenStory: (id: string) => void;
-}) {
-  const { ref, isDropTarget } = useDroppable({ id: formatDateLocal(date), disabled: !inMonth });
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "min-h-20 border-b border-r p-1",
-        !inMonth && "bg-muted/40",
-        isDropTarget && "ring-2 ring-primary",
-      )}
-    >
-      <div className="flex items-center justify-between">
-        <span className={cn("text-xs", isToday ? "rounded-full bg-primary px-1.5 text-primary-foreground" : "text-muted-foreground")}>
-          {date.getDate()}
-        </span>
-        <button type="button" onClick={() => onCreate(formatDateLocal(date))} className="text-muted-foreground hover:text-foreground" aria-label={m.story_calendar_createNew({ date: formatDateLocal(date) })}>
-          <Plus className="size-3.5" />
-        </button>
-      </div>
-      <div className="mt-1 flex flex-col gap-1">
-        {stories.slice(0, 3).map((s) => <CalendarCard key={s.id} story={s} onOpenStory={onOpenStory} />)}
-        {stories.length > 3 && (
-          <Dialog>
-            <DialogTrigger render={<button type="button"
-                className="text-left text-[10px] text-muted-foreground hover:text-foreground" />}>
-                +{stories.length - 3} {m.story_calendar_more()}
-              </DialogTrigger>
-            <DialogContent className="max-w-md">
-              <DialogHeader>
-                <DialogTitle>{m.story_calendar_dayStories({ date: formatDateLocal(date), count: stories.length })}</DialogTitle>
-              </DialogHeader>
-              <div className="flex max-h-80 flex-col gap-1 overflow-y-auto py-1">
-                {stories.map((s) => <CalendarCard key={s.id} story={s} onOpenStory={onOpenStory} />)}
-              </div>
-            </DialogContent>
-          </Dialog>
-        )}
-      </div>
-    </div>
-  );
-}