Tab 511 opentabs

.env.template

@@ -1,14 +1,10 @@
 # check quasar.config.js as well!!
 
-STAGE=DEV
-FIREBASE_ACTIVE=true
+STAGE=PRD
+FIREBASE_ACTIVE=false
 
-#BACKEND_URL="http://localhost:5001/tabsets-backend-prd/us-central1/app"
-#BACKEND_URL="http://localhost:5001/bookmrkx-backend-dev/us-central1"
 BACKEND_URL="https://us-central1-bookmrkx-backend-dev.cloudfunctions.net"
 
-LOGZ_URL="https://listener.logz.io:8071?token=..."
-
 FIREBASE_PROJECT_ID="..."
 FIREBASE_AUTH_DOMAIN="..."
 FIREBASE_API_KEY="..."

.github/workflows/publish.yml

@@ -22,7 +22,6 @@ jobs:
           echo FIREBASE_ACTIVE=false >> .env
           echo BACKEND_URL="https://us-central1-tabsets-backend-prd.cloudfunctions.net/app" >> .env
           echo TABSETS_PWA_URL="https://pwa.tabsets.net" >> .env
-          echo LOGZ_URL="https://listener.logz.io:8071?token=hpSuDcIXnsCtElvVuRpAztrDuRjuAoNj" >> .env
           echo FIREBASE_API_KEY="${{ secrets.FIREBASE_API_KEY }}" >> .env
           echo FIREBASE_AUTH_DOMAIN="tabsets-72089.firebaseapp.com" >> .env
           echo FIREBASE_PROJECT_ID="tabsets-72089" >> .env

.gitignore

@@ -70,5 +70,6 @@ yarn-error.log*
 /Tabsets - Manage Tabs and Bookmarks with Ease/
 /.dev.env
 /.prd.env
+/.env.tmp
 /.tabsets-backend-prd.env
 /.env.tmp

.publish.env

@@ -13,8 +13,6 @@ STRIPE_API_VERSION="2022-11-15"
 LOCALE="de"
 STRIPE_SYNC_PRODUCT_LINK="https://buy.stripe.com/test_dR67sT1NC6iq7ew9AA"
 
-LOGZ_URL="https://listener.logz.io:8071?token=hpSuDcIXnsCtElvVuRpAztrDuRjuAoNj"
-
 FIREBASE_API_KEY=$FIREBASE_API_KEY
 FIREBASE_AUTH_DOMAIN="tabsets-72089.firebaseapp.com"
 FIREBASE_PROJECT_ID="tabsets-72089"

package.json

@@ -43,7 +43,7 @@
     "@extractus/feed-extractor": "^7.0.1",
     "@intlify/unplugin-vue-i18n": "^3.0.0",
     "@mozilla/readability": "^0.5.0",
-    "@quasar/extras": "^1.16.6",
+    "@quasar/extras": "^1.16.9",
     "@stripe/stripe-js": "^3.0.3",
     "@types/lodash": "^4.14.182",
     "@types/pngjs": "^6.0.4",
@@ -65,7 +65,7 @@
     "pinia": "^2.0.11",
     "pixelmatch": "^5.3.0",
     "pngjs": "^7.0.0",
-    "quasar": "^2.14.4",
+    "quasar": "^2.15.1",
     "rangy": "^1.3.1",
     "regenerator-runtime": "^0.14.1",
     "sanitize-html": "^2.10.0",
@@ -93,7 +93,7 @@
     "@editorjs/table": "^2.2.2",
     "@electron/packager": "^18.1.3",
     "@playwright/test": "^1.27.1",
-    "@quasar/app-vite": "^1.4.3",
+    "@quasar/app-vite": "^1.8.0",
     "@quasar/babel-preset-app": "^2.0.2",
     "@quasar/quasar-app-extension-testing-unit-vitest": "^0.4.0",
     "@types/node": "^20.4.10",
@@ -108,7 +108,7 @@
     "canvas": "^2.11.0",
     "editorjs-alert": "^1.1.3",
     "editorjs-text-color-plugin": "^2.0.4",
-    "electron": "^29.1.0",
+    "electron": "^29.1.4",
     "electron-packager": "^17.1.1",
     "fake-indexeddb": "^5.0.1",
     "typescript": "^5.1.6",

src/components/BookmarksTree.vue

@@ -40,13 +40,16 @@
       v-model:expanded="useNotificationsStore().bookmarksExpanded">
       <template v-slot:header-node="prop">
         <q-icon name="o_folder" color="warning" class="q-mr-sm"/>
-        <span class="cursor-pointer fit no-wrap ellipsis">{{ prop.node.label }} <span style="font-size:smaller" class="text-grey">({{prop.node.subFoldersCount}} / {{prop.node.subNodesCount}})</span></span>
+        <span class="cursor-pointer fit no-wrap ellipsis">{{ prop.node.label }} <span style="font-size:smaller"
+                                                                                      class="text-grey">({{ prop.node.subFoldersCount }} / {{ prop.node.subNodesCount }})</span></span>
 
