playlist-extension/2025-11-03-codemcp-import-playlist-view.md

Import Playlist View Refactor - 2025-11-03

User Request

make the "import playlist" view a separate screen, just like the "history" view or the "save channel" view. this will require updating popup.js to hook up the html components with the code functionality (and maybe the corresponding styles in popup.css). remove the existing file selector input, and have the current "Import Playlists" button navigate to the screen.

Changes Made

1. HTML Changes (popup.html)

• Removed: Hidden file input element (<input type="file" id="import-file-input" ...>)
• Kept: Import view container structure with textarea and submit button (already existed in HTML)
• Kept: Import header with back button (already existed in HTML)

2. JavaScript Changes (popup.js)

Added State Properties

// Import properties
importText: "", // Text area content for import

Added Methods

• showImport(): Navigates to the import view by setting currentView to "import"
• handleImport(): Processes the JSON text from textarea, validates and imports playlists

Modified Methods

• importButton binding: Changed from triggering file input click to calling showImport()
• Removed importFileInput binding (no longer needed)
• Removed importFile(event) method (replaced by handleImport())

Added Bindings

• importHeader: Controls visibility of import view header (shows only when currentView === "import")
• importContainer: Controls visibility of import view container
• importTextarea: Two-way binding for textarea value
• importSubmitButton: Click handler for import button

3. CSS Changes (popup.css)

Added Styles

• .import-container: Container for import view (matches other view containers)
• .import-content: Content wrapper with flex layout
• .import-section: Section wrapper for textarea and button
• .import-textarea: Large monospace textarea with focus styles
• .import-submit-btn: Green submit button with hover/active states
• .import-btn: Green button style for main navigation button
• .export-btn: Blue button style (added for consistency)

Architecture Pattern

The import view now follows the same pattern as other views (history, saveChannel, wikiInsp):

1. Header with back button (controlled by importHeader binding)
2. Container div with x-bind for visibility control
3. Navigation button on main screen
4. View-specific Alpine.js bindings for interactivity
5. Dedicated CSS styles for the view

CSP Compliance

All Alpine.js code remains CSP-compliant:

• No JavaScript expressions in HTML attributes
• All bindings use Alpine.data properties
• Pre-computed display data in Alpine state
• Event handlers defined in binding objects

Bug Fix

• Added missing importHeader binding to properly hide the import view header when not in that view