SYNC: widget bar fix

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) {
+    for (const def of flexibleItems) {
-      if (!def.height) {
+      let height = remainingHeight / flexibleItems.length;
-        let height = remainingHeight / totalFlexibleItems;
+      if (height < def.minimalContentHeight) height = def.minimalContentHeight;
-        if (height < def.minimalContentHeight) height = def.minimalContentHeight;
+      itemHeights[def.name] = height;
-        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;
+}

packages/web/src/widgets/DatabaseWidget.svelte

@@ -27,6 +27,7 @@
       title={_t('common.connections', { defaultMessage: 'Connections' })}
       name="connections"
       height="35%"
+      storeHeight
     >
       <ConnectionList
         passProps={{

packages/web/src/widgets/WidgetColumnBar.svelte

@@ -5,6 +5,7 @@
   import { getLocalStorage, setLocalStorage } from '../utility/storageCache';
   import {
     computeInitialWidgetBarProps,
+    extractStoredWidgetBarProps,
     handleResizeWidgetBar,
     toggleCollapseWidgetBar,
     WidgetBarItemDefinition,
@@ -18,9 +19,6 @@
 
   // const widgetColumnBarHeight = writable(0);
   const widgetColumnBarComputed = writable({});
-  let storedProps = getLocalStorage(storageName) || {};
-
-  $: setLocalStorage(storageName, storedProps);
 
   $: containerProps = {
     clientHeight,
@@ -28,6 +26,11 @@
     splitterHeight: 3,
   };
 
+  function saveStorage() {
+    if (!storageName) return;
+    setLocalStorage(storageName, extractStoredWidgetBarProps(definitions, $widgetColumnBarComputed));
+  }
+
   // setContext('widgetColumnBarHeight', widgetColumnBarHeight);
   setContext('pushWidgetItemDefinition', item => {
     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(() => {

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);