From 1c16920dbaa4ba62669c59a0c8451e33dc6b2874 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Fri, 15 Nov 2024 17:36:46 -0800
Subject: [PATCH] refac

---
 src/lib/components/admin/Functions.svelte     | 30 +++-----
 src/lib/components/workspace/Models.svelte    | 30 +++-----
 .../workspace/Models/Knowledge.svelte         |  2 +-
 .../workspace/Models/ModelEditor.svelte       | 10 +--
 src/lib/components/workspace/Prompts.svelte   | 30 +++-----
 .../workspace/Prompts/PromptEditor.svelte     |  4 +-
 src/lib/components/workspace/Tools.svelte     | 30 +++-----
 .../common/AccessPermissionsModal.svelte      | 70 ++++++++++---------
 8 files changed, 80 insertions(+), 126 deletions(-)

diff --git a/src/lib/components/admin/Functions.svelte b/src/lib/components/admin/Functions.svelte
index ff1006e55..0dfcbb73b 100644
--- a/src/lib/components/admin/Functions.svelte
+++ b/src/lib/components/admin/Functions.svelte
@@ -31,6 +31,7 @@
 	import GarbageBin from '../icons/GarbageBin.svelte';
 	import Search from '../icons/Search.svelte';
 	import Plus from '../icons/Plus.svelte';
+	import ChevronRight from '../icons/ChevronRight.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -451,40 +452,27 @@
 
 {#if $config?.features.enable_community_sharing}
 	<div class=" my-16">
-		<div class=" text-lg font-semibold mb-3 line-clamp-1">
+		<div class=" text-lg font-semibold mb-0.5 line-clamp-1">
 			{$i18n.t('Made by OpenWebUI Community')}
 		</div>
 
 		<a
-			class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-2"
+			class=" flex cursor-pointer items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-850 w-full mb-2 px-3.5 py-1.5 rounded-xl transition"
 			href="https://openwebui.com/#open-webui-community"
 			target="_blank"
 		>
-			<div class=" self-center w-10 flex-shrink-0">
-				<div
-					class="w-full h-10 flex justify-center rounded-full bg-transparent dark:bg-gray-700 border border-dashed border-gray-200"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-						fill="currentColor"
-						class="w-6"
-					>
-						<path
-							fill-rule="evenodd"
-							d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z"
-							clip-rule="evenodd"
-						/>
-					</svg>
-				</div>
-			</div>
-
 			<div class=" self-center">
 				<div class=" font-semibold line-clamp-1">{$i18n.t('Discover a function')}</div>
 				<div class=" text-sm line-clamp-1">
 					{$i18n.t('Discover, download, and explore custom functions')}
 				</div>
 			</div>
+
+			<div>
+				<div>
+					<ChevronRight />
+				</div>
+			</div>
 		</a>
 	</div>
 {/if}
diff --git a/src/lib/components/workspace/Models.svelte b/src/lib/components/workspace/Models.svelte
index d7adc5628..13227561d 100644
--- a/src/lib/components/workspace/Models.svelte
+++ b/src/lib/components/workspace/Models.svelte
@@ -29,6 +29,7 @@
 	import Search from '../icons/Search.svelte';
 	import Plus from '../icons/Plus.svelte';
 	import { get } from 'svelte/store';
+	import ChevronRight from '../icons/ChevronRight.svelte';
 
 	let shiftKey = false;
 
@@ -533,40 +534,27 @@
 
 {#if $config?.features.enable_community_sharing}
 	<div class=" my-16">
-		<div class=" text-lg font-semibold mb-3 line-clamp-1">
+		<div class=" text-lg font-semibold mb-0.5 line-clamp-1">
 			{$i18n.t('Made by OpenWebUI Community')}
 		</div>
 
 		<a
-			class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-2"
+			class=" flex cursor-pointer items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-850 w-full mb-2 px-3.5 py-1.5 rounded-xl transition"
 			href="https://openwebui.com/#open-webui-community"
 			target="_blank"
 		>
-			<div class=" self-center w-10 flex-shrink-0">
-				<div
-					class="w-full h-10 flex justify-center rounded-full bg-transparent dark:bg-gray-700 border border-dashed border-gray-200"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-						fill="currentColor"
-						class="w-6"
-					>
-						<path
-							fill-rule="evenodd"
-							d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z"
-							clip-rule="evenodd"
-						/>
-					</svg>
-				</div>
-			</div>
-
 			<div class=" self-center">
 				<div class=" font-semibold line-clamp-1">{$i18n.t('Discover a model')}</div>
 				<div class=" text-sm line-clamp-1">
 					{$i18n.t('Discover, download, and explore model presets')}
 				</div>
 			</div>
+
+			<div>
+				<div>
+					<ChevronRight />
+				</div>
+			</div>
 		</a>
 	</div>
 {/if}
diff --git a/src/lib/components/workspace/Models/Knowledge.svelte b/src/lib/components/workspace/Models/Knowledge.svelte
index d2d57546b..d2adc50e6 100644
--- a/src/lib/components/workspace/Models/Knowledge.svelte
+++ b/src/lib/components/workspace/Models/Knowledge.svelte
@@ -53,7 +53,7 @@
 				}}
 			>
 				<button
