Finalized ssh tunnels, updatetd database schemas, started on config editor.
This commit is contained in:
LukeGus
@@ -1,95 +1,168 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import CodeMirror from "@uiw/react-codemirror";
|
||||
import type { LanguageName } from '@uiw/codemirror-extensions-langs';
|
||||
import { loadLanguage } from '@uiw/codemirror-extensions-langs';
|
||||
import { hyperLink } from '@uiw/codemirror-extensions-hyper-link';
|
||||
import { oneDark } from '@codemirror/theme-one-dark';
|
||||
import { EditorView } from '@codemirror/view';
|
||||
import { createTheme } from '@uiw/codemirror-themes';
|
||||
import { tags as t } from '@lezer/highlight';
|
||||
|
||||
interface ConfigCodeEditorProps {
|
||||
content: string;
|
||||
fileName: string;
|
||||
fileNameOld: string;
|
||||
onContentChange: (value: string) => void;
|
||||
}
|
||||
|
||||
export function ConfigCodeEditor({content, fileName, onContentChange,}: ConfigCodeEditorProps) {
|
||||
const langName = getLanguageName(fileName);
|
||||
const langExt = langName ? loadLanguage(langName) : null;
|
||||
const extensions = [hyperLink];
|
||||
if (langExt) extensions.unshift(langExt);
|
||||
export function ConfigCodeEditor({content, fileNameOld, onContentChange}: ConfigCodeEditorProps) {
|
||||
const fileName = "test.js"
|
||||
|
||||
// Custom theme based on built-in 'dark', with overrides for background, gutter, and font size
|
||||
const customDarkTheme = [
|
||||
createTheme({
|
||||
theme: 'dark',
|
||||
settings: {
|
||||
background: '#09090b',
|
||||
gutterBackground: '#18181b',
|
||||
gutterForeground: 'oklch(0.985 0 0)',
|
||||
foreground: '#e0e0e0',
|
||||
caret: '#ffcc00',
|
||||
selection: '#22223b99',
|
||||
selectionMatch: '#22223b66',
|
||||
lineHighlight: '#18181b',
|
||||
gutterBorder: '1px solid #22223b',
|
||||
},
|
||||
styles: [
|
||||
{ tag: t.keyword, color: '#ff5370' }, // red
|
||||
{ tag: t.string, color: '#c3e88d' }, // green
|
||||
{ tag: t.number, color: '#82aaff' }, // blue
|
||||
{ tag: t.comment, color: '#5c6370' }, // gray
|
||||
{ tag: t.variableName, color: '#f78c6c' }, // orange
|
||||
{ tag: t.function(t.variableName), color: '#82aaff' }, // blue
|
||||
{ tag: t.typeName, color: '#ffcb6b' }, // yellow
|
||||
{ tag: t.className, color: '#ffcb6b' }, // yellow
|
||||
{ tag: t.definition(t.typeName), color: '#ffcb6b' }, // yellow
|
||||
{ tag: t.operator, color: '#89ddff' }, // cyan
|
||||
{ tag: t.bool, color: '#f78c6c' }, // orange
|
||||
{ tag: t.null, color: '#f78c6c' }, // orange
|
||||
{ tag: t.tagName, color: '#ff5370' }, // red
|
||||
{ tag: t.attributeName, color: '#c792ea' }, // purple
|
||||
{ tag: t.angleBracket, color: '#89ddff' }, // cyan
|
||||
],
|
||||
}),
|
||||
EditorView.theme({
|
||||
'&': {
|
||||
fontSize: '13px',
|
||||
},
|
||||
}),
|
||||
];
|
||||
|
||||
function getLanguageName(filename: string): LanguageName | undefined {
|
||||
function getLanguageName(filename: string): string {
|
||||
const ext = filename.slice(filename.lastIndexOf('.') + 1).toLowerCase();
|
||||
|
||||
switch (ext) {
|
||||
case 'js':
|
||||
case 'mjs':
|
||||
case 'cjs': return 'javascript';
|
||||
case 'ts': return 'typescript';
|
||||
case 'tsx': return 'tsx';
|
||||
case 'json': return 'json';
|
||||
case 'css': return 'css';
|
||||
case 'html':
|
||||
case 'htm': return 'html';
|
||||
case 'md': return 'markdown';
|
||||
case 'py': return 'python';
|
||||
case 'sh': return 'shell';
|
||||
case 'yaml':
|
||||
case 'yml': return 'yaml';
|
||||
case 'go': return 'go';
|
||||
case 'java': return 'java';
|
||||
case 'ng': return 'angular';
|
||||
case 'apl': return 'apl';
|
||||
case 'asc': return 'asciiArmor';
|
||||
case 'ast': return 'asterisk';
|
||||
case 'bf': return 'brainfuck';
|
||||
case 'c': return 'c';
|
||||
case 'ceylon': return 'ceylon';
|
||||
case 'clj': return 'clojure';
|
||||
case 'cmake': return 'cmake';
|
||||
case 'cob':
|
||||
case 'cbl': return 'cobol';
|
||||
case 'coffee': return 'coffeescript';
|
||||
case 'lisp': return 'commonLisp';
|
||||
case 'cpp':
|
||||
case 'cc':
|
||||
case 'cxx': return 'cpp';
|
||||
case 'rs': return 'rust';
|
||||
case 'php': return 'php';
|
||||
case 'rb': return 'ruby';
|
||||
case 'swift': return 'swift';
|
||||
case 'cr': return 'crystal';
|
||||
case 'cs': return 'csharp';
|
||||
case 'css': return 'css';
|
||||
case 'cypher': return 'cypher';
|
||||
case 'd': return 'd';
|
||||
case 'dart': return 'dart';
|
||||
case 'diff':
|
||||
case 'patch': return 'diff';
|
||||
case 'dockerfile': return 'dockerfile';
|
||||
case 'dtd': return 'dtd';
|
||||
case 'dylan': return 'dylan';
|
||||
case 'ebnf': return 'ebnf';
|
||||
case 'ecl': return 'ecl';
|
||||
case 'eiffel': return 'eiffel';
|
||||
case 'elm': return 'elm';
|
||||
case 'erl': return 'erlang';
|
||||
case 'factor': return 'factor';
|
||||
case 'fcl': return 'fcl';
|
||||
case 'fs': return 'forth';
|
||||
case 'f90':
|
||||
case 'for': return 'fortran';
|
||||
case 's': return 'gas';
|
||||
case 'feature': return 'gherkin';
|
||||
case 'go': return 'go';
|
||||
case 'groovy': return 'groovy';
|
||||
case 'hs': return 'haskell';
|
||||
case 'hx': return 'haxe';
|
||||
case 'html':
|
||||
case 'htm': return 'html';
|
||||
case 'http': return 'http';
|
||||
case 'idl': return 'idl';
|
||||
case 'java': return 'java';
|
||||
case 'js':
|
||||
case 'mjs':
|
||||
case 'cjs': return 'javascript';
|
||||
case 'jinja2':
|
||||
case 'j2': return 'jinja2';
|
||||
case 'json': return 'json';
|
||||
case 'jsx': return 'jsx';
|
||||
case 'jl': return 'julia';
|
||||
case 'kt':
|
||||
case 'kts': return 'kotlin';
|
||||
case 'less': return 'less';
|
||||
case 'lezer': return 'lezer';
|
||||
case 'liquid': return 'liquid';
|
||||
case 'litcoffee': return 'livescript';
|
||||
case 'lua': return 'lua';
|
||||
case 'md': return 'markdown';
|
||||
case 'nb':
|
||||
case 'mat': return 'mathematica';
|
||||
case 'mbox': return 'mbox';
|
||||
case 'mmd': return 'mermaid';
|
||||
case 'mrc': return 'mirc';
|
||||
case 'moo': return 'modelica';
|
||||
case 'mscgen': return 'mscgen';
|
||||
case 'm': return 'mumps';
|
||||
case 'sql': return 'mysql';
|
||||
case 'nc': return 'nesC';
|
||||
case 'nginx': return 'nginx';
|
||||
case 'nix': return 'nix';
|
||||
case 'nsi': return 'nsis';
|
||||
case 'nt': return 'ntriples';
|
||||
case 'mm': return 'objectiveCpp';
|
||||
case 'octave': return 'octave';
|
||||
case 'oz': return 'oz';
|
||||
case 'pas': return 'pascal';
|
||||
case 'pl':
|
||||
case 'pm': return 'perl';
|
||||
case 'pgsql': return 'pgsql';
|
||||
case 'php': return 'php';
|
||||
case 'pig': return 'pig';
|
||||
case 'ps1': return 'powershell';
|
||||
case 'properties': return 'properties';
|
||||
case 'proto': return 'protobuf';
|
||||
case 'pp': return 'puppet';
|
||||
case 'py': return 'python';
|
||||
case 'q': return 'q';
|
||||
case 'r': return 'r';
|
||||
case 'rb': return 'ruby';
|
||||
case 'rs': return 'rust';
|
||||
case 'sas': return 'sas';
|
||||
case 'sass':
|
||||
case 'scss': return 'sass';
|
||||
case 'scala': return 'scala';
|
||||
case 'scm': return 'scheme';
|
||||
case 'shader': return 'shader';
|
||||
case 'sh':
|
||||
case 'bash': return 'shell';
|
||||
case 'siv': return 'sieve';
|
||||
case 'st': return 'smalltalk';
|
||||
case 'sol': return 'solidity';
|
||||
case 'solr': return 'solr';
|
||||
case 'rq': return 'sparql';
|
||||
case 'xlsx':
|
||||
case 'ods':
|
||||
case 'csv': return 'spreadsheet';
|
||||
case 'nut': return 'squirrel';
|
||||
case 'tex': return 'stex';
|
||||
case 'styl': return 'stylus';
|
||||
case 'svelte': return 'svelte';
|
||||
case 'swift': return 'swift';
|
||||
case 'tcl': return 'tcl';
|
||||
case 'textile': return 'textile';
|
||||
case 'tiddlywiki': return 'tiddlyWiki';
|
||||
case 'tiki': return 'tiki';
|
||||
case 'toml': return 'toml';
|
||||
case 'troff': return 'troff';
|
||||
case 'tsx': return 'tsx';
|
||||
case 'ttcn': return 'ttcn';
|
||||
case 'ttl':
|
||||
case 'turtle': return 'turtle';
|
||||
case 'ts': return 'typescript';
|
||||
case 'vb': return 'vb';
|
||||
case 'vbs': return 'vbscript';
|
||||
case 'vm': return 'velocity';
|
||||
case 'v': return 'verilog';
|
||||
case 'vhd':
|
||||
case 'vhdl': return 'vhdl';
|
||||
case 'vue': return 'vue';
|
||||
case 'wat': return 'wast';
|
||||
case 'webidl': return 'webIDL';
|
||||
case 'xq':
|
||||
case 'xquery': return 'xQuery';
|
||||
case 'xml': return 'xml';
|
||||
case 'sql': return 'sql';
|
||||
default: return undefined;
|
||||
case 'yacas': return 'yacas';
|
||||
case 'yaml':
|
||||
case 'yml': return 'yaml';
|
||||
case 'z80': return 'z80';
|
||||
default: return 'js';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -115,9 +188,21 @@ export function ConfigCodeEditor({content, fileName, onContentChange,}: ConfigCo
|
||||
>
|
||||
<CodeMirror
|
||||
value={content}
|
||||
extensions={extensions.concat(customDarkTheme)}
|
||||
extensions={[
|
||||
loadLanguage(getLanguageName(fileName)),
|
||||
hyperLink,
|
||||
oneDark,
|
||||
EditorView.theme({
|
||||
'&': {
|
||||
backgroundColor: '#09090b !important',
|
||||
},
|
||||
'.cm-gutters': {
|
||||
backgroundColor: '#18181b !important',
|
||||
},
|
||||
})
|
||||
]}
|
||||
onChange={(value: any) => onContentChange(value)}
|
||||
theme={customDarkTheme}
|
||||
theme={undefined}
|
||||
height="100%"
|
||||
basicSetup={{ lineNumbers: true }}
|
||||
style={{ minHeight: '100%', minWidth: '100%', flex: 1 }}
|
||||
|
||||
@@ -1,33 +1,232 @@
|
||||
import React, { useState } from "react";
|
||||
import {ConfigEditorSidebar} from "@/apps/Config Editor/ConfigEditorSidebar.tsx";
|
||||
import {ConfigCodeEditor} from "@/apps/Config Editor/ConfigCodeEditor.tsx";
|
||||
import {ConfigTopbar} from "@/apps/Config Editor/ConfigTopbar.tsx";
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import { ConfigEditorSidebar } from "@/apps/Config Editor/ConfigEditorSidebar";
|
||||
import { ConfigTabList } from "@/apps/Config Editor/ConfigTabList";
|
||||
import { ConfigHomeView } from "@/apps/Config Editor/ConfigHomeView";
|
||||
import { ConfigCodeEditor } from "@/apps/Config Editor/ConfigCodeEditor";
|
||||
import axios from 'axios';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ConfigTopbar } from "@/apps/Config Editor/ConfigTopbar";
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface ConfigEditorProps {
|
||||
onSelectView: (view: string) => void;
|
||||
function getJWT() {
|
||||
return document.cookie.split('; ').find(row => row.startsWith('jwt='))?.split('=')[1];
|
||||
}
|
||||
|
||||
export function ConfigEditor({onSelectView}: ConfigEditorProps): React.ReactElement {
|
||||
const [content, setContent] = useState<string>("");
|
||||
const [fileName, setFileName] = useState<string>("config.yaml");
|
||||
interface Tab {
|
||||
id: string | number;
|
||||
title: string;
|
||||
fileName: string;
|
||||
content: string;
|
||||
isSSH?: boolean;
|
||||
sshSessionId?: string;
|
||||
filePath?: string;
|
||||
loading?: boolean;
|
||||
error?: string;
|
||||
dirty?: boolean;
|
||||
}
|
||||
|
||||
export function ConfigEditor({ onSelectView }: { onSelectView: (view: string) => void }): React.ReactElement {
|
||||
const [tabs, setTabs] = useState<Tab[]>([]);
|
||||
const [activeTab, setActiveTab] = useState<string | number>('home');
|
||||
const [recent, setRecent] = useState<any[]>([]);
|
||||
const [pinned, setPinned] = useState<any[]>([]);
|
||||
const [shortcuts, setShortcuts] = useState<any[]>([]);
|
||||
const [loadingHome, setLoadingHome] = useState(false);
|
||||
const [errorHome, setErrorHome] = useState<string | undefined>(undefined);
|
||||
|
||||
const API_BASE_DB = 'http://localhost:8081'; // For database-backed endpoints
|
||||
const API_BASE = 'http://localhost:8084'; // For stateless file/ssh operations
|
||||
|
||||
const sidebarRef = useRef<any>(null);
|
||||
|
||||
// Fetch home data
|
||||
useEffect(() => {
|
||||
fetchHomeData();
|
||||
}, []);
|
||||
async function fetchHomeData() {
|
||||
setLoadingHome(true);
|
||||
setErrorHome(undefined);
|
||||
try {
|
||||
const jwt = getJWT();
|
||||
const [recentRes, pinnedRes, shortcutsRes] = await Promise.all([
|
||||
axios.get(`${API_BASE_DB}/config_editor/recent`, { headers: { Authorization: `Bearer ${jwt}` } }),
|
||||
axios.get(`${API_BASE_DB}/config_editor/pinned`, { headers: { Authorization: `Bearer ${jwt}` } }),
|
||||
axios.get(`${API_BASE_DB}/config_editor/shortcuts`, { headers: { Authorization: `Bearer ${jwt}` } }),
|
||||
]);
|
||||
setRecent(recentRes.data || []);
|
||||
setPinned(pinnedRes.data || []);
|
||||
setShortcuts(shortcutsRes.data || []);
|
||||
} catch (err: any) {
|
||||
setErrorHome('Failed to load home data');
|
||||
} finally {
|
||||
setLoadingHome(false);
|
||||
}
|
||||
}
|
||||
|
||||
// Home view actions
|
||||
const handleOpenFile = async (file: any) => {
|
||||
const tabId = file.path;
|
||||
if (!tabs.find(t => t.id === tabId)) {
|
||||
setTabs([...tabs, { id: tabId, title: file.name, fileName: file.name, content: '', filePath: file.path, isSSH: file.isSSH, sshSessionId: file.sshSessionId, loading: true }]);
|
||||
try {
|
||||
let content = '';
|
||||
const jwt = getJWT();
|
||||
if (file.isSSH) {
|
||||
const res = await axios.get(`${API_BASE}/ssh/readFile`, { params: { sessionId: file.sshSessionId, path: file.path }, headers: { Authorization: `Bearer ${jwt}` } });
|
||||
content = res.data.content;
|
||||
} else {
|
||||
const folder = file.path.substring(0, file.path.lastIndexOf('/'));
|
||||
const res = await axios.get(`${API_BASE}/file`, { params: { folder, name: file.name }, headers: { Authorization: `Bearer ${jwt}` } });
|
||||
content = res.data;
|
||||
}
|
||||
setTabs(tabs => tabs.map(t => t.id === tabId ? { ...t, content, loading: false, error: undefined } : t));
|
||||
// Mark as recent
|
||||
await axios.post(`${API_BASE_DB}/config_editor/recent`, { name: file.name, path: file.path }, { headers: { Authorization: `Bearer ${jwt}` } });
|
||||
fetchHomeData();
|
||||
} catch (err: any) {
|
||||
setTabs(tabs => tabs.map(t => t.id === tabId ? { ...t, loading: false, error: err?.message || 'Failed to load file' } : t));
|
||||
}
|
||||
}
|
||||
setActiveTab(tabId);
|
||||
};
|
||||
const handleRemoveRecent = async (file: any) => {
|
||||
// Implement backend delete if needed
|
||||
setRecent(recent.filter(f => f.path !== file.path));
|
||||
};
|
||||
const handlePinFile = async (file: any) => {
|
||||
const jwt = getJWT();
|
||||
await axios.post(`${API_BASE_DB}/config_editor/pinned`, { name: file.name, path: file.path }, { headers: { Authorization: `Bearer ${jwt}` } });
|
||||
fetchHomeData();
|
||||
};
|
||||
const handleOpenShortcut = async (shortcut: any) => {
|
||||
// Find the server for this shortcut (local or SSH)
|
||||
let server: any = { isLocal: true, name: 'Local Files', id: 'local', defaultPath: '/' };
|
||||
if (shortcut.server) {
|
||||
server = shortcut.server;
|
||||
}
|
||||
// Use the sidebar's openFolder method
|
||||
if ((window as any).configSidebarRef && (window as any).configSidebarRef.openFolder) {
|
||||
(window as any).configSidebarRef.openFolder(server, shortcut.path);
|
||||
}
|
||||
};
|
||||
// Add add/remove shortcut logic
|
||||
const handleAddShortcut = async (folderPath: string) => {
|
||||
try {
|
||||
const jwt = getJWT();
|
||||
await axios.post(`${API_BASE_DB}/config_editor/shortcuts`, { name: folderPath.split('/').pop(), path: folderPath });
|
||||
fetchHomeData();
|
||||
} catch {}
|
||||
};
|
||||
const handleRemoveShortcut = async (shortcut: any) => {
|
||||
try {
|
||||
const jwt = getJWT();
|
||||
await axios.post(`${API_BASE_DB}/config_editor/shortcuts/delete`, { path: shortcut.path });
|
||||
fetchHomeData();
|
||||
} catch {}
|
||||
};
|
||||
|
||||
// Tab actions
|
||||
const closeTab = (tabId: string | number) => {
|
||||
const idx = tabs.findIndex(t => t.id === tabId);
|
||||
const newTabs = tabs.filter(t => t.id !== tabId);
|
||||
setTabs(newTabs);
|
||||
if (activeTab === tabId) {
|
||||
if (newTabs.length > 0) setActiveTab(newTabs[Math.max(0, idx - 1)].id);
|
||||
else setActiveTab('home');
|
||||
}
|
||||
};
|
||||
const setTabContent = (tabId: string | number, content: string) => {
|
||||
setTabs(tabs => tabs.map(t => t.id === tabId ? { ...t, content, dirty: true } : t));
|
||||
};
|
||||
const handleSave = async (tab: Tab) => {
|
||||
try {
|
||||
const jwt = getJWT();
|
||||
if (tab.isSSH) {
|
||||
await axios.post(`${API_BASE}/ssh/writeFile`, { sessionId: tab.sshSessionId, path: tab.filePath, content: tab.content }, { headers: { Authorization: `Bearer ${jwt}` } });
|
||||
} else {
|
||||
await axios.post(`${API_BASE}/file?folder=${encodeURIComponent(tab.filePath?.substring(0, tab.filePath?.lastIndexOf('/')) || '')}&name=${encodeURIComponent(tab.fileName)}`, { content: tab.content }, { headers: { Authorization: `Bearer ${jwt}` } });
|
||||
}
|
||||
setTabs(tabs => tabs.map(t => t.id === tab.id ? { ...t, dirty: false } : t));
|
||||
// Mark as recent
|
||||
await axios.post(`${API_BASE_DB}/config_editor/recent`, { name: tab.fileName, path: tab.filePath }, { headers: { Authorization: `Bearer ${jwt}` } });
|
||||
fetchHomeData();
|
||||
} catch (err) {
|
||||
setTabs(tabs => tabs.map(t => t.id === tab.id ? { ...t, error: 'Failed to save file' } : t));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ position: 'relative', width: '100vw', height: '100vh', overflow: 'hidden' }}>
|
||||
{/* Sidebar - fixed width, full height */}
|
||||
<div style={{ position: 'absolute', top: 0, left: 0, width: 256, height: '100vh', zIndex: 20 }}>
|
||||
<ConfigEditorSidebar onSelectView={onSelectView} />
|
||||
<ConfigEditorSidebar onSelectView={onSelectView} onOpenFile={handleOpenFile} tabs={tabs} ref={sidebarRef} />
|
||||
</div>
|
||||
{/* Topbar - fixed height, full width minus sidebar */}
|
||||
<div style={{ position: 'absolute', top: 0, left: 256, right: 0, height: 46, zIndex: 30 }}>
|
||||
<ConfigTopbar />
|
||||
<div style={{ position: 'absolute', top: 0, left: 256, right: 0, height: 44, zIndex: 30 }}>
|
||||
<div className="flex items-center w-full bg-[#18181b] border-b border-[#222224] h-11 relative" style={{ height: 44 }}>
|
||||
{/* Tab list scrollable area, full width except for Save button */}
|
||||
<div className="flex-1 min-w-0 h-full flex items-center pr-0">
|
||||
<div className="h-9 w-full bg-[#09090b] border border-[#23232a] rounded-md flex items-center overflow-x-auto scrollbar-thin scrollbar-thumb-muted-foreground/30 scrollbar-track-transparent" style={{ minWidth: 0 }}>
|
||||
<ConfigTopbar
|
||||
tabs={tabs.map(t => ({ id: t.id, title: t.title }))}
|
||||
activeTab={activeTab}
|
||||
setActiveTab={setActiveTab}
|
||||
closeTab={closeTab}
|
||||
onHomeClick={() => setActiveTab('home')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* Save button only for file tabs, stationary at right */}
|
||||
{activeTab !== 'home' && (() => {
|
||||
const tab = tabs.find(t => t.id === activeTab);
|
||||
if (!tab) return null;
|
||||
return (
|
||||
<button
|
||||
className={cn(
|
||||
'ml-2 mr-2 px-3 py-1.5 border rounded-md text-base font-medium transition-colors',
|
||||
'border-[#2d2d30] text-white bg-transparent hover:bg-[#23232a] active:bg-[#23232a] focus:bg-[#23232a]',
|
||||
!tab.dirty ? 'opacity-60 cursor-not-allowed' : 'hover:border-[#2d2d30]'
|
||||
)}
|
||||
disabled={!tab.dirty}
|
||||
onClick={() => handleSave(tab)}
|
||||
type="button"
|
||||
style={{ height: 36, alignSelf: 'center' }}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
{/* Editor area - fills remaining space, with padding for sidebar and topbar */}
|
||||
<div style={{ position: 'absolute', top: 46, left: 256, right: 0, bottom: 0, overflow: 'hidden', zIndex: 10 }}>
|
||||
<ConfigCodeEditor
|
||||
content={content}
|
||||
fileName={fileName}
|
||||
onContentChange={setContent}
|
||||
/>
|
||||
<div style={{ position: 'absolute', top: 44, left: 256, right: 0, bottom: 0, overflow: 'hidden', zIndex: 10, background: '#101014', display: 'flex', flexDirection: 'column' }}>
|
||||
{activeTab === 'home' ? (
|
||||
<ConfigHomeView
|
||||
recent={recent}
|
||||
pinned={pinned}
|
||||
shortcuts={shortcuts}
|
||||
onOpenFile={handleOpenFile}
|
||||
onRemoveRecent={handleRemoveRecent}
|
||||
onPinFile={handlePinFile}
|
||||
onOpenShortcut={handleOpenShortcut}
|
||||
onRemoveShortcut={handleRemoveShortcut}
|
||||
onAddShortcut={handleAddShortcut}
|
||||
/>
|
||||
) : (
|
||||
(() => {
|
||||
const tab = tabs.find(t => t.id === activeTab);
|
||||
if (!tab) return null;
|
||||
return (
|
||||
<div className="flex flex-col h-full" style={{ flex: 1, minHeight: 0 }}>
|
||||
<div className="flex-1 min-h-0">
|
||||
<ConfigCodeEditor
|
||||
content={tab.content}
|
||||
fileNameOld={tab.fileName}
|
||||
onContentChange={content => setTabContent(tab.id, content)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})()
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
140
src/apps/Config Editor/ConfigFileSidebarViewer.tsx
Normal file
140
src/apps/Config Editor/ConfigFileSidebarViewer.tsx
Normal file
@@ -0,0 +1,140 @@
|
||||
import React from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { Plus, Folder, File, Star, Trash2, Edit, Link2, Server } from 'lucide-react';
|
||||
|
||||
interface SSHConnection {
|
||||
id: string;
|
||||
name: string;
|
||||
ip: string;
|
||||
port: number;
|
||||
username: string;
|
||||
isPinned?: boolean;
|
||||
}
|
||||
|
||||
interface FileItem {
|
||||
name: string;
|
||||
type: 'file' | 'directory' | 'link';
|
||||
path: string;
|
||||
isStarred?: boolean;
|
||||
}
|
||||
|
||||
interface ConfigFileSidebarViewerProps {
|
||||
sshConnections: SSHConnection[];
|
||||
onAddSSH: () => void;
|
||||
onConnectSSH: (conn: SSHConnection) => void;
|
||||
onEditSSH: (conn: SSHConnection) => void;
|
||||
onDeleteSSH: (conn: SSHConnection) => void;
|
||||
onPinSSH: (conn: SSHConnection) => void;
|
||||
currentPath: string;
|
||||
files: FileItem[];
|
||||
onOpenFile: (file: FileItem) => void;
|
||||
onOpenFolder: (folder: FileItem) => void;
|
||||
onStarFile: (file: FileItem) => void;
|
||||
onDeleteFile: (file: FileItem) => void;
|
||||
isLoading?: boolean;
|
||||
error?: string;
|
||||
isSSHMode: boolean;
|
||||
onSwitchToLocal: () => void;
|
||||
onSwitchToSSH: (conn: SSHConnection) => void;
|
||||
currentSSH?: SSHConnection;
|
||||
}
|
||||
|
||||
export function ConfigFileSidebarViewer({
|
||||
sshConnections,
|
||||
onAddSSH,
|
||||
onConnectSSH,
|
||||
onEditSSH,
|
||||
onDeleteSSH,
|
||||
onPinSSH,
|
||||
currentPath,
|
||||
files,
|
||||
onOpenFile,
|
||||
onOpenFolder,
|
||||
onStarFile,
|
||||
onDeleteFile,
|
||||
isLoading,
|
||||
error,
|
||||
isSSHMode,
|
||||
onSwitchToLocal,
|
||||
onSwitchToSSH,
|
||||
currentSSH,
|
||||
}: ConfigFileSidebarViewerProps) {
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* SSH Connections */}
|
||||
<div className="p-2 bg-[#18181b] border-b border-[#23232a]">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs text-muted-foreground font-semibold">SSH Connections</span>
|
||||
<Button size="icon" variant="outline" onClick={onAddSSH} className="ml-2 h-7 w-7">
|
||||
<Plus className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<Button
|
||||
variant={!isSSHMode ? 'secondary' : 'ghost'}
|
||||
className="w-full justify-start text-left px-2 py-1.5 rounded"
|
||||
onClick={onSwitchToLocal}
|
||||
>
|
||||
<Server className="w-4 h-4 mr-2" /> Local Files
|
||||
</Button>
|
||||
{sshConnections.map((conn) => (
|
||||
<div key={conn.id} className="flex items-center gap-1 group">
|
||||
<Button
|
||||
variant={isSSHMode && currentSSH?.id === conn.id ? 'secondary' : 'ghost'}
|
||||
className="flex-1 justify-start text-left px-2 py-1.5 rounded"
|
||||
onClick={() => onSwitchToSSH(conn)}
|
||||
>
|
||||
<Link2 className="w-4 h-4 mr-2" />
|
||||
{conn.name || conn.ip}
|
||||
{conn.isPinned && <Star className="w-3 h-3 ml-1 text-yellow-400" />}
|
||||
</Button>
|
||||
<Button size="icon" variant="ghost" className="h-7 w-7" onClick={() => onPinSSH(conn)}>
|
||||
<Star className={`w-4 h-4 ${conn.isPinned ? 'text-yellow-400' : 'text-muted-foreground'}`} />
|
||||
</Button>
|
||||
<Button size="icon" variant="ghost" className="h-7 w-7" onClick={() => onEditSSH(conn)}>
|
||||
<Edit className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button size="icon" variant="ghost" className="h-7 w-7" onClick={() => onDeleteSSH(conn)}>
|
||||
<Trash2 className="w-4 h-4 text-red-500" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* File/Folder Viewer */}
|
||||
<div className="flex-1 bg-[#09090b] p-2 overflow-y-auto">
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<span className="text-xs text-muted-foreground font-semibold">{isSSHMode ? 'SSH Path' : 'Local Path'}</span>
|
||||
<span className="text-xs text-white truncate">{currentPath}</span>
|
||||
</div>
|
||||
{isLoading ? (
|
||||
<div className="text-xs text-muted-foreground">Loading...</div>
|
||||
) : error ? (
|
||||
<div className="text-xs text-red-500">{error}</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-1">
|
||||
{files.map((item) => (
|
||||
<Card key={item.path} className="flex items-center gap-2 px-2 py-1 bg-[#18181b] border border-[#23232a] rounded">
|
||||
<div className="flex items-center gap-2 flex-1 cursor-pointer" onClick={() => item.type === 'directory' ? onOpenFolder(item) : onOpenFile(item)}>
|
||||
{item.type === 'directory' ? <Folder className="w-4 h-4 text-blue-400" /> : <File className="w-4 h-4 text-muted-foreground" />}
|
||||
<span className="text-sm text-white truncate">{item.name}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Button size="icon" variant="ghost" className="h-7 w-7" onClick={() => onStarFile(item)}>
|
||||
<Star className={`w-4 h-4 ${item.isStarred ? 'text-yellow-400' : 'text-muted-foreground'}`} />
|
||||
</Button>
|
||||
<Button size="icon" variant="ghost" className="h-7 w-7" onClick={() => onDeleteFile(item)}>
|
||||
<Trash2 className="w-4 h-4 text-red-500" />
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
{files.length === 0 && <div className="text-xs text-muted-foreground">No files or folders found.</div>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
131
src/apps/Config Editor/ConfigHomeView.tsx
Normal file
131
src/apps/Config Editor/ConfigHomeView.tsx
Normal file
@@ -0,0 +1,131 @@
|
||||
import React from 'react';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Star, Trash2, Folder, File, Plus } from 'lucide-react';
|
||||
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { useState } from 'react';
|
||||
|
||||
interface FileItem {
|
||||
name: string;
|
||||
path: string;
|
||||
isStarred?: boolean;
|
||||
type: 'file' | 'directory';
|
||||
}
|
||||
interface ShortcutItem {
|
||||
name: string;
|
||||
path: string;
|
||||
}
|
||||
|
||||
interface ConfigHomeViewProps {
|
||||
recent: FileItem[];
|
||||
pinned: FileItem[];
|
||||
shortcuts: ShortcutItem[];
|
||||
onOpenFile: (file: FileItem) => void;
|
||||
onRemoveRecent: (file: FileItem) => void;
|
||||
onPinFile: (file: FileItem) => void;
|
||||
onOpenShortcut: (shortcut: ShortcutItem) => void;
|
||||
onRemoveShortcut: (shortcut: ShortcutItem) => void;
|
||||
onAddShortcut: (path: string) => void;
|
||||
}
|
||||
|
||||
export function ConfigHomeView({
|
||||
recent,
|
||||
pinned,
|
||||
shortcuts,
|
||||
onOpenFile,
|
||||
onRemoveRecent,
|
||||
onPinFile,
|
||||
onOpenShortcut,
|
||||
onRemoveShortcut,
|
||||
onAddShortcut,
|
||||
}: ConfigHomeViewProps) {
|
||||
const [tab, setTab] = useState<'recent' | 'pinned' | 'shortcuts'>('recent');
|
||||
const [newShortcut, setNewShortcut] = useState('');
|
||||
return (
|
||||
<div className="p-6 flex flex-col gap-8 h-full bg-[#09090b]">
|
||||
<Tabs value={tab} onValueChange={v => setTab(v as 'recent' | 'pinned' | 'shortcuts')} className="w-full">
|
||||
<TabsList className="mb-1">
|
||||
<TabsTrigger value="recent">Recent</TabsTrigger>
|
||||
<TabsTrigger value="pinned">Pinned</TabsTrigger>
|
||||
<TabsTrigger value="shortcuts">Folder Shortcuts</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="recent">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{recent.length === 0 ? (
|
||||
<span className="text-xs text-muted-foreground">No recent files.</span>
|
||||
) : recent.map((file, index) => (
|
||||
<Card key={`${file.path}-${index}`} className="flex items-center gap-2 px-3 py-2 bg-[#18181b] border border-[#23232a] rounded">
|
||||
<Button variant="ghost" className="p-0 h-7 w-7" onClick={() => onOpenFile(file)}>
|
||||
{file.type === 'directory' ? <Folder className="w-4 h-4 text-blue-400" /> : <File className="w-4 h-4 text-muted-foreground" />}
|
||||
</Button>
|
||||
<span className="text-sm text-white truncate max-w-[120px]">{file.name}</span>
|
||||
<Button size="icon" variant="ghost" className="h-7 w-7" onClick={() => onPinFile(file)}>
|
||||
<Star className={`w-4 h-4 ${file.isStarred ? 'text-yellow-400' : 'text-muted-foreground'}`} />
|
||||
</Button>
|
||||
<Button size="icon" variant="ghost" className="h-7 w-7" onClick={() => onRemoveRecent(file)}>
|
||||
<Trash2 className="w-4 h-4 text-red-500" />
|
||||
</Button>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="pinned">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{pinned.length === 0 ? (
|
||||
<span className="text-xs text-muted-foreground">No pinned files.</span>
|
||||
) : pinned.map((file, index) => (
|
||||
<Card key={`${file.path}-${index}`} className="flex items-center gap-2 px-3 py-2 bg-[#18181b] border border-[#23232a] rounded">
|
||||
<Button variant="ghost" className="p-0 h-7 w-7" onClick={() => onOpenFile(file)}>
|
||||
{file.type === 'directory' ? <Folder className="w-4 h-4 text-blue-400" /> : <File className="w-4 h-4 text-muted-foreground" />}
|
||||
</Button>
|
||||
<span className="text-sm text-white truncate max-w-[120px]">{file.name}</span>
|
||||
<Button size="icon" variant="ghost" className="h-7 w-7" onClick={() => onPinFile(file)}>
|
||||
<Star className={`w-4 h-4 ${file.isStarred ? 'text-yellow-400' : 'text-muted-foreground'}`} />
|
||||
</Button>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="shortcuts">
|
||||
<div className="flex items-center gap-2 mb-0">
|
||||
<Input
|
||||
placeholder="Enter folder path"
|
||||
value={newShortcut}
|
||||
onChange={e => setNewShortcut(e.target.value)}
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="outline"
|
||||
className="h-7 w-7"
|
||||
onClick={() => {
|
||||
if (newShortcut.trim()) {
|
||||
onAddShortcut(newShortcut.trim());
|
||||
setNewShortcut('');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{shortcuts.length === 0 ? (
|
||||
<span className="text-xs text-muted-foreground mt-4">No shortcuts.</span>
|
||||
) : shortcuts.map((shortcut, index) => (
|
||||
<Card key={`${shortcut.path}-${index}`} className="flex items-center gap-2 px-3 py-2 bg-[#18181b] border border-[#23232a] rounded">
|
||||
<Button variant="ghost" className="p-0 h-7 w-7" onClick={() => onOpenShortcut(shortcut)}>
|
||||
<Folder className="w-4 h-4 text-blue-400" />
|
||||
</Button>
|
||||
<span className="text-sm text-white truncate max-w-[120px]">{shortcut.name || shortcut.path.split('/').pop()}</span>
|
||||
<Button size="icon" variant="ghost" className="h-7 w-7" onClick={() => onRemoveShortcut(shortcut)}>
|
||||
<Trash2 className="w-4 h-4 text-red-500" />
|
||||
</Button>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
53
src/apps/Config Editor/ConfigTabList.tsx
Normal file
53
src/apps/Config Editor/ConfigTabList.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import React from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
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 (
|
||||
<div className="inline-flex items-center h-full px-[0.5rem] overflow-x-auto">
|
||||
<Button
|
||||
onClick={onHomeClick}
|
||||
variant="outline"
|
||||
className={`h-7 mr-[0.5rem] rounded-md flex items-center ${activeTab === 'home' ? '!bg-[#1d1d1f] !text-white !border-[#2d2d30] !hover:bg-[#1d1d1f] !active:bg-[#1d1d1f] !focus:bg-[#1d1d1f] !hover:text-white !active:text-white !focus:text-white' : ''}`}
|
||||
>
|
||||
<Home className="w-4 h-4" />
|
||||
</Button>
|
||||
{tabs.map((tab, index) => {
|
||||
const isActive = tab.id === activeTab;
|
||||
return (
|
||||
<div key={tab.id} className={index < tabs.length - 1 ? 'mr-[0.5rem]' : ''}>
|
||||
<div className="inline-flex rounded-md shadow-sm" role="group">
|
||||
<Button
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
variant="outline"
|
||||
className={`h-7 rounded-r-none flex items-center ${isActive ? '!bg-[#1d1d1f] !text-white !border-[#2d2d30] !hover:bg-[#1d1d1f] !active:bg-[#1d1d1f] !focus:bg-[#1d1d1f] !hover:text-white !active:text-white !focus:text-white' : ''}`}
|
||||
>
|
||||
{tab.title}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => closeTab(tab.id)}
|
||||
variant="outline"
|
||||
className="h-7 rounded-l-none p-0 !w-7 !h-7 flex items-center"
|
||||
>
|
||||
<X className="!w-4 !h-4" strokeWidth={2.5} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,16 +1,8 @@
|
||||
import React from "react";
|
||||
import { ConfigTabList } from "./ConfigTabList";
|
||||
|
||||
export function ConfigTopbar(): React.ReactElement {
|
||||
export function ConfigTopbar(props: any): React.ReactElement {
|
||||
return (
|
||||
<div className="flex h-11.5 z-100" style={{
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
height: 46,
|
||||
backgroundColor: '#18181b',
|
||||
borderBottom: '1px solid #222224',
|
||||
zIndex: 100,
|
||||
}}>
|
||||
test
|
||||
</div>
|
||||
<ConfigTabList {...props} />
|
||||
)
|
||||
}
|
||||
@@ -816,16 +816,12 @@ export function SSHSidebar({ onSelectView, onAddHostSubmit, onHostConnect, allTa
|
||||
|
||||
<FormField
|
||||
control={addHostForm.control}
|
||||
name="port"
|
||||
name="username"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Port</FormLabel>
|
||||
<FormLabel>Username</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="22"
|
||||
{...field}
|
||||
onChange={(e) => field.onChange(Number(e.target.value) || 22)}
|
||||
/>
|
||||
<Input placeholder="username123" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
@@ -834,12 +830,16 @@ export function SSHSidebar({ onSelectView, onAddHostSubmit, onHostConnect, allTa
|
||||
|
||||
<FormField
|
||||
control={addHostForm.control}
|
||||
name="username"
|
||||
name="port"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Username</FormLabel>
|
||||
<FormLabel>Port</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="username123" {...field} />
|
||||
<Input
|
||||
placeholder="22"
|
||||
{...field}
|
||||
onChange={(e) => field.onChange(Number(e.target.value) || 22)}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
@@ -1057,7 +1057,7 @@ export function SSHSidebar({ onSelectView, onAddHostSubmit, onHostConnect, allTa
|
||||
<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">
|
||||
{/* Search bar */}
|
||||
<div className="w-full px-2 pt-2 pb-1 bg-[#09090b] z-10">
|
||||
<div className="w-full px-2 pt-2 pb-2 bg-[#09090b] z-10">
|
||||
<Input
|
||||
value={search}
|
||||
onChange={e => setSearch(e.target.value)}
|
||||
@@ -1066,7 +1066,9 @@ export function SSHSidebar({ onSelectView, onAddHostSubmit, onHostConnect, allTa
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
<Separator className="mx-2 mt-1" />
|
||||
<div style={{ display: 'flex', justifyContent: 'center' }}>
|
||||
<Separator className="w-full h-px bg-[#434345] my-2" style={{ maxWidth: 213, margin: '0 auto' }} />
|
||||
</div>
|
||||
{/* Error and status messages */}
|
||||
{hostsError && (
|
||||
<div className="px-2 py-1 mt-2">
|
||||
@@ -1082,26 +1084,33 @@ export function SSHSidebar({ onSelectView, onAddHostSubmit, onHostConnect, allTa
|
||||
<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) => (
|
||||
<AccordionItem value={folder} key={`folder-${folder}`} className={idx === 0 ? "mt-0" : "mt-2"}>
|
||||
<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={handleHostConnect}
|
||||
onDeleteHost={onDeleteHost}
|
||||
onEditHost={() => {
|
||||
setEditHostData(host);
|
||||
setEditHostOpen(true);
|
||||
}}
|
||||
popoverOpen={!!hostPopoverOpen[host.id]}
|
||||
setPopoverOpen={(open: boolean) => handlePopoverOpenChange(host.id, open)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
<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={handleHostConnect}
|
||||
onDeleteHost={onDeleteHost}
|
||||
onEditHost={() => {
|
||||
setEditHostData(host);
|
||||
setEditHostOpen(true);
|
||||
}}
|
||||
popoverOpen={!!hostPopoverOpen[host.id]}
|
||||
setPopoverOpen={(open: boolean) => handlePopoverOpenChange(host.id, open)}
|
||||
/>
|
||||
</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>
|
||||
@@ -1315,16 +1324,12 @@ export function SSHSidebar({ onSelectView, onAddHostSubmit, onHostConnect, allTa
|
||||
/>
|
||||
<FormField
|
||||
control={editHostForm.control}
|
||||
name="port"
|
||||
name="username"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Port</FormLabel>
|
||||
<FormLabel>Username</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="22"
|
||||
{...field}
|
||||
onChange={(e) => field.onChange(Number(e.target.value) || 22)}
|
||||
/>
|
||||
<Input placeholder="username123" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
@@ -1332,12 +1337,16 @@ export function SSHSidebar({ onSelectView, onAddHostSubmit, onHostConnect, allTa
|
||||
/>
|
||||
<FormField
|
||||
control={editHostForm.control}
|
||||
name="username"
|
||||
name="port"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Username</FormLabel>
|
||||
<FormLabel>Port</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="username123" {...field} />
|
||||
<Input
|
||||
placeholder="22"
|
||||
{...field}
|
||||
onChange={(e) => field.onChange(Number(e.target.value) || 22)}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
@@ -1690,10 +1699,10 @@ const HostMenuItem = React.memo(function HostMenuItem({ host, onHostConnect, onD
|
||||
const hasTags = tags.length > 0;
|
||||
return (
|
||||
<div className="relative group flex flex-col mb-1 w-full overflow-hidden" style={{ height: hasTags ? 70 : 40, maxWidth: '213px' }}>
|
||||
<div className={`flex flex-col w-full rounded overflow-hidden border border-border bg-secondary h-full`} style={{ maxWidth: '213px' }}>
|
||||
<div className={`flex flex-col w-full rounded overflow-hidden border border-[#434345] bg-[#18181b] h-full`} style={{ maxWidth: '213px' }}>
|
||||
<div className="flex w-full h-10">
|
||||
{/* Left: Name + Star - Horizontal scroll only */}
|
||||
<div className="flex items-center h-full px-2 overflow-x-auto overflow-y-hidden scrollbar-thin scrollbar-thumb-muted-foreground/30 scrollbar-track-transparent min-w-0 border-r border-border hover:bg-muted transition-colors cursor-pointer"
|
||||
<div className="flex items-center h-full px-2 overflow-x-auto overflow-y-hidden scrollbar-thin scrollbar-thumb-muted-foreground/30 scrollbar-track-transparent min-w-0 border-r border-[#434345] hover:bg-muted transition-colors cursor-pointer"
|
||||
style={{ flex: '0 1 calc(100% - 32px)', maxWidth: 'calc(100% - 32px)' }}
|
||||
onClick={() => onHostConnect(host)}
|
||||
>
|
||||
@@ -1729,9 +1738,9 @@ const HostMenuItem = React.memo(function HostMenuItem({ host, onHostConnect, onD
|
||||
</div>
|
||||
</div>
|
||||
{hasTags && (
|
||||
<div className="border-t border-border bg-secondary 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, width: '100%' }}>
|
||||
<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, width: '100%' }}>
|
||||
{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">
|
||||
<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>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user