Mirrors/ProxMenux
1
0
Fork 0
mirror of https://github.com/MacRimi/ProxMenux.git synced 2025-12-15 16:46:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update terminal-panel.tsx

Browse Source
This commit is contained in:
MacRimi
2025-11-23 14:04:43 +01:00
parent 6f72447e2e
commit 78770d1da5
1 changed files with 22 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
AppImage/components/terminal-panel.tsx
View File

@@ -12,7 +12,7 @@ import {
Lightbulb, Lightbulb,
Terminal, Terminal,
Plus, Plus,
Split, AlignJustify,
Grid2X2, Grid2X2,
GripHorizontal, GripHorizontal,
} from "lucide-react" } from "lucide-react"
@@ -134,7 +134,7 @@ const proxmoxCommands = [
export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onClose }) => { export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onClose }) => {
const [terminals, setTerminals] = useState<TerminalInstance[]>([]) const [terminals, setTerminals] = useState<TerminalInstance[]>([])
const [activeTerminalId, setActiveTerminalId] = useState<string>("") const [activeTerminalId, setActiveTerminalId] = useState<string>("")
const [layout, setLayout] = useState<"single" | "vertical" | "horizontal" | "grid">("single") const [layout, setLayout] = useState<"single" | "grid">("single")
const [isMobile, setIsMobile] = useState(false) const [isMobile, setIsMobile] = useState(false)
const [terminalHeight, setTerminalHeight] = useState<number>(500) // altura por defecto en px const [terminalHeight, setTerminalHeight] = useState<number>(500) // altura por defecto en px
const [isResizing, setIsResizing] = useState(false) const [isResizing, setIsResizing] = useState(false)
@@ -538,9 +538,15 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onCl
const getLayoutClass = () => { const getLayoutClass = () => {
const count = terminals.length const count = terminals.length
if (isMobile || count === 1) return "grid grid-cols-1" if (isMobile || count === 1) return "grid grid-cols-1"
if (layout === "vertical" || count === 2) return "grid grid-cols-2"
if (layout === "horizontal") return "grid grid-rows-2" // Vista de cuadrícula 2x2
if (layout === "grid" || count >= 3) return "grid grid-cols-2 grid-rows-2" if (layout === "grid") {
if (count === 2) return "grid grid-cols-2"
if (count === 3) return "grid grid-cols-2 grid-rows-2"
if (count === 4) return "grid grid-cols-2 grid-rows-2"
}
// Vista de filas apiladas (single) - una terminal debajo de otra
return "grid grid-cols-1" return "grid grid-cols-1"
} }
@@ -562,26 +568,20 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onCl
{!isMobile && terminals.length > 1 && ( {!isMobile && terminals.length > 1 && (
<> <>
<Button <Button
onClick={() => setLayout("vertical")} onClick={() => setLayout("single")}
variant="outline" variant="outline"
size="sm" size="sm"
className={`h-8 px-2 ${layout === "vertical" ? "bg-blue-500/20 border-blue-500" : ""}`} className={`h-8 px-2 ${layout === "single" ? "bg-blue-500/20 border-blue-500" : ""}`}
title="Vista apilada (filas)"
> >
<Split className="h-4 w-4 rotate-90" /> <AlignJustify className="h-4 w-4" />
</Button>
<Button
onClick={() => setLayout("horizontal")}
variant="outline"
size="sm"
className={`h-8 px-2 ${layout === "horizontal" ? "bg-blue-500/20 border-blue-500" : ""}`}
>
<Split className="h-4 w-4" />
</Button> </Button>
<Button <Button
onClick={() => setLayout("grid")} onClick={() => setLayout("grid")}
variant="outline" variant="outline"
size="sm" size="sm"
className={`h-8 px-2 ${layout === "grid" ? "bg-blue-500/20 border-blue-500" : ""}`} className={`h-8 px-2 ${layout === "grid" ? "bg-blue-500/20 border-blue-500" : ""}`}
title="Vista cuadrícula 2x2"
> >
<Grid2X2 className="h-4 w-4" /> <Grid2X2 className="h-4 w-4" />
</Button> </Button>
@@ -666,8 +666,8 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onCl
) : ( ) : (
<div className={`${getLayoutClass()} h-full gap-0.5 bg-zinc-800 p-0.5`}> <div className={`${getLayoutClass()} h-full gap-0.5 bg-zinc-800 p-0.5`}>
{terminals.map((terminal) => ( {terminals.map((terminal) => (
<div key={terminal.id} className="relative bg-zinc-900 overflow-hidden"> <div key={terminal.id} className="relative bg-zinc-900 overflow-hidden flex flex-col min-h-0">
<div className="absolute top-0 left-0 right-0 z-10 flex items-center justify-between px-2 py-1 bg-zinc-900/95 border-b border-zinc-800"> <div className="flex-shrink-0 flex items-center justify-between px-2 py-1 bg-zinc-900/95 border-b border-zinc-800">
<button <button
onClick={() => setActiveTerminalId(terminal.id)} onClick={() => setActiveTerminalId(terminal.id)}
className={`text-xs font-medium ${ className={`text-xs font-medium ${
@@ -682,7 +682,10 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onCl
</button> </button>
)} )}
</div> </div>
<div ref={(el) => (containerRefs.current[terminal.id] = el)} className="w-full h-full bg-black pt-7" /> <div
ref={(el) => (containerRefs.current[terminal.id] = el)}
className="flex-1 w-full bg-black overflow-hidden"
/>
</div> </div>
))} ))}
</div> </div>