solve overlaps alg layout

packages/web/src/utility/statusBarStore.ts

@@ -0,0 +1,28 @@
+import { writable } from "svelte/store";
+
+export const statusBarTabInfo = writable({});
+
+// export function updateStatuBarInfo(tabid, info) {
+//   statusBarTabInfo.update(x => ({
+//     ...x,
+//     [tabid]: info,
+//   }));
+// }
+
+export function updateStatuBarInfoItem(tabid, key, item) {
+  statusBarTabInfo.update(tabs => {
+    const items = tabs[tabid] || [];
+    let newItems;
+    if (item == null) {
+      newItems = items.filter(x => x.key != key);
+    } else if (items.find(x => x.key == key)) {
+      newItems = items.map(x => (x.key == key ? { ...item, key } : x));
+    } else {
+      newItems = [...items, { ...item, key }];
+    }
+    return {
+      ...tabs,
+      [tabid]: newItems,
+    };
+  });
+}

packages/web/src/utility/useTimerLabel.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import { getContext, onDestroy } from 'svelte';
-import { updateStatuBarInfoItem } from '../widgets/StatusBar.svelte';
+import { updateStatuBarInfoItem } from './statusBarStore';
 
 function formatSeconds(duration) {
   if (duration == null) return '';