Updates focus view v2 WIP

src/webviews/apps/plus/focus/components/date-styles.css.ts

@@ -0,0 +1,10 @@
+import { css } from 'lit';
+
+export const dateAgeStyles = css`
+	.indicator-warning {
+		color: var(--vscode-problemsWarningIcon-foreground);
+	}
+	.indicator-danger {
+		color: var(--vscode-problemsErrorIcon-foreground);
+	}
+`;

src/webviews/apps/plus/focus/components/gk-issue-row.ts

@@ -5,15 +5,18 @@ import { when } from 'lit/directives/when.js';
 import type { IssueMember, IssueShape } from '../../../../../git/models/issue';
 import { elementBase } from '../../../shared/components/styles/lit/base.css';
 import '@gitkraken/shared-web-components';
+import { dateAgeStyles } from './date-styles.css';
+import { themeProperties } from './gk-theme.css';
+import { fromDateRange } from './helpers';
 
 @customElement('gk-issue-row')
 export class GkIssueRow extends LitElement {
 	static override styles = [
+		themeProperties,
 		elementBase,
+		dateAgeStyles,
 		css`
 			:host {
-				--gk-avatar-background-color: var(--background-10);
-				--color-background: var(--vscode-editor-background);
 				display: block;
 			}
 
@@ -41,6 +44,10 @@ export class GkIssueRow extends LitElement {
 		return new Date(this.issue!.date);
 	}
 
+	get dateStyle() {
+		return `indicator-${fromDateRange(this.lastUpdatedDate).status}`;
+	}
+
 	get assignees() {
 		const assignees = this.issue?.assignees;
 		if (assignees == null) {
@@ -48,7 +55,7 @@ export class GkIssueRow extends LitElement {
 		}
 		const author: IssueMember | undefined = this.issue!.author;
 		if (author != null) {
-			return assignees.filter(assignee => assignee.name !== author.name);
+			return assignees.filter(assignee => assignee.avatarUrl !== author.avatarUrl);
 		}
 
 		return assignees;
@@ -74,11 +81,11 @@ export class GkIssueRow extends LitElement {
 							<span slot="prefix"><code-icon icon="repo"></code-icon></span>
 							${this.issue.repository.repo}
 						</gk-tag>
-						<gk-tag>
+						<gk-tag variant="ghost">
 							<span slot="prefix"><code-icon icon="comment-discussion"></code-icon></span>
 							${this.issue.commentsCount}
 						</gk-tag>
-						<gk-tag>
+						<gk-tag variant="ghost">
 							<span slot="prefix"><code-icon icon="thumbsup"></code-icon></span>
 							${this.issue.thumbsUpCount}
 						</gk-tag>
@@ -87,7 +94,11 @@ export class GkIssueRow extends LitElement {
 						<gk-avatar-group>
 							${when(
 								this.issue.author != null,
-								() => html`<gk-avatar src="${this.issue!.author.avatarUrl}"></gk-avatar>`,
+								() =>
+									html`<gk-avatar
+										src="${this.issue!.author.avatarUrl}"
+										title="${this.issue!.author.name} (author)"
+									></gk-avatar>`,
 							)}
 							${when(
 								this.assignees.length > 0,
@@ -95,14 +106,18 @@ export class GkIssueRow extends LitElement {
 									${repeat(
 										this.assignees,
 										item => item.url,
-										(item, index) => html`<gk-avatar src="${item.avatarUrl}"></gk-avatar>`,
+										(item, index) =>
+											html`<gk-avatar
+												src="${item.avatarUrl}"
+												title="${item.name ? `${item.name} ` : ''}(assignee)"
+											></gk-avatar>`,
 									)}
 								`,
 							)}
 						</gk-avatar-group>
 					</span>
 					<span slot="date">
-						<gk-date-from date="${this.lastUpdatedDate}"></gk-date-from>
+						<gk-date-from class="${this.dateStyle}" date="${this.lastUpdatedDate}"></gk-date-from>
 					</span>
 					<nav slot="actions"></nav>
 				</gk-focus-item>

src/webviews/apps/plus/focus/components/gk-pull-request-row.ts

