From 67cd7ece4aafd930a65ece4313387bd9b795a278 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carsten=20Gr=C3=A4f?= <evandor@gmail.com>
Date: Mon, 5 Feb 2024 21:47:11 +0100
Subject: [PATCH] TAB-484 savepoint

---
 src/App.vue                                   |   2 +-
 src/components/SidePanelFooter.vue            |  21 +--
 .../dialogues/helper/NewTabsetDialogBody.vue  |   2 +-
 .../helper/SidePanelWindowMarkupTable.vue     |  90 +++++-----
 .../helper/SidePanelWindowTable.vue           |  14 +-
 src/models/Window.ts                          |   4 +-
 src/pages/SidePanelPage.vue                   |   8 +-
 src/pages/SidePanelSpacesPage.vue             |   2 +-
 src/pages/SidePanelTabsetPage.vue             |   2 +-
 src/pages/sidepanel/SidePanelTabInfo.vue_     |   2 +-
 .../sidepanel/helper/FirstToolbarHelper.vue   |   4 +-
 src/services/AppService.ts                    |  82 ++++-----
 src/services/ChromeApi.ts                     |   4 +-
 src/services/ChromeListeners.ts               | 122 +++++++-------
 src/services/IndexedDbPersistenceService.ts   |  69 ++++----
 src/services/NavigationService.ts             |   1 -
 src/services/PersistenceService.ts            |   2 +
 src/services/PouchDbPersistenceService.ts     |   2 +
 src/services/TabsetService2.ts                |   2 +-
 src/services/Utils.ts                         | 157 +++++++++--------
 .../persistence/GitPersistentService.ts       |   2 +
 .../storage/LocalStoragePersistenceService.ts |   2 +
 src/stores/notificationsStore.ts              |   4 +-
 src/stores/spacesStore.ts                     |   2 +-
 src/stores/windowsStore.ts                    |  96 +++++++----
 .../components/SidePanelFooter.test.ts        | 159 ++++++++++++++++++
 .../__tests__/stores/windowsStore.test.ts     |  70 ++++----
 27 files changed, 551 insertions(+), 376 deletions(-)
 create mode 100644 test/vitest/__tests__/components/SidePanelFooter.test.ts

diff --git a/src/App.vue b/src/App.vue
index fac9d28a..56ac3432 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -81,7 +81,7 @@ if (isSignInWithEmailLink(auth, window.location.href)) {
       logtail.info("found email link redirection")
     })
     .catch((error) => {
-      console.error("error", error)
+      console.error("error in email link redirection", error)
       logtail.error("error in email link redirection", error)
       useSuggestionsStore().addSuggestion(Suggestion.getStaticSuggestion(StaticSuggestionIdent.RESTART_SUGGESTED))
     });
diff --git a/src/components/SidePanelFooter.vue b/src/components/SidePanelFooter.vue
index 9bd75165..6ab593f9 100644
--- a/src/components/SidePanelFooter.vue
+++ b/src/components/SidePanelFooter.vue
@@ -82,6 +82,7 @@
 
         <q-btn
           icon="o_grid_view"
+          data-testid="buttonManageWindows"
           :class="rightButtonClass()"
           flat
           color="black"
@@ -159,12 +160,12 @@
 import {SidePanelView, useUiStore} from "src/stores/uiStore";
 import {useTabsStore} from "src/stores/tabsStore";
 import {Tab} from "src/models/Tab";
-import {onMounted, ref, watch, watchEffect} from "vue";
+import {ref, watchEffect} from "vue";
 import {useRouter} from "vue-router";
 import {usePermissionsStore} from "src/stores/permissionsStore";
 import {FeatureIdent} from "src/models/AppFeature";
 import NavigationService from "src/services/NavigationService";
-import {LocalStorage, openURL, uid, useQuasar} from "quasar";
+import {openURL, uid, useQuasar} from "quasar";
 import {useUtils} from "src/services/Utils";
 import {useWindowsStore} from "src/stores/windowsStore";
 import {useSuggestionsStore} from "stores/suggestionsStore";
@@ -176,10 +177,9 @@ import {ToastType} from "src/models/Toast";
 import SidePanelFooterLeftButtons from "components/helper/SidePanelFooterLeftButtons.vue";
 import {useAuthStore} from "stores/authStore";
 import {Account} from "src/models/Account";
-import {NotificationType, useNotificationHandler} from "src/services/ErrorHandler";
+import {useNotificationHandler} from "src/services/ErrorHandler";
 import SidePanelLoginWidget from "components/helper/SidePanelLoginWidget.vue";
 import SidePanelWindowMarkupTable from "components/helper/SidePanelWindowMarkupTable.vue";
-//import {Browser} from '@capacitor/browser';
 import {Window} from "src/models/Window"
 
 const {handleSuccess, handleError} = useNotificationHandler()
