feat: ボトル一覧を表示した（US-3）

[hduehgw0]

関連 issue

resolve #26

やったこと

概要

ボトル一覧ページを実装した（#25 の反映確認用の最小表示を置き換え）。読み取りは Server Component が Prisma を直接呼ぶ（アーキの鉄則どおり、クライアント JS の追加なし）。

絞り込み・並べ替えは当初 URL クエリで実装したが、一人用アプリで URL 共有の利点が薄い・実装が一覧本来の軽さに対して重い・表示要素が UI で固まっていないため YAGNI で撤去し、一覧表示に絞った。MVP のスコープから外したことを user-stories.md・roadmap.md にも反映（本文＝現在形の正本）。

変更点

• /bottles：一覧の本実装
  • 各ボトルを表示：題名＝「名称 年数」（例「山崎 12年」／NAS は名称のみ。業界の呼称に合わせる）、本数（右寄せ）、国・地域（中黒テキスト）、限定版のみバッジ（未入力項目は省略）
  • 並びは新しい順（既定のみ・切り替え UI は持たない）
  • 空状態：「まだ登録がありません」
• shadcn/ui の Badge を追加（限定版バッジ用）
• docs：一覧の MVP スコープから絞り込み・並べ替えを外す（US-3・roadmap 第2週）

受け入れ条件（US-3）

• 自分のボトルが一覧で表示される（銘柄名・国・地域・年数・本数・限定版バッジ）
• スマホ画面で崩れず見やすい（モバイルファースト）
• 0 件のとき空状態が表示される

動作確認

• pnpm lint が通る
• pnpm test が通る（既存 17 本）※今回のタスクではテストを実装していない！
• pnpm build が通る
• モバイル幅で表示が崩れない

備考

• バッジは「限定版」の1種類のみ（少数精鋭。何にでも付けると希釈するため。国・地域はテキスト）
• 絞り込み・検索・ページネーション等の第3週以降の計画は別 Issue で扱う（今回のスコープ外）
• 詳細ページへのリンクは feat: ボトルの詳細を見る（US-4） #27 のスコープ

Summary by CodeRabbit

Summary by CodeRabbit

• New Features
  • Bottle listings now display expanded per-bottle details, including age (when available), quantity, and region/sub-region metadata.
  • Limited-edition bottles are highlighted with a “限定版” badge.
• Bug Fixes
  • Cleanly omits missing region/sub-region pieces and hides the metadata row when there’s nothing to show (except for limited editions).
• Documentation
  • Updated collection browsing acceptance criteria and roadmap wording to emphasize mobile-first empty states and remove specific filtering/sorting requirements.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
mycellar	Ready	Preview, Comment	Jul 20, 2026 4:51am

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: c50efef7-1416-450f-9af9-08da39c9597d

📥 Commits

Reviewing files that changed from the base of the PR and between 26b0f0d and 626cd78.

📒 Files selected for processing (1)

• src/app/bottles/page.tsx

---

📝 Walkthrough

Walkthrough

The bottles page now displays age, quantity, region metadata, and limited-edition badges. A reusable Badge component is added, while roadmap and US-3 documentation define the empty state and remove filtering and sorting from the current listing scope.

Changes

Bottle listing

Layer / File(s)	Summary
Reusable badge component src/components/ui/badge.tsx	Adds configurable badge variants, optional child composition, class merging, forwarded props, and data attributes.
Expanded bottle rows and listing scope src/app/bottles/page.tsx, docs/user-stories.md, docs/roadmap.md	Bottle rows show enriched metadata and conditional limited-edition badges; documentation specifies the empty state and removes current filtering and sorting requirements.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• hduehgw0/mycellar#33: Both changes update the /bottles list rendering, with this PR adding expanded metadata and badges.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Linked Issues check	❓ Inconclusive	Most issue requirements are reflected, but the summary does not explicitly verify the empty state or country field.	Share the full /bottles diff or screenshots so the empty-state behavior and country/region display can be confirmed.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title is concise and directly describes the main change: implementing the bottles list for US-3.
Description check	✅ Passed	The description matches the template closely and includes the issue, summary, changes, self-checks, testing, and notes.
Out of Scope Changes check	✅ Passed	The Badge addition and docs edits support the list-view scope, and no unrelated changes are evident.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/#26/bottle-list

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/app/bottles/query.test.ts`:
- Around line 11-13: Add a separate assertion in the existing parseQuery test
coverage for parseQuery({}), verifying it returns the default result with no
region filter and sort set to "new"; keep the current invalid-value assertion
unchanged.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 3325271f-9e19-438d-b9f5-a1a8f7e81eda

📥 Commits

Reviewing files that changed from the base of the PR and between eecf74b and 3dc2f92.

📒 Files selected for processing (3)

• src/app/bottles/page.tsx
• src/app/bottles/query.test.ts
• src/app/bottles/query.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• src/app/bottles/page.tsx

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/app/bottles/page.tsx`:
- Around line 47-50: Update the bottle title span in the flex row to allow
shrinking and wrapping by adding the appropriate min-width and word-wrapping
classes, while preserving the quantity span’s fixed, non-shrinking behavior.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: b3749587-6536-47ab-8d4f-5c22c6a5aee0

📥 Commits

Reviewing files that changed from the base of the PR and between 3dc2f92 and 8054955.

📒 Files selected for processing (3)

• docs/user-stories.md
• src/app/bottles/page.tsx
• src/components/ui/badge.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• src/components/ui/badge.tsx

[hduehgw0]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.