Conversation
WalkthroughAdds a new Changes
Sequence Diagram(s)(omitted) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/ui/promptDetailsWebview.ts (1)
466-473: Critical:clearPromptfunction references removed variables and functions.The
clearPromptfunction referencesoriginalContent,hasUnsavedChanges, andupdateSaveButtons(), which were removed as part of this PR (per the AI summary noting removal of unsaved-changes tracking). This will cause aReferenceErrorwhen the function is called during initialization (line 499).🐛 Fix clearPrompt function to remove stale references
function clearPrompt() { currentPrompt = null; - originalContent = ''; emptyState.style.display = 'block'; promptDetails.style.display = 'none'; - hasUnsavedChanges = false; - updateSaveButtons(); }
🤖 Fix all issues with AI agents
In @src/ui/promptDetailsWebview.ts:
- Around line 497-499: The call to clearPrompt during initialization fails with
a ReferenceError because clearPrompt is either not defined yet or references
undefined state; fix by ensuring a properly implemented clearPrompt function
exists and is in scope before the initialization call: declare clearPrompt (as a
function or const arrow) above where it's invoked, remove or fix any references
inside clearPrompt to undefined symbols (e.g., promptState, setPrompt, or other
local state), or export/import it correctly if it belongs to another module or
attach it to the webview/window context so the initializer can call it without
ReferenceError.
🧹 Nitpick comments (2)
media/main.css (1)
183-191: Consider reusing the existing.primaryclass to avoid duplication.The
.activateclass styling is identical to the existing.primaryclass (lines 157-165). This duplicates code and makes maintenance harder.♻️ Consolidate duplicate button styles
Option 1: Use multiple selectors (recommended)
-.action-button.primary { +.action-button.primary, +.action-button.activate { background: var(--vscode-button-background); color: var(--vscode-button-foreground); border-color: var(--vscode-button-background); } -.action-button.primary:hover { +.action-button.primary:hover, +.action-button.activate:hover { background: var(--vscode-button-hoverBackground); } - -.action-button.activate { - background: var(--vscode-button-background); - color: var(--vscode-button-foreground); - border-color: var(--vscode-button-background); -} - -.action-button.activate:hover { - background: var(--vscode-button-hoverBackground); -}Option 2: Apply both classes in the HTML
If the classes serve different semantic purposes, apply both
primaryandactivateclasses to the button element, then remove the duplicate CSS rules.src/ui/promptDetailsWebview.ts (1)
188-215: Verify ifsavePromptContentis now dead code.Since the content textarea is now
readonly(line 357) and the save/reset buttons were removed from the webview, thesavePromptContenthandler and itssaveContentmessage case (lines 46-48) may no longer be reachable from the UI. If content editing has been moved entirely to the external editor (viaeditPromptInEditor), consider removing this dead code in a future cleanup.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
media/main.csssrc/ui/promptDetailsWebview.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Agent
🔇 Additional comments (5)
src/ui/promptDetailsWebview.ts (5)
328-328: LGTM - Fixes blank view on initial load.Setting
display: blockon the empty state ensures users see the "No Prompt Selected" message when the webview first loads, addressing BUG 1 from the PR objectives.
357-358: LGTM - Content is now read-only as intended.Making the textarea
readonlyand removing the inline save/reset buttons addresses BUG 2, preventing users from editing content directly in the details view while still allowing them to view it.
360-360: Verify the source section should always be visible.The source section is now always displayed (removed
display: none). When there's no repository URL, it will show "Local" as the source (line 446). Ensure this is the intended UX, as previously this section was conditionally shown only when a repository URL existed.
396-401: LGTM - Button styling correctly toggles between states.The updated logic properly switches between the
activateclass (blue button with '+' icon for inactive prompts) andselectedclass (green button with '✓' icon for active prompts), addressing BUG 3 from the PR objectives.
408-408: LGTM - Empty state properly hidden when showing prompt.This ensures the empty state is hidden when a prompt is selected, addressing the persistence issue mentioned in BUG 2.
There was a problem hiding this comment.
Pull request overview
This PR addresses UI/UX issues in the prompt details webview by fixing empty state display, making content read-only, and improving button styling for inactive prompts.
Key changes:
- Made prompt content textarea read-only and removed edit/save functionality
- Added proper initialization to display empty state on webview load
- Implemented activate button styling with primary colors for inactive prompts
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| src/ui/promptDetailsWebview.ts | Removed save/edit UI elements and event handlers; made textarea readonly; added empty state initialization; updated button toggle logic with new icon and CSS class |
| media/main.css | Added .activate CSS class styling for inactive prompt button state with primary theme colors |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/ui/promptDetailsWebview.ts (1)
46-48: Consider removing or documenting the unused saveContent handler.Since the content textarea is now readonly and the inline save/reset actions have been removed, the
saveContentmessage handler (lines 46-48) and its implementation (lines 188-215) appear to be unused. Consider either:
- Removing the dead code if editing in the webview won't be supported going forward
- Adding a comment explaining that this functionality is preserved for potential future use
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/ui/promptDetailsWebview.ts
🔇 Additional comments (5)
src/ui/promptDetailsWebview.ts (5)
328-328: LGTM! Empty state now displays correctly on initial load.This change ensures the "No Prompt Selected" message is visible by default, fixing BUG 1 where the panel previously showed a blank view on first load.
349-365: LGTM! Content textarea is now correctly set to readonly.The
readonlyattribute on line 357 fixes BUG 2 by preventing unintended content editing in the webview. The formatting and structure changes improve code readability.
391-404: LGTM! Activate/selected button toggle logic is correct.The class toggling correctly implements BUG 3's fix:
- Inactive state: '+' icon with
activateclass (blue primary button)- Active state: '✓' icon with
selectedclass (green button)The mutual exclusivity of the classes and appropriate icon/title updates provide clear visual feedback.
407-409: LGTM! Empty state is now properly hidden when displaying a prompt.The simplified logic correctly ensures the empty state is hidden and prompt details are shown when a prompt is selected, completing the fix for BUG 2.
494-496: LGTM! Proper initialization ensures consistent empty state on load.Calling
clearPrompt()on script initialization ensures the webview always starts in the correct state, completing the fix for BUG 1. This defensive approach prevents any inconsistencies regardless of HTML default display values.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
CHANGELOG.md (1)
23-26: Approve changelog entries; consider rewording for stylistic variety.The four new entries accurately document the fixes from this PR and align well with the PR objectives. However, all four consecutive lines begin with "Fixed", creating repetitive sentence structure.
📝 Optional rewording to vary sentence structure
- Fixed prompt details webview initializing with visible empty state instead of hidden state on load. - Fixed prompt content textarea being editable instead of read-only in details view. - Fixed empty state remaining visible when prompt is selected in details view. - Fixed activate button styling in prompt details view to use blue color with plus icon for better visibility and consistency. + Prompt details webview now initializes with the correct empty state message on load. + Prompt content textarea is now read-only in details view. + Empty state is now properly hidden when a prompt is selected. + Activate button styling updated to use blue color with plus icon for improved visibility and consistency.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
CHANGELOG.md
🧰 Additional context used
🪛 LanguageTool
CHANGELOG.md
[style] ~23-~23: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... support for proper theme adaptation. - Fixed prompt details webview initializing wit...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~24-~24: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...tate instead of hidden state on load. - Fixed prompt content textarea being editable ...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~25-~25: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...instead of read-only in details view. - Fixed empty state remaining visible when prom...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~26-~26: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...n prompt is selected in details view. - Fixed activate button styling in prompt detai...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
CHANGELOG.md (1)
11-15: Consider varying the sentence structure to improve readability.While the parallel "Fixed..." structure is common in changelogs, you could optionally vary the wording for better flow. For example:
- "Prompt details webview now shows empty-state message on initial load"
- "Content textarea is now read-only in the details view"
- "Empty state properly hides when a prompt is selected"
However, the current structure is clear and follows standard changelog conventions.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
resources/promptitude-icon.pngis excluded by!**/*.png
📒 Files selected for processing (2)
CHANGELOG.mdpackage.json
🧰 Additional context used
🪛 LanguageTool
CHANGELOG.md
[style] ~12-~12: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...tate instead of hidden state on load. - Fixed prompt content textarea being editable ...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~13-~13: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...instead of read-only in details view. - Fixed empty state remaining visible when prom...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~14-~14: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...n prompt is selected in details view. - Fixed activate button styling in prompt detai...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~15-~15: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...or better visibility and consistency. - Fixed marketplace icon not displaying on VS C...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
🔇 Additional comments (4)
package.json (2)
5-5: LGTM!The version bump to 1.5.3 correctly reflects the patch-level UI fixes documented in the changelog.
7-7: Icon file correctly configured for VS Code marketplace.The top-level
iconfield uses the correct PNG format and points to an existing file atresources/promptitude-icon.png. This properly addresses the marketplace icon display issue.CHANGELOG.md (2)
11-11: Clarify the wording to match the actual bug and fix.The current wording is confusing and appears backwards from the PR objectives. According to the PR description:
- Bug: "blank details view" displayed on load (empty state was hidden/not shown)
- Fix: Display the "empty-state message" on load (empty state is visible)
Consider rewording to:
- "Fixed prompt details webview showing blank view on load instead of displaying the empty-state message."
or
- "Fixed prompt details webview not showing empty-state message on initial load."
12-15: LGTM!These changelog entries accurately describe the UI/UX fixes from the PR objectives:
- Read-only content textarea (line 12)
- Empty state handling on prompt selection (line 13)
- Improved activate button styling (line 14)
- Marketplace icon display fix (line 15)
This PR addresses UI/UX issues in the prompt details webview to improve user experience and consistency.
BUG 1: Empty blank details view display on load
When the prompt details panel was first loaded, it showed a blank details view (like there is a selected prompt, but with empty details) instead of the expected empty state message.
Steps to Reproduce:
Expected Behavior:
=> Display empty state with message "No Prompt Selected..."
Actual Behavior:
=> Blank details view was displayed with the empty state message.
Fix:
=> Initialize webview with
clearPrompt()call to properly display empty state on load.BUG 2: Content Editing and Empty State Persistence
The prompt content was editable (should be read-only) and the empty state would persist after selecting a prompt.
Steps to Reproduce:
Expected Behavior:
Actual Behavior:
=> Content was editable && empty state could persist after selection.
Fix:
=> Added readonly attribute to content textarea && properly hide empty state when showing prompt details.
BUG 3: Activate Button Styling
The activate button in the prompt details view was not properly styled when a prompt was inactive.
Steps to Reproduce:
Expected Behavior:
=> Button should be blue (primary style) with a "+" icon at the center.
Actual Behavior:
=> Button displayed with default secondary styling.
Fix:
.activateCSS class for inactive state with primary button colors.updateSelectionButton()to properly toggle between activate and selected classes.=> Button now correctly displays:
Inactive state: Blue background with "+" icon.
Active state: Green background with "✓" icon.
Additional Fix
Fixed marketplace icon not displaying:
Added top-level
iconproperty in package.json pointing to PNG file (resources/promptitude-icon.png) to ensure the extension icon displays correctly on VS Code Extensions Marketplace.The marketplace requires a separate PNG icon (minimum 128x128 pixels) in addition to the SVG icon used for the Activity Bar.
Screenshots
PR description images:
Summary by CodeRabbit
Style
Refactor
Chores
✏️ Tip: You can customize this high-level summary in your review settings.