feat: add layout components (Navbar, Footer, PageContainer, AppShell)

- Navbar: responsive nav with ShieldAI logo, nav links, auth buttons, mobile hamburger menu, theme toggle, scroll-aware glass effect - Footer: multi-column responsive layout with product/company/resources/ legal links, social icons, copyright bar - PageContainer: centered wrapper with max-w-7xl and responsive padding - AppShell: root layout composing Navbar + main + Footer with dot-grid background and MetaProvider - useAuth stub hook for future auth integration (task 23) - Wire AppShell into app.tsx as Router root - Unit tests for PageContainer and useAuth
2026-05-25 13:58:42 -04:00
parent 6002ea383b
commit 6981a05de4
8 changed files with 632 additions and 6 deletions
--- a/web/src/app.tsx
+++ b/web/src/app.tsx
@@ -3,19 +3,17 @@ import { Router } from "@solidjs/router";
 import { FileRoutes } from "@solidjs/start/router";
 import { Suspense } from "solid-js";
 import { useTheme } from "./lib/theme";
+import { AppShell } from "./components/layout";
 import "./app.css";

 export default function App() {
  useTheme();
  return (
    <Router
-      root={props => (
-        <MetaProvider>
-          <Title>SolidStart - Basic</Title>
-          <a href="/">Index</a>
-          <a href="/about">About</a>
+      root={(props) => (
+        <AppShell>
          <Suspense>{props.children}</Suspense>
-        </MetaProvider>
+        </AppShell>
      )}
    >
      <FileRoutes />
--- a/web/src/components/layout/AppShell.tsx
+++ b/web/src/components/layout/AppShell.tsx
@@ -0,0 +1,45 @@
+import { MetaProvider, Title } from "@solidjs/meta";
+import { A } from "@solidjs/router";
+import { createEffect, onMount, onCleanup, type JSX } from "solid-js";
+import Navbar from "./Navbar";
+import Footer from "./Footer";
+
+interface AppShellProps {
+  children: JSX.Element;
+  title?: string;
+}
+
+export default function AppShell(props: AppShellProps) {
+  const title = () => props.title ?? "ShieldAI";
+
+  onMount(() => {
+    const onRouteChange = () => {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    };
+
+    const observer = new MutationObserver(() => {
+      onRouteChange();
+    });
+
+    if (document.body) {
+      observer.observe(document.body, { childList: true, subtree: true });
+    }
+
+    onCleanup(() => {
+      observer.disconnect();
+    });
+  });
+
+  return (
+    <MetaProvider>
+      <Title>{title()}</Title>
+      <div class="min-h-screen flex flex-col bg-[var(--color-bg)]">
+        <Navbar />
+        <main class="flex-1 pt-16 bg-dot-grid">
+          {props.children}
+        </main>
+        <Footer />
+      </div>
+    </MetaProvider>
+  );
+}
--- a/web/src/components/layout/Footer.tsx
+++ b/web/src/components/layout/Footer.tsx
@@ -0,0 +1,192 @@
+import { A } from "@solidjs/router";
+import { For } from "solid-js";
+
+function ShieldLogo() {
+  return (
+    <svg
+      width="24"
+      height="28"
+      viewBox="0 0 28 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <linearGradient
+          id="footer-shield-grad"
+          x1="0"
+          y1="0"
+          x2="28"
+          y2="32"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="var(--color-brand-primary)" />
+          <stop offset="1" stop-color="var(--color-brand-accent)" />
+        </linearGradient>
+      </defs>
+      <path
+        d="M14 0L26 6V16C26 24 14 32 14 32S2 24 2 16V6L14 0Z"
+        fill="url(#footer-shield-grad)"
+      />
+      <path
+        d="M10 16L13 19L19 13"
+        stroke="white"
+        stroke-width="2.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}
+
+const footerLinks = [
+  {
+    title: "Product",
+    links: [
+      { label: "Features", href: "/features" },
+      { label: "Pricing", href: "/pricing" },
+      { label: "Changelog", href: "/changelog" },
+      { label: "Documentation", href: "/docs" },
+    ],
+  },
+  {
+    title: "Company",
+    links: [
+      { label: "About", href: "/about" },
+      { label: "Blog", href: "/blog" },
+      { label: "Careers", href: "/careers" },
+      { label: "Contact", href: "/contact" },
+    ],
+  },
+  {
+    title: "Resources",
+    links: [
+      { label: "Community", href: "/community" },
+      { label: "Help Center", href: "/help" },
+      { label: "Partners", href: "/partners" },
+      { label: "Status", href: "/status" },
+    ],
+  },
+  {
+    title: "Legal",
+    links: [
+      { label: "Privacy", href: "/privacy" },
+      { label: "Terms", href: "/terms" },
+      { label: "Security", href: "/security" },
+      { label: "Cookies", href: "/cookies" },
+    ],
+  },
+];
+
+function GithubIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+    </svg>
+  );
+}
+
+function TwitterIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+    </svg>
+  );
+}
+
+function LinkedInIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
+    </svg>
+  );
+}
+
+const socialLinks = [
+  { label: "GitHub", href: "https://github.com", Icon: GithubIcon },
+  { label: "Twitter / X", href: "https://twitter.com", Icon: TwitterIcon },
+  { label: "LinkedIn", href: "https://linkedin.com", Icon: LinkedInIcon },
+];
+
+export default function Footer() {
+  return (
+    <footer class="border-t border-[var(--color-border)] bg-[var(--color-bg-secondary)]">
+      <div class="max-w-7xl mx-auto px-4 md:px-6 lg:px-8 py-12">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-8 lg:gap-12">
+          <div class="lg:col-span-2">
+            <div class="flex items-center gap-2 mb-4">
+              <ShieldLogo />
+              <span class="text-lg font-bold text-[var(--color-text-primary)]">
+                ShieldAI
+              </span>
+            </div>
+            <p class="text-sm text-[var(--color-text-secondary)] max-w-xs">
+              AI-powered call intelligence that transforms how teams
+              communicate, collaborate, and close deals.
+            </p>
+            <div class="flex items-center gap-4 mt-6">
+              <For each={socialLinks}>
+                {(social) => (
+                  <a
+                    href={social.href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label={social.label}
+                    class="text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] transition-colors"
+                  >
+                    <social.Icon />
+                  </a>
+                )}
+              </For>
+            </div>
+          </div>
+
+          <div class="lg:col-span-4 grid grid-cols-2 md:grid-cols-4 gap-8">
+            <For each={footerLinks}>
+              {(group) => (
+                <div>
+                  <h3 class="text-sm font-semibold text-[var(--color-text-primary)] mb-4">
+                    {group.title}
+                  </h3>
+                  <ul class="space-y-3">
+                    <For each={group.links}>
+                      {(link) => (
+                        <li>
+                          <A
+                            href={link.href}
+                            class="text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors"
+                          >
+                            {link.label}
+                          </A>
+                        </li>
+                      )}
+                    </For>
+                  </ul>
+                </div>
+              )}
+            </For>
+          </div>
+        </div>
+
+        <div class="mt-12 pt-8 border-t border-[var(--color-border)] flex flex-col sm:flex-row items-center justify-between gap-4">
+          <p class="text-sm text-[var(--color-text-tertiary)]">
+            {'\u00A9'} {new Date().getFullYear()} ShieldAI. All rights reserved.
+          </p>
+          <div class="flex items-center gap-6">
+            <A
+              href="/privacy"
+              class="text-sm text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] transition-colors"
+            >
+              Privacy Policy
+            </A>
+            <A
+              href="/terms"
+              class="text-sm text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] transition-colors"
+            >
+              Terms of Service
+            </A>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
--- a/web/src/components/layout/Navbar.tsx
+++ b/web/src/components/layout/Navbar.tsx
@@ -0,0 +1,245 @@
+import { createSignal, onMount, onCleanup, Show, Suspense } from "solid-js";
+import { A } from "@solidjs/router";
+import { cn } from "~/lib/utils";
+import { Button } from "~/components/ui";
+import { useTheme } from "~/lib/theme";
+import { useAuth } from "./useAuth";
+
+function ShieldLogo() {
+  return (
+    <svg
+      width="28"
+      height="32"
+      viewBox="0 0 28 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <linearGradient
+          id="shield-grad"
+          x1="0"
+          y1="0"
+          x2="28"
+          y2="32"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="var(--color-brand-primary)" />
+          <stop offset="1" stop-color="var(--color-brand-accent)" />
+        </linearGradient>
+      </defs>
+      <path
+        d="M14 0L26 6V16C26 24 14 32 14 32S2 24 2 16V6L14 0Z"
+        fill="url(#shield-grad)"
+      />
+      <path
+        d="M10 16L13 19L19 13"
+        stroke="white"
+        stroke-width="2.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ThemeToggle() {
+  const { toggle, resolved } = useTheme();
+
+  return (
+    <button
+      type="button"
+      aria-label="Toggle theme"
+      class="p-2 rounded-lg text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] transition-colors"
+      onClick={toggle}
+    >
+      <Show
+        when={resolved() === "dark"}
+        fallback={
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <circle cx="12" cy="12" r="5" />
+            <line x1="12" y1="1" x2="12" y2="3" />
+            <line x1="12" y1="21" x2="12" y2="23" />
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+            <line x1="1" y1="12" x2="3" y2="12" />
+            <line x1="21" y1="12" x2="23" y2="12" />
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+          </svg>
+        }
+      >
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
+        </svg>
+      </Show>
+    </button>
+  );
+}
+
+const navLinks = [
+  { label: "Features", href: "/features" },
+  { label: "Pricing", href: "/pricing" },
+  { label: "Blog", href: "/blog" },
+  { label: "Dashboard", href: "/dashboard" },
+];
+
+export default function Navbar() {
+  const [mobileOpen, setMobileOpen] = createSignal(false);
+  const [scrolled, setScrolled] = createSignal(false);
+  const auth = useAuth();
+
+  onMount(() => {
+    const onScroll = () => {
+      setScrolled(window.scrollY > 8);
+    };
+    window.addEventListener("scroll", onScroll, { passive: true });
+    onCleanup(() => window.removeEventListener("scroll", onScroll));
+  });
+
+  return (
+    <nav
+      class={cn(
+        "fixed top-0 left-0 right-0 z-50 h-16 transition-all duration-300",
+        scrolled()
+          ? "glass border-b border-[var(--color-border)] shadow-sm"
+          : "bg-transparent",
+      )}
+    >
+      <div class="max-w-7xl mx-auto px-4 md:px-6 lg:px-8 h-16 flex items-center justify-between">
+        <A href="/" class="flex items-center gap-2">
+          <ShieldLogo />
+          <span class="text-lg font-bold text-[var(--color-text-primary)]">
+            ShieldAI
+          </span>
+        </A>
+
+        <div class="hidden md:flex items-center gap-6">
+          {navLinks.map(link => (
+            <A
+              href={link.href}
+              class="text-sm font-medium text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors"
+            >
+              {link.label}
+            </A>
+          ))}
+        </div>
+
+        <div class="hidden md:flex items-center gap-3">
+          <ThemeToggle />
+          <Show
+            when={auth.isAuthenticated}
+            fallback={
+              <>
+                <Button variant="secondary" size="sm">
+                  <A href="/signin">Sign In</A>
+                </Button>
+                <Button variant="primary" size="sm">
+                  <A href="/signup">Get Started</A>
+                </Button>
+              </>
+            }
+          >
+            <Button variant="secondary" size="sm">
+              <A href="/dashboard">Dashboard</A>
+            </Button>
+          </Show>
+        </div>
+
+        <div class="flex md:hidden items-center gap-2">
+          <ThemeToggle />
+          <button
+            type="button"
+            aria-label="Toggle menu"
+            class="p-2 rounded-lg text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]"
+            onClick={() => setMobileOpen(v => !v)}
+          >
+            <Show
+              when={mobileOpen()}
+              fallback={
+                <svg
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                >
+                  <line x1="3" y1="6" x2="21" y2="6" />
+                  <line x1="3" y1="12" x2="21" y2="12" />
+                  <line x1="3" y1="18" x2="21" y2="18" />
+                </svg>
+              }
+            >
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+              >
+                <line x1="18" y1="6" x2="6" y2="18" />
+                <line x1="6" y1="6" x2="18" y2="18" />
+              </svg>
+            </Show>
+          </button>
+        </div>
+      </div>
+
+      <Show when={mobileOpen()}>
+        <div class="md:hidden glass border-t border-[var(--color-border)]">
+          <div class="px-4 py-4 space-y-1">
+            {navLinks.map(link => (
+              <A
+                href={link.href}
+                class="block px-3 py-2 rounded-lg text-base font-medium text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] transition-colors"
+                onClick={() => setMobileOpen(false)}
+              >
+                {link.label}
+              </A>
+            ))}
+            <div class="pt-3 flex flex-col gap-2">
+              <Show
+                when={auth.isAuthenticated}
+                fallback={
+                  <>
+                    <Button variant="secondary" class="w-full">
+                      <A href="/signin">Sign In</A>
+                    </Button>
+                    <Button variant="primary" class="w-full">
+                      <A href="/signup">Get Started</A>
+                    </Button>
+                  </>
+                }
+              >
+                <Button variant="secondary" class="w-full">
+                  <A href="/dashboard">Dashboard</A>
+                </Button>
+              </Show>
+            </div>
+          </div>
+        </div>
+      </Show>
+    </nav>
+  );
+}
--- a/web/src/components/layout/PageContainer.tsx
+++ b/web/src/components/layout/PageContainer.tsx
@@ -0,0 +1,22 @@
+import { cn } from "~/lib/utils";
+import type { JSX } from "solid-js";
+
+interface PageContainerProps {
+  class?: string;
+  py?: string;
+  children: JSX.Element;
+}
+
+export default function PageContainer(props: PageContainerProps) {
+  return (
+    <div
+      class={cn(
+        "max-w-7xl mx-auto px-4 md:px-6 lg:px-8 w-full",
+        props.py,
+        props.class,
+      )}
+    >
+      {props.children}
+    </div>
+  );
+}
--- a/web/src/components/layout/index.ts
+++ b/web/src/components/layout/index.ts
@@ -0,0 +1,5 @@
+export { default as Navbar } from "./Navbar";
+export { default as Footer } from "./Footer";
+export { default as PageContainer } from "./PageContainer";
+export { default as AppShell } from "./AppShell";
+export { useAuth } from "./useAuth";
--- a/web/src/components/layout/layout.test.tsx
+++ b/web/src/components/layout/layout.test.tsx
@@ -0,0 +1,100 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render } from "solid-js/web";
+import type { JSX } from "solid-js";
+
+import PageContainer from "./PageContainer";
+
+function mount(comp: () => JSX.Element): HTMLDivElement {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  render(() => comp(), container);
+  return container;
+}
+
+beforeEach(() => {
+  document.body.innerHTML = "";
+});
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("PageContainer", () => {
+  it("renders children", () => {
+    mount(() => <PageContainer><p>Test content</p></PageContainer>);
+    expect(document.body.textContent).toContain("Test content");
+  });
+
+  it("applies max-width and centered layout classes", () => {
+    mount(() => <PageContainer><p>X</p></PageContainer>);
+    const container = document.querySelector(".max-w-7xl")!;
+    expect(container).toBeTruthy();
+    expect(container.className).toContain("max-w-7xl");
+    expect(container.className).toContain("mx-auto");
+  });
+
+  it("applies responsive horizontal padding classes", () => {
+    mount(() => <PageContainer><p>X</p></PageContainer>);
+    const container = document.querySelector(".px-4")!;
+    expect(container).toBeTruthy();
+    expect(container.className).toContain("px-4");
+    expect(container.className).toContain("md:px-6");
+    expect(container.className).toContain("lg:px-8");
+  });
+
+  it("applies w-full class", () => {
+    mount(() => <PageContainer><p>X</p></PageContainer>);
+    const container = document.querySelector(".w-full")!;
+    expect(container).toBeTruthy();
+    expect(container.className).toContain("w-full");
+  });
+
+  it("merges custom class prop", () => {
+    mount(() => (
+      <PageContainer class="my-custom-class"><p>X</p></PageContainer>
+    ));
+    const container = document.querySelector(".my-custom-class")!;
+    expect(container).toBeTruthy();
+    expect(container.className).toContain("my-custom-class");
+  });
+
+  it("applies vertical padding from py prop", () => {
+    mount(() => (
+      <PageContainer py="py-12"><p>X</p></PageContainer>
+    ));
+    const container = document.querySelector(".py-12")!;
+    expect(container).toBeTruthy();
+    expect(container.className).toContain("py-12");
+  });
+
+  it("applies both py and custom class", () => {
+    mount(() => (
+      <PageContainer py="py-8" class="custom"><p>X</p></PageContainer>
+    ));
+    const container = document.querySelector(".custom")!;
+    expect(container).toBeTruthy();
+    expect(container.className).toContain("py-8");
+    expect(container.className).toContain("custom");
+  });
+});
+
+describe("useAuth", () => {
+  it("returns isAuthenticated as false by default", async () => {
+    const { useAuth } = await import("./useAuth");
+    const auth = useAuth();
+    expect(auth.isAuthenticated).toBe(false);
+  });
+
+  it("returns null user by default", async () => {
+    const { useAuth } = await import("./useAuth");
+    const auth = useAuth();
+    expect(auth.user).toBe(null);
+  });
+
+  it("provides signIn and signOut methods", async () => {
+    const { useAuth } = await import("./useAuth");
+    const auth = useAuth();
+    expect(typeof auth.signIn).toBe("function");
+    expect(typeof auth.signOut).toBe("function");
+  });
+});
--- a/web/src/components/layout/useAuth.ts
+++ b/web/src/components/layout/useAuth.ts
@@ -0,0 +1,19 @@
+import { createSignal } from "solid-js";
+
+const [getAuth] = (() => {
+  let isAuthenticated = false;
+  let user: { name: string; email: string } | null = null;
+
+  return [
+    () => ({
+      isAuthenticated,
+      user,
+      signIn: () => {},
+      signOut: () => {},
+    }),
+  ];
+})();
+
+export function useAuth() {
+  return getAuth();
+}