dennii/Termix
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 22 Wiki Activity

Added config editor to tab system, (W.I.P)

Browse Source
This commit is contained in:
LukeGus
2025-08-17 02:33:50 -05:00
parent 981705e81d
commit 22162e5b9b
11 changed files with 236 additions and 401 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/ui/Navigation/AppView.tsx
View File

@@ -1,6 +1,7 @@
import React, { useEffect, useRef, useState } from "react";
import {TerminalComponent} from "../SSH/Terminal/TerminalComponent.tsx";
import {Server as ServerView} from "@/ui/SSH/Server/Server.tsx";
import {ConfigEditor} from "@/ui/SSH/Config Editor/ConfigEditor.tsx";
import {useTabs} from "@/contexts/TabContext.tsx";
import {ResizablePanelGroup, ResizablePanel, ResizableHandle} from '@/components/ui/resizable.tsx';
import * as ResizablePrimitive from "react-resizable-panels";
@@ -16,7 +17,7 @@ export function AppView({ isTopbarOpen = true }: TerminalViewProps): React.React
const {tabs, currentTab, allSplitScreenTab} = useTabs() as any;
const { state: sidebarState } = useSidebar();
const terminalTabs = tabs.filter((tab: any) => tab.type === 'terminal' || tab.type === 'server');
const terminalTabs = tabs.filter((tab: any) => tab.type === 'terminal' || tab.type === 'server' || tab.type === 'config');
const containerRef = useRef<HTMLDivElement | null>(null);
const panelRefs = useRef<Record<string, HTMLDivElement | null>>({});
@@ -158,7 +159,7 @@ export function AppView({ isTopbarOpen = true }: TerminalViewProps): React.React
showTitle={false}
splitScreen={allSplitScreenTab.length>0}
/>
) : (
) : t.type === 'server' ? (
<ServerView
hostConfig={t.hostConfig}
title={t.title}
@@ -166,6 +167,11 @@ export function AppView({ isTopbarOpen = true }: TerminalViewProps): React.React
isTopbarOpen={isTopbarOpen}
embedded
/>
) : (
<ConfigEditor
embedded
initialHost={t.hostConfig}
/>
)}
</div>
</div>

9
src/ui/Navigation/Tabs/Tab.tsx
View File

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

7
src/ui/Navigation/TopNavbar.tsx
View File

@@ -53,10 +53,11 @@ export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): Reac
const isSplit = Array.isArray(allSplitScreenTab) && allSplitScreenTab.includes(tab.id);
const isTerminal = tab.type === 'terminal';
const isServer = tab.type === 'server';
const isConfig = tab.type === 'config';
const isSshManager = tab.type === 'ssh_manager';
const isAdmin = tab.type === 'admin';
// Split availability
const isSplittable = isTerminal || isServer;
const isSplittable = isTerminal || isServer || isConfig;
// Disable split entirely when on Home or SSH Manager
const isSplitButtonDisabled = (isActive && !isSplitScreenActive) || ((allSplitScreenTab?.length || 0) >= 3 && !isSplit);
const disableSplit = !isSplittable || isSplitButtonDisabled || isActive || currentTabIsHome || currentTabIsSshManager || currentTabIsAdmin;
@@ -69,10 +70,10 @@ export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): Reac
title={tab.title}
isActive={isActive}
onActivate={() => handleTabActivate(tab.id)}
onClose={isTerminal || isServer || isSshManager || isAdmin ? () => handleTabClose(tab.id) : undefined}
onClose={isTerminal || isServer || isConfig || isSshManager || isAdmin ? () => handleTabClose(tab.id) : undefined}
onSplit={isSplittable ? () => handleTabSplit(tab.id) : undefined}
canSplit={isSplittable}
canClose={isTerminal || isServer || isSshManager || isAdmin}
canClose={isTerminal || isServer || isConfig || isSshManager || isAdmin}
disableActivate={disableActivate}
disableSplit={disableSplit}
disableClose={disableClose}