diff --git a/src/components/SidePanelFooter.vue b/src/components/SidePanelFooter.vue
index de78abdf..80442c52 100644
--- a/src/components/SidePanelFooter.vue
+++ b/src/components/SidePanelFooter.vue
@@ -2,56 +2,37 @@
 
   <q-footer class="bg-white q-pa-xs q-mt-sm" style="border-top: 1px solid lightgrey">
     <div class="row fit">
-      <div class="col-8">
-
-        <template v-if="showSuggestionButton">
-          <q-btn
-              outline
-              icon="o_lightbulb"
-              :label="suggestionsLabel()"
-              :color="dependingOnStates()"
-              @click="suggestionDialog()"
-              class="q-ma-none q-pa-xs q-ml-sm q-mt-xs q-pr-md cursor-pointer"
-              size="10px">
-          </q-btn>
-
-        </template>
+      <div class="col-9">
+
+        <Transition name="fade" appear>
+          <q-banner
+              v-if="checkToasts()"
+              inline-actions dense rounded
+              style="font-size: smaller"
+              :class="toastBannerClass()">
+            {{ useUiStore().toasts[0]?.msg }}
+            <template v-slot:action v-if="useUiStore().toasts[0]?.action">
+              <q-btn flat label="Undo"
+                     @click="useUiStore().callUndoActionFromCurrentToast()"/>
+            </template>
+          </q-banner>
+        </Transition>
+
+        <q-btn v-if="!checkToasts() && !transitionGraceTime && showSuggestionButton"
+               outline
+               icon="o_lightbulb"
+               :label="suggestionsLabel()"
+               :color="dependingOnStates()"
+               @click="suggestionDialog()"
+               class="q-ma-none q-pa-xs q-ml-sm q-mt-xs q-pr-md cursor-pointer"
+               size="10px">
+        </q-btn>
 
-        <template v-else>
+        <template v-if="!checkToasts() && !transitionGraceTime && !showSuggestionButton">
 
-          <q-btn v-if="showSuggestionIcon"
-                 @click="doShowSuggestionButton = true"
-                 icon="o_lightbulb"
-                 class="q-my-xs q-ml-xs q-px-xs"
-                 flat
-                 color="warning"
-                 size="9px">
-            <q-tooltip class="tooltip">{{ suggestionsLabel() }}</q-tooltip>
-          </q-btn>
-
-          <SidePanelFooterLeftButton
-              :side-panel-view="SidePanelView.TABS_LIST" icon="o_playlist_add"
-              tooltip="All your browser's open tabs"/>
-
-          <SidePanelFooterLeftButton :side-panel-view="SidePanelView.BOOKMARKS" icon="o_bookmark"
-                                     tooltip="Show the Bookmarks Browser"/>
-          <SidePanelFooterLeftButton :side-panel-view="SidePanelView.TAGS_LIST" icon="o_label"
-                                     tooltip="List of all tags sorted by prevalence"/>
-          <SidePanelFooterLeftButton :side-panel-view="SidePanelView.BY_DOMAIN_LIST" icon="o_dns"
-                                     tooltip="List all your tabs URLs by domain"/>
-          <SidePanelFooterLeftButton :side-panel-view="SidePanelView.RSS_LIST" icon="o_rss_feed"
-                                     tooltip="List all your RSS feeds"/>
-          <SidePanelFooterLeftButton :side-panel-view="SidePanelView.NEWEST_TABS_LIST" icon="o_schedule"
-                                     tooltip="Newest Tabs List"/>
-          <SidePanelFooterLeftButton :side-panel-view="SidePanelView.TOP_10_TABS_LIST" icon="o_workspace_premium"
-                                     tooltip="Top 10 Tabs List"/>
-
-          <span class="q-ma-none"
-                v-if="permissionsStore.hasFeature(FeatureIdent.OPENTABS_THRESHOLD) && tabsStore.tabsets?.size > 0">
-            <OpenTabsThresholdWidget :showLabel="false" :in-side-panel="true">
-              <q-tooltip>{{ tabsStore.tabs?.length }} open tabs</q-tooltip>
-            </OpenTabsThresholdWidget>
-          </span>
+          <SidePanelFooterLeftButtons
+              @was-clicked="doShowSuggestionButton = true"
+              :show-suggestion-icon="showSuggestionIcon"/>
 
         </template>
 
@@ -74,7 +55,7 @@
                :class="rightButtonClass()"
                flat
                color="black"
-               size="8px"
+               :size="getButtonSize()"
                @click="openHelpView()">
         </q-btn>
 
@@ -82,7 +63,7 @@
                :class="rightButtonClass()"
                flat
                color="black"
-               size="8px"
+               :size="getButtonSize()"
                @click="openOptionsPage()">
           <q-tooltip class="tooltip" anchor="top left" self="bottom left">{{ settingsTooltip() }}</q-tooltip>
         </q-btn>
@@ -93,7 +74,7 @@
             :class="rightButtonClass()"
             flat
             color="black"
-            size="8px"
+            :size="getButtonSize()"
             @click="openExtensionTab()">
           <q-tooltip class="tooltip">Tabsets as full-page app</q-tooltip>
         </q-btn>
@@ -111,9 +92,7 @@ import {ref, watchEffect} from "vue";
 import {useRouter} from "vue-router";
 import {usePermissionsStore} from "src/stores/permissionsStore";
 import {FeatureIdent} from "src/models/AppFeature";
-import OpenTabsThresholdWidget from "components/widgets/OpenTabsThresholdWidget.vue";
 import NavigationService from "src/services/NavigationService";
-import SidePanelFooterLeftButton from "components/helper/SidePanelFooterLeftButton.vue";
 import {useQuasar} from "quasar";
 import {useUtils} from "src/services/Utils";
 import {useWindowsStore} from "src/stores/windowsStore";
@@ -122,13 +101,13 @@ import _ from "lodash";
 import {SuggestionState, SuggestionType} from "src/models/Suggestion";
 import SuggestionDialog from "components/dialogues/SuggestionDialog.vue";
 import {TabsetStatus} from "src/models/Tabset";
+import {ToastType} from "src/models/Toast";
+import SidePanelFooterLeftButtons from "components/helper/SidePanelFooterLeftButtons.vue";
 
 const {inBexMode} = useUtils()
 
 const $q = useQuasar()
 
-const tabsStore = useTabsStore()
-const permissionsStore = usePermissionsStore()
 const router = useRouter()
 const uiStore = useUiStore()
 
@@ -140,10 +119,11 @@ const progressLabel = ref<string | undefined>(undefined)
 const showSuggestionButton = ref(false)
 const showSuggestionIcon = ref(false)
 const doShowSuggestionButton = ref(false)
