playlist-extension/2025-05-28-codemcp-feat-add-full-playlist-view-with-truncated-display.md

Feature: Add Full Playlist View with Truncated Display

User Request

in the popup menu, the playlists display all the finished videos, but these are taking up too much space. add a "full playlist" view (similar to the "history" page/tab/view) which shows only the videos of the requested playlist. make it look the same as on the main page. on the main page, navigate to the playlist view by clicking on the playlist name. on the playlist page, have a back button to return to the main page. on the main page, truncate all the videos before the current one with a single line of text that says something like "(14 previous videos)". clicking the line of text also brings you to the playlist view.

Implementation

Changes Made

1. Added New View State

   • Extended currentView to support 'playlist' in addition to 'playlists' and 'history'
   • Added currentPlaylistName to track which playlist is being viewed
   • Added playlistsForDisplay computed array for CSP-compliant display
   • Added currentPlaylistVideos array for individual playlist view

2. HTML Structure Changes

   • Added playlist view header with back button and dynamic playlist name
   • Added individual playlist view container similar to history view
   • Made playlist names clickable by adding data attributes and event bindings
   • Added truncated videos indicator with click functionality
   • CSP Compliance: Replaced JavaScript expressions with x-bind directives and computed properties
   • Layout Update: Moved back button to be inline with page titles for better layout

3. JavaScript Functionality

   • Added updatePlaylistsForDisplay() method to compute display data
   • Added updateCurrentPlaylistVideos() method for individual playlist view
   • Added showPlaylist(playlistName) method for navigation
   • Added click handlers for playlist names and truncation text
   • Added view bindings for the new playlist view containers
   • CSP Compliance: All expressions moved to computed properties, no inline JavaScript
   • Updated all playlist modification methods to refresh computed data

4. CSS Styling

   • Made playlist names appear as clickable links (blue, hover effects)
   • Styled truncated videos indicator as clickable with hover effects
   • Added styling for the full playlist view container matching the history view
   • Maintained consistency with existing visual design
   • Enhanced Truncation Styling: Added more spacing, left padding, greyish color, and italic text
   • Arrow Back Button: Created attractive circular arrow button positioned next to page titles

Key Features

• Truncated Display: On the main page, finished videos before the current one are replaced with a single line like "(14 previous videos)"
• Full Playlist View: Clicking on a playlist name or the truncation text opens a dedicated view showing all videos in that playlist
• Navigation: Back button returns to the main playlists view
• Visual Consistency: The individual playlist view looks identical to the main page layout
• CSP Compliance: All Alpine.js code follows CSP requirements with no inline expressions, using computed properties and x-bind directives
• Improved UX: Clear visual indicators for clickable elements and professional back button design

CSP Compliance Fixes

The initial implementation violated CSP by using JavaScript expressions in HTML attributes like:

• x-show="shouldShowTruncation(playlistName)"
• x-text="getTruncationText(playlistName)"
• x-for="(video, index) in getVisibleVideos(playlistName, videos)"

Fixed by:

• Creating playlistsForDisplay computed array with pre-processed data
• Using x-bind directives instead of inline expressions
• Moving all logic to Alpine.js binding objects
• Updating computed properties whenever data changes

Styling Improvements

Truncated Videos Indicator

• Spacing: Increased bottom padding and margin for better separation
• Visual Hierarchy: Added left padding (8px) to indent the text
• Color: Changed to lighter grey (#888) for subdued appearance
• Typography: Made italic for distinction
• Interaction: Added cursor pointer and hover effects

Back Button Design

• Layout: Moved from above title to inline with title using flexbox
• Design: Clean arrow symbol (←) instead of "← Back" text
• Styling: Circular button with blue color scheme
• Positioning: Absolutely positioned to left, title remains centered
• Interaction: Hover effects with light blue background

Header Layout

• Structure: Flexbox layout with centered content
• Positioning: Relative positioning for absolute back button placement
• Alignment: Proper vertical alignment of back button and title

Technical Implementation Details

Data Flow

1. loadPlaylists() loads data and calls updatePlaylistsForDisplay()
2. updatePlaylistsForDisplay() computes truncation and visible videos for each playlist
3. Template uses pre-computed playlistsForDisplay array
4. All playlist modifications update both storage and computed data

CSP-Compliant Bindings

• truncatedVideosDisplay: Handles visibility and click events for truncation text
• playlistNameClick: Handles navigation when playlist name is clicked
• playlistViewContainer: Controls visibility of individual playlist view
• playlistViewEmptyState: Shows empty state for individual playlist view

Files Modified

• popup/popup.html - Added new view structure and CSP-compliant data bindings
• popup/popup.js - Added computed properties, state management, and CSP-compliant bindings
• popup/popup.css - Added styling for new elements, enhanced truncation display, and arrow back button

Future Considerations

To prevent similar CSP violations in future development, ensure:

• No JavaScript expressions in HTML attributes
• Use Alpine.js binding objects with x-bind
• Pre-compute all display data in Alpine.data properties
• Never use function calls, method calls, or property access in HTML templates