From 3ca4a42c82f61417173f458c0b3aa408ce06a3bf Mon Sep 17 00:00:00 2001
From: Pavel Djundik <xPaw@users.noreply.github.com>
Date: Fri, 27 Sep 2024 23:00:11 +0300
Subject: [PATCH] Add group achievements option link

---
 options/options.css  |  8 ++++++++
 options/options.html |  4 ++++
 options/options.js   | 17 +++++++++++++++++
 3 files changed, 29 insertions(+)

diff --git a/options/options.css b/options/options.css
index 3168bf53..2b1403da 100644
--- a/options/options.css
+++ b/options/options.css
@@ -160,6 +160,14 @@ footer p {
 	margin-top: 0.4rem;
 }
 
+:focus,
+.checkbox:focus {
+	outline: solid;
+	outline-color: #00aff4;
+	outline-offset: 4px;
+	outline-width: 2px;
+}
+
 .checkbox > input {
 	width: 1rem;
 	height: 1rem;
diff --git a/options/options.html b/options/options.html
index ace66eb3..071fba53 100644
--- a/options/options.html
+++ b/options/options.html
@@ -215,6 +215,10 @@ <h3 data-msg="options_header_achievements"></h3>
 					<input type="checkbox" class="option-check" data-option="achievements-global-unlock" checked>
 					<div data-msg="options_achievements_global_unlock"></div>
 				</label>
+				<label class="checkbox">
+					<input type="checkbox" class="option-check" checked disabled>
+					<div><a href="#" class="js-scroll-to-option" data-option="achievements-group-updates" data-msg="options_achievement_groups"></a> 🠉</div>
+				</label>
 				<div class="checkbox">
 					<input type="checkbox" class="option-check" checked disabled>
 					<div data-msg="options_modernized_achievements"></div>
diff --git a/options/options.js b/options/options.js
index 476346cb..f0348b72 100644
--- a/options/options.js
+++ b/options/options.js
@@ -49,6 +49,8 @@
 	let element;
 	let starDismissed = false;
 	const checkboxes = document.querySelectorAll( '.option-check:not(:disabled)' );
+
+	/** @type {Object.<string, HTMLElement>} */
 	const options =
 	{
 		'clicked-star': null,
@@ -106,6 +108,21 @@
 		}
 	} );
 
+	document.querySelectorAll( '.js-scroll-to-option' ).forEach( ( el ) =>
+	{
+		el.addEventListener( 'click', ( e )=>
+		{
+			e.preventDefault();
+
+			const option = options[ el.dataset.option ];
+			option.scrollIntoView( {
+				behavior: 'smooth',
+				block: 'center',
+			} );
+			option.closest( 'label' ).focus( { preventScroll: true } );
+		} );
+	} );
+
 	// Must be synced with host_permissions in manifest.json
 	const permissions = {
 		origins: [