feat: Update Next.js version and adjust SoundSelector styles

- Upgraded Next.js from 15.5.4 to 16.x.x
- Modified SoundSelector component styles for improved layout

Author: ryota-murakami

IMPLEMENTATION_PHASE1.md

@@ -11,21 +11,25 @@
 Phase 1 focused on establishing the core timer functionality with a minimal, working Next.js 15 application.
 
 ### ✅ Project Structure
-- Next.js 15.5.4 with App Router
+
+- Next.js 16.x.x with App Router
 - React 19.2.0 (stable release)
 - TypeScript 5.9.3 with strict mode
 - Tailwind CSS 4.x with custom design tokens
 - pnpm package manager
 
 ### ✅ State Management
+
 **Zustand Timer Store** (`lib/stores/timerStore.ts`)
+
 - `timeRemaining`: Countdown seconds
 - `initialTime`: Reset reference point
 - `isRunning`: Active countdown state
 - `isPaused`: Paused state
 - localStorage persistence for session continuity
 
 **Actions Implemented:**
+
 - `setTime(minutes, seconds)`: Configure timer duration
 - `start()`: Begin countdown
 - `pause()`: Pause countdown
@@ -35,6 +39,7 @@ Phase 1 focused on establishing the core timer functionality with a minimal, wor
 ### ✅ UI Components
 
 #### 1. **TimerDisplay** (`components/timer/TimerDisplay.tsx`)
+
 - Circular SVG progress indicator
 - MM:SS format display
 - Color-coded states:
@@ -46,27 +51,32 @@ Phase 1 focused on establishing the core timer functionality with a minimal, wor
 - Pulse effect during countdown
 
 #### 2. **TimerControls** (`components/timer/TimerControls.tsx`)
+
 - Start/Pause toggle button (green/amber)
 - Reset button (gray)
 - lucide-react icons (Play, Pause, RotateCcw)
 - Hover and tap animations
 - Responsive button layout
 
 #### 3. **TimeInput** (`components/timer/TimeInput.tsx`)
+
 - Separate inputs for minutes (0-99) and seconds (0-59)
 - Input validation and clamping
 - Disabled state when timer is running
 - Touch-friendly sizing
 - Accessibility labels
 
 ### ✅ Main Application
+
 **Page** (`app/page.tsx`)
+
 - Client component with timer interval management
 - useEffect hook for tick automation
 - Component orchestration
 - Clean, centered layout
 
 **Layout** (`app/layout.tsx`)
+
 - Root HTML structure
 - Global CSS import
 - Metadata configuration
@@ -77,6 +87,7 @@ Phase 1 focused on establishing the core timer functionality with a minimal, wor
 ## 📦 Dependencies Installed
 
 ### Production
+
 ```json
 {
   "next": "^15.5.4",
@@ -89,6 +100,7 @@ Phase 1 focused on establishing the core timer functionality with a minimal, wor
 ```
 
 ### Development
