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

feat: continue migrating content for ui redesign

Browse Source
This commit is contained in:
LukeGus
2026-05-11 13:17:57 -05:00
parent 33dcde0827
commit 93fa749d09
22 changed files with 2639 additions and 710 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/backend/ssh/docker.ts
+1 -1
View File
@@ -2970,7 +2970,7 @@ app.get("/docker/containers/:sessionId/:containerId/logs", async (req, res) => {
session.activeOperations++;
try {
let command = `docker logs ${containerId}`;
let command = `docker logs ${containerId} 2>&1`;
if (tail && tail > 0) {
command += ` --tail ${Math.floor(tail)}`;
src/ui/types/connection-log.ts → src/types/connection-log.ts
View File
src/ui/types/electron.d.ts → src/types/electron.d.ts
Vendored
View File
src/ui/types/guacamole-common-js.d.ts → src/types/guacamole-common-js.d.ts
Vendored
View File
src/ui/types/index.ts → src/types/index.ts
View File
src/ui/types/stats-widgets.ts → src/types/stats-widgets.ts
View File
src/ui/types/ui-types.ts → src/types/ui-types.ts
View File
src/ui/AppShell.tsx
+1 -1
View File
@@ -50,11 +50,11 @@ function sshHostToHost(h: SSHHostWithStatus): Host {
notes: h.notes,
pin: h.pin ?? false,
macAddress: h.macAddress,
enableSsh: h.enableSsh ?? (h.connectionType === "ssh" || !h.connectionType),
enableTerminal: h.enableTerminal ?? true,
enableTunnel: h.enableTunnel ?? false,
enableFileManager: h.enableFileManager ?? false,
enableDocker: h.enableDocker ?? false,
enableSsh: h.connectionType === "ssh" || !h.connectionType,
enableRdp: h.connectionType === "rdp",
enableVnc: h.connectionType === "vnc",
enableTelnet: h.connectionType === "telnet",
src/ui/components/section-card.tsx
+5 -2
View File
@@ -59,17 +59,20 @@ export function SettingRow({
export function FakeSwitch({
defaultChecked = false,
checked,
onChange,
}: {
defaultChecked?: boolean;
checked?: boolean;
onChange?: (v: boolean) => void;
}) {
const [on, setOn] = useState(defaultChecked);
const [internalOn, setInternalOn] = useState(defaultChecked);
const on = checked !== undefined ? checked : internalOn;
return (
<button
onClick={() => {
const next = !on;
setOn(next);
if (checked === undefined) setInternalOn(next);
onChange?.(next);
}}
className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center border-2 transition-colors ${on ? "bg-accent-brand border-accent-brand" : "bg-muted border-border"}`}
src/ui/features/file-manager/FileManager.tsx
+6 -9
View File
@@ -38,7 +38,6 @@ import {
Search,
Grid3X3,
List,
ArrowUpDown,
ChevronLeft,
ChevronRight,
ArrowUp,
@@ -48,8 +47,6 @@ import {
Copy,
Layout,
} from "lucide-react";
import { Card } from "@/components/card.tsx";
import { Separator } from "@/components/separator.tsx";
import {
DropdownMenu,
DropdownMenuContent,
@@ -2370,7 +2367,7 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
visibility: isConnectionLogExpanded ? "hidden" : "visible",
}}
>
<Card className="flex flex-col shrink-0 mx-3 mt-3 rounded-none shadow-none border-border">
<div className="flex flex-col shrink-0 mx-3 mt-3 border border-border bg-card">
<div className="flex flex-row items-center justify-between px-3 py-2 gap-2">
<div className="flex items-center gap-1">
<Button
@@ -2640,7 +2637,7 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
</div>
</div>
</div>
</Card>
</div>
<div
className="flex-1 flex px-3 pb-3 pt-2 gap-3 min-h-0 relative"
@@ -2664,7 +2661,7 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
: "hidden md:flex",
)}
>
<Card className="flex-1 flex flex-col rounded-none shadow-none p-0 gap-0 overflow-hidden border-border">
<div className="flex-1 flex flex-col overflow-hidden border border-border bg-card">
<FileManagerSidebar
currentHost={currentHost}
currentPath={currentPath}
@@ -2675,10 +2672,10 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
refreshTrigger={sidebarRefreshTrigger}
diskInfo={diskInfo ?? undefined}
/>
</Card>
</div>
</div>
<Card className="flex-1 relative overflow-hidden rounded-none shadow-none p-0 gap-0 min-h-0 flex flex-col border-border">
<div className="flex-1 relative overflow-hidden min-h-0 flex flex-col border border-border bg-card">
<div className="flex-1 relative min-h-0 h-full">
<FileManagerGrid
files={filteredFiles}
@@ -2767,7 +2764,7 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
onCopyPath={handleCopyPath}
/>
</div>
</Card>
</div>
</div>
</div>
src/ui/features/file-manager/FileManagerSidebar.tsx
+1 -1
View File
@@ -551,7 +551,7 @@ export function FileManagerSidebar({
return (
<>
<div className="h-full flex flex-col bg-card border-r border-border overflow-hidden">
<div className="h-full flex flex-col bg-card overflow-hidden">
<div className="flex-1 overflow-y-auto thin-scrollbar">
{/* ── Recent files ──────────────────────────────────────── */}
{renderSection(t("fileManager.recent"), recentItems, (item) =>
src/ui/index.css
+1 -1
View File
@@ -113,7 +113,7 @@
--accent: oklch(0.255 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 12%);
--border: oklch(1 0 0 / 10.8%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.87 0 0);
src/ui/locales/en.json
+35 -1
View File
@@ -3364,7 +3364,41 @@
"apiKeyActive": "Active",
"apiKeyUsageHint": "Include your key in the",
"apiKeyUsageHintHeader": "header.",
"apiKeyPermissionsHint": "Keys inherit the permissions of the creating user."
"apiKeyPermissionsHint": "Keys inherit the permissions of the creating user.",
"roleUser": "User",
"authMethodDual": "Dual Auth",
"authMethodOidc": "OIDC",
"totpSetupFailed": "Failed to start TOTP setup",
"totpEnter6Digits": "Enter a 6-digit code",
"totpEnabledSuccess": "Two-factor authentication enabled",
"totpInvalidCode": "Invalid code, please try again",
"totpDisableInputRequired": "Enter your TOTP code or password",
"totpDisabledSuccess": "Two-factor authentication disabled",
"totpDisableFailed": "Failed to disable 2FA",
"totpDisableTitle": "Disable 2FA",
"totpDisablePlaceholder": "Enter TOTP code or password",
"totpDisableConfirm": "Disable 2FA",
"totpContinueVerify": "Continue to Verify",
"totpVerifyTitle": "Verify Code",
"totpBackupTitle": "Backup Codes",
"totpDownloadBackup": "Download Backup Codes",
"done": "Done",
"secretCopied": "Secret copied to clipboard",
"apiKeyNameRequired": "Key name is required",
"apiKeyCreated": "API key \"{{name}}\" created",
"apiKeyCreateFailed": "Failed to create API key",
"apiKeyUser": "User",
"apiKeyExpires": "Expires",
"apiKeyRevoked": "API key \"{{name}}\" revoked",
"apiKeyRevokeFailed": "Failed to revoke API key",
"passwordFieldsRequired": "Current and new passwords are required",
"passwordMismatch": "Passwords do not match",
"passwordTooShort": "Password must be at least 6 characters",
"passwordUpdated": "Password updated successfully",
"passwordUpdateFailed": "Failed to update password",
"deletePasswordRequired": "Password is required to delete your account",
"deleteFailed": "Failed to delete account",
"deleting": "Deleting..."
}
}
}
src/ui/shell/CommandPalette.tsx
+134 -45
View File
@@ -3,7 +3,6 @@ import { cn } from "@/lib/utils";
import { Kbd } from "@/components/kbd";
import {
Command,
CommandInput,
CommandItem,
CommandList,
CommandGroup,
@@ -28,6 +27,8 @@ import {
User,
KeyRound,
LayoutDashboard,
Monitor,
Clock,
} from "lucide-react";
import { Button } from "@/components/button";
import {
@@ -36,21 +37,8 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/dropdown-menu";
type Host = {
name: string;
user: string;
address: string;
online: boolean;
cpu: number;
ram: number;
lastAccess: string;
tags?: string[];
enableTerminal?: boolean;
enableFileManager?: boolean;
enableDocker?: boolean;
enableTunnel?: boolean;
};
import { getRecentActivity, type RecentActivityItem } from "@/main-axios";
import type { Host } from "@/types/ui-types";
interface CommandPaletteProps {
isOpen: boolean;
@@ -59,20 +47,26 @@ interface CommandPaletteProps {
onOpenTab: (type: any, label?: string, pendingEvent?: string) => void;
}
const ACTION_ICONS: Record<string, React.ReactNode> = {
Terminal: <Terminal className="size-3" />,
Files: <FolderOpen className="size-3" />,
Docker: <Box className="size-3" />,
Stats: <Activity className="size-3" />,
Tunnels: <Network className="size-3" />,
const ACTIVITY_ICONS: Record<string, React.ReactNode> = {
terminal: <Terminal className="size-3.5" />,
file_manager: <FolderOpen className="size-3.5" />,
server_stats: <Activity className="size-3.5" />,
tunnel: <Network className="size-3.5" />,
docker: <Box className="size-3.5" />,
telnet: <Terminal className="size-3.5" />,
vnc: <Monitor className="size-3.5" />,
rdp: <Monitor className="size-3.5" />,
};
const ACTION_TAB_TYPE: Record<string, string> = {
Terminal: "terminal",
Files: "files",
Docker: "docker",
Stats: "stats",
Tunnels: "tunnel",
const ACTIVITY_TAB_TYPE: Record<string, string> = {
terminal: "terminal",
file_manager: "files",
server_stats: "stats",
tunnel: "tunnel",
docker: "docker",
telnet: "telnet",
vnc: "vnc",
rdp: "rdp",
};
export function CommandPalette({
@@ -83,11 +77,17 @@ export function CommandPalette({
}: CommandPaletteProps) {
const inputRef = useRef<HTMLInputElement>(null);
const [search, setSearch] = useState("");
const [recentActivity, setRecentActivity] = useState<RecentActivityItem[]>(
[],
);
useEffect(() => {
if (isOpen) {
setTimeout(() => inputRef.current?.focus(), 50);
setSearch("");
getRecentActivity(5)
.then(setRecentActivity)
.catch(() => {});
}
}, [isOpen]);
@@ -104,7 +104,8 @@ export function CommandPalette({
const filteredHosts = hosts.filter(
(h) =>
h.name.toLowerCase().includes(search.toLowerCase()) ||
h.ip.toLowerCase().includes(search.toLowerCase()),
h.ip.toLowerCase().includes(search.toLowerCase()) ||
h.username.toLowerCase().includes(search.toLowerCase()),
);
const handleAction = (action: () => void) => {
@@ -238,18 +239,101 @@ export function CommandPalette({
</CommandItem>
</CommandGroup>
{recentActivity.length > 0 && (
<>
<CommandSeparator className="my-2" />
<CommandGroup heading="Recent Activity" className="px-2">
{recentActivity.map((item) => (
<CommandItem
key={item.id}
onSelect={() =>
handleAction(() =>
onOpenTab(
ACTIVITY_TAB_TYPE[item.type] as any,
item.hostName,
),
)
}
className="group flex items-center gap-3 px-3 py-2 rounded-none hover:bg-accent-brand/10 cursor-pointer"
>
<div className="size-7 rounded-none bg-muted flex items-center justify-center group-hover:bg-accent-brand/20 transition-colors text-muted-foreground group-hover:text-accent-brand">
{ACTIVITY_ICONS[item.type]}
</div>
<div className="flex flex-col flex-1 min-w-0">
<span className="text-sm font-semibold truncate">
{item.hostName}
</span>
<span className="text-xs text-muted-foreground capitalize">
{item.type.replace("_", " ")}
</span>
</div>
<div className="flex items-center gap-1 text-muted-foreground/50">
<Clock className="size-3" />
<span className="text-[10px]">
{new Date(item.timestamp).toLocaleDateString()}
</span>
</div>
</CommandItem>
))}
</CommandGroup>
</>
)}
<CommandSeparator className="my-2" />
<CommandGroup heading="Servers & Hosts" className="px-2">
{filteredHosts.length > 0 ? (
filteredHosts.map((host, i) => {
const actions = [
host.enableTerminal !== false && "Terminal",
host.enableFileManager !== false && "Files",
host.enableDocker && "Docker",
host.enableTunnel && "Tunnels",
"Stats",
].filter(Boolean) as string[];
host.enableSsh &&
host.enableTerminal !== false && {
type: "terminal",
icon: <Terminal className="size-3" />,
label: "Terminal",
},
host.enableSsh &&
host.enableFileManager && {
type: "files",
icon: <FolderOpen className="size-3" />,
label: "Files",
},
host.enableSsh &&
host.enableDocker && {
type: "docker",
icon: <Box className="size-3" />,
label: "Docker",
},
host.enableSsh &&
host.enableTunnel && {
type: "tunnel",
icon: <Network className="size-3" />,
label: "Tunnels",
},
host.enableSsh && {
type: "stats",
icon: <Activity className="size-3" />,
label: "Stats",
},
host.enableRdp && {
type: "rdp",
icon: <Monitor className="size-3" />,
label: "RDP",
},
host.enableVnc && {
type: "vnc",
icon: <Monitor className="size-3" />,
label: "VNC",
},
host.enableTelnet && {
type: "telnet",
icon: <Terminal className="size-3" />,
label: "Telnet",
},
].filter(Boolean) as {
type: string;
icon: React.ReactNode;
label: string;
}[];
return (
<CommandItem
@@ -279,28 +363,25 @@ export function CommandPalette({
)}
</div>
<span className="text-xs text-muted-foreground font-mono">
{host.ip}
{host.username}@{host.ip}
</span>
</div>
<div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
{actions.map((action) => (
<Button
key={action}
key={action.type}
variant="ghost"
size="icon"
title={action}
title={action.label}
className="size-7 rounded-none hover:bg-accent-brand/20 hover:text-accent-brand"
onClick={(e) => {
e.stopPropagation();
handleAction(() =>
onOpenTab(
ACTION_TAB_TYPE[action] as any,
host.name,
),
onOpenTab(action.type as any, host.name),
);
}}
>
{ACTION_ICONS[action]}
{action.icon}
</Button>
))}
<DropdownMenu>
@@ -322,7 +403,15 @@ export function CommandPalette({
className="rounded-none text-xs font-semibold hover:bg-accent-brand/10 hover:text-accent-brand cursor-pointer"
onClick={(e) => {
e.stopPropagation();
handleAction(() => onOpenTab("host-manager"));
setIsOpen(false);
onOpenTab("host-manager");
setTimeout(() => {
window.dispatchEvent(
new CustomEvent("host-manager:edit-host", {
detail: host.id,
}),
);
}, 100);
}}
>
<Edit3 className="size-3.5 mr-2" /> Edit Host
@@ -335,7 +424,7 @@ export function CommandPalette({
})
) : (
<div className="py-6 text-center text-sm text-muted-foreground">
No hosts found matching "{search}"
No hosts found matching &ldquo;{search}&rdquo;
</div>
)}
</CommandGroup>
src/ui/sidebar/AdminSettingsPanel.tsx
+875 -197
View File
File diff suppressed because it is too large Load Diff
src/ui/sidebar/HostManager.tsx
+1017 -317
View File
File diff suppressed because it is too large Load Diff
src/ui/sidebar/UserProfilePanel.tsx
+551 -130
View File
File diff suppressed because it is too large Load Diff
src/ui/ssh/connection-log/ConnectionLog.tsx
+4 -4
View File
@@ -105,8 +105,8 @@ export function ConnectionLog({
const borderClass =
position === "bottom" && !isExpanded
? "border-t-2 border-border"
: "border-b-2 border-border";
? "border-t-1 border-border"
: "border-b-1 border-border";
return (
<div
@@ -117,7 +117,7 @@ export function ConnectionLog({
)}
<div
className={`relative z-10 bg-bg-subtle pointer-events-auto ${isExpanded ? "flex flex-col h-full" : ""} ${!isExpanded ? borderClass : ""}`}
className={`relative z-10 bg-bg-base pointer-events-auto ${isExpanded ? "flex flex-col h-full" : ""} ${!isExpanded ? borderClass : ""}`}
>
<div className="flex items-center justify-between px-3 py-2 shrink-0">
<Button
@@ -152,7 +152,7 @@ export function ConnectionLog({
{isExpanded && (
<div
ref={logContainerRef}
className="flex-1 h-0 overflow-y-auto overflow-x-hidden thin-scrollbar border-t-2 border-border bg-bg-base"
className="flex-1 h-0 overflow-y-auto overflow-x-hidden thin-scrollbar border-t-1 border-border bg-bg-base"
>
<div className="px-3 py-2">
{logs.length === 0 ? (
tsconfig.app.json
+1
View File
@@ -28,6 +28,7 @@
"noImplicitOverride": false,
"noEmitOnError": false,
"paths": {
"@/types/*": ["./src/types/*"],
"@/*": ["./src/ui/*"]
}
},
tsconfig.json
+1
View File
@@ -13,6 +13,7 @@
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"paths": {
"@/types/*": ["./src/types/*"],
"@/*": ["./src/ui/*"]
}
}
tsconfig.node.json
+5 -1
View File
@@ -26,5 +26,9 @@
"allowUnusedLabels": true,
"allowUnreachableCode": true
},
"include": ["src/backend/**/*.ts"]
"include": [
"src/backend/**/*.ts",
"src/types/**/*.ts",
"src/ui/types/**/*.ts"
]
}
vite.config.ts
+1
View File
@@ -92,6 +92,7 @@ export default defineConfig({
},
resolve: {
alias: {
"@/types": path.resolve(__dirname, "./src/types"),
"@": path.resolve(__dirname, "./src/ui"),
},
},