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}

packages/web/src/stores.ts

@@ -57,6 +57,7 @@ export const visibleSelectedWidget = derived(
   ([$selectedWidget, $visibleWidgetSideBar]) => ($visibleWidgetSideBar ? $selectedWidget : null)
 );
 export const emptyConnectionGroupNames = writableWithStorage([], 'emptyConnectionGroupNames');
+export const collapsedConnectionGroupNames = writableWithStorage([], 'collapsedConnectionGroupNames');
 export const openedConnections = writable([]);
 export const openedSingleDatabaseConnections = writable([]);
 export const expandedConnections = writable([]);

packages/web/src/widgets/ConnectionList.svelte

@@ -15,6 +15,7 @@
     openedSingleDatabaseConnections,
     openedTabs,
     emptyConnectionGroupNames,
+    collapsedConnectionGroupNames,
   } from '../stores';
   import runCommand from '../commands/runCommand';
   import getConnectionLabel from '../utility/getConnectionLabel';
@@ -149,6 +150,7 @@
     emptyGroupNames={$emptyConnectionGroupNames}
     sortGroups
     groupContextMenu={createGroupContextMenu}
+    collapsedGroupNames={collapsedConnectionGroupNames}
   />
   {#if (connectionsWithParent?.length > 0 && connectionsWithoutParent?.length > 0) || ($emptyConnectionGroupNames.length > 0 && connectionsWithoutParent?.length > 0)}
     <div class="br" />