Migrate middleware.ts to proxy.ts for Next.js 16 and fix build errors

Next.js 16 renamed middleware to proxy. Merged session-based auth and
API key auth into a single proxy.ts. Also fixed: auth route handler
exports, missing card component, Button asChild type errors, signIn
return type, Drizzle eq() type narrowing, and useSearchParams suspense
boundary.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app/(public)/login/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, Suspense } from "react";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import { signIn } from "next-auth/react";
@@ -13,6 +13,14 @@ import { AlertCircle } from "lucide-react";
 import { toast } from "sonner";
 
 export default function LoginPage() {
+  return (
+    <Suspense>
+      <LoginPageContent />
+    </Suspense>
+  );
+}
+
+function LoginPageContent() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -36,15 +44,11 @@ export default function LoginPage() {
     setError(null);
     setIsLoading(true);
     try {
-      const result = await signIn("credentials", {
+      await signIn("credentials", {
         email,
         password,
         redirectTo: "/app",
       });
-      // If signIn returns with ok: false, it means auth failed
-      if (result && !result.ok) {
-        setError("Invalid email or password");
-      }
     } catch {
       setError("An error occurred. Please try again.");
     } finally {

src/app/(public)/navbar.tsx

@@ -2,8 +2,9 @@
 
 import Link from "next/link";
 import { useSession } from "next-auth/react";
-import { Button } from "@/components/ui/button";
+import { buttonVariants } from "@/components/ui/button";
 import { ChartColumn } from "lucide-react";
+import { cn } from "@/lib/utils";
 
 export function Navbar() {
   const { data: session } = useSession();
@@ -19,17 +20,26 @@ export function Navbar() {
         </div>
         <div className="flex items-center gap-3">
           {session ? (
-            <Button size="sm" className="font-mono text-xs" asChild>
-              <Link href="/app">Go to App</Link>
-            </Button>
+            <Link
+              href="/app"
+              className={cn(buttonVariants({ size: "sm" }), "font-mono text-xs")}
+            >
+              Go to App
+            </Link>
           ) : (
             <>
-              <Button variant="ghost" size="sm" className="font-mono text-xs" asChild>
-                <Link href="/login">Log in</Link>
-              </Button>
-              <Button size="sm" className="font-mono text-xs" asChild>
-                <Link href="/register">Get Started</Link>
-              </Button>
+              <Link
+                href="/login"
+                className={cn(buttonVariants({ variant: "ghost", size: "sm" }), "font-mono text-xs")}
+              >
+                Log in
+              </Link>
+              <Link
+                href="/register"
+                className={cn(buttonVariants({ size: "sm" }), "font-mono text-xs")}
+              >
+                Get Started
+              </Link>
             </>
           )}
         </div>

src/app/(public)/page.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
-import { Button } from "@/components/ui/button";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 import { Navbar } from "./navbar";
 import {
   ChartColumn,
@@ -36,19 +37,18 @@ export default function LandingPage() {
             keyboard-driven workspace.
           </p>
           <div className="flex items-center justify-center gap-3">
-            <Button size="lg" className="font-mono text-sm gap-2" asChild>
-              <Link href="/register">
-                Start Annotating <ArrowRight className="w-4 h-4" />
-              </Link>
-            </Button>
-            <Button
-              size="lg"
-              variant="outline"
-              className="font-mono text-sm"
-              asChild
+            <Link
+              href="/register"
+              className={cn(buttonVariants({ size: "lg" }), "font-mono text-sm gap-2")}
             >
-              <Link href="/app">Try Demo</Link>
-            </Button>
+              Start Annotating <ArrowRight className="w-4 h-4" />
+            </Link>
+            <Link
+              href="/app"
+              className={cn(buttonVariants({ size: "lg", variant: "outline" }), "font-mono text-sm")}
+            >
+              Try Demo
+            </Link>
           </div>
         </div>
       </section>
@@ -162,11 +162,12 @@ export default function LandingPage() {
         <p className="text-muted-foreground text-sm mb-6">
           No credit card required. Start annotating charts in seconds.
         </p>
-        <Button size="lg" className="font-mono text-sm gap-2" asChild>
-          <Link href="/register">
-            Create Free Account <ArrowRight className="w-4 h-4" />
-          </Link>
-        </Button>
+        <Link
+          href="/register"
+          className={cn(buttonVariants({ size: "lg" }), "font-mono text-sm gap-2")}
+        >
+          Create Free Account <ArrowRight className="w-4 h-4" />
+        </Link>
       </section>
 
       {/* Footer */}

src/app/api/auth/[...nextauth]/route.ts

@@ -1 +1,2 @@
-export { GET, POST } from "@/auth";
+import { handlers } from "@/auth";
+export const { GET, POST } = handlers;