From ac1c32ce47c7cc8e122db44c2c6fb93b38d57cbc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carsten=20Gr=C3=A4f?= <evandor@gmail.com>
Date: Wed, 1 Nov 2023 14:12:03 +0100
Subject: [PATCH] wip

---
 src-bex/manifest.json                         |  21 +++
 src/components/DrawerRight.vue                |   7 +-
 ...rButton.vue => SidePanelToolbarButton.vue} |   0
 src/components/views/OpenTabsView.vue         | 178 ++++++++++++++++++
 src/components/widgets/SearchWidget2.vue      |  22 ++-
 .../widgets/TabListElementWidget.vue          | 147 +++++++--------
 src/components/widgets/ToolbarButton.vue      |   3 +-
 src/domain/tabsets/RenameTabset.ts            |   2 +-
 src/layouts/DefaultLayout.vue                 |   1 -
 src/layouts/FullPageLayout.vue                |   8 +-
 src/pages/TabsetPage.vue                      |   2 +-
 .../sidepanel/SidePanelBookmarksPage.vue      |   5 +-
 .../sidepanel/SidePanelOpenTabsListViewer.vue |   5 +-
 .../sidepanel/helper/FirstToolbarHelper.vue   |  19 +-
 .../helper/SearchWithTransitionHelper.vue     |   2 +-
 .../SidePanelToolbarTabNavigationHelper.vue   |   7 +-
 src/services/ChromeListeners.ts               |  18 ++
 src/stores/tabsStore.ts                       |  15 +-
 src/stores/uiStore.ts                         |   2 +-
 19 files changed, 350 insertions(+), 114 deletions(-)
 rename src/components/buttons/{ToolbarButton.vue => SidePanelToolbarButton.vue} (100%)
 create mode 100644 src/components/views/OpenTabsView.vue

diff --git a/src-bex/manifest.json b/src-bex/manifest.json
index 0b71362a..ae914049 100644
--- a/src-bex/manifest.json
+++ b/src-bex/manifest.json
@@ -41,6 +41,27 @@
         "default": "Ctrl+B",
         "mac": "Command+B"
       }
+    },
+    "search": {
+      "suggested_key": {
+        "default": "Ctrl+K",
+        "mac": "Command+K"
+      },
+      "description": "Open Search Box"
+    },
+    "tabHistoryBack": {
+      "suggested_key": {
+        "default": "Alt+Left",
+        "mac": "Alt+Left"
+      },
+      "description": "Open last open tab"
+    },
+    "tabHistoryForward": {
+      "suggested_key": {
+        "default": "Alt+Right",
+        "mac": "Alt+Right"
+      },
+      "description": "Forward to next tab (if available)"
     }
   },
   "options_page": "www/index.html#/mainpanel/settings",
diff --git a/src/components/DrawerRight.vue b/src/components/DrawerRight.vue
index 236ae3e9..7b84a51f 100644
--- a/src/components/DrawerRight.vue
+++ b/src/components/DrawerRight.vue
@@ -59,7 +59,8 @@
   <div class="row greyBorderTop"></div>
 
   <!--  <div>{{useUiStore().rightDrawerViewStack}}*</div>-->
-  <UnassignedAndOpenTabs v-if="tab === DrawerTabs.UNASSIGNED_TABS"/>
+<!--  <UnassignedAndOpenTabs v-if="tab === DrawerTabs.UNASSIGNED_TABS"/>-->
+  <OpenTabsView v-if="tab === DrawerTabs.OPEN_TABS"/>
   <BookmarksTree v-else-if="tab === DrawerTabs.BOOKMARKS"/>
   <!--      <OpenTabs v-else-if="tab ===  DrawerTabs.OPEN_TABS" :filter="filter"/>-->
   <!--      <UnassignedTabs v-else-if="tab ===  DrawerTabs.UNASSIGNED_TABS" :filter="filter"/>-->
@@ -105,14 +106,12 @@ import TagsListViewer from "components/views/TagsListViewer.vue";
 import SidePanelTagsListViewer from "pages/sidepanel/SidePanelTagsListViewer.vue";
 import TagListViewer from "components/views/TagListViewer.vue";
 import ByDomainList from "components/ByDomainList.vue";
+import OpenTabsView from "components/views/OpenTabsView.vue";
 
-const router = useRouter()
 const route = useRoute()
 
-const featureToggles = useSettingsStore()
 const tabsStore = useTabsStore()
 const settingsStore = useSettingsStore()
-const uiStore = useUiStore()
 
 const openTabsCountRatio = ref(0)
 const tab = ref<DrawerTabs>(useUiStore().rightDrawer.activeTab)
