diff --git a/packages/web/src/appobj/AppObjectGroup.svelte b/packages/web/src/appobj/AppObjectGroup.svelte
index 82ddc457d..43eb3ad63 100644
--- a/packages/web/src/appobj/AppObjectGroup.svelte
+++ b/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 @@
(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)}
>
diff --git a/packages/web/src/appobj/AppObjectList.svelte b/packages/web/src/appobj/AppObjectList.svelte
index 675f3ca1a..a289121a5 100644
--- a/packages/web/src/appobj/AppObjectList.svelte
+++ b/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}
diff --git a/packages/web/src/stores.ts b/packages/web/src/stores.ts
index b68db116a..a45a9812c 100644
--- a/packages/web/src/stores.ts
+++ b/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([]);
diff --git a/packages/web/src/widgets/ConnectionList.svelte b/packages/web/src/widgets/ConnectionList.svelte
index c7be3892e..ff0073fea 100644
--- a/packages/web/src/widgets/ConnectionList.svelte
+++ b/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)}