fix: update UI state after zoom level changes

Add React state management for zoom percentage in AppearanceSettings
to ensure the UI updates after zoom changes. The zoom functions now
work correctly with Tauri's webview zoom API.

Author: afonsojramos

src/components/settings/AppearanceSettings.tsx

@@ -1,4 +1,4 @@
-import type { FC } from 'react';
+import { type FC, useCallback, useState } from 'react';
 
 import {
   PaintbrushIcon,
@@ -16,12 +16,14 @@ import {
 } from '@primer/react';
 
 import { useAppContext } from '../../context/App';
+import type { Percentage } from '../../types';
 import { Theme } from '../../types';
 import { hasMultipleAccounts } from '../../utils/auth/utils';
 import {
   canDecreaseZoom,
   canIncreaseZoom,
   decreaseZoom,
+  getCurrentZoomLevel,
   increaseZoom,
   resetZoomLevel,
   zoomLevelToPercentage,
@@ -32,7 +34,24 @@ import { Title } from '../primitives/Title';
 
 export const AppearanceSettings: FC = () => {
   const { auth, settings, updateSetting } = useAppContext();
-  const zoomPercentage = zoomLevelToPercentage(window.gitify.zoom.getLevel());
+  const [zoomPercentage, setZoomPercentage] = useState<Percentage>(
+    zoomLevelToPercentage(getCurrentZoomLevel()),
+  );
+
+  const handleZoomOut = useCallback(() => {
+    decreaseZoom(zoomPercentage);
+    setZoomPercentage(zoomLevelToPercentage(getCurrentZoomLevel()));
+  }, [zoomPercentage]);
+
+  const handleZoomIn = useCallback(() => {
+    increaseZoom(zoomPercentage);
+    setZoomPercentage(zoomLevelToPercentage(getCurrentZoomLevel()));
+  }, [zoomPercentage]);
+
+  const handleZoomReset = useCallback(() => {
+    resetZoomLevel();
+    setZoomPercentage(zoomLevelToPercentage(getCurrentZoomLevel()));
+  }, []);
 
   return (
     <fieldset>
@@ -108,7 +127,7 @@ export const AppearanceSettings: FC = () => {
               data-testid="settings-zoom-out"
               disabled={!canDecreaseZoom(zoomPercentage)}
               icon={ZoomOutIcon}
-              onClick={() => decreaseZoom(zoomPercentage)}
+              onClick={handleZoomOut}
               size="small"
               unsafeDisableTooltip={true}
             />
@@ -122,7 +141,7 @@ export const AppearanceSettings: FC = () => {
               data-testid="settings-zoom-in"
               disabled={!canIncreaseZoom(zoomPercentage)}
               icon={ZoomInIcon}
-              onClick={() => increaseZoom(zoomPercentage)}
+              onClick={handleZoomIn}
               size="small"
               unsafeDisableTooltip={true}
             />
@@ -131,7 +150,7 @@ export const AppearanceSettings: FC = () => {
               aria-label="Reset zoom"
               data-testid="settings-zoom-reset"
               icon={SyncIcon}
-              onClick={() => resetZoomLevel()}
+              onClick={handleZoomReset}
               size="small"
               unsafeDisableTooltip={true}
               variant="danger"

src/utils/zoom.ts

@@ -1,12 +1,44 @@
 import { defaultSettings } from '../context/defaults';
 import type { Percentage } from '../types';
+import { isTauriEnvironment } from './environment';
 
 const MINIMUM_ZOOM_PERCENTAGE = 0 as Percentage;
 const MAXIMUM_ZOOM_PERCENTAGE = 120 as Percentage;
 const RECOMMENDED_ZOOM_PERCENTAGE = defaultSettings.zoomPercentage;
 const MULTIPLIER = 2;
 const ZOOM_STEP = 10 as Percentage;
 
+/**
+ * Browser fallback for zoom using CSS zoom and localStorage
+ */
+const browserZoom = {
+  getLevel: (): number => {
+    if (typeof window === 'undefined') {
+      return 0;
+    }
+    const zoomLevel = localStorage.getItem('zoomLevel');
+    return zoomLevel ? Number.parseFloat(zoomLevel) : 0;
+  },
+  setLevel: (zoomLevel: number) => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    localStorage.setItem('zoomLevel', zoomLevel.toString());
+    const zoomFactor = 1.2 ** zoomLevel;
+    const rootElement = document.getElementById('root');
+    if (rootElement) {
+      rootElement.style.zoom = zoomFactor.toString();
+    }
+  },
+};
+
+/**
+ * Get zoom API - uses Tauri if available, otherwise browser fallback
+ */
+function getZoomApi() {
+  return isTauriEnvironment() ? window.gitify.zoom : browserZoom;
+}
+
 /**
  * Zoom percentage to level. 100% is the recommended zoom level (0).
  * If somehow the percentage is not set, it will return 0, the default zoom level.
@@ -55,7 +87,7 @@ export function canIncreaseZoom(zoomPercentage: Percentage) {
  */
 export function decreaseZoom(zoomPercentage: Percentage) {
   if (canDecreaseZoom(zoomPercentage)) {
-    window.gitify.zoom.setLevel(
+    getZoomApi().setLevel(
       zoomPercentageToLevel((zoomPercentage - ZOOM_STEP) as Percentage),
     );
   }
@@ -66,7 +98,7 @@ export function decreaseZoom(zoomPercentage: Percentage) {
  */
 export function increaseZoom(zoomPercentage: Percentage) {
   if (canIncreaseZoom(zoomPercentage)) {
-    window.gitify.zoom.setLevel(
+    getZoomApi().setLevel(
       zoomPercentageToLevel((zoomPercentage + ZOOM_STEP) as Percentage),
     );
   }
@@ -76,7 +108,12 @@ export function increaseZoom(zoomPercentage: Percentage) {
  * Reset zoom level
  */
 export function resetZoomLevel() {
-  window.gitify.zoom.setLevel(
-    zoomPercentageToLevel(RECOMMENDED_ZOOM_PERCENTAGE),
-  );
+  getZoomApi().setLevel(zoomPercentageToLevel(RECOMMENDED_ZOOM_PERCENTAGE));
+}
+
+/**
+ * Get current zoom level (browser-compatible)
+ */
+export function getCurrentZoomLevel(): number {
+  return getZoomApi().getLevel();
 }