110 lines
3.3 KiB
TypeScript
110 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import Tab from "@/components/ui/tab";
|
|
import { Terminal } from "@xterm/xterm";
|
|
import { Loader2, Plus, SquareTerminal, TerminalSquare } from "lucide-react";
|
|
import { toast } from "sonner";
|
|
import EditorTerminal from "./terminal";
|
|
import { useTerminal } from "@/context/TerminalContext";
|
|
import { useEffect } from "react";
|
|
|
|
export default function Terminals() {
|
|
const {
|
|
terminals,
|
|
setTerminals,
|
|
socket,
|
|
createNewTerminal,
|
|
closeTerminal,
|
|
activeTerminalId,
|
|
setActiveTerminalId,
|
|
creatingTerminal,
|
|
} = useTerminal();
|
|
|
|
const activeTerminal = terminals.find((t) => t.id === activeTerminalId);
|
|
|
|
// Effect to set the active terminal when a new one is created
|
|
useEffect(() => {
|
|
if (terminals.length > 0 && !activeTerminalId) {
|
|
setActiveTerminalId(terminals[terminals.length - 1].id);
|
|
}
|
|
}, [terminals, activeTerminalId, setActiveTerminalId]);
|
|
|
|
const handleCreateTerminal = () => {
|
|
if (terminals.length >= 4) {
|
|
toast.error("You reached the maximum # of terminals.");
|
|
return;
|
|
}
|
|
createNewTerminal();
|
|
};
|
|
|
|
const handleCloseTerminal = (termId: string) => {
|
|
closeTerminal(termId);
|
|
if (activeTerminalId === termId) {
|
|
const remainingTerminals = terminals.filter(t => t.id !== termId);
|
|
if (remainingTerminals.length > 0) {
|
|
setActiveTerminalId(remainingTerminals[0].id);
|
|
} else {
|
|
setActiveTerminalId("");
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="h-10 w-full overflow-auto flex gap-2 shrink-0 tab-scroll">
|
|
{terminals.map((term) => (
|
|
<Tab
|
|
key={term.id}
|
|
onClick={() => setActiveTerminalId(term.id)}
|
|
onClose={() => handleCloseTerminal(term.id)}
|
|
selected={activeTerminalId === term.id}
|
|
>
|
|
<SquareTerminal className="w-4 h-4 mr-2" />
|
|
Shell
|
|
</Tab>
|
|
))}
|
|
<Button
|
|
disabled={creatingTerminal}
|
|
onClick={handleCreateTerminal}
|
|
size="smIcon"
|
|
variant={"secondary"}
|
|
className={`font-normal shrink-0 select-none text-muted-foreground disabled:opacity-50`}
|
|
>
|
|
{creatingTerminal ? (
|
|
<Loader2 className="animate-spin w-4 h-4" />
|
|
) : (
|
|
<Plus className="w-4 h-4" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
{socket && activeTerminal ? (
|
|
<div className="w-full relative grow h-full overflow-hidden rounded-md bg-secondary">
|
|
{terminals.map((term) => (
|
|
<EditorTerminal
|
|
key={term.id}
|
|
socket={socket}
|
|
id={term.id}
|
|
term={term.terminal}
|
|
setTerm={(t: Terminal) => {
|
|
setTerminals((prev) =>
|
|
prev.map((prevTerm) =>
|
|
prevTerm.id === term.id
|
|
? { ...prevTerm, terminal: t }
|
|
: prevTerm
|
|
)
|
|
);
|
|
}}
|
|
visible={activeTerminalId === term.id}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center text-lg font-medium text-muted-foreground/50 select-none">
|
|
<TerminalSquare className="w-4 h-4 mr-2" />
|
|
No terminals open.
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
} |