@aiquants/daily-report 0.10.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiquants/daily-report",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "Reusable daily-report feature package: shared types/schemas, React (Router v7) UI with virtual scrolling + optimistic updates + SSE sync, and a drizzle (mssql) server layer with DI ports (auth, user resolution, redis, external sources).",
   "sideEffects": [
     "**/*.css"
@@ -70,10 +70,10 @@
     "tailwindcss-animate": "^1.0.7",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
-    "vitest": "^4.1.8",
+    "vitest": "^4.1.10",
     "zod": "^3.25.76",
     "@aiquants/swipe-overlay": "1.2.4",
-    "@aiquants/virtualscroll": "1.23.0"
+    "@aiquants/virtualscroll": "1.25.0"
   },
   "peerDependencies": {
     "drizzle-orm": ">=1.0.0-beta.4 <2.0.0",
@@ -82,7 +82,7 @@
     "react-router": "^7.0.0",
     "zod": ">=3.25.0 <5.0.0",
     "@aiquants/swipe-overlay": "^1.2.4",
-    "@aiquants/virtualscroll": "^1.23.0"
+    "@aiquants/virtualscroll": "^1.25.0"
   },
   "peerDependenciesMeta": {
     "drizzle-orm": {

package/src/client/components/daily-report-detail-list.tsx

@@ -79,24 +79,78 @@ const formatInterviewerLabel = (interviewer: DailyReportDetail["interviewers"][n
     return interviewer.name ?? ""
 }
 
+/**
+ * Scroll restore slot for DailyReportDetailList that survives tab unmounting.
+ * タブアンマウントをまたいで DailyReportDetailList のスクロール位置を持ち回る共有スロット。
+ *
+ * topItem は先頭可視カードの**同一性アンカー** (reportHubId + 行内オフセット px + 保存時 index)。
+ * ❗ 生の論理 px を保存してはならない: 可変高さでは px→行変換が再マウントの推定空間で行われ、
+ * 深い位置で別のカードに着地する (実機で確定した実害バグ)。同一性アンカーは一覧が留守中に
+ * 変わっても findIndex で正しいカードへ再解決される。index は該当カードが消えていたときの
+ * 近似フォールバック。offsetPx はカード上端がビューポート上端より上に隠れている px (論理座標)。
+ * anchorReportHubId は「記録時点の選択日報」。復元はこれが現在の選択と一致するときだけ行う:
+ * 選択が他ビューで変わっていたら、復元よりも「選択日報へのスクロール」(既存 UX) を優先する。
+ * measuredHeights は実測カード高さ (reportHubId → px)。着地窓の行内オフセットの厳密さと
+ * 総高さ推定の質を保つため、実測をアンマウント越しに持ち回る。
+ */
+export type DailyReportDetailListScrollRestore = {
+    topItem: { reportHubId: number; index: number; offsetPx: number } | null
+    anchorReportHubId: number | null
+    measuredHeights: Map<number, number>
+}
+
 type DailyReportDetailListProps = {
     dailyReportItems: DailyReportItem[]
     userId?: string | null
     selectedItemId?: number | null
     onSelectItem?: (id: number | null) => void
-    initialScrollOffset?: number
-    onScrollOffsetChange?: (offset: number) => void
+    /**
+     * スクロール位置の共有スロット。マウント時に一度だけ読み、スクロールのたびに書き戻す。
+     * ❗ 値をレンダー時に読んで props へ焼き込む方式は禁止 (daily-report-list.tsx 参照)
+     */
+    scrollRestoreRef?: RefObject<DailyReportDetailListScrollRestore>
 }
 
 /**
  * Daily report detail cards rendered with dynamic height virtual scroll.
  * 動的高さの仮想スクロールで日報詳細カードを描画するコンポーネント。
  */
-export const DailyReportDetailList = ({ dailyReportItems, userId, selectedItemId, onSelectItem, initialScrollOffset, onScrollOffsetChange }: DailyReportDetailListProps) => {
+export const DailyReportDetailList = ({ dailyReportItems, userId, selectedItemId, onSelectItem, scrollRestoreRef }: DailyReportDetailListProps) => {
+    // 復元アンカーと「復元マウントかどうか」はマウント時に一度だけ共有スロットから決める。
+    // 復元判定は選択アンカー (記録時の選択日報) の一致のみで行う。❗ 位置の有無や大小を復元
+    // 判定に流用してはならない: 先頭まで戻してからタブを離れた復元マウントが「非復元」に
+    // 誤分類され、初回の選択スクロールが復元位置 (先頭) を上書きしてしまう。
+    // topItem は reportHubId の同一性で現在の一覧へ再解決する (留守中の並び替え・挿入に不変)。
+    // 消えていたら保存時 index への近似フォールバック (行内オフセットは破棄 = カード上端合わせ)
+    const [{ initialScrollAnchor, restored: isRestoredMount }] = useState(() => {
+        const restore = scrollRestoreRef?.current
+        if (!restore || restore.anchorReportHubId !== (selectedItemId ?? null)) {
+            return { initialScrollAnchor: undefined, restored: false }
+        }
+        if (!restore.topItem) {
+            return { initialScrollAnchor: undefined, restored: true }
+        }
+        const foundIndex = dailyReportItems.findIndex((item) => item.reportHubId === restore.topItem?.reportHubId)
+        if (foundIndex !== -1) {
+            return { initialScrollAnchor: { index: foundIndex, offsetPx: restore.topItem.offsetPx }, restored: true }
+        }
+        return { initialScrollAnchor: { index: restore.topItem.index, offsetPx: 0 }, restored: true }
+    })
+    // 復元マウントの初回だけ「選択日報へのスクロール」をスキップするための武装フラグと、
+    // 消費条件 (マウント時と同じ選択であること) の基準値。
+    // ❗ 消費条件なしで武装したままにしてはならない: アンカー日報がアンマウント中に削除されて
+    // いた場合など、マウント効果が index を解決できないとフラグが残留し、その後の正当な
+    // 選択変更 (新規作成ボタン等) のスクロールを 1 回無言で飲み込む
+    const skipInitialScrollToSelectionRef = useRef(isRestoredMount)
+    const mountSelectionIdRef = useRef(selectedItemId ?? null)
     // 実測高さは ref にインプレースで持つ。以前は測定行ごとに `new Map(prev)` を作っており
     // 行数に対して O(n^2) だった。VirtualScroll へは updateItemSize で個別に伝えるため、
-    // ここで state を持って再レンダーを起こす必要はない (getItemHeight は ref を直接読む)
-    const itemHeightsRef = useRef<Map<number, number>>(new Map())
+    // ここで state を持って再レンダーを起こす必要はない (getItemHeight は ref を直接読む)。
+    // ❗ 共有スロットがあればその Map を使う (アンマウントで実測空間を捨てない): 同一性アンカー
+    // 復元の下で、実測の持ち回りは (a) アンカーカードの行内オフセットの厳密さ (そのカードの
+    // 実測高さが行内 px の座標系そのもの) と (b) 総高さ推定・周辺カードの初期配置の質を保つ。
+    // カードの同一性は topItem (reportHubId) が保証するため、深い復元でも別カードへは漂着しない
+    const itemHeightsRef = useRef<Map<number, number>>(scrollRestoreRef?.current.measuredHeights ?? new Map())
     const scrollContainerRef = useRef<HTMLDivElement | null>(null)
     const virtualScrollRef = useRef<VirtualScrollHandle>(null)
     // list ロールの aria-label に使う (消費側注入の業務ドメイン名)
@@ -119,6 +173,17 @@ export const DailyReportDetailList = ({ dailyReportItems, userId, selectedItemId
             if (index !== -1) {
                 // ID もインデックスも同じなら再スクロール不要
                 if (lastScrolledRef.current?.id === selectedItemId && lastScrolledRef.current?.index === index) return
+                // 復元マウントの初回だけはスクロールせず「スクロール済み」として記録する
+                // (以後の選択変更・並び替え追従は従来どおり動く)。
+                // 消費できるのは「マウント時と同じ選択」のときだけ: 選択が変わっていたら
+                // それは正当な選択変更なので、武装解除して通常のスクロールへ落とす
+                if (skipInitialScrollToSelectionRef.current) {
+                    skipInitialScrollToSelectionRef.current = false
+                    if ((selectedItemId ?? null) === mountSelectionIdRef.current) {
+                        lastScrolledRef.current = { id: selectedItemId, index }
+                        return
+                    }
+                }
                 virtualScrollRef.current.scrollToIndex(index, { align: "top" })
                 lastScrolledRef.current = { id: selectedItemId, index }
             }
@@ -127,6 +192,21 @@ export const DailyReportDetailList = ({ dailyReportItems, userId, selectedItemId
         }
     }, [selectedItemId, dailyReportItems])
 
+    /**
+     * Keeps the restore slot's anchor aligned with the current selection.
+     * 復元スロットのアンカーを現在の選択日報と同期し続ける副作用。
+     *
+     * スクロールイベントに依存せず選択変更を即座に反映する (選択日報が既に上端にあり
+     * scrollToIndex が onScroll を発火しないケースでもアンカーが古くならない)。
+     * 依存配列: [selectedItemId, scrollRestoreRef]。クリーンアップ: なし。
+     */
+    useEffect(() => {
+        const restore = scrollRestoreRef?.current
+        if (restore) {
+            restore.anchorReportHubId = selectedItemId ?? null
+        }
+    }, [selectedItemId, scrollRestoreRef])
+
     // onSelectItem の最新参照を保持する ref (useEffect 依存配列を不要にする)
     const onSelectItemRef = useRef(onSelectItem)
     onSelectItemRef.current = onSelectItem
@@ -194,9 +274,28 @@ export const DailyReportDetailList = ({ dailyReportItems, userId, selectedItemId
         [getItem, itemCount, schedulePrefetchForRange],
     )
 
+    // ❗ teardown 用ハンドルミラー: React は削除コミットの mutation phase で virtualScrollRef を
+    // null 化するため、アンマウント時の RAF flush (最終 onScroll 配信) の時点では素の ref が
+    // 読めない。最後に観測した非 null ハンドルを保持し、フリング中のタブ切替でも最終アンカーを
+    // 取りこぼさない (closure 経由の読取は detach 後も直近コミットの値で安全)
+    const lastVirtualScrollHandleRef = useRef<VirtualScrollHandle | null>(null)
+
     const handleScroll = useCallback(() => {
-        if (virtualScrollRef.current && onScrollOffsetChange) {
-            onScrollOffsetChange(virtualScrollRef.current.getScrollPosition())
+        // スクロールのたびに先頭可視カードの同一性アンカーを共有スロットへ書き戻す。
+        // ❗ 生の論理 px (onScroll 引数や getScrollPosition) を保存してはならない:
+        // 可変高さでは再マウントの推定空間で px→行変換が狂い、別のカードに着地する。
+        // getScrollAnchor は可視ウィンドウの実測が照合済みのツリーで計算されるため常に正確
+        if (virtualScrollRef.current) {
+            lastVirtualScrollHandleRef.current = virtualScrollRef.current
+        }
+        const restore = scrollRestoreRef?.current
+        const handle = virtualScrollRef.current ?? lastVirtualScrollHandleRef.current
+        if (restore && handle) {
+            const anchor = handle.getScrollAnchor()
+            const item = anchor ? dailyReportItemsRef.current[anchor.index] : undefined
+            if (anchor && item) {
+                restore.topItem = { reportHubId: item.reportHubId, index: anchor.index, offsetPx: anchor.offsetPx }
+            }
         }
 
         const container = scrollContainerRef.current
@@ -216,15 +315,7 @@ export const DailyReportDetailList = ({ dailyReportItems, userId, selectedItemId
             }
             scrollEndTimerRef.current = null
         }, 150)
-    }, [onScrollOffsetChange])
-
-    useEffect(() => {
-        return () => {
-            if (virtualScrollRef.current && onScrollOffsetChange) {
-                onScrollOffsetChange(virtualScrollRef.current.getScrollPosition())
-            }
-        }
-    }, [onScrollOffsetChange])
+    }, [scrollRestoreRef])
 
     const renderThumbOverlay = useCallback((props: ScrollBarThumbOverlayRenderProps) => <BusinessDayThumbOverlay {...props} label={overlayLabel} isWheelScrollActive={isWheelScrollActive} />, [overlayLabel, isWheelScrollActive])
 
@@ -318,7 +409,7 @@ export const DailyReportDetailList = ({ dailyReportItems, userId, selectedItemId
                     getItemKey={getItemKey}
                     getItemHeight={getItemHeight}
                     viewportSize={viewportHeight}
-                    initialScrollOffset={initialScrollOffset}
+                    initialScrollAnchor={initialScrollAnchor}
                     overscanCount={VIRTUAL_SCROLL_OVERSCAN_COUNT}
                     scrollBarOptions={{
                         width: SCROLL_BAR_WIDTH,

package/src/client/components/daily-report-list.tsx

@@ -5,7 +5,7 @@
 import { SwipeCloseGuardContext, useSwipeGuardState, useSwipeToDismissOverlay, useTapClick, useTransitionDisplay } from "@aiquants/swipe-overlay"
 import { type ScrollBarThumbOverlayRenderProps, VirtualScroll, type VirtualScrollHandle } from "@aiquants/virtualscroll"
 import { Check, Star, Trash2 } from "lucide-react"
-import { type CSSProperties, memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { type CSSProperties, memo, type RefObject, useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { fallbackText, formatToIsoDate } from "../../shared/text-utils"
 import type { DailyReportDetail, DailyReportItem } from "../../shared/types"
 import { resolveSourceTypeConfig, useDailyReportConfig } from "../config-context"
@@ -49,8 +49,14 @@ type DailyReportListProps = {
     selectedReportHubId: number | null
     onSelectItem: (reportHubId: number | null) => void
     userId?: string | null
-    initialScrollOffset?: number
-    onScrollOffsetChange?: (offset: number) => void
+    /**
+     * タブ切替 (アンマウント) をまたいでスクロール位置を持ち回る共有スロット。
+     * 値は VirtualScroll の**論理座標** (inset 非依存。onScroll が配信する座標系)。
+     * マウント時に一度だけ読み、スクロールのたびに書き戻す。
+     * ❗ 値をレンダー時に読んで props へ焼き込む方式は禁止: 非制御タブでは親が
+     * 再レンダーされず、復帰マウントに古い値が渡る (実測で再現した実害バグ)
+     */
+    scrollOffsetRef?: RefObject<number>
 }
 
 /**
@@ -232,7 +238,9 @@ const useAutoRead = (report: DailyReportDetail | null, isLoading: boolean, autoM
  * Daily report list cards with key metadata and preview content via virtual scrolling.
  * 主なメタデータと内容プレビューを仮想スクロール表示する日報リスト。
  */
-export const DailyReportList = ({ dailyReportItems, autoMarkRead = false, selectedReportHubId, onSelectItem, userId, initialScrollOffset, onScrollOffsetChange }: DailyReportListProps) => {
+export const DailyReportList = ({ dailyReportItems, autoMarkRead = false, selectedReportHubId, onSelectItem, userId, scrollOffsetRef }: DailyReportListProps) => {
+    // 復元位置はマウント時に一度だけ共有スロットから読む (レンダー時読取の焼き込みを構造的に排除)
+    const [initialScrollOffset] = useState(() => scrollOffsetRef?.current ?? 0)
     const scrollContainerRef = useRef<HTMLDivElement | null>(null)
     const virtualScrollRef = useRef<VirtualScrollHandle>(null)
     // list ロールの aria-label に使う (消費側が注入する業務ドメイン名。既定 "Daily Reports")
@@ -385,37 +393,35 @@ export const DailyReportList = ({ dailyReportItems, autoMarkRead = false, select
         [getItem],
     )
 
-    const handleScroll = useCallback(() => {
-        if (virtualScrollRef.current && onScrollOffsetChange) {
-            onScrollOffsetChange(virtualScrollRef.current.getScrollPosition())
-        }
-
-        const container = scrollContainerRef.current
-        if (!container) return
-
-        if (container.dataset.scrolling !== "true") {
-            container.dataset.scrolling = "true"
-        }
+    const handleScroll = useCallback(
+        (position: number) => {
+            // onScroll が配信する論理座標をそのまま共有スロットへ書く (保存と復元で座標系を一致させる)。
+            // ❗ getScrollPosition() の読み戻しへ戻さないこと: あれはペイン座標 (inset 込み) で、
+            // 論理座標を受け取る initialScrollOffset との往復ごとに inset 分ずれる
+            if (scrollOffsetRef) {
+                scrollOffsetRef.current = position
+            }
 
-        if (scrollEndTimerRef.current) {
-            clearTimeout(scrollEndTimerRef.current)
-        }
+            const container = scrollContainerRef.current
+            if (!container) return
 
-        scrollEndTimerRef.current = setTimeout(() => {
-            if (container) {
-                delete container.dataset.scrolling
+            if (container.dataset.scrolling !== "true") {
+                container.dataset.scrolling = "true"
             }
-            scrollEndTimerRef.current = null
-        }, 150)
-    }, [onScrollOffsetChange])
 
-    useEffect(() => {
-        return () => {
-            if (virtualScrollRef.current && onScrollOffsetChange) {
-                onScrollOffsetChange(virtualScrollRef.current.getScrollPosition())
+            if (scrollEndTimerRef.current) {
+                clearTimeout(scrollEndTimerRef.current)
             }
-        }
-    }, [onScrollOffsetChange])
+
+            scrollEndTimerRef.current = setTimeout(() => {
+                if (container) {
+                    delete container.dataset.scrolling
+                }
+                scrollEndTimerRef.current = null
+            }, 150)
+        },
+        [scrollOffsetRef],
+    )
 
     const renderThumbOverlay = useCallback((props: ScrollBarThumbOverlayRenderProps) => <BusinessDayThumbOverlay {...props} label={overlayLabel} isWheelScrollActive={isWheelScrollActive} />, [overlayLabel, isWheelScrollActive])
 

package/src/client/components/daily-report-resolved-content.tsx

@@ -1,6 +1,6 @@
 import { Plus, RefreshCw, RotateCw } from "lucide-react"
 import type { ReactNode } from "react"
-import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { useEffect, useMemo, useRef, useState } from "react"
 import { useSearchParams } from "react-router"
 import { resolveTodayBusinessDateKey } from "../../shared/business-date"
 import { useDailyReportConfig } from "../config-context"
@@ -11,7 +11,7 @@ import { Label } from "../ui/label"
 import { Switch } from "../ui/switch"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs"
 import { DAILY_REPORT_FETCH_DEBOUNCE_MS } from "../utils/constants"
-import { DailyReportDetailList } from "./daily-report-detail-list"
+import { DailyReportDetailList, type DailyReportDetailListScrollRestore } from "./daily-report-detail-list"
 import { DailyReportIdsStreamStatus } from "./daily-report-ids-stream-status"
 import { DailyReportList } from "./daily-report-list"
 
@@ -37,17 +37,12 @@ export const DailyReportResolvedContent = ({ userId }: DailyReportResolvedConten
     // 総件数の表示値 (チャンク到着ごとの跳びをイーズアウトで滑らかにする)
     const animatedItemCount = useAnimatedNumber(dailyReportItems.length)
 
-    // 各タブのスクロール位置をアンマウント後も保持する Ref
+    // 各タブのスクロール位置をアンマウント後も保持する共有スロット (子がマウント時に読み、
+    // スクロールのたびに書き戻す)。❗ ref の「値」をここで読んで props へ渡してはならない:
+    // タブは非制御でこのコンポーネントはタブ切替時に再レンダーされないため、レンダー時読取は
+    // 古い値の焼き込みになる (タブ復帰でスクロール位置がリセットされた実害バグの根本原因)
     const listScrollOffsetRef = useRef<number>(0)
-    const detailListScrollOffsetRef = useRef<number>(0)
-
-    const handleListScrollOffsetChange = useCallback((offset: number) => {
-        listScrollOffsetRef.current = offset
-    }, [])
-
-    const handleDetailListScrollOffsetChange = useCallback((offset: number) => {
-        detailListScrollOffsetRef.current = offset
-    }, [])
+    const detailListScrollRestoreRef = useRef<DailyReportDetailListScrollRestore>({ topItem: null, anchorReportHubId: null, measuredHeights: new Map() })
 
     // 選択状態の管理 (タブ間で共有)
     const [selectedItemId, setSelectedItemId] = useState<number | null>(() => {
@@ -115,17 +110,7 @@ export const DailyReportResolvedContent = ({ userId }: DailyReportResolvedConten
             {
                 value: "list",
                 label: "📄 List",
-                content: (
-                    <DailyReportList
-                        dailyReportItems={dailyReportItems}
-                        autoMarkRead={autoMarkRead}
-                        selectedReportHubId={selectedItemId}
-                        onSelectItem={setSelectedItemId}
-                        userId={userId}
-                        initialScrollOffset={listScrollOffsetRef.current}
-                        onScrollOffsetChange={handleListScrollOffsetChange}
-                    />
-                ),
+                content: <DailyReportList dailyReportItems={dailyReportItems} autoMarkRead={autoMarkRead} selectedReportHubId={selectedItemId} onSelectItem={setSelectedItemId} userId={userId} scrollOffsetRef={listScrollOffsetRef} />,
             },
             {
                 value: "tree",
@@ -135,12 +120,10 @@ export const DailyReportResolvedContent = ({ userId }: DailyReportResolvedConten
             {
                 value: "detailList",
                 label: "📋 DetailList",
-                content: (
-                    <DailyReportDetailList dailyReportItems={dailyReportItems} userId={userId} selectedItemId={selectedItemId} onSelectItem={setSelectedItemId} initialScrollOffset={detailListScrollOffsetRef.current} onScrollOffsetChange={handleDetailListScrollOffsetChange} />
-                ),
+                content: <DailyReportDetailList dailyReportItems={dailyReportItems} userId={userId} selectedItemId={selectedItemId} onSelectItem={setSelectedItemId} scrollRestoreRef={detailListScrollRestoreRef} />,
             },
         ],
-        [dailyReportItems, autoMarkRead, selectedItemId, userId, handleListScrollOffsetChange, handleDetailListScrollOffsetChange],
+        [dailyReportItems, autoMarkRead, selectedItemId, userId],
     )
 
     return (