From d3921221916cd96a9f0f778a2346e6d814651fea Mon Sep 17 00:00:00 2001
From: Eric Amodio <eamodio@gmail.com>
Date: Wed, 8 Nov 2023 00:20:27 -0500
Subject: [PATCH] Adds companion tools links

---
 src/webviews/apps/home/home.html       | 71 ++++++++++++++++++++++++++++++----
 src/webviews/apps/home/home.scss       | 13 +++++++
 src/webviews/apps/welcome/welcome.html | 21 ++++++++++
 3 files changed, 98 insertions(+), 7 deletions(-)

diff --git a/src/webviews/apps/home/home.html b/src/webviews/apps/home/home.html
index 93edbe3..c00e979 100644
--- a/src/webviews/apps/home/home.html
+++ b/src/webviews/apps/home/home.html
@@ -131,7 +131,13 @@
 					aria-label="Show Commit Graph"
 					data-requires="repo"
 					><code-icon class="nav-list__icon" icon="gl-graph"></code-icon
-					><span class="nav-list__label">Commit Graph ✨</span></a
+					><span class="nav-list__label">Commit Graph</span
+					><span
+						class="nav-list__access"
+						title="Requires a trial or paid plan to use this on privately hosted repos"
+						aria-label="Requires a trial or paid plan to use this on privately hosted repos"
+						>✨</span
+					></a
 				>
 				<a
 					class="nav-list__item"
@@ -158,7 +164,13 @@
 					aria-label="Open Focus"
 					data-requires="repo"
 					><code-icon class="nav-list__icon" icon="target"></code-icon
-					><span class="nav-list__label">Focus ✨</span></a
+					><span class="nav-list__label">Focus</span
+					><span
+						class="nav-list__access"
+						title="Requires a trial or paid plan to use this on privately hosted repos"
+						aria-label="Requires a trial or paid plan to use this on privately hosted repos"
+						>✨</span
+					></a
 				>
 				<a
 					class="nav-list__item"
@@ -176,7 +188,13 @@
 					aria-label="Show Visual File History view"
 					data-requires="repo"
 					><code-icon class="nav-list__icon" icon="graph-scatter"></code-icon
-					><span class="nav-list__label">Visual File History ✨</span></a
+					><span class="nav-list__label">Visual File History</span
+					><span
+						class="nav-list__access"
+						title="Requires a trial or paid plan to use this on privately hosted repos"
+						aria-label="Requires a trial or paid plan to use this on privately hosted repos"
+						>✨</span
+					></a
 				>
 				<a
 					class="nav-list__item"
@@ -203,7 +221,13 @@
 					aria-label="Show GitKraken Workspaces view"
 					data-requires="repo"
 					><code-icon class="nav-list__icon" icon="gl-workspaces-view"></code-icon
-					><span class="nav-list__label">GitKraken Workspaces ☁️</span></a
+					><span class="nav-list__label">GitKraken Workspaces</span
+					><span
+						class="nav-list__access"
+						title="Requires an account and access is based on your plan, e.g. Free, Pro, etc"
+						aria-label="Requires an account and access is based on your plan, e.g. Free, Pro, etc"
+						>☁️</span
+					></a
 				>
 				<a
 					class="nav-list__item"
@@ -212,7 +236,13 @@
 					aria-label="Show Worktrees view"
 					data-requires="repo"
 					><code-icon class="nav-list__icon" icon="gl-worktrees-view"></code-icon
-					><span class="nav-list__label">Worktrees ✨</span></a
+					><span class="nav-list__label">Worktrees</span
+					><span
+						class="nav-list__access"
+						title="Requires a trial or paid plan to use this on privately hosted repos"
+						aria-label="Requires a trial or paid plan to use this on privately hosted repos"
+						>✨</span
+					></a
 				>
 			</nav>
 			<nav class="nav-list">
@@ -304,12 +334,39 @@
 				<a
 					class="nav-list__item"
 					href="https://www.youtube.com/watch?v=UQPb73Zz9qk"
