Improve translation panel interactions

Author: Adrian Tompkins

src/lib/components/Reader/TextBoxes.svelte

@@ -620,6 +620,7 @@
   }
 
   let openAiBlock = $state<number | null>(null);
+  let openOcrBlock = $state<number | null>(null);
   let openAiWord = $state<number | null>(null);
   let mobileAiPanel = $state(false);
 
@@ -640,12 +641,25 @@
     event.stopPropagation();
     if (window.getSelection()?.toString()) return;
     mobileAiPanel = window.matchMedia?.('(hover: none), (pointer: coarse)').matches ?? false;
+
+    // Touch has no persistent hover state. Use the first tap to reveal the OCR
+    // and only open the AI panel when the same block is tapped again.
+    if (mobileAiPanel && openOcrBlock !== blockIndex) {
+      openOcrBlock = blockIndex;
+      openAiBlock = null;
+      openAiWord = null;
+      return;
+    }
+
     openAiBlock = blockIndex;
     openAiWord = null;
   }
 
-  function closeAi() {
+  function closeAi(event: PointerEvent) {
+    const target = event.target as Element | null;
+    if (target?.closest('.textBox, .aiPanel')) return;
     openAiBlock = null;
+    openOcrBlock = null;
     openAiWord = null;
   }
 </script>
@@ -662,6 +676,7 @@
     class:perLine={usePerLine}
     class:forceVisible
     class:alwaysVisible={alwaysShowOCR}
+    class:tapVisible={openOcrBlock === blockIndex}
     class:hasAi={Boolean(ai)}
     style:width={usePerLine ? width : isOriginalMode || useMinDimensions ? undefined : width}
     style:height={usePerLine ? height : isOriginalMode || useMinDimensions ? undefined : height}
@@ -800,12 +815,14 @@
 
   /* Force visibility for placeholder/missing pages, or when always-show OCR is enabled */
   .textBox.forceVisible,
-  .textBox.alwaysVisible {
+  .textBox.alwaysVisible,
+  .textBox.tapVisible {
     background: rgb(255, 255, 255);
   }
 
   .textBox.forceVisible p,
-  .textBox.alwaysVisible p {
+  .textBox.alwaysVisible p,
+  .textBox.tapVisible p {
     visibility: visible;
   }
 
@@ -871,7 +888,7 @@
     position: absolute;
     left: 0;
     top: calc(100% + 30px);
-    width: min(28rem, 80vw);
+    width: min(40rem, 80vw);
     max-height: 60vh;
     overflow: auto;
     padding: 12px;

src/lib/components/Reader/__tests__/TextBoxes.test.ts

@@ -104,7 +104,11 @@ describe('TextBoxes auto mode with lines_coords', () => {
         }
       });
 
-      await fireEvent.click(container.querySelector('.textBox.hasAi')!);
+      const textBox = container.querySelector('.textBox.hasAi')!;
+      await fireEvent.click(textBox);
+      expect(textBox.classList.contains('tapVisible')).toBe(true);
+      expect(document.body.querySelector('.aiPanel.mobileViewportPanel')).toBeNull();
+      await fireEvent.click(textBox);
       const panel = document.body.querySelector('.aiPanel.mobileViewportPanel');
       expect(panel).toBeTruthy();
       expect(container.contains(panel)).toBe(false);
@@ -115,6 +119,37 @@ describe('TextBoxes auto mode with lines_coords', () => {
     }
   });
 
+  it('keeps one-click AI opening on desktop pointers', async () => {
+    const originalMatchMedia = window.matchMedia;
+    window.matchMedia = vi.fn().mockReturnValue({ matches: false });
+
+    try {
+      const { container, getByText } = render(TextBoxes, {
+        page: makePage([blockWithCoords]),
+        volumeUuid: 'test-uuid',
+        aiPage: {
+          page_index: 0,
+          img_path: 'page_001.jpg',
+          blocks: [
+            {
+              block_index: 0,
+              block_key: 'key',
+              source_lines: blockWithCoords.lines,
+              corrected_lines: blockWithCoords.lines,
+              translation: 'Desktop translation.',
+              words: []
+            }
+          ]
+        }
+      });
+
+      await fireEvent.click(container.querySelector('.textBox.hasAi')!);
+      expect(getByText('Desktop translation.')).toBeTruthy();
+    } finally {
+      window.matchMedia = originalMatchMedia;
+    }
+  });
+
   it('opens translation and contextual word details from an AI sidecar page', async () => {
     const { container, getByText, queryByText } = render(TextBoxes, {
       page: makePage([blockWithCoords]),