Adds initial workspaces webview

package.json

@@ -67,6 +67,7 @@
 		"onWebviewPanel:gitlens.welcome",
 		"onWebviewPanel:gitlens.settings",
 		"onWebviewPanel:gitlens.graph",
+		"onWebviewPanel:gitlens.workspaces",
 		"onCommand:gitlens.plus.learn",
 		"onCommand:gitlens.plus.loginOrSignUp",
 		"onCommand:gitlens.plus.logout",
@@ -75,6 +76,7 @@
 		"onCommand:gitlens.plus.purchase",
 		"onCommand:gitlens.getStarted",
 		"onCommand:gitlens.showGraphPage",
+		"onCommand:gitlens.showWorkspacesPage",
 		"onCommand:gitlens.showSettingsPage",
 		"onCommand:gitlens.showSettingsPage#views",
 		"onCommand:gitlens.showSettingsPage#autolinks",
@@ -4485,6 +4487,12 @@
 				"icon": "$(gitlens-graph)"
 			},
 			{
+				"command": "gitlens.showWorkspacesPage",
+				"title": "Show Workspaces",
+				"category": "GitLens+",
+				"icon": "$(layers)"
+			},
+			{
 				"command": "gitlens.showSettingsPage",
 				"title": "Open Settings",
 				"category": "GitLens",
@@ -6856,6 +6864,12 @@
 				"icon": "$(copy)"
 			},
 			{
+				"command": "gitlens.workspaces.refresh",
+				"title": "Refresh",
+				"category": "GitLens",
+				"icon": "$(refresh)"
+			},
+			{
 				"command": "gitlens.graph.copyRemoteBranchUrl",
 				"title": "Copy Remote Branch URL",
 				"category": "GitLens",
@@ -7410,6 +7424,10 @@
 					"when": "false"
 				},
 				{
+					"command": "gitlens.showWorkspacesPage",
+					"when": "gitlens:enabled"
+				},
+				{
 					"command": "gitlens.showSettingsPage#views",
 					"when": "false"
 				},
@@ -9018,6 +9036,10 @@
 					"when": "false"
 				},
 				{
+					"command": "gitlens.workspaces.refresh",
+					"when": "false"
+				},
+				{
 					"command": "gitlens.graph.copyRemoteBranchUrl",
 					"when": "false"
 				},
@@ -9446,6 +9468,11 @@
 					"command": "gitlens.showSettingsPage#commit-graph",
 					"when": "gitlens:webview:graph:active",
 					"group": "navigation@-98"
