Added username filter, word replacement filter and voice selection

app/api/settings/tts/default/route.ts

@@ -0,0 +1,55 @@
+import { db } from "@/lib/db"
+import { NextResponse } from "next/server";
+import fetchUserUsingAPI from "@/lib/validate-api";
+import voices from "@/data/tts";
+
+export async function GET(req: Request) {
+    try {
+        const user = await fetchUserUsingAPI(req)
+        if (!user) {
+            return new NextResponse("Unauthorized", { status: 401 });
+        }
+
+        const u = await db.user.findFirst({
+            where: {
+                id: user.id
+            }
+        });
+
+        const voice = voices.find(v => v.value == new String(u?.ttsDefaultVoice))
+        return NextResponse.json(voice);
+    } catch (error) {
+        console.log("[TTS/FILTER/USER]", error);
+        return new NextResponse("Internal Error", { status: 500 });
+    }
+}
+
+export async function POST(req: Request) {
+    try {
+        const user = await fetchUserUsingAPI(req)
+        if (!user) {
+            return new NextResponse("Unauthorized", { status: 401 });
+        }
+
+        const { voice } = await req.json();
+        console.log(voice)
+
+        const v = voices.find(v => v.label.toLowerCase() == voice.toLowerCase())
+        if (v == null)
+          return new NextResponse("Bad Request", { status: 400 });
+
+        await db.user.update({
+          where: {
+            id: user.id
+          },
+          data: {
+            ttsDefaultVoice: Number.parseInt(v.value)
+          }
+        });
+
+        return new NextResponse("", { status: 200 });
+    } catch (error) {
+        console.log("[TTS/FILTER/USER]", error);
+        return new NextResponse("Internal Error", { status: 500 });
+    }
+}

app/api/settings/tts/filter/users/route.ts

@@ -17,7 +17,7 @@ export async function GET(req: Request) {
 
         return NextResponse.json(filters);
     } catch (error) {
-        console.log("[TTS/FILTER/USER]", error);
+        console.log("[TTS/FILTER/USERS]", error);
         return new NextResponse("Internal Error", { status: 500 });
     }
 }
@@ -35,7 +35,7 @@ export async function POST(req: Request) {
           where: {
             userId_username: {
               userId: user.id as string,
-              username
+              username: username.toLowerCase()
             }
           },
           update: {
@@ -43,14 +43,14 @@ export async function POST(req: Request) {
           },
           create: {
             userId: user.id as string,
-            username,
+            username: username.toLowerCase(),
             tag
           }
         });
 
         return NextResponse.json(filter);
     } catch (error) {
-        console.log("[TTS/FILTER/USER]", error);
+        console.log("[TTS/FILTER/USERS]", error);
         return new NextResponse("Internal Error", { status: 500 });
     }
 }
@@ -76,7 +76,7 @@ export async function DELETE(req: Request) {
 
         return NextResponse.json(filter)
     } catch (error) {
-        console.log("[TTS/FILTER/USER]", error);
+        console.log("[TTS/FILTER/USERS]", error);
         return new NextResponse("Internal Error", { status: 500 });
     }
 }

app/api/settings/tts/filter/words/route.ts

