refac: pinned collapsible styling

src/lib/components/common/Collapsible.svelte

@@ -7,12 +7,13 @@
 
 	export let open = false;
 	export let className = '';
+	export let buttonClassName = 'w-fit';
 	export let title = null;
 </script>
 
 <div class={className}>
 	{#if title !== null}
-		<button class="w-fit" on:click={() => (open = !open)}>
+		<button class={buttonClassName} on:click={() => (open = !open)}>
 			<div class=" w-fit font-medium transition flex items-center justify-between gap-2">
 				<div>
 					{title}
@@ -28,7 +29,7 @@
 			</div>
 		</button>
 	{:else}
-		<button on:click={() => (open = !open)}>
+		<button class={buttonClassName} on:click={() => (open = !open)}>
 			<div
 				class="flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
 			>

src/lib/components/layout/Sidebar.svelte

@@ -52,6 +52,7 @@
 	import ChevronDown from '../icons/ChevronDown.svelte';
 	import ChevronUp from '../icons/ChevronUp.svelte';
 	import ChevronRight from '../icons/ChevronRight.svelte';
+	import Collapsible from '../common/Collapsible.svelte';
 
 	const BREAKPOINT = 768;
 
@@ -507,57 +508,59 @@
 			{#if !search && $pinnedChats.length > 0}
 				<div class=" pb-2 flex flex-col space-y-1">
 					<div class="">
-						<div class="px-2">
-							<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);
-								}}
-							>
-								<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>
+						<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);
+									}}
+								>
+									<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 class=" translate-y-[0.5px]">
-									{$i18n.t('Pinned')}
+							<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>
-							</button>
-						</div>
-
-						{#if showPinnedChat}
-							<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>
-						{/if}
+						</Collapsible>
 					</div>
 				</div>
 			{/if}