Skip to content

Commit 77753eb

Browse files
mjbvzmjbvz
committed
Updating ui
1 parent bddd22d commit 77753eb

File tree

2 files changed

+117
-37
lines changed

2 files changed

+117
-37
lines changed

‎webviews/dashboardView/app.tsx‎

Lines changed: 47 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,9 @@ export function main() {
4444

4545
function Dashboard() {
4646
const [data, setData] = useState<DashboardData | null>(null);
47-
const [loading, setLoading] = useState(true);
47+
const [issuesLoading, setIssuesLoading] = useState(true);
48+
const [sessionsLoading, setSessionsLoading] = useState(true);
49+
const [refreshing, setRefreshing] = useState(false);
4850
const [chatInput, setChatInput] = useState('');
4951

5052
useEffect(() => {
@@ -54,12 +56,12 @@ function Dashboard() {
5456
switch (message.command) {
5557
case 'update-dashboard':
5658
setData(message.data);
57-
setLoading(false);
59+
setIssuesLoading(false);
60+
setSessionsLoading(false);
61+
setRefreshing(false);
5862
break;
5963
}
60-
};
61-
62-
window.addEventListener('message', messageListener);
64+
}; window.addEventListener('message', messageListener);
6365

6466
// Request initial data
6567
vscode.postMessage({ command: 'ready' });
@@ -72,7 +74,9 @@ function Dashboard() {
7274
}, []);
7375

7476
const handleRefresh = () => {
75-
setLoading(true);
77+
setRefreshing(true);
78+
setIssuesLoading(true);
79+
setSessionsLoading(true);
7680
vscode.postMessage({ command: 'refresh-dashboard' });
7781
};
7882

@@ -145,20 +149,17 @@ function Dashboard() {
145149
}
146150
};
147151

148-
if (loading) {
149-
return (
150-
<div className="dashboard-container">
151-
<div className="loading-indicator">Loading dashboard...</div>
152-
</div>
153-
);
154-
}
155-
156152
return (
157153
<div className="dashboard-container">
158154
<div className="dashboard-header">
159155
<h1 className="dashboard-title">My Tasks</h1>
160-
<button className="refresh-button" onClick={handleRefresh}>
161-
Refresh
156+
<button className="refresh-button" onClick={handleRefresh} disabled={refreshing}>
157+
{refreshing ? <>
158+
{/* allow-any-unicode-next-line */}
159+
<span className="refresh-spinner">⟳</span>
160+
</> : (
161+
'Refresh'
162+
)}
162163
</button>
163164
</div>
164165

@@ -169,7 +170,7 @@ function Dashboard() {
169170

170171
{/* Chat Input Section */}
171172
<div className="chat-section">
172-
<div className="chat-input-container">
173+
<div className="chat-input-wrapper">
173174
<textarea
174175
className="chat-input"
175176
placeholder="Start working on a new task..."
@@ -182,11 +183,13 @@ function Dashboard() {
182183
}}
183184
/>
184185
<button
185-
className="send-button"
186+
className="send-button-inline"
186187
onClick={handleSendChat}
187188
disabled={!chatInput.trim()}
189+
title="Send message (Ctrl+Enter)"
188190
>
189-
Send
191+
{/* allow-any-unicode-next-line */}
192+
<span className="send-icon">➤</span>
190193
</button>
191194
</div>
192195
<p style={{ fontSize: '12px', color: 'var(--vscode-descriptionForeground)', marginTop: '4px' }}>
@@ -195,8 +198,19 @@ function Dashboard() {
195198
</div>
196199

197200
<h3 className="column-header" style={{ marginTop: '24px' }}>September 2025 Issues</h3>
201+
{!issuesLoading && (
202+
<div className="section-count">
203+
{data?.milestoneIssues?.length || 0} issue{(data?.milestoneIssues?.length || 0) !== 1 ? 's' : ''}
204+
</div>
205+
)}
198206
<div className="column-content">
199-
{!data?.milestoneIssues?.length ? (
207+
{issuesLoading ? (
208+
<div className="section-loading">
209+
{/* allow-any-unicode-next-line */}
210+
<span className="section-spinner">⟳</span>
211+
<span>Loading issues...</span>
212+
</div>
213+
) : !data?.milestoneIssues?.length ? (
200214
<div className="empty-state">
201215
No issues found for September 2025 milestone
202216
</div>
@@ -237,8 +251,19 @@ function Dashboard() {
237251
{/* Right Column: Active tasks */}
238252
<div className="dashboard-column">
239253
<h2 className="column-header">Active tasks</h2>
254+
{!sessionsLoading && (
255+
<div className="section-count">
256+
{data?.activeSessions?.length || 0} task{(data?.activeSessions?.length || 0) !== 1 ? 's' : ''}
257+
</div>
258+
)}
240259
<div className="column-content">
241-
{!data?.activeSessions?.length ? (
260+
{sessionsLoading ? (
261+
<div className="section-loading">
262+
{/* allow-any-unicode-next-line */}
263+
<span className="section-spinner">⟳</span>
264+
<span>Loading sessions...</span>
265+
</div>
266+
) : !data?.activeSessions?.length ? (
242267
<div className="empty-state">
243268
No active sessions found
244269
</div>
@@ -281,6 +306,6 @@ function Dashboard() {
281306
</div>
282307
</div>
283308
</div>
284-
</div>
309+
</div >
285310
);
286311
}

‎webviews/dashboardView/index.css‎

Lines changed: 70 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,57 @@ html, body, app {
4646
padding: 4px 8px;
4747
border-radius: 2px;
4848
cursor: pointer;
49+
display: flex;
50+
align-items: center;
51+
gap: 4px;
4952
}
5053

51-
.refresh-button:hover {
54+
.refresh-button:hover:not(:disabled) {
5255
background-color: var(--vscode-button-hoverBackground);
5356
}
5457

58+
.refresh-button:disabled {
59+
opacity: 0.6;
60+
cursor: not-allowed;
61+
}
62+
63+
.refresh-spinner {
64+
display: inline-block;
65+
animation: spin 1s linear infinite;
66+
font-size: 14px;
67+
}
68+
69+
@keyframes spin {
70+
0% { transform: rotate(0deg); }
71+
100% { transform: rotate(360deg); }
72+
}
73+
74+
/* Section loading styles */
75+
.section-loading {
76+
display: flex;
77+
align-items: center;
78+
justify-content: center;
79+
gap: 8px;
80+
padding: 24px;
81+
color: var(--vscode-descriptionForeground);
82+
font-size: 14px;
83+
}
84+
85+
.section-spinner {
86+
display: inline-block;
87+
animation: spin 1s linear infinite;
88+
font-size: 16px;
89+
}
90+
91+
/* Section count indicator */
92+
.section-count {
93+
font-size: 12px;
94+
color: var(--vscode-descriptionForeground);
95+
margin-top: -8px;
96+
margin-bottom: 12px;
97+
padding-left: 4px;
98+
}
99+
55100
.dashboard-content {
56101
grid-column: 1 / -1;
57102
grid-row: 2;
@@ -157,24 +202,22 @@ html, body, app {
157202
}
158203

159204
.chat-section {
160-
margin-top: 16px;
161-
border-top: 1px solid var(--vscode-panel-border);
162-
padding-top: 16px;
205+
margin-top: 4px;
163206
flex-shrink: 0;
164207
max-height: 200px;
165208
}
166209

167-
.chat-input-container {
210+
.chat-input-wrapper {
211+
position: relative;
168212
display: flex;
169-
gap: 8px;
170213
align-items: flex-end;
171214
}
172215

173216
.chat-input {
174217
flex: 1;
175218
min-height: 60px;
176219
max-height: 120px;
177-
padding: 8px;
220+
padding: 8px 40px 8px 8px; /* Add right padding for the inline button */
178221
border: 1px solid var(--vscode-input-border);
179222
border-radius: 4px;
180223
background-color: var(--vscode-input-background);
@@ -188,25 +231,37 @@ html, body, app {
188231
border-color: var(--vscode-focusBorder);
189232
}
190233

191-
.send-button {
234+
.send-button-inline {
235+
position: absolute;
236+
right: 6px;
237+
bottom: 6px;
238+
width: 28px;
239+
height: 28px;
240+
border: none;
241+
border-radius: 3px;
192242
background-color: var(--vscode-button-background);
193243
color: var(--vscode-button-foreground);
194-
border: none;
195-
padding: 8px 16px;
196-
border-radius: 4px;
197244
cursor: pointer;
198-
font-weight: 500;
199-
height: fit-content;
245+
display: flex;
246+
align-items: center;
247+
justify-content: center;
248+
transition: background-color 0.2s;
200249
}
201250

202-
.send-button:hover {
251+
.send-button-inline:hover:not(:disabled) {
203252
background-color: var(--vscode-button-hoverBackground);
204253
}
205254

206-
.send-button:disabled {
255+
.send-button-inline:disabled {
207256
background-color: var(--vscode-button-secondaryBackground);
208257
color: var(--vscode-button-secondaryForeground);
209258
cursor: not-allowed;
259+
opacity: 0.6;
260+
}
261+
262+
.send-icon {
263+
font-size: 14px;
264+
line-height: 1;
210265
}
211266

212267
.empty-state {

0 commit comments

Comments
 (0)