fix: resolve import button functionality issues

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).

```git-revs
9225e0f  (Base revision)
daff088  Add CSP-compliant binding for import file input change event
986182c  Replace CSP-violating inline JavaScript with CSP-compliant binding
HEAD     Save conversation record for import button fix
```

codemcp-id: 5-fix-resolve-import-button-functionality-issues

2025-05-28-codemcp-fix-import-button-functionality.md

@@ -0,0 +1,35 @@
+# 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.

popup/popup.html

@@ -235,7 +235,7 @@
           id="import-file-input"
           accept=".json"
           style="display: none"
-          @change="importFile($event)"
+          x-bind="importFileInput"
         />
       </div>
     </div>

popup/popup.js

@@ -398,6 +398,12 @@ document.addEventListener("alpine:init", () => {
       },
     },
 
+    importFileInput: {
+      ["@change"]() {
+        this.importFile(this.$event);
+      },
+    },
+
     importFile(event) {
       const file = event.target.files[0];
       if (!file) return;