Skip to content

Commit 30eb22b

Browse files
Safwane-GJSafwane-GJ
authored
Merge pull request #19 from Safwane-GJ/promptitude-ui
Promptitude UI
2 parents 8f8886e + bc8fc13 commit 30eb22b

16 files changed

+3857
-429
lines changed

‎CHANGELOG.md‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,24 @@
22

33
All notable changes to the "promptitude" extension will be documented in this file.
44

5-
## vNext
5+
## [Unreleased]
6+
7+
### Changed
8+
9+
- Renamed "chatmodes" to "agents" throughout the UI to align with VS Code's current terminology
610

711
### Fixed
812

9-
- **VS Code Profile Support**: Fixed issue where extension didn't work properly with multiple VS Code profiles
10-
- **Chatmodes support**: Chatmodes will now sync correctly.
13+
- Improved prompt management UI with bug fixes and stability improvements
14+
- Fixed duplicate filename handling across multiple repositories
15+
- Enhanced cross-platform compatibility
16+
- Code quality improvements
17+
18+
## [1.5.0] - 2025-11-12
19+
20+
### Added
21+
22+
- **Prompt Management UI**: Interactive webview interface for browsing, searching, and managing prompts from configured repositories
1123

1224
## [1.4.0] - 2025-10-03
1325

‎media/main.css‎

