Fixes settings on Welcome

Adds Visual File History Componentizes svgs
před 1 rokem · a6eef18682
--- a/src/system/configuration.ts
+++ b/src/system/configuration.ts
@ -59,6 +59,7 @@ export class Configuration {
 		section: S,
 		scope: ConfigurationScope | null | undefined,
 		defaultValue: NonNullable<ConfigPathValue<S>>,
 		skipOverrides?: boolean,
 	): NonNullable<ConfigPathValue<S>>;
 	get<S extends ConfigPath>(
 		section: S,
--- a/src/webviews/apps/welcome/components/svg-annotations.ts
+++ b/src/webviews/apps/welcome/components/svg-annotations.ts
@ -0,0 +1,160 @@
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';

@customElement('gk-annotations-svg')
 export class AnnotationsSvg extends LitElement {
 	static override styles = css`
 		:host > svg {
 			display: block;
 			max-width: 69.2rem;
 			width: calc(100% - 2rem);
 			height: auto;
 			margin: 0 1rem;

 			border: 0.1rem solid var(--vscode-editorWidget-border);
 		}

 		* {
 			user-select: none;
 		}

 		.codicon {
 			font-family: codicon;
 			cursor: default;
 			user-select: none;
 		}

 		.glicon {
 			font-family: glicons;
 			cursor: default;
 			user-select: none;
 		}

 		.line text {
 			font-family: var(--vscode-editor-font-family);
 			font-size: var(--vscode-editor-font-size);
 			font-weight: var(--vscode-editor-font-weight);
 		}

 		.cursor {
 			fill: var(--vscode-editorCursor-foreground);
 		}

 		.splitter {
 			stroke: var(--vscode-editorGroup-border);
 		}

 		.punctuation {
 			fill: var(--vscode-editor-foreground);
 		}

 		.function-declaration {
 			fill: var(--vscode-symbolIcon-functionForeground);
 		}

 		.function-name {
 			fill: var(--vscode-symbolIcon-colorForeground);
 		}

 		.function-argument {
 			fill: var(--vscode-symbolIcon-variableForeground);
 		}

 		.function-argument-type {
 			fill: var(--vscode-symbolIcon-typeParameterForeground);
 		}

 		.function-return {
 			fill: var(--vscode-debugTokenExpression-name);
 		}

 		.line-current {
 			fill: var(--vscode-editor-lineHighlightBackground);
 			stroke: var(--vscode-editor-lineHighlightBorder);
 			stroke-width: 0.1rem;
 			fill-opacity: 0.8;
 		}

 		.line-number {
 			fill: var(--vscode-editorLineNumber-foreground);
 		}

 		.line-number-active {
 			fill: var(--vscode-editorLineNumber-activeForeground);
 		}

 		.gutter {
 			fill: var(--vscode-gitlens-gutterBackgroundColor);
 		}

 		.gutter-avatar circle {
 			fill: var(--vscode-editorInfo-foreground);
 		}
 		.gutter-avatar text {
 			fill: var(--vscode-gitlens-gutterForegroundColor);
 			font-size: 0.75rem;
 		}

 		.gutter-text {
 			fill: var(--vscode-gitlens-gutterForegroundColor);
 		}

 		.heatmap {
 			stroke: #7162db;
 		}

 		.annotations-left {
 			transition: opacity 150ms ease-in-out;
 		}

 		.annotations-right {
 			transition: transform 150ms ease-in-out;
 		}

 		:host(:not([toggled])) .annotations-left {
 			opacity: 0;
 		}
 		:host(:not([toggled])) .annotations-right {
 			transform: translateX(-242px);
 		}
 	`;

 	@property({ type: Boolean, reflect: true })
 	toggled?: boolean;

 	override render() {
 		return html`
 			<!-- Don't reformat or let prettier reformat the SVG otherwise whitespace will get added incorrect and screw up the positioning -->
 			<!-- prettier-ignore -->
 			<svg width="600" height="44" viewBox="0 0 600 42" fill="none" xmlns="http://www.w3.org/2000/svg">
 				<g class="line">
 					<rect class="line-current" x="0" y="21" width="calc(100% - 1px)" height="21"></rect>
 					<text y="14"><tspan x="7" class="line-number">12</tspan></text>
 					<text y="36"><tspan x="7" class="line-number-active">13</tspan></text>
 				</g>
 				<g class="annotations-left">
 					<rect class="gutter" x="28" y="0" width="242" height="100%"></rect>
 					<g class="line">
 						<g class="gutter-avatar">
 							<circle cx="42" cy="9" r="7"></circle>
 							<text x="42" y="11.5" text-anchor="middle">EA</text>
 						</g>
 						<text y="14"><tspan x="58" class="gutter-text">Hello GitLens</tspan><tspan x="274" dx="-12" text-anchor="end" class="gutter-text">6 yrs ago</tspan></text>
 						<g class="gutter-avatar">
 							<circle cx="42" cy="31" r="7"></circle>
 							<text x="42" y="33.5" text-anchor="middle">EA</text>
 						</g>
 						<text y="36"><tspan x="58" class="gutter-text">Supercharged</tspan><tspan x="274" dx="-12" text-anchor="end" class="gutter-text">6 yrs ago</tspan></text>
 					</g>
 					<line class="heatmap" x1="270" y1="0" x2="270" y2="100%" />
 				</g>
 				<g class="annotations-right">
 					<g class="line">
 						<text y="14"><tspan x="278" class="function-declaration">function</tspan><tspan dx="6" class="function-name">gitlens</tspan><tspan class="punctuation">(</tspan><tspan class="function-argument">git</tspan><tspan class="punctuation">:</tspan><tspan dx="6" class="function-argument-type">object</tspan><tspan class="punctuation">)</tspan><tspan dx="6" class="punctuation">{</tspan></text>
 						<text y="36"><tspan x="278" dx="24" class="function-return">return</tspan><tspan dx="6" class="function-name">supercharged</tspan><tspan class="punctuation">(</tspan><tspan class="function-argument">git</tspan><tspan class="punctuation">)</tspan><tspan class="punctuation">;</tspan><tspan class="cursor">|</tspan></text>
 					</g>
 				</g>
 			</svg>
 		`;
 	}
 }
--- a/src/webviews/apps/welcome/components/svg-blame.ts
+++ b/src/webviews/apps/welcome/components/svg-blame.ts
@ -0,0 +1,275 @@
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';

@customElement('gk-blame-svg')
 export class BlameSvg extends LitElement {
 	static override styles = css`
 		:host {
 			position: relative;
 		}

 		:host svg:last-child {
 			display: block;
 			max-width: 69.2rem;
 			width: calc(100% - 2rem);
 			height: auto;
 			margin: 0 1rem;

 			border: 0.1rem solid var(--vscode-editorWidget-border);
 		}

 		* {
 			user-select: none;
 		}

 		.codicon {
 			font-family: codicon;
 			cursor: default;
 			user-select: none;
 		}

 		.glicon {
 			font-family: glicons;
 			cursor: default;
 			user-select: none;
 		}

 		.line text {
 			font-family: var(--vscode-editor-font-family);
 			font-size: var(--vscode-editor-font-size);
 			font-weight: var(--vscode-editor-font-weight);
 		}

 		.cursor {
 			fill: var(--vscode-editorCursor-foreground);
 		}

 		.splitter {
 			stroke: var(--vscode-editorGroup-border);
 		}

 		.punctuation {
 			fill: var(--vscode-editor-foreground);
 		}

 		.function-declaration {
 			fill: var(--vscode-symbolIcon-functionForeground);
 		}

 		.function-name {
 			fill: var(--vscode-symbolIcon-colorForeground);
 		}

 		.function-argument {
 			fill: var(--vscode-symbolIcon-variableForeground);
 		}

 		.function-argument-type {
 			fill: var(--vscode-symbolIcon-typeParameterForeground);
 		}

 		.function-return {
 			fill: var(--vscode-debugTokenExpression-name);
 		}

 		.line-current {
 			fill: var(--vscode-editor-lineHighlightBackground);
 			stroke: var(--vscode-editor-lineHighlightBorder);
 			stroke-width: 0.1rem;
 			fill-opacity: 0.8;
 		}

 		.line-number {
 			fill: var(--vscode-editorLineNumber-foreground);
 		}

 		.line-number-active {
 			fill: var(--vscode-editorLineNumber-activeForeground);
 		}

 		.blame {
 			fill: var(--vscode-gitlens-trailingLineForegroundColor);
 			cursor: pointer;
 		}

 		.codelens text {
 			font-family: var(--vscode-font-family);
 			font-size: var(--vscode-font-size);
 			font-weight: var(--vscode-font-weight);

 			fill: var(--vscode-editorCodeLens-foreground);
 		}
 		.codelens text tspan {
 			font-size: 0.8em;
 		}

 		.hover {
 			opacity: 0;
 			visibility: hidden;
 			position: absolute;
 			bottom: 30px;
 			right: -30px;
 			animation-duration: 0.25s;
 			animation-timing-function: ease-in-out;
 			animation-fill-mode: both;
 		}

 		.hover rect {
 			fill: var(--vscode-editorHoverWidget-background);
 			stroke: var(--vscode-editorHoverWidget-border);
 			stroke-width: 1;
 		}

 		.hover line {
 			stroke: var(--vscode-editorHoverWidget-border);
 			stroke-width: 1;
 		}

 		.hover text {
 			font-family: var(--vscode-font-family);
 			font-weight: var(--vscode-font-weight);
 			font-size: 1.1rem;

 			fill: var(--vscode-editorHoverWidget-foreground);
 		}

 		.hover__diff tspan {
 			font-family: var(--vscode-editor-font-family);
 			font-weight: var(--vscode-editor-font-weight);
 			font-size: var(--vscode-editor-font-size);
 		}

 		.hover__diff-removed {
 			fill: var(--vscode-gitDecoration-deletedResourceForeground);
 		}

 		.hover__diff-added {
 			fill: var(--vscode-gitDecoration-addedResourceForeground);
 		}

 		.hover__author {
 			font-weight: 700;
 		}

 		.hover__date {
 			font-style: italic;
 		}

 		.hover__link {
 			fill: #3794ff !important;
 		}

 		@keyframes fadeInHover {
 			0% {
 				opacity: 0;
 				visibility: visible;
 			}

 			100% {
 				opacity: 1;
 				visibility: visible;
 			}
 		}

 		@keyframes fadeOutHover {
 			0% {
 				opacity: 1;
 				visibility: visible;
 			}

 			100% {
 				opacity: 0;
 				visibility: hidden;
 			}
 		}

 		:host([hovered][hovering]) .hover {
 			animation-name: fadeInHover;
 		}

 		:host([hovered]:not([hovering])) .hover {
 			animation-name: fadeOutHover;
 		}

 		.blame,
 		.codelens {
 			transition: opacity 150ms ease-in-out;
 		}

 		:host(:not([inline])) .blame,
 		:host(:not([codelens])) .codelens {
 			cursor: default;
 			opacity: 0;
 		}
 	`;

 	@property({ type: Boolean, reflect: true })
 	inline?: boolean;

 	@property({ type: Boolean, reflect: true })
 	codelens?: boolean;

 	@property({ type: Boolean, reflect: true })
 	hovered?: boolean;

 	@property({ type: Boolean, reflect: true })
 	hovering?: boolean;

 	protected onMouseOver() {
 		this.hovered = true;
 		this.hovering = this.inline;
 	}

 	protected onMouseOut() {
 		this.hovered = true;
 		this.hovering = false;
 	}

 	override render() {
 		return html`
 			<!-- Don't reformat or let prettier reformat the SVG otherwise whitespace will get added incorrect and screw up the positioning -->
 			<!-- prettier-ignore -->
 			<svg class="hover" width="600" height="177" viewBox="30 0 80 177" fill="none" xmlns="http://www.w3.org/2000/svg">
 				<rect width="370" height="177" rx="3"></rect>
 				<text x="9" y="41" text-anchor="start"><tspan class="codicon" font-size="32">&#xeb99;</tspan></text>
 				<text>
 					<tspan class="hover__author hover__link" x="52" y="30">You</tspan><tspan>, 6 years ago via PR&nbsp;</tspan><tspan class="hover__author hover__link">#1</tspan><tspan class="hover__date" dx="12">(November 12th, 2016 3:41pm)</tspan><tspan x="52" y="55">Supercharge Git</tspan>
 				</text>

 				<line x1="0" y1="70" x2="371" y2="70" />

 				<text y="89">
 					<tspan x="9" dy="1.5" class="codicon hover__link">&#xeafc;</tspan><tspan dx="2" dy="-1.5" class="hover__link">29ad3a0</tspan><tspan dx="9" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="codicon hover__link">&#xeafd;</tspan><tspan dx="9" dy="-1.5" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="codicon hover__link">&#xea82;</tspan><tspan dx="9" dy="-1.5" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="codicon hover__link">&#xeb01;</tspan><tspan dx="9" dy="-1.5" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="codicon hover__link">&#xea7c;</tspan>
 				</text>

 				<line x1="0" y1="99" x2="371" y2="99" />

 				<text class="hover__diff">
 					<tspan class="hover__diff-removed" x="9" y="119">- return git;</tspan>
 					<tspan class="hover__diff-added" x="9" y="136">+ return supercharged(git);</tspan>
 				</text>

 				<line x1="0" y1="147" x2="371" y2="147" />

 				<text y="166">
 					<tspan x="9">Changes</tspan><tspan dx="12" dy="1.5" class="codicon hover__link">&#xeafc;</tspan><tspan dx="2" dy="-1.5" class="hover__link">3ac1d3f</tspan><tspan dx="9" dy="1.5" class="codicon">&#xea99;</tspan><tspan dx="6" class="codicon hover__link">&#xeafc;</tspan><tspan dx="2" dy="-1.5" class="hover__link">29ad3a0</tspan><tspan dx="9" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="codicon hover__link">&#xeafd;</tspan>
 				</text>
 			</svg>

 			<!-- Don't reformat or let prettier reformat the SVG otherwise whitespace will get added incorrect and screw up the positioning -->
 			<!-- prettier-ignore -->
 			<svg width="600" height="45" viewBox="0 0 600 43" fill="none" xmlns="http://www.w3.org/2000/svg">
 				<g class="codelens">
 					<text y="18"><tspan x="38">Eric Amodio, 3 minutes ago | 1 author (Eric Amodio)</tspan></text>
 				</g>
 				<g class="line">
 					<text y="34"><tspan x="7" class="line-number">13</tspan><tspan x="38" class="function-return">return</tspan><tspan dx="6" class="function-name">supercharged</tspan><tspan class="punctuation">(</tspan><tspan class="function-argument">git</tspan><tspan class="punctuation">)</tspan><tspan class="punctuation">;</tspan><tspan class="cursor">|</tspan><tspan dx="24" class="blame" @mouseover=${this
 				.onMouseOver} @mouseout=${this.onMouseOut}>You, 6 years ago via PR #1 • Supercharge Git</tspan></text>
 				</g>
 				<!-- <g class="line">
 					<text y="34"><tspan x="7" class="line-number">12</tspan><tspan x="38" class="function-declaration">function</tspan><tspan dx="6" class="function-name">gitlens</tspan><tspan class="punctuation">(</tspan><tspan class="function-argument">git</tspan><tspan class="punctuation">:</tspan><tspan dx="6" class="function-argument-type">object</tspan><tspan class="punctuation">)</tspan><tspan dx="6" class="punctuation">{</tspan><tspan class="cursor">|</tspan><tspan dx="24" class="blame" data-feature-blame="on">You, 6 years ago via PR #1 • Supercharge Git</tspan></text>
 				</g> -->
 			</svg>
 		`;
 	}
 }
--- a/src/webviews/apps/welcome/components/svg-graph.ts
+++ b/src/webviews/apps/welcome/components/svg-graph.ts
@ -0,0 +1,192 @@
 import { css, html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';

@customElement('gk-graph-svg')
 export class GraphSvg extends LitElement {
 	static override styles = css`
 		:host > svg {
 			display: block;
 			max-width: 69.2rem;
 			width: calc(100% - 2rem);
 			height: auto;
 			margin: 0 1rem;

 			border: 0.1rem solid var(--vscode-editorWidget-border);
 			fill: var(--vscode-editor-background);
 		}

 		* {
 			user-select: none;
 		}

 		text {
 			font-family: var(--vscode-font-family);
 			font-weight: var(--vscode-font-weight);
 			font-size: 1.1rem;
 		}

 		.codicon {
 			font-family: codicon;
 			cursor: default;
 			user-select: none;
 		}

 		.foreground {
 			fill: var(--vscode-editor-foreground);
 		}

 		.branch {
 			fill: white;
 		}

 		.branch-current {
 			font-weight: 700 !important;
 		}

 		.messages {
 			opacity: 0.7;
 		}

 		.authors {
 			opacity: 0.45;
 		}

 		.wip {
 			opacity: 0.45;
 		}

 		.lane1-foreground {
 			stroke: var(--vscode-gitlens-graphLane1Color);
 		}
 		.lane1-background {
 			fill: var(--vscode-gitlens-graphLane1Color);
 		}

 		.lane2-foreground {
 			stroke: var(--vscode-gitlens-graphLane2Color);
 		}
 		.lane2-background {
 			fill: var(--vscode-gitlens-graphLane2Color);
 		}

 		.lane3-foreground {
 			stroke: var(--vscode-gitlens-graphLane3Color);
 		}
 		.lane3-background {
 			fill: var(--vscode-gitlens-graphLane3Color);
 		}

 		.lane4-foreground {
 			stroke: var(--vscode-gitlens-graphLane4Color);
 		}
 		.lane4-background {
 			fill: var(--vscode-gitlens-graphLane4Color);
 		}

 		.lane5-foreground {
 			stroke: var(--vscode-gitlens-graphLane5Color);
 		}
 		.lane5-background {
 			fill: var(--vscode-gitlens-graphLane5Color);
 		}
 	`;

 	override render() {
 		return html`
 			<!-- Don't reformat or let prettier reformat the SVG otherwise whitespace will get added incorrect and screw up the positioning -->
 			<!-- prettier-ignore -->
 			<svg width="850" height="290" viewBox="0 0 850 290" fill="none" xmlns="http://www.w3.org/2000/svg">
 				<rect class="lane2-background" x="70" y="46" width="126" height="19" rx="4"/>
 				<text class="branch branch-current" x="74" y="59"><tspan dy="1" class="codicon">&#xeab2;</tspan><tspan dx="4" class="codicon">&#xea7a;</tspan><tspan dx="6" dy="-1">main</tspan></text>

 				<rect class="lane3-background" opacity="0.5" x="70" y="73" width="126" height="19" rx="4"/>
 				<text class="branch" x="74" y="87"><tspan dy="1" class="codicon">&#xebaa;</tspan><tspan dx="4" class="codicon">&#xea64;</tspan><tspan dx="6" dy="-1">feature/onboard</tspan></text>

 				<rect class="lane4-background" opacity="0.5" x="70" y="99" width="126" height="19" rx="4"/>
 				<text class="branch" x="74" y="113"><tspan dy="1" class="codicon">&#xea7a;</tspan><tspan dx="4" class="codicon">&#xea64;</tspan><tspan dx="6" dy="-1">feature/graph</tspan></text>

 				<rect class="lane5-background" opacity="0.5" x="70" y="237" width="126" height="19" rx="4"/>
 				<text class="branch" x="74" y="251"><tspan dy="1" class="codicon">&#xea7a;</tspan><tspan dx="6" dy="-1">bug/crash</tspan></text>

 				<rect class="lane1-background" opacity="0.2" x="216" y="20" width="128" height="18"/>
 				<rect class="lane1-background" x="342" y="20" width="2" height="18"/>

 				<line class="lane2-foreground" opacity="0.4" x1="196" y1="56" x2="230" y2="56" stroke-width="2"/>
 				<rect class="lane2-background" opacity="0.2" x="238" y="47" width="106" height="18"/>
 				<rect class="lane2-background" x="342" y="47" width="2" height="18"/>

 				<rect class="lane2-background" opacity="0.2" x="238" y="128" width="106" height="18" />
 				<rect class="lane2-background" x="342" y="128" width="2" height="18"/>

 				<rect class="lane2-background" opacity="0.2" x="238" y="263" width="106" height="18"/>
 				<rect class="lane2-background" x="342" y="263" width="2" height="18"/>

 				<line class="lane3-foreground" opacity="0.4" x1="196" y1="83" x2="253" y2="83" stroke-width="2"/>
 				<rect class="lane3-background" opacity="0.2" x="260" y="74" width="84" height="18"/>
 				<rect class="lane3-background" x="342" y="74" width="2" height="18"/>

 				<rect class="lane3-background" opacity="0.2" x="260" y="155" width="84" height="18"/>
 				<rect class="lane3-background" x="342" y="155" width="2" height="18"/>

 				<rect class="lane3-background" opacity="0.2" x="260" y="209" width="84" height="18"/>
 				<rect class="lane3-background" x="342" y="209" width="2" height="18"/>

 				<line class="lane4-foreground" opacity="0.4" x1="196" y1="109" x2="275" y2="109" stroke-width="2"/>
 				<rect class="lane4-background" opacity="0.2" x="282" y="101" width="62" height="18"/>
 				<rect class="lane4-background" x="342" y="101" width="2" height="18"/>

 				<rect class="lane4-background" x="342" y="182" width="2" height="18"/>
 				<rect class="lane4-background" opacity="0.2" x="282" y="182" width="62" height="18"/>

 				<line class="lane5-foreground" opacity="0.3" x1="196" y1="246" x2="297" y2="246" stroke-width="2"/>
 				<rect class="lane5-background" opacity="0.2" x="304" y="236" width="40" height="18"/>
 				<rect class="lane5-background" x="342" y="236" width="2" height="18"/>
 				<path class="lane5-foreground" d="M239 270.74H297C301.418 270.74 305 267.158 305 262.74V247" stroke-width="2"/>

 				<line class="lane1-foreground" x1="217" y1="38" x2="217" y2="319" stroke-width="2" stroke-dasharray="4 4"/>
 				<circle class="lane1-foreground container" cx="217" cy="29" r="8" stroke-width="2" stroke-dasharray="4 4"/>

 				<rect class="lane2-background" x="238" y="47" width="2" height="332"/>
 				<circle class="lane2-foreground container" cx="239" cy="56" r="8" stroke-width="2"/>
 				<circle class="lane2-foreground container" cx="239" cy="137" r="8" stroke-width="2"/>
 				<circle class="lane2-foreground container" cx="239" cy="271" r="8" stroke-width="2"/>

 				<rect class="lane3-background" x="260" y="74" width="2" height="305"/>
 				<circle class="lane3-foreground container" cx="261" cy="83" r="8" stroke-width="2"/>
 				<circle class="lane3-foreground container" cx="261" cy="164" r="8" stroke-width="2"/>
 				<circle class="lane3-foreground container" cx="261" cy="218" r="8" stroke-width="2"/>

 				<rect class="lane4-background" x="282" y="106" width="2" height="209"/>
 				<circle class="lane4-foreground container" cx="283" cy="110" r="8" stroke-width="2"/>
 				<circle class="lane4-foreground container" cx="283" cy="191" r="8" stroke-width="2"/>

 				<circle class="lane5-foreground container" cx="305" cy="245" r="8" stroke-width="2"/>

 				<text x="366" y="33.5" class="foreground wip"><tspan>Work in progress</tspan><tspan dx="9" dy="1" class="codicon">&#xea73;</tspan><tspan dx="3" dy="-1">2</tspan><tspan dx="9" dy="1" class="codicon">&#xea60;</tspan><tspan dx="3" dy="-1">1</tspan></text>
 				<text class="foreground messages">
 					<tspan x="366" y="59.5">Improves performance &amp; reduces bundle size</tspan>
 					<tspan x="366" y="86.5">Adds brand new welcome experience</tspan>
 					<tspan x="366" y="113.5">Adds new Commit Graph panel layout</tspan>
 					<tspan x="366" y="140.5">Optimizes startup performance</tspan>
 					<tspan x="366" y="167.5">Revamps Home view experience for better utility</tspan>
 					<tspan x="366" y="194.5">Optimizes Commit Graph loading performance</tspan>
 					<tspan x="366" y="221.5">Adds new GitLens Inspect side bar for a better experience</tspan>
 					<tspan x="366" y="248.5">Fixes crash when run on a phone</tspan>
 					<tspan x="366" y="275.5">Updates package dependencies</tspan>
 				</text>

 				<text class="foreground authors">
 					<tspan x="696" y="59.5">Eric Amodio</tspan>
 					<tspan x="696" y="86.5">Keith Daulton</tspan>
 					<tspan x="696" y="113.5">Eric Amodio</tspan>
 					<tspan x="696" y="140.5">Ramin Tadayon</tspan>
 					<tspan x="696" y="167.5">Keith Daulton</tspan>
 					<tspan x="696" y="194.5">Eric Amodio</tspan>
 					<tspan x="696" y="221.5">Keith Daulton</tspan>
 					<tspan x="696" y="248.5">Ramin Tadayon</tspan>
 					<tspan x="696" y="275.5">Ramin Tadayon</tspan>
 				</text>
 			</svg>
 		`;
 	}
 }
--- a/src/webviews/apps/welcome/components/svg-revision-navigation.ts
+++ b/src/webviews/apps/welcome/components/svg-revision-navigation.ts
@ -0,0 +1,153 @@
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';

@customElement('gk-revision-navigation-svg')
 export class RevisionNavigationSvg extends LitElement {
 	static override styles = css`
 		:host > svg {
 			display: block;
 			max-width: 69.2rem;
 			width: calc(100% - 2rem);
 			height: auto;
 			margin: 0 1rem;

 			border: 0.1rem solid var(--vscode-editorWidget-border);
 		}

 		* {
 			user-select: none;
 		}

 		.codicon {
 			font-family: codicon;
 			cursor: default;
 			user-select: none;
 		}

 		.glicon {
 			font-family: glicons;
 			cursor: default;
 			user-select: none;
 		}

 		.line text {
 			font-family: var(--vscode-editor-font-family);
 			font-size: var(--vscode-editor-font-size);
 			font-weight: var(--vscode-editor-font-weight);
 		}

 		.cursor {
 			fill: var(--vscode-editorCursor-foreground);
 		}

 		.punctuation {
 			fill: var(--vscode-editor-foreground);
 		}

 		.function-declaration {
 			fill: var(--vscode-symbolIcon-functionForeground);
 		}

 		.function-name {
 			fill: var(--vscode-symbolIcon-colorForeground);
 		}

 		.function-argument {
 			fill: var(--vscode-symbolIcon-variableForeground);
 		}

 		.function-argument-type {
 			fill: var(--vscode-symbolIcon-typeParameterForeground);
 		}

 		.function-return {
 			fill: var(--vscode-debugTokenExpression-name);
 		}

 		.line-current {
 			fill: var(--vscode-editor-lineHighlightBackground);
 			stroke: var(--vscode-editor-lineHighlightBorder);
 			stroke-width: 0.1rem;
 			fill-opacity: 0.8;
 		}

 		.line-number {
 			fill: var(--vscode-editorLineNumber-foreground);
 		}

 		.line-number-active {
 			fill: var(--vscode-editorLineNumber-activeForeground);
 		}

 		.splitter {
 			stroke: var(--vscode-editorGroup-border);
 		}

 		.added-line {
 			fill: var(--vscode-diffEditor-insertedLineBackground);
 		}

 		.removed-line {
 			fill: var(--vscode-diffEditor-removedLineBackground);
 		}

 		.added-text {
 			outline: 1px solid green;
 			fill: green;
 		}

 		.revision-left {
 			transition: opacity 150ms ease-in-out;
 		}

 		.revision-right {
 			transition: transform 150ms ease-in-out;
 		}

 		:host(:not([toggled])) .revision-left {
 			opacity: 0;
 		}
 		:host(:not([toggled])) .revision-right {
 			transform: translateX(-283px);
 		}
 		:host(:not([toggled])) .revision-right .added-text {
 			outline-color: transparent;
 			fill: inherit;
 		}
 	`;

 	@property({ type: Boolean, reflect: true })
 	toggled?: boolean;

 	override render() {
 		return html`
 			<!-- Don't reformat or let prettier reformat the SVG otherwise whitespace will get added incorrect and screw up the positioning -->
 			<!-- prettier-ignore -->
 			<svg width="600" height="44" viewBox="0 0 600 42" fill="none" xmlns="http://www.w3.org/2000/svg">
 				<defs>
 					<clipPath id="clip-left">
 						<rect x="0" y="0" width="279" height="100%"></rect>
 					</clipPath>
 				</defs>

 				<g class="revision-left">
 					<rect class="removed-line" x="28" y="21" width="251" height="21"></rect>
 					<rect class="added-line" x="311" y="21" width="309" height="21"></rect>
 					<!-- <rect class="added-text" x="433" y="21" width="38" height="21"></rect> -->
 					<rect class="line-current" x="0" y="21" width="calc(100% - 1px)" height="21"></rect>
 					<g class="line line-left" style="clip-path: url(#clip-left)">
 						<text y="14"><tspan x="7" class="line-number">12</tspan><tspan x="40" class="function-declaration">function</tspan><tspan dx="6" class="function-name">gitlens</tspan><tspan class="punctuation">(</tspan><tspan class="function-argument">git</tspan><tspan class="punctuation">:</tspan><tspan dx="6" class="function-argument-type">object</tspan><tspan class="punctuation">)</tspan><tspan dx="6" class="punctuation">{</tspan></text>
 						<text y="36"><tspan x="7" class="line-number">13</tspan><tspan x="40" dx="24" class="function-return">return</tspan><tspan dx="6" class="function-name">supercharged</tspan><tspan class="punctuation">(</tspan><tspan class="function-argument">git</tspan><tspan class="punctuation">)</tspan><tspan class="punctuation">;</tspan></text>
 					</g>
 					<line class="splitter" x1="280" y1="0" x2="280" y2="100%" />
 				</g>
 				<g class="revision-right">
 					<g class="line line-right">
 						<text y="14"><tspan x="290" class="line-number">12</tspan><tspan x="323" class="function-declaration">function</tspan><tspan dx="6" class="function-name">gitlens</tspan><tspan class="punctuation">(</tspan><tspan class="function-argument">git</tspan><tspan class="punctuation">:</tspan><tspan dx="6" class="function-argument-type">object</tspan><tspan class="punctuation">)</tspan><tspan dx="6" class="punctuation">{</tspan></text>
 						<text y="36"><tspan x="290" class="line-number-active">13</tspan><tspan x="323" dx="24" class="function-return">return</tspan><tspan dx="6" class="function-name"><tspan>super</tspan><tspan class="added-text">DuperC</tspan><tspan>harged</tspan></tspan><tspan class="punctuation">(</tspan><tspan class="function-argument">git</tspan><tspan class="punctuation">)</tspan><tspan class="punctuation">;</tspan><tspan class="cursor">|</tspan></text>
 					</g>
 				</g>
 			</svg>
 		`;
 	}
 }
--- a/src/webviews/apps/welcome/components/svg-timeline.ts
+++ b/src/webviews/apps/welcome/components/svg-timeline.ts
@ -0,0 +1,200 @@
 import { css, html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';

@customElement('gk-timeline-svg')
 export class TimelineSvg extends LitElement {
 	static override styles = css`
 		:host > svg {
 			display: block;
 			max-width: 69.2rem;
 			width: calc(100% - 2rem);
 			height: auto;
 			margin: 0 1rem;

 			border: 0.1rem solid var(--vscode-editorWidget-border);
 		}

 		* {
 			user-select: none;
 		}

 		.additions line {
 			stroke: var(--vscode-gitlens-decorations-addedForegroundColor, #339e3e);
 			stroke-width: 1.2;
 		}

 		.deletions line {
 			stroke: var(--vscode-gitlens-decorations-deletedForegroundColor, #9e2716);
 			stroke-width: 1.2;
 		}

 		.grid-line {
 			stroke: var(--vscode-editorWidget-border, #474747);
 			stroke-dasharray: 4.5 4.5;
 		}

 		.lane1 circle {
 			fill: #7101ff; /*var(--vscode-gitlens-graphLane1Color, #7101ff);*/
 			opacity: 0.3;
 		}

 		.lane1 circle:hover {
 			cursor: pointer;
 			opacity: 0.8;
 		}

 		.lane2 circle {
 			fill: #f90; /*var(--vscode-gitlens-graphLane2Color, #f90);*/
 			opacity: 0.3;
 		}

 		.lane2 circle:hover {
 			cursor: pointer;
 			opacity: 0.8;
 		}
 	`;

 	override render() {
 		return html`
 			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 850 290">
 				<g class="additions">
 					<line x1="39" x2="39" y1="278" y2="276" />
 					<line x1="45" x2="45" y1="272" y2="265" />
 					<line x1="99" x2="99" y1="264" y2="249" />
 					<line x1="106" x2="106" y1="252" y2="225" />
 					<line x1="161" x2="161" y1="272" y2="265" />
 					<line x1="174" x2="174" y1="278" y2="276" />
 					<line x1="228" x2="228" y1="272" y2="265" />
 					<line x1="234" x2="234" y1="264" y2="249" />
 					<line x1="288" x2="288" y1="278" y2="276" />
 					<line x1="342" x2="342" y1="272" y2="265" />
 					<line x1="350" x2="350" y1="172" y2="63" />
 					<line x1="357" x2="357" y1="249" y2="218" />
 					<line x1="364" x2="364" y1="266" y2="254" />
 					<line x1="371" x2="371" y1="273" y2="266" />
 					<line x1="378" x2="378" y1="273" y2="266" />
 					<line x1="385" x2="385" y1="273" y2="266" />
 					<line x1="440" x2="440" y1="249" y2="218" />
 					<line x1="447" x2="447" y1="249" y2="218" />
 					<line x1="454" x2="454" y1="264" y2="249" />
 					<line x1="461" x2="461" y1="264" y2="249" />
 					<line x1="468" x2="468" y1="273" y2="266" />
 					<line x1="475" x2="475" y1="117" y2="20" />
 					<line x1="482" x2="482" y1="273" y2="266" />
 					<line x1="490" x2="490" y1="273" y2="266" />
 					<line x1="497" x2="497" y1="204" y2="129" />
 					<line x1="504" x2="504" y1="200" y2="120" />
 					<line x1="511" x2="511" y1="200" y2="120" />
 					<line x1="518" x2="518" y1="213" y2="145" />
 					<line x1="525" x2="525" y1="252" y2="225" />
 					<line x1="580" x2="580" y1="278" y2="276" />
 					<line x1="587" x2="587" y1="273" y2="266" />
 					<line x1="594" x2="594" y1="252" y2="225" />
 					<line x1="601" x2="601" y1="247" y2="214" />
 					<line x1="608" x2="608" y1="271" y2="263" />
 					<line x1="615" x2="615" y1="274" y2="268" />
 					<line x1="623" x2="623" y1="271" y2="263" />
 					<line x1="677" x2="677" y1="264" y2="249" />
 					<line x1="731" x2="731" y1="273" y2="266" />
 					<line x1="739" x2="739" y1="252" y2="225" />
 					<line x1="743" x2="743" y1="264" y2="249" />
 					<line x1="751" x2="751" y1="224" y2="168" />
 					<line x1="805" x2="805" y1="278" y2="276" />
 				</g>
 				<g class="deletions">
 					<line x1="39" x2="39" y1="276" y2="289" />
 					<line x1="45" x2="45" y1="270" y2="289" />
 					<line x1="99" x2="99" y1="262" y2="289" />
 					<line x1="106" x2="106" y1="250" y2="289" />
 					<line x1="161" x2="161" y1="270" y2="289" />
 					<line x1="174" x2="174" y1="276" y2="289" />
 					<line x1="228" x2="228" y1="270" y2="289" />
 					<line x1="234" x2="234" y1="262" y2="289" />
 					<line x1="288" x2="288" y1="276" y2="289" />
 					<line x1="342" x2="342" y1="270" y2="289" />
 					<line x1="350" x2="350" y1="170" y2="289" />
 					<line x1="357" x2="357" y1="249" y2="289" />
 					<line x1="364" x2="364" y1="264" y2="289" />
 					<line x1="371" x2="371" y1="271" y2="289" />
 					<line x1="378" x2="378" y1="271" y2="289" />
 					<line x1="385" x2="385" y1="271" y2="289" />
 					<line x1="440" x2="440" y1="247" y2="289" />
 					<line x1="447" x2="447" y1="247" y2="289" />
 					<line x1="454" x2="454" y1="262" y2="289" />
 					<line x1="461" x2="461" y1="262" y2="289" />
 					<line x1="468" x2="468" y1="271" y2="289" />
 					<line x1="475" x2="475" y1="115" y2="289" />
 					<line x1="482" x2="482" y1="271" y2="289" />
 					<line x1="490" x2="490" y1="271" y2="289" />
 					<line x1="497" x2="497" y1="202" y2="289" />
 					<line x1="504" x2="504" y1="198" y2="289" />
 					<line x1="511" x2="511" y1="198" y2="289" />
 					<line x1="518" x2="518" y1="211" y2="289" />
 					<line x1="525" x2="525" y1="250" y2="289" />
 					<line x1="580" x2="580" y1="276" y2="289" />
 					<line x1="587" x2="587" y1="271" y2="289" />
 					<line x1="594" x2="594" y1="250" y2="289" />
 					<line x1="601" x2="601" y1="245" y2="289" />
 					<line x1="608" x2="608" y1="269" y2="289" />
 					<line x1="615" x2="615" y1="272" y2="289" />
 					<line x1="623" x2="623" y1="269" y2="289" />
 					<line x1="677" x2="677" y1="262" y2="289" />
 					<line x1="731" x2="731" y1="271" y2="289" />
 					<line x1="739" x2="739" y1="250" y2="289" />
 					<line x1="743" x2="743" y1="262" y2="289" />
 					<line x1="751" x2="751" y1="222" y2="289" />
 					<line x1="805" x2="805" y1="276" y2="289" />
 				</g>
 				<g class="lane1">
 					<line class="grid-line" x1="39" x2="809" y1="99" y2="99" />
 					<circle cx="39" cy="99" r="4" />
 					<circle cx="45" cy="99" r="8" />
 					<circle cx="99" cy="99" r="17" />
 					<circle cx="106" cy="99" r="29" />
 					<circle cx="174" cy="99" r="4" />
 					<circle cx="350" cy="99" r="96" />
 					<circle cx="364" cy="99" r="12" />
 					<circle cx="378" cy="99" r="8" />
 					<circle cx="385" cy="99" r="8" />
 					<circle cx="447" cy="99" r="32" />
 					<circle cx="461" cy="99" r="17" />
 					<circle cx="468" cy="99" r="8" />
 					<circle cx="475" cy="99" r="100" />
 					<circle cx="482" cy="99" r="8" />
 					<circle cx="490" cy="99" r="8" />
 					<circle cx="497" cy="99" r="67" />
 					<circle cx="504" cy="99" r="71" />
 					<circle cx="511" cy="99" r="71" />
 					<circle cx="518" cy="99" r="61" />
 					<circle cx="525" cy="99" r="29" />
 					<circle cx="580" cy="99" r="4" />
 					<circle cx="594" cy="99" r="29" />
 					<circle cx="677" cy="99" r="17" />
 					<circle cx="731" cy="99" r="8" />
 					<circle cx="739" cy="99" r="29" />
 				</g>
 				<g class="lane2">
 					<line class="grid-line" x1="39" x2="809" y1="154" y2="154" />
 					<circle cx="161" cy="154" r="8" />
 					<circle cx="228" cy="154" r="8" />
 					<circle cx="234" cy="154" r="17" />
 					<circle cx="288" cy="154" r="4" />
 					<circle cx="342" cy="154" r="8" />
 					<circle cx="357" cy="154" r="31" />
 					<circle cx="371" cy="154" r="8" />
 					<circle cx="385" cy="154" r="8" />
 					<circle cx="440" cy="154" r="32" />
 					<circle cx="454" cy="154" r="17" />
 					<circle cx="587" cy="154" r="8" />
 					<circle cx="601" cy="154" r="33" />
 					<circle cx="608" cy="154" r="9" />
 					<circle cx="615" cy="154" r="7" />
 					<circle cx="623" cy="154" r="9" />
 					<circle cx="743" cy="154" r="17" />
 					<circle cx="751" cy="154" r="50" />
 					<circle cx="805" cy="154" r="4" />
 				</g>
 			</svg>
 		`;
 	}
 }
--- a/src/webviews/apps/welcome/welcome.html
+++ b/src/webviews/apps/welcome/welcome.html
@ -71,65 +71,7 @@
 					In-editor code annotations and rich hovers help you better understand how code changed and by whom
 				</p>

 				<div class="hover__box">
 					<!-- Don't reformat or let prettier reformat the SVG otherwise whitespace will get added incorrect and screw up the positioning -->
 					<!-- prettier-ignore -->
 					<svg
 						id="blame-hover"
 						class="hover welcome__illustration"
 						width="600"
 						height="177"
 						viewBox="30 0 80 177"
 						fill="none"
 						xmlns="http://www.w3.org/2000/svg"
 					>
 						<rect width="370" height="177" rx="3"></rect>
 						<text x="9" y="41" text-anchor="start"><tspan class="codicon" font-size="32">&#xeb99;</tspan></text>
 						<text>
 							<tspan class="hover__author hover__link" x="52" y="30">You</tspan><tspan>, 6 years ago via PR&nbsp;</tspan><tspan class="hover__author hover__link">#1</tspan><tspan class="hover__date" dx="12">(November 12th, 2016 3:41pm)</tspan><tspan x="52" y="55">Supercharge Git</tspan>
 						</text>

 						<line x1="0" y1="70" x2="371" y2="70" />

 						<text y="89">
 							<tspan x="9" dy="1.5" class="codicon hover__link">&#xeafc;</tspan><tspan dx="2" dy="-1.5" class="hover__link">29ad3a0</tspan><tspan dx="9" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="codicon hover__link">&#xeafd;</tspan><tspan dx="9" dy="-1.5" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="codicon hover__link">&#xea82;</tspan><tspan dx="9" dy="-1.5" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="codicon hover__link">&#xeb01;</tspan><tspan dx="9" dy="-1.5" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="codicon hover__link">&#xea7c;</tspan>
 						</text>

 						<line x1="0" y1="99" x2="371" y2="99" />

 						<text class="hover__diff">
 							<tspan class="hover__diff-removed" x="9" y="119">- return git;</tspan>
 							<tspan class="hover__diff-added" x="9" y="136">+ return supercharged(git);</tspan>
 						</text>

 						<line x1="0" y1="147" x2="371" y2="147" />

 						<text y="166">
 							<tspan x="9">Changes</tspan><tspan dx="12" dy="1.5" class="codicon hover__link">&#xeafc;</tspan><tspan dx="2" dy="-1.5" class="hover__link">3ac1d3f</tspan><tspan dx="9" dy="1.5" class="codicon">&#xea99;</tspan><tspan dx="6" class="codicon hover__link">&#xeafc;</tspan><tspan dx="2" dy="-1.5" class="hover__link">29ad3a0</tspan><tspan dx="9" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="codicon hover__link">&#xeafd;</tspan>
 						</text>
 					</svg>

 					<!-- Don't reformat or let prettier reformat the SVG otherwise whitespace will get added incorrect and screw up the positioning -->
 					<!-- prettier-ignore -->
 					<svg
 						class="editor welcome__illustration"
 						width="600"
 						height="45"
 						viewBox="0 0 600 43"
 						fill="none"
 						xmlns="http://www.w3.org/2000/svg"
 					>
 						<g class="editor-codelens" data-feature-codelens="on">
 							<text y="18"><tspan x="38">Eric Amodio, 3 minutes ago | 1 author (Eric Amodio)</tspan></text>
 						</g>
 						<g class="editor-line">
 							<text y="34"><tspan x="7" class="editor-line-number">13</tspan><tspan x="38" class="editor-function-return">return</tspan><tspan dx="6" class="editor-function-name">supercharged</tspan><tspan class="editor-punctuation">(</tspan><tspan class="editor-function-argument">git</tspan><tspan class="editor-punctuation">)</tspan><tspan class="editor-punctuation">;</tspan><tspan class="editor-cursor">|</tspan><tspan dx="24" class="editor-blame" data-hover="blame-hover" data-feature-blame="on">You, 6 years ago via PR #1 • Supercharge Git</tspan></text>
 						</g>
 						<!-- <g class="editor-line">
 							<text y="34"><tspan x="7" class="editor-line-number">12</tspan><tspan x="38" class="editor-function-declaration">function</tspan><tspan dx="6" class="editor-function-name">gitlens</tspan><tspan class="editor-punctuation">(</tspan><tspan class="editor-function-argument">git</tspan><tspan class="editor-punctuation">:</tspan><tspan dx="6" class="editor-function-argument-type">object</tspan><tspan class="editor-punctuation">)</tspan><tspan dx="6" class="editor-punctuation">{</tspan><tspan class="editor-cursor">|</tspan><tspan dx="24" class="editor-blame" data-feature-blame="on">You, 6 years ago via PR #1 • Supercharge Git</tspan></text>
 						</g> -->
 					</svg>
 				</div>
 				<gk-blame-svg id="blame" inline codelens></gk-blame-svg>

 				<p style="margin: 0.5rem 1rem 0 1rem">
 					<strong>Want more control?</strong>
@ -175,45 +117,7 @@
 						></rect>
 					</svg>
 				</p>

 				<!-- Don't reformat or let prettier reformat the SVG otherwise whitespace will get added incorrect and screw up the positioning -->
 				<!-- prettier-ignore -->
 				<svg
 					class="editor welcome__illustration"
 					width="600"
 					height="44"
 					viewBox="0 0 600 42"
 					fill="none"
 					xmlns="http://www.w3.org/2000/svg"
 				>
 					<g class="editor-line">
 						<rect class="editor-line-current" x="0" y="21" width="calc(100% - 1px)" height="21"></rect>
 						<text y="14"><tspan x="7" class="editor-line-number">12</tspan></text>
 						<text y="36"><tspan x="7" class="editor-line-number-active">13</tspan></text>
 					</g>
 					<g class="editor-annotations-left">
 						<rect class="editor-gutter" x="28" y="0" width="242" height="100%"></rect>
 						<g class="editor-line">
 							<g class="editor-gutter-avatar">
 								<circle cx="42" cy="9" r="7"></circle>
 								<text x="42" y="11.5" text-anchor="middle">EA</text>
 							</g>
 							<text y="14"><tspan x="58" class="editor-gutter-text">Hello GitLens</tspan><tspan x="274" dx="-12" text-anchor="end" class="editor-gutter-text">6 yrs ago</tspan></text>
 							<g class="editor-gutter-avatar">
 								<circle cx="42" cy="31" r="7"></circle>
 								<text x="42" y="33.5" text-anchor="middle">EA</text>
 							</g>
 							<text y="36"><tspan x="58" class="editor-gutter-text">Supercharged</tspan><tspan x="274" dx="-12" text-anchor="end" class="editor-gutter-text">6 yrs ago</tspan></text>
 						</g>
 						<line class="editor-heatmap" x1="270" y1="0" x2="270" y2="100%" />
 					</g>
 					<g class="editor-annotations-right">
 						<g class="editor-line">
 							<text y="14"><tspan x="278" class="editor-function-declaration">function</tspan><tspan dx="6" class="editor-function-name">gitlens</tspan><tspan class="editor-punctuation">(</tspan><tspan class="editor-function-argument">git</tspan><tspan class="editor-punctuation">:</tspan><tspan dx="6" class="editor-function-argument-type">object</tspan><tspan class="editor-punctuation">)</tspan><tspan dx="6" class="editor-punctuation">{</tspan></text>
 							<text y="36"><tspan x="278" dx="24" class="editor-function-return">return</tspan><tspan dx="6" class="editor-function-name">supercharged</tspan><tspan class="editor-punctuation">(</tspan><tspan class="editor-function-argument">git</tspan><tspan class="editor-punctuation">)</tspan><tspan class="editor-punctuation">;</tspan><tspan class="editor-cursor">|</tspan></text>
 						</g>
 					</g>
 				</svg>
 				<gk-annotations-svg id="annotations" toggled></gk-annotations-svg>

 				<h3>Revision Navigation</h3>
 				<p class="welcome__toolbar">
@ -255,152 +159,21 @@
 						></rect>
 					</svg>
 				</p>
 				<gk-revision-navigation-svg id="revision" toggled></gk-revision-navigation-svg>

 				<!-- Don't reformat or let prettier reformat the SVG otherwise whitespace will get added incorrect and screw up the positioning -->
 				<!-- prettier-ignore -->
 				<svg
 					class="editor welcome__illustration"
 					width="600"
 					height="44"
 					viewBox="0 0 600 42"
 					fill="none"
 					xmlns="http://www.w3.org/2000/svg"
 				>
 					<defs>
 						<clipPath id="left-clip">
 							<rect x="0" y="0" width="279" height="100%"></rect>
 						</clipPath>
 					</defs>

 					<g class="editor-revision-left">
 						<rect class="editor-removed-line" x="28" y="21" width="251" height="21"></rect>
 						<rect class="editor-added-line" x="311" y="21" width="309" height="21"></rect>
 						<!-- <rect class="editor-added-text" x="433" y="21" width="38" height="21"></rect> -->
 						<rect class="editor-line-current" x="0" y="21" width="calc(100% - 1px)" height="21"></rect>
 						<g class="editor-line editor-line-left" style="clip-path: url(#left-clip)">
 							<text y="14"><tspan x="7" class="editor-line-number">12</tspan><tspan x="40" class="editor-function-declaration">function</tspan><tspan dx="6" class="editor-function-name">gitlens</tspan><tspan class="editor-punctuation">(</tspan><tspan class="editor-function-argument">git</tspan><tspan class="editor-punctuation">:</tspan><tspan dx="6" class="editor-function-argument-type">object</tspan><tspan class="editor-punctuation">)</tspan><tspan dx="6" class="editor-punctuation">{</tspan></text>
 							<text y="36"><tspan x="7" class="editor-line-number">13</tspan><tspan x="40" dx="24" class="editor-function-return">return</tspan><tspan dx="6" class="editor-function-name">supercharged</tspan><tspan class="editor-punctuation">(</tspan><tspan class="editor-function-argument">git</tspan><tspan class="editor-punctuation">)</tspan><tspan class="editor-punctuation">;</tspan></text>
 						</g>
 						<line class="editor-splitter" x1="280" y1="0" x2="280" y2="100%" />
 					</g>
 					<g class="editor-revision-right">
 						<g class="editor-line editor-line-right">
 						<text y="14"><tspan x="290" class="editor-line-number">12</tspan><tspan x="323" class="editor-function-declaration">function</tspan><tspan dx="6" class="editor-function-name">gitlens</tspan><tspan class="editor-punctuation">(</tspan><tspan class="editor-function-argument">git</tspan><tspan class="editor-punctuation">:</tspan><tspan dx="6" class="editor-function-argument-type">object</tspan><tspan class="editor-punctuation">)</tspan><tspan dx="6" class="editor-punctuation">{</tspan></text>
 						<text y="36"><tspan x="290" class="editor-line-number">13</tspan><tspan x="323" dx="24" class="editor-function-return">return</tspan><tspan dx="6" class="editor-function-name"><tspan>super</tspan><tspan class="editor-added-text">DuperC</tspan><tspan>harged</tspan></tspan><tspan class="editor-punctuation">(</tspan><tspan class="editor-function-argument">git</tspan><tspan class="editor-punctuation">)</tspan><tspan class="editor-punctuation">;</tspan><tspan class="editor-cursor">|</tspan></text>
 					</g>
 				</g>
 				</svg>

 				<h3>Commit Graph ✨</h3>
 				<p>
 					The
 				<h3>
 					<a
 						class="muted"
 						href="command:gitlens.showGraph"
 						data-requires="repo"
 						title="Open Commit Graph"
 						aria-label="Open Commit Graph"
 						>Commit Graph</a
 					>
 					helps you easily visualize and keep track of all work in progress<br />
 				</p>

 				<!-- Don't reformat or let prettier reformat the SVG otherwise whitespace will get added incorrect and screw up the positioning -->
 				<!-- prettier-ignore -->
 				<svg class="graph welcome__illustration" width="850" height="290" viewBox="0 0 850 290" fill="none" xmlns="http://www.w3.org/2000/svg">
 					<rect class="graph__container" width="850" height="290" rx="14"/>

 					<rect class="graph__lane-2-background" x="70" y="46" width="126" height="19" rx="4"/>
 					<text class="graph__branch graph__branch-current" x="74" y="59"><tspan dy="1" class="codicon">&#xeab2;</tspan><tspan dx="4" class="codicon">&#xea7a;</tspan><tspan dx="6" dy="-1">main</tspan></text>

 					<rect class="graph__lane-3-background" opacity="0.5" x="70" y="73" width="126" height="19" rx="4"/>
 					<text class="graph__branch" x="74" y="87"><tspan dy="1" class="codicon">&#xebaa;</tspan><tspan dx="4" class="codicon">&#xea64;</tspan><tspan dx="6" dy="-1">feature/onboard</tspan></text>

 					<rect class="graph__lane-4-background" opacity="0.5" x="70" y="99" width="126" height="19" rx="4"/>
 					<text class="graph__branch" x="74" y="113"><tspan dy="1" class="codicon">&#xea7a;</tspan><tspan dx="4" class="codicon">&#xea64;</tspan><tspan dx="6" dy="-1">feature/graph</tspan></text>

 					<rect class="graph__lane-5-background" opacity="0.5" x="70" y="237" width="126" height="19" rx="4"/>
 					<text class="graph__branch" x="74" y="251"><tspan dy="1" class="codicon">&#xea7a;</tspan><tspan dx="6" dy="-1">bug/crash</tspan></text>

 					<rect class="graph__lane-1-background" opacity="0.2" x="216" y="20" width="128" height="18"/>
 					<rect class="graph__lane-1-background" x="342" y="20" width="2" height="18"/>

 					<line class="graph__lane-2-foreground" opacity="0.4" x1="196" y1="56" x2="230" y2="56" stroke-width="2"/>
 					<rect class="graph__lane-2-background" opacity="0.2" x="238" y="47" width="106" height="18"/>
 					<rect class="graph__lane-2-background" x="342" y="47" width="2" height="18"/>

 					<rect class="graph__lane-2-background" opacity="0.2" x="238" y="128" width="106" height="18" />
 					<rect class="graph__lane-2-background" x="342" y="128" width="2" height="18"/>

 					<rect class="graph__lane-2-background" opacity="0.2" x="238" y="263" width="106" height="18"/>
 					<rect class="graph__lane-2-background" x="342" y="263" width="2" height="18"/>

 					<line class="graph__lane-3-foreground" opacity="0.4" x1="196" y1="83" x2="253" y2="83" stroke-width="2"/>
 					<rect class="graph__lane-3-background" opacity="0.2" x="260" y="74" width="84" height="18"/>
 					<rect class="graph__lane-3-background" x="342" y="74" width="2" height="18"/>

 					<rect class="graph__lane-3-background" opacity="0.2" x="260" y="155" width="84" height="18"/>
 					<rect class="graph__lane-3-background" x="342" y="155" width="2" height="18"/>

 					<rect class="graph__lane-3-background" opacity="0.2" x="260" y="209" width="84" height="18"/>
 					<rect class="graph__lane-3-background" x="342" y="209" width="2" height="18"/>

 					<line class="graph__lane-4-foreground" opacity="0.4" x1="196" y1="109" x2="275" y2="109" stroke-width="2"/>
 					<rect class="graph__lane-4-background" opacity="0.2" x="282" y="101" width="62" height="18"/>
 					<rect class="graph__lane-4-background" x="342" y="101" width="2" height="18"/>

 					<rect class="graph__lane-4-background" x="342" y="182" width="2" height="18"/>
 					<rect class="graph__lane-4-background" opacity="0.2" x="282" y="182" width="62" height="18"/>

 					<line class="graph__lane-5-foreground" opacity="0.3" x1="196" y1="246" x2="297" y2="246" stroke-width="2"/>
 					<rect class="graph__lane-5-background" opacity="0.2" x="304" y="236" width="40" height="18"/>
 					<rect class="graph__lane-5-background" x="342" y="236" width="2" height="18"/>
 					<path class="graph__lane-5-foreground" d="M239 270.74H297C301.418 270.74 305 267.158 305 262.74V247" stroke-width="2"/>

 					<line class="graph__lane-1-foreground" x1="217" y1="38" x2="217" y2="319" stroke-width="2" stroke-dasharray="4 4"/>
 					<circle class="graph__lane-1-foreground graph__container" cx="217" cy="29" r="8" stroke-width="2" stroke-dasharray="4 4"/>

 					<rect class="graph__lane-2-background" x="238" y="47" width="2" height="332"/>
 					<circle class="graph__lane-2-foreground graph__container" cx="239" cy="56" r="8" stroke-width="2"/>
 					<circle class="graph__lane-2-foreground graph__container" cx="239" cy="137" r="8" stroke-width="2"/>
 					<circle class="graph__lane-2-foreground graph__container" cx="239" cy="271" r="8" stroke-width="2"/>

 					<rect class="graph__lane-3-background" x="260" y="74" width="2" height="305"/>
 					<circle class="graph__lane-3-foreground graph__container" cx="261" cy="83" r="8" stroke-width="2"/>
 					<circle class="graph__lane-3-foreground graph__container" cx="261" cy="164" r="8" stroke-width="2"/>
 					<circle class="graph__lane-3-foreground graph__container" cx="261" cy="218" r="8" stroke-width="2"/>

 					<rect class="graph__lane-4-background" x="282" y="106" width="2" height="209"/>
 					<circle class="graph__lane-4-foreground graph__container" cx="283" cy="110" r="8" stroke-width="2"/>
 					<circle class="graph__lane-4-foreground graph__container" cx="283" cy="191" r="8" stroke-width="2"/>

 					<circle class="graph__lane-5-foreground graph__container" cx="305" cy="245" r="8" stroke-width="2"/>

 					<text x="366" y="33.5" class="graph__foreground graph__wip"><tspan>Work in progress</tspan><tspan dx="9" dy="1" class="codicon">&#xea73;</tspan><tspan dx="3" dy="-1">2</tspan><tspan dx="9" dy="1" class="codicon">&#xea60;</tspan><tspan dx="3" dy="-1">1</tspan></text>
 					<text class="graph__foreground graph__messages">
 						<tspan x="366" y="59.5">Improves performance &amp; reduces bundle size</tspan>
 						<tspan x="366" y="86.5">Adds brand new welcome experience</tspan>
 						<tspan x="366" y="113.5">Adds new Commit Graph panel layout</tspan>
 						<tspan x="366" y="140.5">Optimizes startup performance</tspan>
 						<tspan x="366" y="167.5">Revamps Home view experience for better utility</tspan>
 						<tspan x="366" y="194.5">Optimizes Commit Graph loading performance</tspan>
 						<tspan x="366" y="221.5">Adds new GitLens Inspect side bar for a better experience</tspan>
 						<tspan x="366" y="248.5">Fixes crash when run on a phone</tspan>
 						<tspan x="366" y="275.5">Updates package dependencies</tspan>
 					</text>

 					<text class="graph__foreground graph__authors">
 						<tspan x="696" y="59.5">Eric Amodio</tspan>
 						<tspan x="696" y="86.5">Keith Daulton</tspan>
 						<tspan x="696" y="113.5">Eric Amodio</tspan>
 						<tspan x="696" y="140.5">Ramin Tadayon</tspan>
 						<tspan x="696" y="167.5">Keith Daulton</tspan>
 						<tspan x="696" y="194.5">Eric Amodio</tspan>
 						<tspan x="696" y="221.5">Keith Daulton</tspan>
 						<tspan x="696" y="248.5">Ramin Tadayon</tspan>
 						<tspan x="696" y="275.5">Ramin Tadayon</tspan>
 					</text>

 				</svg>
 					✨
 				</h3>
 				<p>Helps you easily visualize and keep track of all work in progress<br /></p>
 				<gk-graph-svg></gk-graph-svg>

 				<h3>Side Bar Views</h3>
 				<p>Powerful views into Git that don't come with VS Code</p>
@ -497,20 +270,40 @@
 					<code-icon icon="question"></code-icon> Features which need a repository are currently unavailable
 				</p>

 				<h3>Focus ✨</h3>
 				<p>
 					The
 				<h3>
 					<a
 						class="muted"
 						href="command:gitlens.showFocusPage"
 						data-requires="repo"
 						title="Open Focus"
 						aria-label="Open Focus"
 						>Focus</a
 					>
 					view helps you focus on what's important by providing you with a comprehensive list of all your pull
 					✨
 				</h3>
 				<p>
 					Helps you focus on what's important by providing you with a comprehensive list of all your pull
 					requests and issues on your GitHub repos.
 				</p>

 				<h3>
 					<a
 						class="muted"
 						href="command:gitlens.showTimelineView"
 						data-requires="repo"
 						title="Show Visual File History view"
 						aria-label="Show Visual File History view"
 						>Visual File History</a
 					>
 					✨
 				</h3>
 				<p>
 					Enables you to quickly see the evolution of a file, including when changes were made, how large they
 					were, and who made them. Use it to quickly find when the most impactful changes were made to a file
 					or who best to talk to about file changes and more.
 				</p>
 				<gk-timeline-svg></gk-timeline-svg>

 				<h3>Integrations</h3>
 				<p>GitLens provides issue and pull request auto-linking with many Git hosting services.</p>
 				<p>
@ -518,6 +311,7 @@
 					issues and pull requests, pull requests associated with branches and commits, and avatars.
 				</p>
 			</section>

 			<section class="welcome__section welcome__section-bar">
 				<h2>Get Started</h2>
 				<p>
@ -703,7 +497,7 @@
 			</section>
 		</main>
 		<footer>
 			<p>✨ Requires a trial or subscription to use this on privately hosted repos</p>
 			<p>✨ Requires a trial or subscription for use on privately hosted repos</p>
 		</footer>
 		#{endOfBody}
 	</body>
--- a/src/webviews/apps/welcome/welcome.scss
+++ b/src/webviews/apps/welcome/welcome.scss
@ -16,6 +16,10 @@ a {
 	}
 }

 a.muted {
 	color: var(--color-foreground);
 }

 a,
 button:not([disabled]),
 [tabindex]:not([tabindex='-1']) {
@ -24,10 +28,6 @@ button:not([disabled]),
 	}
 }

 // code-icon {
 // 	font-size: inherit;
 // }

 nav {
 	margin-bottom: 1.6rem;
 }
@ -396,140 +396,20 @@ gk-card p {
 	}
 }

 .editor {
 	border: 0.1rem solid var(--vscode-editorWidget-border);

 	* {
 		user-select: none;
 	}

 	&-line text {
 		font-family: var(--vscode-editor-font-family);
 		font-size: var(--vscode-editor-font-size);
 		font-weight: var(--vscode-editor-font-weight);
 	}

 	&-cursor {
 		fill: var(--vscode-editorCursor-foreground);
 	}

 	&-blame {
 		fill: var(--vscode-gitlens-trailingLineForegroundColor);
 		cursor: pointer;

 		&.is-disabled {
 			opacity: 0;
 		}
 	}

 	&-codelens text {
 		font-family: var(--vscode-font-family);
 		font-size: var(--vscode-font-size);
 		font-weight: var(--vscode-font-weight);

 		fill: var(--vscode-editorCodeLens-foreground);

 		tspan {
 			font-size: 0.8em;
 		}

 		&.is-disabled {
 			opacity: 0;
 		}
 	}

 	&-heatmap {
 		stroke: #7162db;
 	}

 	&-punctuation {
 		fill: var(--vscode-editor-foreground);
 	}

 	&-function-declaration {
 		fill: var(--vscode-symbolIcon-functionForeground);
 	}

 	&-function-name {
 		fill: var(--vscode-symbolIcon-colorForeground);
 	}

 	&-function-argument {
 		fill: var(--vscode-symbolIcon-variableForeground);
 	}

 	&-function-argument-type {
 		fill: var(--vscode-symbolIcon-typeParameterForeground);
 	}

 	&-function-return {
 		fill: var(--vscode-debugTokenExpression-name);
 	}

 	&-line-current {
 		fill: var(--vscode-editor-lineHighlightBackground);
 		stroke: var(--vscode-editor-lineHighlightBorder);
 		stroke-width: 0.1rem;
 		fill-opacity: 0.8;
 	}

 	&-line-number {
 		fill: var(--vscode-editorLineNumber-foreground);
 	}

 	&-line-number-active {
 		fill: var(--vscode-editorLineNumber-activeForeground);
 	}

 	&-gutter {
 		fill: var(--vscode-gitlens-gutterBackgroundColor);
 	}

 	&-gutter-avatar {
 		circle {
 			fill: var(--vscode-editorInfo-foreground);
 		}
 		text {
 			fill: var(--vscode-gitlens-gutterForegroundColor);
 			font-size: 0.75rem;
 		}
 	}

 	&-gutter-text {
 		fill: var(--vscode-gitlens-gutterForegroundColor);
 	}

 	&-removed-line {
 		fill: var(--vscode-diffEditor-removedLineBackground);
 	}
 	&-added-line {
 		fill: var(--vscode-diffEditor-insertedLineBackground);
 	}

 	&-added-text {
 		outline: 1px solid green;
 		fill: green;
 	}

 	&-splitter {
 		stroke: var(--vscode-editorGroup-border);
 	}
 }

@keyframes wiggle {
 	0%,
 	5%,
 	8%,
 	100% {
 		transform: rotate(0) scale(1);
 	}

 	1%,
 	3% {
 	4% {
 		transform: rotate(0.02turn) scale(var(--wiggle-scale-1));
 	}

 	2%,
 	4% {
 	6% {
 		transform: rotate(-0.02turn) scale(var(--wiggle-scale-2));
 	}
 }
@ -555,11 +435,11 @@ gk-card p {

 		&__annotations {
 			&:not(.inactive) {
 				--wiggle-scale-1: 1.08;
 				--wiggle-scale-2: 1.15;
 				--wiggle-scale-1: 1.14;
 				--wiggle-scale-2: 1.28;

 				transform-origin: 60%;
 				animation: wiggle 8s ease-in-out 4s infinite;
 				animation: wiggle 5s ease-in-out 2s infinite;
 				animation-timing-function: steps(8);
 			}

@ -586,11 +466,11 @@ gk-card p {
 		}

 		&__revision {
 			--wiggle-scale-1: 1.08;
 			--wiggle-scale-2: 1.2;
 			--wiggle-scale-1: 1.14;
 			--wiggle-scale-2: 1.28;

 			transform-origin: 5%;
 			animation: wiggle 8s ease-in-out 6s infinite;
 			animation: wiggle 5s ease-in-out 4s infinite;
 			animation-timing-function: steps(8);
 		}

@ -624,224 +504,6 @@ gk-card p {
 	}
 }

 .graph {
 	border: 0.1rem solid var(--vscode-editorWidget-border);

 	text {
 		font-family: var(--vscode-font-family);
 		font-weight: var(--vscode-font-weight);
 		font-size: 1.1rem;
 	}

 	&__container {
 		fill: var(--vscode-editor-background);
 	}

 	&__foreground {
 		fill: var(--vscode-editor-foreground);
 	}

 	&__branch {
 		fill: white;
 	}

 	&__branch-current {
 		font-weight: 700 !important;
 	}

 	&__messages {
 		opacity: 0.7;
 	}

 	&__authors {
 		opacity: 0.45;
 	}

 	&__wip {
 		opacity: 0.45;
 	}

 	&__lane-1-foreground {
 		stroke: var(--vscode-gitlens-graphLane1Color);
 	}
 	&__lane-1-background {
 		fill: var(--vscode-gitlens-graphLane1Color);
 	}

 	&__lane-2-foreground {
 		stroke: var(--vscode-gitlens-graphLane2Color);
 	}
 	&__lane-2-background {
 		fill: var(--vscode-gitlens-graphLane2Color);
 	}

 	&__lane-3-foreground {
 		stroke: var(--vscode-gitlens-graphLane3Color);
 	}
 	&__lane-3-background {
 		fill: var(--vscode-gitlens-graphLane3Color);
 	}

 	&__lane-4-foreground {
 		stroke: var(--vscode-gitlens-graphLane4Color);
 	}
 	&__lane-4-background {
 		fill: var(--vscode-gitlens-graphLane4Color);
 	}

 	&__lane-5-foreground {
 		stroke: var(--vscode-gitlens-graphLane5Color);
 	}
 	&__lane-5-background {
 		fill: var(--vscode-gitlens-graphLane5Color);
 	}
 }

@keyframes fadeInHover {
 	0% {
 		opacity: 0;
 		visibility: visible;
 	}

 	100% {
 		opacity: 1;
 		visibility: visible;
 	}
 }

@keyframes fadeOutHover {
 	0% {
 		opacity: 1;
 		visibility: visible;
 	}

 	100% {
 		opacity: 0;
 		visibility: hidden;
 	}
 }

 .hover {
 	opacity: 0;
 	visibility: hidden;
 	position: absolute;
 	bottom: 30px;
 	right: -30px;
 	animation-duration: 0.2s;
 	animation-timing-function: ease-in-out;
 	animation-fill-mode: forwards;

 	&[hovering='true'] {
 		animation-name: fadeInHover;
 	}

 	&[hovering='false'] {
 		animation-name: fadeOutHover;
 	}

 	&__box {
 		position: relative;
 	}

 	rect {
 		fill: var(--vscode-editorHoverWidget-background);
 		stroke: var(--vscode-editorHoverWidget-border);
 		stroke-width: 1;
 	}

 	line {
 		stroke: var(--vscode-editorHoverWidget-border);
 		stroke-width: 1;
 	}

 	text {
 		font-family: var(--vscode-font-family);
 		font-weight: var(--vscode-font-weight);
 		font-size: 1.1rem;

 		fill: var(--vscode-editorHoverWidget-foreground);
 	}

 	&__diff {
 		tspan {
 			font-family: var(--vscode-editor-font-family);
 			font-weight: var(--vscode-editor-font-weight);
 			font-size: var(--vscode-editor-font-size);
 		}

 		&-removed {
 			fill: var(--vscode-gitDecoration-deletedResourceForeground);
 		}

 		&-added {
 			fill: var(--vscode-gitDecoration-addedResourceForeground);
 		}
 	}

 	&__author {
 		font-weight: 700;
 	}

 	&__date {
 		font-style: italic;
 	}

 	&__link {
 		fill: #3794ff !important;
 	}
 }

 [data-action] {
 	cursor: pointer;
 }

 body[data-feature-blame='off'] {
 	[data-feature-blame='on'] {
 		opacity: 0;
 	}
 }

 .editor-annotations-left,
 .editor-revision-left,
 [data-feature-blame='on'],
 [data-feature-codelens='on'] {
 	transition: opacity 150ms ease-in-out;
 }

 .editor-annotations-right,
 .editor-revision-right {
 	transition: transform 150ms ease-in-out;
 }

 body[data-feature-codelens='off'] {
 	[data-feature-codelens='on'] {
 		opacity: 0;
 	}
 }

 body[data-feature-annotations='off'] {
 	.editor-annotations-left {
 		opacity: 0;
 	}
 	.editor-annotations-right {
 		transform: translateX(-242px);
 	}
 }

 body[data-feature-revision='off'] {
 	.editor-revision-left {
 		opacity: 0;
 	}
 	.editor-revision-right {
 		transform: translateX(-283px);

 		.editor-added-text {
 			outline-color: transparent;
 			fill: inherit;
 		}
 	}
 }

 body {
 	&[data-repos='blocked'] [data-requires='repo'] {
 		opacity: 0.5;
--- a/src/webviews/apps/welcome/welcome.ts
+++ b/src/webviews/apps/welcome/welcome.ts
@ -4,15 +4,22 @@ import type { Disposable } from 'vscode';
 import type { IpcMessage } from '../../protocol';
 import { onIpc } from '../../protocol';
 import type { State } from '../../welcome/protocol';
 import { DidChangeRepositoriesType, UpdateConfigurationCommandType } from '../../welcome/protocol';
 import { DidChangeNotificationType, UpdateConfigurationCommandType } from '../../welcome/protocol';
 import { App } from '../shared/appBase';
 import { DOM } from '../shared/dom';
 import type { AnnotationsSvg } from './components/svg-annotations';
 import type { BlameSvg } from './components/svg-blame';
 import type { RevisionNavigationSvg } from './components/svg-revision-navigation';
 // import { Snow } from '../shared/snow';
 import '../shared/components/code-icon';
 import '../shared/components/button';
 import './components/card';
 import './components/gitlens-logo';
 import './components/gitlens-plus-logo';
 import './components/svg-annotations';
 import './components/svg-blame';
 import './components/svg-graph';
 import './components/svg-revision-navigation';
 import './components/svg-timeline';

 export class WelcomeApp extends App<State> {
 	constructor() {
@ -28,18 +35,6 @@ export class WelcomeApp extends App {
 			...(super.onBind?.() ?? []),
 			DOM.on('[data-feature]', 'change', (e, target: HTMLInputElement) => this.onFeatureToggled(e, target)),
 			DOM.on('[data-feature]', 'click', (e, target: HTMLElement) => this.onFeatureToggled(e, target)),
 			DOM.on('[data-hover]', 'mouseover', (e, target: HTMLElement) => {
 				const hoverTargetId = target.dataset.hover;
 				if (!hoverTargetId) return;

 				document.getElementById(hoverTargetId)?.setAttribute('hovering', 'true');
 			}),
 			DOM.on('[data-hover]', 'mouseout', (e, target: HTMLElement) => {
 				const hoverTargetId = target.dataset.hover;
 				if (!hoverTargetId) return;

 				document.getElementById(hoverTargetId)?.setAttribute('hovering', 'false');
 			}),
 			DOM.on('[data-requires="repo"]', 'click', (e, target: HTMLElement) => this.onRepoFeatureClicked(e, target)),
 		];
 		return disposables;
@ -49,13 +44,13 @@ export class WelcomeApp extends App {
 		const msg = e.data as IpcMessage;

 		switch (msg.method) {
 			case DidChangeRepositoriesType.method:
 			case DidChangeNotificationType.method:
 				this.log(`onMessageReceived(${msg.id}): name=${msg.method}`);

 				onIpc(DidChangeRepositoriesType, msg, params => {
 					this.state.repoFeaturesBlocked = params.repoFeaturesBlocked;
 				onIpc(DidChangeNotificationType, msg, params => {
 					this.state = params.state;
 					this.setState(this.state);
 					this.updateRepoState();
 					this.updateState();
 				});
 				break;
 			default:
@ -79,7 +74,13 @@ export class WelcomeApp extends App {
 		if (!feature) return;

 		if (e.type !== 'change') {
 			this.toggleFeatureState(feature);
 			if (feature === 'revision') {
 				const $el = document.getElementById('revision') as RevisionNavigationSvg;
 				$el.toggled = !$el.toggled;
 			} else if (feature === 'annotations') {
 				const $el = document.getElementById('annotations') as AnnotationsSvg;
 				$el.toggled = !$el.toggled;
 			}

 			return;
 		}
@ -109,24 +110,21 @@ export class WelcomeApp extends App {
 	}

 	private updateVersion() {
 		const { version } = this.state;
 		document.getElementById('version')!.textContent = version;
 		document.getElementById('version')!.textContent = this.state.version;
 	}

 	private updateFeatures() {
 		const { config } = this.state;

 		this.setFeatureState('blame', config.currentLine ?? false);
 		this.setFeatureState('codelens', config.codeLens ?? false);
 	}
 		const $el = document.getElementById('blame') as BlameSvg;
 		$el.inline = config.currentLine ?? false;
 		$el.codelens = config.codeLens ?? false;

 	private setFeatureState(feature: string, on: boolean) {
 		document.body.setAttribute(`data-feature-${feature}`, on ? 'on' : 'off');
 	}
 		let $input = document.getElementById('inline-blame') as HTMLInputElement;
 		$input.checked = config.currentLine ?? false;

 	private toggleFeatureState(feature: string) {
 		const state = document.body.getAttribute(`data-feature-${feature}`);
 		this.setFeatureState(feature, state === 'off');
 		$input = document.getElementById('codelens') as HTMLInputElement;
 		$input.checked = config.codeLens ?? false;
 	}

 	private updateRepoState() {
@ -137,13 +135,3 @@ export class WelcomeApp extends App {

 new WelcomeApp();
 // requestAnimationFrame(() => new Snow());

 function gitlens(code: string) {
 	return supercharged(code);
 }

 gitlens('');

 function supercharged(code: string) {
 	return code;
 }
--- a/src/webviews/welcome/protocol.ts
+++ b/src/webviews/welcome/protocol.ts
@ -8,7 +8,6 @@ export interface State {
 		codeLens: Config['codeLens']['enabled'];
 		currentLine: Config['currentLine']['enabled'];
 	};
 	customSettings?: Record<string, boolean>;
 	repoFeaturesBlocked?: boolean;
 }

@ -20,7 +19,7 @@ export const UpdateConfigurationCommandType = new IpcCommandType
 	'welcome/configuration/update',
 );

 export interface DidChangeRepositoriesParams {
 	repoFeaturesBlocked?: boolean;
 export interface DidChangeParams {
 	state: State;
 }
 export const DidChangeRepositoriesType = new IpcNotificationType<DidChangeRepositoriesParams>('repositories/didChange');
 export const DidChangeNotificationType = new IpcNotificationType<DidChangeParams>('welcome/didChange', true);
--- a/src/webviews/welcome/welcomeWebview.ts
+++ b/src/webviews/welcome/welcomeWebview.ts
@ -1,11 +1,12 @@
 import type { ConfigurationChangeEvent } from 'vscode';
 import { Disposable, workspace } from 'vscode';
 import type { Container } from '../../container';
 import { configuration } from '../../system/configuration';
 import type { IpcMessage } from '../protocol';
 import { onIpc } from '../protocol';
 import type { WebviewController, WebviewProvider } from '../webviewController';
 import type { DidChangeRepositoriesParams, State, UpdateConfigurationParams } from './protocol';
 import { DidChangeRepositoriesType, UpdateConfigurationCommandType } from './protocol';
 import type { State, UpdateConfigurationParams } from './protocol';
 import { DidChangeNotificationType, UpdateConfigurationCommandType } from './protocol';

 const emptyDisposable = Object.freeze({
 	dispose: () => {
@ -18,10 +19,9 @@ export class WelcomeWebviewProvider implements WebviewProvider {

 	constructor(private readonly container: Container, private readonly host: WebviewController<State>) {
 		this._disposable = Disposable.from(
 			this.container.git.onDidChangeRepositories(this.notifyDidChangeRepositories, this),
 			!workspace.isTrusted
 				? workspace.onDidGrantWorkspaceTrust(this.notifyDidChangeRepositories, this)
 				: emptyDisposable,
 			configuration.onDidChange(this.onConfigurationChanged, this),
 			this.container.git.onDidChangeRepositories(this.notifyDidChange, this),
 			!workspace.isTrusted ? workspace.onDidGrantWorkspaceTrust(this.notifyDidChange, this) : emptyDisposable,
 		);
 	}

@ -30,18 +30,13 @@ export class WelcomeWebviewProvider implements WebviewProvider {
 	}

 	includeBootstrap(): State {
 		const { repoFeaturesBlocked } = this.getRepositoriesState();
 		return this.getState();
 	}

 		return {
 			timestamp: Date.now(),
 			version: this.container.version,
 			// Make sure to get the raw config, not from the container which has the modes mixed in
 			config: {
 				codeLens: configuration.get('codeLens.enabled'),
 				currentLine: configuration.get('currentLine.enabled'),
 			},
 			repoFeaturesBlocked: repoFeaturesBlocked,
 		};
 	private onConfigurationChanged(e: ConfigurationChangeEvent) {
 		if (!configuration.changed(e, 'codeLens.enabled') && !configuration.changed(e, 'currentLine.enabled')) return;

 		this.notifyDidChange();
 	}

 	onMessageReceived(e: IpcMessage) {
@ -51,15 +46,19 @@ export class WelcomeWebviewProvider implements WebviewProvider {
 				break;
 		}
 	}

 	private getRepositoriesState(): DidChangeRepositoriesParams {
 		// const count = this.container.git.repositoryCount;
 		const openCount = this.container.git.openRepositoryCount;
 		const hasUnsafe = this.container.git.hasUnsafeRepositories();
 		const trusted = workspace.isTrusted;

 	private getState(): State {
 		return {
 			repoFeaturesBlocked: !trusted || openCount === 0 || hasUnsafe,
 			timestamp: Date.now(),
 			version: this.container.version,
 			// Make sure to get the raw config so to avoid having the mode mixed in
 			config: {
 				codeLens: configuration.get('codeLens.enabled', undefined, true, true),
 				currentLine: configuration.get('currentLine.enabled', undefined, true, true),
 			},
 			repoFeaturesBlocked:
 				!workspace.isTrusted ||
 				this.container.git.openRepositoryCount === 0 ||
 				this.container.git.hasUnsafeRepositories(),
 		};
 	}

@ -67,7 +66,7 @@ export class WelcomeWebviewProvider implements WebviewProvider {
 		void configuration.updateEffective(`${params.type}.enabled`, params.value);
 	}

 	private notifyDidChangeRepositories() {
 		void this.host.notify(DidChangeRepositoriesType, this.getRepositoriesState());
 	private notifyDidChange() {
 		void this.host.notify(DidChangeNotificationType, { state: this.getState() });
 	}
 }