From 5db7d8acd1956f54693c875ecc2ff75b2f837538 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sun, 25 May 2025 00:58:55 +0400
Subject: [PATCH] refac

---
 src/lib/components/layout/ChatsModal.svelte | 77 ++++++++++++++++-----
 1 file changed, 61 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/layout/ChatsModal.svelte b/src/lib/components/layout/ChatsModal.svelte
index c313cdc37..88baca109 100644
--- a/src/lib/components/layout/ChatsModal.svelte
+++ b/src/lib/components/layout/ChatsModal.svelte
@@ -149,31 +149,76 @@
 									</div>
 								{/if}
 
-								<a
-									class=" w-full flex justify-between items-center rounded-lg text-sm py-2 px-3 hover:bg-gray-50 dark:hover:bg-gray-850 {selectedIdx ===
-									idx
-										? 'bg-gray-50 dark:bg-gray-850'
-										: ''}"
-									href="/c/{chat.id}"
+								<div
+									class=" w-full flex justify-between items-center rounded-lg text-sm py-2 px-3 hover:bg-gray-50 dark:hover:bg-gray-850"
 									draggable="false"
-									data-arrow-selected={selectedIdx === idx ? 'true' : undefined}
-									on:mouseenter={() => {
-										selectedIdx = idx;
-									}}
-									on:click={() => {
-										show = false;
-									}}
 								>
-									<div class=" flex-1">
+									<a class=" flex-1" href="/c/{chat.id}" on:click={() => (show = false)}>
 										<div class="text-ellipsis line-clamp-1 w-full">
 											{chat?.title}
 										</div>
-									</div>
+									</a>
 
 									<div class=" pl-3 shrink-0 text-gray-500 dark:text-gray-400 text-xs">
 										{dayjs(chat?.updated_at * 1000).calendar()}
 									</div>
-								</a>
+
+									<div class="flex justify-end pl-2.5 text-gray-600 dark:text-gray-300">
+										{#if unarchiveHandler}
+											<Tooltip content={$i18n.t('Unarchive Chat')}>
+												<button
+													class="self-center w-fit px-1 text-sm rounded-xl"
+													on:click={async (e) => {
+														e.stopImmediatePropagation();
+														e.stopPropagation();
+														unarchiveHandler(chat.id);
+													}}
+												>
+													<svg
+														xmlns="http://www.w3.org/2000/svg"
+														fill="none"
+														viewBox="0 0 24 24"
+														stroke-width="1.5"
+														stroke="currentColor"
+														class="size-4"
+													>
+														<path
+															stroke-linecap="round"
+															stroke-linejoin="round"
+															d="M9 8.25H7.5a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25H15m0-3-3-3m0 0-3 3m3-3V15"
+														/>
+													</svg>
+												</button>
+											</Tooltip>
+										{/if}
+
+										<Tooltip content={$i18n.t('Delete Chat')}>
+											<button
+												class="self-center w-fit px-1 text-sm rounded-xl"
+												on:click={async (e) => {
+													e.stopImmediatePropagation();
+													e.stopPropagation();
+													deleteHandler(chat.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="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+													/>
+												</svg>
+											</button>
+										</Tooltip>
+									</div>
+								</div>
 							{/each}
 
 							{#if !allChatsLoaded && loadHandler}