Fix profile expand arrow in tree view

src/lib/components/tree/ConfigTree.svelte

@@ -38,6 +38,18 @@
   let treeProps: TreeProperties;
   let treeRoot: Tree.Node;
   let filteredConfigs: Config[] = [];
+  let manuallyExpanded: string[] = [];
+
+  function sameIds(a: string[], b: string[]) {
+    if (a.length !== b.length) return false;
+    const set = new Set(a);
+    return b.every((id) => set.has(id));
+  }
+
+  function handleExpandedChange(event: CustomEvent<string[]>) {
+    if (sameIds(manuallyExpanded, event.detail)) return;
+    manuallyExpanded = event.detail;
+  }
 
   export function debounced<T>(store: Writable<T>, delay = 300) {
     let timeout: ReturnType<typeof setTimeout>;
@@ -74,7 +86,12 @@
     treeProps = {
       root: treeRoot,
       selected: selected?.id,
-      expanded: treeRoot.getIncludingNodes(selected?.id),
+      expanded: Array.from(
+        new Set([
+          ...treeRoot.getIncludingNodes(selected?.id),
+          ...manuallyExpanded,
+        ]),
+      ),
       scrollBehaviour: {
         scrollToIndex: scrollToSelectionTrigger > 0,
         scrollTrigger: scrollToSelectionTrigger,
@@ -253,7 +270,7 @@
   }
 </script>
 
-<TreeComponent {...treeProps}>
+<TreeComponent {...treeProps} on:expandedChange={handleExpandedChange}>
   <svelte:fragment slot="folder" let:item let:expanded let:level>
     {@const data = getFolderData(item)}
     <TreeFolder

src/lib/components/tree/ProfileCloudTreeItem.svelte

@@ -80,7 +80,12 @@
       <slot name="type-label">{data.type}</slot>
     </div>
     {#if $item.children.length > 0}
-      <div class="trigger-container" use:itemFunction {...itemProps}>
+      <div
+        class="trigger-container"
+        use:itemFunction
+        {...itemProps}
+        on:click|stopPropagation
+      >
         <svg
           width="14"
           height="11"

src/lib/components/tree/TreeComponent.svelte

@@ -16,7 +16,7 @@
 <script lang="ts">
   import { createTreeView } from "@melt-ui/svelte";
   import type { TreeView } from "@melt-ui/svelte";
-  import { setContext, tick } from "svelte";
+  import { createEventDispatcher, setContext, tick } from "svelte";
   import TreeNode from "./TreeNode.svelte";
   import type { AbstractTreeNode } from "./TreeNode.svelte";
   import type { FolderSlotProps, ItemSlotProps } from "./TreeChild.svelte";
@@ -27,6 +27,8 @@
     item: ItemSlotProps;
   }
 
+  const dispatch = createEventDispatcher<{ expandedChange: string[] }>();
+
   export let root: AbstractTreeNode<any>;
   export let expanded: string[] = [];
   export let selected: string | undefined = undefined;
@@ -51,18 +53,21 @@
     curr: string[];
     next: string[];
   }) {
+    let result: string[];
     if (next.length > curr.length) {
       const diff = next.find((e) => !curr.includes(e))!;
       const rootNodes = get(root).children.map((e) => get(e).id);
       if (rootNodes.includes(diff)) {
         const others = next.filter((e) => !rootNodes.includes(e));
-        return [...others, diff];
+        result = [...others, diff];
       } else {
-        return next;
+        result = next;
       }
     } else {
-      return next;
+      result = next;
     }
+    dispatch("expandedChange", result);
+    return result;
   }
 
   let scrollTimeout: any;