Add mobile friendliness and replace the login page redirects

src/interface/web/app/agents/page.tsx

@@ -143,6 +143,7 @@ function CreateAgentCard(props: CreateAgentCardProps) {
                     <LoginPrompt
                         loginRedirectMessage="Sign in to start chatting with a specialized agent"
                         onOpenChange={setShowLoginPrompt}
+                        isMobileWidth={props.isMobileWidth}
                     />
                 )}
                 <AgentModificationForm
@@ -317,6 +318,7 @@ export default function Agents() {
                         <LoginPrompt
                             loginRedirectMessage="Sign in to start chatting with a specialized agent"
                             onOpenChange={setShowLoginPrompt}
+                            isMobileWidth={isMobileWidth}
                         />
                     )}
                     <Alert className="bg-secondary border-none my-4">

src/interface/web/app/automations/page.tsx

@@ -1064,6 +1064,7 @@ export default function Automations() {
                         <LoginPrompt
                             loginRedirectMessage={"Create an account to make your own automation"}
                             onOpenChange={setShowLoginPrompt}
+                            isMobileWidth={isMobileWidth}
                         />
                     )}
                     <Alert className="bg-secondary border-none my-4">

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

@@ -328,6 +328,7 @@ export function AgentCard(props: AgentCardProps) {
                 <LoginPrompt
                     loginRedirectMessage={`Sign in to start chatting with ${props.data.name}`}
                     onOpenChange={setShowLoginPrompt}
+                    isMobileWidth={props.isMobileWidth}
                 />
             )}
             <CardHeader>

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

@@ -408,6 +408,7 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
             {showLoginPrompt && loginRedirectMessage && (
                 <LoginPrompt
                     onOpenChange={setShowLoginPrompt}
+                    isMobileWidth={props.isMobileWidth}
                     loginRedirectMessage={loginRedirectMessage}
                 />
             )}

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

@@ -23,6 +23,7 @@ import Link from "next/link";
 import { useEffect, useState } from "react";
 import useSWR from "swr";
 import { GoogleSignIn } from "./GoogleSignIn";
+import { Drawer, DrawerContent } from "@/components/ui/drawer";
 
 export interface LoginPromptProps {
     loginRedirectMessage: string;
@@ -143,19 +144,50 @@ export default function LoginPrompt(props: LoginPromptProps) {
             });
     }
 
