ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-11 20:05:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

refac: folder click behaviour

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2025-09-15 17:21:10 -05:00
parent 49c9b3199f
commit 19e3214997
2 changed files with 35 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/lib/components/layout/Sidebar/ChatItem.svelte
View file

@ -401,11 +401,8 @@
on:click={() => {
dispatch('select');
if (
$selectedFolder &&
!($selectedFolder?.items?.chats.map((chat) => chat.id) ?? []).includes(id)
) {
selectedFolder.set(null); // Reset selected folder if the chat is not in it
if ($selectedFolder) {
selectedFolder.set(null);
}
if ($mobile) {

52
src/lib/components/layout/Sidebar/RecursiveFolder.svelte
View file

@ -60,6 +60,8 @@
let draggedOver = false;
let dragged = false;
let clickTimer = null;
let name = '';
const onDragOver = (e) => {
@ -342,14 +344,15 @@
console.log('Edit');
await tick();
name = folders[folderId].name;
edit = true;
await tick();
await tick();
const input = document.getElementById(`folder-${folderId}-input`);
if (input) {
input.focus();
input.select();
}
};
@ -427,27 +430,44 @@
<div class="w-full group">
<button
id="folder-{folderId}-button"
class="relative w-full py-1.5 px-2 rounded-lg flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-500 font-medium hover:bg-gray-100 dark:hover:bg-gray-900 transition {$selectedFolder?.id ===
class="relative w-full py-1 px-1.5 rounded-lg flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-500 font-medium hover:bg-gray-100 dark:hover:bg-gray-900 transition {$selectedFolder?.id ===
folderId
? 'bg-gray-100 dark:bg-gray-900'
: ''}"
on:dblclick={() => {
on:dblclick={(e) => {
if (clickTimer) {
clearTimeout(clickTimer); // cancel the single-click action
clickTimer = null;
}
renameHandler();
}}
on:click={async (e) => {
await goto('/');
selectedFolder.set(folders[folderId]);
if ($mobile) {
showSidebar.set(!$showSidebar);
(e) => e.stopPropagation();
if (clickTimer) {
clearTimeout(clickTimer);
clickTimer = null;
}
clickTimer = setTimeout(async () => {
await goto('/');
selectedFolder.set(folders[folderId]);
if ($mobile) {
showSidebar.set(!$showSidebar);
}
clickTimer = null;
}, 100); // 100ms delay (typical double-click threshold)
}}
on:pointerup={(e) => {
e.stopPropagation();
}}
>
<button
class="text-gray-300 dark:text-gray-600 transition-all"
class="text-gray-300 dark:text-gray-600 transition-all p-[3px] dark:hover:bg-gray-850 rounded-lg"
on:click={(e) => {
e.stopPropagation();
open = !open;
}}
>
{#if folders[folderId]?.meta?.icon}
@ -479,10 +499,8 @@
id="folder-{folderId}-input"
type="text"
bind:value={name}
on:focus={(e) => {
e.target.select();
}}
on:blur={() => {
console.log('Blur');
updateHandler({ name });
edit = false;
}}
@ -509,10 +527,6 @@
<button
class="absolute z-10 right-2 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
on:pointerup={(e) => {
e.stopPropagation();
}}
on:click={(e) => e.stopPropagation()}
>
<FolderMenu
onEdit={() => {
@ -525,7 +539,7 @@
exportHandler();
}}
>
<button class="p-0.5 dark:hover:bg-gray-850 rounded-lg touch-auto" on:click={(e) => {}}>
<button class="p-1 dark:hover:bg-gray-850 rounded-lg touch-auto" on:click={(e) => {}}>
<EllipsisHorizontal className="size-4" strokeWidth="2.5" />
</button>
</FolderMenu>