tabsets-379 Pin Tabs

Author: evandor

layouts/SidePanelPageTabList.vue

@@ -2,7 +2,19 @@
   <!-- SidePanelPageTabList -->
   <div style="width: 100%; max-width: 100%">
     <q-list class="q-ma-none">
-      <!-- supporting drag & drop when not on mobile -->
+      <template v-if="useUiStore().folderStyle === 'goInto'">
+        <SidePanelTabListHelper
+          v-for="(tab, index) in pinnedTabs"
+          :key="index"
+          v-once
+          :tab="tab.tab as Tab"
+          :index="tab.index"
+          :tabset="props.tabset!"
+          :filter="props.filter || ''" />
+
+        <q-separator v-if="pinnedTabs.length > 0" class="q-mt-xs" />
+      </template>
+
       <vue-draggable-next
         v-if="tabs.length > 0"
         class="q-ma-none"
@@ -15,11 +27,7 @@
           v-once
           :tab="tab.tab as Tab"
           :index="tab.index"
-          :type="props.type"
-          :sorting="props.sorting"
-          :preventDragAndDrop="false"
           :tabset="props.tabset!"
-          :show-tabsets="props.showTabsets"
           :hide-menu="props.hideMenu"
           :filter="props.filter || ''" />
       </vue-draggable-next>
@@ -54,6 +62,7 @@ import { Tab, TabSorting } from 'src/tabsets/models/Tab'
 import { Tabset, TabsetType } from 'src/tabsets/models/Tabset'
 import TabsetService from 'src/tabsets/services/TabsetService'
 import { useTabsetService } from 'src/tabsets/services/TabsetService2'
+import { useTabsetsStore } from 'src/tabsets/stores/tabsetsStore'
 import { useUiStore } from 'src/ui/stores/uiStore'
 import { PropType, ref, watch } from 'vue'
 import { VueDraggableNext } from 'vue-draggable-next'
