refactor(book): redesign book detail page for spacious layout

[AnnatarHe]

Summary

• Remove triple-nested card containment (DashboardContainer → layout card → BookInfo card) that compressed content to ~784px on a 1024px screen
• Flatten layout wrapper and switch BookInfo to a fixed-width cover grid (grid-cols-[320px,1fr]) giving the cover a stable size and details all remaining space
• Add new BookStatsBar component showing highlights count, reading duration, and date range as glassmorphic stat pills
• Enlarge book title (lg:text-5xl), display book tags as pill badges, and increase contrast on meta/summary sections
• Update skeleton loader and Divider to show clipping count
• Add i18n keys for en/zhCN/ko

Test plan

• pnpm build passes (verified)
• Desktop (1280px+): hero uses full width, cover is prominent, masonry grid is wider
• Tablet (768-1024px): layout stacks gracefully, cover centers
• Mobile (<768px): single column, comfortable reading
• Dark mode renders correctly for all changed components
• Infinite scroll still works for clippings
• Share button still opens preview modal

🤖 Generated with Claude Code

---

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request focuses on refactoring the book detail page to improve its layout and visual presentation. It removes unnecessary container nesting, introduces a new component for displaying book statistics, enhances the overall design with larger text and better contrast, and updates the skeleton loader. The changes aim to provide a more engaging and user-friendly experience, with consideration for different screen sizes and dark mode.

Highlights

• Layout Redesign: The book detail page layout was redesigned to provide a more spacious and modern user experience by removing nested containers and optimizing content width.
• New Component: BookStatsBar: A new BookStatsBar component was added to display key book statistics such as highlights count, reading duration, and date range using glassmorphic stat pills.
• Enhanced Visuals: The book title was enlarged, book tags are now displayed as pill badges, and contrast was increased on meta/summary sections to improve readability and visual appeal.
• Improved Skeleton Loader: The skeleton loader was updated to reflect the new layout and show clipping count, providing a better loading experience.
• Internationalization: i18n keys were added for English, Simplified Chinese, and Korean to support the new features and layout.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[claude]

Code Review

This is a clean, well-motivated refactor that significantly improves the book detail page layout. The removal of triple-nested cards and the new BookStatsBar component are solid improvements. Here are a few things worth addressing:

---

Bugs / Issues

1. Dead duration prop in BookTitleSection

BookTitleSection still accepts duration?: number in its Props type and BookInfo still passes it, but after this PR the prop is no longer used in the component body (the Clock icon and reading duration display were removed). The prop and the pass-through should be cleaned up.

// book-title-section.tsx — duration is declared but never referenced
type Props = {
  book: WenquBook
  duration?: number  // unused after this PR
}
function BookTitleSection({ book }: Props) { ... }

2. Missing ja.json locale update

en.json, ko.json, and zhCN.json all received the three new keys (highlights, readingDays, readingPeriod), but ja.json was not updated. Per CLAUDE.md, Japanese is a supported language. Without these keys the stats bar labels will fall back to the English keys or show raw key strings for Japanese users.

---

Design / i18n Concerns

3. String concatenation in Divider title bypasses i18n

// page.tsx
title={
  clippingsCount > 0
    ? `${clippingsCount} ${t('app.book.title')}`
    : t('app.book.title')
}

Raw concatenation like this skips pluralization and could look wrong in RTL locales. Consider adding a dedicated key with interpolation, e.g. t('app.book.clippingsCount', { count: clippingsCount }), or at minimum t('app.book.title', { count: clippingsCount }) if the key is updated to support the count variable.

4. Hardcoded date format in BookStatsBar

{dayjs(startReadingAt).format('YYYY/MM/DD')} – {dayjs(lastReadingAt).format('YYYY/MM/DD')}

YYYY/MM/DD is not locale-appropriate for all supported languages (e.g., Korean typically uses YYYY년 MM월 DD일). Consider using dayjs(startReadingAt).format('L') (locale-aware short date) or storing the format string in each locale file.

---

Minor Style Note

5. Purple accent deviates from design system

CLAUDE.md specifies that gradients should use adjacent blues or from-blue-400 to-indigo-400. The date range stat pill introduces purple-100 / purple-200 / purple-600 / purple-400 as a third accent colour. indigo would stay within the defined palette and still provide visual differentiation from the blue (highlights) and green (reading days) pills.

---

What's good

• The layout simplification (removing the triple-nested cards) is a meaningful UX improvement and the code is much easier to read now.
• BookStatsBar is a clean, well-scoped component; the conditional rendering for each stat is handled correctly.
• Skeleton loader accurately mirrors the new real layout — good for perceived performance.
• The mobile-first responsive grid (grid-cols-1 md:grid-cols-[280px,1fr] lg:grid-cols-[320px,1fr]) is solid.
• Tag pills in BookTitleSection with a sensible slice(0, 6) cap is a nice touch.

---

Summary: Fix the dead duration prop, add ja.json keys, and address the Divider i18n concatenation — those are the main blockers. The date format and colour nit are lower priority but worth a follow-up.

[gemini-code-assist]

Code Review

This pull request is an excellent refactoring of the book detail page. The changes successfully simplify the layout, improve component organization with the new BookStatsBar, and enhance the user interface for a more spacious and modern feel. The code is clean and the implementation aligns well with the stated goals. I have one minor suggestion to further improve code maintainability.

[gemini-code-assist]

The number of tags to display is hardcoded as 6. It's better to extract this magic number into a constant, for example const MAX_TAGS_TO_SHOW = 6;, defined at the top of the file. This improves readability and makes it easier to change in the future.

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 4 additional findings.