AdamJ · AdamJ · Feb 6, 2026 · Feb 6, 2026 · Feb 6, 2026 · Feb 6, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,67 @@
+# Changelog
+
+All notable changes to TimeTracker Pro will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+### Added
+- Native HTML5 time picker component (`TimePicker`) following web standards and a11y best practices
+  - Uses `<input type="time">` for familiar, intuitive UX
+  - **15-minute intervals**: Time selection restricted to :00, :15, :30, and :45 using HTML5 `step` attribute
+  - Automatic native time pickers on mobile devices (iOS/Android)
+  - Keyboard-accessible time inputs on desktop
+  - Full ARIA label support for screen readers
+  - Styled with shadcn/ui design tokens for consistency
+
+### Changed
+- **Improved time selection UX**: Replaced custom scroll-wheel time picker with native HTML5 time inputs
+  - Follows standard web conventions for familiar, intuitive user experience
+  - Better desktop experience with keyboard-accessible inputs
+  - Mobile browsers provide native time pickers automatically
+  - Full accessibility (a11y) support with proper ARIA labels and keyboard navigation
+  - Consistent with existing date input pattern in the application
+  - Eliminates custom scroll logic in favor of browser-native functionality
+  - **Start Day Dialog**: 1 time picker for day start time
+  - **Task Edit Dialog**: 2 time pickers for task start/end times
+  - **Archive Edit Dialog**: 4 time pickers (2 for day start/end, 2 for task start/end)
+- Removed duplicate `generateTimeOptions()` helper functions from all dialog components
+
+### Fixed
+- Resolved merge conflicts in `src/index.css`
+
+## [0.21.1] - 2026-02-06
+
+### Initial Release Features
+- Daily time tracking with start/stop functionality
+- Task management with real-time duration tracking
+- Rich text support with GitHub Flavored Markdown
+- Projects & clients organization with hourly rates
+- Custom categories with color coding
+- Archive system for completed work days
+- Revenue tracking and automatic calculations
+- Invoice generation and export (CSV, JSON)
+- CSV import for existing time data
+- Progressive Web App with offline support
+- Cross-platform compatibility (Windows, Mac, Linux, iOS, Android)
+- Dual storage mode (guest/local or authenticated/cloud sync)
+- Print-friendly archive views
+- Mobile-optimized interface with touch navigation
+- Dark mode support
+- Authentication via Supabase (optional)
+- Real-time sync across devices (when authenticated)
+
+---
+
+## Version History
+
+### Versioning Guidelines
+- **Major** (X.0.0): Breaking changes, major feature overhauls
+- **Minor** (0.X.0): New features, significant improvements, non-breaking changes
+- **Patch** (0.0.X): Bug fixes, minor improvements, documentation updates
+
+### Links
+- [Unreleased Changes](https://github.com/AdamJ/TimeTrackerPro/compare/v0.21.1...HEAD)
+- [Version 0.21.1](https://github.com/AdamJ/TimeTrackerPro/releases/tag/v0.21.1)
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -1,7 +1,7 @@
 # CLAUDE.md - AI Assistant Codebase Guide
 
-**Last Updated:** 2026-02-02
-**Version:** 1.0.2
+**Last Updated:** 2026-02-06
+**Version:** 1.0.4
 
 This document provides comprehensive guidance for AI assistants working with the TimeTracker Pro codebase. It covers architecture, conventions, workflows, and best practices.
 
@@ -196,6 +196,7 @@ TimeTrackerPro/
 ├── src/
 │   ├── components/          # React components
 │   │   ├── ui/             # shadcn/ui base components (49 files)
+│   │   │   └── scroll-time-picker.tsx  # Custom scroll-wheel time picker
 │   │   ├── ArchiveEditDialog.tsx    # Archive entry editing
 │   │   ├── ArchiveItem.tsx          # Archive display component
 │   │   ├── AuthDialog.tsx           # Authentication modal
@@ -627,6 +628,81 @@ const MyPage = lazy(() => import("./pages/MyPage"));
 <Route path="/mypage" element={<MyPage />} />
 ```
 
+### Using the TimePicker Component
+
+The `TimePicker` is a native HTML5 time input wrapped with shadcn/ui styling for consistent appearance and accessibility.
+
+**Component File**: `src/components/ui/scroll-time-picker.tsx`
+
+**Props Interface**:
+```typescript
+interface TimePickerProps {
+	value: string;        // "HH:MM" 24-hour format (e.g., "14:30")
+	onValueChange: (value: string) => void;
+	disabled?: boolean;
+	className?: string;
+	id?: string;
+	"aria-label"?: string;
+	"aria-describedby"?: string;
+}
+```
+
+**Usage Example**:
+```typescript
+import { TimePicker } from "@/components/ui/scroll-time-picker";
+import { Label } from "@/components/ui/label";
+import { useState } from "react";
+
+const MyComponent = () => {
+	const [time, setTime] = useState("09:00");
+
+	return (
+		<div>
+			<Label htmlFor="my-time">Select Time</Label>
+			<TimePicker
+				id="my-time"
+				value={time}
+				onValueChange={setTime}
+				aria-label="Select your preferred time"
+			/>
+		</div>
+	);
+};
+```
+
+**Features**:
+- Native HTML5 `<input type="time">` for standard web UX
+- **15-minute intervals**: Time selection restricted to :00, :15, :30, :45 using `step={900}`
+- Mobile browsers display native time pickers automatically
+- Desktop browsers provide keyboard-accessible spinners or typed input
+- Full accessibility with ARIA labels, keyboard navigation, and screen reader support
+- Styled with shadcn/ui design tokens (matches Input component)
+- Supports dark mode via CSS variables
+- Compatible with all modern browsers
+
+**Accessibility (A11y)**:
+- Proper label association via `htmlFor` and `id`
+- ARIA labels for screen readers
+- Keyboard navigable (Tab, Arrow keys, Enter)
+- Focus visible indicators
+- Works with browser's native date/time accessibility features
+
+**Used In**:
+- `StartDayDialog.tsx` - Day start time selection (1 picker)
+- `TaskEditDialog.tsx` - Task start/end time selection (2 pickers)
+- `ArchiveEditDialog.tsx` - Day and task time editing (4 pickers total)
+
+**Design Decision**: Native HTML5 inputs were chosen over custom implementations because:
+1. Standard web pattern users already understand
+2. Automatic mobile optimization (native pickers on iOS/Android)
+3. Built-in accessibility features
+4. Consistent with the app's date input approach
+5. No custom scroll/wheel logic to maintain
+6. Better keyboard navigation
+7. Follows shadcn/ui philosophy of enhancing web standards
+
+**Migration Note**: This component replaced a custom scroll-wheel picker and earlier dropdown approach, providing better UX through browser-native functionality.
+
 ### Adding a New Context Method
 
 ```typescript
@@ -951,6 +1027,7 @@ Before making changes, verify:
 ### Documentation
 
 - **Main README**: `README.md` - User-facing documentation
+- **Changelog**: `CHANGELOG.md` - Version history and changes
 - **CLAUDE.md**: `CLAUDE.md` - This file - AI assistant guide
 - **Agent Guidelines**: `AGENTS.md` - Quick agent instructions
 - **Archive System**: `docs/ARCHIVING_DAYS.md` - Archive system guide
@@ -986,6 +1063,8 @@ Before making changes, verify:
 
 | Version | Date | Changes |
 |---------|------|---------|
+| 1.0.4 | 2026-02-06 | Replaced custom scroll picker with native HTML5 time inputs for better UX and a11y |
+| 1.0.3 | 2026-02-06 | Added ScrollTimePicker component, replaced time dropdowns with scroll-wheel UI |
 | 1.0.2 | 2026-02-02 | Added auto-open New Task form feature when day starts |
 | 1.0.1 | 2025-11-21 | Updated component list, documentation references, and current state |
 | 1.0.0 | 2025-11-18 | Initial CLAUDE.md creation |

diff --git a/README.md b/README.md
@@ -29,6 +29,7 @@ A modern, feature-rich Progressive Web App (PWA) for time tracking built with Re
 
 **Additional:**
 
+- [Changelog](#-changelog)
 - [License](#-license)
 - [Credits](#-credits)
 
@@ -60,6 +61,7 @@ TimeTracker Pro is a professional time tracking application that helps you monit
 
 - **Daily Time Tracking** - Start/stop your workday with clear boundaries
 - **Task Management** - Create, edit, and delete tasks with real-time duration tracking
+- **Intuitive Time Selection** - Native browser time inputs for familiar, accessible time entry
 - **Rich Text Support** - Add detailed notes with GitHub Flavored Markdown (tables, lists, formatting)
 - **Automatic Calculations** - Duration and revenue calculated automatically
 - **Archive System** - Permanent record of all completed work days
@@ -1059,6 +1061,18 @@ const MyPage = lazy(() => import("./pages/MyPage"));
 
 ---
 
+## 📋 Changelog
+
+For a detailed list of changes, new features, and bug fixes, see [CHANGELOG.md](CHANGELOG.md).
+
+**Recent Updates:**
+- Native HTML5 time inputs for intuitive, accessible time selection
+- Consistent UX with date inputs across all dialogs
+- Mobile-optimized with browser-native time pickers
+- Full keyboard navigation and screen reader support
+
+---
+
 ## 📱 iOS Screenshots
 
 | View | Image |

diff --git a/dev-dist/sw.js b/dev-dist/sw.js
@@ -79,7 +79,7 @@ define(['./workbox-21a80088'], (function (workbox) { 'use strict';
    */
   workbox.precacheAndRoute([{
     "url": "index.html",
-    "revision": "0.0lr8hurrrmo"
+    "revision": "0.vtj3k2q5obg"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

diff --git a/docs/plans/2026-02-06-scroll-time-picker-design.md b/docs/plans/2026-02-06-scroll-time-picker-design.md
@@ -0,0 +1,45 @@
+# Scroll Time Picker Design
+
+**Date:** 2026-02-06
+**Status:** Approved
+
+## Problem
+
+Time selection uses Select dropdowns with 96 options (15-minute intervals across 24 hours). Users must scroll through a long list to find their desired time. Poor UX especially for times later in the day.
+
+## Solution
+
+Replace Select dropdowns with a custom scroll-wheel time picker (iOS drum-picker style). Three columns: Hour (1-12), Minute (00/15/30/45), Period (AM/PM). CSS scroll-snap locks selection. Produces the same `"HH:MM"` 24-hour string format.
+
+## Component
+
+**File:** `src/components/ui/scroll-time-picker.tsx`
+
+**Props:**
+
+- `value: string` — "HH:MM" 24-hour format
+- `onValueChange: (value: string) => void`
+- `disabled?: boolean`
+- `className?: string`
+
+**Wheels:**
+
+- Hour: 1–12 (scroll-snap)
+- Minute: 00, 15, 30, 45 (scroll-snap)
+- Period: AM, PM (scroll-snap)
+
+**Styling:** shadcn/ui design tokens, dark mode via theme variables.
+
+## Integration Points
+
+1. `StartDayDialog.tsx` — 1 picker (start time)
+2. `TaskEditDialog.tsx` — 2 pickers (start + end)
+3. `ArchiveEditDialog.tsx` — 2 pickers (day start/end) + 2 per task (task start/end)
+
+Drop-in replacement: same value/onValueChange interface as current Select. Remove duplicated `generateTimeOptions()` from all files.
+
+## No Changes To
+
+- Data storage format (Date objects in memory, HH:MM strings in UI)
+- `parseTimeInput()`, `formatTimeForInput()`, `formatTime12Hour()` utilities
+- Task interface or data service layer