From 8e04279c17da5219898ab046e3d7f5402dd3c14a Mon Sep 17 00:00:00 2001
From: Atharva Bedekar <atharvabedekar527@gmail.com>
Date: Sat, 31 Oct 2026 15:44:31 +0530
Subject: [PATCH] feat(ui): add hover text to top bar buttons that hide their
 labels

Reset, FAQ and Close in PDF Multi Tool and the PDF Workflow toolbar lose
their text on small screens, leaving only an icon. Give them a title so
the action can still be identified on hover.

Multi Tool reuses existing translation keys. PDF Workflow is English
only, so its titles are plain text like its labels.

Fixes #879
---
 src/pages/pdf-multi-tool.html        |  6 ++++++
 src/pages/pdf-workflow.html          |  8 ++++++++
 src/tests/top-bar-hover-text.test.ts | 27 +++++++++++++++++++++++++++
 3 files changed, 41 insertions(+)
 create mode 100644 src/tests/top-bar-hover-text.test.ts

diff --git a/src/pages/pdf-multi-tool.html b/src/pages/pdf-multi-tool.html
index 52ec351c..a24794f8 100644
--- a/src/pages/pdf-multi-tool.html
+++ b/src/pages/pdf-multi-tool.html
@@ -136,6 +136,8 @@
       >
         <button
           id="reset-btn"
+          title="Reset"
+          data-i18n-title="multiTool.reset"
           style="display: none"
           class="flex items-center gap-1.5 bg-gray-700 hover:bg-gray-600 text-white px-2.5 sm:px-3 py-1.5 rounded-lg text-sm transition-colors"
         >
@@ -158,6 +160,8 @@
 
         <button
           id="faq-open-btn"
+          title="FAQ"
+          data-i18n-title="footer.faqLink"
           type="button"
           class="flex items-center gap-1.5 bg-gray-700 hover:bg-gray-600 text-white px-2.5 sm:px-3 py-1.5 rounded-lg text-sm transition-colors"
           aria-label="FAQ"
@@ -171,6 +175,8 @@
 
         <button
           id="close-tool-btn"
+          title="Close"
+          data-i18n-title="common.close"
           class="flex items-center gap-1.5 bg-gray-700 hover:bg-gray-600 text-white px-2.5 sm:px-3 py-1.5 rounded-lg text-sm transition-colors"
           aria-label="Close"
         >
diff --git a/src/pages/pdf-workflow.html b/src/pages/pdf-workflow.html
index d56528b8..ee9e2d1c 100644
--- a/src/pages/pdf-workflow.html
+++ b/src/pages/pdf-workflow.html
@@ -315,12 +315,14 @@
         >
           <button
             id="toolbox-toggle"
+            title="Toolbox"
             class="md:hidden bg-gray-700 hover:bg-gray-600 text-white p-1.5 rounded-lg transition-colors"
           >
             <i class="ph ph-plus-circle text-lg"></i>
           </button>
           <button
             id="run-btn"
+            title="Run"
             class="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-3 md:px-4 py-1.5 rounded-lg flex items-center gap-1.5 text-sm transition-colors"
           >
             <i class="ph ph-play text-base"></i>
@@ -328,6 +330,7 @@
           </button>
           <button
             id="clear-btn"
+            title="Clear"
             class="bg-gray-700 hover:bg-gray-600 text-white px-2.5 md:px-3 py-1.5 rounded-lg text-sm flex items-center gap-1 transition-colors"
           >
             <i class="ph ph-trash text-base md:hidden"></i>
@@ -336,6 +339,7 @@
           <div class="flex-1"></div>
           <button
             id="save-btn"
+            title="Save"
             class="bg-gray-700 hover:bg-gray-600 text-white px-2.5 md:px-3 py-1.5 rounded-lg text-sm flex items-center gap-1 transition-colors"
           >
             <i class="ph ph-floppy-disk text-sm"></i>
@@ -343,6 +347,7 @@
           </button>
           <button
             id="faq-open-btn"
+            title="FAQ"
             type="button"
             class="bg-gray-700 hover:bg-gray-600 text-white px-2.5 md:px-3 py-1.5 rounded-lg text-sm flex items-center gap-1 transition-colors"
             aria-haspopup="dialog"
@@ -354,6 +359,7 @@
           </button>
           <button
             id="load-btn"
+            title="Load"
             class="bg-gray-700 hover:bg-gray-600 text-white px-2.5 md:px-3 py-1.5 rounded-lg text-sm flex items-center gap-1 transition-colors"
           >
             <i class="ph ph-folder-open text-sm"></i>
@@ -361,6 +367,7 @@
           </button>
           <button
             id="export-btn"
+            title="Export"
             class="bg-gray-700 hover:bg-gray-600 text-white px-2.5 md:px-3 py-1.5 rounded-lg text-sm flex items-center gap-1 transition-colors"
           >
             <i class="ph ph-export text-sm"></i>
@@ -368,6 +375,7 @@
           </button>
           <button
             id="import-btn"
+            title="Import"
             class="bg-gray-700 hover:bg-gray-600 text-white px-2.5 md:px-3 py-1.5 rounded-lg text-sm flex items-center gap-1 transition-colors"
           >
             <i class="ph ph-download-simple text-sm"></i>
diff --git a/src/tests/top-bar-hover-text.test.ts b/src/tests/top-bar-hover-text.test.ts
new file mode 100644
index 00000000..abecf4ff
--- /dev/null
+++ b/src/tests/top-bar-hover-text.test.ts
@@ -0,0 +1,27 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { describe, it, expect } from 'vitest';
+
+const PAGES_DIR = path.resolve(__dirname, '../pages');
+
+function loadPage(name: string): Document {
+  const html = fs.readFileSync(path.join(PAGES_DIR, name), 'utf8');
+  return new DOMParser().parseFromString(html, 'text/html');
+}
+
+describe('top bar hover text', () => {
+  it.each(['pdf-multi-tool.html', 'pdf-workflow.html'])(
+    'gives every %s button that hides its label a title',
+    (page) => {
+      const labels = loadPage(page).querySelectorAll(
+        'button span[class*="hidden"][class*=":inline"]'
+      );
+
+      expect(labels.length).toBeGreaterThan(0);
+      labels.forEach((label) => {
+        const button = label.closest('button');
+        expect(button?.title, button?.id).toBe(label.textContent?.trim());
+      });
+    }
+  );
+});