Skip to content

Feat Enhance playlist UI with tooltips and inline editing features#631

Open
saulob wants to merge 11 commits intofatihak:mainfrom
saulob:feat/edit-instance-name-and-tooltips
Open

Feat Enhance playlist UI with tooltips and inline editing features#631
saulob wants to merge 11 commits intofatihak:mainfrom
saulob:feat/edit-instance-name-and-tooltips

Conversation

@saulob
Copy link
Copy Markdown

@saulob saulob commented Mar 21, 2026

This pull request adds support for inline renaming of plugin instances within a playlist, both in the backend API and the frontend user interface. The changes include a new API endpoint to handle renaming with Unicode and diacritics-aware matching, updates to the HTML and JavaScript to enable inline editing, and improved UI feedback and accessibility for these actions.

Backend: Playlist plugin instance renaming

  • Added a new rename_plugin_instance API endpoint in playlist.py to allow renaming a plugin instance within a playlist, including Unicode normalization and diacritics-insensitive matching for robust name handling. The endpoint also handles renaming associated image files and provides detailed error feedback.

Frontend: Inline editing and UI enhancements

  • Implemented inline editing for plugin instance names in playlist.html using JavaScript, enabling users to rename instances directly in the UI with real-time validation and feedback. This includes updating all relevant data attributes and links after a rename. [1] [2]
  • Improved the UI with hover effects for plugin rows and visual cues for editable fields, enhancing user experience and discoverability of the rename feature.
  • Updated edit buttons and tooltips for better accessibility and clarity in the playlist and plugin instance controls. [1] [2]

Summary

Improve playlist UX by adding inline rename for plugin instances with a subtle pencil indicator, hover feedback and better interaction handling

Changes

  • Add inline rename for plugin instance names
  • Add missing tooltips to playlist controls
  • Improve hover feedback on playlist items
  • Persist renames via rename_plugin_instance endpoint
  • Prevent duplicate submissions on Enter and blur

Files

  • playlist.html
  • static/icons/edit_pencil.png
  • CSS and JS updates for inline edit behavior, hover effect and tooltips

Impact

  • Clearer affordance for editing instance names
  • More intuitive interaction with hover feedback
  • Improved accessibility with tooltips
  • More robust handling of edge cases and duplicate submissions
2026-03-21_13-46_1 2026-03-21_13-51

Saulo Benigno added 5 commits March 20, 2026 22:17
Add title="Edit instance settings" to the playlist settings button and the plugin edit link in the playlist view to improve accessibility and UX.
- Add title="Edit Playlist" to playlist settings button.
- Add title="Edit Instance Settings" to plugin edit button.
- Remove redundant title attributes from <img> elements (keep titles on buttons only).
- Feature: Add inline editing for plugin instance names click to edit, blur or Enter to save, Esc to cancel
- Backend: Add rename_plugin_instance endpoint to persist renames and rename associated images
- Unicode: Normalize names using NFC and add a diacritics-insensitive fallback for accented characters
- UX: Standardize control tooltips and remove redundant image titles
- Stability: Prevent duplicate submissions caused by Enter and blur firing together
Copilot AI review requested due to automatic review settings March 21, 2026 16:58
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds inline renaming of playlist plugin instances, backed by a new API endpoint, plus small UI affordances (hover styles, tooltips, edit pencil icon).

Changes:

  • Added PUT /rename_plugin_instance endpoint to rename a plugin instance (with Unicode normalization / diacritics-insensitive matching) and attempt image-file renaming.
  • Implemented inline editing UI in playlist.html (input-on-click, blur/Enter submit, Escape cancel) and updates some in-row attributes/links after rename.
  • Added a pencil icon asset and minor tooltip/hover styling improvements.

Reviewed changes

Copilot reviewed 2 out of 3 changed files in this pull request and generated 6 comments.

File Description
src/templates/playlist.html Adds inline rename UI/JS, hover styling, and tooltips for playlist/plugin controls.
src/blueprints/playlist.py Introduces backend rename endpoint and attempts to rename associated generated image file.
src/static/icons/edit_pencil.png New UI icon for the inline rename affordance.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/blueprints/playlist.py Outdated
Comment thread src/blueprints/playlist.py Outdated
Comment thread src/templates/playlist.html Outdated
Comment thread src/templates/playlist.html Outdated
Comment thread src/templates/playlist.html Outdated
Comment thread src/blueprints/playlist.py
Saulo Benigno added 6 commits March 22, 2026 16:58
@saulob saulob changed the title Fear Enhance playlist UI with tooltips and inline editing features Feat Enhance playlist UI with tooltips and inline editing features Mar 28, 2026
@saulob
Copy link
Copy Markdown
Author

saulob commented Mar 28, 2026

All Copilot review comments addressed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants