Merge pull request #25 from nventive/msyo/fix-prompt-details

MatFillion · web-flow · commit 57080ec47817 · 2026-01-08T16:04:41.000-05:00
Fix: Prompt Details UI Improvements
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,18 @@ All notable changes to the "promptitude" extension will be documented in this fi
 
 ## [Unreleased]
 
+## [1.5.3] - 2026-01-08
+
+### Fixed
+
+- 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.
+- Fixed marketplace icon not displaying on VS Code Extensions Marketplace by adding top-level icon property pointing to PNG file.
+
+## [1.5.2] - 2026-01-07
+
 ### Changed
 
 - Renamed "chatmodes" to "agents" throughout the UI to align with VS Code's current terminology
diff --git a/media/main.css b/media/main.css
@@ -180,6 +180,16 @@
 	border-color: var(--vscode-charts-green);
 }
 
+.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);
+}
+
 /* Codicon fallback styles */
 .action-button .icon {
 	font-size: 14px;
diff --git a/package.json b/package.json
@@ -2,8 +2,9 @@
   "name": "promptitude-extension",
   "displayName": "Promptitude",
   "description": "Sync GitHub Copilot prompts, chatmodes and instructions from git repositories",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "publisher": "logientnventive",
+  "icon":"resources/promptitude-icon.png",
   "repository": {
     "type": "git",
     "url": "https://github.com/nventive/promptitude.git",
diff --git a/resources/promptitude-icon.png b/resources/promptitude-icon.png
diff --git a/src/ui/promptDetailsWebview.ts b/src/ui/promptDetailsWebview.ts
@@ -325,7 +325,7 @@ export class PromptDetailsWebviewProvider implements vscode.WebviewViewProvider
 			</head>
 			<body>
 				<div id="container">
-					<div id="empty-state" class="empty-state">
+					<div id="empty-state" class="empty-state" style="display: block;">
 						<div class="empty-icon">📝</div>
 						<h2>No Prompt Selected</h2>
 						<p>Select a prompt from the tree view to view its details and content.</p>
@@ -346,41 +346,29 @@ export class PromptDetailsWebviewProvider implements vscode.WebviewViewProvider
 							</div>
 						</div>
 						
-							<div class="description-section" id="description-section" style="display: none;">
-								<div class="description-content" id="prompt-description"></div>
-							</div>
+						<div class="description-section" id="description-section" style="display: none;">
+							<div class="description-content" id="prompt-description"></div>
+						</div>
 
-							<div class="content-section">
-								<div class="section-header">
-									<h3>Content</h3>
-									<div class="content-actions">
-										<button id="save-content" class="action-button primary" style="display: none;">
-											<span class="icon">💾</span>
-											Save
-										</button>
-										<button id="reset-content" class="action-button" style="display: none;">
-											<span class="icon">↩️</span>
-											Reset
-										</button>
-									</div>
-								</div>
-								<textarea id="prompt-content" class="content-editor" placeholder="Prompt content will appear here..."></textarea>
-							</div>
+						<div class="content-section">
+							<div class="section-header">
+                                <h3>Content</h3>
+                            </div>
+							<textarea id="prompt-content" class="content-editor" placeholder="Prompt content will appear here..." readonly></textarea>
+						</div>
 
-							<div class="info-section" id="source-section" style="display: none;">
-								<div class="info-item">
-									<label>Source:</label>
-									<span id="prompt-source"></span>
-								</div>
+						<div class="info-section" id="source-section" style="display: none;">
+							<div class="info-item">
+								<label>Source:</label>
+								<span id="prompt-source"></span>
 							</div>
+						</div>
 					</div>
 				</div>
 
 				<script nonce="${nonce}">
 					const vscode = acquireVsCodeApi();
 					let currentPrompt = null;
-					let originalContent = '';
-					let hasUnsavedChanges = false;
 
 					// DOM elements
 					const emptyState = document.getElementById('empty-state');
@@ -394,58 +382,31 @@ export class PromptDetailsWebviewProvider implements vscode.WebviewViewProvider
 					const sourceSection = document.getElementById('source-section');
 					
 					const toggleSelectionBtn = document.getElementById('toggle-selection');
-					const saveContentBtn = document.getElementById('save-content');
-					const resetContentBtn = document.getElementById('reset-content');
 
 					// Event listeners
 					toggleSelectionBtn.addEventListener('click', () => {
 						vscode.postMessage({ type: 'toggleSelection' });
 					});
 
-					saveContentBtn.addEventListener('click', () => {
-						vscode.postMessage({ 
-							type: 'saveContent',
-							content: promptContent.value
-						});
-						hasUnsavedChanges = false;
-						updateSaveButtons();
-					});
-
-					resetContentBtn.addEventListener('click', () => {
-						promptContent.value = originalContent;
-						hasUnsavedChanges = false;
-						updateSaveButtons();
-					});
-
-					promptContent.addEventListener('input', () => {
-						hasUnsavedChanges = promptContent.value !== originalContent;
-						updateSaveButtons();
-					});
-
-					function updateSaveButtons() {
-						saveContentBtn.style.display = hasUnsavedChanges ? 'inline-flex' : 'none';
-						resetContentBtn.style.display = hasUnsavedChanges ? 'inline-flex' : 'none';
-					}
-
 					function updateSelectionButton(active) {
 						const icon = toggleSelectionBtn.querySelector('.icon');
 						if (active) {
 							icon.textContent = '✓';
 							toggleSelectionBtn.classList.add('selected');
+							toggleSelectionBtn.classList.remove('activate');
 							toggleSelectionBtn.title = 'Deactivate';
 						} else {
-							icon.textContent = '☐';
+							icon.textContent = '+';
 							toggleSelectionBtn.classList.remove('selected');
+							toggleSelectionBtn.classList.add('activate');
 							toggleSelectionBtn.title = 'Activate';
 						}
 					}
 
 					function showPrompt(data) {
-						currentPrompt = data.prompt;
-						originalContent = data.prompt.content;
-						
-						emptyState.style.display = 'none';
-						promptDetails.style.display = 'block';
+                        currentPrompt = data.prompt;
+                        emptyState.style.display = 'none';
+                        promptDetails.style.display = 'block';
 						
 						// Update header
 						promptTitle.textContent = data.prompt.name;
@@ -488,10 +449,6 @@ export class PromptDetailsWebviewProvider implements vscode.WebviewViewProvider
 						
 						// Update selection button
 						updateSelectionButton(data.prompt.active);
-						
-						// Reset save state
-						hasUnsavedChanges = false;
-						updateSaveButtons();
 					}
 
 					function extractRepositoryName(url) {
@@ -508,11 +465,8 @@ export class PromptDetailsWebviewProvider implements vscode.WebviewViewProvider
 
 					function clearPrompt() {
 						currentPrompt = null;
-						originalContent = '';
 						emptyState.style.display = 'block';
 						promptDetails.style.display = 'none';
-						hasUnsavedChanges = false;
-						updateSaveButtons();
 					}
 
 					// Handle messages from extension
@@ -537,6 +491,9 @@ export class PromptDetailsWebviewProvider implements vscode.WebviewViewProvider
 								break;
 						}
 					});
+
+					// Initialize with empty state on load
+					clearPrompt();
 				</script>
 			</body>
 			</html>`;
