wip

Author: evandor

actionHandling/handler/DefaultAddUrlToTabsetHandler.ts

@@ -42,7 +42,7 @@ export class DefaultAddUrlToTabsetHandler implements AddUrlToTabsetHandler {
           }
           return tabsetsCount > 0 ? 'positive' : ''
         }
-        return 'black'
+        return ''
       })
       .onClicked(this.clicked)
   }

actionHandling/handler/RapidApiAddUrlToTabsetHandler.ts

@@ -1,5 +1,6 @@
 import { DialogChainObject, QVueGlobals, uid } from 'quasar'
 import { TabReference, TabReferenceType } from 'src/content/models/TabReference'
+import { useContentStore } from 'src/content/stores/contentStore'
 import { ExecutionResult } from 'src/core/domain/ExecutionResult'
 import { useCommandExecutor } from 'src/core/services/CommandExecutor'
 import { RestParam, RestTab } from 'src/rest/models/RestTab'
@@ -9,11 +10,13 @@ import {
   AddUrlToTabsetHandlerAdditionalData,
   ClickedHandler,
 } from 'src/tabsets/actionHandling/AddUrlToTabsetHandler'
+import { DefaultActions } from 'src/tabsets/actionHandling/handler/DefaultActions'
 import { ActionContext } from 'src/tabsets/actionHandling/model/ActionContext'
 import { AddTabToTabsetCommand } from 'src/tabsets/commands/AddTabToTabsetCommand'
 import { CreateFolderCommand } from 'src/tabsets/commands/CreateFolderCommand'
 import { Tab } from 'src/tabsets/models/Tab'
 import { Tabset } from 'src/tabsets/models/Tabset'
+import { useTabsetService } from 'src/tabsets/services/TabsetService2'
 import { useTabsetsStore } from 'src/tabsets/stores/tabsetsStore'
 import { useTabsStore2 } from 'src/tabsets/stores/tabsStore2'
 import { Component } from 'vue'
@@ -35,9 +38,25 @@ export class RapidApiAddUrlToTabsetHandler implements AddUrlToTabsetHandler {
       .onOk(this.onOk)
   }
 
