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

Fixed up the split screen a lot. 3+ screens at once causes inability to unsplit. Still a WIP.

Browse Source
This commit is contained in:
Karmaa
2025-03-05 00:43:57 -06:00
parent 2038a84c15
commit a6295e5e7e
2 changed files with 118 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
src/TabList.jsx
View File

@@ -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;