From b01f9e8ec343fdc85b0252b0448f90d1e82547c5 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 15 Oct 2024 00:35:14 -0700
Subject: [PATCH] refac: folder

---
 src/lib/components/common/Collapsible.svelte  |  5 ++
 src/lib/components/common/Folder.svelte       | 56 ++++++++++++
 src/lib/components/layout/Sidebar.svelte      | 90 ++++++++-----------
 .../components/layout/Sidebar/ChatItem.svelte |  9 +-
 .../layout/Sidebar/SearchInput.svelte         |  4 -
 5 files changed, 101 insertions(+), 63 deletions(-)
 create mode 100644 src/lib/components/common/Folder.svelte

diff --git a/src/lib/components/common/Collapsible.svelte b/src/lib/components/common/Collapsible.svelte
index fea21151f..6a9d1ff19 100644
--- a/src/lib/components/common/Collapsible.svelte
+++ b/src/lib/components/common/Collapsible.svelte
@@ -1,4 +1,9 @@
 <script lang="ts">
+	import { getContext, createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+	$: dispatch('change', open);
+
 	import { slide } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 
diff --git a/src/lib/components/common/Folder.svelte b/src/lib/components/common/Folder.svelte
new file mode 100644
index 000000000..a9883520e
--- /dev/null
+++ b/src/lib/components/common/Folder.svelte
@@ -0,0 +1,56 @@
+<script>
+	import { getContext, createEventDispatcher } from 'svelte';
+
+	const i18n = getContext('i18n');
+	const dispatch = createEventDispatcher();
+
+	import ChevronDown from '../icons/ChevronDown.svelte';
+	import ChevronRight from '../icons/ChevronRight.svelte';
+	import Collapsible from './Collapsible.svelte';
+
+	export let open = true;
+	export let name = '';
+</script>
+
+<div>
+	<Collapsible
+		bind:open
+		className="w-full"
+		buttonClassName="w-full"
+		on:change={(e) => {
+			dispatch('change', e.detail);
+		}}
+	>
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div
+			class="mx-2 w-full"
+			on:dragenter={(e) => {
+				e.stopPropagation();
+			}}
+			on:drop={(e) => {
+				console.log('Dropped on the Button');
+			}}
+			on:dragleave={(e) => {}}
+		>
+			<button
+				class="w-full py-1 px-1.5 rounded-md flex items-center gap-1 text-xs text-gray-500 dark:text-gray-500 font-medium hover:bg-gray-100 dark:hover:bg-gray-900 transition"
+			>
+				<div class="text-gray-300">
+					{#if open}
+						<ChevronDown className=" size-3" strokeWidth="2.5" />
+					{:else}
+						<ChevronRight className=" size-3" strokeWidth="2.5" />
+					{/if}
+				</div>
+
+				<div class="translate-y-[0.5px]">
+					{name}
+				</div>
+			</button>
+		</div>
+
+		<div slot="content">
+			<slot></slot>
+		</div>
+	</Collapsible>
+</div>
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index cfe5b9976..8372d77b1 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -53,6 +53,7 @@
 	import ChevronUp from '../icons/ChevronUp.svelte';
 	import ChevronRight from '../icons/ChevronRight.svelte';
 	import Collapsible from '../common/Collapsible.svelte';
+	import Folder from '../common/Folder.svelte';
 
 	const BREAKPOINT = 768;
 
@@ -517,61 +518,42 @@
 
 			{#if !search && $pinnedChats.length > 0}
 				<div class=" pb-2 flex flex-col space-y-1">
-					<div class="">
-						<Collapsible className="w-full" buttonClassName="w-full">
-							<div class="px-2 w-full">
-								<button
-									class="w-full py-1 px-1.5 rounded-md flex items-center gap-1 text-xs text-gray-500 dark:text-gray-500 font-medium hover:bg-gray-100 dark:hover:bg-gray-900 transition"
-									on:click={() => {
-										showPinnedChat = !showPinnedChat;
-										localStorage.setItem('showPinnedChat', showPinnedChat);
+					<Folder
+						bind:open={showPinnedChat}
+						on:change={(e) => {
+							localStorage.setItem('showPinnedChat', e.detail);
+							console.log(e.detail);
+						}}
+						name={$i18n.t('Pinned')}
+					>
+						<div class="pl-2 mt-1 flex flex-col overflow-y-auto scrollbar-hidden">
+							{#each $pinnedChats as chat, idx}
+								<ChatItem
+									{chat}
+									{shiftKey}
+									selected={selectedChatId === chat.id}
+									on:select={() => {
+										selectedChatId = chat.id;
 									}}
-								>
-									<div class="text-gray-300">
-										{#if showPinnedChat}
-											<ChevronDown className=" size-3" strokeWidth="2.5" />
-										{:else}
-											<ChevronRight className=" text-gra size-3" strokeWidth="2.5" />
-										{/if}
-									</div>
-
-									<div class=" translate-y-[0.5px]">
-										{$i18n.t('Pinned')}
-									</div>
-								</button>
-							</div>
-
-							<div slot="content">
-								<div class="pl-2 mt-1 flex flex-col overflow-y-auto scrollbar-hidden">
-									{#each $pinnedChats as chat, idx}
-										<ChatItem
-											{chat}
-											{shiftKey}
-											selected={selectedChatId === chat.id}
-											on:select={() => {
-												selectedChatId = chat.id;
-											}}
-											on:unselect={() => {
-												selectedChatId = null;
-											}}
-											on:delete={(e) => {
-												if ((e?.detail ?? '') === 'shift') {
-													deleteChatHandler(chat.id);
-												} else {
-													deleteChat = chat;
-													showDeleteConfirm = true;
-												}
-											}}
-											on:tag={(e) => {
-												const { type, name } = e.detail;
-												tagEventHandler(type, name, chat.id);
-											}}
-										/>
-									{/each}
-								</div>
-							</div>
-						</Collapsible>
-					</div>
+									on:unselect={() => {
+										selectedChatId = null;
+									}}
+									on:delete={(e) => {
+										if ((e?.detail ?? '') === 'shift') {
+											deleteChatHandler(chat.id);
+										} else {
+											deleteChat = chat;
+											showDeleteConfirm = true;
+										}
+									}}
+									on:tag={(e) => {
+										const { type, name } = e.detail;
+										tagEventHandler(type, name, chat.id);
+									}}
+								/>
+							{/each}
+						</div>
+					</Folder>
 				</div>
 			{/if}
 
diff --git a/src/lib/components/layout/Sidebar/ChatItem.svelte b/src/lib/components/layout/Sidebar/ChatItem.svelte
index bebc63785..7682dd3c5 100644
--- a/src/lib/components/layout/Sidebar/ChatItem.svelte
+++ b/src/lib/components/layout/Sidebar/ChatItem.svelte
@@ -98,10 +98,10 @@
 	let y = 0;
 
 	const dragImage = new Image();
-	dragImage.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=';
+	dragImage.src =
+		'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
 
 	const onDragStart = (event) => {
-		console.log('Dragging started:', event.target);
 		event.dataTransfer.setDragImage(dragImage, 0, 0);
 
 		drag = true;
@@ -114,7 +114,6 @@
 	};
 
 	const onDragEnd = (event) => {
-		console.log('Dragging ended:', event.target);
 		drag = false;
 		itemElement.style.opacity = '1'; // Reset visual cue after drag
 	};
@@ -143,9 +142,9 @@
 
 {#if drag && x && y}
 	<DragGhost {x} {y}>
-		<div class=" bg-black/50 backdrop-blur-2xl px-2 py-1 rounded-lg">
+		<div class=" bg-black/80 backdrop-blur-2xl px-2 py-1 rounded-lg">
 			<div>
-				<div class=" text-xs text-gray-500">
+				<div class=" text-xs text-white">
 					{chat.title}
 				</div>
 			</div>
diff --git a/src/lib/components/layout/Sidebar/SearchInput.svelte b/src/lib/components/layout/Sidebar/SearchInput.svelte
index 04af4109d..5e8213308 100644
--- a/src/lib/components/layout/Sidebar/SearchInput.svelte
+++ b/src/lib/components/layout/Sidebar/SearchInput.svelte
@@ -51,10 +51,6 @@
 		const chatSearch = document.getElementById('chat-search');
 
 		if (!searchContainer.contains(e.target) && !chatSearch.contains(e.target)) {
-			console.log(
-				e.target.id,
-				e.target.id.startsWith('search-tag-') || e.target.id.startsWith('search-option-')
-			);
 			if (e.target.id.startsWith('search-tag-') || e.target.id.startsWith('search-option-')) {
 				return;
 			}