@aiquants/daily-report 0.18.0 → 0.18.2

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

@@ -2,6 +2,7 @@
  * Virtual-scrolling summary list for daily reports driven by fetcher-based detail hooks.
  * useFetcher ベースの詳細取得フックで日報サマリーを仮想スクロール表示。
  */
+import { Panel, PanelGroup, PanelResizeHandle } from "@aiquants/resize-panels"
 import { SwipeCloseGuardContext, useSwipeGuardState, useSwipeToDismissOverlay, useTapClick, useTransitionDisplay } from "@aiquants/swipe-overlay"
 import { type ScrollBarThumbOverlayRenderProps, VirtualScroll, type VirtualScrollHandle } from "@aiquants/virtualscroll"
 import Check from "lucide-react/dist/esm/icons/check.js"
@@ -21,7 +22,6 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs"
 import {
     CONTENT_DRAG_POINTER_INPUTS,
     DEFAULT_ITEM_HEIGHT,
-    EMPTY_DETAIL,
     EMPTY_ITEM,
     FAST_SCROLL_INERTIA_OPTIONS,
     FAST_SCROLL_WHEEL_MULTIPLIER,
@@ -40,11 +40,39 @@ import { DailyReportCommentForm, DailyReportCommentList } from "./daily-report-c
 import { DailyReportEditForm } from "./daily-report-edit-form"
 import { UnreadIndicator } from "./unread-indicator"
 
+/**
+ * Static behavior options for the virtual scroll component to ensure stable references across renders.
+ * レンダリングをまたいで安定した参照を保証するための仮想スクロール静的動作オプション。
+ */
+const VIRTUAL_SCROLL_BEHAVIOR_OPTIONS = {
+    pointerDragInputs: CONTENT_DRAG_POINTER_INPUTS,
+    inertiaOptions: FAST_SCROLL_INERTIA_OPTIONS,
+    wheelSpeedMultiplier: FAST_SCROLL_WHEEL_MULTIPLIER,
+    enableKeyboardNavigation: false,
+} as const
+
+/**
+ * Static content insets for the virtual scroll component.
+ * 仮想スクロールコンポーネント用の静的インセット定義。
+ */
+const VIRTUAL_SCROLL_CONTENT_INSETS = {
+    top: ITEM_VERTICAL_PADDING,
+    bottom: ITEM_VERTICAL_PADDING,
+} as const
+
+/**
+ * Testable virtual scroll handle extended with search and ID inspection methods.
+ * 検索および ID 参照メソッドを拡張したテスト用仮想スクロールハンドル型。
+ */
 type TestableVirtualScrollHandle = VirtualScrollHandle & {
     findReportIndex: (id: number) => number
     getReportIds: (limit?: number) => number[]
 }
 
+/**
+ * Props for the DailyReportList component.
+ * DailyReportList コンポーネントのプロパティ型定義。
+ */
 type DailyReportListProps = {
     dailyReportItems: DailyReportItem[]
     autoMarkRead?: boolean
@@ -52,11 +80,10 @@ type DailyReportListProps = {
     onSelectItem: (reportHubId: number | null) => void
     userId?: string | null
     /**
+     * Shared slot to preserve scroll position across unmounted tab switches.
      * タブ切替 (アンマウント) をまたいでスクロール位置を持ち回る共有スロット。
-     * 値は VirtualScroll の**論理座標** (inset 非依存。onScroll が配信する座標系)。
+     * 値は VirtualScroll の論理座標 (inset 非依存。onScroll が配信する座標系)。
      * マウント時に一度だけ読み、スクロールのたびに書き戻す。
-     * ❗ 値をレンダー時に読んで props へ焼き込む方式は禁止: 非制御タブでは親が
-     * 再レンダーされず、復帰マウントに古い値が渡る (実測で再現した実害バグ)
      */
     scrollOffsetRef?: RefObject<number>
 }
@@ -64,6 +91,12 @@ type DailyReportListProps = {
 /**
  * Manages mobile overlay state, history navigation, and scroll locking.
  * モバイルオーバーレイの状態、履歴ナビゲーション、スクロールロックを管理するフック。
+ *
+ * @param isMobileLayout - Whether the current viewport matches mobile layout. モバイルレイアウトかどうか。
+ * @param selectedReportHubId - Currently selected report identifier. 現在選択中の日報 ID。
+ * @param dailyReportItems - Full list of daily report items. 日報アイテム一覧。
+ * @param onSelectItem - Callback to update selected report identifier. 選択日報 ID 更新コールバック。
+ * @returns Mobile overlay state and control handlers. モバイルオーバーレイ状態と操作ハンドラ。
  */
 const useMobileOverlayManager = (isMobileLayout: boolean, selectedReportHubId: number | null, dailyReportItems: DailyReportItem[], onSelectItem: (reportHubId: number | null) => void) => {
     const [isMobileDetailOpen, setIsMobileDetailOpen] = useState(false)
@@ -71,8 +104,36 @@ const useMobileOverlayManager = (isMobileLayout: boolean, selectedReportHubId: n
     const overlayHistoryKeyRef = useRef<string | null>(null)
     const lastClosedItemIdRef = useRef<number | null>(null)
     const bodyOverflowRef = useRef<string | null>(null)
+    const prevIsMobileRef = useRef(isMobileLayout)
+    const isInitialMountRef = useRef(true)
 
     const selectedItem = useMemo(() => (selectedReportHubId === null ? null : (dailyReportItems.find((e) => e.reportHubId === selectedReportHubId) ?? null)), [dailyReportItems, selectedReportHubId])
+
+    // デスクトップで日報を選択中に画面幅がモバイル幅へ縮小・回転した際、詳細の閲覧文脈を失わないようオーバーレイへ引き継ぐ
+    useEffect(() => {
+        // 初回マウント時は SSR とのハイドレーション整合 (useIsMobileLayout の false -> true 遷移) による
+        // 誤展開を防止するため、リサイズ遷移処理をスキップする
+        if (isInitialMountRef.current) {
+            isInitialMountRef.current = false
+            prevIsMobileRef.current = isMobileLayout
+            return
+        }
+
+        const wasDesktop = !prevIsMobileRef.current
+        prevIsMobileRef.current = isMobileLayout
+
+        if (wasDesktop && isMobileLayout && selectedReportHubId !== null) {
+            setIsMobileDetailOpen(true)
+        } else if (!isMobileLayout && isMobileDetailOpen) {
+            // デスクトップ復帰時はオーバーレイを閉じ、ロックされていたスクロールを即時解放する
+            setIsMobileDetailOpen(false)
+            if (bodyOverflowRef.current !== null) {
+                document.body.style.overflow = bodyOverflowRef.current
+                bodyOverflowRef.current = null
+            }
+        }
+    }, [isMobileLayout, selectedReportHubId, isMobileDetailOpen])
+
     const shouldShowOverlay = isMobileLayout && isMobileDetailOpen && selectedItem !== null
 
     /**
@@ -103,7 +164,7 @@ const useMobileOverlayManager = (isMobileLayout: boolean, selectedReportHubId: n
     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)
@@ -112,8 +173,8 @@ const useMobileOverlayManager = (isMobileLayout: boolean, selectedReportHubId: n
             overlayHistoryKeyRef.current = null
         }
 
-        // Scroll Lock
-        if (isMobileDetailOpen) {
+        // オーバーレイ背面のスクロールを抑止して誤スクロールを防止
+        if (isMobileLayout && isMobileDetailOpen) {
             bodyOverflowRef.current = document.body.style.overflow
             document.body.style.overflow = "hidden"
         } else if (bodyOverflowRef.current !== null) {
@@ -251,11 +312,37 @@ export const DailyReportList = ({ dailyReportItems, autoMarkRead = false, select
     const [overlayLabel, setOverlayLabel] = useState<string>("")
     const [isWheelScrollActive, setIsWheelScrollActive] = useState(false)
     const isMobileLayout = useIsMobileLayout()
+    const rootContainerRef = useRef<HTMLDivElement>(null)
+    const [isContainerNarrow, setIsContainerNarrow] = useState(false)
+
+    /**
+     * Observes root container width to fallback to single-column layout when available space is constrained.
+     * 利用可能なコンテナ幅が狭小化した際に単一カラム表示へフォールバックするためのコンテナ監視。
+     */
+    useEffect(() => {
+        if (typeof window === "undefined" || typeof ResizeObserver === "undefined") return
+        const el = rootContainerRef.current
+        if (!el) return
+
+        const observer = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.target === el) {
+                    const width = entry.contentRect.width
+                    // 2 カラム表示に必要な安全幅 (460px) を下回った場合は 1 カラムへフォールバック
+                    setIsContainerNarrow(width > 0 && width < 460)
+                }
+            }
+        })
+        observer.observe(el)
+        return () => observer.disconnect()
+    }, [])
+
+    const effectiveIsMobile = isMobileLayout || isContainerNarrow
     const wheelResetTimerRef = useRef<number | 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 { isMobileDetailOpen, setIsMobileDetailOpen, isOverlayMounted, shouldShowOverlay, handleOverlayClose, lastClosedItemIdRef, selectedItem } = useMobileOverlayManager(effectiveIsMobile, selectedReportHubId, dailyReportItems, onSelectItem)
 
     const columnHeightStyle = useMemo<CSSProperties | undefined>(() => (Number.isFinite(viewportHeight) && viewportHeight > 0 ? { height: viewportHeight } : undefined), [viewportHeight])
 
@@ -314,7 +401,7 @@ export const DailyReportList = ({ dailyReportItems, autoMarkRead = false, select
      * Cleanup: None.
      */
     useEffect(() => {
-        if (isMobileLayout || isMobileDetailOpen || lastClosedItemIdRef.current === null) return
+        if (effectiveIsMobile || isMobileDetailOpen || lastClosedItemIdRef.current === null) return
         const targetId = lastClosedItemIdRef.current
         lastClosedItemIdRef.current = null
 
@@ -330,7 +417,7 @@ export const DailyReportList = ({ dailyReportItems, autoMarkRead = false, select
                 card?.focus()
             })
         }
-    }, [isMobileDetailOpen, isMobileLayout, dailyReportItems, lastClosedItemIdRef])
+    }, [isMobileDetailOpen, effectiveIsMobile, dailyReportItems, lastClosedItemIdRef])
 
     /**
      * Syncs overlay label with the first item's date.
@@ -368,9 +455,9 @@ export const DailyReportList = ({ dailyReportItems, autoMarkRead = false, select
         (id: number) => {
             if (id <= 0) return
             onSelectItem(id)
-            if (isMobileLayout) setIsMobileDetailOpen(true)
+            if (effectiveIsMobile) setIsMobileDetailOpen(true)
         },
-        [isMobileLayout, onSelectItem, setIsMobileDetailOpen],
+        [effectiveIsMobile, onSelectItem, setIsMobileDetailOpen],
     )
 
     const getItem = useCallback((index: number) => (index < itemCount ? dailyReportItems[index] : EMPTY_ITEM), [dailyReportItems, itemCount])
@@ -397,11 +484,7 @@ export const DailyReportList = ({ dailyReportItems, autoMarkRead = false, select
 
     const handleScroll = useCallback(
         (position: number) => {
-            // onScroll が配信する論理座標をそのまま共有スロットへ書く (保存と復元で座標系を一致させる)。
-            // 補足 (virtualscroll 2.0.0): ハンドル getScrollPosition も論理座標に統一されたため
-            // 読み戻しても座標は一致するが、配信引数が正 (追加のハンドル呼び出しは冗長)。
-            // 歴史的経緯: 2.0.0 以前はペイン座標を返す非対称があり、読み戻しが inset 分ずれる
-            // 実害バグの原因だった
+            // onScroll が配信する論理座標をそのまま共有スロットへ記録し、タブ復帰時の復元座標を一致させる
             if (scrollOffsetRef) {
                 scrollOffsetRef.current = position
             }
@@ -429,59 +512,70 @@ export const DailyReportList = ({ dailyReportItems, autoMarkRead = false, select
 
     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}
-                        initialScrollOffset={initialScrollOffset}
-                        overscanCount={VIRTUAL_SCROLL_OVERSCAN_COUNT}
-                        scrollBarOptions={{
-                            width: SCROLL_BAR_WIDTH,
-                            tapScrollCircleOptions: TAP_SCROLL_CIRCLE_OPTIONS,
-                            renderThumbOverlay: renderThumbOverlay,
-                        }}
-                        behaviorOptions={{
-                            // ドラッグスクロールは無効化せず、**ポインタ種別で絞る**。
-                            // 丸ごと切るとタッチ端末からスクロール手段が消える (定数の注記参照)
-                            pointerDragInputs: CONTENT_DRAG_POINTER_INPUTS,
-                            inertiaOptions: FAST_SCROLL_INERTIA_OPTIONS,
-                            wheelSpeedMultiplier: FAST_SCROLL_WHEEL_MULTIPLIER,
-                            // 行ラッパーへの tabIndex 付与 (タブ順汚染) と pointerdown フォーカス移動を止める。
-                            // 「★/既読タップで詳細ペインが切り替わる」不具合は 2 経路あり、これはその 1 つ目
-                            // (focus 経由)。2 つ目 (useTapClick の pointerup バブリング) はボタン側の
-                            // stopPointerPropagation が塞ぐ。onItemFocus は発火しなくなる
-                            enableKeyboardNavigation: false,
-                        }}
-                        onRangeChange={handleRangeChange}
-                        onScroll={handleScroll}
-                        contentInsets={{ top: ITEM_VERTICAL_PADDING, bottom: ITEM_VERTICAL_PADDING }}
-                        testId="daily-report-list"
-                        className="relative w-full"
-                        contentProps={{
-                            // 行 (role="option" ではなく role="listitem") だけを所有する list を、
-                            // スクロールバーと兄弟のコンテンツ要素に置く (virtualscroll 1.23.0 の口)。
-                            // 各行が aria-posinset/aria-setsize を持つので SR は「全 N 件中 M 番目」を読める
-                            role: "list",
-                            "aria-label": title,
-                        }}>
-                        {renderListRow}
-                    </VirtualScroll>
-                </div>
-                <DailyReportSidePane dailyReportItems={dailyReportItems} selectedItem={selectedItem} heightStyle={columnHeightStyle} autoMarkRead={!isMobileLayout && autoMarkRead} isActive={selectedReportHubId !== null} userId={userId} />
+    const virtualScrollNode = useMemo(
+        () => (
+            <div ref={scrollContainerRef} className="isolate flex h-full min-h-0 w-full overflow-hidden" style={columnHeightStyle}>
+                <VirtualScroll
+                    ref={virtualScrollRef}
+                    itemCount={itemCount}
+                    getItem={getItem}
+                    getItemHeight={getItemHeight}
+                    viewportSize={viewportHeight}
+                    initialScrollOffset={initialScrollOffset}
+                    overscanCount={VIRTUAL_SCROLL_OVERSCAN_COUNT}
+                    scrollBarOptions={{
+                        width: SCROLL_BAR_WIDTH,
+                        tapScrollCircleOptions: TAP_SCROLL_CIRCLE_OPTIONS,
+                        renderThumbOverlay: renderThumbOverlay,
+                    }}
+                    behaviorOptions={VIRTUAL_SCROLL_BEHAVIOR_OPTIONS}
+                    onRangeChange={handleRangeChange}
+                    onScroll={handleScroll}
+                    contentInsets={VIRTUAL_SCROLL_CONTENT_INSETS}
+                    testId="daily-report-list"
+                    className="relative w-full"
+                    contentProps={{
+                        // 行 (role="option" ではなく role="listitem") だけを所有する list を、
+                        // スクロールバーと兄弟のコンテンツ要素に置く (virtualscroll 1.23.0 の口)。
+                        // 各行が aria-posinset/aria-setsize を持つので SR は「全 N 件中 M 番目」を読める
+                        role: "list",
+                        "aria-label": title,
+                    }}>
+                    {renderListRow}
+                </VirtualScroll>
             </div>
+        ),
+        [columnHeightStyle, itemCount, getItem, getItemHeight, viewportHeight, initialScrollOffset, renderThumbOverlay, handleRangeChange, handleScroll, title, renderListRow],
+    )
+
+    return (
+        <div ref={rootContainerRef} className="h-full min-h-0 w-full" data-testid="daily-report-root">
+            {effectiveIsMobile ? (
+                <div className="flex h-full min-h-0">{virtualScrollNode}</div>
+            ) : (
+                <PanelGroup direction="horizontal" className="flex h-full min-h-0" data-testid="daily-report-panel-group">
+                    <Panel id="daily-report-list-panel" defaultSize={{ value: 360, unit: "pixels" }} minSize={{ value: 160, unit: "pixels" }} maxSize={{ value: 520, unit: "pixels" }} contentOverflow="hidden" className="flex min-h-0">
+                        {virtualScrollNode}
+                    </Panel>
+                    <PanelResizeHandle
+                        id="daily-report-list-handle"
+                        thickness={10}
+                        indicator={{ visible: true, thickness: 6, length: 32, barThickness: 2, barLength: 16 }}
+                        className="cursor-col-resize rounded transition-colors hover:bg-slate-200/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1 dark:hover:bg-slate-700/60"
+                        aria-label="日報一覧と詳細ペインの境界リサイズ"
+                    />
+                    <Panel id="daily-report-detail-panel" minSize={{ value: 160, unit: "pixels" }} contentOverflow="hidden" className="flex min-h-0 flex-1 pl-1.5">
+                        <DailyReportSidePane dailyReportItems={dailyReportItems} selectedItem={selectedItem} autoMarkRead={autoMarkRead} isActive={selectedReportHubId !== null} userId={userId} />
+                    </Panel>
+                </PanelGroup>
+            )}
             {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} />}
-        </>
+            {isOverlayMounted && <DailyReportMobileOverlay isOpen={shouldShowOverlay} selectedItem={selectedItem} onClose={handleOverlayClose} autoMarkRead={effectiveIsMobile && autoMarkRead} userId={userId} />}
+        </div>
     )
 }
 
@@ -509,6 +603,10 @@ const ListSkeletonItem = (wrapperProps: React.HTMLAttributes<HTMLDivElement> & {
     </div>
 )
 
+/**
+ * Tab types available in the daily report side pane.
+ * 日報サイドペインで利用可能なタブ種別。
+ */
 type DailyReportSidePaneTab = "article" | "relations"
 
 /**
@@ -523,7 +621,8 @@ const DailyReportSidePane = ({
     isActive = true,
     userId,
 }: {
-    dailyReportItems?: DailyReportItem[] // Optional for mobile overlay usage
+    /** Full list of daily report items; omitted when rendered inside mobile overlay. 日報アイテム一覧。モバイルオーバーレイ時は未指定。 */
+    dailyReportItems?: DailyReportItem[]
     selectedItem: DailyReportItem | null
     heightStyle?: CSSProperties
     autoMarkRead?: boolean
