Removes unneeded markup and styles

src/webviews/apps/plus/focus/components/focus-app.ts

@@ -7,6 +7,11 @@ import type { State } from '../../../../../plus/webviews/focus/protocol';
 import { debounce } from '../../../../../system/function';
 import type { FeatureGate } from '../../../shared/components/feature-gate';
 import type { FeatureGateBadge } from '../../../shared/components/feature-gate-badge';
+import '../../../shared/components/code-icon';
+import '../../../shared/components/feature-gate';
+import '../../../shared/components/feature-gate-badge';
+import './gk-pull-request-row';
+import './gk-issue-row';
 
 @customElement('gl-focus-app')
 export class GlFocusApp extends LitElement {
@@ -126,27 +131,36 @@ export class GlFocusApp extends LitElement {
 		return this.state?.pullRequests == null || this.state?.issues == null;
 	}
 
+	loadingContent() {
+		return html`
+			<div class="alert">
+				<span class="alert__content"><code-icon modifier="spin" icon="loading"></code-icon> Loading</span>
+			</div>
+		`;
+	}
+
 	override render() {
 		if (this.state == null) {
-			return undefined;
+			return this.loadingContent();
 		}
 
 		return html`
 			<div class="app">
-				<header class="app__header">
-					<span class="badge">Preview</span>
+				<div class="app__toolbar">
+					<span class="preview">Preview</span>
 					<gk-feature-gate-badge
 						.subscription=${this.subscriptionState}
 						id="subscription-gate-badge"
 					></gk-feature-gate-badge>
 					<gk-button
+						class="feedback"
 						appearance="toolbar"
 						href="https://github.com/gitkraken/vscode-gitlens/discussions/2535"
 						title="Focus View Feedback"
 						aria-label="Focus View Feedback"
 						><code-icon icon="feedback"></code-icon
 					></gk-button>
-				</header>
+				</div>
 
 				<div class="app__content">
 					<gk-feature-gate
@@ -172,90 +186,79 @@ export class GlFocusApp extends LitElement {
 						>
 					</gk-feature-gate>
 
-					<main class="app__main">
-						<section class="focus-section app__section">
-							<header class="focus-section__header">
-								<div class="focus-section__header-group">
-									<nav class="tab-filter" id="filter-focus-items">
-										${map(
-											this.tabFilterOptions,
-											({ label, value }, i) => html`
-												<button
-													class="tab-filter__tab ${(
-														this.selectedTabFilter
-															? value === this.selectedTabFilter
-															: i === 0
-													)
-														? 'is-active'
-														: ''}"
-													type="button"
-													data-tab="${value}"
-													@click=${() => (this.selectedTabFilter = value)}
-												>
-													${label}
-												</button>
-											`,
-										)}
-									</nav>
-								</div>
-								<div class="focus-section__header-group">
-									<gk-input
-										class="search"
-										label="Search field"
-										label-visibility="sr-only"
-										placeholder="Search"
-										@input=${debounce(this.onSearchInput.bind(this), 200)}
-									>
-										<code-icon slot="prefix" icon="search"></code-icon>
-									</gk-input>
-								</div>
-							</header>
-							<div class="focus-section__content">
-								<gk-focus-container id="list-focus-items">
-									${when(
-										this.isLoading,
-										() => html`
-											<div class="alert">
-												<span class="alert__content"
-													><code-icon modifier="spin" icon="loading"></code-icon>
-													Loading</span
-												>
-											</div>
+					<div class="app__focus">
+						<header class="app__header">
+							<div class="app__header-group">
+								<nav class="tab-filter" id="filter-focus-items">
+									${map(
+										this.tabFilterOptions,
+										({ label, value }, i) => html`
+											<button
+												class="tab-filter__tab ${(
+													this.selectedTabFilter ? value === this.selectedTabFilter : i === 0
+												)
+													? 'is-active'
+													: ''}"
+												type="button"
+												data-tab="${value}"
+												@click=${() => (this.selectedTabFilter = value)}
+											>
+												${label}
+											</button>
 										`,
-										() =>
-											when(
-												this.filteredItems.length > 0,
-												() => html`
-													${repeat(
-														this.filteredItems,
-														item => item.rank,
-														({ isPullrequest, rank, state }) =>
-															when(
-																isPullrequest,
-																() =>
-																	html`<gk-pull-request-row
-																		.rank=${rank}
-																		.pullRequest=${state.pullRequest}
-																	></gk-pull-request-row>`,
-																() =>
-																	html`<gk-issue-row
-																		.rank=${rank}
-																		.issue=${state.issue}
-																	></gk-issue-row>`,
-															),
-													)}
-												`,
-												() => html`
-													<div class="alert">
-														<span class="alert__content">None found</span>
-													</div>
-												`,
-											),
 									)}
-								</gk-focus-container>
+								</nav>
+							</div>
+							<div class="app__header-group">
+								<gk-input
+									class="app__search"
+									label="Search field"
+									label-visibility="sr-only"
+									placeholder="Search"
+									@input=${debounce(this.onSearchInput.bind(this), 200)}
+								>
+									<code-icon slot="prefix" icon="search"></code-icon>
+								</gk-input>
 							</div>
