fix(browser): hide zoom percent after feedback (#5043)

Co-authored-by: Orca <help@stably.ai>

src/renderer/src/components/browser-pane/BrowserPane.tsx

@@ -119,6 +119,7 @@ import {
   applyBrowserPageZoom,
   browserPageZoomLevelToPercent,
   DEFAULT_BROWSER_PAGE_ZOOM_LEVEL,
+  getBrowserPageZoomIndicatorState,
   normalizeBrowserPageZoomLevel,
   setBrowserPageZoomLevel,
   type BrowserPageZoomDirection
@@ -4242,8 +4243,10 @@ function BrowserPagePane({
     }
     return received
   })()
-  const showBrowserZoomIndicator =
-    browserZoomFeedbackVisible || browserZoomPercent !== browserDefaultZoomPercent
+  const browserZoomIndicatorState = getBrowserPageZoomIndicatorState({
+    feedbackVisible: browserZoomFeedbackVisible,
+    isDefaultZoom: browserZoomPercent === browserDefaultZoomPercent
+  })
 
   useEffect(() => {
     const webview = webviewRef.current
@@ -4758,14 +4761,10 @@ function BrowserPagePane({
         <div
           role="status"
           aria-live="polite"
-          aria-hidden={!showBrowserZoomIndicator}
+          aria-hidden={browserZoomIndicatorState.ariaHidden}
           className={cn(
             'pointer-events-none absolute top-3 right-3 z-30 rounded-md border border-border bg-popover/95 px-2.5 py-1 text-xs font-medium text-popover-foreground shadow-xs transition-opacity duration-300 ease-out',
-            browserZoomFeedbackVisible
-              ? 'opacity-100'
-              : browserZoomPercent === 100
-                ? 'opacity-0'
-                : 'opacity-80'
+            browserZoomIndicatorState.opacityClassName
           )}
         >
           {browserZoomPercent}%

src/renderer/src/components/browser-pane/browser-page-zoom.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, it, vi } from 'vitest'
 import {
   applyBrowserPageZoom,
   browserPageZoomLevelToPercent,
+  getBrowserPageZoomIndicatorState,
   nextBrowserPageZoomLevel,
   normalizeBrowserPageZoomLevel,
   setBrowserPageZoomLevel
@@ -106,3 +107,20 @@ describe('setBrowserPageZoomLevel', () => {
     expect(webview.setZoomLevel).toHaveBeenCalledWith(1.5)
   })
 })
+
+describe('getBrowserPageZoomIndicatorState', () => {
+  it('shows browser zoom percent only while feedback is active', () => {
+    expect(
+      getBrowserPageZoomIndicatorState({ feedbackVisible: true, isDefaultZoom: false })
+    ).toEqual({
+      ariaHidden: false,
+      opacityClassName: 'opacity-100'
+    })
+    expect(
+      getBrowserPageZoomIndicatorState({ feedbackVisible: false, isDefaultZoom: false })
+    ).toEqual({
+      ariaHidden: true,
+      opacityClassName: 'opacity-0'
+    })
+  })
+})

src/renderer/src/components/browser-pane/browser-page-zoom.ts

@@ -21,6 +21,16 @@ export type BrowserPageZoomEventDetail = {
   direction: BrowserPageZoomDirection
 }
 
+export type BrowserPageZoomIndicatorState = {
+  ariaHidden: boolean
+  opacityClassName: 'opacity-100' | 'opacity-0'
+}
+
+export type BrowserPageZoomIndicatorInput = {
+  feedbackVisible: boolean
+  isDefaultZoom: boolean
+}
+
 type BrowserPageZoomWebview = {
   getZoomLevel: () => number
   setZoomLevel: (level: number) => void
@@ -60,6 +70,17 @@ export function setBrowserPageZoomLevel(
   }
 }
 
+export function getBrowserPageZoomIndicatorState({
+  feedbackVisible
+}: BrowserPageZoomIndicatorInput): BrowserPageZoomIndicatorState {
+  // Why: browser zoom percent is transient feedback; non-default page zoom
+  // should not leave a permanent badge over the webview.
+  return {
+    ariaHidden: !feedbackVisible,
+    opacityClassName: feedbackVisible ? 'opacity-100' : 'opacity-0'
+  }
+}
+
 export function dispatchBrowserPageZoomEvent(detail: BrowserPageZoomEventDetail): void {
   window.dispatchEvent(
     new CustomEvent<BrowserPageZoomEventDetail>(ORCA_BROWSER_PAGE_ZOOM_EVENT, {