Vibe Coding Version

PLAN-PHASE-1.md

@@ -0,0 +1,85 @@
+## Progress Checklist
+
+- [x] Step 1: Project Initialization and Dependency Setup
+- [x] Step 2: Initial Setup Screen UI
+- [x] Step 3: Credentials Storage and Logic
+- [x] Step 4: Chat Screen UI and Navigation
+- [x] Step 5: YouTube Service and Data Model
+- [x] Step 6: State Management for Chat Screen
+- [x] Step 7: Custom Paint Widgets for Chat Bubbles
+- [x] Step 8: Final Touches and Error Handling
+
+# Development Plan: YouTube Live Chat Viewer
+
+This document outlines the incremental steps to build the YouTube Live Chat Viewer application, based on the `PRD.md`. Each step includes testing to ensure correctness before proceeding to the next.
+
+### Step 1: Project Initialization and Dependency Setup
+
+1.  **Action:** Create a new Flutter project named `youtube_watcher`.
+2.  **Action:** Add the required dependencies to `pubspec.yaml`: `flutter_riverpod`, `riverpod_annotation`, `go_router`, `http`, `shared_preferences`.
+3.  **Action:** Add development dependencies: `build_runner`, `custom_lint`, `riverpod_generator`, `riverpod_lint`.
+4.  **Action:** Configure `analysis_options.yaml` to enable Riverpod linting rules.
+5.  **Testing:**
+    *   Create a simple "smoke test" (`widget_test.dart`) to ensure the test environment is working correctly.
+    *   Run `flutter test` to verify.
+
+### Step 2: Initial Setup Screen UI
+
+1.  **Action:** Create the UI for the "Initial Setup" screen (`values_input_screen.dart`). This will be a stateless widget for now. It will contain two `TextField` widgets for the API Key and Video ID, and a "Save" `Button`.
+2.  **Action:** Create a basic `router.dart` file to display this screen as the initial route.
+3.  **Action:** Update `main.dart` to use `go_router`.
+4.  **Testing:**
+    *   Write a widget test to verify that the setup screen renders correctly with the required input fields and button.
+
+### Step 3: Credentials Storage and Logic
+
+1.  **Action:** Create a `CredentialsRepository` class that uses `shared_preferences` to save and retrieve the API Key and Video ID.
+2.  **Action:** Create a Riverpod provider for the `CredentialsRepository`.
+3.  **Action:** Implement the logic in the setup screen to use the repository when the "Save" button is pressed.
+4.  **Testing:**
+    *   Write unit tests for the `CredentialsRepository` to verify that saving and retrieving data works as expected. Use `SharedPreferences.setMockInitialValues` for testing.
+
+### Step 4: Chat Screen UI and Navigation
+
+1.  **Action:** Create the basic UI for the "Chat" screen (`chat_screen.dart`). It will contain an empty `ListView` for now.
+2.  **Action:** Update the router to include a route for the chat screen.
+3.  **Action:** Implement the navigation logic: after successfully saving credentials on the setup screen, navigate to the chat screen.
+4.  **Testing:**
+    *   Write a widget test for the chat screen to verify it renders a `ListView`.
+    *   Write a test to verify that tapping the "Save" button on the setup screen navigates to the chat screen when credentials are valid.
+
+### Step 5: YouTube Service and Data Model
+
+1.  **Action:** Create a `ChatMessage` data model class.
+2.  **Action:** Create a `YouTubeService` class responsible for fetching chat messages from the YouTube Data API. It will take the API key and video ID as parameters.
+3.  **Action:** Implement the `_getLiveChatId` and `_getChatMessages` methods using the `http` package.
+4.  **Testing:**
+    *   Write unit tests for the `YouTubeService`. Use a mock `http.Client` to simulate API responses (both success and failure cases) and verify that the service parses the data correctly.
+
+### Step 6: State Management for Chat Screen
+
+1.  **Action:** Create a `ChatController` using a Riverpod `NotifierProvider`. This controller will:
+    *   Use the `YouTubeService` to fetch new chat messages.
+    *   Manage the state of the chat messages list (`List<ChatMessage>`).
+    *   Handle the selection and deselection of a message.
+    *   Expose the state to the UI.
+2.  **Action:** Refactor the `ChatScreen` to be a `ConsumerWidget` and display the list of messages from the `ChatController`.
+3.  **Testing:**
+    *   Write unit tests for the `ChatController`, mocking the `YouTubeService` to test the logic of adding messages and handling selection.
+
+### Step 7: Custom Paint Widgets for Chat Bubbles
+
+1.  **Action:** Create a `ChatBubble` widget that uses `CustomPaint` to draw a unique chat bubble shape.
+2.  **Action:** The widget will take a `ChatMessage` and display the author's name, message, and a placeholder for the profile picture.
+3.  **Action:** Integrate the `ChatBubble` widget into the `ChatScreen`'s `ListView`.
+4.  **Testing:**
+    *   Write a widget test for the `ChatBubble` to ensure it renders correctly with the provided message data.
+    *   Use `flutter_test`'s `matchesGoldenFile` to perform golden file testing on the custom-painted widget to prevent visual regressions.
+
+### Step 8: Final Touches and Error Handling
+
+1.  **Action:** Implement UI feedback for loading states (e.g., a `CircularProgressIndicator` while fetching messages).
+2.  **Action:** Implement UI feedback for error states (e.g., displaying a `SnackBar` or an error message on the screen if the API call fails).
+3.  **Action:** Polish the overall UI and user experience.
+4.  **Testing:**
+    *   Write widget tests to verify that loading and error states are displayed correctly in the UI.

