Sync article card design on bookmarked and liked pages

[rasulkireev]

Refactor bookmarked and liked article cards to match the homepage's visual design and functionality.

---

Slack Thread

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

[greptile-apps]

Greptile Summary

This PR refactors the saved articles controller to synchronize the visual design of bookmarked and liked article cards with the homepage's article card design. The changes primarily focus on enhancing the JavaScript-generated HTML structure in frontend/src/controllers/saved_articles_controller.js to match the existing server-rendered template pattern.

The key modifications include:

1. Enhanced Article Card Layout: The renderArticle method now generates a more comprehensive HTML structure that includes article descriptions, tags display, and improved visual styling that mirrors the homepage design.

2. Likes Controller Integration: Added proper Stimulus controller integration by manually constructing the necessary data attributes (data-controller="likes", data-likes-article-id-value, etc.) and targets (data-likes-target="likeButton") for dynamically generated content.

3. Tags Functionality: Implemented tags rendering with proper HTML escaping using a dedicated escapeHtml utility function to prevent XSS vulnerabilities while displaying article tags.

4. Button Functionality: Enhanced like and bookmark buttons with consistent styling and proper event handling integration with existing Stimulus controllers.

This change bridges the gap between server-rendered templates (which automatically have Stimulus attributes) and JavaScript-generated content by manually replicating the same data structure and styling patterns. The implementation maintains the existing localStorage-based functionality for saved articles while providing a richer, more consistent user experience across different pages of the application.

Confidence score: 3/5

• This PR requires careful testing due to complex JavaScript controller integration and potential runtime issues
• Score reflects concerns about manual Stimulus controller setup in dynamically generated HTML and potential likes controller conflicts
• Pay close attention to the likes controller integration and test the like/bookmark functionality thoroughly on saved articles pages

_{1 file reviewed, 1 comment}

_{Edit Code Review Bot Settings | Greptile}

[greptile-apps]

logic: The likes controller expects additional article data (tags, description) that may not be available in localStorage. When articles are liked/bookmarked, only id, slug, title, and timestamp are stored, but the template now renders description and tags.