From d46ddfe6ee821d8c852a846f2c152d697bf0e63e Mon Sep 17 00:00:00 2001
From: LukeGus <bugattiguy527@gmail.com>
Date: Wed, 4 Dec 2024 21:58:40 -0600
Subject: [PATCH] Nano and timeout error fix #8 (zoom method)

---
 frontend/src/App.jsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 078bb877..98cd2971 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -14,6 +14,7 @@ const App = () => {
   const [password, setPassword] = useState('');
   const [isConnected, setIsConnected] = useState(false);
   const [isSideBarHidden, setIsSideBarHidden] = useState(false);
+  const [zoomFactor, setZoomFactor] = useState(1); // This will control zoom
 
   useEffect(() => {
     // Initialize the terminal and the fit addon
@@ -25,6 +26,7 @@ const App = () => {
       },
       macOptionIsMeta: true,
       allowProposedApi: true,
+      fontSize: 14, // Start with a default font size
     });
 
     fitAddon.current = new FitAddon();
@@ -41,10 +43,24 @@ const App = () => {
     const resizeTerminal = () => {
       if (terminalRef.current) {
         fitAddon.current.fit();
+        adjustZoom();  // Adjust zoom whenever the terminal resizes
         notifyServerOfResize();
       }
     };
 
+    // Adjust the zoom factor based on the terminal container size
+    const adjustZoom = () => {
+      const containerHeight = terminalRef.current.offsetHeight;
+      const containerWidth = terminalRef.current.offsetWidth;
+
+      // Here, adjust zoom based on container size (for example, make it zoom out if it's smaller)
+      const newZoomFactor = Math.max(0.5, Math.min(2, containerHeight / 300));  // Adjust this logic as needed
+      if (zoomFactor !== newZoomFactor) {
+        setZoomFactor(newZoomFactor);
+        terminal.current.setOption('fontSize', 14 * newZoomFactor); // Adjust font size based on zoom
+      }
+    };
+
     // Notify the server of terminal resize
     const notifyServerOfResize = () => {
       if (socket.current && socket.current.readyState === WebSocket.OPEN) {
@@ -71,7 +87,7 @@ const App = () => {
       }
       window.removeEventListener('resize', resizeTerminal);
     };
-  }, []);
+  }, [zoomFactor]); // Re-run when zoomFactor changes
 
   const handleConnect = () => {
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';