From f4e81c77b45d8bde233c15afd21a809646b569cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carsten=20Gr=C3=A4f?= <evandor@gmail.com>
Date: Thu, 7 Nov 2024 20:16:38 +0100
Subject: [PATCH] wip

---
 src/app/models/AppFeatures.ts                 |  5 +
 src/app/models/FeatureIdent.ts                |  3 +-
 src/components/SidePanelFooter.vue            | 67 ++++++++++---
 src/pages/SidePanelCollectionsPage.vue        | 99 ++++++++++++++-----
 src/pages/SidePanelPage2.vue                  | 25 -----
 .../sidepanel/SidePanelPageContextMenu.vue    | 12 +--
 .../sidepanel/helper/FirstToolbarHelper2.vue  | 67 ++++++-------
 .../SidePanelCollectionsPageToolbar.vue       | 20 ++--
 src/spaces                                    |  2 +-
 src/tabsets                                   |  2 +-
 10 files changed, 185 insertions(+), 117 deletions(-)

diff --git a/src/app/models/AppFeatures.ts b/src/app/models/AppFeatures.ts
index d9eb0de6..3ca3dfa1 100644
--- a/src/app/models/AppFeatures.ts
+++ b/src/app/models/AppFeatures.ts
@@ -181,6 +181,11 @@ export class AppFeatures {
       'Analyse tab contents and use the distraction-free Reading Mode if applicable',
       'library_books', '', ['bex']),
 