PLAN.md

@@ -0,0 +1,54 @@
+## Progress Checklist
+
+- [x] Step 1: Add Dependencies for Image Rendering and File System Access
+- [x] Step 2: Create a Service to Handle Image Conversion and Saving
+- [x] Step 3: Integrate the Service with the Chat Controller
+- [ ] Step 4: Update the UI to Trigger Image Saving
+- [ ] Step 5: Add Error Handling and User Feedback
+
+# Development Plan: Save Chat Message as Image
+
+This document outlines the steps to implement the feature of saving a chat message as an image file when a user taps on it.
+
+### Step 1: Add Dependencies for Image Rendering and File System Access
+
+1.  **Action:** Add the `path_provider` package to `pubspec.yaml` to get the application's documents directory.
+2.  **Action:** Add the `image` package to `pubspec.yaml` for image manipulation and encoding.
+3.  **Action:** Add the `file` package for file system operations.
+4.  **Action:** Run `flutter pub get` to install the new dependencies.
+5.  **Testing:**
+    *   Ensure the project still builds and runs without errors after adding the new dependencies.
+
+### Step 2: Create a Service to Handle Image Conversion and Saving
+
+1.  **Action:** Create a `ScreenshotService` class responsible for:
+    *   Taking a `ChatMessage` as input.
+    *   Using a `RepaintBoundary` to capture the `ChatBubble` widget as an image.
+    *   Converting the captured image to a PNG format using the `image` package.
+    *   Saving the PNG file to the application's documents directory using `path_provider` and `file`.
+2.  **Action:** Create a Riverpod provider for the `ScreenshotService`.
+3.  **Testing:**
+    *   Write unit tests for the `ScreenshotService` to verify that it correctly converts a widget to an image and saves it to the file system. Use a mock file system for testing.
+
+### Step 3: Integrate the Service with the Chat Controller
+
+1.  **Action:** Update the `ChatController` to have a dependency on the `ScreenshotService`.
+2.  **Action:** Modify the `selectMessage` method in `ChatController` to call the `ScreenshotService` to save the chat message as an image when a message is tapped.
+3.  **Testing:**
+    *   Write unit tests for the `ChatController` to verify that it calls the `ScreenshotService` when a message is selected.
+
+### Step 4: Update the UI to Trigger Image Saving and Deleting
+
+1.  **Action:** Wrap the `ChatBubble` widget in the `ChatScreen` with a `RepaintBoundary` and a `GlobalKey`.
+2.  **Action:** Pass the `GlobalKey` to the `ChatController` when a message is tapped, so the `ScreenshotService` can use it to capture the correct widget.
+3.  **Action:** Update the `ChatController` to delete the saved image when the message is deselected.
+4.  **Testing:**
+    *   Write widget tests to ensure that tapping a `ChatBubble` triggers the image saving logic.
+    *   Write unit tests to ensure that deselecting a message deletes the image file.
+
+### Step 5: Add Error Handling and User Feedback
+
+1.  **Action:** Implement error handling in the `ScreenshotService` to catch potential exceptions during file I/O.
+2.  **Action:** In the `ChatController`, handle any errors from the `ScreenshotService` and update the UI to show a `SnackBar` or other notification to the user, indicating whether the image was saved successfully or if an error occurred.
+3.  **Testing:**
+    *   Write widget tests to verify that success and error notifications are displayed correctly to the user.

