# Save Channel Functionality Implementation

## User Request
Add a "save channel" button at the bottom of the popup that switches to a new view. The view is only active if the currently open tab's URL contains `youtube.com.*/videos`. The view contains:

1. A text-editable field with a copy button that copies the contents to clipboard
2. An interval number input to modify the checkInterval field
3. A list of categories that modify the field contents when clicked
4. The field is populated with a curl command template

Template string:
```
curl -X POST -H 'content-type: application/json' -d '{"query": "mutation add{ addChannel(details: {category: \"<category>\", checkInterval: <interval>, name: \"<title>\", url: \"<url>\"}){name} } "}' localhost:8543/data | jq '.'
```

Where:
- `<category>` is the currently selected category (defaulting to "FOR BOTH")
- `<interval>` is the check interval in days (defaulting to 14)
- `<title>` is the page title with trailing " - YouTube" removed
- `<url>` is the URL of the currently active tab

Categories: "FOR BOTH", "CHANNELS", "CREATIVE"

## Implementation Details

### 1. Manifest Changes
- Added `clipboardWrite` permission for copy functionality

### 2. HTML Structure
- Added new save channel header with back button
- Added save channel container with:
  - Curl command textarea (readonly)
  - Copy button with active state styling
  - Interval number input (defaulting to 14 days)
  - Category selection buttons
  - Notice for non-YouTube videos pages
- Added "Save Channel" button to the export container

### 3. JavaScript Functionality
- Extended `currentView` to include "saveChannel" state
- Added properties:
  - `isCurrentTabChannelPage`: Detects YouTube /videos pages (renamed from `isCurrentTabYoutubeVideos`)
  - `selectedCategory`: Tracks selected category (default "FOR BOTH")
  - `availableCategories`: Array of category options
  - `curlCommand`: Generated curl command string
  - `checkInterval`: Check interval in days (default 14)

- Added methods:
  - `updateCurlCommand()`: Generates curl command based on current tab, category, and interval
  - `copyCurlCommand()`: Copies command to clipboard with fallback
  - `selectCategory(category)`: Updates selected category and regenerates command
  - `updateCheckInterval(interval)`: Updates check interval with validation and regenerates command
  - `showSaveChannel()`: Switches to save channel view

- Added event bindings (CSP-compliant):
  - `saveChannelButton`: Click handler for main save channel button
  - `saveChannelContainer`: View visibility binding
  - `saveChannelHeader`: Header visibility binding
  - `copyCurlButton`: Copy button click handler with disabled state for non-channel pages
  - `categoryButton`: Category selection with active state styling
  - `intervalInput`: Two-way binding for interval number input
  - `saveChannelNotice`: Notice visibility for non-YouTube videos pages

### 4. CSS Styling
- Save channel container with proper spacing and shadow
- Monospace textarea for curl command display
- Copy button with hover, active, and disabled states
- Interval input section with label and validation styling
- Category buttons with hover and active states
- Notice styling for YouTube videos page requirement
- Orange-themed save channel button

### 5. YouTube Videos Page Detection
The feature only activates when the current tab URL contains `/videos`, which typically corresponds to YouTube channel video listing pages (e.g., `https://www.youtube.com/@channel/videos`).

### 6. Copy Functionality
Implements both modern clipboard API and fallback for older browsers using document.execCommand. The copy button is disabled when not on a valid YouTube channel page.

### 7. Interval Input
- Number input with minimum value of 1 day
- Default value of 14 days
- Real-time updates to curl command as user types
- Input validation with fallback to default value for invalid inputs

## Files Modified
- `manifest.json`: Added clipboardWrite permission
- `popup/popup.html`: Added save channel view, button, and interval input
- `popup/popup.js`: Added save channel functionality, interval handling, and bindings
- `popup/popup.css`: Added styling for save channel components and interval input

## Usage
1. Navigate to a YouTube channel's videos page (URL contains /videos)
2. Click "Save Channel" button in the extension popup
3. Optionally adjust the check interval (defaults to 14 days)
4. Select desired category from the buttons
5. Click "Copy" to copy the generated curl command to clipboard
6. Use the curl command to add the channel to your external system

The feature gracefully handles non-YouTube pages by showing an informational notice and disabling the copy button.

## Future Enhancement Consideration: Editable Textarea

### Current State
The textarea field is currently `readonly` and auto-generated based on user selections (category and interval).

### Potential Enhancement
Making the textarea user-editable would provide additional flexibility. Implementation considerations:

#### Required Changes:
1. **HTML**: Remove `readonly` attribute from textarea
2. **JavaScript**: Switch from `x-text` to `x-model` for two-way binding
3. **Update Logic**: Handle conflicts between manual edits and automatic updates

#### Implementation Options:
1. **Template-based**: Store template and regenerate only dynamic parts
2. **Parsing approach**: Parse existing command to update specific fields
3. **Hybrid**: Allow manual edits with "Reset to Template" button

#### UX Considerations:
- **Conflict resolution**: Behavior when user edits manually, then changes category/interval
- **Validation**: Validate edited commands for JSON/GraphQL correctness
- **Visual indicators**: Show when command is manually modified vs auto-generated
- **Reset functionality**: Button to return to auto-generated version

This enhancement would balance user flexibility with automatic generation convenience, but requires careful consideration of the user experience and conflict resolution strategies.