-					title="Open GitLens Settings"
-					aria-label="Open GitLens Settings"
+					title="Watch the GitLens Tutorial video"
+					aria-label="Watch the GitLens Tutorial video"
 					><code-icon class="nav-list__icon" icon="vm-running"></code-icon
 					><span class="nav-list__label">Tutorial Video</span></a
 				>
 			</nav>
+			<nav class="nav-list">
+				<h2 class="nav-list__title t-eyebrow">Companion Tools</h2>
+				<a
+					class="nav-list__item"
+					href="https://www.gitkraken.com/browser-extension"
+					title="Try the GitKraken Browser Extension"
+					aria-label="Try the GitKraken Browser Extension"
+					><code-icon class="nav-list__icon" icon="extensions"></code-icon
+					><span class="nav-list__label">GitKraken Browser Extension</span></a
+				>
+				<a
+					class="nav-list__item"
+					href="https://www.gitkraken.com/cli"
+					title="Try the GitKraken CLI"
+					aria-label="Try the GitKraken CLI"
+					><code-icon class="nav-list__icon" icon="terminal"></code-icon
+					><span class="nav-list__label">GitKraken CLI</span></a
+				>
+				<a
+					class="nav-list__item"
+					href="https://gitkraken.dev"
+					title="Try GitKraken.dev"
+					aria-label="Try GitKraken.dev"
+					><code-icon class="nav-list__icon" icon="globe"></code-icon
+					><span class="nav-list__label">GitKraken.dev</span></a
+				>
+			</nav>
 			<p class="t-subtle">
 				✨ Requires a trial or paid plan to use this on privately hosted repos. <br />
 				☁️ Requires an account and access is based on your plan, e.g. Free, Pro, etc
diff --git a/src/webviews/apps/home/home.scss b/src/webviews/apps/home/home.scss
index 5209dad..e104a7e 100644
--- a/src/webviews/apps/home/home.scss
+++ b/src/webviews/apps/home/home.scss
@@ -373,12 +373,25 @@ gl-button {
 
 	&__label {
 		font-weight: 600;
+		width: 100%;
+	}
+
+	&__access {
+		position: relative;
+		left: 1.5rem;
+		filter: grayscale(1);
+		opacity: 0.4;
 	}
 
 	&__item:hover &__label {
 		text-decoration: underline;
 	}
 
+	&__item:hover &__access {
+		filter: none;
+		opacity: 1;
+	}
+
 	&__title {
 		padding: 0 2rem;
 	}
diff --git a/src/webviews/apps/welcome/welcome.html b/src/webviews/apps/welcome/welcome.html
index 0a0a362..dfe5f72 100644
--- a/src/webviews/apps/welcome/welcome.html
+++ b/src/webviews/apps/welcome/welcome.html
@@ -530,6 +530,27 @@
 					>
 				</nav>
 
+				<h2>Companion Tools</h2>
+				<p>Supercharge GitLens with our other dev tools</p>
+				<nav class="welcome__resources-nav" aria-label="Companion Tools">
+					<a
+						href="https://www.gitkraken.com/cli"
+						title="Try the GitKraken CLI"
+						aria-label="Try the GitKraken CLI"
+						><code-icon class="link" icon="terminal"></code-icon><span>GitKraken CLI</span></a
+					>
+					<a href="https://gitkraken.dev" title="Try GitKraken.dev" aria-label="Try GitKraken.dev"
+						><code-icon class="link" icon="globe"></code-icon><span>GitKraken.dev</span></a
+					>
+					<a
+						href="https://www.gitkraken.com/browser-extension"
+						title="Try the GitKraken Browser Extension"
+						aria-label="Try the GitKraken Browser Extension"
+						><code-icon class="link" icon="extensions"></code-icon
+						><span>GitKraken Browser Extension</span></a
+					>
+				</nav>
+
 				<h2>Resources</h2>
 				<nav class="welcome__resources-nav" aria-label="Help and Resources">
 					<a