From 19a23a5b7da52f6627b468d165a32bf44f853f30 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sat, 16 Nov 2024 20:53:14 -0800
Subject: [PATCH] refac: prompt editor styling

---
 .../workspace/Prompts/PromptEditor.svelte     | 30 ++++++++++++++-----
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/workspace/Prompts/PromptEditor.svelte b/src/lib/components/workspace/Prompts/PromptEditor.svelte
index 042a25939..61ec69e4e 100644
--- a/src/lib/components/workspace/Prompts/PromptEditor.svelte
+++ b/src/lib/components/workspace/Prompts/PromptEditor.svelte
@@ -5,6 +5,8 @@
 	import { toast } from 'svelte-sonner';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import AccessControl from '../common/AccessControl.svelte';
+	import LockClosed from '$lib/components/icons/LockClosed.svelte';
+	import AccessControlModal from '../common/AccessControlModal.svelte';
 
 	export let onSubmit: Function;
 	export let edit = false;
@@ -20,6 +22,8 @@
 
 	let accessControl = null;
 
+	let showAccessControlModal = false;
+
 	$: if (!edit) {
 		command = title !== '' ? `${title.replace(/\s+/g, '-').toLowerCase()}` : '';
 	}
@@ -64,6 +68,8 @@
 	});
 </script>
 
+<AccessControlModal bind:show={showAccessControlModal} bind:accessControl />
+
 <div class="w-full max-h-full flex justify-center">
 	<form
 		class="flex flex-col w-full mb-10"
@@ -82,13 +88,29 @@
 				placement="bottom-start"
 			>
 				<div class="flex flex-col w-full">
-					<div>
+					<div class="flex items-center">
 						<input
 							class="text-2xl font-semibold w-full bg-transparent outline-none"
 							placeholder={$i18n.t('Title')}
 							bind:value={title}
 							required
 						/>
+
+						<div>
+							<button
+								class="bg-gray-50 hover:bg-gray-100 text-black transition px-2 py-1 rounded-full flex gap-1 items-center"
+								type="button"
+								on:click={() => {
+									showAccessControlModal = true;
+								}}
+							>
+								<LockClosed strokeWidth="2.5" />
+
+								<div class="text-sm font-medium flex-shrink-0">
+									{$i18n.t('Share')}
+								</div>
+							</button>
+						</div>
 					</div>
 
 					<div class="flex gap-0.5 items-center text-xs text-gray-500">
@@ -141,12 +163,6 @@
 			</div>
 		</div>
 
-		<div class="mt-2">
-			<div class="px-3 py-2 bg-gray-50 dark:bg-gray-950 rounded-lg">
-				<AccessControl bind:accessControl />
-			</div>
-		</div>
-
 		<div class="my-4 flex justify-end pb-20">
 			<button
 				class=" text-sm w-full lg:w-fit px-4 py-2 transition rounded-lg {loading