+
 ```json
 {
   "typescript": "^5.9.3",
@@ -108,6 +120,7 @@ Phase 1 focused on establishing the core timer functionality with a minimal, wor
 ## 🎨 Design System Implementation
 
 ### Color Palette
+
 ```typescript
 primary: {
   green: '#10B981',      // Timer active state
@@ -128,6 +141,7 @@ accent: {
 ```
 
 ### Typography
+
 - Font: System fonts (antialiased)
 - Timer display: 6xl (3.75rem), monospace
 - Headings: 4xl (2.25rem), bold
@@ -138,22 +152,28 @@ accent: {
 ## ✅ Validation Results
 
 ### Type Checking
+
 ```bash
 ✓ pnpm exec tsc --noEmit
 ```
+
 **Result**: No type errors
 
 ### Production Build
+
 ```bash
 ✓ pnpm run build
 ```
+
 **Result**:
+
 - Build time: 1.2s
 - Bundle size: 141 KB (First Load JS)
 - Static page generation: Successful
 - All routes prerendered
 
 ### Build Output
+
 ```
 Route (app)                              Size  First Load JS
 ┌ ○ /                                 39.1 kB         141 kB
@@ -192,20 +212,24 @@ share-timer/
 ## 🔧 Technical Decisions
 
 ### 1. **Tailwind CSS 4.x**
+
 - **Issue**: Initial PostCSS plugin incompatibility
 - **Solution**: Installed `@tailwindcss/postcss` package
 - **Configuration**: Updated `postcss.config.js` to use new plugin architecture
 
 ### 2. **React 19 Stable**
+
 - Used stable React 19.2.0 instead of RC versions
 - Full compatibility with Next.js 15.5.4
 
 ### 3. **State Management**
+
 - Zustand chosen for minimal bundle size (<1KB)
 - localStorage persistence for session continuity
 - No external dependencies required
 
 ### 4. **Component Architecture**
+
 - Client components for interactivity
 - Separation of concerns (display, controls, input)
 - Reusable, type-safe interfaces
@@ -215,13 +239,16 @@ share-timer/
 ## 🚀 How to Run
 
 ### Development Server
+
 ```bash
 pnpm install
 pnpm dev
 ```
+
 Open [http://localhost:3009](http://localhost:3009)
 
 ### Production Build
+
 ```bash
 pnpm build
 pnpm start
@@ -232,6 +259,7 @@ pnpm start
 ## ✅ Success Criteria Met
 
 ### Functional Requirements
+
 - ✅ Timer counts down accurately (1-second intervals)
 - ✅ MM:SS format display
 - ✅ Start/Pause/Reset functionality
@@ -240,6 +268,7 @@ pnpm start
 - ✅ Visual feedback for different states
 
 ### Non-Functional Requirements
+
 - ✅ TypeScript strict mode compliance
 - ✅ Tailwind CSS 4.x integration
 - ✅ Production build success
@@ -254,33 +283,38 @@ pnpm start
 As defined in DESIGN.md, the following phases remain:
 
 ### Phase 2: Settings & Audio
+
 - Audio manager implementation
 - Sound preset files (gentle-bell, chime, soft-alarm, digital-beep)
 - SoundSelector component
 - VolumeControl component with Radix UI Slider
 - Settings persistence
 
 ### Phase 3: Internationalization
+
 - next-intl setup for App Router
 - Translation files (JP/EN)
 - LanguageToggle component
 - Locale routing ([locale] structure)
 
 ### Phase 4: Notifications
+
 - Permission flow
 - Service Worker setup
 - Web Push API integration
 - NotificationTest component
 - Fallback notifications
 
 ### Phase 5: PWA & Polish
+
 - PWA manifest
 - Icon generation (192x192, 512x512)
 - Offline support
 - Accessibility audit (WCAG 2.1 AA)
 - Performance optimization
 
 ### Phase 6: Testing & Launch
+
 - Unit tests (Vitest/Jest)
 - E2E tests (Playwright)
 - Cross-browser testing
@@ -291,6 +325,7 @@ As defined in DESIGN.md, the following phases remain:
 ## 🎉 Phase 1 Complete!
 
 The core timer functionality is now fully implemented and validated. The application:
+
 - Builds successfully
 - Has no type errors
 - Follows the design specification

components/settings/SoundSelector.tsx

@@ -116,7 +116,7 @@ export function SoundSelector({ value, onChange }: SoundSelectorProps) {
                       <button
                         type="button"
                         onPointerDown={(e) => handlePreview(e, preset)}
-                        className="ml-2 rounded p-3 min-w-[44px] min-h-[44px] flex items-center justify-center text-text-primary hover:bg-bg-secondary hover:text-primary-green transition-colors"
+                        className="ml-2 rounded p-3 min-w-11 min-h-11 flex items-center justify-center text-text-primary hover:bg-bg-secondary hover:text-primary-green transition-colors"
                         aria-label={t('previewSound', {
                           sound: tPresets(preset),
                         })}