diff --git a/src/components/buttons/ToolbarButton.vue b/src/components/buttons/SidePanelToolbarButton.vue
similarity index 100%
rename from src/components/buttons/ToolbarButton.vue
rename to src/components/buttons/SidePanelToolbarButton.vue
diff --git a/src/components/views/OpenTabsView.vue b/src/components/views/OpenTabsView.vue
new file mode 100644
index 00000000..18a2ed7e
--- /dev/null
+++ b/src/components/views/OpenTabsView.vue
@@ -0,0 +1,178 @@
+<template>
+
+        <div class="q-ma-none">
+          <div class="row q-ma-none q-pa-none">
+            <div class="col-12 q-ma-none q-pa-none q-pt-lg">
+
+              <InfoMessageWidget
+                  v-if="tabsStore.currentTabsetId && tabs.length > 0 && !userCanSelect"
+                  :probability="1"
+                  css-class="q-pa-sm q-gutter-sm"
+                  force-display
+                  ident="unassignedAndOpenTabs_userCannotSelect"
+                  hint="Tabs with grey background are already contained in the current tabset."/>
+
+              <div v-if="tabsStore.currentTabsetId && tabs.length > 1 && userCanSelect"
+                   class="q-ma-none" style="border: 1px dotted grey; border-radius: 3px">
+                <div class="row">
+                  <div class="col-6 q-pa-xs">
+                    <q-btn flat color="primary" size="11px" icon="keyboard_double_arrow_left"
+                           :label="addLabel()"
+                           @click="saveSelectedTabs()">
+                      <q-tooltip class="tooltip" v-html="addTooltip()"></q-tooltip>
+                    </q-btn>
+
+                  </div>
+                  <div class="col q-pa-xs text-right">
+
+                    <q-checkbox v-if="useSelection"
+                                @update:model-value="val => toggleInvert(val)"
+                                rigth-label
+                                class="text-primary text-uppercase q-mr-lg"
+                                style="font-size: 11px"
+                                v-model="invert"
+                                color="primary"
+                                size="30px"
+                                label="invert"
+                                checked-icon="task_alt"
+                                unchecked-icon="check_box_outline_blank"
+                    />
+
+                    <q-checkbox
+                        left-label
+                        class="text-primary text-uppercase"
+                        style="font-size: 11px"
+                        v-model="useSelection"
+                        color="primary"
+                        size="30px"
+                        :label="checkboxLabel()"
+                        checked-icon="task_alt"
+                        unchecked-icon="check_box_outline_blank"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <vue-draggable-next
+                  :list="tabs"
+                  :group="{ name: 'tabs', pull: 'clone', put: false }"
+                  :sort="true">
+
+                <div
+                    class="col-12 q-pa-xs items-center justify-center" style="width:100%; max-width: 300px;cursor: move"
+                    v-for="tab in tabs"
+                    :key="tab.id">
+
+                  <OpenTabCard
+                      v-on:selectionChanged="tabSelectionChanged"
+                      v-on:addedToTabset="tabAddedToTabset"
+                      v-on:hasSelectable="hasSelectable"
+                      :chromeTab="tab"
+                      :useSelection="useSelection"/>
+
+                </div>
+
+              </vue-draggable-next>
+
+
+            </div>
+          </div>
+
+        </div>
+
+
+</template>
+
+<script setup lang="ts">
+import {useTabsStore} from "src/stores/tabsStore";
+import {Tabset} from "src/models/Tabset";
+import _ from "lodash";
+import {onMounted, ref, watchEffect, watch} from "vue"
+import OpenTabCard from "components/layouts/OpenTabCard.vue";
+import {VueDraggableNext} from 'vue-draggable-next'
+import TabsetService from "src/services/TabsetService";
+import {useTabsetService} from "src/services/TabsetService2";
+import InfoMessageWidget from "components/widgets/InfoMessageWidget.vue";
+import {useRoute} from "vue-router";
+import {useUiStore} from "src/stores/uiStore";
+import Analytics from "src/utils/google-analytics";
+import FirstToolbarHelper from "pages/sidepanel/helper/FirstToolbarHelper.vue";
+import SidePanelToolbarTabNavigationHelper from "pages/sidepanel/helper/SidePanelToolbarTabNavigationHelper.vue";
+import CloseSidePanelViewButton from "components/buttons/CloseSidePanelViewButton.vue";
+import SidePanelToolbarButton from "components/buttons/SidePanelToolbarButton.vue";
+
+const tabsStore = useTabsStore()
+const route = useRoute()
+
+const useSelection = ref(false)
+const invert = ref(false)
+const userCanSelect = ref(false)
+
+const tabSelection = ref<Set<string>>(new Set<string>())
+const tabs = ref<chrome.tabs.Tab[]>([])
+
+onMounted(() => {
+  Analytics.firePageViewEvent('OpenTabsView', document.location.href);
+})
+
+watchEffect(() => {
+  tabs.value = useTabsStore().tabs
+  console.log("tabs.value", tabs.value)
+  const filterTerm = useUiStore().toolbarFilterTerm.toLowerCase()
+  if (filterTerm.length > 0) {
+    tabs.value = _.filter(tabs.value, (t: chrome.tabs.Tab) =>
+        !!(t.url && t.url?.indexOf(filterTerm) >= 0 ||
+            (t.title && t.title.toLowerCase()?.indexOf(filterTerm) >= 0)))
+  }
+})
+
+watchEffect(() => {
+  userCanSelect.value = false
+})
+
+const addTooltip = () => useSelection.value ?
+    `Add ${tabSelection.value.size} tab(s) to ${tabsStore.currentTabsetName}` :
+    `Add all tabs to ${tabsStore.currentTabsetName}`
+
+const addLabel = () => 'add'
+const checkboxLabel = () => useSelection.value ? '' : 'use selection'
+const tabSelectionChanged = (a: any) => {
+  const {tabId, selected} = a
+  if (selected) {
+    tabSelection.value.add(tabId)
+  } else {
+    tabSelection.value.delete(tabId)
+  }
+}
+
+const tabAddedToTabset = (a: any) => {
+  const {tabId, tabUrl} = a
+  tabSelection.value.delete(tabId)
+}
+
+const hasSelectable = () => userCanSelect.value = true
+
+const saveSelectedTabs = () => {
+  TabsetService.saveSelectedPendingTabs()
+}
+
+const toggleInvert = (invert: boolean) => {
+  tabsStore.pendingTabset?.tabs.forEach(t => {
+    if (!useTabsetService().urlExistsInCurrentTabset(t.url || '')) {
+      t.selected = !t.selected
+      tabSelectionChanged({tabId: t.id, selected: t.selected})
+    }
+  })
+}
+
+const addOpenTabs = () => {
+  if (process.env.MODE !== 'bex') {
+    console.log("useTabsStore().pendingTabset", useTabsStore().pendingTabset)
+    useTabsStore().pendingTabset = new Tabset("dummy", "dummy", [])
+  } else {
+    TabsetService.createPendingFromBrowserTabs()
+  }
+}
+
+</script>
+
diff --git a/src/components/widgets/SearchWidget2.vue b/src/components/widgets/SearchWidget2.vue
index 9a092867..b1e1a6bd 100644
--- a/src/components/widgets/SearchWidget2.vue
+++ b/src/components/widgets/SearchWidget2.vue
@@ -1,7 +1,8 @@
 <template>
 
   <div class="q-gutter-md row items-start fit">