@@ -0,0 +1,111 @@
+import { db } from "@/lib/db"
+import { NextResponse } from "next/server";
+import fetchUserUsingAPI from "@/lib/validate-api";
+
+export async function GET(req: Request) {
+    try {
+        const user = await fetchUserUsingAPI(req)
+        if (!user) {
+            return new NextResponse("Unauthorized", { status: 401 });
+        }
+
+        const filters = await db.ttsWordFilter.findMany({
+            where: {
+                userId: user.id
+            }
+        });
+
+        return NextResponse.json(filters);
+    } catch (error) {
+        console.log("[TTS/FILTER/WORDS]", error);
+        return new NextResponse("Internal Error", { status: 500 });
+    }
+}
+
+export async function POST(req: Request) {
+    try {
+        const user = await fetchUserUsingAPI(req)
+        if (!user) {
+            return new NextResponse("Unauthorized", { status: 401 });
+        }
+
+        const { search, replace } = await req.json();
+
+        const filter = await db.ttsWordFilter.create({
+          data: {
+            search,
+            replace,
+            userId: user.id as string
+          }
+        });
+
+        return NextResponse.json(filter);
+    } catch (error) {
+        console.log("[TTS/FILTER/WORDS]", error);
+        return new NextResponse("Internal Error", { status: 500 });
+    }
+}
+
+export async function PUT(req: Request) {
+  try {
+      const user = await fetchUserUsingAPI(req)
+      if (!user) {
+          return new NextResponse("Unauthorized", { status: 401 });
+      }
+
+      const { id, search, replace } = await req.json();
+
+      const filter = await db.ttsWordFilter.update({
+        where: {
+          id
+        },
+        data: {
+          search,
+          replace
+        }
+      });
+
+      return NextResponse.json(filter);
+  } catch (error) {
+      console.log("[TTS/FILTER/WORDS]", error);
+      return new NextResponse("Internal Error", { status: 500 });
+  }
+}
+
+export async function DELETE(req: Request) {
+    try {
+        const user = await fetchUserUsingAPI(req)
+        if (!user) {
+            return new NextResponse("Unauthorized", { status: 401 });
+        }
+
+        const { searchParams } = new URL(req.url)
+        const id = searchParams.get('id') as string
+        const search = searchParams.get('search') as string
+
+        if (search) {
+          const filter = await db.ttsWordFilter.delete({
+            where: {
+              userId_search: {
+                userId: user.id as string,
+                search
+              }
+            }
+          });
+
+          return NextResponse.json(filter)
+        } else if (id) {
+          const filter = await db.ttsWordFilter.delete({
+            where: {
+              id: id
+            }
+          });
+
+          return NextResponse.json(filter)
+        }
+        return new NextResponse("Bad Request", { status: 400 });
+    } catch (error) {
+        console.log("[TTS/FILTER/WORDS]", error);
+        return new NextResponse("Internal Error" + error, { status: 500 });
+    }
+}

app/api/settings/tts/route.ts

@@ -0,0 +1,66 @@
+import { db } from "@/lib/db"
+import { NextResponse } from "next/server";
+import fetchUserUsingAPI from "@/lib/validate-api";
+import voices from "@/data/tts";
+
+export async function GET(req: Request) {
+    try {
+        const user = await fetchUserUsingAPI(req)
+        if (!user) {
+            return new NextResponse("Unauthorized", { status: 401 });
+        }
+
+        const u = await db.user.findFirst({
+            where: {
+                id: user.id
+            }
+        });
+
+        let list : {
+          value: string;
+          label: string;
+          gender: string;
+          language: string;
+        }[] = []
+        const enabled = u?.ttsEnabledVoice ?? 0
+        for (let i = 0; i < voices.length; i++) {
+          var v = voices[i]
+          var n = Number.parseInt(v.value) - 1
+          if ((enabled & (1 << n)) > 0) {
+            list.push(v)
+          }
+        }
+
+        return NextResponse.json(list);
+    } catch (error) {
+        console.log("[TTS/FILTER/USER]", error);
+        return new NextResponse("Internal Error", { status: 500 });
+    }
+}
+
+export async function POST(req: Request) {
+    try {
+        const user = await fetchUserUsingAPI(req)
+        if (!user) {
+            return new NextResponse("Unauthorized", { status: 401 });
+        }
+
+        let { voice } = await req.json();
+        console.log(voice)
+        voice = voice & ((1 << voices.length) - 1)
+
+        await db.user.update({
+          where: {
+            id: user.id
+          },
+          data: {
+            ttsEnabledVoice: voice
+          }
+        });
+
+        return new NextResponse("", { status: 200 });
+    } catch (error) {
+        console.log("[TTS/FILTER/USER]", error);
+        return new NextResponse("Internal Error", { status: 500 });
+    }
+}

app/api/tokens/route.ts

@@ -14,8 +14,6 @@ export async function GET(req: Request) {
             }
         }
 
