add a login button when users are logged out (#381)

src/lib/components/NavMenu.svelte

@@ -18,7 +18,11 @@
 		id: string;
 		title: string;
 	}> = [];
+
+	export let canLogin: boolean;
 	export let user: LayoutData["user"];
+
+	export let loginModalVisible;
 </script>
 
 <div class="sticky top-0 flex flex-none items-center justify-between px-3 py-3.5 max-sm:pt-0">
@@ -61,6 +65,15 @@
 			</button>
 		</form>
 	{/if}
+	{#if canLogin}
+		<button
+			on:click={() => (loginModalVisible = true)}
+			type="button"
+			class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+		>
+			Login
+		</button>
+	{/if}
 	<button
 		on:click={switchTheme}
 		type="button"

src/routes/+layout.svelte

@@ -99,6 +99,8 @@
 		(data.requiresLogin
 			? !data.user
 			: !data.settings.ethicsModalAcceptedAt && !!PUBLIC_APP_DISCLAIMER);
+
+	let loginModalVisible = false;
 </script>
 
 <svelte:head>
@@ -156,6 +158,8 @@
 		<NavMenu
 			conversations={data.conversations}
 			user={data.user}
+			canLogin={data.user === undefined && data.requiresLogin}
+			bind:loginModalVisible
 			on:shareConversation={(ev) => shareConversation(ev.detail.id, ev.detail.title)}
 			on:deleteConversation={(ev) => deleteConversation(ev.detail)}
 			on:clickSettings={() => (isSettingsOpen = true)}
@@ -166,6 +170,8 @@
 		<NavMenu
 			conversations={data.conversations}
 			user={data.user}
+			canLogin={data.user === undefined && data.requiresLogin}
+			bind:loginModalVisible
 			on:shareConversation={(ev) => shareConversation(ev.detail.id, ev.detail.title)}
 			on:deleteConversation={(ev) => deleteConversation(ev.detail)}
 			on:clickSettings={() => (isSettingsOpen = true)}
@@ -182,7 +188,7 @@
 			models={data.models}
 		/>
 	{/if}
-	{#if requiresLogin && data.messagesBeforeLogin === 0}
+	{#if (requiresLogin && data.messagesBeforeLogin === 0) || loginModalVisible}
 		<LoginModal settings={data.settings} />
 	{/if}
 	<slot />