refac: folders
This commit is contained in:
Timothy Jaeryang Baek
@@ -871,14 +871,42 @@
|
||||
</Folder>
|
||||
{/if}
|
||||
|
||||
{#if folders}
|
||||
<Folder
|
||||
className="px-2 mt-0.5"
|
||||
name={$i18n.t('Folders')}
|
||||
chevron={false}
|
||||
dragAndDrop={false}
|
||||
onAdd={() => {
|
||||
showCreateFolderModal = true;
|
||||
}}
|
||||
onAddLabel={$i18n.t('New Folder')}
|
||||
>
|
||||
<Folders
|
||||
{folders}
|
||||
{shiftKey}
|
||||
onDelete={(folderId) => {
|
||||
selectedFolder.set(null);
|
||||
initChatList();
|
||||
}}
|
||||
on:update={() => {
|
||||
initChatList();
|
||||
}}
|
||||
on:import={(e) => {
|
||||
const { folderId, items } = e.detail;
|
||||
importChatHandler(items, false, folderId);
|
||||
}}
|
||||
on:change={async () => {
|
||||
initChatList();
|
||||
}}
|
||||
/>
|
||||
</Folder>
|
||||
{/if}
|
||||
|
||||
<Folder
|
||||
className="px-2 mt-0.5"
|
||||
name={$i18n.t('Chats')}
|
||||
chevron={false}
|
||||
onAdd={() => {
|
||||
showCreateFolderModal = true;
|
||||
}}
|
||||
onAddLabel={$i18n.t('New Folder')}
|
||||
on:change={async (e) => {
|
||||
selectedFolder.set(null);
|
||||
await goto('/');
|
||||
@@ -940,115 +968,89 @@
|
||||
}
|
||||
}}
|
||||
>
|
||||
{#if folders || $pinnedChats.length > 0}
|
||||
{#if $pinnedChats.length > 0}
|
||||
<div class="mb-1">
|
||||
{#if folders}
|
||||
<Folders
|
||||
{folders}
|
||||
{shiftKey}
|
||||
onDelete={(folderId) => {
|
||||
selectedFolder.set(null);
|
||||
initChatList();
|
||||
}}
|
||||
on:update={() => {
|
||||
initChatList();
|
||||
<div class="flex flex-col space-y-1 rounded-xl">
|
||||
<Folder
|
||||
buttonClassName=" text-gray-500"
|
||||
bind:open={showPinnedChat}
|
||||
on:change={(e) => {
|
||||
localStorage.setItem('showPinnedChat', e.detail);
|
||||
console.log(e.detail);
|
||||
}}
|
||||
on:import={(e) => {
|
||||
const { folderId, items } = e.detail;
|
||||
importChatHandler(items, false, folderId);
|
||||
importChatHandler(e.detail, true);
|
||||
}}
|
||||
on:change={async () => {
|
||||
initChatList();
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
on:drop={async (e) => {
|
||||
const { type, id, item } = e.detail;
|
||||
|
||||
{#if $pinnedChats.length > 0}
|
||||
<div class="flex flex-col space-y-1 rounded-xl">
|
||||
<Folder
|
||||
className=""
|
||||
bind:open={showPinnedChat}
|
||||
on:change={(e) => {
|
||||
localStorage.setItem('showPinnedChat', e.detail);
|
||||
console.log(e.detail);
|
||||
}}
|
||||
on:import={(e) => {
|
||||
importChatHandler(e.detail, true);
|
||||
}}
|
||||
on:drop={async (e) => {
|
||||
const { type, id, item } = e.detail;
|
||||
|
||||
if (type === 'chat') {
|
||||
let chat = await getChatById(localStorage.token, id).catch((error) => {
|
||||
return null;
|
||||
});
|
||||
if (!chat && item) {
|
||||
chat = await importChat(
|
||||
localStorage.token,
|
||||
item.chat,
|
||||
item?.meta ?? {},
|
||||
false,
|
||||
null,
|
||||
item?.created_at ?? null,
|
||||
item?.updated_at ?? null
|
||||
);
|
||||
}
|
||||
|
||||
if (chat) {
|
||||
console.log(chat);
|
||||
if (chat.folder_id) {
|
||||
const res = await updateChatFolderIdById(
|
||||
localStorage.token,
|
||||
chat.id,
|
||||
null
|
||||
).catch((error) => {
|
||||
toast.error(`${error}`);
|
||||
return null;
|
||||
});
|
||||
}
|
||||
|
||||
if (!chat.pinned) {
|
||||
const res = await toggleChatPinnedStatusById(
|
||||
localStorage.token,
|
||||
chat.id
|
||||
);
|
||||
}
|
||||
|
||||
initChatList();
|
||||
}
|
||||
if (type === 'chat') {
|
||||
let chat = await getChatById(localStorage.token, id).catch((error) => {
|
||||
return null;
|
||||
});
|
||||
if (!chat && item) {
|
||||
chat = await importChat(
|
||||
localStorage.token,
|
||||
item.chat,
|
||||
item?.meta ?? {},
|
||||
false,
|
||||
null,
|
||||
item?.created_at ?? null,
|
||||
item?.updated_at ?? null
|
||||
);
|
||||
}
|
||||
}}
|
||||
name={$i18n.t('Pinned')}
|
||||
|
||||
if (chat) {
|
||||
console.log(chat);
|
||||
if (chat.folder_id) {
|
||||
const res = await updateChatFolderIdById(
|
||||
localStorage.token,
|
||||
chat.id,
|
||||
null
|
||||
).catch((error) => {
|
||||
toast.error(`${error}`);
|
||||
return null;
|
||||
});
|
||||
}
|
||||
|
||||
if (!chat.pinned) {
|
||||
const res = await toggleChatPinnedStatusById(localStorage.token, chat.id);
|
||||
}
|
||||
|
||||
initChatList();
|
||||
}
|
||||
}
|
||||
}}
|
||||
name={$i18n.t('Pinned')}
|
||||
>
|
||||
<div
|
||||
class="ml-3 pl-1 mt-[1px] flex flex-col overflow-y-auto scrollbar-hidden border-s border-gray-100 dark:border-gray-900 text-gray-900 dark:text-gray-200"
|
||||
>
|
||||
<div
|
||||
class="ml-3 pl-1 mt-[1px] flex flex-col overflow-y-auto scrollbar-hidden border-s border-gray-100 dark:border-gray-900"
|
||||
>
|
||||
{#each $pinnedChats as chat, idx (`pinned-chat-${chat?.id ?? idx}`)}
|
||||
<ChatItem
|
||||
className=""
|
||||
id={chat.id}
|
||||
title={chat.title}
|
||||
{shiftKey}
|
||||
selected={selectedChatId === chat.id}
|
||||
on:select={() => {
|
||||
selectedChatId = chat.id;
|
||||
}}
|
||||
on:unselect={() => {
|
||||
selectedChatId = null;
|
||||
}}
|
||||
on:change={async () => {
|
||||
initChatList();
|
||||
}}
|
||||
on:tag={(e) => {
|
||||
const { type, name } = e.detail;
|
||||
tagEventHandler(type, name, chat.id);
|
||||
}}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</Folder>
|
||||
</div>
|
||||
{/if}
|
||||
{#each $pinnedChats as chat, idx (`pinned-chat-${chat?.id ?? idx}`)}
|
||||
<ChatItem
|
||||
className=""
|
||||
id={chat.id}
|
||||
title={chat.title}
|
||||
{shiftKey}
|
||||
selected={selectedChatId === chat.id}
|
||||
on:select={() => {
|
||||
selectedChatId = chat.id;
|
||||
}}
|
||||
on:unselect={() => {
|
||||
selectedChatId = null;
|
||||
}}
|
||||
on:change={async () => {
|
||||
initChatList();
|
||||
}}
|
||||
on:tag={(e) => {
|
||||
const { type, name } = e.detail;
|
||||
tagEventHandler(type, name, chat.id);
|
||||
}}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</Folder>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
@@ -464,7 +464,7 @@
|
||||
}}
|
||||
>
|
||||
<button
|
||||
class="text-gray-500 dark:text-gray-500 transition-all p-[3px] hover:bg-gray-200 dark:hover:bg-gray-850 rounded-lg"
|
||||
class="text-gray-500 dark:text-gray-500 transition-all p-1 hover:bg-gray-200 dark:hover:bg-gray-850 rounded-lg"
|
||||
on:click={(e) => {
|
||||
e.stopPropagation();
|
||||
open = !open;
|
||||
@@ -472,22 +472,22 @@
|
||||
>
|
||||
{#if folders[folderId]?.meta?.icon}
|
||||
<div class="flex group-hover:hidden transition-all">
|
||||
<Emoji className="size-4" shortCode={folders[folderId].meta.icon} />
|
||||
<Emoji className="size-3.5" shortCode={folders[folderId].meta.icon} />
|
||||
</div>
|
||||
|
||||
<div class="hidden group-hover:flex transition-all p-[1px]">
|
||||
{#if open}
|
||||
<ChevronDown className=" size-3.5" strokeWidth="2.5" />
|
||||
<ChevronDown className=" size-3" strokeWidth="2.5" />
|
||||
{:else}
|
||||
<ChevronRight className=" size-3.5" strokeWidth="2.5" />
|
||||
<ChevronRight className=" size-3" strokeWidth="2.5" />
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="p-[1px]">
|
||||
{#if open}
|
||||
<ChevronDown className=" size-3.5" strokeWidth="2.5" />
|
||||
<ChevronDown className=" size-3" strokeWidth="2.5" />
|
||||
{:else}
|
||||
<ChevronRight className=" size-3.5" strokeWidth="2.5" />
|
||||
<ChevronRight className=" size-3" strokeWidth="2.5" />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user