# 2025-05-31 CodeMCP: Add Done Status Toggle to Video Action Menus

## User Request
in the popup menu, in the main view, each video has an actions menu. add an option to mark that video as "done" (if it's anything other than "done"), or to remove the status if it is "done". add this option to the sub-menus of the playlist-specific view as well.

## Implementation Summary

Added functionality to toggle the "done" status of videos in both the main playlist view and the individual playlist view. The implementation includes:

### Changes Made

1. **Added `toggleVideoDoneStatus` method** in `popup/popup.js`:
   - Toggles video status between "done" and undefined (not done)
   - Updates playlist data in browser storage
   - Refreshes display after changes

2. **Added `isVideoDone` helper method** in `popup/popup.js`:
   - Checks if a specific video has "done" status

3. **Added `toggleVideoDoneButton` handler** in `popup/popup.js`:
   - Click handler that calls `toggleVideoDoneStatus` and closes menus
   - CSP-compliant event binding

4. **Updated `updatePlaylistsForDisplay` and `updateCurrentPlaylistVideos` methods**:
   - Pre-compute `doneButtonText` property for CSP compliance
   - Avoids JavaScript expressions in HTML templates

5. **Updated HTML templates** in `popup/popup.html`:
   - Added done toggle button to both main view and playlist-specific view more menus
   - Used pre-computed `doneButtonText` property instead of JavaScript expressions
   - Maintains CSP compliance by avoiding expressions like `video.status === 'done' ? ... : ...`

### Key Features

- **Toggle Functionality**: Videos can be marked as "done" or have their done status removed
- **Dual View Support**: Available in both truncated main view and full playlist view
- **CSP Compliance**: All Alpine.js code follows CSP restrictions with no JavaScript expressions in HTML
- **Consistent UI**: Integrates seamlessly with existing more menu system
- **Storage Integration**: Persists changes to browser storage and updates all views

### Technical Details

The done status is stored as a `status: "done"` property on video objects. When removing done status, the property is deleted rather than set to a different value, maintaining consistency with the existing codebase logic that checks for `video.status === "done"`.

The implementation maintains full CSP compliance by pre-computing button text in JavaScript methods rather than using expressions in HTML attributes.