Added initial split screen mode and overall better UI sizing for terminals. (very buggy)
This commit is contained in:
Karmaa
103
src/App.jsx
103
src/App.jsx
@@ -23,7 +23,7 @@ function App() {
|
||||
});
|
||||
const [isLaunchpadOpen, setIsLaunchpadOpen] = useState(false);
|
||||
|
||||
// Toggle Launchpad when "L" key is pressed
|
||||
// Handle keypress for opening launchpad
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e) => {
|
||||
if (e.ctrlKey && e.key === "l") {
|
||||
@@ -38,6 +38,7 @@ function App() {
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Handle adding a host
|
||||
const handleAddHost = () => {
|
||||
if (form.ip && form.user && form.password && form.port) {
|
||||
const newTerminal = {
|
||||
@@ -49,6 +50,8 @@ function App() {
|
||||
password: form.password,
|
||||
port: Number(form.port),
|
||||
},
|
||||
isSplit: false,
|
||||
terminalRef: null, // Reference to the terminal instance
|
||||
};
|
||||
setTerminals([...terminals, newTerminal]);
|
||||
setActiveTab(nextId);
|
||||
@@ -60,6 +63,7 @@ function App() {
|
||||
}
|
||||
};
|
||||
|
||||
// Close a terminal tab
|
||||
const closeTab = (id) => {
|
||||
const newTerminals = terminals.filter((t) => t.id !== id);
|
||||
setTerminals(newTerminals);
|
||||
@@ -68,39 +72,42 @@ function App() {
|
||||
}
|
||||
};
|
||||
|
||||
// Toggle split for a specific tab
|
||||
const toggleSplit = (id) => {
|
||||
setTerminals(terminals.map(t =>
|
||||
t.id === id ? { ...t, isSplit: !t.isSplit } : t
|
||||
));
|
||||
};
|
||||
|
||||
// Get the split terminals
|
||||
const splitTerminals = terminals.filter(t => t.isSplit);
|
||||
const mainTerminal = terminals.find(t => t.id === activeTab);
|
||||
|
||||
return (
|
||||
<CssVarsProvider theme={theme}>
|
||||
<div className="flex h-screen bg-neutral-900 overflow-hidden">
|
||||
<div className="flex-1 flex flex-col overflow-hidden">
|
||||
{/* Topbar */}
|
||||
<div className="bg-neutral-800 text-white p-4 flex items-center justify-between gap-4 min-h-[65px]">
|
||||
{/* Left: Title */}
|
||||
<div className="bg-neutral-800 text-white p-4 flex items-center justify-between gap-4 min-h-[75px] max-h-[75px]">
|
||||
<div className="bg-neutral-700 flex justify-center items-center gap-2 p-3 rounded-lg h-[52px]">
|
||||
<img
|
||||
src={TermixIcon}
|
||||
alt="Termix Icon"
|
||||
className="w-[30px] h-[30px]"
|
||||
/>
|
||||
<img src={TermixIcon} alt="Termix Icon" className="w-[30px] h-[30px]" />
|
||||
<h2 className="text-lg font-bold ml-[-2px]">Termix</h2>
|
||||
</div>
|
||||
|
||||
{/* Middle: Tabs with scroll */}
|
||||
<div className="flex-1 bg-neutral-700 rounded-lg overflow-hidden h-[52px] flex items-center">
|
||||
<div
|
||||
className="flex-1 overflow-x-auto overflow-y-hidden scrollbar-thin scrollbar-thumb-neutral-500 scrollbar-track-neutral-700 h-[52px] scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-1"
|
||||
style={{ whiteSpace: "nowrap" }}
|
||||
>
|
||||
<div className="flex-1 overflow-x-auto overflow-y-hidden scrollbar-thin scrollbar-thumb-neutral-500 scrollbar-track-neutral-700 h-[52px] scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-1">
|
||||
<TabList
|
||||
terminals={terminals}
|
||||
activeTab={activeTab}
|
||||
setActiveTab={setActiveTab}
|
||||
closeTab={closeTab}
|
||||
toggleSplit={toggleSplit}
|
||||
theme={theme}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Open Launchpad Button */}
|
||||
{/* Launchpad Button */}
|
||||
<Button
|
||||
onClick={() => setIsLaunchpadOpen(true)}
|
||||
sx={{
|
||||
@@ -109,21 +116,13 @@ function App() {
|
||||
flexShrink: 0,
|
||||
height: "52px",
|
||||
width: "52px",
|
||||
padding: 0, // To ensure no padding around the image
|
||||
padding: 0,
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={RocketIcon}
|
||||
alt="L"
|
||||
style={{
|
||||
width: "70%",
|
||||
height: "70",
|
||||
objectFit: "contain",
|
||||
}}
|
||||
/>
|
||||
<img src={RocketIcon} alt="Launchpad" style={{ width: "70%", height: "70", objectFit: "contain" }} />
|
||||
</Button>
|
||||
|
||||
{/* Right: Create Host Button */}
|
||||
{/* Add Host Button */}
|
||||
<Button
|
||||
onClick={() => setIsAddHostHidden(false)}
|
||||
sx={{
|
||||
@@ -136,9 +135,7 @@ function App() {
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
lineHeight: "normal",
|
||||
paddingTop: "2px",
|
||||
verticalAlign: "middle",
|
||||
}}
|
||||
>
|
||||
+
|
||||
@@ -146,20 +143,48 @@ function App() {
|
||||
</div>
|
||||
|
||||
{/* Terminal Views */}
|
||||
<div className="flex-1 relative pt-12 overflow-hidden">
|
||||
{terminals.map((terminal) => (
|
||||
<div
|
||||
key={terminal.id}
|
||||
className={`absolute top-0 left-0 right-0 bottom-0 ${
|
||||
terminal.id === activeTab ? "block" : "hidden"
|
||||
}`}
|
||||
>
|
||||
<NewTerminal hostConfig={terminal.hostConfig} />
|
||||
<div className="flex-1 relative p-4">
|
||||
{splitTerminals.length > 0 ? (
|
||||
<div className={`grid ${splitTerminals.length === 1 ? 'grid-cols-1' : 'grid-cols-2'} gap-4 h-full`}>
|
||||
{splitTerminals.map((terminal) => (
|
||||
<div key={terminal.id} className="bg-neutral-800 rounded-lg overflow-hidden shadow-xl border-5 border-neutral-700 h-full">
|
||||
<NewTerminal
|
||||
hostConfig={terminal.hostConfig}
|
||||
ref={(ref) => {
|
||||
if (ref && !terminal.terminalRef) {
|
||||
// Store the terminal instance reference
|
||||
setTerminals(prev => prev.map(t =>
|
||||
t.id === terminal.id ? { ...t, terminalRef: ref } : t
|
||||
));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
) : (
|
||||
<div className="absolute top-4 left-4 right-4 bottom-4">
|
||||
{mainTerminal && (
|
||||
<div className="bg-neutral-800 rounded-lg overflow-hidden shadow-xl border-5 border-neutral-700 h-full">
|
||||
<NewTerminal
|
||||
hostConfig={mainTerminal.hostConfig}
|
||||
ref={(ref) => {
|
||||
if (ref && !mainTerminal.terminalRef) {
|
||||
// Store the terminal instance reference
|
||||
setTerminals(prev => prev.map(t =>
|
||||
t.id === mainTerminal.id ? { ...t, terminalRef: ref } : t
|
||||
));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Modal for adding a host */}
|
||||
<AddHostModal
|
||||
isHidden={isAddHostHidden}
|
||||
form={form}
|
||||
@@ -169,9 +194,7 @@ function App() {
|
||||
/>
|
||||
|
||||
{/* Launchpad Component */}
|
||||
{isLaunchpadOpen && (
|
||||
<Launchpad onClose={() => setIsLaunchpadOpen(false)} />
|
||||
)}
|
||||
{isLaunchpadOpen && <Launchpad onClose={() => setIsLaunchpadOpen(false)} />}
|
||||
</div>
|
||||
</CssVarsProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user