Add sticky extensions info banner

source/_locales/de/messages.json

@@ -26,6 +26,9 @@
 	"searchTxt": {
 		"message": "Nach Name suchen…"
 	},
+	"stickyInfoMsg": {
+		"message": "Du kannst <kbd>Strg+Klick</kbd> auf Erweiterungen verwenden, um sie am oberen Ende der Liste anzuheften."
+	},
 	"undoInfoMsg": {
 		"message": "Du kannst deine letzte Aktionen rückgäng machen oder wiederherstellen. Dies funktioniert aber nur solange wie dieser Popup-Dialog geöffnet ist. Drücke dazu <kbd>Strg+Z</kbd>."
 	},

source/_locales/en/messages.json

@@ -26,6 +26,9 @@
 	"searchTxt": {
 		"message": "Search by name…"
 	},
+	"stickyInfoMsg": {
+		"message": "You can <kbd>Ctrl+Click</kbd> on extensions to stick them to the top of the list."
+	},
 	"undoInfoMsg": {
 		"message": "You can undo (with <kbd>Ctrl+Z</kbd>) and redo your last action until you close this popup."
 	},

source/_locales/es/messages.json

@@ -26,6 +26,9 @@
 	"searchTxt": {
 		"message": "Buscar por nombre…"
 	},
+	"stickyInfoMsg": {
+		"message": "Puedes hacer <kbd>Ctrl+Clic</kbd> en las extensiones para fijarlas en la parte superior de la lista."
+	},
 	"undoInfoMsg": {
 		"message": "Puedes deshacer (con <kbd>Ctrl+Z</kbd>) y rehacer tu última acción hasta que cierres esta ventana."
 	},

source/_locales/fr/messages.json

@@ -35,6 +35,9 @@
 		"message": "Rechercher les extensions…",
 		"hash": "1220702106584c8c90c0f41c486a3e0b"
 	},
+	"stickyInfoMsg": {
+		"message": "Vous pouvez faire <kbd>Ctrl+Clic</kbd> sur les extensions pour les épingler en haut de la liste."
+	},
 	"undoInfoMsg": {
 		"message": "Vous pouvez annuler et refaire votre dernière action jusqu'à ce que vous fermiez cette fenêtre contextuelle. Appuyez sur <kbd>Ctrl+Z</kbd>.",
 		"hash": "4105b6ebe6d3c7badf1a2bf9d425ddbb"

source/_locales/he/messages.json

@@ -26,6 +26,9 @@
 	"searchTxt": {
 		"message": "חיפוש תוסף לפי שם"
 	},
+	"stickyInfoMsg": {
+		"message": "אתה יכול לעשות <kbd>Ctrl+לחיצה</kbd> על תוספים כדי להצמיד שלהם לראש הרשימה."
+	},
 	"undoInfoMsg": {
 		"message": "ניתן לבטל או לבצע מחדש פעולות עד לסגירת החלון באמצעות <kbd>Ctrl+Z</kbd>."
 	},

source/_locales/it/messages.json

@@ -35,6 +35,9 @@
 		"message": "Cerca per nome…",
 		"hash": "1220702106584c8c90c0f41c486a3e0b"
 	},
+	"stickyInfoMsg": {
+		"message": "Puoi fare <kbd>Ctrl+Click</kbd> sulle estensioni portarle in cima alla lista."
+	},
 	"undoInfoMsg": {
 		"message": "Puoi annullare (con <kbd>Ctrl+Z</kbd>) e ripetere la tua ultima azione finché non chiudi questo popup.",
 		"hash": "4c9adc1bb6418b3ecbc77f3ddda22a70"

source/_locales/ja/messages.json

@@ -17,6 +17,9 @@
 	"searchTxt": {
 		"message": "拡張機能を検索する"
 	},
+	"stickyInfoMsg": {
+		"message": "拡張機能を <kbd>Ctrl+クリック</kbd> すると、リストの上部に固定できます。"
+	},
 	"uninstall": {
 		"message": "この拡張機能をアンインストールする"
 	}

source/_locales/ko/messages.json

@@ -17,6 +17,9 @@
 	"searchTxt": {
 		"message": "확장 기능 검색"
 	},
+	"stickyInfoMsg": {
+		"message": "확장 프로그램을 <kbd>Ctrl+클릭</kbd>하여 목록 상단에 고정할 수 있습니다."
+	},
 	"uninstall": {
 		"message": "이 확장 기능을 제거하십시오"
 	}

source/_locales/lv/messages.json

@@ -35,6 +35,9 @@
 		"message": "Meklēt pēc nosaukuma…",
 		"hash": "1220702106584c8c90c0f41c486a3e0b"
 	},
+	"stickyInfoMsg": {
+		"message": "Jūs varat izmantot <kbd>Ctrl+Klikšķis</kbd> uz paplašinājumiem, lai tos piespraustu saraksta augšpusē."
+	},
 	"undoInfoMsg": {
 		"message": "Jūs varat atsaukt (ar <kbd>Ctrl+Z</kbd>) un atcelt savu pēdējo darbību, līdz aizverat šo uznirstošo logu.",
 		"hash": "8044307e478d0cedbc81a0cba56f601d"

source/_locales/nl/messages.json

@@ -35,6 +35,9 @@
 		"message": "Zoek op naam…",
 		"hash": "1220702106584c8c90c0f41c486a3e0b"
 	},
