From 43ffd61aebd74a9b2cbd41156b36ceb74ecbbdf6 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Mon, 18 Nov 2024 06:02:14 -0800
Subject: [PATCH] refac: model workspace styling

---
 src/lib/components/workspace/Models.svelte | 234 ++++++++++-----------
 1 file changed, 113 insertions(+), 121 deletions(-)

diff --git a/src/lib/components/workspace/Models.svelte b/src/lib/components/workspace/Models.svelte
index 678bdb86f..7c0612b0d 100644
--- a/src/lib/components/workspace/Models.svelte
+++ b/src/lib/components/workspace/Models.svelte
@@ -230,40 +230,14 @@
 		</div>
 	</div>
 
-	<a class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-1" href="/workspace/models/create">
-		<div class=" self-center w-8 flex-shrink-0">
-			<div
-				class="w-full h-8 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('Create a model')}</div>
-			<div class=" text-sm line-clamp-1 text-gray-500">
-				{$i18n.t('Customize models for a specific purpose')}
-			</div>
-		</div>
-	</a>
-
-	<div class=" my-2 mb-5" id="model-list">
+	<div class=" my-2 mb-5 grid gap-2 md:grid-cols-2 lg:grid-cols-3" id="model-list">
 		{#each filteredModels as model}
 			<div
-				class=" flex space-x-4 cursor-pointer w-full px-3 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-lg transition"
+				class=" flex flex-col cursor-pointer w-full px-3 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-lg transition"
 				id="model-item-{model.id}"
 			>
-				<a
-					class=" flex flex-1 space-x-3.5 cursor-pointer w-full"
-					href={`/?models=${encodeURIComponent(model.id)}`}
-				>
-					<div class=" self-center w-8">
+				<div class="flex gap-4 mt-1 mb-0.5">
+					<div class=" w-10">
 						<div
 							class=" rounded-full object-cover {model.is_active
 								? ''
@@ -277,104 +251,122 @@
 						</div>
 					</div>
 
-					<div class=" flex-1 self-center {model.is_active ? '' : 'text-gray-500'}">
-						<Tooltip
-							content={marked.parse(model?.meta?.description ?? model.id)}
-							className=" w-fit"
-							placement="top-start"
-						>
-							<div class="  font-semibold line-clamp-1">{model.name}</div>
-						</Tooltip>
+					<a
+						class=" flex flex-1 space-x-3.5 cursor-pointer w-full"
+						href={`/?models=${encodeURIComponent(model.id)}`}
+					>
+						<div class=" flex-1 self-center {model.is_active ? '' : 'text-gray-500'}">
+							<Tooltip
+								content={marked.parse(model?.meta?.description ?? model.id)}
+								className=" w-fit"
+								placement="top-start"
+							>
+								<div class=" font-medium line-clamp-1">{model.name}</div>
+							</Tooltip>
 
-						<div class="flex gap-1 text-xs overflow-hidden">
-							<Tooltip content={model?.user?.email} className="flex shrink-0" placement="top-start">
-								<div class="shrink-0 text-gray-500">
-									{$i18n.t('By {{name}}', {
-										name: capitalizeFirstLetter(model?.user?.name ?? model?.user?.email)
-									})}
+							<div class="flex gap-1 text-xs overflow-hidden">
+								<div class="line-clamp-1">
+									{#if model?.meta?.description.trim()}
+										{model?.meta?.description}
+									{:else}
+										{model.id}
+									{/if}
 								</div>
-							</Tooltip>
+							</div>
 						</div>
-					</div>
-				</a>
-				<div class="flex flex-row gap-0.5 items-center self-center">
-					{#if shiftKey}
-						<Tooltip content={$i18n.t('Delete')}>
-							<button
-								class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
-								type="button"
-								on:click={() => {
-									deleteModelHandler(model);
-								}}
-							>
-								<GarbageBin />
-							</button>
+					</a>
+				</div>
+
+				<div class="flex justify-between items-center">
+					<div class=" text-xs">
+						<Tooltip content={model?.user?.email} className="flex shrink-0" placement="top-start">
+							<div class="shrink-0 text-gray-500">
+								{$i18n.t('By {{name}}', {
+									name: capitalizeFirstLetter(model?.user?.name ?? model?.user?.email)
+								})}
+							</div>
 						</Tooltip>
-					{:else}
-						{#if $user?.role === 'admin' || model.user_id === $user?.id}
-							<a
-								class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
-								type="button"
-								href={`/workspace/models/edit?id=${encodeURIComponent(model.id)}`}
-							>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke-width="1.5"
-									stroke="currentColor"
-									class="w-4 h-4"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"
-									/>
-								</svg>
-							</a>
-						{/if}
+					</div>
 
-						<ModelMenu
-							user={$user}
-							{model}
-							shareHandler={() => {
-								shareModelHandler(model);
-							}}
-							cloneHandler={() => {
-								cloneModelHandler(model);
-							}}
-							exportHandler={() => {
-								exportModelHandler(model);
-							}}
-							hideHandler={() => {
-								hideModelHandler(model);
-							}}
-							deleteHandler={() => {
-								selectedModel = model;
-								showModelDeleteConfirm = true;
-							}}
-							onClose={() => {}}
-						>
-							<button
-								class="self-center w-fit text-sm p-1.5 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
-								type="button"
-							>
-								<EllipsisHorizontal className="size-5" />
-							</button>
-						</ModelMenu>
-
-						<div class="ml-1">
-							<Tooltip content={model.is_active ? $i18n.t('Enabled') : $i18n.t('Disabled')}>
-								<Switch
-									bind:state={model.is_active}
-									on:change={async (e) => {
-										toggleModelById(localStorage.token, model.id);
-										_models.set(await getModels(localStorage.token));
+					<div class="flex flex-row gap-0.5 items-center">
+						{#if shiftKey}
+							<Tooltip content={$i18n.t('Delete')}>
+								<button
+									class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+									type="button"
+									on:click={() => {
+										deleteModelHandler(model);
 									}}
-								/>
+								>
+									<GarbageBin />
+								</button>
 							</Tooltip>
-						</div>
-					{/if}
+						{:else}
+							{#if $user?.role === 'admin' || model.user_id === $user?.id}
+								<a
+									class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+									type="button"
+									href={`/workspace/models/edit?id=${encodeURIComponent(model.id)}`}
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke-width="1.5"
+										stroke="currentColor"
+										class="w-4 h-4"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"
+										/>
+									</svg>
+								</a>
+							{/if}
+
+							<ModelMenu
+								user={$user}
+								{model}
+								shareHandler={() => {
+									shareModelHandler(model);
+								}}
+								cloneHandler={() => {
+									cloneModelHandler(model);
+								}}
+								exportHandler={() => {
+									exportModelHandler(model);
+								}}
+								hideHandler={() => {
+									hideModelHandler(model);
+								}}
+								deleteHandler={() => {
+									selectedModel = model;
+									showModelDeleteConfirm = true;
+								}}
+								onClose={() => {}}
+							>
+								<button
+									class="self-center w-fit text-sm p-1.5 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+									type="button"
+								>
+									<EllipsisHorizontal className="size-5" />
+								</button>
+							</ModelMenu>
+
+							<div class="ml-1">
+								<Tooltip content={model.is_active ? $i18n.t('Enabled') : $i18n.t('Disabled')}>
+									<Switch
+										bind:state={model.is_active}
+										on:change={async (e) => {
+											toggleModelById(localStorage.token, model.id);
+											_models.set(await getModels(localStorage.token));
+										}}
+									/>
+								</Tooltip>
+							</div>
+						{/if}
+					</div>
 				</div>
 			</div>
 		{/each}