Merge branch 'chrome-extension' into TAB-393-spaces

src-bex/manifest.json

@@ -41,6 +41,27 @@
         "default": "Ctrl+B",
         "mac": "Command+B"
       }
+    },
+    "search": {
+      "suggested_key": {
+        "default": "Ctrl+K",
+        "mac": "Command+K"
+      },
+      "description": "Open Search Box"
+    },
+    "tabHistoryBack": {
+      "suggested_key": {
+        "default": "Alt+Left",
+        "mac": "Alt+Left"
+      },
+      "description": "Open last open tab"
+    },
+    "tabHistoryForward": {
+      "suggested_key": {
+        "default": "Alt+Right",
+        "mac": "Alt+Right"
+      },
+      "description": "Forward to next tab (if available)"
     }
   },
   "options_page": "www/index.html#/mainpanel/settings",

src/api/cloudfunctionsApi.ts

@@ -9,7 +9,7 @@ export function cloudFunctionsApi() {
   const backendUrl = "https://us-central1-tabsets-backend-prd.cloudfunctions.net/app"
 
   const getCategories = async (): Promise<Category[]> => {
-    const categories = await api.get(`${backendUrl}/webshrinker/categories/${TAXONOMY}`)
+    const categories = await api.get(`${backendUrl}/webshrinker/categories/$TAXONOMY`)
     console.log("cats", categories.data)
     const result: Category[] = []
     categories.data.forEach((e:object) => {

src/components/DrawerRight.vue

@@ -59,7 +59,8 @@
   <div class="row greyBorderTop"></div>
 
   <!--  <div>{{useUiStore().rightDrawerViewStack}}*</div>-->
-  <UnassignedAndOpenTabs v-if="tab === DrawerTabs.UNASSIGNED_TABS"/>
+<!--  <UnassignedAndOpenTabs v-if="tab === DrawerTabs.UNASSIGNED_TABS"/>-->
+  <OpenTabsView v-if="tab === DrawerTabs.OPEN_TABS"/>
   <BookmarksTree v-else-if="tab === DrawerTabs.BOOKMARKS"/>
   <!--      <OpenTabs v-else-if="tab ===  DrawerTabs.OPEN_TABS" :filter="filter"/>-->
   <!--      <UnassignedTabs v-else-if="tab ===  DrawerTabs.UNASSIGNED_TABS" :filter="filter"/>-->
@@ -105,14 +106,12 @@ import TagsListViewer from "components/views/TagsListViewer.vue";
 import SidePanelTagsListViewer from "pages/sidepanel/SidePanelTagsListViewer.vue";
 import TagListViewer from "components/views/TagListViewer.vue";
 import ByDomainList from "components/ByDomainList.vue";
+import OpenTabsView from "components/views/OpenTabsView.vue";
 
-const router = useRouter()
 const route = useRoute()
 
-const featureToggles = useSettingsStore()
 const tabsStore = useTabsStore()
 const settingsStore = useSettingsStore()
-const uiStore = useUiStore()
 
 const openTabsCountRatio = ref(0)
 const tab = ref<DrawerTabs>(useUiStore().rightDrawer.activeTab)

src/components/SidePanelFooter.vue

@@ -31,7 +31,7 @@
 
           <SidePanelFooterLeftButton
               :side-panel-view="SidePanelView.TABS_LIST" icon="o_playlist_add"
-              tooltip="List all open tabs in your browser"/>
+              tooltip="All your browser's open tabs"/>
 
           <SidePanelFooterLeftButton :side-panel-view="SidePanelView.BOOKMARKS" icon="o_bookmark"
                                      tooltip="Show the Bookmarks Browser"/>

src/components/buttons/CloseSidePanelViewButton.vue

@@ -0,0 +1,16 @@
+<template>
+  <q-btn
+      icon="close"
+      @click="useUiStore().sidePanelSetActiveView(SidePanelView.MAIN)"
+      color="black"
+      flat
+      class="q-ma-none q-pa-xs cursor-pointer"
+      style="max-width:20px"
+      size="10px">
+    <q-tooltip class="tooltip">Close this view</q-tooltip>
+  </q-btn>
+
+</template>
+<script setup lang="ts">
+import {SidePanelView, useUiStore} from "stores/uiStore";
+</script>

src/components/buttons/SidePanelToolbarButton.vue

@@ -0,0 +1,18 @@
+<template>
+  <q-btn
+      :icon="props.icon"
+      flat
+      class="q-ma-none q-pa-xs cursor-pointer"
+      style="max-width:18px"
+      :size="props.size">
+    <q-tooltip class="tooltip" v-if="props.tooltip">{{props.tooltip}}</q-tooltip>
+  </q-btn>
+</template>
+<script setup lang="ts">
+
+const props = defineProps({
+  icon: {type: String, required: true},
+  tooltip: {type: String, required: false},
+  size: {type: String, default: "13px"}
+})
+</script>

src/components/helper/SidePanelFooterLeftButton.vue

@@ -6,7 +6,9 @@
          :color="isActive() ? 'secondary':'black'"
          size="9px"
          @click="toggleView()">
-    <q-tooltip v-if="props.tooltip" class="tooltip">{{ props.tooltip }}</q-tooltip>
+    <q-tooltip v-if="props.tooltip"
+               :delay="700"
+               anchor="top middle" self="bottom middle" class="tooltip-small">{{ props.tooltip }}</q-tooltip>
   </q-btn>
 
 </template>

src/components/layouts/OpenTabCard.vue

@@ -1,23 +1,23 @@
 <template>
 
   <q-card class="tabBorder" flat
-          :style="cardStyle(tab as Tab)">
+          :style="cardStyle(chromeTab)">
 
     <q-card-section class="q-pt-xs cursor-pointer"
-                    :data-testid="useUtils().createDataTestIdentifier('openTabCard', props.tab.url || '')"
+                    :data-testid="useUtils().createDataTestIdentifier('openTabCard', props.chromeTab.url || '')"
                     style="width:100%;">
 
       <div class="row items-baseline">
         <div class="col-1 q-mr-md q-ml-none">
-          <q-icon v-if="showAddToTabsetIcon(tab as Tab)" color="primary"
+          <q-icon v-if="showAddToTabsetIcon(chromeTab)" color="primary"
                   name="o_arrow_left" @click="addToCurrentTabset" size="2em">
             <q-tooltip class="tooltip">
               Click here to add the tab to your current tabset {{ tabsStore.currentTabsetName }}
             </q-tooltip>
           </q-icon>
           <q-checkbox
-              v-if="showSelectIcon(tab as Tab)"
-              v-model="tab.selected"
+              v-if="showSelectIcon(chromeTab)"
+              v-model="chromeTab.selected"
               size="30px"
               checked-icon="task_alt"
               @update:model-value="val => selectionChanged(val)"
@@ -26,23 +26,23 @@
         </div>
 
         <div class="col-2">
-          <TabFaviconWidget :tab="tab" width="20px" height="20px"/>
+          <TabFaviconWidget :tab="toTab(chromeTab)" width="20px" height="20px"/>
         </div>
 
         <div class="col-7 text-body2 ellipsis cursor-pointer"
-             @mouseenter="emitInfo(tab?.url)"
+             @mouseenter="emitInfo(chromeTab?.url)"
              @mouseout="emitInfo(undefined)"
-             @click="NavigationService.openOrCreateTab(tab?.url || '')">
-          {{ tab?.title }}
+             @click="NavigationService.openOrCreateTab(chromeTab?.url || '')">
+          {{ chromeTab?.title }}
           <q-tooltip class="tooltip" v-if="useSettingsStore().isEnabled('dev')">
-            {{ tab.chromeTabId }} / {{ tab.url }}
+            {{ chromeTab.id }} / {{ chromeTab.url }}
           </q-tooltip>
           <q-tooltip class="tooltip" v-else>
-            {{ tab.url }}
+            {{ chromeTab.url }}
           </q-tooltip>
         </div>
         <div class="col-1" v-if="!props.useSelection">
-          <q-icon name="close" @click="closeTab(tab)" v-if="!isSelf(tab.url || '')">
+          <q-icon name="close" @click="closeTab(chromeTab)" v-if="!isSelf(chromeTab.url || '')">
             <q-tooltip class="tooltip">Close this tab in the browser</q-tooltip>
           </q-icon>
         </div>
@@ -68,27 +68,29 @@ import _ from "lodash"
 import {useUtils} from "src/services/Utils"
 import {useSettingsStore} from "src/stores/settingsStore"
 import {PropType} from "vue";
+import ChromeApi from "src/services/ChromeApi";
+import {uid} from "quasar";
 
 const props = defineProps({
-  tab: {type: Object as PropType<Tab>, required: true},
+  chromeTab: {type: Object as PropType<chrome.tabs.Tab>, required: true},
   useSelection: {type: Boolean, default: false}
 })
 
 const emits = defineEmits(['selectionChanged', 'addedToTabset', 'hasSelectable'])
 
 const tabsStore = useTabsStore()
 
-const closeTab = (tab: Tab) => {
+const closeTab = (tab: chrome.tabs.Tab) => {
   NavigationService.closeChromeTab(tab)
   tabsStore.pendingTabset.tabs = _.filter(tabsStore.pendingTabset.tabs, t => t.url !== tab.url)
 }
 
-const cardStyle = (tab: Tab) => {
+const cardStyle = (tab: chrome.tabs.Tab) => {
   const height = "30px";
   let background = ''
-  if (tab.isDuplicate) {
-    background = "background: radial-gradient(circle, #FFFFFF 0%, #FFECB3 100%)"
-  }
+  // if (tab.isDuplicate) {
+  //   background = "background: radial-gradient(circle, #FFFFFF 0%, #FFECB3 100%)"
+  // }
   if (useTabsetService().urlExistsInCurrentTabset(tab.url || '')) {
     background = "background: #efefef"
   } else {
@@ -104,20 +106,22 @@ const isSelf = (url: string) => url.startsWith(self)
 const emitInfo = (msg: string | undefined) => useUiStore().footerInfo = msg
 
 const addToCurrentTabset = () => {
-  useCommandExecutor().executeFromUi(new CreateTabFromOpenTabsCommand(props.tab as unknown as Tab, 0))
-      .then(() => emits('addedToTabset', {tabId: props.tab.id, tabUrl: props.tab.url}))
+  useCommandExecutor().executeFromUi(new CreateTabFromOpenTabsCommand(props.chromeTab as unknown as Tab, 0))
+      .then(() => emits('addedToTabset', {tabId: props.chromeTab.id, tabUrl: props.chromeTab.url}))
 }
 
 const selectionChanged = (val: any) => {
   //console.log("emitting", val)
-  emits('selectionChanged', {tabId: props.tab.id, selected: val})
+  emits('selectionChanged', {tabId: props.chromeTab.id, selected: val})
 }
 
-const showAddToTabsetIcon = (tab: Tab) => {
+const showAddToTabsetIcon = (tab: chrome.tabs.Tab) => {
   return tabsStore.currentTabsetId && !props.useSelection && !useTabsetService().urlExistsInCurrentTabset(tab.url || '')
 }
 
-const showSelectIcon = (tab: Tab) => props.useSelection && !useTabsetService().urlExistsInCurrentTabset(tab.url || '')
+const showSelectIcon = (tab: chrome.tabs.Tab) => props.useSelection && !useTabsetService().urlExistsInCurrentTabset(tab.url || '')
+
+const toTab = (chromeTab: chrome.tabs.Tab) => new Tab(uid(), chromeTab)
 
 </script>