tab status bar improved

packages/web/src/widgets/StatusBar.svelte

@@ -1,15 +1,34 @@
 <script lang="ts" context="module">
   const statusBarTabInfo = writable({});
 
-  export function updateStatuBarInfo(tabid, info) {
-    statusBarTabInfo.update(x => ({
-      ...x,
-      [tabid]: info,
-    }));
+  // 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,
+      };
+    });
   }
 </script>
 
 <script lang="ts">
+  import _ from 'lodash';
   import { writable } from 'svelte/store';
   import moment from 'moment';
 

packages/web/src/widgets/StatusBarTabItem.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { getContext, onDestroy, onMount } from 'svelte';
+
+  import uuidv1 from 'uuid/v1';
+  import { updateStatuBarInfoItem } from './StatusBar.svelte';
+
+  export let text;
+
+  const key = uuidv1();
+  const tabid = getContext('tabid');
+
+  onMount(() => {
+    updateStatuBarInfoItem(tabid, key, { text });
+  });
+  onDestroy(() => updateStatuBarInfoItem(tabid, key, null));
+</script>