+const transitionGraceTime = ref(false)
 
 watchEffect(() => {
   const suggestions = useSuggestionsStore().getSuggestions()
-  //console.log("watcheffect for", suggestions)
+  console.log("watcheffect for", suggestions)
   showSuggestionButton.value =
       doShowSuggestionButton.value ||
       (useUiStore().sidePanelActiveViewIs(SidePanelView.MAIN) &&
@@ -233,4 +213,56 @@ const openHelpView = () => {
   }
 }
 
+const checkToasts = () => {
+  if (useUiStore().toasts.length > 0) {
+    const useDelay = 3000
+    useUiStore().delayedToastRemoval(useDelay)
+    const oldShowButton = showSuggestionButton.value
+    const oldDoShowButton = doShowSuggestionButton.value
+    transitionGraceTime.value = true
+    showSuggestionButton.value = false
+    doShowSuggestionButton.value = false
+    setTimeout(() => {
+      console.log(" *** ", useUiStore().toasts.length)
+      if (useUiStore().toasts.length === 0) { // only if all toasts are gone
+        transitionGraceTime.value = false
+        showSuggestionButton.value = oldShowButton
+        doShowSuggestionButton.value = oldDoShowButton
+      }
+    }, useDelay + 1100) // must be higher than css value in fade-leave-active
+
+    return true
+  }
+  return false
+}
+
+const getButtonSize = () => useUiStore().getButtonSize('sidePanelFooter')
+
+const toastBannerClass = () => {
+  const defaults = " text-white q-py-none"
+  switch (useUiStore().toasts[0]?.type) {
+    case ToastType.INFO:
+      return "bg-positive" + defaults
+    case ToastType.WARNING:
+      return "bg-warning" + defaults
+    case ToastType.ERROR:
+      return "bg-negative" + defaults
+    default:
+      return "bg-negative" + defaults
+  }
+}
 </script>
+
+<style>
+.fade-enter-active {
+  transition: opacity 0.5s ease;
+}
+.fade-leave-active {
+  transition: opacity 1.0s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/helper/SidePanelFooterLeftButton.vue b/src/components/helper/SidePanelFooterLeftButton.vue
index bdf28bb9..451d4481 100644
--- a/src/components/helper/SidePanelFooterLeftButton.vue
+++ b/src/components/helper/SidePanelFooterLeftButton.vue
@@ -4,7 +4,7 @@
          :class="leftButtonClass()"
          flat
          :color="isActive() ? 'secondary':'black'"
-         size="9px"
+         :size="props.size"
          @click="toggleView()">
     <q-tooltip v-if="props.tooltip"
                :delay="700"
@@ -22,6 +22,7 @@ import {useRouter} from "vue-router";
 const props = defineProps({
   sidePanelView: {type: Object as PropType<SidePanelView>, required: true},
   icon: {type: String, required: true},
+  size: {type: String, default: "9px"},
   tooltip: {type: String, required: false}
 })
 
@@ -31,7 +32,7 @@ const isActive = () => useUiStore().sidePanelIsActive(props.sidePanelView)
 const activateView = (view: SidePanelView) => useUiStore().sidePanelSetActiveView(view)
 
 const showButton = () => props.sidePanelView?.showButton()
-const leftButtonClass = () => "q-my-xs q-ml-xs q-px-xs"
+const leftButtonClass = () => "q-my-xs q-ml-xs q-mr-none q-px-xs"
 
 const toggleView = () => {
   if (isActive()) {
@@ -43,4 +44,5 @@ const toggleView = () => {
   }
 }
 
+
 </script>
diff --git a/src/components/helper/SidePanelFooterLeftButtons.vue b/src/components/helper/SidePanelFooterLeftButtons.vue
new file mode 100644
index 00000000..83356a67
--- /dev/null
+++ b/src/components/helper/SidePanelFooterLeftButtons.vue
@@ -0,0 +1,82 @@
+<template>
+
+  <q-btn v-if="props.showSuggestionIcon"
+         @click.stop="emits('wasClicked')"
+         icon="o_lightbulb"
+         class="q-my-xs q-ml-xs q-px-xs"
+         flat
+         color="warning"
+         size="9px">
+    <q-tooltip class="tooltip">{{ suggestionsLabel() }}</q-tooltip>
+  </q-btn>
+
+  <SidePanelFooterLeftButton
+      :side-panel-view="SidePanelView.TABS_LIST" icon="o_playlist_add"
+      tooltip="All your browser's open tabs"/>
+
+  <SidePanelFooterLeftButton :side-panel-view="SidePanelView.BOOKMARKS"
+                             icon="bookmark"
+                             :size="buttonSize"
+                             tooltip="Show the Bookmarks Browser"/>
+  <SidePanelFooterLeftButton :side-panel-view="SidePanelView.TAGS_LIST"
+                             icon="o_label"
+                             :size="buttonSize"
+                             tooltip="List of all tags sorted by prevalence"/>
+  <SidePanelFooterLeftButton :side-panel-view="SidePanelView.BY_DOMAIN_LIST"
+                             icon="o_dns"
+                             :size="buttonSize"
+                             tooltip="List all your tabs URLs by domain"/>
+  <SidePanelFooterLeftButton :side-panel-view="SidePanelView.RSS_LIST"
+                             icon="o_rss_feed"
+                             tooltip="List all your RSS feeds"/>
+  <SidePanelFooterLeftButton :side-panel-view="SidePanelView.NEWEST_TABS_LIST"
+                             icon="o_schedule"
+                             :size="buttonSize"
+                             tooltip="Newest Tabs List"/>
+  <SidePanelFooterLeftButton :side-panel-view="SidePanelView.TOP_10_TABS_LIST"
+                             icon="o_workspace_premium"
+                             :size="buttonSize"
+                             tooltip="Top 10 Tabs List"/>
+
+  <span class="q-ma-none"
+        v-if="permissionsStore.hasFeature(FeatureIdent.OPENTABS_THRESHOLD) && tabsStore.tabsets?.size > 0">
+            <OpenTabsThresholdWidget :showLabel="false" :in-side-panel="true">
+              <q-tooltip>{{ tabsStore.tabs?.length }} open tabs</q-tooltip>
+            </OpenTabsThresholdWidget>
+          </span>
+
+</template>
+<script setup lang="ts">
+import {SidePanelView, useUiStore} from "stores/uiStore";
+import {FeatureIdent} from "src/models/AppFeature";
+import SidePanelFooterLeftButton from "components/helper/SidePanelFooterLeftButton.vue";
+import OpenTabsThresholdWidget from "components/widgets/OpenTabsThresholdWidget.vue";
+import {usePermissionsStore} from "stores/permissionsStore";
+import {useTabsStore} from "stores/tabsStore";
+import {useSuggestionsStore} from "stores/suggestionsStore";
+import {ref, watchEffect} from "vue";
+
+const props = defineProps({
+  showSuggestionIcon: {type: Boolean, required: true}
+})
+
+const emits = defineEmits(['wasClicked'])
+
+const permissionsStore = usePermissionsStore()
+const tabsStore = useTabsStore()
+
+const buttonSize = ref('15px')
+
+watchEffect(() => {
+  buttonSize.value = useUiStore().getButtonSize('sidePanelFooter')
+})
+
+const suggestionsLabel = () => {
+  const suggestions = useSuggestionsStore().getSuggestions()
+  return suggestions.length === 1 ?
+      suggestions.length + " New Suggestion" :
+      suggestions.length + " New Suggestions"
+
+}
+
+</script>
\ No newline at end of file
diff --git a/src/domain/tabsets/CreateTabset.ts b/src/domain/tabsets/CreateTabset.ts
index 1ec1c67b..ede018fd 100644
--- a/src/domain/tabsets/CreateTabset.ts
+++ b/src/domain/tabsets/CreateTabset.ts
@@ -14,7 +14,7 @@ import {useWindowsStore} from "src/stores/windowsStore";
 import {STRIP_CHARS_IN_USER_INPUT} from "boot/constants";
 import {TabsetType} from "src/models/Tabset";
 
-const {inBexMode, sendMsg} = useUtils()
+const {sendMsg} = useUtils()
 
 class UndoCreateTabsetCommand implements Command<object> {
 
@@ -69,7 +69,7 @@ export class CreateTabsetCommand implements Command<SaveOrReplaceResult> {
                         return res
                     }
                 )
-            let doneMsg = 'Tabset \'' + this.tabsetName + '\' created successfully'
+            let doneMsg = 'Tabset created'
             if (result['replaced' as keyof object] && result['merged' as keyof object]) {
                 doneMsg = 'Existing Tabset \'' + this.tabsetName + '\' can be updated now'
             } else if (result['replaced' as keyof object]) {
diff --git a/src/domain/tabsets/DeleteTabset.ts b/src/domain/tabsets/DeleteTabset.ts
index a37c0f14..0b3cff3d 100644
--- a/src/domain/tabsets/DeleteTabset.ts
+++ b/src/domain/tabsets/DeleteTabset.ts
@@ -1,7 +1,6 @@
 import Command from "src/domain/Command";
 import {ExecutionResult} from "src/domain/ExecutionResult";
 import {useTabsetService} from "src/services/TabsetService2";
-import {useUtils} from "src/services/Utils";
 
 export class DeleteTabsetCommand implements Command<string> {
 
@@ -14,8 +13,7 @@ export class DeleteTabsetCommand implements Command<string> {
         //sendMsg('tabset-deleted', {tabsetId: this.tabsetId})
         return res
       })
-
-      .then(res => Promise.resolve(new ExecutionResult(res, "Tabset was deleted")))
+      .then(res => Promise.resolve(new ExecutionResult(res, "Tabset deleted")))
       .catch(err => Promise.reject(err))
   }
 }
diff --git a/src/domain/tabsets/MarkTabsetDeleted.ts b/src/domain/tabsets/MarkTabsetDeleted.ts
index 0357df4b..b10b80d9 100644
--- a/src/domain/tabsets/MarkTabsetDeleted.ts
+++ b/src/domain/tabsets/MarkTabsetDeleted.ts
@@ -53,7 +53,7 @@ export class MarkTabsetDeletedCommand implements Command<Tabset> {
       .then(res => Promise.resolve(
         new ExecutionResult(
           res,
-          "Tabset was deleted",
+          "Tabset deleted",
           new UndoCommand(this.tabsetId)))
       )
       .catch(err => Promise.reject(err))
diff --git a/src/models/Toast.ts b/src/models/Toast.ts
new file mode 100644
index 00000000..05b29c89
--- /dev/null
+++ b/src/models/Toast.ts
@@ -0,0 +1,20 @@
+import {uid} from "quasar";
+
+export enum ToastType {
+    INFO = "INFO",
+    WARNING = "WARNING",
+    ERROR = "ERROR"
+}
+
+export class Toast {
+
+    public id: string
+    public created: number;
+
+    constructor(
+        public msg: string, public type: ToastType, public action: any = undefined) {
+        this.id = uid()
+        this.created = new Date().getTime()
+    }
+
+}
diff --git a/src/services/ErrorHandler.ts b/src/services/ErrorHandler.ts
index 686ba612..8c8a3603 100644
--- a/src/services/ErrorHandler.ts
+++ b/src/services/ErrorHandler.ts
@@ -1,49 +1,51 @@
 import {Notify} from 'quasar'
 import {ExecutionResult} from "src/domain/ExecutionResult";
+import {useUiStore} from "stores/uiStore";
 
 export function useNotificationHandler() {
 
-  const handleError = (error: any) => {
-    console.log("got error: ", error ? error.toString() : 'unknown error')
-    console.trace()
-    Notify.create({
-      position: 'bottom',
-      color: 'red-5',
-      textColor: 'white',
-      icon: 'error',
-      message: error ? error.toString() : 'unknown error'
-    })
-  }
+    const handleError = (error: any) => {
+        console.log("got error: ", error ? error.toString() : 'unknown error')
+        console.trace()
+        Notify.create({
+            position: 'bottom',
+            color: 'red-5',
+            textColor: 'white',
+            icon: 'error',
+            message: error ? error.toString() : 'unknown error'
+        })
+        useUiStore().createErrorToast(error ? error.toString() : 'unknown error')
 
-  const handleWarning = (res: ExecutionResult<any>) => {
-    Notify.create({
-      color: 'warning',
-      message: res.message
-    })
-  }
+    }
+
+    const handleWarning = (res: ExecutionResult<any>) => {
+        useUiStore().createWarningToast(res.message)
+    }
 
-  const handleSuccess = (executionResult: ExecutionResult<any>): ExecutionResult<any> => {
-    const actions: any[] = []
-    if (executionResult.undoCommand) {
-      actions.push(
-        {
-          label: 'Undo', color: 'white', handler: () => {
-            executionResult.undoCommand?.execute()
-              .then((res: any) => handleWarning(res))
-              .catch((err: any) => handleError(err))
-          }
+    const handleSuccess = (executionResult: ExecutionResult<any>): ExecutionResult<any> => {
+        const actions: any[] = []
+        if (executionResult.undoCommand) {
+            actions.push(
+                {
+                    label: 'Undo', color: 'white',
+                    handler: () => {
+                        executionResult.undoCommand?.execute()
+                            .then((res: any) => handleWarning(res))
+                            .catch((err: any) => handleError(err))
+                    }
+                }
+            )
         }
-      )
+        // Notify.create({
+        //     color: 'positive',
+        //     message: executionResult.message,
+        //     actions: actions
+        // })
+        useUiStore().createSuccessToast(executionResult.message, actions[0])
+        return executionResult
     }
-    Notify.create({
-      color: 'positive',
-      message: executionResult.message,
-      actions: actions
-    })
-    return executionResult
-  }
 
-  return {
-    handleError, handleSuccess
-  }
+    return {
+        handleError, handleSuccess
+    }
 }
diff --git a/src/services/IndexedDbPersistenceService.ts b/src/services/IndexedDbPersistenceService.ts
index 2304f2ba..01fa700d 100644
--- a/src/services/IndexedDbPersistenceService.ts
+++ b/src/services/IndexedDbPersistenceService.ts
@@ -631,7 +631,7 @@ class IndexedDbPersistenceService implements PersistenceService {
 
   addNotification(notification: Notification): Promise<void> {
     return this.db.add('notifications', notification, notification.id)
-      .then((res) => Promise.resolve())
+      .then(() => Promise.resolve())
   }
 
   notificationRead(notificationId: string): Promise<void> {
@@ -656,15 +656,15 @@ class IndexedDbPersistenceService implements PersistenceService {
         if (foundExistingInStateNewOrCanceled) {
           if (foundExistingInStateNewOrCanceled && foundExistingInStateNewOrCanceled.url === suggestion.url) {
             foundExistingInStateNewOrCanceled.state = SuggestionState.APPLIED
-            this.db.put('suggestions', foundExistingInStateNewOrCanceled, foundExistingInStateNewOrCanceled.id)
-            return Promise.reject("updated existing suggestion to 'applied'")
+            // this.db.put('suggestions', foundExistingInStateNewOrCanceled, foundExistingInStateNewOrCanceled.id)
+            return Promise.reject("TODO: not: updated existing suggestion to 'applied'")
           }
           return Promise.reject("there's already a suggestion in state NEW, not adding (yet)")
         }
         const found = _.find(suggestions, (s: Suggestion) => s.url === suggestion.url)
         if (!found) {
           return this.db.add('suggestions', suggestion, suggestion.id)
-            .then((res) => Promise.resolve())
+            .then(() => Promise.resolve())
         }
         //console.log("suggestion already exists")
         return Promise.reject("suggestion already exists")
diff --git a/src/stores/tabsStore.ts b/src/stores/tabsStore.ts
index 3fadee37..02277427 100644
--- a/src/stores/tabsStore.ts
+++ b/src/stores/tabsStore.ts
@@ -200,7 +200,7 @@ export const useTabsStore = defineStore('tabs', {
                     //   }
                     // } else {
                     const found: Tab | undefined = _.find(value.tabs, t => {
-                        console.log("cmp", t.id, tabId)
+                       // console.log("cmp", t.id, tabId)
                         return t.id === tabId
                     })
                     if (found) {
@@ -320,8 +320,8 @@ export const useTabsStore = defineStore('tabs', {
             this.currentChromeTabs.set(tab.windowId, tab)
             const MAX_HISTORY_LENGTH = 12
 
-            console.log("%cchromeTabsHistoryPosition", "color:green;font-style:bold;",
-                tab.id, this.chromeTabsHistoryPosition, this.chromeTabsHistory.length, this.chromeTabsHistoryNavigating)
+           // console.log("%cchromeTabsHistoryPosition", "color:green;font-style:bold;",
+           //     tab.id, this.chromeTabsHistoryPosition, this.chromeTabsHistory.length, this.chromeTabsHistoryNavigating)
 
             // tab was activated without using the navigation
             if (tab.id && !this.chromeTabsHistoryNavigating) {
@@ -339,17 +339,15 @@ export const useTabsStore = defineStore('tabs', {
                     this.chromeTabsHistory[historyLength - 1][0] !== tab.id &&
                     this.chromeTabsHistory[historyLength - 1][1] !== tab.url
                 ) {
-                    console.log("pushing tab A", tab.id)
                     this.chromeTabsHistory.push([tab.id, tab.url || ''])
                 } else if (historyLength === 0) {
-                    console.log("pushing tab B", tab.id)
                     this.chromeTabsHistory.push([tab.id, tab.url || ''])
                 } else {
-                    console.log("did not add, adjusting position", historyLength - 1)
+                    //console.log("did not add, adjusting position", historyLength - 1)
                     this.chromeTabsHistoryPosition = historyLength - 1
                 }
                 if (this.chromeTabsHistory.length > MAX_HISTORY_LENGTH) {
-                    console.log("deleting first element")
+                    // console.log("deleting first element")
                     this.chromeTabsHistory.splice(0, 1)
                 }
             } else if (this.chromeTabsHistoryNavigating) {
diff --git a/src/stores/uiStore.ts b/src/stores/uiStore.ts
index 57fe7d4b..ee5e7d40 100644
--- a/src/stores/uiStore.ts
+++ b/src/stores/uiStore.ts
@@ -8,406 +8,475 @@ import {useUtils} from "src/services/Utils";
 import {useTabsStore} from "stores/tabsStore";
 import {FeatureIdent} from "src/models/AppFeature";
 import {usePermissionsStore} from "stores/permissionsStore";
+import {Toast, ToastType} from "src/models/Toast";
 
 export enum DrawerTabs {
-  BOOKMARKS = "bookmarks",
-  OPEN_TABS = "openTabs",
-  UNASSIGNED_TABS = "unassignedTabs",
-  GROUP_BY_HOST_TABS = "groupedByHostTabs",
-  SAVED_TABS = "savedTabs",
-  RSS = "rss",
-  SCHEDULED = "scheduled",
-  HISTORY = "history",
-  FEATURES = "features",
-  TAB_DETAILS = "tabDetails",
-  TABSET_DETAILS = "tabsetDetails",
-  NEW_TAB_URLS = "newTabUrls",
-  TAGS_VIEWER = "tagsViewer",
-  TAG_VIEWER = "tagViewer",
-  HELP = "help"
+    BOOKMARKS = "bookmarks",
+    OPEN_TABS = "openTabs",
+    UNASSIGNED_TABS = "unassignedTabs",
+    GROUP_BY_HOST_TABS = "groupedByHostTabs",
+    SAVED_TABS = "savedTabs",
+    RSS = "rss",
+    SCHEDULED = "scheduled",
+    HISTORY = "history",
+    FEATURES = "features",
+    TAB_DETAILS = "tabDetails",
+    TABSET_DETAILS = "tabsetDetails",
+    NEW_TAB_URLS = "newTabUrls",
+    TAGS_VIEWER = "tagsViewer",
+    TAG_VIEWER = "tagViewer",
+    HELP = "help"
 }
 
 export class SidePanelView {
 
-  static readonly MAIN = new SidePanelView('main', '/sidepanel');
+    static readonly MAIN = new SidePanelView('main', '/sidepanel');
 
-  static readonly TABS_LIST = new SidePanelView('tabsList', '/sidepanel/tabslist',
-    () => usePermissionsStore().hasFeature(FeatureIdent.OPEN_TABS));
+    static readonly TABS_LIST = new SidePanelView('tabsList', '/sidepanel/tabslist',
+        () => usePermissionsStore().hasFeature(FeatureIdent.OPEN_TABS));
 
-  static readonly TAGS_LIST = new SidePanelView('tagsList', '/sidepanel/tagslist',
-    () => usePermissionsStore().hasFeature(FeatureIdent.TAGS) && useTabsStore().allTabsCount > 0);
+    static readonly TAGS_LIST = new SidePanelView('tagsList', '/sidepanel/tagslist',
+        () => usePermissionsStore().hasFeature(FeatureIdent.TAGS) && useTabsStore().allTabsCount > 0);
 
-  static readonly TAG = new SidePanelView('tag', '/sidepanel/tags');
+    static readonly TAG = new SidePanelView('tag', '/sidepanel/tags');
 
-  static readonly BY_DOMAIN_LIST = new SidePanelView('byDomainList', '/sidepanel/byDomainList',
-    () => usePermissionsStore().hasFeature(FeatureIdent.GROUP_BY_DOMAIN));
+    static readonly BY_DOMAIN_LIST = new SidePanelView('byDomainList', '/sidepanel/byDomainList',
+        () => usePermissionsStore().hasFeature(FeatureIdent.GROUP_BY_DOMAIN));
 
-  static readonly RSS_LIST = new SidePanelView('rssList', '/sidepanel/rsslist',
-    () => usePermissionsStore().hasFeature(FeatureIdent.RSS));
+    static readonly RSS_LIST = new SidePanelView('rssList', '/sidepanel/rsslist',
+        () => usePermissionsStore().hasFeature(FeatureIdent.RSS));
 
-  static readonly NEWEST_TABS_LIST = new SidePanelView('newestList', '/sidepanel/newestList',
-    () => usePermissionsStore().hasFeature(FeatureIdent.NEWEST_TABS));
+    static readonly NEWEST_TABS_LIST = new SidePanelView('newestList', '/sidepanel/newestList',
+        () => usePermissionsStore().hasFeature(FeatureIdent.NEWEST_TABS));
 
-  static readonly TOP_10_TABS_LIST = new SidePanelView('top10List', '/sidepanel/top10List',
-    () => usePermissionsStore().hasFeature(FeatureIdent.TOP10));
+    static readonly TOP_10_TABS_LIST = new SidePanelView('top10List', '/sidepanel/top10List',
+        () => usePermissionsStore().hasFeature(FeatureIdent.TOP10));
 
-  static readonly BOOKMARKS = new SidePanelView('bookmarks', '/sidepanel/bookmarks',
-    () => usePermissionsStore().hasFeature(FeatureIdent.BOOKMARKS));
+    static readonly BOOKMARKS = new SidePanelView('bookmarks', '/sidepanel/bookmarks',
+        () => usePermissionsStore().hasFeature(FeatureIdent.BOOKMARKS));
 
-  static readonly PUBLIC_TABSETS = new SidePanelView('categorized_tabsets', '/sidepanel/byCategory',
-    () => usePermissionsStore().hasFeature(FeatureIdent.BOOKMARKS));
+    static readonly PUBLIC_TABSETS = new SidePanelView('categorized_tabsets', '/sidepanel/byCategory',
+        () => usePermissionsStore().hasFeature(FeatureIdent.BOOKMARKS));
 
-  static readonly TAGS_VIEWER = new SidePanelView('categorized_tabsets', '/sidepanel/byCategory',
-    () => usePermissionsStore().hasFeature(FeatureIdent.TAGS));
+    static readonly TAGS_VIEWER = new SidePanelView('categorized_tabsets', '/sidepanel/byCategory',
+        () => usePermissionsStore().hasFeature(FeatureIdent.TAGS));
 
-  private constructor(
-    public readonly ident: string,
-    public readonly path: any,
-    public readonly showButtonFunction: Function = () => true) {
-  }
+    private constructor(
+        public readonly ident: string,
+        public readonly path: any,
+        public readonly showButtonFunction: Function = () => true) {
+    }
 
-  toString() {
-    return this.ident;
-  }
+    toString() {
+        return this.ident;
+    }
 
-  showButton() {
-    return this.showButtonFunction()
-  }
+    showButton() {
+        return this.showButtonFunction()
+    }
 }
 
 export enum ListDetailLevel {
-  MINIMAL = "MINIMAL",
-  SOME = "SOME",
-  MAXIMAL = "MAXIMAL"
+    MINIMAL = "MINIMAL",
+    SOME = "SOME",
+    MAXIMAL = "MAXIMAL"
 }
 
 export class RightDrawer {
-  constructor(
-    public activeTab: DrawerTabs = DrawerTabs.OPEN_TABS) {
-  }
+    constructor(
+        public activeTab: DrawerTabs = DrawerTabs.OPEN_TABS) {
+    }
 }
 
 export class SidePanel {
-  constructor(
-    public activeView: SidePanelView = SidePanelView.MAIN) {
-  }
-}
 
+    relevantViews: SidePanelView[] = []
+
+    constructor(
+        public activeView: SidePanelView = SidePanelView.MAIN) {
+        this.relevantViews.push(SidePanelView.TOP_10_TABS_LIST)
+        this.relevantViews.push(SidePanelView.TAG)
+        this.relevantViews.push(SidePanelView.TABS_LIST)
+        this.relevantViews.push(SidePanelView.TAGS_LIST)
+        this.relevantViews.push(SidePanelView.BOOKMARKS)
+        this.relevantViews.push(SidePanelView.BY_DOMAIN_LIST)
+        this.relevantViews.push(SidePanelView.NEWEST_TABS_LIST)
+        this.relevantViews.push(SidePanelView.PUBLIC_TABSETS)
+        this.relevantViews.push(SidePanelView.RSS_LIST)
+        this.relevantViews.push(SidePanelView.TAGS_VIEWER)
+    }
+
+    public enabledViewsCount() {
+        let count = 0
+        for (const v of this.relevantViews) {
+            if (v.showButtonFunction.apply(this)) {
+                count += 1
+            }
+        }
+        return count
+    }
+}
 
 export const useUiStore = defineStore('ui', () => {
 
-  const $q = useQuasar()
-  const router = useRouter()
+    const $q = useQuasar()
+    const router = useRouter()
+
+    const {sendMsg} = useUtils()
+
+    const selectedTab = ref<Tab | undefined>(undefined)
+    const tabsFilter = ref<string | undefined>(undefined)
+    const selectedTag = ref<string | undefined>(undefined)
+    const tabsetsExpanded = ref<boolean>(false)
+
+    // RightDrawer
+    let rightDrawer = ref<RightDrawer>(new RightDrawer())
+    let rightDrawerOpen = ref($q ? $q.screen.gt.md : true)
+    let leftDrawerOpen = ref(true)
+
+    // SidePanel
+    let sidePanel = ref<SidePanel>(new SidePanel())
+
+    const highlightTerm = ref<string | undefined>(undefined)
+
+    const newTabsetEmptyByDefault = ref<boolean>(LocalStorage.getItem('ui.newTabsetEmptyByDefault') as unknown as boolean || false)
+    const tabBeingDragged = ref<string | undefined>(undefined)
+    const dragEvent = ref<DragEvent | undefined>(undefined)
+    const footerInfo = ref<string | undefined>(undefined)
+
+    const contentCount = ref<number>(0)
+
+    const listDetailLevel = ref<ListDetailLevel>(LocalStorage.getItem('ui.detailLevel') || ListDetailLevel.MAXIMAL)
+    const showFullUrls = ref<boolean>(LocalStorage.getItem('ui.fullUrls') || false)
+
+    // info Messages
+    const hiddenMessages = ref<string[]>(LocalStorage.getItem('ui.hiddenInfoMessages') as unknown as string[] || [])
+    const messageAlreadyShown = ref<string | undefined>(undefined)
+
+    const toasts = ref<Toast[]>([])
+    const toastTimeouts = ref<NodeJS.Timeout[]>([])
+
+    // highlight url(s) feature
+    const highlightUrls = ref<string[]>([])
 
-  const {sendMsg} = useUtils()
+    // new tab feature
+    const newTabUrlList = ref<object[]>(LocalStorage.getItem('ui.newTabUrlList') as unknown as object[] || [])
 
-  const selectedTab = ref<Tab | undefined>(undefined)
-  const tabsFilter = ref<string | undefined>(undefined)
-  const selectedTag = ref<string | undefined>(undefined)
-  const tabsetsExpanded = ref<boolean>(false)
+    // listener currently triggered on '/' keypress for search keyboard shortcut
+    const ignoreKeypress = ref(false)
 
-  // RightDrawer
-  let rightDrawer = ref<RightDrawer>(new RightDrawer())
-  let rightDrawerOpen = ref($q ? $q.screen.gt.md : true)
-  let leftDrawerOpen = ref(true)
+    // entity management
+    const entityType = ref<string | undefined>(undefined)
+    const selectedTabsetId = ref<string | undefined>(undefined)
 
-  // SidePanel
-  let sidePanel = ref<SidePanel>(new SidePanel())
+    // system management
+    const dbReady = ref<boolean>(false)
 
-  const highlightTerm = ref<string | undefined>(undefined)
+    const progress = ref<number | undefined>(undefined)
+    const progressLabel = ref<string | undefined>(undefined)
 
-  const newTabsetEmptyByDefault = ref<boolean>(LocalStorage.getItem('ui.newTabsetEmptyByDefault') as unknown as boolean || false)
-  const tabBeingDragged = ref<string | undefined>(undefined)
-  const dragEvent = ref<DragEvent | undefined>(undefined)
-  const footerInfo = ref<string | undefined>(undefined)
+    const showCurrentTabBox = ref<boolean>(true)
 
-  const contentCount = ref<number>(0)
+    const toolbarFilter = ref(false)
+    const toolbarFilterTerm = ref('')
 
-  const listDetailLevel = ref<ListDetailLevel>(LocalStorage.getItem('ui.detailLevel') || ListDetailLevel.MAXIMAL)
-  const showFullUrls = ref<boolean>(LocalStorage.getItem('ui.fullUrls') || false)
+    watch(rightDrawer.value, (val: Object) => {
+        LocalStorage.set("ui.rightDrawer", val)
+    }, {deep: true})
 
-  // info Messages
-  const hiddenMessages = ref<string[]>(LocalStorage.getItem('ui.hiddenInfoMessages') as unknown as string[] || [])
-  const messageAlreadyShown = ref<string | undefined>(undefined)
+    watch(newTabsetEmptyByDefault,
+        (val: Object) => {
+            LocalStorage.set("ui.newTabsetEmptyByDefault", val)
+        })
 
-  // highlight url(s) feature
-  const highlightUrls = ref<string[]>([])
+    watch(newTabUrlList,
+        (val: object[]) => {
+            console.log("newTabUrlList", val)
+            LocalStorage.set("ui.newTabUrlList", val)
+        })
 
-  // new tab feature
-  const newTabUrlList = ref<object[]>(LocalStorage.getItem('ui.newTabUrlList') as unknown as object[] || [])
+    watch(newTabUrlList.value,
+        (val: object[]) => {
+            console.log("val", val)
+            LocalStorage.set("ui.newTabUrlList", val)
+        })
 
-  // listener currently triggered on '/' keypress for search keyboard shortcut
-  const ignoreKeypress = ref(false)
+    const route = useRoute()
+    watch(route, (to) => {
+        // console.log("resetting", messageAlreadyShown.value)
+        setAnotherMessageAlreadyShown(undefined)
+    }, {flush: 'pre', immediate: true, deep: true})
 
-  // entity management
-  const entityType = ref<string | undefined>(undefined)
-  const selectedTabsetId = ref<string | undefined>(undefined)
+    watch(
+        hiddenMessages,
+        (thresholdsVal: Object) => {
+            LocalStorage.set("ui.hiddenInfoMessages", thresholdsVal)
+        }, {deep: true}
+    )
 
-  // system management
-  const dbReady = ref<boolean>(false)
+    function draggingTab(tabId: string, evt: DragEvent, doSendMessage = false) {
+        tabBeingDragged.value = tabId
+        dragEvent.value = evt
+        if (doSendMessage) {
+            sendMsg("tab-being-dragged", {
+                tabId: tabId
+            })
+        }
+    }
+
+    function droppingTab() {
+        console.log("dropping tab", tabBeingDragged.value)
+        const tabBeingDropped = tabBeingDragged.value
+        tabBeingDragged.value = undefined
+        dragEvent.value = undefined
+        return tabBeingDropped
+    }
+
+    function setSelectedTag(tag: string) {
+        selectedTag.value = tag
+    }
+
+    function addToNewTabUrlList(l: object) {
+        newTabUrlList.value.push(l)
+    }
+
+    function removeNewTabUrl(url: string) {
+        newTabUrlList.value = _.filter(newTabUrlList.value, (e: any) => e.url !== url)
+    }
+
+    function hideInfoMessage(ident: string) {
+        hiddenMessages.value.push(ident)
+    }
 
-  const progress = ref<number | undefined>(undefined)
-  const progressLabel = ref<string | undefined>(undefined)
+    function restoreHints() {
+        console.log("hiddenMessages.value", hiddenMessages.value)
+        hiddenMessages.value = []
+        setAnotherMessageAlreadyShown(undefined)
+    }
 
-  const showCurrentTabBox = ref<boolean>(true)
+    function setAnotherMessageAlreadyShown(msg: string | undefined) {
+        //console.log("setting setAnotherMessageAlreadyShown", msg)
+        messageAlreadyShown.value = msg
+    }
 
-  const toolbarFilter = ref(false)
-  const toolbarFilterTerm = ref('')
+    function rightDrawerSetActiveTab(tab: DrawerTabs) {
+        rightDrawer.value.activeTab = tab
+        rightDrawerOpen.value = true
+    }
 
-  watch(rightDrawer.value, (val: Object) => {
-    LocalStorage.set("ui.rightDrawer", val)
-  }, {deep: true})
+    function sidePanelSetActiveView(view: SidePanelView) {
+        sidePanel.value.activeView = view
+        router.push(view.path)
+    }
 
-  watch(newTabsetEmptyByDefault,
-    (val: Object) => {
-      LocalStorage.set("ui.newTabsetEmptyByDefault", val)
+    const sidePanelActiveViewIs = computed(() => {
+        return (viewToCompare: SidePanelView) => {
+            return sidePanel.value.activeView?.ident === viewToCompare.ident
+        }
     })
 
-  watch(newTabUrlList,
-    (val: object[]) => {
-      console.log("newTabUrlList", val)
-      LocalStorage.set("ui.newTabUrlList", val)
+
+    function setHighlightTerm(term: string | undefined) {
+        highlightTerm.value = term
+    }
+
+    function setListDetailLevel(val: ListDetailLevel) {
+        listDetailLevel.value = val
+    }
+
+    function setShowFullUrls(val: boolean) {
+        showFullUrls.value = val
+    }
+
+    const listDetailLevelGreaterEqual = computed(() => {
+        return (level: ListDetailLevel) => {
+            switch (listDetailLevel.value) {
+                case ListDetailLevel.MAXIMAL:
+                    return true
+                case ListDetailLevel.SOME:
+                    return level === ListDetailLevel.SOME || level === ListDetailLevel.MINIMAL
+                case ListDetailLevel.MINIMAL:
+                    return level === ListDetailLevel.MINIMAL
+            }
+        }
+    })
+
+    const showMessage = computed(() => {
+        return (ident: string, probability: number = 1, forceDisplay: boolean = false) => {
+            //console.log("checking message", ident, probability, hiddenMessages.value)
+            if (hiddenMessages.value.indexOf(ident) >= 0) {
+                return false
+            }
+            if (forceDisplay) {
+                return true
+            }
+            const couldBeShown = Math.random() < probability
+            //console.log("could be shown", couldBeShown, messageAlreadyShown.value)
+            if (couldBeShown && (messageAlreadyShown.value === undefined || messageAlreadyShown.value === ident)) {
+                setAnotherMessageAlreadyShown(ident)
+                return true
+            } else if (messageAlreadyShown.value) {
+                return false
+            }
+            return couldBeShown
+        }
+    })
+
+    const sidePanelIsActive = computed(() => {
+        return (view: SidePanelView) => sidePanel.value.activeView?.ident === view.ident
     })
 
-  watch(newTabUrlList.value,
-    (val: object[]) => {
-      console.log("val", val)
-      LocalStorage.set("ui.newTabUrlList", val)
+    const getContentCount = computed((): number => contentCount.value)
+
+    function setSelectedTab(tab: Tab) {
+        console.log("setting selected tab", tab)
+        selectedTab.value = tab
+    }
+
+    const getSelectedTab = computed(() => {
+        return selectedTab.value
     })
 
-  const route = useRoute()
-  watch(route, (to) => {
-    // console.log("resetting", messageAlreadyShown.value)
-    setAnotherMessageAlreadyShown(undefined)
-  }, {flush: 'pre', immediate: true, deep: true})
-
-  watch(
-    hiddenMessages,
-    (thresholdsVal: Object) => {
-      LocalStorage.set("ui.hiddenInfoMessages", thresholdsVal)
-    }, {deep: true}
-  )
-
-  function draggingTab(tabId: string, evt: DragEvent, doSendMessage = false) {
-    tabBeingDragged.value = tabId
-    dragEvent.value = evt
-    if (doSendMessage) {
-      sendMsg("tab-being-dragged", {
-        tabId: tabId
-      })
-    }
-  }
-
-  function droppingTab() {
-    console.log("dropping tab", tabBeingDragged.value)
-    const tabBeingDropped = tabBeingDragged.value
-    tabBeingDragged.value = undefined
-    dragEvent.value = undefined
-    return tabBeingDropped
-  }
-
-  function setSelectedTag(tag: string) {
-    selectedTag.value = tag
-  }
-
-  function setNewTabsetEmptyByDefault(defaultValue: boolean) {
-    newTabsetEmptyByDefault.value = defaultValue
-  }
-
-  function addToNewTabUrlList(l: object) {
-    newTabUrlList.value.push(l)
-  }
-
-  function removeNewTabUrl(url: string) {
-    newTabUrlList.value = _.filter(newTabUrlList.value, (e: any) => e.url !== url)
-  }
-
-  function hideInfoMessage(ident: string) {
-    hiddenMessages.value.push(ident)
-  }
-
-  function restoreHints() {
-    console.log("hiddenMessages.value", hiddenMessages.value)
-    hiddenMessages.value = []
-    setAnotherMessageAlreadyShown(undefined)
-  }
-
-  function setAnotherMessageAlreadyShown(msg: string | undefined) {
-    //console.log("setting setAnotherMessageAlreadyShown", msg)
-    messageAlreadyShown.value = msg
-  }
-
-  function rightDrawerSetActiveTab(tab: DrawerTabs) {
-    rightDrawer.value.activeTab = tab
-    rightDrawerOpen.value = true
-  }
-
-  function sidePanelSetActiveView(view: SidePanelView) {
-    sidePanel.value.activeView = view
-    router.push(view.path)
-  }
-
-  const sidePanelActiveViewIs = computed(() => {
-    return (viewToCompare: SidePanelView) => {
-      return sidePanel.value.activeView?.ident === viewToCompare.ident
-    }
-  })
-
-  function setEntityType(type: string) {
-    entityType.value = type
-  }
-
-  function setSelectedTabsetId(id: string) {
-    selectedTabsetId.value = id
-  }
-
-  function setHighlightTerm(term: string | undefined) {
-    highlightTerm.value = term
-  }
-
-  function setListDetailLevel(val: ListDetailLevel) {
-    listDetailLevel.value = val
-  }
-
-  function setShowFullUrls(val: boolean) {
-    showFullUrls.value = val
-  }
-
-  const listDetailLevelGreaterEqual = computed(() => {
-    return (level: ListDetailLevel) => {
-      switch (listDetailLevel.value) {
-        case ListDetailLevel.MAXIMAL:
-          return true
-        case ListDetailLevel.SOME:
-          return level === ListDetailLevel.SOME || level === ListDetailLevel.MINIMAL
-        case ListDetailLevel.MINIMAL:
-          return level === ListDetailLevel.MINIMAL
-      }
-    }
-  })
-
-  const showMessage = computed(() => {
-    return (ident: string, probability: number = 1, forceDisplay: boolean = false) => {
-      //console.log("checking message", ident, probability, hiddenMessages.value)
-      if (hiddenMessages.value.indexOf(ident) >= 0) {
-        return false
-      }
-      if (forceDisplay) {
-        return true
-      }
-      const couldBeShown = Math.random() < probability
-      //console.log("could be shown", couldBeShown, messageAlreadyShown.value)
-      if (couldBeShown && (messageAlreadyShown.value === undefined || messageAlreadyShown.value === ident)) {
-        setAnotherMessageAlreadyShown(ident)
-        return true
-      } else if (messageAlreadyShown.value) {
-        return false
-      }
-      return couldBeShown
-    }
-  })
-
-  const sidePanelIsActive = computed(() => {
-    return (view: SidePanelView) => sidePanel.value.activeView?.ident === view.ident
-  })
-
-  function setContentCount(val: number) {
-    contentCount.value = val
-  }
-
-  const getContentCount = computed((): number => contentCount.value)
-
-  function setSelectedTab(tab: Tab) {
-    console.log("setting selected tab", tab)
-    selectedTab.value = tab
-  }
-
-  const getSelectedTab = computed(() => {
-    return selectedTab.value
-  })
-
-  // highlight url(s) feature
-  function clearHighlights() {
-    highlightUrls.value = []
-  }
-
-  function addHighlight(url: string) {
-    highlightUrls.value.push(url)
-  }
-
-  const getHighlightUrls = computed(() => highlightUrls.value)
-
-  function ignoreKeypressListener() {
-    return ignoreKeypress.value;
-  }
-
-  function setIgnoreKeypress(b: boolean) {
-    ignoreKeypress.value = b
-  }
-
-  function toggleLeftDrawer() {
-    leftDrawerOpen.value = !leftDrawerOpen.value
-  }
-
-  function hideCurrentTabBox(b: boolean) {
-    showCurrentTabBox.value = !b
-  }
-
-  function toggleToolbarFilter() {
-    toolbarFilter.value = !toolbarFilter.value
-    if (!toolbarFilter.value) {
-      toolbarFilterTerm.value = ''
-    }
-  }
-
-  return {
-    rightDrawer,
-    rightDrawerOpen,
-    leftDrawerOpen,
-    rightDrawerSetActiveTab,
-    draggingTab,
-    droppingTab,
-    newTabsetEmptyByDefault,
-    hideInfoMessage,
-    restoreHints,
-    showMessage,
-    footerInfo,
-    getContentCount,
-    setSelectedTab,
-    getSelectedTab,
-    newTabUrlList,
-    addToNewTabUrlList,
-    removeNewTabUrl,
-    clearHighlights,
-    addHighlight,
-    getHighlightUrls,
-    ignoreKeypressListener,
-    setIgnoreKeypress,
-    entityType,
-    highlightTerm,
-    setHighlightTerm,
-    selectedTag,
-    setSelectedTag,
-    selectedTabsetId,
-    tabsFilter,
-    setListDetailLevel,
-    setShowFullUrls,
-    listDetailLevel,
-    showFullUrls,
-    listDetailLevelGreaterEqual,
-    dbReady,
-    sidePanel,
-    sidePanelSetActiveView,
-    sidePanelIsActive,
-    sidePanelActiveViewIs,
-    toggleLeftDrawer,
-    progress,
-    progressLabel,
-    tabsetsExpanded,
-    hideCurrentTabBox,
-    showCurrentTabBox,
-    toolbarFilter,
-    toggleToolbarFilter,
-    toolbarFilterTerm
-  }
+    // highlight url(s) feature
+    function clearHighlights() {
+        highlightUrls.value = []
+    }
+
+    function addHighlight(url: string) {
+        highlightUrls.value.push(url)
+    }
+
+    const getHighlightUrls = computed(() => highlightUrls.value)
+
+    function ignoreKeypressListener() {
+        return ignoreKeypress.value;
+    }
+
+    function setIgnoreKeypress(b: boolean) {
+        ignoreKeypress.value = b
+    }
+
+    function toggleLeftDrawer() {
+        leftDrawerOpen.value = !leftDrawerOpen.value
+    }
+
+    function hideCurrentTabBox(b: boolean) {
+        showCurrentTabBox.value = !b
+    }
+
+    function toggleToolbarFilter() {
+        toolbarFilter.value = !toolbarFilter.value
+        if (!toolbarFilter.value) {
+            toolbarFilterTerm.value = ''
+        }
+    }
+
+    function createSuccessToast(msg: string, action: any = undefined) {
+        toastTimeouts.value.forEach((timeout: NodeJS.Timeout) => clearTimeout(timeout))
+        toasts.value.push(new Toast(msg, ToastType.INFO, action))
+    }
+
+    function createWarningToast(msg: string, action: any = undefined) {
+        toastTimeouts.value.forEach((timeout: NodeJS.Timeout) => clearTimeout(timeout))
+        toasts.value.push(new Toast(msg, ToastType.WARNING, action))
+    }
+
+    function createErrorToast(msg: string) {
+        toastTimeouts.value.forEach((timeout: NodeJS.Timeout) => clearTimeout(timeout))
+        toasts.value.push(new Toast(msg, ToastType.ERROR))
+    }
+
+    function removeToast(toast: Toast) {
+        const index = _.findIndex(toasts.value, t => t.id === toast.id)
+        if (index >= 0) {
+            toasts.value.splice(index, 1)
+        }
+    }
+
+    function delayedToastRemoval(delay: number = 3000) {
+        if (toasts.value.length > 0) {
+            const toast = toasts.value[0]
+            let timeout = setTimeout(() => {
+                removeToast(toast)
+            }, delay)
+            toastTimeouts.value.push(timeout)
+        }
+    }
+
+    function callUndoActionFromCurrentToast() {
+        if (toasts.value.length > 0) {
+            const toast = toasts.value[0]
+            console.log("applying undo method...")
+            toast.action.handler.apply(null)
+            removeToast(toast)
+        }
+    }
+
+    function getButtonSize(ident: string) {
+        if (ident === 'sidePanelFooter') {
+            const viewsCount = sidePanel.value.enabledViewsCount()
+            const limit = Math.min(viewsCount, 7)
+            return (16 - limit) + "px"
+        }
+        console.log("warning, using unknown ident", ident)
+        return "19px"
+    }
+
+    return {
+        rightDrawer,
+        rightDrawerOpen,
+        leftDrawerOpen,
+        rightDrawerSetActiveTab,
+        draggingTab,
+        droppingTab,
+        newTabsetEmptyByDefault,
+        hideInfoMessage,
+        restoreHints,
+        showMessage,
+        footerInfo,
+        getContentCount,
+        setSelectedTab,
+        getSelectedTab,
+        newTabUrlList,
+        addToNewTabUrlList,
+        removeNewTabUrl,
+        clearHighlights,
+        addHighlight,
+        getHighlightUrls,
+        ignoreKeypressListener,
+        setIgnoreKeypress,
+        entityType,
+        highlightTerm,
+        setHighlightTerm,
+        selectedTag,
+        setSelectedTag,
+        selectedTabsetId,
+        tabsFilter,
+        setListDetailLevel,
+        setShowFullUrls,
+        listDetailLevel,
+        showFullUrls,
+        listDetailLevelGreaterEqual,
+        dbReady,
+        sidePanel,
+        sidePanelSetActiveView,
+        sidePanelIsActive,
+        sidePanelActiveViewIs,
+        toggleLeftDrawer,
+        progress,
+        progressLabel,
+        tabsetsExpanded,
+        hideCurrentTabBox,
+        showCurrentTabBox,
+        toolbarFilter,
+        toggleToolbarFilter,
+        toolbarFilterTerm,
+        toasts,
+        createSuccessToast,
+        createWarningToast,
+        createErrorToast,
+        delayedToastRemoval,
+        callUndoActionFromCurrentToast,
+        getButtonSize
+    }
 })
diff --git a/test/vitest/__tests__/domain/tabsets/CreateTabset.test.ts b/test/vitest/__tests__/domain/tabsets/CreateTabset.test.ts
index 86f4b9a9..5018fb29 100644
--- a/test/vitest/__tests__/domain/tabsets/CreateTabset.test.ts
+++ b/test/vitest/__tests__/domain/tabsets/CreateTabset.test.ts
@@ -13,7 +13,7 @@ installQuasarPlugin();
 
 vi.mock('vue-router')
 
-describe('AddTabToTabsetCommand', () => {
+describe('CreateTabsetCommand', () => {
 
   let db = null as unknown as PersistenceService
 
@@ -39,7 +39,7 @@ describe('AddTabToTabsetCommand', () => {
     expect(executionResult.result.replaced).toBe(false)
     expect(executionResult.result.tabset.name).toBe("tabsetName")
     expect(executionResult.result.merged).toBe(true)
-    expect(executionResult.message).toBe("Tabset 'tabsetName' created successfully")
+    expect(executionResult.message).toBe("Tabset created")
 
     const db = useDB(undefined).db
     await db.loadTabsets()