-        <span class="text-right fit" v-show="mouseHover && prop.node.id === deleteButtonId">
+        <span class="text-right" v-if="mouseHover && prop.node.id === deleteButtonId" style="width:25px;">
             <q-icon name="delete_outline" color="negative" size="18px" @click.stop="deleteBookmarksFolderDialog">
               <q-tooltip>Delete this folder</q-tooltip>
             </q-icon>
-          </span>
+        </span>
+        <span class="text-right" v-else style="width:25px;">&nbsp;</span>
+
 
       </template>
       <template v-slot:header-leaf="prop">
@@ -57,12 +60,13 @@
                :src="favIconFromUrl(prop.node.url)"/>
         <q-icon v-else name="o_article" class="q-mr-sm"/>
         <span class="cursor-pointer fit no-wrap ellipsis">{{ prop.node.label }}</span>
-        <span class="text-right fit" v-show="mouseHover && prop.node.id === deleteButtonId">
-            <q-icon name="delete_outline" color="negative" size="18px"
-                    @click.stop="deleteBookmark(prop.node.id)">
+        <span class="text-right" v-if="mouseHover && prop.node.id === deleteButtonId" style="width:25px;">
+          <q-icon name="delete_outline" color="negative" size="18px"
+                  @click.stop="deleteBookmark(prop.node.id)">
               <q-tooltip>Delete this Bookmark</q-tooltip>
-            </q-icon>
-          </span>
+          </q-icon>
+        </span>
+        <span class="text-right" v-else style="width:25px;">&nbsp;</span>
       </template>
 
     </q-tree>

src/components/layouts/OpenTabCard.vue

@@ -1,13 +1,12 @@
 <template>
 
-  <q-card class="tabBorder" flat
-          :style="cardStyle(chromeTab)">
+  <q-card class="tabBorder" flat :style="cardStyle(chromeTab)">
 
-    <q-card-section class="q-pt-xs cursor-pointer"
+    <q-card-section class="q-pt-xs cursor-pointer q-ma-none"
                     :data-testid="useUtils().createDataTestIdentifier('openTabCard', props.chromeTab.url || '')"
                     style="width:100%;">
 
-      <div class="row items-baseline">
+      <div class="row items-baseline fit" style="border:1px solid red">
         <div class="col-1 q-mr-md q-ml-none">
           <q-icon v-if="showAddToTabsetIcon(chromeTab)" color="primary"
                   name="o_arrow_left" @click="addToCurrentTabset" size="2em">
@@ -74,6 +73,7 @@ import {uid} from "quasar";
 
 const props = defineProps({
   chromeTab: {type: Object as PropType<chrome.tabs.Tab>, required: true},
+  windowId: {type: Number, required: true},
   useSelection: {type: Boolean, default: false}
 })
 
