dennii/Termix
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 22 Wiki Activity

Fixed up some UI issues and auto-sizing for the terminal. Finished up preparations for full release.

Browse Source
This commit is contained in:
Karmaa
2025-03-05 22:49:34 -06:00
parent 62262e5bf3
commit 963e54bf15
7 changed files with 137 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/App.jsx
View File

@@ -38,6 +38,47 @@ function App() {
};
}, []);
useEffect(() => {
terminals.forEach((terminal) => {
if (
(terminal.id === activeTab || splitTabIds.includes(terminal.id)) &&
terminal.terminalRef?.resizeTerminal
) {
terminal.terminalRef.resizeTerminal();
}
});
}, [splitTabIds, activeTab, terminals]);
useEffect(() => {
const handleResize = () => {
terminals.forEach((terminal) => {
if (
(terminal.id === activeTab || splitTabIds.includes(terminal.id)) &&
terminal.terminalRef?.resizeTerminal
) {
terminal.terminalRef.resizeTerminal();
}
});
};
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}, [splitTabIds, activeTab, terminals]);
useEffect(() => {
terminals.forEach((terminal) => {
if (
(terminal.id === activeTab || splitTabIds.includes(terminal.id)) &&
terminal.terminalRef?.resizeTerminal
) {
terminal.terminalRef.resizeTerminal();
}
});
}, [splitTabIds]);
const handleAddHost = () => {
if (form.ip && form.user && form.password && form.port) {
const newTerminal = {
@@ -88,13 +129,10 @@ function App() {
const getLayoutStyle = () => {
if (splitTabIds.length === 1) {
// Horizontal split (2 tabs: left-right)
return "flex flex-row h-full gap-4";
} else if (splitTabIds.length > 1) {
// 2x2 Grid layout (4 tabs max), with evenly spaced rows
return "grid grid-cols-2 grid-rows-2 gap-4 h-full overflow-hidden";
}
// No split, main tab takes the entire screen
return "flex flex-col h-full";
};
@@ -177,6 +215,7 @@ function App() {
<NewTerminal
key={terminal.id}
hostConfig={terminal.hostConfig}
isVisible={activeTab === terminal.id || splitTabIds.includes(terminal.id)}
ref={(ref) => {
if (ref && !terminal.terminalRef) {
setTerminals((prev) =>

5
src/Launchpad.jsx
View File

@@ -56,7 +56,10 @@ function Launchpad({ onClose }) {
>
<div className="text-center">
<h2 className="text-2xl font-bold mb-4">Launchpad</h2>
<p className="mb-4">W.I.P. Feature</p>
<p className="mb-4">A one-stop shop for adding hosts, apps (AI, notes, etc.), and all new features to come! Coming to you in a future update. Stay tuned!</p>
<p className="mb-4">
Can also be opened using <code className="bg-gray-500 px-1 rounded">Ctrl + L</code>
</p>
<Button
type="submit"
onClick={onClose}

138
src/Terminal.jsx
View File

@@ -1,4 +1,4 @@
import { useEffect, useRef } from "react";
import { forwardRef, useImperativeHandle, useEffect, useRef } from "react";
import { Terminal } from "@xterm/xterm";
import { FitAddon } from "@xterm/addon-fit";
import "@xterm/xterm/css/xterm.css";
@@ -6,15 +6,48 @@ import io from "socket.io-client";
import PropTypes from "prop-types";
import theme from "./theme";
export function NewTerminal({ hostConfig }) {
export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
const terminalRef = useRef(null);
const socketRef = useRef(null);
const fitAddon = useRef(new FitAddon());
const terminalInstance = useRef(null);
const resizeTerminal = () => {
const terminalContainer = terminalRef.current;
const parentContainer = terminalContainer?.parentElement;
if (!parentContainer || !isVisible) return;
// Force a reflow to ensure the container's dimensions are up-to-date
void parentContainer.offsetHeight;
// Use a small delay to ensure the DOM has fully updated
setTimeout(() => {
const parentWidth = parentContainer.clientWidth;
const parentHeight = parentContainer.clientHeight;
terminalContainer.style.width = `${parentWidth}px`;
terminalContainer.style.height = `${parentHeight}px`;
// Fit the terminal to the container
fitAddon.current.fit();
// Notify the backend of the new terminal size
if (socketRef.current && terminalInstance.current) {
const { cols, rows } = terminalInstance.current;
socketRef.current.emit("resize", { cols, rows });
}
}, 10); // Small delay to ensure proper DOM updates
};
useImperativeHandle(ref, () => ({
resizeTerminal: resizeTerminal,
}));
useEffect(() => {
if (!hostConfig || !terminalRef.current) return;
// Initialize terminal
const terminal = new Terminal({
terminalInstance.current = new Terminal({
cursorBlink: true,
theme: {
background: theme.palette.background.terminal,
@@ -27,104 +60,76 @@ export function NewTerminal({ hostConfig }) {
allowTransparency: true,
});
// Initialize FitAddon for auto-sizing
const fitAddon = new FitAddon();
terminal.loadAddon(fitAddon);
terminalInstance.current.loadAddon(fitAddon.current);
// Open terminal in the container
terminal.open(terminalRef.current);
terminalInstance.current.open(terminalRef.current);
// Resize function
const resizeTerminal = () => {
const terminalContainer = terminalRef.current;
const parentContainer = terminalContainer?.parentElement;
if (!parentContainer) return;
const parentWidth = parentContainer.clientWidth;
const parentHeight = parentContainer.clientHeight;
terminalContainer.style.width = `${parentWidth}px`;
terminalContainer.style.height = `${parentHeight}px`;
fitAddon.fit();
const { cols, rows } = terminal;
if (socketRef.current) {
socketRef.current.emit("resize", { cols, rows });
}
};
// Ensure correct sizing on start
setTimeout(() => {
fitAddon.fit();
fitAddon.current.fit();
resizeTerminal();
}, 50); // Small delay to ensure proper initialization
terminalInstance.current.focus();
}, 50);
// Focus on terminal after initialization
terminal.focus();
terminalInstance.current.write("\r\n*** Connecting to backend ***\r\n");
// Listen for window resize events
window.addEventListener("resize", resizeTerminal);
// Write initial connection message
terminal.write("\r\n*** Connecting to backend ***\r\n");
const socket = io(window.location.hostname === "localhost"
? 'http://localhost:8081'
: '/', {
path: '/socket.io',
transports: ['websocket', 'polling']
});
const socket = io(
window.location.hostname === "localhost"
? "http://localhost:8081"
: "/",
{
path: "/socket.io",
transports: ["websocket", "polling"],
}
);
socketRef.current = socket;
socket.off("connect");
socket.off("data");
socket.off("disconnect");
socket.on("connect", () => {
fitAddon.fit();
resizeTerminal(); // Ensure proper size on connection
const { cols, rows } = terminal;
fitAddon.current.fit();
resizeTerminal();
const { cols, rows } = terminalInstance.current;
socket.emit("connectToHost", cols, rows, hostConfig);
terminal.write("\r\n*** Connected to backend ***\r\n");
terminalInstance.current.write("\r\n*** Connected to backend ***\r\n");
});
socket.on("data", (data) => {
terminal.write(data);
terminalInstance.current.write(data);
});
socket.on("disconnect", () => {
terminal.write("\r\n*** Disconnected from backend ***\r\n");
terminalInstance.current.write("\r\n*** Disconnected from backend ***\r\n");
});
// Capture and send keystrokes
terminal.onKey(({ key }) => {
terminalInstance.current.onKey(({ key }) => {
socket.emit("data", key);
});
// Handle socket errors
socket.on("connect_error", (err) => {
terminal.write(`\r\n*** Error: ${err.message} ***\r\n`);
terminalInstance.current.write(`\r\n*** Error: ${err.message} ***\r\n`);
});
// Cleanup on component unmount
return () => {
terminal.dispose();
window.removeEventListener("resize", resizeTerminal);
terminalInstance.current.dispose();
socket.disconnect();
};
}, [hostConfig]);
useEffect(() => {
if (isVisible) {
resizeTerminal();
}
}, [isVisible]);
return (
<div
ref={terminalRef}
className="w-full h-full overflow-hidden text-left"
style={{ display: isVisible ? "block" : "none" }}
/>
);
}
});
NewTerminal.displayName = "NewTerminal";
// Prop validation using PropTypes
NewTerminal.propTypes = {
hostConfig: PropTypes.shape({
ip: PropTypes.string.isRequired,
@@ -132,4 +137,5 @@ NewTerminal.propTypes = {
password: PropTypes.string.isRequired,
port: PropTypes.string.isRequired,
}).isRequired,
isVisible: PropTypes.bool.isRequired,
};

4
src/index.css
View File

@@ -5,6 +5,6 @@
content: '';
width: 1px;
height: 24px;
background-color: #4a5568; /* gray-600 */
margin: 0 8px; /* Adjust spacing as needed */
background-color: #4a5568;
margin: 0 8px;
}