-    <q-input dense standout filled autofocus
+    <q-input dense standout filled
+             ref="searchInputRef"
              :placeholder="inputPlaceholder()"
              class="fit q-mx-md"
              color="primary"
@@ -16,7 +17,7 @@
 
 <script lang="ts" setup>
 
-import {ref, watchEffect} from "vue";
+import {onMounted, ref, watchEffect} from "vue";
 import {useSearchStore} from "src/stores/searchStore";
 import {usePermissionsStore} from "src/stores/permissionsStore";
 import {FeatureIdent} from "src/models/AppFeature";
@@ -28,9 +29,19 @@ const props = defineProps({
 
 const searchStore = useSearchStore()
 const search = ref(props.searchTerm)
-const typedOrSelected = ref<any>()
+const searchInputRef = ref<HTMLInputElement | null>(null);
 const highlight = ref<string | undefined>(undefined)
 
+onMounted(() => {
+  setTimeout(() => {
+        if (searchInputRef.value) {
+          searchInputRef.value?.focus()
+        }
+      }, 200
+  )
+})
+
+
 watchEffect(() => {
   searchStore.term = search.value
 })
@@ -43,9 +54,10 @@ const inputPlaceholder = () => {
     return `Found ${props.searchTerm} ${props.searchHits} time(s)`
   }
   if (usePermissionsStore().hasFeature(FeatureIdent.BOOKMARKS)) {
-    return "Search in all tabs and bookmarks"
+    return "Search all tabs and bookmarks"
   }
-  return "Search in all tabs"
+
+  return "Search all tabs"
 }
 
 </script>
diff --git a/src/components/widgets/TabListElementWidget.vue b/src/components/widgets/TabListElementWidget.vue
index 9de95916..2d4a7e35 100644
--- a/src/components/widgets/TabListElementWidget.vue
+++ b/src/components/widgets/TabListElementWidget.vue
@@ -20,7 +20,7 @@
     <!-- name or title -->
     <q-item-label>
       <div>
-        <div class="q-pr-lg cursor-pointer" >
+        <div class="q-pr-lg cursor-pointer">
           <q-chip v-if="isOpen(props.tab) && props.showIsOpened"
                   class="q-my-none q-py-none q-ml-none q-mr-sm"
                   clickable
@@ -40,7 +40,7 @@
             <q-tooltip class="tooltip">This tab has a duplicate inside this tabset and could be deleted</q-tooltip>
           </q-chip>
           <span v-if="useTabsStore().getCurrentTabset?.sorting === 'alphabeticalTitle'">
-            <q-icon name="arrow_right" size="16px" />
+            <q-icon name="arrow_right" size="16px"/>
           </span>
           {{ nameOrTitle(props.tab) }}
           <q-popup-edit :model-value="dynamicNameOrTitleModel(tab)" v-slot="scope"
@@ -59,17 +59,17 @@
 
     <!-- url -->
     <q-item-label
-      v-if="props.tab.url"
-      caption class="ellipsis-2-lines text-blue-10"
-      @mouseover="showButtonsProp = true"
-      @mouseleave="showButtonsProp = false">
+        v-if="props.tab.url"
+        caption class="ellipsis-2-lines text-blue-10"
+        @mouseover="showButtonsProp = true"
+        @mouseleave="showButtonsProp = false">
       <div class="q-pr-lg cursor-pointer" style="display: inline-block;"
            @click.stop="open(props.tab)">
 
         <span v-if="useTabsStore().getCurrentTabset?.sorting === 'alphabeticalUrl'">
-          <q-icon name="arrow_right" size="16px" />
+          <q-icon name="arrow_right" size="16px"/>
         </span>
-        <short-url :url="props.tab?.url" :hostname-only="true" />
+        <short-url :url="props.tab?.url" :hostname-only="true"/>
 
         <q-icon class="q-ml-xs" name="open_in_new"/>
         <q-icon v-if="showButtonsProp"
@@ -86,6 +86,16 @@
       <q-icon color="blue-10" name="edit_note"/>
       {{ props.tab.note }}
     </q-item-label>
+
+    <!-- tabsets -->
+    <q-item-label class="text-grey-10" text-subtitle1>
+      <q-icon color="blue-10" name="edit_note"/>
+      <q-chip class="cursor-pointer q-ml-none q-mr-sm q-mt-md" size="9px" clickable icon="tab" v-for="badge in tsBadges">
+        {{ badge['label' as keyof object] }}
+        <q-tooltip class="tooltip">This tab is also contained in this tabset</q-tooltip>
+      </q-chip>
+    </q-item-label>
+
   </q-item-section>
 
   <!-- new tab and edit note buttons -->
@@ -129,6 +139,7 @@ import {useTabsetService} from "src/services/TabsetService2";
 import ShortUrl from "components/utils/ShortUrl.vue";
 import {useTabsStore} from "src/stores/tabsStore";
 import {useRouter} from "vue-router";
+import _ from "lodash";
 
 const props = defineProps({
   tab: {type: Object as PropType<Tab>, required: true},
@@ -137,30 +148,52 @@ const props = defineProps({
   highlightUrl: {type: String, required: false}
 })
 
-const emits = defineEmits(['sendCaption'])
-
 const $q = useQuasar()
 
 const showButtonsProp = ref<boolean>(false)
 const thumbnail = ref<string | undefined>(undefined)
 const imgFromBlob = ref<string>("")
+const tsBadges = ref<object[]>([])
+
 const router = useRouter()
 
+watchEffect(() => {
+  if (props.tab.url) {
+    const url = props.tab.url
+    const tabsetIds = useTabsetService().tabsetsFor(url)
+    tsBadges.value = []
+    //created.value = undefined
+    _.forEach(tabsetIds, tsId => {
+      // if (tsId === props.tabsetId) {
+      //   const tabsForUrl = tabsStore.tabsForUrl(currentChromeTab.value.url || '')
+      //   if (tabsForUrl && tabsForUrl.length > 0) {
+      //     //created.value = formatDate(tabsForUrl[0].created)
+      //   }
+      // }
+      tsBadges.value.push({
+        label: TabsetService.nameForTabsetId(tsId),
+        tabsetId: tsId,
+        encodedUrl: btoa(url || '')
+      })
+    })
+  }
+})
+
 onMounted(() => {
   const blobImgPath = props.tab.image
   if (blobImgPath && blobImgPath.startsWith('blob://')) {
     useTabsetService().getBlob(blobImgPath.replace("blob://", ""))
-      .then((res) => {
-        var reader = new FileReader();
-        reader.readAsDataURL(res.content);
-        reader.onloadend = function () {
-          var base64data = reader.result;
-          if (base64data) {
-            imgFromBlob.value = base64data.toString()
+        .then((res) => {
+          var reader = new FileReader();
+          reader.readAsDataURL(res.content);
+          reader.onloadend = function () {
+            var base64data = reader.result;
+            if (base64data) {
+              imgFromBlob.value = base64data.toString()
+            }
           }
-        }
-      })
-      .catch((err) => console.error(err))
+        })
+        .catch((err) => console.error(err))
   }
 })
 
@@ -173,18 +206,6 @@ function getShortHostname(host: string) {
   return host
 }
 
-function getHost(urlAsString: string, shorten: Boolean = true): string {
-  try {
-    const url = new URL(urlAsString)
-    if (!shorten) {
-      return url.protocol + "://" + url.host.toString()
-    }
-    return getShortHostname(url.host)
-  } catch (e) {
-    return "---";
-  }
-}
-
 const itemStyle = (tab: Tab) => {
   let border = ""
   let background = ''
@@ -193,27 +214,6 @@ const itemStyle = (tab: Tab) => {
 
 const isOpen = (tab: Tab): boolean => TabsetService.isOpen(tab?.url || '')
 
-const setInfo = (tab: Tab) => {
-  const parts = (tab?.url || '').split('?')
-  if (parts.length > 1) {
-    emits('sendCaption', parts[0] + "[... params omitted....]")
-  } else if (parts.length === 1) {
-    emits('sendCaption', parts[0].toString());
-  }
-}
-
-const selectTab = (tab: Tab) => {
-  TabsetService.setOnlySelectedTab(tab)
-}
-
-
-const getFaviconUrl = (chromeTab: chrome.tabs.Tab | undefined) => {
-  if (chromeTab && chromeTab.favIconUrl && !chromeTab.favIconUrl.startsWith("chrome")) {
-    return chromeTab.favIconUrl
-  }
-  return ''//'favicon-unknown-32x32.png'
-}
-
 const deleteTab = (tab: Tab) => useCommandExecutor().executeFromUi(new DeleteTabCommand(tab))
 
 const editNoteDialog = (tab: Tab) => $q.dialog({
@@ -221,15 +221,6 @@ const editNoteDialog = (tab: Tab) => $q.dialog({
   componentProps: {tabId: tab.id, note: tab.note}
 })
 
-const addToNewTabUrlList = (tab: Tab) => {
- // console.log("got tab", tab)
-  useUiStore().addToNewTabUrlList({
-    url: tab.url,
-    title: tab.title,
-    favIconUrl: tab.favIconUrl
-  })
-}
-
 const nameOrTitle = (tab: Tab) => {
   // if (tab.executionResult) {
   //   return tab.executionResult[0]['email' as keyof object] + " <img src='"+tab.executionResult[0]['picture' as keyof object]['medium' as keyof object]+"' />"
@@ -240,10 +231,10 @@ const nameOrTitle = (tab: Tab) => {
 const dynamicNameOrTitleModel = (tab: Tab) => tab.name ? tab.name : tab?.title
 
 const setCustomTitle = (tab: Tab, newValue: string) =>
-  useCommandExecutor().executeFromUi(new UpdateTabNameCommand(tab, newValue))
+    useCommandExecutor().executeFromUi(new UpdateTabNameCommand(tab, newValue))
 
 const copyToClipboard = (text: string) =>
-  useCommandExecutor().executeFromUi(new CopyToClipboardCommand(text))
+    useCommandExecutor().executeFromUi(new CopyToClipboardCommand(text))
 
 const thumbnailFor = async (tab: Tab): Promise<object> => {
   return await TabsetService.getThumbnailFor(tab)
@@ -253,28 +244,24 @@ watchEffect(() => {
   if (props.tab) {
     // @ts-ignore
     thumbnailFor(props.tab)
-      .then((tn: object) => {
-        //console.log("tn", tn)
-        if (tn && tn['thumbnail' as keyof object]) {
-          thumbnail.value = tn['thumbnail' as keyof object]
-        }
-      })
-      .catch((err) => {
-        //console.log("could not get thumbnail for ", props.tab)
-      })
+        .then((tn: object) => {
+          //console.log("tn", tn)
+          if (tn && tn['thumbnail' as keyof object]) {
+            thumbnail.value = tn['thumbnail' as keyof object]
+          }
+        })
+        .catch((err) => {
+          //console.log("could not get thumbnail for ", props.tab)
+        })
   }
 })
 
 const open = (tab: Tab) => {
   if (process.env.MODE === 'electron') {
-    //const candidates = useTabsStore().tabsForUrl(withUrl)
-    //console.log("found candidates", candidates)
-    //if (candidates.length > 0) {
-      router.push("/browser/" + tab.id)
-      return Promise.resolve()
-    //}
+    router.push("/browser/" + tab.id)
+    return Promise.resolve()
   }
-  NavigationService.openOrCreateTab(props.tab?.url )
+  NavigationService.openOrCreateTab(props.tab?.url || '')
 }
 
 </script>
diff --git a/src/components/widgets/ToolbarButton.vue b/src/components/widgets/ToolbarButton.vue
index c6fd7e53..6dd81e12 100644
--- a/src/components/widgets/ToolbarButton.vue
+++ b/src/components/widgets/ToolbarButton.vue
@@ -33,7 +33,6 @@ import {usePermissionsStore} from "src/stores/permissionsStore";
 import {FeatureIdent} from "src/models/AppFeature";
 
 const permissionsStore = usePermissionsStore()
-const uiStore = useUiStore()
 
 const props = defineProps({
   feature: {type: String, required: false},
@@ -53,7 +52,7 @@ const outlinedIfActive = (): boolean => {
   return false
 }
 
-const tabsClicked = (tab: DrawerTabs, data: object = {}) => useUiStore().rightDrawerSetActiveTab(tab, data)
+const tabsClicked = (tab: DrawerTabs, data: object = {}) => useUiStore().rightDrawerSetActiveTab(tab)
 
 
 </script>
diff --git a/src/domain/tabsets/RenameTabset.ts b/src/domain/tabsets/RenameTabset.ts
index 8c6a86f2..9ca5e8bc 100644
--- a/src/domain/tabsets/RenameTabset.ts
+++ b/src/domain/tabsets/RenameTabset.ts
@@ -23,7 +23,7 @@ export class RenameTabsetCommand implements Command<any> {
     constructor(
         public tabsetId: string,
         public newName: string,
-        public newColor: string | undefined) {
+        public newColor: string | undefined = undefined) {
     }
 
     async execute(): Promise<ExecutionResult<string>> {
diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index 14c3afbe..36c143b4 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -166,7 +166,6 @@
               content-class="column justify-between no-wrap bg-grey-1">
       <DrawerRight/>
 
-      <!--      <UnassignedTabs v-else-if="tab ===  DrawerTabs.UNASSIGNED_TABS" :filter="filter"/>-->
 
     </q-drawer>
 
diff --git a/src/layouts/FullPageLayout.vue b/src/layouts/FullPageLayout.vue
index 4c1b178d..8f427f81 100644
--- a/src/layouts/FullPageLayout.vue
+++ b/src/layouts/FullPageLayout.vue
@@ -125,6 +125,12 @@
             tooltip="Show add tabs view"
             :restricted="false"/>
 
+        <ToolbarButton
+            :drawer="DrawerTabs.OPEN_TABS"
+            icon="o_playlist_add"
+            tooltip="Show Open Tabs View"
+            :restricted="false"/>
+
         <ToolbarButton
             :drawer="DrawerTabs.TAGS_VIEWER"
             icon="o_label"
@@ -175,8 +181,6 @@
               content-class="column justify-between no-wrap bg-grey-1">
       <DrawerRight/>
 
-      <!--      <UnassignedTabs v-else-if="tab ===  DrawerTabs.UNASSIGNED_TABS" :filter="filter"/>-->
-
     </q-drawer>
 
     <q-page-container>
diff --git a/src/pages/TabsetPage.vue b/src/pages/TabsetPage.vue
index 390ddaf5..ce9a843f 100644
--- a/src/pages/TabsetPage.vue
+++ b/src/pages/TabsetPage.vue
@@ -126,7 +126,7 @@
         <!--        <q-separator vertical dark inset />-->
         <!--        <span>{{ useUiStore().tabsFilter }}</span>-->
         <q-btn
-            v-if="tabsStore.currentTabsetId !== '' && tabsStore.getTabset(tabsStore.currentTabsetId) && tabsStore.getCurrentTabset?.tabs.length > 0 && $q.screen.gt.xs"
+            v-if="tabsStore.currentTabsetId !== '' && tabsStore.getTabset(tabsStore.currentTabsetId) && tabsStore.getCurrentTabset?.tabs?.length > 0 && $q.screen.gt.xs"
             flat
             :text-color="useUiStore().tabsFilter ? 'secondary' : 'primary'"
             :disable="tabset?.type === TabsetType.DYNAMIC"
diff --git a/src/pages/sidepanel/SidePanelBookmarksPage.vue b/src/pages/sidepanel/SidePanelBookmarksPage.vue
index 2a337708..f0f770eb 100644
--- a/src/pages/sidepanel/SidePanelBookmarksPage.vue
+++ b/src/pages/sidepanel/SidePanelBookmarksPage.vue
@@ -20,7 +20,7 @@
 
           <SidePanelToolbarTabNavigationHelper />
 
-          <ToolbarButton
+          <SidePanelToolbarButton
               icon="close"
               tooltip="Close this view"
               @click="useUiStore().sidePanelSetActiveView(SidePanelView.MAIN)"
@@ -41,8 +41,9 @@ import FirstToolbarHelper from "pages/sidepanel/helper/FirstToolbarHelper.vue";
 import {SidePanelView, useUiStore} from "stores/uiStore";
 import {onMounted} from "vue";
 import Analytics from "src/utils/google-analytics";
-import ToolbarButton from "components/buttons/ToolbarButton.vue";
+import ToolbarButton from "components/buttons/SidePanelToolbarButton.vue";
 import SidePanelToolbarTabNavigationHelper from "pages/sidepanel/helper/SidePanelToolbarTabNavigationHelper.vue";
+import SidePanelToolbarButton from "components/buttons/SidePanelToolbarButton.vue";
 
 onMounted(() => {
   Analytics.firePageViewEvent('SidePanelBookmarksPage', document.location.href);
diff --git a/src/pages/sidepanel/SidePanelOpenTabsListViewer.vue b/src/pages/sidepanel/SidePanelOpenTabsListViewer.vue
index 784d7f4a..34b95b80 100644
--- a/src/pages/sidepanel/SidePanelOpenTabsListViewer.vue
+++ b/src/pages/sidepanel/SidePanelOpenTabsListViewer.vue
@@ -93,7 +93,7 @@
 
         <template v-slot:iconsRight>
           <template v-if="tabs.length > 1">
-            <ToolbarButton icon="filter_list" size="11px" @click="useUiStore().toggleToolbarFilter()"/>
+            <SidePanelToolbarButton icon="filter_list" size="11px" @click="useUiStore().toggleToolbarFilter()"/>
             <span class="q-ma-none q-pa-none q-mx-sm text-grey-5">|</span>
           </template>
           <SidePanelToolbarTabNavigationHelper/>
@@ -120,9 +120,10 @@ import {useRoute, useRouter} from "vue-router";
 import {useUiStore} from "src/stores/uiStore";
 import Analytics from "src/utils/google-analytics";
 import FirstToolbarHelper from "pages/sidepanel/helper/FirstToolbarHelper.vue";
-import ToolbarButton from "components/buttons/ToolbarButton.vue";
+import ToolbarButton from "components/buttons/SidePanelToolbarButton.vue";
 import SidePanelToolbarTabNavigationHelper from "pages/sidepanel/helper/SidePanelToolbarTabNavigationHelper.vue";
 import CloseSidePanelViewButton from "components/buttons/CloseSidePanelViewButton.vue";
+import SidePanelToolbarButton from "components/buttons/SidePanelToolbarButton.vue";
 
 const tabsStore = useTabsStore()
 const route = useRoute()
diff --git a/src/pages/sidepanel/helper/FirstToolbarHelper.vue b/src/pages/sidepanel/helper/FirstToolbarHelper.vue
index 1abcca85..36991e65 100644
--- a/src/pages/sidepanel/helper/FirstToolbarHelper.vue
+++ b/src/pages/sidepanel/helper/FirstToolbarHelper.vue
@@ -45,7 +45,7 @@
 
           <slot name="iconsRight">
 
-            <ToolbarButton
+            <SidePanelToolbarButton
                 v-if="showToggleSessionIcon()"
                 :color="existingSession ? (tabsStore.getCurrentTabset?.type === TabsetType.SESSION ? 'red':'grey-5') :'black'"
                 :icon="existingSession ? 'o_stop_circle':'o_play_circle'"
@@ -53,7 +53,7 @@
                 :tooltip="existingSession ? 'Stop Session' : 'Start new Session'"/>
 
             <template v-if="showSearchIcon()">
-              <ToolbarButton icon="search"
+              <SidePanelToolbarButton icon="search"
                              id="toggleSearchBtn"
                              size="11px"
                              color="black"
@@ -63,7 +63,7 @@
 
             <SidePanelToolbarTabNavigationHelper/>
 
-            <ToolbarButton
+            <SidePanelToolbarButton
                 icon="o_add_circle"
                 :tooltip="newTabsetTooltip()"
                 color="warning"
@@ -97,9 +97,10 @@ import {StopSessionCommand} from "src/domain/commands/StopSessionCommand";
 import ChromeApi from "src/services/ChromeApi";
 import SearchWithTransitionHelper from "pages/sidepanel/helper/SearchWithTransitionHelper.vue";
 import {useWindowsStore} from "src/stores/windowsStore";
-import ToolbarButton from "components/buttons/ToolbarButton.vue";
+import ToolbarButton from "components/buttons/SidePanelToolbarButton.vue";
 import SidePanelToolbarTabNavigationHelper from "pages/sidepanel/helper/SidePanelToolbarTabNavigationHelper.vue";
 import FilterWithTransitionHelper from "pages/sidepanel/helper/FilterWithTransitionHelper.vue";
+import SidePanelToolbarButton from "components/buttons/SidePanelToolbarButton.vue";
 
 const props = defineProps({
   title: {type: String, default: "My Tabsets"},
@@ -121,8 +122,9 @@ const existingSession = ref(false)
 const toggleSearch = () => {
   searching.value = !searching.value
   if (searching.value) {
-    // comment out for old search approach (plus SearchWidget2 -> SearchWidget)
     router.push("/sidepanel/search")
+  } else {
+    router.push("/sidepanel")
   }
 }
 
@@ -132,6 +134,13 @@ watchEffect(() => {
   }
 })
 
+chrome.commands.onCommand.addListener((command) => {
+  if(command === 'search') {
+    console.debug(`got Command: ${command}`);
+    toggleSearch()
+  }
+})
+
 const toggleSessionState = () => existingSession ? stopSession() : startSession()
 
 const startSession = () => $q.dialog({
diff --git a/src/pages/sidepanel/helper/SearchWithTransitionHelper.vue b/src/pages/sidepanel/helper/SearchWithTransitionHelper.vue
index c8ceca9d..4b6a5cc8 100644
--- a/src/pages/sidepanel/helper/SearchWithTransitionHelper.vue
+++ b/src/pages/sidepanel/helper/SearchWithTransitionHelper.vue
@@ -13,8 +13,8 @@
 
 <script lang="ts" setup>
 
-import SearchWidget from "components/widgets/SearchWidget.vue";
 import SearchWidget2 from "components/widgets/SearchWidget2.vue";
+import {ref} from "vue";
 
 const props = defineProps({
   searchTerm: {type: String, default: ''},
diff --git a/src/pages/sidepanel/helper/SidePanelToolbarTabNavigationHelper.vue b/src/pages/sidepanel/helper/SidePanelToolbarTabNavigationHelper.vue
index b0cd60b2..1e69ba19 100644
--- a/src/pages/sidepanel/helper/SidePanelToolbarTabNavigationHelper.vue
+++ b/src/pages/sidepanel/helper/SidePanelToolbarTabNavigationHelper.vue
@@ -1,13 +1,13 @@
 <template>
   <template v-if="usePermissionsStore().hasFeature(FeatureIdent.OPEN_TABS)">
-    <ToolbarButton
+    <SidePanelToolbarButton
         icon="chevron_left"
         tooltip="Back to last tab"
         :disable="useTabsStore().chromeTabsHistoryPosition === 0"
         :color="useTabsStore().chromeTabsHistoryPosition === 0 ? 'grey' : 'black'"
         @click="NavigationService.backOneTab()"/>
 
-    <ToolbarButton
+    <SidePanelToolbarButton
         icon="chevron_right"
         tooltip="Return to tab before"
         :disable="useTabsStore().chromeTabsHistoryPosition === useTabsStore().chromeTabsHistory.length-1"
@@ -22,5 +22,6 @@ import {usePermissionsStore} from "stores/permissionsStore";
 import {FeatureIdent} from "src/models/AppFeature";
 import {useTabsStore} from "stores/tabsStore";
 import NavigationService from "src/services/NavigationService";
-import ToolbarButton from "components/buttons/ToolbarButton.vue";
+import ToolbarButton from "components/buttons/SidePanelToolbarButton.vue";
+import SidePanelToolbarButton from "components/buttons/SidePanelToolbarButton.vue";
 </script>
\ No newline at end of file
diff --git a/src/services/ChromeListeners.ts b/src/services/ChromeListeners.ts
index 16d72c89..6403e357 100644
--- a/src/services/ChromeListeners.ts
+++ b/src/services/ChromeListeners.ts
@@ -17,6 +17,8 @@ import {FeatureIdent} from "src/models/AppFeature";
 import {Extractor, Extractors, ExtractorType} from "src/config/Extractors";
 import {useUtils} from "src/services/Utils";
 import {useGroupsStore} from "stores/groupsStore";
+import {useUiStore} from "stores/uiStore";
+import NavigationService from "src/services/NavigationService";
 
 const {
   saveCurrentTabset,
@@ -196,6 +198,22 @@ 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
+        }
+      });
+
     }
 
   }
diff --git a/src/stores/tabsStore.ts b/src/stores/tabsStore.ts
index 21ed29f8..3fadee37 100644
--- a/src/stores/tabsStore.ts
+++ b/src/stores/tabsStore.ts
@@ -15,6 +15,7 @@ import {useTabsetService} from "src/services/TabsetService2";
 import {useWindowsStore} from "src/stores/windowsStore";
 
 async function queryTabs(): Promise<chrome.tabs.Tab[]> {
+    console.log("hier")
     // @ts-ignore
     return await chrome.tabs.query({currentWindow: true});
 }
@@ -533,14 +534,20 @@ export const useTabsStore = defineStore('tabs', {
         },
 
         tabHistoryBack() {
-            this.chromeTabsHistoryPosition -= 1
-            this.chromeTabsHistoryNavigating = true
+            if (this.chromeTabsHistoryPosition > 0) {
+            console.log("called tabHistoryBack with", this.chromeTabsHistoryPosition)
+                this.chromeTabsHistoryPosition -= 1
+                this.chromeTabsHistoryNavigating = true
+            }
             return this.chromeTabsHistory[this.chromeTabsHistoryPosition]
         },
 
         tabHistoryForward() {
-            this.chromeTabsHistoryPosition += 1
-            this.chromeTabsHistoryNavigating = true
+            if (this.chromeTabsHistoryPosition < this.chromeTabsHistory.length - 1) {
+            console.log("called tabHistoryForward with", this.chromeTabsHistoryPosition,this.chromeTabsHistory.length)
+                this.chromeTabsHistoryPosition += 1
+                this.chromeTabsHistoryNavigating = true
+            }
             return this.chromeTabsHistory[this.chromeTabsHistoryPosition]
         }
     }
diff --git a/src/stores/uiStore.ts b/src/stores/uiStore.ts
index 134b52aa..57fe7d4b 100644
--- a/src/stores/uiStore.ts
+++ b/src/stores/uiStore.ts
@@ -83,7 +83,7 @@ export enum ListDetailLevel {
 
 export class RightDrawer {
   constructor(
-    public activeTab: DrawerTabs = DrawerTabs.UNASSIGNED_TABS) {
+    public activeTab: DrawerTabs = DrawerTabs.OPEN_TABS) {
   }
 }