Updates pin snooze action styles

src/webviews/apps/plus/focus/components/common.css.ts

@@ -0,0 +1,123 @@
+import { css } from 'lit';
+
+export const rowBaseStyles = css`
+	:host {
+		display: block;
+	}
+
+	p {
+		margin: 0;
+	}
+
+	a {
+		color: var(--vscode-textLink-foreground);
+		text-decoration: none;
+	}
+	a:hover {
+		text-decoration: underline;
+	}
+	a:focus {
+		outline: 1px solid var(--vscode-focusBorder);
+		outline-offset: -1px;
+	}
+
+	.actions gk-tooltip {
+		display: inline-block;
+	}
+
+	.actions a {
+		box-sizing: border-box;
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		width: 3.2rem;
+		height: 3.2rem;
+		border-radius: 0.5rem;
+		color: inherit;
+		padding: 0.2rem;
+		vertical-align: text-bottom;
+		text-decoration: none;
+		cursor: pointer;
+	}
+	.actions a:hover {
+		background-color: var(--vscode-toolbar-hoverBackground);
+	}
+	.actions a:active {
+		background-color: var(--vscode-toolbar-activeBackground);
+	}
+	.actions a[tabindex='-1'] {
+		opacity: 0.5;
+		cursor: default;
+	}
+
+	.actions a code-icon {
+		font-size: 1.6rem;
+	}
+
+	.indicator-info {
+		color: var(--vscode-problemsInfoIcon-foreground);
+	}
+	.indicator-warning {
+		color: var(--vscode-problemsWarningIcon-foreground);
+	}
+	.indicator-error {
+		color: var(--vscode-problemsErrorIcon-foreground);
+	}
+	.indicator-neutral {
+		color: var(--color-alert-neutralBorder);
+	}
+
+	.row-type {
+		--gk-badge-outline-padding: 0.3rem 0.8rem;
+		--gk-badge-font-size: 1.1rem;
+		opacity: 0.4;
+		vertical-align: middle;
+	}
+
+	.title {
+		font-size: 1.4rem;
+	}
+
+	.add-delete {
+		margin-left: 0.4rem;
+		margin-right: 0.2rem;
+	}
+
+	.key {
+		z-index: 1;
+		position: relative;
+	}
+
+	.date {
+		display: inline-block;
+		min-width: 1.6rem;
+	}
+
+	.icon {
+		box-sizing: border-box;
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		width: 2.4rem;
+		height: 2.4rem;
+	}
+
+	.pin {
+		color: inherit;
+		text-decoration: none;
+		cursor: pointer;
+		opacity: 0.4;
+	}
+	.pin:hover {
+		opacity: 0.64;
+		text-decoration: none;
+	}
+
+	gk-focus-row:not(:hover):not(:focus-within) .pin:not(.is-active) {
+		opacity: 0;
+	}
+
+	.pin.is-active {
+		opacity: 1;
+	}
+`;

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

@@ -15,98 +15,14 @@ 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 { repoBranchStyles } from './branch-tag.css';
+import { rowBaseStyles } from './common.css';
 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,
-		repoBranchStyles,
-		css`
-			:host {
-				display: block;
-			}
-
-			p {
-				margin: 0;
-			}
-
-			a {
-				color: var(--vscode-textLink-foreground);
-				text-decoration: none;
-			}
-			a:hover {
-				text-decoration: underline;
-			}
-			a:focus {
-				outline: 1px solid var(--vscode-focusBorder);
-				outline-offset: -1px;
-			}
-
-			.actions {
-			}
-
-			.actions a {
-				box-sizing: border-box;
-				display: inline-flex;
-				justify-content: center;
-				align-items: center;
-				width: 3.2rem;
-				height: 3.2rem;
-				border-radius: 0.5rem;
-				color: inherit;
-				padding: 0.2rem;
-				vertical-align: text-bottom;
-				text-decoration: none;
-				cursor: pointer;
-			}
-			.actions a:hover {
-				background-color: var(--vscode-toolbar-hoverBackground);
-			}
-			.actions a:active {
-				background-color: var(--vscode-toolbar-activeBackground);
-			}
-
-			.actions a code-icon {
-				font-size: 1.6rem;
-			}
-
-			.row-type {
-				--gk-badge-outline-padding: 0.3rem 0.8rem;
-				--gk-badge-font-size: 1.1rem;
-				opacity: 0.5;
-				vertical-align: middle;
-			}
-
-			.title {
-				font-size: 1.4rem;
-			}
-
-			.date {
-				display: inline-block;
-				min-width: 1.6rem;
-			}
-
-			.pin {
-				opacity: 0.4;
-			}
-			.pin:hover {
-				opacity: 0.64;
-			}
-
-			gk-focus-row:not(:hover):not(:focus-within) .pin:not(.is-active) {
-				opacity: 0;
-			}
-
-			.pin.is-active {
-				opacity: 1;
-			}
-		`,
-	];
+	static override styles = [themeProperties, elementBase, dateAgeStyles, repoBranchStyles, rowBaseStyles, css``];
 
 	@property({ type: Number })
 	public rank?: number;
