# 2025-05-28 - codemcp - fix import button functionality

## User Request
the "import" button (at the bottom of the popup menu) doesn't seem to work. it might be due to a javascript expression in the html code (not CSP-compliant), and/or it might be that the import code is wrong (the former is more likely).

## Problem Identified
The import button issue was caused by a CSP-violating JavaScript expression in the HTML file. On line 238 of `popup.html`, there was:

```html
@change="importFile($event)"
```

This violates the Content Security Policy (CSP) that requires all Alpine.js code to be CSP-compliant, meaning no JavaScript expressions in HTML attributes.

## Solution Applied
1. **Added CSP-compliant binding in popup.js**: Created a new `importFileInput` binding object that handles the change event:
   ```javascript
   importFileInput: {
     ["@change"]() {
       this.importFile(this.$event);
     },
   },
   ```

2. **Updated HTML to use binding**: Replaced the CSP-violating inline JavaScript with the Alpine.js x-bind directive:
   ```html
   x-bind="importFileInput"
   ```

## Files Modified
- `popup/popup.js`: Added `importFileInput` binding object with change event handler
- `popup/popup.html`: Replaced `@change="importFile($event)"` with `x-bind="importFileInput"`

## Result
The import button should now work correctly without violating CSP policies. The functionality remains the same - clicking the "Import Playlists" button will open a file dialog, and selecting a JSON file will trigger the import process.