From 86adcf33b0fdf3a4c45d14f0d60490f94a10c0aa Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Thu, 17 Oct 2024 00:33:53 -0700
Subject: [PATCH] refac: styling

---
 src/lib/components/common/Collapsible.svelte  | 21 ++++++++++++++++---
 src/lib/components/layout/Sidebar.svelte      |  2 +-
 .../layout/Sidebar/RecursiveFolder.svelte     | 13 +++++++-----
 3 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/common/Collapsible.svelte b/src/lib/components/common/Collapsible.svelte
index 6c9f1644a..68cafdb75 100644
--- a/src/lib/components/common/Collapsible.svelte
+++ b/src/lib/components/common/Collapsible.svelte
@@ -16,13 +16,21 @@
 	export let title = null;
 
 	export let disabled = false;
+	export let hide = false;
 </script>
 
 <div class={className}>
 	{#if title !== null}
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<div class={buttonClassName} on:pointerup={() => (open = !open)}>
+		<div
+			class={buttonClassName}
+			on:pointerup={() => {
+				if (!disabled) {
+					open = !open;
+				}
+			}}
+		>
 			<div class=" w-fit font-medium transition flex items-center justify-between gap-2">
 				<div>
 					{title}
@@ -40,7 +48,14 @@
 	{:else}
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<div class={buttonClassName} on:pointerup={() => (open = !open)}>
+		<div
+			class={buttonClassName}
+			on:pointerup={() => {
+				if (!disabled) {
+					open = !open;
+				}
+			}}
+		>
 			<div
 				class="flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
 			>
@@ -49,7 +64,7 @@
 		</div>
 	{/if}
 
-	{#if open && !disabled}
+	{#if open && !hide}
 		<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>
 			<slot name="content" />
 		</div>
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index c19d71ca1..bb224309a 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -637,7 +637,7 @@
 						name={$i18n.t('Pinned')}
 					>
 						<div
-							class="ml-3 pl-1 mt-[1px] flex flex-col overflow-y-auto scrollbar-hidden border-s dark:border-gray-850"
+							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}
 								<ChatItem
diff --git a/src/lib/components/layout/Sidebar/RecursiveFolder.svelte b/src/lib/components/layout/Sidebar/RecursiveFolder.svelte
index e3397fad7..bb3d759d2 100644
--- a/src/lib/components/layout/Sidebar/RecursiveFolder.svelte
+++ b/src/lib/components/layout/Sidebar/RecursiveFolder.svelte
@@ -281,7 +281,7 @@
 		bind:open
 		className="w-full"
 		buttonClassName="w-full"
-		disabled={(folders[folderId]?.childrenIds ?? []).length === 0 &&
+		hide={(folders[folderId]?.childrenIds ?? []).length === 0 &&
 			(folders[folderId].items?.chats ?? []).length === 0}
 		on:change={(e) => {
 			dispatch('open', e.detail);
@@ -334,8 +334,11 @@
 					{/if}
 				</div>
 
-				<div
-					class="absolute z-10 right-2 invisible group-hover:visible self-center flex items-center dark:text-gray-300 touch-auto pointer-events-auto"
+				<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();
+					}}
 				>
 					<FolderMenu
 						on:rename={() => {
@@ -345,11 +348,11 @@
 							deleteHandler();
 						}}
 					>
-						<button class="p-0.5 dark:hover:bg-gray-850 rounded-lg" on:click={(e) => {}}>
+						<button class="p-0.5 dark:hover:bg-gray-850 rounded-lg touch-auto" on:click={(e) => {}}>
 							<EllipsisHorizontal className="size-4" strokeWidth="2.5" />
 						</button>
 					</FolderMenu>
-				</div>
+				</button>
 			</button>
 		</div>