@@ -155,24 +71,29 @@ export class GkIssueRow extends LitElement {
 			<gk-focus-row>
 				<span slot="pin">
 					<gk-tooltip>
-						<code-icon
-							class="pin ${this.pinned ? ' is-active' : ''}"
+						<a
+							href="#"
+							class="icon pin ${this.pinned ? ' is-active' : ''}"
 							slot="trigger"
-							icon="pinned"
 							@click="${this.onPinClick}"
-						></code-icon>
+							><code-icon icon="pinned"></code-icon
+						></a>
 						<span>Pin</span>
 					</gk-tooltip>
 					<gk-tooltip>
-						<code-icon
-							class="pin ${this.snoozed ? ' is-active' : ''}"
+						<a
+							href="#"
+							class="icon pin ${this.snoozed ? ' is-active' : ''}"
 							slot="trigger"
-							icon="bell-slash"
 							@click="${this.onSnoozeClick}"
-						></code-icon>
+							><code-icon icon="${this.snoozed ? 'bell' : 'bell-slash'}"></code-icon
+						></a>
 						<span>Mark for Later</span>
 					</gk-tooltip>
 				</span>
+				<span slot="date">
+					<gk-date-from class="date ${this.dateStyle}" date="${this.lastUpdatedDate}"></gk-date-from>
+				</span>
 				<span slot="key"></span>
 				<gk-focus-item>
 					<p>
@@ -221,9 +142,6 @@ export class GkIssueRow extends LitElement {
 							)}
 						</gk-avatar-group>
 					</span>
-					<span slot="date">
-						<gk-date-from class="date ${this.dateStyle}" date="${this.lastUpdatedDate}"></gk-date-from>
-					</span>
 					<div slot="repo">
 						<gk-tag variant="ghost" full>
 							<span slot="prefix"><code-icon icon="repo"></code-icon></span>
