feat: Add hover and long press tooltips to quicktools items

src/components/quickTools/footer.js

@@ -2,8 +2,9 @@
  * @typedef {import('html-tag-js/ref')} Ref
  */
 
+import { hideTooltip, showTooltip } from "components/tooltip";
 import settings from "lib/settings";
-import items, { ref } from "./items";
+import items, { description, ref } from "./items";
 
 /**
  * Create a row with common buttons
@@ -41,9 +42,9 @@ export const Row = ({ row }) => {
 export const SearchRow1 = ({ inputRef }) => (
 	<div className="button-container" id="search_row1">
 		<input ref={inputRef} type="search" placeholder={strings.search} />
-		<RowItem icon="arrow_back" action="search-prev" />
-		<RowItem icon="arrow_forward" action="search-next" />
-		<RowItem icon="settings" action="search-settings" />
+		<RowItem id="search-prev" icon="arrow_back" action="search-prev" />
+		<RowItem id="search-next" icon="arrow_forward" action="search-next" />
+		<RowItem id="search-settings" icon="settings" action="search-settings" />
 	</div>
 );
 
@@ -54,8 +55,12 @@ export const SearchRow1 = ({ inputRef }) => (
 export const SearchRow2 = ({ inputRef, posRef, totalRef }) => (
 	<div className="button-container" id="search_row2">
 		<input ref={inputRef} type="text" placeholder={strings.replace} />
-		<RowItem icon="replace" action="search-replace" />
-		<RowItem icon="replace_all" action="search-replace-all" />
+		<RowItem id="search-replace" icon="replace" action="search-replace" />
+		<RowItem
+			id="search-replace-all"
+			icon="replace_all"
+			action="search-replace-all"
+		/>
 		<div className="search-status">
 			<span ref={posRef}>0</span>
 			<span>of</span>
@@ -114,9 +119,18 @@ export function RowItem({ id, icon, letters, action, value, ref, repeat }) {
 			data-action={action}
 			data-repeat={repeat}
 			vibrate="true"
+			aria-label={id ? description(id) : ""}
 		></button>
 	);
+	if (id) {
+		$item.addEventListener("mouseenter", () => {
+			showTooltip($item, description(id));
+		});
 
+		$item.addEventListener("mouseleave", () => {
+			hideTooltip();
+		});
+	}
 	if (typeof value === "function") {
 		$item.value = value;
 	} else if (value !== undefined) {

src/components/tooltip/index.js

@@ -0,0 +1,87 @@
+import "./style.scss";
+import { animate } from "motion";
+
+let tooltip;
+let rafId = null;
+
+function createTooltip() {
+	if (tooltip) return tooltip;
+
+	tooltip = document.createElement("div");
+	tooltip.className = "acode-tooltip";
+	document.body.appendChild(tooltip);
+
+	return tooltip;
+}
+
+export function showTooltip(target, text) {
+	if (!target || !text) return;
+
+	const $tooltip = createTooltip();
+
+	$tooltip.textContent = text;
+
+	const rect = target.getBoundingClientRect();
+
+	if (rafId !== null) {
+		cancelAnimationFrame(rafId);
+	}
+	rafId = requestAnimationFrame(() => {
+		const width = $tooltip.offsetWidth;
+		const height = $tooltip.offsetHeight;
+
+		const left = Math.max(
+			8,
+			Math.min(
+				window.innerWidth - width - 8,
+				rect.left + rect.width / 2 - width / 2,
+			),
+		);
+
+		const top = Math.max(8, rect.top - height - 10);
+
+		$tooltip.style.left = `${left}px`;
+		$tooltip.style.top = `${top}px`;
+		if (document.body.classList.contains("no-animation")) {
+			$tooltip.style.opacity = "1";
+			$tooltip.style.transform = "translateY(0)";
+			rafId = null;
+			return;
+		}
+		animate(
+			$tooltip,
+			{
+				opacity: 1,
+				transform: "translateY(0px)",
+			},
+			{
+				duration: 0.15,
+			},
+		);
+		rafId = null;
+	});
+}
+
+export function hideTooltip() {
+	if (!tooltip) return;
+
+	if (rafId !== null) {
+		cancelAnimationFrame(rafId);
+		rafId = null;
+	}
+	if (document.body.classList.contains("no-animation")) {
+		tooltip.style.opacity = "0";
+		tooltip.style.transform = "translateY(5px)";
+		return;
+	}
+	animate(
+		tooltip,
+		{
+			opacity: 0,
+			transform: "translateY(5px)",
+		},
+		{
+			duration: 0.15,
+		},
+	);
+}

src/components/tooltip/style.scss

@@ -0,0 +1,24 @@
+.acode-tooltip {
+	position: fixed;
+
+	padding: 6px 10px;
+
+	background: var(--popup-background-color);
+	color: var(--popup-text-color);
+	border: 1px solid var(--popup-border-color);
+	box-shadow: 0 0 4px var(--box-shadow-color);
+	border-radius: var(--popup-border-radius);
+
+	font-size: 12px;
+
+	white-space: nowrap;
+
+	pointer-events: none;
+
+	opacity: 0;
+
+	transform: translateY(5px);
+
+	z-index: 999999;
+}
+

src/handlers/quickToolsInit.js

@@ -1,5 +1,7 @@
 import { redoDepth, undoDepth } from "@codemirror/commands";
 import quickTools from "components/quickTools";
+import { description } from "components/quickTools/items";
+import { hideTooltip, showTooltip } from "components/tooltip";
 import config from "lib/config";
 import appSettings from "lib/settings";
 import actions, { key } from "./quickTools";
@@ -18,6 +20,7 @@ let startTime;
 let contextmenuTimeout;
 let active = false; // is button already active
 let slide = 0;
+let longPress = false;
 
 /**@type {HTMLElement} */
 let $row;