+    new Feature(FeatureIdent.HTML_SNIPPETS, FeatureType.EXPERIMENTAL,
+      'HTML Snippets',
+      'Drag and drop Text and Images to the sidebar to create Website Snippets',
+      'text_snippet', '', ['bex']),
+
   ]
 
   getFeature(f: FeatureIdent): Feature | undefined {
diff --git a/src/app/models/FeatureIdent.ts b/src/app/models/FeatureIdent.ts
index 95623502..25d00240 100644
--- a/src/app/models/FeatureIdent.ts
+++ b/src/app/models/FeatureIdent.ts
@@ -32,7 +32,8 @@ export enum FeatureIdent {
   RESEARCH_SESSIONS="RESEARCH_SESSIONS",
   DYNAMIC_TABSET="DYNAMIC_TABSET",
   GALLERY="GALLERY",
-  READING_MODE="READING_MODE"
+  READING_MODE="READING_MODE",
+  HTML_SNIPPETS="HTML_SNIPPETS"
 }
 
 export enum FeatureType {
diff --git a/src/components/SidePanelFooter.vue b/src/components/SidePanelFooter.vue
index 9067f13d..6892ab0f 100644
--- a/src/components/SidePanelFooter.vue
+++ b/src/components/SidePanelFooter.vue
@@ -71,7 +71,15 @@
         &nbsp;
       </div>
       <div v-else class="col text-right">
-
+        <span>
+        <input
+          class="q-ma-none q-pa-none"
+          v-if="useFeaturesStore().hasFeature(FeatureIdent.HTML_SNIPPETS) && useContentStore().currentTabUrl"
+          v-model="ignored"
+          style="border:1px dotted grey;border-radius:3px;max-width:30px;max-height:20px"
+          @drop="drop($event)"/>
+          <q-tooltip class="tooltip_small">Drag and drop text or images from your current tab</q-tooltip>
+        </span>
         <span>
           <q-btn icon="o_settings" v-if="showSettingsButton()"
                  class="q-my-xs q-px-xs q-mr-none"
@@ -131,16 +139,16 @@
             <q-tooltip :delay="2000" anchor="center left" self="center right"
                        class="tooltip-small">Tabsets as full-page app</q-tooltip>
           </q-icon>
-<!--          <q-menu :offset="[0, 7]" fit>-->
-<!--            <q-list dense style="min-width: 200px;min-height:50px">-->
-<!--              <q-item clickable v-close-popup>-->
-<!--                <q-item-section @click="openExtensionTab()">Tabsets as full-page app</q-item-section>-->
-<!--              </q-item>-->
-<!--              <q-item clickable v-close-popup>-->
-<!--                <q-item-section @click="openPwaUrl()">Tabsets Online Access</q-item-section>-->
-<!--              </q-item>-->
-<!--            </q-list>-->
-<!--          </q-menu>-->
+          <!--          <q-menu :offset="[0, 7]" fit>-->
+          <!--            <q-list dense style="min-width: 200px;min-height:50px">-->
+          <!--              <q-item clickable v-close-popup>-->
+          <!--                <q-item-section @click="openExtensionTab()">Tabsets as full-page app</q-item-section>-->
+          <!--              </q-item>-->
+          <!--              <q-item clickable v-close-popup>-->
+          <!--                <q-item-section @click="openPwaUrl()">Tabsets Online Access</q-item-section>-->
+          <!--              </q-item>-->
+          <!--            </q-list>-->
+          <!--          </q-menu>-->
         </span>
         <q-btn v-else-if="useFeaturesStore().hasFeature(FeatureIdent.STANDALONE_APP)"
                icon="o_open_in_new"
@@ -168,7 +176,7 @@ import {useUtils} from "src/core/services/Utils";
 import {useWindowsStore} from "src/windows/stores/windowsStore";
 import {useSuggestionsStore} from "src/suggestions/stores/suggestionsStore";
 import _ from "lodash";
-import {SuggestionState} from "src/suggestions/models/Suggestion";
+import {Suggestion, SuggestionState} from "src/suggestions/models/Suggestion";
 import SuggestionDialog from "src/suggestions/dialogues/SuggestionDialog.vue";
 import {Tabset} from "src/tabsets/models/Tabset";
 import {ToastType} from "src/core/models/Toast";
@@ -186,6 +194,11 @@ import {useTabsetsStore} from "src/tabsets/stores/tabsetsStore";
 import {useFeaturesStore} from "src/features/stores/featuresStore";
 import {SidePanelViews} from "src/models/SidePanelViews";
 import {TabAndTabsetId} from "src/tabsets/models/TabAndTabsetId";
+import {useCommandExecutor} from "src/core/services/CommandExecutor";
+import {AddTabToTabsetCommand} from "src/tabsets/commands/AddTabToTabsetCommand";
+import {Tab, TabSnippet} from "src/tabsets/models/Tab";
+import BrowserApi from "src/app/BrowserApi";
+import {useContentStore} from "src/content/stores/contentStore";
 
 const {handleSuccess, handleError} = useNotificationHandler()
 
@@ -206,6 +219,7 @@ const doShowSuggestionButton = ref(false)
 const transitionGraceTime = ref(false)
 const showWindowTable = ref(false)
 const showStatsTable = ref(false)
+const ignored = ref('')
 const showLogin = ref(false)
 const randomKey = ref<string>(uid())
 const progressValue = ref<number>(0.0)
@@ -242,7 +256,7 @@ watchEffect(() => {
   showSuggestionButton.value =
     doShowSuggestionButton.value ||
     (useUiStore().sidePanelActiveViewIs(SidePanelViews.MAIN) &&
-      _.findIndex(suggestions, (s:Suggestion) => {
+      _.findIndex(suggestions, (s: Suggestion) => {
         return s.state === SuggestionState.NEW ||
           (s.state === SuggestionState.NOTIFICATION && !useFeaturesStore().hasFeature(FeatureIdent.NOTIFICATIONS))
       }) >= 0)
@@ -250,7 +264,7 @@ watchEffect(() => {
   showSuggestionIcon.value =
     !doShowSuggestionButton.value &&
     useUiStore().sidePanelActiveViewIs(SidePanelViews.MAIN) &&
-    _.findIndex(suggestions, (s:Suggestion) => {
+    _.findIndex(suggestions, (s: Suggestion) => {
       return s.state === SuggestionState.DECISION_DELAYED
     }) >= 0
 })
@@ -481,6 +495,31 @@ const additionalActionWasClicked = (event: any) => {
 const offsetBottom = () => ($q.platform.is.capacitor || $q.platform.is.cordova) ? 'margin-bottom:20px;' : ''
 const openPwaUrl = () => NavigationService.openOrCreateTab([process.env.TABSETS_PWA_URL || 'https://www.skysail.io'])
 const showSettingsButton = () => route?.path !== '/sidepanel/welcome' || useAuthStore().isAuthenticated
+
+const drop = (evt: any) => {
+  evt.preventDefault()
+  var text = evt.dataTransfer.getData('text')
+  var html = evt.dataTransfer.getData('text/html')
+  const currentTabUrl = useContentStore().currentTabUrl
+  console.log("===>", evt, text, html, currentTabUrl)
+  if (currentTabUrl) {
+    const existing: Tab | undefined = useTabsetsStore().tabForUrlInSelectedTabset(currentTabUrl!)
+    if (existing) {
+      existing.snippets.push(new TabSnippet(text, html))
+      existing.title = "Snippet ("+existing.snippets.length+")"
+      const currentTabset = useTabsetsStore().getCurrentTabset
+      if (currentTabset) {
+        useTabsetsStore().saveTabset(currentTabset)
+      }
+    } else {
+      const tab = new Tab(uid(), BrowserApi.createChromeTabObject("Snippet", currentTabUrl!))
+      tab.snippets.push(new TabSnippet(text, html))
+      tab.description = text
+      useCommandExecutor().executeFromUi(new AddTabToTabsetCommand(tab))
+    }
+  }
+}
+
 </script>
 
 <style>
diff --git a/src/pages/SidePanelCollectionsPage.vue b/src/pages/SidePanelCollectionsPage.vue
index 2d68f842..bfeeea0f 100644
--- a/src/pages/SidePanelCollectionsPage.vue
+++ b/src/pages/SidePanelCollectionsPage.vue
@@ -12,7 +12,8 @@
 
       <div class="col-12 q-my-lg">
         <q-list>
-          <q-item clickable v-for="c in projects" @click="selectCollection(c as Tabset)">
+          <q-item clickable v-for="c in tabsets"
+                  @click="selectCollection(c as Tabset)">
             <q-item-section>
               <q-item-label>
                 <q-icon name="o_featured_play_list" class="q-mr-xs q-mb-xs"/>
@@ -28,6 +29,25 @@
           </q-item>
         </q-list>
       </div>
+
+      <div>
+        <Draggable v-if="treeData"
+                   class="mtl-tree q-pl-md" v-model="treeData" treeLine :tree-line-offset="0">
+          <template #default="{ node, stat }">
+            <OpenIcon
+              v-if="stat.children.length"
+              :open="stat.open"
+              class="mtl-mr"
+              @click.native="stat.open = !stat.open"
+            />
+            <span class="mtl-ml cursor-pointer" @click="handleTreeClick(node, level)">
+              <q-icon v-if="node.level == 0" name="o_tab" color="warning" class="q-mx-sm" />
+              <q-icon v-else name="o_folder" color="warning" class="q-mx-sm" />
+              {{ node.text }}</span>
+          </template>
+        </Draggable>
+      </div>
+
     </div>
 
 
@@ -42,7 +62,6 @@
 <script lang="ts" setup>
 
 import {onMounted, onUnmounted, ref, watchEffect} from "vue";
-import {useUtils} from "src/core/services/Utils";
 import {useUiStore} from "src/ui/stores/uiStore";
 import Analytics from "src/core/utils/google-analytics";
 import {useI18n} from 'vue-i18n'
@@ -51,25 +70,21 @@ import _ from "lodash"
 import {useTabsetsStore} from "src/tabsets/stores/tabsetsStore";
 import {SelectTabsetCommand} from "src/tabsets/commands/SelectTabset";
 import {useCommandExecutor} from "src/core/services/CommandExecutor";
-import {ExecutionFailureResult, ExecutionResult} from "src/core/domain/ExecutionResult";
+import {ExecutionResult} from "src/core/domain/ExecutionResult";
 import {useRouter} from "vue-router";
-import FirstToolbarHelper2 from "pages/sidepanel/helper/FirstToolbarHelper2.vue";
-import SidePanelCollectionPageToolbar from "pages/sidepanel/helper/SidePanelCollectionPageToolbar.vue";
 import SidePanelCollectionsPageToolbar from "pages/sidepanel/helper/SidePanelCollectionsPageToolbar.vue";
+import {useFeaturesStore} from "src/features/stores/featuresStore";
+import {FeatureIdent} from "src/app/models/FeatureIdent";
+import {useSpacesStore} from "src/spaces/stores/spacesStore";
+import {Draggable, OpenIcon} from "@he-tree/vue";
+import '@he-tree/vue/style/default.css'
 
 const {t} = useI18n({locale: navigator.language, useScope: "global"})
 
-const {inBexMode} = useUtils()
-
 const router = useRouter()
 
-const uiStore = useUiStore()
-
-const view = ref('projects')
 const tabsets = ref<Tabset[]>([])
-
-const projects = ref<Tabset[]>([])
-const project = ref('')
+const treeData = ref<object[]>()
 
 function updateOnlineStatus(e: any) {
   const {type} = e
@@ -89,8 +104,26 @@ onUnmounted(() => {
   // window.removeEventListener('keypress', checkKeystroke);
 })
 
+function treeNodeFromNote(n: Tabset, level = 0): object {
+  console.log("treeNodeFromNote", treeNodeFromNote)
+  return {
+    text: n.name,
+    id: n.id,
+    level,
+    url: chrome.runtime.getURL(`/www/index.html#/mainpanel/notes/${n.id}`),
+    children: _.map(n.folders, (f: Tabset) => {
+      return treeNodeFromNote(f, level + 1)
+    })
+  }
+}
+
 watchEffect(async () => {
-  projects.value = [...useTabsetsStore().tabsets.values()]
+  if (tabsets.value && tabsets.value.length > 0) {
+    console.log("tabsets.value", tabsets.value)
+    treeData.value = _.map(tabsets.value, (f: Tabset) => {
+      return treeNodeFromNote(f)
+    })
+  }
 })
 
 const getTabsetOrder =
@@ -103,17 +136,25 @@ const getTabsetOrder =
     }
   ]
 
-function determineTabsets() {
-  return _.sortBy(
-    _.filter([...useTabsetsStore().tabsets.values()] as Tabset[],
-      (ts: Tabset) => ts.status !== TabsetStatus.DELETED
-        && ts.status !== TabsetStatus.HIDDEN &&
-        ts.status !== TabsetStatus.ARCHIVED),
-    getTabsetOrder, ["asc"]);
-}
-
-watchEffect(() => {
-  tabsets.value = determineTabsets()
+watchEffect(async () => {
+  if (useFeaturesStore().hasFeature(FeatureIdent.SPACES)) {
+    const currentSpace = useSpacesStore().space
+    console.log("currentspace", currentSpace)
+    tabsets.value = _.sortBy(
+      _.filter([...useTabsetsStore().tabsets.values()] as Tabset[], (ts: Tabset) => {
+        if (currentSpace) {
+          if (ts.spaces.indexOf(currentSpace.id) < 0) {
+            return false
+          }
+        }
+        return ts.status !== TabsetStatus.DELETED &&
+          ts.status !== TabsetStatus.HIDDEN &&
+          ts.status !== TabsetStatus.ARCHIVED
+      }),
+      getTabsetOrder, ["asc"])
+  } else {
+    tabsets.value = [...useTabsetsStore().tabsets.values()]
+  }
 })
 
 const selectCollection = (c: Tabset) => {
@@ -126,6 +167,14 @@ const selectCollection = (c: Tabset) => {
       }
     })
 }
+
+const handleTreeClick = (node: any, level:number) => {
+  console.log("clicked", node, level)
+  if (level == 0) {
+    selectCollection(node as Tabset)
+  }
+}
+
 </script>
 
 <style lang="scss">
diff --git a/src/pages/SidePanelPage2.vue b/src/pages/SidePanelPage2.vue
index d7604998..5228bcb6 100644
--- a/src/pages/SidePanelPage2.vue
+++ b/src/pages/SidePanelPage2.vue
@@ -59,9 +59,6 @@
 
       <StartingHint v-if="showStartingHint()"/>
 
-<!--      {{ useContentStore().currentTabUrl}} {{ useContentStore().currentTabStorage}}-->
-<!--      <hr>-->
-<!--      {{ td() }}-->
     </div>
 
     <!-- place QPageSticky at end of page -->
@@ -92,7 +89,6 @@ import TabsetService from "src/tabsets/services/TabsetService";
 import Analytics from "src/core/utils/google-analytics";
 import {useAuthStore} from "stores/authStore";
 import {useSuggestionsStore} from "src/suggestions/stores/suggestionsStore";
-import {TITLE_IDENT} from "boot/constants";
 import AppService from "src/app/AppService";
 import {useI18n} from 'vue-i18n'
 import {useTabsetsStore} from "src/tabsets/stores/tabsetsStore";
@@ -101,8 +97,6 @@ import {useFeaturesStore} from "src/features/stores/featuresStore";
 import SidePanelPageTabList from "src/tabsets/layouts/SidePanelPageTabList.vue";
 import {useWindowsStore} from "src/windows/stores/windowsStore";
 import StartingHint from "pages/widgets/StartingHint.vue";
-import {useActionHandlers} from "src/tabsets/actionHandling/ActionHandlers";
-import {ActionHandlerButtonClickedHolder} from "src/tabsets/actionHandling/model/ActionHandlerButtonClickedHolder";
 import SidePanelNotesView from "src/notes/views/sidepanel/SidePanelNotesView.vue";
 import SidePanelFoldersView from "src/tabsets/views/sidepanel/SidePanelFoldersView.vue";
 import FirstToolbarHelper2 from "pages/sidepanel/helper/FirstToolbarHelper2.vue";
@@ -339,20 +333,6 @@ function checkKeystroke(e: KeyboardEvent) {
   }
 }
 
-const toolbarTitle = (tabsets: Tabset[]): string => {
-  if (useFeaturesStore().hasFeature(FeatureIdent.SPACES)) {
-    const spaceName = useSpacesStore().space ? useSpacesStore().space.label : t('no_space_selected')
-    return tabsets.length > 6 ?
-      spaceName + ' (' + tabsets.length.toString() + ')' :
-      spaceName
-  }
-  const title: string = LocalStorage.getItem(TITLE_IDENT) || ('My Tabsets' + stageIdentifier())
-  return tabsets.length > 6 ? title + ' (' + tabsets.length.toString() + ')' : title
-}
-
-
-const stageIdentifier = () => process.env.TABSETS_STAGE !== 'PRD' ? ' (' + process.env.TABSETS_STAGE + ')' : ''
-
 const tabsetForTabList = (tabset: Tabset) => {
   if (tabset.folderActive) {
     const af = useTabsetService().findFolder(tabset.folders, tabset.folderActive)
@@ -363,11 +343,6 @@ const tabsetForTabList = (tabset: Tabset) => {
   return tabset
 }
 
-const handleButtonClicked = async (tabset: Tabset, args: ActionHandlerButtonClickedHolder, folder?: Tabset) => {
-  console.log(`button clicked: tsId=${tabset.id}, folderId=${folder?.id}, args=...`)
-  await useActionHandlers(undefined).handleClick(tabset, currentChromeTab.value!, args, folder)
-}
-
 const showStartingHint = () => !useUiStore().appLoading && useTabsetsStore().allTabsCount === 0
 
 
diff --git a/src/pages/sidepanel/SidePanelPageContextMenu.vue b/src/pages/sidepanel/SidePanelPageContextMenu.vue
index ce459700..6d1bd7e6 100644
--- a/src/pages/sidepanel/SidePanelPageContextMenu.vue
+++ b/src/pages/sidepanel/SidePanelPageContextMenu.vue
@@ -74,12 +74,12 @@
                          label="Show Gallery"/>
       </template>
 
-      <ContextMenuItem v-if="useTabsetsStore().tabsets.size > 6"
-                       v-close-popup
-                       @was-clicked="focus(tabset)"
-                       icon="filter_center_focus"
-                       color="accent"
-                       label="Focus on tabset"/>
+<!--      <ContextMenuItem v-if="useTabsetsStore().tabsets.size > 6"-->
+<!--                       v-close-popup-->
+<!--                       @was-clicked="focus(tabset)"-->
+<!--                       icon="filter_center_focus"-->
+<!--                       color="accent"-->
+<!--                       label="Focus on tabset"/>-->
 
       <!--      <template v-if="tabset.status === TabsetStatus.DEFAULT && useTabsetsStore().tabsets.size > 4">-->
       <!--        <ContextMenuItem v-close-popup-->
diff --git a/src/pages/sidepanel/helper/FirstToolbarHelper2.vue b/src/pages/sidepanel/helper/FirstToolbarHelper2.vue
index ce68d803..2c4b3813 100644
--- a/src/pages/sidepanel/helper/FirstToolbarHelper2.vue
+++ b/src/pages/sidepanel/helper/FirstToolbarHelper2.vue
@@ -4,26 +4,27 @@
     <q-toolbar-title>
       <div class="row q-ma-none q-pa-none">
 
-        <!-- we have spaces -->
+        <!-- we have spaces
         <div v-if="useFeaturesStore().hasFeature(FeatureIdent.SPACES)" class="col-5 q-ma-none q-pa-none">
 
-          <!-- spaces and no back button -->
-
           <SearchWithTransitionHelper v-if="searching"/>
 
           <FilterWithTransitionHelper v-else-if="showFilter"/>
 
           <template v-else>
-            <div class="column q-ma-none q-pa-none">
-              <div class="col q-ma-none q-pa-none cursor-pointer text-subtitle1">
-                <slot name="title">{{ props.title }}</slot>
+            <div class="col-12 text-subtitle1">
+              <div class="q-ml-md q-mt-sm">
+                <div class="text-caption">{{ spaceTitle() }}</div>
+                <div class="text-body1 text-bold cursor-pointer ellipsis" @click="router.push('/sidepanel/collections')">
+                  {{ currentTabset?.name }}
+                  <q-icon name="arrow_drop_down" class="q-ma-none q-pa-none" color="grey-5" size="xs"/>
+                </div>
               </div>
             </div>
           </template>
-        </div>
+        </div>-->
 
-        <!-- no spaces here -->
-        <div v-else class="col-7 q-ma-none q-pa-none" style="border:0 solid red">
+        <div class="col-7 q-ma-none q-pa-none" style="border:0 solid red">
 
           <!-- no spaces && searching -->
           <SearchWithTransitionHelper v-if="searching"
@@ -37,7 +38,12 @@
             <!-- no spaces && not searching -->
             <div class="col-12 text-subtitle1">
               <div class="q-ml-md q-mt-sm">
-                <div class="text-caption">Collection</div>
+                <template v-if="useFeaturesStore().hasFeature(FeatureIdent.SPACES)">
+                  <div class="text-caption cursor-pointer" @click.stop="router.push('/sidepanel/spaces')">{{ title() }}</div>
+                </template>
+                <template v-else>
+                  <div class="text-caption">{{ title() }}</div>
+                </template>
                 <div class="text-body1 text-bold cursor-pointer ellipsis" @click="router.push('/sidepanel/collections')">
                   {{ currentTabset?.name }}
                   <q-icon name="arrow_drop_down" class="q-ma-none q-pa-none" color="grey-5" size="xs"/>
@@ -48,7 +54,6 @@
           </template>
         </div>
 
-        <!-- spaces or not, here's the icons on the right side -->
         <div class="col-5 text-subtitle1 text-right q-ma-none q-pa-none q-pr-none" v-if="!useUiStore().appLoading" style="border:0 solid green">
 
           <slot name="iconsRight">
@@ -84,16 +89,6 @@
               <SidePanelPageContextMenu v-if="currentTabset" :tabset="currentTabset as Tabset"/>
             </div>
 
-            <!--            <q-btn outline dense-->
-            <!--                   icon="add"-->
-            <!--                   label="Collection"-->
-            <!--                   color="primary"-->
-            <!--                   size="sm"-->
-            <!--                   :class="{ shake: annimateNewTabsetButton }"-->
-            <!--                   data-testid="addTabsetBtn"-->
-            <!--                   @click="openNewTabsetDialog()"-->
-            <!--                   class="q-ma-none q-mt-md q-pl-xs q-pr-sm q-py-xs"-->
-            <!--                   name="o_bookmark_add"/>-->
 
           </slot>
         </div>
@@ -109,7 +104,6 @@ import {useSpacesStore} from "src/spaces/stores/spacesStore";
 import {useRouter} from "vue-router";
 import {ref, watchEffect} from "vue";
 import {useUiStore} from "src/ui/stores/uiStore";
-import NewTabsetDialog from "src/tabsets/dialogues/NewTabsetDialog.vue";
 import SearchWithTransitionHelper from "pages/sidepanel/helper/SearchWithTransitionHelper.vue";
 import SidePanelToolbarTabNavigationHelper from "src/opentabs/pages/SidePanelToolbarTabNavigationHelper.vue";
 import SidePanelToolbarButton from "src/core/components/SidePanelToolbarButton.vue";
@@ -193,22 +187,21 @@ if ($q.platform.is.chrome && $q.platform.is.bex) {
 
 const showSearchIcon = () => useTabsetsStore().tabsets.size > 1
 
-const showToggleSessionIcon = () =>
-  useUiStore().sidePanelActiveViewIs(SidePanelViews.MAIN) &&
-  useFeaturesStore().hasFeature(FeatureIdent.SESSIONS) &&
-  !searching.value
-
-const openNewTabsetDialog = () => {
-  $q.dialog({
-    component: NewTabsetDialog,
-    componentProps: {
-      tabsetId: useTabsetsStore().getCurrentTabset?.id,
-      spaceId: useSpacesStore().space?.id,
-      fromPanel: true
-    }
-  })
-}
+const stageIdentifier = () => process.env.TABSETS_STAGE !== 'PRD' ? ' (' + process.env.TABSETS_STAGE + ')' : ''
 
+const title = (): string => {
+  if (useFeaturesStore().hasFeature(FeatureIdent.SPACES)) {
+    const spaceName = useSpacesStore().space ? useSpacesStore().space.label : t('no_space_selected')
+    // return tabsets.length > 6 ?
+    //   spaceName + ' (' + tabsets.length.toString() + ')' :
+    //   spaceName
+    return spaceName
+  } else {
+    return "Collection"
+  }
+  // const title: string = LocalStorage.getItem(TITLE_IDENT) || ('My Tabsets' + stageIdentifier())
+  // return tabsets.length > 6 ? title + ' (' + tabsets.length.toString() + ')' : title
+}
 
 const handleButtonClicked = async (tabset: Tabset, args: ActionHandlerButtonClickedHolder, folder?: Tabset) => {
   console.log(`button clicked: tsId=${tabset.id}, folderId=${folder?.id}, args=...`)
diff --git a/src/pages/sidepanel/helper/SidePanelCollectionsPageToolbar.vue b/src/pages/sidepanel/helper/SidePanelCollectionsPageToolbar.vue
index f2c2d671..25b0800a 100644
--- a/src/pages/sidepanel/helper/SidePanelCollectionsPageToolbar.vue
+++ b/src/pages/sidepanel/helper/SidePanelCollectionsPageToolbar.vue
@@ -8,7 +8,12 @@
 
           <div class="col-12 text-subtitle1">
             <div class="q-ml-md q-mt-sm">
-              <div class="text-caption">Collection</div>
+              <template v-if="useFeaturesStore().hasFeature(FeatureIdent.SPACES)">
+                <div class="text-caption cursor-pointer">{{ title() }}</div>
+              </template>
+              <template v-else>
+                <div class="text-caption cursor-pointer" @click.stop="router.push('/sidepanel/spaces')">{{ title() }}</div>
+              </template>
               <div class="text-body1 text-bold cursor-pointer" @click="router.push('/sidepanel/collections')">
                 {{ currentTabset?.name }}
                 <q-icon name="arrow_drop_down" class="q-ma-none q-pa-none" color="grey-5" size="xs"/>
@@ -125,12 +130,13 @@ if ($q.platform.is.chrome && $q.platform.is.bex) {
   })
 }
 
-const showSearchIcon = () => useTabsetsStore().tabsets.size > 1
-
-const showToggleSessionIcon = () =>
-  useUiStore().sidePanelActiveViewIs(SidePanelViews.MAIN) &&
-  useFeaturesStore().hasFeature(FeatureIdent.SESSIONS) &&
-  !searching.value
+const title = (): string => {
+  if (useFeaturesStore().hasFeature(FeatureIdent.SPACES)) {
+    return useSpacesStore().space ? useSpacesStore().space.label : t('no_space_selected')
+  } else {
+    return "Collection"
+  }
+}
 
 const openNewTabsetDialog = () => {
   $q.dialog({
diff --git a/src/spaces b/src/spaces
index 6813f5ff..48f4586f 160000
--- a/src/spaces
+++ b/src/spaces
@@ -1 +1 @@
-Subproject commit 6813f5ff86671737338eaf0c152dadfe92788c22
+Subproject commit 48f4586f7d00a4ab9fa8cc06684ed90943f81c93
diff --git a/src/tabsets b/src/tabsets
index 5aa2d922..f3d52159 160000
--- a/src/tabsets
+++ b/src/tabsets
@@ -1 +1 @@
-Subproject commit 5aa2d922383c9119826bb72e2d69288127f4b62d
+Subproject commit f3d521597d09e98b3f54fb94916b67a23088c107