@@ -241,7 +159,8 @@ export class GkIssueRow extends LitElement {
 		`;
 	}
 
-	onSnoozeClick(_e: Event) {
+	onSnoozeClick(e: Event) {
+		e.preventDefault();
 		this.dispatchEvent(
 			new CustomEvent('snooze-item', {
 				detail: { item: this.issue!, snooze: this.snoozed },
@@ -249,7 +168,8 @@ export class GkIssueRow extends LitElement {
 		);
 	}
 
-	onPinClick(_e: Event) {
+	onPinClick(e: Event) {
+		e.preventDefault();
 		this.dispatchEvent(
 			new CustomEvent('pin-item', {
 				detail: { item: this.issue!, pin: this.pinned },

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

@@ -16,126 +16,14 @@ 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 { repoBranchStyles } from './branch-tag.css';
+import { rowBaseStyles } from './common.css';
 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,
-		repoBranchStyles,
-		css`
-			:host {
-				display: block;
-			}
-
-			p {
-				margin: 0;
-			}
-
-			a {
-				color: var(--vscode-textLink-foreground);
-				text-decoration: none;
-			}
-			a:hover {
-				text-decoration: underline;
-			}
-			a:focus {
-				outline: 1px solid var(--vscode-focusBorder);
-				outline-offset: -1px;
-			}
-
-			.actions gk-tooltip {
-				display: inline-block;
-			}
-
-			.actions a {
-				box-sizing: border-box;
-				display: inline-flex;
-				justify-content: center;
-				align-items: center;
-				width: 3.2rem;
-				height: 3.2rem;
-				border-radius: 0.5rem;
-				color: inherit;
-				padding: 0.2rem;
-				vertical-align: text-bottom;
-				text-decoration: none;
-				cursor: pointer;
-			}
-			.actions a:hover {
-				background-color: var(--vscode-toolbar-hoverBackground);
-			}
-			.actions a:active {
-				background-color: var(--vscode-toolbar-activeBackground);
-			}
-			.actions a[tabindex='-1'] {
-				opacity: 0.5;
-				cursor: default;
-			}
-
-			.actions a code-icon {
-				font-size: 1.6rem;
-			}
-
-			.indicator-info {
-				color: var(--vscode-problemsInfoIcon-foreground);
-			}
-			.indicator-warning {
-				color: var(--vscode-problemsWarningIcon-foreground);
-			}
-			.indicator-error {
-				color: var(--vscode-problemsErrorIcon-foreground);
-			}
-			.indicator-neutral {
-				color: var(--color-alert-neutralBorder);
-			}
-
-			.row-type {
-				--gk-badge-outline-padding: 0.3rem 0.8rem;
-				--gk-badge-font-size: 1.1rem;
-				opacity: 0.4;
-				vertical-align: middle;
-			}
-
-			.title {
-				font-size: 1.4rem;
-			}
-
-			.add-delete {
-				margin-left: 0.4rem;
-				margin-right: 0.2rem;
-			}
-
-			.key {
-				z-index: 1;
-				position: relative;
-			}
-
-			.date {
-				display: inline-block;
-				min-width: 1.6rem;
-			}
-
-			.pin {
-				opacity: 0.4;
-			}
-			.pin:hover {
-				opacity: 0.64;
-			}
-
-			gk-focus-row:not(:hover):not(:focus-within) .pin:not(.is-active) {
-				opacity: 0;
-			}
-
-			.pin.is-active {
-				opacity: 1;
-			}
-		`,
-	];
+	static override styles = [themeProperties, elementBase, dateAgeStyles, repoBranchStyles, rowBaseStyles, css``];
 
 	@property({ type: Number })
 	public rank?: number;
@@ -219,30 +107,37 @@ export class GkPullRequestRow extends LitElement {
 			<gk-focus-row>
 				<span slot="pin">
 					<gk-tooltip>
-						<code-icon
-							class="pin ${this.pinned ? ' is-active' : ''}"
+						<a
+							href="#"
+							class="icon pin ${this.pinned ? ' is-active' : ''}"
 							slot="trigger"
-							icon="pinned"
 							@click="${this.onPinClick}"
-						></code-icon>
+							><code-icon icon="pinned"></code-icon
+						></a>
 						<span>${this.pinned ? 'Unpinned' : 'Pin'}</span>
 					</gk-tooltip>
 					<gk-tooltip>
-						<code-icon
-							class="pin ${this.snoozed ? ' is-active' : ''}"
+						<a
+							href="#"
+							class="icon pin ${this.snoozed ? ' is-active' : ''}"
 							slot="trigger"
-							icon="${this.snoozed ? 'bell' : 'bell-slash'}"
 							@click="${this.onSnoozeClick}"
-						></code-icon>
+							><code-icon icon="${this.snoozed ? 'bell' : 'bell-slash'}"></code-icon
+						></a>
 						<span>${this.snoozed ? 'Watch' : 'Mark for Later'}</span>
 					</gk-tooltip>
 				</span>
+				<span slot="date">
+					<gk-date-from class="date ${this.dateStyle}" date="${this.lastUpdatedDate}"></gk-date-from>
+				</span>
 				<span slot="key" class="key">
 					${when(
 						this.indicator === 'changes',
 						() =>
 							html`<gk-tooltip>
-								<code-icon slot="trigger" class="indicator-error" icon="request-changes"></code-icon>
+								<span class="icon" slot="trigger"
+									><code-icon class="indicator-error" icon="request-changes"></code-icon
+								></span>
 								<span>changes requested</span>
 							</gk-tooltip>`,
 					)}
@@ -250,7 +145,9 @@ export class GkPullRequestRow extends LitElement {
 						this.indicator === 'ready',
 						() =>
 							html`<gk-tooltip>
-								<code-icon slot="trigger" class="indicator-info" icon="pass"></code-icon>
+								<span class="icon" slot="trigger"
+									><code-icon class="indicator-info" icon="pass"></code-icon
+								></span>
 								<span>approved and ready to merge</span>
 							</gk-tooltip>`,
 					)}
@@ -258,7 +155,9 @@ export class GkPullRequestRow extends LitElement {
 						this.indicator === 'conflicting',
 						() =>
 							html`<gk-tooltip>
-								<code-icon slot="trigger" class="indicator-error" icon="bracket-error"></code-icon>
+								<span class="icon" slot="trigger"
+									><code-icon class="indicator-error" icon="bracket-error"></code-icon
+								></span>
 								<span>cannot be merged due to merge conflicts</span>
 							</gk-tooltip>`,
 					)}
@@ -312,9 +211,6 @@ export class GkPullRequestRow extends LitElement {
 							)}
 						</gk-avatar-group>
 					</span>
-					<span slot="date">
-						<gk-date-from class="date ${this.dateStyle}" date="${this.lastUpdatedDate}"></gk-date-from>
-					</span>
 					<div slot="repo" class="repo-branch">
 						<gk-tag class="repo-branch__tag" full @click=${this.onOpenBranchClick}>
 							<span slot="prefix"><code-icon icon="source-control"></code-icon></span>
@@ -389,7 +285,8 @@ export class GkPullRequestRow extends LitElement {
 		this.dispatchEvent(new CustomEvent('switch-branch', { detail: this.pullRequest! }));
 	}
 
-	onSnoozeClick(_e: Event) {
+	onSnoozeClick(e: Event) {
+		e.preventDefault();
 		this.dispatchEvent(
 			new CustomEvent('snooze-item', {
 				detail: { item: this.pullRequest!, snooze: this.snoozed },
@@ -397,7 +294,8 @@ export class GkPullRequestRow extends LitElement {
 		);
 	}
 
-	onPinClick(_e: Event) {
+	onPinClick(e: Event) {
+		e.preventDefault();
 		this.dispatchEvent(
 			new CustomEvent('pin-item', {
 				detail: { item: this.pullRequest!, pin: this.pinned },

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

@@ -39,6 +39,7 @@ body {
 	--gk-tooltip-padding: 0.4rem 0.8rem;
 	--gk-focus-background-color-hover: var(--background-05);
 	--gk-divider-color: var(--background-05);
+	--gk-focus-row-pin-min-width: 52px;
 }
 
 .vscode-high-contrast,