Add placeholder navigation bar and toolbar

Author: D-K-P

smart-spreadsheet/src/app/page.tsx

@@ -1,5 +1,6 @@
+import { NavBar } from "@/components/nav-bar";
+import { Toolbar } from "@/components/toolbar";
 import { Spreadsheet } from "@/components/spreadsheet";
-import { ThemeToggle } from "@/components/theme-toggle";
 import { createServiceClient } from "@/lib/supabase/server";
 import type { Company } from "@/lib/supabase/types";
 
@@ -14,46 +15,8 @@ export default async function Home() {
 
   return (
     <main className="min-h-screen flex flex-col">
-      {/* Header */}
-      <header className="shrink-0 px-6 py-4 border-b border-border flex items-center justify-between">
-        <div>
-          <h1 className="text-lg font-semibold tracking-tight">
-            Smart Spreadsheet
-          </h1>
-          <p className="text-xs text-muted-foreground">
-            Company enrichment powered by{" "}
-            <a
-              href="https://trigger.dev"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-blue-400 hover:underline"
-            >
-              Trigger.dev
-            </a>
-            ,{" "}
-            <a
-              href="https://exa.ai"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-blue-400 hover:underline"
-            >
-              Exa
-            </a>{" "}
-            and{" "}
-            <a
-              href="https://anthropic.com"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-blue-400 hover:underline"
-            >
-              Claude
-            </a>
-          </p>
-        </div>
-        <ThemeToggle />
-      </header>
-
-      {/* Spreadsheet - takes remaining space */}
+      <NavBar />
+      <Toolbar />
       <div className="flex-1 overflow-hidden">
         <Spreadsheet initialCompanies={initialCompanies} />
       </div>

smart-spreadsheet/src/components/nav-bar.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { Table2 } from "lucide-react";
+import { ThemeToggle } from "@/components/theme-toggle";
+
+const navItems = ["Home", "Companies", "Reports"];
+
+export function NavBar() {
+  return (
+    <nav className="shrink-0 h-14 px-4 border-b border-border flex items-center justify-between bg-background">
+      {/* Left: Logo + Title + Nav Tabs */}
+      <div className="flex items-center gap-6">
+        <div className="flex items-center gap-2">
+          <Table2 className="h-5 w-5 text-primary" />
+          <span className="font-semibold text-sm tracking-tight">
+            Smart Spreadsheet
+          </span>
+        </div>
+        <div className="flex items-center gap-1">
+          {navItems.map((label) => (
+            <button
+              key={label}
+              className="px-3 py-1.5 text-sm rounded-md transition-colors text-foreground hover:bg-muted/50"
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Right: Theme Toggle + Avatar */}
+      <div className="flex items-center gap-2">
+        <ThemeToggle />
+        <div className="h-8 w-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-xs font-medium">
+          DS
+        </div>
+      </div>
+    </nav>
+  );
+}

smart-spreadsheet/src/components/toolbar.tsx

@@ -0,0 +1,83 @@
+import {
+  Bold,
+  Italic,
+  Underline,
+  AlignLeft,
+  AlignCenter,
+  AlignRight,
+  DollarSign,
+  Percent,
+  Paintbrush,
+  Filter,
+  MoreHorizontal,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+function ToolbarDivider() {
+  return <div className="w-px h-5 bg-border mx-1" />;
+}
+
+function ToolbarButton({ children }: { children: React.ReactNode }) {
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      className="h-7 w-7 text-muted-foreground hover:text-foreground"
+    >
+      {children}
+    </Button>
+  );
+}
+
+export function Toolbar() {
+  return (
+    <div className="shrink-0 h-10 px-4 border-b border-border flex items-center gap-0.5 bg-background">
+      {/* Text formatting */}
+      <ToolbarButton>
+        <Bold className="h-4 w-4" />
+      </ToolbarButton>
+      <ToolbarButton>
+        <Italic className="h-4 w-4" />
+      </ToolbarButton>
+      <ToolbarButton>
+        <Underline className="h-4 w-4" />
+      </ToolbarButton>
+
+      <ToolbarDivider />
+
+      {/* Alignment */}
+      <ToolbarButton>
+        <AlignLeft className="h-4 w-4" />
+      </ToolbarButton>
+      <ToolbarButton>
+        <AlignCenter className="h-4 w-4" />
+      </ToolbarButton>
+      <ToolbarButton>
+        <AlignRight className="h-4 w-4" />
+      </ToolbarButton>
+
+      <ToolbarDivider />
+
+      {/* Number formatting */}
+      <ToolbarButton>
+        <DollarSign className="h-4 w-4" />
+      </ToolbarButton>
+      <ToolbarButton>
+        <Percent className="h-4 w-4" />
+      </ToolbarButton>
+
+      <ToolbarDivider />
+
+      {/* Other tools */}
+      <ToolbarButton>
+        <Paintbrush className="h-4 w-4" />
+      </ToolbarButton>
+      <ToolbarButton>
+        <Filter className="h-4 w-4" />
+      </ToolbarButton>
+      <ToolbarButton>
+        <MoreHorizontal className="h-4 w-4" />
+      </ToolbarButton>
+    </div>
+  );
+}

smart-spreadsheet/src/trigger/get-employee-count.ts

@@ -1,4 +1,4 @@
-import { task, metadata } from "@trigger.dev/sdk";
+import { metadata, task } from "@trigger.dev/sdk";
 import Exa from "exa-js";
 import { generateText, Output } from "ai";
 import { anthropic } from "@ai-sdk/anthropic";
@@ -26,7 +26,6 @@ export const getEmployeeCount = task({
   retry: { maxAttempts: 2 },
   run: async ({
     companyName,
-    companyUrl,
   }: {
     companyName: string;
     companyUrl?: string | null;
@@ -39,15 +38,16 @@ export const getEmployeeCount = task({
         numResults: 3,
         text: { maxCharacters: 1500 },
         type: "auto",
-      }
+      },
     );
 
     // Get the best source URL
     const sourceUrl = results.results[0]?.url ?? null;
 
     const { output } = await generateText({
       model: anthropic("claude-sonnet-4-20250514"),
-      prompt: `Estimate the employee count for "${companyName}" based on these search results:
+      prompt:
+        `Estimate the employee count for "${companyName}" based on these search results:
 
 ${JSON.stringify(results.results, null, 2)}