Browse Source

feat: add reference, to rewatch, and to save tags to history view

in the history view of the popup menu, there are toggleable tags for each video. currently only "notable" is an option; add three more: "reference", "to rewatch", and "to save".

```git-revs
7a1cb3b  (Base revision)
eb406c5  Add three new tag buttons to history view: reference, to rewatch, and to save
HEAD     Save codemcp conversation log for adding history tags feature
```

codemcp-id: 10-feat-add-reference-to-rewatch-and-to-save-tags-to-
Brandon Wong 1 year ago
parent
commit
8fc3478533
2 changed files with 86 additions and 0 deletions
  1. 62 0
      2025-06-01-codemcp-add-history-tags.md
  2. 24 0
      popup/popup.html

+ 62 - 0
2025-06-01-codemcp-add-history-tags.md

@@ -0,0 +1,62 @@
+# Add History Tags Feature - 2025-06-01
+
+## User Request
+> in the history view of the popup menu, there are toggleable tags for each video. currently only "notable" is an option; add three more: "reference", "to rewatch", and "to save".
+
+## Implementation Summary
+
+Modified the history view in the Firefox extension popup to add three new toggleable tags alongside the existing "notable" tag.
+
+### Changes Made
+
+1. **popup/popup.html**: Added three new tag chip buttons in the history view:
+   - "reference" tag
+   - "to rewatch" tag
+   - "to save" tag
+
+The tags were added to the `.history-tags` div on lines 142-175, following the same pattern as the existing "notable" tag:
+
+```html
+<button
+  class="tag-chip"
+  :data-video-id="videoHistory.videoId"
+  data-tag="reference"
+  x-bind="tagChip"
+>
+  reference
+</button>
+<button
+  class="tag-chip"
+  :data-video-id="videoHistory.videoId"
+  data-tag="to rewatch"
+  x-bind="tagChip"
+>
+  to rewatch
+</button>
+<button
+  class="tag-chip"
+  :data-video-id="videoHistory.videoId"
+  data-tag="to save"
+  x-bind="tagChip"
+>
+  to save
+</button>
+```
+
+### Technical Notes
+
+- The existing tag functionality in `popup.js` handles all the logic:
+  - `toggleTag(videoId, tag)` method handles adding/removing tags from video history
+  - `isTagActive(videoId, tag)` method checks if a tag is active for a video
+  - `tagChip` binding handles click events and active state styling
+- CSS styles for `.tag-chip` are already implemented and work for all tags
+- Alpine.js CSP compliance maintained (no JavaScript expressions in HTML attributes)
+- All new tags use the same data binding pattern as the existing "notable" tag
+
+The implementation leverages the existing tag infrastructure, so no changes to the JavaScript logic were needed.
+
+### Files Modified
+- `popup/popup.html` - Added three new tag buttons to history view
+
+### Commits
+- eb406c5: Added three new tag buttons to history view: reference, to rewatch, and to save

+ 24 - 0
popup/popup.html

@@ -148,6 +148,30 @@
                   >
                     notable
                   </button>
+                  <button
+                    class="tag-chip"
+                    :data-video-id="videoHistory.videoId"
+                    data-tag="reference"
+                    x-bind="tagChip"
+                  >
+                    reference
+                  </button>
+                  <button
+                    class="tag-chip"
+                    :data-video-id="videoHistory.videoId"
+                    data-tag="to rewatch"
+                    x-bind="tagChip"
+                  >
+                    to rewatch
+                  </button>
+                  <button
+                    class="tag-chip"
+                    :data-video-id="videoHistory.videoId"
+                    data-tag="to save"
+                    x-bind="tagChip"
+                  >
+                    to save
+                  </button>
                 </div>
               </div>
               <div class="history-events">