fix: updated toast and fixed re-rendering issue.

app/layout.tsx

@@ -7,7 +7,6 @@ import { ThemeProvider } from '@/components/Theme/ThemeProvider';
 import RootComponent from '@/components/root';
 import { Toaster } from '@/components/ui/toaster';
 import { SpeedInsights } from '@vercel/speed-insights/next';
-import { SpotifyTip } from '@/lib/client/functions/initialfunctions';
 import NextAuthProvider from '@/lib/client/providers/NextAuthSessionProvider';
 import { Toaster as Sonner } from '@/components/ui/sonner';
 import { Children } from '@/lib/types/children';
@@ -21,6 +20,7 @@ import { DriverProvider } from '@/lib/client/providers/Driver';
 import DynamicIsland from '@/lib/client/functions/dynamic-island';
 import { TailwindIndicator } from '@/lib/taillwind-indicator';
 import { CSPostHogProvider } from '@/lib/client/providers/Posthog';
+import { IntroDialogProvider } from '@/lib/client/providers/intro-provider';
 
 const santoshiSans = localFont({
   src: './Satoshi-Variable.woff2',
@@ -85,27 +85,28 @@ export default function RootLayout({ children }: Children) {
             santoshiSans.className,
           )}
         >
-          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-            <SpeedInsights />
-            <NextAuthProvider>
-              <ConnectivityStatus>
-                <ChromeCastProvider>
-                  <DynamicIsland />
-                  <DriverProvider>
-                    <main className="flex flex-wrap gap-8 h-screen w-screen font-sans p-10 max-xl:gap-5 max-xl:px-5">
-                      <RootComponent />
-                      {children}
-                      <Analytics />
-                      <TailwindIndicator />
-                    </main>
-                  </DriverProvider>
-                  <Toaster />
-                  <Sonner />
-                  <SpotifyTip />
-                </ChromeCastProvider>
-              </ConnectivityStatus>
-            </NextAuthProvider>
-          </ThemeProvider>
+          <IntroDialogProvider>
+            <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+              <SpeedInsights />
+              <NextAuthProvider>
+                <ConnectivityStatus>
+                  <ChromeCastProvider>
+                    <DynamicIsland />
+                    <DriverProvider>
+                      <main className="flex flex-wrap gap-8 h-screen w-screen font-sans p-10 max-xl:gap-5 max-xl:px-5">
+                        <RootComponent />
+                        {children}
+                        <Analytics />
+                        <TailwindIndicator />
+                      </main>
+                    </DriverProvider>
+                    <Toaster />
+                    <Sonner />
+                  </ChromeCastProvider>
+                </ConnectivityStatus>
+              </NextAuthProvider>
+            </ThemeProvider>
+          </IntroDialogProvider>
         </body>
       </CSPostHogProvider>
     </html>

components/intro/index.tsx

@@ -2,16 +2,21 @@
 import { useState, useEffect } from 'react';
 import IntroDialog from './intro-dialog';
 import { usePathname } from 'next/navigation';
+import { useIntroContext } from '@/lib/client/providers/intro-provider';
 export default function IntroProvider() {
   const path = usePathname();
   const [intro, setIntro] = useState(false);
+  const { setIsIntroOpen } = useIntroContext();
 
   useEffect(() => {
     const intro = localStorage.getItem('intro-visited');
     if ((!intro || intro === 'false') && path === '/') {
       setIntro(true);
     }
-  }, [path]);
+    if (intro === 'true') {
+      setIsIntroOpen(false);
+    }
+  }, [path, setIsIntroOpen]);
 
   if (!intro) return null;
   if (intro) {

components/intro/intro-dialog.tsx

@@ -18,16 +18,21 @@ import { Button } from '../ui/button';
 import clsx from 'clsx';
 import { Features, GettingStarted, SourceCode, Technologies } from './crumbs';
 import { SourceCodeLinks } from '@/default-links';
+import { useIntroContext } from '@/lib/client/providers/intro-provider';
 
 export default function IntroDialog() {
   const [mounted, setMounted] = useState<boolean>(false);
   const [open, setOpen] = useState<boolean>(true);
   const [selectedCrumb, setSelectedCrumb] = useState<number>(0);
-
+  const { setIsIntroOpen } = useIntroContext();
   useEffect(() => {
     setMounted(true);
   }, []);
 
+  useEffect(() => {
+    setIsIntroOpen(open);
+  }, [open, setIsIntroOpen]);
+
   if (!mounted) return null;
 
   const crumbs = [

lib/client/providers/NextAuthSessionProvider.tsx

@@ -5,6 +5,24 @@ import { useEffect, useCallback } from 'react';
 import { useSession, signIn } from 'next-auth/react';
 import { Children } from '@/lib/types/children';
 import { toast } from 'sonner';
+import { useIntroContext } from './intro-provider';
+
+const IntroTips = () => {
+  toast(
+    <div>
+      {' '}
+      <h1>❔ Did you know?</h1>
+      <div className="inline-flex">
+        Press{' '}
+        <pre>
+          <code> CTRL + K </code>
+        </pre>{' '}
+        to open the command bar!
+      </div>{' '}
+    </div>,
+  );
+};
+
 export default function NextAuthProvider({ children }: Children) {
   return (
     <SessionProvider>
@@ -15,13 +33,14 @@ export default function NextAuthProvider({ children }: Children) {
 
 export function ShowAuthStatus({ children }: Children) {
   const { data: session, status } = useSession();
-
+  const { isIntroOpen } = useIntroContext();
   const showStatus = useCallback(() => {
     switch (status) {
       case 'authenticated':
         toast('You are now logged in!', {
           description: `Welcome ${session?.user?.name}`,
         });
+        IntroTips();
         break;
       case 'unauthenticated':
         toast('You are not signed in!', {
@@ -33,6 +52,7 @@ export function ShowAuthStatus({ children }: Children) {
             },
           },
         });
+        IntroTips();
         break;
       case 'loading':
         toast('Logging you in...', {
@@ -45,11 +65,11 @@ export function ShowAuthStatus({ children }: Children) {
   }, [session?.user?.name, status]);
 
   useEffect(() => {
-    showStatus();
-    return () => {
+    console.log('isIntroOpen', isIntroOpen);
+    if (!isIntroOpen) {
       showStatus();
-    };
-  }, [showStatus]);
+    }
+  }, [isIntroOpen, showStatus]);
 
   return <>{children}</>;
 }

lib/client/providers/intro-provider.tsx

@@ -0,0 +1,30 @@
+'use client';
+import { Children } from '@/lib/types/children';
+import { createContext, useContext } from 'react';
+import { useState } from 'react';
+
+const introContext = createContext(
+  {} as {
+    isIntroOpen: boolean;
+    setIsIntroOpen: (open: boolean) => void;
+  },
+);
+
+export function useIntroContext() {
+  return useContext(introContext);
+}
+
+export function IntroDialogProvider({ children }: Children) {
+  const [isIntroOpen, setIsIntroOpen] = useState<boolean>(true);
+
+  return (
+    <introContext.Provider
+      value={{
+        isIntroOpen,
+        setIsIntroOpen,
+      }}
+    >
+      {children}
+    </introContext.Provider>
+  );
+}