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

@@ -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"
         >

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>

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());
+      });
+    }
+  );
+});