From c7ed0da90b0fe9585eb859e3744a25917e7e7cd8 Mon Sep 17 00:00:00 2001
From: sukuwc <sukuwc@riseup.net>
Date: Wed, 26 Aug 2026 12:51:55 +0200
Subject: [PATCH] Fix profile expand arrow in tree view

The arrow's click bubbled into the row's own click handler, which
selected the profile and opened it in the editor instead of expanding
it. Stop that propagation, and have TreeComponent report expand/collapse
changes upward so ConfigTree can preserve a profile's manually-opened
state instead of it being wiped out on the next reactive recompute.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/lib/components/tree/ConfigTree.svelte     | 21 +++++++++++++++++--
 .../tree/ProfileCloudTreeItem.svelte          |  7 ++++++-
 src/lib/components/tree/TreeComponent.svelte  | 13 ++++++++----
 3 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/tree/ConfigTree.svelte b/src/lib/components/tree/ConfigTree.svelte
index 24fc6c5..79371fd 100644
--- a/src/lib/components/tree/ConfigTree.svelte
+++ b/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
diff --git a/src/lib/components/tree/ProfileCloudTreeItem.svelte b/src/lib/components/tree/ProfileCloudTreeItem.svelte
index ae32a49..0b22b29 100644
--- a/src/lib/components/tree/ProfileCloudTreeItem.svelte
+++ b/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"
diff --git a/src/lib/components/tree/TreeComponent.svelte b/src/lib/components/tree/TreeComponent.svelte
index d6a4bd9..eb82345 100644
--- a/src/lib/components/tree/TreeComponent.svelte
+++ b/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;