fixing titles and stuff

components/ThemeToggle.tsx

@@ -24,11 +24,14 @@ export default function ThemeToggle() {
     document.documentElement.classList.toggle("dark", next === "dark");
   }
 
+  /**
+   * @TODO, the toggle doesn't look right, need to either fix or remove the toggle.
+   */
   return (
     <button
       type="button"
       onClick={toggle}
-      aria-label="Toggle theme"
+      aria-label="Toggle theme" title={`Toggle to ${theme === 'dark' ? 'light' : 'dark'}`}
       className="inline-flex items-center gap-2 rounded-md border border-zinc-700 bg-zinc-900/70 px-3 py-1.5 text-xs font-semibold text-zinc-200 hover:bg-zinc-800 transition-colors
                  dark:border-zinc-700 dark:bg-zinc-900/70 dark:text-zinc-200
                  border-zinc-300 bg-white text-zinc-900 hover:bg-zinc-100 dark:hover:bg-zinc-800"

components/TopNav.tsx

@@ -11,9 +11,11 @@ import ThemeToggle from "@/components/ThemeToggle";
 function NavLink({
   href,
   children,
+  title
 }: {
   href: string;
   children: React.ReactNode;
+  title?: string;
 }) {
   const pathname = usePathname();
   const active = pathname === href;
@@ -21,6 +23,7 @@ function NavLink({
   return (
     <Link
       href={href}
+      title={title}
       className={[
         "text-xs font-medium transition-colors",
         active ? "text-zinc-100" : "text-zinc-400 hover:text-zinc-100",
@@ -60,7 +63,7 @@ export function TopNav() {
             <span className="text-xs text-zinc-500">Checking session…</span>
           ) : isAuthenticated ? (
             <>
-              <NavLink href="/vault">Vault</NavLink>
+              <NavLink href="/vault" title={"Your builds"}>Vault</NavLink>
 
               {/* Email/displayName links to Account */}
               <Link