Ethica/Termix
1
0 Fork 0
mirror of https://github.com/Termix-SSH/Termix.git synced 2026-10-29 14:45:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: move the terminal fully into the ssh-terminal plugin (B9)

Browse Source
This commit is contained in:
LukeGus committed 2026-09-23 21:41:22 -05:00
1 parent 535126fd1b
commit 79d77678c9
309 files changed
+41789 -14958
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/ui/sidebar/AdminImageStorageSection.tsx
-249
View File
@@ -1,249 +0,0 @@
import { useTranslation } from "react-i18next";
import { ImageIcon } from "lucide-react";
import { Button } from "@/components/button";
import { Input } from "@/components/input";
import type {
TerminalImageStorageMode,
TerminalImageStorageSettings,
TerminalImageStorageTestResult,
} from "@/api/settings-api";
import { AccordionSection } from "./AdminSettingsShared";
const MODE_LABEL_KEYS: Record<TerminalImageStorageMode, string> = {
auto: "admin.imageStorageModeAuto",
local: "admin.imageStorageModeLocal",
"remote-sftp": "admin.imageStorageModeRemoteSftp",
};
const SELECTED_MODE_LABEL_KEYS: Record<
TerminalImageStorageTestResult["selectedMode"],
string
> = {
local: "admin.imageStorageModeLocal",
"remote-sftp": "admin.imageStorageModeRemoteSftp",
unavailable: "admin.imageStorageSelectedModeUnavailable",
};
export function AdminImageStorageSection({
open,
onToggle,
settings,
setSettings,
localDir,
setLocalDir,
instanceId,
setInstanceId,
saving,
testing,
testResult,
onSave,
onTest,
}: {
open: boolean;
onToggle: () => void;
settings: TerminalImageStorageSettings | null;
setSettings: (settings: TerminalImageStorageSettings) => void;
localDir: string;
setLocalDir: (value: string) => void;
instanceId: string;
setInstanceId: (value: string) => void;
saving: boolean;
testing: boolean;
testResult: TerminalImageStorageTestResult | null;
onSave: () => void;
onTest: () => void;
}) {
const { t } = useTranslation();
return (
<AccordionSection
label={t("admin.sectionImageStorage")}
icon={<ImageIcon className="size-3.5" />}
open={open}
onToggle={onToggle}
>
{settings === null ? (
<div className="pt-3 text-xs text-muted-foreground">
{t("common.loading")}
</div>
) : (
<div className="@container flex flex-col gap-0 pt-2">
<div className="flex flex-col gap-2 py-3 border-b border-border">
<div className="flex flex-col gap-0.5">
<span className="text-sm font-medium leading-snug">
{t("admin.imageStorageMode")}
</span>
<span className="text-xs text-muted-foreground leading-snug">
{t("admin.imageStorageModeDesc")}
</span>
</div>
<div className="flex flex-wrap gap-1">
{(Object.keys(MODE_LABEL_KEYS) as TerminalImageStorageMode[]).map(
(mode) => (
<button
key={mode}
type="button"
aria-pressed={settings.mode === mode}
onClick={() => setSettings({ ...settings, mode })}
className={`whitespace-nowrap px-2 py-1 text-[10px] font-semibold border transition-colors ${settings.mode === mode ? "border-accent-brand/40 bg-accent-brand/10 text-accent-brand" : "border-border text-muted-foreground hover:text-foreground"}`}
>
{t(MODE_LABEL_KEYS[mode])}
</button>
),
)}
</div>
</div>
<div className="grid grid-cols-1 gap-x-4 gap-y-3 py-3 @md:grid-cols-2 border-b border-border">
<label className="flex flex-col gap-1 text-xs">
<span className="font-medium text-foreground">
{t("admin.imageStorageLocalDir")}
</span>
<Input
aria-label={t("admin.imageStorageLocalDir")}
value={localDir}
placeholder={t("admin.imageStorageLocalDirPlaceholder")}
onChange={(event) => setLocalDir(event.target.value)}
className="h-8 text-xs"
/>
<span className="text-muted-foreground">
{t("admin.imageStorageLocalDirDesc")}
</span>
</label>
<label className="flex flex-col gap-1 text-xs">
<span className="font-medium text-foreground">
{t("admin.imageStorageHostPath")}
</span>
<Input
aria-label={t("admin.imageStorageHostPath")}
value={settings.hostPath}
onChange={(event) =>
setSettings({ ...settings, hostPath: event.target.value })
}
className="h-8 text-xs"
/>
<span className="text-muted-foreground">
{t("admin.imageStorageHostPathDesc")}
</span>
</label>
<label className="flex flex-col gap-1 text-xs">
<span className="font-medium text-foreground">
{t("admin.imageStorageTtl")}
</span>
<Input
aria-label={t("admin.imageStorageTtl")}
type="number"
min={0}
value={settings.ttlMs}
onChange={(event) =>
setSettings({
...settings,
ttlMs: Number(event.target.value),
})
}
className="h-8 text-xs"
/>
</label>
<label className="flex flex-col gap-1 text-xs">
<span className="font-medium text-foreground">
{t("admin.imageStorageMaxCount")}
</span>
<Input
aria-label={t("admin.imageStorageMaxCount")}
type="number"
min={1}
value={settings.maxCount}
onChange={(event) =>
setSettings({
...settings,
maxCount: Number(event.target.value),
})
}
className="h-8 text-xs"
/>
</label>
<label className="flex flex-col gap-1 text-xs">
<span className="font-medium text-foreground">
{t("admin.imageStorageMaxBytes")}
</span>
<Input
aria-label={t("admin.imageStorageMaxBytes")}
type="number"
min={1048576}
value={settings.maxBytes}
onChange={(event) =>
setSettings({
...settings,
maxBytes: Number(event.target.value),
})
}
className="h-8 text-xs"
/>
</label>
</div>
<div className="flex flex-col gap-2 py-3 border-b border-border">
<div className="flex flex-col gap-0.5">
<span className="text-sm font-medium leading-snug">
{t("admin.imageStorageInstanceId")}
</span>
<span className="text-xs text-muted-foreground leading-snug">
{t("admin.imageStorageInstanceIdDesc")}
</span>
</div>
<Input
aria-label={t("admin.imageStorageInstanceId")}
value={instanceId}
onChange={(event) => setInstanceId(event.target.value)}
className="h-8 w-full @md:w-64 text-xs"
/>
</div>
{testResult && (
<div className="py-2 text-xs text-muted-foreground border-b border-border">
<div>
{testResult.connected
? t("admin.imageStorageTestConnected")
: t("admin.imageStorageTestNotConnected")}
</div>
<div>
{t("admin.imageStorageTestSelectedMode", {
mode: t(SELECTED_MODE_LABEL_KEYS[testResult.selectedMode]),
})}
</div>
{testResult.localHostVisible !== null && (
<div>
{testResult.localHostVisible
? t("admin.imageStorageTestLocalVisible")
: t("admin.imageStorageTestLocalNotVisible")}
</div>
)}
</div>
)}
<div className="flex gap-2 pt-3">
<Button
size="sm"
variant="outline"
className="border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
disabled={saving}
onClick={onSave}
>
{saving ? t("common.saving") : t("common.save")}
</Button>
<Button
size="sm"
variant="outline"
disabled={testing}
onClick={onTest}
>
{testing
? t("admin.imageStorageTesting")
: t("admin.imageStorageTest")}
</Button>
</div>
</div>
)}
</AccordionSection>
);
}
src/ui/sidebar/AdminSettingsPanel.tsx
+1 -171
View File
@@ -41,8 +41,6 @@ import {
updateSecondFactorAfterExternalLogin,
getOidcSilentLoginDefault,
updateOidcSilentLoginDefault,
getCommandHistoryEnabled,
updateCommandHistoryEnabled,
isElectron,
getUserRoles,
} from "@/main-axios";
@@ -51,14 +49,9 @@ import {
updateHostDefaults,
getAnalyticsEnabled,
updateAnalyticsEnabled,
getTerminalImageStorageSettings,
updateTerminalImageStorageSettings,
testTerminalImageStorage,
getBranding,
updateBranding,
type HostDefaults,
type TerminalImageStorageSettings,
type TerminalImageStorageTestResult,
type BrandingSettings,
} from "@/api/settings-api";
import {
@@ -94,12 +87,7 @@ import {
type AdminUser,
} from "./AdminManagementSections";
import { toast } from "sonner";
import {
getTerminalSessionSettings,
updateTerminalSessionSettings,
getStepCaSettings,
updateStepCaSettings,
} from "@/api/settings-api";
import { getStepCaSettings, updateStepCaSettings } from "@/api/settings-api";
import { getDatabaseTransferUrl } from "@/lib/database-transfer-url";
import {
AdminDatabaseSection,
@@ -118,17 +106,6 @@ import {
AdminUnlinkAccountDialog,
} from "./AdminUserDialogs";
import { AdminUserManagePanel } from "./AdminUserManagePanel";
import {
TOUCH_INPUT_DEFAULTS,
type TouchInputSettings,
} from "@/types/touch-input-settings";
import {
getTouchInputSettings,
updateTouchInputSettings,
} from "@/api/touch-input-settings-api";
import { cacheTouchInputSettings } from "@/features/terminal/touch-input-settings-store";
import { AdminTouchInputSection } from "./AdminTouchInputSection";
import { AdminImageStorageSection } from "./AdminImageStorageSection";
import { AdminBrandingSection } from "./AdminBrandingSection";
type ApiErrorLike = {
@@ -162,18 +139,11 @@ export function AdminSettingsPanel({
const [passwordLoginForced, setPasswordLoginForced] = useState(false);
const [allowPasswordReset, setAllowPasswordReset] = useState(true);
const [sessionTimeout, setSessionTimeout] = useState("24");
const [terminalTimeout, setTerminalTimeout] = useState("30");
useEffect(() => {
getTerminalSessionSettings()
.then((settings) => setTerminalTimeout(String(settings.timeoutMinutes)))
.catch(() => {});
}, []);
const [statusInterval, setStatusInterval] = useState("60");
const [metricsInterval, setMetricsInterval] = useState("30");
const [guacEnabled, setGuacEnabled] = useState(false);
const [guacUrl, setGuacUrl] = useState("guacd:4822");
const [logLevel, setLogLevel] = useState("info");
const [commandHistoryEnabled, setCommandHistoryEnabled] = useState(true);
const [analyticsEnabled, setAnalyticsEnabled] = useState(true);
const [analyticsLocked, setAnalyticsLocked] = useState(false);
const [oidcSilentLoginDefaultLocked, setOidcSilentLoginDefaultLocked] =
@@ -204,19 +174,9 @@ export function AdminSettingsPanel({
const [notificationPrivateEndpoints, setNotificationPrivateEndpoints] =
useState<string[]>([]);
const [hostDefaults, setHostDefaults] = useState<HostDefaults>({});
const [touchInputSettings, setTouchInputSettings] =
useState<TouchInputSettings>({ ...TOUCH_INPUT_DEFAULTS });
// Terminal image storage state. localDir stays a draft: the API never
// returns the configured backend path, so it is only sent when changed.
const [imageStorageSettings, setImageStorageSettings] =
useState<TerminalImageStorageSettings | null>(null);
const [imageStorageLocalDir, setImageStorageLocalDir] = useState("");
const [imageStorageInstanceId, setImageStorageInstanceId] = useState("");
const [imageStorageSaving, setImageStorageSaving] = useState(false);
const [imageStorageTesting, setImageStorageTesting] = useState(false);
const [imageStorageTestResult, setImageStorageTestResult] =
useState<TerminalImageStorageTestResult | null>(null);
const [brandingSettings, setBrandingSettings] =
useState<BrandingSettings | null>(null);
@@ -400,14 +360,11 @@ export function AdminSettingsPanel({
oidcProv,
secondFactorExternal,
oidcSilent,
cmdHistory,
analytics,
sessionSharingEnabled,
touchInput,
notificationEndpoints,
stepCaEndpoints,
secretSourceEndpoints,
imageStorage,
branding,
] = await Promise.allSettled([
getRegistrationAllowed(),
@@ -420,14 +377,11 @@ export function AdminSettingsPanel({
getOidcAutoProvision(),
getSecondFactorAfterExternalLogin(),
getOidcSilentLoginDefault(),
getCommandHistoryEnabled(),
getAnalyticsEnabled(),
getSessionSharingGloballyEnabled(),
getTouchInputSettings(),
getNotificationPrivateEndpoints(),
getStepCaPrivateEndpoints(),
getSecretSourcePrivateEndpoints(),
getTerminalImageStorageSettings(),
getBranding(),
]);
@@ -460,9 +414,6 @@ export function AdminSettingsPanel({
setGuacEnabled(guac.value.enabled);
setGuacUrl(guac.value.url || "guacd:4822");
}
if (cmdHistory.status === "fulfilled") {
setCommandHistoryEnabled(cmdHistory.value.enabled);
}
if (analytics.status === "fulfilled") {
setAnalyticsEnabled(analytics.value.enabled);
setAnalyticsLocked(analytics.value.locked ?? false);
@@ -470,10 +421,6 @@ export function AdminSettingsPanel({
if (sessionSharingEnabled.status === "fulfilled") {
setSessionSharingGloballyEnabled(sessionSharingEnabled.value.enabled);
}
if (touchInput.status === "fulfilled") {
setTouchInputSettings(touchInput.value);
cacheTouchInputSettings(touchInput.value);
}
if (stepCaEndpoints.status === "fulfilled") {
setStepCaPrivateEndpoints(stepCaEndpoints.value);
}
@@ -483,9 +430,6 @@ export function AdminSettingsPanel({
if (notificationEndpoints.status === "fulfilled") {
setNotificationPrivateEndpoints(notificationEndpoints.value);
}
if (imageStorage.status === "fulfilled") {
setImageStorageSettings(imageStorage.value);
}
if (branding.status === "fulfilled") {
setBrandingSettings(branding.value);
}
@@ -597,17 +541,6 @@ export function AdminSettingsPanel({
}
}
async function handleToggleCommandHistory() {
const newVal = !commandHistoryEnabled;
setCommandHistoryEnabled(newVal);
try {
await updateCommandHistoryEnabled(newVal);
} catch {
setCommandHistoryEnabled(!newVal);
toast.error(t("admin.updateCommandHistoryFailed"));
}
}
async function handleToggleAnalytics() {
if (analyticsLocked) return;
const newVal = !analyticsEnabled;
@@ -679,47 +612,6 @@ export function AdminSettingsPanel({
}
}
async function saveTouchInputSettings(settings = touchInputSettings) {
try {
const saved = await updateTouchInputSettings(settings);
setTouchInputSettings(saved);
cacheTouchInputSettings(saved);
toast.success(t("admin.touchSaved"));
} catch {
toast.error(t("admin.touchSaveFailed"));
}
}
function resetTouchInputSettings() {
const defaults = { ...TOUCH_INPUT_DEFAULTS };
setTouchInputSettings(defaults);
void saveTouchInputSettings(defaults);
}
async function handleSaveImageStorage() {
if (!imageStorageSettings) return;
setImageStorageSaving(true);
try {
const saved = await updateTerminalImageStorageSettings({
mode: imageStorageSettings.mode,
hostPath: imageStorageSettings.hostPath,
ttlMs: imageStorageSettings.ttlMs,
maxCount: imageStorageSettings.maxCount,
maxBytes: imageStorageSettings.maxBytes,
...(imageStorageLocalDir.trim()
? { localDir: imageStorageLocalDir.trim() }
: {}),
});
setImageStorageSettings(saved);
setImageStorageLocalDir("");
toast.success(t("admin.imageStorageSaved"));
} catch (e) {
toast.error(apiErrorMessage(e, t("admin.imageStorageSaveFailed")));
} finally {
setImageStorageSaving(false);
}
}
async function handleSaveBranding() {
if (!brandingSettings) return;
setBrandingSaving(true);
@@ -754,24 +646,6 @@ export function AdminSettingsPanel({
}
}
async function handleTestImageStorage() {
if (!imageStorageInstanceId.trim()) {
toast.error(t("admin.imageStorageInstanceIdRequired"));
return;
}
setImageStorageTesting(true);
setImageStorageTestResult(null);
try {
setImageStorageTestResult(
await testTerminalImageStorage(imageStorageInstanceId.trim()),
);
} catch (e) {
toast.error(apiErrorMessage(e, t("admin.imageStorageTestFailed")));
} finally {
setImageStorageTesting(false);
}
}
async function handleSaveSessionTimeout() {
const hours = parseInt(sessionTimeout, 10);
if (isNaN(hours) || hours < 1 || hours > 720) {
@@ -786,20 +660,6 @@ export function AdminSettingsPanel({
}
}
async function handleSaveTerminalTimeout() {
const minutes = parseInt(terminalTimeout, 10);
if (isNaN(minutes) || minutes < 1 || minutes > 1440) {
toast.error(t("admin.terminalSessionTimeoutRange"));
return;
}
try {
await updateTerminalSessionSettings({ timeoutMinutes: minutes });
toast.success(t("admin.terminalSessionTimeoutSaved"));
} catch {
toast.error(t("admin.terminalSessionTimeoutSaveFailed"));
}
}
async function handleSaveMonitoring() {
const status = parseInt(statusInterval, 10);
const metrics = parseInt(metricsInterval, 10);
@@ -1261,14 +1121,9 @@ export function AdminSettingsPanel({
handleToggleOidcSilentLoginDefault={handleToggleOidcSilentLoginDefault}
allowPasswordReset={allowPasswordReset}
handleTogglePasswordReset={handleTogglePasswordReset}
commandHistoryEnabled={commandHistoryEnabled}
handleToggleCommandHistory={handleToggleCommandHistory}
sessionTimeout={sessionTimeout}
setSessionTimeout={setSessionTimeout}
handleSaveSessionTimeout={handleSaveSessionTimeout}
terminalTimeout={terminalTimeout}
setTerminalTimeout={setTerminalTimeout}
handleSaveTerminalTimeout={handleSaveTerminalTimeout}
statusInterval={statusInterval}
setStatusInterval={setStatusInterval}
metricsInterval={metricsInterval}
@@ -1355,22 +1210,6 @@ export function AdminSettingsPanel({
handleSaveDefaults={handleSaveHostDefaults}
/>
<AdminImageStorageSection
open={openSections.has("image-storage")}
onToggle={() => toggle("image-storage")}
settings={imageStorageSettings}
setSettings={setImageStorageSettings}
localDir={imageStorageLocalDir}
setLocalDir={setImageStorageLocalDir}
instanceId={imageStorageInstanceId}
setInstanceId={setImageStorageInstanceId}
saving={imageStorageSaving}
testing={imageStorageTesting}
testResult={imageStorageTestResult}
onSave={() => void handleSaveImageStorage()}
onTest={() => void handleTestImageStorage()}
/>
<AdminBrandingSection
open={openSections.has("branding")}
onToggle={() => toggle("branding")}
@@ -1442,15 +1281,6 @@ export function AdminSettingsPanel({
onToggle={() => toggle("plugins")}
/>
<AdminTouchInputSection
open={openSections.has("touch-input")}
onToggle={() => toggle("touch-input")}
settings={touchInputSettings}
setSettings={setTouchInputSettings}
onSave={() => void saveTouchInputSettings()}
onReset={resetTouchInputSettings}
/>
<AdminCreateUserDialog
open={createUserOpen}
onOpenChange={setCreateUserOpen}
src/ui/sidebar/AdminSettingsSections.tsx
-50
View File
@@ -54,14 +54,9 @@ type GeneralSettingsSectionProps = {
handleToggleOidcSilentLoginDefault: () => void;
allowPasswordReset: boolean;
handleTogglePasswordReset: () => void;
commandHistoryEnabled: boolean;
handleToggleCommandHistory: () => void;
sessionTimeout: string;
setSessionTimeout: Dispatch<SetStateAction<string>>;
handleSaveSessionTimeout: () => void;
terminalTimeout: string;
setTerminalTimeout: Dispatch<SetStateAction<string>>;
handleSaveTerminalTimeout: () => void;
statusInterval: string;
setStatusInterval: Dispatch<SetStateAction<string>>;
metricsInterval: string;
@@ -107,14 +102,9 @@ export function AdminGeneralSettingsSection({
handleToggleOidcSilentLoginDefault,
allowPasswordReset,
handleTogglePasswordReset,
commandHistoryEnabled,
handleToggleCommandHistory,
sessionTimeout,
setSessionTimeout,
handleSaveSessionTimeout,
terminalTimeout,
setTerminalTimeout,
handleSaveTerminalTimeout,
statusInterval,
setStatusInterval,
metricsInterval,
@@ -337,16 +327,6 @@ export function AdminGeneralSettingsSection({
onToggle={handleTogglePasswordReset}
/>
</SettingRow>
<SettingRow
label={t("admin.commandHistoryEnabled")}
description={t("admin.commandHistoryEnabledDesc")}
>
<AdminToggle
on={commandHistoryEnabled}
onToggle={handleToggleCommandHistory}
/>
</SettingRow>
<div className="flex flex-col gap-2 pt-3 mt-2">
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
{t("admin.sessionTimeout")}
@@ -377,36 +357,6 @@ export function AdminGeneralSettingsSection({
</span>
</div>
<div className="flex flex-col gap-2 pt-3 mt-2">
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
{t("admin.terminalSessionTimeout")}
</span>
<div className="flex items-center gap-2">
<Input
type="number"
min={1}
max={1440}
value={terminalTimeout}
onChange={(e) => setTerminalTimeout(e.target.value)}
className="w-20 text-sm"
/>
<span className="text-xs text-muted-foreground">
{t("admin.minutes")}
</span>
<Button
variant="outline"
size="sm"
className="text-xs border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand h-7"
onClick={handleSaveTerminalTimeout}
>
{t("common.save")}
</Button>
</div>
<span className="text-[10px] text-muted-foreground">
{t("admin.terminalSessionTimeoutDesc")}
</span>
</div>
<div className="flex flex-col gap-2 border-t border-border pt-3 mt-2">
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
{t("admin.monitoringDefaults")}
src/ui/sidebar/AdminTouchInputSection.tsx
-170
View File
@@ -1,170 +0,0 @@
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { ChevronDown, Hand } from "lucide-react";
import { Button } from "@/components/button";
import { Input } from "@/components/input";
import { SettingRow } from "@/components/section-card";
import type {
TouchInputNumericKey,
TouchInputSettings,
} from "@/types/touch-input-settings";
import { TOUCH_INPUT_NUMERIC_BOUNDS } from "@/types/touch-input-settings";
import { AccordionSection, AdminToggle } from "./AdminSettingsShared";
const fields: Array<{
key: TouchInputNumericKey;
label: string;
unit: string;
}> = [
{ key: "dragThresholdPx", label: "touchDragThreshold", unit: "px" },
{ key: "maxWheelDeltaPx", label: "touchMaxWheelDelta", unit: "px" },
{
key: "momentumSampleWindowMs",
label: "touchMomentumSampleWindow",
unit: "ms",
},
{
key: "releaseGracePeriodMs",
label: "touchReleaseGracePeriod",
unit: "ms",
},
{
key: "minimumVelocityPxPerMs",
label: "touchMinimumVelocity",
unit: "px/ms",
},
{
key: "maximumVelocityPxPerMs",
label: "touchMaximumVelocity",
unit: "px/ms",
},
{ key: "maximumDurationMs", label: "touchMaximumDuration", unit: "ms" },
{ key: "maximumTravelPx", label: "touchMaximumTravel", unit: "px" },
{ key: "decayTimeMs", label: "touchDecayTime", unit: "ms" },
{ key: "pixelsPerTick", label: "touchPixelsPerTick", unit: "px" },
{
key: "maximumFrameIntervalMs",
label: "touchMaximumFrameInterval",
unit: "ms",
},
{
key: "maximumTicksPerFrame",
label: "touchMaximumTicksPerFrame",
unit: "",
},
];
export function AdminTouchInputSection({
open,
onToggle,
settings,
setSettings,
onSave,
onReset,
}: {
open: boolean;
onToggle: () => void;
settings: TouchInputSettings;
setSettings: (settings: TouchInputSettings) => void;
onSave: () => void;
onReset: () => void;
}) {
const { t } = useTranslation();
const [advancedOpen, setAdvancedOpen] = useState(false);
return (
<AccordionSection
label={t("admin.sectionTouchInput")}
icon={<Hand className="size-3.5" />}
open={open}
onToggle={onToggle}
>
<div className="flex flex-col gap-0 pt-2">
<SettingRow
label={t("admin.touchEnabled")}
description={t("admin.touchEnabledDesc")}
>
<AdminToggle
on={settings.enabled}
onToggle={() =>
setSettings({ ...settings, enabled: !settings.enabled })
}
/>
</SettingRow>
<SettingRow
label={t("admin.touchMomentumEnabled")}
description={t("admin.touchMomentumEnabledDesc")}
>
<AdminToggle
on={settings.momentumEnabled}
onToggle={() =>
setSettings({
...settings,
momentumEnabled: !settings.momentumEnabled,
})
}
disabled={!settings.enabled}
/>
</SettingRow>
<button
type="button"
className="flex items-center gap-2 py-3 text-left text-xs font-semibold text-foreground"
onClick={() => setAdvancedOpen((value) => !value)}
>
<ChevronDown
className={`size-3.5 transition-transform ${advancedOpen ? "rotate-180" : ""}`}
/>
{t("admin.touchAdvanced")}
</button>
{advancedOpen && (
<div className="grid grid-cols-1 gap-3 pb-3 sm:grid-cols-2">
{fields.map(({ key, label, unit }) => {
const bounds = TOUCH_INPUT_NUMERIC_BOUNDS[key];
return (
<label key={key} className="flex flex-col gap-1 text-xs">
<span className="font-medium text-foreground">
{t(`admin.${label}`)}
</span>
<div className="flex items-center gap-2">
<Input
aria-label={t(`admin.${label}`)}
type="number"
min={bounds.min}
max={bounds.max}
step={bounds.step}
value={settings[key]}
onChange={(event) =>
setSettings({
...settings,
[key]: Number(event.target.value),
})
}
className="h-8 text-xs"
/>
{unit && (
<span className="w-10 text-muted-foreground">{unit}</span>
)}
</div>
</label>
);
})}
</div>
)}
<div className="flex gap-2 border-t border-border pt-3">
<Button
size="sm"
variant="outline"
className="border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
onClick={onSave}
>
{t("common.save")}
</Button>
<Button size="sm" variant="outline" onClick={onReset}>
{t("admin.touchResetDefaults")}
</Button>
</div>
</div>
</AccordionSection>
);
}
src/ui/sidebar/ConnectionDefaultsSettings.tsx
+9 -6
View File
@@ -105,7 +105,7 @@ export function ConnectionDefaultsSettings() {
const { t } = useTranslation();
const defaults = useConnectionDefaults();
const [open, setOpen] = useState(false);
const [tab, setTab] = useState<"terminal" | "rdp">("terminal");
const [tab, setTab] = useState<"shell" | "desktop">("shell");
const [terminal, setTerminal] = useState<TerminalDefaults>({});
const [rdp, setRdp] = useState<RemoteDesktopDefaults>({});
const [saving, setSaving] = useState(false);
@@ -154,8 +154,8 @@ export function ConnectionDefaultsSettings() {
setSaving(true);
try {
await Promise.all([
defaults.saveDefaults("terminal", terminal),
defaults.saveDefaults("rdp", rdp),
defaults.saveTerminalDefaults(terminal),
defaults.saveRdpDefaults(rdp),
]);
toast.success(t("newUi.sidebar.connectionDefaults.saved"));
setOpen(false);
@@ -207,8 +207,11 @@ export function ConnectionDefaultsSettings() {
<div className="flex border-b border-border">
{(
[
["terminal", "newUi.sidebar.connectionDefaults.tabTerminal"],
["rdp", "newUi.sidebar.connectionDefaults.tabRemoteDesktop"],
["shell", "newUi.sidebar.connectionDefaults.tabTerminal"],
[
"desktop",
"newUi.sidebar.connectionDefaults.tabRemoteDesktop",
],
] as const
).map(([id, labelKey]) => (
<button
@@ -226,7 +229,7 @@ export function ConnectionDefaultsSettings() {
</div>
<div className="max-h-[55vh] overflow-y-auto pr-1">
{tab === "terminal" ? (
{tab === "shell" ? (
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
<Field label={t("hosts.fontFamilyLabel")}>
<select
src/ui/sidebar/ConnectionsPanel.tsx
+18 -10
View File
@@ -1,7 +1,15 @@
import { getTabType, isPersistentTabType } from "@/shell/tab-registry";
import { useState, useEffect, useRef, useCallback } from "react";
import { useTranslation } from "react-i18next";
import { ExternalLink, Plug, Search, X, Pencil, Check } from "lucide-react";
import {
ExternalLink,
Plug,
Search,
X,
Pencil,
Check,
SquareTerminal,
} from "lucide-react";
import {
getActiveSessions,
deleteOpenTab,
@@ -9,6 +17,7 @@ import {
type OpenTabRecord,
} from "@/main-axios";
import { tabIcon } from "@/shell/tabUtils";
import { getSessionTimeoutMinutes } from "@/api/open-tabs-api";
import type { Tab, TabType } from "@/types/ui-types";
import { Badge } from "@/components/badge";
import { Button } from "@/components/button";
@@ -309,9 +318,8 @@ export function ConnectionsPanel({
const [persistMinutes, setPersistMinutes] = useState(30);
useEffect(() => {
import("@/api/settings-api")
.then(({ getTerminalSessionSettings }) => getTerminalSessionSettings())
.then((settings) => setPersistMinutes(settings.timeoutMinutes))
getSessionTimeoutMinutes()
.then((minutes) => setPersistMinutes(minutes))
.catch(() => {});
}, []);
const [activeSessions, setActiveSessions] = useState<ActiveSessionInfo[]>([]);
@@ -510,10 +518,10 @@ export function ConnectionsPanel({
const liveSession = tab.instanceId
? sessionByInstanceId.get(tab.instanceId)
: undefined;
const isLive =
tab.type === "terminal"
? (liveSession?.isConnected ?? false)
: true;
const tracksSession = !!getTabType(tab.type)?.commandTarget;
const isLive = tracksSession
? (liveSession?.isConnected ?? false)
: true;
const duration = liveSession?.createdAt
? formatDuration(now - liveSession.createdAt)
: formatDuration(now - tab.openedAt);
@@ -552,7 +560,7 @@ export function ConnectionsPanel({
name={displayName}
hostName={tab.customLabel ? hostName : undefined}
subLabel={
isLive && tab.type === "terminal"
isLive && tracksSession
? t("connections.connectedFor", { duration })
: isLive
? t("connections.connected")
@@ -655,7 +663,7 @@ function SharedWithMeRow({
return (
<div className="group flex items-center gap-2.5 px-3 py-2.5 border-b border-border/40 last:border-b-0">
<div className="shrink-0 flex items-center justify-center size-7 rounded bg-muted/60 text-muted-foreground">
{tabIcon("terminal")}
<SquareTerminal className="size-3.5" />
</div>
<div className="flex flex-col flex-1 min-w-0 gap-0.5">
<div className="flex items-center gap-1.5 min-w-0">
src/ui/sidebar/HistoryPanel.tsx
-165
View File
@@ -1,165 +0,0 @@
import { useState, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { copyToClipboard } from "@/lib/clipboard";
import { Button } from "@/components/button";
import { Input } from "@/components/input";
import { Copy, Search, Terminal, Trash2 } from "lucide-react";
import {
getCommandHistory,
deleteCommandFromHistory,
clearCommandHistory,
} from "@/main-axios";
import type { Tab } from "@/types/ui-types";
export function HistoryPanel({
activeTabId,
terminalTabs,
}: {
activeTabId: string;
terminalTabs: Tab[];
}) {
const { t } = useTranslation();
const [search, setSearch] = useState("");
const [commands, setCommands] = useState<string[]>([]);
const activeTab = terminalTabs.find((t) => t.id === activeTabId);
const activeIsTerminal = !!activeTab;
const hostId = activeTab?.host?.id ? parseInt(activeTab.host.id, 10) : null;
const trackingEnabled = activeTab?.host?.enableCommandHistory !== false;
useEffect(() => {
if (!hostId || !trackingEnabled) {
setCommands([]);
return;
}
getCommandHistory(hostId)
.then(setCommands)
.catch(() => setCommands([]));
}, [hostId, trackingEnabled]);
if (activeIsTerminal && !trackingEnabled) {
return (
<div className="flex flex-col items-center justify-center flex-1 gap-3 p-6 text-center">
<div className="size-10 rounded-full bg-muted/40 flex items-center justify-center">
<Terminal className="size-5 text-muted-foreground/30" />
</div>
<div className="flex flex-col gap-1">
<span className="text-sm font-semibold text-muted-foreground/60">
{t("newUi.sidebar.history.trackingDisabled")}
</span>
<span className="text-xs text-muted-foreground/40">
{t("newUi.sidebar.history.trackingDisabledHint")}
</span>
</div>
</div>
);
}
if (!activeIsTerminal) {
return (
<div className="flex flex-col items-center justify-center flex-1 gap-3 p-6 text-center">
<div className="size-10 rounded-full bg-muted/40 flex items-center justify-center">
<Terminal className="size-5 text-muted-foreground/30" />
</div>
<div className="flex flex-col gap-1">
<span className="text-sm font-semibold text-muted-foreground/60">
{t("newUi.sidebar.history.noTerminalSelected")}
</span>
<span className="text-xs text-muted-foreground/40">
{t("newUi.sidebar.history.noTerminalSelectedHint")}
</span>
</div>
</div>
);
}
const filtered = search
? commands.filter((c) => c.toLowerCase().includes(search.toLowerCase()))
: commands;
async function handleDelete(cmd: string) {
if (!hostId) return;
try {
await deleteCommandFromHistory(hostId, cmd);
setCommands((prev) => prev.filter((c) => c !== cmd));
} catch {
/* ignore */
}
}
return (
<div className="flex flex-col gap-3 p-3">
<div className="flex items-center gap-1.5 px-2.5 py-1.5 bg-muted/30 border border-border/60">
<Terminal className="size-3 shrink-0 text-accent-brand" />
<span className="text-xs font-medium truncate text-foreground">
{activeTab.label}
</span>
</div>
<div className="relative">
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground" />
<Input
placeholder={t("newUi.sidebar.history.searchPlaceholder")}
value={search}
onChange={(e) => setSearch(e.target.value)}
className="pl-8"
/>
</div>
<div className="flex items-center justify-between">
<span className="text-xs text-muted-foreground">
{filtered.length} command{filtered.length !== 1 ? "s" : ""}
</span>
<button
onClick={async () => {
if (!hostId) return;
try {
await clearCommandHistory(hostId);
} catch {
/* ignore */
}
setCommands([]);
}}
className="text-xs text-accent-brand hover:text-accent-brand/70"
>
{t("newUi.sidebar.history.clearAll")}
</button>
</div>
<div className="flex flex-col gap-1">
{filtered.length === 0 && (
<span className="text-xs text-muted-foreground/60 text-center py-8">
{t("newUi.sidebar.history.noHistoryEntries")}
</span>
)}
{filtered.map((cmd, i) => (
<div
key={i}
className="group flex flex-col gap-1 px-2.5 py-2 border border-border bg-background hover:border-muted-foreground/30 transition-colors"
>
<div className="flex items-start justify-between gap-2">
<span className="text-xs font-mono text-foreground break-all leading-relaxed">
{cmd}
</span>
<div className="flex items-center gap-0.5 shrink-0 md:opacity-0 group-hover:opacity-100 transition-opacity">
<Button
variant="ghost"
size="icon"
className="size-6 text-muted-foreground hover:text-foreground"
onClick={() => copyToClipboard(cmd)}
>
<Copy className="size-3" />
</Button>
<Button
variant="ghost"
size="icon"
className="size-6 text-muted-foreground hover:text-destructive"
onClick={() => handleDelete(cmd)}
>
<Trash2 className="size-3" />
</Button>
</div>
</div>
</div>
))}
</div>
</div>
);
}
src/ui/sidebar/HostEditor.tsx
+3 -24
View File
@@ -21,7 +21,7 @@ import {
import {
TERMINAL_FONT_ZOOM_MIN,
TERMINAL_FONT_ZOOM_MAX,
} from "@/features/terminal/terminal-font-zoom";
} from "@/lib/terminal-look/terminal-font-zoom";
import {
Globe,
Info,
@@ -36,7 +36,7 @@ import {
} from "lucide-react";
import { toast } from "sonner";
import { SectionCard, SettingRow, FakeSwitch } from "@/components/section-card";
import { TerminalPreview } from "@/features/terminal/TerminalPreview";
import { TerminalPreview } from "@/components/terminal-preview/TerminalPreview";
import {
createSSHHost,
updateSSHHost,
@@ -1169,7 +1169,7 @@ export function HostEditor({
</>
)}
{activeTab === "terminal" && (
{activeTab === "terminal-options" && (
<>
<SectionCard
title={t("hosts.terminalAppearance")}
@@ -1820,27 +1820,6 @@ export function HostEditor({
onChange={(v) => setField("allowSessionSharing", v)}
/>
</SettingRow>
<SettingRow
label={t("hosts.enableCommandHistory")}
description={
<>
{t("hosts.enableCommandHistoryDesc")}{" "}
<a
href="https://docs.termix.site/features/terminal/command-history"
target="_blank"
rel="noreferrer"
className="text-accent-brand hover:underline"
>
{t("hosts.docsLink")}
</a>
</>
}
>
<FakeSwitch
checked={form.enableCommandHistory}
onChange={(v) => setField("enableCommandHistory", v)}
/>
</SettingRow>
<div className="flex flex-col gap-1.5">
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
{t("hosts.localEchoLabel")}
src/ui/sidebar/HostManagerTabs.tsx
+3 -3
View File
@@ -4,7 +4,7 @@ import { KeyRound, Settings, SquareTerminal, Terminal } from "lucide-react";
import { byOrderThenId, createRegistry } from "@/lib/registry";
/** Core host editor tabs. Plugins add theirs through registerHostEditorSection. */
export type CoreHostTabId = "general" | "ssh" | "terminal";
export type CoreHostTabId = "general" | "ssh" | "terminal-options";
export type HostTabId = CoreHostTabId | (string & {});
export type CredentialTabId = "general" | "auth";
@@ -60,7 +60,7 @@ export const hostEditorSectionList = sections.list;
export const useHostEditorSections = sections.useList;
export const resetHostEditorSections = sections.reset;
const CORE_SSH_GROUP = new Set<string>(["ssh", "terminal"]);
const CORE_SSH_GROUP = new Set<string>(["ssh", "terminal-options"]);
/** Whether a tab lives in the SSH group's second strip. */
export function isSshGroupTab(id: string): boolean {
@@ -148,7 +148,7 @@ export function makeHostSshSubTabs(
order: 0,
},
{
id: "terminal",
id: "terminal-options",
label: t("hosts.tabTerminal"),
icon: <SquareTerminal className="size-3" />,
order: 10,
src/ui/sidebar/HostsPanel.tsx
-2
View File
@@ -151,7 +151,6 @@ function hostPassesFilters(host: Host, filters: FilterState): boolean {
}
if (filters.features.length > 0) {
const ok =
(filters.features.includes("terminal") && host.enableTerminal) ||
(filters.features.includes("fileManager") && host.enableFileManager) ||
(filters.features.includes("docker") && host.enableDocker);
if (!ok) return false;
@@ -794,7 +793,6 @@ export function HostsPanel({
</DropdownMenuLabel>
{(
[
["terminal", "Terminal"],
["fileManager", "FileManager"],
["docker", "Docker"],
] as const
src/ui/sidebar/QuickConnectPanel.tsx
+3 -2
View File
@@ -76,7 +76,8 @@ export function QuickConnectPanel({ onConnect }: QuickConnectPanelProps) {
protocol,
domain: domain || undefined,
});
onConnect(hostConfig, type ?? resolveHostTabType(hostConfig));
const target = type ?? resolveHostTabType(hostConfig);
if (target) onConnect(hostConfig, target);
};
const connectDefault = () => connect();
@@ -282,7 +283,7 @@ export function QuickConnectPanel({ onConnect }: QuickConnectPanelProps) {
) : (
<>
<button
onClick={() => connect("terminal")}
onClick={() => connect()}
className="flex items-center justify-center gap-1.5 h-7 w-full border border-accent-brand/40 bg-accent-brand/10 text-accent-brand text-xs font-semibold hover:bg-accent-brand/20 transition-colors"
>
<Terminal className="size-3.5" />
src/ui/sidebar/rail-items.ts
+1 -18
View File
@@ -1,6 +1,5 @@
import {
Braces,
Clock,
Fingerprint,
Hammer,
KeyRound,
@@ -9,7 +8,6 @@ import {
ScrollText,
Server,
Settings,
TerminalSquare,
Usb,
User,
Zap,
@@ -124,14 +122,7 @@ export const RAIL_ITEMS: RailItemDef[] = [
promotable: true,
rightDockable: true,
},
{
id: "history",
icon: Clock,
labelKey: "nav.history",
separatorAfter: true,
promotable: true,
rightDockable: true,
},
{
id: "session-logs",
icon: ScrollText,
@@ -146,14 +137,6 @@ export const RAIL_ITEMS: RailItemDef[] = [
labelKey: "nav.splitScreen",
separatorAfter: true,
},
{
id: "local-terminal",
icon: TerminalSquare,
labelKey: "nav.localTerminal",
kind: "tab",
separatorAfter: true,
electronOnly: true,
},
];
/**
src/ui/sidebar/tree/HostItem/HostItem.tsx
+18 -19
View File
@@ -126,7 +126,6 @@ export function getSshActions(host: Host): {
return [
// --- tmux-monitor --- opt-in per host, off by default
host.enableSsh &&
host.enableTerminal &&
host.enableTmuxMonitor && {
type: "tmux_monitor" as TabType,
icon: Layers,
@@ -419,8 +418,9 @@ export function HostItem({
action.tabType ? [action.tabType] : [],
),
];
// Empty when no running plugin can connect to this host.
const defaultAction: TabType =
defaultConnectAction(allHostActions, host)?.tabType ?? "terminal";
defaultConnectAction(allHostActions, host)?.tabType ?? "";
const openHostTab = (
type: TabType,
options?: {
@@ -429,6 +429,7 @@ export function HostItem({
forceNewTab?: boolean;
},
) => {
if (!type) return;
markTabSurfaceUsed(type);
recordHostActionPreference(host.id, type);
onOpenTab(type, {
@@ -798,22 +799,20 @@ export function HostItem({
{t("hosts.copyLink")}
</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
{host.enableSsh &&
host.enableTerminal &&
host.enableTmuxMonitor && (
<DropdownMenuItem
onClick={(e) => {
e.stopPropagation();
writeClipboardText(
`${window.location.origin}?view=tmux_monitor&hostId=${host.id}`,
);
toast.success(t("hosts.tmuxMonitorUrlCopied"));
}}
>
<Layers className="size-3.5 mr-2" />
{t("hosts.copyTmuxMonitorUrlAction")}
</DropdownMenuItem>
)}
{host.enableSsh && host.enableTmuxMonitor && (
<DropdownMenuItem
onClick={(e) => {
e.stopPropagation();
writeClipboardText(
`${window.location.origin}?view=tmux_monitor&hostId=${host.id}`,
);
toast.success(t("hosts.tmuxMonitorUrlCopied"));
}}
>
<Layers className="size-3.5 mr-2" />
{t("hosts.copyTmuxMonitorUrlAction")}
</DropdownMenuItem>
)}
{pluginActions
.filter((action) => action.copyUrlView)
.map((action) => {
@@ -972,7 +971,7 @@ export function HostItem({
}}
style={depthStyle}
onPointerEnter={() => {
preloadTabSurface(defaultAction);
if (defaultAction) preloadTabSurface(defaultAction);
const preferredAction = getPreferredHostAction(
host.id,
availableActions,
src/ui/sidebar/tree/SidebarTree.tsx
+3 -2
View File
@@ -447,7 +447,7 @@ export function SidebarTree({
const hosts = collectAllHosts(folder.children);
for (const host of hosts) {
const type = resolveHostTabType(host);
onOpenTab(host, type);
if (type) onOpenTab(host, type);
}
}
@@ -1285,7 +1285,8 @@ export function SidebarTree({
selectedHostIds.has(String(h.id)),
);
for (const host of selectedHosts) {
onOpenTab(host, resolveHostTabType(host));
const type = resolveHostTabType(host);
if (type) onOpenTab(host, type);
}
setSelectedHostIds(new Set());
onToggleSelectionMode();