Conversation
There was a problem hiding this comment.
Pull request overview
This PR polishes the v1.3.x UI/UX by refining sidebar layout/styling, moving view controls into the prompt list header, adding a custom tag-suggestion dropdown sourced from the sidebar tags, and upgrading template management to an edit/create modal with “Add as Prompt”.
Changes:
- Restyled the sidebar shell/panels (new theme tokens, inset scroll container, section notes) and updated related components to match.
- Reworked prompt listing UX: view toggle + batch export header, plain-text expanded prompt view, and other spacing/tokens changes.
- Added a custom tag suggestion dropdown in the prompt form and replaced template creation with a portal-based modal editor.
Reviewed changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/index.css | Adds sidebar/theme tokens, new sidebar scroll shell, prompt preview/selectability styles, and numerous spacing/radius updates. |
| src/components/WorkspaceManager.tsx | Adds sidebar section note and reformats workspace list markup (still supports drop targets). |
| src/components/TemplateManager.tsx | Converts templates UI to a modal editor via portal; adds “Add as Prompt” callback. |
| src/components/StorageUsage.tsx | Updates layout to fit the new sidebar panels and adds a section note. |
| src/components/Sidebar.tsx | Adds a section note and reformats tags cloud markup. |
| src/components/PromptList.tsx | Moves view toggle into list header, changes expanded view to plain text, refactors list rendering. |
| src/components/PromptForm.tsx | Replaces native datalist with a custom tag suggestion dropdown + keyboard navigation. |
| src/components/CleanupAssistant.tsx | Adds a sidebar note and refactors formatting. |
| src/App.tsx | Wraps sidebar content in .sidebar-scroll, wires TemplateManager’s new callback, moves view toggle responsibility into PromptList. |
| README.md | Updates version badge and feature list to reflect 1.3.1 UX changes. |
| CHANGELOG.md | Adds 1.3.1 entry describing sidebar/tag/template UX improvements. |
| .github/skills/web-ui-design/SKILL.md | Adds a UI design guidance skill document. |
| .github/skills/ux-design/SKILL.md | Adds a UX design guidance skill document. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| onKeyDown={(e) => { | ||
| if (!hasTagSuggestions || !tagSuggestions.length) return; | ||
|
|
||
| if (e.key === 'ArrowDown') { | ||
| e.preventDefault(); | ||
| setIsTagDropdownOpen(true); | ||
| setHighlightedTagIndex( | ||
| (index) => (index + 1) % tagSuggestions.length, | ||
| ); | ||
| } | ||
|
|
||
| if (e.key === 'ArrowUp') { | ||
| e.preventDefault(); | ||
| setIsTagDropdownOpen(true); | ||
| setHighlightedTagIndex( | ||
| (index) => | ||
| (index - 1 + tagSuggestions.length) % | ||
| tagSuggestions.length, | ||
| ); | ||
| } | ||
|
|
||
| if (e.key === 'Enter' && isTagDropdownOpen) { | ||
| const selectedTag = | ||
| tagSuggestions[highlightedTagIndex] ?? tagSuggestions[0]; | ||
| if (selectedTag) { | ||
| e.preventDefault(); | ||
| insertTag(selectedTag); | ||
| } | ||
| } |
There was a problem hiding this comment.
Tag dropdown keyboard navigation uses tagSuggestions.length to wrap the highlighted index, but the menu only renders tagSuggestions.slice(0, 10). If there are >10 suggestions, ArrowUp/Down can move the highlight to an item that isn’t rendered, and Enter can insert an off-screen tag. Consider deriving a visibleSuggestions = tagSuggestions.slice(0, 10) and using that array consistently for rendering, highlight wrap, and Enter selection (and clamp highlightedTagIndex when suggestions change).
| return ( | ||
| <> | ||
| <div className="list-header-actions" style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '1rem' }}> | ||
| <button | ||
| className="btn-secondary" | ||
| onClick={handleExportMultiple} | ||
| style={{ fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }} | ||
| > | ||
| <Download size={14} /> Batch Export ({prompts.length}) | ||
| </button> | ||
| </div> | ||
| <div style={style} className="prompt-card-wrapper"> | ||
| <div className="prompt-card card"> | ||
| <div className="prompt-header"> | ||
| <PromptCardHeader prompt={prompt} workspace={promptWorkspace} /> | ||
| <PromptCardActions |
There was a problem hiding this comment.
Prompt drag-and-drop to workspaces appears to be broken: WorkspaceManager reads e.dataTransfer.getData('promptId') on drop, but PromptList no longer marks prompt cards as draggable or sets the promptId in onDragStart. Re-introduce draggable and an onDragStart handler (either on the wrapper or the .prompt-card) that sets dataTransfer.setData('promptId', prompt.id) and effectAllowed = 'move' so dropping onto a workspace works again.
| {viewMode === 'list' && prompts.length > 5 ? ( | ||
| <List | ||
| height={800} | ||
| width="100%" | ||
| itemCount={prompts.length} | ||
| itemSize={280} | ||
| itemData={prompts} | ||
| className="prompt-list list virtualized" | ||
| > |
There was a problem hiding this comment.
The list virtualization uses a fixed itemSize={280} while each row can expand/collapse the prompt body. When a prompt is expanded, its height can exceed 280px, which will cause content clipping/overlap in react-window (FixedSizeList assumes constant row heights). Either disable expansion (or virtualization) in list mode, or switch to a variable-size list approach and update the item size when a row expands.
| The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), | ||
| and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). | ||
|
|
||
| ## 1.3.1 |
There was a problem hiding this comment.
The 1.3.1 section header doesn’t follow the rest of the changelog’s Keep-a-Changelog style (e.g. ## [1.3.0] - 2026-04-03). Consider matching the existing convention by adding the release date and bracketed version format for 1.3.1 as well, so automated parsing and consistency are preserved.
| ## 1.3.1 | |
| ## [1.3.1] - 2026-04-03 |
No description provided.