From 60780385a2bf82e9dfc823dbbe68092663b73911 Mon Sep 17 00:00:00 2001
From: Bruno Pavelja <bruno@pavelja.me>
Date: Sat, 25 Apr 2026 14:46:13 +0200
Subject: [PATCH] feat(web): add module links and rename nav items

- Add module tabs: Web Scan, SEO Crawler with active state detection
- Remove separate History link from top nav (history belongs in modules)
- Remove unused Clock and Search icon imports
---
 packages/web/src/components/layout/Nav.tsx | 57 ++++++++++++++++------
 1 file changed, 43 insertions(+), 14 deletions(-)

diff --git a/packages/web/src/components/layout/Nav.tsx b/packages/web/src/components/layout/Nav.tsx
index 23d61a9..9e50d88 100644
--- a/packages/web/src/components/layout/Nav.tsx
+++ b/packages/web/src/components/layout/Nav.tsx
@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect } from "react";
-import { Link } from "react-router-dom";
-import { Globe, Clock, Palette, Check, Settings } from "lucide-react";
+import { Link, useLocation } from "react-router-dom";
+import { Globe, Palette, Check, Settings } from "lucide-react";
 import { useTheme } from "@/hooks/use-theme";
 
 interface NavProps {
@@ -12,6 +12,14 @@ export default function Nav({ userMenu }: NavProps = {}) {
   const [showThemes, setShowThemes] = useState(false);
   const { theme, setTheme, themes } = useTheme();
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const location = useLocation();
+
+  const seoActive = location.pathname.startsWith("/seo");
+  const generalActive =
+    location.pathname.startsWith("/recon")
+    || location.pathname.startsWith("/results")
+    || location.pathname === "/history"
+    || location.pathname.startsWith("/history/");
 
   // Close theme dropdown on click outside
   useEffect(() => {
@@ -28,21 +36,27 @@ export default function Nav({ userMenu }: NavProps = {}) {
   return (
     <nav className="border-b border-border/50 bg-surface/60 backdrop-blur-md sticky top-0 z-40">
       <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-6">
-        <Link
-          to="/"
-          className="flex items-center gap-2.5 text-foreground hover:text-accent transition-colors"
-        >
-          <Globe className="h-5 w-5 text-accent" />
-          <span
-            className="text-lg font-bold tracking-tight"
-            style={{ fontFamily: "var(--font-display)" }}
+        <div className="flex items-center gap-4">
+          <Link
+            to="/"
+            className="flex items-center gap-2.5 text-foreground hover:text-accent transition-colors"
           >
-            recon-web
-          </span>
-        </Link>
+            <Globe className="h-5 w-5 text-accent" />
+            <span
+              className="text-lg font-bold tracking-tight"
+              style={{ fontFamily: "var(--font-display)" }}
+            >
+              recon-web
+            </span>
+          </Link>
+
+          <div className="flex items-center gap-1">
+            <ModuleLink to="/recon" label="Web Scan" active={generalActive} />
+            <ModuleLink to="/seo" label="SEO Crawler" active={seoActive} />
+          </div>
+        </div>
 
         <div className="flex items-center gap-1">
-          <NavLink to="/history" icon={Clock} label="History" />
           <NavLink to="/settings" icon={Settings} label="Settings" />
 
           {/* Theme switcher */}
@@ -108,6 +122,21 @@ export default function Nav({ userMenu }: NavProps = {}) {
   );
 }
 
+function ModuleLink({ to, label, active }: { to: string; label: string; active: boolean }) {
+  return (
+    <Link
+      to={to}
+      className={`rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
+        active
+          ? "text-foreground bg-surface-light/60"
+          : "text-muted hover:text-foreground hover:bg-surface-light/40"
+      }`}
+    >
+      {label}
+    </Link>
+  );
+}
+
 function NavLink({
   to,
   icon: Icon,