tabsets-294: (pw)

src/components/SidePanelFooter.vue

@@ -5,32 +5,7 @@
     :style="offsetBottom()">
 
     <template v-if="useFeaturesStore().hasFeature(FeatureIdent.TABSET_LIST)">
-      <div class="row q-py-xs">
-        <div class="col-11">
-
-          <span v-if="lastTabsets.length < 2" style="font-size: smaller;color:grey"
-                class="q-mx-xs">current tabsets: </span>
-          <q-badge class="q-ma-none q-ma-xs" v-for="t in lastTabsets"
-                   :class="t.id === useTabsetsStore().currentTabsetId ? '':'cursor-pointer'"
-                   :color="t.id === useTabsetsStore().currentTabsetId ? 'grey':'warning'"
-                   outline
-                   @click="useTabsetService().selectTabset(t.id)">
-            {{ t.name }}
-            <q-icon :name="t.status === TabsetStatus.FAVORITE ? 'o_star' : 'sym_o_star'"
-                    @click.stop="toggleFavorite(t)"/>
-          </q-badge>
-        </div>
-        <div class="col">
-          <q-icon name="more_vert" size="sm" color="secondary" class="cursor-pointer"/>
-          <q-menu :offset="[12, 8]">
-            <q-list dense style="min-width: 180px">
-              <ContextMenuItem v-close-popup
-                               icon="o_folder"
-                               label="Create Subfolder"/>
-            </q-list>
-          </q-menu>
-        </div>
-      </div>
+      <SidePanelTabsetListMarkup />
     </template>
 
     <div class="row fit q-mb-sm" v-if="showWindowTable">
@@ -257,6 +232,7 @@ import {useTabsetsUiStore} from "../tabsets/stores/tabsetsUiStore";
 import {useTabsetService} from "src/tabsets/services/TabsetService2";
 import {MarkTabsetAsFavoriteCommand} from "src/tabsets/commands/MarkTabsetAsFavorite";
 import {MarkTabsetAsDefaultCommand} from "src/tabsets/commands/MarkTabsetAsDefault";
+import SidePanelTabsetListMarkup from "components/helper/SidePanelTabsetListMarkup.vue";
 
 const {handleSuccess, handleError} = useNotificationHandler()
 
@@ -285,7 +261,6 @@ const animateSettingsButton = ref<boolean>(false)
 const windowHolderRows = ref<WindowHolder[]>([])
 const windowsToOpenOptions = ref<object[]>([])
 const tabsetsMangedWindows = ref<object[]>([])
