perf: use next/link for internal navigation

Header, footer, first-run banner, and error-notice links now navigate
client-side instead of full page reloads.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: Michael Borck

components/Chat.tsx

@@ -1,4 +1,5 @@
 import ReactMarkdown from "react-markdown";
+import Link from "next/link";
 import FinalInputArea from "./FinalInputArea";
 import { useEffect, useRef, useState, useCallback } from "react";
 import { strategies } from "@/utils/strategies";
@@ -34,12 +35,12 @@ function ChatErrorNotice({
         >
           Try again
         </button>
-        <a
+        <Link
           href="/settings"
           className="text-sm text-ink-muted underline transition-colors duration-normal hover:text-accent"
         >
           Check settings
-        </a>
+        </Link>
       </div>
     </div>
   );

components/Footer.tsx

@@ -5,10 +5,10 @@ const Footer = () => {
   return (
     <div className="container flex min-h-[72px] flex-col items-center justify-between border-t border-hairline px-4 pb-3 pt-5 lg:min-h-[72px] lg:flex-row lg:px-0 lg:py-5">
       <div className="flex w-full items-center justify-between">
-        <a href="/" className="flex items-center gap-2">
+        <Link href="/" className="flex items-center gap-2">
           <span className="text-2xl">🎓</span>
           <span className="text-lg font-semibold text-ink">Study Buddy</span>
-        </a>
+        </Link>
         <div className="flex items-center gap-3">
           <Link href={"https://x.com/Michael_Borck"} target="_blank" title="Follow on X">
             <Image
@@ -52,12 +52,12 @@ const Footer = () => {
       </div>
       <p className="mt-2 text-xs text-ink-quiet lg:mt-0">
         Study Buddy &middot; part of the Buddy suite &middot;{" "}
-        <a
+        <Link
           href="/legal"
           className="underline transition-colors duration-normal hover:text-accent"
         >
           Legal
-        </a>
+        </Link>
       </p>
     </div>
   );

components/Header.tsx

@@ -1,35 +1,36 @@
+import Link from "next/link";
 import packageJson from "../package.json";
 
 const Header = () => {
   return (
     <div className="container flex h-[60px] shrink-0 items-center justify-between px-4 lg:h-[80px] lg:px-0">
-      <a href="/" className="flex items-center gap-2">
+      <Link href="/" className="flex items-center gap-2">
         <span className="text-4xl">🎓</span>
         <span className="text-xl font-semibold text-ink">Study Buddy</span>
         <span className="text-xs text-ink-quiet">v{packageJson.version}</span>
-      </a>
+      </Link>
       <nav className="flex items-center space-x-6">
-        <a
+        <Link
           href="/docs"
           className="text-ink-muted transition-colors duration-normal hover:text-ink"
           style={{ fontWeight: 500 }}
         >
           Docs
-        </a>
-        <a
+        </Link>
+        <Link
           href="/about"
           className="text-ink-muted transition-colors duration-normal hover:text-ink"
           style={{ fontWeight: 500 }}
         >
           About
-        </a>
-        <a
+        </Link>
+        <Link
           href="/settings"
           className="text-ink-muted transition-colors duration-normal hover:text-ink"
           style={{ fontWeight: 500 }}
         >
           Settings
-        </a>
+        </Link>
       </nav>
     </div>
   );

components/Hero.tsx

@@ -1,4 +1,5 @@
 import Image from "next/image";
+import Link from "next/link";
 import { FC, useState, useEffect } from "react";
 import InitialInputArea from "./InitialInputArea";
 import { suggestions } from "@/utils/utils";
@@ -78,12 +79,12 @@ const Hero: FC<THeroProps> = ({
                   Set up Ollama (free)
                 </a>{" "}
                 or go to{" "}
-                <a
+                <Link
                   href="/settings"
                   className="font-medium text-ink underline transition-colors duration-normal hover:text-accent"
                 >
                   Settings
-                </a>{" "}
+                </Link>{" "}
                 to add a cloud provider.
               </p>
               <button