@@ -37,6 +40,7 @@ function reset() {
 	touchMoved = undefined;
 	contextmenuTimeout = null;
 	active = false;
+	longPress = false;
 }
 
 function clearTouchFeedback() {
@@ -168,6 +172,7 @@ function onclick(e) {
 	e.preventDefault();
 	e.stopPropagation();
 	click(e.target);
+	hideTooltip();
 	clearTimeout(timeout);
 }
 
@@ -189,13 +194,17 @@ function touchstart(e) {
 	e.preventDefault();
 	e.stopPropagation();
 
-	if ($el.dataset.repeat === "true") {
-		contextmenuTimeout = setTimeout(() => {
-			if (touchMoved) return;
+	contextmenuTimeout = setTimeout(() => {
+		if (touchMoved) return;
+
+		longPress = true;
+		showTooltip($el, description($el.dataset.id));
+
+		if ($el.dataset.repeat === "true") {
 			contextmenu = true;
 			oncontextmenu(e);
-		}, CONTEXT_MENU_TIMEOUT);
-	}
+		}
+	}, CONTEXT_MENU_TIMEOUT);
 
 	if ($el.classList.contains("active")) {
 		active = true;
@@ -299,7 +308,7 @@ function touchend(e) {
 		return;
 	}
 
-	if ($touchstart !== $el || contextmenu) {
+	if ($touchstart !== $el || contextmenu || longPress) {
 		touchcancel(e);
 		return;
 	}
@@ -320,6 +329,7 @@ function touchcancel(e) {
 	clearTimeout(timeout);
 	clearTimeout(contextmenuTimeout);
 	clearTouchFeedback();
+	hideTooltip();
 }
 
 /**

src/lang/ar-ye.json

@@ -382,6 +382,11 @@
 	"quicktools:exclamation": "إدراج علامة تعجب !",
 	"quicktools:alt-key": "مفتاح Alt",
 	"quicktools:meta-key": "مفتاح Windows/Meta",
+	"quicktools:search-prev": "Previous Match",
+	"quicktools:search-next": "Next Match",
+	"quicktools:search-settings": "Search Settings",
+	"quicktools:search-replace": "Replace",
+	"quicktools:search-replace-all": "Replace All",
 	"info-quicktoolssettings": "خصص أزرار الاختصارات ومفاتيح لوحة التحكم في شريط الأدوات السريع أسفل المحرر.",
 	"info-excludefolders": "استخدم النمط **/node_modules/** لتجاهل ملفات مجلد node_modules في القائمة والبحث.",
 	"missed files": "تم فحص {count} ملفاً بعد بدء البحث ولن يتم تضمينها في النتائج.",

src/lang/be-by.json

@@ -382,6 +382,11 @@
 	"quicktools:exclamation": "Уставіць клічнік",
 	"quicktools:alt-key": "Alt",
 	"quicktools:meta-key": "Windows (Meta)",
+	"quicktools:search-prev": "Previous Match",
+	"quicktools:search-next": "Next Match",
+	"quicktools:search-settings": "Search Settings",
+	"quicktools:search-replace": "Replace",
+	"quicktools:search-replace-all": "Replace All",
 	"info-quicktoolssettings": "Наладзьце спалучэнні клавішы і клавішы клавіятуры ў кантэйнеры хуткіх інструментаў пад рэдактарам, каб павысіць зручнасць працы.",
 	"info-excludefolders": "Выкарыстоўвайце шаблон **/node_modules/**, каб ігнараваць усе файлы з каталога node_modules. Гэта выключыць файлы са спіса і пошуку файлаў.",
 	"missed files": "Ад пачатку пошуку апрацавана {count} файлаў. Яны не будуць уключаны ў пошук.",

src/lang/bn-bd.json

@@ -382,6 +382,11 @@
 	"quicktools:exclamation": "আশ্চর্যবোধক চিহ্ন যোগ করুন",
 	"quicktools:alt-key": "আল্ট কী",
 	"quicktools:meta-key": "উইন্ডোজ/মেটা কী",
+	"quicktools:search-prev": "Previous Match",
+	"quicktools:search-next": "Next Match",
+	"quicktools:search-settings": "Search Settings",
+	"quicktools:search-replace": "Replace",
+	"quicktools:search-replace-all": "Replace All",
 	"info-quicktoolssettings": "সম্পাদকের নিচে Quicktools কন্টেইনারে শর্টকাট বাটন এবং কীবোর্ড কী কাস্টমাইজ করুন, যাতে কোডিং অভিজ্ঞতা উন্নত হয়।",
 	"info-excludefolders": "node_modules ফোল্ডারের সব ফাইল উপেক্ষা করতে /node_modules/ প্যাটার্ন ব্যবহার করুন। এটি ফাইলগুলো তালিকাভুক্ত হতে বাধা দেবে এবং সার্চে অন্তর্ভুক্ত হবে না।",
 	"missed files": "সার্চ শুরু হওয়ার পরে {count} ফাইল স্ক্যান করা হয়েছে এবং সার্চে অন্তর্ভুক্ত হবে না।",

src/lang/cs-cz.json

@@ -382,6 +382,11 @@
 	"quicktools:exclamation": "Vložit vykřičník",
 	"quicktools:alt-key": "Klávesa Alt",
 	"quicktools:meta-key": "Klávesa Windows/Meta",
+	"quicktools:search-prev": "Previous Match",
+	"quicktools:search-next": "Next Match",
+	"quicktools:search-settings": "Search Settings",
+	"quicktools:search-replace": "Replace",
+	"quicktools:search-replace-all": "Replace All",
 	"info-quicktoolssettings": "V rychlých nástrojích pod editorem si můžete přizpůsobit tlačítka a klávesové zkratky.",
 	"info-excludefolders": "Použijte vzor **/node_modules/** pro ignorování všech souborů ze složky node_modules. Tím se soubory vyloučí ze seznamu a také zabrání jejich zahrnutí do vyhledávání souborů.",
 	"missed files": "Po zahájení vyhledávání bylo naskenováno {count} souborů, které nebudou zahrnuty do vyhledávání.",

src/lang/de-de.json

@@ -382,6 +382,11 @@
 	"quicktools:exclamation": "Ausrufezeichen einfügen",
 	"quicktools:alt-key": "Alt-Taste",
 	"quicktools:meta-key": "Windows-Taste",
+	"quicktools:search-prev": "Previous Match",
+	"quicktools:search-next": "Next Match",
+	"quicktools:search-settings": "Search Settings",
+	"quicktools:search-replace": "Replace",
+	"quicktools:search-replace-all": "Replace All",
 	"info-quicktoolssettings": "Anpassen der Schnellwahl-Schaltflächen und -Tasten im Schnellwerkzeug-Container unterhalb des Editors, um Ihre Programmiererfahrung zu verbessern.",
 	"info-excludefolders": "Benutzen Sie das Muster **/node_modules/**, um alle Dateien im Ordner node_modules auszuschließen. Dadurch werden die Dateien nicht aufgelistet und auch nicht in die Dateisuche einbezogen.",
 	"missed files": "Nach Beginn der Suche wurden {count} Dateien gescannt und werden nicht in die Suche einbezogen.",

src/lang/en-us.json

@@ -394,6 +394,11 @@
 	"quicktools:exclamation": "Insert exclamation",
 	"quicktools:alt-key": "Alt key",
 	"quicktools:meta-key": "Windows/Meta key",
+	"quicktools:search-prev": "Previous Match",
+	"quicktools:search-next": "Next Match",
+	"quicktools:search-settings": "Search Settings",
+	"quicktools:search-replace": "Replace",
+	"quicktools:search-replace-all": "Replace All",
 	"info-quicktoolssettings": "Customize shortcut buttons and keyboard keys in the Quicktools container below the editor to enhance your coding experience.",
 	"info-excludefolders": "Use the pattern **/node_modules/** to ignore all files from the node_modules folder. This will exclude the files from being listed and will also prevent them from being included in file searches.",
 	"missed files": "Scanned {count} files after search started and will not be included in search.",

src/lang/es-sv.json

@@ -382,6 +382,11 @@
 	"quicktools:exclamation": "Insertar exclamación",
 	"quicktools:alt-key": "Tecla Alt",
 	"quicktools:meta-key": "Tecla Windows",
+	"quicktools:search-prev": "Previous Match",
+	"quicktools:search-next": "Next Match",
+	"quicktools:search-settings": "Search Settings",
+	"quicktools:search-replace": "Replace",
+	"quicktools:search-replace-all": "Replace All",
 	"info-quicktoolssettings": "Personalice los botones de acceso rápido y las teclas del teclado en el contenedor de herramientas rápidas situado debajo del editor para mejorar su experiencia de codificación.",
 	"info-excludefolders": "Utilice el patrón **/node_modules/** para ignorar todos los archivos de la carpeta node_modules. Esto excluirá los archivos de la lista y también evitará que se incluyan en las búsquedas de archivos.",
 	"missed files": "Se han escaneado {count} archivos después de iniciarse la búsqueda y no se incluirán en ella.",

src/lang/fr-fr.json

@@ -382,6 +382,11 @@
 	"quicktools:exclamation": "Insert exclamation",
 	"quicktools:alt-key": "Alt key",
 	"quicktools:meta-key": "Windows/Meta key",
+	"quicktools:search-prev": "Previous Match",
+	"quicktools:search-next": "Next Match",
+	"quicktools:search-settings": "Search Settings",
+	"quicktools:search-replace": "Replace",
+	"quicktools:search-replace-all": "Replace All",
 	"info-quicktoolssettings": "Customize shortcut buttons and keyboard keys in the Quicktools container below the editor to enhance your coding experience.",
 	"info-excludefolders": "Use the pattern **/node_modules/** to ignore all files from the node_modules folder. This will exclude the files from being listed and will also prevent them from being included in file searches.",
 	"missed files": "Scanned {count} files after search started and will not be included in search.",

src/lang/he-il.json

@@ -382,6 +382,11 @@
 	"quicktools:exclamation": "הוסף סימן קריאה",
 	"quicktools:alt-key": "Alt key",
 	"quicktools:meta-key": "Windows/Meta key",
+	"quicktools:search-prev": "Previous Match",
+	"quicktools:search-next": "Next Match",
+	"quicktools:search-settings": "Search Settings",
+	"quicktools:search-replace": "Replace",
+	"quicktools:search-replace-all": "Replace All",
 	"info-quicktoolssettings": "התאם אישית לחצני קיצורי דרך ומקשי מקלדת בכלים המהירים שמתחת לעורך כדי לשפר את חוויית הקידוד שלך.",
 	"info-excludefolders": "השתמשו בתבנית **/node_modules/** כדי להתעלם מכל הקבצים מהתיקייה node_modules. פעולה זו תמנע את הכללת הקבצים בחיפושי קבצים.",
 	"missed files": "נסרקו {count} קבצים לאחר תחילת החיפוש ולא ייכללו בחיפוש.",

src/lang/hi-in.json

@@ -382,6 +382,11 @@
 	"quicktools:exclamation": "एक्सक्लेमेशन डालें",
 	"quicktools:alt-key": "Alt कुंजी",
 	"quicktools:meta-key": "विंडोज/मेटा कुंजी",
+	"quicktools:search-prev": "Previous Match",
+	"quicktools:search-next": "Next Match",
+	"quicktools:search-settings": "Search Settings",
+	"quicktools:search-replace": "Replace",
+	"quicktools:search-replace-all": "Replace All",
 	"info-quicktoolssettings": "अपना कोडिंग अनुभव बेहतर बनाने के लिए एडिटर के नीचे Quicktools कंटेनर में शॉर्टकट बटन और कीबोर्ड कुंजियों को कस्टमाइज़ करें।",
 	"info-excludefolders": "node_modules फ़ोल्डर की सभी फाइलों को अनदेखा करने के लिए **/node_modules/** पैटर्न का उपयोग करें। इससे ये फाइलें सूची में नहीं दिखेंगी और फाइल खोज में भी शामिल नहीं होंगी।",
 	"missed files": "खोज शुरू होने के बाद {count} फाइलें स्कैन की गईं और इन्हें खोज में शामिल नहीं किया जाएगा।",

src/lang/hu-hu.json

@@ -382,6 +382,11 @@
 	"quicktools:exclamation": "Felkiáltójel beszúrása",
 	"quicktools:alt-key": "Alt-billentyű",
 	"quicktools:meta-key": "Windows/Meta-billentyű",
+	"quicktools:search-prev": "Previous Match",
+	"quicktools:search-next": "Next Match",
+	"quicktools:search-settings": "Search Settings",
+	"quicktools:search-replace": "Replace",
+	"quicktools:search-replace-all": "Replace All",
 	"info-quicktoolssettings": "Testre szabhatja a „Gyorsgombokat” és a billentyűket a szerkesztő alatti „Gyorseszközök” tárolóban, hogy javítsa a kódolási élményt.",
 	"info-excludefolders": "A **/node_modules/** minta használatával figyelmen kívül hagyhatja a node_modules mappában található fájlokat. Ez kizárja a fájlokat a listából, és megakadályozza, hogy a fájlkeresésekben is szerepeljenek.",
 	"missed files": "{count} fájl beolvasása a keresés megkezdése után, így nem lesznek benne a keresésben.",

src/lang/id-id.json

@@ -382,6 +382,11 @@
 	"quicktools:exclamation": "Masukkan tanda seru",
 	"quicktools:alt-key": "Kunci Alt",
 	"quicktools:meta-key": "Kunci Windows/Meta",
+	"quicktools:search-prev": "Previous Match",
+	"quicktools:search-next": "Next Match",
+	"quicktools:search-settings": "Search Settings",
+	"quicktools:search-replace": "Replace",
+	"quicktools:search-replace-all": "Replace All",
 	"info-quicktoolssettings": "Kustomisasi tombol pintas dan tombol keyboard dalam wadah alat cepat di bawah editor untuk meningkatkan pengalaman pengkodean Anda.",
 	"info-excludefolders": "Gunakan pola **/node_modules/** untuk mengabaikan semua berkas dari folder node_modules. Ini akan mengecualikan berkas dari terdaftar dan juga akan mencegah mereka dimasukkan dalam pencarian berkas.",
 	"missed files": "Memindai {count} berkas setelah pencarian dimulai dan tidak akan dimasukkan dalam pencarian.",

src/lang/ir-fa.json

@@ -382,6 +382,11 @@
 	"quicktools:exclamation": "Insert exclamation",
 	"quicktools:alt-key": "Alt key",
 	"quicktools:meta-key": "Windows/Meta key",
+	"quicktools:search-prev": "Previous Match",
+	"quicktools:search-next": "Next Match",
+	"quicktools:search-settings": "Search Settings",
+	"quicktools:search-replace": "Replace",
+	"quicktools:search-replace-all": "Replace All",
 	"info-quicktoolssettings": "Customize shortcut buttons and keyboard keys in the Quicktools container below the editor to enhance your coding experience.",
 	"info-excludefolders": "Use the pattern **/node_modules/** to ignore all files from the node_modules folder. This will exclude the files from being listed and will also prevent them from being included in file searches.",
 	"missed files": "Scanned {count} files after search started and will not be included in search.",