From e004ed2f4b006520d23ec9aa15a2b507b621c663 Mon Sep 17 00:00:00 2001 From: "SPRINX0\\prochazka" Date: Thu, 11 Dec 2025 13:21:37 +0100 Subject: [PATCH] SYNC: widget bar fix --- packages/web/src/utility/widgetBarResizing.ts | 46 ++++++++++++++----- .../web/src/widgets/DatabaseWidget.svelte | 1 + .../web/src/widgets/WidgetColumnBar.svelte | 14 ++++-- .../src/widgets/WidgetColumnBarItem.svelte | 4 +- 4 files changed, 48 insertions(+), 17 deletions(-) diff --git a/packages/web/src/utility/widgetBarResizing.ts b/packages/web/src/utility/widgetBarResizing.ts index c29de39c4..f14c0688b 100644 --- a/packages/web/src/utility/widgetBarResizing.ts +++ b/packages/web/src/utility/widgetBarResizing.ts @@ -1,11 +1,14 @@ import _ from 'lodash'; -import is from 'zod/v4/locales/is.cjs'; export interface WidgetBarStoredProps { contentHeight: number; collapsed: boolean; } +export interface WidgetBarStoredPropsResult { + [name: string]: WidgetBarStoredProps; +} + export interface WidgetBarComputedProps { contentHeight: number; visibleItemsCount: number; @@ -24,6 +27,7 @@ export interface WidgetBarItemDefinition { collapsed: boolean; // initial value of collapsing status skip: boolean; minimalContentHeight: number; + storeHeight: boolean; } export type PushWidgetBarItemDefinitionFunction = (def: WidgetBarItemDefinition) => void; @@ -85,11 +89,15 @@ export function computeInitialWidgetBarProps( // First pass: calculate base heights let totalContentHeight = 0; - let totalFlexibleItems = 0; const itemHeights = {}; + const flexibleItems = []; for (const def of expandedItems) { - if (def.height) { + if (def.storeHeight && currentProps[def.name]?.contentHeight > 0) { + const storedHeight = currentProps[def.name].contentHeight; + itemHeights[def.name] = storedHeight; + totalContentHeight += storedHeight; + } else if (def.height) { let height = 0; if (_.isString(def.height) && def.height.endsWith('px')) { height = parseInt(def.height.slice(0, -2)); @@ -104,19 +112,17 @@ export function computeInitialWidgetBarProps( totalContentHeight += height; itemHeights[def.name] = height; } else { - totalFlexibleItems += 1; + flexibleItems.push(def); } } // Second pass - distribute remaining height - if (totalFlexibleItems > 0) { + if (flexibleItems.length > 0) { let remainingHeight = availableContentHeight - totalContentHeight; - for (const def of expandedItems) { - if (!def.height) { - let height = remainingHeight / totalFlexibleItems; - if (height < def.minimalContentHeight) height = def.minimalContentHeight; - itemHeights[def.name] = height; - } + for (const def of flexibleItems) { + let height = remainingHeight / flexibleItems.length; + if (height < def.minimalContentHeight) height = def.minimalContentHeight; + itemHeights[def.name] = height; } } @@ -226,3 +232,21 @@ export function toggleCollapseWidgetBar( res[toggledItemName].collapsed = !res[toggledItemName].collapsed; return computeInitialWidgetBarProps(container, definitions, res); } + +export function extractStoredWidgetBarProps( + definitions: WidgetBarItemDefinition[], + currentProps: WidgetBarComputedResult +): WidgetBarStoredPropsResult { + const res: WidgetBarStoredPropsResult = {}; + for (const key in currentProps) { + const def = definitions.find(d => d.name === key); + if (!def) continue; + res[key] = { + contentHeight: + def.storeHeight && currentProps[key]?.contentHeight > 0 ? currentProps[key]?.contentHeight : undefined, + collapsed: currentProps[key]?.collapsed, + }; + } + + return res; +} diff --git a/packages/web/src/widgets/DatabaseWidget.svelte b/packages/web/src/widgets/DatabaseWidget.svelte index 9416c9b02..89f41a1f2 100644 --- a/packages/web/src/widgets/DatabaseWidget.svelte +++ b/packages/web/src/widgets/DatabaseWidget.svelte @@ -27,6 +27,7 @@ title={_t('common.connections', { defaultMessage: 'Connections' })} name="connections" height="35%" + storeHeight > { definitions = [...definitions, item]; @@ -45,9 +48,11 @@ name, deltaY ); + saveStorage(); }); setContext('toggleWidgetCollapse', name => { $widgetColumnBarComputed = toggleCollapseWidgetBar(containerProps, definitions, $widgetColumnBarComputed, name); + saveStorage(); }); // $: $widgetColumnBarHeight = clientHeight; @@ -55,7 +60,8 @@ $: recompute(definitions); function recompute(defs: WidgetBarItemDefinition[]) { - $widgetColumnBarComputed = computeInitialWidgetBarProps(containerProps, defs, storedProps); + $widgetColumnBarComputed = computeInitialWidgetBarProps(containerProps, defs, getLocalStorage(storageName) || {}); + saveStorage(); } onMount(() => { diff --git a/packages/web/src/widgets/WidgetColumnBarItem.svelte b/packages/web/src/widgets/WidgetColumnBarItem.svelte index bf224d590..d56d101ee 100644 --- a/packages/web/src/widgets/WidgetColumnBarItem.svelte +++ b/packages/web/src/widgets/WidgetColumnBarItem.svelte @@ -21,6 +21,7 @@ export let positiveCondition = true; export let height = null; export let collapsed = null; + export let storeHeight = false; // export let storageName = null; export let onClose = null; @@ -47,10 +48,9 @@ height, skip: skip || !positiveCondition, minimalContentHeight: minimalHeight, + storeHeight, }); - - $: updateWidgetItemDefinition(name, { collapsed, height, skip: skip || !positiveCondition }); // $: setInitialSize(height, $widgetColumnBarHeight);