@@ -207,7 +207,7 @@ const account = ref<Account | undefined>(undefined)
 const randomKey = ref<string>(uid())
 
 watchEffect(() => {
-  const windowId = useWindowsStore().currentWindow?.id || 0
+  const windowId = useWindowsStore().currentChromeWindow?.id || 0
   if (useWindowsStore().windowForId(windowId)?.open) {
     //console.log("setting showWindowTable to ", useWindowsStore().windowForId(windowId)?.open)
     showWindowTable.value = useWindowsStore().windowForId(windowId)?.open || false
@@ -218,13 +218,6 @@ watchEffect(() => {
   account.value = authStore.getAccount()
 })
 
-watchEffect(() => {
-  if (useWindowsStore().currentWindows.length === 1) {
-    console.log("setting showWindowTable to false (one window only)")
-    showWindowTable.value = false
-  }
-})
-
 watchEffect(() => {
   const suggestions = useSuggestionsStore().getSuggestions(
     [SuggestionState.NEW, SuggestionState.DECISION_DELAYED, SuggestionState.NOTIFICATION])
@@ -255,7 +248,7 @@ watchEffect(() => {
   if (!inBexMode()) {
     return
   }
-  const windowId = useWindowsStore().currentWindow?.id || 0
+  const windowId = useWindowsStore().currentChromeWindow?.id || 0
   currentChromeTab.value = useTabsStore().getCurrentChromeTab(windowId) || useTabsStore().currentChromeTab
 })
 
@@ -360,7 +353,7 @@ const toggleShowWindowTable = () => {
   if (showWindowTable.value) {
     randomKey.value = uid()
   }
-  const windowId = useWindowsStore().currentWindow?.id || 0
+  const windowId = useWindowsStore().currentChromeWindow?.id || 0
   const currentWindow: Window | undefined = useWindowsStore().windowForId(windowId)
   if (currentWindow) {
     currentWindow.open = showWindowTable.value
diff --git a/src/components/dialogues/helper/NewTabsetDialogBody.vue b/src/components/dialogues/helper/NewTabsetDialogBody.vue
index 13ec9332..57be7aa3 100644
--- a/src/components/dialogues/helper/NewTabsetDialogBody.vue
+++ b/src/components/dialogues/helper/NewTabsetDialogBody.vue
@@ -140,7 +140,7 @@ const createNewTabset = () => {
   console.log("createNewTabset", addAllOpenTabs.value, tabsStore.tabs, windowModel.value)
   let tabsToUse = addAllOpenTabs.value ? tabsStore.tabs : []
   if (props.windowId) {
-    const window:chrome.windows.Window | undefined = useWindowsStore().currentWindowForId(props.windowId)
+    const window:chrome.windows.Window | undefined = useWindowsStore().currentChromeWindow(props.windowId)
     if (window) {
       tabsToUse = window.tabs as chrome.tabs.Tab[]
       windowModel.value = newTabsetName.value
diff --git a/src/components/helper/SidePanelWindowMarkupTable.vue b/src/components/helper/SidePanelWindowMarkupTable.vue
index 6ed2d78c..b2e21535 100644
--- a/src/components/helper/SidePanelWindowMarkupTable.vue
+++ b/src/components/helper/SidePanelWindowMarkupTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="col-12 text-right">
+  <div class="col-12 text-right bg-grey-1">
 
     <Transition name="bounceInLeft" appear>
 
@@ -36,7 +36,7 @@
               style="max-height:15px">
             <!--            <td>{{ row['index' as keyof object] }}</td>-->
             <!--            <td>{{ row['state' as keyof object] }}</td>-->
-            <td class="text-left" :class="windowNameRowClass(row)" style="cursor:move">
+            <td class="text-left" :class="windowNameRowClass(row)" style="cursor:move" :data-testid="'windowDataColumn_name_' + row['id' as keyof object]">
               {{ row['name' as keyof object] }}
               <q-popup-edit v-model="row['name' as keyof object]"
                             @save="(val:string, initial:string) => setWindowName(row, val)"
@@ -45,8 +45,9 @@
                          dense autofocus counter
                          @keyup.enter="scope.set"/>
               </q-popup-edit>
+              <q-tooltip class="tooltip-small">{{row['hostList' as keyof object]}}</q-tooltip>
             </td>
-            <td>
+            <td :data-testid="'windowDataColumn_tabsCount_' + row['id' as keyof object]">
               {{ row['tabsCount' as keyof object] }}
             </td>
             <td>
@@ -59,7 +60,7 @@
                 </q-icon>
                 <q-icon name="open_in_new"
                         class="q-ml-sm cursor-pointer"
-                        :class="useWindowsStore().currentWindow?.id === row['id' as keyof object] ? 'text-grey' : 'text-blue-8 cursor-pointer'"
+                        :class="useWindowsStore().currentChromeWindow?.id === row['id' as keyof object] ? 'text-grey' : 'text-blue-8 cursor-pointer'"
                         @click="openWindow(row['id' as keyof object])">
                   <q-tooltip :delay=500 class="tooltip-small">Open this window</q-tooltip>
                 </q-icon>
@@ -114,6 +115,9 @@ import TabsetService from "src/services/TabsetService";
 import {useSuggestionsStore} from "stores/suggestionsStore";
 import MqttService from "src/services/mqtt/MqttService";
 import AppService from "src/services/AppService";
+import {useNotificationHandler} from "src/services/ErrorHandler";
+
+const {handleSuccess, handleError} = useNotificationHandler()
 
 const $q = useQuasar()
 
@@ -124,46 +128,41 @@ const windowsToOpen = ref<string>('')
 const windowsToOpenOptions = ref<object[]>([])
 const hoveredWindow = ref<number | undefined>(undefined)
 
+const windowsUpdatedListener = (message:any, sender:chrome.runtime.MessageSender, sendResponse:any) => {
+  if (message.name === 'window-updated') {
+    console.log("got message 'window-updated'", message)
+    useWindowsStore().setup('got window-updated message')
+      .then(() => rows.value = calcWindowRows())
+    //useUiStore().windowsChanged = message
+  }
+  return true
+}
+
 onMounted(() => {
   rows.value = calcWindowRows()
 })
 
-watch(() => useWindowsStore().currentWindows, (newWindows, oldWindows) => {
+watch(() => useWindowsStore().currentChromeWindows, (newWindows, oldWindows) => {
   console.log("windows changed", newWindows, oldWindows)
   rows.value = calcWindowRows()
 })
 
-chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
- if (message.name === 'window-updated') {
-    console.log("got message 'window-updated'", message)
-    useWindowsStore().setup('got window-updated message')
-      .then(() => rows.value = calcWindowRows())
-    //useUiStore().windowsChanged = message
-  }
-  return true
+//console.log("====>: chrome.runtime.onMessage.hasListeners(windowsUpdatedListener)", chrome.runtime.onMessage.hasListener(windowsUpdatedListener))
+chrome.runtime.onMessage.addListener(windowsUpdatedListener)
+
+chrome.tabs.onRemoved.addListener((tabId: number, removeInfo: chrome.tabs.TabRemoveInfo) => {
+  console.log ("***here we are", tabId, removeInfo)
+  useWindowsStore().setup('got window-updated message')
+    .then(() => rows.value = calcWindowRows())
+    .catch((err) => handleError(err))
 })
 
-// watchEffect(() => {
-//   const windowChangedEvent = useUiStore().windowsChanged
-//   if (windowChangedEvent) {
-//     const data = windowChangedEvent['data' as keyof object]
-//     console.log("ui store: windowsChanged", data)
-//
-//     setTimeout(() => {rows.value = calcWindowRows()}, 1000)
-//     // const windowId = data['windowId' as keyof object]
-//     // const title = data['title' as keyof object]
-//     // const index = data['index' as keyof object]
-//     //
-//     // const w = _.find(rows.value, r => r['id' as keyof object] === windowId)
-//     // if (w) {
-//     //   console.log("found w", w)
-//     //   w['title' as keyof object] = title
-//     //   w['index' as keyof object] = index
-//     // }
-//
-//     useUiStore().windowsChanged = undefined
-//   }
-// })
+chrome.tabs.onCreated.addListener((tab: chrome.tabs.Tab) => {
+  console.log ("***here we are2", tab)
+  useWindowsStore().setup('got window-updated message')
+    .then(() => rows.value = calcWindowRows())
+    .catch((err) => handleError(err))
+})
 
 watchEffect(() => {
   // adding potentially new windows from 'open in window' logic
@@ -172,7 +171,7 @@ watchEffect(() => {
     if (ts.window !== "current") {
       const found = _.find(rows.value, (r: object) => ts.window === r['name' as keyof object])
       if (!found) {
-        console.log("about to add new window with title", ts.window)
+        //console.debug (" about to add new window with title", ts.window)
         windowsToOpenOptions.value.push({
           label: ts.window,
           value: ts.id
@@ -182,10 +181,9 @@ watchEffect(() => {
   }
 })
 
-
 watchEffect(() => {
-  const res = useWindowsStore().currentWindow && useWindowsStore().currentWindow.id ?
-    useWindowsStore().windowNameFor(useWindowsStore().currentWindow.id || 0) || 'n/a' :
+  const res = useWindowsStore().currentChromeWindow && useWindowsStore().currentChromeWindow.id ?
+    useWindowsStore().windowNameFor(useWindowsStore().currentChromeWindow.id || 0) || 'n/a' :
     'n/a'
   currentWindowName.value = res
 })
@@ -204,7 +202,7 @@ const openNewWindow = (w: object) => {
 }
 
 const openWindow = (windowId: number) => {
-  if (useWindowsStore().currentWindow?.id !== windowId) {
+  if (useWindowsStore().currentChromeWindow?.id !== windowId) {
     chrome.windows.update(windowId, {drawAttention: true, focused: true},
       (callback) => {
       })
@@ -233,11 +231,11 @@ const closeWindow = (windowId: number) => {
 }
 
 const calcWindowRows = () => {
-  console.log("calculating window Rows")
-  const result = _.map(useWindowsStore().currentWindows as chrome.windows.Window[], (cw: chrome.windows.Window) => {
+  //console.log("calculating window Rows")
+  const result = _.map(useWindowsStore().currentChromeWindows as chrome.windows.Window[], (cw: chrome.windows.Window) => {
     const windowFromStore: Window | undefined = useWindowsStore().windowForId(cw.id || -2)
 
-    console.debug(`setting window ${cw.id} ['${windowFromStore?.title}'] (#${cw.tabs?.length} tabs) -> #${windowFromStore?.index}`)
+   // console.debug(`setting window ${cw.id} ['${windowFromStore?.title}'] (#${cw.tabs?.length} tabs, #${windowFromStore?.hostList.size} hosts) -> #${windowFromStore?.index}`)
 
     return {
       id: cw.id,
@@ -252,7 +250,8 @@ const calcWindowRows = () => {
       sessionId: cw.sessionId,
       state: cw.state,
       type: cw.type,
-      windowIcon: "*"
+      windowIcon: "*",
+      hostList: windowFromStore?.hostList
     }
   })
 
@@ -264,9 +263,10 @@ const setWindowName = (windowRow: object, newName: string) => {
   console.log("setWindowName", windowRow, newName)
   if (newName && newName.toString().trim().length > 0) {
     const id = windowRow['id' as keyof object]
-    chrome.windows.get(id, (cw) => {
+    chrome.windows.get(id, {populate: true},  (cw) => {
+      console.log("cw", cw)
       useWindowsStore().upsertWindow(cw, newName.toString().trim(), windowRow['index' as keyof object])
-      if (useWindowsStore().currentWindow?.id === id) {
+      if (useWindowsStore().currentChromeWindow?.id === id) {
         currentWindowName.value = newName
         //console.log("setting window name to ", currentWindowName.value)
         useWindowsStore().currentWindowName = newName
diff --git a/src/components/helper/SidePanelWindowTable.vue b/src/components/helper/SidePanelWindowTable.vue
index fdf1426c..78901209 100644
--- a/src/components/helper/SidePanelWindowTable.vue
+++ b/src/components/helper/SidePanelWindowTable.vue
@@ -104,20 +104,20 @@ onMounted(() => {
   rows.value = calcWindowRows()
 })
 
-watch(() => useWindowsStore().currentWindows, (newWindows, oldWindows) => {
+watch(() => useWindowsStore().currentChromeWindows, (newWindows, oldWindows) => {
   console.log("windows changed", newWindows, oldWindows)
   rows.value = calcWindowRows()
 })
 
 watchEffect(() => {
   const res = useWindowsStore().currentWindow && useWindowsStore().currentWindow.id ?
-    useWindowsStore().windowNameFor(useWindowsStore().currentWindow.id || 0) || 'n/a' :
+    useWindowsStore().windowNameFor(useWindowsStore().currentChromeWindow.id || 0) || 'n/a' :
     'n/a'
   currentWindowName.value = res
 })
 
 const openWindow = (windowId: number) => {
-  if (useWindowsStore().currentWindow?.id !== windowId) {
+  if (useWindowsStore().currentChromeWindow?.id !== windowId) {
     chrome.windows.update(windowId, {drawAttention: true, focused: true},
       (callback) => {
       })
@@ -142,7 +142,7 @@ const hideWindow = (windowId: number) => {
 }
 
 const restoreWindow = (windowId: number) => {
-  if (useWindowsStore().currentWindow?.id !== windowId) {
+  if (useWindowsStore().currentChromeWindow?.id !== windowId) {
     chrome.windows.update(windowId, {state: "normal"})
     useWindowsStore().refreshCurrentWindows()
   }
@@ -156,7 +156,7 @@ const closeWindow = (windowId: number) => {
 const calcWindowRows = () => {
   let index = 100
   const usedIndices: number[] = []
-  const result = _.map(useWindowsStore().currentWindows as chrome.windows.Window[], (cw: chrome.windows.Window) => {
+  const result = _.map(useWindowsStore().currentChromeWindows as chrome.windows.Window[], (cw: chrome.windows.Window) => {
     const windowFromStore: Window | undefined = useWindowsStore().windowForId(cw.id || -3)
     if (!windowFromStore || !windowFromStore.index) {
       console.log("found windowfromstore without index", windowFromStore)
@@ -195,9 +195,9 @@ const calcWindowRows = () => {
 const setWindowName = (windowRow: object, newName: string) => {
   if (newName && newName.toString().trim().length > 0) {
     const id = windowRow['id' as keyof object]
-    chrome.windows.get(id, (cw) => {
+    chrome.windows.get(id, {populate: true}, (cw) => {
       useWindowsStore().upsertWindow(cw, newName.toString().trim(), windowRow['index' as keyof object])
-      if (useWindowsStore().currentWindow?.id === id) {
+      if (useWindowsStore().currentChromeWindow?.id === id) {
         currentWindowName.value = newName
         //console.log("setting window name to ", currentWindowName.value)
         useWindowsStore().currentWindowName = newName
diff --git a/src/models/Window.ts b/src/models/Window.ts
index 5b580c58..ef616189 100644
--- a/src/models/Window.ts
+++ b/src/models/Window.ts
@@ -9,7 +9,7 @@ export class Window {
       public title: string | undefined = undefined,
       public index: number = 0,
       public open = false,
-      public hostList: Set<string> = new Set()) {
+      public hostList: string[] = []) { // could not use sets due to issues
 
     this.created = new Date().getTime()
   }
@@ -17,5 +17,5 @@ export class Window {
 }
 
 Window.prototype.toString = function tabToString() {
-  return `Window: {id=${this.id}, browserWindow=${this.browserWindow !== undefined}, title=${this.title}, index=${this.index}, open=${this.open}, #hostList=${this.hostList.size}}`;
+  return `Window: {id=${this.id}, browserWindow=${this.browserWindow !== undefined}, title=${this.title}, index=${this.index}, open=${this.open}, #hostList=${this.hostList.length}}`;
 };
diff --git a/src/pages/SidePanelPage.vue b/src/pages/SidePanelPage.vue
index 4fb39f9c..a6675d4c 100644
--- a/src/pages/SidePanelPage.vue
+++ b/src/pages/SidePanelPage.vue
@@ -546,7 +546,7 @@ watchEffect(() => {
 })
 
 watchEffect(() => {
-  const windowId = useWindowsStore().currentWindow?.id || 0
+  const windowId = useWindowsStore().currentChromeWindow?.id || 0
   currentChromeTab.value = useTabsStore().getCurrentChromeTab(windowId) || useTabsStore().currentChromeTab
 })
 
@@ -616,6 +616,7 @@ function inIgnoredMessages(message: any) {
   return message.msg === "html2text" ||
     message.msg === "captureThumbnail" ||
     message.msg === "capture-annotation" ||
+    message.name === "window-updated" ||
     message.msg === "html2links"
 }
 
@@ -720,10 +721,6 @@ if ($q.platform.is.chrome) {
         //   } else {
         //     chrome.tabs.sendMessage(message.data.tabId, "cs-iframe-open")
         //   }
-      } else if (message.name === 'window-updated') {
-        console.log("got message 'window-updated'!", message)
-        //useWindowsStore().setup('got window-updated message')
-        //useUiStore().windowsChanged = message
       } else if (message.name === 'mqtt-url-changed') {
         console.log("got message 'mqtt-url-changed'", message)
         MqttService.reset().then(() => MqttService.init(message.data.mqttUrl))
@@ -862,6 +859,7 @@ const showAddTabButton = (tabset: Tabset, currentChromeTab: chrome.tabs.Tab) =>
     currentChromeTab.url !== 'chrome://newtab/' &&
     currentChromeTab.url.indexOf('/www/index.html#/mainpanel/notes/') < 0 &&
     currentChromeTab.url !== '' &&
+    currentChromeTab.url.indexOf('https://tabsets.web.app/?apiKey=') < 0 &&
     tabsStore.currentTabsetId === tabset.id
   //isCurrentTab()
 }
diff --git a/src/pages/SidePanelSpacesPage.vue b/src/pages/SidePanelSpacesPage.vue
index 47e4a2d4..d0441a01 100644
--- a/src/pages/SidePanelSpacesPage.vue
+++ b/src/pages/SidePanelSpacesPage.vue
@@ -246,7 +246,7 @@ watchEffect(() => {
 
 watchEffect(() => {
   //currentChromeTab.value = useTabsStore().currentChromeTab
-  const windowId = useWindowsStore().currentWindow?.id || 0
+  const windowId = useWindowsStore().currentChromeWindow?.id || 0
   currentChromeTab.value = useTabsStore().getCurrentChromeTab(windowId) || useTabsStore().currentChromeTab
 })
 
diff --git a/src/pages/SidePanelTabsetPage.vue b/src/pages/SidePanelTabsetPage.vue
index 5563e7dd..1560fe04 100644
--- a/src/pages/SidePanelTabsetPage.vue
+++ b/src/pages/SidePanelTabsetPage.vue
@@ -119,7 +119,7 @@ watchEffect(() => {
 })
 
 watchEffect(() => {
-  const windowId = useWindowsStore().currentWindow?.id || 0
+  const windowId = useWindowsStore().currentChromeWindow?.id || 0
   currentChromeTab.value = useTabsStore().getCurrentChromeTab(windowId) || useTabsStore().currentChromeTab
 })
 
diff --git a/src/pages/sidepanel/SidePanelTabInfo.vue_ b/src/pages/sidepanel/SidePanelTabInfo.vue_
index 028cf8de..887797b1 100644
--- a/src/pages/sidepanel/SidePanelTabInfo.vue_
+++ b/src/pages/sidepanel/SidePanelTabInfo.vue_
@@ -52,7 +52,7 @@ watchEffect(() => {
 })
 
 watchEffect(() => {
-  const windowId = useWindowsStore().currentWindow?.id || 0
+  const windowId = useWindowsStore().currentChromeWindow?.id || 0
   currentChromeTab.value = useTabsStore().getCurrentChromeTab(windowId) || useTabsStore().currentChromeTab
 })
 
diff --git a/src/pages/sidepanel/helper/FirstToolbarHelper.vue b/src/pages/sidepanel/helper/FirstToolbarHelper.vue
index dc66729a..85a69d1a 100644
--- a/src/pages/sidepanel/helper/FirstToolbarHelper.vue
+++ b/src/pages/sidepanel/helper/FirstToolbarHelper.vue
@@ -171,7 +171,7 @@ const stopSession = () => {
 }
 
 // const createWebsiteClipTooltip = () => {
-//   const windowId = useWindowsStore().currentWindow.id || 0
+//   const windowId = useWindowsStore().currentChromeWindow.id || 0
 //   const currentChromeTab = useTabsStore().getCurrentChromeTab(windowId) || useTabsStore().currentChromeTab
 //   return "Create Website Clip for tab " + currentChromeTab.url
 // }
@@ -179,7 +179,7 @@ const stopSession = () => {
 const webClipActive = () => tabsStore.currentChromeTab
 
 // const createClip = () => {
-//   const windowId = useWindowsStore().currentWindow.id || 0
+//   const windowId = useWindowsStore().currentChromeWindow.id || 0
 //   const currentChromeTab = useTabsStore().getCurrentChromeTab(windowId) || useTabsStore().currentChromeTab
 //   if (currentChromeTab && currentChromeTab.id) {
 //     ChromeApi.executeClippingJS(currentChromeTab.id)
diff --git a/src/services/AppService.ts b/src/services/AppService.ts
index a31ea692..9ba752da 100644
--- a/src/services/AppService.ts
+++ b/src/services/AppService.ts
@@ -2,7 +2,7 @@ import {usePermissionsStore} from "stores/permissionsStore";
 import ChromeListeners from "src/services/ChromeListeners";
 import ChromeBookmarkListeners from "src/services/ChromeBookmarkListeners";
 import BookmarksService from "src/services/BookmarksService";
-import {LocalStorage, useQuasar} from "quasar";
+import {LocalStorage} from "quasar";
 import IndexedDbPersistenceService from "src/services/IndexedDbPersistenceService";
 import {useNotificationsStore} from "stores/notificationsStore";
 import {useDB} from "src/services/usePersistenceService";
@@ -17,7 +17,7 @@ import {useSettingsStore} from "stores/settingsStore";
 import {useBookmarksStore} from "stores/bookmarksStore";
 import {useWindowsStore} from "src/stores/windowsStore";
 import {useSearchStore} from "stores/searchStore";
-import {Router, useRouter} from "vue-router";
+import {Router} from "vue-router";
 import {useGroupsStore} from "stores/groupsStore";
 import {FeatureIdent} from "src/models/AppFeature";
 import {useMessagesStore} from "src/stores/messagesStore";
@@ -30,16 +30,12 @@ import {useUiStore} from "stores/uiStore";
 import {User} from "firebase/auth";
 import {Account} from "src/models/Account";
 
-//const log = (s: string, ...args: any[]) => console.log("%c" + s, "font-weight:bold", ...args)
-//const debug = (s: string, ...args: any[]) => console.debug("%c" + s, "font-weight:bold", ...args)
-
 function useGitStore(st: SyncType, su: string | undefined) {
   const isAuthenticated = useAuthStore().isAuthenticated()
   console.debug("%cisAuthenticated", "font-weight:bold", isAuthenticated)
   return isAuthenticated && st && (st === SyncType.GITHUB || st === SyncType.MANAGED_GIT) && su
 }
 
-
 class AppService {
 
   router: Router = null as unknown as Router
@@ -54,6 +50,11 @@ class AppService {
       return Promise.resolve()
     }
 
+    if (this.initialized) {
+      await ChromeListeners.resetListeners()
+      await useWindowsStore().resetListeners()
+    }
+
     this.initialized = true
 
     const appStore = useAppStore()
@@ -70,13 +71,11 @@ class AppService {
     appStore.init()
 
     // init of stores and some listeners
-    usePermissionsStore().initialize(useDB(quasar).localDb)
-      .then(() => {
-        ChromeListeners.initListeners()
-        ChromeBookmarkListeners.initListeners()
-        bookmarksStore.init()
-        BookmarksService.init()
-      })
+    await usePermissionsStore().initialize(useDB(quasar).localDb)
+    await ChromeListeners.initListeners()
+    ChromeBookmarkListeners.initListeners()
+    await bookmarksStore.init()
+    await BookmarksService.init()
     settingsStore.initialize(quasar.localStorage);
     tabsStore.initialize(quasar.localStorage).catch((err) => console.error("***" + err))
 
@@ -85,7 +84,6 @@ class AppService {
 
     // init db
     await IndexedDbPersistenceService.init("db")
-    //  .then(() => {
 
     // init services
     useAuthStore().initialize(useDB(undefined).db)
@@ -108,19 +106,15 @@ class AppService {
       const dbOrGitDb = useGitStore(syncType, syncUrl) ?
         useDB(undefined).gitDb :
         useDB(undefined).db
-      console.debug("%cchecking sync config:","font-weight:bold", syncType, syncUrl, dbOrGitDb)
+      console.debug("%cchecking sync config:", "font-weight:bold", syncType, syncUrl, dbOrGitDb)
 
       const gitInitResult = await GitPersistentService.init(syncType, syncUrl)
-      //  .then((gitInitResult: string) => {
       console.log("%cgitInitResult", "font-weight:bold", gitInitResult)
       await this.initCoreSerivces(quasar, dbOrGitDb, this.router)
-      //   })
     } else {
       await this.initCoreSerivces(quasar, useDB(undefined).db, this.router)
     }
 
-    //   })
-
 
     useNotificationsStore().bookmarksExpanded = quasar.localStorage.getItem("bookmarks.expanded") || []
 
@@ -128,14 +122,14 @@ class AppService {
 
 
   restart(ar: string) {
-    console.log("%c>>> restarting tabsets","font-weight:bold", window.location.href, ar)
+    console.log("%c>>> restarting tabsets", "font-weight:bold", window.location.href, ar)
     const baseLocation = window.location.href.split("?")[0]
     console.log("%c>>> baseLocation", "font-weight:bold", baseLocation)
     if (window.location.href.indexOf("?") < 0) {
       const tsIframe = window.parent.frames[0]
       //log("iframe", tsIframe)
       if (tsIframe) {
-        console.debug("%c>>> new window.location.href","font-weight:bold", baseLocation + "?" + ar)
+        console.debug("%c>>> new window.location.href", "font-weight:bold", baseLocation + "?" + ar)
         tsIframe.location.href = baseLocation + "?" + ar
         //tsIframe.location.href = "https://www.skysail.io"
         tsIframe.location.reload()
@@ -150,31 +144,27 @@ class AppService {
     const groupsStore = useGroupsStore()
     const tabsStore = useTabsStore()
 
-    spacesStore.initialize(dbOrGitDb)
-      .then(() => {
-        useTabsetService().init(dbOrGitDb, false)
-          .then(() => {
-            MHtmlService.init()
-            ChromeApi.init(router)
-
-            if (usePermissionsStore().hasFeature(FeatureIdent.TAB_GROUPS)) {
-              groupsStore.initialize(useDB(undefined).db)
-              groupsStore.initListeners()
-            }
-
-            windowsStore.initialize(useDB(undefined).db)
-            windowsStore.initListeners()
-
-            useUiStore().appLoading = false
-
-            // tabsets not in bex mode means running on "shared.tabsets.net"
-            // probably running an import ("/imp/:sharedId")
-            // we do not want to go to the welcome back
-            if (tabsStore.tabsets.size === 0 && quasar.platform.is.bex && !useAuthStore().isAuthenticated()) {
-              router.push("/sidepanel/welcome")
-            }
-          })
-      })
+    await spacesStore.initialize(dbOrGitDb)
+    await useTabsetService().init(dbOrGitDb, false)
+    await MHtmlService.init()
+    ChromeApi.init(router)
+
+    if (usePermissionsStore().hasFeature(FeatureIdent.TAB_GROUPS)) {
+      await groupsStore.initialize(useDB(undefined).db)
+      groupsStore.initListeners()
+    }
+
+    await windowsStore.initialize(useDB(undefined).db)
+    windowsStore.initListeners()
+
+    useUiStore().appLoading = false
+
+    // tabsets not in bex mode means running on "shared.tabsets.net"
+    // probably running an import ("/imp/:sharedId")
+    // we do not want to go to the welcome back
+    if (tabsStore.tabsets.size === 0 && quasar.platform.is.bex && !useAuthStore().isAuthenticated()) {
+      await router.push("/sidepanel/welcome")
+    }
 
 
   }
diff --git a/src/services/ChromeApi.ts b/src/services/ChromeApi.ts
index 73687bc8..b0dc4ac6 100644
--- a/src/services/ChromeApi.ts
+++ b/src/services/ChromeApi.ts
@@ -190,8 +190,8 @@ class ChromeApi {
                 contexts: ['all']
               })
 
-              console.log("context menu", useWindowsStore().currentWindows)
-              const currentWindows = useWindowsStore().currentWindows
+              console.log("context menu", useWindowsStore().currentChromeWindows)
+              const currentWindows = useWindowsStore().currentChromeWindows
               if (currentWindows.length > 1) {
                 chrome.contextMenus.create({
                   id: 'move_to_window',
diff --git a/src/services/ChromeListeners.ts b/src/services/ChromeListeners.ts
index bd19e22d..d20af07b 100644
--- a/src/services/ChromeListeners.ts
+++ b/src/services/ChromeListeners.ts
@@ -17,13 +17,7 @@ import {useUtils} from "src/services/Utils";
 import {useGroupsStore} from "stores/groupsStore";
 import NavigationService from "src/services/NavigationService";
 import ContentUtils from "src/utils/ContentUtils";
-// @ts-ignore
-import rangy from "rangy/lib/rangy-core.js";
-//import "rangy/lib/rangy-highlighter";
-//import "rangy/lib/rangy-classapplier";
-//import "rangy/lib/rangy-textrange";
 import "rangy/lib/rangy-serializer";
-import {useRoute, useRouter} from "vue-router";
 import {useAuthStore} from "stores/authStore";
 import {EMAIL_LINK_REDIRECT_DOMAIN} from "boot/constants";
 
@@ -57,30 +51,7 @@ async function setCurrentTab() {
 
 function annotationScript(tabId: string, annotations: any[]) {
   console.log("!!! here in annotation script", tabId, annotations)
-//
-//   const
-//     iFrame = document.createElement('iframe'),
-//     defaultFrameHeight = '62px'
-//
-//   iFrame.id = 'bex-app-iframe'
-//   iFrame.width = '100%'
-//  // resetIFrameHeight()
-//
-// // Assign some styling so it looks seamless
-// //   Object.assign(iFrame.style, {
-// //     position: 'fixed',
-// //     top: '0',
-// //     right: '0',
-// //     bottom: '0',
-// //     left: '0',
-// //     border: '0',
-// //     zIndex: '9999999', // Make sure it's on top
-// //     overflow: 'visible'
-// //   })
-//
-//   //iFrame.src = chrome.runtime.getURL('/www/index.html#/annotations/' + tabId)
-//   //document.body.prepend(iFrame)
-//
+
   var l: HTMLLinkElement = document.createElement('link');
   l.setAttribute("href", chrome.runtime.getURL('www/css/ts-content-script.css'))
   l.setAttribute("rel", "stylesheet")
@@ -152,6 +123,32 @@ class ChromeListeners {
 
   throttleOnePerSecond = throttledQueue(1, 1000, true)
 
+  private onCreatedListener = (tab: chrome.tabs.Tab) => this.onCreated(tab)
+  private onUpdatedListener = (number: number, info: chrome.tabs.TabChangeInfo, tab: chrome.tabs.Tab) => this.onUpdated(number, info, tab)
+  private onMovedListener = (number: number, info: chrome.tabs.TabMoveInfo) => this.onMoved(number, info)
+  private onRemovedListener = (number: number, info: chrome.tabs.TabRemoveInfo) => this.onRemoved(number, info)
+  private onReplacedListener = (n1: number, n2: number) => this.onReplaced(n1, n2)
+  private onActivatedListener = (info: chrome.tabs.TabActiveInfo) => this.onActivated(info)
+  private onAttachedListener = (number: number, info: chrome.tabs.TabAttachInfo) => this.onAttached(number, info)
+  private onDetachedListener = (number: number, info: chrome.tabs.TabDetachInfo) => this.onDetached(number, info)
+  private onHighlightedListener = (info: chrome.tabs.TabHighlightInfo) => this.onHighlighted(info)
+  private onMessageListener = (request: any, sender: chrome.runtime.MessageSender, sendResponse: any) => this.onMessage(request, sender, sendResponse)
+  private onCommandListener = (command: string) => {
+    switch (command) {
+      case 'tabHistoryBack':
+        NavigationService.backOneTab()
+        break
+      case 'tabHistoryForward':
+        NavigationService.forwardOneTab()
+        break
+      case 'search':
+        break
+      default:
+        console.log(`unknown Command: ${command}`);
+        break
+    }
+  }
+
   async initListeners() {
 
     if (process.env.MODE === 'bex') {
@@ -162,18 +159,18 @@ class ChromeListeners {
 
       await setCurrentTab()
 
-      chrome.tabs.onCreated.addListener((tab: chrome.tabs.Tab) => this.onCreated(tab))
-      chrome.tabs.onUpdated.addListener((number, info, tab) => this.onUpdated(number, info, tab))
-      chrome.tabs.onMoved.addListener((number, info) => this.onMoved(number, info))
-      chrome.tabs.onRemoved.addListener((number, info) => this.onRemoved(number, info))
-      chrome.tabs.onReplaced.addListener((n1, n2) => this.onReplaced(n1, n2))
-      chrome.tabs.onActivated.addListener((info) => this.onActivated(info))
-      chrome.tabs.onAttached.addListener((number, info) => this.onAttached(number, info))
-      chrome.tabs.onDetached.addListener((number, info) => this.onDetached(number, info))
-      chrome.tabs.onHighlighted.addListener((info) => this.onHighlighted(info))
+      chrome.tabs.onCreated.addListener(this.onCreatedListener)
+      chrome.tabs.onUpdated.addListener(this.onUpdatedListener)
+      chrome.tabs.onMoved.addListener(this.onMovedListener)
+      chrome.tabs.onRemoved.addListener(this.onRemovedListener)
+      chrome.tabs.onReplaced.addListener(this.onReplacedListener)
+      chrome.tabs.onActivated.addListener(this.onActivatedListener)
+      chrome.tabs.onAttached.addListener(this.onAttachedListener)
+      chrome.tabs.onDetached.addListener(this.onDetachedListener)
+      chrome.tabs.onHighlighted.addListener(this.onHighlightedListener)
       //chrome.tabs.onZoomChange.addListener((info) => this.onZoomChange(info))
 
-      chrome.runtime.onMessage.addListener((request, sender, sendResponse) => this.onMessage(request, sender, sendResponse))
+      chrome.runtime.onMessage.addListener(this.onMessageListener)
 
       // seems to belong in background.ts
       // chrome.runtime.onInstalled.addListener((callback) => {
@@ -187,22 +184,9 @@ class ChromeListeners {
       //   }
       // });
 
-      chrome.commands.onCommand.addListener((command) => {
-        switch (command) {
-          case 'tabHistoryBack':
-            NavigationService.backOneTab()
-            break
-          case 'tabHistoryForward':
-            NavigationService.forwardOneTab()
-            break
-          case 'search':
-            break
-          default:
-            console.log(`unknown Command: ${command}`);
-            break
-        }
-      });
+      chrome.commands.onCommand.addListener(this.onCommandListener);
 
+      // TODO removed listeners as well?
       if (usePermissionsStore().hasFeature(FeatureIdent.NOTIFICATIONS)) {
         chrome.notifications.onButtonClicked.addListener(
           (notificationId, buttonIndex) => {
@@ -220,6 +204,21 @@ class ChromeListeners {
 
   }
 
+  async resetListeners() {
+    console.log(" ...resetting listeners (after re-initialization)")
+    chrome.tabs.onCreated.removeListener(this.onCreatedListener)
+    chrome.tabs.onUpdated.removeListener(this.onUpdatedListener)
+    chrome.tabs.onMoved.removeListener(this.onMovedListener)
+    chrome.tabs.onRemoved.removeListener(this.onRemovedListener)
+    chrome.tabs.onReplaced.removeListener(this.onReplacedListener)
+    chrome.tabs.onActivated.removeListener(this.onActivatedListener)
+    chrome.tabs.onAttached.removeListener(this.onAttachedListener)
+    chrome.tabs.onDetached.removeListener(this.onDetachedListener)
+    chrome.tabs.onHighlighted.removeListener(this.onHighlightedListener)
+    chrome.runtime.onMessage.removeListener(this.onMessageListener)
+    chrome.commands.onCommand.removeListener(this.onCommandListener);
+  }
+
   clearWorking() {
     if (this.inProgress) {
       const tabsStore = useTabsStore()
@@ -245,7 +244,7 @@ class ChromeListeners {
       return
     }
     this.eventTriggered()
-    console.debug(`onCreated: tab ${tab.id}: >>> ${tab.pendingUrl}`)
+    console.debug(`onCreated: tab ${tab.id}: >>> ${tab.pendingUrl}`, tab)
     sendMsg('window-updated', {})
     const tabsStore = useTabsStore()
 
@@ -457,15 +456,10 @@ class ChromeListeners {
 
   onRemoved(number: number, info: chrome.tabs.TabRemoveInfo) {
     this.eventTriggered()
+    console.log("onRemoved tab event: ", number, info)
+    //useWindowsStore().refreshCurrentWindows()
+    useWindowsStore().refreshTabsetWindow(info.windowId)
     sendMsg('window-updated', {})
-    const tabsStore = useTabsStore()
-    const currentTabset: Tabset = tabsStore.tabsets.get(tabsStore.currentTabsetId) as Tabset || new Tabset("", "", [], [])
-    const index = _.findIndex(currentTabset.tabs, t => t.chromeTabId === number);
-    if (index >= 0) {
-      const updatedTab = currentTabset.tabs.at(index)
-      if (updatedTab) {
-      }
-    }
   }
 
   onReplaced(n1: number, n2: number) {
diff --git a/src/services/IndexedDbPersistenceService.ts b/src/services/IndexedDbPersistenceService.ts
index 47cfc87d..861c4755 100644
--- a/src/services/IndexedDbPersistenceService.ts
+++ b/src/services/IndexedDbPersistenceService.ts
@@ -24,11 +24,12 @@ import {Window} from "src/models/Window";
 import {BlobType, SavedBlob} from "src/models/SavedBlob";
 import {Message} from "src/models/Message";
 import {Account} from "src/models/Account";
-import {logtail} from "boot/logtail";
 
 class IndexedDbPersistenceService implements PersistenceService {
   private db: IDBPDatabase = null as unknown as IDBPDatabase
 
+  getServiceName(): string { return "IndexedDbPersistenceService" }
+
   async init(dbName: string) {
     console.log(" ...initializing indexeddb database", dbName)
     this.db = await this.initDatabase(dbName)
@@ -520,48 +521,49 @@ class IndexedDbPersistenceService implements PersistenceService {
   /*** Windows Management ***/
 
   async addWindow(window: Window): Promise<any> {
-    //console.log("%cadding window", "background-color:yellow", window)
+    console.debug("adding window", `id=${window.id}, index=${window.index}, #hostList=${window.hostList.length}`)
     const existingWindowForWindowId = await this.db.get('windows', window.id)
     if (existingWindowForWindowId) {
       // not bad, simply resolve
+      console.debug("key already exists")
       return Promise.resolve("Key already exists")
     }
     //if (!window.title) {
-      // try to find matching window
-      console.log("trying to add new window ", window.toString())
-      const allWindows: Window[] = await this.db.getAll('windows') as Window[]
-      console.log(`adding window ${window.id} to window list [${_.join(_.map(allWindows, w => w.id), ',')}]`)
-      for (const w of allWindows) {
-        console.log("comparing hostLists", window.hostList, w.hostList, typeof w.hostList)
-        const intersection = new Set([...window.hostList].filter(x => (w.hostList instanceof Set && w.hostList.has(x))));
-        console.log("intersection", intersection)
-        if (intersection.size === window.hostList.size && intersection.size === w.hostList.size) {
-          // reuse existing
-          const useId = window.id
-          const oldId = w.id
-          window = w
-          window.id = useId
-          console.warn("replacing old window " + oldId + " with " + JSON.stringify(window))
-
-          // logtail.warn("tabsets started", {
-          //   "mode": process.env.MODE,
-          //   "version": import.meta.env.PACKAGE_VERSION,
-          // })
-
-          this.db.delete('windows', oldId)
-          break
-        }
+    // try to find matching window
+    console.log("trying to add new window ", window.toString())
+    const allWindows: Window[] = await this.db.getAll('windows') as Window[]
+    console.log(`adding ${window.toString()} to list [${_.join(_.map(allWindows, w => w.id), ',')}]`)
+    for (const w of allWindows) {
+      console.log("comparing hostLists", window.hostList, w.hostList, typeof w.hostList)
+      const intersection = new Set([...window.hostList].filter(x => (new Set(w.hostList).has(x))));
+      console.log("intersection", intersection, intersection.size === window.hostList.length, intersection.size === w.hostList.length)
+      if (intersection.size === window.hostList.length && intersection.size === w.hostList.length) {
+        // reuse existing
+        const useId = window.id
+        const oldId = w.id
+        window = w
+        window.id = useId
+        console.warn("replacing old window " + oldId + " with " + window.toString())
+
+        // logtail.warn("tabsets started", {
+        //   "mode": process.env.MODE,
+        //   "version": import.meta.env.PACKAGE_VERSION,
+        // })
+
+        await this.db.delete('windows', oldId)
+        break
       }
+    }
     //}
     try {
       await this.db.add('windows', window, window.id)
     }
       //.then((res) => console.log("got res", res))
-      catch(err:any) {
-        if (!err.toString().indexOf('Key already exists')) {
-          console.log("error adding window", window, err)
-        }
+    catch (err: any) {
+      if (!err.toString().indexOf('Key already exists')) {
+        console.log("error adding window", window, err)
       }
+    }
   }
 
   // updateGroup(group: chrome.tabGroups.TabGroup): Promise<any> {
@@ -584,7 +586,7 @@ class IndexedDbPersistenceService implements PersistenceService {
   }
 
   async updateWindow(window: Window): Promise<void> {
-    console.log(`updating window #${window.id} => title: '${window.title}', index: ${window.index}, hostList: ${window.hostList.size}`)
+    console.log(`updating window id=${window.id}, title=${window.title}, index=${window.index}, #hostList=${window.hostList.length}`)
     if (!window.id) {
       return Promise.reject("window.id not set")
     }
@@ -596,15 +598,16 @@ class IndexedDbPersistenceService implements PersistenceService {
 
     asJson['title'] = window.title
     asJson['index'] = window.index
-    asJson['hostList'] = window.hostList
+    asJson['hostList'] = Array.from(window.hostList)
 
     delete asJson['tabs']
+    console.log("saving window json as ", asJson)
     await this.db.put('windows', asJson, window.id)
   }
 
   async upsertWindow(window: Window): Promise<void> {
     try {
-      console.log(`about to change window #${window.id}: title='${window.title}', index=${window.index}`)
+      console.log(`about to change window ${window.toString()}`)
       const asJson = JSON.parse(JSON.stringify(window))
       //asJson['title'] = name
       delete asJson['tabs']
diff --git a/src/services/NavigationService.ts b/src/services/NavigationService.ts
index 3ea5c05c..5be97007 100644
--- a/src/services/NavigationService.ts
+++ b/src/services/NavigationService.ts
@@ -9,7 +9,6 @@ import {usePermissionsStore} from "stores/permissionsStore";
 import {FeatureIdent} from "src/models/AppFeature";
 import {Suggestion, SuggestionType} from "src/models/Suggestion";
 import {useSuggestionsStore} from "stores/suggestionsStore";
-import TabsetService from "src/services/TabsetService";
 
 class NavigationService {
 
diff --git a/src/services/PersistenceService.ts b/src/services/PersistenceService.ts
index d80f0290..ad853d68 100644
--- a/src/services/PersistenceService.ts
+++ b/src/services/PersistenceService.ts
@@ -14,6 +14,8 @@ import {Account} from "src/models/Account";
 
 interface PersistenceService {
 
+  getServiceName(): string
+
   loadTabsets():Promise<void>
   reloadTabset(tabsetId: string): void
   saveTabset(tabset: Tabset): Promise<any>
diff --git a/src/services/PouchDbPersistenceService.ts b/src/services/PouchDbPersistenceService.ts
index b4ad03b0..7365d1b0 100644
--- a/src/services/PouchDbPersistenceService.ts
+++ b/src/services/PouchDbPersistenceService.ts
@@ -35,6 +35,8 @@ const throttleOne10Millis = throttledQueue(1, 10, true)
  */
 class PouchDbPersistenceService implements PersistenceService {
 
+  getServiceName(): string { return "PouchDbPersistenceService" }
+
   loadCategories(): Promise<any> {
     console.warn("loading categories... - not implemented")
     return Promise.reject("loadCategories not implemented")
diff --git a/src/services/TabsetService2.ts b/src/services/TabsetService2.ts
index 02af4016..15a0af2e 100644
--- a/src/services/TabsetService2.ts
+++ b/src/services/TabsetService2.ts
@@ -39,7 +39,7 @@ export function useTabsetService() {
 
   const init = async (providedDb: PersistenceService,
                       doNotInitSearchIndex: boolean = false) => {
-    console.log(" ...initializing tabsetService2", providedDb)
+    console.log(" ...initializing tabsetService2 as", providedDb.getServiceName())
     db = providedDb
 
     useTabsStore().clearTabsets()
diff --git a/src/services/Utils.ts b/src/services/Utils.ts
index 8a1d5785..d71380f5 100644
--- a/src/services/Utils.ts
+++ b/src/services/Utils.ts
@@ -3,90 +3,105 @@ import sanitizeHtml from "sanitize-html";
 import {Tab} from "src/models/Tab";
 import {useWindowsStore} from "stores/windowsStore";
 import {useTabsStore} from "stores/tabsStore";
+import _ from "lodash";
 
 export function useUtils() {
 
-    const formatDate = (timestamp: number | undefined) =>
-        timestamp ? formatDistance(timestamp, new Date(), {addSuffix: true}) : ""
+  const formatDate = (timestamp: number | undefined) =>
+    timestamp ? formatDistance(timestamp, new Date(), {addSuffix: true}) : ""
 
-    const createDataTestIdentifier = (prefix: string, url: string) =>
-        prefix + "_" + url.replace("https://", "").replaceAll('.', '').replaceAll("/", "")
+  const createDataTestIdentifier = (prefix: string, url: string) =>
+    prefix + "_" + url.replace("https://", "").replaceAll('.', '').replaceAll("/", "")
 
-    const inBexMode = () => process.env.MODE === 'bex'
-    const modeIs = (ident: string) => process.env.MODE === ident
+  const inBexMode = () => process.env.MODE === 'bex'
+  const modeIs = (ident: string) => process.env.MODE === ident
 
-    const normalize = (url: string): string => {
-        try {
-            new URL(url)
-            return url
-        } catch (err) {
-            return "https://" + url
-        }
+  const normalize = (url: string): string => {
+    try {
+      new URL(url)
+      return url
+    } catch (err) {
+      return "https://" + url
     }
+  }
 
-    const sanitize = (input: string): string => {
-        return sanitizeHtml(input, {
-            allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img']),
-            allowedAttributes: sanitizeHtml.defaults.allowedAttributes = {
-                a: ['href', 'name', 'target'],
-                img: ['src', 'srcset', 'alt', 'title', 'width', 'height', 'loading']
-            },
-            allowedSchemesByTag: {
-                img: ['data']
-            }
-        })
-    }
+  const sanitize = (input: string): string => {
+    return sanitizeHtml(input, {
+      allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img']),
+      allowedAttributes: sanitizeHtml.defaults.allowedAttributes = {
+        a: ['href', 'name', 'target'],
+        img: ['src', 'srcset', 'alt', 'title', 'width', 'height', 'loading']
+      },
+      allowedSchemesByTag: {
+        img: ['data']
+      }
+    })
+  }
 
-    const sanitizeAsText = (input: string): string => {
-        return sanitizeHtml(input, {
-            allowedTags: sanitizeHtml.defaults.allowedTags,//.concat(['img']),
-            allowedAttributes: sanitizeHtml.defaults.allowedAttributes = {
-                a: ['href', 'name', 'target']
-            }
-        })
-    }
+  const sanitizeAsText = (input: string): string => {
+    return sanitizeHtml(input, {
+      allowedTags: sanitizeHtml.defaults.allowedTags,//.concat(['img']),
+      allowedAttributes: sanitizeHtml.defaults.allowedAttributes = {
+        a: ['href', 'name', 'target']
+      }
+    })
+  }
 
-    const sendMsg = (msgName: string, data: object = {}) => {
-        if (inBexMode() && chrome) {
-            console.log("sending message", {name: msgName, data})
-            chrome.runtime.sendMessage({
-                name: msgName, data: data
-            }, (callback: any) => {
-                if (callback) {
-                    console.log("got callback", callback)
-                }
-                if (chrome.runtime.lastError) { /* ignore */
-                }
-            });
-        }
-    }
-    const isCurrentTab = (tab: Tab) => {
-        if (!inBexMode() || !tab.url) {
-            return false
-        }
-        const windowId = useWindowsStore().currentWindow?.id || 0
-        const currentChromeTab = useTabsStore().getCurrentChromeTab(windowId) || useTabsStore().currentChromeTab
-        //console.log("checking current tab", currentChromeTab.url, tab.url, currentChromeTab.url === tab.url)
-        if (currentChromeTab?.url === tab.url) {
-            tab.chromeTabId = currentChromeTab.id
-            return true
+  const sendMsg = (msgName: string, data: object = {}) => {
+    if (inBexMode() && chrome) {
+      console.log("sending message", {name: msgName, data})
+      chrome.runtime.sendMessage({
+        name: msgName, data: data
+      }, (callback: any) => {
+        if (callback) {
+          console.log("got callback", callback)
         }
-        //console.log("checking", currentChromeTab.url, "/" + btoa(tab.url || ''), currentChromeTab.url?.indexOf("/" + btoa(tab.url || '')) )
-        if (currentChromeTab?.url && currentChromeTab.url?.indexOf("/" + btoa(tab.url || '')) >= 0) {
-            return true
+        if (chrome.runtime.lastError) { /* ignore */
         }
-        return false
+      });
     }
+  }
+  const isCurrentTab = (tab: Tab) => {
+    if (!inBexMode() || !tab.url) {
+      return false
+    }
+    const windowId = useWindowsStore().currentChromeWindow?.id || 0
+    const currentChromeTab = useTabsStore().getCurrentChromeTab(windowId) || useTabsStore().currentChromeTab
+    //console.log("checking current tab", currentChromeTab.url, tab.url, currentChromeTab.url === tab.url)
+    if (currentChromeTab?.url === tab.url) {
+      tab.chromeTabId = currentChromeTab.id
+      return true
+    }
+    //console.log("checking", currentChromeTab.url, "/" + btoa(tab.url || ''), currentChromeTab.url?.indexOf("/" + btoa(tab.url || '')) )
+    if (currentChromeTab?.url && currentChromeTab.url?.indexOf("/" + btoa(tab.url || '')) >= 0) {
+      return true
+    }
+    return false
+  }
 
-    return {
-        formatDate,
-        createDataTestIdentifier,
-        inBexMode,
-        normalize,
-        modeIs,
-        sanitize,
-        sanitizeAsText,
-        sendMsg,
-        isCurrentTab
+  function urlToHost(url: string) {
+    try {
+      const theURL = new URL(url)
+      return theURL.host
+    } catch (err) {
+      return "?"
     }
+  }
+
+  const calcHostList = (tabs: chrome.tabs.Tab[]): string[] => {
+    return Array.from(new Set(_.map(tabs, bwTabs => urlToHost(bwTabs.url || ''))))
+  }
+
+  return {
+    formatDate,
+    createDataTestIdentifier,
+    inBexMode,
+    normalize,
+    modeIs,
+    sanitize,
+    sanitizeAsText,
+    sendMsg,
+    isCurrentTab,
+    calcHostList
+  }
 }
diff --git a/src/services/persistence/GitPersistentService.ts b/src/services/persistence/GitPersistentService.ts
index 0063b0a4..6d34e0bb 100644
--- a/src/services/persistence/GitPersistentService.ts
+++ b/src/services/persistence/GitPersistentService.ts
@@ -72,6 +72,8 @@ class GitPersistenceService implements PersistenceService {
 
   private useProxy = this.genericCorsProxy
 
+  getServiceName(): string { return "GitPersistenceService" }
+
   async init(syncType: SyncType, url: string | undefined) {
     console.log(" ...initializing GitPersistenceService")
     if (url) {
diff --git a/src/services/storage/LocalStoragePersistenceService.ts b/src/services/storage/LocalStoragePersistenceService.ts
index 57955b4b..5a4026cb 100644
--- a/src/services/storage/LocalStoragePersistenceService.ts
+++ b/src/services/storage/LocalStoragePersistenceService.ts
@@ -22,6 +22,8 @@ export class LocalStoragePersistenceService implements PersistenceService {
     this.quasar = quasar
   }
 
+  getServiceName(): string { return "LocalStoragePersistenceService" }
+
   deleteSpace(spaceId: string): void {
     throw new Error("Method not implemented.");
   }
diff --git a/src/stores/notificationsStore.ts b/src/stores/notificationsStore.ts
index bdf0ee47..e827285d 100644
--- a/src/stores/notificationsStore.ts
+++ b/src/stores/notificationsStore.ts
@@ -8,7 +8,6 @@ import {useUtils} from "src/services/Utils";
 import {useSuggestionsStore} from "stores/suggestionsStore";
 import {StaticSuggestionIdent, Suggestion} from "src/models/Suggestion";
 
-const {inBexMode} = useUtils()
 
 export const useNotificationsStore = defineStore('notifications', () => {
 
@@ -19,6 +18,9 @@ export const useNotificationsStore = defineStore('notifications', () => {
   const updateToVersion = ref('')
   const notifications = ref([] as unknown as Notification[])
 
+  const {inBexMode} = useUtils()
+
+
   /**
    * the (internal) storage for this store to use
    */
diff --git a/src/stores/spacesStore.ts b/src/stores/spacesStore.ts
index b1af1dae..97228f5d 100644
--- a/src/stores/spacesStore.ts
+++ b/src/stores/spacesStore.ts
@@ -43,7 +43,7 @@ export const useSpacesStore = defineStore('spaces', () => {
    * @param ps a persistence storage
    */
   async function initialize(ps: PersistenceService) {
-    console.debug(" ...initializing spacesStore", ps)
+    console.debug(" ...initializing spacesStore", ps.getServiceName())
     storage = ps
     await storage.loadSpaces()
   }
diff --git a/src/stores/windowsStore.ts b/src/stores/windowsStore.ts
index 08fc8b87..b31d2d22 100644
--- a/src/stores/windowsStore.ts
+++ b/src/stores/windowsStore.ts
@@ -6,7 +6,6 @@ import {Window} from "src/models/Window";
 import _ from "lodash"
 import throttledQueue from "throttled-queue";
 
-
 /**
  * a pinia store for "Windows".
  *
@@ -26,18 +25,14 @@ function closeTabWithTimeout(timeout: number, tabToCloseId: number | undefined =
   });
 }
 
-function urlToHost(url: string) {
-  try {
-    const theURL = new URL(url)
-    return theURL.host
-  } catch (err) {
-    return "?"
-  }
-}
-
 export const useWindowsStore = defineStore('windows', () => {
 
-  const {inBexMode, sendMsg} = useUtils()
+  const {inBexMode, sendMsg, calcHostList} = useUtils()
+
+  const onCreatedListener = () => setup("onCreated")
+  const onRemovedListener = (windowId: number) => onRemoved(windowId)
+  const onBoundsChangedListener = (window: chrome.windows.Window) => onUpdate(window.id || 0)
+  const onFocusChangedListener = (windowId:number) => { /** noop */ }
 
   /**
    * the map of all 'ever used' Chrome windows, even if they are not currently in use,
@@ -53,14 +48,14 @@ export const useWindowsStore = defineStore('windows', () => {
    *
    * Initialized at start (from chrome.windows.getAll) and on "onCreated" and "onRemoved" events.
    */
-  const currentWindows = ref<chrome.windows.Window[]>([])
+  const currentChromeWindows = ref<chrome.windows.Window[]>([])
 
   /**
    * the result of 'chrome.windows.getCurrent'
    *
    * Initialized at start and on "onCreated" and "onRemoved" events.
    */
-  const currentWindow = ref<chrome.windows.Window>(null as unknown as chrome.windows.Window) //null as unknown as chrome.windows.Window
+  const currentChromeWindow = ref<chrome.windows.Window>(null as unknown as chrome.windows.Window) //null as unknown as chrome.windows.Window
 
   /**
    * updated from 'allWindows' data when currentWindows is set.
@@ -93,12 +88,12 @@ export const useWindowsStore = defineStore('windows', () => {
     console.debug(" init chrome windows listeners with trigger", trigger)
     const browserWindows: chrome.windows.Window[] = await chrome.windows.getAll({populate: true})
 
-    currentWindows.value = browserWindows
-    console.debug(` initializing current windows with ${currentWindows.value.length} window(s)`)
+    currentChromeWindows.value = browserWindows
+    console.debug(` initializing current windows with ${currentChromeWindows.value.length} window(s)`)
 
     // adding potentially new windows to storage - adding windows will not do anything if the key already exists
     for (const browserWindow of browserWindows) {
-      const hostList = new Set(_.map(browserWindow.tabs, bwTabs => urlToHost(bwTabs.url || '')))
+      const hostList = calcHostList(browserWindow.tabs || [])
       const newWindow = new Window(browserWindow.id || 0, browserWindow, undefined, 0, false, hostList)
       await storage.addWindow(newWindow)
     }
@@ -135,7 +130,7 @@ export const useWindowsStore = defineStore('windows', () => {
       } else {
         allWindows.value.set(tabsetWindowFromStorage.id || 0, tabsetWindowFromStorage)
       }
-      console.log("allwindows set to ", allWindows.value)
+      //console.log("allwindows set to ", allWindows.value)
     }
     for (const id of allWindows.value.keys()) {
       const w = allWindows.value.get(id)
@@ -146,10 +141,10 @@ export const useWindowsStore = defineStore('windows', () => {
     //console.log("%callWindows assigned", "color:green", allWindows.value, windowSet.value)
 
     chrome.windows.getCurrent({windowTypes: ['normal']}, (window: chrome.windows.Window) => {
-      currentWindow.value = window
-      if (currentWindow.value && currentWindow.value.id) {
+      currentChromeWindow.value = window
+      if (currentChromeWindow.value && currentChromeWindow.value.id) {
         //console.log("%c******", "color:blue", currentWindow.value.id, windowNameFor(currentWindow.value.id))
-        currentWindowName.value = windowNameFor(currentWindow.value.id)
+        currentWindowName.value = windowNameFor(currentChromeWindow.value.id)
       }
     })
 
@@ -157,7 +152,7 @@ export const useWindowsStore = defineStore('windows', () => {
     if (chrome && chrome.contextMenus) {
       //chrome.windows.getCurrent().then(currentWindow => {
       const currentWindow: chrome.windows.Window = await chrome.windows.getCurrent()//.then(currentWindow => {
-      for (const window of currentWindows.value) {
+      for (const window of currentChromeWindows.value) {
         //console.log("da!!!",window,useWindowsStore().windowNameFor(window.id))
         // TODO this is always the "default" window
         if (currentWindow.id !== window.id) {
@@ -189,11 +184,14 @@ export const useWindowsStore = defineStore('windows', () => {
    */
   async function onUpdate(windowId: number) {
     if (windowId >= 0) {
-      const windowFromDb = windowForId(windowId)
+      const windowFromDb: Window | undefined = windowForId(windowId)
       if (windowFromDb) {
         console.debug(`updating window #${windowId}: title='${windowFromDb?.title}', index=${windowFromDb?.index}`)
-        const chromeWindow = await chrome.windows.get(windowId)
-        await storage.updateWindow(new Window(windowId, chromeWindow, windowFromDb.title, windowFromDb.index))
+        const chromeWindow = await chrome.windows.get(windowId, {populate: true})
+        const hostList = calcHostList(chromeWindow.tabs || [])
+        const newWindow = new Window(windowId, chromeWindow, windowFromDb.title, windowFromDb.index, windowFromDb.open, hostList)
+        console.log("updated to ", newWindow.toString())
+        await storage.updateWindow(newWindow)
         refreshCurrentWindows()
       //  sendMsg('window-updated', {})
       } else {
@@ -205,19 +203,26 @@ export const useWindowsStore = defineStore('windows', () => {
   function initListeners() {
     if (inBexMode()) {
       console.debug (" ...initializing windowsStore Listeners")
-      chrome.windows.onCreated.addListener(() => setup("onCreated"))
-      chrome.windows.onRemoved.addListener((windowId: number) => onRemoved(windowId))
-      chrome.windows.onFocusChanged.addListener((windowId) => onUpdate(windowId))
-      chrome.windows.onBoundsChanged.addListener((window: chrome.windows.Window) => onUpdate(window.id || 0))
+      chrome.windows.onCreated.addListener(onCreatedListener)
+      chrome.windows.onRemoved.addListener(onRemovedListener)
+      chrome.windows.onFocusChanged.addListener(onFocusChangedListener)
+      chrome.windows.onBoundsChanged.addListener(onBoundsChangedListener)
     }
   }
 
+  async function resetListeners() {
+    chrome.windows.onCreated.removeListener(onCreatedListener)
+    chrome.windows.onRemoved.removeListener(onRemovedListener)
+    chrome.windows.onFocusChanged.removeListener(onFocusChangedListener)
+    chrome.windows.onBoundsChanged.removeListener(onBoundsChangedListener)
+  }
+
   function windowForId(id: number): Window | undefined {
     return allWindows.value.get(id)
   }
 
   function currentWindowForId(id: number): chrome.windows.Window | undefined {
-    return currentWindows.value.find(i => i.id === id)
+    return currentChromeWindows.value.find(i => i.id === id)
   }
 
   function windowNameFor(id: number) {
@@ -241,7 +246,7 @@ export const useWindowsStore = defineStore('windows', () => {
       // console.log("windowFor2", potentialWindowId)
       if (potentialWindowId) {
         try {
-          return await chrome.windows.get(potentialWindowId)
+          return await chrome.windows.get(potentialWindowId, {populate: true})
         } catch (err) {
           return Promise.resolve(undefined)
         }
@@ -267,8 +272,9 @@ export const useWindowsStore = defineStore('windows', () => {
   }
 
   async function upsertWindow(window: chrome.windows.Window, title: string | undefined, index: number = 0) {
-    //console.log("upserting window", window.id, title, index)
-    const tabsetsWindow = new Window(window.id || 0, window, title, index)
+    const hostList = calcHostList(window.tabs || [])
+    console.log(`upserting window: id=${window.id}, title=${title}, index=${index}, #hostList=${hostList.length}`)
+    const tabsetsWindow = new Window(window.id || 0, window, title, index, false, hostList)
     if (window.id) {
       allWindows.value.set(window.id, tabsetsWindow)
     }
@@ -277,7 +283,7 @@ export const useWindowsStore = defineStore('windows', () => {
   }
 
   async function upsertTabsetWindow(w: Window) {
-    console.log("upserting window", w)
+    console.log("upserting window", w.toString())
     await storage.upsertWindow(w)
   }
 
@@ -339,7 +345,7 @@ export const useWindowsStore = defineStore('windows', () => {
   function refreshCurrentWindows() {
     console.debug("refreshCurrentWindows")
     chrome.windows.getAll({populate: true}, (windows) => {
-      currentWindows.value = windows
+      currentChromeWindows.value = windows
     })
   }
 
@@ -358,15 +364,30 @@ export const useWindowsStore = defineStore('windows', () => {
         return Promise.reject("window for #" + windowId + " not found")
       }
     })
+  }
+
+  async function refreshTabsetWindow(windowId: number) {
+    try {
+      console.log("refreshing tabset window", windowId)
+      const tabsetWindow = await storage.getWindow(windowId)
+      const chromeWindow = await chrome.windows.get(windowId, {populate: true})
+      if (tabsetWindow && chromeWindow) {
+        tabsetWindow.hostList = calcHostList(chromeWindow.tabs || [])
+        await storage.updateWindow(tabsetWindow)
+      }
+    } catch (err) {
+      console.error("got error", err)
+    }
 
   }
 
   return {
     initialize,
     initListeners,
+    resetListeners,
     setup,
-    currentWindows,
-    currentWindow,
+    currentChromeWindows,
+    currentChromeWindow,
     currentWindowName,
     windowFor,
     windowNameFor,
@@ -383,6 +404,7 @@ export const useWindowsStore = defineStore('windows', () => {
     updateWindowIndex,
     allWindows,
     upsertTabsetWindow,
-    currentWindowForId
+    currentWindowForId,
+    refreshTabsetWindow
   }
 })
diff --git a/test/vitest/__tests__/components/SidePanelFooter.test.ts b/test/vitest/__tests__/components/SidePanelFooter.test.ts
new file mode 100644
index 00000000..1a019ed4
--- /dev/null
+++ b/test/vitest/__tests__/components/SidePanelFooter.test.ts
@@ -0,0 +1,159 @@
+import {installQuasarPlugin} from '@quasar/quasar-app-extension-testing-unit-vitest';
+import {DOMWrapper, mount, shallowMount, VueWrapper} from '@vue/test-utils';
+import {afterEach, beforeAll, beforeEach, describe, expect, it, vi} from 'vitest';
+import {createPinia, setActivePinia} from "pinia";
+import SidePanelFooter from "components/SidePanelFooter.vue";
+import ChromeApi from "src/services/ChromeApi";
+import PersistenceService from "src/services/PersistenceService";
+import {useDB} from "src/services/usePersistenceService";
+import {useQuasar} from "quasar";
+import IndexedDbPersistenceService from "src/services/IndexedDbPersistenceService";
+import {useTabsetService} from "src/services/TabsetService2";
+import {useWindowsStore} from "stores/windowsStore";
+
+installQuasarPlugin();
+
+async function setupStores(db: PersistenceService) {
+  await useWindowsStore().initialize(db)
+  useWindowsStore().initListeners()
+}
+
+describe('SidePanelFooter', () => {
+
+  const skysailChromeTab = ChromeApi.createChromeTabObject(
+    "title", "https://www.skysail.io/some-subpage", "favicon")
+
+  let db = null as unknown as PersistenceService
+  let wrapper: VueWrapper<any, any> = null as unknown as VueWrapper
+  let manageWindowsButton: DOMWrapper<Element> = null as unknown as DOMWrapper<Element>
+
+  const tab1 = ChromeApi.createChromeTabObject("skysail", "https://www.skysail.io")
+  const window100: chrome.windows.Window = ChromeApi.createChromeWindowObject(100, 17, 28, [tab1])
+
+  let currentWindows: any[]
+
+  beforeAll(() => {
+    // https://vitest.dev/guide/browser.html
+    // @ts-ignore - needed as 'chrome' is undefined in vitest
+    global.chrome = undefined
+    // global.browser = browser
+    db = useDB(useQuasar()).localDb
+  })
+
+  beforeEach(async () => {
+    setActivePinia(createPinia())
+    await IndexedDbPersistenceService.init("db")
+    db = useDB(undefined).db
+    // await usePermissionsStore().initialize(new LocalStoragePersistenceService(useQuasar()))
+    await useTabsetService().init(db)
+
+    const chromeMock = {
+      commands: {
+        onCommand: {
+          addListener: vi.fn(() => {
+            return [];
+          }),
+        }
+      },
+      tabs: {
+        query: vi.fn(() => {
+        }),
+        onCreated: {
+          addListener: vi.fn((tab: chrome.tabs.Tab) => {
+            console.log("mocking chrome.windows.onCreated.addListener", tab)
+          })
+        },
+        onRemoved: {
+          addListener: vi.fn((tabId: number, removeInfo: chrome.tabs.TabRemoveInfo) => {
+            console.log("mocking chrome.windows.onCreated.addListener", tabId)
+          })
+        }
+      },
+      runtime: {
+        sendMessage: vi.fn(() => {
+        }),
+        onMessage: {
+          addListener: vi.fn((message: any, sender: chrome.runtime.MessageSender, sendResponse: any) => {
+            console.log("mocking chrome.windows.onCreated.addListener", message)
+            //onCreatedListener = listener
+            return true
+          })
+        }
+      },
+      windows: {
+        getAll: vi.fn((options, callback) => {
+          console.log("mocking chrome.windows.getAll", currentWindows.length)
+          //callback(currentWindows);
+          return Promise.resolve(currentWindows)
+        }),
+        getCurrent: vi.fn((options, callback) => {
+          //console.log("mocking chrome.windows.getCurrent")
+          callback(window100)
+        }),
+        onCreated: {
+          addListener: vi.fn((listener) => {
+            //console.log("mocking chrome.windows.onCreated.addListener", listener)
+            //onCreatedListener = listener
+          })
+        },
+        onRemoved: {
+          addListener: vi.fn((listener) => {
+            //console.log("mocking chrome.windows.onRemoved.addListener", listener)
+            // onRemovedListener = listener
+          })
+        },
+        onFocusChanged: {
+          addListener: vi.fn((listener) => {
+            console.log("mocking chrome.windows.onFocusChanged.addListener", listener)
+            //onFocusChangedListener = listener
+          })
+        },
+        onBoundsChanged: {
+          addListener: vi.fn((listener) => {
+            //console.log("mocking chrome.windows.onBoundsChanged.addListener", listener)
+            //callback(undefined)
+          })
+        }
+      }
+    };
+
+    vi.stubGlobal('chrome', chromeMock);
+
+    wrapper = mount(SidePanelFooter);
+
+    manageWindowsButton = wrapper.find('[data-testid=buttonManageWindows]')
+
+  })
+
+  afterEach(async () => {
+    db.clear("tabsets")
+    db.clear("windows")
+  })
+
+  it('should be mounted', async () => {
+    expect(wrapper.text()).toContain("grid_viewlogin");
+    expect(wrapper.text()).not.toContain("Open Window");
+  });
+
+  it('should show window markup table when window management button is clicked', async () => {
+    currentWindows = [window100]
+    await setupStores(db)
+
+    await manageWindowsButton.trigger('click')
+
+    expect(wrapper.text()).toContain("Open Window");
+    const cellWithNameForWindowId100 = wrapper.find('[data-testid=windowDataColumn_name_100]')
+    expect(cellWithNameForWindowId100.text()).toBe("100")
+    const cellWithTabsCountForWindowId100 = wrapper.find('[data-testid=windowDataColumn_tabsCount_100]')
+    expect(cellWithTabsCountForWindowId100.text()).toBe("1")
+
+    const windows = await db.getWindows()
+    console.log("windows", windows)
+    expect(windows.length).toBe(1)
+    expect(windows[0].id).toBe(100)
+    expect(windows[0].index).toBe(0)
+    expect(windows[0].open).toBe(true)
+    expect(windows[0].hostList).toStrictEqual(['www.skysail.io'])
+  });
+
+})
diff --git a/test/vitest/__tests__/stores/windowsStore.test.ts b/test/vitest/__tests__/stores/windowsStore.test.ts
index f381fe93..b38ce8db 100644
--- a/test/vitest/__tests__/stores/windowsStore.test.ts
+++ b/test/vitest/__tests__/stores/windowsStore.test.ts
@@ -7,8 +7,6 @@ import PersistenceService from "src/services/PersistenceService";
 import {useTabsetService} from "src/services/TabsetService2";
 import {useWindowsStore} from "stores/windowsStore";
 import ChromeApi from "src/services/ChromeApi";
-import {useCommandExecutor} from "src/services/CommandExecutor";
-import {CreateTabsetCommand} from "src/domain/tabsets/CreateTabset";
 
 installQuasarPlugin();
 
@@ -45,13 +43,11 @@ async function setupMocks(currentWindow: any) {
       }),
       onCreated: {
         addListener: vi.fn((listener) => {
-          //console.log("mocking chrome.windows.onCreated.addListener", listener)
           onCreatedListener = listener
         })
       },
       onRemoved: {
         addListener: vi.fn((listener) => {
-          //console.log("mocking chrome.windows.onRemoved.addListener", listener)
           onRemovedListener = listener
         })
       },
@@ -63,8 +59,6 @@ async function setupMocks(currentWindow: any) {
       },
       onBoundsChanged: {
         addListener: vi.fn((listener) => {
-          //console.log("mocking chrome.windows.onBoundsChanged.addListener", listener)
-          //callback(undefined)
         })
       }
     },
@@ -120,13 +114,13 @@ describe('WindowsStore', () => {
     const window = await db.getWindow(100)
     expect(window?.id).toBe(100)
     expect(window?.index).toBe(0)
-    expect(window?.hostList).toStrictEqual(new Set(['www.skysail.io', 'www.tabsets.net']))
-    expect(useWindowsStore().currentWindow.id).toBe(100)
+    expect(window?.hostList).toStrictEqual(['www.skysail.io', 'www.tabsets.net'])
+    expect(useWindowsStore().currentChromeWindow.id).toBe(100)
 
     const w200 = await db.getWindow(200)
     expect(w200?.id).toBe(200)
     expect(w200?.index).toBe(1)
-    expect(w200?.hostList).toStrictEqual(new Set(['www.tabsets.net']))
+    expect(w200?.hostList).toStrictEqual(['www.tabsets.net'])
 
   })
 
@@ -161,22 +155,22 @@ describe('WindowsStore', () => {
     }
   })
 
-  it('onFocusChanged updates browserWindow', async () => {
-    currentWindows = [window100, window200]
-    await setupMocks(window100)
-    await setupStores(db)
-
-    const t = await db.getWindow(100)
-    // console.log("t", t)
-    console.log("t", useWindowsStore().allWindows)
-    console.log("==============")
-    await onFocusChangedListener(100)
-    console.log("==============")
-
-    const window100FromDb = await db.getWindow(100)
-    // 33 is a 'magic number' assigned
-    expect(window100FromDb?.browserWindow?.left).toBe(33)
-  })
+  // it('onFocusChanged updates browserWindow', async () => {
+  //   currentWindows = [window100, window200]
+  //   await setupMocks(window100)
+  //   await setupStores(db)
+  //
+  //   const t = await db.getWindow(100)
+  //   // console.log("t", t)
+  //   console.log("t", useWindowsStore().allWindows)
+  //   console.log("==============")
+  //   await onFocusChangedListener(100)
+  //   console.log("==============")
+  //
+  //   const window100FromDb = await db.getWindow(100)
+  //   // 33 is a 'magic number' assigned
+  //   expect(window100FromDb?.browserWindow?.left).toBe(33)
+  // })
 
   it('onCreate yields new window', async () => {
     const window: chrome.windows.Window = ChromeApi.createChromeWindowObject(1000, 0, 0)
@@ -214,9 +208,7 @@ describe('WindowsStore', () => {
   })
 
   it('onCreate reuses existing window when matched', async () => {
-    // const tab1 = ChromeApi.createChromeTabObject("skysail", "https://www.skysail.io")
-    // const tab2 = ChromeApi.createChromeTabObject("tabsets", "https://www.tabsets.net")
-    const windowWithSameTabsAsWindow100: chrome.windows.Window = ChromeApi.createChromeWindowObject(1000, 0, 0, [tab1,tab2])
+    const windowWithSameTabsAsWindow100: chrome.windows.Window = ChromeApi.createChromeWindowObject(1000, 0, 0, [tab1, tab2])
     currentWindows = [window100, window200]
     await setupMocks(window100)
     await setupStores(db)
@@ -236,18 +228,18 @@ describe('WindowsStore', () => {
     expect((await db.getWindows()).length).toBe(2)
   })
 
-  it('tabset with open-in-window setting is added', async () => {
-
-    currentWindows = [window100]
-    await setupMocks(window100)
-    await useCommandExecutor().execute(new CreateTabsetCommand("tsName", [], 'open-in-window'))
-    await setupStores(db)
-
-    const windowsFromDb  = await db.getWindows()
-    expect(windowsFromDb.length).toBe(2)
-  })
+  // it('tabset with open-in-window setting is added', async () => {
+  //
+  //   currentWindows = [window100]
+  //   await setupMocks(window100)
+  //   await useCommandExecutor().execute(new CreateTabsetCommand("tsName", [], 'open-in-window'))
+  //   await setupStores(db)
+  //
+  //   const windowsFromDb  = await db.getWindows()
+  //   expect(windowsFromDb.length).toBe(2)
+  // })
 
-    // it('persists group with changing title', async () => {
+  // it('persists group with changing title', async () => {
   //     await useGroupsStore().initialize(db)
   //     await useGroupsStore().persistGroup(ChromeApi.createChromeTabGroupObject(1, "ab", 'grey' as chrome.tabGroups.ColorEnum))
   //     await useGroupsStore().persistGroup(ChromeApi.createChromeTabGroupObject(1, "abc", 'grey' as chrome.tabGroups.ColorEnum))