-
+ {!isAuthenticated && !authLoading && (
+
+
+
+
+ )}
+
+ {!isAuthenticated && !authLoading && (
+
+
+ )}
+
+ {isAuthenticated && (
+
+
- )}
- {mountedViews.has("ssh_manager") && (
-
-
+
- )}
- {mountedViews.has("terminal") && (
-
-
+
+ );
+}
+
export default App
\ No newline at end of file
diff --git a/src/apps/Homepage/Homepage.tsx b/src/apps/Homepage/Homepage.tsx
deleted file mode 100644
index 470168b5..00000000
--- a/src/apps/Homepage/Homepage.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import {HomepageSidebar} from "@/apps/Homepage/HomepageSidebar.tsx";
-import React, {useEffect, useState} from "react";
-import {HomepageAuth} from "@/apps/Homepage/HomepageAuth.tsx";
-import axios from "axios";
-import {HomepageUpdateLog} from "@/apps/Homepage/HompageUpdateLog.tsx";
-
-interface HomepageProps {
- onSelectView: (view: string) => void;
-}
-
-function setCookie(name: string, value: string, days = 7) {
- const expires = new Date(Date.now() + days * 864e5).toUTCString();
- document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires}; path=/`;
-}
-
-function getCookie(name: string) {
- return document.cookie.split('; ').reduce((r, v) => {
- const parts = v.split('=');
- return parts[0] === name ? decodeURIComponent(parts[1]) : r;
- }, "");
-}
-
-const apiBase = import.meta.env.DEV ? "http://localhost:8081/users" : "/users";
-
-const API = axios.create({
- baseURL: apiBase,
-});
-
-export function Homepage({onSelectView}: HomepageProps): React.ReactElement {
- const [loggedIn, setLoggedIn] = useState(false);
- const [isAdmin, setIsAdmin] = useState(false);
- const [username, setUsername] = useState(null);
- const [authLoading, setAuthLoading] = useState(true);
- const [dbError, setDbError] = useState(null);
-
- useEffect(() => {
- const jwt = getCookie("jwt");
- if (jwt) {
- setAuthLoading(true);
- Promise.all([
- API.get("/me", {headers: {Authorization: `Bearer ${jwt}`}}),
- API.get("/db-health")
- ])
- .then(([meRes]) => {
- setLoggedIn(true);
- setIsAdmin(!!meRes.data.is_admin);
- setUsername(meRes.data.username || null);
- setDbError(null);
- })
- .catch((err) => {
- setLoggedIn(false);
- setIsAdmin(false);
- setUsername(null);
- setCookie("jwt", "", -1);
- if (err?.response?.data?.error?.includes("Database")) {
- setDbError("Could not connect to the database. Please try again later.");
- } else {
- setDbError(null);
- }
- })
- .finally(() => setAuthLoading(false));
- } else {
- setAuthLoading(false);
- }
- }, []);
-
- return (
-
-
- );
-}
\ No newline at end of file
diff --git a/src/apps/Homepage/HomepageAuth.tsx b/src/apps/Homepage/HomepageAuth.tsx
deleted file mode 100644
index 3ad1b24a..00000000
--- a/src/apps/Homepage/HomepageAuth.tsx
+++ /dev/null
@@ -1,400 +0,0 @@
-import React, {useState, useEffect} from "react";
-import {cn} from "@/lib/utils";
-import {Button} from "@/components/ui/button";
-import {Input} from "@/components/ui/input";
-import {Label} from "@/components/ui/label";
-import {Alert, AlertTitle, AlertDescription} from "@/components/ui/alert";
-import {Separator} from "@/components/ui/separator";
-import axios from "axios";
-
-function setCookie(name: string, value: string, days = 7) {
- const expires = new Date(Date.now() + days * 864e5).toUTCString();
- document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires}; path=/`;
-}
-
-function getCookie(name: string) {
- return document.cookie.split('; ').reduce((r, v) => {
- const parts = v.split('=');
- return parts[0] === name ? decodeURIComponent(parts[1]) : r;
- }, "");
-}
-
-const apiBase = import.meta.env.DEV ? "http://localhost:8081/users" : "/users";
-
-const API = axios.create({
- baseURL: apiBase,
-});
-
-interface HomepageAuthProps extends React.ComponentProps<"div"> {
- setLoggedIn: (loggedIn: boolean) => void;
- setIsAdmin: (isAdmin: boolean) => void;
- setUsername: (username: string | null) => void;
- loggedIn: boolean;
- authLoading: boolean;
- dbError: string | null;
- setDbError: (error: string | null) => void;
-}
-
-export function HomepageAuth({
- className,
- setLoggedIn,
- setIsAdmin,
- setUsername,
- loggedIn,
- authLoading,
- dbError,
- setDbError,
- ...props
- }: HomepageAuthProps) {
- const [tab, setTab] = useState<"login" | "signup" | "external">("login");
- const [localUsername, setLocalUsername] = useState("");
- const [password, setPassword] = useState("");
- const [loading, setLoading] = useState(false);
- const [oidcLoading, setOidcLoading] = useState(false);
- const [error, setError] = useState(null);
- const [internalLoggedIn, setInternalLoggedIn] = useState(false);
- const [firstUser, setFirstUser] = useState(false);
- const [registrationAllowed, setRegistrationAllowed] = useState(true);
- const [oidcConfigured, setOidcConfigured] = useState(false);
-
- useEffect(() => {
- setInternalLoggedIn(loggedIn);
- }, [loggedIn]);
-
- useEffect(() => {
- API.get("/registration-allowed").then(res => {
- setRegistrationAllowed(res.data.allowed);
- });
- }, []);
-
- useEffect(() => {
- API.get("/oidc-config").then((response) => {
- if (response.data) {
- setOidcConfigured(true);
- } else {
- setOidcConfigured(false);
- }
- }).catch((error) => {
- if (error.response?.status === 404) {
- setOidcConfigured(false);
- } else {
- setOidcConfigured(false);
- }
- });
- }, []);
-
- useEffect(() => {
- API.get("/count").then(res => {
- if (res.data.count === 0) {
- setFirstUser(true);
- setTab("signup");
- } else {
- setFirstUser(false);
- }
- setDbError(null);
- }).catch(() => {
- setDbError("Could not connect to the database. Please try again later.");
- });
- }, [setDbError]);
-
- async function handleSubmit(e: React.FormEvent) {
- e.preventDefault();
- setError(null);
- setLoading(true);
- try {
- let res, meRes;
- if (tab === "login") {
- res = await API.post("/login", {username: localUsername, password});
- } else {
- await API.post("/create", {username: localUsername, password});
- res = await API.post("/login", {username: localUsername, password});
- }
- setCookie("jwt", res.data.token);
- [meRes] = await Promise.all([
- API.get("/me", {headers: {Authorization: `Bearer ${res.data.token}`}}),
- API.get("/db-health")
- ]);
- setInternalLoggedIn(true);
- setLoggedIn(true);
- setIsAdmin(!!meRes.data.is_admin);
- setUsername(meRes.data.username || null);
- setDbError(null);
- } catch (err: any) {
- setError(err?.response?.data?.error || "Unknown error");
- setInternalLoggedIn(false);
- setLoggedIn(false);
- setIsAdmin(false);
- setUsername(null);
- setCookie("jwt", "", -1);
- if (err?.response?.data?.error?.includes("Database")) {
- setDbError("Could not connect to the database. Please try again later.");
- } else {
- setDbError(null);
- }
- } finally {
- setLoading(false);
- }
- }
-
- async function handleOIDCLogin() {
- setError(null);
- setOidcLoading(true);
- try {
- const authResponse = await API.get("/oidc/authorize");
- const {auth_url: authUrl} = authResponse.data;
-
- if (!authUrl || authUrl === 'undefined') {
- throw new Error('Invalid authorization URL received from backend');
- }
-
- window.location.replace(authUrl);
- } catch (err: any) {
- setError(err?.response?.data?.error || err?.message || "Failed to start OIDC login");
- setOidcLoading(false);
- }
- }
-
- useEffect(() => {
- const urlParams = new URLSearchParams(window.location.search);
- const success = urlParams.get('success');
- const token = urlParams.get('token');
- const error = urlParams.get('error');
-
- if (error) {
- setError(`OIDC authentication failed: ${error}`);
- setOidcLoading(false);
- window.history.replaceState({}, document.title, window.location.pathname);
- return;
- }
-
- if (success && token) {
- setOidcLoading(true);
- setError(null);
-
- setCookie("jwt", token);
- API.get("/me", {headers: {Authorization: `Bearer ${token}`}})
- .then(meRes => {
- setInternalLoggedIn(true);
- setLoggedIn(true);
- setIsAdmin(!!meRes.data.is_admin);
- setUsername(meRes.data.username || null);
- setDbError(null);
- window.history.replaceState({}, document.title, window.location.pathname);
- })
- .catch(err => {
- setError("Failed to get user info after OIDC login");
- setInternalLoggedIn(false);
- setLoggedIn(false);
- setIsAdmin(false);
- setUsername(null);
- setCookie("jwt", "", -1);
- window.history.replaceState({}, document.title, window.location.pathname);
- })
- .finally(() => {
- setOidcLoading(false);
- });
- }
- }, []);
-
- const Spinner = (
-
- );
-
- return (
- (null);
- const [oidcSuccess, setOidcSuccess] = React.useState(null);
-
- React.useEffect(() => {
- if (adminSheetOpen) {
- API.get("/registration-allowed").then(res => {
- setAllowRegistration(res.data.allowed);
- });
-
- API.get("/oidc-config").then(res => {
- if (res.data) {
- setOidcConfig(res.data);
- }
- }).catch((error) => {
- });
- }
- }, [adminSheetOpen]);
-
- const handleToggle = async (checked: boolean) => {
- setRegLoading(true);
- const jwt = getCookie("jwt");
- try {
- await API.patch(
- "/registration-allowed",
- {allowed: checked},
- {headers: {Authorization: `Bearer ${jwt}`}}
- );
- setAllowRegistration(checked);
- } catch (e) {
- } finally {
- setRegLoading(false);
- }
- };
-
- const handleOIDCConfigSubmit = async (e: React.FormEvent) => {
- e.preventDefault();
- setOidcLoading(true);
- setOidcError(null);
- setOidcSuccess(null);
-
- const requiredFields = ['client_id', 'client_secret', 'issuer_url', 'authorization_url', 'token_url'];
- const missingFields = requiredFields.filter(field => !oidcConfig[field as keyof typeof oidcConfig]);
-
- if (missingFields.length > 0) {
- setOidcError(`Missing required fields: ${missingFields.join(', ')}`);
- setOidcLoading(false);
- return;
- }
-
- const jwt = getCookie("jwt");
- try {
- await API.post(
- "/oidc-config",
- oidcConfig,
- {headers: {Authorization: `Bearer ${jwt}`}}
- );
- setOidcSuccess("OIDC configuration updated successfully!");
- } catch (err: any) {
- setOidcError(err?.response?.data?.error || "Failed to update OIDC configuration");
- } finally {
- setOidcLoading(false);
- }
- };
-
- const handleOIDCConfigChange = (field: string, value: string) => {
- setOidcConfig(prev => ({
- ...prev,
- [field]: value
- }));
- };
-
- return (
- ([]);
- const [loadingSSH, setLoadingSSH] = useState(false);
- const [errorSSH, setErrorSSH] = useState(undefined);
- const [view, setView] = useState<'servers' | 'files'>('servers');
- const [activeServer, setActiveServer] = useState(null);
- const [currentPath, setCurrentPath] = useState('/');
- const [files, setFiles] = useState([]);
- const pathInputRef = useRef(null);
-
- const [search, setSearch] = useState('');
- const [debouncedSearch, setDebouncedSearch] = useState('');
- const [fileSearch, setFileSearch] = useState('');
- const [debouncedFileSearch, setDebouncedFileSearch] = useState('');
- useEffect(() => {
- const handler = setTimeout(() => setDebouncedSearch(search), 200);
- return () => clearTimeout(handler);
- }, [search]);
- useEffect(() => {
- const handler = setTimeout(() => setDebouncedFileSearch(fileSearch), 200);
- return () => clearTimeout(handler);
- }, [fileSearch]);
-
- const [sshSessionId, setSshSessionId] = useState(null);
- const [filesLoading, setFilesLoading] = useState(false);
- const [filesError, setFilesError] = useState(null);
- const [connectingSSH, setConnectingSSH] = useState(false);
- const [connectionCache, setConnectionCache] = useState>({});
- const [fetchingFiles, setFetchingFiles] = useState(false);
-
- useEffect(() => {
- fetchSSH();
- }, []);
-
- async function fetchSSH() {
- setLoadingSSH(true);
- setErrorSSH(undefined);
- try {
- const hosts = await getSSHHosts();
- const configEditorHosts = hosts.filter(host => host.enableConfigEditor);
-
- if (configEditorHosts.length > 0) {
- const firstHost = configEditorHosts[0];
- }
-
- setSSHConnections(configEditorHosts);
- } catch (err: any) {
- setErrorSSH('Failed to load SSH connections');
- } finally {
- setLoadingSSH(false);
- }
- }
-
- async function connectToSSH(server: SSHHost): Promise {
- const sessionId = server.id.toString();
-
- const cached = connectionCache[sessionId];
- if (cached && Date.now() - cached.timestamp < 30000) {
- setSshSessionId(cached.sessionId);
- return cached.sessionId;
- }
-
- if (connectingSSH) {
- return null;
- }
-
- setConnectingSSH(true);
-
- try {
- if (!server.password && !server.key) {
- setFilesError('No authentication credentials available for this SSH host');
- return null;
- }
-
- const connectionConfig = {
- ip: server.ip,
- port: server.port,
- username: server.username,
- password: server.password,
- sshKey: server.key,
- keyPassword: server.keyPassword,
- };
-
- await connectSSH(sessionId, connectionConfig);
-
- setSshSessionId(sessionId);
-
- setConnectionCache(prev => ({
- ...prev,
- [sessionId]: {sessionId, timestamp: Date.now()}
- }));
-
- return sessionId;
- } catch (err: any) {
- setFilesError(err?.response?.data?.error || 'Failed to connect to SSH');
- setSshSessionId(null);
- return null;
- } finally {
- setConnectingSSH(false);
- }
- }
-
- async function fetchFiles() {
- if (fetchingFiles) {
- return;
- }
-
- setFetchingFiles(true);
- setFiles([]);
- setFilesLoading(true);
- setFilesError(null);
-
- try {
- let pinnedFiles: any[] = [];
- try {
- if (activeServer) {
- pinnedFiles = await getConfigEditorPinned(activeServer.id);
- }
- } catch (err) {
- }
-
- if (activeServer && sshSessionId) {
- let res: any[] = [];
-
- try {
- const status = await getSSHStatus(sshSessionId);
- if (!status.connected) {
- const newSessionId = await connectToSSH(activeServer);
- if (newSessionId) {
- setSshSessionId(newSessionId);
- res = await listSSHFiles(newSessionId, currentPath);
- } else {
- throw new Error('Failed to reconnect SSH session');
- }
- } else {
- res = await listSSHFiles(sshSessionId, currentPath);
- }
- } catch (sessionErr) {
- const newSessionId = await connectToSSH(activeServer);
- if (newSessionId) {
- setSshSessionId(newSessionId);
- res = await listSSHFiles(newSessionId, currentPath);
- } else {
- throw sessionErr;
- }
- }
-
- const processedFiles = (res || []).map((f: any) => {
- const filePath = currentPath + (currentPath.endsWith('/') ? '' : '/') + f.name;
- const isPinned = pinnedFiles.some(pinned => pinned.path === filePath);
- return {
- ...f,
- path: filePath,
- isPinned,
- isSSH: true,
- sshSessionId: sshSessionId
- };
- });
-
- setFiles(processedFiles);
- }
- } catch (err: any) {
- setFiles([]);
- setFilesError(err?.response?.data?.error || err?.message || 'Failed to list files');
- } finally {
- setFilesLoading(false);
- setFetchingFiles(false);
- }
- }
-
- useEffect(() => {
- if (view === 'files' && activeServer && sshSessionId && !connectingSSH && !fetchingFiles) {
- const timeoutId = setTimeout(() => {
- fetchFiles();
- }, 100);
- return () => clearTimeout(timeoutId);
- }
- }, [currentPath, view, activeServer, sshSessionId]);
-
- async function handleSelectServer(server: SSHHost) {
- if (connectingSSH) {
- return;
- }
-
- setFetchingFiles(false);
- setFilesLoading(false);
- setFilesError(null);
- setFiles([]);
-
- setActiveServer(server);
- setCurrentPath(server.defaultPath || '/');
- setView('files');
-
- const sessionId = await connectToSSH(server);
- if (sessionId) {
- setSshSessionId(sessionId);
- if (onHostChange) {
- onHostChange(server);
- }
- } else {
- w
- setView('servers');
- setActiveServer(null);
- }
- }
-
- useImperativeHandle(ref, () => ({
- openFolder: async (server: SSHHost, path: string) => {
- if (connectingSSH || fetchingFiles) {
- return;
- }
-
- if (activeServer?.id === server.id && currentPath === path) {
- setTimeout(() => fetchFiles(), 100);
- return;
- }
-
- setFetchingFiles(false);
- setFilesLoading(false);
- setFilesError(null);
- setFiles([]);
-
- setActiveServer(server);
- setCurrentPath(path);
- setView('files');
-
- if (!sshSessionId || activeServer?.id !== server.id) {
- const sessionId = await connectToSSH(server);
- if (sessionId) {
- setSshSessionId(sessionId);
- if (onHostChange && activeServer?.id !== server.id) {
- onHostChange(server);
- }
- } else {
- setView('servers');
- setActiveServer(null);
- }
- } else {
- if (onHostChange && activeServer?.id !== server.id) {
- onHostChange(server);
- }
- }
- },
- fetchFiles: () => {
- if (activeServer && sshSessionId) {
- fetchFiles();
- }
- }
- }));
-
- useEffect(() => {
- if (pathInputRef.current) {
- pathInputRef.current.scrollLeft = pathInputRef.current.scrollWidth;
- }
- }, [currentPath]);
-
- const sshByFolder: Record = {};
- sshConnections.forEach(conn => {
- const folder = conn.folder && conn.folder.trim() ? conn.folder : 'No Folder';
- if (!sshByFolder[folder]) sshByFolder[folder] = [];
- sshByFolder[folder].push(conn);
- });
-
- const sortedFolders = Object.keys(sshByFolder);
- if (sortedFolders.includes('No Folder')) {
- sortedFolders.splice(sortedFolders.indexOf('No Folder'), 1);
- sortedFolders.unshift('No Folder');
- }
-
- const filteredSshByFolder: Record = {};
- Object.entries(sshByFolder).forEach(([folder, hosts]) => {
- filteredSshByFolder[folder] = hosts.filter(conn => {
- const q = debouncedSearch.trim().toLowerCase();
- if (!q) return true;
- return (conn.name || '').toLowerCase().includes(q) || (conn.ip || '').toLowerCase().includes(q) ||
- (conn.username || '').toLowerCase().includes(q) || (conn.folder || '').toLowerCase().includes(q) ||
- (conn.tags || []).join(' ').toLowerCase().includes(q);
- });
- });
-
- const filteredFiles = files.filter(file => {
- const q = debouncedFileSearch.trim().toLowerCase();
- if (!q) return true;
- return file.name.toLowerCase().includes(q);
- });
-
- return (
-
-
-
-
-
- Termix / Config
-
-
-
-
-
-
-
-
-
-
-
-
- );
-});
-export {ConfigEditorSidebar};
\ No newline at end of file
diff --git a/src/apps/SSH/Config Editor/ConfigTabList.tsx b/src/apps/SSH/Config Editor/ConfigTabList.tsx
deleted file mode 100644
index 37ae5962..00000000
--- a/src/apps/SSH/Config Editor/ConfigTabList.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-import {Button} from '@/components/ui/button.tsx';
-import {X, Home} from 'lucide-react';
-
-interface ConfigTab {
- id: string | number;
- title: string;
-}
-
-interface ConfigTabListProps {
- tabs: ConfigTab[];
- activeTab: string | number;
- setActiveTab: (tab: string | number) => void;
- closeTab: (tab: string | number) => void;
- onHomeClick: () => void;
-}
-
-export function ConfigTabList({tabs, activeTab, setActiveTab, closeTab, onHomeClick}: ConfigTabListProps) {
- return (
- ([]);
- const [loading, setLoading] = useState(true);
- const [error, setError] = useState(null);
- const [searchQuery, setSearchQuery] = useState("");
-
- useEffect(() => {
- fetchHosts();
- }, []);
-
- const fetchHosts = async () => {
- try {
- setLoading(true);
- const data = await getSSHHosts();
- setHosts(data);
- setError(null);
- } catch (err) {
- setError('Failed to load hosts');
- } finally {
- setLoading(false);
- }
- };
-
- const handleDelete = async (hostId: number, hostName: string) => {
- if (window.confirm(`Are you sure you want to delete "${hostName}"?`)) {
- try {
- await deleteSSHHost(hostId);
- await fetchHosts();
- } catch (err) {
- alert('Failed to delete host');
- }
- }
- };
-
- const handleEdit = (host: SSHHost) => {
- if (onEditHost) {
- onEditHost(host);
- }
- };
-
- const filteredAndSortedHosts = useMemo(() => {
- let filtered = hosts;
-
- if (searchQuery.trim()) {
- const query = searchQuery.toLowerCase();
- filtered = hosts.filter(host => {
- const searchableText = [
- host.name || '',
- host.username,
- host.ip,
- host.folder || '',
- ...(host.tags || []),
- host.authType,
- host.defaultPath || ''
- ].join(' ').toLowerCase();
- return searchableText.includes(query);
- });
- }
-
- return filtered.sort((a, b) => {
- if (a.pin && !b.pin) return -1;
- if (!a.pin && b.pin) return 1;
-
- const aName = a.name || a.username;
- const bName = b.name || b.username;
- return aName.localeCompare(bName);
- });
- }, [hosts, searchQuery]);
-
- const hostsByFolder = useMemo(() => {
- const grouped: { [key: string]: SSHHost[] } = {};
-
- filteredAndSortedHosts.forEach(host => {
- const folder = host.folder || 'Uncategorized';
- if (!grouped[folder]) {
- grouped[folder] = [];
- }
- grouped[folder].push(host);
- });
-
- const sortedFolders = Object.keys(grouped).sort((a, b) => {
- if (a === 'Uncategorized') return -1;
- if (b === 'Uncategorized') return 1;
- return a.localeCompare(b);
- });
-
- const sortedGrouped: { [key: string]: SSHHost[] } = {};
- sortedFolders.forEach(folder => {
- sortedGrouped[folder] = grouped[folder];
- });
-
- return sortedGrouped;
- }, [filteredAndSortedHosts]);
-
- if (loading) {
- return (
-
-
-
-
-
- Termix / SSH Manager
-
-
-
-
- {/* Sidebar Items */}
-
-
-
-
-
-
-
-
-
-
- )
-}
\ No newline at end of file
diff --git a/src/apps/SSH/Terminal/SSH.tsx b/src/apps/SSH/Terminal/SSH.tsx
deleted file mode 100644
index 002be4ca..00000000
--- a/src/apps/SSH/Terminal/SSH.tsx
+++ /dev/null
@@ -1,778 +0,0 @@
-import React, {useState, useRef, useEffect} from "react";
-import {SSHSidebar} from "@/apps/SSH/Terminal/SSHSidebar.tsx";
-import {SSHTerminal} from "./SSHTerminal.tsx";
-import {SSHTopbar} from "@/apps/SSH/Terminal/SSHTopbar.tsx";
-import {ResizablePanelGroup, ResizablePanel, ResizableHandle} from '@/components/ui/resizable.tsx';
-import * as ResizablePrimitive from "react-resizable-panels";
-
-interface ConfigEditorProps {
- onSelectView: (view: string) => void;
-}
-
-type Tab = {
- id: number;
- title: string;
- hostConfig: any;
- terminalRef: React.RefObject;
-};
-
-export function SSH({onSelectView}: ConfigEditorProps): React.ReactElement {
- const [allTabs, setAllTabs] = useState([]);
- const [currentTab, setCurrentTab] = useState(null);
- const [allSplitScreenTab, setAllSplitScreenTab] = useState([]);
- const nextTabId = useRef(1);
-
- const [isSidebarOpen, setIsSidebarOpen] = useState(true);
- const [isTopbarOpen, setIsTopbarOpen] = useState(true);
- const SIDEBAR_WIDTH = 256;
- const HANDLE_THICKNESS = 6;
-
- const [panelRects, setPanelRects] = useState>({});
- const panelRefs = useRef>({});
- const panelGroupRefs = useRef<{ [key: string]: any }>({});
-
- const setActiveTab = (tabId: number) => {
- setCurrentTab(tabId);
- };
-
- const fitVisibleTerminals = () => {
- allTabs.forEach((terminal) => {
- const isVisible =
- (allSplitScreenTab.length === 0 && terminal.id === currentTab) ||
- (allSplitScreenTab.length > 0 && (terminal.id === currentTab || allSplitScreenTab.includes(terminal.id)));
- if (isVisible && terminal.terminalRef && terminal.terminalRef.current && typeof terminal.terminalRef.current.fit === 'function') {
- terminal.terminalRef.current.fit();
- }
- });
- };
-
- const setSplitScreenTab = (tabId: number) => {
- fitVisibleTerminals();
- setAllSplitScreenTab((prev) => {
- let next;
- if (prev.includes(tabId)) {
- next = prev.filter((id) => id !== tabId);
- } else if (prev.length < 3) {
- next = [...prev, tabId];
- } else {
- next = prev;
- }
- setTimeout(() => fitVisibleTerminals(), 0);
- return next;
- });
- };
-
- const setCloseTab = (tabId: number) => {
- const tab = allTabs.find((t) => t.id === tabId);
- if (tab && tab.terminalRef && tab.terminalRef.current && typeof tab.terminalRef.current.disconnect === "function") {
- tab.terminalRef.current.disconnect();
- }
- setAllTabs((prev) => prev.filter((tab) => tab.id !== tabId));
- setAllSplitScreenTab((prev) => prev.filter((id) => id !== tabId));
- if (currentTab === tabId) {
- const remainingTabs = allTabs.filter((tab) => tab.id !== tabId);
- setCurrentTab(remainingTabs.length > 0 ? remainingTabs[0].id : null);
- }
- };
-
- const updatePanelRects = () => {
- setPanelRects((prev) => {
- const next: Record = {...prev};
- Object.entries(panelRefs.current).forEach(([id, ref]) => {
- if (ref) {
- next[id] = ref.getBoundingClientRect();
- }
- });
- return next;
- });
- };
-
- useEffect(() => {
- const observers: ResizeObserver[] = [];
- Object.entries(panelRefs.current).forEach(([id, ref]) => {
- if (ref) {
- const observer = new ResizeObserver(() => updatePanelRects());
- observer.observe(ref);
- observers.push(observer);
- }
- });
- updatePanelRects();
- return () => {
- observers.forEach((observer) => observer.disconnect());
- };
- }, [allSplitScreenTab, currentTab, allTabs.length]);
-
- const renderAllTerminals = () => {
- const layoutStyles: Record = {};
- const splitTabs = allTabs.filter((tab) => allSplitScreenTab.includes(tab.id));
- const mainTab = allTabs.find((tab) => tab.id === currentTab);
- const layoutTabs = [mainTab, ...splitTabs.filter((t) => t && t.id !== (mainTab && mainTab.id))].filter((t): t is Tab => !!t);
- if (allSplitScreenTab.length === 0 && mainTab) {
- layoutStyles[mainTab.id] = {
- position: 'absolute',
- top: 0,
- left: 0,
- width: '100%',
- height: '100%',
- zIndex: 20,
- display: 'block',
- pointerEvents: 'auto',
- };
- } else {
- layoutTabs.forEach((tab) => {
- const rect = panelRects[String(tab.id)];
- if (rect) {
- const parentRect = panelRefs.current['parent']?.getBoundingClientRect();
- let top = rect.top, left = rect.left, width = rect.width, height = rect.height;
- if (parentRect) {
- top = rect.top - parentRect.top;
- left = rect.left - parentRect.left;
- }
- layoutStyles[tab.id] = {
- position: 'absolute',
- top: top + 28,
- left,
- width,
- height: height - 28,
- zIndex: 20,
- display: 'block',
- pointerEvents: 'auto',
- };
- }
- });
- }
- return (
- ();
- const newTab: Tab = {
- id,
- title,
- hostConfig: data,
- terminalRef,
- };
- setAllTabs((prev) => [...prev, newTab]);
- setCurrentTab(id);
- setAllSplitScreenTab((prev) => prev.filter((tid) => tid !== id));
- };
-
- const getUniqueTabTitle = (baseTitle: string) => {
- let title = baseTitle;
- let count = 1;
- const existingTitles = allTabs.map(t => t.title);
- while (existingTitles.includes(title)) {
- title = `${baseTitle} (${count})`;
- count++;
- }
- return title;
- };
-
- const onHostConnect = (hostConfig: any) => {
- const baseTitle = hostConfig.name?.trim() ? hostConfig.name : `${hostConfig.ip || "Host"}:${hostConfig.port || 22}`;
- const title = getUniqueTabTitle(baseTitle);
- const terminalRef = React.createRef();
- const id = nextTabId.current++;
- const newTab: Tab = {
- id,
- title,
- hostConfig,
- terminalRef,
- };
- setAllTabs((prev) => [...prev, newTab]);
- setCurrentTab(id);
- setAllSplitScreenTab((prev) => prev.filter((tid) => tid !== id));
- };
-
- return (
-
+
- )}
- {mountedViews.has("tunnel") && (
-
-
+
+ )}
+
)
}
+function App() {
+ return (
+
+
- )}
- {mountedViews.has("config_editor") && (
-
-
- )}
-
+
+
-
-
-
-
-
- );
-}
\ No newline at end of file
diff --git a/src/apps/Homepage/HomepageSidebar.tsx b/src/apps/Homepage/HomepageSidebar.tsx
deleted file mode 100644
index ec2af144..00000000
--- a/src/apps/Homepage/HomepageSidebar.tsx
+++ /dev/null
@@ -1,438 +0,0 @@
-import React from 'react';
-import {
- Computer,
- Server,
- File,
- Hammer, ChevronUp, User2, HardDrive
-} from "lucide-react";
-
-import {
- Sidebar,
- SidebarContent, SidebarFooter,
- SidebarGroup,
- SidebarGroupContent,
- SidebarGroupLabel,
- SidebarMenu,
- SidebarMenuButton,
- SidebarMenuItem, SidebarProvider, SidebarInset,
-} from "@/components/ui/sidebar.tsx"
-
-import {
- Separator,
-} from "@/components/ui/separator.tsx"
-import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from "@radix-ui/react-dropdown-menu";
-import {
- Sheet,
- SheetContent,
- SheetDescription,
- SheetFooter,
- SheetHeader,
- SheetTitle,
- SheetTrigger,
- SheetClose
-} from "@/components/ui/sheet";
-import {Checkbox} from "@/components/ui/checkbox.tsx";
-import {Input} from "@/components/ui/input.tsx";
-import {Label} from "@/components/ui/label.tsx";
-import {Button} from "@/components/ui/button.tsx";
-import {Alert, AlertTitle, AlertDescription} from "@/components/ui/alert.tsx";
-import axios from "axios";
-
-interface SidebarProps {
- onSelectView: (view: string) => void;
- getView?: () => string;
- disabled?: boolean;
- isAdmin?: boolean;
- username?: string | null;
- children?: React.ReactNode;
-}
-
-function handleLogout() {
- document.cookie = 'jwt=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
- window.location.reload();
-}
-
-function getCookie(name: string) {
- return document.cookie.split('; ').reduce((r, v) => {
- const parts = v.split('=');
- return parts[0] === name ? decodeURIComponent(parts[1]) : r;
- }, "");
-}
-
-const apiBase = import.meta.env.DEV ? "http://localhost:8081/users" : "/users";
-
-const API = axios.create({
- baseURL: apiBase,
-});
-
-export function HomepageSidebar({
- onSelectView,
- getView,
- disabled,
- isAdmin,
- username,
- children,
- }: SidebarProps): React.ReactElement {
- const [adminSheetOpen, setAdminSheetOpen] = React.useState(false);
- const [allowRegistration, setAllowRegistration] = React.useState(true);
- const [regLoading, setRegLoading] = React.useState(false);
- const [oidcConfig, setOidcConfig] = React.useState({
- client_id: '',
- client_secret: '',
- issuer_url: '',
- authorization_url: '',
- token_url: '',
- identifier_path: 'sub',
- name_path: 'name',
- scopes: 'openid email profile'
- });
- const [oidcLoading, setOidcLoading] = React.useState(false);
- const [oidcError, setOidcError] = React.useState
- {dbError && (
-
- Error
- {dbError}
-
- )}
- {firstUser && !dbError && !internalLoggedIn && (
-
- First User
-
- You are the first user and will be made an admin. You can view admin settings in the sidebar
- user dropdown. If you think this is a mistake, check the docker logs, or create a{" "}
-
- GitHub issue
- .
-
-
- )}
- {!registrationAllowed && !internalLoggedIn && (
-
- Registration Disabled
-
- New account registration is currently disabled by an admin. Please log in or contact an
- administrator.
-
-
- )}
- {(internalLoggedIn || (authLoading && getCookie("jwt"))) && (
-
- Error
- {error}
-
- )}
-
-
-
- Logged in!
-
- You are logged in! Use the sidebar to access all available tools. To get started,
- create an SSH Host in the SSH Manager tab. Once created, you can connect to that
- host using the other apps in the sidebar.
-
-
-
-
- )}
- {(!internalLoggedIn && (!authLoading || !getCookie("jwt"))) && (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
- {oidcConfigured && (
-
- )}
-
-
-
-
- {tab === "external" ? (
- - {tab === "login" ? "Login to your account" : - tab === "signup" ? "Create a new account" : - "Login with external provider"} -
-
-
- ) : (
-
- )}
-
- )}
- {error && (
-
-
-
- Login using your configured external identity provider
-
-
-
-
-
-
- Termix
-
-
-
-
- onSelectView("ssh_manager")}
- disabled={disabled}>
-
-
-
- window.open("https://dashix.dev", "_blank")} disabled={disabled}>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {isAdmin && (
- setAdminSheetOpen(true)}>
- Admin Settings
-
- )}
-
- Sign out
-
-
-
-
-
-
- {/* Admin Settings Sheet (always rendered, only openable if isAdmin) */}
- {isAdmin && (
-
-
-
- Admin Settings
-
-
-
-
-
-
-
-
- )}
-
-
- {children}
-
-
-
- )
-}
\ No newline at end of file
diff --git a/src/apps/SSH/Config Editor/ConfigEditorSidebar.tsx b/src/apps/SSH/Config Editor/ConfigEditorSidebar.tsx
deleted file mode 100644
index 571182f3..00000000
--- a/src/apps/SSH/Config Editor/ConfigEditorSidebar.tsx
+++ /dev/null
@@ -1,594 +0,0 @@
-import React, {useEffect, useState, useRef, forwardRef, useImperativeHandle} from 'react';
-import {
- Sidebar,
- SidebarContent,
- SidebarGroup,
- SidebarGroupContent,
- SidebarGroupLabel, SidebarMenu, SidebarMenuItem,
- SidebarProvider
-} from '@/components/ui/sidebar.tsx';
-import {Separator} from '@/components/ui/separator.tsx';
-import {CornerDownLeft, Folder, File, Server, ArrowUp, Pin} from 'lucide-react';
-import {ScrollArea} from '@/components/ui/scroll-area.tsx';
-import {cn} from '@/lib/utils.ts';
-import {Input} from '@/components/ui/input.tsx';
-import {Button} from '@/components/ui/button.tsx';
-import {Accordion, AccordionContent, AccordionItem, AccordionTrigger} from '@/components/ui/accordion.tsx';
-import {
- getSSHHosts,
- listSSHFiles,
- connectSSH,
- getSSHStatus,
- getConfigEditorPinned,
- addConfigEditorPinned,
- removeConfigEditorPinned
-} from '@/apps/SSH/ssh-axios.ts';
-
-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;
-}
-
-const ConfigEditorSidebar = forwardRef(function ConfigEditorSidebar(
- {onSelectView, onOpenFile, tabs, onHostChange}: {
- onSelectView: (view: string) => void;
- onOpenFile: (file: any) => void;
- tabs: any[];
- onHostChange?: (host: SSHHost | null) => void;
- },
- ref
-) {
- const [sshConnections, setSSHConnections] = useState
-
- onSelectView("terminal")}
- disabled={disabled}>
-
-
-
- onSelectView("tunnel")}
- disabled={disabled}>
-
-
-
- onSelectView("config_editor")}
- disabled={disabled}>
-
-
-
-
- {/* Registration Settings */}
-
-
-
-
- User Registration
- -
-
- Error
- {oidcError}
-
- )}
-
-
-
- External Authentication (OIDC)
-- Configure external identity provider for OIDC/OAuth2 authentication. - Users will see an "External" login option once configured. -
- - {oidcError && ( -
- {view === 'servers' && (
- <>
-
-
-
- )}
- {view === 'files' && activeServer && (
-
-
- setSearch(e.target.value)}
- placeholder="Search hosts by name, username, IP, folder, tags..."
- className="w-full h-8 text-sm bg-[#18181b] border border-[#23232a] text-white placeholder:text-muted-foreground rounded"
- autoComplete="off"
- />
-
-
-
-
-
-
-
-
-
-
-
- {sortedFolders.map((folder, idx) => (
-
-
- {folder}
-
- {filteredSshByFolder[folder].map(conn => (
-
- ))}
-
-
- {idx < sortedFolders.length - 1 && (
-
- ))}
-
-
-
-
- )}
-
-
- )}
-
-
- setCurrentPath(e.target.value)}
- className="flex-1 bg-[#18181b] border border-[#434345] text-white truncate rounded-md px-2 py-1 focus:outline-none focus:ring-2 focus:ring-ring hover:border-[#5a5a5d]"
- />
-
-
- setFileSearch(e.target.value)}
- />
-
-
-
-
-
-
- {connectingSSH || filesLoading ? (
-
- Loading...
- ) : filesError ? (
- {filesError}
- ) : filteredFiles.length === 0 ? (
- No files or
- folders found.
- ) : (
-
- {filteredFiles.map((item: any) => {
- const isOpen = (tabs || []).some((t: any) => t.id === item.path);
- return (
-
- )}
-
-
- );
- })}
- !isOpen && (item.type === 'directory' ? setCurrentPath(item.path) : onOpenFile({
- name: item.name,
- path: item.path,
- isSSH: item.isSSH,
- sshSessionId: item.sshSessionId
- }))}
- >
- {item.type === 'directory' ?
-
-
- {item.type === 'file' && (
-
- )}
-
-
-
- {tabs.map((tab, index) => {
- const isActive = tab.id === activeTab;
- return (
-
- );
-}
\ No newline at end of file
diff --git a/src/apps/SSH/Config Editor/ConfigTopbar.tsx b/src/apps/SSH/Config Editor/ConfigTopbar.tsx
deleted file mode 100644
index 62637cde..00000000
--- a/src/apps/SSH/Config Editor/ConfigTopbar.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import { ConfigTabList } from "./ConfigTabList.tsx";
-
-export function ConfigTopbar(props: any): React.ReactElement {
- return (
-
-
- );
- })}
-
-
-
-
-
-
-
- );
- }
-
- if (error) {
- return (
-
-
-
- Loading hosts...
-
-
- );
- }
-
- if (hosts.length === 0) {
- return (
-
-
- {error}
- -
-
- );
- }
-
- return (
-
-
- No SSH Hosts
-- You haven't added any SSH hosts yet. Click "Add Host" to get started. -
-
-
-
-
- );
-}
\ No newline at end of file
diff --git a/src/apps/SSH/Manager/SSHManagerSidebar.tsx b/src/apps/SSH/Manager/SSHManagerSidebar.tsx
deleted file mode 100644
index 819830f3..00000000
--- a/src/apps/SSH/Manager/SSHManagerSidebar.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react';
-
-import {
- CornerDownLeft
-} 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"
-
-interface SidebarProps {
- onSelectView: (view: string) => void;
-}
-
-export function SSHManagerSidebar({onSelectView}: SidebarProps): React.ReactElement {
- return (
-
-
-
-
-
-
- SSH Hosts
-- {filteredAndSortedHosts.length} hosts -
-
-
-
-
- {Object.entries(hostsByFolder).map(([folder, folderHosts]) => (
-
-
-
-
-
-
-
-
-
-
-
- ))}
-
-
- {folderHosts.length}
-
-
-
- {folderHosts.map((host) => (
-
- handleEdit(host)}
- >
-
- ))}
-
-
-
-
-
-
- {host.pin &&
- - {host.name || `${host.username}@${host.ip}`} -
-- {host.ip}:{host.port} -
-- {host.username} -
-
-
-
-
-
- {host.tags && host.tags.length > 0 && (
-
-
- {host.tags.slice(0, 6).map((tag, index) => (
-
-
- ))}
- {host.tags.length > 6 && (
-
- +{host.tags.length - 6}
-
- )}
-
- )}
-
-
- {host.enableTerminal && (
-
-
- )}
- {host.enableTunnel && (
-
-
- )}
- {host.enableConfigEditor && (
-
-
- )}
-
- {
- panelRefs.current['parent'] = el;
- }} style={{
- position: 'absolute',
- top: 0,
- left: 0,
- width: '100%',
- height: '100%',
- zIndex: 1,
- overflow: 'hidden'
- }}>
- {allTabs.map((tab) => {
- const style = layoutStyles[tab.id]
- ? {...layoutStyles[tab.id], overflow: 'hidden'}
- : {display: 'none', overflow: 'hidden'};
- const isVisible = !!layoutStyles[tab.id];
- return (
-
- );
- };
-
- const renderSplitOverlays = () => {
- const splitTabs = allTabs.filter((tab) => allSplitScreenTab.includes(tab.id));
- const mainTab = allTabs.find((tab) => tab.id === currentTab);
- const layoutTabs = [mainTab, ...splitTabs.filter((t) => t && t.id !== (mainTab && mainTab.id))].filter((t): t is Tab => !!t);
- if (allSplitScreenTab.length === 0) return null;
-
- if (layoutTabs.length === 2) {
- const [tab1, tab2] = layoutTabs;
- return (
-
- 0}
- />
-
- );
- })}
-
- {
- panelGroupRefs.current['main'] = el;
- }}
- direction="horizontal"
- className="h-full w-full"
- id="main-horizontal"
- >
-
-
-
-
-
-
- );
- }
- if (layoutTabs.length === 3) {
- return (
- {
- panelRefs.current[String(tab1.id)] = el;
- }} style={{
- height: '100%',
- width: '100%',
- display: 'flex',
- flexDirection: 'column',
- background: 'transparent',
- margin: 0,
- padding: 0,
- position: 'relative'
- }}>
-
- {tab1.title}
- {
- panelRefs.current[String(tab2.id)] = el;
- }} style={{
- height: '100%',
- width: '100%',
- display: 'flex',
- flexDirection: 'column',
- background: 'transparent',
- margin: 0,
- padding: 0,
- position: 'relative'
- }}>
-
- {tab2.title}
-
- {
- panelGroupRefs.current['main'] = el;
- }}
- direction="vertical"
- className="h-full w-full"
- id="main-vertical"
- >
-
- {
- panelGroupRefs.current['top'] = el;
- }} direction="horizontal" className="h-full w-full" id="top-horizontal">
-
-
-
-
-
-
-
-
-
-
- );
- }
- if (layoutTabs.length === 4) {
- return (
- {
- panelRefs.current[String(layoutTabs[0].id)] = el;
- }} style={{
- height: '100%',
- width: '100%',
- display: 'flex',
- flexDirection: 'column',
- background: 'transparent',
- margin: 0,
- padding: 0,
- position: 'relative'
- }}>
-
- {layoutTabs[0].title}
- {
- panelRefs.current[String(layoutTabs[1].id)] = el;
- }} style={{
- height: '100%',
- width: '100%',
- display: 'flex',
- flexDirection: 'column',
- background: 'transparent',
- margin: 0,
- padding: 0,
- position: 'relative'
- }}>
-
- {layoutTabs[1].title}
- {
- panelRefs.current[String(layoutTabs[2].id)] = el;
- }} style={{
- height: '100%',
- width: '100%',
- display: 'flex',
- flexDirection: 'column',
- background: 'transparent',
- margin: 0,
- padding: 0,
- position: 'relative'
- }}>
-
- {layoutTabs[2].title}
-
- {
- panelGroupRefs.current['main'] = el;
- }}
- direction="vertical"
- className="h-full w-full"
- id="main-vertical"
- >
-
- {
- panelGroupRefs.current['top'] = el;
- }} direction="horizontal" className="h-full w-full" id="top-horizontal">
-
-
-
-
-
-
-
- {
- panelGroupRefs.current['bottom'] = el;
- }} direction="horizontal" className="h-full w-full" id="bottom-horizontal">
-
-
-
-
-
-
-
-
- );
- }
- return null;
- };
-
- const onAddHostSubmit = (data: any) => {
- const id = nextTabId.current++;
- const title = `${data.ip || "Host"}:${data.port || 22}`;
- const terminalRef = React.createRef {
- panelRefs.current[String(layoutTabs[0].id)] = el;
- }} style={{
- height: '100%',
- width: '100%',
- display: 'flex',
- flexDirection: 'column',
- background: 'transparent',
- margin: 0,
- padding: 0,
- position: 'relative'
- }}>
-
- {layoutTabs[0].title}
- {
- panelRefs.current[String(layoutTabs[1].id)] = el;
- }} style={{
- height: '100%',
- width: '100%',
- display: 'flex',
- flexDirection: 'column',
- background: 'transparent',
- margin: 0,
- padding: 0,
- position: 'relative'
- }}>
-
- {layoutTabs[1].title}
- {
- panelRefs.current[String(layoutTabs[2].id)] = el;
- }} style={{
- height: '100%',
- width: '100%',
- display: 'flex',
- flexDirection: 'column',
- background: 'transparent',
- margin: 0,
- padding: 0,
- position: 'relative'
- }}>
-
- {layoutTabs[2].title}
- {
- panelRefs.current[String(layoutTabs[3].id)] = el;
- }} style={{
- height: '100%',
- width: '100%',
- display: 'flex',
- flexDirection: 'column',
- background: 'transparent',
- margin: 0,
- padding: 0,
- position: 'relative'
- }}>
-
- {layoutTabs[3].title}
-
- {/* Sidebar (collapsible) */}
-
- {
- allTabs.forEach(tab => {
- if (tabIds.includes(tab.id) && tab.terminalRef?.current?.sendInput) {
- tab.terminalRef.current.sendInput(command);
- }
- });
- }}
- onCloseSidebar={() => setIsSidebarOpen(false)}
- open={isSidebarOpen}
- onOpenChange={setIsSidebarOpen}
- />
-
-
-
- }[];
- runCommandOnTabs: (tabIds: number[], command: string) => void;
- onCloseSidebar?: () => void;
- onAddHostSubmit?: (data: any) => void;
- open?: boolean;
- onOpenChange?: (open: boolean) => void;
-}
-
-export function SSHSidebar({
- onSelectView,
- onHostConnect,
- allTabs,
- runCommandOnTabs,
- onCloseSidebar,
- open,
- onOpenChange
- }: SidebarProps): React.ReactElement {
- const [hosts, setHosts] = useState([]);
- const [hostsLoading, setHostsLoading] = useState(false);
- const [hostsError, setHostsError] = useState(null);
- const prevHostsRef = React.useRef([]);
-
- 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 = {};
- 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([]);
-
- 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 (
-
-
-
-
-
- Termix / Terminal
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- setIsTopbarOpen(false)}
- />
-
- {!isTopbarOpen && (
- setIsTopbarOpen(true)}
- style={{
- position: 'absolute',
- top: 0,
- left: 0,
- width: '100%',
- height: HANDLE_THICKNESS,
- background: '#222224',
- cursor: 'pointer',
- zIndex: 12,
- }}
- title="Show top bar"
- />
- )}
-
- {/* Main terminal area (height adapts to topbar) */}
-
-
- {/* Sidebar reopen handle */}
- {!isSidebarOpen && (
-
- {allTabs.length === 0 && (
-
-
-
- )}
- {allSplitScreenTab.length > 0 && (
-
- Welcome to Termix SSH
-
-
- Click on any host title in the sidebar to open a terminal connection, or use the "Add
- Host" button to create a new connection.
-
-
-
-
- )}
- {renderAllTerminals()}
- {renderSplitOverlays()}
- setIsSidebarOpen(true)}
- style={{
- position: 'absolute',
- top: 0,
- left: 0,
- width: HANDLE_THICKNESS,
- height: '100%',
- background: '#222224',
- cursor: 'pointer',
- zIndex: 20,
- }}
- title="Show sidebar"
- />
- )}
-
- );
-}
\ No newline at end of file
diff --git a/src/apps/SSH/Terminal/SSHSidebar.tsx b/src/apps/SSH/Terminal/SSHSidebar.tsx
deleted file mode 100644
index e92dbae5..00000000
--- a/src/apps/SSH/Terminal/SSHSidebar.tsx
+++ /dev/null
@@ -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
-
-
- 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"
- />
-
-
-
- {hostsError && (
-
-
- )}
- {hostsError}
-
-
- 0 ? sortedFolders : undefined}>
- {sortedFolders.map((folder, idx) => (
-
-
- {folder}
-
- {getSortedHosts(hostsByFolder[folder]).map(host => (
-
-
- {idx < sortedFolders.length - 1 && (
-
- ))}
-
-
-
-
-
- ))}
-
-
- )}
-
-
-
-
-
-
-
- Tools
-
-
-
-
- Run multiwindow
- commands
-
-