-        console.log("TOKEN KEY:", userId)
-
         const tokens = await db.apiKey.findMany({
             where: {
                 userId: userId as string

app/page.tsx

@@ -2,7 +2,7 @@
 
 import { redirect } from "next/navigation";
 import Link from "next/link";
-import { useSession, signIn, signOut } from "next-auth/react";
+import { signOut, useSession } from "next-auth/react";
 import { useEffect, useState } from "react";
 import axios from "axios";
 
@@ -43,16 +43,13 @@ export default function Home() {
       }}
     >
       <div className="header">
-        <Link href="/">
-          <p className="logo">NextAuth.js</p>
-        </Link>
         {session && (
           <Link href="#" onClick={() => signOut()} className="btn-signin">
             Sign out
           </Link>
         )}
         {!session && (
-          <Link href="#" onClick={() => signIn()} className="btn-signin">
+          <Link href="/auth/login" className="btn-signin">
             Sign in
           </Link>
         )}

app/settings/tts/filters/page.tsx

@@ -2,19 +2,12 @@
 
 import axios from "axios";
 import * as React from 'react';
-import { Calendar, Check, ChevronsUpDown, MoreHorizontal, Plus, Tags, Trash, User } from "lucide-react"
+import { InfoIcon, MoreHorizontal, Plus, Save, Tags, Trash } from "lucide-react"
-import { ApiKey, TtsUsernameFilter, 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";
@@ -23,14 +16,13 @@ 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";
-import { db } from "@/lib/db";
+
 
 const TTSFiltersPage = () => {
   const { data: session, status } = useSession();
-  const [loading, setLoading] = useState<boolean>(true)
+  const [moreOpen, setMoreOpen] = useState(0)
-  const [moreOpen, setMoreOpen] = useState<number>(0)
   const [tag, setTag] = useState("blacklisted")
-  const [open, setOpen] = useState<boolean>(false)
+  const [open, setOpen] = useState(false)
   const [userTags, setUserTag] = useState<{ username: string, tag: string }[]>([])
   const router = useRouter();
 
@@ -42,11 +34,10 @@ const TTSFiltersPage = () => {
   // Username blacklist
   const usernameFilteredFormSchema = z.object({
     //userId: z.string().trim().min(1),
-    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.")
+    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."),
     tag: z.string().trim()
   });
 
-
   const usernameFilteredForm = useForm({
     resolver: zodResolver(usernameFilteredFormSchema),
     defaultValues: {
@@ -59,11 +50,19 @@ const TTSFiltersPage = () => {
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const userFiltersData = await axios.get("/api/settings/tts/filter/users");
+        const userFiltersData = await axios.get("/api/settings/tts/filter/users")
         setUserTag(userFiltersData.data ?? [])
       } catch (error) {
         console.log("ERROR", error)
       }
+
+      try {
+        const replacementData = await axios.get("/api/settings/tts/filter/words")
+        console.log(replacementData.data)
+        setReplacements(replacementData.data ?? [])
+      } catch (e) {
+        console.log("ERROR", e)
+      }
     };
 
     fetchData().catch(console.error);
@@ -77,14 +76,22 @@ const TTSFiltersPage = () => {
       }).catch((e) => console.error(e))
   }
 
-  const isLoading = usernameFilteredForm.formState.isSubmitting;
+  const isSubmitting = usernameFilteredForm.formState.isSubmitting;
 
-  const onAdd = (values: z.infer<typeof usernameFilteredFormSchema>) => {
+  const onAddExtended = (values: z.infer<typeof usernameFilteredFormSchema>, test: boolean = true) => {
     try {
-      values.tag = tag
+      const original = userTags.find(u => u.username.toLowerCase() == values.username.toLowerCase())
+
+      if (test)
+        values.tag = tag
+      
       axios.post("/api/settings/tts/filter/users", values)
         .then((d) => {
-          userTags.push({ username: values.username, tag: tag })
+          if (original == null) {
+            userTags.push({ username: values.username.toLowerCase(), tag: values.tag })
+          } else {
+            original.tag = values.tag
+          }
           setUserTag(userTags)
 
           usernameFilteredForm.reset();
@@ -92,30 +99,89 @@ const TTSFiltersPage = () => {
         })
     } catch (error) {
       console.log("[TTS/FILTERS/USER]", error);
-      return;
     }
   }
 
+  const onAdd = (values: z.infer<typeof usernameFilteredFormSchema>) => {
+    onAddExtended(values, true)
+  }
+
+  // Word replacement
+  const [replacements, setReplacements] = useState<{ id: string, search: string, replace: string, userId: string }[]>([])
+
+  const onReplaceAdd = async () => {
+    await axios.post("/api/settings/tts/filter/words", { search, replace })
+      .then(d => {
+        replacements.push(d.data)
+        setReplacements(replacements)
+      }).catch(e => {
+        // TODO: handle already exist.
+        console.log("LOGGED:", e)
+        return null
+      })
+  }
+
+  const onReplaceUpdate = async (data: { id: string, search: string, replace: string, userId: string }) => {
+    await axios.put("/api/settings/tts/filter/words", data)
+      .then(d => {
+        //setReplacements(replacements.filter(r => r.id != id))
+      }).catch(e => {
+        // TODO: handle does not exist.
+        console.log("LOGGED:", e)
+        return null
+      })
+  }
+
+  const onReplaceDelete = async (id: string) => {
+    await axios.delete("/api/settings/tts/filter/words?id=" + id)
+      .then(d => {
+        setReplacements(replacements.filter(r => r.id != id))
+      }).catch(e => {
+        // TODO: handle does not exist.
+        console.log("LOGGED:", e)
+        return null
+      })
+  }
+
+  // const replaceFormSchema = z.object({
+  //   //userId: z.string().trim().min(1),
+  //   search: z.string().trim().min(1),
+  //   replace: z.string().trim().min(0),
+  // });
+
+  // const replaceForm = useForm({
+  //   resolver: zodResolver(replaceFormSchema),
+  //   defaultValues: {
+  //     //userId: session?.user?.id ?? "",
+  //     search: "",
+  //     replace: ""
+  //   }
+  // });
+
+  let [search, setSearch] = useState("")
+  let [replace, setReplace]  = useState("")
+  let [searchInfo, setSearchInfo]  = useState("")
+
   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 className="px-10 py-5 w-full h-full flex-grow inset-y-1/2">
-        <div>
+        <div className="">
           {userTags.map((user, index) => (
-            <div className="flex w-full items-start justify-between rounded-md border px-2 py-3">
+            <div className="flex w-full items-start justify-between rounded-md border px-4 py-1">
               <p className="text-base font-medium">
                 <span className="mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground">
                   {user.tag}
                 </span>
                 <span className="text-white">{user.username}</span>
               </p>
-              <DropdownMenu open={(moreOpen & (1 << index)) > 0} onOpenChange={() => setMoreOpen((v) => v ^ (1 << index))}>
+              <DropdownMenu open={(moreOpen & (1 << index)) > 0} onOpenChange={() => setMoreOpen(v => v ^ (1 << index))}>
                 <DropdownMenuTrigger asChild>
-                  <Button variant="ghost" size="sm">
+                  <Button variant="ghost" size="xs" className="bg-purple-500 hover:bg-purple-600">
-                    <MoreHorizontal />
+                    <MoreHorizontal className="h-4 w-4" />
                   </Button>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent align="end" className="w-[200px]">
+                <DropdownMenuContent align="end" className="w-[200px] bg-popover">
                   <DropdownMenuLabel>Actions</DropdownMenuLabel>
                   <DropdownMenuGroup>
                     <DropdownMenuSub>
@@ -137,8 +203,7 @@ const TTSFiltersPage = () => {
                                   key={tag}
                                   value={tag}
                                   onSelect={(value) => {
-                                    userTags[index].tag = value
+                                    onAddExtended({ username: userTags[index].username, tag: value}, false)
-                                    setUserTag(userTags)
                                     setMoreOpen(0)
                                   }}
                                 >
@@ -162,8 +227,8 @@ const TTSFiltersPage = () => {
           ))}
           <Form {...usernameFilteredForm}>
             <form onSubmit={usernameFilteredForm.handleSubmit(onAdd)}>
-              <div className="flex w-full items-start justify-between rounded-md border px-4 py-3">
+              <div className="flex w-full items-center justify-between rounded-md border px-4 py-2 gap-3">
-                <Label className="mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground">
+                <Label className="rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground ">
                   {tag}
                 </Label>
                 <FormField
@@ -178,16 +243,16 @@ const TTSFiltersPage = () => {
                     </FormItem>
                   )}
                 />
-                <Button variant="ghost" size="sm" type="submit">
+                <Button variant="ghost" size="sm" type="submit" className="bg-green-500 hover:bg-green-600 items-center align-middle" disabled={isSubmitting}>
-                  <Plus />
+                  <Plus className="h-6 w-6" />
                 </Button>
                 <DropdownMenu open={open} onOpenChange={setOpen}>
                   <DropdownMenuTrigger asChild>
-                    <Button variant="ghost" size="sm" {...usernameFilteredForm}>
+                    <Button size="sm" {...usernameFilteredForm} className="bg-purple-500 hover:bg-purple-600" disabled={isSubmitting}>
-                      <MoreHorizontal />
+                      <MoreHorizontal className="h-6 w-6" />
                     </Button>
                   </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end" className="w-[200px]">
+                  <DropdownMenuContent align="end" className="w-[200px] bg-popover">
                     <DropdownMenuLabel>Actions</DropdownMenuLabel>
                     <DropdownMenuGroup>
                       <DropdownMenuSub>
@@ -227,6 +292,47 @@ const TTSFiltersPage = () => {
             </form>
           </Form>
         </div>
+
+        <div>
+          <p className="text-center text-2xl text-white pt-[80px]">Regex Replacement</p>
+          <div>
+            {replacements.map((term: { id: string, search: string, replace: string, userId: string }) => (
+              <div className="flex flex-row w-full items-start justify-between rounded-lg border px-4 py-3 gap-3 mt-[15px]">
+                <Input id="search" placeholder={term.search} className="flex" onChange={e => term.search = e.target.value } defaultValue={term.search} />
+                <Input id="replace" placeholder={term.replace} className="flex" onChange={e => term.replace = e.target.value } defaultValue={term.replace} />
+                <Button className="bg-blue-500 hover:bg-blue-600 items-center align-middle" onClick={_ => onReplaceUpdate(term)}>
+                  <Save className="h-4 w-4" />
+                </Button>
+                <Button className="bg-red-500 hover:bg-red-600 items-center align-middle" onClick={_ => onReplaceDelete(term.id)}>
+                  <Trash className="h-4 w-4" />
+                </Button>
+              </div>
+            ))}
+            <div className="flex flex-row w-full items-center justify-center rounded-lg border px-3 py-3 mt-[15px]">
+              <div className="flex flex-col flex-grow">
+                <div className="flex flex-row w-full items-center justify-center gap-3">
+                  <Input id="search" placeholder="Enter a term to search for" onChange={e => {
+                    setSearch(e.target.value);
+                    try {
+                      new RegExp(e.target.value)
+                      setSearchInfo("Valid regular expression.")
+                    } catch (e) {
+                      setSearchInfo("Invalid regular expression. Regular search will be used instead.")
+                    }
+                  }} />
+                  <Input id="replace" placeholder="Enter a term to replace with" onChange={e => setReplace(e.target.value)} />
+                  <Button className="bg-green-500 hover:bg-green-600 items-center align-middle" onClick={onReplaceAdd}>
+                    <Plus className="h-4 w-4" />
+                  </Button>
+                </div>
+                <div className={searchInfo.length == 0 ? "hidden" : ""}>
+                  <InfoIcon className="inline-block h-4 w-4" />
+                  <p className="inline-block text-orange-400 text-sm pl-[7px]">{searchInfo}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   );

app/settings/tts/voices/page.tsx

@@ -3,95 +3,103 @@
 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";
+import { Checkbox } from "@/components/ui/checkbox";
+import voices from "@/data/tts";
 
 const TTSFiltersPage = () => {
   const { data: session, status } = useSession();
   const [loading, setLoading] = useState<boolean>(true)
 
   const [open, setOpen] = useState(false)
-  const [value, setValue] = useState<string>("")
+  const [value, setValue] = useState(0)
+  const [enabled, setEnabled] = useState(0)
 
-  const voices = [
+  useEffect(() => {
-    {
+    axios.get("/api/settings/tts/default")
-      value: "brian",
+      .then((voice) => {
-      label: "Brian",
+        setValue(Number.parseInt(voice.data.value))
-      gender: "Male",
+      })
-      language: "en"
+
-    },
+    axios.get("/api/settings/tts")
-    {
+      .then((d) => {
-      value: "sveltekit",
+        const total = d.data.reduce((acc: number, item: {value: number, label: string, gender: string, language: string}) => acc |= 1 << (item.value - 1), 0)
-      label: "SvelteKit",
+        setEnabled(total)
-      gender: "Male"
+      })
-    },
+  }, [])
-    {
+
-      value: "nuxt.js",
+  const onDefaultChange = (voice: string) => {
-      label: "Nuxt.js",
+    try {
-      gender: "Male",
+      axios.post("/api/settings/tts/default", { voice })
-      language: "en"
+        .then(d => {
-    },
+          console.log(d)
-    {
+        })
-      value: "remix",
+        .catch(e => console.error(e))
-      label: "Remix",
+    } catch (error) {
-      gender: "Male",
+      console.log("[TTS/DEFAULT]", error);
-      language: "en"
+      return;
-    },
+    }
-    {
+  }
-      value: "astro",
+
-      label: "Astro",
+  const onEnabledChanged = (val: number) => {
-      gender: "Male",
+    try {
-      language: "en"
+      axios.post("/api/settings/tts", { voice: val })
-    },
+        .then(d => {
-  ]
+          console.log(d)
+        })
+        .catch(e => console.error(e))
+    } catch (error) {
+      console.log("[TTS]", error);
+      return;
+    }
+  }
 
   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 className="px-10 py-10 w-full h-full flex-grow">
-        <div>
+        <div className="flex flex-row justify-evenly">
-          <div id="defaultvoice" className="inline-block text-lg">Default Voice</div>
+          <div>
-          <Label htmlFor="defaultvoice" className=" pl-[10px] inline-block">Voice used without any voice modifiers</Label>
+            <div className="inline-block text-lg">Default Voice</div>
+            <Label className="pl-[10px] inline-block">Voice used without any voice modifiers</Label>
+          </div>
           <Popover open={open} onOpenChange={setOpen}>
             <PopoverTrigger asChild>
               <Button
                 variant="outline"
                 role="combobox"
                 aria-expanded={open}
-                className="w-[200px] justify-between"
+                className="w-[200px] justify-between">
-              >
+                {value ? voices.find(v => Number.parseInt(v.value) == value)?.label : "Select voice..."}
-                {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>
+                <CommandEmpty>No voices found.</CommandEmpty>
                 <CommandGroup>
                   {voices.map((voice) => (
                     <CommandItem
                       key={voice.value}
                       value={voice.value}
                       onSelect={(currentValue) => {
-                        setValue(currentValue === value ? "" : currentValue)
+                        setValue(Number.parseInt(currentValue))
+                        onDefaultChange(voice.label)
                         setOpen(false)
                       }}
                     >
                       <Check
                         className={cn(
                           "mr-2 h-4 w-4",
-                          value === voice.value ? "opacity-100" : "opacity-0"
+                          value === Number.parseInt(voice.value) ? "opacity-100" : "opacity-0"
                         )}
                       />
                       {voice.label}
@@ -102,6 +110,23 @@ const TTSFiltersPage = () => {
             </PopoverContent>
           </Popover>
         </div>
+
+        <div className="w-full pt-[50px]">
+          <p className="text-xl text-center justify-center">Voices Enabled</p>
+          <div className="grid grid-cols-4 grid-flow-row gap-4 pt-[20px]">
+            {voices.map((v, i) => (
+              <div className="h-[30px] row-span-1 col-span-1 align-middle flex items-center justify-center">
+                <Checkbox onClick={() => {
+                  const newVal = enabled ^ (1 << (Number.parseInt(v.value) - 1))
+                  setEnabled(newVal)
+                  onEnabledChanged(newVal)
+                }}
+                checked={(enabled & (1 << (Number.parseInt(v.value) - 1))) > 0} />
+                <div className="pl-[5px]">{v.label}</div>
+              </div>
+            ))}
+          </div>
+        </div>
       </div>
     </div>
    );

components/ui/button.tsx

@@ -21,6 +21,7 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-10 px-4 py-2",
+        xs: "h-7 rounded-md px-2",
         sm: "h-9 rounded-md px-3",
         lg: "h-11 rounded-md px-8",
         icon: "h-10 w-10",

data/tts.ts

@@ -0,0 +1,126 @@
+let voices_data = [
+  {
+    value: "1",
+    label: "Brian",
+    gender: "Male",
+    language: "en"
+  },
+  {
+    value: "2",
+    label: "Amy",
+    gender: "Female",
+    language: "en"
+  },
+  {
+    value: "3",
+    label: "Emma",
+    gender: "Female",
+    language: "en"
+  },
+  {
+    value: "4",
+    label: "Geraint",
+    gender: "Male",
+    language: "en"
+  },
+  {
+    value: "5",
+    label: "Russel",
+    gender: "Male",
+    language: "en"
+  },
+  {
+    value: "6",
+    label: "Nicole",
+    gender: "Female",
+    language: "en"
+  },
+  {
+    value: "7",
+    label: "Joey",
+    gender: "Male",
+    language: "en"
+  },
+  {
+    value: "8",
+    label: "Justin",
+    gender: "Male",
+    language: "en"
+  },
+  {
+    value: "9",
+    label: "Matthew",
+    gender: "Male",
+    language: "en"
+  },
+  {
+    value: "10",
+    label: "Ivy",
+    gender: "Female",
+    language: "en"
+  },
+  {
+    value: "11",
+    label: "Joanna",
+    gender: "Female",
+    language: "en"
+  },
+  {
+    value: "12",
+    label: "Kendra",
+    gender: "Female",
+    language: "en"
+  },
+  {
+    value: "13",
+    label: "Kimberly",
+    gender: "Female",
+    language: "en"
+  },
+  {
+    value: "14",
+    label: "Salli",
+    gender: "Female",
+    language: "en"
+  },
+  {
+    value: "15",
+    label: "Raveena",
+    gender: "Female",
+    language: "en"
+  },
+  {
+    value: "16",
+    label: "Carter",
+    gender: "Male",
+    language: "en"
+  },
+  {
+    value: "17",
+    label: "Paul",
+    gender: "Male",
+    language: "en"
+  },
+  {
+    value: "18",
+    label: "Evelyn",
+    gender: "Female",
+    language: "en"
+  },
+  {
+    value: "19",
+    label: "Liam",
+    gender: "Male",
+    language: "en"
+  },
+  {
+    value: "20",
+    label: "Jasmine",
+    gender: "Female",
+    language: "en"
+  },
+]
+
+const voices = voices_data.sort((a, b) => a.label < b.label ? -1 : a.label > b.label ? 1 : 0)
+
+export default voices

prisma/schema.prisma

@@ -14,6 +14,8 @@ model User {
   email String? @unique
   emailVerified DateTime?
   image String?
+  ttsDefaultVoice Int @default(1)
+  ttsEnabledVoice Int @default(1048575)
 
   apiKeys ApiKey[]
   accounts Account[]
@@ -77,12 +79,13 @@ model TtsUsernameFilter {
 }
 
 model TtsWordFilter {
+  id String @id @default(cuid())
   search String
   replace String
 
   userId String
-  profile User @relation(fields: [userId], references: [id], onDelete: Cascade)
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
 
   @@index([userId])
-  @@id([userId, search])
+  @@unique([userId, search])
 }