feat(ui): short App Map, Servers and Terminal hints with InfoTips

Swap the long helper sentences on the App Map view line, the empty Servers list and the Terminal no-server pane for a short line plus an (i) InfoTip holding the full text. The App Map line stays one row on phone.
This commit is contained in:
Juan Denis committed 2026-11-07 22:26:39 -05:00
1 parent 725955fbcb
commit bf7f53c553
5 files changed
+30 -3

No files matched your search

+5
View File
@@ -462,9 +462,12 @@
"howThePanelConnectsToServers": "How the panel connects to servers, agents and services in production.",
"requestStack": "Request stack",
"routesApis": "Routes and APIs",
"routesShort": "Pages and the APIs they call.",
"runtimeTopology": "Runtime topology",
"showLegend": "Show legend",
"sidebarNavigationPagesBackendApiBlueprints": "Sidebar navigation → pages → backend API blueprints they call.",
"stackShort": "Browser through to the database.",
"topologyShort": "How the panel reaches servers.",
"views": "Views"
},
"appWafPanel": {
@@ -5809,6 +5812,7 @@
"pairAgentAction": "Pair agent",
"pairAnAgentAndTheMachine": "Pair an agent and the server shows up here with its CPU, memory and disk alongside every other server you run.",
"pairCode": "Pair code",
"pairShort": "Pair an agent to add it.",
"pairing": "Pairing…",
"passphrase": "Passphrase *",
"pasteThisIntoTheAgentOr": "Paste this into the agent, or run the installer.",
@@ -7556,6 +7560,7 @@
"norTheWindowsEventLogAre": ", nor the Windows Event Log are available.",
"notice": "Notice",
"openAShellOn": "Open a shell on {{name}}",
"pairShort": "Pair a server with shell access.",
"phpFpm": "PHP-FPM",
"pickServerToOpenShell": "Pick a server on the left to open a shell.",
"pid": "PID {{pid}} · {{value}}",
+7 -1
View File
@@ -10,6 +10,7 @@ import '@xyflow/react/dist/style.css';
import {
Map as MapIcon, Layers, Compass, Network, Info,
} from 'lucide-react';
import InfoTip from '@/components/InfoTip';
import { Tip } from '@/components/ui/tooltip';
import PageLayout from '../layouts/PageLayout';
import useTabParam from '../hooks/useTabParam';
@@ -289,6 +290,11 @@ export default function AppMap() {
routes: t('app.appMap.routesApis', 'Routes and APIs'),
topology: t('app.appMap.runtimeTopology', 'Runtime topology'),
};
const viewShort = {
stack: t('app.appMap.stackShort', 'Browser through to the database.'),
routes: t('app.appMap.routesShort', 'Pages and the APIs they call.'),
topology: t('app.appMap.topologyShort', 'How the panel reaches servers.'),
};
const viewDescriptions = {
stack: t('app.appMap.howARequestFlowsFromThe', 'How a request flows from the browser through the frontend, backend, services and database.'),
routes: t('app.appMap.sidebarNavigationPagesBackendApiBlueprints', 'Sidebar navigation → pages → backend API blueprints they call.'),
@@ -325,7 +331,7 @@ export default function AppMap() {
</Tip>
)}
>
<p className="app-map__viewmeta">{viewDescriptions[view.id]}</p>
<p className="app-map__viewmeta"><span className="app-map__viewmeta-text">{viewShort[view.id]}</span><InfoTip>{viewDescriptions[view.id]}</InfoTip></p>
{showLegend && (
<div className="app-map__legend">
+1 -1
View File
@@ -464,7 +464,7 @@ const Servers = () => {
icon={ServerLucideIcon}
title={servers.length === 0 ? t('app.servers.noServersYet', 'No servers yet') : t('app.servers.noServersMatchTheseFilters', 'No servers match these filters')}
description={servers.length === 0
? t('app.servers.pairAnAgentAndTheMachine', 'Pair an agent and the server shows up here with its CPU, memory and disk alongside every other server you run.')
? <>{t('app.servers.pairShort', 'Pair an agent to add it.')} <InfoTip>{t('app.servers.pairAnAgentAndTheMachine', 'Pair an agent and the server shows up here with its CPU, memory and disk alongside every other server you run.')}</InfoTip></>
: t('app.servers.adjustTheSearchOrClearThe', 'Adjust the search or clear the column filters to see your servers.')}
action={servers.length === 0 ? (
<Button onClick={() => setShowAddModal(true)}>
+2 -1
View File
@@ -16,6 +16,7 @@ import ProcessTable from '../components/ProcessTable';
import { procUser } from '../components/processData';
import SystemdServicesTab from '../components/serverdetail/ServicesTab';
import { useTableSort } from '@/hooks/useTableSort';
import InfoTip from '@/components/InfoTip';
import PageLayout from '../layouts/PageLayout';
import { downloadBlob } from '@/utils/downloadBlob';
import { usePolling } from '@/hooks/usePolling';
@@ -151,7 +152,7 @@ const TerminalShellTab = () => {
<p>
{anyOnline
? t('app.terminal.pickServerToOpenShell', 'Pick a server on the left to open a shell.')
: t('app.terminal.shellsRunOverAgent', 'Interactive shells run over the ServerKit agent. Pair a server (Servers → Add server) with shell access and it shows up here.')}
: <>{t('app.terminal.pairShort', 'Pair a server with shell access.')} <InfoTip>{t('app.terminal.shellsRunOverAgent', 'Interactive shells run over the ServerKit agent. Pair a server (Servers → Add server) with shell access and it shows up here.')}</InfoTip></>}
</p>
</div>
)}
+15
View File
@@ -12,6 +12,21 @@
margin: 0 0 $space-3;
font-size: $text-sm;
color: $text-secondary;
display: flex;
align-items: center;
gap: 0.25rem;
min-width: 0;
&-text {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
> :not(.app-map__viewmeta-text) {
flex-shrink: 0;
}
}
&__legend {