Mohamed Boudra
e73c332e4f
Add a new Integrations section in desktop settings that lets users install the Paseo CLI and orchestration skills directly from the app. CLI install symlinks the bundled shim to ~/.local/bin and updates the user's shell rc file if needed. Skills install copies SKILL.md files to ~/.agents/skills/, symlinks into ~/.claude/skills/ for Claude Code, and copies to ~/.codex/skills/ for Codex. Both use a single status check code path for install verification and on-load detection. Also adds a /docs/skills page documenting all six orchestration skills, extracts shared settings styles (section headers, rows) used across the daemon, integrations, and shortcuts sections, and reorders the settings sidebar to group integrations and daemon together.
72 lines
2.5 KiB
TypeScript
72 lines
2.5 KiB
TypeScript
import { createFileRoute, Link, Outlet } from "@tanstack/react-router";
|
|
import "~/styles.css";
|
|
|
|
export const Route = createFileRoute("/docs")({
|
|
component: DocsLayout,
|
|
});
|
|
|
|
const navigation = [
|
|
{ name: "Getting started", href: "/docs" },
|
|
{ name: "Updates", href: "/docs/updates" },
|
|
{ name: "Voice", href: "/docs/voice" },
|
|
{ name: "Git worktrees", href: "/docs/worktrees" },
|
|
{ name: "CLI", href: "/docs/cli" },
|
|
{ name: "Skills", href: "/docs/skills" },
|
|
{ name: "Configuration", href: "/docs/configuration" },
|
|
{ name: "Security", href: "/docs/security" },
|
|
{ name: "Best practices", href: "/docs/best-practices" },
|
|
];
|
|
|
|
function DocsLayout() {
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
{/* Mobile header */}
|
|
<header className="md:hidden border-b border-border p-4">
|
|
<Link to="/" className="flex items-center gap-3">
|
|
<img src="/logo.svg" alt="Paseo" className="w-6 h-6" />
|
|
<span className="text-lg font-medium">Paseo</span>
|
|
</Link>
|
|
<nav className="flex gap-4 mt-4">
|
|
{navigation.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
to={item.href}
|
|
activeOptions={{ exact: true }}
|
|
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
|
activeProps={{ className: "text-foreground" }}
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</header>
|
|
|
|
<div className="max-w-5xl mx-auto flex">
|
|
{/* Desktop sidebar */}
|
|
<aside className="hidden md:block w-56 shrink-0 border-r border-border p-6 sticky top-0 h-screen">
|
|
<Link to="/" className="flex items-center gap-3 mb-8">
|
|
<img src="/logo.svg" alt="Paseo" className="w-6 h-6" />
|
|
<span className="text-lg font-medium">Paseo</span>
|
|
</Link>
|
|
<nav className="space-y-1">
|
|
{navigation.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
to={item.href}
|
|
activeOptions={{ exact: true }}
|
|
className="block px-3 py-2 text-sm rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
|
|
activeProps={{ className: "bg-muted text-foreground" }}
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</aside>
|
|
<main className="flex-1 p-6 md:p-12 max-w-3xl prose">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|