# 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
```javascript
// 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