-const lastTabsets = ref<Pick<Tabset, "id" | "name" | "status">[]>([])
 
 onMounted(() => {
   windowHolderRows.value = calcWindowHolderRows()
@@ -296,21 +271,6 @@ watch(() => useSpacesStore().space, (now: any, before: any) => {
   useTabsetsUiStore().load()
 })
 
-watchEffect(() => {
-  if (useTabsetsUiStore().lastUpdate) {
-    const lastTsIds = useTabsetsUiStore().lastUsedTabsets
-    console.log("got useTabsetsUiStore().lastUpdate", useTabsetsUiStore().lastUpdate, lastTsIds)
-    lastTabsets.value = lastTsIds.map((tsId: string) => {
-      const ts = useTabsetsStore().getTabset(tsId)
-      return {
-        id: ts?.id || "",
-        name: ts?.name || "???",
-        status: ts?.status || TabsetStatus.DEFAULT
-      }
-    })
-  }
-})
-
 watchEffect(() => {
   const windowId = useWindowsStore().currentChromeWindow?.id || 0
   if (useWindowsStore().windowForId(windowId)?.open) {
@@ -370,15 +330,6 @@ watchEffect(() => {
   }
 })
 
-const toggleFavorite = (t: Pick<Tabset, "id" | "name" | "status">) => {
-  if (t.status !== TabsetStatus.FAVORITE) {
-    useCommandExecutor().executeFromUi(new MarkTabsetAsFavoriteCommand(t.id))
-  } else {
-    useCommandExecutor().executeFromUi(new MarkTabsetAsDefaultCommand(t.id))
-  }
-  useTabsetsUiStore().load()
-}
-
 const getAdditionalActions = (windowName: string) => {
   const additionalActions: WindowAction[] = []
   if (!windowIsManaged(windowName)) {

src/components/helper/SidePanelTabsetListMarkup.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="row q-py-xs">
+    <div class="col-11">
+
+          <span v-if="lastTabsets.length < 2" style="font-size: smaller;color:grey"
+                class="q-mx-xs">current tabsets: </span>
+      <q-badge class="q-ma-none q-ma-xs" v-for="t in lastTabsets"
+               :class="t.id === useTabsetsStore().currentTabsetId ? '':'cursor-pointer'"
+               :color="t.id === useTabsetsStore().currentTabsetId ? 'grey':'warning'"
+               outline
+               @click="useTabsetService().selectTabset(t.id)">
+        {{ t.name }}
+        <q-icon :name="t.status === TabsetStatus.FAVORITE ? 'o_star' : 'sym_o_star'"
+                @click.stop="toggleFavorite(t)"/>
+      </q-badge>
+    </div>
+    <div class="col">
+      <q-icon name="more_vert" size="sm" color="secondary" class="cursor-pointer"/>
+      <q-menu :offset="[0,0]" anchor="top right" self="bottom right">
+        <q-list dense style="min-width: 180px">
+          <ContextMenuItem v-close-popup
+                           :dense="true"
+                           icon="close"
+                           label="Close"/>
+        </q-list>
+      </q-menu>
+    </div>
+  </div>
+
+</template>
+
+<script lang="ts" setup>
+
+import {useTabsetsStore} from "src/tabsets/stores/tabsetsStore";
+import {useTabsetService} from "src/tabsets/services/TabsetService2";
+import {Tabset, TabsetStatus} from "src/tabsets/models/Tabset";
+import ContextMenuItem from "src/core/components/helper/ContextMenuItem.vue";
+import {ref, watchEffect} from "vue";
+import {useTabsetsUiStore} from "src/tabsets/stores/tabsetsUiStore";
+import {useCommandExecutor} from "src/core/services/CommandExecutor";
+import {MarkTabsetAsFavoriteCommand} from "src/tabsets/commands/MarkTabsetAsFavorite";
+import {MarkTabsetAsDefaultCommand} from "src/tabsets/commands/MarkTabsetAsDefault";
+
+const lastTabsets = ref<Pick<Tabset, "id" | "name" | "status">[]>([])
+
+watchEffect(() => {
+  if (useTabsetsUiStore().lastUpdate) {
+    const lastTsIds = useTabsetsUiStore().lastUsedTabsets
+    lastTabsets.value = lastTsIds.map((tsId: string) => {
+      const ts = useTabsetsStore().getTabset(tsId)
+      return {
+        id: ts?.id || "",
+        name: ts?.name || "",
+        status: ts?.status || TabsetStatus.DEFAULT
+      }
+    })
+  }
+})
+
+const toggleFavorite = (t: Pick<Tabset, "id" | "name" | "status">) => {
+  if (t.status !== TabsetStatus.FAVORITE) {
+    useCommandExecutor().executeFromUi(new MarkTabsetAsFavoriteCommand(t.id))
+  } else {
+    useCommandExecutor().executeFromUi(new MarkTabsetAsDefaultCommand(t.id))
+  }
+  useTabsetsUiStore().load()
+}
+
+</script>

src/pages/helper/AppearanceSettings.vue

@@ -6,17 +6,12 @@
 
     <div class="row items-baseline q-ma-md q-gutter-md">
 
-      <InfoLine :label="t('title')">
-        <q-input type="text" color="primary" filled v-model="installationTitle" label="">
-          <template v-slot:prepend>
-            <q-icon name="o_edit_note"/>
-          </template>
-        </q-input>
-      </InfoLine>
-
-<!--      <InfoLine label="Old Sidepanel Layout">-->
-<!--        <q-checkbox v-model="oldLayout" label="use the old Sidepanel Layout"/>-->
-<!--        {{t('changing_needs_restart')}}-->
+<!--      <InfoLine :label="t('title')">-->
+<!--        <q-input type="text" color="primary" filled v-model="installationTitle" label="">-->
+<!--          <template v-slot:prepend>-->
+<!--            <q-icon name="o_edit_note"/>-->
+<!--          </template>-->
+<!--        </q-input>-->
 <!--      </InfoLine>-->
 
       <InfoLine :label="t('dark_mode')">
@@ -61,6 +56,10 @@
         <q-checkbox v-model="fullUrls" :label="t('show_full_url')"/>
       </InfoLine>
 
+      <InfoLine label="Show Recent Tabsets list">
+        <q-checkbox v-model="showRecentTabsetsList" label="The last couple of tabsets you opened will be displayed for quick access"/>
+      </InfoLine>
+
       <InfoLine label="Hide Indicator Icon" v-if="useFeaturesStore().hasFeature(FeatureIdent.DEV_MODE)">
         <q-checkbox v-model="hideIndicatorIcon" label="Hide Icon on websites (upper right) when tracked by tabsets"/>
       </InfoLine>
@@ -189,6 +188,9 @@ import {useUtils} from "src/core/services/Utils";
 import {useSettingsStore} from "stores/settingsStore";
 import {StaticSuggestionIdent, Suggestion} from "src/suggestions/models/Suggestion";
 import {useSuggestionsStore} from "src/suggestions/stores/suggestionsStore";
+import {ActivateFeatureCommand} from "src/features/commands/ActivateFeatureCommand";
+import {useCommandExecutor} from "src/core/services/CommandExecutor";
+import {DeactivateFeatureCommand} from "src/features/commands/DeactivateFeatureCommand";
 
 const { t } = useI18n()
 const {sendMsg} = useUtils()
@@ -203,6 +205,7 @@ const detailLevelPerTabset = ref(LocalStorage.getItem('ui.detailsPerTabset') ||
 const detailLevel = ref<ListDetailLevel>(LocalStorage.getItem('ui.detailLevel') || ListDetailLevel.MAXIMAL)
 const fullUrls = ref(LocalStorage.getItem('ui.fullUrls') || false)
 const hideIndicatorIcon = ref(LocalStorage.getItem('ui.hideIndicatorIcon') || false)
+const showRecentTabsetsList = ref(useFeaturesStore().hasFeature(FeatureIdent.TABSET_LIST))
 const contentScriptLoggingOff = ref(LocalStorage.getItem('ui.contentScriptLoggingOff') || false)
 const oldLayout = ref(LocalStorage.getItem('ui.sidepanel.oldLayout') || false)
 
@@ -272,6 +275,12 @@ watch(() => hideIndicatorIcon.value, (a:any,b:any) => {
   sendMsg('settings-changed', {identifier: "ui.hideIndicatorIcon", value: hideIndicatorIcon.value})
 })
 
+watch(() => showRecentTabsetsList.value, (now:boolean,before:boolean) => {
+  now
+    ? useCommandExecutor().execute(new ActivateFeatureCommand(FeatureIdent.TABSET_LIST.toString()))
+    : useCommandExecutor().execute(new DeactivateFeatureCommand(FeatureIdent.TABSET_LIST.toString()))
+})
+
 watch(() => contentScriptLoggingOff.value, (a:any,b:any) => {
   LocalStorage.set('ui.contentScriptLoggingOff', contentScriptLoggingOff.value)
   sendMsg('settings-changed', {identifier: "ui.contentScriptLoggingOff", value: contentScriptLoggingOff.value})