Fixed up the split screen a lot. 3+ screens at once causes inability to unsplit. Still a WIP.
This commit is contained in:
Karmaa
101
src/App.jsx
101
src/App.jsx
@@ -67,29 +67,35 @@ function App() {
|
||||
const closeTab = (id) => {
|
||||
const newTerminals = terminals.filter((t) => t.id !== id);
|
||||
setTerminals(newTerminals);
|
||||
setSplitTabIds(prev => prev.filter(tabId => tabId !== id));
|
||||
if (activeTab === id) {
|
||||
setActiveTab(newTerminals[0]?.id || null);
|
||||
}
|
||||
};
|
||||
|
||||
// Toggle split for a specific tab
|
||||
// Toggle split for a terminal tab
|
||||
const toggleSplit = (id) => {
|
||||
setSplitTabIds(prev => {
|
||||
if (prev.includes(id)) {
|
||||
return prev.filter(tabId => tabId !== id);
|
||||
} else {
|
||||
if (prev.length >= 1) return prev; // Limit to 1 split
|
||||
return [...prev, id, activeTab].filter((tabId, index, self) => self.indexOf(tabId) === index);
|
||||
}
|
||||
});
|
||||
if (splitTabIds.length >= 3) return; // Prevent more than 2 tabs from splitting
|
||||
|
||||
setSplitTabIds((prev) =>
|
||||
prev.includes(id) ? prev.filter((splitId) => splitId !== id) : [...prev, id]
|
||||
);
|
||||
|
||||
if (splitTabIds.includes(id)) {
|
||||
setSplitTabIds((prev) => prev.filter((splitId) => splitId !== id));
|
||||
}
|
||||
};
|
||||
|
||||
// Get grid layout class based on split count
|
||||
const getGridLayout = (count) => {
|
||||
if (count === 1) return 'grid-cols-1';
|
||||
if (count === 2) return 'grid-cols-2';
|
||||
return 'grid-cols-1';
|
||||
// Determine the layout based on the number of split tabs
|
||||
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";
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -153,48 +159,29 @@ function App() {
|
||||
</div>
|
||||
|
||||
{/* Terminal Views */}
|
||||
<div className="flex-1 relative p-4">
|
||||
{splitTabIds.length > 0 ? (
|
||||
<div className={`grid gap-4 h-full ${getGridLayout(splitTabIds.length)}`}>
|
||||
{splitTabIds.map(id => {
|
||||
const terminal = terminals.find(t => t.id === id);
|
||||
return terminal ? (
|
||||
<div key={terminal.id} className="bg-neutral-800 rounded-lg overflow-hidden shadow-xl border-5 border-neutral-700 h-full">
|
||||
<NewTerminal
|
||||
key={terminal.id}
|
||||
hostConfig={terminal.hostConfig}
|
||||
ref={(ref) => {
|
||||
if (ref && !terminal.terminalRef) {
|
||||
setTerminals(prev => prev.map(t =>
|
||||
t.id === terminal.id ? { ...t, terminalRef: ref } : t
|
||||
));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : null;
|
||||
})}
|
||||
<div className={`relative p-4 ${getLayoutStyle()}`}>
|
||||
{terminals.map((terminal) => (
|
||||
<div
|
||||
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`}
|
||||
>
|
||||
<NewTerminal
|
||||
key={terminal.id}
|
||||
hostConfig={terminal.hostConfig}
|
||||
ref={(ref) => {
|
||||
if (ref && !terminal.terminalRef) {
|
||||
setTerminals((prev) =>
|
||||
prev.map((t) =>
|
||||
t.id === terminal.id
|
||||
? { ...t, terminalRef: ref }
|
||||
: t
|
||||
)
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="absolute top-4 left-4 right-4 bottom-4">
|
||||
{terminals.find(t => t.id === activeTab) && (
|
||||
<div className="bg-neutral-800 rounded-lg overflow-hidden shadow-xl border-5 border-neutral-700 h-full">
|
||||
<NewTerminal
|
||||
key={activeTab}
|
||||
hostConfig={terminals.find(t => t.id === activeTab).hostConfig}
|
||||
ref={(ref) => {
|
||||
const terminal = terminals.find(t => t.id === activeTab);
|
||||
if (ref && terminal && !terminal.terminalRef) {
|
||||
setTerminals(prev => prev.map(t =>
|
||||
t.id === activeTab ? { ...t, terminalRef: ref } : t
|
||||
));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -212,4 +199,4 @@ function App() {
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
export default App;
|
||||
|
||||
141
src/TabList.jsx
141
src/TabList.jsx
@@ -2,74 +2,81 @@ import { Button, ButtonGroup } from "@mui/joy";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, splitTabIds, theme }) {
|
||||
const isSplitScreenActive = splitTabIds.length > 0;
|
||||
|
||||
return (
|
||||
<div className="inline-flex items-center h-full px-[0.5rem]">
|
||||
{terminals.map((terminal, index) => (
|
||||
<div key={terminal.id} className={index < terminals.length - 1 ? "mr-[0.5rem]" : ""}>
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
onClick={() => splitTabIds.length === 0 && setActiveTab(terminal.id)}
|
||||
disabled={splitTabIds.length > 0}
|
||||
sx={{
|
||||
backgroundColor:
|
||||
terminal.id === activeTab
|
||||
? theme.palette.neutral[500]
|
||||
: theme.palette.neutral[800],
|
||||
color: theme.palette.text.primary,
|
||||
"&:hover": { backgroundColor: theme.palette.neutral[300] },
|
||||
borderTopLeftRadius: "4px",
|
||||
borderBottomLeftRadius: "4px",
|
||||
height: "40px",
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
}}
|
||||
>
|
||||
{terminal.title}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => toggleSplit(terminal.id)}
|
||||
disabled={
|
||||
(splitTabIds.length >= 1 && !splitTabIds.includes(terminal.id)) ||
|
||||
(splitTabIds.length === 0 && terminal.id === activeTab)
|
||||
}
|
||||
sx={{
|
||||
backgroundColor: splitTabIds.includes(terminal.id)
|
||||
? theme.palette.neutral[500]
|
||||
: theme.palette.neutral[700],
|
||||
color: theme.palette.text.primary,
|
||||
"&:hover": { backgroundColor: theme.palette.neutral[300] },
|
||||
borderTopRightRadius: "4px",
|
||||
borderBottomRightRadius: "4px",
|
||||
height: "40px",
|
||||
fontSize: "1rem",
|
||||
opacity: (splitTabIds.length >= 1 && !splitTabIds.includes(terminal.id)) ||
|
||||
(splitTabIds.length === 0 && terminal.id === activeTab) ? 0.5 : 1,
|
||||
cursor: (splitTabIds.length >= 1 && !splitTabIds.includes(terminal.id)) ||
|
||||
(splitTabIds.length === 0 && terminal.id === activeTab)
|
||||
? "not-allowed"
|
||||
: "pointer",
|
||||
}}
|
||||
>
|
||||
/
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => closeTab(terminal.id)}
|
||||
sx={{
|
||||
backgroundColor: theme.palette.neutral[700],
|
||||
color: theme.palette.text.primary,
|
||||
"&:hover": { backgroundColor: theme.palette.neutral[300] },
|
||||
borderTopRightRadius: "4px",
|
||||
borderBottomRightRadius: "4px",
|
||||
height: "40px",
|
||||
fontSize: "1rem",
|
||||
}}
|
||||
>
|
||||
×
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
))}
|
||||
{terminals.map((terminal, index) => {
|
||||
const isActive = terminal.id === activeTab;
|
||||
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;
|
||||
|
||||
return (
|
||||
<div key={terminal.id} className={index < terminals.length - 1 ? "mr-[0.5rem]" : ""}>
|
||||
<ButtonGroup>
|
||||
{/* Set active tab button */}
|
||||
<Button
|
||||
onClick={() => setActiveTab(terminal.id)}
|
||||
disabled={isSplit} // Disabled for split screen tabs
|
||||
sx={{
|
||||
backgroundColor:
|
||||
isActive ? theme.palette.neutral[500] : theme.palette.neutral[800],
|
||||
color: theme.palette.text.primary,
|
||||
"&:hover": { backgroundColor: theme.palette.neutral[300] },
|
||||
":disabled": { backgroundColor: theme.palette.neutral[800] },
|
||||
borderTopLeftRadius: "4px",
|
||||
borderBottomLeftRadius: "4px",
|
||||
height: "40px",
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
}}
|
||||
>
|
||||
{terminal.title}
|
||||
</Button>
|
||||
{/* Split screen button */}
|
||||
<Button
|
||||
onClick={() => toggleSplit(terminal.id)}
|
||||
disabled={isSplitButtonDisabled || isActive} // Disable for the active tab (before and after split)
|
||||
sx={{
|
||||
backgroundColor: isSplit
|
||||
? theme.palette.neutral[500] // Split tabs get color 700
|
||||
: theme.palette.neutral[700], // Active tab has disabled color
|
||||
color: theme.palette.text.primary,
|
||||
":disabled": { backgroundColor: theme.palette.neutral[800] },
|
||||
"&:hover": { backgroundColor: theme.palette.neutral[300] },
|
||||
borderTopRightRadius: "4px",
|
||||
borderBottomRightRadius: "4px",
|
||||
height: "40px",
|
||||
fontSize: "1rem",
|
||||
cursor: isSplitButtonDisabled ? "not-allowed" : "pointer",
|
||||
}}
|
||||
>
|
||||
/
|
||||
</Button>
|
||||
{/* Close tab button */}
|
||||
<Button
|
||||
onClick={() => closeTab(terminal.id)}
|
||||
disabled={isSplitScreenActive && isActive || isSplit}
|
||||
sx={{
|
||||
backgroundColor: theme.palette.neutral[700],
|
||||
color: theme.palette.text.primary,
|
||||
"&:hover": { backgroundColor: theme.palette.neutral[300] },
|
||||
":disabled": { backgroundColor: theme.palette.neutral[800] },
|
||||
borderTopRightRadius: "4px",
|
||||
borderBottomRightRadius: "4px",
|
||||
height: "40px",
|
||||
fontSize: "1rem",
|
||||
}}
|
||||
>
|
||||
×
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -84,4 +91,4 @@ TabList.propTypes = {
|
||||
theme: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default TabList;
|
||||
export default TabList;
|
||||
|
||||
Reference in New Issue
Block a user