@@ -5,15 +5,18 @@ import { when } from 'lit/directives/when.js';
 import type { PullRequestMember, PullRequestShape } from '../../../../../git/models/pullRequest';
 import { elementBase } from '../../../shared/components/styles/lit/base.css';
 import '@gitkraken/shared-web-components';
+import { dateAgeStyles } from './date-styles.css';
+import { themeProperties } from './gk-theme.css';
+import { fromDateRange } from './helpers';
 
 @customElement('gk-pull-request-row')
 export class GkPullRequestRow extends LitElement {
 	static override styles = [
+		themeProperties,
 		elementBase,
+		dateAgeStyles,
 		css`
 			:host {
-				--gk-avatar-background-color: var(--background-10);
-				--color-background: var(--vscode-editor-background);
 				display: block;
 			}
 
@@ -66,6 +69,10 @@ export class GkPullRequestRow extends LitElement {
 		return assignees;
 	}
 
+	get dateStyle() {
+		return `indicator-${fromDateRange(this.lastUpdatedDate).status}`;
+	}
+
 	override render() {
 		if (!this.pullRequest) return undefined;
 
@@ -87,7 +94,7 @@ export class GkPullRequestRow extends LitElement {
 							<span slot="prefix"><code-icon icon="source-control"></code-icon></span>
 							${this.pullRequest.refs?.base.branch}
 						</gk-tag>
-						<gk-tag>
+						<gk-tag variant="ghost">
 							<span slot="prefix"><code-icon icon="repo"></code-icon></span>
 							${this.pullRequest.refs?.base.repo}
 						</gk-tag>
@@ -100,7 +107,11 @@ export class GkPullRequestRow extends LitElement {
 						<gk-avatar-group>
 							${when(
 								this.pullRequest.author != null,
-								() => html`<gk-avatar src="${this.pullRequest!.author.avatarUrl}"></gk-avatar>`,
+								() =>
+									html`<gk-avatar
+										src="${this.pullRequest!.author.avatarUrl}"
+										title="${this.pullRequest!.author.name} (author)"
+									></gk-avatar>`,
 							)}
 							${when(
 								this.assignees.length > 0,
@@ -108,16 +119,20 @@ export class GkPullRequestRow extends LitElement {
 									${repeat(
 										this.assignees,
 										item => item.url,
-										(item, index) => html`<gk-avatar src="${item.avatarUrl}"></gk-avatar>`,
+										(item, index) =>
+											html`<gk-avatar
+												src="${item.avatarUrl}"
+												title="${item.name ? `${item.name} ` : ''}(assignee)"
+											></gk-avatar>`,
 									)}
 								`,
 							)}
 						</gk-avatar-group>
 					</span>
 					<span slot="date">
-						<gk-date-from date="${this.lastUpdatedDate}"></gk-date-from>
+						<gk-date-from class="${this.dateStyle}" date="${this.lastUpdatedDate}"></gk-date-from>
 					</span>
