@allbluecn/web-app 0.18.2 → 0.19.0

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

@@ -22,7 +22,7 @@ import { StoryToolbar, type StoryFilters } from "./story-toolbar";
 import { CreateStoryDialog } from "./create-story-dialog";
 import { CreateViewDialog, type CreateViewDialogPayload } from "./views/create-view-dialog";
 import { StoryPeekPanel, type PeekMode } from "./peek-panel";
-import { KanbanBoard } from "./views/kanban-board";
+import { KanbanView } from "./views/kanban-view";
 import { CalendarView } from "./views/calendar-view";
 import { TimelineView } from "./views/timeline-view";
 import { StoryList } from "./views/story-list";
@@ -35,15 +35,19 @@ import {
 import {
   buildDefaultView, DEFAULT_VIEW_ID, type SavedView,
 } from "./views/view-types";
-import type { StoryView } from "./views/view-switcher";
+import { isStoryView, type StoryView } from "./views/view-switcher";
 import type { UserBrief, StoryListItem } from "./types";
+import { applyStoryPatchToItem, type StoryPatch } from "./display/group-fields";
 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 { flattenStoryGroups } from "./display/flatten-story-groups";
 import { toast } from "@/components/ui/toast";
 import { ConfirmDialog } from "@/components/confirm-dialog";
+import { usePresenceListRefresh } from "@/lib/collab/use-presence-list-refresh";
 import { m } from "@/paraglide/messages.js";
+import { toastError } from "@/lib/toast-error";
 
 interface StoryListViewProps {
   stories: { items: StoryListItem[]; total: number };
@@ -54,6 +58,12 @@ interface StoryListViewProps {
 
 const STORY_PROJECT_FILTER_KEY = "story.projectFilter";
 const STORY_SEARCH_KEY = "story.search";
+const STORY_VIEW_KEY = "story.view";
+const STORY_PEEK_MODE_KEY = "story.peekMode";
+const PEEK_MODES: PeekMode[] = ["side-dock", "side-peek", "modal", "full-screen"];
+function isPeekMode(v: string | null): v is PeekMode {
+  return v != null && (PEEK_MODES as string[]).includes(v);
+}
 
 export function StoryListView({ stories: initialStories, users: initialUsers, projects: initialProjects, labels }: StoryListViewProps) {
   const { session } = useRouteContext({ from: "/_nav/stories/" });
@@ -62,6 +72,7 @@ export function StoryListView({ stories: initialStories, users: initialUsers, pr
   const [peek, setPeek] = useState<string | null>(null);
   const [createOpen, setCreateOpen] = useState(false);
   const [presetDate, setPresetDate] = useState<string | undefined>(undefined);
+  const [presetTargetDate, setPresetTargetDate] = useState<string | undefined>(undefined);
   const [presetState, setPresetState] = useState<string | undefined>(undefined);
   const [peekMode, setPeekMode] = useState<PeekMode>("side-peek");
   const [filterConditions, setFilterConditions] = useState<FilterCondition[]>([]);
@@ -97,6 +108,7 @@ export function StoryListView({ stories: initialStories, users: initialUsers, pr
   useEffect(() => {
     let restoredProjectId: string | undefined;
     let restoredSearch: string | undefined;
+    let restoredView: StoryView | undefined;
     try {
       const stored = localStorage.getItem(STORY_PROJECT_FILTER_KEY) ?? undefined;
       // 清理过期残留（项目已删除或 localStorage 跨账号残留），避免列表查询空集
@@ -106,11 +118,14 @@ export function StoryListView({ stories: initialStories, users: initialUsers, pr
         restoredProjectId = stored;
       }
       restoredSearch = localStorage.getItem(STORY_SEARCH_KEY) ?? undefined;
+      const storedView = localStorage.getItem(STORY_VIEW_KEY);
+      if (storedView && isStoryView(storedView)) restoredView = storedView;
     } catch {
       return;
     }
     if (restoredProjectId !== undefined) setProjectId(restoredProjectId);
     if (restoredSearch !== undefined) setSearchText(restoredSearch);
+    if (restoredView !== undefined) setView(restoredView);
     if (!restoredProjectId && !restoredSearch) return;
     const isArchived = restoredProjectId === "__archived__";
     listStoriesFn({
@@ -123,6 +138,18 @@ export function StoryListView({ stories: initialStories, users: initialUsers, pr
     }).then(resetPaging).catch(() => {});
   }, []);
 
+  // 恢复上次选择的侧边布局形态：进入全屏详情页（/stories/$storyId 是另一条路由）
+  // 会卸载本组件并丢失 state，返回后回退默认形态。与 view/筛选同款持久化
+  // （默认值 + 挂载后恢复，规避 SSR/hydration 不一致）。
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem(STORY_PEEK_MODE_KEY);
+      if (isPeekMode(stored)) setPeekMode(stored);
+    } catch {
+      // localStorage 不可用时静默降级为默认形态
+    }
+  }, []);
+
   const resetPaging = useCallback((result: { items: StoryListItem[]; total: number; hasMore: boolean }) => {
     setStories(result);
     setLoadedCount(result.items.length);
@@ -226,6 +253,12 @@ export function StoryListView({ stories: initialStories, users: initialUsers, pr
 
   const handleViewChange = (v: StoryView) => {
     setView(v);
+    // 视图选择本地持久化（与项目筛选/搜索同模式）：默认值 + 挂载后恢复，规避 SSR/hydration 不一致
+    try {
+      localStorage.setItem(STORY_VIEW_KEY, v);
+    } catch {
+      // localStorage 不可用（隐私模式等）时静默降级为不持久化
+    }
   };
 
   const handleOpenStory = useCallback((id: string) => {
@@ -236,16 +269,77 @@ export function StoryListView({ stories: initialStories, users: initialUsers, pr
     setPeek(null);
   };
 
+  const handlePeekModeChange = useCallback((mode: PeekMode) => {
+    setPeekMode(mode);
+    try {
+      localStorage.setItem(STORY_PEEK_MODE_KEY, mode);
+    } catch {
+      // 忽略持久化失败
+    }
+  }, []);
+
+  // 看板卡片编辑（内联编辑 / 拖拽换列）落库成功后的字段补丁 → 透传给 PeekPanel 实时同步。
+  // seq 自增保证同一 patch 对象引用稳定时 effect 也能重触发。
+  const [peekPatch, setPeekPatch] = useState<{
+    storyId: string;
+    patch: StoryPatch;
+    seq: number;
+  } | null>(null);
+  const handleStoryPatched = useCallback((storyId: string, patch: StoryPatch) => {
+    setPeekPatch((prev) => ({ storyId, patch, seq: (prev?.seq ?? 0) + 1 }));
+  }, []);
+
+  // 侧边面板（PeekPanel）内字段改动落库 → 乐观更新列表/看板对应行（与看板→面板通道方向相反）。
+  // stories.items 覆盖表格/看板/日历/时间线；pagedGroups 覆盖列表视图。
+  const handlePeekStoryPatch = useCallback(
+    (storyId: string, patch: StoryPatch) => {
+      setStories((prev) => ({
+        ...prev,
+        items: prev.items.map((s) =>
+          s.id === storyId ? applyStoryPatchToItem(s, patch, { users, labels }) : s,
+        ),
+      }));
+      patchPagedStory(storyId, patch);
+    },
+    [users, labels, patchPagedStory],
+  );
+
+  // 列表行内编辑落库 → 同步列表自身（pagedGroups）+ 看板/表格（stories.items）+ 详情面板（peekPatch），
+  // 与看板→面板通道对称，保证「列表改字段 → 看板/详情即时反映」。
+  const handleListPatch = useCallback(
+    (storyId: string, patch: StoryPatch) => {
+      patchPagedStory(storyId, patch);
+      setStories((prev) => ({
+        ...prev,
+        items: prev.items.map((s) =>
+          s.id === storyId ? applyStoryPatchToItem(s, patch, { users, labels }) : s,
+        ),
+      }));
+      setPeekPatch((prev) => ({ storyId, patch, seq: (prev?.seq ?? 0) + 1 }));
+    },
+    [users, labels, patchPagedStory],
+  );
+
   const handleFullscreen = () => {
     if (peek) navigate({ to: "/stories/$storyId", params: { storyId: peek } });
   };
 
-  const handleCreate = useCallback((startDate?: string, state?: string) => {
+  const handleCreate = useCallback((startDate?: string, state?: string, targetDate?: string) => {
     setPresetDate(startDate);
     setPresetState(state);
+    setPresetTargetDate(targetDate);
     setCreateOpen(true);
   }, []);
 
+  // 日历格点位创建：把 targetDate 落到 handleCreate 的第三参（不能直接传
+  // handleCreate，否则日历的 targetDate 会错位到 state 参数上）
+  const handleCalendarCreate = useCallback(
+    (startDate?: string, targetDate?: string) => {
+      handleCreate(startDate, undefined, targetDate);
+    },
+    [handleCreate],
+  );
+
   const reload = useCallback(async () => {
     const isArchived = projectId === "__archived__";
     const result = await listStoriesFn({
@@ -264,6 +358,10 @@ export function StoryListView({ stories: initialStories, users: initialUsers, pr
     refreshPagedGroups();
   }, [reload, refreshPagedGroups]);
 
+  // 列表实时刷新（§7.1）：presence 信号（成员进出本模块实体页）+ 回前台 +
+  // 轮询兜底 → 走既有重拉入口（协同落库不 bump updatedAt，列表无推送通道）
+  usePresenceListRefresh({ module: "stories", refresh: listRefresh });
+
   const projectContext = useMemo(() => {
     if (!projectId) return null;
     const project = projects.find((p) => p.id === projectId);
@@ -400,25 +498,65 @@ export function StoryListView({ stories: initialStories, users: initialUsers, pr
 
   const isSidePeek = peek != null && peekMode === "side-peek";
 
-  const panelIdx = stories.items.findIndex((s) => s.id === peek);
+  // 看板列序持久化：写全局 display options（刷新可恢复）+ 同步一份到 view 快照
+  // 修复：原先只写 view.displayOptions 但 useDisplayOptions 从不读它，刷新后列序回退
+  const onPersistColumnOrder = useCallback(
+    async (order: string[]) => {
+      try {
+        await updateFilters({ columnOrder: order });
+        if (activeViewId !== DEFAULT_VIEW_ID) {
+          const target = allViews.find((v) => v.id === activeViewId);
+          if (target) {
+            await updateStoryViewFn({
+              data: {
+                id: target.id,
+                name: target.name,
+                description: target.description,
+                icon: target.icon,
+                projectId: target.projectId,
+                filters: target.filterConditions,
+                displayOptions: { ...target.displayOptions, columnOrder: order },
+              },
+            });
+            await reloadViews();
+          }
+        }
+      } catch (e) {
+        toastError(e, m.story_kanban_columnOrderFailed());
+        throw e;
+      }
+    },
+    [activeViewId, allViews, updateFilters, updateStoryViewFn, reloadViews],
+  );
+
+  // prev/next 跟随「当前视图实际展示的顺序」：列表视图用分页分组（pagedGroups）、
+  // 看板用分组（groups），其余视图用平坦 stories.items。此前统一用 stories.items，
+  // 导致列表视图下当前项不在其中（上一条禁用、下一条跳到错误的项）。
+  const orderedStories = useMemo<StoryListItem[]>(() => {
+    if (view === "list") return flattenStoryGroups(pagedGroups);
+    if (view === "board") return flattenStoryGroups(groups);
+    return stories.items;
+  }, [view, pagedGroups, groups, stories.items]);
+
+  const panelIdx = orderedStories.findIndex((s) => s.id === peek);
   const prevDisabled = panelIdx <= 0;
-  const nextDisabled = panelIdx >= stories.items.length - 1;
+  const nextDisabled = panelIdx < 0 || panelIdx >= orderedStories.length - 1;
 
   const handlePanelPrev = useCallback(() => {
     if (!peek) return;
-    const idx = stories.items.findIndex((s) => s.id === peek);
+    const idx = orderedStories.findIndex((s) => s.id === peek);
     if (idx > 0) {
-      setPeek(stories.items[idx - 1].id);
+      setPeek(orderedStories[idx - 1].id);
     }
-  }, [peek, stories.items]);
+  }, [peek, orderedStories]);
 
   const handlePanelNext = useCallback(() => {
     if (!peek) return;
-    const idx = stories.items.findIndex((s) => s.id === peek);
-    if (idx < stories.items.length - 1) {
-      setPeek(stories.items[idx + 1].id);
+    const idx = orderedStories.findIndex((s) => s.id === peek);
+    if (idx >= 0 && idx < orderedStories.length - 1) {
+      setPeek(orderedStories[idx + 1].id);
     }
-  }, [peek, stories.items]);
+  }, [peek, orderedStories]);
 
   const handlePanelBackClick = useCallback((e: React.MouseEvent) => {
     if (!isSidePeek) return;
@@ -493,13 +631,28 @@ export function StoryListView({ stories: initialStories, users: initialUsers, pr
         <div className="min-h-0 flex-1">
           {view === "table" && <StoryListTable data={stories.items} onOpenStory={handleOpenStory} properties={displayFilters.properties} orderBy={displayFilters.orderBy} onLoadMore={loadMore} hasMore={hasMore} />}
           {view === "board" && (
-            <KanbanBoard groups={groups} displayFilters={displayFilters} users={users} labels={labels} onRefresh={reload} onOpenStory={handleOpenStory} onLoadMore={loadMore} hasMore={hasMore} />
+            <KanbanView
+              key={activeViewId}
+              groups={groups}
+              displayFilters={displayFilters}
+              users={users}
+              labels={labels}
+              projects={projects}
+              onRefresh={reload}
+              onOpenStory={handleOpenStory}
+              onLoadMore={loadMore}
+              hasMore={hasMore}
+              activeViewId={activeViewId}
+              onPersistColumnOrder={onPersistColumnOrder}
+              onUpdateFilters={updateFilters}
+              onStoryPatched={handleStoryPatched}
+            />
           )}
-          {view === "calendar" && <CalendarView stories={stories.items} onCreate={handleCreate} onOpenStory={handleOpenStory} orderBy={displayFilters.orderBy} />}
+          {view === "calendar" && <CalendarView stories={stories.items} onCreate={handleCalendarCreate} onOpenStory={handleOpenStory} orderBy={displayFilters.orderBy} />}
           {view === "list" && (
-            <StoryList groups={pagedGroups} isLoading={pagedGroupsLoading} displayFilters={displayFilters} users={users} labels={labels} projects={projects} onRefresh={listRefresh} onPatchStory={patchPagedStory} onOpenStory={handleOpenStory} onCreate={handleCreate} onLoadMoreGroup={loadGroupMore} projectContext={projectContext} projectId={projectId} />
+            <StoryList groups={pagedGroups} isLoading={pagedGroupsLoading} displayFilters={displayFilters} users={users} labels={labels} projects={projects} onRefresh={listRefresh} onPatchStory={handleListPatch} onOpenStory={handleOpenStory} onCreate={handleCreate} onLoadMoreGroup={loadGroupMore} projectContext={projectContext} projectId={projectId} />
           )}
-          {view === "timeline" && <TimelineView stories={stories.items} onOpenStory={handleOpenStory} orderBy={displayFilters.orderBy} onLoadMore={loadMore} hasMore={hasMore} />}
+          {view === "timeline" && <TimelineView stories={stories.items} onOpenStory={handleOpenStory} orderBy={displayFilters.orderBy} groupBy={displayFilters.groupBy} users={users} labels={labels} projects={projects} showEmptyGroups={displayFilters.showEmptyGroups} onLoadMore={loadMore} hasMore={hasMore} />}
         </div>
       </div>
 
@@ -508,6 +661,7 @@ export function StoryListView({ stories: initialStories, users: initialUsers, pr
         onOpenChange={(v) => {
           if (!v) {
             setPresetDate(undefined);
+            setPresetTargetDate(undefined);
             setPresetState(undefined);
           }
           setCreateOpen(v);
@@ -516,9 +670,11 @@ export function StoryListView({ stories: initialStories, users: initialUsers, pr
         projects={projects}
         labels={labels}
         initialStartDate={presetDate}
+        initialTargetDate={presetTargetDate}
         initialState={presetState}
         onSuccess={() => {
           setPresetDate(undefined);
+          setPresetTargetDate(undefined);
           setPresetState(undefined);
           void reload();
           refreshPagedGroups();
@@ -541,7 +697,7 @@ export function StoryListView({ stories: initialStories, users: initialUsers, pr
         <StoryPeekPanel
           storyId={peek}
           mode={peekMode}
-          onModeChange={setPeekMode}
+          onModeChange={handlePeekModeChange}
           users={users}
           currentUserId={session?.user?.id}
           onClose={handleClosePeek}
@@ -555,6 +711,8 @@ export function StoryListView({ stories: initialStories, users: initialUsers, pr
           onDeleted={() => { handleClosePeek(); reload(); }}
           projects={projects}
           onTransferred={() => { handleClosePeek(); reload(); }}
+          storyPatches={peekPatch}
+          onStoryPatch={handlePeekStoryPatch}
         />
       )}
 

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

@@ -25,10 +25,8 @@ import {
   ChevronDown,
   ChevronUp,
   Link2,
-  Maximize,
-  Maximize2,
+  Minimize,
   MoreHorizontal,
-  PanelLeft,
   Trash2,
   X,
 } from "lucide-react";
@@ -46,18 +44,15 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { toast } from "@/components/ui/toast";
 import { NameConfirmDialog } from "@/components/shared-kit/dialogs/name-confirm-dialog";
+import { PEEK_MODE_DOCK, PEEK_MODE_OPTIONS, type PeekMode } from "@/components/shared-kit/peek/peek-mode";
 import { archiveStoryFn, deleteStoryFn } from "@/server/serverFns/story";
 import { TransferStoryPopover } from "./transfer-story-popover";
 import { m } from "@/paraglide/messages.js";
 import { toastError } from "@/lib/toast-error";
 
-export type PeekMode = "side-peek" | "modal" | "full-screen";
-
-export const PEEK_MODE_OPTIONS: { value: PeekMode; label: () => string; icon: typeof PanelLeft }[] = [
-  { value: "side-peek", label: m.story_panel_mode_sidePeek, icon: PanelLeft },
-  { value: "modal", label: m.story_panel_mode_modal, icon: Maximize },
-  { value: "full-screen", label: m.story_panel_mode_fullScreen, icon: Maximize2 },
-];
+// PeekMode/PEEK_MODE_OPTIONS 已归位 shared-kit/peek/peek-mode（跨模块共享），此处转发保持导出面不变。
+export { PEEK_MODE_DOCK, PEEK_MODE_OPTIONS };
+export type { PeekMode };
 
 export type PanelCloseType = "collapse" | "close" | "back";
 export type PeekRelationKind = "child" | "dependency";
@@ -96,6 +91,8 @@ export interface StoryPanelHeaderProps {
   hideMoreMenu?: boolean;
   hideTransfer?: boolean;
   breadcrumbItems?: PeekBreadcrumbItem[];
+  /** 滚动联动标题：内容区滚动后显示在上一条/下一条按钮之后（详情页顶栏） */
+  navTitle?: ReactNode;
 }
 
 export function StoryPanelHeader({
@@ -125,6 +122,7 @@ export function StoryPanelHeader({
   hideMoreMenu = false,
   hideTransfer = false,
   breadcrumbItems,
+  navTitle,
 }: StoryPanelHeaderProps) {
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [archiveLoading, setArchiveLoading] = useState(false);
@@ -193,7 +191,7 @@ export function StoryPanelHeader({
         {!hideFullscreen && onFullscreen && (
           <Tooltip>
             <TooltipTrigger render={<Button variant="ghost" size="icon" className="size-8" onClick={onFullscreen} aria-label={m.story_panel_fullscreen()} />}>
-                <Maximize2 className="size-4" />
+                <Minimize className="size-4" />
               </TooltipTrigger>
             <TooltipContent>{m.story_panel_fullscreen()}</TooltipContent>
           </Tooltip>
@@ -252,6 +250,15 @@ export function StoryPanelHeader({
           </>
         )}
 
+        {navTitle && (
+          <span
+            data-testid="story-nav-title"
+            className="ml-1 min-w-0 truncate text-sm font-medium"
+          >
+            {navTitle}
+          </span>
+        )}
+
         <div className="ml-auto flex items-center gap-1.5">
 
           {!hideTransfer && projects && onTransferred && storyId && (