+	"stickyInfoMsg": {
+		"message": "Je kunt <kbd>Ctrl+Klik</kbd> op extensies gebruiken om ze bovenaan de lijst vast te zetten."
+	},
 	"undoInfoMsg": {
 		"message": "Je kan je laatste actie ongedaan maken of opnieuw uitvoeren totdat je deze popup sluit. Druk op <kbd>Ctrl+Z</kbd>.",
 		"hash": "b8be6c1fc88c7e6042b054effb2c6981"

source/_locales/pl/messages.json

@@ -35,6 +35,9 @@
 		"message": "Wyszukuj po nazwie",
 		"hash": "1220702106584c8c90c0f41c486a3e0b"
 	},
+	"stickyInfoMsg": {
+		"message": "Możesz użyć <kbd>Ctrl+Kliknięcie</kbd> na rozszerzenia, aby przypiąć je na górze listy."
+	},
 	"undoInfoMsg": {
 		"message": "Możesz cofnąć (za pomocą <kbd>Ctrl+Z</kbd>) i powtórzyć ostatnią czynność, dopóki nie zamkniesz tego okna.",
 		"hash": "8044307e478d0cedbc81a0cba56f601d"

source/_locales/ru/messages.json

@@ -17,6 +17,9 @@
 	"searchTxt": {
 		"message": "Поиск расширений"
 	},
+	"stickyInfoMsg": {
+		"message": "Вы можете нажать <kbd>Ctrl+Клик</kbd> на расширения, чтобы закрепить их вверху списка."
+	},
 	"uninstall": {
 		"message": "Удалить это расширение"
 	}

source/_locales/tr/messages.json

@@ -42,5 +42,8 @@
 	"uninstall": {
 		"message": "Kaldır",
 		"hash": "6c51642469a9fec1b394358b0a2ada5b"
+	},
+	"stickyInfoMsg": {
+		"message": "Uzantıları listenin en üstüne sabitlemek için <kbd>Ctrl+Tıklama</kbd> yapabilirsiniz."
 	}
 }

source/_locales/zh_CN/messages.json

@@ -20,6 +20,9 @@
 	"searchTxt": {
 		"message": "查找扩展"
 	},
+	"stickyInfoMsg": {
+		"message": "您可以按 <kbd>Ctrl+点击</kbd> 扩展来将它们钉选到列表顶部。"
+	},
 	"undoInfoMsg": {
 		"message": "在关闭这个窗口前你可以撤销你的操作。 中按 <kbd>Ctrl+Z</kbd>。"
 	},

source/_locales/zh_TW/messages.json

@@ -35,6 +35,9 @@
 		"message": "搜尋擴展",
 		"hash": "1220702106584c8c90c0f41c486a3e0b"
 	},
+	"stickyInfoMsg": {
+		"message": "您可以按 <kbd>Ctrl+點擊</kbd> 擴展來將它們釘選到列表頂部。"
+	},
 	"undoInfoMsg": {
 		"message": "在關閉這個窗口前你可以撤銷你的操作。 中按<kbd>Ctrl+Z</kbd>。",
 		"hash": "4105b6ebe6d3c7badf1a2bf9d425ddbb"

source/app.svelte

@@ -15,6 +15,7 @@
 
 	const options = optionsStorage.getAll();
 	let showExtras = false;
+	let showStickyInfoMessage = !localStorage.getItem('sticky-info-message');
 	let showInfoMessage = !localStorage.getItem('undo-info-message');
 	let userClickedHideInfoMessage = false; // "Disable/enable all" shows the button again, unless the user clicked already "hide" in the current session
 
@@ -42,11 +43,16 @@
 	}
 
 	function hideInfoMessage() {
-		localStorage.setItem('undo-info-message', 1);
+		localStorage.setItem('undo-info-message', Date.now());
 		showInfoMessage = false;
 		userClickedHideInfoMessage = true;
 	}
 
+	function hideStickyInfoMessage() {
+		localStorage.setItem('sticky-info-message', Date.now());
+		showStickyInfoMessage = false;
+	}
+
 	function keyboardNavigationHandler(event) {
 		switch (event.key) {
 			case 'Tab':
@@ -88,7 +94,7 @@
 
 	async function handleInstalled(installed) {
 		if (installed.type === 'extension') {
-			extensions = await prepareExtensionList(await chrome.management.getAll());
+			prepare();
 		}
 	}
 
@@ -185,6 +191,15 @@
 			>
 		</p>
 	{/if}
+	{#if showStickyInfoMessage}
+		<p class="notice">
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -- Static -->
+			{@html replaceModifierIfMac(getI18N('stickyInfoMsg'), '')}
+			<a class="hide-action" href="#hide" on:click={hideStickyInfoMessage}
+				>{getI18N('hideInfoMsg')}</a
+			>
+		</p>
+	{/if}
 	<div class="header">
 		<!-- svelte-ignore a11y-autofocus -->
 		<input

source/style.css

@@ -123,7 +123,7 @@ button:hover,
 
 /* Separate pinned extensions from the rest. Don't apply if they're *all* pinned */
 .ext.pinned:nth-last-child(1 of .pinned).ext:not(:last-child) {
-	border-bottom: 5px solid var(--pinned-color);
+	border-bottom-width: 5px;
 }
 
 .ext-name {
@@ -151,13 +151,14 @@ button:hover,
 }
 
 .ext > :not(.ext-name) {
-	padding: 0 0.3em;
+	padding-inline: 0.3em;
 	opacity: 20%;
 	flex-shrink: 0;
 }
 
 .ext > :last-child:not(.ext-name) {
-	margin-inline-end: var(--margin);
+	/* Adjust the padding of the right-most columm to optically align the icons with the burger */
+	padding-inline: calc(var(--margin) + 1px);
 }
 
 /* Don't use .ext:hover https://github.com/hankxdev/one-click-extensions-manager/pull/109 */