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

app/(modal)/(routes)/settings/page.tsx

@@ -1,223 +0,0 @@
-"use client";
-
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import axios from "axios";
-import { Button } from "@/components/ui/button";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
-import { Info } from "lucide-react";
-import * as React from 'react';
-import { Toggle } from "@/components/ui/toggle";
-import { ApiKey, TwitchConnection, User } from "@prisma/client";
-import { useEffect, useState } from "react";
-import { useSession } from "next-auth/react";
-import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import Link from "next/link";
-import { TTSBadgeFilterModal } from "@/components/modals/tts-badge-filter-modal";
-
-const SettingsPage = () => {
-    const { data: session, status } = useSession();
-    const [previousUsername, setPreviousUsername] = useState<string>()
-    const [userId, setUserId] = useState<string>()
-
-    useEffect(() => {
-      if (status !== "authenticated" || previousUsername == session.user?.name) {
-          return
-      }
-
-      setPreviousUsername(session.user?.name as string)
-      if (session.user?.name) {
-        const fetchData = async () => {
-          var connection: User = (await axios.get("/api/account")).data
-          setUserId(connection.id)
-        }
-
-        fetchData().catch(console.error)
-      }
-  }, [session])
-
-    // const [twitchUser, setTwitchUser] = useState<TwitchConnection | null>(null)
-    // useEffect(() => {
-    //     const fetchData = async () => {
-    //         var connection: TwitchConnection = (await axios.get("/api/settings/connections/twitch")).data
-    //         setTwitchUser(connection)
-    //     }
-
-    //     fetchData().catch(console.error);
-    // }, [])
-
-    // const OnTwitchConnectionDelete = async () => {
-    //     try {
-    //         await axios.post("/api/settings/connections/twitch/delete")
-    //         setTwitchUser(null)
-    //     } catch (error) {
-    //         console.log("ERROR", error)
-    //     }
-    // }
-
-    const [apiKeyViewable, setApiKeyViewable] = useState(0)
-    const [apiKeyChanges, setApiKeyChanges] = useState(0)
-    const [apiKeys, setApiKeys] = useState<ApiKey[]>([])
-    useEffect(() => {
-      const fetchData = async () => {
-        try {
-          const keys = (await axios.get("/api/tokens")).data ?? {};
-          setApiKeys(keys)
-          console.log(keys);
-        } catch (error) {
-          console.log("ERROR", error)
-        }
-      };
-
-      fetchData().catch(console.error);
-    }, [apiKeyChanges]);
-
-    const onApiKeyAdd = async () => {
-      try {
-        await axios.post("/api/token", {
-          label: "Key label"
-        });
-        setApiKeyChanges(apiKeyChanges + 1)
-      } catch (error) {
-        console.log("ERROR", error)
-      }
-    }
-
-    const onApiKeyDelete = async (id: string) => {
-      try {
-        await axios.delete("/api/token/" + id);
-        setApiKeyChanges(apiKeyChanges - 1)
-      } catch (error) {
-        console.log("ERROR", error)
-      }
-    }
-
-    useEffect(() => {
-      const fetchData = async () => {
-        try {
-          const keys = (await axios.get("/api/tokens")).data;
-          setApiKeys(keys)
-          console.log(keys);
-        } catch (error) {
-          console.log("ERROR", error)
-        }
-      };
-
-      fetchData().catch(console.error);
-    }, [apiKeyViewable]);
-
-    return (
-        <div>
-            <div className="flex text-3xl justify-center">
-                Settings
-            </div>
-            <div className="border-solid border-white px-10 py-5 mx-5 my-10">
-                <div>
-                    <div className="text-xl justify-left">Connections</div>
-                    <div className="px-10 py-6 rounded-md bg-purple-500 max-w-sm overflow-hidden wrap-">
-                        <div className="inline-block max-w-md">
-                            <Avatar>
-                                <AvatarImage src="https://cdn2.iconfinder.com/data/icons/social-aquicons/512/Twitch.png" alt="twitch" />
-                                <AvatarFallback></AvatarFallback>
-                            </Avatar>
-                        </div>
-                        {/* <div className="inline-block ml-5"> */}
-                          <Link href={(process.env.NEXT_PUBLIC_TWITCH_OAUTH_URL as string) + userId}>Authorize</Link>
-                          {/* <div className="inline-block text-lg">Twitch</div>
-                            <div className={cn("hidden", twitchUser == null && "flex")}>
-                                <ConnectTwitchModal />
-                            </div>
-                            <div className={cn("hidden", twitchUser != null && "flex")}>
-                                <p>{twitchUser?.username}</p>
-                            </div>
-                        </div>
-                        <div className="inline-block pl-5 ml-3 justify-right items-right">
-                            <button onClick={OnTwitchConnectionDelete} className={cn("hidden", twitchUser != null && "flex")}>
-                                <Avatar>
-                                    <AvatarImage src="https://upload.wikimedia.org/wikipedia/en/b/ba/Red_x.svg" alt="twitch" />
-                                    <AvatarFallback></AvatarFallback>
-                                </Avatar>
-                            </button>
-                        </div> */}
-                    </div>
-                </div>
-                <div>
-                  <div className="text-xl justify-left mt-10">API Keys</div>
-                    <Table className="max-w-2xl">
-                      <TableCaption>A list of your secret API keys.</TableCaption>
-                      <TableHeader>
-                        <TableRow>
-                          <TableHead>Label</TableHead>
-                          <TableHead>Token</TableHead>
-                          <TableHead>View</TableHead>
-                          <TableHead>Action</TableHead>
-                        </TableRow>
-                      </TableHeader>
-                      <TableBody>
-                        {apiKeys.map((key, index) => (
-                          <TableRow key={key.id}>
-                            <TableCell className="font-medium">{key.label}</TableCell>
-                            <TableCell>{(apiKeyViewable & (1 << index)) > 0 ? key.id : "*".repeat(key.id.length)}</TableCell>
-                            <TableCell>
-                              <Button onClick={() => setApiKeyViewable((v) => v ^ (1 << index))}>
-                                {(apiKeyViewable & (1 << index)) > 0 ? "HIDE" : "VIEW"}
-                              </Button>
-                            </TableCell>
-                            <TableCell><Button onClick={() => onApiKeyDelete(key.id)}>DEL</Button></TableCell>
-                          </TableRow>
-                        ))}
-                        <TableRow key="ADD">
-                          <TableCell className="font-medium"></TableCell>
-                          <TableCell></TableCell>
-                          <TableCell></TableCell>
-                          <TableCell><Button onClick={onApiKeyAdd}>ADD</Button></TableCell>
-                        </TableRow>
-                      </TableBody>
-                    </Table>
-                  </div>
-                </div>
-            <div className="px-10 py-5 mx-5 my-10 max-w-lg inline-block">
-                <div className="text-xl justify-left">
-                    <Info className="h-4 w-4 mx-1 inline" />
-                    TTS Voice
-                </div>
-                <div className="px-10 py-6 rounded-md bg-pink-300 max-w-sm">
-                    <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                            <Button variant="outline">Default Voice</Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent className="w-56">
-                            <DropdownMenuLabel>English Voices</DropdownMenuLabel>
-                            <DropdownMenuSeparator />
-                            <DropdownMenuRadioGroup value="voice">
-                                <DropdownMenuRadioItem value="brian">Brian</DropdownMenuRadioItem>
-                                <DropdownMenuRadioItem value="amy">Amy</DropdownMenuRadioItem>
-                                <DropdownMenuRadioItem value="emma">Emma</DropdownMenuRadioItem>
-                            </DropdownMenuRadioGroup>
-                        </DropdownMenuContent>
-                    </DropdownMenu>
-                </div>
-            </div>
-
-            <div className="px-10 py-5 mx-5 my-10 max-w-lg inline-block">
-                <div className="text-xl justify-left">TTS Message Filter</div>
-                <div className="grid px-10 py-6 rounded-md bg-blue-400 max-w-sm">
-                    <TTSBadgeFilterModal />
-                    {/* <Button aria-label="Subscription" variant="ttsmessagefilter" className="my-2">
-                        <Info className="h-4 w-4 mx-1" />
-                        Subscription
-                    </Button> */}
-                    {/* <Button aria-label="Cheers" variant="ttsmessagefilter" className="my-2">
-                        <Info className="h-4 w-4 mx-1" />
-                        Cheers
-                    </Button> */}
-                    <Button aria-label="Username" variant="ttsmessagefilter" className="my-2">
-                        <Info className="h-4 w-4 mx-1" />
-                        Username
-                    </Button>
-                </div>
-            </div>
-        </div>
-    );
-}
- 
-export default SettingsPage;

