mirror of
https://github.com/Termix-SSH/Termix.git
synced 2026-07-16 05:13:36 +00:00
release-2.5.0 (#994)
* feat(sshid) - sshid.io equivalent for termix (#919) * feat(ssh-id): database schema, migrations and field encryption Adds ssh_identities, ssh_identity_keys and ssh_identity_ca tables (public keys stored plaintext for the unauthenticated resolver; CA private key registered for per-user field encryption), with UNIQUE(user_id), an index on ssh_identity_keys(identity_id), and idempotent CREATE TABLE migrations. * feat(ssh-id): backend API — resolver, key management, CA and certificates Mounts /sshid (nginx route added). Public text/plain authorized_keys resolver (+ exact /:algo filter, HTML viewer) and CA public-key endpoint; no-store + noindex headers on every resolver response including early 404s. Authenticated management: claim/rename/delete handle, add/import/generate/enable/delete keys, and a per-user CA (create/rotate/delete) with pure-Node OpenSSH certificate issuance. Audit logging on all mutations; UNIQUE races map to a precise 409. Unit tests for key parsing and certificate signing (ssh-keygen-validated). * feat(ssh-id): frontend panel, API client and i18n SSH ID panel wired into the app rail and AppShell: claim handle, resolver URL + curl one-liner, key list, generate, paste/import, CA enable/rotate/remove with server trust command, and per-key certificate issuance. API client re-exported through main-axios.ts; all strings i18n'd. * style(ssh-id): align panel and resolver page with Termix theme - Rebuild the SSH ID sidebar panel with the theme's square components (SectionCard / SettingRow / FakeSwitch) instead of rounded ad-hoc cards; use accent-brand and destructive tokens rather than raw red/green. - Fix panel scrolling: move overflow to a block scroll container so the cards keep their natural height instead of being clipped. - Restyle the public resolver HTML page (/sshid/u/:handle) to the Termix dark theme: square corners, #18181b/#303032 palette, #f59145 accent, uppercase section labels. - Tidy copy: 'Save To Credentials' label, drop the redundant generate intro, and correct the generate tooltip (the key is stored when saving to vault). * feat: rename to Termix ID, improve UI, backend inconsistencies, and general bug fixes --------- Co-authored-by: LukeGus <bugattiguy527@gmail.com> * ci(deps): bump actions/checkout from 6 to 7 in the github-actions group (#922) Bumps the github-actions group with 1 update: [actions/checkout](https://github.com/actions/checkout). Updates `actions/checkout` from 6 to 7 - [Release notes](https://github.com/actions/checkout/releases) - [Changelog](https://github.com/actions/checkout/blob/main/CHANGELOG.md) - [Commits](https://github.com/actions/checkout/compare/v6...v7) --- updated-dependencies: - dependency-name: actions/checkout dependency-version: '7' dependency-type: direct:production update-type: version-update:semver-major dependency-group: github-actions ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump the dev-patch-updates group with 11 updates (#923) Bumps the dev-patch-updates group with 11 updates: | Package | From | To | | --- | --- | --- | | [@codemirror/search](https://github.com/codemirror/search) | `6.7.0` | `6.7.1` | | [@codemirror/view](https://github.com/codemirror/view) | `6.43.0` | `6.43.1` | | [@tailwindcss/vite](https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/@tailwindcss-vite) | `4.3.0` | `4.3.1` | | [@vitest/coverage-v8](https://github.com/vitest-dev/vitest/tree/HEAD/packages/coverage-v8) | `4.1.8` | `4.1.9` | | [@vitest/ui](https://github.com/vitest-dev/vitest/tree/HEAD/packages/ui) | `4.1.8` | `4.1.9` | | [eslint-plugin-react-refresh](https://github.com/ArnaudBarre/eslint-plugin-react-refresh) | `0.5.2` | `0.5.3` | | [lint-staged](https://github.com/lint-staged/lint-staged) | `17.0.7` | `17.0.8` | | [prettier](https://github.com/prettier/prettier) | `3.8.3` | `3.8.4` | | [sharp](https://github.com/lovell/sharp) | `0.35.1` | `0.35.2` | | [tailwindcss](https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/tailwindcss) | `4.3.0` | `4.3.1` | | [vitest](https://github.com/vitest-dev/vitest/tree/HEAD/packages/vitest) | `4.1.8` | `4.1.9` | Updates `@codemirror/search` from 6.7.0 to 6.7.1 - [Changelog](https://github.com/codemirror/search/blob/main/CHANGELOG.md) - [Commits](https://github.com/codemirror/search/commits) Updates `@codemirror/view` from 6.43.0 to 6.43.1 - [Changelog](https://github.com/codemirror/view/blob/main/CHANGELOG.md) - [Commits](https://github.com/codemirror/view/commits) Updates `@tailwindcss/vite` from 4.3.0 to 4.3.1 - [Release notes](https://github.com/tailwindlabs/tailwindcss/releases) - [Changelog](https://github.com/tailwindlabs/tailwindcss/blob/main/CHANGELOG.md) - [Commits](https://github.com/tailwindlabs/tailwindcss/commits/v4.3.1/packages/@tailwindcss-vite) Updates `@vitest/coverage-v8` from 4.1.8 to 4.1.9 - [Release notes](https://github.com/vitest-dev/vitest/releases) - [Changelog](https://github.com/vitest-dev/vitest/blob/main/docs/releases.md) - [Commits](https://github.com/vitest-dev/vitest/commits/v4.1.9/packages/coverage-v8) Updates `@vitest/ui` from 4.1.8 to 4.1.9 - [Release notes](https://github.com/vitest-dev/vitest/releases) - [Changelog](https://github.com/vitest-dev/vitest/blob/main/docs/releases.md) - [Commits](https://github.com/vitest-dev/vitest/commits/v4.1.9/packages/ui) Updates `eslint-plugin-react-refresh` from 0.5.2 to 0.5.3 - [Release notes](https://github.com/ArnaudBarre/eslint-plugin-react-refresh/releases) - [Changelog](https://github.com/ArnaudBarre/eslint-plugin-react-refresh/blob/main/CHANGELOG.md) - [Commits](https://github.com/ArnaudBarre/eslint-plugin-react-refresh/compare/v0.5.2...v0.5.3) Updates `lint-staged` from 17.0.7 to 17.0.8 - [Release notes](https://github.com/lint-staged/lint-staged/releases) - [Changelog](https://github.com/lint-staged/lint-staged/blob/main/CHANGELOG.md) - [Commits](https://github.com/lint-staged/lint-staged/compare/v17.0.7...v17.0.8) Updates `prettier` from 3.8.3 to 3.8.4 - [Release notes](https://github.com/prettier/prettier/releases) - [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md) - [Commits](https://github.com/prettier/prettier/compare/3.8.3...3.8.4) Updates `sharp` from 0.35.1 to 0.35.2 - [Release notes](https://github.com/lovell/sharp/releases) - [Commits](https://github.com/lovell/sharp/compare/v0.35.1...v0.35.2) Updates `tailwindcss` from 4.3.0 to 4.3.1 - [Release notes](https://github.com/tailwindlabs/tailwindcss/releases) - [Changelog](https://github.com/tailwindlabs/tailwindcss/blob/main/CHANGELOG.md) - [Commits](https://github.com/tailwindlabs/tailwindcss/commits/v4.3.1/packages/tailwindcss) Updates `vitest` from 4.1.8 to 4.1.9 - [Release notes](https://github.com/vitest-dev/vitest/releases) - [Changelog](https://github.com/vitest-dev/vitest/blob/main/docs/releases.md) - [Commits](https://github.com/vitest-dev/vitest/commits/v4.1.9/packages/vitest) --- updated-dependencies: - dependency-name: "@codemirror/search" dependency-version: 6.7.1 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: "@codemirror/view" dependency-version: 6.43.1 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: "@tailwindcss/vite" dependency-version: 4.3.1 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: "@vitest/coverage-v8" dependency-version: 4.1.9 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: "@vitest/ui" dependency-version: 4.1.9 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: eslint-plugin-react-refresh dependency-version: 0.5.3 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: lint-staged dependency-version: 17.0.8 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: prettier dependency-version: 3.8.4 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: sharp dependency-version: 0.35.2 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: tailwindcss dependency-version: 4.3.1 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates - dependency-name: vitest dependency-version: 4.1.9 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dev-patch-updates ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump nanoid in the prod-patch-updates group (#925) Bumps the prod-patch-updates group with 1 update: [nanoid](https://github.com/ai/nanoid). Updates `nanoid` from 5.1.11 to 5.1.15 - [Release notes](https://github.com/ai/nanoid/releases) - [Changelog](https://github.com/ai/nanoid/blob/main/CHANGELOG.md) - [Commits](https://github.com/ai/nanoid/compare/5.1.11...5.1.15) --- updated-dependencies: - dependency-name: nanoid dependency-version: 5.1.15 dependency-type: direct:production update-type: version-update:semver-patch dependency-group: prod-patch-updates ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump the major-updates group with 5 updates (#926) Bumps the major-updates group with 5 updates: | Package | From | To | | --- | --- | --- | | [js-yaml](https://github.com/nodeca/js-yaml) | `4.2.0` | `5.0.0` | | [@eslint/js](https://github.com/eslint/eslint/tree/HEAD/packages/js) | `9.39.4` | `10.0.1` | | [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) | `25.9.2` | `26.0.0` | | [concurrently](https://github.com/open-cli-tools/concurrently) | `9.2.1` | `10.0.3` | | [eslint](https://github.com/eslint/eslint) | `9.39.4` | `10.5.0` | Updates `js-yaml` from 4.2.0 to 5.0.0 - [Changelog](https://github.com/nodeca/js-yaml/blob/master/CHANGELOG.md) - [Commits](https://github.com/nodeca/js-yaml/compare/4.2.0...5.0.0) Updates `@eslint/js` from 9.39.4 to 10.0.1 - [Release notes](https://github.com/eslint/eslint/releases) - [Commits](https://github.com/eslint/eslint/commits/v10.0.1/packages/js) Updates `@types/node` from 25.9.2 to 26.0.0 - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) Updates `concurrently` from 9.2.1 to 10.0.3 - [Release notes](https://github.com/open-cli-tools/concurrently/releases) - [Commits](https://github.com/open-cli-tools/concurrently/compare/v9.2.1...v10.0.3) Updates `eslint` from 9.39.4 to 10.5.0 - [Release notes](https://github.com/eslint/eslint/releases) - [Commits](https://github.com/eslint/eslint/compare/v9.39.4...v10.5.0) --- updated-dependencies: - dependency-name: js-yaml dependency-version: 5.0.0 dependency-type: direct:production update-type: version-update:semver-major dependency-group: major-updates - dependency-name: "@eslint/js" dependency-version: 10.0.1 dependency-type: direct:development update-type: version-update:semver-major dependency-group: major-updates - dependency-name: "@types/node" dependency-version: 26.0.0 dependency-type: direct:development update-type: version-update:semver-major dependency-group: major-updates - dependency-name: concurrently dependency-version: 10.0.3 dependency-type: direct:development update-type: version-update:semver-major dependency-group: major-updates - dependency-name: eslint dependency-version: 10.5.0 dependency-type: direct:development update-type: version-update:semver-major dependency-group: major-updates ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat(ssh): add HashiCorp Vault SSH signer authentication * fix: small fixes to vault feature to align with Termix codebase * chore: add view docs links for vault/termix id * fix: file upload fails with 400 and missing schema migrations on upgrade (#929) Two bugs introduced in v2.4.1: 1. uploadFileStream uses fileManagerApi.post() which triggers axios's transformRequest to JSON-serialize the FormData because the instance default Content-Type is application/json. Change to postForm() which sets Content-Type: multipart/form-data so the browser XHR sends the correct multipart body with boundary. 2. Two schema items added to schema.ts were not included in migrateSchema() in db/index.ts, causing 500 errors on existing installations upgrading from v2.4.0: - user_preferences.status_color_scheme (no such column) - dashboard_service_links table (no such table) Fixes #928 Co-authored-by: sash <sash@fominykh.io> * fix: support PuTTY PPK ssh keys (#930) * fix: chunk large file manager uploads (#932) * fix: route dashboard hosts by protocol (#934) * fix: resolve tunnel endpoints reliably (#935) * Fix Electron OIDC browser auth failures (#936) * Allow RDP connections without stored credentials (#937) * Sync role credential shares for OIDC users (#938) * Fix terminal link dialog layering (#940) * Confirm large files before opening editor (#942) * Confirm closing active host connections (#943) * Preserve file path case in file manager UI (#941) * fix: preserve unicode guacamole tokens (#933) * Persist VNC authentication settings (#944) * Fix Guacamole websocket base path (#946) * Promote file manager terminals to tabs (#939) * Guard Guacamole disconnect during startup (#945) * chore: increment ver * feat: bitwarden ssh agent integration * feat: serial connections support * fix: various small bug fixes * feat: open all sessions in a folder and terminal custom theme color support * feat: cross host file manager clipboard and several small bug fixes * feat: tailscale/wireguard support and added a new status state for when backend is checking status * feat: grafana like server stats history, new alert system, ntfy/webhook support * feat: new grid and widget based homepage function * feat: new donate button in dashboard * fix: alert ui incorrectly using termix css and fixed issue with alert system not loading * chore: fix ci checks (#966) * Fix dashboard service link creation (#950) * Fix jump host SOCKS5 proxy selection (#951) * Fix jump host SOCKS5 proxy selection * fix: type jump host socks proxy config * Fix tmux detection path handling (#949) * Support GUACD_URL environment config (#952) * Retry autostart tunnel host fetches (#953) * Retry autostart tunnel host fetches * chore: format tunnel route * Fix PUID html ownership in Docker entrypoint (#954) * feat: allow custom tunnel endpoints (#977) * fix: skip metrics start for non-ssh hosts (#976) * Fix Proxmox import auth fallback (#956) * Fix Proxmox import auth fallback * chore: format proxmox import auth * Fix SSH heading syntax highlighting (#955) * Fix SSH heading syntax highlighting * chore: format terminal highlighter * Initialize auth before fullscreen terminal routes (#957) * Add WebAuthn passkey authentication (#959) * chore: add Biome tooling (#965) * chore: add biome tooling * chore: support tailwind syntax in biome * Fix VNC required argument handshake (#968) * Prioritize host results in command palette search (#969) * Prevent sidebar host hover layout shift (#970) * Add terminal font zoom with mouse wheel (#971) * Add host temperature metrics card (#972) * Make file downloads reliable in desktop app (#973) * Add app rail hover expansion setting (#974) * fix: use correct translation key for nav.close (#964) * fix(tunnel): skip endpoint credential validation for direct tunnels (#963) * fix: SSH port connection bug (#975) * fix: chunked upload for files >=1.5GB to bypass browser ArrayBuffer limit (#948) * feat: support SSH agent auth across SSH features (#960) * feat: add Podman container runtime support (#958) * chore: update readme and release notes * fix: stabilize Windows app icon (#978) * Add safe host sharing export (#979) * Add external editor support for file manager (#985) * Rework SSH credential password handling (#984) * Support password fallback for SSH key credentials * Complete SSH credential password fallback * Fix runtime base path for auth callbacks (#982) * Fix TUI terminal output highlighting (#983) Co-authored-by: LukeGus <bugattiguy527@gmail.com> * Add app fullscreen mode (#993) * Fix host metrics startup polling (#986) * chore: update release notes * fix: line chart text overlap * chore: update RELEASE_NOTES.md * chore: add donation goal to readme * chore: update readme * fix: hide full-screen button in electron app * fix: failed unit tests * chore: lint, format, and bump version to 2.5.0 * chore: remove timeout from crowdin translate * chore: sync Crowdin translations for 2.5.0 --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: DivByZero <mr.oplus@yahoo.fr> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: devdanetra <46488477+devdanetra@users.noreply.github.com> Co-authored-by: Aleksandr Fominykh <neoformalex@users.noreply.github.com> Co-authored-by: sash <sash@fominykh.io> Co-authored-by: ZacharyZcR <zacharyzcr1984@gmail.com>
This commit is contained in:
Luke Gustafson
+326
-187
@@ -5,6 +5,7 @@ import { Card } from "@/components/card";
|
||||
import { Separator } from "@/components/separator";
|
||||
import {
|
||||
Activity,
|
||||
Check,
|
||||
Database,
|
||||
ExternalLink,
|
||||
GripHorizontal,
|
||||
@@ -43,76 +44,37 @@ import {
|
||||
createServiceLink,
|
||||
deleteServiceLink,
|
||||
} from "@/main-axios";
|
||||
import type {
|
||||
RecentActivityItem,
|
||||
SSHHostWithStatus,
|
||||
ServiceLink,
|
||||
} from "@/main-axios";
|
||||
import type { RecentActivityItem, ServiceLink } from "@/main-axios";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { NetworkGraphCard } from "@/dashboard/cards/NetworkGraphCard";
|
||||
import { HomepagePreviewCard } from "@/dashboard/cards/HomepagePreviewCard";
|
||||
import { HomepageCanvas } from "@/features/homepage/HomepageCanvas";
|
||||
|
||||
// Side-effect imports so homepage widgets register themselves
|
||||
import "@/features/homepage/widgets/ServiceLinkWidget";
|
||||
import "@/features/homepage/widgets/ClockWidget";
|
||||
import "@/features/homepage/widgets/NotesWidget";
|
||||
import "@/features/homepage/widgets/BookmarkListWidget";
|
||||
import "@/features/homepage/widgets/HostStatusWidget";
|
||||
import "@/features/homepage/widgets/FolderWidget";
|
||||
import {
|
||||
useStatusColorScheme,
|
||||
getStatusClasses,
|
||||
} from "@/hooks/use-status-color-scheme";
|
||||
|
||||
function sshHostToHost(h: SSHHostWithStatus): Host {
|
||||
return {
|
||||
id: String(h.id),
|
||||
name: h.name,
|
||||
username: h.username,
|
||||
ip: h.ip,
|
||||
port: h.port,
|
||||
folder: h.folder ?? "",
|
||||
online: h.status === "online",
|
||||
cpu: 0,
|
||||
ram: 0,
|
||||
lastAccess: "",
|
||||
tags: h.tags ?? [],
|
||||
authType: h.authType,
|
||||
password: h.password,
|
||||
key: typeof h.key === "string" ? h.key : undefined,
|
||||
keyPassword: h.keyPassword,
|
||||
keyType: h.keyType,
|
||||
credentialId: h.credentialId != null ? String(h.credentialId) : undefined,
|
||||
notes: h.notes,
|
||||
pin: h.pin ?? false,
|
||||
macAddress: h.macAddress,
|
||||
enableTerminal: h.enableTerminal ?? true,
|
||||
enableTunnel: h.enableTunnel ?? false,
|
||||
enableFileManager: h.enableFileManager ?? true,
|
||||
enableDocker: h.enableDocker ?? false,
|
||||
enableSsh: h.connectionType === "ssh" || !h.connectionType,
|
||||
enableRdp: h.connectionType === "rdp",
|
||||
enableVnc: h.connectionType === "vnc",
|
||||
enableTelnet: h.connectionType === "telnet",
|
||||
sshPort: h.port,
|
||||
rdpPort: 3389,
|
||||
vncPort: 5900,
|
||||
telnetPort: 23,
|
||||
quickActions: (h.quickActions ?? []).map((a) => ({
|
||||
name: a.name,
|
||||
snippetId: String(a.snippetId),
|
||||
})),
|
||||
jumpHosts: (h.jumpHosts ?? []).map((j) => ({
|
||||
hostId: String(j.hostId),
|
||||
})),
|
||||
serverTunnels: [],
|
||||
defaultPath: h.defaultPath,
|
||||
terminalConfig: h.terminalConfig as Host["terminalConfig"],
|
||||
useSocks5: h.useSocks5,
|
||||
socks5Host: h.socks5Host,
|
||||
socks5Port: h.socks5Port,
|
||||
socks5Username: h.socks5Username,
|
||||
socks5Password: h.socks5Password,
|
||||
socks5ProxyChain: h.socks5ProxyChain ?? [],
|
||||
};
|
||||
}
|
||||
import { useServerStatus } from "@/lib/ServerStatusContext";
|
||||
import { sshHostToHost } from "@/sidebar/HostManagerData";
|
||||
import { getDefaultConnectionTab } from "@/lib/host-connection-tabs";
|
||||
import {
|
||||
isValidServiceLinkUrl,
|
||||
normalizeServiceLinkUrl,
|
||||
} from "@/lib/service-link-url";
|
||||
|
||||
// ─── Types ────────────────────────────────────────────────────────────────────
|
||||
|
||||
type PanelId = "main" | "side";
|
||||
|
||||
type CardSlot = {
|
||||
key: string;
|
||||
id: DashboardCardId;
|
||||
panel: PanelId;
|
||||
order: number;
|
||||
@@ -120,6 +82,7 @@ type CardSlot = {
|
||||
};
|
||||
|
||||
type DragState = {
|
||||
key: string;
|
||||
id: DashboardCardId;
|
||||
sourcePanel: PanelId;
|
||||
sourceOrder: number;
|
||||
@@ -128,11 +91,35 @@ type DragState = {
|
||||
// ─── Default layout ───────────────────────────────────────────────────────────
|
||||
|
||||
const DEFAULT_SLOTS: CardSlot[] = [
|
||||
{ id: "stats_bar", panel: "main", order: 0, height: 96 },
|
||||
{ id: "counters_bar", panel: "main", order: 1, height: 48 },
|
||||
{ id: "quick_actions", panel: "main", order: 2, height: 160 },
|
||||
{ id: "host_status", panel: "main", order: 3, height: null },
|
||||
{ id: "recent_activity", panel: "side", order: 0, height: null },
|
||||
{ key: "stats_bar_0", id: "stats_bar", panel: "main", order: 0, height: 96 },
|
||||
{
|
||||
key: "counters_bar_0",
|
||||
id: "counters_bar",
|
||||
panel: "main",
|
||||
order: 1,
|
||||
height: 48,
|
||||
},
|
||||
{
|
||||
key: "quick_actions_0",
|
||||
id: "quick_actions",
|
||||
panel: "main",
|
||||
order: 2,
|
||||
height: 160,
|
||||
},
|
||||
{
|
||||
key: "host_status_0",
|
||||
id: "host_status",
|
||||
panel: "main",
|
||||
order: 3,
|
||||
height: null,
|
||||
},
|
||||
{
|
||||
key: "recent_activity_0",
|
||||
id: "recent_activity",
|
||||
panel: "side",
|
||||
order: 0,
|
||||
height: null,
|
||||
},
|
||||
];
|
||||
|
||||
// ─── Card components ──────────────────────────────────────────────────────────
|
||||
@@ -277,6 +264,25 @@ function QuickActionsCard({
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const pinnedHosts = hosts.filter((h) => h.pin);
|
||||
const getConnectionEndpoint = (host: Host) => {
|
||||
const type = getDefaultConnectionTab(host);
|
||||
const port =
|
||||
type === "rdp"
|
||||
? host.rdpPort
|
||||
: type === "vnc"
|
||||
? host.vncPort
|
||||
: type === "telnet"
|
||||
? host.telnetPort
|
||||
: host.sshPort;
|
||||
return `${host.ip}:${port}`;
|
||||
};
|
||||
const renderConnectionIcon = (host: Host) => {
|
||||
const type = getDefaultConnectionTab(host);
|
||||
if (type === "terminal" || type === "telnet") {
|
||||
return <Terminal className="size-3 text-accent-brand" />;
|
||||
}
|
||||
return <Server className="size-3 text-accent-brand" />;
|
||||
};
|
||||
return (
|
||||
<Card className="flex flex-col overflow-hidden w-full h-full py-0 gap-0">
|
||||
<div className="flex items-center gap-2 px-4 py-2.5 border-b border-border shrink-0">
|
||||
@@ -330,18 +336,18 @@ function QuickActionsCard({
|
||||
{pinnedHosts.slice(0, 4).map((host) => (
|
||||
<button
|
||||
key={host.id}
|
||||
onClick={() => onOpenTab(host, "terminal")}
|
||||
onClick={() => onOpenTab(host, getDefaultConnectionTab(host))}
|
||||
className="group/btn flex items-center gap-2.5 px-4 py-2 hover:bg-muted transition-colors cursor-pointer border-b border-border last:border-b-0"
|
||||
>
|
||||
<div className="size-7 border border-border bg-muted flex items-center justify-center shrink-0 group-hover/btn:bg-accent-brand/20 group-hover/btn:border-accent-brand/40 transition-colors">
|
||||
<Terminal className="size-3 text-accent-brand" />
|
||||
{renderConnectionIcon(host)}
|
||||
</div>
|
||||
<div className="flex flex-col items-start text-left min-w-0">
|
||||
<span className="text-xs font-semibold truncate w-full">
|
||||
{host.name || host.ip}
|
||||
</span>
|
||||
<span className="text-[10px] text-muted-foreground truncate w-full">
|
||||
{host.ip}:{host.sshPort}
|
||||
{getConnectionEndpoint(host)}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
@@ -423,6 +429,7 @@ function HostStatusCard({
|
||||
hosts,
|
||||
hostMetrics,
|
||||
onOpenTab,
|
||||
statusLoading,
|
||||
}: {
|
||||
hosts: Host[];
|
||||
hostMetrics: Map<
|
||||
@@ -430,6 +437,7 @@ function HostStatusCard({
|
||||
{ cpu: number | null; ram: number | null; disk: number | null }
|
||||
>;
|
||||
onOpenTab: (host: Host, type: TabType) => void;
|
||||
statusLoading?: boolean;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const statusScheme = useStatusColorScheme();
|
||||
@@ -467,7 +475,7 @@ function HostStatusCard({
|
||||
>
|
||||
<div className="flex items-center gap-2.5">
|
||||
<span
|
||||
className={`size-1.5 rounded-full shrink-0 ${getStatusClasses(host.online, statusScheme, "dot")}`}
|
||||
className={`size-1.5 rounded-full shrink-0 ${getStatusClasses(host.online, statusScheme, "dot", statusLoading)}`}
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center gap-1">
|
||||
@@ -506,11 +514,13 @@ function HostStatusCard({
|
||||
</div>
|
||||
)}
|
||||
<span
|
||||
className={`text-[10px] px-2 py-0.5 font-semibold border ${getStatusClasses(host.online, statusScheme, "badge")}`}
|
||||
className={`text-[10px] px-2 py-0.5 font-semibold border ${getStatusClasses(host.online, statusScheme, "badge", statusLoading)}`}
|
||||
>
|
||||
{host.online
|
||||
? t("dashboardTab.online")
|
||||
: t("dashboardTab.offline")}
|
||||
{statusLoading
|
||||
? t("dashboardTab.checking")
|
||||
: host.online
|
||||
? t("dashboardTab.online")
|
||||
: t("dashboardTab.offline")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -526,11 +536,13 @@ function RecentActivityCard({
|
||||
hosts,
|
||||
onOpenTab,
|
||||
onClear,
|
||||
statusLoading,
|
||||
}: {
|
||||
activity: RecentActivityItem[];
|
||||
hosts: Host[];
|
||||
onOpenTab: (host: Host, type: TabType) => void;
|
||||
onClear: () => void;
|
||||
statusLoading?: boolean;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const statusScheme = useStatusColorScheme();
|
||||
@@ -609,7 +621,7 @@ function RecentActivityCard({
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className={`size-1.5 rounded-full shrink-0 ${getStatusClasses(host?.online ?? false, statusScheme, "dot")}`}
|
||||
className={`size-1.5 rounded-full shrink-0 ${getStatusClasses(host?.online ?? false, statusScheme, "dot", statusLoading)}`}
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-xs font-semibold truncate max-w-24">
|
||||
@@ -645,28 +657,29 @@ function ServiceLinksCard({
|
||||
const [label, setLabel] = useState("");
|
||||
const [url, setUrl] = useState("");
|
||||
const [urlError, setUrlError] = useState(false);
|
||||
const [addError, setAddError] = useState("");
|
||||
const [adding, setAdding] = useState(false);
|
||||
|
||||
const handleAdd = async () => {
|
||||
let valid = true;
|
||||
try {
|
||||
const parsed = new URL(url);
|
||||
if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
|
||||
valid = false;
|
||||
}
|
||||
} catch {
|
||||
valid = false;
|
||||
}
|
||||
if (!valid) {
|
||||
const normalizedUrl = normalizeServiceLinkUrl(url);
|
||||
if (!isValidServiceLinkUrl(normalizedUrl)) {
|
||||
setUrlError(true);
|
||||
setAddError("");
|
||||
return;
|
||||
}
|
||||
setUrlError(false);
|
||||
setAddError("");
|
||||
setAdding(true);
|
||||
try {
|
||||
await onAdd(label.trim(), url.trim());
|
||||
await onAdd(label.trim(), normalizedUrl);
|
||||
setLabel("");
|
||||
setUrl("");
|
||||
} catch (error) {
|
||||
setAddError(
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: t("dashboardTab.serviceLinksAddFailed"),
|
||||
);
|
||||
} finally {
|
||||
setAdding(false);
|
||||
}
|
||||
@@ -728,6 +741,7 @@ function ServiceLinksCard({
|
||||
onChange={(e) => {
|
||||
setUrl(e.target.value);
|
||||
setUrlError(false);
|
||||
setAddError("");
|
||||
}}
|
||||
placeholder={t("dashboardTab.serviceLinksUrlPlaceholder")}
|
||||
className={`flex-[2] min-w-0 text-xs bg-transparent border px-2 py-1 focus:outline-none ${urlError ? "border-destructive" : "border-border focus:border-accent-brand/60"}`}
|
||||
@@ -746,6 +760,11 @@ function ServiceLinksCard({
|
||||
{t("dashboardTab.serviceLinksInvalidUrl")}
|
||||
</div>
|
||||
)}
|
||||
{addError && (
|
||||
<div className="px-4 pb-2 text-[10px] text-destructive shrink-0">
|
||||
{addError}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -777,6 +796,7 @@ function CardItem({
|
||||
serviceLinks,
|
||||
onAddServiceLink,
|
||||
onDeleteServiceLink,
|
||||
statusLoading,
|
||||
}: {
|
||||
slot: CardSlot;
|
||||
editMode: boolean;
|
||||
@@ -785,7 +805,7 @@ function CardItem({
|
||||
onDrop: () => void;
|
||||
onDragOver: (e: React.DragEvent) => void;
|
||||
onRemove: () => void;
|
||||
onHeightChange: (id: DashboardCardId, h: number) => void;
|
||||
onHeightChange: (key: string, h: number) => void;
|
||||
onOpenSingletonTab: (type: TabType, pendingEvent?: string) => void;
|
||||
onOpenTab: (host: Host, type: TabType) => void;
|
||||
hosts: Host[];
|
||||
@@ -805,6 +825,7 @@ function CardItem({
|
||||
serviceLinks: ServiceLink[];
|
||||
onAddServiceLink: (label: string, url: string) => Promise<void>;
|
||||
onDeleteServiceLink: (id: number) => Promise<void>;
|
||||
statusLoading?: boolean;
|
||||
}) {
|
||||
const cardRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
@@ -815,7 +836,7 @@ function CardItem({
|
||||
const startY = e.clientY;
|
||||
const startH = cardRef.current?.getBoundingClientRect().height ?? 100;
|
||||
const onMove = (ev: MouseEvent) => {
|
||||
onHeightChange(slot.id, Math.max(50, startH + (ev.clientY - startY)));
|
||||
onHeightChange(slot.key, Math.max(50, startH + (ev.clientY - startY)));
|
||||
};
|
||||
const onUp = () => {
|
||||
window.removeEventListener("mousemove", onMove);
|
||||
@@ -824,7 +845,7 @@ function CardItem({
|
||||
window.addEventListener("mousemove", onMove);
|
||||
window.addEventListener("mouseup", onUp);
|
||||
},
|
||||
[slot.id, onHeightChange],
|
||||
[slot.key, onHeightChange],
|
||||
);
|
||||
|
||||
const isFlex = slot.height === null;
|
||||
@@ -886,6 +907,7 @@ function CardItem({
|
||||
hostMetrics={hostMetrics}
|
||||
onOpenTab={onOpenTab}
|
||||
isAdmin={isAdmin}
|
||||
statusLoading={statusLoading}
|
||||
/>
|
||||
)}
|
||||
{slot.id === "recent_activity" && (
|
||||
@@ -894,6 +916,7 @@ function CardItem({
|
||||
hosts={hosts}
|
||||
onOpenTab={onOpenTab}
|
||||
onClear={onClearActivity}
|
||||
statusLoading={statusLoading}
|
||||
/>
|
||||
)}
|
||||
{slot.id === "network_graph" && (
|
||||
@@ -909,6 +932,11 @@ function CardItem({
|
||||
onDelete={onDeleteServiceLink}
|
||||
/>
|
||||
)}
|
||||
{slot.id === "homepage_preview" && (
|
||||
<HomepagePreviewCard
|
||||
onOpenFullscreen={() => onOpenSingletonTab("homepage")}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{editMode && !isFlex && (
|
||||
<div
|
||||
@@ -999,9 +1027,9 @@ type PanelColumnProps = {
|
||||
onDragStart: (slot: CardSlot) => void;
|
||||
onDrop: (targetPanel: PanelId, targetOrder: number) => void;
|
||||
onDragOver: (e: React.DragEvent) => void;
|
||||
onRemove: (id: DashboardCardId) => void;
|
||||
onRemove: (key: string) => void;
|
||||
onAdd: (id: DashboardCardId, panel: PanelId) => void;
|
||||
onHeightChange: (id: DashboardCardId, h: number) => void;
|
||||
onHeightChange: (key: string, h: number) => void;
|
||||
onOpenSingletonTab: (type: TabType, pendingEvent?: string) => void;
|
||||
onOpenTab: (host: Host, type: TabType) => void;
|
||||
hosts: Host[];
|
||||
@@ -1022,6 +1050,7 @@ type PanelColumnProps = {
|
||||
serviceLinks: ServiceLink[];
|
||||
onAddServiceLink: (label: string, url: string) => Promise<void>;
|
||||
onDeleteServiceLink: (id: number) => Promise<void>;
|
||||
statusLoading: boolean;
|
||||
};
|
||||
|
||||
function PanelColumn({
|
||||
@@ -1052,6 +1081,7 @@ function PanelColumn({
|
||||
serviceLinks,
|
||||
onAddServiceLink,
|
||||
onDeleteServiceLink,
|
||||
statusLoading,
|
||||
}: PanelColumnProps) {
|
||||
const { t } = useTranslation();
|
||||
const sorted = [...slots].sort((a, b) => a.order - b.order);
|
||||
@@ -1068,7 +1098,7 @@ function PanelColumn({
|
||||
/>
|
||||
{sorted.map((slot, idx) => (
|
||||
<div
|
||||
key={slot.id}
|
||||
key={slot.key}
|
||||
className={`flex flex-col min-h-0 ${slot.height === null ? "flex-1" : "shrink-0"}`}
|
||||
>
|
||||
{idx > 0 && (
|
||||
@@ -1085,11 +1115,11 @@ function PanelColumn({
|
||||
<CardItem
|
||||
slot={slot}
|
||||
editMode={editMode}
|
||||
isDragging={dragState?.id === slot.id}
|
||||
isDragging={dragState?.key === slot.key}
|
||||
onDragStart={() => onDragStart(slot)}
|
||||
onDrop={() => onDrop(slot.panel, slot.order)}
|
||||
onDragOver={onDragOver}
|
||||
onRemove={() => onRemove(slot.id)}
|
||||
onRemove={() => onRemove(slot.key)}
|
||||
onHeightChange={onHeightChange}
|
||||
onOpenSingletonTab={onOpenSingletonTab}
|
||||
onOpenTab={onOpenTab}
|
||||
@@ -1107,6 +1137,7 @@ function PanelColumn({
|
||||
serviceLinks={serviceLinks}
|
||||
onAddServiceLink={onAddServiceLink}
|
||||
onDeleteServiceLink={onDeleteServiceLink}
|
||||
statusLoading={statusLoading}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
@@ -1162,17 +1193,52 @@ export function DashboardTab({
|
||||
onOpenTab: (host: Host, type: TabType) => void;
|
||||
}) {
|
||||
const { t, i18n } = useTranslation();
|
||||
const { initialLoadComplete } = useServerStatus();
|
||||
const statusLoading = !initialLoadComplete;
|
||||
|
||||
const [slots, setSlots] = useState<CardSlot[]>(() => {
|
||||
try {
|
||||
const saved = localStorage.getItem("dashboardTab.slots");
|
||||
if (saved) return JSON.parse(saved) as CardSlot[];
|
||||
if (saved) {
|
||||
const parsed = JSON.parse(saved) as CardSlot[];
|
||||
return parsed.map((s, i) => ({ key: s.key ?? `${s.id}_${i}`, ...s }));
|
||||
}
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
return DEFAULT_SLOTS;
|
||||
});
|
||||
|
||||
const [homepageLinkCopied, setHomepageLinkCopied] = useState(false);
|
||||
|
||||
const handleCopyHomepageLink = () => {
|
||||
navigator.clipboard
|
||||
.writeText(`${window.location.origin}?view=homepage`)
|
||||
.catch(() => {});
|
||||
setHomepageLinkCopied(true);
|
||||
setTimeout(() => setHomepageLinkCopied(false), 1500);
|
||||
};
|
||||
|
||||
const [dashboardView, setDashboardView] = useState<"dashboard" | "homepage">(
|
||||
() => {
|
||||
try {
|
||||
return (localStorage.getItem("dashboardView") ?? "dashboard") as
|
||||
| "dashboard"
|
||||
| "homepage";
|
||||
} catch {
|
||||
return "dashboard";
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
localStorage.setItem("dashboardView", dashboardView);
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}, [dashboardView]);
|
||||
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
const [dragState, setDragState] = useState<DragState>(null);
|
||||
|
||||
@@ -1401,6 +1467,7 @@ export function DashboardTab({
|
||||
recent_activity: t("dashboard.recentActivity"),
|
||||
network_graph: t("dashboard.networkGraph"),
|
||||
service_links: t("dashboard.serviceLinks"),
|
||||
homepage_preview: t("dashboard.homepagePreview"),
|
||||
};
|
||||
|
||||
const onColumnDividerMouseDown = useCallback(
|
||||
@@ -1430,6 +1497,7 @@ export function DashboardTab({
|
||||
|
||||
const handleDragStart = (slot: CardSlot) =>
|
||||
setDragState({
|
||||
key: slot.key,
|
||||
id: slot.id,
|
||||
sourcePanel: slot.panel,
|
||||
sourceOrder: slot.order,
|
||||
@@ -1438,7 +1506,7 @@ export function DashboardTab({
|
||||
const handleDrop = (targetPanel: PanelId, targetOrder: number) => {
|
||||
if (!dragState) return;
|
||||
setSlots((prev) => {
|
||||
const without = prev.filter((s) => s.id !== dragState.id);
|
||||
const without = prev.filter((s) => s.key !== dragState.key);
|
||||
const panelSlots = without
|
||||
.filter((s) => s.panel === targetPanel)
|
||||
.sort((a, b) => a.order - b.order);
|
||||
@@ -1448,10 +1516,11 @@ export function DashboardTab({
|
||||
const newPanelSlots = [
|
||||
...panelSlots.slice(0, insertAt),
|
||||
{
|
||||
key: dragState.key,
|
||||
id: dragState.id,
|
||||
panel: targetPanel,
|
||||
order: 0,
|
||||
height: prev.find((s) => s.id === dragState.id)?.height ?? null,
|
||||
height: prev.find((s) => s.key === dragState.key)?.height ?? null,
|
||||
},
|
||||
...panelSlots.slice(insertAt),
|
||||
].map((s, i) => ({ ...s, order: i }));
|
||||
@@ -1459,8 +1528,8 @@ export function DashboardTab({
|
||||
});
|
||||
setDragState(null);
|
||||
};
|
||||
const handleRemove = (id: DashboardCardId) =>
|
||||
setSlots((prev) => prev.filter((s) => s.id !== id));
|
||||
const handleRemove = (key: string) =>
|
||||
setSlots((prev) => prev.filter((s) => s.key !== key));
|
||||
const handleAdd = (id: DashboardCardId, panel: PanelId) => {
|
||||
setSlots((prev) => {
|
||||
const panelSlots = prev.filter((s) => s.panel === panel);
|
||||
@@ -1476,12 +1545,16 @@ export function DashboardTab({
|
||||
: id === "service_links"
|
||||
? 200
|
||||
: 150;
|
||||
return [...prev, { id, panel, order: maxOrder, height: defaultHeight }];
|
||||
const key = `${id}_${Date.now()}`;
|
||||
return [
|
||||
...prev,
|
||||
{ key, id, panel, order: maxOrder, height: defaultHeight },
|
||||
];
|
||||
});
|
||||
};
|
||||
const handleHeightChange = (id: DashboardCardId, h: number) =>
|
||||
const handleHeightChange = (key: string, h: number) =>
|
||||
setSlots((prev) =>
|
||||
prev.map((s) => (s.id === id ? { ...s, height: h } : s)),
|
||||
prev.map((s) => (s.key === key ? { ...s, height: h } : s)),
|
||||
);
|
||||
const handleReset = () => {
|
||||
setSlots(DEFAULT_SLOTS);
|
||||
@@ -1513,6 +1586,7 @@ export function DashboardTab({
|
||||
serviceLinks,
|
||||
onAddServiceLink: handleAddServiceLink,
|
||||
onDeleteServiceLink: handleDeleteServiceLink,
|
||||
statusLoading,
|
||||
};
|
||||
|
||||
const isMobile = useIsMobile();
|
||||
@@ -1637,6 +1711,7 @@ export function DashboardTab({
|
||||
hostMetrics={hostMetrics}
|
||||
onOpenTab={onOpenTab}
|
||||
isAdmin={isAdmin}
|
||||
statusLoading={statusLoading}
|
||||
/>
|
||||
)}
|
||||
{slot.id === "recent_activity" && (
|
||||
@@ -1645,6 +1720,7 @@ export function DashboardTab({
|
||||
hosts={hosts}
|
||||
onOpenTab={onOpenTab}
|
||||
onClear={handleClearActivity}
|
||||
statusLoading={statusLoading}
|
||||
/>
|
||||
)}
|
||||
{slot.id === "network_graph" && (
|
||||
@@ -1670,14 +1746,29 @@ export function DashboardTab({
|
||||
return (
|
||||
<div className="flex flex-col w-full h-full min-h-0 overflow-hidden">
|
||||
<Card className="flex-row items-center justify-between px-5 py-3 shrink-0 mx-5 mt-5 gap-0">
|
||||
<div>
|
||||
<h1 className="text-lg font-bold leading-tight">
|
||||
{t("dashboard.title")}
|
||||
</h1>
|
||||
<p className="text-xs text-muted-foreground">{todayLabel}</p>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-0 bg-muted/40 border border-border p-0.5">
|
||||
<button
|
||||
onClick={() => setDashboardView("dashboard")}
|
||||
className={`px-3 py-1 text-sm font-medium transition-colors ${dashboardView === "dashboard" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`}
|
||||
>
|
||||
{t("dashboard.title")}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setDashboardView("homepage")}
|
||||
className={`px-3 py-1 text-sm font-medium transition-colors ${dashboardView === "homepage" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`}
|
||||
>
|
||||
{t("nav.homepage")}
|
||||
</button>
|
||||
</div>
|
||||
{dashboardView === "dashboard" && (
|
||||
<p className="text-xs text-muted-foreground hidden sm:block">
|
||||
{todayLabel}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="hidden sm:flex items-center gap-2 mr-2 bg-muted/50 px-2.5 py-1 rounded-sm border border-border">
|
||||
<div className="hidden sm:flex items-center gap-2 mr-2 bg-muted/50 px-2.5 py-1 rounded-none border border-border">
|
||||
<span className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">
|
||||
{t("dashboardTab.commandPalette")}
|
||||
</span>
|
||||
@@ -1757,95 +1848,143 @@ export function DashboardTab({
|
||||
{t("dashboard.donate")}
|
||||
</a>
|
||||
</Button>
|
||||
<Separator orientation="vertical" className="mx-1 h-5" />
|
||||
{editMode ? (
|
||||
{dashboardView === "dashboard" && (
|
||||
<>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-xs text-muted-foreground"
|
||||
onClick={handleReset}
|
||||
>
|
||||
{t("dashboard.reset")}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
className="text-xs bg-accent-brand hover:bg-accent-brand/90 text-white"
|
||||
onClick={() => setEditMode(false)}
|
||||
>
|
||||
{t("dashboardTab.done")}
|
||||
</Button>
|
||||
<Separator orientation="vertical" className="mx-1 h-5" />
|
||||
{editMode ? (
|
||||
<>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-xs text-muted-foreground"
|
||||
onClick={handleReset}
|
||||
>
|
||||
{t("dashboard.reset")}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
className="text-xs bg-accent-brand hover:bg-accent-brand/90 text-white"
|
||||
onClick={() => setEditMode(false)}
|
||||
>
|
||||
{t("dashboardTab.done")}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setEditMode(true)}
|
||||
title={t("dashboard.customizeLayout")}
|
||||
>
|
||||
<LayoutDashboard className="size-4 text-accent-brand" />
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setEditMode(true)}
|
||||
title={t("dashboard.customizeLayout")}
|
||||
>
|
||||
<LayoutDashboard className="size-4 text-accent-brand" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{editMode && (
|
||||
<div className="mx-5 mt-4 px-4 py-2 border border-dashed border-accent-brand/40 bg-accent-brand/5 shrink-0 flex items-center gap-2">
|
||||
<LayoutDashboard className="size-3.5 text-accent-brand shrink-0" />
|
||||
<span className="text-xs text-accent-brand font-semibold">
|
||||
{t("dashboardTab.editModeInstructions")}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
ref={bodyRef}
|
||||
className="flex flex-row flex-1 min-h-0 px-5 pb-5 pt-4 overflow-hidden"
|
||||
>
|
||||
<div
|
||||
className="flex flex-col min-h-0"
|
||||
style={{ width: hasSide || editMode ? `${mainWidthPct}%` : "100%" }}
|
||||
>
|
||||
<PanelColumn
|
||||
panel="main"
|
||||
slots={mainSlots}
|
||||
editMode={editMode}
|
||||
dragState={dragState}
|
||||
onDragStart={handleDragStart}
|
||||
onDrop={handleDrop}
|
||||
onDragOver={handleDragOver}
|
||||
onRemove={handleRemove}
|
||||
onAdd={handleAdd}
|
||||
onHeightChange={handleHeightChange}
|
||||
{...columnProps}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{(hasSide || editMode) &&
|
||||
(editMode ? (
|
||||
<ColumnDivider onMouseDown={onColumnDividerMouseDown} />
|
||||
) : (
|
||||
<div className="w-4 shrink-0" />
|
||||
))}
|
||||
|
||||
{(hasSide || editMode) && (
|
||||
<div className="flex flex-col min-h-0 flex-1">
|
||||
<PanelColumn
|
||||
panel="side"
|
||||
slots={sideSlots}
|
||||
editMode={editMode}
|
||||
dragState={dragState}
|
||||
onDragStart={handleDragStart}
|
||||
onDrop={handleDrop}
|
||||
onDragOver={handleDragOver}
|
||||
onRemove={handleRemove}
|
||||
onAdd={handleAdd}
|
||||
onHeightChange={handleHeightChange}
|
||||
{...columnProps}
|
||||
/>
|
||||
{dashboardView === "homepage" ? (
|
||||
<div className="flex-1 min-h-0 overflow-hidden mx-5 mb-5 mt-4 border border-border flex flex-col">
|
||||
<div className="flex items-center justify-between px-3 py-1.5 border-b border-border shrink-0 bg-muted/20">
|
||||
<span className="text-[10px] text-muted-foreground/50 uppercase tracking-widest font-semibold">
|
||||
{t("nav.homepage")}
|
||||
</span>
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
className="text-[10px] text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1"
|
||||
onClick={handleCopyHomepageLink}
|
||||
>
|
||||
{homepageLinkCopied ? (
|
||||
<>
|
||||
<Check size={10} className="text-accent-brand" />
|
||||
<span className="text-accent-brand">
|
||||
{t("homepage.linkCopied")}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Link size={10} />
|
||||
{t("homepage.copyLink")}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
className="text-[10px] text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1"
|
||||
onClick={() => onOpenSingletonTab("homepage")}
|
||||
>
|
||||
<ExternalLink size={10} />
|
||||
{t("homepage.openFullView")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-h-0 overflow-hidden">
|
||||
<HomepageCanvas />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{editMode && (
|
||||
<div className="mx-5 mt-4 px-4 py-2 border border-dashed border-accent-brand/40 bg-accent-brand/5 shrink-0 flex items-center gap-2">
|
||||
<LayoutDashboard className="size-3.5 text-accent-brand shrink-0" />
|
||||
<span className="text-xs text-accent-brand font-semibold">
|
||||
{t("dashboardTab.editModeInstructions")}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
ref={bodyRef}
|
||||
className="flex flex-row flex-1 min-h-0 px-5 pb-5 pt-4 overflow-hidden"
|
||||
>
|
||||
<div
|
||||
className="flex flex-col min-h-0"
|
||||
style={{
|
||||
width: hasSide || editMode ? `${mainWidthPct}%` : "100%",
|
||||
}}
|
||||
>
|
||||
<PanelColumn
|
||||
panel="main"
|
||||
slots={mainSlots}
|
||||
editMode={editMode}
|
||||
dragState={dragState}
|
||||
onDragStart={handleDragStart}
|
||||
onDrop={handleDrop}
|
||||
onDragOver={handleDragOver}
|
||||
onRemove={handleRemove}
|
||||
onAdd={handleAdd}
|
||||
onHeightChange={handleHeightChange}
|
||||
{...columnProps}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{(hasSide || editMode) &&
|
||||
(editMode ? (
|
||||
<ColumnDivider onMouseDown={onColumnDividerMouseDown} />
|
||||
) : (
|
||||
<div className="w-4 shrink-0" />
|
||||
))}
|
||||
|
||||
{(hasSide || editMode) && (
|
||||
<div className="flex flex-col min-h-0 flex-1">
|
||||
<PanelColumn
|
||||
panel="side"
|
||||
slots={sideSlots}
|
||||
editMode={editMode}
|
||||
dragState={dragState}
|
||||
onDragStart={handleDragStart}
|
||||
onDrop={handleDrop}
|
||||
onDragOver={handleDragOver}
|
||||
onRemove={handleRemove}
|
||||
onAdd={handleAdd}
|
||||
onHeightChange={handleHeightChange}
|
||||
{...columnProps}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
import { Card } from "@/components/card";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { LayoutGrid } from "lucide-react";
|
||||
import { HomepageCanvas } from "@/features/homepage/HomepageCanvas";
|
||||
|
||||
interface HomepagePreviewCardProps {
|
||||
onOpenFullscreen: () => void;
|
||||
}
|
||||
|
||||
export function HomepagePreviewCard({
|
||||
onOpenFullscreen,
|
||||
}: HomepagePreviewCardProps) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Card className="relative overflow-hidden w-full h-full flex flex-col p-0 gap-0">
|
||||
{/* Card header */}
|
||||
<div className="flex items-center gap-2 px-3 py-2 shrink-0 border-b border-border">
|
||||
<LayoutGrid className="size-3.5 text-muted-foreground" />
|
||||
<span className="text-xs font-semibold text-muted-foreground uppercase tracking-widest">
|
||||
{t("homepage.previewTitle")}
|
||||
</span>
|
||||
<button
|
||||
className="ml-auto text-[10px] text-muted-foreground hover:text-foreground transition-colors"
|
||||
onClick={onOpenFullscreen}
|
||||
>
|
||||
{t("homepage.openFullView")}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Live pannable preview — no pointer-events blocking so panning works */}
|
||||
<div className="flex-1 relative overflow-hidden">
|
||||
<HomepageCanvas isReadOnly={true} fitOnLoad={true} />
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -554,7 +554,7 @@ export function NetworkGraphCard({
|
||||
|
||||
const hideMenu = () => setContextMenu((p) => ({ ...p, visible: false }));
|
||||
|
||||
const fireOpen = (hostId: string, type: string) => {
|
||||
const fireOpen = (hostId: string, type?: string) => {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("termix:open-tab", { detail: { hostId, type } }),
|
||||
);
|
||||
@@ -571,7 +571,7 @@ export function NetworkGraphCard({
|
||||
setShowNodeDetail(true);
|
||||
}
|
||||
} else if (action === "connect") {
|
||||
fireOpen(targetId, "terminal");
|
||||
fireOpen(targetId);
|
||||
} else if (action === "move") {
|
||||
setSelectedNodeId(targetId);
|
||||
const node = cyRef.current.$id(targetId);
|
||||
|
||||
Reference in New Issue
Block a user