mirror of
https://github.com/Termix-SSH/Termix.git
synced 2026-07-16 05:13:36 +00:00
v1.10.0 (#471)
* fix select edit host but not update view (#438) * fix: Checksum issue with chocolatey * fix: Remove homebrew old stuff * Add Korean translation (#439) Co-authored-by: 송준우 <2484@coreit.co.kr> * feat: Automate flatpak * fix: Add imagemagik to electron builder to resolve build error * fix: Build error with runtime repo flag * fix: Flatpak runtime error and install freedesktop ver warning * fix: Flatpak runtime error and install freedesktop ver warning * feat: Re-add homebrew cask and move scripts to backend * fix: No sandbox flag issue * fix: Change name for electron macos cask output * fix: Sandbox error with Linux * fix: Remove comming soon for app stores in readme * Adding Comment at the end of the public_key on the host on deploy (#440) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * -Add New Interface for Credential DB -Add Credential Name as a comment into the server authorized_key file --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> * Sudo auto fill password (#441) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * Feature Sudo password auto-fill; * Fix locale json shema; --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> * Added Italian Language; (#445) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * Added Italian Language; --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> * Auto collapse snippet folders (#448) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * feat: Add collapsable snippets (customizable in user profile) * Translations (#447) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * Added Italian Language; * Fix translations; Removed duplicate keys, synchronised other languages using English as the source, translated added keys, fixed inaccurate translations. --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> * Remove PTY-level keepalive (#449) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * Remove PTY-level keepalive to prevent unwanted terminal output; use SSH-level keepalive instead --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> * feat: Seperate server stats and tunnel management (improved both UI's) then started initial docker implementation * fix: finalize adding docker to db * feat: Add docker management support (local squash) * Fix RBAC role system bugs and improve UX (#446) * Fix RBAC role system bugs and improve UX - Fix user list dropdown selection in host sharing - Fix role sharing permissions to include role-based access - Fix translation template interpolation for success messages - Standardize system roles to admin and user only - Auto-assign user role to new registrations - Remove blocking confirmation dialogs in modal contexts - Add missing i18n keys for common actions - Fix button type to prevent unintended form submissions * Enhance RBAC system with UI improvements and security fixes - Move role assignment to Users tab with per-user role management - Protect system roles (admin/user) from editing and manual assignment - Simplify permission system: remove Use level, keep View and Manage - Hide Update button and Sharing tab for view-only/shared hosts - Prevent users from sharing hosts with themselves - Unify table and modal styling across admin panels - Auto-assign system roles on user registration - Add permission metadata to host interface * Add empty state message for role assignment - Display helpful message when no custom roles available - Clarify that system roles are auto-assigned - Add noCustomRolesToAssign translation in English and Chinese * fix: Prevent credential sharing errors for shared hosts - Skip credential resolution for shared hosts with credential authentication to prevent decryption errors (credentials are encrypted per-user) - Add warning alert in sharing tab when host uses credential authentication - Inform users that shared users cannot connect to credential-based hosts - Add translations for credential sharing warning (EN/ZH) This prevents authentication failures when sharing hosts configured with credential authentication while maintaining security by keeping credentials isolated per user. * feat: Improve rbac UI and fixes some bugs --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> Co-authored-by: LukeGus <bugattiguy527@gmail.com> * SOCKS5 support (#452) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * SOCKS5 support Adding single and chain socks5 proxy support * fix: cleanup files --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> Co-authored-by: LukeGus <bugattiguy527@gmail.com> * Notes and Expiry fields add (#453) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * Notes and Expiry add * fix: cleanup files --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> Co-authored-by: LukeGus <bugattiguy527@gmail.com> * fix: ssh host types * fix: sudo incorrect styling and remove expiration date * feat: add sudo password and add diagonal bg's * fix: snippet running on enter key * fix: base64 decoding * fix: improve server stats / rbac * fix: wrap ssh host json export in hosts array * feat: auto trim host inputs, fix file manager jump hosts, dashboard prevent duplicates, file manager terminal not size updating, improve left sidebar sorting, hide/show tags, add apperance user profile tab, add new host manager tabs. * feat: improve terminal connection speed * fix: sqlite constriant errors and support non-root user (nginx perm issue) * feat: add beta syntax highlighing to terminal * feat: update imports and improve admin settings user management * chore: update translations * chore: update translations * feat: Complete light mode implementation with semantic theme system (#450) - Add comprehensive light/dark mode CSS variables with semantic naming - Implement theme-aware scrollbars using CSS variables - Add light mode backgrounds: --bg-base, --bg-elevated, --bg-surface, etc. - Add theme-aware borders: --border-base, --border-panel, --border-subtle - Add semantic text colors: --foreground-secondary, --foreground-subtle - Convert oklch colors to hex for better compatibility - Add theme awareness to CodeMirror editors - Update dark mode colors for consistency (background, sidebar, card, muted, input) - Add Tailwind color mappings for semantic classes Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> * fix: syntax errors * chore: updating/match themes and split admin settings * feat: add translation workflow and remove old translation.json * fix: translation workflow error * fix: translation workflow error * feat: improve translation system and update workflow * fix: wrong path for translations * fix: change translation to flat files * fix: gh rule error * chore: auto-translate to multiple languages (#458) * chore: improve organization and made a few styling changes in host manager * feat: improve terminal stability and split out the host manager * fix: add unnversiioned files * chore: migrate all to use the new theme system * fix: wrong animation line colors * fix: rbac implementation general issues (local squash) * fix: remove unneeded files * feat: add 10 new langs * chore: update gitnore * chore: auto-translate to multiple languages (#459) * fix: improve tunnel system * fix: properly split tabs, still need to fix up the host manager * chore: cleanup files (possible RC) * feat: add norwegian * chore: auto-translate to multiple languages (#461) * fix: small qol fixes and began readme update * fix: run cleanup script * feat: add docker docs button * feat: general bug fixes and readme updates * fix: translations * chore: auto-translate to multiple languages (#462) * fix: cleanup files * fix: test new translation issue and add better server-stats support * fix: fix translate error * chore: auto-translate to multiple languages (#463) * fix: fix translate mismatching text * chore: auto-translate to multiple languages (#465) * fix: fix translate mismatching text * fix: fix translate mismatching text * chore: auto-translate to multiple languages (#466) * fix: fix translate mismatching text * fix: fix translate mismatching text * fix: fix translate mismatching text * chore: auto-translate to multiple languages (#467) * fix: fix translate mismatching text * chore: auto-translate to multiple languages (#468) * feat: add to readme, a few qol changes, and improve server stats in general * chore: auto-translate to multiple languages (#469) * feat: turned disk uage into graph and fixed issue with termina console * fix: electron build error and hide icons when shared * chore: run clean * fix: general server stats issues, file manager decoding, ui qol * fix: add dashboard line breaks * fix: docker console error * fix: docker console not loading and mismatched stripped background for electron * fix: docker console not loading * chore: docker console not loading in docker * chore: translate readme to chinese * chore: match package lock to package json * chore: nginx config issue for dokcer console * chore: auto-translate to multiple languages (#470) --------- Co-authored-by: Tran Trung Kien <kientt13.7@gmail.com> Co-authored-by: junu <bigdwarf_@naver.com> Co-authored-by: 송준우 <2484@coreit.co.kr> Co-authored-by: SlimGary <trash.slim@gmail.com> Co-authored-by: Nunzio Marfè <nunzio.marfe@protonmail.com> Co-authored-by: Wesley Reid <starhound@lostsouls.org> Co-authored-by: ZacharyZcR <zacharyzcr1984@gmail.com> Co-authored-by: Denis <38875137+Medvedinca@users.noreply.github.com> Co-authored-by: Peet McKinney <68706879+PeetMcK@users.noreply.github.com>
This commit is contained in:
Luke Gustafson
@@ -30,14 +30,12 @@ const AppContent: FC = () => {
|
||||
useEffect(() => {
|
||||
const checkAuth = () => {
|
||||
setAuthLoading(true);
|
||||
// Don't optimistically set isAuthenticated before checking
|
||||
getUserInfo()
|
||||
.then((meRes) => {
|
||||
if (typeof meRes === "string" || !meRes.username) {
|
||||
setIsAuthenticated(false);
|
||||
setIsAdmin(false);
|
||||
setUsername(null);
|
||||
// Clear invalid token
|
||||
localStorage.removeItem("jwt");
|
||||
} else {
|
||||
setIsAuthenticated(true);
|
||||
@@ -50,12 +48,11 @@ const AppContent: FC = () => {
|
||||
setIsAdmin(false);
|
||||
setUsername(null);
|
||||
|
||||
// Clear invalid token on any auth error
|
||||
localStorage.removeItem("jwt");
|
||||
|
||||
const errorCode = err?.response?.data?.code;
|
||||
if (errorCode === "SESSION_EXPIRED") {
|
||||
console.warn("Session expired - please log in again");
|
||||
console.warn(t("errors.sessionExpired"));
|
||||
}
|
||||
})
|
||||
.finally(() => setAuthLoading(false));
|
||||
@@ -124,7 +121,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 +132,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 +149,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 +164,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
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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,15 @@ export const Terminal = forwardRef<TerminalHandle, SSHTerminalProps>(
|
||||
const notifyTimerRef = useRef<NodeJS.Timeout | null>(null);
|
||||
const DEBOUNCE_MS = 140;
|
||||
|
||||
const isDarkMode =
|
||||
appTheme === "dark" ||
|
||||
(appTheme === "system" &&
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches);
|
||||
const themeColors = {
|
||||
background: isDarkMode ? "#0e0e10" : "#ffffff",
|
||||
foreground: isDarkMode ? "#f7f7f7" : "#18181b",
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
isVisibleRef.current = isVisible;
|
||||
}, [isVisible]);
|
||||
@@ -270,7 +282,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 +431,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 +489,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 {
|
||||
|
||||
@@ -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,12 @@ 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 +203,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}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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">
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -11,12 +11,13 @@ import {
|
||||
SidebarProvider,
|
||||
} from "@/components/ui/sidebar.tsx";
|
||||
import { Button } from "@/components/ui/button.tsx";
|
||||
import { ChevronUp, Menu, User2 } from "lucide-react";
|
||||
import { ChevronUp, Menu, User2, Moon, Sun } from "lucide-react";
|
||||
import React, { useState, useEffect, useMemo, useCallback } from "react";
|
||||
import { Separator } from "@/components/ui/separator.tsx";
|
||||
import { FolderCard } from "@/ui/mobile/navigation/hosts/FolderCard.tsx";
|
||||
import { getSSHHosts, logoutUser } from "@/ui/main-axios.ts";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useTheme } from "@/components/theme-provider";
|
||||
import { Input } from "@/components/ui/input.tsx";
|
||||
import {
|
||||
DropdownMenu,
|
||||
@@ -81,6 +82,7 @@ export function LeftSidebar({
|
||||
username,
|
||||
}: LeftSidebarProps) {
|
||||
const { t } = useTranslation();
|
||||
const { theme, setTheme } = useTheme();
|
||||
const [hosts, setHosts] = useState<SSHHost[]>([]);
|
||||
const [hostsLoading] = useState(false);
|
||||
const [hostsError, setHostsError] = useState<string | null>(null);
|
||||
@@ -181,7 +183,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 +197,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>
|
||||
@@ -252,7 +254,23 @@ export function LeftSidebar({
|
||||
className="min-w-[var(--radix-popper-anchor-width)] bg-sidebar-accent text-sidebar-accent-foreground border border-border rounded-md shadow-2xl p-1"
|
||||
>
|
||||
<DropdownMenuItem
|
||||
className="rounded px-2 py-1.5 hover:bg-white/15 hover:text-accent-foreground focus:bg-white/20 focus:text-accent-foreground cursor-pointer focus:outline-none"
|
||||
className="rounded px-2 py-1.5 hover:bg-surface-hover hover:text-accent-foreground focus:bg-surface-hover focus:text-accent-foreground cursor-pointer focus:outline-none"
|
||||
onClick={() =>
|
||||
setTheme(theme === "dark" ? "light" : "dark")
|
||||
}
|
||||
>
|
||||
{theme === "dark" ? (
|
||||
<>
|
||||
<span>{t("theme.switchToLight")}</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span>{t("theme.switchToDark")}</span>
|
||||
</>
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
className="rounded px-2 py-1.5 hover:bg-surface-hover hover:text-accent-foreground focus:bg-surface-hover focus:text-accent-foreground cursor-pointer focus:outline-none"
|
||||
onClick={handleLogout}
|
||||
>
|
||||
<span>{t("common.logout")}</span>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user