# 2025-06-21 CodeMCP: Add Wiki/Insp Button with Wikitext Formatting

## User Request
The popup menu has a button to "save channel", which opens a simple dialogue view, and copies some text to the system clipboard. Add a new button called "wiki/insp", which opens a similar dialogue view. This time, it copies some wikitext-formatted text to the clipboard, in this format:

```
!!! <today's date>
* [[<page title>|<page url]] (yt)
** <timestamp of video>
```

where:
- "<today's date>" is formatted as "YYYY-MM-DD"
- "<page title>" has all pipes ("|") replaced with hyphens ("-")
- the final line (with "<timestamp of video>") is only added by default if the video has not ended

## Follow-up Requests
1. Make the textarea fill the full width of the view, and put the copy button below it.
2. Add a checkbox control between the textarea and the copy button to toggle the presence of the timestamp line.
3. The checked version should include the current timestamp of the video, not 0:00 (unless the video is at the beginning).
4. Add the appropriate styling to `popup/popup.css`.
5. Let the timestamp account for hours (as in "1:36:11" rather than "96:11"), but only if necessary (ie: the video is longer than an hour).

## Implementation

### Files Modified
1. **popup/popup.js**:
   - Added new properties for wiki/insp functionality:
     - `wikitextCommand`: Generated wikitext
     - `isCurrentVideoYoutube`: Whether current video is YouTube
     - `hasVideoEnded`: Whether video has ended
     - `currentVideoTimestamp`: Current video timestamp (real time from video)
     - `includeTimestamp`: Whether to include timestamp line (default: true)
   - Added `showWikiInsp()` method to switch to wiki/insp view with timestamp refresh
   - Added `updateWikitextCommand()` method to generate the wikitext format
   - Added `copyWikitextCommand()` method to copy text to clipboard
   - Added `toggleTimestamp()` method to toggle timestamp inclusion
   - Added `getVideoTimestamp()` method to get real video position via script execution
   - Added `refreshVideoTimestamp()` method to manually update timestamp
   - Updated `getCurrentTab()` to detect YouTube video pages and get initial timestamp
   - **Enhanced timestamp formatting**: Now handles hours when video duration > 1 hour
   - Added event handlers and CSP-compliant bindings:
     - `wikiInspButton`: Click handler for wiki/insp button
     - `wikiInspHeader`: Show/hide wiki/insp header
     - `wikiInspContainer`: Show/hide wiki/insp container
     - `copyWikitextButton`: Copy button with disabled state
     - `timestampCheckbox`: Checkbox for toggling timestamp inclusion
     - `refreshTimestampButton`: Button to refresh video timestamp
     - `wikiInspNotice`: Show notice when not on YouTube video

2. **popup/popup.html**:
   - Added new header for wiki/insp view with back button
   - Added wiki/insp container with:
     - Full-width readonly textarea showing generated wikitext
     - Controls section with checkbox and refresh button side by side
     - Copy button positioned below the controls
     - Notice text for non-YouTube pages
   - Added "Wiki/Insp" button to the export container

3. **popup/popup.css**:
   - **Wiki/Insp Container**: White background, rounded corners, shadow, consistent with other views
   - **Textarea**: Full-width, monospace font, light gray background, minimum 120px height
   - **Timestamp Controls**: Flexbox layout with space-between for checkbox on left, refresh button on right
   - **Checkbox**: Custom styling with blue accent color, proper cursor and user-select behavior
   - **Refresh Button**: Green background with hover effects, subtle animation on click
   - **Copy Button**: Full-width blue button with hover animations and elevation effects
   - **Notice**: Yellow warning background for non-YouTube pages
   - **Wiki/Insp Button**: Purple background to distinguish from other action buttons
   - **Disabled States**: Proper styling for disabled buttons with gray colors and no interactions

### Features
- **Smart Timestamp Formatting**:
  - **Short videos** (< 1 hour): `MM:SS` format (e.g., "12:34")
  - **Long videos** (≥ 1 hour): `H:MM:SS` format (e.g., "1:36:11")
  - **Detection**: Automatically determines format based on video duration
- **Real Video Timestamps**: Gets actual current playback position from YouTube video element
- **Wikitext Format**: Generates properly formatted wikitext with today's date in YYYY-MM-DD format
- **Title Processing**: Replaces pipe characters ("|") with hyphens ("-") to avoid wiki formatting conflicts
- **Timestamp Toggle**: User can control whether to include the timestamp line via checkbox (checked by default)
- **Manual Refresh**: Refresh button (🔄) to update timestamp without reopening the view
- **Video End Detection**: Detects when video has ended to conditionally include timestamp
- **YouTube Detection**: Only works on YouTube video pages (/watch)
- **CSP Compliance**: All Alpine.js code follows CSP requirements with no JavaScript expressions in HTML attributes
- **Clipboard Integration**: Copies generated wikitext to system clipboard with fallback support
- **Script Execution**: Uses browser.tabs.executeScript to get real video data from YouTube page
- **Professional Styling**: Consistent visual design with hover effects, transitions, and proper spacing

### Timestamp Format Logic
```javascript
const formatTime = (seconds) => {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const remainingSeconds = Math.floor(seconds % 60);

  if (hours > 0) {
    return hours + ':' + minutes.toString().padStart(2, '0') + ':' + remainingSeconds.toString().padStart(2, '0');
  } else {
    return minutes + ':' + remainingSeconds.toString().padStart(2, '0');
  }
};
```

### Example Outputs
**Short video** (42 minutes):
```
!!! 2025-06-21
* [[Some YouTube Video Title|https://www.youtube.com/watch?v=abc123]] (yt)
** 12:34
```

**Long video** (2 hours):
```
!!! 2025-06-21
* [[Long YouTube Video Title|https://www.youtube.com/watch?v=def456]] (yt)
** 1:36:11
```

### Technical Implementation
- **Script Execution**: Injects code into YouTube page to access video element
- **Smart Time Formatting**: Conditionally includes hours based on video duration
- **Real-time Data**: Gets current playback position, video duration, and ended status
- **Error Handling**: Graceful fallback to "0:00" if video data unavailable
- **Permissions**: Uses existing `activeTab`, `tabs`, and `<all_urls>` permissions

### Current Features
- ✅ Smart hour-aware timestamp formatting implemented
- ✅ Real video timestamp detection implemented
- ✅ Video ended status detection implemented
- ✅ Manual timestamp refresh functionality
- ✅ Full user control over timestamp inclusion
- ✅ Professional styling and visual design
- ✅ Consistent with existing UI patterns

### Future Enhancements
- Add visual feedback when text is copied to clipboard
- Persist checkbox state across sessions
- Add keyboard shortcuts for common actions
- Show video duration alongside current timestamp