added terminal resize

src/terminal.tsx

@@ -4,6 +4,27 @@ import { Terminal } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
 import 'xterm/css/xterm.css';
 
+
+const useTerminalResize = (terminalRef: React.RefObject<HTMLDivElement>, fitAddon: FitAddon) => {
+    useEffect(() => {
+      const handleResize = () => {
+        if (fitAddon && terminalRef.current) {
+          fitAddon.fit();
+        }
+      };
+  
+      window.addEventListener('resize', handleResize);
+  
+      // Fit the terminal initially
+      handleResize();
+  
+      return () => {
+        window.removeEventListener('resize', handleResize);
+      };
+    }, [terminalRef, fitAddon]);
+  };
+
+
 function TerminalComponent (p: {websocket: string|null}) {
     const {websocket} = p
     const terminalRef = useRef<HTMLDivElement>(null);
@@ -26,6 +47,14 @@ function TerminalComponent (p: {websocket: string|null}) {
             
             const socket = new WebSocket(websocket);
             
+            socket.send(JSON.stringify({CommandType: 'resize', Arguments: [terminal.current.cols, terminal.current.rows]}))
+
+            terminal.current.onResize(
+                ({cols, rows}, _)=>{
+                    socket.send(JSON.stringify({CommandType: 'resize', Arguments: [cols, rows]}))
+                }
+            )
+
             socket.addEventListener('open', () => {
             });
 
@@ -44,6 +73,8 @@ function TerminalComponent (p: {websocket: string|null}) {
         }
     }, []);
 
+    useTerminalResize(terminalRef, fitAddon.current!)
+
     return <div ref={terminalRef} style={{ width: '100%', height: '100%' }}></div>;
 };