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

v1.10.0 #471

Merged
LukeGus merged 106 commits from dev-1.10.0 into main 2026-01-01 04:20:12 +00:00
Conversation 0 Commits 106 Files Changed 225 +258 -115
29 changed files with 258 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 8f9f63c4ae - Show all commits

2
src/components/ui/alert-dialog.tsx
View File

@@ -34,7 +34,7 @@ function AlertDialogOverlay({
<AlertDialogPrimitive.Overlay
data-slot="alert-dialog-overlay"
className={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-overlay",
className,
)}
{...props}

2
src/components/ui/dialog.tsx
View File

@@ -36,7 +36,7 @@ function DialogOverlay({
<DialogPrimitive.Overlay
data-slot="dialog-overlay"
className={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-overlay",
className,
)}
{...props}

2
src/components/ui/sheet.tsx
View File

@@ -34,7 +34,7 @@ function SheetOverlay({
<SheetPrimitive.Overlay
data-slot="sheet-overlay"
className={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 data-[state=closed]:pointer-events-none",
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-overlay data-[state=closed]:pointer-events-none",
className,
)}
{...props}

2
src/components/ui/slider.tsx
View File

@@ -51,7 +51,7 @@ function Slider({
<SliderPrimitive.Thumb
data-slot="slider-thumb"
key={index}
className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-elevated shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
/>
))}
</SliderPrimitive.Root>

2
src/components/ui/sonner.tsx
View File

@@ -1,4 +1,4 @@
import { useTheme } from "next-themes";
import { useTheme } from "@/components/theme-provider";
import { Toaster as Sonner, type ToasterProps, toast } from "sonner";
import { useRef } from "react";

9
src/index.css
View File

@@ -79,6 +79,9 @@
--scrollbar-thumb: #c1c1c3;
--scrollbar-thumb-hover: #a1a1a3;
--scrollbar-track: #f3f4f6;
/* Modal Overlay - Light Mode */
--bg-overlay: rgba(0, 0, 0, 0.5);
}
@theme inline {
@@ -168,6 +171,9 @@
/* NEW SEMANTIC TEXT COLOR MAPPINGS - Creates Tailwind text classes */
--color-foreground-secondary: var(--foreground-secondary);
--color-foreground-subtle: var(--foreground-subtle);
/* Modal Overlay Mapping - Creates Tailwind bg-overlay class */
--color-overlay: var(--bg-overlay);
}
.dark {
@@ -233,6 +239,9 @@
--scrollbar-thumb: #434345;
--scrollbar-thumb-hover: #5a5a5d;
--scrollbar-track: #18181b;
/* Modal Overlay - Dark Mode */
--bg-overlay: rgba(0, 0, 0, 0.7);
}
@layer base {

4
src/locales/en.json
View File

@@ -2427,5 +2427,9 @@
"stats": "Stats",
"consoleTab": "Console",
"startContainerToAccess": "Start the container to access the console"
},
"theme": {
"switchToLight": "Switch to Light",
"switchToDark": "Switch to Dark"
}
}

11
src/ui/desktop/DesktopApp.tsx
View File

