feature: Zoom Widget for more visual screen scale change

Refs responsively-org#1326

desktop-app/src/renderer/AppContent.tsx

@@ -13,6 +13,7 @@ import KeyboardShortcutsManager from './components/KeyboardShortcutsManager';
 import { ReleaseNotes } from './components/ReleaseNotes';
 import { Sponsorship } from './components/Sponsorship';
 import { AboutDialog } from './components/AboutDialog';
+import { ZoomWidget } from './components/ZoomWidget/ZoomWidget';
 
 if ((navigator as any).userAgentData.platform === 'Windows') {
   import('./titlebar-styles.css');
@@ -23,6 +24,7 @@ const Browser = () => {
     <div className="h-screen gap-2 overflow-hidden pt-2">
       <ToolBar />
       <Previewer />
+      <ZoomWidget className="absolute bottom-5 right-5 z-50" />
     </div>
   );
 };

desktop-app/src/renderer/components/ToolBar/Menu/Flyout/Zoom.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, ReactNode } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import Button from 'renderer/components/Button';
 import useKeyboardShortcut, {
@@ -11,7 +11,7 @@ import {
 } from 'renderer/store/features/renderer';
 
 interface ZoomButtonProps {
-  children: React.ReactNode;
+  children: ReactNode;
   onClick: () => void;
 }
 

desktop-app/src/renderer/components/ZoomWidget/ZoomWidget.tsx

@@ -0,0 +1,60 @@
+import { useState, useEffect, FC } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { selectZoomFactor, zoomReset } from 'renderer/store/features/renderer';
+import { Icon } from '@iconify/react';
+import cx from 'classnames';
+
+interface ZoomWidgetProps {
+  className?: string;
+}
+
+let timeout = setTimeout(() => {}, 0);
+
+export const ZoomWidget: FC<ZoomWidgetProps> = ({ className = '' }) => {
+  const zoomfactor = useSelector(selectZoomFactor);
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (zoomfactor === 1) {
+      setIsVisible(false);
+    } else {
+      clearTimeout(timeout);
+      setIsVisible(true);
+      timeout = setTimeout(() => {
+        setIsVisible(false);
+      }, 5000);
+    }
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [zoomfactor]);
+
+  const resetZoom = () => dispatch(zoomReset());
+
+  if (isVisible)
+    return (
+      <button
+        type="button"
+        onClick={resetZoom}
+        tabIndex={0}
+        className={cx(
+          'rounded bg-white p-2 text-sm shadow-lg ring-1 ring-slate-500 !ring-opacity-40 transition duration-700 ease-in-out dark:bg-slate-900 dark:ring-white dark:!ring-opacity-40',
+          className
+        )}
+      >
+        <span className="w-10 text-center">
+          Zoom: {Math.ceil(zoomfactor * 100)}%
+        </span>
+        <Icon
+          className="ml-3 mb-1 inline focus:outline-none"
+          icon="system-uicons:reset"
+          height={16}
+        />
+      </button>
+    );
+
+  return null;
+};

desktop-app/src/renderer/store/features/renderer/index.ts

@@ -23,6 +23,7 @@ export interface RendererState {
 const zoomSteps = [
   0.25, 0.33, 0.5, 0.55, 0.67, 0.75, 0.8, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2,
 ];
+const zoomDefaultStep = 8;
 
 const urlFromQueryParam = () => {
   const params = new URLSearchParams(window.location.search);
@@ -116,6 +117,15 @@ export const rendererSlice = createSlice({
         }
       }
     },
+    zoomReset: (state) => {
+      state.zoomFactor = zoomSteps[zoomDefaultStep];
+      state.individualZoomFactor = zoomSteps[zoomDefaultStep];
+      window.electron.store.set(
+        'renderer.individualZoomStepIndex',
+        zoomDefaultStep
+      );
+      window.electron.store.set('renderer.zoomStepIndex', zoomDefaultStep);
+    },
     setRotate: (state, action: PayloadAction<boolean>) => {
       state.rotate = action.payload;
     },
@@ -147,6 +157,7 @@ export const {
   setAddress,
   zoomIn,
   zoomOut,
+  zoomReset,
   setRotate,
   setIsInspecting,
   setLayout,