-						</section>
-					</main>
+						</header>
+						<main class="app__main">
+							<gk-focus-container id="list-focus-items">
+								${when(
+									this.isLoading,
+									() => this.loadingContent(),
+									() =>
+										when(
+											this.filteredItems.length > 0,
+											() => html`
+												${repeat(
+													this.filteredItems,
+													item => item.rank,
+													({ isPullrequest, rank, state }) =>
+														when(
+															isPullrequest,
+															() =>
+																html`<gk-pull-request-row
+																	.rank=${rank}
+																	.pullRequest=${state.pullRequest}
+																></gk-pull-request-row>`,
+															() =>
+																html`<gk-issue-row
+																	.rank=${rank}
+																	.issue=${state.issue}
+																></gk-issue-row>`,
+														),
+												)}
+											`,
+											() => html`
+												<div class="alert">
+													<span class="alert__content">None found</span>
+												</div>
+											`,
+										),
+								)}
+							</gk-focus-container>
+						</main>
+					</div>
 				</div>
 			</div>
 		`;

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

@@ -125,43 +125,6 @@ h3 {
 	margin-bottom: 0;
 }
 
-.tag {
-	display: inline-block;
-	padding: 0.1rem 0.2rem;
-	background-color: var(--color-background--lighten-05);
-	color: var(--color-foreground--85);
-
-	code-icon {
-		margin-right: 0.2rem;
-	}
-}
-
-.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);
-}
-
 .alert {
 	display: flex;
 	flex-direction: row;
@@ -207,89 +170,12 @@ h3 {
 	}
 }
 
-.focus-icon {
-	font-size: 1.6rem;
-	vertical-align: sub;
-}
-
-.focus-section {
-	display: flex;
-	flex-direction: column;
-	gap: 1.2rem;
-
-	&__header {
-		flex: none;
-		display: flex;
-		flex-direction: column;
-		gap: 1.6rem;
-		padding-top: 1.2rem;
-
-		h2 {
-			margin: 0;
-			font-size: 1.5rem;
-		}
-
-		&-group {
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-			justify-content: space-between;
-			gap: 0.4rem;
-		}
-	}
-
-	&__content {
-		min-height: 0;
-		flex: 1 1 auto;
-		overflow: auto;
-	}
-}
-
-.search {
-	flex: 1;
-
-	code-icon {
-		margin-right: 0.8rem;
-	}
-}
-
-.feedback-button {
-	position: relative;
-	appearance: none;
-	font-family: inherit;
-	font-size: 1.2rem;
-	line-height: 2.2rem;
-	background-color: transparent;
-	border: none;
-	color: inherit;
-	padding: 0 0.75rem;
-	cursor: pointer;
-	border-radius: 0.3rem;
-	height: auto;
-
-	&:hover {
-		background-color: var(--background-10);
-		color: var(--color-foreground);
-		text-decoration: none;
-	}
-
-	code-icon {
-		font-size: 1.6rem;
-		vertical-align: middle;
-	}
-}
-
-gk-focus-view::part(base) {
-	font-size: 1.5rem;
-	font-weight: bold;
-}
-
 .app {
 	display: flex;
 	flex-direction: column;
 	height: 100vh;
 
-	&__header {
+	&__toolbar {
 		background-color: var(--background-05);
 		display: grid;
 		align-items: center;
@@ -304,193 +190,49 @@ gk-focus-view::part(base) {
 	&__content {
 		position: relative;
 		flex: 1 1 auto;
-		// display: flex;
-		// flex-direction: row;
 		overflow: hidden;
-		gap: 1rem;
-	}
-
-	&__controls {
-		flex: 0 0 20rem;
 	}
 
-	&__main {
-		// flex: 1 1 auto;
+	&__focus {
 		display: flex;
 		flex-direction: column;
 		overflow: hidden;
 		height: 100%;
+		gap: 1.2rem;
 	}
-	&__section {
-		min-height: 15rem;
-		// flex: 0 1 50%;
-		flex: 1 1 auto;
-	}
-}
 
-.tag {
-	display: inline-block;
-	padding: 0.1rem 0.2rem;
-	background-color: var(--background-05);
-	color: var(--color-foreground--85);
-	white-space: nowrap;
-}
-.tag code-icon {
-	margin-right: 0.2rem;
-}
-
-.stat-added {
-	white-space: nowrap;
-	color: var(--vscode-gitDecoration-addedResourceForeground);
-}
-.stat-deleted {
-	white-space: nowrap;
-	color: var(--vscode-gitDecoration-deletedResourceForeground);
-}
-.stat-modified {
-	white-space: nowrap;
-	color: var(--vscode-gitDecoration-modifiedResourceForeground);
-}
-
-.data {
-	&-status {
-		width: 5.8rem;
-	}
-	&-time {
-		width: 4rem;
-	}
-	&-body {
-	}
-	&-author {
-		width: 8.8rem;
-	}
-	&-assigned {
-		width: 8.8rem;
-	}
-	&-comments {
-		width: 4rem;
-	}
-	&-checks {
-		width: 3.2rem;
-	}
-	&-stats {
-		width: 9.2rem;
-	}
-	&-actions {
-	}
-}
-
-.choice {
-	display: inline-flex;
-	flex-direction: row;
-	align-items: center;
-	color: var(--vscode-checkbox-foreground);
-	margin: 0.4rem 0;
-	user-select: none;
-
-	&:focus-within {
-		outline: 1px solid var(--vscode-focusBorder);
-		outline-offset: -1px;
-	}
-
-	&__input {
-		clip: rect(0 0 0 0);
-		clip-path: inset(50%);
-		width: 1px;
-		height: 1px;
-		overflow: hidden;
-		position: absolute;
-		white-space: nowrap;
-	}
-
-	&__indicator {
-		position: relative;
-		box-sizing: border-box;
+	&__header {
+		flex: none;
 		display: flex;
-		justify-content: center;
-		align-items: center;
-		background: var(--vscode-checkbox-background);
-		border: 0.1rem solid var(--vscode-checkbox-border);
-		width: 1.8rem;
-		height: 1.8rem;
-		outline: none;
-		cursor: pointer;
+		flex-direction: column;
+		gap: 1.6rem;
+		padding-top: 1.2rem;
 
-		&,
-		code-icon {
-			border-radius: 0.3rem;
-			overflow: hidden;
+		&-group {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: space-between;
+			gap: 0.4rem;
 		}
 	}
 
-	&__input[type='radio'] + &__indicator {
-		border-radius: 99.9rem;
-	}
-
-	&__input:not(:checked) + &__indicator code-icon {
-		opacity: 0;
-	}
-
-	&__label {
-		font-family: var(--font-family);
-		color: var(--vscode-checkbox-foreground);
-		padding-inline-start: 1rem;
-		margin-inline-end: 1rem;
-		cursor: pointer;
-	}
-}
-
-.overlay {
-	z-index: var(--gitlens-z-modal);
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	font-size: 1.3em;
-	min-height: 100%;
-	padding: 0 2rem 2rem 2rem;
-
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-
-	&__content {
-		max-width: 600px;
-		background: var(--background-05) no-repeat left top;
-		background-image: var(--gl-plus-bg);
-		background-position: left -20rem center;
-		background-size: 100%;
-		border: 1px solid var(--background-15);
-		border-radius: 0.4rem;
-		margin: 1rem;
-		padding: 1.2rem;
-
-		> p:first-child {
-			margin-top: 0;
-		}
+	&__search {
+		flex: 1;
 
-		vscode-button:not([appearance='icon']) {
-			align-self: center !important;
+		code-icon {
+			margin-right: 0.8rem;
 		}
 	}
 
-	&__actions {
-		text-align: center;
-		margin: 3rem 0;
+	&__main {
+		min-height: 0;
+		flex: 1 1 auto;
+		overflow: auto;
 	}
 }
 
-.divider {
-	display: block;
-	height: 0;
-	margin: 0.6rem;
-	border: none;
-	border-top: 0.1rem solid var(--vscode-menu-separatorBackground);
-}
-
-.badge {
+.preview {
 	font-size: 1rem;
 	font-weight: 700;
 	text-transform: uppercase;

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

@@ -1,4 +1,3 @@
-// import { FocusView } from '@gitkraken/shared-web-components';
 import type { PullRequestShape } from '../../../../git/models/pullRequest';
 import type { State } from '../../../../plus/webviews/focus/protocol';
 import {
@@ -9,27 +8,9 @@ import {
 import type { IpcMessage } from '../../../protocol';
 import { onIpc } from '../../../protocol';
 import { App } from '../../shared/appBase';
-import type { FeatureGate } from '../../shared/components/feature-gate';
-import type { FeatureGateBadge } from '../../shared/components/feature-gate-badge';
 import { DOM } from '../../shared/dom';
 import type { GlFocusApp } from './components/focus-app';
-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 '../../shared/components/code-icon';
-import '../../shared/components/feature-gate';
-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 '../../shared/components/feature-gate-badge';
-// import './components/issue-row';
-// import './components/pull-request-row';
-import './components/gk-pull-request-row';
-import './components/gk-issue-row';
 import './components/focus-app';
 import './focus.scss';
 import '@gitkraken/shared-web-components';
@@ -39,10 +20,6 @@ export class FocusApp extends App {
 		super('FocusApp');
 	}
 
-	private _focusFilter?: string;
-	private _prFilter?: string;
-	private _issueFilter?: string;
-
 	override onInitialize() {
 		this.attachState();
 	}
@@ -97,7 +74,6 @@ export class FocusApp extends App {
 				onIpc(DidChangeNotificationType, msg, params => {
 					this.state = params.state;
 					this.setState(this.state);
-					// this.renderContent();
 					this.attachState();
 				});
 				break;
@@ -105,7 +81,4 @@ export class FocusApp extends App {
 	}
 }
 
-// customElements.define(FocusView.tag, FocusView);
-// FocusView.define();
-
 new FocusApp();