Ethica/Termix
1
0
Fork 0
mirror of https://github.com/Termix-SSH/Termix.git synced 2026-07-16 05:13:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

v2.3.0

Browse Source
This commit is contained in:
LukeGus
2026-05-28 22:29:20 -05:00
parent 33dcde0827
commit 5777351145
238 changed files with 62303 additions and 98955 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ui/shell/CommandPalette.tsx
+298 -149
View File
@@ -1,9 +1,9 @@
import React, { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { cn } from "@/lib/utils";
import { Kbd } from "@/components/kbd";
import {
Command,
CommandInput,
CommandItem,
CommandList,
CommandGroup,
@@ -14,43 +14,26 @@ import {
Settings,
Terminal,
FolderOpen,
FolderSearch,
Box,
Globe,
Plus,
MessagesSquare,
LifeBuoy,
DollarSign,
Search,
Activity,
Network,
MoreHorizontal,
Edit3,
User,
KeyRound,
LayoutDashboard,
Monitor,
MousePointerClick,
Clock,
Folder,
Pencil,
} from "lucide-react";
import { Button } from "@/components/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/dropdown-menu";
type Host = {
name: string;
user: string;
address: string;
online: boolean;
cpu: number;
ram: number;
lastAccess: string;
tags?: string[];
enableTerminal?: boolean;
enableFileManager?: boolean;
enableDocker?: boolean;
enableTunnel?: boolean;
};
import { getRecentActivity, type RecentActivityItem } from "@/main-axios";
import type { Host } from "@/types/ui-types";
interface CommandPaletteProps {
isOpen: boolean;
@@ -59,35 +42,71 @@ interface CommandPaletteProps {
onOpenTab: (type: any, label?: string, pendingEvent?: string) => void;
}
const ACTION_ICONS: Record<string, React.ReactNode> = {
Terminal: <Terminal className="size-3" />,
Files: <FolderOpen className="size-3" />,
Docker: <Box className="size-3" />,
Stats: <Activity className="size-3" />,
Tunnels: <Network className="size-3" />,
const ACTIVITY_ICONS: Record<string, React.ReactNode> = {
terminal: <Terminal className="size-3.5" />,
file_manager: <FolderOpen className="size-3.5" />,
server_stats: <Activity className="size-3.5" />,
tunnel: <Network className="size-3.5" />,
docker: <Box className="size-3.5" />,
telnet: <MessagesSquare className="size-3.5" />,
vnc: <MousePointerClick className="size-3.5" />,
rdp: <Monitor className="size-3.5" />,
};
const ACTION_TAB_TYPE: Record<string, string> = {
Terminal: "terminal",
Files: "files",
Docker: "docker",
Stats: "stats",
Tunnels: "tunnel",
const ACTIVITY_TAB_TYPE: Record<string, string> = {
terminal: "terminal",
file_manager: "files",
server_stats: "stats",
tunnel: "tunnel",
docker: "docker",
telnet: "telnet",
vnc: "vnc",
rdp: "rdp",
};
function getSshActions(host: Host) {
const metricsEnabled = host.statsConfig?.metricsEnabled !== false;
return [
host.enableTerminal !== false && {
type: "terminal",
icon: Terminal,
label: "Terminal",
},
host.enableFileManager && {
type: "files",
icon: FolderSearch,
label: "Files",
},
host.enableDocker && { type: "docker", icon: Box, label: "Docker" },
host.enableTunnel && { type: "tunnel", icon: Network, label: "Tunnels" },
metricsEnabled && { type: "stats", icon: Activity, label: "Stats" },
].filter(Boolean) as {
type: string;
icon: React.ElementType;
label: string;
}[];
}
export function CommandPalette({
isOpen,
setIsOpen,
hosts,
onOpenTab,
}: CommandPaletteProps) {
const { t } = useTranslation();
const inputRef = useRef<HTMLInputElement>(null);
const [search, setSearch] = useState("");
const [recentActivity, setRecentActivity] = useState<RecentActivityItem[]>(
[],
);
useEffect(() => {
if (isOpen) {
setTimeout(() => inputRef.current?.focus(), 50);
setSearch("");
getRecentActivity(5)
.then(setRecentActivity)
.catch(() => {});
}
}, [isOpen]);
@@ -104,9 +123,28 @@ export function CommandPalette({
const filteredHosts = hosts.filter(
(h) =>
h.name.toLowerCase().includes(search.toLowerCase()) ||
h.ip.toLowerCase().includes(search.toLowerCase()),
h.ip.toLowerCase().includes(search.toLowerCase()) ||
h.username.toLowerCase().includes(search.toLowerCase()),
);
// Group hosts by folder; ungrouped hosts appear first under an implicit root group
const groupedHosts: { folder: string | null; hosts: Host[] }[] = [];
const folderMap = new Map<string, Host[]>();
const ungrouped: Host[] = [];
for (const h of filteredHosts) {
if (h.folder) {
if (!folderMap.has(h.folder)) folderMap.set(h.folder, []);
folderMap.get(h.folder)!.push(h);
} else {
ungrouped.push(h);
}
}
if (ungrouped.length > 0)
groupedHosts.push({ folder: null, hosts: ungrouped });
for (const [folder, fhosts] of folderMap) {
groupedHosts.push({ folder, hosts: fhosts });
}
const handleAction = (action: () => void) => {
action();
setIsOpen(false);
@@ -134,7 +172,7 @@ export function CommandPalette({
ref={inputRef}
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Search hosts, commands, or settings..."
placeholder={t("commandPalette.searchPlaceholder")}
className="flex-1 h-12 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
/>
<div className="flex items-center gap-1.5 ml-2">
@@ -145,7 +183,10 @@ export function CommandPalette({
</div>
<CommandList className="max-h-[60vh] thin-scrollbar">
<CommandGroup heading="Quick Actions" className="px-2">
<CommandGroup
heading={t("commandPalette.quickActions")}
className="px-2"
>
<CommandItem
onSelect={() => handleAction(() => onOpenTab("host-manager"))}
className="group flex items-center gap-3 px-3 py-2.5 rounded-none hover:bg-accent-brand/10 cursor-pointer"
@@ -154,9 +195,11 @@ export function CommandPalette({
<LayoutDashboard className="size-4 text-accent-brand" />
</div>
<div className="flex flex-col flex-1">
<span className="text-sm font-semibold">Host Manager</span>
<span className="text-sm font-semibold">
{t("commandPalette.hostManager")}
</span>
<span className="text-xs text-muted-foreground">
Manage, add, or edit hosts
{t("commandPalette.hostManagerDesc")}
</span>
</div>
</CommandItem>
@@ -177,9 +220,11 @@ export function CommandPalette({
<Plus className="size-4 text-accent-brand" />
</div>
<div className="flex flex-col flex-1">
<span className="text-sm font-semibold">Add New Host</span>
<span className="text-sm font-semibold">
{t("commandPalette.addNewHost")}
</span>
<span className="text-xs text-muted-foreground">
Register a new host
{t("commandPalette.addNewHostDesc")}
</span>
</div>
</CommandItem>
@@ -192,9 +237,11 @@ export function CommandPalette({
<Settings className="size-4 text-accent-brand" />
</div>
<div className="flex flex-col flex-1">
<span className="text-sm font-semibold">Admin Settings</span>
<span className="text-sm font-semibold">
{t("commandPalette.adminSettings")}
</span>
<span className="text-xs text-muted-foreground">
Configure system preferences and users
{t("commandPalette.adminSettingsDesc")}
</span>
</div>
</CommandItem>
@@ -207,9 +254,11 @@ export function CommandPalette({
<User className="size-4 text-accent-brand" />
</div>
<div className="flex flex-col flex-1">
<span className="text-sm font-semibold">User Profile</span>
<span className="text-sm font-semibold">
{t("commandPalette.userProfile")}
</span>
<span className="text-xs text-muted-foreground">
Manage your account and preferences
{t("commandPalette.userProfileDesc")}
</span>
</div>
</CommandItem>
@@ -230,142 +279,242 @@ export function CommandPalette({
<KeyRound className="size-4 text-accent-brand" />
</div>
<div className="flex flex-col flex-1">
<span className="text-sm font-semibold">Add Credential</span>
<span className="text-sm font-semibold">
{t("commandPalette.addCredential")}
</span>
<span className="text-xs text-muted-foreground">
Store SSH keys or passwords
{t("commandPalette.addCredentialDesc")}
</span>
</div>
</CommandItem>
</CommandGroup>
<CommandSeparator className="my-2" />
<CommandGroup heading="Servers & Hosts" className="px-2">
{filteredHosts.length > 0 ? (
filteredHosts.map((host, i) => {
const actions = [
host.enableTerminal !== false && "Terminal",
host.enableFileManager !== false && "Files",
host.enableDocker && "Docker",
host.enableTunnel && "Tunnels",
"Stats",
].filter(Boolean) as string[];
return (
{recentActivity.length > 0 && (
<>
<CommandSeparator className="my-2" />
<CommandGroup
heading={t("commandPalette.recentActivity")}
className="px-2"
>
{recentActivity.map((item) => (
<CommandItem
key={i}
key={item.id}
onSelect={() =>
handleAction(() => onOpenTab("terminal", host.name))
handleAction(() =>
onOpenTab(
ACTIVITY_TAB_TYPE[item.type] as any,
item.hostName,
),
)
}
className="group flex items-center gap-3 px-3 py-2.5 rounded-none hover:bg-accent-brand/10 cursor-pointer"
className="group flex items-center gap-3 px-3 py-2 rounded-none hover:bg-accent-brand/10 cursor-pointer"
>
<div className="size-8 rounded-none bg-muted flex items-center justify-center group-hover:bg-accent-brand/20 transition-colors shrink-0">
<Server
className={cn(
"size-4",
host.online
? "text-accent-brand"
: "text-muted-foreground",
)}
/>
<div className="size-7 rounded-none bg-muted flex items-center justify-center group-hover:bg-accent-brand/20 transition-colors text-muted-foreground group-hover:text-accent-brand">
{ACTIVITY_ICONS[item.type]}
</div>
<div className="flex flex-col flex-1 min-w-0">
<div className="flex items-center gap-2">
<span className="text-sm font-semibold truncate">
{host.name}
</span>
{host.online && (
<span className="size-1.5 rounded-full bg-accent-brand animate-pulse shrink-0" />
)}
</div>
<span className="text-xs text-muted-foreground font-mono">
{host.ip}
<span className="text-sm font-semibold truncate">
{item.hostName}
</span>
<span className="text-xs text-muted-foreground capitalize">
{item.type.replace("_", " ")}
</span>
</div>
<div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
{actions.map((action) => (
<Button
key={action}
variant="ghost"
size="icon"
title={action}
className="size-7 rounded-none hover:bg-accent-brand/20 hover:text-accent-brand"
onClick={(e) => {
e.stopPropagation();
handleAction(() =>
onOpenTab(
ACTION_TAB_TYPE[action] as any,
host.name,
),
);
}}
>
{ACTION_ICONS[action]}
</Button>
))}
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
size="icon"
className="size-7 rounded-none hover:bg-muted"
onClick={(e) => e.stopPropagation()}
>
<MoreHorizontal className="size-3" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent
align="end"
className="rounded-none border-border bg-card w-40"
>
<DropdownMenuItem
className="rounded-none text-xs font-semibold hover:bg-accent-brand/10 hover:text-accent-brand cursor-pointer"
onClick={(e) => {
e.stopPropagation();
handleAction(() => onOpenTab("host-manager"));
}}
>
<Edit3 className="size-3.5 mr-2" /> Edit Host
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<div className="flex items-center gap-1 text-muted-foreground/50">
<Clock className="size-3" />
<span className="text-[10px]">
{new Date(item.timestamp).toLocaleDateString()}
</span>
</div>
</CommandItem>
);
})
))}
</CommandGroup>
</>
)}
<CommandSeparator className="my-2" />
<CommandGroup
heading={t("commandPalette.serversAndHosts")}
className="px-2"
>
{filteredHosts.length > 0 ? (
groupedHosts.map(({ folder, hosts: groupHosts }) => (
<div key={folder ?? "__root__"}>
{folder && (
<div className="flex items-center gap-1.5 px-3 py-1.5 text-[11px] font-semibold text-muted-foreground/60 uppercase tracking-wide">
<Folder className="size-3" />
{folder}
</div>
)}
{groupHosts.map((host, i) => (
<CommandItem
key={i}
onSelect={() =>
handleAction(() => onOpenTab("terminal", host.name))
}
className="group flex items-center gap-3 px-3 py-2.5 rounded-none hover:bg-accent-brand/10 cursor-pointer"
>
<div className="size-8 rounded-none bg-muted flex items-center justify-center group-hover:bg-accent-brand/20 transition-colors shrink-0">
<Server
className={cn(
"size-4",
host.online
? "text-accent-brand"
: "text-muted-foreground",
)}
/>
</div>
<div className="flex flex-col flex-1 min-w-0">
<div className="flex items-center gap-2">
<span className="text-sm font-semibold truncate">
{host.name}
</span>
{host.online && (
<span className="size-1.5 rounded-full bg-accent-brand animate-pulse shrink-0" />
)}
</div>
<span className="text-xs text-muted-foreground font-mono">
{host.username}@{host.ip}
</span>
</div>
<div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
{host.enableSsh &&
getSshActions(host).map(
({ type, icon: Icon, label }) => (
<button
key={type}
title={label}
onClick={(e) => {
e.stopPropagation();
handleAction(() =>
onOpenTab(type as any, host.name),
);
}}
className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
>
<Icon className="size-3.5" />
</button>
),
)}
{host.enableSsh &&
(host.enableRdp ||
host.enableVnc ||
host.enableTelnet) && (
<div className="w-px h-3.5 bg-border/60 mx-0.5 shrink-0" />
)}
{host.enableRdp && (
<button
title="RDP"
onClick={(e) => {
e.stopPropagation();
handleAction(() => onOpenTab("rdp", host.name));
}}
className="flex items-center gap-1 px-2 h-6 rounded text-xs font-medium text-muted-foreground/70 hover:text-foreground hover:bg-muted-foreground/10 transition-colors border border-border/40"
>
<Monitor className="size-3" />
RDP
</button>
)}
{host.enableVnc && (
<button
title="VNC"
onClick={(e) => {
e.stopPropagation();
handleAction(() => onOpenTab("vnc", host.name));
}}
className="flex items-center gap-1 px-2 h-6 rounded text-xs font-medium text-muted-foreground/70 hover:text-foreground hover:bg-muted-foreground/10 transition-colors border border-border/40"
>
<MousePointerClick className="size-3" />
VNC
</button>
)}
{host.enableTelnet && (
<button
title="Telnet"
onClick={(e) => {
e.stopPropagation();
handleAction(() =>
onOpenTab("telnet", host.name),
);
}}
className="flex items-center gap-1 px-2 h-6 rounded text-xs font-medium text-muted-foreground/70 hover:text-foreground hover:bg-muted-foreground/10 transition-colors border border-border/40"
>
<Terminal className="size-3" />
Telnet
</button>
)}
<div className="w-px h-3.5 bg-border/60 mx-0.5 shrink-0" />
<button
title="Edit Host"
onClick={(e) => {
e.stopPropagation();
setIsOpen(false);
onOpenTab("host-manager");
setTimeout(() => {
window.dispatchEvent(
new CustomEvent("host-manager:edit-host", {
detail: host.id,
}),
);
}, 100);
}}
className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
>
<Pencil className="size-3.5" />
</button>
</div>
</CommandItem>
))}
</div>
))
) : (
<div className="py-6 text-center text-sm text-muted-foreground">
No hosts found matching "{search}"
{t("commandPalette.noHostsFound", { search })}
</div>
)}
</CommandGroup>
<CommandSeparator className="my-2" />
<CommandGroup heading="Links" className="px-2">
<div className="grid grid-cols-2 gap-1">
<CommandGroup heading={t("commandPalette.links")} className="px-2">
<div className="grid grid-cols-3 gap-1">
<CommandItem
onSelect={() => window.open("https://github.com", "_blank")}
onSelect={() =>
window.open(
"https://github.com/Termix-SSH/Termix",
"_blank",
)
}
className="flex items-center gap-3 px-3 py-2 rounded-none hover:bg-accent-brand/10 cursor-pointer"
>
<Globe className="size-4 text-muted-foreground" />
<span className="text-sm font-medium">GitHub</span>
</CommandItem>
<CommandItem
onSelect={() => window.open("https://discord.com", "_blank")}
onSelect={() =>
window.open(
"https://discord.com/invite/jVQGdvHDrf",
"_blank",
)
}
className="flex items-center gap-3 px-3 py-2 rounded-none hover:bg-accent-brand/10 cursor-pointer"
>
<MessagesSquare className="size-4 text-muted-foreground" />
<span className="text-sm font-medium">Discord</span>
</CommandItem>
<CommandItem className="flex items-center gap-3 px-3 py-2 rounded-none hover:bg-accent-brand/10 cursor-pointer">
<CommandItem
onSelect={() =>
window.open(
"https://github.com/Termix-SSH/Support/issues/new",
"_blank",
)
}
className="flex items-center gap-3 px-3 py-2 rounded-none hover:bg-accent-brand/10 cursor-pointer"
>
<LifeBuoy className="size-4 text-muted-foreground" />
<span className="text-sm font-medium">Support</span>
</CommandItem>
<CommandItem className="flex items-center gap-3 px-3 py-2 rounded-none hover:bg-accent-brand/10 cursor-pointer">
<DollarSign className="size-4 text-muted-foreground" />
<span className="text-sm font-medium">Donate</span>
</CommandItem>
</div>
</CommandGroup>
</CommandList>
@@ -374,15 +523,15 @@ export function CommandPalette({
<div className="flex items-center gap-3">
<div className="flex items-center gap-1">
<Kbd className="h-5 px-1 bg-background rounded-none">↑↓</Kbd>
<span>Navigate</span>
<span>{t("commandPalette.navigate")}</span>
</div>
<div className="flex items-center gap-1">
<Kbd className="h-5 px-1 bg-background rounded-none">ENTER</Kbd>
<span>Select</span>
<span>{t("commandPalette.select")}</span>
</div>
</div>
<div className="flex items-center gap-1">
<span>Toggle with</span>
<span>{t("commandPalette.toggleWith")}</span>
<Kbd className="h-5 px-1.5 bg-background rounded-none">Shift</Kbd>
<span>+</span>
<Kbd className="h-5 px-1.5 bg-background rounded-none">Shift</Kbd>
src/ui/shell/MobileBottomBar.tsx
+5
View File
@@ -37,6 +37,11 @@ const PRIMARY_ITEMS: {
];
const MORE_ITEMS: { view: RailView; icon: React.ReactNode; title: string }[] = [
{
view: "credentials",
icon: <KeyRound className="size-4" />,
title: "Credentials",
},
{ view: "history", icon: <Clock className="size-4" />, title: "History" },
{
view: "split-screen",
src/ui/shell/SplitView.tsx
+300 -111
View File
@@ -1,14 +1,13 @@
import { useState, useRef, useEffect } from "react";
import React, { useState, useRef, useEffect, memo, useCallback } from "react";
import { useTranslation } from "react-i18next";
import { splitDragState, notifyDragEnd } from "@/lib/splitDragging";
import { renderTabContent, tabIcon } from "@/shell/tabUtils";
import type { Tab, TabType, Host, SplitMode } from "@/types/ui-types";
// ─── Types ────────────────────────────────────────────────────────────────────
type RowColSizes = number[][];
import { tabIcon } from "@/shell/tabUtils";
import type { Tab, SplitMode } from "@/types/ui-types";
// ─── useSplitSizes ────────────────────────────────────────────────────────────
type RowColSizes = number[][];
function defaultSizes(mode: SplitMode): {
rowSizes: number[];
rowColSizes: RowColSizes;
@@ -18,6 +17,8 @@ function defaultSizes(mode: SplitMode): {
return { rowSizes: [100], rowColSizes: [[50, 50]] };
case "3-way":
return { rowSizes: [50, 50], rowColSizes: [[50, 50], [100]] };
case "3-way-horizontal":
return { rowSizes: [50, 50], rowColSizes: [[50, 50], [100]] };
case "4-way":
return {
rowSizes: [50, 50],
@@ -58,7 +59,6 @@ function useSplitSizes(splitMode: SplitMode) {
const d = defaultSizes(splitMode);
setRowSizes(d.rowSizes);
setRowColSizes(d.rowColSizes);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [splitMode]);
function reset() {
@@ -71,7 +71,6 @@ function useSplitSizes(splitMode: SplitMode) {
splitDragState.active = true;
setIsDragging(true);
}
function endDrag() {
splitDragState.active = false;
setIsDragging(false);
@@ -85,11 +84,13 @@ function useSplitSizes(splitMode: SplitMode) {
startDrag();
const totalH = container.getBoundingClientRect().height;
const startY = e.clientY;
const a = rowSizes[rowIdx];
const b = rowSizes[rowIdx + 1];
const a = rowSizes[rowIdx],
b = rowSizes[rowIdx + 1];
function onMove(ev: MouseEvent) {
const delta = ((ev.clientY - startY) / totalH) * 100;
const na = Math.max(10, Math.min(a + b - 10, a + delta));
const na = Math.max(
10,
Math.min(a + b - 10, a + ((ev.clientY - startY) / totalH) * 100),
);
setRowSizes((prev) => {
const n = [...prev];
n[rowIdx] = na;
@@ -112,11 +113,16 @@ function useSplitSizes(splitMode: SplitMode) {
startDrag();
const totalH = container.getBoundingClientRect().height;
const startY = e.touches[0].clientY;
const a = rowSizes[rowIdx];
const b = rowSizes[rowIdx + 1];
const a = rowSizes[rowIdx],
b = rowSizes[rowIdx + 1];
function onMove(ev: TouchEvent) {
const delta = ((ev.touches[0].clientY - startY) / totalH) * 100;
const na = Math.max(10, Math.min(a + b - 10, a + delta));
const na = Math.max(
10,
Math.min(
a + b - 10,
a + ((ev.touches[0].clientY - startY) / totalH) * 100,
),
);
setRowSizes((prev) => {
const n = [...prev];
n[rowIdx] = na;
@@ -141,11 +147,13 @@ function useSplitSizes(splitMode: SplitMode) {
const totalW = container.getBoundingClientRect().width;
const startX = e.clientX;
const cols = rowColSizes[rowIdx];
const a = cols[colIdx];
const b = cols[colIdx + 1];
const a = cols[colIdx],
b = cols[colIdx + 1];
function onMove(ev: MouseEvent) {
const delta = ((ev.clientX - startX) / totalW) * 100;
const na = Math.max(10, Math.min(a + b - 10, a + delta));
const na = Math.max(
10,
Math.min(a + b - 10, a + ((ev.clientX - startX) / totalW) * 100),
);
setRowColSizes((prev) => {
const next = prev.map((r) => [...r]);
next[rowIdx][colIdx] = na;
@@ -173,11 +181,16 @@ function useSplitSizes(splitMode: SplitMode) {
const totalW = container.getBoundingClientRect().width;
const startX = e.touches[0].clientX;
const cols = rowColSizes[rowIdx];
const a = cols[colIdx];
const b = cols[colIdx + 1];
const a = cols[colIdx],
b = cols[colIdx + 1];
function onMove(ev: TouchEvent) {
const delta = ((ev.touches[0].clientX - startX) / totalW) * 100;
const na = Math.max(10, Math.min(a + b - 10, a + delta));
const na = Math.max(
10,
Math.min(
a + b - 10,
a + ((ev.touches[0].clientX - startX) / totalW) * 100,
),
);
setRowColSizes((prev) => {
const next = prev.map((r) => [...r]);
next[rowIdx][colIdx] = na;
@@ -217,12 +230,14 @@ function ColDivider({
onTouchStart: (e: React.TouchEvent) => void;
}) {
return (
<div
onMouseDown={onMouseDown}
onTouchStart={onTouchStart}
className="relative w-3 shrink-0 cursor-col-resize z-10 flex items-center justify-center group"
>
<div className="w-px h-full bg-border group-hover:bg-accent-brand/60 transition-colors" />
<div className="relative w-0 shrink-0 z-10">
<div
onMouseDown={onMouseDown}
onTouchStart={onTouchStart}
className="absolute inset-y-0 -left-2 -right-2 cursor-col-resize flex items-center justify-center group"
>
<div className="w-px h-full bg-border group-hover:bg-accent-brand/60 transition-colors pointer-events-none" />
</div>
</div>
);
}
@@ -235,12 +250,14 @@ function RowDivider({
onTouchStart: (e: React.TouchEvent) => void;
}) {
return (
<div
onMouseDown={onMouseDown}
onTouchStart={onTouchStart}
className="relative h-3 w-full shrink-0 cursor-row-resize z-10 flex flex-col items-center justify-center group"
>
<div className="h-px w-full bg-border group-hover:bg-accent-brand/60 transition-colors" />
<div className="relative h-0 w-full shrink-0 z-10">
<div
onMouseDown={onMouseDown}
onTouchStart={onTouchStart}
className="absolute inset-x-0 -top-2 -bottom-2 cursor-row-resize flex flex-col items-center justify-center group"
>
<div className="h-px w-full bg-border group-hover:bg-accent-brand/60 transition-colors pointer-events-none" />
</div>
</div>
);
}
@@ -254,6 +271,7 @@ function PaneHeader({
tab: Tab | null;
paneIndex: number;
}) {
const { t } = useTranslation();
return (
<div className="flex items-center gap-1.5 px-2.5 h-7 shrink-0 bg-sidebar border-b border-border text-xs font-medium text-muted-foreground select-none">
{tab ? (
@@ -264,13 +282,16 @@ function PaneHeader({
</span>
</>
) : (
<span className="opacity-40">Pane {paneIndex + 1} — empty</span>
<span className="opacity-40">
{t("splitScreen.paneEmpty", { index: paneIndex + 1 })}
</span>
)}
</div>
);
}
function EmptyPane() {
const { t } = useTranslation();
return (
<div className="flex flex-col items-center justify-center w-full h-full gap-2 text-muted-foreground/30 bg-background">
<div className="grid grid-cols-2 gap-1">
@@ -279,30 +300,35 @@ function EmptyPane() {
<div className="size-5 border-2 border-current rounded-sm" />
<div className="size-5 border-2 border-current rounded-sm" />
</div>
<span className="text-xs">No tab assigned</span>
<span className="text-xs">{t("splitScreen.noTabAssigned")}</span>
</div>
);
}
function Pane({
const Pane = memo(function Pane({
tab,
paneIndex,
isDragging,
onOpenSingletonTab,
onOpenTab,
onPaneContentRef,
}: {
tab: Tab | null;
paneIndex: number;
isDragging: boolean;
onOpenSingletonTab: (type: TabType) => void;
onOpenTab: (host: Host, type: TabType) => void;
onPaneContentRef?: (paneIndex: number, el: HTMLDivElement | null) => void;
}) {
const contentRef = useCallback(
(el: HTMLDivElement | null) => {
onPaneContentRef?.(paneIndex, el);
},
[paneIndex, onPaneContentRef],
);
return (
<div className="relative flex flex-col w-full h-full min-w-0 min-h-0 overflow-hidden">
<PaneHeader tab={tab} paneIndex={paneIndex} />
<div className="flex-1 min-h-0 overflow-hidden">
<div className="flex-1 min-h-0 overflow-hidden relative">
{tab ? (
renderTabContent(tab, onOpenSingletonTab, onOpenTab)
<div ref={contentRef} className="absolute inset-0" />
) : (
<EmptyPane />
)}
@@ -312,22 +338,84 @@ function Pane({
)}
</div>
);
}
});
// ─── Row (top-level so React never sees a new component type) ─────────────────
const Row = memo(function Row({
rowIdx,
paneIndices,
rowHeight,
colWidths,
paneTabIds,
tabs,
isDragging,
onColDivider,
onColDividerTouch,
onPaneContentRef,
}: {
rowIdx: number;
paneIndices: number[];
rowHeight: number;
colWidths: number[];
paneTabIds: (string | null)[];
tabs: Tab[];
isDragging: boolean;
onColDivider: (e: React.MouseEvent, rowIdx: number, colIdx: number) => void;
onColDividerTouch: (
e: React.TouchEvent,
rowIdx: number,
colIdx: number,
) => void;
onPaneContentRef?: (paneIndex: number, el: HTMLDivElement | null) => void;
}) {
const widths = colWidths ?? [];
return (
<div className="flex min-h-0 w-full" style={{ height: `${rowHeight}%` }}>
{paneIndices.map((pIdx, ci) => {
const tabId = paneTabIds[pIdx];
const tab =
tabId != null ? (tabs.find((t) => t.id === tabId) ?? null) : null;
return (
<React.Fragment key={pIdx}>
<div
className="min-w-0 min-h-0 overflow-hidden"
style={{ width: `${widths[ci] ?? 100 / paneIndices.length}%` }}
>
<Pane
tab={tab}
paneIndex={pIdx}
isDragging={isDragging}
onPaneContentRef={onPaneContentRef}
/>
</div>
{ci < paneIndices.length - 1 && (
<ColDivider
onMouseDown={(e) => onColDivider(e, rowIdx, ci)}
onTouchStart={(e) => onColDividerTouch(e, rowIdx, ci)}
/>
)}
</React.Fragment>
);
})}
</div>
);
});
// ─── SplitView ────────────────────────────────────────────────────────────────
export function SplitView({
export const SplitView = memo(function SplitView({
tabs,
paneTabIds,
splitMode,
onOpenSingletonTab,
onOpenTab,
onTerminalResize,
onPaneContentRef,
}: {
tabs: Tab[];
paneTabIds: (string | null)[];
splitMode: SplitMode;
onOpenSingletonTab: (type: TabType) => void;
onOpenTab: (host: Host, type: TabType) => void;
onTerminalResize?: () => void;
onPaneContentRef?: (paneIndex: number, el: HTMLDivElement | null) => void;
}) {
const {
rowSizes,
@@ -341,55 +429,17 @@ export function SplitView({
onColDividerTouch,
} = useSplitSizes(splitMode);
function pane(idx: number) {
const tab =
paneTabIds[idx] != null
? (tabs.find((t) => t.id === paneTabIds[idx]) ?? null)
: null;
return (
<Pane
tab={tab}
paneIndex={idx}
isDragging={isDragging}
onOpenSingletonTab={onOpenSingletonTab}
onOpenTab={onOpenTab}
/>
);
}
useEffect(() => {
if (!isDragging) {
const id = requestAnimationFrame(() => onTerminalResize?.());
return () => cancelAnimationFrame(id);
}
}, [isDragging, onTerminalResize]);
function Row({
rowIdx,
paneIndices,
}: {
rowIdx: number;
paneIndices: number[];
}) {
const cols = rowColSizes[rowIdx] ?? [];
return (
<div
className="flex min-h-0 w-full"
style={{ height: `${rowSizes[rowIdx]}%` }}
>
{paneIndices.map((pIdx, ci) => (
<>
<div
key={pIdx}
className="min-w-0 min-h-0 overflow-hidden"
style={{ width: `${cols[ci]}%` }}
>
{pane(pIdx)}
</div>
{ci < paneIndices.length - 1 && (
<ColDivider
key={`cd-${rowIdx}-${ci}`}
onMouseDown={(e) => onColDivider(e, rowIdx, ci)}
onTouchStart={(e) => onColDividerTouch(e, rowIdx, ci)}
/>
)}
</>
))}
</div>
);
// Inline pane lookup for the non-Row layouts (3-way, 3-way-horizontal)
function tab(idx: number): Tab | null {
const tabId = paneTabIds[idx];
return tabId != null ? (tabs.find((t) => t.id === tabId) ?? null) : null;
}
return (
@@ -405,7 +455,20 @@ export function SplitView({
Reset
</button>
{splitMode === "2-way" && <Row rowIdx={0} paneIndices={[0, 1]} />}
{splitMode === "2-way" && (
<Row
rowIdx={0}
paneIndices={[0, 1]}
rowHeight={rowSizes[0]}
colWidths={rowColSizes[0] ?? []}
paneTabIds={paneTabIds}
tabs={tabs}
isDragging={isDragging}
onColDivider={onColDivider}
onColDividerTouch={onColDividerTouch}
onPaneContentRef={onPaneContentRef}
/>
)}
{splitMode === "3-way" && (
<div className="flex w-full h-full min-h-0">
@@ -413,7 +476,12 @@ export function SplitView({
className="min-w-0 min-h-0 overflow-hidden"
style={{ width: `${rowColSizes[0][0]}%` }}
>
{pane(0)}
<Pane
tab={tab(0)}
paneIndex={0}
isDragging={isDragging}
onPaneContentRef={onPaneContentRef}
/>
</div>
<ColDivider
onMouseDown={(e) => onColDivider(e, 0, 0)}
@@ -424,7 +492,12 @@ export function SplitView({
className="min-h-0 overflow-hidden"
style={{ height: `${rowSizes[0]}%` }}
>
{pane(1)}
<Pane
tab={tab(1)}
paneIndex={1}
isDragging={isDragging}
onPaneContentRef={onPaneContentRef}
/>
</div>
<RowDivider
onMouseDown={(e) => onRowDivider(e, 0)}
@@ -434,44 +507,160 @@ export function SplitView({
className="min-h-0 overflow-hidden"
style={{ height: `${rowSizes[1]}%` }}
>
{pane(2)}
<Pane
tab={tab(2)}
paneIndex={2}
isDragging={isDragging}
onPaneContentRef={onPaneContentRef}
/>
</div>
</div>
</div>
)}
{splitMode === "3-way-horizontal" && (
<div className="flex flex-col w-full h-full min-h-0">
<div
className="flex min-h-0 overflow-hidden"
style={{ height: `${rowSizes[0]}%` }}
>
<div
className="min-w-0 min-h-0 overflow-hidden"
style={{ width: `${rowColSizes[0][0]}%` }}
>
<Pane
tab={tab(0)}
paneIndex={0}
isDragging={isDragging}
onPaneContentRef={onPaneContentRef}
/>
</div>
<ColDivider
onMouseDown={(e) => onColDivider(e, 0, 0)}
onTouchStart={(e) => onColDividerTouch(e, 0, 0)}
/>
<div className="flex-1 min-w-0 min-h-0 overflow-hidden">
<Pane
tab={tab(1)}
paneIndex={1}
isDragging={isDragging}
onPaneContentRef={onPaneContentRef}
/>
</div>
</div>
<RowDivider
onMouseDown={(e) => onRowDivider(e, 0)}
onTouchStart={(e) => onRowDividerTouch(e, 0)}
/>
<div className="flex-1 min-h-0 overflow-hidden">
<Pane
tab={tab(2)}
paneIndex={2}
isDragging={isDragging}
onPaneContentRef={onPaneContentRef}
/>
</div>
</div>
)}
{splitMode === "4-way" && (
<div className="flex flex-col w-full h-full min-h-0">
<Row rowIdx={0} paneIndices={[0, 1]} />
<Row
rowIdx={0}
paneIndices={[0, 1]}
rowHeight={rowSizes[0]}
colWidths={rowColSizes[0] ?? []}
paneTabIds={paneTabIds}
tabs={tabs}
isDragging={isDragging}
onColDivider={onColDivider}
onColDividerTouch={onColDividerTouch}
onPaneContentRef={onPaneContentRef}
/>
<RowDivider
onMouseDown={(e) => onRowDivider(e, 0)}
onTouchStart={(e) => onRowDividerTouch(e, 0)}
/>
<Row rowIdx={1} paneIndices={[2, 3]} />
<Row
rowIdx={1}
paneIndices={[2, 3]}
rowHeight={rowSizes[1]}
colWidths={rowColSizes[1] ?? []}
paneTabIds={paneTabIds}
tabs={tabs}
isDragging={isDragging}
onColDivider={onColDivider}
onColDividerTouch={onColDividerTouch}
onPaneContentRef={onPaneContentRef}
/>
</div>
)}
{splitMode === "5-way" && (
<div className="flex flex-col w-full h-full min-h-0">
<Row rowIdx={0} paneIndices={[0, 1, 2]} />
<Row
rowIdx={0}
paneIndices={[0, 1, 2]}
rowHeight={rowSizes[0]}
colWidths={rowColSizes[0] ?? []}
paneTabIds={paneTabIds}
tabs={tabs}
isDragging={isDragging}
onColDivider={onColDivider}
onColDividerTouch={onColDividerTouch}
onPaneContentRef={onPaneContentRef}
/>
<RowDivider
onMouseDown={(e) => onRowDivider(e, 0)}
onTouchStart={(e) => onRowDividerTouch(e, 0)}
/>
<Row rowIdx={1} paneIndices={[3, 4]} />
<Row
rowIdx={1}
paneIndices={[3, 4]}
rowHeight={rowSizes[1]}
colWidths={rowColSizes[1] ?? []}
paneTabIds={paneTabIds}
tabs={tabs}
isDragging={isDragging}
onColDivider={onColDivider}
onColDividerTouch={onColDividerTouch}
onPaneContentRef={onPaneContentRef}
/>
</div>
)}
{splitMode === "6-way" && (
<div className="flex flex-col w-full h-full min-h-0">
<Row rowIdx={0} paneIndices={[0, 1, 2]} />
<Row
rowIdx={0}
paneIndices={[0, 1, 2]}
rowHeight={rowSizes[0]}
colWidths={rowColSizes[0] ?? []}
paneTabIds={paneTabIds}
tabs={tabs}
isDragging={isDragging}
onColDivider={onColDivider}
onColDividerTouch={onColDividerTouch}
onPaneContentRef={onPaneContentRef}
/>
<RowDivider
onMouseDown={(e) => onRowDivider(e, 0)}
onTouchStart={(e) => onRowDividerTouch(e, 0)}
/>
<Row rowIdx={1} paneIndices={[3, 4, 5]} />
<Row
rowIdx={1}
paneIndices={[3, 4, 5]}
rowHeight={rowSizes[1]}
colWidths={rowColSizes[1] ?? []}
paneTabIds={paneTabIds}
tabs={tabs}
isDragging={isDragging}
onColDivider={onColDivider}
onColDividerTouch={onColDividerTouch}
onPaneContentRef={onPaneContentRef}
/>
</div>
)}
</div>
);
}
});
src/ui/shell/TabBar.tsx
+37 -17
View File
@@ -4,24 +4,27 @@ import { Separator } from "@/components/separator";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/dropdown-menu";
import { ChevronDown, ChevronUp, X } from "lucide-react";
import { ChevronDown, ChevronUp, RefreshCw, X } from "lucide-react";
import { tabIcon } from "@/shell/tabUtils";
import type { Tab } from "@/types/ui-types";
import type { Tab, TabType } from "@/types/ui-types";
const CONNECTION_TAB_TYPES: TabType[] = ["terminal", "rdp", "vnc", "telnet"];
export function TabBar({
tabs,
activeTabId,
onSetActiveTab,
onCloseTab,
onRefreshTab,
onReorderTabs,
}: {
tabs: Tab[];
activeTabId: string;
onSetActiveTab: (id: string) => void;
onCloseTab: (id: string) => void;
onRefreshTab: (id: string) => void;
onReorderTabs: (tabs: Tab[]) => void;
}) {
const [open, setOpen] = useState(true);
@@ -69,8 +72,8 @@ export function TabBar({
const barRect = tabBarRef.current.getBoundingClientRect();
const x = Math.max(
barRect.left,
Math.min(barRect.right - d.width, e.clientX - d.offsetX),
barRect.left + 2,
Math.min(barRect.right - d.width - 6, e.clientX - d.offsetX),
);
const y = d.barTop;
setDragPos({ x, y });
@@ -218,16 +221,33 @@ export function TabBar({
{tabIcon(tab.type)}
{tab.type !== "dashboard" && tab.label}
{tab.type !== "dashboard" && (
<button
onPointerDown={(e) => e.stopPropagation()}
onClick={(e) => {
e.stopPropagation();
onCloseTab(tab.id);
}}
className={`flex items-center justify-center size-5 md:size-4 rounded-sm transition-opacity text-muted-foreground hover:text-foreground hover:bg-muted ml-1 ${active ? "opacity-100" : "opacity-0 group-hover/tab:opacity-100"}`}
<div
className={`flex items-center gap-0.5 ml-1 ${active ? "opacity-100" : "opacity-0 group-hover/tab:opacity-100"}`}
>
<X className="size-3" />
</button>
{CONNECTION_TAB_TYPES.includes(tab.type) && (
<button
onPointerDown={(e) => e.stopPropagation()}
onClick={(e) => {
e.stopPropagation();
onRefreshTab(tab.id);
}}
title="Refresh connection"
className="flex items-center justify-center size-5 md:size-4 rounded-sm transition-colors text-muted-foreground hover:text-foreground hover:bg-muted"
>
<RefreshCw className="size-3" />
</button>
)}
<button
onPointerDown={(e) => e.stopPropagation()}
onClick={(e) => {
e.stopPropagation();
onCloseTab(tab.id);
}}
className="flex items-center justify-center size-5 md:size-4 rounded-sm transition-colors text-muted-foreground hover:text-foreground hover:bg-muted"
>
<X className="size-3" />
</button>
</div>
)}
</div>
);
@@ -273,7 +293,7 @@ export function TabBar({
<Button
variant="ghost"
size="icon"
className="h-full w-12.5 rounded-none text-muted-foreground hover:text-foreground"
className="h-full w-12.5 border-y-0 border-r-0 border-border rounded-none text-muted-foreground hover:text-foreground"
>
<ChevronDown className="size-4" />
</Button>
@@ -314,7 +334,7 @@ export function TabBar({
<Button
variant="ghost"
size="icon"
className="h-full w-12.5 rounded-none text-muted-foreground hover:text-foreground"
className="h-full w-12.5 rounded-none border-y-0 border-border text-muted-foreground hover:text-foreground"
onClick={() => setOpen((o) => !o)}
>
<ChevronUp
@@ -326,7 +346,7 @@ export function TabBar({
{!open && (
<button
onClick={() => setOpen(true)}
className="flex items-center justify-center w-full h-6 bg-sidebar border-b border-border text-muted-foreground hover:text-accent-brand hover:bg-accent-brand/5 transition-colors shrink-0"
className="flex items-center justify-center w-full h-6 bg-sidebar border-b border-border text-muted-foreground hover:text-accent-brand hover:bg-accent-brand/5 transition-colors shrink-0"
>
<ChevronDown className="size-3.5" />
</button>
src/ui/shell/TabContext.tsx
+2 -2
View File
@@ -96,7 +96,7 @@ export function TabProvider({ children }: TabProviderProps) {
const isElectron =
typeof window !== "undefined" && !!(window as ElectronWindow).electronAPI;
const persistenceEnabled =
localStorage.getItem("enableTerminalSessionPersistence") === "true";
localStorage.getItem("enableTerminalSessionPersistence") !== "false";
const shouldRestore = isMobile || isElectron || persistenceEnabled;
if (!shouldRestore) {
@@ -165,7 +165,7 @@ export function TabProvider({ children }: TabProviderProps) {
const isElectron =
typeof window !== "undefined" && !!(window as ElectronWindow).electronAPI;
const persistenceEnabled =
localStorage.getItem("enableTerminalSessionPersistence") === "true";
localStorage.getItem("enableTerminalSessionPersistence") !== "false";
const shouldSave = isMobile || isElectron || persistenceEnabled;
if (shouldSave) {
src/ui/shell/tabUtils.tsx
+61 -18
View File
@@ -20,8 +20,10 @@ import { ServerStats } from "@/features/server-stats/ServerStats";
import GuacamoleApp from "@/features/guacamole/GuacamoleApp";
import { DashboardTab } from "@/dashboard/DashboardTab";
import { TunnelTab } from "@/features/tunnel/TunnelTab";
import { NetworkGraphCard } from "@/dashboard/cards/NetworkGraphCard";
import type { Tab, TabType, Host } from "@/types/ui-types";
import type { SSHHost } from "@/types";
import { useTabsSafe } from "@/shell/TabContext";
function hostToSSHHost(h: Host): SSHHost {
return {
@@ -103,13 +105,53 @@ export function tabIcon(type: TabType) {
return <Box className="size-3.5" />;
case "tunnel":
return <Network className="size-3.5" />;
case "network_graph":
return <Network className="size-3.5" />;
}
}
function TerminalTabContent({
tab,
host,
label,
isVisible,
onCloseTab,
}: {
tab: Tab;
host: Host;
label: string;
isVisible: boolean;
onCloseTab?: (id: string) => void;
}) {
const { previewTerminalTheme } = useTabsSafe();
return (
<CommandHistoryProvider>
<TerminalFeature
ref={tab.terminalRef as any}
hostConfig={
{
...hostToSSHHost(host),
sshPort: host.sshPort ?? host.port,
instanceId: tab.id,
} as any
}
isVisible={isVisible}
title={label}
showTitle={false}
splitScreen={false}
onClose={() => onCloseTab?.(tab.id)}
previewTheme={previewTerminalTheme}
/>
</CommandHistoryProvider>
);
}
export function renderTabContent(
tab: Tab,
onOpenSingletonTab?: (type: TabType) => void,
onOpenTab?: (host: Host, type: TabType) => void,
onCloseTab?: (id: string) => void,
isVisible = true,
) {
const { host, label } = tab;
@@ -131,21 +173,13 @@ export function renderTabContent(
/>
);
return (
<CommandHistoryProvider>
<TerminalFeature
hostConfig={
{
...hostToSSHHost(host),
sshPort: host.sshPort ?? host.port,
} as any
}
isVisible={true}
title={label}
showTitle={false}
splitScreen={false}
onClose={() => {}}
/>
</CommandHistoryProvider>
<TerminalTabContent
tab={tab}
host={host}
label={label}
isVisible={isVisible}
onCloseTab={onCloseTab}
/>
);
case "files":
@@ -165,7 +199,7 @@ export function renderTabContent(
<DockerManager
hostConfig={hostToSSHHost(host)}
title={label}
isVisible={true}
isVisible={isVisible}
isTopbarOpen={false}
embedded={true}
/>
@@ -180,7 +214,7 @@ export function renderTabContent(
<ServerStats
hostConfig={hostToSSHHost(host) as any}
title={label}
isVisible={true}
isVisible={isVisible}
isTopbarOpen={false}
embedded={true}
/>
@@ -196,7 +230,16 @@ export function renderTabContent(
return (
<EmptyState icon={Monitor} messageKey="guacamole.noHostSelected" />
);
return <GuacamoleApp hostId={host.id} />;
return (
<GuacamoleApp
hostId={host.id}
tabId={tab.id}
protocol={tab.type as "rdp" | "vnc" | "telnet"}
/>
);
case "network_graph":
return <NetworkGraphCard embedded={false} />;
case "host-manager":
case "user-profile":