feat: sidebar ui update

This commit is contained in:
Timothy J. Baek 2024-03-16 00:27:29 -07:00
parent 91efd6cb63
commit d6905d6297

View file

@ -82,7 +82,10 @@
});
if (res) {
if ($chatId === id) {
goto('/');
}
await chats.set(await getChatList(localStorage.token));
}
};
@ -370,22 +373,22 @@
return title.includes(query) || contentMatches;
}
}) as chat, i}
<div class=" w-full pr-2 relative">
<div class=" w-full pr-2 relative group">
{#if chatTitleEditId === chat.id}
<div
class=" w-full flex justify-between rounded-xl px-3 py-2 hover:bg-gray-900 {chat.id ===
class=" w-full flex justify-between rounded-xl px-3 py-2 group-hover:bg-gray-900 {chat.id ===
$chatId
? 'bg-gray-900'
: ''} transition whitespace-nowrap text-ellipsis"
: ''} whitespace-nowrap text-ellipsis"
>
<input bind:value={chatTitle} class=" bg-transparent w-full outline-none mr-10" />
</div>
{:else}
<a
class=" w-full flex justify-between rounded-xl px-3 py-2 hover:bg-gray-900 {chat.id ===
class=" w-full flex justify-between rounded-xl px-3 py-2 group-hover:bg-gray-900 {chat.id ===
$chatId
? 'bg-gray-900'
: ''} transition whitespace-nowrap text-ellipsis"
: ''} whitespace-nowrap text-ellipsis"
href="/c/{chat.id}"
on:click={() => {
if (window.innerWidth < 1024) {
@ -395,21 +398,18 @@
draggable="false"
>
<div class=" flex self-center flex-1 w-full">
<div
class=" text-left self-center overflow-hidden {chat.id === $chatId
? 'w-[160px]'
: 'w-full'} h-[20px]"
>
<div class=" text-left self-center overflow-hidden w-full h-[20px]">
{chat.title}
</div>
</div>
</a>
{/if}
{#if chat.id === $chatId}
<div class=" absolute right-[22px] top-[10px]">
<div
class=" invisible group-hover:visible absolute right-[14px] top-[10px] px-2 bg-gradient-to-l from-80% from-gray-900 to-transparent"
>
{#if chatTitleEditId === chat.id}
<div class="flex self-center space-x-1.5">
<div class="flex self-center space-x-1.5 z-10">
<button
class=" self-center hover:text-white transition"
on:click={() => {
@ -451,7 +451,7 @@
</button>
</div>
{:else if chatDeleteId === chat.id}
<div class="flex self-center space-x-1.5">
<div class="flex self-center space-x-1.5 z-10">
<button
class=" self-center hover:text-white transition"
on:click={() => {
@ -490,7 +490,7 @@
</button>
</div>
{:else}
<div class="flex self-center space-x-1.5">
<div class="flex self-center space-x-1.5 z-10">
<button
id="delete-chat-button"
class=" hidden"
@ -544,7 +544,6 @@
</div>
{/if}
</div>
{/if}
</div>
{/each}
</div>