@aiquants/daily-report 0.1.1

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

@@ -0,0 +1,1024 @@
+/**
+ * Virtual-scrolling summary list for daily reports driven by fetcher-based detail hooks.
+ * useFetcher ベースの詳細取得フックで日報サマリーを仮想スクロール表示。
+ */
+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, useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { fallbackText, formatToIsoDate } from "../../shared/text-utils"
+import type { DailyReportDetail, DailyReportItem } from "../../shared/types"
+import { useDailyReportConfig } from "../config-context"
+import { useDailyReportActionContext } from "../contexts/daily-report-action-context"
+import { useDailyReportDetail } from "../hooks/use-daily-report"
+import { useDailyReportComments } from "../hooks/use-daily-report-comments"
+import { useDynamicViewportHeight } from "../hooks/use-dynamic-viewport-height"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs"
+import {
+    DEFAULT_ITEM_HEIGHT,
+    EMPTY_DETAIL,
+    EMPTY_ITEM,
+    FAST_SCROLL_INERTIA_OPTIONS,
+    FAST_SCROLL_WHEEL_MULTIPLIER,
+    ITEM_CONTAINER_HEIGHT,
+    ITEM_VERTICAL_PADDING,
+    MAX_PREVIEW_LINES,
+    SCROLL_BAR_WIDTH,
+    TAP_SCROLL_CIRCLE_OPTIONS,
+    VIRTUAL_SCROLL_OVERSCAN_COUNT,
+    WHEEL_RESET_TIMEOUT_MS,
+} from "../utils/constants"
+import { BusinessDayThumbOverlay } from "./business-day-thumb-overlay"
+import { DailyReportCommentForm, DailyReportCommentList } from "./daily-report-comment-section"
+import { DailyReportEditForm } from "./daily-report-edit-form"
+import { UnreadIndicator } from "./unread-indicator"
+
+type TestableVirtualScrollHandle = VirtualScrollHandle & {
+    findReportIndex: (id: number) => number
+    getReportIds: (limit?: number) => number[]
+}
+
+type DailyReportListProps = {
+    dailyReportItems: DailyReportItem[]
+    initialSelectedBusinessDate?: string | null
+    initialSelectedReportHubId?: number | null
+    autoMarkRead?: boolean
+    selectedReportHubId: number | null
+    onSelectItem: (reportHubId: number | null) => void
+    userId?: string | null
+}
+
+/**
+ * Manages mobile overlay state, history navigation, and scroll locking.
+ * モバイルオーバーレイの状態、履歴ナビゲーション、スクロールロックを管理するフック。
+ */
+const useMobileOverlayManager = (isMobileLayout: boolean, selectedReportHubId: number | null, dailyReportItems: DailyReportItem[], onSelectItem: (reportHubId: number | null) => void) => {
+    const [isMobileDetailOpen, setIsMobileDetailOpen] = useState(false)
+    const [isOverlayMounted, setIsOverlayMounted] = useState(false)
+    const overlayHistoryKeyRef = useRef<string | null>(null)
+    const lastClosedItemIdRef = useRef<number | null>(null)
+    const bodyOverflowRef = useRef<string | null>(null)
+
+    const selectedItem = useMemo(() => (selectedReportHubId === null ? null : (dailyReportItems.find((e) => e.reportHubId === selectedReportHubId) ?? null)), [dailyReportItems, selectedReportHubId])
+    const shouldShowOverlay = isMobileLayout && isMobileDetailOpen && selectedItem !== null
+
+    /**
+     * Manages the mounting state of the mobile overlay for animation purposes.
+     * アニメーション用にモバイルオーバーレイのマウント状態を管理する副作用。
+     *
+     * Purpose: To delay unmounting until the close animation completes.
+     * Dependencies: [shouldShowOverlay]
+     * Cleanup: Clears the timeout.
+     */
+    useEffect(() => {
+        if (shouldShowOverlay) {
+            setIsOverlayMounted(true)
+        } else {
+            const timer = setTimeout(() => setIsOverlayMounted(false), 300)
+            return () => clearTimeout(timer)
+        }
+    }, [shouldShowOverlay])
+
+    /**
+     * Manages mobile history state and body scroll locking.
+     * モバイル履歴状態と Body スクロールロックを管理する副作用。
+     *
+     * Purpose: To support browser back button for closing overlay and prevent background scrolling.
+     * Dependencies: [isMobileLayout, isMobileDetailOpen, selectedReportHubId]
+     * Cleanup: Restores body overflow style.
+     */
+    useEffect(() => {
+        if (typeof window === "undefined") return
+
+        // History Management
+        if (isMobileLayout && isMobileDetailOpen && selectedReportHubId !== null && !overlayHistoryKeyRef.current) {
+            const key = `overlay-${Date.now()}`
+            window.history.pushState({ ...window.history.state, dailyReportOverlay: key }, "", window.location.href)
+            overlayHistoryKeyRef.current = key
+        } else if (!(isMobileLayout && isMobileDetailOpen) && overlayHistoryKeyRef.current) {
+            overlayHistoryKeyRef.current = null
+        }
+
+        // Scroll Lock
+        if (isMobileDetailOpen) {
+            bodyOverflowRef.current = document.body.style.overflow
+            document.body.style.overflow = "hidden"
+        } else if (bodyOverflowRef.current !== null) {
+            document.body.style.overflow = bodyOverflowRef.current
+            bodyOverflowRef.current = null
+        }
+
+        return () => {
+            if (bodyOverflowRef.current !== null) document.body.style.overflow = bodyOverflowRef.current
+        }
+    }, [isMobileLayout, isMobileDetailOpen, selectedReportHubId])
+
+    /**
+     * Handles browser back navigation (popstate).
+     * ブラウザの戻る操作 (popstate) を処理する副作用。
+     *
+     * Purpose: To close the mobile overlay when the user presses the back button.
+     * Dependencies: [selectedReportHubId]
+     * Cleanup: Removes popstate listener.
+     */
+    useEffect(() => {
+        if (typeof window === "undefined") return
+        const onPopState = () => {
+            if (overlayHistoryKeyRef.current) {
+                lastClosedItemIdRef.current = selectedReportHubId
+                overlayHistoryKeyRef.current = null
+                setIsMobileDetailOpen(false)
+                onSelectItem(null)
+            }
+        }
+        window.addEventListener("popstate", onPopState)
+        return () => window.removeEventListener("popstate", onPopState)
+    }, [selectedReportHubId, onSelectItem])
+
+    const handleOverlayClose = useCallback(() => {
+        if (!isMobileLayout) return
+        lastClosedItemIdRef.current = selectedReportHubId
+        setIsMobileDetailOpen(false)
+        onSelectItem(null)
+        if (overlayHistoryKeyRef.current && typeof window !== "undefined") {
+            overlayHistoryKeyRef.current = null
+            window.history.back()
+        }
+    }, [isMobileLayout, selectedReportHubId, onSelectItem])
+
+    return {
+        isMobileDetailOpen,
+        setIsMobileDetailOpen,
+        isOverlayMounted,
+        shouldShowOverlay,
+        handleOverlayClose,
+        lastClosedItemIdRef,
+        selectedItem,
+    }
+}
+
+/**
+ * Manages auto-read logic and read status toggling.
+ * 自動既読ロジックと既読状態の切り替えを管理するフック。
+ */
+const useAutoRead = (report: DailyReportDetail | null, isLoading: boolean, autoMarkRead: boolean, isActive: boolean, toggleRead: (reportHubId: number, isRead: boolean, date: string) => Promise<void>) => {
+    const ignoreAutoReadForReportHubId = useRef<number | null>(null)
+    const lastReportHubIdRef = useRef<number | undefined>(undefined)
+
+    if (lastReportHubIdRef.current !== report?.reportHubId) {
+        lastReportHubIdRef.current = report?.reportHubId
+        ignoreAutoReadForReportHubId.current = null
+    }
+
+    /**
+     * Resets suppression flag when inactive.
+     * 非アクティブ時に抑制フラグをリセットする副作用。
+     *
+     * Purpose: To re-enable auto-read when the report is reopened.
+     * Dependencies: [isActive]
+     * Cleanup: None.
+     */
+    useEffect(() => {
+        if (!isActive) ignoreAutoReadForReportHubId.current = null
+    }, [isActive])
+
+    /**
+     * Handles the read status toggle logic.
+     * 既読状態の切り替え処理を行うコールバック。
+     *
+     * Purpose: To toggle read status and manage auto-read suppression.
+     * Dependencies: [report, toggleRead]
+     */
+    const handleToggleRead = useCallback(
+        async (isAuto: boolean = false) => {
+            if (!report) return
+            if (!isAuto) ignoreAutoReadForReportHubId.current = report.reportHubId
+
+            const nextValue = !report.isRead
+            try {
+                await toggleRead(report.reportHubId, nextValue, report.date ?? "")
+            } catch (_e) {
+                // Error handled in context
+            }
+        },
+        [report, toggleRead],
+    )
+
+    /**
+     * Automatically marks the report as read after a delay.
+     * 一定時間後にレポートを自動的に既読にする副作用。
+     *
+     * Purpose: To mark reports as read when viewed for a sufficient duration.
+     * Dependencies: [report, isLoading, autoMarkRead, handleToggleRead]
+     * Cleanup: Clears the timeout.
+     */
+    useEffect(() => {
+        if (autoMarkRead && report && !report.isRead && !isLoading) {
+            if (ignoreAutoReadForReportHubId.current === report.reportHubId) return
+            const timer = setTimeout(() => handleToggleRead(true), 500)
+            return () => clearTimeout(timer)
+        }
+    }, [report, isLoading, autoMarkRead, handleToggleRead])
+
+    return { handleToggleRead }
+}
+
+/**
+ * Daily report list cards with key metadata and preview content via virtual scrolling.
+ * 主なメタデータと内容プレビューを仮想スクロール表示する日報リスト。
+ */
+export const DailyReportList = ({ dailyReportItems, initialSelectedBusinessDate = null, initialSelectedReportHubId = null, autoMarkRead = false, selectedReportHubId, onSelectItem, userId }: DailyReportListProps) => {
+    const scrollContainerRef = useRef<HTMLDivElement | null>(null)
+    const virtualScrollRef = useRef<VirtualScrollHandle>(null)
+    const { viewportHeight, updateViewportHeight } = useDynamicViewportHeight(scrollContainerRef)
+    const [overlayLabel, setOverlayLabel] = useState<string>("")
+    const [isWheelScrollActive, setIsWheelScrollActive] = useState(false)
+    const [isMobileLayout, setIsMobileLayout] = useState(false)
+    const wheelResetTimerRef = useRef<number | null>(null)
+    const appliedInitialSignatureRef = useRef<string | null>(null)
+    const itemCount = dailyReportItems.length
+    const scrollEndTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+    const { isMobileDetailOpen, setIsMobileDetailOpen, isOverlayMounted, shouldShowOverlay, handleOverlayClose, lastClosedItemIdRef, selectedItem } = useMobileOverlayManager(isMobileLayout, selectedReportHubId, dailyReportItems, onSelectItem)
+
+    const columnHeightStyle = useMemo<CSSProperties | undefined>(() => (Number.isFinite(viewportHeight) && viewportHeight > 0 ? { height: viewportHeight } : undefined), [viewportHeight])
+
+    /**
+     * Manages global event listeners (Media Query, Wheel, Resize).
+     * メディアクエリ、ホイール、リサイズなどのグローバルイベントリスナーを管理する副作用。
+     *
+     * Purpose: To handle responsive layout changes and scroll interactions.
+     * Dependencies: [updateViewportHeight]
+     * Cleanup: Removes all event listeners and clears timers.
+     */
+    useEffect(() => {
+        if (typeof window === "undefined") return
+
+        const mq = window.matchMedia("(max-width: 639px)")
+        const onMediaChange = (e: MediaQueryListEvent) => setIsMobileLayout(e.matches)
+        setIsMobileLayout(mq.matches)
+        mq.addEventListener("change", onMediaChange)
+
+        const onResize = () => requestAnimationFrame(updateViewportHeight)
+        window.addEventListener("resize", onResize)
+        updateViewportHeight()
+
+        const el = scrollContainerRef.current
+        const onWheel = () => {
+            setIsWheelScrollActive(true)
+            if (wheelResetTimerRef.current) clearTimeout(wheelResetTimerRef.current)
+            wheelResetTimerRef.current = window.setTimeout(() => {
+                setIsWheelScrollActive(false)
+                wheelResetTimerRef.current = null
+            }, WHEEL_RESET_TIMEOUT_MS)
+        }
+        el?.addEventListener("wheel", onWheel, { passive: true })
+
+        return () => {
+            mq.removeEventListener("change", onMediaChange)
+            window.removeEventListener("resize", onResize)
+            el?.removeEventListener("wheel", onWheel)
+            if (wheelResetTimerRef.current) clearTimeout(wheelResetTimerRef.current)
+        }
+    }, [updateViewportHeight])
+
+    /**
+     * Synchronizes initial selection from props when data changes.
+     * データ変更時にプロパティからの初期選択状態を同期する副作用。
+     *
+     * Purpose: To respect deep-linked selection (ID or Date) when items are loaded.
+     * Dependencies: [dailyReportItems, initialSelectedBusinessDate, initialSelectedReportHubId, selectedReportHubId, itemCount, onSelectItem]
+     * Cleanup: None.
+     */
+    useEffect(() => {
+        if (!itemCount) {
+            appliedInitialSignatureRef.current = null
+            if (selectedReportHubId !== null) onSelectItem(null)
+            return
+        }
+
+        const signature = `${initialSelectedReportHubId ?? ""}|${initialSelectedBusinessDate ?? ""}`
+        const hasInitial = (initialSelectedReportHubId ?? null) !== null || (initialSelectedBusinessDate ?? null) !== null
+
+        if (!hasInitial) appliedInitialSignatureRef.current = null
+
+        if (hasInitial && appliedInitialSignatureRef.current !== signature) {
+            const match = (initialSelectedReportHubId && dailyReportItems.find((i) => i.reportHubId === initialSelectedReportHubId)) || (initialSelectedBusinessDate && dailyReportItems.find((i) => i.businessDate === initialSelectedBusinessDate))
+            if (match) {
+                appliedInitialSignatureRef.current = signature
+                if (selectedReportHubId !== match.reportHubId) onSelectItem(match.reportHubId)
+                return
+            }
+        }
+    }, [dailyReportItems, initialSelectedBusinessDate, initialSelectedReportHubId, selectedReportHubId, itemCount, onSelectItem])
+
+    /**
+     * Restores focus after closing overlay (Desktop only).
+     * オーバーレイを閉じた後のフォーカス復帰 (デスクトップのみ) を行う副作用。
+     *
+     * Purpose: To maintain keyboard focus context for accessibility.
+     * Dependencies: [isMobileDetailOpen, isMobileLayout, dailyReportItems]
+     * Cleanup: None.
+     */
+    useEffect(() => {
+        if (isMobileLayout || isMobileDetailOpen || lastClosedItemIdRef.current === null) return
+        const targetId = lastClosedItemIdRef.current
+        lastClosedItemIdRef.current = null
+
+        const index = dailyReportItems.findIndex((item) => item.reportHubId === targetId)
+        if (index >= 0) {
+            requestAnimationFrame(() => virtualScrollRef.current?.focusItemAtIndex(index))
+        }
+    }, [isMobileDetailOpen, isMobileLayout, dailyReportItems, lastClosedItemIdRef])
+
+    /**
+     * Syncs overlay label with the first item's date.
+     * オーバーレイラベルを先頭アイテムの日付と同期する副作用。
+     *
+     * Purpose: To provide a default label for the scroll thumb overlay.
+     * Dependencies: [dailyReportItems, itemCount]
+     * Cleanup: None.
+     */
+    useEffect(() => {
+        if (itemCount > 0)
+            setOverlayLabel((prev) => {
+                const next = formatToIsoDate(dailyReportItems[0]?.businessDate)
+                return prev === next ? prev : next
+            })
+    }, [dailyReportItems, itemCount])
+
+    const dailyReportItemsRef = useRef(dailyReportItems)
+    dailyReportItemsRef.current = dailyReportItems
+
+    useEffect(() => {
+        if (virtualScrollRef.current) {
+            const el = document.querySelector(".test-daily-report-list") as (Element & { __virtualScroll?: TestableVirtualScrollHandle }) | null
+            if (el) {
+                el.__virtualScroll = {
+                    ...virtualScrollRef.current,
+                    findReportIndex: (id: number) => dailyReportItemsRef.current.findIndex((item) => item.reportHubId === id),
+                    getReportIds: (limit = 20) => dailyReportItemsRef.current.slice(0, limit).map((item) => item.reportHubId),
+                }
+            }
+        }
+    })
+
+    const handleItemSelect = useCallback(
+        (id: number) => {
+            if (id <= 0) return
+            onSelectItem(id)
+            if (isMobileLayout) setIsMobileDetailOpen(true)
+        },
+        [isMobileLayout, onSelectItem, setIsMobileDetailOpen],
+    )
+
+    const getItem = useCallback((index: number) => (index < itemCount ? dailyReportItems[index] : EMPTY_ITEM), [dailyReportItems, itemCount])
+    const getItemHeight = useCallback(() => DEFAULT_ITEM_HEIGHT, [])
+
+    const handleRangeChange = useCallback(
+        (range: { visibleStartIndex: number }) => {
+            const item = getItem(range.visibleStartIndex)
+            if (item?.reportHubId > 0)
+                setOverlayLabel((prev) => {
+                    const next = formatToIsoDate(item.businessDate)
+                    return prev === next ? prev : next
+                })
+        },
+        [getItem],
+    )
+
+    const handleItemFocus = useCallback(
+        (index: number) => {
+            const item = getItem(index)
+            if (item && item.reportHubId > 0) {
+                if (item.reportHubId === selectedReportHubId) return
+                onSelectItem(item.reportHubId)
+            }
+        },
+        [getItem, onSelectItem, selectedReportHubId],
+    )
+
+    const handleScroll = useCallback(() => {
+        const container = scrollContainerRef.current
+        if (!container) return
+
+        if (!container.classList.contains("is-scrolling")) {
+            container.classList.add("is-scrolling")
+        }
+
+        if (scrollEndTimerRef.current) {
+            clearTimeout(scrollEndTimerRef.current)
+        }
+
+        scrollEndTimerRef.current = setTimeout(() => {
+            if (container) {
+                container.classList.remove("is-scrolling")
+            }
+            scrollEndTimerRef.current = null
+        }, 150)
+    }, [])
+
+    const renderThumbOverlay = useCallback((props: ScrollBarThumbOverlayRenderProps) => <BusinessDayThumbOverlay {...props} label={overlayLabel} isWheelScrollActive={isWheelScrollActive} />, [overlayLabel, isWheelScrollActive])
+
+    return (
+        <>
+            <div className="flex h-full min-h-0 gap-4">
+                <div ref={scrollContainerRef} className="flex min-h-0 w-full sm:w-90" style={columnHeightStyle}>
+                    <VirtualScroll
+                        ref={virtualScrollRef}
+                        itemCount={itemCount}
+                        getItem={getItem}
+                        getItemHeight={getItemHeight}
+                        viewportSize={viewportHeight}
+                        overscanCount={VIRTUAL_SCROLL_OVERSCAN_COUNT}
+                        scrollBarOptions={{
+                            width: SCROLL_BAR_WIDTH,
+                            tapScrollCircleOptions: TAP_SCROLL_CIRCLE_OPTIONS,
+                            renderThumbOverlay: renderThumbOverlay,
+                        }}
+                        behaviorOptions={{
+                            inertiaOptions: FAST_SCROLL_INERTIA_OPTIONS,
+                            wheelSpeedMultiplier: FAST_SCROLL_WHEEL_MULTIPLIER,
+                        }}
+                        onRangeChange={handleRangeChange}
+                        onScroll={handleScroll}
+                        onItemFocus={handleItemFocus}
+                        contentInsets={{ top: ITEM_VERTICAL_PADDING, bottom: ITEM_VERTICAL_PADDING }}
+                        className="test-daily-report-list relative w-full">
+                        {(item) => <ListReportItem key={item.reportHubId} item={item} isActive={item.reportHubId === selectedReportHubId} onSelect={handleItemSelect} />}
+                    </VirtualScroll>
+                </div>
+                <DailyReportSidePane dailyReportItems={dailyReportItems} selectedItem={selectedItem} heightStyle={columnHeightStyle} autoMarkRead={!isMobileLayout && autoMarkRead} isActive={selectedReportHubId !== null} userId={userId} />
+            </div>
+            {itemCount === 0 && (
+                <div className="py-8 text-center">
+                    <p className="text-slate-500">データがありません</p>
+                </div>
+            )}
+            {isOverlayMounted && <DailyReportMobileOverlay isOpen={shouldShowOverlay} selectedItem={selectedItem} onClose={handleOverlayClose} autoMarkRead={isMobileLayout && autoMarkRead} userId={userId} />}
+        </>
+    )
+}
+
+/**
+ * Loading skeleton representation for daily report list items.
+ * 日報リストアイテム用読み込み中スケルトン表示。
+ */
+const ListSkeletonItem = () => (
+    <div className="px-2 pb-3" style={{ height: ITEM_CONTAINER_HEIGHT }}>
+        <div className="flex h-full animate-pulse flex-col justify-between rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-700 dark:bg-slate-900/70">
+            <div className="mb-3 flex flex-wrap items-center gap-3">
+                <div className="h-4 w-24 rounded bg-slate-200"></div>
+                <div className="h-4 w-24 rounded bg-slate-200"></div>
+                <div className="h-4 w-24 rounded bg-slate-200"></div>
+            </div>
+            <div className="space-y-2">
+                <div className="h-4 w-full rounded bg-slate-200"></div>
+                <div className="h-4 w-11/12 rounded bg-slate-200"></div>
+                <div className="h-4 w-5/6 rounded bg-slate-200"></div>
+            </div>
+        </div>
+    </div>
+)
+
+type DailyReportSidePaneTab = "article" | "relations"
+
+/**
+ * Side pane that exposes quick tabs for the selected report summary, editing, and correlation views.
+ * 選択した日報の概要表示・編集・相関ビューを切り替え表示するサイドペイン。
+ */
+const DailyReportSidePane = ({
+    dailyReportItems,
+    selectedItem,
+    heightStyle,
+    autoMarkRead = false,
+    isActive = true,
+    userId,
+}: {
+    dailyReportItems?: DailyReportItem[] // Optional for mobile overlay usage
+    selectedItem: DailyReportItem | null
+    heightStyle?: CSSProperties
+    autoMarkRead?: boolean
+    isActive?: boolean
+    userId?: string | null
+}) => {
+    const [activeTab, setActiveTab] = useState<DailyReportSidePaneTab>("article")
+    const [isEditing, setIsEditing] = useState(false)
+    const { draftLabelName, fieldLabels } = useDailyReportConfig()
+    const { report, error, isLoading } = useDailyReportDetail(selectedItem?.reportHubId ?? -1, selectedItem?.businessDate ?? null)
+
+    const scrollContainerRef = useRef<HTMLDivElement>(null)
+    const lastReportIdRef = useRef<number | null>(null)
+    // 自動編集モード (ドラフト検出による自動遷移) かどうかを追跡
+    const autoEditRef = useRef(false)
+
+    // レポート選択時のエディタモード自動制御
+    // - 新しいレポート選択: ドラフトならエディタモード、公開済みならビューモード
+    // - 同一レポートの SSE 更新: ドラフト→公開遷移時に自動編集のみ解除
+    useEffect(() => {
+        if (!report) return
+
+        const isDraft = report.labels.some((l) => l.name === draftLabelName)
+
+        if (report.reportHubId !== lastReportIdRef.current) {
+            // 選択レポートが変更された
+            lastReportIdRef.current = report.reportHubId
+            if (isDraft) {
+                setIsEditing(true)
+                autoEditRef.current = true
+            } else {
+                setIsEditing(false)
+                autoEditRef.current = false
+            }
+        } else if (!isDraft && isEditing && autoEditRef.current) {
+            // SSE で同一レポートが下書き→公開に遷移: 自動編集モードのみ解除
+            // ユーザーがダブルクリックで手動編集中の場合は解除しない
+            setIsEditing(false)
+            autoEditRef.current = false
+        }
+    }, [report, isEditing, draftLabelName])
+
+    const isMine = !!(userId && report?.userId === userId)
+
+    const scrollToBottom = useCallback(() => {
+        setTimeout(() => {
+            if (scrollContainerRef.current) {
+                scrollContainerRef.current.scrollTo({ top: scrollContainerRef.current.scrollHeight, behavior: "smooth" })
+            }
+        }, 100)
+    }, [])
+
+    if (dailyReportItems && (dailyReportItems.length === 0 || !selectedItem)) {
+        return (
+            <aside className="hidden min-h-0 min-w-0 flex-1 gap-3 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm sm:block dark:border-slate-700 dark:bg-slate-900/70" style={heightStyle}>
+                <div className="flex flex-1 items-center justify-center rounded-xl border border-slate-300 border-dashed bg-slate-50 p-4 text-center text-slate-500 text-sm dark:border-slate-600 dark:bg-slate-900/40 dark:text-slate-300">
+                    <p>左側の一覧から日報を選択してください。</p>
+                </div>
+            </aside>
+        )
+    }
+
+    const headerDate = formatToIsoDate(report?.date ?? selectedItem?.businessDate)
+    const headerCreator = report?.employeeName || report?.author ? fallbackText(report.employeeName ?? report.author) : ""
+    const showHeaderSkeleton = isLoading || !report
+
+    const content = (
+        <>
+            <div className="space-y-1">
+                <div className="font-semibold text-slate-500 text-xs uppercase tracking-wide dark:text-slate-300">{fieldLabels.businessDate}</div>
+                <div className="text-slate-900 text-sm dark:text-slate-100">{headerDate}</div>
+                <div className="flex min-h-4 items-center gap-1 text-slate-500 text-xs dark:text-slate-300">
+                    <span>{fieldLabels.author}:</span>
+                    {showHeaderSkeleton ? <div className="h-3 w-24 animate-pulse rounded bg-slate-200 dark:bg-slate-700" /> : <span>{headerCreator}</span>}
+                </div>
+            </div>
+            <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as DailyReportSidePaneTab)} className="flex min-h-0 flex-1 flex-col">
+                <TabsList className="grid grid-cols-2 gap-1 rounded-md bg-slate-100 p-1 text-xs dark:bg-slate-800">
+                    {["article", "relations"].map((tab) => (
+                        <TabsTrigger
+                            key={tab}
+                            value={tab}
+                            className="rounded-md px-2 py-1 font-medium text-slate-600 transition-colors data-[state=active]:bg-white data-[state=active]:text-slate-900 data-[state=active]:shadow-sm dark:text-slate-200 dark:data-[state=active]:bg-slate-900/70 dark:data-[state=active]:text-slate-100">
+                            {tab === "article" ? fieldLabels.tabArticle : fieldLabels.tabRelations}
+                        </TabsTrigger>
+                    ))}
+                </TabsList>
+                <TabsContent ref={scrollContainerRef} value="article" className="scrollbar-thin flex-1 touch-pan-y overflow-y-auto overflow-x-hidden pt-3 text-sm">
+                    {isEditing ? (
+                        report ? (
+                            <DailyReportEditForm report={report} onCancel={() => setIsEditing(false)} onPublishSuccess={() => setIsEditing(false)} />
+                        ) : (
+                            <p className="rounded-lg border border-slate-300 border-dashed bg-slate-50 p-4 text-slate-600 dark:border-slate-600 dark:bg-slate-900/40 dark:text-slate-300">読み込み中...</p>
+                        )
+                    ) : (
+                        selectedItem && (
+                            <DailyReportDisplayPane
+                                report={report}
+                                isLoading={isLoading}
+                                error={error}
+                                selectedItem={selectedItem}
+                                autoMarkRead={autoMarkRead}
+                                isActive={isActive}
+                                onCommentAdded={scrollToBottom}
+                                userId={userId}
+                                onDoubleClick={isMine ? () => setIsEditing(true) : undefined}
+                            />
+                        )
+                    )}
+                </TabsContent>
+                <TabsContent value="relations" className="scrollbar-thin flex-1 touch-pan-y overflow-y-auto pt-3 text-sm">
+                    <p className="rounded-lg border border-slate-300 border-dashed bg-slate-50 p-4 text-slate-600 dark:border-slate-600 dark:bg-slate-900/40 dark:text-slate-300">{fieldLabels.relationsEmpty}</p>
+                </TabsContent>
+            </Tabs>
+        </>
+    )
+
+    // If rendered as a standalone pane (desktop)
+    if (dailyReportItems) {
+        return (
+            <aside data-report-id={selectedItem?.reportHubId} className="test-daily-report-side-pane hidden min-h-0 min-w-0 flex-1 flex-col gap-3 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm sm:flex dark:border-slate-700 dark:bg-slate-900/70" style={heightStyle}>
+                {content}
+            </aside>
+        )
+    }
+    // If rendered inside mobile overlay
+    return (
+        <div data-report-id={selectedItem?.reportHubId} className="test-daily-report-side-pane flex min-h-0 flex-1 flex-col gap-3 overflow-hidden">
+            {content}
+        </div>
+    )
+}
+
+/**
+ * Shows the selected report details in the display tab, including content and metadata.
+ * 表示タブ内で選択した日報の詳細とメタデータを表示するコンポーネント。
+ */
+const DailyReportDisplayPane = ({
+    report,
+    isLoading,
+    error,
+    autoMarkRead = false,
+    isActive = true,
+    onCommentAdded,
+    userId,
+    onDoubleClick,
+}: {
+    report: DailyReportDetail | null
+    isLoading: boolean
+    error: Error | null
+    selectedItem: DailyReportItem
+    autoMarkRead?: boolean
+    isActive?: boolean
+    onCommentAdded?: () => void
+    userId?: string | null
+    onDoubleClick?: () => void
+}) => {
+    // 表示中ユーザーはアクションコンテキストから取得する (root loader 非依存)
+    const { toggleStar, toggleRead, deleteReport, user } = useDailyReportActionContext()
+    const { fieldLabels } = useDailyReportConfig()
+
+    // Use custom hook for comments
+    const { uiComments, handleAddComment, handleDeleteComment, pendingDeleteId, setPendingDeleteId, resolvedIdMap } = useDailyReportComments(report, user, userId)
+    const { handleToggleRead } = useAutoRead(report, isLoading, autoMarkRead, isActive, toggleRead)
+
+    // Auto-scroll to bottom when comments are added (e.g. via SSE)
+    const prevReportHubIdRef = useRef<number | null>(null)
+    const prevCommentsLengthRef = useRef(uiComments.length)
+
+    useEffect(() => {
+        const currentReportHubId = report?.reportHubId ?? null
+
+        // Reset tracking when switching reports
+        if (currentReportHubId !== prevReportHubIdRef.current) {
+            prevReportHubIdRef.current = currentReportHubId
+            prevCommentsLengthRef.current = uiComments.length
+            return
+        }
+
+        // Scroll if comments increased
+        if (uiComments.length > prevCommentsLengthRef.current) {
+            onCommentAdded?.()
+        }
+        prevCommentsLengthRef.current = uiComments.length
+    }, [uiComments.length, report?.reportHubId, onCommentAdded])
+
+    const handleAddCommentWrapper = async (content: string) => {
+        await handleAddComment(content)
+    }
+
+    const displayContent = useMemo(() => {
+        if (!report?.content) return null
+        return report.content
+            .replace(/<br\s*\/?\s*>/gi, "\n")
+            .replace(/<\/p>/gi, "\n")
+            .replace(/<[^>]+>/g, "")
+    }, [report])
+
+    const handleToggleStar = async () => {
+        if (!report) return
+        const nextValue = !report.isStarred
+        try {
+            await toggleStar(report.reportHubId, nextValue, report.date ?? "")
+        } catch (_e) {
+            // Error handled in context
+        }
+    }
+
+    const handleDelete = async () => {
+        if (!report) return
+        if (!confirm("本当に削除しますか？")) return
+        try {
+            await deleteReport(report.reportHubId, report.date ?? "")
+        } catch (_e) {
+            alert("削除に失敗しました")
+        }
+    }
+
+    if (error) return <p className="text-red-500">{error.message}</p>
+
+    const showSkeleton = !report
+    const isStarred = report?.isStarred ?? false
+    const isRead = report?.isRead ?? false
+    const isMine = !!(userId && report?.userId === userId)
+    const hasComments = uiComments.length > 0
+
+    const SkeletonText = ({ className = "w-32" }: { className?: string }) => <div className={`h-4 animate-pulse rounded bg-slate-200 dark:bg-slate-700 ${className}`} />
+
+    return (
+        // biome-ignore lint/a11y/noStaticElementInteractions: Double click to edit feature
+        <div className="relative space-y-4 text-slate-700 dark:text-slate-200" onDoubleClick={onDoubleClick}>
+            {!showSkeleton && report && (
+                <div className="absolute top-0 right-2 z-10 flex items-center justify-end gap-3">
+                    <button type="button" onClick={() => handleToggleRead(false)} className="text-lg leading-none transition-transform focus:outline-none active:scale-110" title={isRead ? "未読にする" : "既読にする"} data-detail-read-button={report.reportHubId}>
+                        {isRead ? <span className="text-slate-300 hover:text-blue-500">✓</span> : <UnreadIndicator className="hover:text-blue-600" />}
+                    </button>
+                    <button type="button" onClick={handleToggleStar} className="text-lg leading-none transition-transform focus:outline-none active:scale-110" title={isStarred ? "スターを外す" : "スターを付ける"} data-detail-star-button={report.reportHubId}>
+                        {isStarred ? <span className="text-yellow-400">★</span> : <span className="text-slate-300 hover:text-yellow-400">☆</span>}
+                    </button>
+                    {isMine && (
+                        <button type="button" onClick={handleDelete} data-detail-delete-button={report.reportHubId} className="text-lg leading-none transition-transform focus:outline-none active:scale-110" title="削除する">
+                            <Trash2 className="h-4 w-4 text-slate-300 hover:text-red-500" />
+                        </button>
+                    )}
+                </div>
+            )}
+
+            <div className="flex items-baseline">
+                <span className="w-24 shrink-0 font-semibold text-slate-500 text-xs uppercase tracking-wide dark:text-slate-300">{fieldLabels.subject}</span>
+                <div className="flex-1 pr-20">{showSkeleton ? <SkeletonText className="w-3/4" /> : <span className="fade-in animate-in text-sm duration-500">{fallbackText(report?.subject)}</span>}</div>
+            </div>
+            <div className="flex items-baseline">
+                <span className="w-24 shrink-0 font-semibold text-slate-500 text-xs uppercase tracking-wide dark:text-slate-300">{fieldLabels.customer}</span>
+                <div className="flex-1">{showSkeleton ? <SkeletonText className="w-1/2" /> : <span className="fade-in animate-in text-sm duration-500">{fallbackText(report?.customerName)}</span>}</div>
+            </div>
+            <div className="space-y-2">
+                <div className="font-semibold text-slate-500 text-xs uppercase tracking-wide dark:text-slate-300">{fieldLabels.content}</div>
+                <div className="min-h-22 rounded-lg bg-slate-50 p-3 text-sm leading-relaxed dark:bg-slate-800/40">
+                    {showSkeleton ? (
+                        <div className="space-y-2">
+                            <SkeletonText className="w-full" />
+                            <SkeletonText className="w-11/12" />
+                            <SkeletonText className="w-4/5" />
+                        </div>
+                    ) : displayContent ? (
+                        <div className="fade-in animate-in whitespace-pre-wrap duration-500">{displayContent}</div>
+                    ) : (
+                        <p className="fade-in animate-in text-slate-500 duration-500 dark:text-slate-400">内容は登録されていません。</p>
+                    )}
+                </div>
+            </div>
+            <div className="flex items-baseline">
+                <span className="w-24 shrink-0 font-semibold text-slate-500 text-xs uppercase tracking-wide dark:text-slate-300">{fieldLabels.visitTime}</span>
+                <div className="flex-1">
+                    {showSkeleton ? (
+                        <SkeletonText className="w-1/3" />
+                    ) : (
+                        <span className="fade-in animate-in text-sm duration-500">
+                            {fallbackText(report?.visitTimeFrom)} {report?.visitTimeFrom && report?.visitTimeTo ? "-" : ""} {fallbackText(report?.visitTimeTo)}
+                        </span>
+                    )}
+                </div>
+            </div>
+            {report && (
+                <div className="fade-in animate-in space-y-2 border-slate-100 border-t pt-4 duration-500 dark:border-slate-800">
+                    <div className="font-semibold text-slate-500 text-xs uppercase tracking-wide dark:text-slate-300">{fieldLabels.comments}</div>
+                    {hasComments && (
+                        <DailyReportCommentList
+                            comments={uiComments}
+                            reportHubId={report.reportHubId}
+                            businessDate={report.date ?? ""}
+                            onDeleteComment={handleDeleteComment}
+                            pendingDeleteId={pendingDeleteId}
+                            onPendingDeleteIdChange={setPendingDeleteId}
+                            resolvedIdMap={resolvedIdMap}
+                        />
+                    )}
+                    <DailyReportCommentForm reportHubId={report.reportHubId} businessDate={report.date ?? ""} onAddComment={handleAddCommentWrapper} />
+                </div>
+            )}
+        </div>
+    )
+}
+
+/**
+ * Mobile-only overlay that slides in with the selected daily report details.
+ * 選択された日報の詳細をモバイル向けにスライド表示し選択ガードを切り替え可能なオーバーレイ。
+ */
+const DailyReportMobileOverlay = ({ isOpen, selectedItem, onClose, autoMarkRead = false, userId }: { isOpen: boolean; selectedItem: DailyReportItem | null; onClose: () => void; autoMarkRead?: boolean; userId?: string | null }) => {
+    const containerRef = useRef<HTMLDivElement>(null)
+    const closeButtonRef = useRef<HTMLButtonElement | null>(null)
+
+    const { isBlocked: isGuardBlocked, requestBlock, reset: resetGuard } = useSwipeGuardState()
+
+    const { report, error, isLoading } = useDailyReportDetail(selectedItem?.reportHubId ?? -1, selectedItem?.businessDate ?? null)
+    const displayData = useTransitionDisplay(isOpen, selectedItem ? { item: selectedItem, detail: { report, error, isLoading } } : null)
+    const displayItem = displayData?.item ?? null
+    const _displayDetail = displayData?.detail ?? EMPTY_DETAIL
+    _displayDetail
+    const { overlayRef, overlayStyle, attemptClose, isSwiping } = useSwipeToDismissOverlay({
+        isOpen,
+        onClose,
+        isCloseBlocked: useCallback(() => isGuardBlocked, [isGuardBlocked]),
+        skipWhenTextSelected: true,
+    })
+
+    const tapHandlers = useTapClick(() => attemptClose())
+
+    /**
+     * Manages focus and guard state when overlay opens/closes.
+     * オーバーレイの開閉時にフォーカスとガード状態を管理する副作用。
+     *
+     * Purpose: To set focus on close button for accessibility and reset swipe guard.
+     * Dependencies: [isOpen, resetGuard]
+     * Cleanup: None.
+     */
+    useEffect(() => {
+        if (isOpen) {
+            requestAnimationFrame(() => closeButtonRef.current?.focus())
+        } else {
+            if (containerRef.current?.contains(document.activeElement)) {
+                ;(document.activeElement as HTMLElement).blur()
+            }
+            resetGuard()
+        }
+    }, [isOpen, resetGuard])
+
+    if (!displayItem) return null
+
+    return (
+        <div ref={containerRef} className={`fixed inset-0 z-50 flex touch-manipulation transition-[visibility] duration-200 sm:hidden ${isOpen ? "visible" : "invisible"} ${isOpen && !isSwiping ? "pointer-events-auto" : "pointer-events-none"}`} aria-hidden={!isOpen}>
+            <button type="button" aria-label="背景をタップして閉じる" className={`absolute inset-0 touch-manipulation bg-slate-900/50 transition-opacity duration-200 focus:outline-none ${isOpen ? "opacity-100" : "opacity-0"}`} {...tapHandlers}></button>
+            <aside
+                role="dialog"
+                aria-modal="true"
+                aria-label="日報詳細"
+                className={`relative ml-auto flex h-full w-full max-w-full transform touch-none select-none bg-white shadow-xl transition-transform duration-200 ease-out dark:bg-slate-900/95 ${isOpen ? "pointer-events-auto" : "pointer-events-none"}`}
+                ref={overlayRef}
+                onKeyDown={(e) => {
+                    if (e.key === "Escape") {
+                        e.preventDefault()
+                        attemptClose()
+                    }
+                }}
+                style={overlayStyle}>
+                <div className="flex h-full w-full flex-col gap-3 p-4">
+                    <SwipeCloseGuardContext.Provider value={{ isBlocked: isGuardBlocked, requestBlock }}>
+                        <DailyReportSidePane selectedItem={displayItem} autoMarkRead={autoMarkRead} isActive={isOpen} userId={userId} />
+                    </SwipeCloseGuardContext.Provider>
+                    <div className="mt-2 flex justify-start">
+                        <button
+                            type="button"
+                            ref={closeButtonRef}
+                            data-overlay-interactive="true"
+                            className="touch-manipulation rounded-full border border-slate-300 px-4 py-2 font-medium text-slate-600 text-sm shadow-sm transition-colors hover:bg-slate-100 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-800"
+                            onClick={() => attemptClose()}>
+                            閉じる
+                        </button>
+                    </div>
+                </div>
+            </aside>
+        </div>
+    )
+}
+
+/**
+ * Up to three non-empty plain-text lines extracted from HTML content.
+ * HTML コンテンツから抽出する最大三つの非空プレーンテキスト行。
+ */
+const extractPreviewLines = (content: string | null): string[] => {
+    if (!content) return []
+    return content
+        .replace(/<br\s*\/?\s*>/gi, "\n")
+        .replace(/<\/p>/gi, "\n")
+        .replace(/<[^>]+>/g, "")
+        .split(/\r?\n/)
+        .map((l) => l.replace(/\u3000/g, " ").trim())
+        .filter((l) => l.length > 0)
+        .slice(0, MAX_PREVIEW_LINES)
+}
+
+/**
+ * Daily report summary card rendered inside the list tab.
+ * List タブ内で表示する日報サマリーカード。
+ */
+const ListReportItem = ({ item, isActive, onSelect }: { item: DailyReportItem; isActive: boolean; onSelect: (id: number) => void }) => {
+    const { report, error, isLoading, isRefetching } = useDailyReportDetail(item.reportHubId, item.businessDate)
+    const { toggleStar, toggleRead, removeStaleItem } = useDailyReportActionContext()
+
+    // フェッチが一度でも試行されたかを追跡する ref
+    const hasEverFetched = useRef(false)
+    if (isRefetching) hasEverFetched.current = true
+
+    // フェッチ完了後に report が null → stale アイテムとしてリストから除去する安全弁
+    // 外部リソース同期: useDailyReportDetail のフェッチ結果に反応する
+    useEffect(() => {
+        if (!(report || isLoading || isRefetching || error) && hasEverFetched.current && item.reportHubId > 0) {
+            removeStaleItem(item.reportHubId)
+        }
+    }, [report, isLoading, isRefetching, error, item.reportHubId, removeStaleItem])
+
+    const tapHandlers = useTapClick(() => onSelect(item.reportHubId))
+
+    if (error) {
+        return (
+            <div className="px-2 pb-3" style={{ height: ITEM_CONTAINER_HEIGHT }}>
+                <div className="flex h-full items-center justify-center rounded-2xl border border-red-200 bg-red-50 p-4 text-red-700 text-sm">
+                    <p>日報 {item.reportHubId.toLocaleString()} の概要読み込みに失敗しました。</p>
+                </div>
+            </div>
+        )
+    }
+
+    if (isLoading) return <ListSkeletonItem />
+
+    if (!report) {
+        return (
+            <div className="px-2 pb-3" style={{ height: ITEM_CONTAINER_HEIGHT }}>
+                <div className="flex h-full items-center justify-center rounded-2xl border border-slate-200 bg-slate-50 p-4 text-slate-500 text-sm dark:border-slate-700 dark:bg-slate-900/40 dark:text-slate-400">
+                    <p>日報が見つかりません</p>
+                </div>
+            </div>
+        )
+    }
+
+    const previewLines = extractPreviewLines(report.content).map((line, i) => ({
+        line,
+        key: `${item.reportHubId}-line-${i}`,
+    }))
+    const creator = fallbackText(report.employeeName ?? report.author)
+    const date = formatToIsoDate(report.date)
+
+    const handleToggleStar = async (e: React.MouseEvent) => {
+        e.stopPropagation()
+        const nextValue = !report.isStarred
+        try {
+            await toggleStar(report.reportHubId, nextValue, report.date ?? "")
+        } catch (_e) {
+            // Error handled in context
+        }
+    }
+
+    const handleToggleRead = async (e: React.MouseEvent) => {
+        e.stopPropagation()
+        const nextValue = !report.isRead
+        try {
+            await toggleRead(report.reportHubId, nextValue, report.date ?? "")
+        } catch (_e) {
+            // Error handled in context
+        }
+    }
+
+    return (
+        <div className="px-2 pb-3" style={{ height: ITEM_CONTAINER_HEIGHT }}>
+            {/* biome-ignore lint/a11y/useSemanticElements: Card contains nested interactive elements (Star/Read buttons) */}
+            <div
+                data-daily-report-button={item.reportHubId}
+                className={`flex h-full w-full in-[.is-scrolling]:transform-none cursor-pointer select-none flex-col rounded-2xl border in-[.is-scrolling]:border-slate-200 bg-white p-4 text-left in-[.is-scrolling]:shadow-sm shadow-sm in-[.is-scrolling]:transition-none transition-all duration-200 hover:-translate-y-0.5 hover:border-blue-300 hover:shadow-lg dark:bg-slate-900/70 ${
+                    isActive ? "border-blue-300 shadow-md ring-2 ring-blue-200 dark:border-blue-500/70 dark:ring-blue-500/40" : "border-slate-200 dark:border-slate-700"
+                }`}
+                style={{ touchAction: "manipulation" }}
+                role="button"
+                tabIndex={0}
+                aria-pressed={isActive}
+                {...tapHandlers}>
+                <div className="mb-3 flex items-center gap-3 text-slate-600 text-sm">
+                    <span className="inline-flex shrink-0 items-center rounded-full bg-slate-100 px-3 py-1 font-semibold text-xs dark:bg-slate-800 dark:text-slate-200">
+                        <span className="whitespace-nowrap font-medium text-slate-900 dark:text-slate-100">{date}</span>
+                    </span>
+                    <span className="inline-flex min-w-0 max-w-full items-center rounded-full bg-slate-100 px-3 py-1 font-semibold text-xs dark:bg-slate-800 dark:text-slate-200">
+                        <span className="truncate font-medium text-slate-900 dark:text-slate-100">{creator}</span>
+                    </span>
+                    <div className="ml-auto flex items-center gap-1.5">
+                        <button
+                            type="button"
+                            title={report.isStarred ? "スターを外す" : "スターを付ける"}
+                            data-list-star-button={item.reportHubId}
+                            onClick={handleToggleStar}
+                            className="flex h-6 w-6 items-center justify-center rounded-full transition-colors hover:bg-slate-200 dark:hover:bg-slate-700">
+                            {report.isStarred ? <Star className="h-3.5 w-3.5 fill-yellow-400 text-yellow-400" /> : <Star className="h-3.5 w-3.5 text-slate-300 dark:text-slate-500" />}
+                        </button>
+                        <button
+                            type="button"
+                            title={report.isRead ? "未読にする" : "既読にする"}
+                            data-list-read-button={item.reportHubId}
+                            onClick={handleToggleRead}
+                            className="flex h-6 w-6 items-center justify-center rounded-full transition-colors hover:bg-slate-200 dark:hover:bg-slate-700">
+                            {report.isRead ? <Check className="h-3.5 w-3.5 text-blue-500" /> : <UnreadIndicator className="text-xs" />}
+                        </button>
+                    </div>
+                </div>
+                <div className="space-y-1 text-slate-700 text-sm leading-relaxed dark:text-slate-200">
+                    {previewLines.length > 0 ? (
+                        previewLines.map(({ line, key }) => (
+                            <p key={key} className="wrap-break-word line-clamp-1">
+                                {line}
+                            </p>
+                        ))
+                    ) : (
+                        <p>内容は登録されていません</p>
+                    )}
+                </div>
+            </div>
+        </div>
+    )
+}