From e432f615aced657b353693a46bc0bb194e6d0367 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 26 May 2026 04:03:41 +0000
Subject: [PATCH] Header: add Extension + Universal Links to the main nav
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Nav goes from 2 links to 4 across all three Header variants (compact
expanding panel, simple inline, default organic). Each link gets the
same icon used in the cross-link cards / footer for consistency:

  - home          Home
  - explore       Telescope
  - extension     Download
  - universal     Compass

The two new routes (/extension, /universal-links) were already in the
app — this just promotes them out of the cross-link footer cards into
top-level navigation.
---
 src/components/Header.tsx | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 0e6543e..3b8e68a 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useRef } from 'react';
 import Link from 'next/link';
-import { Home, Leaf, Telescope } from 'lucide-react';
+import { Compass, Download, Home, Leaf, Telescope } from 'lucide-react';
 import { motion } from 'framer-motion';
 import ThemeToggle from './ThemeToggle';
 import SessionMenu from './SessionMenu';
@@ -171,6 +171,14 @@ export default function Header({ simple = false, compact = false }: HeaderProps)
               <Telescope size={16} />
               <span>explore</span>
             </Link>
+            <Link href="/extension" className="compact-nav-link">
+              <Download size={16} />
+              <span>extension</span>
+            </Link>
+            <Link href="/universal-links" className="compact-nav-link">
+              <Compass size={16} />
+              <span>universal links</span>
+            </Link>
             <div style={{ marginTop: '0.5rem' }}>
               <ThemeToggle variant="row" />
             </div>
@@ -269,6 +277,16 @@ export default function Header({ simple = false, compact = false }: HeaderProps)
             <span>explore</span>
           </Link>
           <span style={{ color: 'var(--text-tertiary)', fontSize: '0.75rem' }}>·</span>
+          <Link href="/extension" className="nav-link">
+            <Download size={14} />
+            <span>extension</span>
+          </Link>
+          <span style={{ color: 'var(--text-tertiary)', fontSize: '0.75rem' }}>·</span>
+          <Link href="/universal-links" className="nav-link">
+            <Compass size={14} />
+            <span>universal links</span>
+          </Link>
+          <span style={{ color: 'var(--text-tertiary)', fontSize: '0.75rem' }}>·</span>
           <ThemeToggle variant="inline" />
           <span style={{ color: 'var(--text-tertiary)', fontSize: '0.75rem' }}>·</span>
           <SessionMenu variant="inline" />
@@ -366,6 +384,16 @@ export default function Header({ simple = false, compact = false }: HeaderProps)
           <span>explore</span>
         </Link>
         <span style={{ color: 'var(--text-tertiary)', fontSize: '0.875rem' }}>·</span>
+        <Link href="/extension" className="nav-link">
+          <Download size={16} />
+          <span>extension</span>
+        </Link>
+        <span style={{ color: 'var(--text-tertiary)', fontSize: '0.875rem' }}>·</span>
+        <Link href="/universal-links" className="nav-link">
+          <Compass size={16} />
+          <span>universal links</span>
+        </Link>
+        <span style={{ color: 'var(--text-tertiary)', fontSize: '0.875rem' }}>·</span>
         <ThemeToggle variant="inline" />
         <span style={{ color: 'var(--text-tertiary)', fontSize: '0.875rem' }}>·</span>
         <SessionMenu variant="inline" />
-- 
2.51.2