+    if (props.isMobileWidth) {
+        return (
+            <Drawer open={true} onOpenChange={props.onOpenChange}>
+                <DrawerContent
+                    className={`flex flex-col gap-4 max-w-xl ${!useEmailSignIn ? "p-0 pb-4 m-0" : ""}`}
+                >
+                    <div>
+                        {useEmailSignIn && (
+                            <EmailSignInContext
+                                email={email}
+                                setEmail={setEmail}
+                                checkEmail={checkEmail}
+                                setCheckEmail={setCheckEmail}
+                                setUseEmailSignIn={setUseEmailSignIn}
+                                recheckEmail={recheckEmail}
+                                setRecheckEmail={setRecheckEmail}
+                                handleMagicLinkSignIn={handleMagicLinkSignIn}
+                            />
+                        )}
+                        {!useEmailSignIn && (
+                            <MainSignInContext
+                                tips={tips}
+                                currentTip={currentTip}
+                                nextSlide={nextSlide}
+                                prevSlide={prevSlide}
+                                handleGoogleScriptLoad={handleGoogleScriptLoad}
+                                handleGoogleSignIn={handleGoogleSignIn}
+                                isLoading={isLoading}
+                                data={data}
+                                setUseEmailSignIn={setUseEmailSignIn}
+                            />
+                        )}
+                    </div>
+                </DrawerContent>
+            </Drawer>
+        );
+    }
+
     return (
         <Dialog open={true} onOpenChange={props.onOpenChange}>
             <DialogContent
                 className={`flex flex-col gap-4 max-w-xl ${!useEmailSignIn ? "p-0 pb-4 m-0" : ""}`}
             >
                 <div>
-                    {/* <DialogHeader>
-                        <DialogTitle>Sign in to Khoj to continue</DialogTitle>
-                    </DialogHeader>
-                    <DialogDescription className="py-4">
-                        {props.loginRedirectMessage}.
-                    </DialogDescription> */}
-
                     {useEmailSignIn && (
                         <EmailSignInContext
                             email={email}

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

@@ -25,6 +25,8 @@ import {
 import { Moon, Sun, UserCircle, Question, GearFine, ArrowRight, Code } from "@phosphor-icons/react";
 import { KhojAgentLogo, KhojAutomationLogo, KhojSearchLogo } from "../logo/khojLogo";
 import { useIsMobileWidth } from "@/app/common/utils";
+import LoginPrompt from "../loginPrompt/loginPrompt";
+import { Button } from "@/components/ui/button";
 
 function SubscriptionBadge({ is_active }: { is_active: boolean }) {
     return (
@@ -51,6 +53,7 @@ export default function NavMenu() {
     const [darkMode, setDarkMode] = useState(false);
     const [initialLoadDone, setInitialLoadDone] = useState(false);
     const isMobileWidth = useIsMobileWidth();
+    const [showLoginPrompt, setShowLoginPrompt] = useState(false);
 
     useEffect(() => {
         if (localStorage.getItem("theme") === "dark") {
@@ -87,6 +90,13 @@ export default function NavMenu() {
 
     return (
         <div className={styles.titleBar}>
+            {showLoginPrompt && (
+                <LoginPrompt
+                    onOpenChange={setShowLoginPrompt}
+                    isMobileWidth={isMobileWidth}
+                    loginRedirectMessage={"Login to your second brain"}
+                />
+            )}
             {isMobileWidth ? (
                 <DropdownMenu>
                     <DropdownMenuTrigger>
@@ -197,12 +207,16 @@ export default function NavMenu() {
                                 </DropdownMenuItem>
                             ) : (
                                 <DropdownMenuItem>
-                                    <Link href="/login" className="no-underline w-full">
+                                    <Button
-                                        <div className="flex flex-rows">
+                                        variant={"ghost"}
+                                        onClick={() => setShowLoginPrompt(true)}
+                                        className="no-underline w-full text-left p-0 content-start justify-start items-start h-fit"
+                                    >
+                                        <div className="flex flex-rows text-left content-start justify-start items-start p-0">
                                             <ArrowRight className="w-6 h-6" />
                                             <p className="ml-3 font-semibold">Login</p>
                                         </div>
-                                    </Link>
+                                    </Button>
                                 </DropdownMenuItem>
                             )}
                         </>
@@ -323,12 +337,16 @@ export default function NavMenu() {
                                     </MenubarItem>
                                 ) : (
                                     <MenubarItem>
-                                        <Link href="/login" className="no-underline w-full">
+                                        <Button
-                                            <div className="flex flex-rows">
+                                            variant={"ghost"}
+                                            onClick={() => setShowLoginPrompt(true)}
+                                            className="no-underline w-full text-left p-0 content-start justify-start items-start h-fit"
+                                        >
+                                            <div className="flex flex-rows text-left content-start justify-start items-start p-0">
                                                 <ArrowRight className="w-6 h-6" />
                                                 <p className="ml-3 font-semibold">Login</p>
                                             </div>
-                                        </Link>
+                                        </Button>
                                     </MenubarItem>
                                 )}
                             </>

src/interface/web/app/page.tsx

@@ -217,6 +217,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
             {showLoginPrompt && (
                 <LoginPrompt
                     onOpenChange={setShowLoginPrompt}
+                    isMobileWidth={props.isMobileWidth}
                     loginRedirectMessage={"Login to your second brain"}
                 />
             )}