@@ -89,7 +89,7 @@ const closeTab = (tab: chrome.tabs.Tab) => {
 }
 
 const cardStyle = (tab: chrome.tabs.Tab) => {
-  const height = "30px";
+  const height = "28px";
   let background = ''
   // if (tab.isDuplicate) {
   //   background = "background: radial-gradient(circle, #FFFFFF 0%, #FFECB3 100%)"

src/components/layouts/OpenTabCard2.vue

@@ -0,0 +1,114 @@
+<template>
+
+  <div class="row q-ma-none q-pa-none"
+       @mouseenter="showIcons = true"
+       @mouseleave="showIcons = false">
+
+    <div class="col-2 q-mt-xs" style="text-align: center">
+      <q-checkbox
+        v-if="showSelectIcon(chromeTab)"
+        v-model="chromeTab.selected"
+        size="30px"
+        checked-icon="task_alt"
+        @update:model-value="val => selectionChanged(val)"
+        unchecked-icon="check_box_outline_blank"
+      />
+      <TabFaviconWidget
+        :preventDragAndDrop="true"
+        :tab="toTab(chromeTab)" width="20px" height="20px"/>
+    </div>
+
+    <div class="col-8 q-mt-sm q-ml-xs text-body2 ellipsis cursor-pointer"
+         :class="isCurrentTab(toTab(chromeTab)) ? 'text-bold' : ''"
+         @click="NavigationService.openChromeTab(chromeTab)">
+      {{ chromeTab?.title }}
+      <q-tooltip class="tooltip" v-if="useSettingsStore().isEnabled('dev')">
+        {{ chromeTab.id }} / {{ chromeTab.url }}
+      </q-tooltip>
+      <q-tooltip class="tooltip" v-else>
+        {{ chromeTab.url }}
+      </q-tooltip>
+    </div>
+    <div class="col q-mt-xs text-right">
+      <template v-if="!props.useSelection && showIcons">
+        <q-icon name="o_add_circle"
+                :color="alreadyInCurrentTabset ? 'grey' : 'warning'"
+                class="q-mr-sm"
+                :class="alreadyInCurrentTabset ? '' : 'cursor-pointer'" size="xs"
+                @click="addToCurrentTabset">
+          <q-tooltip class="tooltip" v-if="alreadyInCurrentTabset">This tab has already been added to {{tabsStore.currentTabsetName}}</q-tooltip>
+          <q-tooltip class="tooltip" v-else>Click here to add the tab to your current tabset {{tabsStore.currentTabsetName}}</q-tooltip>
+        </q-icon>
+        <q-icon name="close" class="cursor-pointer" @click="closeTab(chromeTab)" size="xs">
+          <q-tooltip class="tooltip">Close this tab in the browser</q-tooltip>
+        </q-icon>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import {Tab} from "src/models/Tab"
+import NavigationService from "src/services/NavigationService"
+import TabFaviconWidget from "src/components/widgets/TabFaviconWidget.vue"
+import {useTabsetService} from "src/services/TabsetService2";
+import {useUiStore} from "src/stores/uiStore";
+import {useCommandExecutor} from "src/services/CommandExecutor";
+import {CreateTabFromOpenTabsCommand} from "src/domain/commands/CreateTabFromOpenTabs";
+import {useTabsStore} from "src/stores/tabsStore";
+import _ from "lodash"
+import {useUtils} from "src/services/Utils"
+import {useSettingsStore} from "src/stores/settingsStore"
+import {PropType, ref, watch, watchEffect} from "vue";
+import ChromeApi from "src/services/ChromeApi";
+import {uid} from "quasar";
+
+const props = defineProps({
+  chromeTab: {type: Object as PropType<chrome.tabs.Tab>, required: true},
+  windowId: {type: Number, required: true},
+  useSelection: {type: Boolean, default: false}
+})
+
+const emits = defineEmits(['selectionChanged', 'addedToTabset', 'hasSelectable'])
+
+const {isCurrentTab} = useUtils()
+
+const tabsStore = useTabsStore()
+
+const showIcons = ref(false)
+const alreadyInCurrentTabset = ref(false)
+
+const closeTab = (tab: chrome.tabs.Tab) => {
+  NavigationService.closeChromeTab(tab)
+  tabsStore.pendingTabset.tabs = _.filter(tabsStore.pendingTabset.tabs, t => t.url !== tab.url)
+}
+
+const self = chrome.runtime?.getURL("")
+
+const addToCurrentTabset = () => {
+  useCommandExecutor().executeFromUi(new CreateTabFromOpenTabsCommand(props.chromeTab as unknown as Tab, 0))
+    .then(() => alreadyInCurrentTabset.value = true)
+    .then(() => emits('addedToTabset', {tabId: props.chromeTab.id, tabUrl: props.chromeTab.url}))
+}
+
+const selectionChanged = (val: any) => {
+  emits('selectionChanged', {tabId: props.chromeTab.id, selected: val})
+}
+
+alreadyInCurrentTabset.value = useTabsetService().urlExistsInCurrentTabset(props.chromeTab.url || '')
+
+const showSelectIcon = (tab: chrome.tabs.Tab) => props.useSelection && !useTabsetService().urlExistsInCurrentTabset(tab.url || '')
+
+const toTab = (chromeTab: chrome.tabs.Tab) => new Tab(uid(), chromeTab)
+
+</script>
+
+<style lang="sass" scoped>
+
+.tabBorder
+  border-radius: 5px 5px 0 0
+  border: 1px solid $lightgrey
+  border-bottom: 0
+
+</style>

src/components/layouts/sidepanel/SidePanelTabListHelper.vue

@@ -2,7 +2,7 @@
   <q-item
       clickable
       v-ripple
-      class="q-ma-none q-px-sm q-pt-xs q-pb-none"
+      class="q-ma-none q-px-sm q-pt-xs q-pb-none q-ml-sm"
       :class="props.indent ? 'q-ml-md':''"
       :style="itemStyle()"
       @dragstart="startDrag($event, tab)"

src/components/views/TabDetails.vue

@@ -1,12 +1,5 @@
 <template>
   <div>
-    <!--    <div class="row items-baseline q-mx-md q-pa-none">-->
-    <!--      <div class="col-12 q-mb-md">&nbsp;-->
-    <!--        <q-banner v-if="useUiStore().getSelectedTab?.isDuplicate"-->
-    <!--                  rounded class="bg-amber-1 text-black">This tab has duplicates in this tabset-->
-    <!--        </q-banner>-->
-    <!--      </div>-->
-    <!--    </div>-->
 
     <div class="row items-baseline q-mx-sm q-my-sm">
 

src/components/widgets/SidePanelTabsetsSelectorWidget.vue

@@ -4,6 +4,7 @@
     <div
       class="q-ma-none q-pa-none text-subtitle q-pl-sm cursor-pointer ellipsis">
       {{ tabsetLabel() }}
+      <q-tooltip class="tooltip_small">The currenly selected tabset</q-tooltip>
       <q-icon name="arrow_drop_down" class="q-mr-xs " size="xs"/>
     </div>
 
@@ -40,21 +41,24 @@
           </q-select>
         </q-item>
         <q-item v-else
-                clickable v-for="ts in allTabsetsButCurrent" @click="switchToTabset(ts as Tabset)">
+                clickable v-for="ts in allTabsetsButCurrent"
+                @click="switchToTabset(ts as Tabset)">
           {{ ts.name }}
         </q-item>
 
-        <template v-if="usePermissionsStore().hasFeature(FeatureIdent.SPACES)">
+        <template v-if="usePermissionsStore().hasFeature(FeatureIdent.SPACES) && !useAsTabsetsSwitcher">
           <q-separator/>
           <q-item clickable @click.stop="router.push('/sidepanel/spaces')">
             Switch Space...
           </q-item>
         </template>
 
-        <q-separator/>
-        <q-item clickable @click.stop="router.push('/sidepanel')">
-          Show all Tabsets
-        </q-item>
+        <template v-if="!useAsTabsetsSwitcher">
+          <q-separator/>
+          <q-item clickable @click.stop="router.push('/sidepanel')">
+            Show all Tabsets
+          </q-item>
+        </template>
 
         <template
           v-if="usePermissionsStore().hasFeature(FeatureIdent.BACKUP) || usePermissionsStore().hasFeature(FeatureIdent.IGNORE)">
@@ -68,18 +72,24 @@
           </q-item>
         </template>
 
-        <q-separator/>
-        <q-item clickable v-close-popup @click="openNewTabsetDialog()">
-          <q-item-section>Add new Tabset</q-item-section>
-        </q-item>
+        <template v-if="!useAsTabsetsSwitcher">
+          <q-separator/>
+          <q-item clickable v-close-popup @click="openNewTabsetDialog()">
+            <q-item-section>Add new Tabset</q-item-section>
+          </q-item>
+        </template>
+
         <q-separator/>
         <q-item v-if="tabsStore.currentTabsetName" clickable v-close-popup @click="openEditTabsetDialog()">
           <q-item-section>Edit Tabset Name</q-item-section>
         </q-item>
-        <q-separator/>
-        <q-item v-if="tabsStore.currentTabsetName" clickable v-close-popup @click="deleteTabsetDialog()">
-          <q-item-section>Delete this Tabset...</q-item-section>
-        </q-item>
+
+        <template v-if="!useAsTabsetsSwitcher">
+          <q-separator/>
+          <q-item v-if="tabsStore.currentTabsetName" clickable v-close-popup @click="deleteTabsetDialog()">
+            <q-item-section>Delete this Tabset...</q-item-section>
+          </q-item>
+        </template>
       </q-list>
     </q-menu>
   </div>
@@ -105,6 +115,10 @@ import EditTabsetDialog from "components/dialogues/EditTabsetDialog.vue";
 import DeleteTabsetDialog from "components/dialogues/DeleteTabsetDialog.vue";
 import {SidePanelView, useUiStore} from "stores/uiStore";
 
+const props = defineProps({
+  fromPanel: {type: Boolean, default: true},
+  useAsTabsetsSwitcher: {type: Boolean, default: false}
+})
 const tabsStore = useTabsStore()
 const spacesStore = useSpacesStore()
 const router = useRouter()
@@ -130,7 +144,7 @@ const filterFn = (val: any, update: any, abort: any) => {
 
 const setModel = (val: any) => {
   console.log("setting model", val)
-  const found =_.filter(allTabsetsButCurrent.value as Tabset[], (ts:Tabset) => ts.name === val)
+  const found = _.filter(allTabsetsButCurrent.value as Tabset[], (ts: Tabset) => ts.name === val)
   if (found && found.length > 0) {
     console.log("setting model", found)
     switchTabsetModel.value = val
@@ -222,7 +236,9 @@ const switchToTabset = (ts: Tabset) => {
     .execute(new SelectTabsetCommand(ts.id, useSpacesStore().space?.id))
     .then((res: ExecutionResult<Tabset | undefined>) => {
       //useUiStore().sidePanelSetActiveView(SidePanelView.MAIN)
-      router.push("/sidepanel/tabsets/" + ts.id)
+      if (!props.useAsTabsetsSwitcher) {
+        router.push("/sidepanel/tabsets/" + ts.id)
+      }
     })
 }