Changed settings layout + separated settings into different pages. Cleaned some code. Working on tts pages (no db/rest calls yet).

components/navigation/settings.tsx

@@ -0,0 +1,61 @@
+import Link from "next/link";
+import { Button } from "../ui/button";
+import UserProfile from "./userprofile";
+
+const SettingsNavigation = async () => {
+  return ( 
+    <div>
+      <div className="text-4xl flex pl-[15px] pb-[33px]">Hermes</div>
+
+      <div className="w-full pl-[30px] pr-[30px] pb-[50px]">
+        <UserProfile />
+      </div>
+
+      <div className="flex h-full z-20 inset-y-1/3 w-full">
+        <ul className="rounded-lg shadow-md pl-[25px] flex flex-col w-full justify-between rounded-md text-center align-center">
+          <li className="text-xs text-gray-400">
+            Settings
+          </li>
+          <li className="">
+            <Link href={"/settings/connections"}>
+              <Button variant="ghost" className="w-full text-lg">
+                Connections
+              </Button>
+            </Link>
+          </li>
+
+          <li className="text-xs text-gray-400">
+            Text to Speech
+          </li>
+          <li className="">
+            <Link href={"/settings/tts/voices"}>
+              <Button variant="ghost" className="w-full text-lg">
+                Voices
+              </Button>
+            </Link>
+          </li>
+          <li className="">
+            <Link href={"/settings/tts/filters"}>
+              <Button variant="ghost" className="w-full text-lg">
+                Filters
+              </Button>
+            </Link>
+          </li>
+
+          <li className="text-xs text-gray-400">
+            API
+          </li>
+          <li className="">
+            <Link href={"/settings/api/keys"}>
+              <Button variant="ghost" className="w-full text-lg">
+                Keys
+              </Button>
+            </Link>
+          </li>
+        </ul>
+      </div>
+    </div>
+   );
+}
+ 
+export default SettingsNavigation;

components/navigation/userprofile.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import axios from "axios";
+import * as React from 'react';
+import { User } from "@prisma/client";
+import { useEffect, useState } from "react";
+import { useSession } from "next-auth/react";
+import { usePathname } from 'next/navigation'
+import { cn } from "@/lib/utils";
+
+const UserProfile = () => {
+  const { data: session, status } = useSession();
+    const [previousUsername, setPreviousUsername] = useState<string>()
+    const [user, setUser] = useState<User>()
+    const [loading, setLoading] = useState<boolean>(true)
+    const pathname = usePathname()
+
+    useEffect(() => {
+      if (status !== "authenticated" || previousUsername == session.user?.name) {
+          return
+      }
+
+      setPreviousUsername(session.user?.name as string)
+      if (session.user) {
+        const fetchData = async () => {
+          var userData: User = (await axios.get("/api/account")).data
+          setUser(userData)
+          setLoading(false)
+        }
+
+        fetchData().catch(console.error)
+
+        // TODO: check cookies if impersonation is in use.
+      }
+  }, [session])
+
+  return ( 
+    <div className={cn("px-10 py-6 rounded-md bg-blue-300 overflow-hidden wrap", loading && "hidden")}>
+      <p className="text-xs text-gray-400">Logged in as:</p>
+      <p>{user?.username}</p>
+    </div>
+   );
+}
+ 
+export default UserProfile;