Add Sonner component

frontend/@/components/ui/sonner.tsx

@@ -0,0 +1,29 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

frontend/App.tsx

@@ -5,6 +5,7 @@ import {ThemeProvider as NextThemesProvider} from "next-themes";
 import {themeNames} from "Frontend/theming/themes";
 import {AuthProvider} from "Frontend/util/auth";
 import {IconContext} from "@phosphor-icons/react";
+import {Toaster} from "Frontend/@/components/ui/sonner";
 
 export default function App() {
     const navigate = useNavigate();
@@ -15,6 +16,7 @@ export default function App() {
                 <AuthProvider>
                     <IconContext.Provider value={{size: 20}}>
                         <Outlet/>
+                        <Toaster/>
                     </IconContext.Provider>
                 </AuthProvider>
             </NextThemesProvider>

frontend/views/SetupView.tsx

@@ -8,6 +8,7 @@ import {Card} from "@nextui-org/react";
 import {SetupEndpoint} from "Frontend/generated/endpoints";
 import {ThemeSelector} from "Frontend/components/theming/ThemeSelector";
 import {useNavigate} from "react-router-dom";
+import {toast} from "sonner";
 
 function WelcomeStep() {
     return (
@@ -99,6 +100,7 @@ function SetupView() {
                                     password: values.password,
                                     email: values.email
                                 });
+                                toast("Setup finished", {description: "Have fun with Gameyfin!"});
                                 navigate('/login');
                             } catch (e) {
                                 alert("An error occurred while completing the setup. Please try again.")

frontend/views/TestView.tsx

@@ -1,9 +1,21 @@
 import {Link} from "react-router-dom";
+import {Button} from "@nextui-org/react";
+import {toast} from "sonner";
 
 export default function TestView() {
     return (
-        <div className="flex grow justify-center">
-            <Link to="/setup">Setup</Link>
+        <div className="flex grow justify-center mt-12">
+            <div className="flex flex-col items-center gap-6">
+                <Link to="/setup">Setup</Link>
+                <Button onPress={
+                    () => toast("Setup finished", {
+                        description: "Have fun with Gameyfin!",
+                        action: {
+                            label: "OK",
+                            onClick: () => console.log("Ok"),
+                        }
+                    })}>Toast</Button>
+            </div>
         </div>
     );
 }