Improve sidebar experience for not logged in state

src/interface/web/app/components/appSidebar/appSidebar.tsx

@@ -20,9 +20,12 @@ import { Gear } from "@phosphor-icons/react/dist/ssr";
 import { Plus } from "@phosphor-icons/react";
 import { useEffect, useState } from "react";
 import AllConversations from "../allConversations/allConversations";
-import NavMenu from "../navMenu/navMenu";
+import FooterMenu from "../navMenu/navMenu";
 import { useSidebar } from "@/components/ui/sidebar";
 import { useIsMobileWidth } from "@/app/common/utils";
+import { UserPlusIcon } from "lucide-react";
+import { useAuthenticatedData } from "@/app/common/auth";
+import LoginPrompt from "../loginPrompt/loginPrompt";
 
 // Menu items.
 const items = [
@@ -63,10 +66,19 @@ interface AppSidebarProps {
 
 export function AppSidebar(props: AppSidebarProps) {
     const isMobileWidth = useIsMobileWidth();
+    const { data, isLoading, error } = useAuthenticatedData();
 
     const { state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar } =
         useSidebar();
 
+    const [showLoginPrompt, setShowLoginPrompt] = useState(false);
+
+    useEffect(() => {
+        if (!isLoading && !data) {
+            setShowLoginPrompt(true);
+        }
+    }, [isLoading, data]);
+
     return (
         <Sidebar collapsible={"icon"} variant="sidebar" className="md:py-2">
             <SidebarHeader>
@@ -89,9 +101,29 @@ export function AppSidebar(props: AppSidebarProps) {
                 </SidebarMenu>
             </SidebarHeader>
             <SidebarContent>
+                {showLoginPrompt && (
+                    <LoginPrompt
+                        onOpenChange={(isOpen) => setShowLoginPrompt(isOpen)}
+                        isMobileWidth={isMobileWidth}
+                    />
+                )}
                 <SidebarGroup>
                     <SidebarGroupContent>
                         <SidebarMenu className="p-0 m-0">
+                            {!isLoading && !data && (
+                                <SidebarMenuItem className="p-0 m-0 list-none">
+                                    <SidebarMenuButton
+                                        asChild
+                                        variant={"default"}
+                                        onClick={() => setShowLoginPrompt(true)}
+                                    >
+                                        <div>
+                                            <UserPlusIcon />
+                                            <span>Sign up to get started</span>
+                                        </div>
+                                    </SidebarMenuButton>
+                                </SidebarMenuItem>
+                            )}
                             {items.map((item) => (
                                 <SidebarMenuItem key={item.title} className="p-0 list-none m-0">
                                     <SidebarMenuButton asChild>
@@ -116,7 +148,7 @@ export function AppSidebar(props: AppSidebarProps) {
                 </SidebarGroup>
             </SidebarContent>
             <SidebarFooter>
-                <NavMenu sideBarIsOpen={open} />
+                <FooterMenu sideBarIsOpen={open} />
             </SidebarFooter>
         </Sidebar>
     );