refac: styling

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>

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

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>