Remove old terminal
This commit is contained in:
LukeGus
@@ -1,440 +0,0 @@
|
|||||||
import React, {useState} from 'react';
|
|
||||||
|
|
||||||
import {
|
|
||||||
CornerDownLeft,
|
|
||||||
Hammer, Pin, Menu
|
|
||||||
} from "lucide-react"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Button
|
|
||||||
} from "@/components/ui/button.tsx"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Sidebar,
|
|
||||||
SidebarContent,
|
|
||||||
SidebarGroup,
|
|
||||||
SidebarGroupContent,
|
|
||||||
SidebarGroupLabel,
|
|
||||||
SidebarMenu,
|
|
||||||
SidebarMenuItem, SidebarProvider,
|
|
||||||
} from "@/components/ui/sidebar.tsx"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Separator,
|
|
||||||
} from "@/components/ui/separator.tsx"
|
|
||||||
import {
|
|
||||||
Sheet,
|
|
||||||
SheetContent,
|
|
||||||
SheetHeader,
|
|
||||||
SheetTitle,
|
|
||||||
SheetTrigger
|
|
||||||
} from "@/components/ui/sheet.tsx";
|
|
||||||
import {
|
|
||||||
Accordion,
|
|
||||||
AccordionContent,
|
|
||||||
AccordionItem,
|
|
||||||
AccordionTrigger,
|
|
||||||
} from "@/components/ui/accordion.tsx";
|
|
||||||
import {ScrollArea} from "@/components/ui/scroll-area.tsx";
|
|
||||||
import {Input} from "@/components/ui/input.tsx";
|
|
||||||
import {getSSHHosts} from "@/apps/SSH/ssh-axios";
|
|
||||||
import {Checkbox} from "@/components/ui/checkbox.tsx";
|
|
||||||
|
|
||||||
interface SSHHost {
|
|
||||||
id: number;
|
|
||||||
name: string;
|
|
||||||
ip: string;
|
|
||||||
port: number;
|
|
||||||
username: string;
|
|
||||||
folder: string;
|
|
||||||
tags: string[];
|
|
||||||
pin: boolean;
|
|
||||||
authType: string;
|
|
||||||
password?: string;
|
|
||||||
key?: string;
|
|
||||||
keyPassword?: string;
|
|
||||||
keyType?: string;
|
|
||||||
enableTerminal: boolean;
|
|
||||||
enableTunnel: boolean;
|
|
||||||
enableConfigEditor: boolean;
|
|
||||||
defaultPath: string;
|
|
||||||
tunnelConnections: any[];
|
|
||||||
createdAt: string;
|
|
||||||
updatedAt: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface SidebarProps {
|
|
||||||
onSelectView: (view: string) => void;
|
|
||||||
onHostConnect: (hostConfig: any) => void;
|
|
||||||
allTabs: { id: number; title: string; terminalRef: React.RefObject<any> }[];
|
|
||||||
runCommandOnTabs: (tabIds: number[], command: string) => void;
|
|
||||||
onCloseSidebar?: () => void;
|
|
||||||
onAddHostSubmit?: (data: any) => void;
|
|
||||||
open?: boolean;
|
|
||||||
onOpenChange?: (open: boolean) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function TerminalSidebar({
|
|
||||||
onSelectView,
|
|
||||||
onHostConnect,
|
|
||||||
allTabs,
|
|
||||||
runCommandOnTabs,
|
|
||||||
onCloseSidebar,
|
|
||||||
open,
|
|
||||||
onOpenChange
|
|
||||||
}: SidebarProps): React.ReactElement {
|
|
||||||
const [hosts, setHosts] = useState<SSHHost[]>([]);
|
|
||||||
const [hostsLoading, setHostsLoading] = useState(false);
|
|
||||||
const [hostsError, setHostsError] = useState<string | null>(null);
|
|
||||||
const prevHostsRef = React.useRef<SSHHost[]>([]);
|
|
||||||
|
|
||||||
const fetchHosts = React.useCallback(async () => {
|
|
||||||
setHostsLoading(true);
|
|
||||||
setHostsError(null);
|
|
||||||
try {
|
|
||||||
const newHosts = await getSSHHosts();
|
|
||||||
const terminalHosts = newHosts.filter(host => host.enableTerminal);
|
|
||||||
|
|
||||||
const prevHosts = prevHostsRef.current;
|
|
||||||
const isSame =
|
|
||||||
terminalHosts.length === prevHosts.length &&
|
|
||||||
terminalHosts.every((h: SSHHost, i: number) => {
|
|
||||||
const prev = prevHosts[i];
|
|
||||||
if (!prev) return false;
|
|
||||||
return (
|
|
||||||
h.id === prev.id &&
|
|
||||||
h.name === prev.name &&
|
|
||||||
h.folder === prev.folder &&
|
|
||||||
h.ip === prev.ip &&
|
|
||||||
h.port === prev.port &&
|
|
||||||
h.username === prev.username &&
|
|
||||||
h.password === prev.password &&
|
|
||||||
h.authType === prev.authType &&
|
|
||||||
h.key === prev.key &&
|
|
||||||
h.pin === prev.pin &&
|
|
||||||
JSON.stringify(h.tags) === JSON.stringify(prev.tags)
|
|
||||||
);
|
|
||||||
});
|
|
||||||
if (!isSame) {
|
|
||||||
setHosts(terminalHosts);
|
|
||||||
prevHostsRef.current = terminalHosts;
|
|
||||||
}
|
|
||||||
} catch (err: any) {
|
|
||||||
setHostsError('Failed to load hosts');
|
|
||||||
} finally {
|
|
||||||
setHostsLoading(false);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
fetchHosts();
|
|
||||||
const interval = setInterval(fetchHosts, 10000);
|
|
||||||
return () => clearInterval(interval);
|
|
||||||
}, [fetchHosts]);
|
|
||||||
|
|
||||||
const [search, setSearch] = useState("");
|
|
||||||
const [debouncedSearch, setDebouncedSearch] = useState("");
|
|
||||||
React.useEffect(() => {
|
|
||||||
const handler = setTimeout(() => setDebouncedSearch(search), 200);
|
|
||||||
return () => clearTimeout(handler);
|
|
||||||
}, [search]);
|
|
||||||
|
|
||||||
const filteredHosts = React.useMemo(() => {
|
|
||||||
if (!debouncedSearch.trim()) return hosts;
|
|
||||||
const q = debouncedSearch.trim().toLowerCase();
|
|
||||||
return hosts.filter(h => {
|
|
||||||
const searchableText = [
|
|
||||||
h.name || '',
|
|
||||||
h.username,
|
|
||||||
h.ip,
|
|
||||||
h.folder || '',
|
|
||||||
...(h.tags || []),
|
|
||||||
h.authType,
|
|
||||||
h.defaultPath || ''
|
|
||||||
].join(' ').toLowerCase();
|
|
||||||
return searchableText.includes(q);
|
|
||||||
});
|
|
||||||
}, [hosts, debouncedSearch]);
|
|
||||||
|
|
||||||
const hostsByFolder = React.useMemo(() => {
|
|
||||||
const map: Record<string, SSHHost[]> = {};
|
|
||||||
filteredHosts.forEach(h => {
|
|
||||||
const folder = h.folder && h.folder.trim() ? h.folder : 'No Folder';
|
|
||||||
if (!map[folder]) map[folder] = [];
|
|
||||||
map[folder].push(h);
|
|
||||||
});
|
|
||||||
return map;
|
|
||||||
}, [filteredHosts]);
|
|
||||||
|
|
||||||
const sortedFolders = React.useMemo(() => {
|
|
||||||
const folders = Object.keys(hostsByFolder);
|
|
||||||
folders.sort((a, b) => {
|
|
||||||
if (a === 'No Folder') return -1;
|
|
||||||
if (b === 'No Folder') return 1;
|
|
||||||
return a.localeCompare(b);
|
|
||||||
});
|
|
||||||
return folders;
|
|
||||||
}, [hostsByFolder]);
|
|
||||||
|
|
||||||
const getSortedHosts = (arr: SSHHost[]) => {
|
|
||||||
const pinned = arr.filter(h => h.pin).sort((a, b) => (a.name || '').localeCompare(b.name || ''));
|
|
||||||
const rest = arr.filter(h => !h.pin).sort((a, b) => (a.name || '').localeCompare(b.name || ''));
|
|
||||||
return [...pinned, ...rest];
|
|
||||||
};
|
|
||||||
|
|
||||||
const [toolsSheetOpen, setToolsSheetOpen] = useState(false);
|
|
||||||
const [toolsCommand, setToolsCommand] = useState("");
|
|
||||||
const [selectedTabIds, setSelectedTabIds] = useState<number[]>([]);
|
|
||||||
|
|
||||||
const handleTabToggle = (tabId: number) => {
|
|
||||||
setSelectedTabIds(prev => prev.includes(tabId) ? prev.filter(id => id !== tabId) : [...prev, tabId]);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleRunCommand = () => {
|
|
||||||
if (selectedTabIds.length && toolsCommand.trim()) {
|
|
||||||
let cmd = toolsCommand;
|
|
||||||
if (!cmd.endsWith("\n")) cmd += "\n";
|
|
||||||
runCommandOnTabs(selectedTabIds, cmd);
|
|
||||||
setToolsCommand("");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
function getCookie(name: string) {
|
|
||||||
return document.cookie.split('; ').reduce((r, v) => {
|
|
||||||
const parts = v.split('=');
|
|
||||||
return parts[0] === name ? decodeURIComponent(parts[1]) : r;
|
|
||||||
}, "");
|
|
||||||
}
|
|
||||||
|
|
||||||
const updateRightClickCopyPaste = (checked) => {
|
|
||||||
document.cookie = `rightClickCopyPaste=${checked}; expires=2147483647; path=/`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SidebarProvider open={open} onOpenChange={onOpenChange}>
|
|
||||||
<Sidebar className="h-full flex flex-col overflow-hidden">
|
|
||||||
<SidebarContent className="flex flex-col flex-grow h-full overflow-hidden">
|
|
||||||
<SidebarGroup className="flex flex-col flex-grow h-full overflow-hidden">
|
|
||||||
<SidebarGroupLabel
|
|
||||||
className="text-lg font-bold text-white flex items-center justify-between gap-2 w-full">
|
|
||||||
<span>Termix / Terminal</span>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => onCloseSidebar?.()}
|
|
||||||
title="Hide sidebar"
|
|
||||||
style={{
|
|
||||||
height: 28,
|
|
||||||
width: 28,
|
|
||||||
display: 'inline-flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
background: 'hsl(240 5% 9%)',
|
|
||||||
color: 'hsl(240 5% 64.9%)',
|
|
||||||
border: '1px solid hsl(240 3.7% 15.9%)',
|
|
||||||
borderRadius: 6,
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Menu className="h-4 w-4"/>
|
|
||||||
</button>
|
|
||||||
</SidebarGroupLabel>
|
|
||||||
<Separator className="p-0.25 mt-1 mb-1"/>
|
|
||||||
<SidebarGroupContent className="flex flex-col flex-grow h-full overflow-hidden">
|
|
||||||
<SidebarMenu className="flex flex-col flex-grow h-full overflow-hidden">
|
|
||||||
|
|
||||||
<SidebarMenuItem key="Homepage">
|
|
||||||
<Button
|
|
||||||
className="w-full mt-2 mb-2 h-8"
|
|
||||||
onClick={() => onSelectView("homepage")}
|
|
||||||
variant="outline"
|
|
||||||
>
|
|
||||||
<CornerDownLeft/>
|
|
||||||
Return
|
|
||||||
</Button>
|
|
||||||
<Separator className="p-0.25 mt-1 mb-1"/>
|
|
||||||
</SidebarMenuItem>
|
|
||||||
|
|
||||||
<SidebarMenuItem key="Main" className="flex flex-col flex-grow overflow-hidden">
|
|
||||||
<div
|
|
||||||
className="w-full flex-grow rounded-md bg-[#09090b] border border-[#434345] overflow-hidden p-0 m-0 relative flex flex-col min-h-0">
|
|
||||||
<div className="w-full px-2 pt-2 pb-2 bg-[#09090b] z-10">
|
|
||||||
<Input
|
|
||||||
value={search}
|
|
||||||
onChange={e => setSearch(e.target.value)}
|
|
||||||
placeholder="Search hosts by name, username, IP, folder, tags..."
|
|
||||||
className="w-full h-8 text-sm bg-background border border-border rounded"
|
|
||||||
autoComplete="off"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div style={{display: 'flex', justifyContent: 'center'}}>
|
|
||||||
<Separator className="w-full h-px bg-[#434345] my-2"
|
|
||||||
style={{maxWidth: 213, margin: '0 auto'}}/>
|
|
||||||
</div>
|
|
||||||
{hostsError && (
|
|
||||||
<div className="px-2 py-1 mt-2">
|
|
||||||
<div
|
|
||||||
className="text-xs text-red-500 bg-red-500/10 rounded px-2 py-1 border border-red-500/20">{hostsError}</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="flex-1 min-h-0">
|
|
||||||
<ScrollArea className="w-full h-full">
|
|
||||||
<Accordion key={`host-accordion-${sortedFolders.length}`}
|
|
||||||
type="multiple" className="w-full"
|
|
||||||
defaultValue={sortedFolders.length > 0 ? sortedFolders : undefined}>
|
|
||||||
{sortedFolders.map((folder, idx) => (
|
|
||||||
<React.Fragment key={folder}>
|
|
||||||
<AccordionItem value={folder}
|
|
||||||
className={idx === 0 ? "mt-0 !border-b-transparent" : "mt-2 !border-b-transparent"}>
|
|
||||||
<AccordionTrigger
|
|
||||||
className="text-base font-semibold rounded-t-none px-3 py-2"
|
|
||||||
style={{marginTop: idx === 0 ? 0 : undefined}}>{folder}</AccordionTrigger>
|
|
||||||
<AccordionContent
|
|
||||||
className="flex flex-col gap-1 px-3 pb-2 pt-1">
|
|
||||||
{getSortedHosts(hostsByFolder[folder]).map(host => (
|
|
||||||
<div key={host.id}
|
|
||||||
className="w-full overflow-hidden">
|
|
||||||
<HostMenuItem
|
|
||||||
host={host}
|
|
||||||
onHostConnect={onHostConnect}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionItem>
|
|
||||||
{idx < sortedFolders.length - 1 && (
|
|
||||||
<div
|
|
||||||
style={{display: 'flex', justifyContent: 'center'}}>
|
|
||||||
<Separator className="h-px bg-[#434345] my-1"
|
|
||||||
style={{width: 213}}/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</React.Fragment>
|
|
||||||
))}
|
|
||||||
</Accordion>
|
|
||||||
</ScrollArea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</SidebarMenuItem>
|
|
||||||
</SidebarMenu>
|
|
||||||
</SidebarGroupContent>
|
|
||||||
<div className="bg-sidebar">
|
|
||||||
<Sheet open={toolsSheetOpen} onOpenChange={setToolsSheetOpen}>
|
|
||||||
<SheetTrigger asChild>
|
|
||||||
<Button
|
|
||||||
className="w-full h-8 mt-2"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => setToolsSheetOpen(true)}
|
|
||||||
>
|
|
||||||
<Hammer className="mr-2 h-4 w-4"/>
|
|
||||||
Tools
|
|
||||||
</Button>
|
|
||||||
</SheetTrigger>
|
|
||||||
<SheetContent side="left"
|
|
||||||
className="w-[256px] fixed top-0 left-0 h-full z-[100] flex flex-col">
|
|
||||||
<SheetHeader className="pb-0.5">
|
|
||||||
<SheetTitle>Tools</SheetTitle>
|
|
||||||
</SheetHeader>
|
|
||||||
<div className="flex-1 overflow-y-auto px-2 pt-2">
|
|
||||||
<Accordion type="single" collapsible defaultValue="multiwindow">
|
|
||||||
<AccordionItem value="multiwindow">
|
|
||||||
<AccordionTrigger className="text-base font-semibold">Run multiwindow
|
|
||||||
commands</AccordionTrigger>
|
|
||||||
<AccordionContent>
|
|
||||||
<textarea
|
|
||||||
className="w-full min-h-[120px] max-h-48 rounded-md border border-input text-foreground p-2 text-sm font-mono resize-vertical focus:outline-none focus:ring-0"
|
|
||||||
placeholder="Enter command(s) to run on selected tabs..."
|
|
||||||
value={toolsCommand}
|
|
||||||
onChange={e => setToolsCommand(e.target.value)}
|
|
||||||
style={{
|
|
||||||
fontFamily: 'monospace',
|
|
||||||
marginBottom: 8,
|
|
||||||
background: '#141416'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div className="flex flex-wrap gap-2 mb-2">
|
|
||||||
{allTabs.map(tab => (
|
|
||||||
<Button
|
|
||||||
key={tab.id}
|
|
||||||
type="button"
|
|
||||||
variant={selectedTabIds.includes(tab.id) ? "secondary" : "outline"}
|
|
||||||
size="sm"
|
|
||||||
className="rounded-full px-3 py-1 text-xs flex items-center gap-1"
|
|
||||||
onClick={() => handleTabToggle(tab.id)}
|
|
||||||
>
|
|
||||||
{tab.title}
|
|
||||||
</Button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
className="w-full"
|
|
||||||
variant="outline"
|
|
||||||
onClick={handleRunCommand}
|
|
||||||
disabled={!toolsCommand.trim() || !selectedTabIds.length}
|
|
||||||
>
|
|
||||||
Run Command
|
|
||||||
</Button>
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionItem>
|
|
||||||
</Accordion>
|
|
||||||
|
|
||||||
<Separator className="p-0.25"/>
|
|
||||||
|
|
||||||
<div className="flex items-center space-x-2 mt-5">
|
|
||||||
<Checkbox id="enable-copy-paste" onCheckedChange={updateRightClickCopyPaste}
|
|
||||||
defaultChecked={getCookie("rightClickCopyPaste") === "true"}/>
|
|
||||||
<label
|
|
||||||
htmlFor="enable-paste"
|
|
||||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
||||||
>
|
|
||||||
Enable right‑click copy/paste
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</SheetContent>
|
|
||||||
</Sheet>
|
|
||||||
</div>
|
|
||||||
</SidebarGroup>
|
|
||||||
</SidebarContent>
|
|
||||||
</Sidebar>
|
|
||||||
</SidebarProvider>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const HostMenuItem = React.memo(function HostMenuItem({host, onHostConnect}: {
|
|
||||||
host: SSHHost;
|
|
||||||
onHostConnect: (hostConfig: any) => void
|
|
||||||
}) {
|
|
||||||
const tags = Array.isArray(host.tags) ? host.tags : [];
|
|
||||||
const hasTags = tags.length > 0;
|
|
||||||
return (
|
|
||||||
<div className="relative group flex flex-col mb-1 w-full overflow-hidden">
|
|
||||||
<div className={`flex flex-col w-full rounded overflow-hidden border border-[#434345] bg-[#18181b] h-full`}>
|
|
||||||
<div className="flex w-full h-10">
|
|
||||||
<div
|
|
||||||
className="flex items-center h-full px-2 w-full hover:bg-muted transition-colors cursor-pointer"
|
|
||||||
onClick={() => onHostConnect(host)}
|
|
||||||
>
|
|
||||||
<div className="flex items-center w-full">
|
|
||||||
{host.pin &&
|
|
||||||
<Pin className="h-4.5 mr-1 w-4.5 mt-0.5 text-yellow-500 flex-shrink-0"/>
|
|
||||||
}
|
|
||||||
<span className="font-medium truncate">{host.name || host.ip}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{hasTags && (
|
|
||||||
<div
|
|
||||||
className="border-t border-border bg-[#18181b] flex items-center gap-1 px-2 py-2 overflow-x-auto overflow-y-hidden scrollbar-thin scrollbar-thumb-muted-foreground/30 scrollbar-track-transparent"
|
|
||||||
style={{height: 30}}>
|
|
||||||
{tags.map((tag: string) => (
|
|
||||||
<span key={tag}
|
|
||||||
className="bg-muted-foreground/10 text-xs rounded-full px-2 py-0.5 text-muted-foreground whitespace-nowrap border border-border flex-shrink-0 hover:bg-muted transition-colors">
|
|
||||||
{tag}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
Reference in New Issue
Block a user