-  actions(): Component[] {
-    // new ActionContext('Add Rapid API', ButtonActions.Save)
-    return []
+  actions(currentTabsetId: string | undefined): Component[] {
+    const url = useContentStore().getCurrentTabUrl
+    const currentTabset = useTabsetsStore().getCurrentTabset
+
+    const actions = DefaultActions.getDefaultActions(currentTabset)
+
+    if (url) {
+      // TODO folders?
+      const tabsetIds = useTabsetService()
+        .tabsetsFor(url)
+        .filter((tsId: string) => tsId !== currentTabsetId)
+
+      if (tabsetIds.length > 0) {
+        tabsetIds.forEach((tabsetId: string) => {
+          //actions.push(new ActionContext('Open', undefined, undefined, { tabsetId }).onClicked(this.clicked))
+        })
+      }
+    }
+    return actions
   }
 
   async clicked(

commands/AddTabToTabsetCommand.ts

@@ -36,8 +36,8 @@ export class AddTabToTabsetCommand implements Command<any> {
     public tab: Tab,
     public tabset: Tabset | undefined = undefined,
     public activeFolder: string | undefined = undefined,
-    public allowDuplicates: boolean = false,
-    public ignoreDuplicates: boolean = false,
+    public allowDuplicates: boolean = false, // used eg at Excalidraw Handler
+    public ignoreDuplicates: boolean = false, // used eg. at RssFolderHandler
   ) {
     if (!tabset) {
       this.tabset = useTabsetsStore().getCurrentTabset

commands/CreateFolderCommand.ts

@@ -68,6 +68,7 @@ export class CreateFolderCommand implements Command<Tabset> {
         Analytics.fireEvent('tabset_subfolder_created', {})
         return Promise.resolve(new ExecutionResult<Tabset>(newFolder, 'Subfolder created'))
       }
+      console.log(`missed subfolder for tabset '${tabset.name}', #${tabset.id}`)
       return Promise.reject('could not find subfolder')
     } catch (err) {
       return Promise.reject(err)

commands/OpenTabCommand.ts

@@ -52,9 +52,6 @@ export class OpenTabCommand implements Command<string> {
       if (this.tab.httpStatus === 0) {
         this.tab.httpStatus = 200 // ok "for now"
       }
-      // if (useTabsStore2().browserTabs.length > 7 && !useFeaturesStore().hasFeature(FeatureIdent.OPEN_TABS)) {
-      //   useSuggestionsStore().addSuggestion(Suggestion.getStaticSuggestion('TRY_OPENTABS_FEATURE'))
-      // }
       Analytics.fireEvent('tabset_tab_opened', {})
       return Promise.resolve(new ExecutionResult('', 'opened'))
     } catch (err: any) {

layouts/SidePanelPageTabList.vue

@@ -13,7 +13,9 @@
           :group="{ name: 'tabs', pull: 'clone' }"
           @change="(event: any) => handleDragAndDrop(event, column)">
           <SidePanelTabListHelper
-            v-for="tab in tabs"
+            v-for="(tab, index) in tabs"
+            :key="index"
+            v-once
             :tab="tab.tab as Tab"
             :index="tab.index"
             :type="props.type"
@@ -29,14 +31,17 @@
           all your collections.
         </div>
         <div v-else-if="props.tabset?.folders.length === 0" class="q-ma-md text-caption text-center">
-          Empty Collection
+          Empty Tabset<br />
+          check the action menu<br />
         </div>
       </template>
 
       <!-- no drag & drop on mobile -->
       <template v-else>
         <SidePanelTabListHelper
-          v-for="tab in tabs"
+          v-for="(tab, index) in tabs"
+          :key="index"
+          v-once
           :tab="tab.tab as Tab"
           :index="0"
           :type="props.type"
@@ -79,20 +84,23 @@ const props = defineProps({
   filter: { type: String, required: false },
 })
 
+const emits = defineEmits(['tabs-found'])
+
 const tabs = ref<IndexedTab[]>([])
 
 watch(
   () => props.filter,
   (a: string | undefined, b: string | undefined) => {
     tabs.value = tabsForColumn()
+    emits('tabs-found', tabs.value.length)
   },
 )
 
 watch(
   () => props.tabset?.tabs || [],
   (a: Tab[], b: Tab[]) => {
-    console.log('--------', a)
     tabs.value = tabsForColumn()
+    emits('tabs-found', tabs.value.length)
   },
 )
 

layouts/SidePanelTabListHelper.vue

@@ -4,7 +4,7 @@
   <q-item
     clickable
     v-ripple
-    class="q-mt-xs q-mx-xs q-mb-none q-pr-none q-pl-sm q-pb-none q-pt-none darkColors lightColors"
+    class="q-mt-xs q-mx-xs q-mb-none q-pr-none q-pl-none q-pb-none q-pt-none darkColors lightColors"
     :style="itemStyle()"
     @dragstart="startDrag($event, tab)"
     :key="'paneltablist_' + tab.id">
@@ -72,4 +72,8 @@ const itemStyle = () => {
   background-color: $grey-2;
   border: 1px solid $grey-3;
 }
+
+.q-item {
+  min-height: 30px;
+}
 </style>

services/TabsetService2.ts

@@ -447,12 +447,13 @@ export function useTabsetService() {
    * @param ts
    * @param tab
    * @param useIndex
+   * @param allowDuplicates
    */
   const addToTabset = async (
     ts: Tabset,
     tab: Tab,
     useIndex: number | undefined = undefined,
-    allowDuplicates = false,
+    allowDuplicates = false, // used eg at Excalidraw Handler
   ): Promise<Tabset> => {
     if (tab.url) {
       const exceedInfo = useAuthStore().limitExceeded('TABS', useTabsetsStore().allTabsCount)

views/sidepanel/SidePanelFoldersView.vue

@@ -23,7 +23,7 @@
   <q-list>
     <q-item
       v-if="props.tabset"
-      v-for="folder in calcFolders(props.tabset)"
+      v-for="folder in folders"
       clickable
       v-ripple
       class="q-ma-none q-pa-sm"
@@ -70,7 +70,7 @@
 
 <script lang="ts" setup>
 import { Tabset, TabsetType } from 'src/tabsets/models/Tabset'
-import { ref, watchEffect } from 'vue'
+import { onMounted, ref, watchEffect } from 'vue'
 import '@he-tree/vue/style/default.css'
 import '@he-tree/vue/style/material-design.css'
 import { QVueGlobals } from 'quasar'
@@ -84,10 +84,22 @@ import Highlight from 'src/tabsets/widgets/Highlight.vue'
 import { useUiStore } from 'src/ui/stores/uiStore'
 import { useWindowsStore } from 'src/windows/stores/windowsStore'
 
-const props = defineProps<{ tabset: Tabset; filter: string }>()
+type Props = {
+  tabset: Tabset
+  filter?: string
+}
+
+const props = defineProps<Props>()
+
+const emits = defineEmits(['folders-found', 'folder-selected'])
 
 const currentChromeTab = ref<chrome.tabs.Tab | undefined>(undefined)
 const hoveredTabset = ref<string | undefined>(undefined)
+const folders = ref<Tabset[]>([])
+
+onMounted(() => {
+  folders.value = calcFolders(props.tabset)
+})
 
 watchEffect(() => {
   const windowId = useWindowsStore().currentBrowserWindow?.id || 0
@@ -108,6 +120,13 @@ const calcFolders = (tabset: Tabset): Tabset[] => {
   )
 }
 
+watchEffect(() => {
+  if (props.filter || props.tabset.folderActive) {
+    folders.value = calcFolders(props.tabset)
+    emits('folders-found', folders.value.length)
+  }
+})
+
 const startDrag = (evt: any, folder: Tabset) => {
   console.log('start dragging', evt, folder)
   if (evt.dataTransfer) {
@@ -154,9 +173,9 @@ const dropAtBreadcrumb = (evt: any, f?: any) => {
 const selectFolder = (tabset: Tabset, folder?: Tabset) => {
   console.log(`selecting folder '${folder?.id}' (${folder?.name}) in tabset ${tabset.id} (${tabset.name})`)
   tabset.folderActive = folder ? (tabset.id === folder.id ? undefined : folder.id) : undefined
-
   useTabsetService().saveTabset(tabset)
   useTabsetService().handleHeadRequests(tabset, folder?.id)
+  emits('folder-selected')
 }
 
 const folderCaption = (folder: Tabset): string => {