+				},
+				{
+					"command": "gitlens.workspaces.refresh",
+					"when": "gitlens:workspaces:focused",
+					"group": "navigation@-98"
 				}
 			],
 			"editor/title/context": [

src/constants.ts

@@ -184,6 +184,7 @@ export const enum Commands {
 	PlusValidate = 'gitlens.plus.validate',
 	QuickOpenFileHistory = 'gitlens.quickOpenFileHistory',
 	RefreshGraph = 'gitlens.graph.refresh',
+	RefreshWorkspaces = 'gitlens.workspaces.refresh',
 	RefreshHover = 'gitlens.refreshHover',
 	RefreshTimelinePage = 'gitlens.refreshTimelinePage',
 	ResetAvatarCache = 'gitlens.resetAvatarCache',
@@ -240,6 +241,7 @@ export const enum Commands {
 	ShowTimelineView = 'gitlens.showTimelineView',
 	ShowGraphPage = 'gitlens.showGraphPage',
 	ShowWelcomePage = 'gitlens.showWelcomePage',
+	ShowWorkspacesPage = 'gitlens.showWorkspacesPage',
 	StashApply = 'gitlens.stashApply',
 	StashSave = 'gitlens.stashSave',
 	StashSaveFiles = 'gitlens.stashSaveFiles',
@@ -283,6 +285,7 @@ export const enum ContextKeys {
 	DisabledToggleCodeLens = 'gitlens:disabledToggleCodeLens',
 	Disabled = 'gitlens:disabled',
 	Enabled = 'gitlens:enabled',
+	WorkspacesFocused = 'gitlens:workspaces:focused',
 	HasConnectedRemotes = 'gitlens:hasConnectedRemotes',
 	HasRemotes = 'gitlens:hasRemotes',
 	HasRichRemotes = 'gitlens:hasRichRemotes',

src/container.ts

@@ -26,6 +26,7 @@ import { SubscriptionService } from './plus/subscription/subscriptionService';
 import { GraphWebview } from './plus/webviews/graph/graphWebview';
 import { TimelineWebview } from './plus/webviews/timeline/timelineWebview';
 import { TimelineWebviewView } from './plus/webviews/timeline/timelineWebviewView';
+import { WorkspacesWebview } from './plus/webviews/workspaces/workspacesWebview';
 import { StatusBarController } from './statusbar/statusBarController';
 import type { Storage } from './storage';
 import { executeCommand } from './system/command';
@@ -200,6 +201,7 @@ export class Container {
 		context.subscriptions.push((this._welcomeWebview = new WelcomeWebview(this)));
 		context.subscriptions.push((this._rebaseEditor = new RebaseEditorProvider(this)));
 		context.subscriptions.push((this._graphWebview = new GraphWebview(this)));
+		context.subscriptions.push((this._workspacesWebview = new WorkspacesWebview(this)));
 
 		context.subscriptions.push(new ViewFileDecorationProvider());
 
@@ -548,6 +550,11 @@ export class Container {
 		return this._graphWebview;
 	}
 
+	private _workspacesWebview: WorkspacesWebview;
+	get workspacesWebview() {
+		return this._workspacesWebview;
+	}
+
 	private _stashesView: StashesView | undefined;
 	get stashesView() {
 		if (this._stashesView == null) {

src/plus/webviews/workspaces/protocol.ts

@@ -0,0 +1 @@
+export type State = Record<string, unknown>;

src/plus/webviews/workspaces/workspacesWebview.ts

@@ -0,0 +1,37 @@
+import type { Disposable } from 'vscode';
+import { Commands, ContextKeys } from '../../../constants';
+import type { Container } from '../../../container';
+import { setContext } from '../../../context';
+import { registerCommand } from '../../../system/command';
+import { WebviewBase } from '../../../webviews/webviewBase';
+import type { State } from './protocol';
+
+export class WorkspacesWebview extends WebviewBase<State> {
+	constructor(container: Container) {
+		super(
+			container,
+			'gitlens.workspaces',
+			'workspaces.html',
+			'images/gitlens-icon.png',
+			'Workspaces',
+			`${ContextKeys.WebviewPrefix}workspaces`,
+			'workspacesWebview',
+			Commands.ShowWorkspacesPage,
+		);
+	}
+
+	protected override registerCommands(): Disposable[] {
+		return [registerCommand(Commands.RefreshWorkspaces, () => this.refresh(true))];
+	}
+
+	protected override onFocusChanged(focused: boolean): void {
+		if (focused) {
+			// If we are becoming focused, delay it a bit to give the UI time to update
+			setTimeout(() => void setContext(ContextKeys.WorkspacesFocused, focused), 0);
+
+			return;
+		}
+
+		void setContext(ContextKeys.WorkspacesFocused, focused);
+	}
+}

src/usageTracker.ts

@@ -29,7 +29,8 @@ export type TrackedUsageFeatures =
 	| 'timelineWebview'
 	| 'timelineView'
 	| 'welcomeWebview'
-	| 'workspaceView';
+	| 'workspaceView'
+	| 'workspacesWebview';
 export type TrackedUsageKeys = `${TrackedUsageFeatures}:shown`;
 
 export type UsageChangeEvent = {

src/webviews/apps/plus/workspaces/components/workspace-item.ts

@@ -0,0 +1,71 @@
+import { css, customElement, FASTElement, html, ref } from '@microsoft/fast-element';
+import { focusOutline, srOnly } from '../../../shared/components/styles/a11y';
+import { elementBase } from '../../../shared/components/styles/base';
+
+import '../../../shared/components/table/table-cell';
+
+const template = html<WorkspaceItem>`
+	<template role="row" @click="${(x, c) => x.selectRow(c.event)}">
+		<table-cell class="sr-only">
+			<button type="button">select workspace</button>
+		</table-cell>
+		<table-cell>
+			<slot name="name"></slot>
+		</table-cell>
+		<table-cell>
+			<slot name="description"></slot>
+		</table-cell>
+		<table-cell ${ref('count')}>
+			<slot name="count"></slot>
+		</table-cell>
+		<table-cell>
+			<slot name="updated"></slot>
+		</table-cell>
+		<table-cell ${ref('shared')}>
+			<slot name="shared"></slot>
+		</table-cell>
+		<table-cell>
+			<slot name="owner"></slot>
+		</table-cell>
+		<table-cell class="actions" ${ref('actions')}>
+			<slot name="actions"></slot>
+		</table-cell>
+	</template>
+`;
+
+const styles = css`
+	${elementBase}
+
+	:host {
+		display: table-row;
+		cursor: pointer;
+	}
+
+	:host(:focus) {
+		${focusOutline}
+	}
+
+	.actions {
+		text-align: right;
+	}
+
+	${srOnly}
+`;
+
+@customElement({ name: 'workspace-item', template: template, styles: styles, shadowOptions: { delegatesFocus: true } })
+export class WorkspaceItem extends FASTElement {
+	actions!: HTMLElement;
+	count!: HTMLElement;
+	shared!: HTMLElement;
+
+	selectRow(e: Event) {
+		const path = e.composedPath();
+		// exclude events triggered from a slot with actions
+		if ([this.actions, this.count, this.shared].find(el => path.indexOf(el) > 0) !== undefined) {
+			return;
+		}
+
+		console.log('WorkspaceItem.selectRow', e, path);
+		this.$emit('selected');
+	}
+}

src/webviews/apps/plus/workspaces/components/workspace-list.ts

@@ -0,0 +1,47 @@
+import { css, customElement, FASTElement, html } from '@microsoft/fast-element';
+import { srOnly } from '../../../shared/components/styles/a11y';
+import { elementBase } from '../../../shared/components/styles/base';
+
+import '../../../shared/components/table/table-container';
+import '../../../shared/components/table/table-row';
+import '../../../shared/components/table/table-cell';
+
+const template = html<WorkspaceList>`
+	<table-container>
+		<table-row slot="head">
+			<table-cell header="column" pinned class="sr-only">Row selection</table-cell>
+			<table-cell header="column" pinned>Workspace</table-cell>
+			<table-cell header="column" pinned>Description</table-cell>
+			<table-cell header="column" pinned># of repos</table-cell>
+			<table-cell header="column" pinned>Latest update</table-cell>
+			<table-cell header="column" pinned>Shared with</table-cell>
+			<table-cell header="column" pinned>Owner</table-cell>
+			<table-cell header="column" pinned><span class="sr-only">Workspace actions</span></table-cell>
+		</table-row>
+		<slot>
+			<table-row>
+				<table-cell class="sr-only"></table-cell>
+				<table-cell>No workspaces</table-cell>
+				<table-cell></table-cell>
+				<table-cell></table-cell>
+				<table-cell></table-cell>
+				<table-cell></table-cell>
+				<table-cell></table-cell>
+				<table-cell></table-cell>
+			</table-row>
+		</slot>
+	</table-container>
+`;
+
+const styles = css`
+	${elementBase}
+
+	.row {
+		display: table-row;
+	}
+
+	${srOnly}
+`;
+
+@customElement({ name: 'workspace-list', template: template, styles: styles })
+export class WorkspaceList extends FASTElement {}

src/webviews/apps/plus/workspaces/workspaces.html

@@ -0,0 +1,303 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+	</head>
+
+	<body class="preload app">
+		<header class="app__header">
+			<h1><code-icon icon="layers"></code-icon> Workspaces</h1>
+		</header>
+
+		<main class="app__main">
+			<section class="workspace-section app__section">
+				<header class="workspace-section__header">
+					<h2>My Pull Requests Issues</h2>
+				</header>
+				<div class="workspace-section__content">
+					<table-container>
+						<table-row slot="head">
+							<table-cell header="column" pinned>
+								<code-icon icon="gl-clock"></code-icon>
+							</table-cell>
+							<table-cell header="column" pinned>Repo</table-cell>
+							<table-cell header="column" pinned>Title</table-cell>
+							<table-cell header="column" pinned>Author</table-cell>
+							<table-cell header="column" pinned>Assigned</table-cell>
+							<table-cell header="column" pinned>
+								<code-icon icon="comment-discussion"></code-icon>
+							</table-cell>
+							<table-cell header="column" pinned>
+								<code-icon icon="pass"></code-icon>
+							</table-cell>
+							<table-cell header="column" pinned>
+								<code-icon icon="tasklist"></code-icon>
+							</table-cell>
+							<table-cell header="column" pinned>
+								<code-icon icon="add"></code-icon>
+							</table-cell>
+							<table-cell header="column" pinned>
+								<code-icon icon="dash"></code-icon>
+							</table-cell>
+							<table-cell header="column" pinned>Links</table-cell>
+						</table-row>
+						<table-row>
+							<table-cell>7h</table-cell>
+							<table-cell><a href="#">GitKraken</a></table-cell>
+							<table-cell><a href="#">#7094</a> GK-1769 Engine Mods</table-cell>
+							<table-cell>eamodio</table-cell>
+							<table-cell>d13 +2</table-cell>
+							<table-cell>10</table-cell>
+							<table-cell><code-icon icon="check"></code-icon></table-cell>
+							<table-cell><code-icon icon="close"></code-icon></table-cell>
+							<table-cell>471</table-cell>
+							<table-cell>-206</table-cell>
+							<table-cell
+								><a href="#"><code-icon icon="link"></code-icon></a
+							></table-cell>
+						</table-row>
+						<table-row>
+							<table-cell>7h</table-cell>
+							<table-cell><a href="#">GitKraken</a></table-cell>
+							<table-cell><a href="#">#7094</a> GK-1769 Engine Mods</table-cell>
+							<table-cell>eamodio</table-cell>
+							<table-cell>d13 +2</table-cell>
+							<table-cell>10</table-cell>
+							<table-cell><code-icon icon="check"></code-icon></table-cell>
+							<table-cell><code-icon icon="close"></code-icon></table-cell>
+							<table-cell>471</table-cell>
+							<table-cell>-206</table-cell>
+							<table-cell
+								><a href="#"><code-icon icon="link"></code-icon></a
+							></table-cell>
+						</table-row>
+						<table-row>
+							<table-cell>7h</table-cell>
+							<table-cell><a href="#">GitKraken</a></table-cell>
+							<table-cell><a href="#">#7094</a> GK-1769 Engine Mods</table-cell>
+							<table-cell>eamodio</table-cell>
+							<table-cell>d13 +2</table-cell>
+							<table-cell>10</table-cell>
+							<table-cell><code-icon icon="check"></code-icon></table-cell>
+							<table-cell><code-icon icon="close"></code-icon></table-cell>
+							<table-cell>471</table-cell>
+							<table-cell>-206</table-cell>
+							<table-cell
+								><a href="#"><code-icon icon="link"></code-icon></a
+							></table-cell>
+						</table-row>
+						<table-row>
+							<table-cell>7h</table-cell>
+							<table-cell><a href="#">GitKraken</a></table-cell>
+							<table-cell><a href="#">#7094</a> GK-1769 Engine Mods</table-cell>
+							<table-cell>eamodio</table-cell>
+							<table-cell>d13 +2</table-cell>
+							<table-cell>10</table-cell>
+							<table-cell><code-icon icon="check"></code-icon></table-cell>
+							<table-cell><code-icon icon="close"></code-icon></table-cell>
+							<table-cell>471</table-cell>
+							<table-cell>-206</table-cell>
+							<table-cell
+								><a href="#"><code-icon icon="link"></code-icon></a
+							></table-cell>
+						</table-row>
+						<table-row>
+							<table-cell>7h</table-cell>
+							<table-cell><a href="#">GitKraken</a></table-cell>
+							<table-cell><a href="#">#7094</a> GK-1769 Engine Mods</table-cell>
+							<table-cell>eamodio</table-cell>
+							<table-cell>d13 +2</table-cell>
+							<table-cell>10</table-cell>
+							<table-cell><code-icon icon="check"></code-icon></table-cell>
+							<table-cell><code-icon icon="close"></code-icon></table-cell>
+							<table-cell>471</table-cell>
+							<table-cell>-206</table-cell>
+							<table-cell
+								><a href="#"><code-icon icon="link"></code-icon></a
+							></table-cell>
+						</table-row>
+						<table-row>
+							<table-cell>7h</table-cell>
+							<table-cell><a href="#">GitKraken</a></table-cell>
+							<table-cell><a href="#">#7094</a> GK-1769 Engine Mods</table-cell>
+							<table-cell>eamodio</table-cell>
+							<table-cell>d13 +2</table-cell>
+							<table-cell>10</table-cell>
+							<table-cell><code-icon icon="check"></code-icon></table-cell>
+							<table-cell><code-icon icon="close"></code-icon></table-cell>
+							<table-cell>471</table-cell>
+							<table-cell>-206</table-cell>
+							<table-cell
+								><a href="#"><code-icon icon="link"></code-icon></a
+							></table-cell>
+						</table-row>
+						<table-row>
+							<table-cell>7h</table-cell>
+							<table-cell><a href="#">GitKraken</a></table-cell>
+							<table-cell><a href="#">#7094</a> GK-1769 Engine Mods</table-cell>
+							<table-cell>eamodio</table-cell>
+							<table-cell>d13 +2</table-cell>
+							<table-cell>10</table-cell>
+							<table-cell><code-icon icon="check"></code-icon></table-cell>
+							<table-cell><code-icon icon="close"></code-icon></table-cell>
+							<table-cell>471</table-cell>
+							<table-cell>-206</table-cell>
+							<table-cell
+								><a href="#"><code-icon icon="link"></code-icon></a
+							></table-cell>
+						</table-row>
+						<table-row>
+							<table-cell>7h</table-cell>
+							<table-cell><a href="#">GitKraken</a></table-cell>
+							<table-cell><a href="#">#7094</a> GK-1769 Engine Mods</table-cell>
+							<table-cell>eamodio</table-cell>
+							<table-cell>d13 +2</table-cell>
+							<table-cell>10</table-cell>
+							<table-cell><code-icon icon="check"></code-icon></table-cell>
+							<table-cell><code-icon icon="close"></code-icon></table-cell>
+							<table-cell>471</table-cell>
+							<table-cell>-206</table-cell>
+							<table-cell
+								><a href="#"><code-icon icon="link"></code-icon></a
+							></table-cell>
+						</table-row>
+					</table-container>
+				</div>
+			</section>
+
+			<section class="workspace-section app__section">
+				<header class="workspace-section__header">
+					<h2>My Issues</h2>
+				</header>
+				<div class="workspace-section__content">
+					<table-container>
+						<table-row slot="head">
+							<table-cell header="column" pinned>
+								<code-icon icon="gl-clock"></code-icon>
+							</table-cell>
+							<table-cell header="column" pinned>Repo</table-cell>
+							<table-cell header="column" pinned>Title</table-cell>
+							<table-cell header="column" pinned>Author</table-cell>
+							<table-cell header="column" pinned>Assigned</table-cell>
+							<table-cell header="column" pinned>
+								<code-icon icon="comment-discussion"></code-icon>
+							</table-cell>
+							<table-cell header="column" pinned>
+								<code-icon icon="thumbsup"></code-icon>
+							</table-cell>
+						</table-row>
+						<table-row>
+							<table-cell>6d</table-cell>
+							<table-cell><a href="#">vscode-gitlens</a></table-cell>
+							<table-cell><a href="#">#2058</a> Improve git blame contrast</table-cell>
+							<table-cell>mejiaj</table-cell>
+							<table-cell>d13</table-cell>
+							<table-cell>2</table-cell>
+							<table-cell>0</table-cell>
+						</table-row>
+						<table-row>
+							<table-cell>6d</table-cell>
+							<table-cell><a href="#">vscode-gitlens</a></table-cell>
+							<table-cell><a href="#">#2058</a> Improve git blame contrast</table-cell>
+							<table-cell>mejiaj</table-cell>
+							<table-cell>d13</table-cell>
+							<table-cell>2</table-cell>
+							<table-cell>0</table-cell>
+						</table-row>
+						<table-row>
+							<table-cell>6d</table-cell>
+							<table-cell><a href="#">vscode-gitlens</a></table-cell>
+							<table-cell><a href="#">#2058</a> Improve git blame contrast</table-cell>
+							<table-cell>mejiaj</table-cell>
+							<table-cell>d13</table-cell>
+							<table-cell>2</table-cell>
+							<table-cell>0</table-cell>
+						</table-row>
+						<table-row>
+							<table-cell>6d</table-cell>
+							<table-cell><a href="#">vscode-gitlens</a></table-cell>
+							<table-cell><a href="#">#2058</a> Improve git blame contrast</table-cell>
+							<table-cell>mejiaj</table-cell>
+							<table-cell>d13</table-cell>
+							<table-cell>2</table-cell>
+							<table-cell>0</table-cell>
+						</table-row>
+						<table-row>
+							<table-cell>6d</table-cell>
+							<table-cell><a href="#">vscode-gitlens</a></table-cell>
+							<table-cell><a href="#">#2058</a> Improve git blame contrast</table-cell>
+							<table-cell>mejiaj</table-cell>
+							<table-cell>d13</table-cell>
+							<table-cell>2</table-cell>
+							<table-cell>0</table-cell>
+						</table-row>
+						<table-row>
+							<table-cell>6d</table-cell>
+							<table-cell><a href="#">vscode-gitlens</a></table-cell>
+							<table-cell><a href="#">#2058</a> Improve git blame contrast</table-cell>
+							<table-cell>mejiaj</table-cell>
+							<table-cell>d13</table-cell>
+							<table-cell>2</table-cell>
+							<table-cell>0</table-cell>
+						</table-row>
+						<table-row>
+							<table-cell>6d</table-cell>
+							<table-cell><a href="#">vscode-gitlens</a></table-cell>
+							<table-cell><a href="#">#2058</a> Improve git blame contrast</table-cell>
+							<table-cell>mejiaj</table-cell>
+							<table-cell>d13</table-cell>
+							<table-cell>2</table-cell>
+							<table-cell>0</table-cell>
+						</table-row>
+						<table-row>
+							<table-cell>6d</table-cell>
+							<table-cell><a href="#">vscode-gitlens</a></table-cell>
+							<table-cell><a href="#">#2058</a> Improve git blame contrast</table-cell>
+							<table-cell>mejiaj</table-cell>
+							<table-cell>d13</table-cell>
+							<table-cell>2</table-cell>
+							<table-cell>0</table-cell>
+						</table-row>
+					</table-container>
+				</div>
+			</section>
+
+			<section class="workspace-section app__section">
+				<header class="workspace-section__header">
+					<h2>Work in Progress</h2>
+				</header>
+				<div class="workspace-section__content">
+					<table-container>
+						<table-row slot="head">
+							<table-cell header="column" pinned>Repo</table-cell>
+							<table-cell header="column" pinned>Branch</table-cell>
+							<table-cell header="column" pinned>Stats</table-cell>
+							<table-cell header="column" pinned>Remote</table-cell>
+						</table-row>
+						<table-row>
+							<table-cell><a href="#">vscode-gitlens</a></table-cell>
+							<table-cell><code-icon icon="source-control"></code-icon> feature/workspaces</table-cell>
+							<table-cell>+100 -50</table-cell>
+							<table-cell><a href="#">gitkraken/vscode-gitlens</a></table-cell>
+						</table-row>
+					</table-container>
+				</div>
+			</section>
+		</main>
+		#{endOfBody}
+		<style nonce="#{cspNonce}">
+			@font-face {
+				font-family: 'codicon';
+				font-display: block;
+				src: url('#{webroot}/codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa') format('truetype');
+			}
+		</style>
+		<style nonce="#{cspNonce}">
+			@font-face {
+				font-family: 'glicons';
+				font-display: block;
+				src: url('#{root}/dist/glicons.woff2?2e51fe40df2abdf6a27fbae6c29587b1') format('woff2');
+			}
+		</style>
+	</body>
+</html>

src/webviews/apps/plus/workspaces/workspaces.scss

@@ -0,0 +1,151 @@
+:root {
+	--gitlens-z-inline: 1000;
+	--gitlens-z-sticky: 1100;
+	--gitlens-z-popover: 1200;
+	--gitlens-z-cover: 1300;
+	--gitlens-z-dialog: 1400;
+	--gitlens-z-modal: 1500;
+}
+
+body {
+	--avatar-size: 2.4rem;
+	--focus-color: var(--vscode-focusBorder);
+	--table-separator: var(--vscode-textSeparator-foreground);
+	--table-heading: var(--color-foreground--50);
+	--table-text: var(--color-foreground--65);
+	--table-pinned-background: var(--color-background);
+	--layout-gutter-outer: 20px;
+}
+
+.vscode-high-contrast,
+.vscode-dark {
+	--avatar-bg: var(--color-background--lighten-30);
+	--background-05: var(--color-background--lighten-05);
+	--background-075: var(--color-background--lighten-075);
+	--background-10: var(--color-background--lighten-10);
+	--background-15: var(--color-background--lighten-15);
+	--background-30: var(--color-background--lighten-30);
+	--background-50: var(--color-background--lighten-50);
+}
+
+.vscode-high-contrast-light,
+.vscode-light {
+	--avatar-bg: var(--color-background--darken-30);
+	--background-05: var(--color-background--darken-05);
+	--background-075: var(--color-background--darken-075);
+	--background-10: var(--color-background--darken-10);
+	--background-15: var(--color-background--darken-15);
+	--background-30: var(--color-background--darken-30);
+	--background-50: var(--color-background--darken-50);
+}
+
+:root {
+	font-size: 62.5%;
+	font-family: var(--font-family);
+	box-sizing: border-box;
+}
+
+body {
+	font-family: var(--font-family);
+	font-size: var(--font-size);
+	color: var(--color-foreground);
+}
+
+*,
+*::before,
+*::after {
+	box-sizing: inherit;
+}
+
+:not(:defined) {
+	visibility: hidden;
+}
+
+[hidden] {
+	display: none !important;
+}
+
+a {
+	text-decoration: none;
+
+	&:hover {
+		text-decoration: underline;
+	}
+
+	&:focus {
+		outline: 1px solid var(--focus-color);
+		outline-offset: -1px;
+	}
+}
+
+code-icon {
+	font-size: inherit;
+}
+
+.button {
+	width: 2.4rem;
+	height: 2.4rem;
+	padding: 0;
+	color: inherit;
+	border: none;
+	background: none;
+	text-align: center;
+	font-size: 1.6rem;
+}
+.button[disabled] {
+	color: var(--vscode-disabledForeground);
+}
+.button:focus {
+	background-color: var(--vscode-toolbar-activeBackground);
+	outline: 1px solid var(--vscode-focusBorder);
+	outline-offset: -1px;
+}
+.button:not([disabled]) {
+	cursor: pointer;
+}
+.button:hover:not([disabled]) {
+	color: var(--vscode-foreground);
+	background-color: var(--vscode-toolbar-hoverBackground);
+}
+
+.workspace-icon {
+	font-size: 1.6rem;
+	vertical-align: sub;
+}
+
+.workspace-section {
+	display: flex;
+	flex-direction: column;
+
+	&__header {
+		flex: none;
+	}
+
+	&__content {
+		min-height: 0;
+		flex: 1 1 auto;
+		overflow: auto;
+	}
+}
+
+.app {
+	display: flex;
+	flex-direction: column;
+	height: 100vh;
+	overflow: hidden;
+
+	&__header {
+		flex: none;
+	}
+
+	&__main {
+		flex: 1 1 auto;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+	}
+	&__section {
+		min-height: 15rem;
+		flex: 0 1 auto;
+	}
+}

src/webviews/apps/plus/workspaces/workspaces.ts

@@ -0,0 +1,19 @@
+import type { State } from '../../../../plus/webviews/workspaces/protocol';
+import { App } from '../../shared/appBase';
+import '../../shared/components/code-icon';
+import '../../shared/components/avatars/avatar-item';
+import '../../shared/components/avatars/avatar-stack';
+import '../../shared/components/table/table-container';
+import '../../shared/components/table/table-row';
+import '../../shared/components/table/table-cell';
+import './components/workspace-list';
+import './components/workspace-item';
+import './workspaces.scss';
+
+export class WorkspacesApp extends App<State> {
+	constructor() {
+		super('WorkspacesApp');
+	}
+}
+
+new WorkspacesApp();

src/webviews/apps/shared/components/code-icon.ts

@@ -1505,6 +1505,10 @@ const styles = css`
 		font-family: 'glicons';
 		content: '\\f11a';
 	}
+	:host([icon='gl-clock']):before {
+		font-family: 'glicons';
+		content: '\\f11d';
+	}
 
 	@keyframes codicon-spin {
 		100% {

src/webviews/apps/shared/components/table/table-cell.ts

@@ -0,0 +1,60 @@
+import { attr, css, customElement, FASTElement, html } from '@microsoft/fast-element';
+import { elementBase } from '../styles/base';
+
+const template = html<TableCell>`
+	<template role="${x => x.cellRole}">
+		<slot></slot>
+	</template>
+`;
+
+const styles = css`
+	${elementBase}
+
+	:host {
+		display: table-cell;
+		vertical-align: top;
+		padding: var(--table-spacing, 0.8rem);
+		/* border-bottom: 1px solid var(--table-separator); */
+		text-align: left;
+	}
+
+	:host(:first-child) {
+		padding-left: var(--table-edge-spacing, 1.2rem);
+	}
+	:host(:last-child) {
+		padding-right: var(--table-edge-spacing, 1.2rem);
+	}
+
+	:host([role='columnheader']) {
+		text-transform: uppercase;
+		font-weight: normal;
+		padding-top: var(--table-heading-top-spacing, 0);
+		padding-bottom: var(--table-heading-bottom-spacing, 1.2rem);
+	}
+
+	:host([pinned]) {
+		background-color: var(--table-pinned-background);
+		position: sticky;
+		top: 0;
+	}
+`;
+
+@customElement({ name: 'table-cell', template: template, styles: styles })
+export class TableCell extends FASTElement {
+	@attr
+	header: 'column' | 'row' | '' = '';
+
+	@attr({ mode: 'boolean' })
+	pinned = false;
+
+	get cellRole() {
+		switch (this.header) {
+			case 'column':
+				return 'columnheader';
+			case 'row':
+				return 'rowheader';
+			default:
+				return 'cell';
+		}
+	}
+}

src/webviews/apps/shared/components/table/table-container.ts

@@ -0,0 +1,41 @@
+import { css, customElement, FASTElement, html } from '@microsoft/fast-element';
+import { elementBase } from '../styles/base';
+
+const template = html<TableContainer>`
+	<template role="table">
+		<div class="thead" role="rowgroup">
+			<slot name="head"></slot>
+		</div>
+		<div class="tbody" role="rowgroup">
+			<slot></slot>
+		</div>
+	</template>
+`;
+
+const styles = css`
+	${elementBase}
+
+	:host {
+		display: table;
+		border-collapse: collapse;
+		width: 100%;
+	}
+
+	.thead {
+		display: table-header-group;
+		color: var(--table-heading);
+	}
+
+	.tbody {
+		display: table-row-group;
+		color: var(--table-text);
+	}
+
+	.tbody ::slotted(*:hover),
+	.tbody ::slotted(*:focus-within) {
+		background-color: var(--background-05);
+	}
+`;
+
+@customElement({ name: 'table-container', template: template, styles: styles })
+export class TableContainer extends FASTElement {}

src/webviews/apps/shared/components/table/table-row.ts

@@ -0,0 +1,19 @@
+import { css, customElement, FASTElement, html } from '@microsoft/fast-element';
+import { elementBase } from '../styles/base';
+
+const template = html<TableRow>`
+	<template role="row">
+		<slot></slot>
+	</template>
+`;
+
+const styles = css`
+	${elementBase}
+
+	:host {
+		display: table-row;
+	}
+`;
+
+@customElement({ name: 'table-row', template: template, styles: styles })
+export class TableRow extends FASTElement {}

src/webviews/webviewBase.ts

@@ -31,7 +31,7 @@ function nextIpcId() {
 	return `host:${ipcSequence}`;
 }
 
-export type WebviewIds = 'graph' | 'settings' | 'timeline' | 'welcome';
+export type WebviewIds = 'graph' | 'settings' | 'timeline' | 'welcome' | 'workspaces';
 
 @logName<WebviewBase<any>>((c, name) => `${name}(${c.id})`)
 export abstract class WebviewBase<State> implements Disposable {

webpack.config.js

@@ -329,6 +329,7 @@ function getWebviewsConfig(mode, env) {
 		getHtmlPlugin('settings', false, mode, env),
 		getHtmlPlugin('timeline', true, mode, env),
 		getHtmlPlugin('welcome', false, mode, env),
+		getHtmlPlugin('workspaces', true, mode, env),
 		getCspHtmlPlugin(mode, env),
 		new InlineChunkHtmlPlugin(HtmlPlugin, mode === 'production' ? ['\\.css$'] : []),
 		new CopyPlugin({
@@ -391,6 +392,7 @@ function getWebviewsConfig(mode, env) {
 			settings: './settings/settings.ts',
 			timeline: './plus/timeline/timeline.ts',
 			welcome: './welcome/welcome.ts',
+			workspaces: './plus/workspaces/workspaces.ts',
 		},
 		mode: mode,
 		target: 'web',