-					class=" px-3.5 py-1.5 font-medium hover:bg-black/5 dark:hover:bg-white/5 outline outline-1 outline-gray-300 dark:outline-gray-800 rounded-3xl"
+					class=" px-3.5 py-1.5 font-medium hover:bg-black/5 dark:hover:bg-white/5 outline outline-1 outline-gray-100 dark:outline-gray-850 rounded-3xl"
 					type="button">{$i18n.t('Select Knowledge')}</button
 				>
 			</Selector>
diff --git a/src/lib/components/workspace/Models/ModelEditor.svelte b/src/lib/components/workspace/Models/ModelEditor.svelte
index 405276f10..d5f8b2671 100644
--- a/src/lib/components/workspace/Models/ModelEditor.svelte
+++ b/src/lib/components/workspace/Models/ModelEditor.svelte
@@ -461,7 +461,7 @@
 						</div>
 					</div>
 
-					<hr class=" dark:border-gray-850 my-1.5" />
+					<hr class=" border-gray-50 dark:border-gray-850 my-1.5" />
 
 					<div class="my-2">
 						<div class="flex w-full justify-between">
@@ -515,7 +515,7 @@
 						</div>
 					</div>
 
-					<hr class=" dark:border-gray-850 my-1" />
+					<hr class=" border-gray-50 dark:border-gray-850 my-1" />
 
 					<div class="my-2">
 						<div class="flex w-full justify-between items-center">
@@ -612,7 +612,7 @@
 						{/if}
 					</div>
 
-					<hr class=" dark:border-gray-850 my-1.5" />
+					<hr class=" border-gray-50 dark:border-gray-850 my-1.5" />
 
 					<div class="my-2">
 						<Knowledge bind:selectedKnowledge={knowledge} collections={$knowledgeCollections} />
@@ -679,8 +679,8 @@
 					<div class="my-2 flex justify-end pb-20">
 						<button
 							class=" text-sm px-3 py-2 transition rounded-lg {loading
-								? ' cursor-not-allowed bg-white hover:bg-gray-100 text-black'
-								: ' bg-white hover:bg-gray-100 text-black'} flex w-full justify-center"
+								? ' cursor-not-allowed bg-black hover:bg-gray-900 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black'
+								: 'bg-black hover:bg-gray-900 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black'} flex w-full justify-center"
 							type="submit"
 							disabled={loading}
 						>
diff --git a/src/lib/components/workspace/Prompts.svelte b/src/lib/components/workspace/Prompts.svelte
index bf85c01d3..1fed0b7b8 100644
--- a/src/lib/components/workspace/Prompts.svelte
+++ b/src/lib/components/workspace/Prompts.svelte
@@ -13,6 +13,7 @@
 	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 	import Search from '../icons/Search.svelte';
 	import Plus from '../icons/Plus.svelte';
+	import ChevronRight from '../icons/ChevronRight.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -280,40 +281,27 @@
 
 {#if $config?.features.enable_community_sharing}
 	<div class=" my-16">
-		<div class=" text-lg font-semibold mb-3 line-clamp-1">
+		<div class=" text-lg font-semibold mb-0.5 line-clamp-1">
 			{$i18n.t('Made by OpenWebUI Community')}
 		</div>
 
 		<a
-			class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-2"
+			class=" flex cursor-pointer items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-850 w-full mb-2 px-3.5 py-1.5 rounded-xl transition"
 			href="https://openwebui.com/#open-webui-community"
 			target="_blank"
 		>
-			<div class=" self-center w-10 flex-shrink-0">
-				<div
-					class="w-full h-10 flex justify-center rounded-full bg-transparent dark:bg-gray-700 border border-dashed border-gray-200"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-						fill="currentColor"
-						class="w-6"
-					>
-						<path
-							fill-rule="evenodd"
-							d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z"
-							clip-rule="evenodd"
-						/>
-					</svg>
-				</div>
-			</div>
-
 			<div class=" self-center">
 				<div class=" font-semibold line-clamp-1">{$i18n.t('Discover a prompt')}</div>
 				<div class=" text-sm line-clamp-1">
 					{$i18n.t('Discover, download, and explore custom prompts')}
 				</div>
 			</div>
+
+			<div>
+				<div>
+					<ChevronRight />
+				</div>
+			</div>
 		</a>
 	</div>
 {/if}
diff --git a/src/lib/components/workspace/Prompts/PromptEditor.svelte b/src/lib/components/workspace/Prompts/PromptEditor.svelte
index 6056ba2dd..51a06dd5f 100644
--- a/src/lib/components/workspace/Prompts/PromptEditor.svelte
+++ b/src/lib/components/workspace/Prompts/PromptEditor.svelte
@@ -138,8 +138,8 @@
 		<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
-					? ' cursor-not-allowed bg-white hover:bg-gray-100 text-black'
-					: ' bg-white hover:bg-gray-100 text-black'} flex justify-center"
+					? ' cursor-not-allowed bg-black hover:bg-gray-900 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black'
+					: 'bg-black hover:bg-gray-900 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black'} flex w-full justify-center"
 				type="submit"
 				disabled={loading}
 			>
