memoize connection folder expand state #425

packages/web/src/appobj/AppObjectGroup.svelte

@@ -18,8 +18,9 @@
   export let passProps;
   export let onDropOnGroup = undefined;
   export let groupContextMenu = null;
+  export let collapsedGroupNames;
 
-  let isExpanded = true;
+  $: isExpanded = !$collapsedGroupNames.includes(group);
 
   $: filtered = items.filter(x => x.isMatched);
   $: countText = filtered.length < items.length ? `${filtered.length}/${items.length}` : `${items.length}`;
@@ -49,7 +50,11 @@
 
 <div
   class="group"
-  on:click={() => (isExpanded = !isExpanded)}
+  on:click={() =>
+    collapsedGroupNames.update(names => {
+      if (names.includes(group)) return names.filter(x => x != group);
+      return [...names, group];
+    })}
   on:drop={handleDrop}
   use:contextMenu={() => groupContextMenu(group)}
 >

packages/web/src/appobj/AppObjectList.svelte

@@ -5,6 +5,7 @@
   import { plusExpandIcon } from '../icons/expandIcons';
 
   import AppObjectListItem from './AppObjectListItem.svelte';
+  import { writable } from 'svelte/store';
 
   export let list;
   export let module;
@@ -26,6 +27,8 @@
   export let onDropOnGroup = undefined;
   export let emptyGroupNames = [];
 
+  export let collapsedGroupNames = writable([]);
+
   $: filtered = !groupFunc
     ? list.filter(data => {
         const matcher = module.createMatcher && module.createMatcher(data);
@@ -100,6 +103,7 @@
       {setIsExpanded}
       {onDropOnGroup}
       {groupContextMenu}
+      {collapsedGroupNames}
     />
   {/each}
 {:else}