From 6e4ee805da23ac8969f4161d27047b5b82a07abc Mon Sep 17 00:00:00 2001
From: kaitranntt <kaitran.ntt@gmail.com>
Date: Mon, 15 Dec 2025 16:14:59 -0500
Subject: [PATCH] feat(ui): add documentation button to header

---
 ui/src/components/docs-link.tsx | 20 ++++++++++++++++++++
 ui/src/components/layout.tsx    |  2 ++
 2 files changed, 22 insertions(+)
 create mode 100644 ui/src/components/docs-link.tsx

diff --git a/ui/src/components/docs-link.tsx b/ui/src/components/docs-link.tsx
new file mode 100644
index 00000000..72e16014
--- /dev/null
+++ b/ui/src/components/docs-link.tsx
@@ -0,0 +1,20 @@
+/**
+ * Docs Link Button
+ *
+ * Links to CCS documentation site for guides and reference.
+ */
+
+import { BookOpen } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+const DOCS_URL = 'https://docs.ccs.kaitran.ca';
+
+export function DocsLink() {
+  return (
+    <Button variant="ghost" size="icon" asChild title="View documentation">
+      <a href={DOCS_URL} target="_blank" rel="noopener noreferrer">
+        <BookOpen className="w-4 h-4" />
+      </a>
+    </Button>
+  );
+}
diff --git a/ui/src/components/layout.tsx b/ui/src/components/layout.tsx
index fba044b2..2872d377 100644
--- a/ui/src/components/layout.tsx
+++ b/ui/src/components/layout.tsx
@@ -4,6 +4,7 @@ import { SidebarProvider } from '@/components/ui/sidebar';
 import { AppSidebar } from '@/components/app-sidebar';
 import { ThemeToggle } from '@/components/theme-toggle';
 import { GitHubLink } from '@/components/github-link';
+import { DocsLink } from '@/components/docs-link';
 import { ConnectionIndicator } from '@/components/connection-indicator';
 import { LocalhostDisclaimer } from '@/components/localhost-disclaimer';
 import { Skeleton } from '@/components/ui/skeleton';
@@ -26,6 +27,7 @@ export function Layout() {
           <div className="font-semibold text-lg tracking-tight">CCS Config</div>
           <div className="flex items-center gap-2">
             <ConnectionIndicator />
+            <DocsLink />
             <GitHubLink />
             <ThemeToggle />
           </div>