diff --git a/src/lib/components/workspace/Tools.svelte b/src/lib/components/workspace/Tools.svelte
index df481f0c6..193addaa1 100644
--- a/src/lib/components/workspace/Tools.svelte
+++ b/src/lib/components/workspace/Tools.svelte
@@ -27,6 +27,7 @@
 	import GarbageBin from '../icons/GarbageBin.svelte';
 	import Search from '../icons/Search.svelte';
 	import Plus from '../icons/Plus.svelte';
+	import ChevronRight from '../icons/ChevronRight.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -400,40 +401,27 @@
 
 {#if $config?.features.enable_community_sharing}
 	<div class=" my-16">
-		<div class=" text-lg font-semibold mb-3 line-clamp-1">
+		<div class=" text-lg font-semibold mb-0.5 line-clamp-1">
 			{$i18n.t('Made by OpenWebUI Community')}
 		</div>
 
 		<a
-			class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-2"
+			class=" flex cursor-pointer items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-850 w-full mb-2 px-3.5 py-1.5 rounded-xl transition"
 			href="https://openwebui.com/#open-webui-community"
 			target="_blank"
 		>
-			<div class=" self-center w-10 flex-shrink-0">
-				<div
-					class="w-full h-10 flex justify-center rounded-full bg-transparent dark:bg-gray-700 border border-dashed border-gray-200"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-						fill="currentColor"
-						class="w-6"
-					>
-						<path
-							fill-rule="evenodd"
-							d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z"
-							clip-rule="evenodd"
-						/>
-					</svg>
-				</div>
-			</div>
-
 			<div class=" self-center">
 				<div class=" font-semibold line-clamp-1">{$i18n.t('Discover a tool')}</div>
 				<div class=" text-sm line-clamp-1">
 					{$i18n.t('Discover, download, and explore custom tools')}
 				</div>
 			</div>
+
+			<div>
+				<div>
+					<ChevronRight />
+				</div>
+			</div>
 		</a>
 	</div>
 {/if}
diff --git a/src/lib/components/workspace/common/AccessPermissionsModal.svelte b/src/lib/components/workspace/common/AccessPermissionsModal.svelte
index 5491f0d7e..65b45578a 100644
--- a/src/lib/components/workspace/common/AccessPermissionsModal.svelte
+++ b/src/lib/components/workspace/common/AccessPermissionsModal.svelte
@@ -7,43 +7,13 @@
 	let query = '';
 </script>
 
-<div>
-	<div>
-		<div class=" text-sm font-semibold mb-0.5">{$i18n.t('People with access')}</div>
-
-		<div>
-			<div class="flex w-full py-1">
-				<div class="flex flex-1">
-					<div class=" self-center mr-3">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 20 20"
-							fill="currentColor"
-							class="w-4 h-4"
-						>
-							<path
-								fill-rule="evenodd"
-								d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
-								clip-rule="evenodd"
-							/>
-						</svg>
-					</div>
-					<input
-						class=" w-full text-sm pr-4 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none bg-transparent"
-						bind:value={query}
-						placeholder={$i18n.t('Add user or groups')}
-					/>
-				</div>
-			</div>
-		</div>
-	</div>
-
+<div class=" rounded-lg flex flex-col gap-3">
 	<div class="">
-		<div class=" text-sm font-semibold mb-2">{$i18n.t('Visibility')}</div>
+		<div class=" text-sm font-semibold mb-1">{$i18n.t('Visibility')}</div>
 
 		<div class="flex gap-2.5 items-center">
 			<div>
-				<div class=" p-2 bg-gray-700 rounded-full">
+				<div class=" p-2 bg-gray-50 dark:bg-gray-850 rounded-full">
 					{#if type === 'private'}
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
@@ -90,7 +60,7 @@
 
 				<div class=" text-xs text-gray-400 font-medium">
 					{#if type === 'private'}
-						{$i18n.t('Only users with permission can access')}
+						{$i18n.t('Only select users and groups with permission can access')}
 					{:else if type === 'public'}
 						{$i18n.t('Accessible to all users')}
 					{/if}
@@ -98,4 +68,36 @@
 			</div>
 		</div>
 	</div>
+
+	{#if type === 'private'}
+		<div>
+			<div class=" text-sm font-semibold mb-0.5">{$i18n.t('People with access')}</div>
+
+			<div>
+				<div class="flex w-full py-1">
+					<div class="flex flex-1">
+						<div class=" self-center mr-3">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 20 20"
+								fill="currentColor"
+								class="w-4 h-4"
+							>
+								<path
+									fill-rule="evenodd"
+									d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
+									clip-rule="evenodd"
+								/>
+							</svg>
+						</div>
+						<input
+							class=" w-full text-sm pr-4 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none bg-transparent"
+							bind:value={query}
+							placeholder={$i18n.t('Add user or groups')}
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+	{/if}
 </div>