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

chore: migrate all to use the new theme system

Browse Source
This commit is contained in:
LukeGus
2025-12-26 02:24:11 -06:00
parent 94d87ff406
commit 8f9f63c4ae
29 changed files with 258 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -34,7 +34,7 @@ function AlertDialogOverlay({
<AlertDialogPrimitive.Overlay <AlertDialogPrimitive.Overlay
data-slot="alert-dialog-overlay" data-slot="alert-dialog-overlay"
className={cn( 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, className,
)} )}
{...props} {...props}

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

@@ -36,7 +36,7 @@ function DialogOverlay({
<DialogPrimitive.Overlay <DialogPrimitive.Overlay
data-slot="dialog-overlay" data-slot="dialog-overlay"
className={cn( 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, className,
)} )}
{...props} {...props}

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

@@ -34,7 +34,7 @@ function SheetOverlay({
<SheetPrimitive.Overlay <SheetPrimitive.Overlay
data-slot="sheet-overlay" data-slot="sheet-overlay"
className={cn( 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, className,
)} )}
{...props} {...props}

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

@@ -51,7 +51,7 @@ function Slider({
<SliderPrimitive.Thumb <SliderPrimitive.Thumb
data-slot="slider-thumb" data-slot="slider-thumb"
key={index} 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> </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 { Toaster as Sonner, type ToasterProps, toast } from "sonner";
import { useRef } from "react"; import { useRef } from "react";

9
src/index.css
View File

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

4
src/locales/en.json
View File

@@ -2427,5 +2427,9 @@
"stats": "Stats", "stats": "Stats",
"consoleTab": "Console", "consoleTab": "Console",
"startContainerToAccess": "Start the container to access the 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, 225deg,
transparent, transparent,
transparent 35px, transparent 35px,
rgba(255, 255, 255, 0.03) 35px, var(--border-subtle) 35px,
rgba(255, 255, 255, 0.03) 37px var(--border-subtle) 37px
)`, )`,
}} }}
> >
@@ -310,17 +310,16 @@ function AppContent() {
{isTransitioning && ( {isTransitioning && (
<div <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" transitionPhase === "fadeOut" ? "opacity-100" : "opacity-0"
}`} }`}
style={{ style={{
background: "#0e0e10",
backgroundImage: `repeating-linear-gradient( backgroundImage: `repeating-linear-gradient(
45deg, 45deg,
transparent, transparent,
transparent 35px, transparent 35px,
rgba(255, 255, 255, 0.03) 35px, var(--border-subtle) 35px,
rgba(255, 255, 255, 0.03) 37px var(--border-subtle) 37px
)`, )`,
}} }}
> >

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

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

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

@@ -312,7 +312,7 @@ export function ContainerCard({
</div> </div>
</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> <TooltipProvider>
{container.state !== "running" && ( {container.state !== "running" && (
<Tooltip> <Tooltip>
@@ -325,7 +325,7 @@ export function ContainerCard({
disabled={isLoading} disabled={isLoading}
> >
{isStarting ? ( {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" /> <Play className="h-4 w-4" />
)} )}
@@ -346,7 +346,7 @@ export function ContainerCard({
disabled={isLoading} disabled={isLoading}
> >
{isStopping ? ( {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" /> <Square className="h-4 w-4" />
)} )}
@@ -368,7 +368,7 @@ export function ContainerCard({
disabled={isLoading} disabled={isLoading}
> >
{isPausing ? ( {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" ? ( ) : container.state === "paused" ? (
<PlayCircle className="h-4 w-4" /> <PlayCircle className="h-4 w-4" />
) : ( ) : (
@@ -394,7 +394,7 @@ export function ContainerCard({
disabled={isLoading || container.state === "exited"} disabled={isLoading || container.state === "exited"}
> >
{isRestarting ? ( {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" /> <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" className="flex-1 h-full"
> >
{isLoading ? ( {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" /> <RefreshCw className="h-4 w-4" />
)} )}
@@ -197,7 +197,7 @@ export function LogViewer({
className="flex-1 h-full" className="flex-1 h-full"
> >
{isDownloading ? ( {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" /> <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} onKeyDown={handleEditKeyDown}
onBlur={handleEditConfirm} onBlur={handleEditConfirm}
className={cn( 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", "text-center text-foreground placeholder:text-muted-foreground",
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px]", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px]",
)} )}
@@ -1180,7 +1180,7 @@ export function FileManagerGrid({
onKeyDown={handleEditKeyDown} onKeyDown={handleEditKeyDown}
onBlur={handleEditConfirm} onBlur={handleEditConfirm}
className={cn( 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", "text-foreground placeholder:text-muted-foreground",
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px]", "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)} onChange={(e) => setInputName(e.target.value)}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
onBlur={() => onConfirm?.(inputName.trim())} 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={ placeholder={
intent.type === "directory" intent.type === "directory"
? t("fileManager.folderName") ? t("fileManager.folderName")
@@ -1426,7 +1426,7 @@ function CreateIntentListItem({
onChange={(e) => setInputName(e.target.value)} onChange={(e) => setInputName(e.target.value)}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
onBlur={() => onConfirm?.(inputName.trim())} 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={ placeholder={
intent.type === "directory" intent.type === "directory"
? t("fileManager.folderName") ? 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> </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"> <div className="flex justify-center">
{pdfError ? ( {pdfError ? (
<div className="text-center text-muted-foreground p-8"> <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 ${ className={`text-xs px-2.5 py-0.5 rounded-full font-medium ${
iface.state === "UP" iface.state === "UP"
? "bg-green-500/20 text-green-400" ? "bg-green-500/20 text-green-400"
: "bg-gray-500/20 text-foreground-subtle" : "bg-surface text-foreground-subtle"
}`} }`}
> >
{iface.state} {iface.state}

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

@@ -56,7 +56,7 @@ export function CommandAutocomplete({
className={cn( className={cn(
"px-3 py-1.5 text-sm font-mono cursor-pointer transition-colors", "px-3 py-1.5 text-sm font-mono cursor-pointer transition-colors",
"hover:bg-hover", "hover:bg-hover",
index === selectedIndex && "bg-gray-500/20 text-muted-foreground", index === selectedIndex && "bg-surface text-muted-foreground",
)} )}
onClick={() => onSelect(suggestion)} onClick={() => onSelect(suggestion)}
onMouseEnter={() => {}} 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="flex items-center justify-center h-full">
<div className="text-center"> <div className="text-center">
<p className="text-gray-400 text-lg"> <p className="text-foreground-subtle text-lg">
{t("tunnel.noTunnelsConfigured")} {t("tunnel.noTunnelsConfigured")}
</p> </p>
<p className="text-gray-500 text-sm mt-2"> <p className="text-foreground-subtle text-sm mt-2">
{t("tunnel.configureTunnelsInHostSettings")} {t("tunnel.configureTunnelsInHostSettings")}
</p> </p>
</div> </div>

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

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

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

@@ -1348,7 +1348,7 @@ export function HostManagerEditor({
type="button" type="button"
variant="ghost" variant="ghost"
size="sm" 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)} onClick={() => handleFolderClick(folder)}
> >
{folder} {folder}
@@ -1372,12 +1372,12 @@ export function HostManagerEditor({
{field.value.map((tag: string, idx: number) => ( {field.value.map((tag: string, idx: number) => (
<span <span
key={tag + idx} 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} {tag}
<button <button
type="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={() => { onClick={() => {
const newTags = field.value.filter( const newTags = field.value.filter(
(_: string, i: number) => i !== idx, (_: string, i: number) => i !== idx,
@@ -1683,7 +1683,7 @@ export function HostManagerEditor({
type="button" type="button"
variant="ghost" variant="ghost"
size="sm" 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={() => { onClick={() => {
field.onChange(opt.value); field.onChange(opt.value);
setKeyTypeDropdownOpen(false); setKeyTypeDropdownOpen(false);
@@ -3231,7 +3231,7 @@ export function HostManagerEditor({
type="button" type="button"
variant="ghost" variant="ghost"
size="sm" 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={() => onClick={() =>
handleSshConfigClick( handleSshConfigClick(
config, config,

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

@@ -268,7 +268,7 @@ export function HostAuthenticationSection({
type="button" type="button"
variant="ghost" variant="ghost"
size="sm" 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={() => { onClick={() => {
field.onChange(opt.value); field.onChange(opt.value);
setKeyTypeDropdownOpen(false); setKeyTypeDropdownOpen(false);

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

@@ -226,7 +226,7 @@ export function HostGeneralTab({
type="button" type="button"
variant="ghost" variant="ghost"
size="sm" 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)} onClick={() => handleFolderClick(folder)}
> >
{folder} {folder}
@@ -250,12 +250,12 @@ export function HostGeneralTab({
{field.value.map((tag: string, idx: number) => ( {field.value.map((tag: string, idx: number) => (
<span <span
key={tag + idx} 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} {tag}
<button <button
type="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={() => { onClick={() => {
const newTags = field.value.filter( const newTags = field.value.filter(
(_: string, i: number) => i !== idx, (_: 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 <FormField
control={control} control={control}
name="terminalConfig.cursorStyle" 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" type="button"
variant="ghost" variant="ghost"
size="sm" 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={() => onClick={() =>
handleSshConfigClick( handleSshConfigClick(
config, config,

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

@@ -1184,7 +1184,7 @@ export function SSHToolsSidebar({
size="sm" size="sm"
className={`rounded-full px-3 py-1 text-xs flex items-center gap-1 ${ className={`rounded-full px-3 py-1 text-xs flex items-center gap-1 ${
selectedTabIds.includes(tab.id) selectedTabIds.includes(tab.id)
? "text-foreground bg-gray-700" ? "text-foreground bg-surface"
: "text-foreground-subtle" : "text-foreground-subtle"
}`} }`}
onClick={() => handleTabToggle(tab.id)} onClick={() => handleTabToggle(tab.id)}
@@ -1266,7 +1266,7 @@ export function SSHToolsSidebar({
size="sm" size="sm"
className={`rounded-full px-3 py-1 text-xs flex items-center gap-1 ${ className={`rounded-full px-3 py-1 text-xs flex items-center gap-1 ${
selectedSnippetTabIds.includes(tab.id) selectedSnippetTabIds.includes(tab.id)
? "text-foreground bg-gray-700" ? "text-foreground bg-surface"
: "text-foreground-subtle" : "text-foreground-subtle"
}`} }`}
onClick={() => handleSnippetTabToggle(tab.id)} onClick={() => handleSnippetTabToggle(tab.id)}
@@ -1415,7 +1415,7 @@ export function SSHToolsSidebar({
} }
onDrop={(e) => handleDrop(e, snippet)} onDrop={(e) => handleDrop(e, snippet)}
onDragEnd={handleDragEnd} 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 draggedSnippet?.id === snippet.id
? "opacity-50" ? "opacity-50"
: "" : ""
@@ -1638,7 +1638,7 @@ export function SSHToolsSidebar({
{filteredCommands.map((command, index) => ( {filteredCommands.map((command, index) => (
<div <div
key={index} 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"> <div className="flex items-center justify-between gap-2 w-full min-w-0">
<span <span
@@ -1729,7 +1729,7 @@ export function SSHToolsSidebar({
${ ${
isAssigned isAssigned
? "bg-canvas/50 text-muted-foreground cursor-not-allowed opacity-50" ? "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" : ""} ${isDragging ? "opacity-50" : ""}
`} `}
@@ -1786,11 +1786,11 @@ export function SSHToolsSidebar({
${ ${
isEmpty isEmpty
? "border-dashed border-edge" ? "border-dashed border-edge"
: "border-solid border-gray-400 bg-gray-500/10" : "border-solid border-edge-hover bg-surface"
} }
${ ${
isHovered && draggedTabId 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 = { const handleStyle = {
pointerEvents: "auto", pointerEvents: "auto",
zIndex: 12, zIndex: 12,
background: isDarkMode ? "#303032" : "#e5e7eb", background: "var(--border-base)",
} as React.CSSProperties; } as React.CSSProperties;
const commonGroupProps: { const commonGroupProps: {
onLayout: () => void; 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" 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 <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={() => { onClick={() => {
openUserProfileTab(); openUserProfileTab();
}} }}
@@ -594,7 +594,7 @@ export function LeftSidebar({
</DropdownMenuItem> </DropdownMenuItem>
{isAdmin && ( {isAdmin && (
<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={() => { onClick={() => {
if (isAdmin) openAdminTab(); if (isAdmin) openAdminTab();
}} }}
@@ -603,7 +603,7 @@ export function LeftSidebar({
</DropdownMenuItem> </DropdownMenuItem>
)} )}
<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} onClick={onLogout || handleLogout}
> >
<span>{t("common.logout")}</span> <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; const DEBOUNCE_MS = 140;
// Auto-switch terminal theme based on app theme // Auto-switch terminal theme based on app theme
const isDarkMode = appTheme === "dark" || const isDarkMode =
(appTheme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches); appTheme === "dark" ||
const themeColors = isDarkMode (appTheme === "system" &&
? TERMINAL_THEMES.termixDark.colors window.matchMedia("(prefers-color-scheme: dark)").matches);
: TERMINAL_THEMES.termixLight.colors; const themeColors = {
background: isDarkMode ? "#0e0e10" : "#ffffff",
foreground: isDarkMode ? "#f7f7f7" : "#18181b",
};
useEffect(() => { useEffect(() => {
isVisibleRef.current = isVisible; isVisibleRef.current = isVisible;

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

@@ -11,12 +11,13 @@ import {
SidebarProvider, SidebarProvider,
} from "@/components/ui/sidebar.tsx"; } from "@/components/ui/sidebar.tsx";
import { Button } from "@/components/ui/button.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 React, { useState, useEffect, useMemo, useCallback } from "react";
import { Separator } from "@/components/ui/separator.tsx"; import { Separator } from "@/components/ui/separator.tsx";
import { FolderCard } from "@/ui/mobile/navigation/hosts/FolderCard.tsx"; import { FolderCard } from "@/ui/mobile/navigation/hosts/FolderCard.tsx";
import { getSSHHosts, logoutUser } from "@/ui/main-axios.ts"; import { getSSHHosts, logoutUser } from "@/ui/main-axios.ts";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useTheme } from "@/components/theme-provider";
import { Input } from "@/components/ui/input.tsx"; import { Input } from "@/components/ui/input.tsx";
import { import {
DropdownMenu, DropdownMenu,
@@ -81,6 +82,7 @@ export function LeftSidebar({
username, username,
}: LeftSidebarProps) { }: LeftSidebarProps) {
const { t } = useTranslation(); const { t } = useTranslation();
const { theme, setTheme } = useTheme();
const [hosts, setHosts] = useState<SSHHost[]>([]); const [hosts, setHosts] = useState<SSHHost[]>([]);
const [hostsLoading] = useState(false); const [hostsLoading] = useState(false);
const [hostsError, setHostsError] = useState<string | null>(null); 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" 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 <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} onClick={handleLogout}
> >
<span>{t("common.logout")}</span> <span>{t("common.logout")}</span>