app/api/account/authorize/route.ts

@@ -15,7 +15,7 @@ export async function GET(req: Request) {
         if (!code || !scope || !state) {
             return new NextResponse("Bad Request", { status: 400 });
         }
-        console.log("VERIFY")
+
         // Verify state against user id in user table.
         const user = await db.user.findFirst({
           where: {
@@ -23,12 +23,10 @@ export async function GET(req: Request) {
           }
         })
 
-        console.log("USER", user)
         if (!user) {
           return new NextResponse("Bad Request", { status: 400 });
         }
 
-        console.log("FETCH TOKEN")
         // Post to https://id.twitch.tv/oauth2/token
         const token: { access_token:string, expires_in:number, refresh_token:string, token_type:string, scope:string[] } = (await axios.post("https://id.twitch.tv/oauth2/token", {
             client_id: process.env.TWITCH_BOT_CLIENT_ID,
@@ -37,13 +35,12 @@ export async function GET(req: Request) {
             grant_type: "authorization_code",
             redirect_uri: "https://hermes.goblincaves.com/api/account/authorize"
         })).data
-        console.log("TOKEN", token)
 
         // Fetch values from token.
         const { access_token, expires_in, refresh_token, token_type } = token
-        console.log("AT", access_token)
-        console.log("RT", refresh_token)
-        console.log("TT", token_type)
+        // console.log("AT", access_token)
+        // console.log("RT", refresh_token)
+        // console.log("TT", token_type)
 
         if (!access_token || !refresh_token || token_type !== "bearer") {
             return new NextResponse("Unauthorized", { status: 401 });

app/api/account/reauthorize/route.ts

@@ -12,7 +12,6 @@ export async function GET(req: Request) {
           }
         })
 
-        console.log("API USER:", key)
         if (!key) {
             return new NextResponse("Forbidden", { status: 403 });
         }
@@ -35,7 +34,6 @@ export async function GET(req: Request) {
             if (expires_in > 3600)
                 return new NextResponse("", { status: 201 });
         } catch (error) {
-            console.log("Oudated Twitch token.")
         }
 
         // Post to https://id.twitch.tv/oauth2/token
@@ -48,9 +46,9 @@ export async function GET(req: Request) {
 
         // Fetch values from token.
         const { access_token, expires_in, refresh_token, token_type } = token
-        console.log("AT", access_token)
-        console.log("RT", refresh_token)
-        console.log("TT", token_type)
+        // console.log("AT", access_token)
+        // console.log("RT", refresh_token)
+        // console.log("TT", token_type)
 
         if (!access_token || !refresh_token || token_type !== "bearer") {
             return new NextResponse("Unauthorized", { status: 401 });

app/api/account/route.ts

@@ -29,16 +29,10 @@ export async function POST(req: Request) {
         });
   
         if (exist) {
-            // const apikey = await db.apiKey.findFirst({
-            //   where: {
-            //     userId: user.toLowerCase() as string
-            //   }
-            // })
-            return {
+            return NextResponse.json({
               id: exist.id,
-              username: exist.username,
-              //key: apikey?.id as string
-            };
+              username: exist.username
+            });
         }
     
         const newUser = await db.user.create({
@@ -47,18 +41,9 @@ export async function POST(req: Request) {
           }
         });
 
-        // const apikey = await db.apiKey.create({
-        //   data: {
-        //     id: generateToken(),
-        //     label: "Default",
-        //     userId: user.toLowerCase() as string
-        //   }
-        // })
-
         return NextResponse.json({
           id: newUser.id,
-          username: newUser.username,
-          //key: apikey.id
+          username: newUser.username
         });
     } catch (error) {
         console.log("[ACCOUNT]", error);

app/api/settings/connections/twitch/route.ts

@@ -37,12 +37,11 @@ export async function POST(req: Request) {
     try {
         const { id, secret } = await req.json();
         const user = await fetchUserUsingAPI(req)
-        console.log("userrr:", user)
+
         if (!user) {
             return new NextResponse("Unauthorized", { status: 401 });
         }
 
-        console.log(id, secret)
         let response = null;
         try {
           response = await axios.post("https://id.twitch.tv/oauth2/token", {
@@ -69,7 +68,7 @@ export async function POST(req: Request) {
 
         const connection = await db.twitchConnection.create({
             data: {
-                id,
+                id: id,
                 secret,
                 userId: user.id as string,
                 broadcasterId,

app/settings/api/keys/page.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import axios from "axios";
+import { Button } from "@/components/ui/button";
+import * as React from 'react';
+import { ApiKey, User } from "@prisma/client";
+import { useEffect, useState } from "react";
+import { useSession } from "next-auth/react";
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+
+const SettingsPage = () => {
+    const { data: session, status } = useSession();
+
+    const [apiKeyViewable, setApiKeyViewable] = useState(0)
+    const [apiKeyChanges, setApiKeyChanges] = useState(0)
+    const [apiKeys, setApiKeys] = useState<ApiKey[]>([])
+
+    useEffect(() => {
+      const fetchData = async () => {
+        try {
+          const keys = (await axios.get("/api/tokens")).data ?? {};
+          setApiKeys(keys)
+          console.log(keys);
+        } catch (error) {
+          console.log("ERROR", error)
+        }
+      };
+
+      fetchData().catch(console.error);
+    }, [apiKeyChanges]);
+
+    const onApiKeyAdd = async () => {
+      try {
+        await axios.post("/api/token", {
+          label: "Key label"
+        });
+        setApiKeyChanges(apiKeyChanges + 1)
+      } catch (error) {
+        console.log("ERROR", error)
+      }
+    }
+
+    const onApiKeyDelete = async (id: string) => {
+      try {
+        await axios.delete("/api/token/" + id);
+        setApiKeyChanges(apiKeyChanges - 1)
+      } catch (error) {
+        console.log("ERROR", error)
+      }
+    }
+
+    useEffect(() => {
+      const fetchData = async () => {
+        try {
+          const keys = (await axios.get("/api/tokens")).data;
+          setApiKeys(keys)
+          console.log(keys);
+        } catch (error) {
+          console.log("ERROR", error)
+        }
+      };
+
+      fetchData().catch(console.error);
+    }, [apiKeyViewable]);
+
+    return (
+      <div>
+        <div className="px-10 py-5 mx-5 my-10">
+          <div>
+            <div className="text-xl justify-left mt-10">API Keys</div>
+            <Table className="max-w-2xl">
+              <TableCaption>A list of your secret API keys.</TableCaption>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Label</TableHead>
+                  <TableHead>Token</TableHead>
+                  <TableHead>View</TableHead>
+                  <TableHead>Action</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {apiKeys.map((key, index) => (
+                  <TableRow key={key.id}>
+                    <TableCell className="font-medium">{key.label}</TableCell>
+                    <TableCell>{(apiKeyViewable & (1 << index)) > 0 ? key.id : "*".repeat(key.id.length)}</TableCell>
+                    <TableCell>
+                      <Button onClick={() => setApiKeyViewable((v) => v ^ (1 << index))}>
+                        {(apiKeyViewable & (1 << index)) > 0 ? "HIDE" : "VIEW"}
+                      </Button>
+                    </TableCell>
+                    <TableCell><Button onClick={() => onApiKeyDelete(key.id)}>DEL</Button></TableCell>
+                  </TableRow>
+                ))}
+                <TableRow key="ADD">
+                  <TableCell className="font-medium"></TableCell>
+                  <TableCell></TableCell>
+                  <TableCell></TableCell>
+                  <TableCell><Button onClick={onApiKeyAdd}>ADD</Button></TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+      </div>
+    );
+}
+ 
+export default SettingsPage;

app/settings/connections/page.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import axios from "axios";
+import * as React from 'react';
+import { ApiKey, TwitchConnection, User } from "@prisma/client";
+import { useEffect, useState } from "react";
+import { useSession } from "next-auth/react";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+import { Skeleton } from "@/components/ui/skeleton";
+
+const SettingsPage = () => {
+    const { data: session, status } = useSession();
+    const [previousUsername, setPreviousUsername] = useState<string>()
+    const [userId, setUserId] = useState<string>()
+    const [loading, setLoading] = useState<boolean>(true)
+
+    useEffect(() => {
+      if (status !== "authenticated" || previousUsername == session.user?.name) {
+          return
+      }
+
+      setPreviousUsername(session.user?.name as string)
+      if (session.user?.name) {
+        const fetchData = async () => {
+          var connection: User = (await axios.get("/api/account")).data
+          setUserId(connection.id)
+          setLoading(false)
+        }
+
+        fetchData().catch(console.error)
+      }
+  }, [session])
+
+    const [twitchUser, setTwitchUser] = useState<TwitchConnection | null>(null)
+    useEffect(() => {
+        const fetchData = async () => {
+            var connection: TwitchConnection = (await axios.get("/api/settings/connections/twitch")).data
+            setTwitchUser(connection)
+        }
+
+        fetchData().catch(console.error);
+    }, [])
+
+    const OnTwitchConnectionDelete = async () => {
+        try {
+            await axios.post("/api/settings/connections/twitch/delete")
+            setTwitchUser(null)
+        } catch (error) {
+            console.log("ERROR", error)
+        }
+    }
+
+    return (
+      <div>
+        <div className="text-2xl text-center pt-[50px]">Connections</div>
+        <div className="px-10 py-10 w-full h-full flex-grow inset-y-1/2">
+          <div>
+            <div className="px-10 py-6 rounded-md bg-purple-500 overflow-hidden wrap">
+              <div className={cn("hidden", !loading && "inline-block w-5/6")}>
+                <div className="inline-block">
+                  <Avatar>
+                    <AvatarImage src="https://cdn2.iconfinder.com/data/icons/social-aquicons/512/Twitch.png" alt="twitch" />
+                    <AvatarFallback></AvatarFallback>
+                  </Avatar>
+                </div>
+                <div className="inline-block ml-5">
+                  <div className="inline-block text-lg">Twitch</div>
+                    <div className={cn("hidden", twitchUser == null && "text-s flex")}>
+                      <Link href={(process.env.NEXT_PUBLIC_TWITCH_OAUTH_URL as string) + userId}>Connect your Twitch account!</Link>
+                    </div>
+                    <div className={cn("hidden", twitchUser != null && "text-s flex")}>
+                        <p>{twitchUser?.broadcasterId}</p>
+                    </div>
+                </div>
+              </div>
+              <div className={cn("hidden", !loading && "inline-block")}>
+                <button onClick={OnTwitchConnectionDelete} className={cn("hidden", twitchUser != null && "flex")}>
+                  <Avatar>
+                    <AvatarImage src="https://upload.wikimedia.org/wikipedia/en/b/ba/Red_x.svg" alt="delete" />
+                    <AvatarFallback></AvatarFallback>
+                  </Avatar>
+                </button>
+              </div>
+              <Skeleton className={cn("visible rounded-full flex items-center bg-transparent", !loading && "hidden")}>
+                <Skeleton className="h-12 w-12 rounded-full" />
+                <div className="space-y-2">
+                  <Skeleton className="pl-[10px] h-5 w-[100px]" />
+                  <Skeleton className="pl-[10px] h-4 w-[200px]" />
+                </div>
+              </Skeleton>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+}
+ 
+export default SettingsPage;

app/settings/layout.tsx

@@ -0,0 +1,25 @@
+import SettingsNavigation from "@/components/navigation/settings";
+import { cn } from "@/lib/utils";
+import { headers } from 'next/headers';
+import React from "react";
+
+const SettingsLayout = async (
+  { children } : { children:React.ReactNode } ) => {
+  const headersList = headers();
+  const header_url = headersList.get('x-url') || "";
+  console.log("HEADER URL: " + header_url)
+
+  return (
+    <div className="h-full">
+      <div className={cn("hidden md:flex h-full w-[250px] z-30 flex-col fixed inset-y-0", header_url.endsWith("/settings") && "md:flex h-full w-full z-30 flex-col fixed inset-y-0")}>
+        <SettingsNavigation />
+      </div>
+
+      <main className={cn("md:pl-[250px] h-full", header_url.endsWith("/settings") && "hidden")}>
+        {children}
+      </main>
+    </div>
+    );
+}
+ 
+export default SettingsLayout;

app/settings/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+const SettingsPage = () => {
+    return (
+        <div>
+        </div>
+    );
+}
+ 
+export default SettingsPage;

app/settings/tts/filters/page.tsx

@@ -0,0 +1,250 @@
+"use client";
+
+import axios from "axios";
+import * as React from 'react';
+import { Calendar, Check, ChevronsUpDown, MoreHorizontal, Plus, Tags, Trash, User } from "lucide-react"
+import { ApiKey, TwitchConnection } from "@prisma/client";
+import { useEffect, useState } from "react";
+import { useSession } from "next-auth/react";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Button } from "@/components/ui/button"
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { useRouter } from "next/navigation";
+import { useForm } from "react-hook-form";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import * as z from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { DropdownMenu, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from "@/components/ui/dropdown-menu";
+import { DropdownMenuContent, DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
+import { Label } from "@/components/ui/label";
+
+const TTSFiltersPage = () => {
+  const { data: session, status } = useSession();
+  const [loading, setLoading] = useState<boolean>(true)
+  const [moreOpen, setMoreOpen] = useState<number>(0)
+  const [tag, setTag] = useState("blacklisted")
+  const [open, setOpen] = useState<boolean>(false)
+  const [userTags, setUserTag] = useState<{ username: string, tag: string }[]>([{ username: "test", tag:"blacklisted" }, { username: "hello world", tag:"moderator" }])
+  const router = useRouter();
+
+  const labels = [
+    "blacklisted",
+    "priority"
+  ]
+
+  // Username blacklist
+  const usernameFilteredFormSchema = z.object({
+    username: z.string().trim().min(4).max(25).regex(new RegExp("[a-zA-Z0-9][a-zA-Z0-9_]{3, 24}"), "Must be a valid twitch username.")
+  });
+
+
+  const usernameFilteredForm = useForm({
+    resolver: zodResolver(usernameFilteredFormSchema),
+    defaultValues: {
+      username: ""
+    }
+  });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        // const userFiltersData = (await axios.get("/api/settings/tts/filters/users")).data ?? {};
+        // setApiKeys(userFiltersData)
+        // console.log(userFiltersData);
+      } catch (error) {
+        console.log("ERROR", error)
+      }
+    };
+
+    fetchData().catch(console.error);
+  }, []);
+
+  const onApiKeyAdd = async () => {
+    ///let usernames = blacklistedUsers.split("\n");
+    //console.log(usernames)
+    // try {
+    //   await axios.post("/api/settings/tts/filters/users", {
+    //     usernames: []
+    //   });
+    //   setUserFilters(userFilters.concat(usernames))
+    // } catch (error) {
+    //   console.log("ERROR", error)
+    // }
+  }
+
+  const onApiKeyDelete = async (username: string) => {
+    try {
+      await axios.delete("/api/settings/tts/filters/users/" + username);
+      //setUserFilters(userFilters.filter((u) => u != username))
+    } catch (error) {
+      console.log("ERROR", error)
+    }
+  }
+
+  const isLoading = usernameFilteredForm.formState.isSubmitting;
+
+  const addTwitchUser = (values: z.infer<typeof usernameFilteredFormSchema>) => {
+    let response = null;
+    console.log("TEST")
+    console.log(values)
+
+    // try {
+    //   response = await axios.post("/api/settings/tts/filter/badges", values);
+    // } catch (error) {
+    //   console.log("[CONNECTIONS/TWITCH/POST]", error);
+    //   return;
+    // }
+
+    userTags.push({ username: values.username, tag: tag })
+    setUserTag(userTags)
+    usernameFilteredForm.reset();
+    router.refresh();
+    //window.location.reload();
+  }
+
+  return (
+    <div>
+      <div className="text-2xl text-center pt-[50px]">TTS Filters</div>
+      <div className="px-10 py-10 w-full h-full flex-grow inset-y-1/2">
+        <div>
+          {userTags.map((user, index) => (
+            <div className="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
+              <p className="text-sm font-medium leading-none">
+                <span className="mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground">
+                  {user.tag}
+                </span>
+                <span className="text-muted-foreground">{user.username}</span>
+              </p>
+              <DropdownMenu open={(moreOpen & (1 << index)) > 0} onOpenChange={() => setMoreOpen((v) => v ^ (1 << index))}>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" size="sm">
+                    <MoreHorizontal />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-[200px]">
+                  <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                  <DropdownMenuGroup>
+                    <DropdownMenuSub>
+                      <DropdownMenuSubTrigger>
+                        <Tags className="mr-2 h-4 w-4" />
+                        Apply label
+                      </DropdownMenuSubTrigger>
+                      <DropdownMenuSubContent className="p-0">
+                        <Command>
+                          <CommandInput
+                            placeholder="Filter label..."
+                            autoFocus={true}
+                          />
+                          <CommandList>
+                            <CommandEmpty>No label found.</CommandEmpty>
+                            <CommandGroup>
+                              {labels.map((label) => (
+                                <CommandItem
+                                  key={label}
+                                  value={label}
+                                  onSelect={(value) => {
+                                    userTags[index].tag = value
+                                    setUserTag(userTags)
+                                    setMoreOpen(0)
+                                  }}
+                                >
+                                  {label}
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </DropdownMenuSubContent>
+                    </DropdownMenuSub>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem onClick={() => {
+                      userTags.splice(index, 1)
+                      setUserTag(userTags)
+                    }} className="text-red-600">
+                      <Trash className="mr-2 h-4 w-4" />
+                      Delete
+                    </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          ))}
+          <Form {...usernameFilteredForm}>
+            <form onSubmit={usernameFilteredForm.handleSubmit(addTwitchUser)}>
+              <div className="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
+                <Label className=" mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground">
+                  {tag}
+                </Label>
+                <FormField
+                  control={usernameFilteredForm.control}
+                  name="username"
+                  render={({ field }) => (
+                    <FormItem className="flex-grow">
+                      <FormControl>
+                        <Input id="username" placeholder="Enter a twitch username" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <Button variant="ghost" size="sm" type="submit">
+                  <Plus />
+                </Button>
+                <DropdownMenu open={open} onOpenChange={setOpen}>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="sm" {...usernameFilteredForm}>
+                      <MoreHorizontal />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end" className="w-[200px]">
+                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                    <DropdownMenuGroup>
+                      <DropdownMenuSub>
+                        <DropdownMenuSubTrigger>
+                          <Tags className="mr-2 h-4 w-4" />
+                          Apply label
+                        </DropdownMenuSubTrigger>
+                        <DropdownMenuSubContent className="p-0">
+                          <Command>
+                            <CommandInput
+                              placeholder="Filter label..."
+                              autoFocus={true}
+                            />
+                            <CommandList>
+                              <CommandEmpty>No label found.</CommandEmpty>
+                              <CommandGroup>
+                                {labels.map((label) => (
+                                  <CommandItem
+                                    value={label}
+                                    onSelect={(value) => {
+                                      setTag(value)
+                                      setOpen(false)
+                                    }}
+                                  >
+                                    {label}
+                                  </CommandItem>
+                                ))}
+                              </CommandGroup>
+                            </CommandList>
+                          </Command>
+                        </DropdownMenuSubContent>
+                      </DropdownMenuSub>
+                    </DropdownMenuGroup>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </form>
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default TTSFiltersPage;

app/settings/tts/voices/page.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import axios from "axios";
+import * as React from 'react';
+import { Check, ChevronsUpDown } from "lucide-react"
+import { ApiKey, TwitchConnection, User } from "@prisma/client";
+import { useEffect, useState } from "react";
+import { useSession } from "next-auth/react";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Button } from "@/components/ui/button"
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@/components/ui/command"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { Label } from "@/components/ui/label";
+
+const TTSFiltersPage = () => {
+  const { data: session, status } = useSession();
+  const [loading, setLoading] = useState<boolean>(true)
+
+  const [open, setOpen] = useState(false)
+  const [value, setValue] = useState<string>("")
+
+  const voices = [
+    {
+      value: "brian",
+      label: "Brian",
+      gender: "Male",
+      language: "en"
+    },
+    {
+      value: "sveltekit",
+      label: "SvelteKit",
+      gender: "Male"
+    },
+    {
+      value: "nuxt.js",
+      label: "Nuxt.js",
+      gender: "Male",
+      language: "en"
+    },
+    {
+      value: "remix",
+      label: "Remix",
+      gender: "Male",
+      language: "en"
+    },
+    {
+      value: "astro",
+      label: "Astro",
+      gender: "Male",
+      language: "en"
+    },
+  ]
+
+  return ( 
+    <div>
+      <div className="text-2xl text-center pt-[50px]">TTS Voices</div>
+      <div className="px-10 py-10 w-full h-full flex-grow inset-y-1/2">
+        <div>
+          <div id="defaultvoice" className="inline-block text-lg">Default Voice</div>
+          <Label htmlFor="defaultvoice" className=" pl-[10px] inline-block">Voice used without any voice modifiers</Label>
+          <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                role="combobox"
+                aria-expanded={open}
+                className="w-[200px] justify-between"
+              >
+                {value
+                  ? voices.find((voice) => voice.value === value)?.label
+                  : "Select voice..."}
+                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-[200px] p-0">
+              <Command>
+                <CommandInput placeholder="Search voice..." />
+                <CommandEmpty>No framework found.</CommandEmpty>
+                <CommandGroup>
+                  {voices.map((voice) => (
+                    <CommandItem
+                      key={voice.value}
+                      value={voice.value}
+                      onSelect={(currentValue) => {
+                        setValue(currentValue === value ? "" : currentValue)
+                        setOpen(false)
+                      }}
+                    >
+                      <Check
+                        className={cn(
+                          "mr-2 h-4 w-4",
+                          value === voice.value ? "opacity-100" : "opacity-0"
+                        )}
+                      />
+                      {voice.label}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        </div>
+      </div>
+    </div>
+   );
+}
+ 
+export default TTSFiltersPage;

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;

components/ui/command.tsx

@@ -0,0 +1,155 @@
+"use client"
+
+import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

components/ui/navigation-menu.tsx

@@ -0,0 +1,128 @@
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+)
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDown
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+))
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}

components/ui/popover.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }

components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

components/ui/textarea.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }

middleware.ts

@@ -45,37 +45,15 @@ import { getServerSession } from "next-auth";
 
 export default withAuth(
   async function middleware(req) {
-    // if (!req.url.startsWith("https://hermes.goblincaves.com")) {
-    //   return redirect("https://hermes.goblincaves.com")
-    // }
+    const requestHeaders = new Headers(req.headers);
+    requestHeaders.set('x-url', req.url);
 
-    //console.log(req.nextauth)
-    //console.log(req.nextauth.token)
-
-    // if (req.nextUrl.pathname.startsWith("/api/auth")) {
-    //   //console.log("Auth API reached")
-    // } else if (req.nextUrl.pathname.startsWith("/api")) {
-    //   //console.log("API reached")
-
-    //   const apiKey = req.headers.get("x-api-key") as string
-    //   let api = null
-    //   if (apiKey != null) {
-    //     //console.log("API KEY:", apiKey)
-    //     api = await fetch("http://localhost:3000/api/validate")
-    //   }
-    //   if (api == null || (await api.text()) == "null") {
-    //     //console.log("Invalid API key attempted")
-    //     return NextResponse.rewrite(
-    //       `${req.nextUrl.protocol}//${req.nextUrl.host}`,
-    //       {
-    //         status: 401,
-    //         headers: {
-    //           "WWW-Authenticate": 'Basic realm="Secure Area"',
-    //         },
-    //       }
-    //     );
-    //   }
-    // }
+    return NextResponse.next({
+      request: {
+        // Apply new request headers
+        headers: requestHeaders,
+      }
+    });
   },
   {
   callbacks: {