Lines changed: 337 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,337 @@
1+
/* Main application styles */
2+
#container {
3+
padding: var(--container-padding);
4+
height: 100vh;
5+
overflow-y: auto;
6+
}
7+
8+
/* Empty state */
9+
.empty-state {
10+
display: flex;
11+
flex-direction: column;
12+
align-items: center;
13+
justify-content: center;
14+
text-align: center;
15+
padding: var(--spacing-xxl);
16+
height: 60vh;
17+
color: var(--vscode-descriptionForeground);
18+
}
19+
20+
.empty-icon {
21+
font-size: 48px;
22+
margin-bottom: var(--spacing-lg);
23+
opacity: 0.7;
24+
}
25+
26+
.empty-state h2 {
27+
margin-bottom: var(--spacing-sm);
28+
color: var(--vscode-foreground);
29+
}
30+
31+
/* Prompt details container */
32+
.prompt-details {
33+
display: flex;
34+
flex-direction: column;
35+
gap: var(--spacing-xl);
36+
}
37+
38+
/* Header section */
39+
.header {
40+
display: flex;
41+
justify-content: space-between;
42+
align-items: flex-start;
43+
gap: var(--spacing-lg);
44+
padding-bottom: var(--spacing-lg);
45+
border-bottom: 1px solid var(--vscode-panel-border);
46+
}
47+
48+
.title-section h1 {
49+
font-size: 18px;
50+
margin-bottom: var(--spacing-sm);
51+
color: var(--vscode-foreground);
52+
word-break: break-word;
53+
}
54+
55+
.metadata {
56+
display: flex;
57+
flex-wrap: wrap;
58+
gap: var(--spacing-sm);
59+
font-size: 12px;
60+
color: var(--vscode-descriptionForeground);
61+
}
62+
63+
.type-badge {
64+
background: var(--vscode-badge-background);
65+
color: var(--vscode-badge-foreground);
66+
padding: 2px 6px;
67+
border-radius: var(--border-radius);
68+
font-weight: 500;
69+
text-transform: capitalize;
70+
}
71+
72+
.type-badge.type-chatmode {
73+
background: var(--vscode-charts-blue);
74+
color: white;
75+
}
76+
77+
.type-badge.type-instructions {
78+
background: var(--vscode-charts-green);
79+
color: white;
80+
}
81+
82+
.type-badge.type-prompts {
83+
background: var(--vscode-charts-orange);
84+
color: white;
85+
}
86+
87+
.status-badge {
88+
padding: 2px 8px;
89+
border-radius: var(--border-radius);
90+
font-weight: 500;
91+
font-size: 11px;
92+
text-transform: uppercase;
93+
letter-spacing: 0.5px;
94+
}
95+
96+
.status-badge.status-active {
97+
background: var(--vscode-charts-green);
98+
color: white;
99+
}
100+
101+
.status-badge.status-inactive {
102+
background: var(--vscode-descriptionForeground);
103+
color: var(--vscode-editor-background);
104+
opacity: 0.7;
105+
}
106+
107+
/* Description section */
108+
.description-section {
109+
padding: var(--spacing-md);
110+
background: var(--vscode-textBlockQuote-background);
111+
border-left: 3px solid var(--vscode-textBlockQuote-border);
112+
border-radius: var(--border-radius);
113+
font-size: 13px;
114+
line-height: 1.6;
115+
color: var(--vscode-foreground);
116+
margin-bottom: var(--spacing-sm);
117+
}
118+
119+
.description-content {
120+
font-style: italic;
121+
}
122+
123+
/* Actions */
124+
.actions {
125+
display: flex;
126+
gap: var(--spacing-xs);
127+
flex-shrink: 0;
128+
}
129+
130+
/* Action buttons and codicon fallbacks */
131+
.action-button {
132+
display: inline-flex;
133+
align-items: center;
134+
gap: var(--spacing-xs);
135+
padding: var(--spacing-xs) var(--spacing-sm);
136+
background: var(--vscode-button-secondaryBackground);
137+
color: var(--vscode-button-secondaryForeground);
138+
border: 1px solid var(--vscode-button-border);
139+
border-radius: var(--border-radius);
140+
font-size: 12px;
141+
cursor: pointer;
142+
transition: all 0.2s ease;
143+
white-space: nowrap;
144+
min-height: 28px;
145+
}
146+
147+
.action-button:hover {
148+
background: var(--vscode-button-secondaryHoverBackground);
149+
}
150+
151+
.action-button.primary {
152+
background: var(--vscode-button-background);
153+
color: var(--vscode-button-foreground);
154+
border-color: var(--vscode-button-background);
155+
}
156+
157+
.action-button.primary:hover {
158+
background: var(--vscode-button-hoverBackground);
159+
}
160+
161+
.action-button.danger {
162+
background: var(--vscode-inputValidation-errorBackground);
163+
color: var(--vscode-inputValidation-errorForeground);
164+
border-color: var(--vscode-inputValidation-errorBorder);
165+
}
166+
167+
.action-button.danger:hover {
168+
opacity: 0.8;
169+
}
170+
171+
.action-button.selected {
172+
background: var(--vscode-charts-green);
173+
color: white;
174+
border-color: var(--vscode-charts-green);
175+
}
176+
177+
/* Codicon fallback styles */
178+
.action-button .icon {
179+
font-size: 14px;
180+
width: 16px;
181+
height: 16px;
182+
display: inline-flex;
183+
align-items: center;
184+
justify-content: center;
185+
}
186+
187+
/* Content section */
188+
.content-section {
189+
display: flex;
190+
flex-direction: column;
191+
gap: var(--spacing-md);
192+
}
193+
194+
.section-header {
195+
display: flex;
196+
justify-content: space-between;
197+
align-items: center;
198+
}
199+
200+
.section-header h3 {
201+
font-size: 14px;
202+
color: var(--vscode-foreground);
203+
}
204+
205+
.content-actions {
206+
display: flex;
207+
gap: var(--spacing-xs);
208+
}
209+
210+
.content-editor {
211+
width: 100%;
212+
min-height: 200px;
213+
padding: var(--spacing-md);
214+
background: var(--vscode-input-background);
215+
color: var(--vscode-input-foreground);
216+
border: 1px solid var(--vscode-input-border);
217+
border-radius: var(--border-radius);
218+
font-family: var(--vscode-editor-font-family);
219+
font-size: var(--vscode-editor-font-size);
220+
line-height: 1.5;
221+
resize: vertical;
222+
overflow-y: auto;
223+
}
224+
225+
.content-editor:focus {
226+
border-color: var(--vscode-focusBorder);
227+
outline: none;
228+
}
229+
230+
.content-editor::placeholder {
231+
color: var(--vscode-input-placeholderForeground);
232+
}
233+
234+
/* Info section */
235+
.info-section {
236+
display: flex;
237+
flex-direction: column;
238+
gap: var(--spacing-sm);
239+
padding: var(--spacing-md);
240+
background: var(--vscode-editor-background);
241+
border: 1px solid var(--vscode-panel-border);
242+
border-radius: var(--border-radius);
243+
}
244+
245+
.info-section h3 {
246+
font-size: 14px;
247+
color: var(--vscode-foreground);
248+
margin-bottom: var(--spacing-xs);
249+
}
250+
251+
.info-grid {
252+
display: grid;
253+
grid-template-columns: 1fr;
254+
gap: var(--spacing-sm);
255+
}
256+
257+
.info-item {
258+
display: flex;
259+
align-items: center;
260+
gap: var(--spacing-sm);
261+
font-size: 12px;
262+
}
263+
264+
.info-item label {
265+
font-weight: 600;
266+
color: var(--vscode-descriptionForeground);
267+
flex-shrink: 0;
268+
min-width: 60px;
269+
}
270+
271+
.info-item span {
272+
color: var(--vscode-foreground);
273+
word-break: break-word;
274+
flex: 1;
275+
}
276+
277+
.info-item .repo-link {
278+
color: var(--vscode-textLink-foreground);
279+
text-decoration: none;
280+
cursor: pointer;
281+
transition: all 0.2s ease;
282+
display: inline-flex;
283+
align-items: center;
284+
gap: 3px;
285+
}
286+
287+
.info-item .repo-link:hover {
288+
text-decoration: underline;
289+
opacity: 0.8;
290+
}
291+
292+
/* Responsive design */
293+
@media (max-width: 400px) {
294+
.header {
295+
flex-direction: column;
296+
align-items: stretch;
297+
}
298+
299+
.actions {
300+
justify-content: flex-start;
301+
flex-wrap: wrap;
302+
}
303+
304+
.metadata {
305+
font-size: 11px;
306+
}
307+
308+
.info-item {
309+
flex-direction: column;
310+
align-items: flex-start;
311+
gap: var(--spacing-xs);
312+
}
313+
314+
.info-item span {
315+
text-align: left;
316+
}
317+
}
318+
319+
/* Animation for state changes */
320+
.prompt-details {
321+
animation: fadeIn 0.2s ease-in-out;
322+
}
323+
324+
.empty-state {
325+
animation: fadeIn 0.3s ease-in-out;
326+
}
327+
328+
@keyframes fadeIn {
329+
from {
330+
opacity: 0;
331+
transform: translateY(10px);
332+
}
333+
to {
334+
opacity: 1;
335+
transform: translateY(0);
336+
}
337+
}

0 commit comments

Comments
 (0)