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

Made some UI changes and code cleanup. Split screen working great, readying for release for user testing (without persistence or launchpad for now).

Browse Source
This commit is contained in:
Karmaa
2025-03-05 14:46:46 -06:00
parent a6295e5e7e
commit 713d43fc52
6 changed files with 141 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/AddHostModal.jsx
View File

@@ -9,8 +9,8 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
<Modal open={!isHidden} onClose={() => setIsAddHostHidden(true)}> <Modal open={!isHidden} onClose={() => setIsAddHostHidden(true)}>
<ModalDialog <ModalDialog
sx={{ sx={{
backgroundColor: theme.palette.neutral[700], backgroundColor: theme.palette.general.tertiary,
borderColor: theme.palette.neutral[100], borderColor: theme.palette.general.secondary,
color: theme.palette.text.primary, color: theme.palette.text.primary,
padding: 3, padding: 3,
borderRadius: 10, borderRadius: 10,
@@ -31,7 +31,7 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
onChange={(e) => setForm({ ...form, name: e.target.value })} onChange={(e) => setForm({ ...form, name: e.target.value })}
required={false} required={false}
sx={{ sx={{
backgroundColor: theme.palette.neutral[500], backgroundColor: theme.palette.general.primary,
color: theme.palette.text.primary, color: theme.palette.text.primary,
}} }}
/> />
@@ -43,7 +43,7 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
onChange={(e) => setForm({ ...form, ip: e.target.value })} onChange={(e) => setForm({ ...form, ip: e.target.value })}
required required
sx={{ sx={{
backgroundColor: theme.palette.neutral[500], backgroundColor: theme.palette.general.primary,
color: theme.palette.text.primary, color: theme.palette.text.primary,
}} }}
/> />
@@ -55,7 +55,7 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
onChange={(e) => setForm({ ...form, user: e.target.value })} onChange={(e) => setForm({ ...form, user: e.target.value })}
required required
sx={{ sx={{
backgroundColor: theme.palette.neutral[500], backgroundColor: theme.palette.general.primary,
color: theme.palette.text.primary, color: theme.palette.text.primary,
}} }}
/> />
@@ -68,7 +68,7 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
onChange={(e) => setForm({ ...form, password: e.target.value })} onChange={(e) => setForm({ ...form, password: e.target.value })}
required required
sx={{ sx={{
backgroundColor: theme.palette.neutral[500], backgroundColor: theme.palette.general.primary,
color: theme.palette.text.primary, color: theme.palette.text.primary,
}} }}
/> />
@@ -83,7 +83,7 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
required required
error={form.port < 1 || form.port > 65535 ? "Port must be between 1 and 65535" : ""} error={form.port < 1 || form.port > 65535 ? "Port must be between 1 and 65535" : ""}
sx={{ sx={{
backgroundColor: theme.palette.neutral[500], backgroundColor: theme.palette.general.primary,
color: theme.palette.text.primary, color: theme.palette.text.primary,
}} }}
/> />
@@ -91,9 +91,9 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
<Button <Button
type="submit" type="submit"
sx={{ sx={{
backgroundColor: theme.palette.neutral[500], backgroundColor: theme.palette.general.primary,
'&:hover': { '&:hover': {
backgroundColor: theme.palette.neutral[900], backgroundColor: theme.palette.general.disabled,
}, },
}} }}
> >

53
src/App.jsx
View File

@@ -24,7 +24,6 @@ function App() {
const [isLaunchpadOpen, setIsLaunchpadOpen] = useState(false); const [isLaunchpadOpen, setIsLaunchpadOpen] = useState(false);
const [splitTabIds, setSplitTabIds] = useState([]); const [splitTabIds, setSplitTabIds] = useState([]);
// Handle keypress for opening launchpad
useEffect(() => { useEffect(() => {
const handleKeyDown = (e) => { const handleKeyDown = (e) => {
if (e.ctrlKey && e.key === "l") { if (e.ctrlKey && e.key === "l") {
@@ -39,7 +38,6 @@ function App() {
}; };
}, []); }, []);
// Handle adding a host
const handleAddHost = () => { const handleAddHost = () => {
if (form.ip && form.user && form.password && form.port) { if (form.ip && form.user && form.password && form.port) {
const newTerminal = { const newTerminal = {
@@ -63,7 +61,6 @@ function App() {
} }
}; };
// Close a terminal tab
const closeTab = (id) => { const closeTab = (id) => {
const newTerminals = terminals.filter((t) => t.id !== id); const newTerminals = terminals.filter((t) => t.id !== id);
setTerminals(newTerminals); setTerminals(newTerminals);
@@ -72,20 +69,23 @@ function App() {
} }
}; };
// Toggle split for a terminal tab
const toggleSplit = (id) => { const toggleSplit = (id) => {
if (splitTabIds.length >= 3) return; // Prevent more than 2 tabs from splitting if (splitTabIds.includes(id)) {
setSplitTabIds((prev) => prev.filter((splitId) => splitId !== id));
return;
}
if (splitTabIds.length >= 3) return;
setSplitTabIds((prev) => setSplitTabIds((prev) =>
prev.includes(id) ? prev.filter((splitId) => splitId !== id) : [...prev, id] prev.includes(id) ? prev.filter((splitId) => splitId !== id) : [...prev, id]
); );
if (splitTabIds.includes(id)) {
setSplitTabIds((prev) => prev.filter((splitId) => splitId !== id));
}
}; };
// Determine the layout based on the number of split tabs const handleSetActiveTab = (tabId) => {
setActiveTab(tabId);
};
const getLayoutStyle = () => { const getLayoutStyle = () => {
if (splitTabIds.length === 1) { if (splitTabIds.length === 1) {
// Horizontal split (2 tabs: left-right) // Horizontal split (2 tabs: left-right)
@@ -104,9 +104,9 @@ function App() {
<div className="flex-1 flex flex-col overflow-hidden"> <div className="flex-1 flex flex-col overflow-hidden">
{/* Topbar */} {/* Topbar */}
<div className="bg-neutral-800 text-white p-4 flex items-center justify-between gap-4 min-h-[75px] max-h-[75px] shadow-xl border-b-5 border-neutral-700"> <div className="bg-neutral-800 text-white p-4 flex items-center justify-between gap-4 min-h-[75px] max-h-[75px] shadow-xl border-b-5 border-neutral-700">
<div className="bg-neutral-700 flex justify-center items-center gap-2 p-3 rounded-lg h-[52px]"> <div className="bg-neutral-700 flex justify-center items-center gap-1 p-2 rounded-lg h-[52px]">
<img src={TermixIcon} alt="Termix Icon" className="w-[30px] h-[30px]" /> <img src={TermixIcon} alt="Termix Icon" className="w-[25px] h-[25px] object-contain" />
<h2 className="text-lg font-bold ml-[-2px]">Termix</h2> <h2 className="text-lg font-bold">Termix</h2>
</div> </div>
<div className="flex-1 bg-neutral-700 rounded-lg overflow-hidden h-[52px] flex items-center"> <div className="flex-1 bg-neutral-700 rounded-lg overflow-hidden h-[52px] flex items-center">
@@ -114,7 +114,7 @@ function App() {
<TabList <TabList
terminals={terminals} terminals={terminals}
activeTab={activeTab} activeTab={activeTab}
setActiveTab={setActiveTab} setActiveTab={handleSetActiveTab}
closeTab={closeTab} closeTab={closeTab}
toggleSplit={toggleSplit} toggleSplit={toggleSplit}
splitTabIds={splitTabIds} splitTabIds={splitTabIds}
@@ -127,8 +127,8 @@ function App() {
<Button <Button
onClick={() => setIsLaunchpadOpen(true)} onClick={() => setIsLaunchpadOpen(true)}
sx={{ sx={{
backgroundColor: theme.palette.neutral[700], backgroundColor: theme.palette.general.tertiary,
"&:hover": { backgroundColor: theme.palette.neutral[300] }, "&:hover": { backgroundColor: theme.palette.general.secondary },
flexShrink: 0, flexShrink: 0,
height: "52px", height: "52px",
width: "52px", width: "52px",
@@ -142,8 +142,8 @@ function App() {
<Button <Button
onClick={() => setIsAddHostHidden(false)} onClick={() => setIsAddHostHidden(false)}
sx={{ sx={{
backgroundColor: theme.palette.neutral[700], backgroundColor: theme.palette.general.tertiary,
"&:hover": { backgroundColor: theme.palette.neutral[300] }, "&:hover": { backgroundColor: theme.palette.general.secondary },
flexShrink: 0, flexShrink: 0,
height: "52px", height: "52px",
width: "52px", width: "52px",
@@ -163,7 +163,16 @@ function App() {
{terminals.map((terminal) => ( {terminals.map((terminal) => (
<div <div
key={terminal.id} key={terminal.id}
className={`bg-neutral-800 rounded-lg overflow-hidden shadow-xl border-5 border-neutral-700 ${splitTabIds.includes(terminal.id) || activeTab === terminal.id ? "block" : "hidden"} flex-1`} className={`bg-neutral-800 rounded-lg overflow-hidden shadow-xl border-5 border-neutral-700 ${
splitTabIds.includes(terminal.id) || activeTab === terminal.id ? "block" : "hidden"
} flex-1`}
style={{
order: splitTabIds.includes(terminal.id)
? splitTabIds.indexOf(terminal.id) + 1
: activeTab === terminal.id
? 0
: undefined
}}
> >
<NewTerminal <NewTerminal
key={terminal.id} key={terminal.id}
@@ -172,9 +181,7 @@ function App() {
if (ref && !terminal.terminalRef) { if (ref && !terminal.terminalRef) {
setTerminals((prev) => setTerminals((prev) =>
prev.map((t) => prev.map((t) =>
t.id === terminal.id t.id === terminal.id ? { ...t, terminalRef: ref } : t
? { ...t, terminalRef: ref }
: t
) )
); );
} }
@@ -199,4 +206,4 @@ function App() {
); );
} }
export default App; export default App;

91
src/Launchpad.jsx
View File

@@ -1,29 +1,78 @@
import {Button} from "@mui/joy";
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useEffect, useRef } from 'react';
import { CssVarsProvider } from '@mui/joy/styles';
import { Button } from '@mui/joy';
import theme from './theme';
function Launchpad({ onClose }) { function Launchpad({ onClose }) {
const launchpadRef = useRef(null);
useEffect(() => {
const handleClickOutside = (event) => {
if (launchpadRef.current && !launchpadRef.current.contains(event.target)) {
onClose();
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [onClose]);
return ( return (
<div <CssVarsProvider theme={theme}>
style={{ <div
position: "fixed", style={{
top: "20%", position: "fixed",
left: "20%", top: "0",
width: "60%", left: "0",
height: "60%", width: "100%",
backgroundColor: "gray", height: "100%",
zIndex: 1000, backgroundColor: "rgba(0, 0, 0, 0.2)",
display: "flex", zIndex: 1000,
alignItems: "center", backdropFilter: "blur(5px)",
justifyContent: "center", display: "flex",
borderRadius: "8px", alignItems: "center",
}} justifyContent: "center",
> }}
<div className="text-center"> >
<h2 className="text-2xl font-bold mb-4">Launchpad</h2> <div
<p className="mb-4">This is your all-in-one launchpad panel.</p> ref={launchpadRef}
<Button onClick={onClose}>Close</Button> style={{
width: "75%",
height: "75%",
backgroundColor: theme.palette.general.tertiary,
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRadius: "8px",
boxShadow: "0 4px 10px rgba(0, 0, 0, 0.3)",
border: `1px solid ${theme.palette.general.secondary}`,
color: theme.palette.text.primary,
padding: 3,
}}
>
<div className="text-center">
<h2 className="text-2xl font-bold mb-4">Launchpad</h2>
<p className="mb-4">W.I.P. Feature</p>
<Button
type="submit"
onClick={onClose}
sx={{
backgroundColor: theme.palette.general.primary,
'&:hover': {
backgroundColor: theme.palette.general.disabled,
},
}}
>
Close
</Button>
</div>
</div>
</div> </div>
</div> </CssVarsProvider>
); );
} }

31
src/TabList.jsx
View File

@@ -10,22 +10,21 @@ function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, sp
const isActive = terminal.id === activeTab; const isActive = terminal.id === activeTab;
const isSplit = splitTabIds.includes(terminal.id); const isSplit = splitTabIds.includes(terminal.id);
// Disable split screen button for the active tab (before and after splitting)
const isSplitButtonDisabled = isActive && !isSplitScreenActive || splitTabIds.length >= 3 && !isSplit; const isSplitButtonDisabled = isActive && !isSplitScreenActive || splitTabIds.length >= 3 && !isSplit;
return ( return (
<div key={terminal.id} className={index < terminals.length - 1 ? "mr-[0.5rem]" : ""}> <div key={terminal.id} className={index < terminals.length - 1 ? "mr-[0.5rem]" : ""}>
<ButtonGroup> <ButtonGroup>
{/* Set active tab button */} {/* Set Active Tab Button */}
<Button <Button
onClick={() => setActiveTab(terminal.id)} onClick={() => setActiveTab(terminal.id)}
disabled={isSplit} // Disabled for split screen tabs disabled={isSplit}
sx={{ sx={{
backgroundColor: backgroundColor:
isActive ? theme.palette.neutral[500] : theme.palette.neutral[800], isActive ? theme.palette.general.primary : theme.palette.general.disabled,
color: theme.palette.text.primary, color: theme.palette.text.primary,
"&:hover": { backgroundColor: theme.palette.neutral[300] }, "&:hover": { backgroundColor: theme.palette.general.secondary },
":disabled": { backgroundColor: theme.palette.neutral[800] }, ":disabled": { backgroundColor: theme.palette.general.disabled },
borderTopLeftRadius: "4px", borderTopLeftRadius: "4px",
borderBottomLeftRadius: "4px", borderBottomLeftRadius: "4px",
height: "40px", height: "40px",
@@ -36,17 +35,17 @@ function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, sp
> >
{terminal.title} {terminal.title}
</Button> </Button>
{/* Split screen button */} {/* Split Screen Button */}
<Button <Button
onClick={() => toggleSplit(terminal.id)} onClick={() => toggleSplit(terminal.id)}
disabled={isSplitButtonDisabled || isActive} // Disable for the active tab (before and after split) disabled={isSplitButtonDisabled || isActive}
sx={{ sx={{
backgroundColor: isSplit backgroundColor: isSplit
? theme.palette.neutral[500] // Split tabs get color 700 ? theme.palette.general.primary
: theme.palette.neutral[700], // Active tab has disabled color : theme.palette.general.tertiary,
color: theme.palette.text.primary, color: theme.palette.text.primary,
":disabled": { backgroundColor: theme.palette.neutral[800] }, ":disabled": { backgroundColor: theme.palette.general.disabled },
"&:hover": { backgroundColor: theme.palette.neutral[300] }, "&:hover": { backgroundColor: theme.palette.general.secondary },
borderTopRightRadius: "4px", borderTopRightRadius: "4px",
borderBottomRightRadius: "4px", borderBottomRightRadius: "4px",
height: "40px", height: "40px",
@@ -56,15 +55,15 @@ function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, sp
> >
/ /
</Button> </Button>
{/* Close tab button */} {/* Close Tab Button */}
<Button <Button
onClick={() => closeTab(terminal.id)} onClick={() => closeTab(terminal.id)}
disabled={isSplitScreenActive && isActive || isSplit} disabled={isSplitScreenActive && isActive || isSplit}
sx={{ sx={{
backgroundColor: theme.palette.neutral[700], backgroundColor: theme.palette.general.tertiary,
color: theme.palette.text.primary, color: theme.palette.text.primary,
"&:hover": { backgroundColor: theme.palette.neutral[300] }, "&:hover": { backgroundColor: theme.palette.general.secondary },
":disabled": { backgroundColor: theme.palette.neutral[800] }, ":disabled": { backgroundColor: theme.palette.general.disabled },
borderTopRightRadius: "4px", borderTopRightRadius: "4px",
borderBottomRightRadius: "4px", borderBottomRightRadius: "4px",
height: "40px", height: "40px",

7
src/Terminal.jsx
View File

@@ -4,6 +4,7 @@ import { FitAddon } from "@xterm/addon-fit";
import "@xterm/xterm/css/xterm.css"; import "@xterm/xterm/css/xterm.css";
import io from "socket.io-client"; import io from "socket.io-client";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import theme from "./theme";
export function NewTerminal({ hostConfig }) { export function NewTerminal({ hostConfig }) {
const terminalRef = useRef(null); const terminalRef = useRef(null);
@@ -16,9 +17,9 @@ export function NewTerminal({ hostConfig }) {
const terminal = new Terminal({ const terminal = new Terminal({
cursorBlink: true, cursorBlink: true,
theme: { theme: {
background: "#242424", background: theme.palette.background.terminal,
foreground: "#ffffff", foreground: theme.palette.text.primary,
cursor: "#ffffff", cursor: theme.palette.text.primary,
}, },
fontSize: 14, fontSize: 14,
scrollback: 1000, scrollback: 1000,

33
src/theme.js
View File

@@ -17,28 +17,21 @@ const theme = extendTheme({
900: '#0f0f0f', 900: '#0f0f0f',
}, },
background: { background: {
default: '#212121', // Dark background to contrast white text primary: '#3d3d3d',
paper: '#333333', // Slightly lighter paper background for depth terminal: '#262626',
paper: '#555555',
}, },
text: { text: {
primary: '#ffffff', // White text for readability primary: '#f7f7f7',
secondary: '#b0b0b0', // Light gray for secondary text secondary: '#a7a7a7',
},
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
}, },
general: {
primary: '#6e6e6e',
secondary: '#a7a7a7',
tertiary: '#3d3d3d',
disabled: '#262626',
dark: '#0f0f0f',
}
}, },
}, },
}, },
@@ -47,4 +40,4 @@ const theme = extendTheme({
}, },
}); });
export default theme; export default theme;