From c9d8645abafcca52f95cad9ca7ff7a9d790ef719 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Thu, 14 Dec 2023 01:05:38 -0800
Subject: [PATCH] feat: share button added

---
 src/lib/components/layout/Navbar.svelte | 99 +++++++++++++++----------
 src/routes/(app)/+page.svelte           |  2 +-
 src/routes/(app)/c/[id]/+page.svelte    |  2 +-
 3 files changed, 63 insertions(+), 40 deletions(-)

diff --git a/src/lib/components/layout/Navbar.svelte b/src/lib/components/layout/Navbar.svelte
index 9bf15a07d..e6154a84f 100644
--- a/src/lib/components/layout/Navbar.svelte
+++ b/src/lib/components/layout/Navbar.svelte
@@ -5,48 +5,71 @@
 	import { chatId } from '$lib/stores';
 
 	export let title: string = 'Ollama Web UI';
+	export let shareEnabled: boolean = false;
 </script>
 
-<div
-	class=" fixed top-0 flex flex-row justify-center bg-white/95 dark:bg-gray-800/90 dark:text-gray-200 backdrop-blur-xl w-full z-30"
+<nav
+	id="nav"
+	class=" fixed py-2.5 top-0 flex flex-row justify-center bg-white/95 dark:bg-gray-800/90 dark:text-gray-200 backdrop-blur-xl w-screen z-30"
 >
-	<div class="basis-full">
-		<nav class="py-3" id="nav">
-			<div class=" flex max-w-3xl mx-auto px-3">
-				<div class="flex w-full max-w-full overflow-hidden text-ellipsis whitespace-nowrap">
-					<div class="pr-2">
-						<button
-							class=" cursor-pointer p-1 flex dark:hover:bg-gray-700 rounded-lg transition"
-							on:click={async () => {
-								console.log('newChat');
-								goto('/');
-								await chatId.set(uuidv4());
-							}}
+	<div class=" flex max-w-3xl w-full mx-auto px-3">
+		<div class="flex w-full max-w-full">
+			<div class="pr-2 self-center">
+				<button
+					class=" cursor-pointer p-1 flex dark:hover:bg-gray-700 rounded-lg transition"
+					on:click={async () => {
+						console.log('newChat');
+						goto('/');
+						await chatId.set(uuidv4());
+					}}
+				>
+					<div class=" m-auto self-center">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+							class="w-5 h-5"
 						>
-							<div class=" m-auto self-center">
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									viewBox="0 0 20 20"
-									fill="currentColor"
-									class="w-5 h-5"
-								>
-									<path
-										d="M5.433 13.917l1.262-3.155A4 4 0 017.58 9.42l6.92-6.918a2.121 2.121 0 013 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 01-.65-.65z"
-									/>
-									<path
-										d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0010 3H4.75A2.75 2.75 0 002 5.75v9.5A2.75 2.75 0 004.75 18h9.5A2.75 2.75 0 0017 15.25V10a.75.75 0 00-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5z"
-									/>
-								</svg>
-							</div>
-						</button>
+							<path
+								d="M5.433 13.917l1.262-3.155A4 4 0 017.58 9.42l6.92-6.918a2.121 2.121 0 013 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 01-.65-.65z"
+							/>
+							<path
+								d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0010 3H4.75A2.75 2.75 0 002 5.75v9.5A2.75 2.75 0 004.75 18h9.5A2.75 2.75 0 0017 15.25V10a.75.75 0 00-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5z"
+							/>
+						</svg>
 					</div>
-					<div
-						class=" flex-1 self-center font-medium overflow-hidden text-ellipsis whitespace-nowrap w-[80vw] pr-4"
-					>
-						{title != '' ? title : 'Ollama Web UI'}
-					</div>
-				</div>
+				</button>
 			</div>
-		</nav>
+			<div class=" flex-1 self-center font-medium text-ellipsis whitespace-nowrap overflow-hidden">
+				{title != '' ? title : 'Ollama Web UI'}
+			</div>
+
+			{#if shareEnabled}
+				<div class="pl-2">
+					<button
+						class=" cursor-pointer p-2 flex dark:hover:bg-gray-700 rounded-lg transition border dark:border-gray-600"
+						on:click={async () => {
+							console.log('share');
+						}}
+					>
+						<div class=" m-auto self-center">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 20 20"
+								fill="currentColor"
+								class="w-4 h-4"
+							>
+								<path
+									d="M9.25 13.25a.75.75 0 001.5 0V4.636l2.955 3.129a.75.75 0 001.09-1.03l-4.25-4.5a.75.75 0 00-1.09 0l-4.25 4.5a.75.75 0 101.09 1.03L9.25 4.636v8.614z"
+								/>
+								<path
+									d="M3.5 12.75a.75.75 0 00-1.5 0v2.5A2.75 2.75 0 004.75 18h10.5A2.75 2.75 0 0018 15.25v-2.5a.75.75 0 00-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5z"
+								/>
+							</svg>
+						</div>
+					</button>
+				</div>
+			{/if}
+		</div>
 	</div>
-</div>
+</nav>
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index 7c0c87b4d..728765c2a 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -566,7 +566,7 @@
 	}}
 />
 
-<Navbar {title} />
+<Navbar {title} shareEnabled={messages.length > 0} />
 <div class="min-h-screen w-full flex justify-center">
 	<div class=" py-2.5 flex flex-col justify-between w-full">
 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 mt-10">
diff --git a/src/routes/(app)/c/[id]/+page.svelte b/src/routes/(app)/c/[id]/+page.svelte
index f108ba222..9fef89bfd 100644
--- a/src/routes/(app)/c/[id]/+page.svelte
+++ b/src/routes/(app)/c/[id]/+page.svelte
@@ -579,7 +579,7 @@
 />
 
 {#if loaded}
-	<Navbar {title} />
+	<Navbar {title} shareEnabled={messages.length > 0} />
 	<div class="min-h-screen w-full flex justify-center">
 		<div class=" py-2.5 flex flex-col justify-between w-full">
 			<div class="max-w-2xl mx-auto w-full px-3 md:px-0 mt-10">