Adds autolink example and persistent help text

src/webviews/apps/settings/partials/autolinks.html

@@ -6,6 +6,11 @@
 
 	<div class="section__collapsible">
 		<div class="section__group">
+			<div class="section__preview mb-0">
+				<img class="image__preview image__preview--fit" src="#{webroot}/media/hovers-autolink.webp" loading="lazy" width="329" height="112">
+			</div>
+		</div>
+		<div class="section__group">
 			<div class="section__content">
 				<div class="setting-list" data-component="autolinks"></div>
 				<p class="mb-0">

src/webviews/apps/settings/settings.scss

@@ -209,6 +209,10 @@ header {
 	width: 600px;
 }
 
+.image__preview--fit {
+	width: max-content;
+}
+
 .image__preview--overlay {
 	left: 0;
 	position: absolute;

src/webviews/apps/settings/settings.ts

@@ -241,7 +241,15 @@ export class SettingsApp extends AppWithConfig {
 		const $root = document.querySelector('[data-component="autolinks"]');
 		if ($root == null) return;
 
-		const autolinkTemplate = (index: number, autolink?: AutolinkReference, isNew = false) => `
+		const helpTemplate = () => `
+			<div class="setting__hint">
+				<span style="line-height: 2rem">
+					<i class="icon icon--sm icon__info"></i> Matches prefixes that are followed by a reference value within commit messages.<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The URL must contain a <code>&lt;num&gt;</code> for the reference value to be included in the link.
+				</span>
+			</div>
+		`;
+
+		const autolinkTemplate = (index: number, autolink?: AutolinkReference, isNew = false, renderHelp = true) => `
 			<div class="setting${ isNew ? ' hidden" data-region="autolink' : ''}">
 				<div class="setting__group">
 					<div class="setting__input setting__input--short setting__input--with-actions">
@@ -316,21 +324,21 @@ export class SettingsApp extends AppWithConfig {
 						`}
 					</div>
 				</div>
-				${ isNew ? `
-					<span class="setting__hint">
-						<span style="line-height: 2rem">
-							<i class="icon icon--sm icon__info"></i> Matches prefixes that are followed by a reference value within commit messages.<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The URL must contain a <code>&lt;num&gt;</code> for the reference value to be included in the link.
-						</span>
-					</span>
-				`: ''}
+				${ renderHelp && isNew ? helpTemplate() : ''}
 			</div>
 		`;
 
 		const fragment: string[] = [];
-		if (this.state.config.autolinks != null) {
-			this.state.config.autolinks.forEach((autolink, i) => fragment.push(autolinkTemplate(i, autolink)));
+		const autolinks = (this.state.config.autolinks?.length || 0) > 0;
+		if (autolinks) {
+			this.state.config.autolinks?.forEach((autolink, i) => fragment.push(autolinkTemplate(i, autolink)));
+		}
+
+		fragment.push(autolinkTemplate(this.state.config.autolinks?.length ?? 0, undefined, true, !autolinks));
+
+		if (autolinks) {
+			fragment.push( helpTemplate());
 		}
-		fragment.push(autolinkTemplate(this.state.config.autolinks?.length ?? 0, undefined, true));
 
 		$root.innerHTML = fragment.join('');
 	}