Skip to content

Commit 2cb5d40

Browse files
mjbvzmjbvz
committed
Cleaning up global styling
1 parent 21a528c commit 2cb5d40

4 files changed

Lines changed: 146 additions & 87 deletions

File tree

‎webviews/dashboardView/app.tsx‎

Lines changed: 95 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,9 @@ import { EmptyState } from './components/EmptyState';
1010
import { GlobalSessionItem } from './components/GlobalSessionItem';
1111
import { IssueItem } from './components/IssueItem';
1212
import { LoadingState } from './components/LoadingState';
13-
import { RecentProjects } from './components/RecentProjects';
1413
import { SessionItem } from './components/SessionItem';
1514
import { SortDropdown } from './components/SortDropdown';
16-
import { DashboardState, extractMilestoneFromQuery, IssueData, SessionData, vscode } from './types';
15+
import { DashboardState, extractMilestoneFromQuery, IssueData, ProjectData, SessionData, vscode } from './types';
1716

1817
export function main() {
1918
render(<Dashboard />, document.getElementById('app'));
@@ -147,20 +146,54 @@ function Dashboard() {
147146
const activeSessions = dashboardState?.state === 'ready' ? dashboardState.activeSessions : [];
148147
const recentProjects = isGlobal && dashboardState?.state === 'ready' ? (dashboardState as any).recentProjects : [];
149148

149+
// For global dashboards, create a mixed array of sessions and projects
150+
const mixedItems = isGlobal ? (() => {
151+
const mixed: Array<{ type: 'session', data: SessionData, index: number } | { type: 'project', data: ProjectData }> = [];
152+
153+
// Add sessions
154+
activeSessions.forEach((session, index) => {
155+
mixed.push({ type: 'session', data: session, index });
156+
});
157+
158+
// Add projects
159+
recentProjects.forEach((project: ProjectData) => {
160+
mixed.push({ type: 'project', data: project });
161+
});
162+
163+
function shuffle<T>(array: T[]): T[] {
164+
for (let i = array.length - 1; i > 0; i--) {
165+
const j = Math.floor(Math.random() * (i + 1));
166+
const tmp = array[i];
167+
array[i] = array[j];
168+
array[j] = tmp;
169+
}
170+
return array;
171+
}
172+
173+
shuffle(mixed);
174+
175+
// Sort by recency - sessions first, then projects, but could be enhanced with actual timestamps
176+
return mixed;
177+
})() : [];
178+
150179
return (
151180
<div className={`dashboard-container${isGlobal ? ' global-dashboard' : ''}`}>
152-
<div className="dashboard-header">
153-
<h1 className="dashboard-title">My Tasks</h1>
154-
<button className="refresh-button" onClick={handleRefresh} disabled={refreshing} title="Refresh dashboard">
155-
{refreshing ? (
156-
<span className="codicon codicon-sync codicon-modifier-spin"></span>
157-
) : (
158-
<span className="codicon codicon-refresh"></span>
159-
)}
160-
</button>
161-
</div>
181+
{!isGlobal && (
182+
<div className={`dashboard-header${isGlobal ? ' global-header' : ''}`}>
183+
<h1 className="dashboard-title">
184+
{isGlobal ? 'Visual Studio Code - Insiders' : 'My Tasks'}
185+
</h1>
186+
<button className="refresh-button" onClick={handleRefresh} disabled={refreshing} title="Refresh dashboard">
187+
{refreshing ? (
188+
<span className="codicon codicon-sync codicon-modifier-spin"></span>
189+
) : (
190+
<span className="codicon codicon-refresh"></span>
191+
)}
192+
</button>
193+
</div>
194+
)}
162195

163-
<div className="dashboard-content">
196+
<div className={`dashboard-content${isGlobal ? ' global-dashboard' : ''}`}>
164197
{/* Input Area */}
165198
<div className="input-area">
166199
<h2 className="area-header">Start new task</h2>
@@ -172,7 +205,7 @@ function Dashboard() {
172205
<div className="issues-area">
173206
{isGlobal ? (
174207
<>
175-
<RecentProjects projects={recentProjects} />
208+
{/* Empty for now, everything moved to tasks area */}
176209
</>
177210
) : (
178211
<>
@@ -224,7 +257,7 @@ function Dashboard() {
224257

225258
{/* Tasks Area */}
226259
<div className="tasks-area">
227-
<h2 className="area-header">Active tasks</h2>
260+
<h2 className="area-header">{isGlobal ? 'Continue working on...' : 'Active tasks'}</h2>
228261
{dashboardState?.state === 'ready' && (
229262
<div className="section-count">
230263
{activeSessions.length || 0} task{activeSessions.length !== 1 ? 's' : ''}
@@ -233,29 +266,56 @@ function Dashboard() {
233266
<div className="area-content">
234267
{dashboardState?.state === 'loading' ? (
235268
<LoadingState message="Loading tasks..." />
236-
) : dashboardState?.state === 'ready' && !activeSessions.length ? (
269+
) : dashboardState?.state === 'ready' && !activeSessions.length && (!isGlobal || !recentProjects.length) ? (
237270
<EmptyState message="No active tasks found" />
238271
) : dashboardState?.state === 'ready' ? (
239-
activeSessions.map((session, index) =>
240-
isGlobal ? (
241-
<GlobalSessionItem
242-
key={session.id}
243-
session={session}
244-
index={index}
245-
onSessionClick={() => handleSessionClick(session)}
246-
onPullRequestClick={handlePullRequestClick}
247-
/>
272+
<>
273+
{isGlobal ? (
274+
// Render mixed items for global dashboard
275+
mixedItems.map((item) =>
276+
item.type === 'session' ? (
277+
<GlobalSessionItem
278+
key={item.data.id}
279+
session={item.data}
280+
index={item.index}
281+
onSessionClick={() => handleSessionClick(item.data)}
282+
onPullRequestClick={handlePullRequestClick}
283+
/>
284+
) : (
285+
<div
286+
key={`project-${item.data.path}`}
287+
className="session-item project-item"
288+
onClick={() => vscode.postMessage({ command: 'open-project', args: { path: item.data.path } })}
289+
title={`Click to open project: ${item.data.name}`}
290+
>
291+
<div className="item-title">
292+
<span className="task-type-indicator project" title="Recent project">
293+
<span className="codicon codicon-folder-opened"></span>
294+
</span>
295+
<span className="item-title-text">{item.data.name}</span>
296+
</div>
297+
<div className="item-metadata">
298+
<div className="metadata-item">
299+
<span className="project-path-text">{item.data.path}</span>
300+
</div>
301+
</div>
302+
</div>
303+
)
304+
)
248305
) : (
249-
<SessionItem
250-
key={session.id}
251-
session={session}
252-
index={index}
253-
onSessionClick={() => handleSessionClick(session)}
254-
onPullRequestClick={handlePullRequestClick}
255-
isHighlighted={hoveredIssue !== null && isSessionAssociatedWithIssue(session, hoveredIssue)}
256-
/>
257-
)
258-
)
306+
// Render sessions only for regular dashboard
307+
activeSessions.map((session, index) => (
308+
<SessionItem
309+
key={session.id}
310+
session={session}
311+
index={index}
312+
onSessionClick={() => handleSessionClick(session)}
313+
onPullRequestClick={handlePullRequestClick}
314+
isHighlighted={hoveredIssue !== null && isSessionAssociatedWithIssue(session, hoveredIssue)}
315+
/>
316+
))
317+
)}
318+
</>
259319
) : null}
260320
</div>
261321
</div>

‎webviews/dashboardView/components/ChatInput.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
1919
import React, { useCallback, useEffect, useState } from 'react';
2020
import { DashboardState, vscode } from '../types';
2121
import { GlobalInstructions } from './GlobalInstructions';
22-
import { QuickActions } from './QuickActions';
2322

2423
const inputLanguageId = 'taskInput';
2524

@@ -334,11 +333,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ data, isGlobal }) => {
334333
</>
335334
)}
336335

337-
{isGlobal && (
338-
<>
339-
<QuickActions />
340-
</>
341-
)}
336+
{/* Removed QuickActions for global dashboards - moved to input area separator only */}
342337
</div>
343338
</>;
344339
};

‎webviews/dashboardView/components/RecentProjects.tsx‎

Lines changed: 0 additions & 45 deletions
This file was deleted.

‎webviews/dashboardView/index.css‎

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -638,11 +638,11 @@ body {
638638
/* Global Dashboard Styles */
639639
.global-instructions {
640640
margin-top: 8px;
641+
font-size: 80%;
641642
}
642643

643644
.instructions-content p {
644645
margin: 0;
645-
font-size: 12px;
646646
color: var(--vscode-descriptionForeground);
647647
line-height: 1.3;
648648
padding-bottom: 0.6em;
@@ -663,6 +663,55 @@ body {
663663
opacity: 0.3;
664664
}
665665

666+
/* Global Dashboard Layout */
667+
.dashboard-content.global-dashboard {
668+
grid-template-columns: 100%;
669+
grid-template-rows: auto 1fr;
670+
grid-template-areas:
671+
"input"
672+
"tasks";
673+
justify-items: center;
674+
max-width: 800px;
675+
margin: 0 auto;
676+
}
677+
678+
.dashboard-header.global-header {
679+
justify-content: center;
680+
max-width: 800px;
681+
margin: 0 auto;
682+
padding-bottom: 24px;
683+
}
684+
685+
.dashboard-header.global-header .refresh-button {
686+
position: absolute;
687+
right: 16px;
688+
}
689+
690+
.dashboard-content.global-dashboard .input-area {
691+
max-width: 600px;
692+
width: 100%;
693+
}
694+
695+
.dashboard-content.global-dashboard .tasks-area {
696+
max-width: 600px;
697+
width: 100%;
698+
}
699+
700+
.dashboard-content.global-dashboard .section-count {
701+
display: none;
702+
}
703+
704+
.dashboard-content.global-dashboard .issues-area {
705+
display: none;
706+
}
707+
708+
/* Project Items in Tasks List */
709+
.project-path-text {
710+
font-size: 11px;
711+
color: var(--vscode-descriptionForeground);
712+
opacity: 0.8;
713+
}
714+
666715
.quick-actions-grid {
667716
display: grid;
668717
grid-template-columns: 1fr;

0 commit comments

Comments
 (0)