Added server.tsx and make it work with tab system

This commit is contained in:
LukeGus
2025-08-16 01:30:18 -05:00
parent 2667af9437
commit 5445cb2b78
8 changed files with 144 additions and 54 deletions

View File

@@ -37,16 +37,14 @@ export function Host({ host }: HostProps): React.ReactElement {
const tags = Array.isArray(host.tags) ? host.tags : [];
const hasTags = tags.length > 0;
const title = host.name?.trim() ? host.name : `${host.username}@${host.ip}:${host.port}`;
const handleTerminalClick = () => {
console.log('Terminal button clicked for host:', host);
const title = host.name?.trim() ? host.name : `${host.username}@${host.ip}:${host.port}`;
console.log('Creating terminal tab with title:', title);
const tabId = addTab({
type: 'terminal',
title,
hostConfig: host,
});
console.log('Created terminal tab with ID:', tabId);
addTab({ type: 'terminal', title, hostConfig: host });
};
const handleServerClick = () => {
addTab({ type: 'server', title, hostConfig: host });
};
return (
@@ -59,7 +57,7 @@ export function Host({ host }: HostProps): React.ReactElement {
{host.name || host.ip}
</p>
<ButtonGroup className="flex-shrink-0">
<Button variant="outline" className="!px-2 border-1 border-[#303032]">
<Button variant="outline" className="!px-2 border-1 border-[#303032]" onClick={handleServerClick}>
<Server/>
</Button>
<Button

View File

@@ -1,7 +1,7 @@
import React from "react";
import {ButtonGroup} from "@/components/ui/button-group.tsx";
import {Button} from "@/components/ui/button.tsx";
import {Home, SeparatorVertical, X} from "lucide-react";
import {Home, SeparatorVertical, X, Terminal as TerminalIcon, Server as ServerIcon} from "lucide-react";
interface TabProps {
tabType: string;
@@ -31,7 +31,8 @@ export function Tab({tabType, title, isActive, onActivate, onClose, onSplit, can
);
}
if (tabType === "terminal") {
if (tabType === "terminal" || tabType === "server") {
const isServer = tabType === 'server';
return (
<ButtonGroup>
<Button
@@ -40,7 +41,8 @@ export function Tab({tabType, title, isActive, onActivate, onClose, onSplit, can
onClick={onActivate}
disabled={disableActivate}
>
{title || "Terminal"}
{isServer ? <ServerIcon className="mr-1 h-4 w-4"/> : <TerminalIcon className="mr-1 h-4 w-4"/>}
{title || (isServer ? 'Server' : 'Terminal')}
</Button>
{canSplit && (
<Button

View File

@@ -51,11 +51,13 @@ export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): Reac
const isActive = tab.id === currentTab;
const isSplit = Array.isArray(allSplitScreenTab) && allSplitScreenTab.includes(tab.id);
const isTerminal = tab.type === 'terminal';
const isServer = tab.type === 'server';
const isSshManager = tab.type === 'ssh_manager';
// Old logic port:
const isSplitButtonDisabled = (isActive && !isSplitScreenActive) || ((allSplitScreenTab?.length || 0) >= 3 && !isSplit);
// Split availability
const isSplittable = isTerminal || isServer;
// Disable split entirely when on Home or SSH Manager
const disableSplit = isSplitButtonDisabled || isActive || currentTabIsHome || currentTabIsSshManager || isSshManager;
const isSplitButtonDisabled = (isActive && !isSplitScreenActive) || ((allSplitScreenTab?.length || 0) >= 3 && !isSplit);
const disableSplit = !isSplittable || isSplitButtonDisabled || isActive || currentTabIsHome || currentTabIsSshManager;
const disableActivate = isSplit || ((tab.type === 'home' || tab.type === 'ssh_manager') && isSplitScreenActive);
const disableClose = (isSplitScreenActive && isActive) || isSplit;
return (
@@ -65,10 +67,10 @@ export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): Reac
title={tab.title}
isActive={isActive}
onActivate={() => handleTabActivate(tab.id)}
onClose={isTerminal || isSshManager ? () => handleTabClose(tab.id) : undefined}
onSplit={isTerminal ? () => handleTabSplit(tab.id) : undefined}
canSplit={isTerminal}
canClose={isTerminal || isSshManager}
onClose={isTerminal || isServer || isSshManager ? () => handleTabClose(tab.id) : undefined}
onSplit={isSplittable ? () => handleTabSplit(tab.id) : undefined}
canSplit={isSplittable}
canClose={isTerminal || isServer || isSshManager}
disableActivate={disableActivate}
disableSplit={disableSplit}
disableClose={disableClose}
@@ -81,7 +83,7 @@ export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): Reac
<Button
variant="outline"
onClick={() => setIsTopbarOpen(false)}
className="w-[28px] h-[28]"
className="w-[28px] h-[28px]"
>
<ChevronUpIcon/>
</Button>