feat: add history view with navigation

the popup menu currently only has one "page" or view, which is to show the playlists. add a button at the bottom of the menu (next to the "export" and "import" buttons) that will switch to a new "page" (or tab, or view) that displays the history. at the top of the history page, there should be a back button to return to the main view (which is the playlists). leave the rest of the page blank for now.

```git-revs
c1573dc  (Base revision)
59685a4  Add view state management and history header
ecd816e  Add history view container and update export buttons with history button
0a1ba13  Add currentView state and initialize to playlists
9ad18bb  Add view navigation methods and button bindings
d09a39a  Add styles for back button and history view
e35b2c4  Save context window contents for the history view feature
888fd9d  Replace x-show with x-bind for CSP compliance
0e1254a  Update history and export containers with x-bind
HEAD     Add CSP-compliant view binding objects
```

codemcp-id: 2-feat-add-history-view-with-navigation

2025-05-28-codemcp-add-history-view-with-navigation.md

@@ -0,0 +1,46 @@
+# Add History View with Navigation - 2025-05-28
+
+## User Request
+Initialize codemcp with ~/personal/projects/experiments/playlist/
+
+the popup menu currently only has one "page" or view, which is to show the playlists. add a button at the bottom of the menu (next to the "export" and "import" buttons) that will switch to a new "page" (or tab, or view) that displays the history. at the top of the history page, there should be a back button to return to the main view (which is the playlists). leave the rest of the page blank for now.
+
+## Implementation Summary
+
+### Files Modified
+
+1. **popup/popup.html**
+   - Added conditional headers for playlists and history views using `x-show` directive
+   - Added history view container with placeholder content
+   - Updated export container to include history button and only show on playlists view
+   - Added back button in history header
+
+2. **popup/popup.js**
+   - Added `currentView` state property to track current view ('playlists' or 'history')
+   - Added navigation methods: `showHistory()` and `showPlaylists()`
+   - Added button bindings: `historyButton` and `backButton` using Alpine.js CSP-compliant syntax
+
+3. **popup/popup.css**
+   - Added styles for back button with blue color scheme
+   - Added styles for history container with basic white background and padding
+   - Added styles for history button with green color scheme
+
+### Key Features Added
+
+- **View State Management**: Uses Alpine.js reactive `currentView` property to control which view is shown
+- **Navigation**: History button switches to history view, back button returns to playlists view
+- **Conditional Rendering**: Uses `x-show` directives to show/hide content based on current view
+- **CSP Compliance**: All Alpine.js bindings use the object syntax to avoid inline JavaScript expressions
+- **Consistent Styling**: New buttons follow the existing design patterns and color scheme
+
+### Project Structure Context
+
+This is a Firefox browser extension that:
+- Manages playlists of videos (each video has a URL)
+- Tracks video playback history
+- Uses browser storage API for data persistence
+- Uses Alpine.js for popup UI in CSP mode
+- Has background.js for context menus and navigation
+- Has content scripts for video playback event listeners
+
+The history view is now ready for future implementation of actual history display functionality.

popup/popup.css

@@ -156,3 +156,40 @@ button:hover {
 .remove-item:hover {
   background-color: #ffeaea;
 }
+
+/* Back button styles */
+.back-btn {
+  background-color: #4285f4;
+  color: white;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+  margin-bottom: 8px;
+}
+
+.back-btn:hover {
+  background-color: #3367d6;
+}
+
+/* History view styles */
+.history-container {
+  background: #fff;
+  border-radius: 8px;
+  padding: 12px;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  min-height: 200px;
+}
+
+/* History button styles */
+.history-btn {
+  background-color: #34a853;
+  color: white;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.history-btn:hover {
+  background-color: #2d7d3a;
+}

popup/popup.html

@@ -10,11 +10,16 @@
   </head>
   <body>
     <div id="app" x-data="playlistManager">
-      <header>
+      <header x-bind="playlistsHeader">
         <h1>My Playlists</h1>
       </header>
 
-      <div class="playlists-container">
+      <header x-bind="historyHeader">
+        <button class="back-btn" x-bind="backButton">← Back</button>
+        <h1>History</h1>
+      </header>
+
+      <div class="playlists-container" x-bind="playlistsContainer">
         <template
           x-for="(videos, playlistName) in playlists"
           :key="playlistName"
@@ -94,14 +99,22 @@
         </template>
       </div>
 
-      <!-- Export/Import buttons -->
-      <div class="export-container">
+      <!-- History view -->
+      <div class="history-container" x-bind="historyContainer">
+        <!-- History content will go here -->
+      </div>
+
+      <!-- Export/Import/History buttons -->
+      <div class="export-container" x-bind="exportContainer">
         <button class="export-btn" x-bind="exportButton">
           Export Playlists
         </button>
         <button class="import-btn" x-bind="importButton">
           Import Playlists
         </button>
+        <button class="history-btn" x-bind="historyButton">
+          History
+        </button>
         <input
           type="file"
           id="import-file-input"

popup/popup.js

@@ -18,6 +18,7 @@ document.addEventListener("alpine:init", () => {
     playlists: {},
     currentIndices: {},
     openMenus: new Set(), // Track which menus are open
+    currentView: 'playlists', // Track current view: 'playlists' or 'history'
 
     init() {
       this.loadPlaylists();
@@ -417,5 +418,58 @@ document.addEventListener("alpine:init", () => {
         );
       },
     },
+
+    // View navigation methods
+    showHistory() {
+      this.currentView = 'history';
+    },
+
+    showPlaylists() {
+      this.currentView = 'playlists';
+    },
+
+    // Button bindings for navigation
+    historyButton: {
+      ["@click"]() {
+        this.showHistory();
+      },
+    },
+
+    backButton: {
+      ["@click"]() {
+        this.showPlaylists();
+      },
+    },
+
+    // CSP-compliant view bindings
+    playlistsHeader: {
+      ["x-show"]() {
+        return this.currentView === 'playlists';
+      },
+    },
+
+    historyHeader: {
+      ["x-show"]() {
+        return this.currentView === 'history';
+      },
+    },
+
+    playlistsContainer: {
+      ["x-show"]() {
+        return this.currentView === 'playlists';
+      },
+    },
+
+    historyContainer: {
+      ["x-show"]() {
+        return this.currentView === 'history';
+      },
+    },
+
+    exportContainer: {
+      ["x-show"]() {
+        return this.currentView === 'playlists';
+      },
+    },
   }));
 });