@@ -72,6 +81,7 @@ const props = defineProps({
 const emits = defineEmits(['tabs-found'])
 
 const tabs = ref<IndexedTab[]>([])
+const pinnedTabs = ref<IndexedTab[]>([])
 
 watch(
   () => props.filter,
@@ -148,7 +158,37 @@ const tabsForColumn = (): IndexedTab[] => {
     .map((t: Tab, index: number) => new IndexedTab(index, t))
 }
 
+const calcPinnedTabs = (): IndexedTab[] => {
+  const result: IndexedTab[] = []
+  if (!props.tabset) {
+    return result
+  }
+  const activeFolder = useTabsetsStore().getActiveFolder(props.tabset)
+  if (!activeFolder) {
+    return result
+  }
+  const folderChain = useTabsetsStore().getFolderChain(activeFolder.id)
+  console.log('folderChain', folderChain)
+  if (folderChain.length > 0) {
+    const rootTabset = useTabsetsStore().getTabset(folderChain[folderChain.length - 1]!)
+    for (var i = 1; i < folderChain.length; i++) {
+      console.log('checking', folderChain[i])
+      const parentFolder = useTabsetsStore().getActiveFolder(rootTabset!, folderChain[i])
+      console.log('parentFolder', parentFolder)
+      const pinnedInListTabs = parentFolder?.tabs
+        .filter((t: Tab) => t.pinnedInList)
+        .map((t: Tab, index: number) => new IndexedTab(index, t))
+      if (pinnedInListTabs) {
+        result.push(...pinnedInListTabs)
+      }
+    }
+  }
+  return result
+}
+
 tabs.value = tabsForColumn()
+pinnedTabs.value = calcPinnedTabs()
+
 // console.log('---')
 emits('tabs-found', tabs.value.length)
 </script>

layouts/SidePanelTabListHelper.vue

@@ -23,7 +23,7 @@
 <script setup lang="ts">
 import { FeatureIdent } from 'src/app/models/FeatureIdent'
 import { useFeaturesStore } from 'src/features/stores/featuresStore'
-import { Tab, TabSorting } from 'src/tabsets/models/Tab'
+import { Tab } from 'src/tabsets/models/Tab'
 import { Tabset } from 'src/tabsets/models/Tabset'
 import PanelTabListElementWidget from 'src/tabsets/widgets/PanelTabListElementWidget.vue'
 import { useUiStore } from 'src/ui/stores/uiStore'
@@ -32,12 +32,7 @@ import { PropType } from 'vue'
 const props = defineProps({
   tab: { type: Object as PropType<Tab>, required: true },
   index: { type: Number, required: true },
-  hideMenu: { type: Boolean, default: false },
-  sorting: { type: String as PropType<TabSorting>, default: TabSorting.CUSTOM },
-  type: { type: String, default: 'sidepanel' },
   tabset: { type: Object as PropType<Tabset>, required: false },
-  showTabsets: { type: Boolean, default: false },
-  preventDragAndDrop: { type: Boolean, default: false },
   filter: { type: String, required: false },
 })
 

models/Tab.ts

@@ -111,6 +111,8 @@ export class Tab {
   pinned: boolean
   groupId: number
 
+  pinnedInList: boolean = false // appears in subfolders
+
   // from tabsets' columns
   columnId: string | undefined
 

stores/tabsetsStore.ts

@@ -397,7 +397,7 @@ export const useTabsetsStore = defineStore('tabsets', () => {
     folderActive: string | undefined = root.folderActive,
     level = 0,
   ): Tabset | undefined => {
-    //console.log(`get active folder: root# ${root.id}, folderActive: ${folderActive}, level: ${level}`)
+    console.log(`get active folder: root# ${root.id}, folderActive: ${folderActive}, level: ${level}`)
     if (level > 10) {
       console.warn('runaway method')
       return undefined

widgets/PanelTabListContextMenu.vue

@@ -36,6 +36,17 @@
         </q-item>
       </template>
 
+      <template v-if="(hasSubfolder() && useUiStore().folderStyle === 'goInto') || props.tab?.pinnedInList">
+        <q-separator inset />
+        <q-item clickable v-close-popup @click.stop="togglePin()">
+          <q-item-section style="padding-right: 0; min-width: 25px; max-width: 25px">
+            <q-icon size="xs" :name="props.tab?.pinnedInList ? 'sym_o_keep_off' : 'sym_o_keep'" color="warning" />
+          </q-item-section>
+          <q-item-section v-if="props.tab?.pinnedInList">Unpin Tab</q-item-section>
+          <q-item-section v-else>Pin Tab</q-item-section>
+        </q-item>
+      </template>
+
       <template
         v-if="
           useFeaturesStore().hasFeature(FeatureIdent.ADVANCED_TAB_MANAGEMENT) &&
@@ -132,6 +143,7 @@ import { PlaceholdersType } from 'src/tabsets/models/Placeholders'
 import { Tab } from 'src/tabsets/models/Tab'
 import { MonitoredTab, Tabset, TabsetType } from 'src/tabsets/models/Tabset'
 import { useTabsetsStore } from 'src/tabsets/stores/tabsetsStore'
+import { useUiStore } from 'src/ui/stores/uiStore'
 import { PropType, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
@@ -228,4 +240,20 @@ const isMonitoring = () => {
   const ts = useTabsetsStore().getCurrentTabset
   return ts && ts.monitoredTabs && ts.monitoredTabs.find((mt: MonitoredTab) => mt.tabId === props.tab.id)
 }
+
+const hasSubfolder = () => {
+  if (!props.tabset) {
+    return false
+  }
+  const activeFolder = useTabsetsStore().getActiveFolder(props.tabset)
+  return activeFolder ? activeFolder.folders.length > 0 : false
+}
+
+const togglePin = () => {
+  if (!props.tabset) {
+    return
+  }
+  props.tab.pinnedInList = props.tab.pinnedInList ? !props.tab.pinnedInList : true
+  useTabsetsStore().saveTabset(props.tabset)
+}
 </script>

widgets/tabListItems/TabListMainItem.vue

@@ -47,6 +47,17 @@
                 <q-tooltip class="tooltip-small">Click here to open in Reading Mode</q-tooltip>
               </q-icon>
             </span>
+            <span>
+              <q-icon
+                v-if="props.tab.pinnedInList && useUiStore().folderStyle === 'goInto'"
+                name="sym_o_keep"
+                size="12px"
+                color="primary"
+                style="position: relative; top: -5px"
+                class="q-mr-xs">
+                <q-tooltip class="tooltip-small">This tab is pinned, i.e. it appears in all subfolders</q-tooltip>
+              </q-icon>
+            </span>
             <!--              <span v-if="showRssReferencesInfo()">-->
             <!--                <q-icon-->
             <!--                  name="rss_feed"-->
@@ -416,13 +427,9 @@ const props = defineProps<{
 }>()
 
 const showButtonsProp = ref<boolean>(false)
-const hoveredTab = ref<string | undefined>(undefined)
 const tsBadges = ref<object[]>([])
-const newState = ref(false)
 const showCommentList = ref(false)
 const showPlaceholderList = ref(false)
-const groupName = ref<string | undefined>(undefined)
-const groups = ref<Map<string, chrome.tabGroups.TabGroup>>(new Map())
 const placeholders = ref<Object[]>([])
 const suggestion = ref<Suggestion | undefined>(undefined)
 const pngs = ref<SavedBlob[]>([])