Modfied auth to use notification provider

app/components/header.tsx

@@ -1,4 +1,4 @@
-import { Separator, Surface, Typography } from "@heroui/react";
+import { ButtonGroup, Surface, Typography } from "@heroui/react";
 import { Tabs } from "@heroui/react";
 import { Button } from "@heroui/react";
 import { useNavigate, useLocation } from "react-router";
@@ -43,7 +43,12 @@ export function Header() {
                 <div className="absolute flex left-1/2 -translate-x-1/2">
                 <img className="h-12" src={porning} alt="Porning logo" />
                 </div>
-            <User />
+                <ButtonGroup >
+                    <Button onClick={() => {window.open("steam://rungame/730//+connect cs.p0rning.com", "_blank")}}><Typography.Paragraph>Connect to server</Typography.Paragraph></Button>
+                    <User>
+                    <ButtonGroup.Separator />
+                    </User>
+                </ButtonGroup>
             </Surface>
         </div>
     );

app/components/user.tsx

@@ -7,9 +7,10 @@ import {
     Separator,
     Spinner,
 } from "@heroui/react";
+import type { PropsWithChildren } from "react";
 import { useAuth } from "~/hooks/auth";
 
-export default function User() {
+export default function User({ children }: PropsWithChildren) {
     const { user, loading, login, logout } = useAuth();
 
     if (loading) {
@@ -21,12 +22,17 @@ export default function User() {
     }
 
     if (user === null) {
-        return <Button onClick={() => login()}>Login</Button>;
+        return (
+            <Button onClick={() => login()}>
+                <Typography.Paragraph>{children}Login</Typography.Paragraph>
+            </Button>
+        );
     }
 
     return (
         <Dropdown>
             <Button className="pr-0">
+                {children}
                 <Typography.Paragraph>{user.name}</Typography.Paragraph>
                 <Avatar>
                     <Avatar.Image alt="Avatar" src={user.avatar}></Avatar.Image>

app/hooks/auth.tsx

@@ -140,6 +140,7 @@ export function AuthProvider({ children }: PropsWithChildren) {
         })
             .then(() => {
                 setUser(null);
+                notify({type: "success", loading: false, title: "Logout successful!", message: ""}, 2000)
             })
             .catch((e) => {
                 notify(

app/hooks/notification.tsx

@@ -23,22 +23,19 @@ export function NotificationProvider({ children }: PropsWithChildren) {
     const [popupShowed, setPopupShowed] = useState(false);
 
     const notify = (newNotification: NotificationType, timeout: number) => {
-        console.log("Changed notification");
         setNotification(newNotification);
         setNotificationTimeout(timeout);
     };
 
     useEffect(() => {
-        if (!popupShowed && notification !== null) {
-            console.log("setting timeout")
+        if (notification === null) {
+            setPopupShowed(false);
+        } else if (!popupShowed && notificationTimeout !== Infinity) {
             const timeout = setTimeout(() => {
-                console.log("timeout done")
                 setPopupShowed(true);
                 setNotification(null);
             }, notificationTimeout);
             return () => clearTimeout(timeout);
-        } else {
-            setPopupShowed(false);
         }
     }, [notification, notificationTimeout]);