セッション開始：2026/06/05 13:31
前回のセッション（未読お知らせバーの追加）で、
ユーザー画面の PC表示 /h には未読お知らせバー・お知らせ一覧・詳細・ナビ導線が整備された。
一方で モバイル表示 /v はそのとき明示的にスコープ外とされ、
お知らせ関連のページ・導線が一切存在しない状態だった。
本セッションでは、モバイル利用者もPCと同じようにお知らせに気づき・閲覧・既読できるよう、
モバイル /v にお知らせ機能一式（未読お知らせバー・一覧・詳細・ナビ導線）を展開する。
体験は原則として PC（/h）と同一 とする。
やること
/v のヘッダー直下に未読お知らせバーを追加（PCと同じく未読を全件・縦積み表示）/v/system-notifications を新設/v/system-notifications/[id] を新設（詳細表示で自動既読）/v 側へ複製（リンク先を /v に変更）やらないこと
| 対象 | user アプリ モバイル表示 /v レイアウトおよび /v/system-notifications 配下 |
| バーの挙動 | 未読を全件・縦に積んでヘッダー直下に常時表示。0件時はバー非表示。挙動はPCと同一。 |
| バー各行のレイアウト |
モバイルは横幅が狭いため、各行は「日時」を上段、「タイトル」を下段に縦並びで表示する（モバイル /v のみ。PC /h は横並びのまま据え置き）。
バーは未読のみを表示するため、各行の「未読」バッジは表示しない（冗長なため。PC /h のバッジは据え置き）。
|
| バーの配置 | ヘッダー（h-12）直下、スクロール領域（メインコンテンツ）の上 |
| バー各行のリンク先 | /v/system-notifications/{id}（モバイルの詳細ページ） |
| 既読化 | 詳細ページ表示時に MarkAsRead で自動既読 → router.refresh() でバーから即時消去（PCと同じ） |
| フッタータブ | ホーム（Home）／履歴（Logs）／お知らせ（Bell） の3タブ。「設定」タブは削除。 |
| 設定への導線 | ヘッダー右上の設定（⚙）アイコンで引き続き到達可能（変更なし） |
| お知らせタブのバッジ | 付けない（未読バーで気づけるため。PCもリンク/タブにバッジ無し） |
| ヘッダータイトル | 一覧・詳細表示中は <Title title="お知らせ" /> によりモバイルヘッダーが「お知らせ」に切替（PCと同じ仕組み） |
| 実装方針 | PC（/h）の実装を /v へ複製。共通化はしない。 |
| 余白の調整 | 一覧・詳細ページはモバイル向けに p-4 程度へ調整（挙動は同一、見た目のみ最適化）。バーの帯はPCと同一デザイン。 |
ヘッダー直下に未読お知らせバー（青系）が挿入され、フッタータブは「ホーム／履歴／お知らせ」になる。
（お知らせ一覧 /v/system-notifications）
フッターは「設定」が消え、「お知らせ」が入る（設定はヘッダー⚙へ）
PC（/h）配下の各実装を /v へ複製し、リンク先プレフィックスを /h → /v に変更する。
apps/user/app/(vertical)/v/_components/unread-notification-bar/index.tsx
サーバーコンポーネント。listSystemNotificationCached({ isRead: false }) で未読を取得し Suspense でラップ。PCの同名コンポーネントの複製。
apps/user/app/(vertical)/v/_components/unread-notification-bar/_components/content/index.tsx
各行のリンク先を /v/system-notifications/{id} に変更。0件時は null。
各行は「日時」を上段・「タイトル」を下段の縦並びレイアウトにし、「未読」バッジは出さない（PCの横並び＋バッジから変更）。
apps/user/app/(vertical)/v/system-notifications/page.tsx
お知らせ一覧ページ。リンク先を /v に変更。余白をモバイル向けに調整。
apps/user/app/(vertical)/v/system-notifications/[systemNotificationId]/layout.tsx
「お知らせ一覧へ戻る」ボタン（→ /v/system-notifications）。
apps/user/app/(vertical)/v/system-notifications/[systemNotificationId]/page.tsx
公開中 → Published、期限切れ → Expired、見つからない → notFound()。PCと同一ロジック。
apps/user/app/(vertical)/v/system-notifications/[systemNotificationId]/not-found.tsx
「お知らせが見つかりません」。一覧リンク先を /v に変更。
.../[systemNotificationId]/_components/published/index.tsx
本文（段落・画像）の表示と MarkAsRead 配置。余白をモバイル向けに調整。
.../published/_components/mark-as-read/index.tsx
詳細表示時に createSystemNotificationRead を呼び router.refresh()。PCと同一。
.../[systemNotificationId]/_components/expired/index.tsx
「このお知らせは公開を終了しました」。一覧リンク先を /v に変更。
apps/user/app/(vertical)/v/layout.tsx
① ヘッダー div とスクロール領域の間に <UnreadNotificationBar /> を挿入。
② フッタータブから「設定」を削除し「お知らせ」（Bell → /v/system-notifications）を追加。
router.refresh() が必要（PCと同じ方式を踏襲）。createSystemNotificationRead）はお知らせ詳細ページ表示時のみ。バー単体・一覧では既読化しない。overflow-scroll。バーはスクロール領域の外（上）に固定配置し、本文だけがスクロールする。