PRD.md

@@ -0,0 +1,71 @@
+
+# Product Requirements Document: YouTube Live Chat Viewer
+
+## 1. Introduction
+
+The YouTube Live Chat Viewer is a desktop application that allows users to monitor and interact with the live chat of a YouTube stream. The app provides a clean, real-time interface for viewing chat messages, selecting individual comments, and securely managing API credentials.
+
+## 2. User Stories
+
+- **As a user, I want to:**
+  - Securely enter my YouTube API key and the video ID of the live stream I want to watch.
+  - View live chat messages in a real-time, scrollable list.
+  - Select a specific chat message to highlight it for further action.
+  - Be notified of any errors that occur while fetching chat messages.
+
+## 3. Features
+
+### 3.1. Initial Setup Screen
+
+- A dedicated screen for users to input their YouTube API key and the video ID of the live stream.
+- Input fields for both values, with the API key being obscured for security.
+- A "Save" button to store the credentials and navigate to the chat screen.
+- Credentials should be persisted locally and securely.
+
+### 3.2. Live Chat Screen
+
+- A real-time display of chat messages from the specified YouTube live stream.
+- Each message should show the author's display name, a profile picture, and the message content.
+- The chat should auto-scroll as new messages arrive.
+- Users can select a message by tapping on it, which will highlight it visually.
+- Tapping on a chat message will save an image of that message to a file.
+- Tapping the same message again will deselect it.
+
+### 3.3. Error Handling
+
+- The app should gracefully handle errors, such as:
+  - Invalid API key or video ID.
+  - Network connectivity issues.
+  - Failure to fetch chat messages from the YouTube API.
+- Informative error messages should be displayed to the user.
+
+## 4. Technical Requirements
+
+### 4.1. Platform
+
+- The application will be built using Flutter for cross-platform desktop support (macOS, Windows, Linux).
+
+### 4.2. Architecture
+
+- **State Management and Dependency Injection:** `riverpod` will be used for both state management and dependency injection, providing a reactive and scalable architecture.
+- **Routing:** `go_router` will handle navigation between the setup and chat screens.
+- **UI:** The UI will be built using custom paint widgets to create a unique and tailored look and feel.
+
+### 4.3. API Integration
+
+- The app will use the YouTube Data API v3 to fetch live chat messages.
+- API requests will be made using the `http` package.
+- The app will poll the API at a regular interval (e.g., every 5 seconds) to fetch new messages.
+
+### 4.4. Security
+
+- The YouTube API key will be stored securely on the user's device using `shared_preferences` or a more secure storage solution.
+- The API key will not be hardcoded in the application.
+
+## 5. Future Enhancements
+
+- **Real-time Updates with WebSockets:** Explore using WebSockets or a more efficient real-time communication method to reduce API polling.
+- **Message Actions:** Allow users to perform actions on selected messages, such as copying the message text or viewing the author's channel.
+- **OAuth 2.0 Integration:** Implement OAuth 2.0 for authentication, so users don't have to manually provide an API key.
+- **Multi-Stream Support:** Allow users to watch multiple live streams simultaneously.
+- **Customizable UI:** Provide options for users to customize the look and feel of the chat display.