@@ -578,8 +677,8 @@ const DailyReportSidePane = ({
 
     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">
+            <aside className="hidden h-full min-h-0 min-w-0 flex-1 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}>
+                <div className="flex h-full 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>
@@ -646,19 +745,18 @@ const DailyReportSidePane = ({
         </>
     )
 
-    // If rendered as a standalone pane (desktop)
     if (dailyReportItems) {
         return (
             <aside
                 data-testid="daily-report-side-pane"
                 data-report-id={selectedItem?.reportHubId}
-                className="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"
+                className="hidden h-full min-h-0 w-full 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-testid="daily-report-side-pane" data-report-id={selectedItem?.reportHubId} className="flex min-h-0 flex-1 flex-col gap-3 overflow-hidden">
             {content}
@@ -779,14 +877,29 @@ const DailyReportDisplayPane = ({
         <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}>
+                    <button
+                        type="button"
+                        onClick={() => handleToggleRead(false)}
+                        className="rounded text-lg leading-none transition-transform focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 active:scale-95"
+                        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}>
+                    <button
+                        type="button"
+                        onClick={handleToggleStar}
+                        className="rounded text-lg leading-none transition-transform focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 active:scale-95"
+                        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="削除する">
+                        <button
+                            type="button"
+                            onClick={handleDelete}
+                            data-detail-delete-button={report.reportHubId}
+                            className="rounded text-lg leading-none transition-transform focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 active:scale-95"
+                            title="削除する">
                             <Trash2 className="h-4 w-4 text-slate-300 hover:text-red-500" />
                         </button>
                     )}
@@ -866,8 +979,6 @@ const DailyReportMobileOverlay = ({ isOpen, selectedItem, onClose, autoMarkRead
     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,
@@ -899,13 +1010,21 @@ const DailyReportMobileOverlay = ({ isOpen, selectedItem, onClose, autoMarkRead
     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}>
+        <div
+            ref={containerRef}
+            data-daily-report-mobile-overlay="true"
+            className={`fixed top-0 bottom-0 left-0 z-[100] flex touch-manipulation transition-[visibility] duration-200 ${isOpen ? "visible" : "invisible"} ${isOpen && !isSwiping ? "pointer-events-auto" : "pointer-events-none"}`}
+            style={{
+                right: "var(--aqdr-overlay-right, 0px)",
+                transition: "right 0.5s, visibility 0.2s",
+            }}
+            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"}`}
+                className={`relative ml-auto flex h-full w-full max-w-full transform touch-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") {
@@ -1011,7 +1130,7 @@ const ListReportItem = memo(({ item, index, setSize, isActive, onSelect }: { ite
         try {
             await toggleStar(report.reportHubId, nextValue, report.date ?? "")
         } catch (_e) {
-            // Error handled in context
+            // コンテキスト層のアクションハンドラでトースト通知およびロールバックが処理されるため握り潰す
         }
     }
 
@@ -1021,7 +1140,7 @@ const ListReportItem = memo(({ item, index, setSize, isActive, onSelect }: { ite
         try {
             await toggleRead(report.reportHubId, nextValue, report.date ?? "")
         } catch (_e) {
-            // Error handled in context
+            // コンテキスト層のアクションハンドラでトースト通知およびロールバックが処理されるため握り潰す
         }
     }
 
@@ -1041,7 +1160,7 @@ const ListReportItem = memo(({ item, index, setSize, isActive, onSelect }: { ite
             {/* 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-[[data-scrolling]]:transform-none cursor-pointer select-none flex-col rounded-2xl border in-[[data-scrolling]]:border-slate-200 bg-white p-4 text-left in-[[data-scrolling]]:shadow-sm shadow-sm in-[[data-scrolling]]:transition-none transition-all duration-200 hover:-translate-y-0.5 hover:border-blue-300 hover:shadow-lg dark:bg-slate-900/70 ${
+                className={`flex h-full w-full in-[[data-scrolling]]:transform-none cursor-pointer select-none flex-col rounded-2xl border in-[[data-scrolling]]:border-slate-200 bg-white p-4 text-left in-[[data-scrolling]]:shadow-sm shadow-sm in-[[data-scrolling]]:transition-none transition-[transform,border-color,box-shadow] 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" }}