Adds Focus view section to home view

Author: d13

CHANGELOG.md

@@ -8,9 +8,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ### Added
 
-- ✨ Adds an all-new preview of the **Focus view**, a [GitLens+ feature](https://gitkraken.com/gitlens/plus-features) — provides you with a comprehensive list of all your most important work across your connected GitHub repos:
-  - **My Pull Requests:** shows all GitHub PRs opened by you, assigned to you, or awaiting your review
-  - **My Issues:** shows all issues created by you, assigned to you, or that mention you
+- ✨ Adds a preview of the all-new **Focus View**, a [GitLens+ feature](https://gitkraken.com/gitlens/plus-features) — provides you with a comprehensive list of all your most important work across your connected GitHub repos:
+  - My Pull Requests: shows all GitHub PRs opened by you, assigned to you, or awaiting your review
+  - My Issues: shows all issues created by you, assigned to you, or that mention you
+  - Open it via _GitLens+: Show Focus View_ from the Command Palette
 - Adds new _Commit Graph_ features and improvements
   - Adds a new experimental minimap of commit activity to the _Commit Graph_
   - Adds a new experimental _Changes_ column visualizing commit changes

src/webviews/apps/home/home.html

@@ -242,6 +242,21 @@
 			</div>
 			<!-- check for gitlens+ -->
 			<div id="plus-sections">
+				<card-section dismissable id="focus-view-preview">
+					<span slot="heading">Focus View ✨ (preview)</span>
+					<a title="Open the Focus view" href="command:gitlens.showFocusPage"
+						><img
+							src="#{webroot}/media/plus-focus-view-preview.webp"
+							alt="Focus view Screenshot"
+							class="plus-section-thumb mb-1"
+					/></a>
+					<p class="mb-0">
+						The
+						<a title="Open the Focus view" href="command:gitlens.showFocusPage">Focus View</a>
+						provides you with a comprehensive list of all your most important work across your connected
+						GitHub repos.
+					</p>
+				</card-section>
 				<card-section dismissable id="commit-graph">
 					<span slot="heading">Commit Graph ✨</span>
 					<a
@@ -250,7 +265,7 @@
 						><img
 							src="#{webroot}/media/plus-commit-graph-illustrated.webp"
 							alt="Commit Graph illustration"
-							class="mb-1"
+							class="plus-section-thumb mb-1"
 					/></a>
 					<p>
 						The
@@ -275,7 +290,7 @@
 						><img
 							src="#{webroot}/media/plus-visual-file-history-illustrated.webp"
 							alt="Visual File History illustration"
-							class="mb-1"
+							class="plus-section-thumb mb-1"
 					/></a>
 					<p>
 						The
@@ -300,7 +315,7 @@
 						><img
 							src="#{webroot}/media/plus-worktrees-illustrated.webp"
 							alt="Worktrees illustration"
-							class="mb-1"
+							class="plus-section-thumb mb-1"
 					/></a>
 					<p>
 						<a

src/webviews/apps/home/home.scss

@@ -609,6 +609,10 @@ vscode-button {
 	}
 }
 
+.plus-section-thumb {
+	border-radius: 0.6rem;
+}
+
 @media (max-width: 280px) {
 	.not-small {
 		display: none;