diff --git a/src/pages/Help.tsx b/src/pages/Help.tsx index d5cf4dc..9d72b0a 100644 --- a/src/pages/Help.tsx +++ b/src/pages/Help.tsx @@ -10,6 +10,11 @@ import { Gauge, Settings, Search, + Lightbulb, + ArrowRightLeft, + ArrowLeftRight, + Shuffle, + Rocket, type LucideIcon, } from 'lucide-react' @@ -25,6 +30,7 @@ interface GuideEntry { title: string description: string tips?: string[] + examples?: { icon?: LucideIcon; label?: string; text: string }[] } const guideEntries: GuideEntry[] = [ @@ -34,6 +40,9 @@ const guideEntries: GuideEntry[] = [ description: 'The home dashboard. Shows overall system health, a rollup of connected integrations, recent activity, and shortcuts into the rest of the app.', tips: ['Click "Connected Integrations" entries to jump straight to Infrastructure.'], + examples: [ + { text: 'First thing in the morning: open Glance to see if anything went offline overnight before digging into any one page.' }, + ], }, { icon: Server, @@ -41,6 +50,9 @@ const guideEntries: GuideEntry[] = [ description: 'Lists every connected integration (Proxmox, AWS, Docker, NetBird, Cloudflare, Uptime Kuma, Weather, SSH hosts) and the live resources/health each one reports.', tips: ['Add new integrations from Settings → Integrations — they show up here automatically.'], + examples: [ + { text: 'Connect Proxmox and AWS, then check VM and EC2 health side by side without opening either provider\'s own dashboard.' }, + ], }, { icon: Bookmark, @@ -50,61 +62,139 @@ const guideEntries: GuideEntry[] = [ 'Icons are auto-detected from the title or URL (e.g. typing "Proxmox" picks up the real Proxmox logo) — pick "Choose manually" if it guesses wrong.', 'Star a bookmark to pin it to the Favorites panel.', ], + examples: [ + { text: 'Organize your router admin page, NAS UI, and internal wiki into "Network", "Storage", and "Docs" categories so new teammates can find them without asking.' }, + ], }, { icon: Terminal, title: 'Terminal', description: 'A full SSH terminal to any host you\'ve added as an integration — supports tabs, split panes, jump hosts, and certificate auth.', tips: ['Session output can be logged; theme and font preferences are remembered between visits.'], + examples: [ + { text: 'SSH into a public-facing jump host, then open a second tab routed through it to reach a private VM that has no public IP of its own.' }, + ], }, { icon: Waypoints, title: 'Tunnels', - description: 'Local, remote, and dynamic (SOCKS5) SSH tunnels. Tunnels can be set to auto-start whenever the backend boots.', + description: + 'Local, remote, and dynamic (SOCKS5) SSH tunnels, each riding on top of an existing SSH Host integration. Tunnels can be set to auto-start whenever the backend boots, and the app keeps retrying if a connection drops.', + tips: ['Pick an SSH host from Settings → Integrations → SSH Hosts first — tunnels are created on top of one.'], + examples: [ + { + icon: ArrowRightLeft, + label: 'Local Forward', + text: 'A database on a remote server only listens on its own localhost. Forward remote 5432 to your local 5432, and connect a DB client as if it were running on your machine.', + }, + { + icon: ArrowLeftRight, + label: 'Remote Forward', + text: 'You\'re running something on your laptop (e.g. a dev server on :3000) and need a remote server to reach it temporarily — remote forward exposes your local port on the remote side.', + }, + { + icon: Shuffle, + label: 'Dynamic (SOCKS5)', + text: 'Point your browser\'s proxy settings at the SOCKS5 port and browse as if you were sitting inside the remote network — useful for reaching a whole subnet of internal services through one SSH host, instead of forwarding each port individually.', + }, + ], }, { icon: FolderOpen, title: 'Files', description: 'Browse, edit, upload, and download files over SFTP on any connected SSH host — and transfer files directly between two hosts without round-tripping through your machine.', tips: ['Use the "Send to another host" action on a file row to start a host-to-host transfer; progress shows live in the panel at the bottom.'], + examples: [ + { text: 'Move a large backup folder from one VPS straight to another, without downloading gigabytes to your laptop first just to re-upload them.' }, + ], }, { icon: Box, title: 'Containers', - description: 'Manage Docker containers on remote hosts — start, stop, view logs, and exec into a running container.', + description: 'Manage Docker containers on remote hosts — start, stop, view logs, and exec into a running container. Containers can come from a direct Docker API connection, an SSH host (runs the `docker` CLI for you), or a lightweight monitoring agent.', + tips: ['No Docker API port to expose? Add the host as an SSH Host integration instead — containers show up the same way, just routed through SSH.'], + examples: [ + { text: 'A container crashed on a VM you don\'t want to manually SSH into — pick the host on the Containers page, hit restart, and watch the new logs without leaving the browser.' }, + ], }, { icon: MonitorSmartphone, title: 'Remote Desktop', description: 'RDP, VNC, and Telnet sessions to remote machines, streamed through the built-in Guacamole proxy — no separate client needed.', + examples: [ + { text: 'Open a VNC session into a headless Ubuntu box to fix a stuck GUI app, entirely inside the browser tab — no VNC viewer install required.' }, + ], }, { icon: Gauge, title: 'Host Metrics', description: 'Live CPU, memory, disk, network, listening-port, firewall, process, and login-activity widgets for any SSH-managed host.', + examples: [ + { text: 'Catch a host slowly running out of disk space days before it takes a service down with it.' }, + ], }, { icon: Settings, title: 'Settings', description: 'Your profile, integrations, appearance, notifications, and full data export/import (back up or migrate every integration, bookmark, and tunnel as a single JSON file).', + examples: [ + { text: 'Export everything before reinstalling the OS on the box ArchNest itself runs on, then import it on the fresh install to get back to where you left off.' }, + ], }, { icon: Search, title: 'Search (top bar)', description: 'The search box at the top of every page looks across pages, integrations, and bookmarks at once — press Enter to jump to the top match.', + examples: [ + { text: 'Type "proxmox" and hit Enter to jump straight to your Proxmox integration, instead of clicking through to Infrastructure first.' }, + ], }, ] +const quickStartSteps = [ + 'Add at least one integration in Settings → Integrations — an SSH Host is the easiest first connection, since Terminal, Files, Tunnels, Host Metrics, and Containers can all use it.', + 'Open Terminal or Files to confirm the connection actually works end to end.', + 'If you need to reach something deeper in a private network (a DB, an internal site, a whole subnet), set up a Tunnel for it instead of opening more ports.', + 'Bookmark the dashboards and tools you check often in BookNest, so the next visit is one click instead of a search.', +] + export default function Help() { return (
-
+

How ArchNest works

- A quick tour of every page and what it's for. Use the sidebar to navigate, or the search bar at the top to jump straight to something. + A quick tour of every page and what it's for, with real examples for each. Use the sidebar to navigate, or the + search bar at the top to jump straight to something.

+
+
+
+ +
+

New here? Start in this order

+
+
    + {quickStartSteps.map((step, i) => ( +
  1. + {step} +
    2. + ))} +
+
+
{guideEntries.map((entry) => { const Icon = entry.icon @@ -136,6 +226,31 @@ export default function Help() { ))} )} + {entry.examples && entry.examples.length > 0 && ( +
+ {entry.examples.map((ex, i) => { + const ExIcon = ex.icon ?? Lightbulb + return ( +
+ +

+ {ex.label && {ex.label}: } + {ex.text} +

+
+ ) + })} +
+ )}
) })}