+ {/* Sidebar */}
+
+
+
Termix
+
-
+ Create Host
+
- ))}
-
-
- {terminals.map((terminal) => (
-
- {terminal.hostConfig && }
+
+
+ {/* Main Content Area */}
+
+ {/* Topbar */}
+
+
+ {terminals.map((terminal, index) => (
+
+ {/* Tab Button Group */}
+
+
+
+
+
+ {/* Separator (except after the last tab) */}
+ {index !== terminals.length - 1 && (
+
+ )}
+
+ ))}
+
- ))}
+
+ {/* Terminal Views */}
+
+ {terminals.map((terminal) => (
+
+
+
+ ))}
+
+
+
+ {/* Add Host Modal */}
+
-
-
Add Host
-
- setForm({ ...form, name: e.target.value })}
- />
- setForm({ ...form, ip: e.target.value })}
- />
- setForm({ ...form, user: e.target.value })}
- />
- setForm({ ...form, password: e.target.value })}
- />
- setForm({ ...form, port: e.target.value })}
- />
-
-
-
+
);
}
diff --git a/src/Terminal.jsx b/src/Terminal.jsx
index 68802063..cbddb960 100644
--- a/src/Terminal.jsx
+++ b/src/Terminal.jsx
@@ -16,7 +16,7 @@ export function NewTerminal({ hostConfig }) {
const terminal = new Terminal({
cursorBlink: true,
theme: {
- background: "#1a1a1a",
+ background: "#0f0f0f",
foreground: "#ffffff",
cursor: "#ffffff",
},
@@ -33,7 +33,7 @@ export function NewTerminal({ hostConfig }) {
// Open terminal in the container
terminal.open(terminalRef.current);
- // Resize function (Restoring your original logic)
+ // Resize function
const resizeTerminal = () => {
const terminalContainer = terminalRef.current;
const sidebarWidth = 14 * 16; // Sidebar width in pixels
@@ -68,9 +68,6 @@ export function NewTerminal({ hostConfig }) {
// Write initial connection message
terminal.write("\r\n*** Connecting to backend ***\r\n");
- // Create socket connection
- //const isSecure = window.location.protocol === "https:";
- //let ioUrl = `${isSecure ? "https" : "http"}://${window.location.hostname}:${window.location.port}/socket.io/`;
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
let ioUrl = `${protocol}//${window.location.hostname}:${window.location.port}/socket.io/`;
@@ -106,6 +103,11 @@ export function NewTerminal({ hostConfig }) {
socket.emit("data", key);
});
+ // Handle socket errors
+ socket.on("connect_error", (err) => {
+ terminal.write(`\r\n*** Error: ${err.message} ***\r\n`);
+ });
+
// Cleanup on component unmount
return () => {
terminal.dispose();
@@ -117,13 +119,7 @@ export function NewTerminal({ hostConfig }) {
return (
);
}
diff --git a/src/index.css b/src/index.css
index b3a547a2..bce8c135 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,79 +1,10 @@
-:root {
- font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
- line-height: 1.5;
- font-weight: 400;
+@import '@fontsource/inter';
+@import "tailwindcss";
- color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
-
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
-}
-
-body {
- margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
- min-height: 100vh;
-}
-
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
-}
-
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
-}
-button:hover {
- border-color: #ffffff;
-}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
-}
-
-input {
- border-radius: 8px;
- border: 1px solid #1a1a1a;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- color: #ffffff;
-}
-
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
+.tab-group::after {
+ content: '';
+ width: 1px;
+ height: 24px;
+ background-color: #4a5568; /* gray-600 */
+ margin: 0 8px; /* Adjust spacing as needed */
}
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
index b9a1a6de..9347e151 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -7,4 +7,4 @@ createRoot(document.getElementById('root')).render(
,
-)
+)
\ No newline at end of file
diff --git a/src/theme.js b/src/theme.js
new file mode 100644
index 00000000..ce7d8785
--- /dev/null
+++ b/src/theme.js
@@ -0,0 +1,50 @@
+import { extendTheme } from '@mui/joy/styles';
+
+const theme = extendTheme({
+ colorSchemes: {
+ light: {
+ palette: {
+ neutral: {
+ 50: '#f7f7f7',
+ 100: '#e1e1e1',
+ 200: '#c4c4c4',
+ 300: '#a7a7a7',
+ 400: '#8a8a8a',
+ 500: '#6e6e6e',
+ 600: '#555555',
+ 700: '#3d3d3d',
+ 800: '#262626',
+ 900: '#0f0f0f',
+ },
+ background: {
+ default: '#212121', // Dark background to contrast white text
+ paper: '#333333', // Slightly lighter paper background for depth
+ },
+ text: {
+ primary: '#ffffff', // White text for readability
+ secondary: '#b0b0b0', // Light gray for secondary text
+ },
+ primary: {
+ main: '#ff4081', // Bright pink for the primary accent color
+ },
+ secondary: {
+ main: '#00bcd4', // A fresh cyan-blue for secondary accents
+ },
+ error: {
+ main: '#e53935', // Strong red for error
+ },
+ warning: {
+ main: '#ff9800', // Vibrant yellow-orange for warning
+ },
+ success: {
+ main: '#4caf50', // Fresh green for success
+ },
+ },
+ },
+ },
+ typography: {
+ fontFamily: 'Arial, sans-serif',
+ },
+});
+
+export default theme;
diff --git a/vite.config.js b/vite.config.js
index 8d60bf7f..5399993d 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,8 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
+import tailwindcss from "@tailwindcss/vite";
// https://vite.dev/config/
export default defineConfig({
- plugins: [react()],
+ plugins: [react(), tailwindcss()],
})
\ No newline at end of file