{favorites.length > 0 ? (
- favorites.map((f) => {
- const Icon = resolveIcon(f.icon)
- return (
-
-
- {f.title}
-
- )
- })
+ favorites.map((f) => (
+
+
+ {f.title}
+
+ ))
) : (
No favorites yet
)}
diff --git a/src/pages/Help.tsx b/src/pages/Help.tsx
new file mode 100644
index 0000000..d5cf4dc
--- /dev/null
+++ b/src/pages/Help.tsx
@@ -0,0 +1,145 @@
+import {
+ LayoutGrid,
+ Server,
+ Bookmark,
+ Terminal,
+ Waypoints,
+ FolderOpen,
+ Box,
+ MonitorSmartphone,
+ Gauge,
+ Settings,
+ Search,
+ type LucideIcon,
+} from 'lucide-react'
+
+const cardBase: React.CSSProperties = {
+ backgroundColor: 'rgba(10, 10, 12, 0.92)',
+ border: '1px solid rgba(200, 164, 52, 0.08)',
+ borderRadius: '12px',
+ padding: '22px',
+}
+
+interface GuideEntry {
+ icon: LucideIcon
+ title: string
+ description: string
+ tips?: string[]
+}
+
+const guideEntries: GuideEntry[] = [
+ {
+ icon: LayoutGrid,
+ title: 'Glance',
+ 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.'],
+ },
+ {
+ icon: Server,
+ title: 'Infrastructure',
+ 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.'],
+ },
+ {
+ icon: Bookmark,
+ title: 'BookNest',
+ description: 'A categorized bookmark manager for the links you use most — internal tools, dashboards, docs, anything.',
+ tips: [
+ '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.',
+ ],
+ },
+ {
+ 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.'],
+ },
+ {
+ icon: Waypoints,
+ title: 'Tunnels',
+ description: 'Local, remote, and dynamic (SOCKS5) SSH tunnels. Tunnels can be set to auto-start whenever the backend boots.',
+ },
+ {
+ 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.'],
+ },
+ {
+ icon: Box,
+ title: 'Containers',
+ description: 'Manage Docker containers on remote hosts — start, stop, view logs, and exec into a running container.',
+ },
+ {
+ 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.',
+ },
+ {
+ icon: Gauge,
+ title: 'Host Metrics',
+ description: 'Live CPU, memory, disk, network, listening-port, firewall, process, and login-activity widgets for any SSH-managed host.',
+ },
+ {
+ 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).',
+ },
+ {
+ 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.',
+ },
+]
+
+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.
+
+
+
+
+ {guideEntries.map((entry) => {
+ const Icon = entry.icon
+ return (
+
+
+
{entry.description}
+ {entry.tips && entry.tips.length > 0 && (
+
+ {entry.tips.map((tip, i) => (
+ -
+ {tip}
+
+ ))}
+
+ )}
+
+ )
+ })}
+
+
+ )
+}