@@ -200,8 +200,8 @@ function AppContent() {
225deg,
transparent,
transparent 35px,
rgba(255, 255, 255, 0.03) 35px,
rgba(255, 255, 255, 0.03) 37px
var(--border-subtle) 35px,
var(--border-subtle) 37px
)`,
}}
>
@@ -310,17 +310,16 @@ function AppContent() {
{isTransitioning && (
<div
className={`fixed inset-0 bg-background z-[20000] transition-opacity duration-700 ${
className={`fixed inset-0 bg-deepest z-[20000] transition-opacity duration-700 ${
transitionPhase === "fadeOut" ? "opacity-100" : "opacity-0"
}`}
style={{
background: "#0e0e10",
backgroundImage: `repeating-linear-gradient(
45deg,
transparent,
transparent 35px,
rgba(255, 255, 255, 0.03) 35px,
rgba(255, 255, 255, 0.03) 37px
var(--border-subtle) 35px,
var(--border-subtle) 37px
)`,
}}
>

4
src/ui/desktop/apps/features/docker/components/ConsoleTerminal.tsx
View File

@@ -103,8 +103,8 @@ export function ConsoleTerminal({
.trim();
terminal.options.theme = {
background: backgroundColor || "#ffffff",
foreground: foregroundColor || "#09090b",
background: backgroundColor || "var(--bg-elevated)",
foreground: foregroundColor || "var(--foreground)",
};
setTimeout(() => {

10
src/ui/desktop/apps/features/docker/components/ContainerCard.tsx
View File

@@ -312,7 +312,7 @@ export function ContainerCard({
</div>
</div>
<div className="flex flex-wrap gap-2 pt-2 border-t border-gray-700/50">
<div className="flex flex-wrap gap-2 pt-2 border-t border-edge-panel">
<TooltipProvider>
{container.state !== "running" && (
<Tooltip>
@@ -325,7 +325,7 @@ export function ContainerCard({
disabled={isLoading}
>
{isStarting ? (
<div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
<div className="h-4 w-4 animate-spin rounded-full border-2 border-edge-hover border-t-transparent" />
) : (
<Play className="h-4 w-4" />
)}
@@ -346,7 +346,7 @@ export function ContainerCard({
disabled={isLoading}
>
{isStopping ? (
<div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
<div className="h-4 w-4 animate-spin rounded-full border-2 border-edge-hover border-t-transparent" />
) : (
<Square className="h-4 w-4" />
)}
@@ -368,7 +368,7 @@ export function ContainerCard({
disabled={isLoading}
>
{isPausing ? (
<div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
<div className="h-4 w-4 animate-spin rounded-full border-2 border-edge-hover border-t-transparent" />
) : container.state === "paused" ? (
<PlayCircle className="h-4 w-4" />
) : (
@@ -394,7 +394,7 @@ export function ContainerCard({
disabled={isLoading || container.state === "exited"}
>
{isRestarting ? (
<div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
<div className="h-4 w-4 animate-spin rounded-full border-2 border-edge-hover border-t-transparent" />
) : (
<RotateCw className="h-4 w-4" />
)}

4
src/ui/desktop/apps/features/docker/components/LogViewer.tsx
View File

@@ -184,7 +184,7 @@ export function LogViewer({
className="flex-1 h-full"
>
{isLoading ? (
<div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
<div className="h-4 w-4 animate-spin rounded-full border-2 border-edge-hover border-t-transparent" />
) : (
<RefreshCw className="h-4 w-4" />
)}
@@ -197,7 +197,7 @@ export function LogViewer({
className="flex-1 h-full"
>
{isDownloading ? (
<div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
<div className="h-4 w-4 animate-spin rounded-full border-2 border-edge-hover border-t-transparent" />
) : (
<Download className="h-4 w-4" />
)}

8
src/ui/desktop/apps/features/file-manager/FileManagerGrid.tsx
View File

@@ -1091,7 +1091,7 @@ export function FileManagerGrid({
onKeyDown={handleEditKeyDown}
onBlur={handleEditConfirm}
className={cn(
"max-w-[120px] min-w-[60px] w-fit rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 text-xs shadow-xs transition-[color,box-shadow] outline-none",
"max-w-[120px] min-w-[60px] w-fit rounded-md border border-edge bg-elevated px-2 py-1 text-xs shadow-xs transition-[color,box-shadow] outline-none",
"text-center text-foreground placeholder:text-muted-foreground",
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px]",
)}
@@ -1180,7 +1180,7 @@ export function FileManagerGrid({
onKeyDown={handleEditKeyDown}
onBlur={handleEditConfirm}
className={cn(
"flex-1 min-w-0 max-w-[200px] rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none",
"flex-1 min-w-0 max-w-[200px] rounded-md border border-edge bg-elevated px-2 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none",
"text-foreground placeholder:text-muted-foreground",
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px]",
)}
@@ -1370,7 +1370,7 @@ function CreateIntentGridItem({
onChange={(e) => setInputName(e.target.value)}
onKeyDown={handleKeyDown}
onBlur={() => onConfirm?.(inputName.trim())}
className="w-full max-w-[120px] rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 text-xs text-center text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px] outline-none"
className="w-full max-w-[120px] rounded-md border border-edge bg-elevated px-2 py-1 text-xs text-center text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px] outline-none"
placeholder={
intent.type === "directory"
? t("fileManager.folderName")
@@ -1426,7 +1426,7 @@ function CreateIntentListItem({
onChange={(e) => setInputName(e.target.value)}
onKeyDown={handleKeyDown}
onBlur={() => onConfirm?.(inputName.trim())}
className="flex-1 min-w-0 max-w-[200px] rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 text-sm text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px] outline-none"
className="flex-1 min-w-0 max-w-[200px] rounded-md border border-edge bg-elevated px-2 py-1 text-sm text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px] outline-none"
placeholder={
intent.type === "directory"
? t("fileManager.folderName")

2
src/ui/desktop/apps/features/file-manager/components/FileViewer.tsx
View File

@@ -1255,7 +1255,7 @@ export function FileViewer({
</div>
</div>
<div className="flex-1 overflow-auto thin-scrollbar p-6 bg-gray-100 dark:bg-gray-900">
<div className="flex-1 overflow-auto thin-scrollbar p-6 bg-surface">
<div className="flex justify-center">
{pdfError ? (
<div className="text-center text-muted-foreground p-8">

2
src/ui/desktop/apps/features/server-stats/widgets/NetworkWidget.tsx
View File

@@ -57,7 +57,7 @@ export function NetworkWidget({ metrics }: NetworkWidgetProps) {
className={`text-xs px-2.5 py-0.5 rounded-full font-medium ${
iface.state === "UP"
? "bg-green-500/20 text-green-400"
: "bg-gray-500/20 text-foreground-subtle"
: "bg-surface text-foreground-subtle"
}`}
>
{iface.state}

2
src/ui/desktop/apps/features/terminal/command-history/CommandAutocomplete.tsx
View File

@@ -56,7 +56,7 @@ export function CommandAutocomplete({
className={cn(
"px-3 py-1.5 text-sm font-mono cursor-pointer transition-colors",
"hover:bg-hover",
index === selectedIndex && "bg-gray-500/20 text-muted-foreground",
index === selectedIndex && "bg-surface text-muted-foreground",
)}
onClick={() => onSelect(suggestion)}
onMouseEnter={() => {}}

4
src/ui/desktop/apps/features/tunnel/TunnelManager.tsx
View File

@@ -127,10 +127,10 @@ export function TunnelManager({
) : (
<div className="flex items-center justify-center h-full">
<div className="text-center">
<p className="text-gray-400 text-lg">
<p className="text-foreground-subtle text-lg">
{t("tunnel.noTunnelsConfigured")}
</p>
<p className="text-gray-500 text-sm mt-2">
<p className="text-foreground-subtle text-sm mt-2">
{t("tunnel.configureTunnelsInHostSettings")}
</p>
</div>

4
src/ui/desktop/apps/host-manager/credentials/CredentialEditor.tsx
View File

@@ -616,12 +616,12 @@ export function CredentialEditor({
(tag: string, idx: number) => (
<span
key={`${tag}-${idx}`}
className="flex items-center bg-gray-200 text-gray-800 rounded-full px-2 py-0.5 text-xs"
className="flex items-center bg-surface text-foreground rounded-full px-2 py-0.5 text-xs"
>
{tag}
<button
type="button"
className="ml-1 text-gray-500 hover:text-red-500 focus:outline-none"
className="ml-1 text-foreground-subtle hover:text-red-500 focus:outline-none"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();

105
src/ui/desktop/apps/host-manager/credentials/CredentialViewer.tsx
View File

@@ -108,9 +108,9 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
const getAuthIcon = (authType: string) => {
return authType === "password" ? (
<Key className="h-5 w-5 text-zinc-600 dark:text-zinc-400" />
<Key className="h-5 w-5 text-foreground-subtle" />
) : (
<Shield className="h-5 w-5 text-zinc-500 dark:text-zinc-400" />
<Shield className="h-5 w-5 text-foreground-subtle" />
);
};
@@ -127,7 +127,7 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
return (
<div className="space-y-2">
<div className="flex items-center justify-between">
<label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
<label className="text-sm font-medium text-foreground-secondary">
{label}
</label>
<div className="flex items-center space-x-2">
@@ -152,7 +152,7 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
</div>
</div>
<div
className={`p-3 rounded-md bg-zinc-800 dark:bg-zinc-800 ${isMultiline ? "" : "min-h-[2.5rem]"}`}
className={`p-3 rounded-md bg-surface ${isMultiline ? "" : "min-h-[2.5rem]"}`}
>
{isVisible ? (
<pre
@@ -161,7 +161,7 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
{value}
</pre>
) : (
<div className="text-sm text-zinc-500 dark:text-zinc-400">
<div className="text-sm text-foreground-subtle">
{"•".repeat(isMultiline ? 50 : 20)}
</div>
)}
@@ -175,7 +175,7 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
<Sheet open={true} onOpenChange={onClose}>
<SheetContent className="w-[600px] max-w-[50vw]">
<div className="flex items-center justify-center h-64">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-zinc-600"></div>
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-foreground-subtle"></div>
</div>
</SheetContent>
</Sheet>
@@ -187,28 +187,25 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
<SheetContent className="w-[600px] max-w-[50vw] overflow-y-auto thin-scrollbar">
<SheetHeader className="space-y-6 pb-8">
<SheetTitle className="flex items-center space-x-4">
<div className="p-2 rounded-lg bg-zinc-100 dark:bg-zinc-800">
<div className="p-2 rounded-lg bg-surface">
{getAuthIcon(credentialDetails.authType)}
</div>
<div className="flex-1">
<div className="text-xl font-semibold">
{credentialDetails.name}
</div>
<div className="text-sm font-normal text-zinc-600 dark:text-zinc-400 mt-1">
<div className="text-sm font-normal text-foreground-subtle mt-1">
{credentialDetails.description}
</div>
</div>
<div className="flex items-center space-x-2">
<Badge
variant="outline"
className="border-zinc-300 dark:border-zinc-600 text-zinc-600 dark:text-zinc-400"
>
<Badge variant="outline" className="text-foreground-subtle">
{credentialDetails.authType}
</Badge>
{credentialDetails.keyType && (
<Badge
variant="secondary"
className="bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300"
className="bg-surface text-foreground-secondary"
>
{credentialDetails.keyType}
</Badge>
@@ -218,7 +215,7 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
</SheetHeader>
<div className="space-y-10">
<div className="flex space-x-2 p-2 bg-zinc-100 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg">
<div className="flex space-x-2 p-2 bg-surface border border-border rounded-lg">
<Button
variant={activeTab === "overview" ? "default" : "ghost"}
size="sm"
@@ -250,7 +247,7 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
{activeTab === "overview" && (
<div className="grid gap-10 lg:grid-cols-2">
<Card className="border-zinc-200 dark:border-zinc-700">
<Card className="border-border">
<CardHeader className="pb-8">
<CardTitle className="text-lg font-semibold">
{t("credentials.basicInformation")}
@@ -258,14 +255,14 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
</CardHeader>
<CardContent className="space-y-8">
<div className="flex items-center space-x-5">
<div className="p-2 rounded-lg bg-zinc-100 dark:bg-zinc-800">
<User className="h-4 w-4 text-zinc-500 dark:text-zinc-400" />
<div className="p-2 rounded-lg bg-surface">
<User className="h-4 w-4 text-foreground-subtle" />
</div>
<div>
<div className="text-sm text-zinc-500 dark:text-zinc-400">
<div className="text-sm text-foreground-subtle">
{t("common.username")}
</div>
<div className="font-medium text-zinc-800 dark:text-zinc-200">
<div className="font-medium text-foreground">
{credentialDetails.username}
</div>
</div>
@@ -273,9 +270,9 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
{credentialDetails.folder && (
<div className="flex items-center space-x-4">
<Folder className="h-4 w-4 text-zinc-500 dark:text-zinc-400" />
<Folder className="h-4 w-4 text-foreground-subtle" />
<div>
<div className="text-sm text-zinc-500 dark:text-zinc-400">
<div className="text-sm text-foreground-subtle">
{t("common.folder")}
</div>
<div className="font-medium">
@@ -287,9 +284,9 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
{credentialDetails.tags.length > 0 && (
<div className="flex items-start space-x-4">
<Hash className="h-4 w-4 text-zinc-500 dark:text-zinc-400 mt-1" />
<Hash className="h-4 w-4 text-foreground-subtle mt-1" />
<div className="flex-1">
<div className="text-sm text-zinc-500 dark:text-zinc-400 mb-3">
<div className="text-sm text-foreground-subtle mb-3">
{t("hosts.tags")}
</div>
<div className="flex flex-wrap gap-2">
@@ -310,9 +307,9 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
<Separator />
<div className="flex items-center space-x-4">
<Calendar className="h-4 w-4 text-zinc-500 dark:text-zinc-400" />
<Calendar className="h-4 w-4 text-foreground-subtle" />
<div>
<div className="text-sm text-zinc-500 dark:text-zinc-400">
<div className="text-sm text-foreground-subtle">
{t("credentials.created")}
</div>
<div className="font-medium">
@@ -322,9 +319,9 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
</div>
<div className="flex items-center space-x-4">
<Calendar className="h-4 w-4 text-zinc-500 dark:text-zinc-400" />
<Calendar className="h-4 w-4 text-foreground-subtle" />
<div>
<div className="text-sm text-zinc-500 dark:text-zinc-400">
<div className="text-sm text-foreground-subtle">
{t("credentials.lastModified")}
</div>
<div className="font-medium">
@@ -342,20 +339,20 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
</CardTitle>
</CardHeader>
<CardContent className="space-y-6">
<div className="text-center p-6 bg-zinc-900/20 dark:bg-zinc-900/20 rounded-lg">
<div className="text-3xl font-bold text-zinc-600 dark:text-zinc-400">
<div className="text-center p-6 bg-surface rounded-lg">
<div className="text-3xl font-bold text-foreground-subtle">
{credentialDetails.usageCount}
</div>
<div className="text-sm text-zinc-600 dark:text-zinc-400">
<div className="text-sm text-foreground-subtle">
{t("credentials.timesUsed")}
</div>
</div>
{credentialDetails.lastUsed && (
<div className="flex items-center space-x-4 p-4 bg-zinc-900/20 dark:bg-zinc-900/20 rounded-lg">
<Clock className="h-5 w-5 text-zinc-600 dark:text-zinc-400" />
<div className="flex items-center space-x-4 p-4 bg-surface rounded-lg">
<Clock className="h-5 w-5 text-foreground-subtle" />
<div>
<div className="text-sm text-zinc-500 dark:text-zinc-400">
<div className="text-sm text-foreground-subtle">
{t("credentials.lastUsed")}
</div>
<div className="font-medium">
@@ -365,10 +362,10 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
</div>
)}
<div className="flex items-center space-x-4 p-4 bg-zinc-900/20 dark:bg-zinc-900/20 rounded-lg">
<Server className="h-5 w-5 text-zinc-600 dark:text-zinc-400" />
<div className="flex items-center space-x-4 p-4 bg-surface rounded-lg">
<Server className="h-5 w-5 text-foreground-subtle" />
<div>
<div className="text-sm text-zinc-500 dark:text-zinc-400">
<div className="text-sm text-foreground-subtle">
{t("credentials.connectedHosts")}
</div>
<div className="font-medium">{hostsUsing.length}</div>
@@ -383,7 +380,7 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
<Card>
<CardHeader>
<CardTitle className="text-lg flex items-center space-x-2">
<Shield className="h-5 w-5 text-zinc-600 dark:text-zinc-400" />
<Shield className="h-5 w-5 text-foreground-subtle" />
<span>{t("credentials.securityDetails")}</span>
</CardTitle>
<CardDescription>
@@ -391,13 +388,13 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="flex items-center space-x-4 p-6 bg-zinc-900/20 dark:bg-zinc-900/20 rounded-lg">
<CheckCircle className="h-6 w-6 text-zinc-600 dark:text-zinc-400" />
<div className="flex items-center space-x-4 p-6 bg-surface rounded-lg">
<CheckCircle className="h-6 w-6 text-foreground-subtle" />
<div>
<div className="font-medium text-zinc-800 dark:text-zinc-200">
<div className="font-medium text-foreground">
{t("credentials.credentialSecured")}
</div>
<div className="text-sm text-zinc-700 dark:text-zinc-300">
<div className="text-sm text-foreground-secondary">
{t("credentials.credentialSecuredDescription")}
</div>
</div>
@@ -424,7 +421,7 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
<div className="grid gap-6 md:grid-cols-2">
<div>
<div className="text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-3">
<div className="text-sm font-medium text-foreground-secondary mb-3">
{t("credentials.keyType")}
</div>
<Badge variant="outline" className="text-sm">
@@ -450,13 +447,13 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
</div>
)}
<div className="flex items-start space-x-4 p-6 bg-zinc-900/20 dark:bg-zinc-900/20 rounded-lg">
<AlertTriangle className="h-5 w-5 text-zinc-600 dark:text-zinc-400 mt-0.5" />
<div className="flex items-start space-x-4 p-6 bg-surface rounded-lg">
<AlertTriangle className="h-5 w-5 text-foreground-subtle mt-0.5" />
<div className="text-sm">
<div className="font-medium text-zinc-800 dark:text-zinc-200 mb-2">
<div className="font-medium text-foreground mb-2">
{t("credentials.securityReminder")}
</div>
<div className="text-zinc-700 dark:text-zinc-300">
<div className="text-foreground-secondary">
{t("credentials.securityReminderText")}
</div>
</div>
@@ -469,15 +466,15 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
<Card>
<CardHeader>
<CardTitle className="text-lg flex items-center space-x-2">
<Server className="h-5 w-5 text-zinc-600 dark:text-zinc-400" />
<Server className="h-5 w-5 text-foreground-subtle" />
<span>{t("credentials.hostsUsingCredential")}</span>
<Badge variant="secondary">{hostsUsing.length}</Badge>
</CardTitle>
</CardHeader>
<CardContent>
{hostsUsing.length === 0 ? (
<div className="text-center py-10 text-zinc-500 dark:text-zinc-400">
<Server className="h-12 w-12 mx-auto mb-6 text-zinc-300 dark:text-zinc-600" />
<div className="text-center py-10 text-foreground-subtle">
<Server className="h-12 w-12 mx-auto mb-6 text-foreground-subtle" />
<p>{t("credentials.noHostsUsingCredential")}</p>
</div>
) : (
@@ -486,22 +483,22 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
{hostsUsing.map((host) => (
<div
key={host.id}
className="flex items-center justify-between p-4 border rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-800"
className="flex items-center justify-between p-4 border rounded-lg hover:bg-surface"
>
<div className="flex items-center space-x-3">
<div className="p-2 bg-zinc-100 dark:bg-zinc-800 rounded">
<Server className="h-4 w-4 text-zinc-600 dark:text-zinc-400" />
<div className="p-2 bg-surface rounded">
<Server className="h-4 w-4 text-foreground-subtle" />
</div>
<div>
<div className="font-medium">
{host.name || `${host.ip}:${host.port}`}
</div>
<div className="text-sm text-zinc-500 dark:text-zinc-400">
<div className="text-sm text-foreground-subtle">
{host.ip}:{host.port}
</div>
</div>
</div>
<div className="text-right text-sm text-zinc-500 dark:text-zinc-400">
<div className="text-right text-sm text-foreground-subtle">
{formatDate(host.createdAt)}
</div>
</div>

4
src/ui/desktop/apps/host-manager/credentials/tabs/CredentialGeneralTab.tsx
View File

@@ -176,12 +176,12 @@ export function CredentialGeneralTab({
{(field.value || []).map((tag: string, idx: number) => (
<span
key={`${tag}-${idx}`}
className="flex items-center bg-gray-200 text-gray-800 rounded-full px-2 py-0.5 text-xs"
className="flex items-center bg-surface text-foreground rounded-full px-2 py-0.5 text-xs"
>
{tag}
<button
type="button"
className="ml-1 text-gray-500 hover:text-red-500 focus:outline-none"
className="ml-1 text-foreground-subtle hover:text-red-500 focus:outline-none"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();

10
src/ui/desktop/apps/host-manager/hosts/HostManagerEditor.tsx
View File

@@ -1348,7 +1348,7 @@ export function HostManagerEditor({
type="button"
variant="ghost"
size="sm"
className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-white/15 focus:bg-white/20 focus:outline-none"
className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-surface-hover focus:bg-surface-hover focus:outline-none"
onClick={() => handleFolderClick(folder)}
>
{folder}
@@ -1372,12 +1372,12 @@ export function HostManagerEditor({
{field.value.map((tag: string, idx: number) => (
<span
key={tag + idx}
className="flex items-center bg-gray-200 text-gray-800 rounded-full px-2 py-0.5 text-xs"
className="flex items-center bg-surface text-foreground rounded-full px-2 py-0.5 text-xs"
>
{tag}
<button
type="button"
className="ml-1 text-gray-500 hover:text-red-500 focus:outline-none"
className="ml-1 text-foreground-subtle hover:text-red-500 focus:outline-none"
onClick={() => {
const newTags = field.value.filter(
(_: string, i: number) => i !== idx,
@@ -1683,7 +1683,7 @@ export function HostManagerEditor({
type="button"
variant="ghost"
size="sm"
className="w-full justify-start text-left rounded-md px-2 py-1.5 bg-canvas text-foreground hover:bg-white/15 focus:bg-white/20 focus:outline-none"
className="w-full justify-start text-left rounded-md px-2 py-1.5 bg-canvas text-foreground hover:bg-surface-hover focus:bg-surface-hover focus:outline-none"
onClick={() => {
field.onChange(opt.value);
setKeyTypeDropdownOpen(false);
@@ -3231,7 +3231,7 @@ export function HostManagerEditor({
type="button"
variant="ghost"
size="sm"
className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-white/15 focus:bg-white/20 focus:outline-none"
className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-surface-hover focus:bg-surface-hover focus:outline-none"
onClick={() =>
handleSshConfigClick(
config,

2
src/ui/desktop/apps/host-manager/hosts/tabs/HostAuthenticationSection.tsx
View File

@@ -268,7 +268,7 @@ export function HostAuthenticationSection({
type="button"
variant="ghost"
size="sm"
className="w-full justify-start text-left rounded-md px-2 py-1.5 bg-canvas text-foreground hover:bg-white/15 focus:bg-white/20 focus:outline-none"
className="w-full justify-start text-left rounded-md px-2 py-1.5 bg-canvas text-foreground hover:bg-surface-hover focus:bg-surface-hover focus:outline-none"
onClick={() => {
field.onChange(opt.value);
setKeyTypeDropdownOpen(false);

6
src/ui/desktop/apps/host-manager/hosts/tabs/HostGeneralTab.tsx
View File

@@ -226,7 +226,7 @@ export function HostGeneralTab({
type="button"
variant="ghost"
size="sm"
className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-white/15 focus:bg-white/20 focus:outline-none"
className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-surface-hover focus:bg-surface-hover focus:outline-none"
onClick={() => handleFolderClick(folder)}
>
{folder}
@@ -250,12 +250,12 @@ export function HostGeneralTab({
{field.value.map((tag: string, idx: number) => (
<span
key={tag + idx}
className="flex items-center bg-gray-200 text-gray-800 rounded-full px-2 py-0.5 text-xs"
className="flex items-center bg-surface text-foreground rounded-full px-2 py-0.5 text-xs"
>
{tag}
<button
type="button"
className="ml-1 text-gray-500 hover:text-red-500 focus:outline-none"
className="ml-1 text-foreground-subtle hover:text-red-500 focus:outline-none"
onClick={() => {
const newTags = field.value.filter(
(_: string, i: number) => i !== idx,

113
src/ui/desktop/apps/host-manager/hosts/tabs/HostTerminalTab.tsx
View File

@@ -106,6 +106,119 @@ export function HostTerminalTab({
)}
/>
<FormField
control={control}
name="terminalConfig.theme"
render={({ field }) => (
<FormItem>
<FormLabel>{t("hosts.terminalTheme")}</FormLabel>
<Select onValueChange={field.onChange} value={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder={t("hosts.selectTheme")} />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="termix">Termix Default</SelectItem>
<SelectItem value="termixDark">Termix Dark</SelectItem>
<SelectItem value="termixLight">Termix Light</SelectItem>
<SelectItem value="dracula">Dracula</SelectItem>
<SelectItem value="monokai">Monokai</SelectItem>
<SelectItem value="nord">Nord</SelectItem>
<SelectItem value="gruvboxDark">Gruvbox Dark</SelectItem>
<SelectItem value="gruvboxLight">Gruvbox Light</SelectItem>
<SelectItem value="solarizedDark">
Solarized Dark
</SelectItem>
<SelectItem value="solarizedLight">
Solarized Light
</SelectItem>
<SelectItem value="oneDark">One Dark</SelectItem>
<SelectItem value="tokyoNight">Tokyo Night</SelectItem>
<SelectItem value="ayuDark">Ayu Dark</SelectItem>
<SelectItem value="ayuLight">Ayu Light</SelectItem>
<SelectItem value="materialTheme">
Material Theme
</SelectItem>
<SelectItem value="palenight">Palenight</SelectItem>
<SelectItem value="oceanicNext">Oceanic Next</SelectItem>
<SelectItem value="nightOwl">Night Owl</SelectItem>
<SelectItem value="synthwave84">Synthwave '84</SelectItem>
<SelectItem value="cobalt2">Cobalt2</SelectItem>
<SelectItem value="snazzy">Snazzy</SelectItem>
<SelectItem value="atomOneDark">Atom One Dark</SelectItem>
<SelectItem value="catppuccinMocha">
Catppuccin Mocha
</SelectItem>
</SelectContent>
</Select>
<FormDescription>
{t("hosts.chooseTerminalTheme")}
</FormDescription>
</FormItem>
)}
/>
<FormField
control={control}
name="terminalConfig.fontFamily"
render={({ field }) => (
<FormItem>
<FormLabel>{t("hosts.terminalFont")}</FormLabel>
<Select onValueChange={field.onChange} value={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder={t("hosts.selectFont")} />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="Caskaydia Cove Nerd Font Mono">
Caskaydia Cove Nerd Font Mono
</SelectItem>
<SelectItem value="JetBrains Mono">
JetBrains Mono
</SelectItem>
<SelectItem value="Fira Code">Fira Code</SelectItem>
<SelectItem value="Cascadia Code">Cascadia Code</SelectItem>
<SelectItem value="Source Code Pro">
Source Code Pro
</SelectItem>
<SelectItem value="SF Mono">SF Mono</SelectItem>
<SelectItem value="Consolas">Consolas</SelectItem>
<SelectItem value="Monaco">Monaco</SelectItem>
</SelectContent>
</Select>
<FormDescription>
{t("hosts.chooseTerminalFont")}
</FormDescription>
</FormItem>
)}
/>
<FormField
control={control}
name="terminalConfig.fontSize"
render={({ field }) => (
<FormItem>
<FormLabel>
{t("hosts.fontSizeValue", {
value: field.value,
})}
</FormLabel>
<FormControl>
<Slider
min={8}
max={24}
step={1}
value={[field.value]}
onValueChange={([value]) => field.onChange(value)}
/>
</FormControl>
<FormDescription>{t("hosts.adjustFontSize")}</FormDescription>
</FormItem>
)}
/>
<FormField
control={control}
name="terminalConfig.cursorStyle"

2
src/ui/desktop/apps/host-manager/hosts/tabs/HostTunnelTab.tsx
View File

@@ -314,7 +314,7 @@ export function HostTunnelTab({
type="button"
variant="ghost"
size="sm"
className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-white/15 focus:bg-white/20 focus:outline-none"
className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-surface-hover focus:bg-surface-hover focus:outline-none"
onClick={() =>
handleSshConfigClick(
config,

14
src/ui/desktop/apps/tools/SSHToolsSidebar.tsx
View File

@@ -1184,7 +1184,7 @@ export function SSHToolsSidebar({
size="sm"
className={`rounded-full px-3 py-1 text-xs flex items-center gap-1 ${
selectedTabIds.includes(tab.id)
? "text-foreground bg-gray-700"
? "text-foreground bg-surface"
: "text-foreground-subtle"
}`}
onClick={() => handleTabToggle(tab.id)}
@@ -1266,7 +1266,7 @@ export function SSHToolsSidebar({
size="sm"
className={`rounded-full px-3 py-1 text-xs flex items-center gap-1 ${
selectedSnippetTabIds.includes(tab.id)
? "text-foreground bg-gray-700"
? "text-foreground bg-surface"
: "text-foreground-subtle"
}`}
onClick={() => handleSnippetTabToggle(tab.id)}
@@ -1415,7 +1415,7 @@ export function SSHToolsSidebar({
}
onDrop={(e) => handleDrop(e, snippet)}
onDragEnd={handleDragEnd}
className={`bg-field border border-input rounded-lg cursor-move hover:shadow-lg hover:border-gray-400/50 hover:bg-hover-alt transition-all duration-200 p-3 group ${
className={`bg-field border border-input rounded-lg cursor-move hover:shadow-lg hover:border-edge-hover hover:bg-hover-alt transition-all duration-200 p-3 group ${
draggedSnippet?.id === snippet.id
? "opacity-50"
: ""
@@ -1638,7 +1638,7 @@ export function SSHToolsSidebar({
{filteredCommands.map((command, index) => (
<div
key={index}
className="bg-canvas border-2 border-edge rounded-md px-3 py-2.5 hover:bg-hover-alt hover:border-gray-600 transition-all duration-200 group h-12 flex items-center"
className="bg-canvas border-2 border-edge rounded-md px-3 py-2.5 hover:bg-hover-alt hover:border-edge-hover transition-all duration-200 group h-12 flex items-center"
>
<div className="flex items-center justify-between gap-2 w-full min-w-0">
<span
@@ -1729,7 +1729,7 @@ export function SSHToolsSidebar({
${
isAssigned
? "bg-canvas/50 text-muted-foreground cursor-not-allowed opacity-50"
: "bg-canvas border border-edge hover:border-gray-400 hover:bg-field"
: "bg-canvas border border-edge hover:border-edge-hover hover:bg-field"
}
${isDragging ? "opacity-50" : ""}
`}
@@ -1786,11 +1786,11 @@ export function SSHToolsSidebar({
${
isEmpty
? "border-dashed border-edge"
: "border-solid border-gray-400 bg-gray-500/10"
: "border-solid border-edge-hover bg-surface"
}
${
isHovered && draggedTabId
? "border-gray-500 bg-gray-500/20 ring-2 ring-gray-500/50"
? "border-edge-hover bg-surface ring-2 ring-edge-hover"
: ""
}
`}

2
src/ui/desktop/navigation/AppView.tsx
View File

@@ -411,7 +411,7 @@ export function AppView({
const handleStyle = {
pointerEvents: "auto",
zIndex: 12,
background: isDarkMode ? "#303032" : "#e5e7eb",
background: "var(--border-base)",
} as React.CSSProperties;
const commonGroupProps: {
onLayout: () => void;

6
src/ui/desktop/navigation/LeftSidebar.tsx
View File

@@ -585,7 +585,7 @@ export function LeftSidebar({
className="min-w-[var(--radix-popper-anchor-width)] bg-sidebar-accent text-sidebar-accent-foreground border border-border rounded-md shadow-2xl p-1"
>
<DropdownMenuItem
className="rounded px-2 py-1.5 hover:bg-white/15 hover:text-accent-foreground focus:bg-white/20 focus:text-accent-foreground cursor-pointer focus:outline-none"
className="rounded px-2 py-1.5 hover:bg-surface-hover hover:text-accent-foreground focus:bg-surface-hover focus:text-accent-foreground cursor-pointer focus:outline-none"
onClick={() => {
openUserProfileTab();
}}
@@ -594,7 +594,7 @@ export function LeftSidebar({
</DropdownMenuItem>
{isAdmin && (
<DropdownMenuItem
className="rounded px-2 py-1.5 hover:bg-white/15 hover:text-accent-foreground focus:bg-white/20 focus:text-accent-foreground cursor-pointer focus:outline-none"
className="rounded px-2 py-1.5 hover:bg-surface-hover hover:text-accent-foreground focus:bg-surface-hover focus:text-accent-foreground cursor-pointer focus:outline-none"
onClick={() => {
if (isAdmin) openAdminTab();
}}
@@ -603,7 +603,7 @@ export function LeftSidebar({
</DropdownMenuItem>
)}
<DropdownMenuItem
className="rounded px-2 py-1.5 hover:bg-white/15 hover:text-accent-foreground focus:bg-white/20 focus:text-accent-foreground cursor-pointer focus:outline-none"
className="rounded px-2 py-1.5 hover:bg-surface-hover hover:text-accent-foreground focus:bg-surface-hover focus:text-accent-foreground cursor-pointer focus:outline-none"
onClick={onLogout || handleLogout}
>
<span>{t("common.logout")}</span>

13
src/ui/mobile/apps/terminal/Terminal.tsx
View File

@@ -69,11 +69,14 @@ export const Terminal = forwardRef<TerminalHandle, SSHTerminalProps>(
const DEBOUNCE_MS = 140;
// Auto-switch terminal theme based on app theme
const isDarkMode = appTheme === "dark" ||
(appTheme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);
const themeColors = isDarkMode
? TERMINAL_THEMES.termixDark.colors
: TERMINAL_THEMES.termixLight.colors;
const isDarkMode =
appTheme === "dark" ||
(appTheme === "system" &&
window.matchMedia("(prefers-color-scheme: dark)").matches);
const themeColors = {
background: isDarkMode ? "#0e0e10" : "#ffffff",
foreground: isDarkMode ? "#f7f7f7" : "#18181b",
};
useEffect(() => {
isVisibleRef.current = isVisible;

22
src/ui/mobile/navigation/LeftSidebar.tsx
View File

@@ -11,12 +11,13 @@ import {
SidebarProvider,
} from "@/components/ui/sidebar.tsx";
import { Button } from "@/components/ui/button.tsx";
import { ChevronUp, Menu, User2 } from "lucide-react";
import { ChevronUp, Menu, User2, Moon, Sun } from "lucide-react";
import React, { useState, useEffect, useMemo, useCallback } from "react";
import { Separator } from "@/components/ui/separator.tsx";
import { FolderCard } from "@/ui/mobile/navigation/hosts/FolderCard.tsx";
import { getSSHHosts, logoutUser } from "@/ui/main-axios.ts";
import { useTranslation } from "react-i18next";
import { useTheme } from "@/components/theme-provider";
import { Input } from "@/components/ui/input.tsx";
import {
DropdownMenu,
@@ -81,6 +82,7 @@ export function LeftSidebar({
username,
}: LeftSidebarProps) {
const { t } = useTranslation();
const { theme, setTheme } = useTheme();
const [hosts, setHosts] = useState<SSHHost[]>([]);
const [hostsLoading] = useState(false);
const [hostsError, setHostsError] = useState<string | null>(null);
@@ -252,7 +254,23 @@ export function LeftSidebar({
className="min-w-[var(--radix-popper-anchor-width)] bg-sidebar-accent text-sidebar-accent-foreground border border-border rounded-md shadow-2xl p-1"
>
<DropdownMenuItem
className="rounded px-2 py-1.5 hover:bg-white/15 hover:text-accent-foreground focus:bg-white/20 focus:text-accent-foreground cursor-pointer focus:outline-none"
className="rounded px-2 py-1.5 hover:bg-surface-hover hover:text-accent-foreground focus:bg-surface-hover focus:text-accent-foreground cursor-pointer focus:outline-none"
onClick={() =>
setTheme(theme === "dark" ? "light" : "dark")
}
>
{theme === "dark" ? (
<>
<span>{t("theme.switchToLight")}</span>
</>
) : (
<>
<span>{t("theme.switchToDark")}</span>
</>
)}
</DropdownMenuItem>
<DropdownMenuItem
className="rounded px-2 py-1.5 hover:bg-surface-hover hover:text-accent-foreground focus:bg-surface-hover focus:text-accent-foreground cursor-pointer focus:outline-none"
onClick={handleLogout}
>
<span>{t("common.logout")}</span>