-					<nav slot="actions"><gkc-button variant="ghost">Checkout branch</gkc-button></nav>
+					<nav slot="actions"><gk-button variant="ghost">Checkout branch</gk-button></nav>
 				</gk-focus-item>
 			</gk-focus-row>
 		`;

src/webviews/apps/plus/focus/components/gk-theme.css.ts

@@ -0,0 +1,24 @@
+import { css } from 'lit';
+
+export const themeProperties = css`
+	:host {
+		--gk-additions-color: var(--vscode-gitDecoration-addedResourceForeground);
+		--gk-deletions-color: var(--vscode-gitDecoration-deletedResourceForeground);
+
+		--gk-avatar-background-color: var(--background-10);
+		--gk-tag-background-color: var(--background-10);
+		--gk-text-secondary-color: var(--color-foreground--85);
+
+		--gk-menu-border-color: var(--background-30);
+		--gk-menu-background-color: var(--background-10);
+		--gk-menu-item-background-color-hover: var(--background-15);
+		--gk-menu-item-font-color-disabled: var(--color-foreground--50);
+
+		--gk-button-ghost-color: var(--color-foreground);
+		--gk-button-ghost-color-active: var(--color-foreground--85);
+		--gk-button-ghost-color-disabled: var(--color-foreground--50);
+		--gk-button-outline-color: var(--color-foreground);
+		--gk-button-outline-color-active: var(--background-10);
+		--gk-button-outline-color-disabled: var(--color-foreground--50);
+	}
+`;

src/webviews/apps/plus/focus/focus.scss

@@ -22,8 +22,6 @@ body {
 	--table-text: var(--color-foreground--65);
 	--table-pinned-background: var(--color-background);
 	--layout-gutter-outer: 20px;
-
-	--gk-color-primary: var(--vscode-errorForeground);
 }
 
 .vscode-high-contrast,
@@ -305,7 +303,8 @@ gk-focus-view::part(base) {
 	}
 	&__section {
 		min-height: 15rem;
-		flex: 0 1 50%;
+		// flex: 0 1 50%;
+		flex: 1 1 auto;
 	}
 }
 

src/webviews/apps/plus/focus/focus.ts

@@ -14,9 +14,9 @@ import type { FeatureGateBadge } from '../../shared/components/feature-gate-badg
 import { DOM } from '../../shared/dom';
 import type { GkIssueRow } from './components/gk-issue-row';
 import type { GkPullRequestRow } from './components/gk-pull-request-row';
-import type { IssueRow } from './components/issue-row';
-import type { PullRequestRow } from './components/pull-request-row';
-import '../../shared/components/button';
+// import type { IssueRow } from './components/issue-row';
+// import type { PullRequestRow } from './components/pull-request-row';
+// import '../../shared/components/button';
 import '../../shared/components/code-icon';
 import '../../shared/components/feature-gate';
 import '../../shared/components/avatars/avatar-item';
@@ -25,8 +25,8 @@ import '../../shared/components/table/table-container';
 import '../../shared/components/table/table-row';
 import '../../shared/components/table/table-cell';
 import '../../shared/components/feature-gate-badge';
-import './components/issue-row';
-import './components/pull-request-row';
+// import './components/issue-row';
+// import './components/pull-request-row';
 import './components/gk-pull-request-row';
 import './components/gk-issue-row';
 import './focus.scss';
@@ -49,30 +49,30 @@ export class FocusApp extends App {
 		const disposables = super.onBind?.() ?? [];
 
 		disposables.push(
-			DOM.on('#pr-filter [data-tab]', 'click', e =>
-				this.onSelectTab(e, val => {
-					this._prFilter = val;
-					this.renderPullRequests();
-				}),
-			),
-			DOM.on('#issue-filter [data-tab]', 'click', e =>
-				this.onSelectTab(e, val => {
-					this._issueFilter = val;
-					this.renderIssues();
-				}),
-			),
-			DOM.on('#focus-filter [data-tab]', 'click', e =>
+			// DOM.on('#pr-filter [data-tab]', 'click', e =>
+			// 	this.onSelectTab(e, val => {
+			// 		this._prFilter = val;
+			// 		this.renderPullRequests();
+			// 	}),
+			// ),
+			// DOM.on('#issue-filter [data-tab]', 'click', e =>
+			// 	this.onSelectTab(e, val => {
+			// 		this._issueFilter = val;
+			// 		this.renderIssues();
+			// 	}),
+			// ),
+			DOM.on('#filter-focus-items [data-tab]', 'click', e =>
 				this.onSelectTab(e, val => {
 					this._focusFilter = val;
-					this.renderIssues();
+					this.renderFocusList();
 				}),
 			),
-			DOM.on<PullRequestRow, PullRequestShape>('pull-request-row', 'open-worktree', (e, target: HTMLElement) =>
-				this.onOpenWorktree(e, target),
-			),
-			DOM.on<PullRequestRow, PullRequestShape>('pull-request-row', 'switch-branch', (e, target: HTMLElement) =>
-				this.onSwitchBranch(e, target),
-			),
+			// DOM.on<PullRequestRow, PullRequestShape>('pull-request-row', 'open-worktree', (e, target: HTMLElement) =>
+			// 	this.onOpenWorktree(e, target),
+			// ),
+			// DOM.on<PullRequestRow, PullRequestShape>('pull-request-row', 'switch-branch', (e, target: HTMLElement) =>
+			// 	this.onSwitchBranch(e, target),
+			// ),
 		);
 
 		return disposables;
@@ -174,89 +174,89 @@ export class FocusApp extends App {
 		}
 	}
 
-	renderPullRequests() {
-		const tableEl = document.getElementById('pull-requests');
-		if (tableEl == null) return;
-		const tableEl2 = document.getElementById('share-pull-requests')!;
-
-		const rowEls = tableEl.querySelectorAll('pull-request-row');
-		rowEls.forEach(el => el.remove());
-
-		const noneEl = document.getElementById('no-pull-requests')!;
-		const loadingEl = document.getElementById('loading-pull-requests')!;
-		if (this.state.pullRequests == null || this.state.access.allowed !== true) {
-			noneEl.setAttribute('hidden', 'true');
-			loadingEl.removeAttribute('hidden');
-		} else if (this.state.pullRequests.length === 0) {
-			noneEl.removeAttribute('hidden');
-			loadingEl.setAttribute('hidden', 'true');
-		} else {
-			noneEl.setAttribute('hidden', 'true');
-			loadingEl.setAttribute('hidden', 'true');
-			tableEl2.innerHTML = '';
-			this.state.pullRequests.forEach(
-				({ pullRequest, reasons, isCurrentBranch, isCurrentWorktree, hasWorktree, hasLocalBranch }, i) => {
-					if (this._prFilter == null || this._prFilter === '' || reasons.includes(this._prFilter)) {
-						const rowEl = document.createElement('pull-request-row') as PullRequestRow;
-						rowEl.pullRequest = pullRequest;
-						rowEl.reasons = reasons;
-						rowEl.isCurrentBranch = isCurrentBranch;
-						rowEl.isCurrentWorktree = isCurrentWorktree;
-						rowEl.hasWorktree = hasWorktree;
-						rowEl.hasLocalBranch = hasLocalBranch;
-
-						tableEl.append(rowEl);
-
-						const rowEl2 = document.createElement('gk-pull-request-row') as GkPullRequestRow;
-						rowEl2.pullRequest = pullRequest;
-						rowEl2.rank = i + 1;
-						// rowEl2.reasons = reasons;
-						rowEl2.isCurrentBranch = isCurrentBranch;
-						rowEl2.isCurrentWorktree = isCurrentWorktree;
-						rowEl2.hasWorktree = hasWorktree;
-						rowEl2.hasLocalBranch = hasLocalBranch;
-
-						tableEl2.append(rowEl2);
-					}
-				},
-			);
-		}
-	}
-
-	renderIssues() {
-		const tableEl = document.getElementById('issues')!;
-
-		const rowEls = tableEl.querySelectorAll('issue-row');
-		rowEls.forEach(el => el.remove());
-		const tableEl2 = document.getElementById('share-pull-requests')!;
-
-		const noneEl = document.getElementById('no-issues')!;
-		const loadingEl = document.getElementById('loading-issues')!;
-		if (this.state.issues == null || this.state.access.allowed !== true) {
-			noneEl.setAttribute('hidden', 'true');
-			loadingEl.removeAttribute('hidden');
-		} else if (this.state.issues.length === 0) {
-			noneEl.removeAttribute('hidden');
-			loadingEl.setAttribute('hidden', 'true');
-		} else {
-			noneEl.setAttribute('hidden', 'true');
-			loadingEl.setAttribute('hidden', 'true');
-			this.state.issues.forEach(({ issue, reasons }) => {
-				if (this._issueFilter == null || this._issueFilter === '' || reasons.includes(this._issueFilter)) {
-					const rowEl = document.createElement('issue-row') as IssueRow;
-					rowEl.issue = issue;
-					rowEl.reasons = reasons;
-
-					tableEl.append(rowEl);
-
-					const rowEl2 = document.createElement('gk-issue-row') as GkIssueRow;
-					rowEl2.issue = issue;
-
-					tableEl2.append(rowEl2);
-				}
-			});
-		}
-	}
+	// renderPullRequests() {
+	// 	const tableEl = document.getElementById('pull-requests');
+	// 	if (tableEl == null) return;
+	// 	const tableEl2 = document.getElementById('share-pull-requests')!;
+
+	// 	const rowEls = tableEl.querySelectorAll('pull-request-row');
+	// 	rowEls.forEach(el => el.remove());
+
+	// 	const noneEl = document.getElementById('no-pull-requests')!;
+	// 	const loadingEl = document.getElementById('loading-pull-requests')!;
+	// 	if (this.state.pullRequests == null || this.state.access.allowed !== true) {
+	// 		noneEl.setAttribute('hidden', 'true');
+	// 		loadingEl.removeAttribute('hidden');
+	// 	} else if (this.state.pullRequests.length === 0) {
+	// 		noneEl.removeAttribute('hidden');
+	// 		loadingEl.setAttribute('hidden', 'true');
+	// 	} else {
+	// 		noneEl.setAttribute('hidden', 'true');
+	// 		loadingEl.setAttribute('hidden', 'true');
+	// 		tableEl2.innerHTML = '';
+	// 		this.state.pullRequests.forEach(
+	// 			({ pullRequest, reasons, isCurrentBranch, isCurrentWorktree, hasWorktree, hasLocalBranch }, i) => {
+	// 				if (this._prFilter == null || this._prFilter === '' || reasons.includes(this._prFilter)) {
+	// 					const rowEl = document.createElement('pull-request-row') as PullRequestRow;
+	// 					rowEl.pullRequest = pullRequest;
+	// 					rowEl.reasons = reasons;
+	// 					rowEl.isCurrentBranch = isCurrentBranch;
+	// 					rowEl.isCurrentWorktree = isCurrentWorktree;
+	// 					rowEl.hasWorktree = hasWorktree;
+	// 					rowEl.hasLocalBranch = hasLocalBranch;
+
+	// 					tableEl.append(rowEl);
+
+	// 					const rowEl2 = document.createElement('gk-pull-request-row') as GkPullRequestRow;
+	// 					rowEl2.pullRequest = pullRequest;
+	// 					rowEl2.rank = i + 1;
+	// 					// rowEl2.reasons = reasons;
+	// 					rowEl2.isCurrentBranch = isCurrentBranch;
+	// 					rowEl2.isCurrentWorktree = isCurrentWorktree;
+	// 					rowEl2.hasWorktree = hasWorktree;
+	// 					rowEl2.hasLocalBranch = hasLocalBranch;
+
+	// 					tableEl2.append(rowEl2);
+	// 				}
+	// 			},
+	// 		);
+	// 	}
+	// }
+
+	// renderIssues() {
+	// 	const tableEl = document.getElementById('issues')!;
+
+	// 	const rowEls = tableEl.querySelectorAll('issue-row');
+	// 	rowEls.forEach(el => el.remove());
+	// 	const tableEl2 = document.getElementById('share-pull-requests')!;
+
+	// 	const noneEl = document.getElementById('no-issues')!;
+	// 	const loadingEl = document.getElementById('loading-issues')!;
+	// 	if (this.state.issues == null || this.state.access.allowed !== true) {
+	// 		noneEl.setAttribute('hidden', 'true');
+	// 		loadingEl.removeAttribute('hidden');
+	// 	} else if (this.state.issues.length === 0) {
+	// 		noneEl.removeAttribute('hidden');
+	// 		loadingEl.setAttribute('hidden', 'true');
+	// 	} else {
+	// 		noneEl.setAttribute('hidden', 'true');
+	// 		loadingEl.setAttribute('hidden', 'true');
+	// 		this.state.issues.forEach(({ issue, reasons }) => {
+	// 			if (this._issueFilter == null || this._issueFilter === '' || reasons.includes(this._issueFilter)) {
+	// 				const rowEl = document.createElement('issue-row') as IssueRow;
+	// 				rowEl.issue = issue;
+	// 				rowEl.reasons = reasons;
+
+	// 				tableEl.append(rowEl);
+
+	// 				const rowEl2 = document.createElement('gk-issue-row') as GkIssueRow;
+	// 				rowEl2.issue = issue;
+
+	// 				tableEl2.append(rowEl2);
+	// 			}
+	// 		});
+	// 	}
+	// }
 
 	onSelectTab(e: Event, callback?: (val?: string) => void) {
 		const thisEl = e.target as HTMLElement;

src/webviews/apps/plus/shared/components/feature-gate-plus-state.ts

@@ -1,7 +1,8 @@
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { SubscriptionState } from '../../../../../subscription';
-import '../../../shared/components/button';
+// FIXME@d13 - conflict with gk-button from shared library
+// import '../../../shared/components/button';
 import { linkStyles } from './vscode.css';
 
 @customElement('gk-feature-gate-plus-state')