refac: collapsible

src/lib/components/common/Collapsible.svelte

@@ -2,7 +2,7 @@
 	import { decode } from 'html-entities';
 	import { v4 as uuidv4 } from 'uuid';
 
-	import { getContext, createEventDispatcher } from 'svelte';
+	import { getContext } from 'svelte';
 	const i18n = getContext('i18n');
 
 	import dayjs from '$lib/dayjs';
@@ -26,9 +26,6 @@
 	// Assuming $i18n.languages is an array of language codes
 	$: loadLocale($i18n.languages);
 
-	const dispatch = createEventDispatcher();
-	$: dispatch('change', open);
-
 	import { slide } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 
@@ -55,6 +52,10 @@
 	export let disabled = false;
 	export let hide = false;
 
+	export let onChange: Function = () => {};
+
+	$: onChange(open);
+
 	const collapsibleId = uuidv4();
 
 	function parseJSONString(str) {

src/lib/components/common/Folder.svelte

@@ -121,8 +121,8 @@
 			bind:open
 			className="w-full "
 			buttonClassName="w-full"
-			on:change={(e) => {
-				dispatch('change', e.detail);
+			onChange={(state) => {
+				dispatch('change', state);
 			}}
 		>
 			<!-- svelte-ignore a11y-no-static-element-interactions -->

src/lib/components/layout/Sidebar/RecursiveFolder.svelte

@@ -374,8 +374,8 @@
 		buttonClassName="w-full"
 		hide={(folders[folderId]?.childrenIds ?? []).length === 0 &&
 			(folders[folderId].items?.chats ?? []).length === 0}
-		on:change={(e) => {
-			dispatch('open', e.detail);
+		onChange={(state) => {
+			dispatch('open', state);
 		}}
 	>
 		<!-- svelte-ignore a11y-no-static-element-interactions -->