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

Add Light Mode Support #450

Merged
PeetMcK merged 2 commits from _100-LightMode into dev-1.10.0 2025-12-23 22:35:50 +00:00
Conversation 8 Commits 2 Files Changed 84 +1084 -664
84 changed files with 1084 additions and 664 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
package-lock.json generated
View File

@@ -39,6 +39,7 @@
"@types/qrcode": "^1.5.5",
"@types/speakeasy": "^2.0.10",
"@uiw/codemirror-extensions-langs": "^4.24.1",
"@uiw/codemirror-theme-github": "^4.25.4",
"@uiw/react-codemirror": "^4.24.1",
"@xterm/addon-clipboard": "^0.1.0",
"@xterm/addon-fit": "^0.10.0",
@@ -5794,6 +5795,37 @@
"@codemirror/language-data": ">=6.0.0"
}
},
"node_modules/@uiw/codemirror-theme-github": {
"version": "4.25.4",
"resolved": "https://registry.npmjs.org/@uiw/codemirror-theme-github/-/codemirror-theme-github-4.25.4.tgz",
"integrity": "sha512-M5zRT2vIpNsuKN0Lz+DwLnmhHW8Eddp1M9zC0hm3V+bvffmaSn/pUDey1eqGIv5xNNmjhqvDAz0a90xLYCzvSw==",
"license": "MIT",
"dependencies": {
"@uiw/codemirror-themes": "4.25.4"
},
"funding": {
"url": "https://jaywcjlove.github.io/#/sponsor"
}
},
"node_modules/@uiw/codemirror-themes": {
"version": "4.25.4",
"resolved": "https://registry.npmjs.org/@uiw/codemirror-themes/-/codemirror-themes-4.25.4.tgz",
"integrity": "sha512-2SLktItgcZC4p0+PfFusEbAHwbuAWe3bOOntCevVgHtrWGtGZX3IPv2k8IKZMgOXtAHyGKpJvT9/nspPn/uCQg==",
"license": "MIT",
"dependencies": {
"@codemirror/language": "^6.0.0",
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0"
},
"funding": {
"url": "https://jaywcjlove.github.io/#/sponsor"
},
"peerDependencies": {
"@codemirror/language": ">=6.0.0",
"@codemirror/state": ">=6.0.0",
"@codemirror/view": ">=6.0.0"
}
},
"node_modules/@uiw/react-codemirror": {
"version": "4.25.2",
"resolved": "https://registry.npmjs.org/@uiw/react-codemirror/-/react-codemirror-4.25.2.tgz",

1
package.json
View File

@@ -58,6 +58,7 @@
"@types/qrcode": "^1.5.5",
"@types/speakeasy": "^2.0.10",
"@uiw/codemirror-extensions-langs": "^4.24.1",
"@uiw/codemirror-theme-github": "^4.25.4",
"@uiw/react-codemirror": "^4.24.1",
"@xterm/addon-clipboard": "^0.1.0",
"@xterm/addon-fit": "^0.10.0",

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

@@ -15,7 +15,7 @@ const badgeVariants = cva(
secondary:
"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
destructive:
"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
"border-transparent bg-destructive text-foreground [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline:
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
},

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

@@ -13,7 +13,7 @@ const buttonVariants = cva(
default:
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
destructive:
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
"bg-destructive text-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline:
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
secondary:

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

@@ -90,7 +90,7 @@ function CommandList({
<CommandPrimitive.List
data-slot="command-list"
className={cn(
"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto thin-scrollbar",
className,
)}
{...props}

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

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
type={type}
data-slot="input"
className={cn(
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] duration-200 outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground bg-elevated dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] duration-200 outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
className,

4
src/components/ui/resizable.tsx
View File

@@ -37,13 +37,13 @@ function ResizableHandle({
<ResizablePrimitive.PanelResizeHandle
data-slot="resizable-handle"
className={cn(
"relative flex w-1 items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-1 data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90 bg-dark-border-hover hover:bg-dark-active active:bg-dark-pressed transition-colors duration-150",
"relative flex w-1 items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-1 data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90 bg-edge-hover hover:bg-interact active:bg-pressed transition-colors duration-150",
className,
)}
{...props}
>
{withHandle && (
<div className="bg-dark-border-hover hover:bg-dark-active active:bg-dark-pressed z-10 flex h-4 w-3 items-center justify-center rounded-xs border transition-colors duration-150">
<div className="bg-edge-hover hover:bg-interact active:bg-pressed z-10 flex h-4 w-3 items-center justify-center rounded-xs border transition-colors duration-150">
<GripVerticalIcon className="size-2.5" />
</div>
)}

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

@@ -59,7 +59,7 @@ function SelectContent({
<SelectPrimitive.Content
data-slot="select-content"
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto thin-scrollbar rounded-md border shadow-md",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className,

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

@@ -365,7 +365,7 @@ function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
data-slot="sidebar-content"
data-sidebar="content"
className={cn(
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto thin-scrollbar group-data-[collapsible=icon]:overflow-hidden",
className,
)}
{...props}

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

@@ -6,7 +6,7 @@ function Table({ className, ...props }: React.ComponentProps<"table">) {
return (
<div
data-slot="table-container"
className="relative w-full overflow-x-auto"
className="relative w-full overflow-x-auto thin-scrollbar"
>
<table
data-slot="table"

57
src/constants/terminal-themes.ts
View File

@@ -28,6 +28,7 @@ export interface TerminalTheme {
}
export const TERMINAL_THEMES: Record<string, TerminalTheme> = {
// Legacy "termix" theme - auto-switches between termixDark and termixLight based on app theme
termix: {
name: "Termix Default",
category: "dark",
@@ -56,6 +57,62 @@ export const TERMINAL_THEMES: Record<string, TerminalTheme> = {
},
},
termixDark: {
name: "Termix Dark",
category: "dark",
colors: {
background: "#18181b",
foreground: "#f7f7f7",
cursor: "#f7f7f7",
cursorAccent: "#18181b",
selectionBackground: "#3a3a3d",
black: "#2e3436",
red: "#cc0000",
green: "#4e9a06",
yellow: "#c4a000",
blue: "#3465a4",
magenta: "#75507b",
cyan: "#06989a",
white: "#d3d7cf",
brightBlack: "#555753",
brightRed: "#ef2929",
brightGreen: "#8ae234",
brightYellow: "#fce94f",
brightBlue: "#729fcf",
brightMagenta: "#ad7fa8",
brightCyan: "#34e2e2",
brightWhite: "#eeeeec",
},
},
termixLight: {
name: "Termix Light",
category: "light",
colors: {
background: "#ffffff",
foreground: "#18181b",
cursor: "#18181b",
cursorAccent: "#ffffff",
selectionBackground: "#d1d5db",
black: "#18181b",
red: "#dc2626",
green: "#16a34a",
yellow: "#ca8a04",
blue: "#2563eb",
magenta: "#9333ea",
cyan: "#0891b2",
white: "#f4f4f5",
brightBlack: "#71717a",
brightRed: "#ef4444",
brightGreen: "#22c55e",
brightYellow: "#eab308",
brightBlue: "#3b82f6",
brightMagenta: "#a855f7",
brightCyan: "#06b6d4",
brightWhite: "#ffffff",
},
},
dracula: {
name: "Dracula",
category: "dark",

269
src/index.css
View File

@@ -8,45 +8,77 @@
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #09090b;
color: var(--foreground);
background-color: var(--bg-base);
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.141 0.005 285.823);
--card: oklch(1 0 0);
--card-foreground: oklch(0.141 0.005 285.823);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.141 0.005 285.823);
--primary: oklch(0.21 0.006 285.885);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.967 0.001 286.375);
--secondary-foreground: oklch(0.21 0.006 285.885);
--muted: oklch(0.967 0.001 286.375);
--muted-foreground: oklch(0.552 0.016 285.938);
--accent: oklch(0.967 0.001 286.375);
--accent-foreground: oklch(0.21 0.006 285.885);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.92 0.004 286.32);
--input: oklch(0.92 0.004 286.32);
--ring: oklch(0.705 0.015 286.067);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.141 0.005 285.823);
--sidebar-primary: oklch(0.21 0.006 285.885);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.967 0.001 286.375);
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
--sidebar-border: oklch(0.92 0.004 286.32);
--sidebar-ring: oklch(0.705 0.015 286.067);
--background: #ffffff;
--foreground: #18181b;
--card: #ffffff;
--card-foreground: #18181b;
--popover: #ffffff;
--popover-foreground: #18181b;
--primary: #27272a;
--primary-foreground: #fafafa;
--secondary: #f4f4f5;
--secondary-foreground: #27272a;
--muted: #f4f4f5;
--muted-foreground: #71717a;
--accent: #f4f4f5;
--accent-foreground: #27272a;
--destructive: #dc2626;
--border: #e4e4e7;
--input: #e4e4e7;
--ring: #a1a1aa;
--chart-1: #e76e50;
--chart-2: #2a9d8f;
--chart-3: #264653;
--chart-4: #e9c46a;
--chart-5: #f4a261;
--sidebar: #f9f9f9;
--sidebar-foreground: #18181b;
--sidebar-primary: #27272a;
--sidebar-primary-foreground: #fafafa;
--sidebar-accent: #f4f4f5;
--sidebar-accent-foreground: #27272a;
--sidebar-border: #e4e4e7;
--sidebar-ring: #a1a1aa;
/* NEW SEMANTIC VARIABLES - Light Mode Backgrounds */
--bg-base: #fcfcfc;
--bg-elevated: #ffffff;
--bg-surface: #f3f4f6;
--bg-surface-hover: #e5e7eb; /* Panel hover - replaces dark-bg-panel-hover */
--bg-input: #ffffff;
--bg-deepest: #e5e7eb;
--bg-header: #eeeeef;
--bg-button: #f3f4f6;
--bg-active: #e5e7eb;
--bg-light: #fafafa; /* Light background - replaces dark-bg-light */
--bg-subtle: #f5f5f5; /* Very light background - replaces dark-bg-very-light */
--bg-interact: #d1d5db; /* Interactive/active state - replaces dark-active */
--border-base: #e5e7eb;
--border-panel: #d1d5db;
--border-subtle: #f3f4f6;
--border-medium: #d1d5db;
--bg-hover: #f3f4f6;
--bg-hover-alt: #e5e7eb;
--bg-pressed: #d1d5db;
--border-hover: #d1d5db;
--border-active: #9ca3af;
/* NEW SEMANTIC VARIABLES - Light Mode Text Colors */
--foreground-secondary: #334155;
--foreground-subtle: #94a3b8;
/* Scrollbar Colors - Light Mode */
--scrollbar-thumb: #c1c1c3;
--scrollbar-thumb-hover: #a1a1a3;
--scrollbar-track: #f3f4f6;
}
@theme inline {
@@ -107,40 +139,101 @@
--color-dark-bg-panel: #1b1b1e;
--color-dark-border-panel: #222224;
--color-dark-bg-panel-hover: #232327;
/* NEW SEMANTIC COLOR MAPPINGS - Creates Tailwind classes */
/* Backgrounds: bg-canvas, bg-elevated, bg-surface, etc. */
--color-canvas: var(--bg-base);
--color-elevated: var(--bg-elevated);
--color-surface: var(--bg-surface);
--color-surface-hover: var(--bg-surface-hover);
--color-field: var(--bg-input);
--color-deepest: var(--bg-deepest);
--color-header: var(--bg-header);
--color-button: var(--bg-button);
--color-active: var(--bg-active);
--color-light: var(--bg-light);
--color-subtle: var(--bg-subtle);
--color-interact: var(--bg-interact);
--color-hover: var(--bg-hover);
--color-hover-alt: var(--bg-hover-alt);
--color-pressed: var(--bg-pressed);
/* Borders: border-edge, border-edge-panel, etc. */
--color-edge: var(--border-base);
--color-edge-panel: var(--border-panel);
--color-edge-subtle: var(--border-subtle);
--color-edge-medium: var(--border-medium);
--color-edge-hover: var(--border-hover);
--color-edge-active: var(--border-active);
/* NEW SEMANTIC TEXT COLOR MAPPINGS - Creates Tailwind text classes */
--color-foreground-secondary: var(--foreground-secondary);
--color-foreground-subtle: var(--foreground-subtle);
}
.dark {
--background: oklch(0.141 0.005 285.823);
--foreground: oklch(0.985 0 0);
--card: oklch(0.21 0.006 285.885);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.21 0.006 285.885);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.92 0.004 286.32);
--primary-foreground: oklch(0.21 0.006 285.885);
--secondary: oklch(0.274 0.006 286.033);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.274 0.006 286.033);
--muted-foreground: oklch(0.705 0.015 286.067);
--accent: oklch(0.274 0.006 286.033);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.552 0.016 285.938);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.21 0.006 285.885);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.274 0.006 286.033);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.552 0.016 285.938);
--background: #09090b;
--foreground: #fafafa;
--card: #18181b;
--card-foreground: #fafafa;
--popover: #27272a;
--popover-foreground: #fafafa;
--primary: #e4e4e7;
--primary-foreground: #27272a;
--secondary: #3f3f46;
--secondary-foreground: #fafafa;
--muted: #27272a;
--muted-foreground: #9ca3af;
--accent: #3f3f46;
--accent-foreground: #fafafa;
--destructive: #f87171;
--border: #ffffff1a;
--input: #ffffff26;
--ring: #71717a;
--chart-1: #3b82f6;
--chart-2: #34d399;
--chart-3: #f4a261;
--chart-4: #a855f7;
--chart-5: #f43f5e;
--sidebar: #18181b;
--sidebar-foreground: #fafafa;
--sidebar-primary: #3b82f6;
--sidebar-primary-foreground: #fafafa;
--sidebar-accent: #3f3f46;
--sidebar-accent-foreground: #fafafa;
--sidebar-border: #ffffff1a;
--sidebar-ring: #71717a;
/* NEW SEMANTIC VARIABLES - Dark Mode Background Overrides */
--bg-base: #18181b;
--bg-elevated: #0e0e10;
--bg-surface: #1b1b1e;
--bg-surface-hover: #232327; /* Panel hover */
--bg-input: #222225;
--bg-deepest: #09090b;
--bg-header: #131316;
--bg-button: #23232a;
--bg-active: #1d1d1f;
--bg-light: #141416; /* Light background */
--bg-subtle: #101014; /* Very light background */
--bg-interact: #2a2a2c; /* Interactive/active state */
--border-base: #303032;
--border-panel: #222224;
--border-subtle: #5a5a5d;
--border-medium: #373739;
--bg-hover: #2d2d30;
--bg-hover-alt: #2a2a2d;
--bg-pressed: #1a1a1c;
--border-hover: #434345;
--border-active: #2d2d30;
/* NEW SEMANTIC VARIABLES - Dark Mode Text Color Overrides */
--foreground-secondary: #d1d5db; /* Matches text-gray-300 */
--foreground-subtle: #6b7280; /* Matches text-gray-500 */
/* Scrollbar Colors - Dark Mode */
--scrollbar-thumb: #434345;
--scrollbar-thumb-hover: #5a5a5d;
--scrollbar-track: #18181b;
}
@layer base {
@@ -158,25 +251,10 @@
}
}
/* Thin Scrollbar - Theme Aware */
.thin-scrollbar {
scrollbar-width: thin;
scrollbar-color: #303032 transparent;
}
.thin-scrollbar::-webkit-scrollbar {
height: 6px;
width: 6px;
}
.thin-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.thin-scrollbar::-webkit-scrollbar-thumb {
background-color: #303032;
border-radius: 9999px;
border: 2px solid transparent;
background-clip: content-box;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.thin-scrollbar::-webkit-scrollbar {
@@ -185,19 +263,38 @@
}
.thin-scrollbar::-webkit-scrollbar-track {
background: #18181b;
background: var(--scrollbar-track);
}
.thin-scrollbar::-webkit-scrollbar-thumb {
background: #434345;
background: var(--scrollbar-thumb);
border-radius: 3px;
}
.thin-scrollbar::-webkit-scrollbar-thumb:hover {
background: #5a5a5d;
background: var(--scrollbar-thumb-hover);
}
.thin-scrollbar {
/* Skinny scrollbar - even thinner variant */
.skinny-scrollbar {
scrollbar-width: thin;
scrollbar-color: #434345 #18181b;
scrollbar-color: var(--scrollbar-thumb) transparent;
}
.skinny-scrollbar::-webkit-scrollbar {
width: 4px;
height: 4px;
}
.skinny-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.skinny-scrollbar::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: 2px;
}
.skinny-scrollbar::-webkit-scrollbar-thumb:hover {
background: var(--scrollbar-thumb-hover);
}

6
src/main.tsx
View File

@@ -79,13 +79,13 @@ function RootApp() {
<div
className="fixed inset-0 pointer-events-none"
style={{
backgroundColor: "#09090b",
backgroundColor: "var(--bg-base)",
backgroundImage: `linear-gradient(
135deg,
transparent 0%,
transparent 49%,
rgba(255, 255, 255, 0.03) 49%,
rgba(255, 255, 255, 0.03) 51%,
rgba(128, 128, 128, 0.03) 49%,
rgba(128, 128, 128, 0.03) 51%,
transparent 51%,
transparent 100%
)`,

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

@@ -14,6 +14,7 @@ import { UserProfile } from "@/ui/desktop/user/UserProfile.tsx";
import { Toaster } from "@/components/ui/sonner.tsx";
import { CommandPalette } from "@/ui/desktop/apps/command-palette/CommandPalette.tsx";
import { getUserInfo } from "@/ui/main-axios.ts";
import { useTheme } from "@/components/theme-provider";
function AppContent() {
const [isAuthenticated, setIsAuthenticated] = useState(false);
@@ -30,11 +31,16 @@ function AppContent() {
>("idle");
const { currentTab, tabs } = useTabs();
const [isCommandPaletteOpen, setIsCommandPaletteOpen] = useState(false);
const { theme, setTheme } = useTheme();
const [rightSidebarOpen, setRightSidebarOpen] = useState(false);
const [rightSidebarWidth, setRightSidebarWidth] = useState(400);
const lastShiftPressTime = useRef(0);
// DEBUG: Theme toggle - double-tap left Alt/Option to toggle light/dark mode
// Comment out the next line and the AltLeft handler below to disable
const lastAltPressTime = useRef(0);
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.code === "ShiftLeft") {
@@ -49,6 +55,26 @@ function AppContent() {
lastShiftPressTime.current = now;
}
}
// DEBUG: Double-tap left Alt/Option to toggle light/dark theme
// Remove or comment out this block for production
/* DEBUG_THEME_TOGGLE_START */
if (event.code === "AltLeft" && !event.repeat) {
const now = Date.now();
if (now - lastAltPressTime.current < 300) {
// Use setTheme to properly update React state (not just DOM class)
const currentIsDark = theme === "dark" ||
(theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);
const newTheme = currentIsDark ? "light" : "dark";
setTheme(newTheme);
console.log("[DEBUG] Theme toggled:", newTheme);
lastAltPressTime.current = 0;
} else {
lastAltPressTime.current = now;
}
}
/* DEBUG_THEME_TOGGLE_END */
if (event.key === "Escape") {
setIsCommandPaletteOpen(false);
}
@@ -58,7 +84,7 @@ function AppContent() {
return () => {
window.removeEventListener("keydown", handleKeyDown);
};
}, []);
}, [theme, setTheme]);
useEffect(() => {
const checkAuth = () => {
@@ -166,7 +192,7 @@ function AppContent() {
if (authLoading) {
return (
<div
className="h-screen w-screen flex items-center justify-center bg-dark-bg-darkest"
className="h-screen w-screen flex items-center justify-center bg-deepest"
style={{
backgroundImage: `repeating-linear-gradient(
225deg,
@@ -259,7 +285,7 @@ function AppContent() {
)}
{showProfile && (
<div className="h-screen w-full visible pointer-events-auto static overflow-auto">
<div className="h-screen w-full visible pointer-events-auto static overflow-auto thin-scrollbar">
<UserProfile
isTopbarOpen={isTopbarOpen}
rightSidebarOpen={rightSidebarOpen}

96
src/ui/desktop/admin/AdminSettings.tsx
View File

@@ -750,7 +750,7 @@ export function AdminSettings({
return (
<div
style={wrapperStyle}
className="bg-dark-bg text-white rounded-lg border-2 border-dark-border overflow-hidden"
className="bg-canvas text-foreground rounded-lg border-2 border-edge overflow-hidden"
>
<div className="h-full w-full flex flex-col">
<div className="flex items-center justify-between px-3 pt-2 pb-2">
@@ -758,69 +758,69 @@ export function AdminSettings({
</div>
<Separator className="p-0.25 w-full" />
<div className="px-6 py-4 overflow-auto">
<div className="px-6 py-4 overflow-auto thin-scrollbar">
<Tabs defaultValue="registration" className="w-full">
<TabsList className="mb-4 bg-dark-bg border-2 border-dark-border">
<TabsList className="mb-4 bg-elevated border-2 border-edge">
<TabsTrigger
value="registration"
className="flex items-center gap-2"
className="flex items-center gap-2 bg-elevated data-[state=active]:bg-button data-[state=active]:border data-[state=active]:border-edge"
>
<Users className="h-4 w-4" />
{t("admin.general")}
</TabsTrigger>
<TabsTrigger value="oidc" className="flex items-center gap-2">
<TabsTrigger value="oidc" className="flex items-center gap-2 bg-elevated data-[state=active]:bg-button data-[state=active]:border data-[state=active]:border-edge">
<Shield className="h-4 w-4" />
OIDC
</TabsTrigger>
<TabsTrigger value="users" className="flex items-center gap-2">
<TabsTrigger value="users" className="flex items-center gap-2 bg-elevated data-[state=active]:bg-button data-[state=active]:border data-[state=active]:border-edge">
<Users className="h-4 w-4" />
{t("admin.users")}
</TabsTrigger>
<TabsTrigger value="sessions" className="flex items-center gap-2">
<TabsTrigger value="sessions" className="flex items-center gap-2 bg-elevated data-[state=active]:bg-button data-[state=active]:border data-[state=active]:border-edge">
<Clock className="h-4 w-4" />
Sessions
</TabsTrigger>
<TabsTrigger value="roles" className="flex items-center gap-2">
<TabsTrigger value="roles" className="flex items-center gap-2 bg-elevated data-[state=active]:bg-button data-[state=active]:border data-[state=active]:border-edge">
<Shield className="h-4 w-4" />
{t("rbac.roles.label")}
</TabsTrigger>
<TabsTrigger value="security" className="flex items-center gap-2">
<TabsTrigger value="security" className="flex items-center gap-2 bg-elevated data-[state=active]:bg-button data-[state=active]:border data-[state=active]:border-edge">
<Database className="h-4 w-4" />
{t("admin.databaseSecurity")}
</TabsTrigger>
</TabsList>
<TabsContent value="registration" className="space-y-6">
<div className="space-y-4">
<div className="rounded-lg border-2 border-border bg-card p-4 space-y-4">
<h3 className="text-lg font-semibold">
{t("admin.userRegistration")}
</h3>
<label className="flex items-center gap-2">
<Checkbox
checked={allowRegistration}
onCheckedChange={handleToggleRegistration}
disabled={regLoading || !allowPasswordLogin}
/>
{t("admin.allowNewAccountRegistration")}
{!allowPasswordLogin && (
<span className="text-xs text-muted-foreground">
({t("admin.requiresPasswordLogin")})
</span>
)}
</label>
<label className="flex items-center gap-2">
<Checkbox
checked={allowPasswordLogin}
onCheckedChange={handleTogglePasswordLogin}
disabled={passwordLoginLoading}
/>
{t("admin.allowPasswordLogin")}
</label>
<label className="flex items-center gap-2">
<Checkbox
checked={allowRegistration}
onCheckedChange={handleToggleRegistration}
disabled={regLoading || !allowPasswordLogin}
/>
{t("admin.allowNewAccountRegistration")}
{!allowPasswordLogin && (
<span className="text-xs text-muted-foreground">
({t("admin.requiresPasswordLogin")})
</span>
)}
</label>
<label className="flex items-center gap-2">
<Checkbox
checked={allowPasswordLogin}
onCheckedChange={handleTogglePasswordLogin}
disabled={passwordLoginLoading}
/>
{t("admin.allowPasswordLogin")}
</label>
</div>
</TabsContent>
<TabsContent value="oidc" className="space-y-6">
<div className="space-y-3">
<div className="rounded-lg border-2 border-border bg-card p-4 space-y-3">
<h3 className="text-lg font-semibold">
{t("admin.externalAuthentication")}
</h3>
@@ -1075,7 +1075,7 @@ export function AdminSettings({
</TabsContent>
<TabsContent value="users" className="space-y-6">
<div className="space-y-4">
<div className="rounded-lg border-2 border-border bg-card p-4 space-y-4">
<div className="flex items-center justify-between">
<h3 className="text-lg font-semibold">
{t("admin.userManagement")}
@@ -1187,7 +1187,7 @@ export function AdminSettings({
</TabsContent>
<TabsContent value="sessions" className="space-y-6">
<div className="space-y-4">
<div className="rounded-lg border-2 border-border bg-card p-4 space-y-4">
<div className="flex items-center justify-between">
<h3 className="text-lg font-semibold">{t("admin.sessionManagement")}</h3>
<Button
@@ -1247,7 +1247,7 @@ export function AdminSettings({
session.isRevoked ? "opacity-50" : undefined
}
>
<TableCell>
<TableCell className="px-4">
<div className="flex items-center gap-2">
<DeviceIcon className="h-4 w-4" />
<div className="flex flex-col">
@@ -1262,19 +1262,19 @@ export function AdminSettings({
</div>
</div>
</TableCell>
<TableCell>
<TableCell className="px-4">
{session.username || session.userId}
</TableCell>
<TableCell className="text-sm text-muted-foreground">
<TableCell className="px-4 text-sm text-muted-foreground">
{formatDate(createdDate)}
</TableCell>
<TableCell className="text-sm text-muted-foreground">
<TableCell className="px-4 text-sm text-muted-foreground">
{formatDate(lastActiveDate)}
</TableCell>
<TableCell className="text-sm text-muted-foreground">
<TableCell className="px-4 text-sm text-muted-foreground">
{formatDate(expiresDate)}
</TableCell>
<TableCell>
<TableCell className="px-4">
<div className="flex gap-2">
<Button
variant="ghost"
@@ -1318,15 +1318,13 @@ export function AdminSettings({
</TabsContent>
<TabsContent value="security" className="space-y-6">
<div className="space-y-4">
<div className="flex items-center gap-3">
<h3 className="text-lg font-semibold">
{t("admin.databaseSecurity")}
</h3>
</div>
<div className="rounded-lg border-2 border-border bg-card p-4 space-y-4">
<h3 className="text-lg font-semibold">
{t("admin.databaseSecurity")}
</h3>
<div className="grid gap-3 md:grid-cols-2">
<div className="p-4 border rounded-lg bg-dark-bg-panel">
<div className="p-4 border rounded-lg bg-surface">
<div className="space-y-3">
<div className="flex items-center gap-2">
<Download className="h-4 w-4 text-blue-500" />
@@ -1377,7 +1375,7 @@ export function AdminSettings({
</div>
</div>
<div className="p-4 border rounded-lg bg-dark-bg-panel">
<div className="p-4 border rounded-lg bg-surface">
<div className="space-y-3">
<div className="flex items-center gap-2">
<Upload className="h-4 w-4 text-green-500" />
@@ -1457,7 +1455,7 @@ export function AdminSettings({
open={linkAccountAlertOpen}
onOpenChange={setLinkAccountAlertOpen}
>
<DialogContent className="sm:max-w-[500px] bg-dark-bg border-2 border-dark-border">
<DialogContent className="sm:max-w-[500px] bg-canvas border-2 border-edge">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<Link2 className="w-5 h-5" />

6
src/ui/desktop/admin/RoleManagement.tsx
View File

@@ -482,7 +482,7 @@ export function RoleManagement(): React.ReactElement {
<Command>
<CommandInput placeholder={t("rbac.searchUsers")} />
<CommandEmpty>{t("rbac.noUserFound")}</CommandEmpty>
<CommandGroup className="max-h-[300px] overflow-y-auto">
<CommandGroup className="max-h-[300px] overflow-y-auto thin-scrollbar">
{users.map((user) => (
<CommandItem
key={user.id}
@@ -519,7 +519,7 @@ export function RoleManagement(): React.ReactElement {
{t("rbac.noRolesAssigned")}
</p>
) : (
<div className="space-y-2 max-h-[40vh] overflow-y-auto pr-2">
<div className="space-y-2 max-h-[40vh] overflow-y-auto thin-scrollbar pr-2">
{userRoles.map((userRole, index) => (
<div
key={index}
@@ -592,7 +592,7 @@ export function RoleManagement(): React.ReactElement {
<Command>
<CommandInput placeholder={t("rbac.searchRoles")} />
<CommandEmpty>{t("rbac.noRoleFound")}</CommandEmpty>
<CommandGroup className="max-h-[300px] overflow-y-auto">
<CommandGroup className="max-h-[300px] overflow-y-auto thin-scrollbar">
{roles
.filter(
(role) =>

2
src/ui/desktop/admin/UserEditDialog.tsx
View File

@@ -365,7 +365,7 @@ export function UserEditDialog({
</DialogDescription>
</DialogHeader>
<div className="space-y-6 py-4 max-h-[70vh] overflow-y-auto pr-2">
<div className="space-y-6 py-4 max-h-[70vh] overflow-y-auto thin-scrollbar pr-2">
{/* READ-ONLY INFO SECTION */}
<div className="grid grid-cols-2 gap-4 p-4 bg-dark-bg-panel rounded-lg border border-dark-border">
<div>

16
src/ui/desktop/apps/command-palette/CommandPalette.tsx
View File

@@ -239,7 +239,7 @@ export function CommandPalette({
>
<Command
className={cn(
"w-3/4 max-w-2xl max-h-[60vh] rounded-lg border-2 border-dark-border shadow-md flex flex-col",
"w-3/4 max-w-2xl max-h-[60vh] rounded-lg border-2 border-edge shadow-md flex flex-col",
"transition-all duration-200 ease-out",
!isOpen && "scale-95 opacity-0",
)}
@@ -251,7 +251,7 @@ export function CommandPalette({
/>
<CommandList
key={recentActivity.length}
className="w-full h-auto flex-grow overflow-y-auto"
className="w-full h-auto flex-grow overflow-y-auto thin-scrollbar"
style={{ maxHeight: "inherit" }}
>
{recentActivity.length > 0 && (
@@ -324,7 +324,7 @@ export function CommandPalette({
<DropdownMenuTrigger asChild>
<Button
variant="outline"
className="!px-2 h-7 border-1 border-dark-border"
className="!px-2 h-7 border-1 border-edge"
onClick={(e) => e.stopPropagation()}
>
<EllipsisVertical className="h-3 w-3" />
@@ -333,14 +333,14 @@ export function CommandPalette({
<DropdownMenuContent
align="end"
side="right"
className="w-56 bg-dark-bg border-dark-border text-white"
className="w-56 bg-canvas border-edge text-foreground"
>
<DropdownMenuItem
onClick={(e) => {
e.stopPropagation();
handleHostServerDetailsClick(host);
}}
className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-dark-hover text-gray-300"
className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-hover text-foreground-secondary"
>
<Server className="h-4 w-4" />
<span className="flex-1">
@@ -352,7 +352,7 @@ export function CommandPalette({
e.stopPropagation();
handleHostFileManagerClick(host);
}}
className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-dark-hover text-gray-300"
className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-hover text-foreground-secondary"
>
<FolderOpen className="h-4 w-4" />
<span className="flex-1">
@@ -364,7 +364,7 @@ export function CommandPalette({
e.stopPropagation();
handleHostEditClick(host);
}}
className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-dark-hover text-gray-300"
className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-hover text-foreground-secondary"
>
<Pencil className="h-4 w-4" />
<span className="flex-1">
@@ -400,7 +400,7 @@ export function CommandPalette({
</CommandItem>
</CommandGroup>
</CommandList>
<div className="border-t border-dark-border px-4 py-2 bg-dark-hover/50 flex items-center justify-between text-xs text-muted-foreground">
<div className="border-t border-edge px-4 py-2 bg-hover/50 flex items-center justify-between text-xs text-muted-foreground">
<div className="flex items-center gap-2">
<span>{t("commandPalette.press")}</span>
<KbdGroup>

34
src/ui/desktop/apps/credentials/CredentialEditor.tsx
View File

@@ -32,7 +32,9 @@ import {
import { useTranslation } from "react-i18next";
import CodeMirror from "@uiw/react-codemirror";
import { oneDark } from "@codemirror/theme-one-dark";
import { githubLight } from "@uiw/codemirror-theme-github";
import { EditorView } from "@codemirror/view";
import { useTheme } from "@/components/theme-provider";
import type {
Credential,
CredentialEditorProps,
@@ -44,6 +46,14 @@ export function CredentialEditor({
onFormSubmit,
}: CredentialEditorProps) {
const { t } = useTranslation();
const { theme: appTheme } = useTheme();
// Determine CodeMirror theme based on app theme
const isDarkMode =
appTheme === "dark" ||
(appTheme === "system" &&
window.matchMedia("(prefers-color-scheme: dark)").matches);
const editorTheme = isDarkMode ? oneDark : githubLight;
const [, setCredentials] = useState<Credential[]>([]);
const [folders, setFolders] = useState<string[]>([]);
const [, setLoading] = useState(true);
@@ -473,11 +483,11 @@ export function CredentialEditor({
onValueChange={setActiveTab}
className="w-full"
>
<TabsList>
<TabsTrigger value="general">
<TabsList className="bg-button border border-edge-medium">
<TabsTrigger value="general" className="bg-button data-[state=active]:bg-elevated data-[state=active]:border data-[state=active]:border-edge-medium">
{t("credentials.general")}
</TabsTrigger>
<TabsTrigger value="authentication">
<TabsTrigger value="authentication" className="bg-button data-[state=active]:bg-elevated data-[state=active]:border data-[state=active]:border-edge-medium">
{t("credentials.authentication")}
</TabsTrigger>
</TabsList>
@@ -561,7 +571,7 @@ export function CredentialEditor({
{folderDropdownOpen && filteredFolders.length > 0 && (
<div
ref={folderDropdownRef}
className="absolute top-full left-0 z-50 mt-1 w-full bg-dark-bg border border-input rounded-md shadow-lg max-h-40 overflow-y-auto p-1"
className="absolute top-full left-0 z-50 mt-1 w-full bg-canvas border border-input rounded-md shadow-lg max-h-40 overflow-y-auto thin-scrollbar p-1"
>
<div className="grid grid-cols-1 gap-1 p-0">
{filteredFolders.map((folder) => (
@@ -590,7 +600,7 @@ export function CredentialEditor({
<FormItem className="col-span-10 overflow-visible">
<FormLabel>{t("credentials.tags")}</FormLabel>
<FormControl>
<div className="flex flex-wrap items-center gap-1 border border-input rounded-md px-3 py-2 bg-dark-bg-input focus-within:ring-2 ring-ring min-h-[40px]">
<div className="flex flex-wrap items-center gap-1 border border-input rounded-md px-3 py-2 bg-field focus-within:ring-2 ring-ring min-h-[40px]">
{(field.value || []).map(
(tag: string, idx: number) => (
<span
@@ -682,11 +692,11 @@ export function CredentialEditor({
}}
className="flex-1 flex flex-col h-full min-h-0"
>
<TabsList>
<TabsTrigger value="password">
<TabsList className="bg-button border border-edge-medium">
<TabsTrigger value="password" className="bg-button data-[state=active]:bg-elevated data-[state=active]:border data-[state=active]:border-edge-medium">
{t("credentials.password")}
</TabsTrigger>
<TabsTrigger value="key">
<TabsTrigger value="key" className="bg-button data-[state=active]:bg-elevated data-[state=active]:border data-[state=active]:border-edge-medium">
{t("credentials.key")}
</TabsTrigger>
</TabsList>
@@ -927,7 +937,7 @@ export function CredentialEditor({
placeholder={t(
"placeholders.pastePrivateKey",
)}
theme={oneDark}
theme={editorTheme}
className="border border-input rounded-md"
minHeight="120px"
basicSetup={{
@@ -943,6 +953,8 @@ export function CredentialEditor({
EditorView.theme({
".cm-scroller": {
overflow: "auto",
scrollbarWidth: "thin",
scrollbarColor: "var(--scrollbar-thumb) var(--scrollbar-track)",
},
}),
]}
@@ -1087,7 +1099,7 @@ export function CredentialEditor({
debouncedPublicKeyDetection(value);
}}
placeholder={t("placeholders.pastePublicKey")}
theme={oneDark}
theme={editorTheme}
className="border border-input rounded-md"
minHeight="120px"
basicSetup={{
@@ -1103,6 +1115,8 @@ export function CredentialEditor({
EditorView.theme({
".cm-scroller": {
overflow: "auto",
scrollbarWidth: "thin",
scrollbarColor: "var(--scrollbar-thumb) var(--scrollbar-track)",
},
}),
]}

2
src/ui/desktop/apps/credentials/CredentialSelector.tsx
View File

@@ -165,7 +165,7 @@ export function CredentialSelector({
/>
</div>
<div className="max-h-60 overflow-y-auto p-2">
<div className="max-h-60 overflow-y-auto thin-scrollbar p-2">
{loading ? (
<div className="p-3 text-center text-sm text-muted-foreground">
{t("common.loading")}

2
src/ui/desktop/apps/credentials/CredentialViewer.tsx
View File

@@ -184,7 +184,7 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
return (
<Sheet open={true} onOpenChange={onClose}>
<SheetContent className="w-[600px] max-w-[50vw] overflow-y-auto">
<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">

6
src/ui/desktop/apps/credentials/CredentialsManager.tsx
View File

@@ -603,7 +603,7 @@ export function CredentialsManager({
handleDragStart(e, credential)
}
onDragEnd={handleDragEnd}
className={`bg-dark-bg-input border border-input rounded-lg cursor-pointer hover:shadow-lg hover:border-blue-400/50 hover:bg-dark-hover-alt transition-all duration-200 p-3 group relative ${
className={`bg-field border border-input rounded-lg cursor-pointer hover:shadow-lg hover:border-blue-400/50 hover:bg-hover-alt transition-all duration-200 p-3 group relative ${
draggedCredential?.id === credential.id
? "opacity-50 scale-95"
: ""
@@ -808,7 +808,7 @@ export function CredentialsManager({
)}
<Sheet open={showDeployDialog} onOpenChange={setShowDeployDialog}>
<SheetContent className="w-[500px] max-w-[50vw] overflow-y-auto bg-dark-bg">
<SheetContent className="w-[500px] max-w-[50vw] overflow-y-auto thin-scrollbar bg-canvas">
<div className="px-4 py-4">
<div className="space-y-3 pb-4">
<div className="flex items-center space-x-3">
@@ -917,7 +917,7 @@ export function CredentialsManager({
? t("credentials.noHostsAvailable")
: t("credentials.noHostsMatchSearch")}
</CommandEmpty>
<CommandGroup className="max-h-[300px] overflow-y-auto">
<CommandGroup className="max-h-[300px] overflow-y-auto thin-scrollbar">
{availableHosts.map((host) => (
<CommandItem
key={host.id}

52
src/ui/desktop/apps/dashboard/Dashboard.tsx
View File

@@ -382,7 +382,7 @@ export function Dashboard({
</div>
) : (
<div
className="bg-dark-bg text-white rounded-lg border-2 border-dark-border overflow-hidden flex min-w-0"
className="bg-canvas text-foreground rounded-lg border-2 border-edge overflow-hidden flex min-w-0"
style={{
marginLeft: leftMarginPx,
marginRight: rightSidebarOpen
@@ -397,7 +397,7 @@ export function Dashboard({
>
<div className="flex flex-col relative z-10 w-full h-full min-w-0">
<div className="flex flex-row items-center justify-between w-full px-3 mt-3 min-w-0 flex-wrap gap-2">
<div className="text-2xl text-white font-semibold shrink-0">
<div className="text-2xl text-foreground font-semibold shrink-0">
{t("dashboard.title")}
</div>
<div className="flex flex-row gap-3 flex-wrap min-w-0">
@@ -458,18 +458,17 @@ export function Dashboard({
<div className="flex flex-col flex-1 my-5 mx-5 gap-4 min-h-0 min-w-0">
<div className="flex flex-row flex-1 gap-4 min-h-0 min-w-0">
<div className="flex-1 min-w-0 border-2 border-dark-border rounded-md bg-dark-bg-darker flex flex-col overflow-hidden">
<div className="flex flex-col mx-3 my-2 overflow-y-auto overflow-x-hidden">
<div className="flex-1 min-w-0 border-2 border-edge rounded-md bg-elevated flex flex-col overflow-hidden transition-all duration-150 hover:border-primary/20">
<div className="flex flex-col mx-3 my-2 overflow-y-auto overflow-x-hidden thin-scrollbar">
<p className="text-xl font-semibold mb-3 mt-1 flex flex-row items-center">
<Server className="mr-3" />
{t("dashboard.serverOverview")}
</p>
<div className="bg-dark-bg w-full h-auto border-2 border-dark-border rounded-md px-3 py-3">
<div className="bg-canvas w-full h-auto border-2 border-edge rounded-md px-3 py-3">
<div className="flex flex-row items-center justify-between mb-3 min-w-0 gap-2">
<div className="flex flex-row items-center min-w-0">
<History
size={20}
color="#FFFFFF"
className="shrink-0"
/>
<p className="ml-2 leading-none truncate">
@@ -484,7 +483,7 @@ export function Dashboard({
<Button
variant="outline"
size="sm"
className={`ml-2 text-sm border-1 border-dark-border ${versionStatus === "up_to_date" ? "text-green-400" : "text-yellow-400"}`}
className={`ml-2 text-sm border-1 border-edge ${versionStatus === "up_to_date" ? "text-green-400" : "text-yellow-400"}`}
>
{versionStatus === "up_to_date"
? t("dashboard.upToDate")
@@ -498,7 +497,6 @@ export function Dashboard({
<div className="flex flex-row items-center min-w-0">
<Clock
size={20}
color="#FFFFFF"
className="shrink-0"
/>
<p className="ml-2 leading-none truncate">
@@ -517,7 +515,6 @@ export function Dashboard({
<div className="flex flex-row items-center min-w-0">
<Database
size={20}
color="#FFFFFF"
className="shrink-0"
/>
<p className="ml-2 leading-none truncate">
@@ -537,11 +534,10 @@ export function Dashboard({
</div>
</div>
<div className="flex flex-col grid grid-cols-2 gap-2 mt-2">
<div className="flex flex-row items-center justify-between bg-dark-bg w-full h-auto mt-3 border-2 border-dark-border rounded-md px-3 py-3 min-w-0 gap-2">
<div className="flex flex-row items-center justify-between bg-canvas w-full h-auto mt-3 border-2 border-edge rounded-md px-3 py-3 min-w-0 gap-2">
<div className="flex flex-row items-center min-w-0">
<Server
size={16}
color="#FFFFFF"
className="mr-3 shrink-0"
/>
<p className="m-0 leading-none truncate">
@@ -552,11 +548,10 @@ export function Dashboard({
{totalServers}
</p>
</div>
<div className="flex flex-row items-center justify-between bg-dark-bg w-full h-auto mt-3 border-2 border-dark-border rounded-md px-3 py-3 min-w-0 gap-2">
<div className="flex flex-row items-center justify-between bg-canvas w-full h-auto mt-3 border-2 border-edge rounded-md px-3 py-3 min-w-0 gap-2">
<div className="flex flex-row items-center min-w-0">
<Network
size={16}
color="#FFFFFF"
className="mr-3 shrink-0"
/>
<p className="m-0 leading-none truncate">
@@ -569,11 +564,10 @@ export function Dashboard({
</div>
</div>
<div className="flex flex-col grid grid-cols-2 gap-2 mt-2">
<div className="flex flex-row items-center justify-between bg-dark-bg w-full h-auto mt-3 border-2 border-dark-border rounded-md px-3 py-3 min-w-0 gap-2">
<div className="flex flex-row items-center justify-between bg-canvas w-full h-auto mt-3 border-2 border-edge rounded-md px-3 py-3 min-w-0 gap-2">
<div className="flex flex-row items-center min-w-0">
<Key
size={16}
color="#FFFFFF"
className="mr-3 shrink-0"
/>
<p className="m-0 leading-none truncate">
@@ -587,7 +581,7 @@ export function Dashboard({
</div>
</div>
</div>
<div className="flex-1 min-w-0 border-2 border-dark-border rounded-md bg-dark-bg-darker flex flex-col overflow-hidden transition-all duration-150 hover:border-primary/20">
<div className="flex-1 min-w-0 border-2 border-edge rounded-md bg-elevated flex flex-col overflow-hidden transition-all duration-150 hover:border-primary/20">
<div className="flex flex-col mx-3 my-2 flex-1 overflow-hidden">
<div className="flex flex-row items-center justify-between mb-3 mt-1">
<p className="text-xl font-semibold flex flex-row items-center">
@@ -597,14 +591,14 @@ export function Dashboard({
<Button
variant="outline"
size="sm"
className="border-2 !border-dark-border h-7"
className="border-2 !border-edge h-7"
onClick={handleResetActivity}
>
{t("dashboard.reset")}
</Button>
</div>
<div
className={`grid gap-4 grid-cols-3 auto-rows-min overflow-x-hidden ${recentActivityLoading ? "overflow-y-hidden" : "overflow-y-auto"}`}
className={`grid gap-4 grid-cols-3 auto-rows-min overflow-x-hidden thin-scrollbar ${recentActivityLoading ? "overflow-y-hidden" : "overflow-y-auto"}`}
>
{recentActivityLoading ? (
<div className="flex flex-row items-center text-muted-foreground text-sm animate-pulse">
@@ -632,7 +626,7 @@ export function Dashboard({
<Button
key={item.id}
variant="outline"
className="border-2 !border-dark-border bg-dark-bg min-w-0"
className="border-2 !border-edge bg-canvas min-w-0"
onClick={() => handleActivityClick(item)}
>
{item.type === "terminal" ? (
@@ -651,16 +645,16 @@ export function Dashboard({
</div>
</div>
<div className="flex flex-row flex-1 gap-4 min-h-0 min-w-0">
<div className="flex-1 min-w-0 border-2 border-dark-border rounded-md bg-dark-bg-darker flex flex-col overflow-hidden transition-all duration-150 hover:border-primary/20">
<div className="flex flex-col mx-3 my-2 overflow-y-auto overflow-x-hidden">
<div className="flex-1 min-w-0 border-2 border-edge rounded-md bg-elevated flex flex-col overflow-hidden transition-all duration-150 hover:border-primary/20">
<div className="flex flex-col mx-3 my-2 overflow-y-auto overflow-x-hidden thin-scrollbar">
<p className="text-xl font-semibold mb-3 mt-1 flex flex-row items-center">
<FastForward className="mr-3" />
{t("dashboard.quickActions")}
</p>
<div className="grid gap-4 grid-cols-3 auto-rows-min overflow-y-auto overflow-x-hidden">
<div className="grid gap-4 grid-cols-3 auto-rows-min overflow-y-auto overflow-x-hidden thin-scrollbar">
<Button
variant="outline"
className="border-2 !border-dark-border flex flex-col items-center justify-center h-auto p-3 min-w-0"
className="border-2 !border-edge flex flex-col items-center justify-center h-auto p-3 min-w-0"
onClick={handleAddHost}
>
<Server
@@ -673,7 +667,7 @@ export function Dashboard({
</Button>
<Button
variant="outline"
className="border-2 !border-dark-border flex flex-col items-center justify-center h-auto p-3 min-w-0"
className="border-2 !border-edge flex flex-col items-center justify-center h-auto p-3 min-w-0"
onClick={handleAddCredential}
>
<Key
@@ -687,7 +681,7 @@ export function Dashboard({
{isAdmin && (
<Button
variant="outline"
className="border-2 !border-dark-border flex flex-col items-center justify-center h-auto p-3 min-w-0"
className="border-2 !border-edge flex flex-col items-center justify-center h-auto p-3 min-w-0"
onClick={handleOpenAdminSettings}
>
<Settings
@@ -701,7 +695,7 @@ export function Dashboard({
)}
<Button
variant="outline"
className="border-2 !border-dark-border flex flex-col items-center justify-center h-auto p-3 min-w-0"
className="border-2 !border-edge flex flex-col items-center justify-center h-auto p-3 min-w-0"
onClick={handleOpenUserProfile}
>
<User
@@ -715,14 +709,14 @@ export function Dashboard({
</div>
</div>
</div>
<div className="flex-1 min-w-0 border-2 border-dark-border rounded-md bg-dark-bg-darker flex flex-col overflow-hidden transition-all duration-150 hover:border-primary/20">
<div className="flex-1 min-w-0 border-2 border-edge rounded-md bg-elevated flex flex-col overflow-hidden transition-all duration-150 hover:border-primary/20">
<div className="flex flex-col mx-3 my-2 flex-1 overflow-hidden">
<p className="text-xl font-semibold mb-3 mt-1 flex flex-row items-center">
<ChartLine className="mr-3" />
{t("dashboard.serverStats")}
</p>
<div
className={`grid gap-4 grid-cols-3 auto-rows-min overflow-x-hidden ${serverStatsLoading ? "overflow-y-hidden" : "overflow-y-auto"}`}
className={`grid gap-4 grid-cols-3 auto-rows-min overflow-x-hidden thin-scrollbar ${serverStatsLoading ? "overflow-y-hidden" : "overflow-y-auto"}`}
>
{serverStatsLoading ? (
<div className="flex flex-row items-center text-muted-foreground text-sm animate-pulse">
@@ -738,7 +732,7 @@ export function Dashboard({
<Button
key={server.id}
variant="outline"
className="border-2 !border-dark-border bg-dark-bg h-auto p-3 min-w-0"
className="border-2 !border-edge bg-canvas h-auto p-3 min-w-0"
onClick={() =>
handleServerStatClick(server.id, server.name)
}

30
src/ui/desktop/apps/dashboard/apps/UpdateLog.tsx
View File

@@ -97,7 +97,7 @@ export function UpdateLog({ loggedIn }: UpdateLogProps) {
<Button
variant="outline"
size="sm"
className="ml-2 text-sm border-1 border-dark-border text-muted-foreground"
className="ml-2 text-sm border-1 border-edge text-muted-foreground"
onClick={() => setIsOpen(true)}
>
{t("common.updatesAndReleases")}
@@ -106,10 +106,10 @@ export function UpdateLog({ loggedIn }: UpdateLogProps) {
<Sheet open={isOpen} onOpenChange={setIsOpen}>
<SheetContent
side="right"
className="w-[500px] bg-dark-bg border-l-2 border-dark-border text-white sm:max-w-[500px] p-0 flex flex-col [&>button]:hidden"
className="w-[500px] bg-canvas border-l-2 border-edge text-foreground sm:max-w-[500px] p-0 flex flex-col [&>button]:hidden"
>
<div className="flex items-center justify-between p-4 border-b border-dark-border">
<h2 className="text-lg font-semibold text-white">
<div className="flex items-center justify-between p-4 border-b border-edge">
<h2 className="text-lg font-semibold text-foreground">
{t("common.updatesAndReleases")}
</h2>
<Button
@@ -123,13 +123,13 @@ export function UpdateLog({ loggedIn }: UpdateLogProps) {
</Button>
</div>
<div className="flex-1 overflow-y-auto p-4">
<div className="flex-1 overflow-y-auto p-4 thin-scrollbar">
{versionInfo && versionInfo.status === "requires_update" && (
<Alert className="bg-dark-bg-darker border-dark-border text-white mb-3">
<AlertTitle className="text-white">
<Alert className="bg-elevated border-edge text-foreground mb-3">
<AlertTitle className="text-foreground">
{t("common.updateAvailable")}
</AlertTitle>
<AlertDescription className="text-gray-300">
<AlertDescription className="text-foreground-secondary">
{t("common.newVersionAvailable", {
version: versionInfo.version,
})}
@@ -161,11 +161,11 @@ export function UpdateLog({ loggedIn }: UpdateLogProps) {
{releases?.items.map((release) => (
<div
key={release.id}
className="border border-dark-border rounded-lg p-3 hover:bg-dark-bg-darker transition-colors cursor-pointer bg-dark-bg-darker/50"
className="border border-edge rounded-lg p-3 hover:bg-elevated transition-colors cursor-pointer bg-elevated/50"
onClick={() => window.open(release.link, "_blank")}
>
<div className="flex items-start justify-between mb-2">
<h4 className="font-semibold text-sm leading-tight flex-1 text-white">
<h4 className="font-semibold text-sm leading-tight flex-1 text-foreground">
{release.title}
</h4>
{release.isPrerelease && (
@@ -175,11 +175,11 @@ export function UpdateLog({ loggedIn }: UpdateLogProps) {
)}
</div>
<p className="text-xs text-gray-300 mb-2 leading-relaxed">
<p className="text-xs text-foreground-secondary mb-2 leading-relaxed">
{formatDescription(release.description)}
</p>
<div className="flex items-center text-xs text-gray-400">
<div className="flex items-center text-xs text-muted-foreground">
<span>
{new Date(release.pubDate).toLocaleDateString()}
</span>
@@ -198,11 +198,11 @@ export function UpdateLog({ loggedIn }: UpdateLogProps) {
</div>
{releases && releases.items.length === 0 && !loading && (
<Alert className="bg-dark-bg-darker border-dark-border text-gray-300">
<AlertTitle className="text-gray-300">
<Alert className="bg-elevated border-edge text-foreground-secondary">
<AlertTitle className="text-foreground-secondary">
{t("common.noReleases")}
</AlertTitle>
<AlertDescription className="text-gray-400">
<AlertDescription className="text-muted-foreground">
{t("common.noReleasesFound")}
</AlertDescription>
</Alert>

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

@@ -78,7 +78,7 @@ export function ContainerDetail({
<TabsContent
value="logs"
className="flex-1 overflow-auto px-3 pb-3 mt-3"
className="flex-1 overflow-auto thin-scrollbar px-3 pb-3 mt-3"
>
<LogViewer
sessionId={sessionId}
@@ -89,7 +89,7 @@ export function ContainerDetail({
<TabsContent
value="stats"
className="flex-1 overflow-auto px-3 pb-3 mt-3"
className="flex-1 overflow-auto thin-scrollbar px-3 pb-3 mt-3"
>
<ContainerStats
sessionId={sessionId}

2
src/ui/desktop/apps/docker/components/ContainerList.tsx
View File

@@ -102,7 +102,7 @@ export function ContainerList({
</div>
</div>
) : (
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-3 overflow-auto pb-2">
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-3 overflow-auto thin-scrollbar pb-2">
{filteredContainers.map((container) => (
<ContainerCard
key={container.id}

2
src/ui/desktop/apps/docker/components/ContainerStats.tsx
View File

@@ -109,7 +109,7 @@ export function ContainerStats({
const memPercent = parseFloat(stats.memoryPercent) || 0;
return (
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 h-full overflow-auto">
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 h-full overflow-auto thin-scrollbar">
{/* CPU Usage */}
<Card className="py-3">
<CardHeader className="pb-2 px-4">

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

@@ -230,7 +230,7 @@ export function LogViewer({
<SimpleLoader size="lg" />
</div>
) : (
<div className="h-full overflow-auto">
<div className="h-full overflow-auto thin-scrollbar">
<pre className="p-4 text-xs font-mono whitespace-pre-wrap break-words text-gray-200 leading-relaxed">
{filteredLogs || (
<span className="text-gray-500">No logs available</span>

4
src/ui/desktop/apps/file-manager/DragIndicator.tsx
View File

@@ -79,7 +79,7 @@ export function DragIndicator({
<div
className={cn(
"fixed top-4 right-4 z-50 min-w-[300px] max-w-[400px]",
"bg-dark-bg border border-dark-border rounded-lg shadow-lg",
"bg-canvas border border-edge rounded-lg shadow-lg",
"p-4 transition-all duration-300 ease-in-out",
isVisible ? "opacity-100 translate-x-0" : "opacity-0 translate-x-full",
className,
@@ -109,7 +109,7 @@ export function DragIndicator({
</div>
{(isDownloading || isDragging) && !error && (
<div className="w-full bg-dark-border rounded-full h-2 mb-2">
<div className="w-full bg-border-base rounded-full h-2 mb-2">
<div
className={cn(
"h-2 rounded-full transition-all duration-300",

10
src/ui/desktop/apps/file-manager/FileManager.tsx
View File

@@ -1939,11 +1939,11 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
}
return (
<div className="h-full flex flex-col bg-dark-bg">
<div className="flex-shrink-0 border-b border-dark-border">
<div className="h-full flex flex-col bg-canvas">
<div className="flex-shrink-0 border-b border-edge">
<div className="flex items-center justify-between p-3">
<div className="flex items-center gap-2">
<h2 className="font-semibold text-white">{currentHost.name}</h2>
<h2 className="font-semibold text-foreground">{currentHost.name}</h2>
<span className="text-sm text-muted-foreground">
{currentHost.ip}:{currentHost.port}
</span>
@@ -1956,11 +1956,11 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
placeholder={t("fileManager.searchFiles")}
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-8 w-48 h-9 bg-dark-bg-button border-dark-border"
className="pl-8 w-48 h-9 bg-button border-edge"
/>
</div>
<div className="flex border border-dark-border rounded-md">
<div className="flex border border-edge rounded-md">
<Button
variant={viewMode === "grid" ? "default" : "ghost"}
size="sm"

6
src/ui/desktop/apps/file-manager/FileManagerContextMenu.tsx
View File

@@ -513,7 +513,7 @@ export function FileManagerContextMenu({
<div
data-context-menu
className={cn(
"fixed bg-dark-bg border border-dark-border rounded-lg shadow-xl min-w-[180px] max-w-[250px] z-[99995] overflow-hidden",
"fixed bg-canvas border border-edge rounded-lg shadow-xl min-w-[180px] max-w-[250px] z-[99995] overflow-hidden",
)}
style={{
left: menuPosition.x,
@@ -525,7 +525,7 @@ export function FileManagerContextMenu({
return (
<div
key={`separator-${index}`}
className="border-t border-dark-border"
className="border-t border-edge"
/>
);
}
@@ -535,7 +535,7 @@ export function FileManagerContextMenu({
key={index}
className={cn(
"w-full px-3 py-2 text-left text-sm flex items-center justify-between",
"hover:bg-dark-hover transition-colors",
"hover:bg-hover transition-colors",
"first:rounded-t-lg last:rounded-b-lg",
item.disabled && "opacity-50 cursor-not-allowed",
item.danger && "text-red-400 hover:bg-red-500/10",

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

@@ -873,14 +873,14 @@ export function FileManagerGrid({
]);
return (
<div className="h-full flex flex-col bg-dark-bg overflow-hidden relative">
<div className="flex-shrink-0 border-b border-dark-border">
<div className="flex items-center gap-1 p-2 border-b border-dark-border">
<div className="h-full flex flex-col bg-canvas overflow-hidden relative">
<div className="flex-shrink-0 border-b border-edge">
<div className="flex items-center gap-1 p-2 border-b border-edge">
<button
onClick={goBack}
disabled={historyIndex <= 0}
className={cn(
"p-1 rounded hover:bg-dark-hover",
"p-1 rounded hover:bg-hover",
historyIndex <= 0 && "opacity-50 cursor-not-allowed",
)}
title={t("common.back")}
@@ -891,7 +891,7 @@ export function FileManagerGrid({
onClick={goForward}
disabled={historyIndex >= navigationHistory.length - 1}
className={cn(
"p-1 rounded hover:bg-dark-hover",
"p-1 rounded hover:bg-hover",
historyIndex >= navigationHistory.length - 1 &&
"opacity-50 cursor-not-allowed",
)}
@@ -903,7 +903,7 @@ export function FileManagerGrid({
onClick={goUp}
disabled={currentPath === "/"}
className={cn(
"p-1 rounded hover:bg-dark-hover",
"p-1 rounded hover:bg-hover",
currentPath === "/" && "opacity-50 cursor-not-allowed",
)}
title={t("fileManager.parentDirectory")}
@@ -912,7 +912,7 @@ export function FileManagerGrid({
</button>
<button
onClick={onRefresh}
className="p-1 rounded hover:bg-dark-hover"
className="p-1 rounded hover:bg-hover"
title={t("common.refresh")}
>
<RefreshCw className="w-4 h-4" />
@@ -933,7 +933,7 @@ export function FileManagerGrid({
cancelEditingPath();
}
}}
className="flex-1 px-2 py-1 bg-dark-hover border border-dark-border rounded text-sm focus:outline-none focus:ring-1 focus:ring-primary"
className="flex-1 px-2 py-1 bg-hover border border-edge rounded text-sm focus:outline-none focus:ring-1 focus:ring-primary"
placeholder={t("fileManager.enterPath")}
autoFocus
/>
@@ -973,7 +973,7 @@ export function FileManagerGrid({
))}
<button
onClick={startEditingPath}
className="ml-2 p-1 rounded hover:bg-dark-hover opacity-60 hover:opacity-100 flex items-center justify-center"
className="ml-2 p-1 rounded hover:bg-hover opacity-60 hover:opacity-100 flex items-center justify-center"
title={t("fileManager.editPath")}
>
<Edit className="w-3 h-3" />
@@ -1246,7 +1246,7 @@ export function FileManagerGrid({
</div>
</div>
<div className="flex-shrink-0 border-t border-dark-border px-4 py-2 text-xs text-muted-foreground">
<div className="flex-shrink-0 border-t border-edge px-4 py-2 text-xs text-muted-foreground">
<div className="flex justify-between items-center">
<span>{t("fileManager.itemCount", { count: files.length })}</span>
{selectedFiles.length > 0 && (

22
src/ui/desktop/apps/file-manager/FileManagerSidebar.tsx
View File

@@ -375,9 +375,9 @@ export function FileManagerSidebar({
<div key={item.id}>
<div
className={cn(
"flex items-center gap-2 py-1.5 text-sm cursor-pointer hover:bg-dark-hover rounded",
"flex items-center gap-2 py-1.5 text-sm cursor-pointer hover:bg-hover rounded",
isActive && "bg-primary/20 text-primary",
"text-white",
"text-foreground",
)}
style={{ paddingLeft: `${12 + level * 16}px`, paddingRight: "12px" }}
onClick={() => handleItemClick(item)}
@@ -397,7 +397,7 @@ export function FileManagerSidebar({
e.stopPropagation();
toggleFolder(item.id, item.path);
}}
className="p-0.5 hover:bg-dark-hover rounded"
className="p-0.5 hover:bg-hover rounded"
>
{isExpanded ? (
<ChevronDown className="w-3 h-3" />
@@ -454,7 +454,7 @@ export function FileManagerSidebar({
return (
<>
<div className="h-full flex flex-col bg-dark-bg border-r border-dark-border">
<div className="h-full flex flex-col bg-canvas border-r border-edge">
<div className="flex-1 relative overflow-hidden">
<div className="absolute inset-1.5 overflow-y-auto thin-scrollbar space-y-4">
{renderSection(
@@ -475,7 +475,7 @@ export function FileManagerSidebar({
<div
className={cn(
hasQuickAccessItems && "pt-4 border-t border-dark-border",
hasQuickAccessItems && "pt-4 border-t border-edge",
)}
>
<div className="flex items-center gap-2 px-3 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider">
@@ -495,7 +495,7 @@ export function FileManagerSidebar({
<div className="fixed inset-0 z-40" />
<div
data-sidebar-context-menu
className="fixed bg-dark-bg border border-dark-border rounded-lg shadow-xl min-w-[160px] z-50 overflow-hidden"
className="fixed bg-canvas border border-edge rounded-lg shadow-xl min-w-[160px] z-50 overflow-hidden"
style={{
left: contextMenu.x,
top: contextMenu.y,
@@ -504,7 +504,7 @@ export function FileManagerSidebar({
{contextMenu.item.type === "recent" && (
<>
<button
className="w-full px-3 py-2 text-left text-sm flex items-center gap-3 hover:bg-dark-hover text-white first:rounded-t-lg last:rounded-b-lg"
className="w-full px-3 py-2 text-left text-sm flex items-center gap-3 hover:bg-hover text-foreground first:rounded-t-lg last:rounded-b-lg"
onClick={() => {
handleRemoveRecentFile(contextMenu.item!);
closeContextMenu();
@@ -519,9 +519,9 @@ export function FileManagerSidebar({
</button>
{recentItems.length > 1 && (
<>
<div className="border-t border-dark-border" />
<div className="border-t border-edge" />
<button
className="w-full px-3 py-2 text-left text-sm flex items-center gap-3 hover:bg-dark-hover text-red-400 hover:bg-red-500/10 first:rounded-t-lg last:rounded-b-lg"
className="w-full px-3 py-2 text-left text-sm flex items-center gap-3 hover:bg-hover text-red-400 hover:bg-red-500/10 first:rounded-t-lg last:rounded-b-lg"
onClick={() => {
handleClearAllRecent();
closeContextMenu();
@@ -541,7 +541,7 @@ export function FileManagerSidebar({
{contextMenu.item.type === "pinned" && (
<button
className="w-full px-3 py-2 text-left text-sm flex items-center gap-3 hover:bg-dark-hover text-white first:rounded-t-lg last:rounded-b-lg"
className="w-full px-3 py-2 text-left text-sm flex items-center gap-3 hover:bg-hover text-foreground first:rounded-t-lg last:rounded-b-lg"
onClick={() => {
handleUnpinFile(contextMenu.item!);
closeContextMenu();
@@ -556,7 +556,7 @@ export function FileManagerSidebar({
{contextMenu.item.type === "shortcut" && (
<button
className="w-full px-3 py-2 text-left text-sm flex items-center gap-3 hover:bg-dark-hover text-white first:rounded-t-lg last:rounded-b-lg"
className="w-full px-3 py-2 text-left text-sm flex items-center gap-3 hover:bg-hover text-foreground first:rounded-t-lg last:rounded-b-lg"
onClick={() => {
handleRemoveShortcut(contextMenu.item!);
closeContextMenu();

8
src/ui/desktop/apps/file-manager/components/CompressDialog.tsx
View File

@@ -71,7 +71,7 @@ export function CompressDialog({
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-[500px] bg-dark-bg border-2 border-dark-border">
<DialogContent className="sm:max-w-[500px] bg-canvas border-2 border-edge">
<DialogHeader>
<DialogTitle>{t("fileManager.compressFiles")}</DialogTitle>
<DialogDescription className="text-muted-foreground">
@@ -123,8 +123,8 @@ export function CompressDialog({
</Select>
</div>
<div className="rounded-md bg-dark-hover/50 border border-dark-border p-3">
<p className="text-sm text-gray-400 mb-2">
<div className="rounded-md bg-hover/50 border border-edge p-3">
<p className="text-sm text-muted-foreground mb-2">
{t("fileManager.selectedFiles")}:
</p>
<ul className="text-sm space-y-1">
@@ -134,7 +134,7 @@ export function CompressDialog({
</li>
))}
{fileNames.length > 5 && (
<li className="text-gray-400 italic">
<li className="text-muted-foreground italic">
{t("fileManager.andMoreFiles", {
count: fileNames.length - 5,
})}

8
src/ui/desktop/apps/file-manager/components/DiffViewer.tsx
View File

@@ -210,7 +210,7 @@ export function DiffViewer({
if (isLoading) {
return (
<div className="h-full flex items-center justify-center bg-dark-bg">
<div className="h-full flex items-center justify-center bg-canvas">
<div className="text-center">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-2"></div>
<p className="text-sm text-muted-foreground">
@@ -223,7 +223,7 @@ export function DiffViewer({
if (error) {
return (
<div className="h-full flex items-center justify-center bg-dark-bg">
<div className="h-full flex items-center justify-center bg-canvas">
<div className="text-center max-w-md">
<FileText className="w-16 h-16 mx-auto mb-4 text-red-500 opacity-50" />
<p className="text-red-500 mb-4">{error}</p>
@@ -237,8 +237,8 @@ export function DiffViewer({
}
return (
<div className="h-full flex flex-col bg-dark-bg">
<div className="flex-shrink-0 border-b border-dark-border p-3">
<div className="h-full flex flex-col bg-canvas">
<div className="flex-shrink-0 border-b border-edge p-3">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="text-sm">

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

@@ -133,14 +133,14 @@ function getLanguageIcon(filename: string): React.ReactNode {
yml: <SiYaml className="w-6 h-6 text-red-400" />,
toml: <SiToml className="w-6 h-6 text-orange-400" />,
sql: <SiMysql className="w-6 h-6 text-blue-500" />,
sh: <SiGnubash className="w-6 h-6 text-gray-700" />,
bash: <SiGnubash className="w-6 h-6 text-gray-700" />,
zsh: <SiShell className="w-6 h-6 text-gray-700" />,
sh: <SiGnubash className="w-6 h-6 text-foreground" />,
bash: <SiGnubash className="w-6 h-6 text-foreground" />,
zsh: <SiShell className="w-6 h-6 text-foreground" />,
vue: <SiVuedotjs className="w-6 h-6 text-green-500" />,
svelte: <SiSvelte className="w-6 h-6 text-orange-500" />,
md: <SiMarkdown className="w-6 h-6 text-gray-600" />,
conf: <SiShell className="w-6 h-6 text-gray-600" />,
ini: <Code className="w-6 h-6 text-gray-600" />,
md: <SiMarkdown className="w-6 h-6 text-muted-foreground" />,
conf: <SiShell className="w-6 h-6 text-muted-foreground" />,
ini: <Code className="w-6 h-6 text-muted-foreground" />,
};
return iconMap[ext] || <Code className="w-6 h-6 text-yellow-500" />;
@@ -238,7 +238,7 @@ function getFileType(filename: string): {
return {
type: "unknown",
icon: <FileIcon className="w-6 h-6" />,
color: "text-gray-500",
color: "text-foreground-subtle",
};
}
}
@@ -423,7 +423,7 @@ export function FileViewer({
<div className="h-full flex items-center justify-center">
<div className="text-center">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-4"></div>
<p className="text-sm text-gray-600">Loading file...</p>
<p className="text-sm text-muted-foreground">Loading file...</p>
</div>
</div>
);
@@ -812,6 +812,8 @@ export function FileViewer({
},
".cm-scroller": {
overflow: "auto",
scrollbarWidth: "thin",
scrollbarColor: "var(--scrollbar-thumb) var(--scrollbar-track)",
},
".cm-editor": {
height: "100%",
@@ -835,7 +837,7 @@ export function FileViewer({
}}
/>
) : (
<div className="h-full p-4 font-mono text-sm whitespace-pre-wrap overflow-auto bg-background text-foreground">
<div className="h-full p-4 font-mono text-sm whitespace-pre-wrap overflow-auto thin-scrollbar bg-background text-foreground">
{editedContent || content || t("fileManager.fileIsEmpty")}
</div>
)}
@@ -969,7 +971,7 @@ export function FileViewer({
</div>
</div>
<div className="flex-1 overflow-auto bg-muted/10">
<div className="flex-1 overflow-auto thin-scrollbar bg-muted/10">
<div className="p-4">
<ReactMarkdown
remarkPlugins={[remarkGfm]}
@@ -1041,7 +1043,7 @@ export function FileViewer({
</blockquote>
),
table: ({ children }) => (
<div className="mb-3 overflow-x-auto">
<div className="mb-3 overflow-x-auto thin-scrollbar">
<table className="min-w-full border border-border rounded-lg text-sm">
{children}
</table>
@@ -1084,7 +1086,7 @@ export function FileViewer({
</div>
</>
) : (
<div className="flex-1 overflow-auto p-6">
<div className="flex-1 overflow-auto thin-scrollbar p-6">
<div className="max-w-4xl mx-auto">
<ReactMarkdown
remarkPlugins={[remarkGfm]}
@@ -1154,7 +1156,7 @@ export function FileViewer({
</blockquote>
),
table: ({ children }) => (
<div className="mb-4 overflow-x-auto">
<div className="mb-4 overflow-x-auto thin-scrollbar">
<table className="min-w-full border border-border rounded-lg">
{children}
</table>
@@ -1252,7 +1254,7 @@ export function FileViewer({
</div>
</div>
<div className="flex-1 overflow-auto p-6 bg-gray-100 dark:bg-gray-900">
<div className="flex-1 overflow-auto thin-scrollbar p-6 bg-gray-100 dark:bg-gray-900">
<div className="flex justify-center">
{pdfError ? (
<div className="text-center text-muted-foreground p-8">

6
src/ui/desktop/apps/file-manager/components/PermissionsDialog.tsx
View File

@@ -140,7 +140,7 @@ export function PermissionsDialog({
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-[500px] bg-dark-bg border-2 border-dark-border">
<DialogContent className="sm:max-w-[500px] bg-canvas border-2 border-edge">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<Shield className="w-5 h-5" />
@@ -155,7 +155,7 @@ export function PermissionsDialog({
<div className="space-y-6 py-4">
<div className="grid grid-cols-2 gap-4 text-sm">
<div>
<Label className="text-gray-400">
<Label className="text-muted-foreground">
{t("fileManager.currentPermissions")}
</Label>
<p className="font-mono text-lg mt-1">
@@ -163,7 +163,7 @@ export function PermissionsDialog({
</p>
</div>
<div>
<Label className="text-gray-400">
<Label className="text-muted-foreground">
{t("fileManager.newPermissions")}
</Label>
<p className="font-mono text-lg mt-1">{octal}</p>

16
src/ui/desktop/apps/host-manager/HostManager.tsx
View File

@@ -98,7 +98,7 @@ export function HostManager({
<div>
<div className="w-full">
<div
className="bg-dark-bg text-white p-4 pt-0 rounded-lg border-2 border-dark-border flex flex-col min-h-0 overflow-hidden"
className="bg-canvas text-foreground p-4 pt-0 rounded-lg border-2 border-edge flex flex-col min-h-0 overflow-hidden"
style={{
marginLeft: leftMarginPx,
marginRight: rightSidebarOpen
@@ -116,22 +116,22 @@ export function HostManager({
onValueChange={handleTabChange}
className="flex-1 flex flex-col h-full min-h-0"
>
<TabsList className="bg-dark-bg border-2 border-dark-border mt-1.5">
<TabsTrigger value="host_viewer">
<TabsList className="bg-elevated border-2 border-edge mt-1.5">
<TabsTrigger value="host_viewer" className="bg-elevated data-[state=active]:bg-button data-[state=active]:border data-[state=active]:border-edge">
{t("hosts.hostViewer")}
</TabsTrigger>
<TabsTrigger value="add_host">
<TabsTrigger value="add_host" className="bg-elevated data-[state=active]:bg-button data-[state=active]:border data-[state=active]:border-edge">
{editingHost
? editingHost.id
? t("hosts.editHost")
: t("hosts.cloneHost")
: t("hosts.addHost")}
</TabsTrigger>
<div className="h-6 w-px bg-dark-border mx-1"></div>
<TabsTrigger value="credentials">
<div className="h-6 w-px bg-border-base mx-1"></div>
<TabsTrigger value="credentials" className="bg-elevated data-[state=active]:bg-button data-[state=active]:border data-[state=active]:border-edge">
{t("credentials.credentialsViewer")}
</TabsTrigger>
<TabsTrigger value="add_credential">
<TabsTrigger value="add_credential" className="bg-elevated data-[state=active]:bg-button data-[state=active]:border data-[state=active]:border-edge">
{editingCredential
? t("credentials.editCredential")
: t("credentials.addCredential")}
@@ -161,7 +161,7 @@ export function HostManager({
className="flex-1 flex flex-col h-full min-h-0"
>
<Separator className="p-0.25 -mt-0.5 mb-1" />
<div className="flex flex-col h-full min-h-0 overflow-auto">
<div className="flex flex-col h-full min-h-0 overflow-auto thin-scrollbar">
<CredentialsManager onEditCredential={handleEditCredential} />
</div>
</TabsContent>

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

@@ -140,7 +140,7 @@ function JumpHostItem({
<Command>
<CommandInput placeholder={t("hosts.searchServers")} />
<CommandEmpty>{t("hosts.noServerFound")}</CommandEmpty>
<CommandGroup className="max-h-[300px] overflow-y-auto">
<CommandGroup className="max-h-[300px] overflow-y-auto thin-scrollbar">
{hosts
.filter((h) => !editingHost || h.id !== editingHost.id)
.map((host) => (
@@ -246,7 +246,7 @@ function QuickActionItem({
<Command>
<CommandInput placeholder={t("hosts.searchSnippets")} />
<CommandEmpty>{t("hosts.noSnippetFound")}</CommandEmpty>
<CommandGroup className="max-h-[300px] overflow-y-auto">
<CommandGroup className="max-h-[300px] overflow-y-auto thin-scrollbar">
{snippets.map((snippet) => (
<CommandItem
key={snippet.id}
@@ -1159,19 +1159,19 @@ export function HostManagerEditor({
onValueChange={setActiveTab}
className="w-full"
>
<TabsList>
<TabsTrigger value="general">
<TabsList className="bg-button border border-edge-medium">
<TabsTrigger value="general" className="bg-button data-[state=active]:bg-elevated data-[state=active]:border data-[state=active]:border-edge-medium">
{t("hosts.general")}
</TabsTrigger>
<TabsTrigger value="terminal">
<TabsTrigger value="terminal" className="bg-button data-[state=active]:bg-elevated data-[state=active]:border data-[state=active]:border-edge-medium">
{t("hosts.terminal")}
</TabsTrigger>
<TabsTrigger value="docker">{t("hosts.docker")}</TabsTrigger>
<TabsTrigger value="tunnel">{t("hosts.tunnel")}</TabsTrigger>
<TabsTrigger value="file_manager">
<TabsTrigger value="docker" className="bg-button data-[state=active]:bg-elevated data-[state=active]:border data-[state=active]:border-edge-medium">Docker</TabsTrigger>
<TabsTrigger value="tunnel" className="bg-button data-[state=active]:bg-elevated data-[state=active]:border data-[state=active]:border-edge-medium">{t("hosts.tunnel")}</TabsTrigger>
<TabsTrigger value="file_manager" className="bg-button data-[state=active]:bg-elevated data-[state=active]:border data-[state=active]:border-edge-medium">
{t("hosts.fileManager")}
</TabsTrigger>
<TabsTrigger value="statistics">
<TabsTrigger value="statistics" className="bg-button data-[state=active]:bg-elevated data-[state=active]:border data-[state=active]:border-edge-medium">
{t("hosts.statistics")}
</TabsTrigger>
{!editingHost?.isShared && (
@@ -1307,7 +1307,7 @@ export function HostManagerEditor({
{folderDropdownOpen && filteredFolders.length > 0 && (
<div
ref={folderDropdownRef}
className="absolute top-full left-0 z-50 mt-1 w-full bg-dark-bg border border-input rounded-md shadow-lg max-h-40 overflow-y-auto p-1"
className="absolute top-full left-0 z-50 mt-1 w-full bg-canvas border border-input rounded-md shadow-lg max-h-40 overflow-y-auto thin-scrollbar p-1"
>
<div className="grid grid-cols-1 gap-1 p-0">
{filteredFolders.map((folder) => (
@@ -1336,7 +1336,7 @@ export function HostManagerEditor({
<FormItem className="col-span-10 overflow-visible">
<FormLabel>{t("hosts.tags")}</FormLabel>
<FormControl>
<div className="flex flex-wrap items-center gap-1 border border-input rounded-md px-3 py-2 bg-dark-bg-input focus-within:ring-2 ring-ring min-h-[40px]">
<div className="flex flex-wrap items-center gap-1 border border-input rounded-md px-3 py-2 bg-field focus-within:ring-2 ring-ring min-h-[40px]">
{field.value.map((tag: string, idx: number) => (
<span
key={tag + idx}
@@ -1443,15 +1443,15 @@ export function HostManagerEditor({
}}
className="flex-1 flex flex-col h-full min-h-0"
>
<TabsList>
<TabsTrigger value="password">
<TabsList className="bg-button border border-edge-medium">
<TabsTrigger value="password" className="bg-button data-[state=active]:bg-elevated data-[state=active]:border data-[state=active]:border-edge-medium">
{t("hosts.password")}
</TabsTrigger>
<TabsTrigger value="key">{t("hosts.key")}</TabsTrigger>
<TabsTrigger value="credential">
<TabsTrigger value="key" className="bg-button data-[state=active]:bg-elevated data-[state=active]:border data-[state=active]:border-edge-medium">{t("hosts.key")}</TabsTrigger>
<TabsTrigger value="credential" className="bg-button data-[state=active]:bg-elevated data-[state=active]:border data-[state=active]:border-edge-medium">
{t("hosts.credential")}
</TabsTrigger>
<TabsTrigger value="none">{t("hosts.none")}</TabsTrigger>
<TabsTrigger value="none" className="bg-button data-[state=active]:bg-elevated data-[state=active]:border data-[state=active]:border-edge-medium">{t("hosts.none")}</TabsTrigger>
</TabsList>
<TabsContent value="password">
<FormField
@@ -1573,6 +1573,8 @@ export function HostManagerEditor({
EditorView.theme({
".cm-scroller": {
overflow: "auto",
scrollbarWidth: "thin",
scrollbarColor: "var(--scrollbar-thumb) var(--scrollbar-track)",
},
}),
]}
@@ -1611,7 +1613,7 @@ export function HostManagerEditor({
ref={keyTypeButtonRef}
type="button"
variant="outline"
className="w-full justify-start text-left rounded-md px-2 py-2 bg-dark-bg border border-input text-foreground"
className="w-full justify-start text-left rounded-md px-2 py-2 bg-canvas border border-input text-foreground"
onClick={() =>
setKeyTypeDropdownOpen((open) => !open)
}
@@ -1623,7 +1625,7 @@ export function HostManagerEditor({
{keyTypeDropdownOpen && (
<div
ref={keyTypeDropdownRef}
className="absolute bottom-full left-0 z-50 mb-1 w-full bg-dark-bg border border-input rounded-md shadow-lg max-h-40 overflow-y-auto p-1"
className="absolute bottom-full left-0 z-50 mb-1 w-full bg-canvas border border-input rounded-md shadow-lg max-h-40 overflow-y-auto thin-scrollbar p-1"
>
<div className="grid grid-cols-1 gap-1 p-0">
{keyTypeOptions.map((opt) => (
@@ -1632,7 +1634,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-dark-bg 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-white/15 focus:bg-white/20 focus:outline-none"
onClick={() => {
field.onChange(opt.value);
setKeyTypeDropdownOpen(false);
@@ -1686,7 +1688,7 @@ export function HostManagerEditor({
control={form.control}
name="overrideCredentialUsername"
render={({ field }) => (
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 bg-elevated dark:bg-input/30">
<div className="space-y-0.5">
<FormLabel>
{t("hosts.overrideCredentialUsername")}
@@ -1732,7 +1734,7 @@ export function HostManagerEditor({
control={form.control}
name="forceKeyboardInteractive"
render={({ field }) => (
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 bg-elevated dark:bg-input/30">
<div className="space-y-0.5">
<FormLabel>
{t("hosts.forceKeyboardInteractive")}
@@ -2353,7 +2355,7 @@ export function HostManagerEditor({
control={form.control}
name="terminalConfig.cursorBlink"
render={({ field }) => (
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 bg-elevated dark:bg-input/30">
<div className="space-y-0.5">
<FormLabel>{t("hosts.cursorBlink")}</FormLabel>
<FormDescription>
@@ -2446,7 +2448,7 @@ export function HostManagerEditor({
control={form.control}
name="terminalConfig.rightClickSelectsWord"
render={({ field }) => (
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 bg-elevated dark:bg-input/30">
<div className="space-y-0.5">
<FormLabel>
{t("hosts.rightClickSelectsWord")}
@@ -2568,7 +2570,7 @@ export function HostManagerEditor({
control={form.control}
name="terminalConfig.agentForwarding"
render={({ field }) => (
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 bg-elevated dark:bg-input/30">
<div className="space-y-0.5">
<FormLabel>
{t("hosts.sshAgentForwarding")}
@@ -2666,7 +2668,7 @@ export function HostManagerEditor({
<CommandEmpty>
{t("hosts.noSnippetFound")}
</CommandEmpty>
<CommandGroup className="max-h-[300px] overflow-y-auto">
<CommandGroup className="max-h-[300px] overflow-y-auto thin-scrollbar">
<CommandItem
value="none"
onSelect={() => {
@@ -2727,7 +2729,7 @@ export function HostManagerEditor({
control={form.control}
name="terminalConfig.autoMosh"
render={({ field }) => (
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 bg-elevated dark:bg-input/30">
<div className="space-y-0.5">
<FormLabel>{t("hosts.autoMosh")}</FormLabel>
<FormDescription>
@@ -3152,7 +3154,7 @@ export function HostManagerEditor({
index
] = el;
}}
className="absolute top-full left-0 z-50 mt-1 w-full bg-dark-bg border border-input rounded-md shadow-lg max-h-40 overflow-y-auto p-1"
className="absolute top-full left-0 z-50 mt-1 w-full bg-canvas border border-input rounded-md shadow-lg max-h-40 overflow-y-auto thin-scrollbar p-1"
>
<div className="grid grid-cols-1 gap-1 p-0">
{getFilteredSshConfigs(
@@ -3364,7 +3366,7 @@ export function HostManagerEditor({
control={form.control}
name="statsConfig.statusCheckEnabled"
render={({ field }) => (
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 bg-elevated dark:bg-input/30">
<div className="space-y-0.5">
<FormLabel>
{t("hosts.statusCheckEnabled")}
@@ -3461,7 +3463,7 @@ export function HostManagerEditor({
control={form.control}
name="statsConfig.metricsEnabled"
render={({ field }) => (
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 bg-elevated dark:bg-input/30">
<div className="space-y-0.5">
<FormLabel>{t("hosts.metricsEnabled")}</FormLabel>
<FormDescription>

2
src/ui/desktop/apps/host-manager/HostManagerViewer.tsx
View File

@@ -1155,7 +1155,7 @@ export function HostManagerViewer({ onEditHost }: SSHManagerHostViewerProps) {
draggable
onDragStart={(e) => handleDragStart(e, host)}
onDragEnd={handleDragEnd}
className={`bg-dark-bg-input border border-input rounded-lg cursor-pointer hover:shadow-lg hover:border-blue-400/50 hover:bg-dark-hover-alt transition-all duration-200 p-3 group relative ${
className={`bg-field border border-input rounded-lg cursor-pointer hover:shadow-lg hover:border-blue-400/50 hover:bg-hover-alt transition-all duration-200 p-3 group relative ${
draggedHost?.id === host.id
? "opacity-50 scale-95"
: ""

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

@@ -343,7 +343,7 @@ export function HostSharingTab({
<Command>
<CommandInput placeholder={t("rbac.searchUsers")} />
<CommandEmpty>{t("rbac.noUserFound")}</CommandEmpty>
<CommandGroup className="max-h-[300px] overflow-y-auto">
<CommandGroup className="max-h-[300px] overflow-y-auto thin-scrollbar">
{availableUsers.map((user) => (
<CommandItem
key={user.id}
@@ -396,7 +396,7 @@ export function HostSharingTab({
<Command>
<CommandInput placeholder={t("rbac.searchRoles")} />
<CommandEmpty>{t("rbac.noRoleFound")}</CommandEmpty>
<CommandGroup className="max-h-[300px] overflow-y-auto">
<CommandGroup className="max-h-[300px] overflow-y-auto thin-scrollbar">
{roles.map((role) => (
<CommandItem
key={role.id}

8
src/ui/desktop/apps/host-manager/components/FolderEditDialog.tsx
View File

@@ -94,7 +94,7 @@ export function FolderEditDialog({
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-[500px] bg-dark-bg border-2 border-dark-border">
<DialogContent className="sm:max-w-[500px] bg-canvas border-2 border-edge">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<Folder className="w-5 h-5" />
@@ -119,7 +119,7 @@ export function FolderEditDialog({
className={`h-12 rounded-md border-2 transition-all hover:scale-105 ${
selectedColor === color.value
? "border-white shadow-lg scale-105"
: "border-dark-border"
: "border-edge"
}`}
style={{ backgroundColor: color.value }}
onClick={() => setSelectedColor(color.value)}
@@ -141,7 +141,7 @@ export function FolderEditDialog({
className={`h-14 rounded-md border-2 transition-all hover:scale-105 flex items-center justify-center ${
selectedIcon === value
? "border-primary bg-primary/10"
: "border-dark-border bg-dark-bg-darker"
: "border-edge bg-elevated"
}`}
onClick={() => setSelectedIcon(value)}
title={label}
@@ -156,7 +156,7 @@ export function FolderEditDialog({
<Label className="text-base font-semibold text-foreground">
{t("hosts.preview")}
</Label>
<div className="flex items-center gap-3 p-4 rounded-md bg-dark-bg-darker border border-dark-border">
<div className="flex items-center gap-3 p-4 rounded-md bg-elevated border border-edge">
{(() => {
const IconComponent =
AVAILABLE_ICONS.find((i) => i.value === selectedIcon)?.Icon ||

18
src/ui/desktop/apps/server-stats/ServerStats.tsx
View File

@@ -346,8 +346,8 @@ export function ServerStats({
};
const containerClass = embedded
? "h-full w-full text-white overflow-hidden bg-transparent"
: "bg-dark-bg text-white rounded-lg border-2 border-dark-border overflow-hidden";
? "h-full w-full text-foreground overflow-hidden bg-transparent"
: "bg-canvas text-foreground rounded-lg border-2 border-edge overflow-hidden";
return (
<div style={wrapperStyle} className={containerClass}>
@@ -435,7 +435,7 @@ export function ServerStats({
>
{isRefreshing ? (
<div className="flex items-center gap-2">
<div className="w-4 h-4 border-2 border-gray-300 border-t-transparent rounded-full animate-spin"></div>
<div className="w-4 h-4 border-2 border-foreground-secondary border-t-transparent rounded-full animate-spin"></div>
{t("serverStats.refreshing")}
</div>
) : (
@@ -473,15 +473,15 @@ export function ServerStats({
</div>
<Separator className="p-0.25 w-full" />
<div className="flex-1 overflow-y-auto min-h-0">
<div className="flex-1 overflow-y-auto min-h-0 thin-scrollbar">
{(metricsEnabled && showStatsUI) ||
(currentHostConfig?.quickActions &&
currentHostConfig.quickActions.length > 0) ? (
<div className="rounded-lg border-dark-border m-3 p-1 overflow-y-auto relative flex-1 flex flex-col">
<div className="rounded-lg border-2 border-edge m-3 bg-elevated p-4 overflow-y-auto thin-scrollbar relative flex-1 flex flex-col">
{currentHostConfig?.quickActions &&
currentHostConfig.quickActions.length > 0 && (
<div className={metricsEnabled && showStatsUI ? "mb-4" : ""}>
<h3 className="text-sm font-semibold text-gray-400 mb-2">
<h3 className="text-sm font-semibold text-muted-foreground mb-2">
{t("serverStats.quickActions")}
</h3>
<div className="flex flex-wrap gap-2">
@@ -569,7 +569,7 @@ export function ServerStats({
>
{isExecuting ? (
<div className="flex items-center gap-2">
<div className="w-3 h-3 border-2 border-gray-300 border-t-transparent rounded-full animate-spin"></div>
<div className="w-3 h-3 border-2 border-foreground-secondary border-t-transparent rounded-full animate-spin"></div>
{action.name}
</div>
) : (
@@ -589,10 +589,10 @@ export function ServerStats({
<div className="w-12 h-12 mx-auto mb-3 rounded-full bg-red-500/20 flex items-center justify-center">
<div className="w-6 h-6 border-2 border-red-400 rounded-full"></div>
</div>
<p className="text-gray-300 mb-1">
<p className="text-foreground-secondary mb-1">
{t("serverStats.serverOffline")}
</p>
<p className="text-sm text-gray-500">
<p className="text-sm text-foreground-subtle">
{t("serverStats.cannotFetchMetrics")}
</p>
</div>

9
src/ui/desktop/apps/server-stats/widgets/CpuWidget.tsx
View File

@@ -30,10 +30,11 @@ export function CpuWidget({ metrics, metricsHistory }: CpuWidgetProps) {
}, [metricsHistory]);
return (
<div className="h-full w-full p-4 rounded-lg bg-dark-bg-darker border border-dark-border/50 hover:bg-dark-bg/70 transition-colors duration-200 flex flex-col overflow-hidden">
<div className="h-full w-full p-4 rounded-lg bg-canvas/50 border border-edge/50 hover:bg-canvas/70 transition-colors duration-200 flex flex-col overflow-hidden">
<div className="flex items-center gap-2 flex-shrink-0 mb-3">
<Cpu className="h-5 w-5 text-blue-400" />
<h3 className="font-semibold text-lg text-white">
<h3 className="font-semibold text-lg text-foreground">
{t("serverStats.cpuUsage")}
</h3>
</div>
@@ -45,13 +46,13 @@ export function CpuWidget({ metrics, metricsHistory }: CpuWidgetProps) {
? `${metrics.cpu.percent}%`
: "N/A"}
</div>
<div className="text-xs text-gray-400">
<div className="text-xs text-muted-foreground">
{typeof metrics?.cpu?.cores === "number"
? t("serverStats.cpuCores", { count: metrics.cpu.cores })
: t("serverStats.naCpus")}
</div>
</div>
<div className="text-xs text-gray-500 flex-shrink-0">
<div className="text-xs text-foreground-subtle flex-shrink-0">
{metrics?.cpu?.load
? t("serverStats.loadAverage", {
avg1: metrics.cpu.load[0].toFixed(2),

9
src/ui/desktop/apps/server-stats/widgets/DiskWidget.tsx
View File

@@ -27,10 +27,11 @@ export function DiskWidget({ metrics }: DiskWidgetProps) {
}, [metrics]);
return (
<div className="h-full w-full p-4 rounded-lg bg-dark-bg-darker border border-dark-border/50 hover:bg-dark-bg/70 transition-colors duration-200 flex flex-col overflow-hidden">
<div className="h-full w-full p-4 rounded-lg bg-canvas/50 border border-edge/50 hover:bg-canvas/70 transition-colors duration-200 flex flex-col overflow-hidden">
<div className="flex items-center gap-2 flex-shrink-0 mb-3">
<HardDrive className="h-5 w-5 text-orange-400" />
<h3 className="font-semibold text-lg text-white">
<h3 className="font-semibold text-lg text-foreground">
{t("serverStats.diskUsage")}
</h3>
</div>
@@ -74,7 +75,7 @@ export function DiskWidget({ metrics }: DiskWidgetProps) {
</ResponsiveContainer>
</div>
<div className="flex-shrink-0 space-y-1 text-center pb-2">
<div className="text-xs text-gray-400">
<div className="text-xs text-muted-foreground">
{(() => {
const used = metrics?.disk?.usedHuman;
const total = metrics?.disk?.totalHuman;
@@ -84,7 +85,7 @@ export function DiskWidget({ metrics }: DiskWidgetProps) {
return "N/A";
})()}
</div>
<div className="text-xs text-gray-500">
<div className="text-xs text-foreground-subtle">
{(() => {
const available = metrics?.disk?.availableHuman;
return available

34
src/ui/desktop/apps/server-stats/widgets/LoginStatsWidget.tsx
View File

@@ -35,18 +35,19 @@ export function LoginStatsWidget({ metrics }: LoginStatsWidgetProps) {
const uniqueIPs = loginStats?.uniqueIPs || 0;
return (
<div className="h-full w-full p-4 rounded-lg bg-dark-bg-darker border border-dark-border/50 hover:bg-dark-bg/70 transition-colors duration-200 flex flex-col overflow-hidden">
<div className="h-full w-full p-4 rounded-lg bg-canvas/50 border border-edge/50 hover:bg-canvas/70 transition-colors duration-200 flex flex-col overflow-hidden">
<div className="flex items-center gap-2 flex-shrink-0 mb-3">
<UserCheck className="h-5 w-5 text-green-400" />
<h3 className="font-semibold text-lg text-white">
<h3 className="font-semibold text-lg text-foreground">
{t("serverStats.loginStats")}
</h3>
</div>
<div className="flex flex-col flex-1 min-h-0 gap-3">
<div className="grid grid-cols-2 gap-2 flex-shrink-0">
<div className="bg-dark-bg-darker p-2 rounded border border-dark-border/30">
<div className="flex items-center gap-1 text-xs text-gray-400 mb-1">
<div className="bg-elevated p-2 rounded border border-edge/30">
<div className="flex items-center gap-1 text-xs text-muted-foreground mb-1">
<Activity className="h-3 w-3" />
<span>{t("serverStats.totalLogins")}</span>
</div>
@@ -54,8 +55,8 @@ export function LoginStatsWidget({ metrics }: LoginStatsWidgetProps) {
{totalLogins}
</div>
</div>
<div className="bg-dark-bg-darker p-2 rounded border border-dark-border/30">
<div className="flex items-center gap-1 text-xs text-gray-400 mb-1">
<div className="bg-elevated p-2 rounded border border-edge/30">
<div className="flex items-center gap-1 text-xs text-muted-foreground mb-1">
<MapPin className="h-3 w-3" />
<span>{t("serverStats.uniqueIPs")}</span>
</div>
@@ -63,37 +64,42 @@ export function LoginStatsWidget({ metrics }: LoginStatsWidgetProps) {
</div>
</div>
<div className="flex-1 min-h-0 overflow-y-auto space-y-2">
<div className="flex-1 min-h-0 overflow-y-auto thin-scrollbar space-y-2">
<div className="flex-shrink-0">
<div className="flex items-center gap-2 mb-1">
<UserCheck className="h-4 w-4 text-green-400" />
<span className="text-sm font-semibold text-gray-300">
<span className="text-sm font-semibold text-foreground-secondary">
{t("serverStats.recentSuccessfulLogins")}
</span>
</div>
{recentLogins.length === 0 ? (
<div className="text-xs text-gray-500 italic p-2">
<div className="text-xs text-foreground-subtle italic p-2">
{t("serverStats.noRecentLoginData")}
</div>
) : (
<div className="space-y-1">
{recentLogins.slice(0, 5).map((login) => (
<div
key={`${login.user}-${login.time}-${login.ip}`}
className="text-xs bg-dark-bg-darker p-2 rounded border border-dark-border/30 flex justify-between items-center"
key={idx}
className="text-xs bg-elevated p-2 rounded border border-edge/30 flex justify-between items-center"
>
<div className="flex items-center gap-2 min-w-0">
<span className="text-green-400 font-mono truncate">
{login.user}
</span>
<span className="text-gray-500">
<span className="text-foreground-subtle">
{t("serverStats.from")}
</span>
<span className="text-blue-400 font-mono truncate">
{login.ip}
</span>
</div>
<span className="text-gray-500 text-[10px] flex-shrink-0 ml-2">
<span className="text-foreground-subtle text-[10px] flex-shrink-0 ml-2">
{new Date(login.time).toLocaleString()}
</span>
</div>
@@ -106,7 +112,7 @@ export function LoginStatsWidget({ metrics }: LoginStatsWidgetProps) {
<div className="flex-shrink-0">
<div className="flex items-center gap-2 mb-1">
<UserX className="h-4 w-4 text-red-400" />
<span className="text-sm font-semibold text-gray-300">
<span className="text-sm font-semibold text-foreground-secondary">
{t("serverStats.recentFailedAttempts")}
</span>
</div>
@@ -120,14 +126,14 @@ export function LoginStatsWidget({ metrics }: LoginStatsWidgetProps) {
<span className="text-red-400 font-mono truncate">
{login.user}
</span>
<span className="text-gray-500">
<span className="text-foreground-subtle">
{t("serverStats.from")}
</span>
<span className="text-blue-400 font-mono truncate">
{login.ip}
</span>
</div>
<span className="text-gray-500 text-[10px] flex-shrink-0 ml-2">
<span className="text-foreground-subtle text-[10px] flex-shrink-0 ml-2">
{new Date(login.time).toLocaleString()}
</span>
</div>

9
src/ui/desktop/apps/server-stats/widgets/MemoryWidget.tsx
View File

@@ -30,10 +30,11 @@ export function MemoryWidget({ metrics, metricsHistory }: MemoryWidgetProps) {
}, [metricsHistory]);
return (
<div className="h-full w-full p-4 rounded-lg bg-dark-bg-darker border border-dark-border/50 hover:bg-dark-bg/70 transition-colors duration-200 flex flex-col overflow-hidden">
<div className="h-full w-full p-4 rounded-lg bg-canvas/50 border border-edge/50 hover:bg-canvas/70 transition-colors duration-200 flex flex-col overflow-hidden">
<div className="flex items-center gap-2 flex-shrink-0 mb-3">
<MemoryStick className="h-5 w-5 text-green-400" />
<h3 className="font-semibold text-lg text-white">
<h3 className="font-semibold text-lg text-foreground">
{t("serverStats.memoryUsage")}
</h3>
</div>
@@ -45,7 +46,7 @@ export function MemoryWidget({ metrics, metricsHistory }: MemoryWidgetProps) {
? `${metrics.memory.percent}%`
: "N/A"}
</div>
<div className="text-xs text-gray-400">
<div className="text-xs text-muted-foreground">
{(() => {
const used = metrics?.memory?.usedGiB;
const total = metrics?.memory?.totalGiB;
@@ -56,7 +57,7 @@ export function MemoryWidget({ metrics, metricsHistory }: MemoryWidgetProps) {
})()}
</div>
</div>
<div className="text-xs text-gray-500 flex-shrink-0">
<div className="text-xs text-foreground-subtle flex-shrink-0">
{(() => {
const used = metrics?.memory?.usedGiB;
const total = metrics?.memory?.totalGiB;

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

@@ -24,17 +24,18 @@ export function NetworkWidget({ metrics }: NetworkWidgetProps) {
const interfaces = network?.interfaces || [];
return (
<div className="h-full w-full p-4 rounded-lg bg-dark-bg-darker border border-dark-border/50 hover:bg-dark-bg/70 transition-colors duration-200 flex flex-col overflow-hidden">
<div className="h-full w-full p-4 rounded-lg bg-canvas/50 border border-edge/50 hover:bg-canvas/70 transition-colors duration-200 flex flex-col overflow-hidden">
<div className="flex items-center gap-2 flex-shrink-0 mb-3">
<Network className="h-5 w-5 text-indigo-400" />
<h3 className="font-semibold text-lg text-white">
<h3 className="font-semibold text-lg text-foreground">
{t("serverStats.networkInterfaces")}
</h3>
</div>
<div className="space-y-2.5 overflow-auto flex-1">
<div className="space-y-2.5 overflow-auto thin-scrollbar flex-1">
{interfaces.length === 0 ? (
<div className="flex flex-col items-center justify-center py-12 text-gray-400">
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
<WifiOff className="h-10 w-10 mb-3 opacity-50" />
<p className="text-sm">{t("serverStats.noInterfacesFound")}</p>
</div>
@@ -42,14 +43,14 @@ export function NetworkWidget({ metrics }: NetworkWidgetProps) {
interfaces.map((iface, index: number) => (
<div
key={index}
className="p-3 rounded-lg bg-dark-bg/50 border border-dark-border/30 hover:bg-dark-bg/60 transition-colors"
className="p-3 rounded-lg bg-canvas/50 border border-edge/30 hover:bg-canvas/60 transition-colors"
>
<div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-2">
<Wifi
className={`h-4 w-4 ${iface.state === "UP" ? "text-green-400" : "text-gray-500"}`}
className={`h-4 w-4 ${iface.state === "UP" ? "text-green-400" : "text-foreground-subtle"}`}
/>
<span className="text-sm font-semibold text-white font-mono">
<span className="text-sm font-semibold text-foreground font-mono">
{iface.name}
</span>
</div>
@@ -57,13 +58,13 @@ 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-gray-500"
: "bg-gray-500/20 text-foreground-subtle"
}`}
>
{iface.state}
</span>
</div>
<div className="text-xs text-gray-400 font-mono font-medium">
<div className="text-xs text-muted-foreground font-mono font-medium">
{iface.ip}
</div>
</div>

28
src/ui/desktop/apps/server-stats/widgets/ProcessesWidget.tsx
View File

@@ -28,22 +28,23 @@ export function ProcessesWidget({ metrics }: ProcessesWidgetProps) {
const topProcesses = processes?.top || [];
return (
<div className="h-full w-full p-4 rounded-lg bg-dark-bg-darker border border-dark-border/50 hover:bg-dark-bg/70 transition-colors duration-200 flex flex-col overflow-hidden">
<div className="h-full w-full p-4 rounded-lg bg-canvas/50 border border-edge/50 hover:bg-canvas/70 transition-colors duration-200 flex flex-col overflow-hidden">
<div className="flex items-center gap-2 flex-shrink-0 mb-3">
<List className="h-5 w-5 text-yellow-400" />
<h3 className="font-semibold text-lg text-white">
<h3 className="font-semibold text-lg text-foreground">
{t("serverStats.processes")}
</h3>
</div>
<div className="flex items-center justify-between mb-3 pb-2 border-b border-dark-border/30">
<div className="text-sm text-gray-400">
<div className="flex items-center justify-between mb-3 pb-2 border-b border-edge/30">
<div className="text-sm text-muted-foreground">
{t("serverStats.totalProcesses")}:{" "}
<span className="text-white font-semibold">
<span className="text-foreground font-semibold">
{processes?.total ?? "N/A"}
</span>
</div>
<div className="text-sm text-gray-400">
<div className="text-sm text-muted-foreground">
{t("serverStats.running")}:{" "}
<span className="text-green-400 font-semibold">
{processes?.running ?? "N/A"}
@@ -51,9 +52,9 @@ export function ProcessesWidget({ metrics }: ProcessesWidgetProps) {
</div>
</div>
<div className="overflow-auto flex-1">
<div className="overflow-auto thin-scrollbar flex-1">
{topProcesses.length === 0 ? (
<div className="flex flex-col items-center justify-center py-12 text-gray-400">
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
<Activity className="h-10 w-10 mb-3 opacity-50" />
<p className="text-sm">{t("serverStats.noProcessesFound")}</p>
</div>
@@ -61,11 +62,16 @@ export function ProcessesWidget({ metrics }: ProcessesWidgetProps) {
<div className="space-y-2">
{topProcesses.map((proc) => (
<div
key={proc.pid}
className="p-2.5 rounded-lg bg-dark-bg/30 hover:bg-dark-bg/50 transition-colors border border-dark-border/20"
key={index}
className="p-2.5 rounded-lg bg-canvas/30 hover:bg-canvas/50 transition-colors border border-edge/20"
>
<div className="flex items-center justify-between mb-1.5">
<span className="text-xs font-mono text-gray-400 font-medium">
<span className="text-xs font-mono text-muted-foreground font-medium">
PID: {proc.pid}
</span>
<div className="flex gap-3 text-xs font-medium">
@@ -73,10 +79,10 @@ export function ProcessesWidget({ metrics }: ProcessesWidgetProps) {
<span className="text-green-400">MEM: {proc.mem}%</span>
</div>
</div>
<div className="text-xs text-white font-mono truncate mb-1">
<div className="text-xs text-foreground font-mono truncate mb-1">
{proc.command}
</div>
<div className="text-xs text-gray-500">User: {proc.user}</div>
<div className="text-xs text-foreground-subtle">User: {proc.user}</div>
</div>
))}
</div>

17
src/ui/desktop/apps/server-stats/widgets/SystemWidget.tsx
View File

@@ -21,10 +21,11 @@ export function SystemWidget({ metrics }: SystemWidgetProps) {
const system = metricsWithSystem?.system;
return (
<div className="h-full w-full p-4 rounded-lg bg-dark-bg-darker border border-dark-border/50 hover:bg-dark-bg/70 transition-colors duration-200 flex flex-col overflow-hidden">
<div className="h-full w-full p-4 rounded-lg bg-canvas/50 border border-edge/50 hover:bg-canvas/70 transition-colors duration-200 flex flex-col overflow-hidden">
<div className="flex items-center gap-2 flex-shrink-0 mb-3">
<Server className="h-5 w-5 text-purple-400" />
<h3 className="font-semibold text-lg text-white">
<h3 className="font-semibold text-lg text-foreground">
{t("serverStats.systemInfo")}
</h3>
</div>
@@ -33,10 +34,10 @@ export function SystemWidget({ metrics }: SystemWidgetProps) {
<div className="flex items-start gap-3">
<Info className="h-4 w-4 text-purple-400 mt-0.5 flex-shrink-0" />
<div className="min-w-0 flex-1">
<p className="text-xs text-gray-400 mb-1.5">
<p className="text-xs text-muted-foreground mb-1.5">
{t("serverStats.hostname")}
</p>
<p className="text-sm text-white font-mono truncate font-medium">
<p className="text-sm text-foreground font-mono truncate font-medium">
{system?.hostname || "N/A"}
</p>
</div>
@@ -45,10 +46,10 @@ export function SystemWidget({ metrics }: SystemWidgetProps) {
<div className="flex items-start gap-3">
<Info className="h-4 w-4 text-purple-400 mt-0.5 flex-shrink-0" />
<div className="min-w-0 flex-1">
<p className="text-xs text-gray-400 mb-1.5">
<p className="text-xs text-muted-foreground mb-1.5">
{t("serverStats.operatingSystem")}
</p>
<p className="text-sm text-white font-mono truncate font-medium">
<p className="text-sm text-foreground font-mono truncate font-medium">
{system?.os || "N/A"}
</p>
</div>
@@ -57,10 +58,10 @@ export function SystemWidget({ metrics }: SystemWidgetProps) {
<div className="flex items-start gap-3">
<Info className="h-4 w-4 text-purple-400 mt-0.5 flex-shrink-0" />
<div className="min-w-0 flex-1">
<p className="text-xs text-gray-400 mb-1.5">
<p className="text-xs text-muted-foreground mb-1.5">
{t("serverStats.kernel")}
</p>
<p className="text-sm text-white font-mono truncate font-medium">
<p className="text-sm text-foreground font-mono truncate font-medium">
{system?.kernel || "N/A"}
</p>
</div>

9
src/ui/desktop/apps/server-stats/widgets/UptimeWidget.tsx
View File

@@ -20,10 +20,11 @@ export function UptimeWidget({ metrics }: UptimeWidgetProps) {
const uptime = metricsWithUptime?.uptime;
return (
<div className="h-full w-full p-4 rounded-lg bg-dark-bg-darker border border-dark-border/50 hover:bg-dark-bg/70 transition-colors duration-200 flex flex-col overflow-hidden">
<div className="h-full w-full p-4 rounded-lg bg-canvas/50 border border-edge/50 hover:bg-canvas/70 transition-colors duration-200 flex flex-col overflow-hidden">
<div className="flex items-center gap-2 flex-shrink-0 mb-3">
<Clock className="h-5 w-5 text-cyan-400" />
<h3 className="font-semibold text-lg text-white">
<h3 className="font-semibold text-lg text-foreground">
{t("serverStats.uptime")}
</h3>
</div>
@@ -39,11 +40,11 @@ export function UptimeWidget({ metrics }: UptimeWidgetProps) {
<div className="text-3xl font-bold text-cyan-400 mb-2">
{uptime?.formatted || "N/A"}
</div>
<div className="text-sm text-gray-400">
<div className="text-sm text-muted-foreground">
{t("serverStats.totalUptime")}
</div>
{uptime?.seconds && (
<div className="text-xs text-gray-500 mt-2">
<div className="text-xs text-foreground-subtle mt-2">
{Math.floor(uptime.seconds).toLocaleString()}{" "}
{t("serverStats.seconds")}
</div>

49
src/ui/desktop/apps/terminal/Terminal.tsx
View File

@@ -27,6 +27,7 @@ import {
TERMINAL_FONTS,
} from "@/constants/terminal-themes";
import type { TerminalConfig } from "@/types";
import { useTheme } from "@/components/theme-provider";
import { useCommandTracker } from "@/ui/hooks/useCommandTracker";
import { highlightTerminalOutput } from "@/lib/terminal-syntax-highlighter.ts";
import { useCommandHistory as useCommandHistoryHook } from "@/ui/hooks/useCommandHistory";
@@ -95,10 +96,23 @@ export const Terminal = forwardRef<TerminalHandle, SSHTerminalProps>(
const { instance: terminal, ref: xtermRef } = useXTerm();
const commandHistoryContext = useCommandHistory();
const { confirmWithToast } = useConfirmation();
const { theme: appTheme } = useTheme();
const config = { ...DEFAULT_TERMINAL_CONFIG, ...hostConfig.terminalConfig };
const themeColors =
TERMINAL_THEMES[config.theme]?.colors || TERMINAL_THEMES.termix.colors;
// Auto-switch terminal theme based on app theme when using "termix" (default)
const isDarkMode = appTheme === "dark" ||
(appTheme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);
let themeColors;
if (config.theme === "termix") {
// Auto-switch between termixDark and termixLight based on app theme
themeColors = isDarkMode
? TERMINAL_THEMES.termixDark.colors
: TERMINAL_THEMES.termixLight.colors;
} else {
themeColors = TERMINAL_THEMES[config.theme]?.colors || TERMINAL_THEMES.termixDark.colors;
}
const backgroundColor = themeColors.background;
const fitAddonRef = useRef<FitAddon | null>(null);
const webSocketRef = useRef<WebSocket | null>(null);
@@ -1046,8 +1060,15 @@ export const Terminal = forwardRef<TerminalHandle, SSHTerminalProps>(
...hostConfig.terminalConfig,
};
const themeColors =
TERMINAL_THEMES[config.theme]?.colors || TERMINAL_THEMES.termix.colors;
// Auto-switch terminal theme based on app theme when using "termix" (default)
let themeColors;
if (config.theme === "termix") {
themeColors = isDarkMode
? TERMINAL_THEMES.termixDark.colors
: TERMINAL_THEMES.termixLight.colors;
} else {
themeColors = TERMINAL_THEMES[config.theme]?.colors || TERMINAL_THEMES.termixDark.colors;
}
const fontConfig = TERMINAL_FONTS.find(
(f) => f.value === config.fontFamily,
@@ -1228,7 +1249,7 @@ export const Terminal = forwardRef<TerminalHandle, SSHTerminalProps>(
}
webSocketRef.current?.close();
};
}, [xtermRef, terminal, hostConfig]);
}, [xtermRef, terminal, hostConfig, isDarkMode]);
useEffect(() => {
if (!terminal) return;
@@ -1579,20 +1600,32 @@ style.innerHTML = `
font-display: swap;
}
/* Light theme scrollbars */
.xterm .xterm-viewport::-webkit-scrollbar {
width: 8px;
background: transparent;
}
.xterm .xterm-viewport::-webkit-scrollbar-thumb {
background: rgba(180,180,180,0.7);
background: rgba(0,0,0,0.3);
border-radius: 4px;
}
.xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
background: rgba(120,120,120,0.9);
background: rgba(0,0,0,0.5);
}
.xterm .xterm-viewport {
scrollbar-width: thin;
scrollbar-color: rgba(180,180,180,0.7) transparent;
scrollbar-color: rgba(0,0,0,0.3) transparent;
}
/* Dark theme scrollbars */
.dark .xterm .xterm-viewport::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.3);
}
.dark .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.5);
}
.dark .xterm .xterm-viewport {
scrollbar-color: rgba(255,255,255,0.3) transparent;
}
.xterm {

32
src/ui/desktop/apps/terminal/TerminalPreview.tsx
View File

@@ -1,5 +1,6 @@
import type { TerminalTheme } from "@/constants/terminal-themes";
import { TERMINAL_THEMES, TERMINAL_FONTS } from "@/constants/terminal-themes";
import { useTheme } from "@/components/theme-provider";
interface TerminalPreviewProps {
theme: string;
@@ -20,6 +21,15 @@ export function TerminalPreview({
letterSpacing = 0,
lineHeight = 1.2,
}: TerminalPreviewProps) {
const { theme: appTheme } = useTheme();
// Resolve "termix" to termixDark or termixLight based on app theme
const resolvedTheme = theme === "termix"
? (appTheme === "dark" || (appTheme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches)
? "termixDark"
: "termixLight")
: theme;
return (
<div className="border border-input rounded-md overflow-hidden">
<div
@@ -31,33 +41,33 @@ export function TerminalPreview({
TERMINAL_FONTS[0].fallback,
letterSpacing: `${letterSpacing}px`,
lineHeight,
background: TERMINAL_THEMES[theme]?.colors.background || "#18181b",
color: TERMINAL_THEMES[theme]?.colors.foreground || "#f7f7f7",
background: TERMINAL_THEMES[resolvedTheme]?.colors.background || "var(--bg-base)",
color: TERMINAL_THEMES[resolvedTheme]?.colors.foreground || "var(--foreground)",
}}
>
<div>
<span style={{ color: TERMINAL_THEMES[theme]?.colors.green }}>
<span style={{ color: TERMINAL_THEMES[resolvedTheme]?.colors.green }}>
user@termix
</span>
<span>:</span>
<span style={{ color: TERMINAL_THEMES[theme]?.colors.blue }}>~</span>
<span style={{ color: TERMINAL_THEMES[resolvedTheme]?.colors.blue }}>~</span>
<span>$ ls -la</span>
</div>
<div>
<span style={{ color: TERMINAL_THEMES[theme]?.colors.blue }}>
<span style={{ color: TERMINAL_THEMES[resolvedTheme]?.colors.blue }}>
drwxr-xr-x
</span>
<span> 5 user </span>
<span style={{ color: TERMINAL_THEMES[theme]?.colors.cyan }}>
<span style={{ color: TERMINAL_THEMES[resolvedTheme]?.colors.cyan }}>
docs
</span>
</div>
<div>
<span style={{ color: TERMINAL_THEMES[theme]?.colors.green }}>
<span style={{ color: TERMINAL_THEMES[resolvedTheme]?.colors.green }}>
-rwxr-xr-x
</span>
<span> 1 user </span>
<span style={{ color: TERMINAL_THEMES[theme]?.colors.green }}>
<span style={{ color: TERMINAL_THEMES[resolvedTheme]?.colors.green }}>
script.sh
</span>
</div>
@@ -67,11 +77,11 @@ export function TerminalPreview({
<span>README.md</span>
</div>
<div>
<span style={{ color: TERMINAL_THEMES[theme]?.colors.green }}>
<span style={{ color: TERMINAL_THEMES[resolvedTheme]?.colors.green }}>
user@termix
</span>
<span>:</span>
<span style={{ color: TERMINAL_THEMES[theme]?.colors.blue }}>~</span>
<span style={{ color: TERMINAL_THEMES[resolvedTheme]?.colors.blue }}>~</span>
<span>$ </span>
<span
className="inline-block"
@@ -83,7 +93,7 @@ export function TerminalPreview({
: cursorStyle === "bar"
? `${fontSize}px`
: `${fontSize}px`,
background: TERMINAL_THEMES[theme]?.colors.cursor || "#f7f7f7",
background: TERMINAL_THEMES[resolvedTheme]?.colors.cursor || "#f7f7f7",
animation: cursorBlink ? "blink 1s step-end infinite" : "none",
verticalAlign:
cursorStyle === "underline" ? "bottom" : "text-bottom",

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

@@ -38,7 +38,7 @@ export function CommandAutocomplete({
return (
<div
ref={containerRef}
className="fixed z-[9999] bg-dark-bg border border-dark-border rounded-md shadow-lg min-w-[200px] max-w-[600px] flex flex-col"
className="fixed z-[9999] bg-canvas border border-edge rounded-md shadow-lg min-w-[200px] max-w-[600px] flex flex-col"
style={{
top: `${position.top}px`,
left: `${position.left}px`,
@@ -46,7 +46,7 @@ export function CommandAutocomplete({
}}
>
<div
className="overflow-y-auto"
className="overflow-y-auto thin-scrollbar"
style={{ maxHeight: `${maxSuggestionsHeight}px` }}
>
{suggestions.map((suggestion, index) => (
@@ -55,8 +55,8 @@ export function CommandAutocomplete({
ref={index === selectedIndex ? selectedRef : null}
className={cn(
"px-3 py-1.5 text-sm font-mono cursor-pointer transition-colors",
"hover:bg-dark-hover",
index === selectedIndex && "bg-gray-500/20 text-gray-400",
"hover:bg-hover",
index === selectedIndex && "bg-gray-500/20 text-muted-foreground",
)}
onClick={() => onSelect(suggestion)}
onMouseEnter={() => {}}
@@ -65,7 +65,7 @@ export function CommandAutocomplete({
</div>
))}
</div>
<div className="px-3 py-1 text-xs text-muted-foreground border-t border-dark-border bg-dark-bg/50 shrink-0">
<div className="px-3 py-1 text-xs text-muted-foreground border-t border-edge bg-canvas/50 shrink-0">
Tab/Enter to complete • ↑↓ to navigate • Esc to close
</div>
</div>

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

@@ -1113,7 +1113,7 @@ export function SSHToolsSidebar({
className="pointer-events-auto"
>
<SidebarHeader>
<SidebarGroupLabel className="text-lg font-bold text-white">
<SidebarGroupLabel className="text-lg font-bold text-foreground">
{t("nav.tools")}
<div className="absolute right-5 flex gap-1">
<Button
@@ -1158,7 +1158,7 @@ export function SSHToolsSidebar({
</TabsList>
<TabsContent value="ssh-tools" className="space-y-4">
<h3 className="font-semibold text-white">
<h3 className="font-semibold text-foreground">
{t("sshTools.keyRecording")}
</h3>
@@ -1186,10 +1186,10 @@ export function SSHToolsSidebar({
{isRecording && (
<>
<div className="space-y-2">
<label className="text-sm font-medium text-white">
<label className="text-sm font-medium text-foreground">
{t("sshTools.selectTerminals")}
</label>
<div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto">
<div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto thin-scrollbar">
{terminalTabs.map((tab) => (
<Button
key={tab.id}
@@ -1198,8 +1198,8 @@ export function SSHToolsSidebar({
size="sm"
className={`rounded-full px-3 py-1 text-xs flex items-center gap-1 ${
selectedTabIds.includes(tab.id)
? "text-white bg-gray-700"
: "text-gray-500"
? "text-foreground bg-gray-700"
: "text-foreground-subtle"
}`}
onClick={() => handleTabToggle(tab.id)}
>
@@ -1210,7 +1210,7 @@ export function SSHToolsSidebar({
</div>
<div className="space-y-2">
<label className="text-sm font-medium text-white">
<label className="text-sm font-medium text-foreground">
{t("sshTools.typeCommands")}
</label>
<Input
@@ -1234,7 +1234,7 @@ export function SSHToolsSidebar({
<Separator />
<h3 className="font-semibold text-white">
<h3 className="font-semibold text-foreground">
{t("sshTools.settings")}
</h3>
@@ -1246,7 +1246,7 @@ export function SSHToolsSidebar({
/>
<label
htmlFor="enable-copy-paste"
className="text-sm font-medium leading-none text-white cursor-pointer"
className="text-sm font-medium leading-none text-foreground cursor-pointer"
>
{t("sshTools.enableRightClickCopyPaste")}
</label>
@@ -1271,7 +1271,7 @@ export function SSHToolsSidebar({
})
: t("snippets.executeOnCurrent")}
</p>
<div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto">
<div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto thin-scrollbar">
{terminalTabs.map((tab) => (
<Button
key={tab.id}
@@ -1280,8 +1280,8 @@ export function SSHToolsSidebar({
size="sm"
className={`rounded-full px-3 py-1 text-xs flex items-center gap-1 ${
selectedSnippetTabIds.includes(tab.id)
? "text-white bg-gray-700"
: "text-gray-500"
? "text-foreground bg-gray-700"
: "text-foreground-subtle"
}`}
onClick={() => handleSnippetTabToggle(tab.id)}
>
@@ -1327,7 +1327,7 @@ export function SSHToolsSidebar({
</div>
) : (
<TooltipProvider>
<div className="space-y-3 overflow-y-auto flex-1 min-h-0">
<div className="space-y-3 overflow-y-auto flex-1 min-h-0 thin-scrollbar">
{Array.from(groupSnippetsByFolder()).map(
([folderName, folderSnippets]) => {
const folderMetadata = snippetFolders.find(
@@ -1338,7 +1338,7 @@ export function SSHToolsSidebar({
return (
<div key={folderName || "uncategorized"}>
<div className="flex items-center gap-2 mb-2 hover:bg-dark-hover-alt p-2 rounded-lg transition-colors group/folder">
<div className="flex items-center gap-2 mb-2 hover:bg-hover-alt p-2 rounded-lg transition-colors group/folder">
<div
className="flex items-center gap-2 flex-1 cursor-pointer"
onClick={() => toggleFolder(folderName)}
@@ -1429,7 +1429,7 @@ export function SSHToolsSidebar({
}
onDrop={(e) => handleDrop(e, snippet)}
onDragEnd={handleDragEnd}
className={`bg-dark-bg-input border border-input rounded-lg cursor-move hover:shadow-lg hover:border-gray-400/50 hover:bg-dark-hover-alt transition-all duration-200 p-3 group ${
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 ${
draggedSnippet?.id === snippet.id
? "opacity-50"
: ""
@@ -1438,7 +1438,7 @@ export function SSHToolsSidebar({
<div className="mb-2 flex items-center gap-2">
<GripVertical className="h-4 w-4 text-muted-foreground flex-shrink-0 opacity-50 group-hover:opacity-100 transition-opacity" />
<div className="flex-1 min-w-0">
<h3 className="text-sm font-medium text-white mb-1">
<h3 className="text-sm font-medium text-foreground mb-1">
{snippet.name}
</h3>
{snippet.description && (
@@ -1645,16 +1645,16 @@ export function SSHToolsSidebar({
) : (
<div
ref={commandHistoryScrollRef}
className="space-y-2 overflow-y-auto h-full"
className="space-y-2 overflow-y-auto h-full thin-scrollbar"
>
{filteredCommands.map((command, index) => (
<div
key={index}
className="bg-dark-bg border-2 border-dark-border rounded-md px-3 py-2.5 hover:bg-dark-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-gray-600 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
className="flex-1 font-mono text-sm cursor-pointer text-white truncate"
className="flex-1 font-mono text-sm cursor-pointer text-foreground truncate"
onClick={() => handleCommandSelect(command)}
title={command}
>
@@ -1684,7 +1684,7 @@ export function SSHToolsSidebar({
value="split-screen"
className="flex flex-col flex-1 overflow-hidden"
>
<div className="space-y-4 flex-1 overflow-y-auto overflow-x-hidden pb-4">
<div className="space-y-4 flex-1 overflow-y-auto overflow-x-hidden pb-4 thin-scrollbar">
<Tabs
value={splitMode}
onValueChange={(value) =>
@@ -1718,7 +1718,7 @@ export function SSHToolsSidebar({
<p className="text-xs text-muted-foreground mb-2">
{t("splitScreen.dragTabsHint")}
</p>
<div className="space-y-1 max-h-[200px] overflow-y-auto">
<div className="space-y-1 max-h-[200px] overflow-y-auto thin-scrollbar">
{splittableTabs.map((tab) => {
const isAssigned = Array.from(
splitAssignments.values(),
@@ -1737,8 +1737,8 @@ export function SSHToolsSidebar({
px-3 py-2 rounded-md text-sm cursor-move transition-all
${
isAssigned
? "bg-dark-bg/50 text-muted-foreground cursor-not-allowed opacity-50"
: "bg-dark-bg border border-dark-border hover:border-gray-400 hover:bg-dark-bg-input"
? "bg-canvas/50 text-muted-foreground cursor-not-allowed opacity-50"
: "bg-canvas border border-edge hover:border-gray-400 hover:bg-field"
}
${isDragging ? "opacity-50" : ""}
`}
@@ -1787,12 +1787,12 @@ export function SSHToolsSidebar({
onDragLeave={handleTabDragLeave}
onDrop={() => handleTabDrop(idx)}
className={`
relative bg-dark-bg border-2 rounded-md p-3 min-h-[100px]
relative bg-canvas border-2 rounded-md p-3 min-h-[100px]
flex flex-col items-center justify-center transition-all
${splitMode === "3" && idx === 2 ? "col-span-2" : ""}
${
isEmpty
? "border-dashed border-dark-border"
? "border-dashed border-edge"
: "border-solid border-gray-400 bg-gray-500/10"
}
${
@@ -1804,7 +1804,7 @@ export function SSHToolsSidebar({
>
{assignedTab ? (
<>
<span className="text-sm text-white truncate w-full text-center mb-2">
<span className="text-sm text-foreground truncate w-full text-center mb-2">
{assignedTab.title}
</span>
<Button
@@ -1872,13 +1872,13 @@ export function SSHToolsSidebar({
left: "-8px",
width: "18px",
backgroundColor: isResizing
? "var(--dark-active)"
? "var(--bg-active)"
: "transparent",
}}
onMouseEnter={(e) => {
if (!isResizing) {
e.currentTarget.style.backgroundColor =
"var(--dark-border-hover)";
"var(--border-hover)";
}
}}
onMouseLeave={(e) => {
@@ -1900,11 +1900,11 @@ export function SSHToolsSidebar({
onClick={() => setShowDialog(false)}
>
<div
className="bg-dark-bg border-2 border-dark-border rounded-lg p-6 max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto"
className="bg-canvas border-2 border-edge rounded-lg p-6 max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto thin-scrollbar"
onClick={(e) => e.stopPropagation()}
>
<div className="mb-6">
<h2 className="text-xl font-semibold text-white">
<h2 className="text-xl font-semibold text-foreground">
{editingSnippet ? t("snippets.edit") : t("snippets.create")}
</h2>
<p className="text-sm text-muted-foreground mt-1">
@@ -1916,7 +1916,7 @@ export function SSHToolsSidebar({
<div className="space-y-5">
<div className="space-y-2">
<label className="text-sm font-medium text-white flex items-center gap-1">
<label className="text-sm font-medium text-foreground flex items-center gap-1">
{t("snippets.name")}
<span className="text-destructive">*</span>
</label>
@@ -1937,7 +1937,7 @@ export function SSHToolsSidebar({
</div>
<div className="space-y-2">
<label className="text-sm font-medium text-white">
<label className="text-sm font-medium text-foreground">
{t("snippets.description")}
<span className="text-muted-foreground ml-1">
({t("common.optional")})
@@ -1953,7 +1953,7 @@ export function SSHToolsSidebar({
</div>
<div className="space-y-2">
<label className="text-sm font-medium text-white flex items-center gap-2">
<label className="text-sm font-medium text-foreground flex items-center gap-2">
<Folder className="h-4 w-4" />
{t("snippets.folder")}
<span className="text-muted-foreground">
@@ -1999,7 +1999,7 @@ export function SSHToolsSidebar({
</div>
<div className="space-y-2">
<label className="text-sm font-medium text-white flex items-center gap-1">
<label className="text-sm font-medium text-foreground flex items-center gap-1">
{t("snippets.content")}
<span className="text-destructive">*</span>
</label>
@@ -2044,11 +2044,11 @@ export function SSHToolsSidebar({
onClick={() => setShowFolderDialog(false)}
>
<div
className="bg-dark-bg border-2 border-dark-border rounded-lg p-6 max-w-lg w-full mx-4"
className="bg-canvas border-2 border-edge rounded-lg p-6 max-w-lg w-full mx-4"
onClick={(e) => e.stopPropagation()}
>
<div className="mb-6">
<h2 className="text-xl font-semibold text-white">
<h2 className="text-xl font-semibold text-foreground">
{editingFolder
? t("snippets.editFolder")
: t("snippets.createFolder")
@@ -2097,7 +2097,7 @@ export function SSHToolsSidebar({
className={`h-12 rounded-md border-2 transition-all hover:scale-105 ${
folderFormData.color === color.value
? "border-white shadow-lg scale-105"
: "border-dark-border"
: "border-edge"
}`}
style={{ backgroundColor: color.value }}
onClick={() =>
@@ -2124,7 +2124,7 @@ export function SSHToolsSidebar({
className={`h-14 rounded-md border-2 transition-all hover:scale-105 flex items-center justify-center ${
folderFormData.icon === value
? "border-primary bg-primary/10"
: "border-dark-border bg-dark-bg-darker"
: "border-edge bg-elevated"
}`}
onClick={() =>
setFolderFormData({ ...folderFormData, icon: value })
@@ -2141,7 +2141,7 @@ export function SSHToolsSidebar({
<Label className="text-base font-semibold text-white">
{t("snippets.preview")}
</Label>
<div className="flex items-center gap-3 p-4 rounded-md bg-dark-bg-darker border border-dark-border">
<div className="flex items-center gap-3 p-4 rounded-md bg-elevated border border-edge">
{(() => {
const IconComponent =
AVAILABLE_ICONS.find(

2
src/ui/desktop/apps/tunnel/TunnelViewer.tsx
View File

@@ -43,7 +43,7 @@ export function TunnelViewer({
return (
<div className="w-full h-full flex flex-col overflow-hidden p-3 min-h-0">
<div className="min-h-0 flex-1 overflow-auto pr-1">
<div className="min-h-0 flex-1 overflow-auto thin-scrollbar pr-1">
<div className="grid grid-cols-[repeat(auto-fit,minmax(320px,1fr))] gap-3 auto-rows-min content-start w-full">
{activeHost.tunnelConnections.map((t, idx) => (
<TunnelObject

99
src/ui/desktop/authentication/Auth.tsx
View File

@@ -14,7 +14,8 @@ import {
import { useTranslation } from "react-i18next";
import { LanguageSwitcher } from "@/ui/desktop/user/LanguageSwitcher.tsx";
import { toast } from "sonner";
import { Monitor } from "lucide-react";
import { Sun, Moon, Monitor } from "lucide-react";
import { useTheme } from "@/components/theme-provider";
import {
registerUser,
loginUser,
@@ -72,6 +73,7 @@ export function Auth({
...props
}: AuthProps) {
const { t } = useTranslation();
const { theme, setTheme } = useTheme();
const isInElectronWebView = () => {
if ((window as ExtendedWindow).IS_ELECTRON_WEBVIEW) {
@@ -645,7 +647,7 @@ export function Auth({
const Spinner = (
<svg
className="animate-spin mr-2 h-4 w-4 text-white inline-block"
className="animate-spin mr-2 h-4 w-4 text-foreground inline-block"
viewBox="0 0 24 24"
>
<circle
@@ -697,7 +699,7 @@ export function Auth({
if (showServerConfig === null && !isInElectronWebView()) {
return (
<div
className={`w-[420px] max-w-full p-6 flex flex-col bg-dark-bg border-2 border-dark-border rounded-md overflow-y-auto my-2 animate-in fade-in zoom-in-95 duration-300 ${className || ""}`}
className={`w-[420px] max-w-full p-6 flex flex-col bg-canvas border-2 border-edge rounded-md overflow-y-auto thin-scrollbar my-2 animate-in fade-in zoom-in-95 duration-300 ${className || ""}`}
style={{ maxHeight: "calc(100vh - 1rem)" }}
{...props}
>
@@ -711,7 +713,7 @@ export function Auth({
if (showServerConfig && !isInElectronWebView()) {
return (
<div
className={`w-[420px] max-w-full p-6 flex flex-col bg-dark-bg border-2 border-dark-border rounded-md overflow-y-auto my-2 animate-in fade-in zoom-in-95 duration-300 ${className || ""}`}
className={`w-[420px] max-w-full p-6 flex flex-col bg-canvas border-2 border-edge rounded-md overflow-y-auto thin-scrollbar my-2 animate-in fade-in zoom-in-95 duration-300 ${className || ""}`}
style={{ maxHeight: "calc(100vh - 1rem)" }}
{...props}
>
@@ -736,7 +738,7 @@ export function Auth({
) {
return (
<div
className={`w-[420px] max-w-full p-6 flex flex-col bg-dark-bg border-2 border-dark-border rounded-md overflow-y-auto my-2 animate-in fade-in zoom-in-95 duration-300 ${className || ""}`}
className={`w-[420px] max-w-full p-6 flex flex-col bg-canvas border-2 border-edge rounded-md overflow-y-auto thin-scrollbar my-2 animate-in fade-in zoom-in-95 duration-300 ${className || ""}`}
style={{ maxHeight: "calc(100vh - 1rem)" }}
{...props}
>
@@ -769,20 +771,10 @@ export function Auth({
if (dbHealthChecking && !dbConnectionFailed) {
return (
<div
className={`fixed inset-0 flex items-center justify-center ${className || ""}`}
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
)`,
}}
className={`fixed inset-0 flex items-center justify-center bg-canvas ${className || ""}`}
{...props}
>
<div className="w-[420px] max-w-full p-6 flex flex-col bg-dark-bg border-2 border-dark-border rounded-md overflow-y-auto my-2 animate-in fade-in zoom-in-95 duration-300">
<div className="w-[420px] max-w-full p-6 flex flex-col bg-elevated border-2 border-edge rounded-md overflow-y-auto thin-scrollbar my-2 animate-in fade-in zoom-in-95 duration-300">
<div className="flex items-center justify-center h-32">
<div className="text-center">
<div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4" />
@@ -799,23 +791,12 @@ export function Auth({
if (dbConnectionFailed) {
return (
<div
className={`fixed inset-0 flex items-center justify-center ${className || ""}`}
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
)`,
}}
className={`fixed inset-0 flex items-center justify-center bg-canvas ${className || ""}`}
{...props}
>
<div
className={`w-[420px] max-w-full p-6 flex flex-col bg-dark-bg border-2 border-dark-border rounded-md overflow-y-auto my-2 animate-in fade-in zoom-in-95 duration-300 ${className || ""}`}
className="w-[420px] max-w-full p-6 flex flex-col bg-elevated border-2 border-edge rounded-md overflow-y-auto thin-scrollbar my-2 animate-in fade-in zoom-in-95 duration-300"
style={{ maxHeight: "calc(100vh - 1rem)" }}
{...props}
>
<div className="mb-6 text-center">
<h2 className="text-xl font-bold mb-1">
@@ -838,13 +819,24 @@ export function Auth({
</Button>
</div>
<div className="mt-6 pt-4 border-t border-dark-border space-y-4">
<div className="mt-6 pt-4 border-t border-edge space-y-4">
<div className="flex items-center justify-between">
<div>
<Label className="text-sm text-muted-foreground">
{t("common.language")}
</Label>
</div>
<Button
type="button"
variant="ghost"
size="icon"
className="h-8 w-8"
onClick={() => {
const isDark = theme === "dark" || (theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);
setTheme(isDark ? "light" : "dark");
}}
>
{(theme === "dark" || (theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches)) ? (
<Moon className="w-4 h-4" />
) : (
<Sun className="w-4 h-4" />
)}
</Button>
<LanguageSwitcher />
</div>
{isElectron() && currentServerUrl && (
@@ -881,15 +873,15 @@ export function Auth({
>
<div className="w-full h-full flex flex-col md:flex-row">
<div
className="hidden md:flex md:w-2/5 items-center justify-center relative border-r-2 border-bg-border-dark"
className="hidden md:flex md:w-2/5 items-center justify-center relative border-r-2 border-edge"
style={{
background: "#0e0e10",
background: "var(--bg-elevated)",
backgroundImage: `repeating-linear-gradient(
45deg,
transparent,
transparent 35px,
rgba(255, 255, 255, 0.03) 35px,
rgba(255, 255, 255, 0.03) 37px
rgba(128, 128, 128, 0.05) 35px,
rgba(128, 128, 128, 0.05) 37px
)`,
}}
>
@@ -909,8 +901,8 @@ export function Auth({
</div>
</div>
<div className="flex-1 flex p-6 md:p-12 bg-background overflow-y-auto">
<div className="m-auto w-full max-w-md backdrop-blur-sm bg-card/50 rounded-2xl p-8 shadow-xl border-2 border-dark-border animate-in fade-in slide-in-from-bottom-4 duration-500 flex flex-col">
<div className="flex-1 flex p-6 md:p-12 bg-background overflow-y-auto thin-scrollbar">
<div className="m-auto w-full max-w-md backdrop-blur-sm bg-card/50 rounded-2xl p-8 shadow-xl border-2 border-edge animate-in fade-in slide-in-from-bottom-4 duration-500 flex flex-col">
{isInElectronWebView() && !webviewAuthSuccess && (
<Alert className="mb-4 border-blue-500 bg-blue-500/10">
<Monitor className="h-4 w-4" />
@@ -1376,13 +1368,24 @@ export function Auth({
</form>
)}
<div className="mt-6 pt-4 border-t border-dark-border space-y-4">
<div className="mt-6 pt-4 border-t border-edge space-y-4">
<div className="flex items-center justify-between">
<div>
<Label className="text-sm text-muted-foreground">
{t("common.language")}
</Label>
</div>
<Button
type="button"
variant="ghost"
size="icon"
className="h-8 w-8"
onClick={() => {
const isDark = theme === "dark" || (theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);
setTheme(isDark ? "light" : "dark");
}}
>
{(theme === "dark" || (theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches)) ? (
<Moon className="w-4 h-4" />
) : (
<Sun className="w-4 h-4" />
)}
</Button>
<LanguageSwitcher />
</div>
{isElectron() && currentServerUrl && (

6
src/ui/desktop/authentication/ElectronLoginForm.tsx
View File

@@ -235,8 +235,8 @@ export function ElectronLoginForm({
const displayUrl = currentUrl.replace(/^https?:\/\//, "");
return (
<div className="fixed inset-0 w-screen h-screen bg-dark-bg flex flex-col">
<div className="flex items-center justify-between p-4 bg-dark-bg border-b border-dark-border">
<div className="fixed inset-0 w-screen h-screen bg-canvas flex flex-col">
<div className="flex items-center justify-between p-4 bg-canvas border-b border-edge">
<button
onClick={handleBack}
className="flex items-center gap-2 text-foreground hover:text-primary transition-colors"
@@ -273,7 +273,7 @@ export function ElectronLoginForm({
{loading && (
<div
className="absolute inset-0 flex items-center justify-center bg-dark-bg z-40"
className="absolute inset-0 flex items-center justify-center bg-canvas z-40"
style={{ marginTop: "60px" }}
>
<div className="flex items-center">

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

@@ -18,6 +18,7 @@ import {
TERMINAL_THEMES,
DEFAULT_TERMINAL_CONFIG,
} from "@/constants/terminal-themes";
import { useTheme } from "@/components/theme-provider";
import { SSHAuthDialog } from "@/ui/desktop/navigation/SSHAuthDialog.tsx";
interface TabData {
@@ -53,6 +54,14 @@ export function AppView({
removeTab: (id: number) => void;
};
const { state: sidebarState } = useSidebar();
const { theme: appTheme } = useTheme();
// Auto-switch terminal theme based on app theme
const isDarkMode = useMemo(() => {
if (appTheme === "dark") return true;
if (appTheme === "light") return false;
return window.matchMedia("(prefers-color-scheme: dark)").matches;
}, [appTheme]);
const terminalTabs = useMemo(
() =>
@@ -306,9 +315,15 @@ export function AppView({
...DEFAULT_TERMINAL_CONFIG,
...(t.hostConfig as any)?.terminalConfig,
};
const themeColors =
TERMINAL_THEMES[terminalConfig.theme]?.colors ||
TERMINAL_THEMES.termix.colors;
// Auto-switch between termixDark and termixLight based on app theme
let themeColors;
if (terminalConfig.theme === "termix") {
themeColors = isDarkMode
? TERMINAL_THEMES.termixDark.colors
: TERMINAL_THEMES.termixLight.colors;
} else {
themeColors = TERMINAL_THEMES[terminalConfig.theme]?.colors || TERMINAL_THEMES.termixDark.colors;
}
const backgroundColor = themeColors.background;
return (
@@ -316,7 +331,7 @@ export function AppView({
<div
className="absolute inset-0 rounded-md overflow-hidden"
style={{
backgroundColor: isTerminal ? backgroundColor : "#18181b",
backgroundColor: isTerminal ? backgroundColor : "var(--bg-base)",
}}
>
{t.type === "terminal" ? (
@@ -374,7 +389,7 @@ export function AppView({
variant="ghost"
onClick={onClick}
aria-label="Reset split sizes"
className="absolute top-0 right-0 h-[28px] w-[28px] !rounded-none border-l-1 border-b-1 border-dark-border-panel bg-dark-bg-panel hover:bg-dark-bg-panel-hover text-white flex items-center justify-center p-0"
className="absolute top-0 right-0 h-[28px] w-[28px] !rounded-none border-l-1 border-b-1 border-edge-panel bg-surface hover:bg-surface-hover text-foreground flex items-center justify-center p-0"
>
<RefreshCcw className="h-4 w-4" />
</Button>
@@ -394,7 +409,7 @@ export function AppView({
const handleStyle = {
pointerEvents: "auto",
zIndex: 12,
background: "var(--color-dark-border)",
background: "var(--color-border-base)",
} as React.CSSProperties;
const commonGroupProps: {
onLayout: () => void;
@@ -427,7 +442,7 @@ export function AppView({
}}
className="h-full w-full flex flex-col bg-transparent relative"
>
<div className="bg-dark-bg-panel text-white text-[13px] h-[28px] leading-[28px] px-[10px] border-b border-dark-border-panel tracking-[1px] m-0 pointer-events-auto z-[11] relative">
<div className="bg-surface text-foreground text-[13px] h-[28px] leading-[28px] px-[10px] border-b border-edge-panel tracking-[1px] m-0 pointer-events-auto z-[11] relative">
{a.title}
</div>
</div>
@@ -446,7 +461,7 @@ export function AppView({
}}
className="h-full w-full flex flex-col bg-transparent relative"
>
<div className="bg-dark-bg-panel text-white text-[13px] h-[28px] leading-[28px] px-[10px] border-b border-dark-border-panel tracking-[1px] m-0 pointer-events-auto z-[11] relative">
<div className="bg-surface text-foreground text-[13px] h-[28px] leading-[28px] px-[10px] border-b border-edge-panel tracking-[1px] m-0 pointer-events-auto z-[11] relative">
{b.title}
<ResetButton onClick={handleReset} />
</div>
@@ -494,7 +509,7 @@ export function AppView({
}}
className="h-full w-full flex flex-col relative"
>
<div className="bg-dark-bg-panel text-white text-[13px] h-[28px] leading-[28px] px-[10px] border-b border-dark-border-panel tracking-[1px] m-0 pointer-events-auto z-[11] relative">
<div className="bg-surface text-foreground text-[13px] h-[28px] leading-[28px] px-[10px] border-b border-edge-panel tracking-[1px] m-0 pointer-events-auto z-[11] relative">
{a.title}
</div>
</div>
@@ -513,7 +528,7 @@ export function AppView({
}}
className="h-full w-full flex flex-col relative"
>
<div className="bg-dark-bg-panel text-white text-[13px] h-[28px] leading-[28px] px-[10px] border-b border-dark-border-panel tracking-[1px] m-0 pointer-events-auto z-[11] relative">
<div className="bg-surface text-foreground text-[13px] h-[28px] leading-[28px] px-[10px] border-b border-edge-panel tracking-[1px] m-0 pointer-events-auto z-[11] relative">
{b.title}
<ResetButton onClick={handleReset} />
</div>
@@ -535,7 +550,7 @@ export function AppView({
}}
className="h-full w-full flex flex-col relative"
>
<div className="bg-dark-bg-panel text-white text-[13px] h-[28px] leading-[28px] px-[10px] border-b border-dark-border-panel tracking-[1px] m-0 pointer-events-auto z-[11] relative">
<div className="bg-surface text-foreground text-[13px] h-[28px] leading-[28px] px-[10px] border-b border-edge-panel tracking-[1px] m-0 pointer-events-auto z-[11] relative">
{c.title}
</div>
</div>
@@ -582,7 +597,7 @@ export function AppView({
}}
className="h-full w-full flex flex-col relative"
>
<div className="bg-dark-bg-panel text-white text-[13px] h-[28px] leading-[28px] px-[10px] border-b border-dark-border-panel tracking-[1px] m-0 pointer-events-auto z-[11] relative">
<div className="bg-surface text-foreground text-[13px] h-[28px] leading-[28px] px-[10px] border-b border-edge-panel tracking-[1px] m-0 pointer-events-auto z-[11] relative">
{a.title}
</div>
</div>
@@ -601,7 +616,7 @@ export function AppView({
}}
className="h-full w-full flex flex-col relative"
>
<div className="bg-dark-bg-panel text-white text-[13px] h-[28px] leading-[28px] px-[10px] border-b border-dark-border-panel tracking-[1px] m-0 pointer-events-auto z-[11] relative">
<div className="bg-surface text-foreground text-[13px] h-[28px] leading-[28px] px-[10px] border-b border-edge-panel tracking-[1px] m-0 pointer-events-auto z-[11] relative">
{b.title}
<ResetButton onClick={handleReset} />
</div>
@@ -637,7 +652,7 @@ export function AppView({
}}
className="h-full w-full flex flex-col relative"
>
<div className="bg-dark-bg-panel text-white text-[13px] h-[28px] leading-[28px] px-[10px] border-b border-dark-border-panel tracking-[1px] m-0 pointer-events-auto z-[11] relative">
<div className="bg-surface text-foreground text-[13px] h-[28px] leading-[28px] px-[10px] border-b border-edge-panel tracking-[1px] m-0 pointer-events-auto z-[11] relative">
{c.title}
</div>
</div>
@@ -656,7 +671,7 @@ export function AppView({
}}
className="h-full w-full flex flex-col relative"
>
<div className="bg-dark-bg-panel text-white text-[13px] h-[28px] leading-[28px] px-[10px] border-b border-dark-border-panel tracking-[1px] m-0 pointer-events-auto z-[11] relative">
<div className="bg-surface text-foreground text-[13px] h-[28px] leading-[28px] px-[10px] border-b border-edge-panel tracking-[1px] m-0 pointer-events-auto z-[11] relative">
{d.title}
</div>
</div>
@@ -681,18 +696,24 @@ export function AppView({
...DEFAULT_TERMINAL_CONFIG,
...(currentTabData?.hostConfig as any)?.terminalConfig,
};
const themeColors =
TERMINAL_THEMES[terminalConfig.theme]?.colors ||
TERMINAL_THEMES.termix.colors;
const terminalBackgroundColor = themeColors.background;
// Auto-switch between termixDark and termixLight based on app theme
let containerThemeColors;
if (terminalConfig.theme === "termix") {
containerThemeColors = isDarkMode
? TERMINAL_THEMES.termixDark.colors
: TERMINAL_THEMES.termixLight.colors;
} else {
containerThemeColors = TERMINAL_THEMES[terminalConfig.theme]?.colors || TERMINAL_THEMES.termixDark.colors;
}
const terminalBackgroundColor = containerThemeColors.background;
const topMarginPx = isTopbarOpen ? 74 : 26;
const leftMarginPx = sidebarState === "collapsed" ? 26 : 8;
const bottomMarginPx = 8;
let containerBackground = "var(--color-dark-bg)";
let containerBackground = "var(--color-canvas)";
if ((isFileManager || isTunnel || isDocker) && !isSplitScreen) {
containerBackground = "var(--color-dark-bg-darkest)";
containerBackground = "var(--color-deepest)";
} else if (isTerminal) {
containerBackground = terminalBackgroundColor;
}
@@ -700,7 +721,7 @@ export function AppView({
return (
<div
ref={containerRef}
className="border-2 border-dark-border rounded-lg overflow-hidden overflow-x-hidden relative"
className="border-2 border-edge rounded-lg overflow-hidden overflow-x-hidden relative"
style={{
background: containerBackground,
marginLeft: leftMarginPx,

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

@@ -480,7 +480,7 @@ export function LeftSidebar({
<div className="flex h-screen w-screen overflow-hidden">
<Sidebar variant="floating">
<SidebarHeader>
<SidebarGroupLabel className="text-lg font-bold text-white">
<SidebarGroupLabel className="text-lg font-bold text-foreground">
{t('common.appName')}
<div className="absolute right-5 flex gap-1">
<Button
@@ -506,7 +506,7 @@ export function LeftSidebar({
<SidebarContent>
<SidebarGroup className="!m-0 !p-0 !-mb-2">
<Button
className="m-2 flex flex-row font-semibold border-2 !border-dark-border"
className="m-2 flex flex-row font-semibold border-2 !border-edge"
variant="outline"
onClick={openSshManagerTab}
disabled={isSplitScreenActive}
@@ -522,19 +522,19 @@ export function LeftSidebar({
</SidebarGroup>
<Separator className="p-0.25" />
<SidebarGroup className="flex flex-col gap-y-2 !-mt-2">
<div className="!bg-dark-bg-input rounded-lg">
<div className="!bg-field rounded-lg">
<Input
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder={t("placeholders.searchHostsAny")}
className="w-full h-8 text-sm border-2 !bg-dark-bg-input border-dark-border rounded-md"
className="w-full h-8 text-sm border-2 !bg-field border-edge rounded-md"
autoComplete="off"
/>
</div>
{hostsError && (
<div className="!bg-dark-bg-input rounded-lg">
<div className="w-full h-8 text-sm border-2 !bg-dark-bg-input border-dark-border rounded-md px-3 py-1.5 flex items-center text-red-500">
<div className="!bg-field rounded-lg">
<div className="w-full h-8 text-sm border-2 !bg-field border-edge rounded-md px-3 py-1.5 flex items-center text-red-500">
{t("leftSidebar.failedToLoadHosts")}
</div>
</div>
@@ -621,13 +621,13 @@ export function LeftSidebar({
right: "-8px",
width: "18px",
backgroundColor: isResizing
? "var(--dark-active)"
? "var(--bg-interact)"
: "transparent",
}}
onMouseEnter={(e) => {
if (!isResizing) {
e.currentTarget.style.backgroundColor =
"var(--dark-border-hover)";
"var(--border-hover)";
}
}}
onMouseLeave={(e) => {
@@ -650,8 +650,8 @@ export function LeftSidebar({
className="fixed top-0 left-0 w-[10px] h-full cursor-pointer flex items-center justify-center rounded-tr-md rounded-br-md"
style={{
zIndex: 9999,
backgroundColor: "#18181b",
border: "2px solid #27272a",
backgroundColor: "var(--bg-base)",
border: "2px solid var(--border-base)",
borderLeft: "none",
}}
>

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

@@ -42,7 +42,7 @@ export function SSHAuthDialog({
onSubmit,
onCancel,
hostInfo,
backgroundColor = "#18181b",
backgroundColor = "var(--bg-base)",
}: SSHAuthDialogProps) {
const { t } = useTranslation();
const [authTab, setAuthTab] = useState<"password" | "key">("password");
@@ -137,7 +137,7 @@ export function SSHAuthDialog({
return (
<div
className="absolute inset-0 z-9999 flex items-center justify-center bg-dark-bg animate-in fade-in duration-200"
className="absolute inset-0 z-9999 flex items-center justify-center bg-canvas animate-in fade-in duration-200"
style={{ backgroundColor }}
>
<Card className="w-full max-w-2xl mx-4 border-2 animate-in fade-in zoom-in-95 duration-200">
@@ -232,6 +232,8 @@ export function SSHAuthDialog({
EditorView.theme({
".cm-scroller": {
overflow: "auto",
scrollbarWidth: "thin",
scrollbarColor: "var(--scrollbar-thumb) var(--scrollbar-track)",
},
}),
]}

4
src/ui/desktop/navigation/TOTPDialog.tsx
View File

@@ -27,10 +27,10 @@ export function TOTPDialog({
return (
<div className="absolute inset-0 flex items-center justify-center z-500 animate-in fade-in duration-200">
<div
className="absolute inset-0 bg-dark-bg rounded-md"
className="absolute inset-0 bg-canvas rounded-md"
style={{ backgroundColor: backgroundColor || undefined }}
/>
<div className="bg-dark-bg border-2 border-dark-border rounded-lg p-6 max-w-md w-full mx-4 relative z-10 animate-in fade-in zoom-in-95 duration-200">
<div className="bg-canvas border-2 border-edge rounded-lg p-6 max-w-md w-full mx-4 relative z-10 animate-in fade-in zoom-in-95 duration-200">
<div className="mb-4 flex items-center gap-2">
<Shield className="w-5 h-5 text-primary" />
<h3 className="text-lg font-semibold">

12
src/ui/desktop/navigation/TopNavbar.tsx
View File

@@ -348,18 +348,18 @@ export function TopNavbar({
return (
<div>
<div
className="fixed z-10 h-[50px] border-2 border-dark-border rounded-lg flex flex-row transform-none m-0 p-0"
className="fixed z-10 h-[50px] border-2 border-edge rounded-lg flex flex-row transform-none m-0 p-0"
style={{
top: isTopbarOpen ? "0.5rem" : "-3rem",
left: leftPosition,
right: rightPosition,
backgroundColor: "#18181b",
backgroundColor: "var(--bg-base)",
transition: "top 200ms linear, left 200ms linear, right 200ms linear",
}}
>
<div
ref={containerRef}
className="h-full p-1 pr-2 border-r-2 border-dark-border w-[calc(100%-6rem)] flex items-center overflow-x-auto overflow-y-hidden skinny-scrollbar gap-1"
className="h-full p-1 pr-2 border-r-2 border-edge w-[calc(100%-6rem)] flex items-center overflow-x-auto overflow-y-hidden skinny-scrollbar gap-1"
>
{tabs.map((tab: TabData, index: number) => {
const isActive = tab.id === currentTab;
@@ -526,7 +526,7 @@ export function TopNavbar({
<Button
variant="outline"
onClick={() => setToolsSidebarOpen(!toolsSidebarOpen)}
className="w-[30px] h-[30px] border-dark-border"
className="w-[30px] h-[30px] border-edge"
title={t("nav.tools")}
>
<Hammer className="h-4 w-4" />
@@ -551,8 +551,8 @@ export function TopNavbar({
right: rightPosition,
height: "10px",
zIndex: 9999,
backgroundColor: "#18181b",
border: "2px solid #27272a",
backgroundColor: "var(--bg-base)",
border: "2px solid var(--border-base)",
borderTop: "none",
}}
>

8
src/ui/desktop/navigation/animations/SimpleLoader.tsx
View File

@@ -34,8 +34,8 @@ export function SimpleLoader({
.simple-spinner {
width: 40px;
height: 40px;
border: 4px solid rgba(255, 255, 255, 0.1);
border-top-color: rgba(255, 255, 255, 0.8);
border: 4px solid var(--border-base);
border-top-color: var(--foreground);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@@ -47,12 +47,12 @@ export function SimpleLoader({
"absolute inset-0 flex items-center justify-center z-50",
className,
)}
style={{ backgroundColor: backgroundColor || "#18181b" }}
style={{ backgroundColor: backgroundColor || "var(--bg-base)" }}
>
<div className="flex flex-col items-center gap-4">
<div className="simple-spinner"></div>
{message && (
<p className="text-sm text-gray-300 font-medium">{message}</p>
<p className="text-sm text-foreground-secondary font-medium">{message}</p>
)}
</div>
</div>

4
src/ui/desktop/navigation/hosts/FolderCard.tsx
View File

@@ -93,9 +93,9 @@ export function FolderCard({
folderIcon && iconMap[folderIcon] ? iconMap[folderIcon] : Folder;
return (
<div className="bg-dark-bg-darker border-2 border-dark-border rounded-lg overflow-hidden p-0 m-0">
<div className="bg-elevated border-2 border-edge rounded-lg overflow-hidden p-0 m-0">
<div
className={`px-4 py-3 relative ${isExpanded ? "border-b-2" : ""} bg-dark-bg-header`}
className={`px-4 py-3 relative ${isExpanded ? "border-b-2" : ""} bg-header`}
>
<div className="flex gap-2 pr-10">
<div className="flex-shrink-0 flex items-center">

18
src/ui/desktop/navigation/hosts/Host.tsx
View File

@@ -147,7 +147,7 @@ export function Host({ host: initialHost }: HostProps): React.ReactElement {
{host.enableTerminal && (
<Button
variant="outline"
className="!px-2 border-1 border-dark-border"
className="!px-2 border-1 border-edge"
onClick={handleTerminalClick}
>
<Terminal />
@@ -158,7 +158,7 @@ export function Host({ host: initialHost }: HostProps): React.ReactElement {
<DropdownMenuTrigger asChild>
<Button
variant="outline"
className={`!px-2 border-1 border-dark-border ${
className={`!px-2 border-1 border-edge ${
host.enableTerminal ? "rounded-tl-none rounded-bl-none" : ""
}`}
>
@@ -169,14 +169,14 @@ export function Host({ host: initialHost }: HostProps): React.ReactElement {
<DropdownMenuContent
align="start"
side="right"
className="w-56 bg-dark-bg border-dark-border text-white"
className="w-56 bg-canvas border-edge text-foreground"
>
{shouldShowMetrics && (
<DropdownMenuItem
onClick={() =>
addTab({ type: "server", title, hostConfig: host })
}
className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-dark-hover text-gray-300"
className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-hover text-foreground-secondary"
>
<Server className="h-4 w-4" />
<span className="flex-1">{t('hosts.openServerStats')}</span>
@@ -187,7 +187,7 @@ export function Host({ host: initialHost }: HostProps): React.ReactElement {
onClick={() =>
addTab({ type: "file_manager", title, hostConfig: host })
}
className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-dark-hover text-gray-300"
className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-hover text-foreground-secondary"
>
<FolderOpen className="h-4 w-4" />
<span className="flex-1">{t('hosts.openFileManager')}</span>
@@ -198,7 +198,7 @@ export function Host({ host: initialHost }: HostProps): React.ReactElement {
onClick={() =>
addTab({ type: "tunnel", title, hostConfig: host })
}
className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-dark-hover text-gray-300"
className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-hover text-foreground-secondary"
>
<ArrowDownUp className="h-4 w-4" />
<span className="flex-1">{t('hosts.openTunnels')}</span>
@@ -209,7 +209,7 @@ export function Host({ host: initialHost }: HostProps): React.ReactElement {
onClick={() =>
addTab({ type: "docker", title, hostConfig: host })
}
className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-dark-hover text-gray-300"
className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-hover text-foreground-secondary"
>
<Container className="h-4 w-4" />
<span className="flex-1">{t('hosts.openDocker')}</span>
@@ -224,7 +224,7 @@ export function Host({ host: initialHost }: HostProps): React.ReactElement {
initialTab: "add_host",
})
}
className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-dark-hover text-gray-300"
className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-hover text-foreground-secondary"
>
<Pencil className="h-4 w-4" />
<span className="flex-1">{t('common.edit')}</span>
@@ -238,7 +238,7 @@ export function Host({ host: initialHost }: HostProps): React.ReactElement {
{tags.map((tag: string) => (
<div
key={tag}
className="bg-dark-bg border-1 border-dark-border pl-2 pr-2 rounded-[10px]"
className="bg-canvas border-1 border-edge pl-2 pr-2 rounded-[10px]"
>
<p className="text-sm">{tag}</p>
</div>

10
src/ui/desktop/navigation/tabs/Tab.tsx
View File

@@ -109,7 +109,7 @@ export function Tab({
onClick={!disableActivate ? onActivate : undefined}
style={{
marginBottom: "-2px",
borderBottom: isActive ? "2px solid white" : "none",
borderBottom: isActive ? "2px solid var(--foreground)" : "none",
}}
>
<Home className="h-4 w-4" />
@@ -153,7 +153,7 @@ export function Tab({
onClick={!disableActivate ? onActivate : undefined}
style={{
marginBottom: "-2px",
borderBottom: isActive || isSplit ? "2px solid white" : "none",
borderBottom: isActive || isSplit ? "2px solid var(--foreground)" : "none",
}}
>
<div className="flex items-center gap-1.5 flex-1 min-w-0">
@@ -191,7 +191,7 @@ export function Tab({
<SeparatorVertical
className={cn(
"h-4 w-4",
isSplit ? "text-white" : "text-muted-foreground",
isSplit ? "text-foreground" : "text-muted-foreground",
)}
/>
</Button>
@@ -225,7 +225,7 @@ export function Tab({
onClick={!disableActivate ? onActivate : undefined}
style={{
marginBottom: "-2px",
borderBottom: isActive ? "2px solid white" : "none",
borderBottom: isActive ? "2px solid var(--foreground)" : "none",
}}
>
<div className="flex items-center gap-1.5 flex-1 min-w-0">
@@ -261,7 +261,7 @@ export function Tab({
onClick={!disableActivate ? onActivate : undefined}
style={{
marginBottom: "-2px",
borderBottom: isActive ? "2px solid white" : "none",
borderBottom: isActive ? "2px solid var(--foreground)" : "none",
}}
>
<div className="flex items-center gap-1.5 flex-1 min-w-0">

8
src/ui/desktop/navigation/tabs/TabDropdown.tsx
View File

@@ -83,7 +83,7 @@ export function TabDropdown(): React.ReactElement {
<DropdownMenuTrigger asChild>
<Button
variant="outline"
className="w-[30px] h-[30px] border-dark-border"
className="w-[30px] h-[30px] border-edge"
title={t("nav.tabNavigation", { defaultValue: "Tab Navigation" })}
>
<ChevronDown className="h-4 w-4" />
@@ -91,7 +91,7 @@ export function TabDropdown(): React.ReactElement {
</DropdownMenuTrigger>
<DropdownMenuContent
align="end"
className="w-56 bg-dark-bg border-dark-border text-white"
className="w-56 bg-canvas border-edge text-foreground"
>
{tabs.map((tab) => {
const isActive = tab.id === currentTab;
@@ -101,8 +101,8 @@ export function TabDropdown(): React.ReactElement {
onClick={() => handleTabSwitch(tab.id)}
className={`flex items-center gap-2 cursor-pointer px-3 py-2 ${
isActive
? "bg-dark-bg-active text-white"
: "hover:bg-dark-hover text-gray-300"
? "bg-active text-foreground"
: "hover:bg-hover text-foreground-secondary"
}`}
>
{getTabIcon(tab.type)}

6
src/ui/desktop/user/ElectronVersionCheck.tsx
View File

@@ -84,7 +84,7 @@ export function ElectronVersionCheck({
if (versionChecking && !versionInfo) {
return (
<div className="fixed inset-0 flex items-center justify-center z-50">
<div className="bg-dark-bg border-2 border-dark-border rounded-lg p-6 max-w-md w-full mx-4 relative z-10">
<div className="bg-canvas border-2 border-edge rounded-lg p-6 max-w-md w-full mx-4 relative z-10">
<div className="flex items-center justify-center mb-4">
<div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
</div>
@@ -99,7 +99,7 @@ export function ElectronVersionCheck({
if (!versionInfo || versionDismissed) {
return (
<div className="fixed inset-0 flex items-center justify-center z-50">
<div className="bg-dark-bg border-2 border-dark-border rounded-lg p-6 max-w-md w-full mx-4 relative z-10">
<div className="bg-canvas border-2 border-edge rounded-lg p-6 max-w-md w-full mx-4 relative z-10">
<div className="mb-4">
<h2 className="text-lg font-semibold">
{t("versionCheck.checkUpdates")}
@@ -127,7 +127,7 @@ export function ElectronVersionCheck({
return (
<div className="fixed inset-0 flex items-center justify-center z-50">
<div className="bg-dark-bg border-2 border-dark-border rounded-lg p-6 max-w-md w-full mx-4 relative z-10">
<div className="bg-canvas border-2 border-edge rounded-lg p-6 max-w-md w-full mx-4 relative z-10">
<div className="mb-4">
<h2 className="text-lg font-semibold">
{t("versionCheck.updateRequired")}

2
src/ui/desktop/user/PasswordReset.tsx
View File

@@ -67,7 +67,7 @@ export function PasswordReset({ userInfo }: PasswordResetProps) {
const Spinner = (
<svg
className="animate-spin mr-2 h-4 w-4 text-white inline-block"
className="animate-spin mr-2 h-4 w-4 text-foreground inline-block"
viewBox="0 0 24 24"
>
<circle

149
src/ui/desktop/user/UserProfile.tsx
View File

@@ -11,7 +11,15 @@ import {
} from "@/components/ui/tabs.tsx";
import { Separator } from "@/components/ui/separator.tsx";
import { Switch } from "@/components/ui/switch.tsx";
import { User, Shield, AlertCircle, Palette } from "lucide-react";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select.tsx";
import { User, Shield, AlertCircle, Palette, Sun, Moon, Monitor } from "lucide-react";
import { useTheme } from "@/components/theme-provider";
import { TOTPSetup } from "@/ui/desktop/user/TOTPSetup.tsx";
import {
getUserInfo,
@@ -80,6 +88,7 @@ export function UserProfile({
}: UserProfileProps) {
const { t } = useTranslation();
const { state: sidebarState } = useSidebar();
const { theme, setTheme } = useTheme();
const [userInfo, setUserInfo] = useState<{
username: string;
is_admin: boolean;
@@ -238,7 +247,7 @@ export function UserProfile({
return (
<div
style={wrapperStyle}
className="bg-dark-bg text-white rounded-lg border-2 border-dark-border overflow-hidden"
className="bg-canvas text-foreground rounded-lg border-2 border-edge overflow-hidden"
>
<div className="h-full w-full flex flex-col">
<div className="flex items-center justify-between px-3 pt-2 pb-2">
@@ -246,7 +255,7 @@ export function UserProfile({
</div>
<Separator className="p-0.25 w-full" />
<div className="flex-1 flex items-center justify-center">
<div className="animate-pulse text-gray-300">
<div className="animate-pulse text-foreground-secondary">
{t("common.loading")}
</div>
</div>
@@ -259,7 +268,7 @@ export function UserProfile({
return (
<div
style={wrapperStyle}
className="bg-dark-bg text-white rounded-lg border-2 border-dark-border overflow-hidden"
className="bg-canvas text-foreground rounded-lg border-2 border-edge overflow-hidden"
>
<div className="h-full w-full flex flex-col">
<div className="flex items-center justify-between px-3 pt-2 pb-2">
@@ -289,7 +298,7 @@ export function UserProfile({
<>
<div
style={wrapperStyle}
className="bg-dark-bg text-white rounded-lg border-2 border-dark-border overflow-hidden"
className="bg-canvas text-foreground rounded-lg border-2 border-edge overflow-hidden"
>
<div className="h-full w-full flex flex-col">
<div className="flex items-center justify-between px-3 pt-2 pb-2">
@@ -297,19 +306,19 @@ export function UserProfile({
</div>
<Separator className="p-0.25 w-full" />
<div className="px-6 py-4 overflow-auto flex-1">
<div className="px-6 py-4 overflow-auto thin-scrollbar flex-1">
<Tabs defaultValue="profile" className="w-full">
<TabsList className="mb-4 bg-dark-bg border-2 border-dark-border">
<TabsList className="mb-4 bg-elevated border-2 border-edge">
<TabsTrigger
value="profile"
className="flex items-center gap-2 data-[state=active]:bg-dark-bg-button"
className="flex items-center gap-2 bg-elevated data-[state=active]:bg-button data-[state=active]:border data-[state=active]:border-edge"
>
<User className="w-4 h-4" />
{t("profile.account")}
</TabsTrigger>
<TabsTrigger
value="appearance"
className="flex items-center gap-2 data-[state=active]:bg-dark-bg-button"
className="flex items-center gap-2 data-[state=active]:bg-button"
>
<Palette className="w-4 h-4" />
{t("profile.appearance")}
@@ -317,7 +326,7 @@ export function UserProfile({
{(!userInfo.is_oidc || userInfo.is_dual_auth) && (
<TabsTrigger
value="security"
className="flex items-center gap-2 data-[state=active]:bg-dark-bg-button"
className="flex items-center gap-2 bg-elevated data-[state=active]:bg-button data-[state=active]:border data-[state=active]:border-edge"
>
<Shield className="w-4 h-4" />
{t("profile.security")}
@@ -326,21 +335,21 @@ export function UserProfile({
</TabsList>
<TabsContent value="profile" className="space-y-4">
<div className="rounded-lg border-2 border-dark-border bg-dark-bg-darker p-4">
<div className="rounded-lg border-2 border-edge bg-elevated p-4">
<h3 className="text-lg font-semibold mb-4">
{t("profile.accountInfo")}
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<Label className="text-gray-300">
<Label className="text-foreground-secondary">
{t("common.username")}
</Label>
<p className="text-lg font-medium mt-1 text-white">
<p className="text-lg font-medium mt-1 text-foreground">
{userInfo.username}
</p>
</div>
<div>
<Label className="text-gray-300">
<Label className="text-foreground-secondary">
{t("profile.role")}
</Label>
<div className="mt-1">
@@ -349,14 +358,14 @@ export function UserProfile({
{userRoles.map((role) => (
<span
key={role.roleId}
className="inline-flex items-center px-2.5 py-1 rounded-md text-sm font-medium bg-muted/50 text-white border border-border"
className="inline-flex items-center px-2.5 py-1 rounded-md text-sm font-medium bg-muted/50 text-foreground border border-border"
>
{t(role.roleDisplayName)}
</span>
))}
</div>
) : (
<p className="text-lg font-medium text-white">
<p className="text-lg font-medium text-foreground">
{userInfo.is_admin
? t("interface.administrator")
: t("interface.user")}
@@ -365,10 +374,10 @@ export function UserProfile({
</div>
</div>
<div>
<Label className="text-gray-300">
<Label className="text-foreground-secondary">
{t("profile.authMethod")}
</Label>
<p className="text-lg font-medium mt-1 text-white">
<p className="text-lg font-medium mt-1 text-foreground">
{userInfo.is_dual_auth
? t("profile.externalAndLocal")
: userInfo.is_oidc
@@ -377,12 +386,12 @@ export function UserProfile({
</p>
</div>
<div>
<Label className="text-gray-300">
<Label className="text-foreground-secondary">
{t("profile.twoFactorAuth")}
</Label>
<p className="text-lg font-medium mt-1">
{userInfo.is_oidc && !userInfo.is_dual_auth ? (
<span className="text-gray-400">
<span className="text-muted-foreground">
{t("auth.lockedOidcAuth")}
</span>
) : userInfo.totp_enabled ? (
@@ -391,29 +400,29 @@ export function UserProfile({
{t("common.enabled")}
</span>
) : (
<span className="text-gray-400">
<span className="text-muted-foreground">
{t("common.disabled")}
</span>
)}
</p>
</div>
<div>
<Label className="text-gray-300">
<Label className="text-foreground-secondary">
{t("common.version")}
</Label>
<p className="text-lg font-medium mt-1 text-white">
<p className="text-lg font-medium mt-1 text-foreground">
{versionInfo?.version || t("common.loading")}
</p>
</div>
</div>
<div className="mt-6 pt-6 border-t border-dark-border">
<div className="mt-6 pt-6 border-t border-edge">
<div className="flex items-center justify-between">
<div>
<Label className="text-red-400">
{t("leftSidebar.deleteAccount")}
</Label>
<p className="text-sm text-gray-400 mt-1">
<p className="text-sm text-muted-foreground mt-1">
{t(
"leftSidebar.deleteAccountWarningShort",
"This action is not reversible and will permanently delete your account.",
@@ -433,17 +442,17 @@ export function UserProfile({
<TabsContent value="appearance" className="space-y-4">
{/* Language & Localization Section */}
<div className="rounded-lg border-2 border-dark-border bg-dark-bg-darker p-4">
<div className="rounded-lg border-2 border-edge bg-elevated p-4">
<h3 className="text-lg font-semibold mb-4">
{t("profile.languageLocalization")}
</h3>
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<Label className="text-gray-300">
<Label className="text-foreground-secondary">
{t("common.language")}
</Label>
<p className="text-sm text-gray-400 mt-1">
<p className="text-sm text-muted-foreground mt-1">
{t("profile.selectPreferredLanguage")}
</p>
</div>
@@ -452,18 +461,62 @@ export function UserProfile({
</div>
</div>
{/* Theme Section */}
<div className="rounded-lg border-2 border-edge bg-elevated p-4">
<h3 className="text-lg font-semibold mb-4">
{t("profile.appearance", "Appearance")}
</h3>
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<Label className="text-foreground-secondary">
{t("profile.theme", "Theme")}
</Label>
<p className="text-sm text-muted-foreground mt-1">
{t("profile.appearanceDesc", "Choose your preferred theme")}
</p>
</div>
<Select value={theme} onValueChange={setTheme}>
<SelectTrigger className="w-[140px]">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="light">
<div className="flex items-center gap-2">
<Sun className="w-4 h-4" />
{t("profile.themeLight", "Light")}
</div>
</SelectItem>
<SelectItem value="dark">
<div className="flex items-center gap-2">
<Moon className="w-4 h-4" />
{t("profile.themeDark", "Dark")}
</div>
</SelectItem>
<SelectItem value="system">
<div className="flex items-center gap-2">
<Monitor className="w-4 h-4" />
{t("profile.themeSystem", "System")}
</div>
</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</div>
{/* File Manager Section */}
<div className="rounded-lg border-2 border-dark-border bg-dark-bg-darker p-4">
<div className="rounded-lg border-2 border-edge bg-elevated p-4">
<h3 className="text-lg font-semibold mb-4">
{t("profile.fileManagerSettings")}
</h3>
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<Label className="text-gray-300">
<Label className="text-foreground-secondary">
{t("profile.fileColorCoding")}
</Label>
<p className="text-sm text-gray-400 mt-1">
<p className="text-sm text-muted-foreground mt-1">
{t("profile.fileColorCodingDesc")}
</p>
</div>
@@ -476,17 +529,17 @@ export function UserProfile({
</div>
{/* Terminal Section */}
<div className="rounded-lg border-2 border-dark-border bg-dark-bg-darker p-4">
<div className="rounded-lg border-2 border-edge bg-elevated p-4">
<h3 className="text-lg font-semibold mb-4">
{t("profile.terminalSettings")}
</h3>
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<Label className="text-gray-300">
<Label className="text-foreground-secondary">
{t("profile.commandAutocomplete")}
</Label>
<p className="text-sm text-gray-400 mt-1">
<p className="text-sm text-muted-foreground mt-1">
{t("profile.commandAutocompleteDesc")}
</p>
</div>
@@ -497,13 +550,13 @@ export function UserProfile({
</div>
<div className="flex items-center justify-between">
<div>
<Label className="text-gray-300">
<Label className="text-foreground-secondary">
{t("profile.terminalSyntaxHighlighting")}{" "}
<span className="text-xs text-yellow-500 font-semibold">
(BETA)
</span>
</Label>
<p className="text-sm text-gray-400 mt-1">
<p className="text-sm text-muted-foreground mt-1">
Automatically highlight commands, paths, IPs, and log
levels in terminal output
</p>
@@ -517,17 +570,17 @@ export function UserProfile({
</div>
{/* Host & Sidebar Section */}
<div className="rounded-lg border-2 border-dark-border bg-dark-bg-darker p-4">
<div className="rounded-lg border-2 border-edge bg-elevated p-4">
<h3 className="text-lg font-semibold mb-4">
{t("profile.hostSidebarSettings")}
</h3>
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<Label className="text-gray-300">
<Label className="text-foreground-secondary">
{t("profile.showHostTags")}
</Label>
<p className="text-sm text-gray-400 mt-1">
<p className="text-sm text-muted-foreground mt-1">
{t("profile.showHostTagsDesc")}
</p>
</div>
@@ -540,17 +593,17 @@ export function UserProfile({
</div>
{/* Snippets Section */}
<div className="rounded-lg border-2 border-dark-border bg-dark-bg-darker p-4">
<div className="rounded-lg border-2 border-edge bg-elevated p-4">
<h3 className="text-lg font-semibold mb-4">
{t("profile.snippetsSettings")}
</h3>
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<Label className="text-gray-300">
<Label className="text-foreground-secondary">
{t("profile.defaultSnippetFoldersCollapsed")}
</Label>
<p className="text-sm text-gray-400 mt-1">
<p className="text-sm text-muted-foreground mt-1">
{t("profile.defaultSnippetFoldersCollapsedDesc")}
</p>
</div>
@@ -588,15 +641,15 @@ export function UserProfile({
}}
>
<div
className="w-[400px] h-full bg-dark-bg border-r-2 border-dark-border flex flex-col shadow-2xl relative isolate z-[9999999]"
className="w-[400px] h-full bg-canvas border-r-2 border-edge flex flex-col shadow-2xl relative isolate z-[9999999]"
style={{
boxShadow: "4px 0 20px rgba(0, 0, 0, 0.5)",
transform: "translateZ(0)",
}}
onClick={(e) => e.stopPropagation()}
>
<div className="flex items-center justify-between p-4 border-b border-dark-border">
<h2 className="text-lg font-semibold text-white">
<div className="flex items-center justify-between p-4 border-b border-edge">
<h2 className="text-lg font-semibold text-foreground">
{t("leftSidebar.deleteAccount")}
</h2>
<Button
@@ -607,16 +660,16 @@ export function UserProfile({
setDeletePassword("");
setDeleteError(null);
}}
className="h-8 w-8 p-0 hover:bg-red-500 hover:text-white transition-colors flex items-center justify-center"
className="h-8 w-8 p-0 hover:bg-red-500 hover:text-foreground transition-colors flex items-center justify-center"
title={t("leftSidebar.closeDeleteAccount")}
>
<span className="text-lg font-bold leading-none">×</span>
</Button>
</div>
<div className="flex-1 overflow-y-auto p-4">
<div className="flex-1 overflow-y-auto p-4 thin-scrollbar">
<div className="space-y-4">
<div className="text-sm text-gray-300">
<div className="text-sm text-foreground-secondary">
{t("leftSidebar.deleteAccountWarning")}
<Alert variant="destructive" className="mb-5 mt-5">
<AlertTitle>{t("common.warning")}</AlertTitle>

12
src/ui/mobile/MobileApp.tsx
View File

@@ -124,7 +124,7 @@ const AppContent: FC = () => {
if (authLoading) {
return (
<div className="h-screen w-screen flex items-center justify-center bg-dark-bg">
<div className="h-screen w-screen flex items-center justify-center bg-canvas">
<div className="text-center">
<div className="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4" />
<p className="text-muted-foreground">{t("common.loading")}</p>
@@ -135,7 +135,7 @@ const AppContent: FC = () => {
if (!isAuthenticated || isReactNativeWebView()) {
return (
<div className="h-screen w-screen flex items-center justify-center bg-dark-bg p-4">
<div className="h-screen w-screen flex items-center justify-center bg-canvas p-4">
<Auth
setLoggedIn={setIsAuthenticated}
setIsAdmin={setIsAdmin}
@@ -152,12 +152,12 @@ const AppContent: FC = () => {
}
return (
<div className="h-screen w-screen flex flex-col bg-dark-bg-darkest overflow-y-hidden overflow-x-hidden relative">
<div className="h-screen w-screen flex flex-col bg-deepest overflow-y-hidden overflow-x-hidden relative">
<div className="flex-1 min-h-0 relative">
{tabs.map((tab) => (
<div
key={tab.id}
className={`absolute inset-0 mb-2 ${tab.id === currentTab ? "visible" : "invisible"} ${ready ? "opacity-100" : "opacity-0"}`}
className={`absolute inset-0 mb-2 bg-elevated ${tab.id === currentTab ? "visible" : "invisible"} ${ready ? "opacity-100" : "opacity-0"}`}
>
<Terminal
ref={tab.terminalRef}
@@ -167,11 +167,11 @@ const AppContent: FC = () => {
</div>
))}
{tabs.length === 0 && (
<div className="flex flex-col items-center justify-center h-full text-white gap-3 px-4 text-center">
<div className="flex flex-col items-center justify-center h-full text-foreground gap-3 px-4 text-center">
<h1 className="text-lg font-semibold">
{t("mobile.selectHostToStart")}
</h1>
<p className="text-sm text-gray-300 max-w-xs">
<p className="text-sm text-foreground-secondary max-w-xs">
{t("mobile.limitedSupportMessage")}
</p>
<button

8
src/ui/mobile/apps/navigation/BottomNavbar.tsx
View File

@@ -11,7 +11,7 @@ export function BottomNavbar({ onSidebarOpenClick }: MenuProps) {
const { tabs, currentTab, setCurrentTab, removeTab } = useTabs();
return (
<div className="w-full h-[80px] bg-dark-bg flex items-center p-2 gap-2">
<div className="w-full h-[80px] bg-canvas flex items-center p-2 gap-2">
<Button
className="w-[40px] h-[40px] flex-shrink-0"
variant="outline"
@@ -30,8 +30,8 @@ export function BottomNavbar({ onSidebarOpenClick }: MenuProps) {
<Button
variant="outline"
className={cn(
"h-10 rounded-r-none !px-3 border-1 border-dark-border",
tab.id === currentTab && "!bg-dark-bg-darkest !text-white",
"h-10 rounded-r-none !px-3 border-1 border-edge",
tab.id === currentTab && "!bg-deepest !text-foreground",
)}
onClick={() => setCurrentTab(tab.id)}
>
@@ -40,7 +40,7 @@ export function BottomNavbar({ onSidebarOpenClick }: MenuProps) {
</Button>
<Button
variant="outline"
className="h-10 rounded-l-none !px-2 border-1 border-dark-border"
className="h-10 rounded-l-none !px-2 border-1 border-edge"
onClick={() => removeTab(tab.id)}
>
<X className="h-4 w-4" />

6
src/ui/mobile/apps/navigation/LeftSidebar.tsx
View File

@@ -181,7 +181,7 @@ export function LeftSidebar({
<SidebarProvider open={isSidebarOpen}>
<Sidebar>
<SidebarHeader>
<SidebarGroupLabel className="text-lg font-bold text-white">
<SidebarGroupLabel className="text-lg font-bold text-foreground">
Termix
<Button
variant="outline"
@@ -194,12 +194,12 @@ export function LeftSidebar({
</SidebarHeader>
<Separator />
<SidebarContent className="px-2 py-2">
<div className="!bg-dark-bg-input rounded-lg mb-2">
<div className="!bg-field rounded-lg mb-2">
<Input
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder={t("placeholders.searchHostsAny")}
className="w-full h-8 text-sm border-2 !bg-dark-bg-input border-dark-border rounded-md"
className="w-full h-8 text-sm border-2 !bg-field border-edge rounded-md"
autoComplete="off"
/>
</div>

4
src/ui/mobile/apps/navigation/hosts/FolderCard.tsx
View File

@@ -53,9 +53,9 @@ export function FolderCard({
};
return (
<div className="bg-dark-bg-darker border-2 border-dark-border rounded-lg overflow-hidden p-0 m-0">
<div className="bg-elevated border-2 border-edge rounded-lg overflow-hidden p-0 m-0">
<div
className={`px-4 py-3 relative ${isExpanded ? "border-b-2" : ""} bg-dark-bg-header`}
className={`px-4 py-3 relative ${isExpanded ? "border-b-2" : ""} bg-header`}
>
<div className="flex gap-2 pr-10">
<div className="flex-shrink-0 flex items-center">

4
src/ui/mobile/apps/navigation/hosts/Host.tsx
View File

@@ -75,7 +75,7 @@ export function Host({ host, onHostConnect }: HostProps): React.ReactElement {
{host.enableTerminal && (
<Button
variant="outline"
className="!px-2 border-1 w-[60px] border-dark-border"
className="!px-2 border-1 w-[60px] border-edge"
onClick={handleTerminalClick}
>
<Terminal />
@@ -88,7 +88,7 @@ export function Host({ host, onHostConnect }: HostProps): React.ReactElement {
{tags.map((tag: string) => (
<div
key={tag}
className="bg-dark-bg border-1 border-dark-border pl-2 pr-2 rounded-[10px]"
className="bg-canvas border-1 border-edge pl-2 pr-2 rounded-[10px]"
>
<p className="text-sm">{tag}</p>
</div>

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

@@ -12,6 +12,8 @@ import { Unicode11Addon } from "@xterm/addon-unicode11";
import { WebLinksAddon } from "@xterm/addon-web-links";
import { useTranslation } from "react-i18next";
import { isElectron, getCookie } from "@/ui/main-axios.ts";
import { useTheme } from "@/components/theme-provider";
import { TERMINAL_THEMES } from "@/constants/terminal-themes";
interface HostConfig {
id?: number;
@@ -45,6 +47,7 @@ export const Terminal = forwardRef<TerminalHandle, SSHTerminalProps>(
function SSHTerminal({ hostConfig, isVisible }, ref) {
const { t } = useTranslation();
const { instance: terminal, ref: xtermRef } = useXTerm();
const { theme: appTheme } = useTheme();
const fitAddonRef = useRef<FitAddon | null>(null);
const webSocketRef = useRef<WebSocket | null>(null);
const resizeTimeout = useRef<NodeJS.Timeout | null>(null);
@@ -65,6 +68,13 @@ export const Terminal = forwardRef<TerminalHandle, SSHTerminalProps>(
const notifyTimerRef = useRef<NodeJS.Timeout | null>(null);
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;
useEffect(() => {
isVisibleRef.current = isVisible;
}, [isVisible]);
@@ -270,7 +280,7 @@ export const Terminal = forwardRef<TerminalHandle, SSHTerminalProps>(
fontSize: 14,
fontFamily:
'"Caskaydia Cove Nerd Font Mono", "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
theme: { background: "#09090b", foreground: "#f7f7f7" },
theme: themeColors,
allowTransparency: true,
convertEol: true,
windowsMode: false,
@@ -419,7 +429,7 @@ export const Terminal = forwardRef<TerminalHandle, SSHTerminalProps>(
setIsReady(false);
isFittingRef.current = false;
};
}, [xtermRef, terminal, hostConfig, isAuthenticated]);
}, [xtermRef, terminal, hostConfig, isAuthenticated, isDarkMode]);
useEffect(() => {
if (!isVisible || !isReady || !fitAddonRef.current || !terminal) {
@@ -477,20 +487,32 @@ style.innerHTML = `
font-display: swap;
}
/* Light theme scrollbars */
.xterm .xterm-viewport::-webkit-scrollbar {
width: 8px;
background: transparent;
}
.xterm .xterm-viewport::-webkit-scrollbar-thumb {
background: rgba(180,180,180,0.7);
background: rgba(0,0,0,0.3);
border-radius: 4px;
}
.xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
background: rgba(120,120,120,0.9);
background: rgba(0,0,0,0.5);
}
.xterm .xterm-viewport {
scrollbar-width: thin;
scrollbar-color: rgba(180,180,180,0.7) transparent;
scrollbar-color: rgba(0,0,0,0.3) transparent;
}
/* Dark theme scrollbars */
.dark .xterm .xterm-viewport::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.3);
}
.dark .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.5);
}
.dark .xterm .xterm-viewport {
scrollbar-color: rgba(255,255,255,0.3) transparent;
}
.xterm {

8
src/ui/mobile/apps/terminal/TerminalKeyboard.tsx
View File

@@ -2,6 +2,8 @@ import React, { useState, useCallback, useEffect } from "react";
import Keyboard from "react-simple-keyboard";
import "react-simple-keyboard/build/css/index.css";
import "./kb-dark-theme.css";
import "./kb-light-theme.css";
import { useTheme } from "@/components/theme-provider";
interface TerminalKeyboardProps {
onSendInput: (input: string) => void;
@@ -15,6 +17,10 @@ export function TerminalKeyboard({
const [layoutName, setLayoutName] = useState("default");
const [isCtrl, setIsCtrl] = useState(false);
const [isAlt, setIsAlt] = useState(false);
const { theme: appTheme } = useTheme();
const isDarkMode = appTheme === "dark" ||
(appTheme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);
useEffect(() => {
if (onLayoutChange) {
@@ -195,7 +201,7 @@ export function TerminalKeyboard({
"{pgUp}": "pgUp",
"{pgDn}": "pgDn",
}}
theme={"hg-theme-default dark-theme"}
theme={`hg-theme-default ${isDarkMode ? "dark-theme" : "light-theme"}`}
useTouchEvents={true}
disableButtonHold={true}
buttonTheme={buttonTheme}

29
src/ui/mobile/apps/terminal/kb-light-theme.css Normal file
View File

@@ -0,0 +1,29 @@
.simple-keyboard.light-theme {
background-color: #f3f4f6;
border-radius: 0;
}
.simple-keyboard.light-theme .hg-button {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
background: #ffffff;
color: #18181b;
border-bottom-color: #d1d5db;
border: 1px solid #e5e7eb;
}
.simple-keyboard.light-theme .hg-button:active {
background: #e5e7eb;
color: #18181b;
}
#root .simple-keyboard.light-theme + .simple-keyboard-preview {
background: #e5e7eb;
}
.light-theme .hg-button.key-active {
background: #d1d5db;
color: #18181b;
}

8
src/ui/mobile/authentication/Auth.tsx
View File

@@ -562,7 +562,7 @@ export function Auth({
const Spinner = (
<svg
className="animate-spin mr-2 h-4 w-4 text-white inline-block"
className="animate-spin mr-2 h-4 w-4 text-foreground inline-block"
viewBox="0 0 24 24"
>
<circle
@@ -585,7 +585,7 @@ export function Auth({
if (isReactNativeWebView() && mobileAuthSuccess) {
return (
<div
className={`w-full max-w-md flex flex-col bg-dark-bg overflow-y-auto my-2 ${className || ""}`}
className={`w-full max-w-md flex flex-col bg-canvas overflow-y-auto thin-scrollbar my-2 ${className || ""}`}
style={{ maxHeight: "calc(100vh - 1rem)" }}
{...props}
>
@@ -620,7 +620,7 @@ export function Auth({
return (
<div
className={`w-full max-w-md flex flex-col bg-dark-bg overflow-y-auto my-2 ${className || ""}`}
className={`w-full max-w-md flex flex-col bg-canvas overflow-y-auto thin-scrollbar my-2 ${className || ""}`}
style={{ maxHeight: "calc(100vh - 1rem)" }}
{...props}
>
@@ -1094,7 +1094,7 @@ export function Auth({
</form>
)}
<div className="mt-6 pt-4 border-t border-dark-border">
<div className="mt-6 pt-4 border-t border-edge">
<div className="flex items-center justify-between">
<div>
<Label className="text-sm text-muted-foreground">

8
src/ui/mobile/navigation/BottomNavbar.tsx
View File

@@ -11,7 +11,7 @@ export function BottomNavbar({ onSidebarOpenClick }: MenuProps) {
const { tabs, currentTab, setCurrentTab, removeTab } = useTabs();
return (
<div className="w-full h-[50px] bg-dark-bg items-center p-1">
<div className="w-full h-[50px] bg-canvas items-center p-1">
<div className="flex gap-2 !mb-0.5">
<Button
className="w-[40px] h-[40px] flex-shrink-0"
@@ -31,8 +31,8 @@ export function BottomNavbar({ onSidebarOpenClick }: MenuProps) {
<Button
variant="outline"
className={cn(
"h-10 rounded-r-none !px-3 border-1 border-dark-border",
tab.id === currentTab && "!bg-dark-bg-darkest !text-white",
"h-10 rounded-r-none !px-3 border-1 border-edge",
tab.id === currentTab && "!bg-deepest !text-foreground",
)}
onClick={() => setCurrentTab(tab.id)}
>
@@ -41,7 +41,7 @@ export function BottomNavbar({ onSidebarOpenClick }: MenuProps) {
</Button>
<Button
variant="outline"
className="h-10 rounded-l-none !px-2 border-1 border-dark-border"
className="h-10 rounded-l-none !px-2 border-1 border-edge"
onClick={() => removeTab(tab.id)}
>
<X className="h-4 w-4" />

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

@@ -181,7 +181,7 @@ export function LeftSidebar({
<SidebarProvider open={isSidebarOpen}>
<Sidebar>
<SidebarHeader>
<SidebarGroupLabel className="text-lg font-bold text-white">
<SidebarGroupLabel className="text-lg font-bold text-foreground">
Termix
<Button
variant="outline"
@@ -195,12 +195,12 @@ export function LeftSidebar({
<Separator />
<SidebarContent>
<SidebarGroup className="flex flex-col gap-y-2">
<div className="!bg-dark-bg-input rounded-lg">
<div className="!bg-field rounded-lg">
<Input
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder={t("placeholders.searchHostsAny")}
className="w-full h-8 text-sm border-2 !bg-dark-bg-input border-dark-border rounded-md"
className="w-full h-8 text-sm border-2 !bg-field border-edge rounded-md"
autoComplete="off"
/>
</div>

4
src/ui/mobile/navigation/hosts/FolderCard.tsx
View File

@@ -53,9 +53,9 @@ export function FolderCard({
};
return (
<div className="bg-dark-bg-darker border-2 border-dark-border rounded-lg overflow-hidden p-0 m-0">
<div className="bg-elevated border-2 border-edge rounded-lg overflow-hidden p-0 m-0">
<div
className={`px-4 py-3 relative ${isExpanded ? "border-b-2" : ""} bg-dark-bg-header`}
className={`px-4 py-3 relative ${isExpanded ? "border-b-2" : ""} bg-header`}
>
<div className="flex gap-2 pr-10">
<div className="flex-shrink-0 flex items-center">

4
src/ui/mobile/navigation/hosts/Host.tsx
View File

@@ -95,7 +95,7 @@ export function Host({ host, onHostConnect }: HostProps): React.ReactElement {
{host.enableTerminal && (
<Button
variant="outline"
className="!px-2 border-1 w-[60px] border-dark-border"
className="!px-2 border-1 w-[60px] border-edge"
onClick={handleTerminalClick}
>
<Terminal />
@@ -108,7 +108,7 @@ export function Host({ host, onHostConnect }: HostProps): React.ReactElement {
{tags.map((tag: string) => (
<div
key={tag}
className="bg-dark-bg border-1 border-dark-border pl-2 pr-2 rounded-[10px]"
className="bg-canvas border-1 border-edge pl-2 pr-2 rounded-[10px]"
>
<p className="text-sm">{tag}</p>
</div>