Merge pull request #60 from evandor/TAB-430-tabHistory

Tab 430 tab history

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/buttons/ToolbarButton.vue

@@ -3,15 +3,16 @@
       :icon="props.icon"
       flat
       class="q-ma-none q-pa-xs cursor-pointer"
-      style="max-width:20px"
-      size="13px">
+      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}
+  tooltip: {type: String, required: false},
+  size: {type: String, default: "13px"}
 })
 </script>

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<chrome.tabs.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,28 +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 historyIndex = (tabId: number | undefined) => {
-  if (!tabId) {
-    return ""
-  }
-  console.log("checking index", tabId, useTabsStore().chromeTabsHistory)
-  return _.findIndex(useTabsStore().chromeTabsHistory, e => e === tabId)
-}
+const toTab = (chromeTab: chrome.tabs.Tab) => new Tab(uid(), chromeTab)
 
 </script>
 

src/components/widgets/FilterWidget.vue

@@ -0,0 +1,31 @@
+<template>
+
+  <div class="q-gutter-md row items-start fit">
+    <q-input dense standout filled autofocus
+             placeholder="Filter Open Tabs"
+             class="fit q-mx-md"
+             color="primary"
+             bg-color="white"
+             label-color="primary"
+             v-model="search">
+    </q-input>
+  </div>
+
+
+</template>
+
+<script lang="ts" setup>
+
+import {ref, watchEffect} from "vue";
+import {useSearchStore} from "src/stores/searchStore";
+import {usePermissionsStore} from "src/stores/permissionsStore";
+import {FeatureIdent} from "src/models/AppFeature";
+import {useUiStore} from "stores/uiStore";
+
+const search = ref('')
+
+watchEffect(() => {
+  useUiStore().toolbarFilterTerm = search.value
+})
+
+</script>

src/pages/SidePanelPage.vue

@@ -110,7 +110,7 @@
 
 <script lang="ts" setup>
 
-import {onMounted, onUnmounted, ref, watch, watchEffect} from "vue";
+import {onMounted, onUnmounted, ref, watchEffect} from "vue";
 import {useTabsStore} from "src/stores/tabsStore";
 import {Tab} from "src/models/Tab";
 import _ from "lodash"
@@ -128,17 +128,14 @@ import {useCommandExecutor} from "src/services/CommandExecutor";
 import {SelectTabsetCommand} from "src/domain/tabsets/SelectTabset";
 import {FeatureIdent} from "src/models/AppFeature";
 import SidePanelPageContextMenu from "pages/sidepanel/SidePanelPageContextMenu.vue";
-import {DynamicTabSourceType} from "src/models/DynamicTabSource";
 import {useWindowsStore} from "src/stores/windowsStore";
 import TabsetService from "src/services/TabsetService";
 import Analytics from "src/utils/google-analytics";
 import {useAuthStore} from "stores/auth";
-import {PlaceholdersType} from "src/models/Placeholders";
 import {useDB} from "src/services/usePersistenceService";
 import getScrollTarget = scroll.getScrollTarget;
 import {useBookmarksStore} from "stores/bookmarksStore";
 import {useSuggestionsStore} from "stores/suggestionsStore";
-import NavigationService from "src/services/NavigationService";
 import SidePanelPageTabList from "components/layouts/SidePanelPageTabList.vue";
 
 const {setVerticalScrollPosition} = scroll

src/pages/SidePanelSearchPage.vue

@@ -54,10 +54,6 @@ import {uid, useQuasar} from "quasar";
 import SearchHit from "src/components/layouts/SearchHit.vue"
 import {Hit} from "src/models/Hit";
 import ReindexDialog from "components/dialogues/ReindexDialog.vue";
-import {usePermissionsStore} from "src/stores/permissionsStore";
-import {useCommandExecutor} from "src/services/CommandExecutor";
-import {GrantPermissionCommand} from "src/domain/commands/GrantPermissionCommand";
-import {SidePanelView, useUiStore} from "stores/uiStore";
 import FirstToolbarHelper from "pages/sidepanel/helper/FirstToolbarHelper.vue";
 import Analytics from "src/utils/google-analytics";
 import {useTabsStore} from "stores/tabsStore";
@@ -165,7 +161,4 @@ watchEffect(() => {
   }
 })
 
-const bookmarksEnabled = () => usePermissionsStore().hasPermission('bookmarks')
-const grant = (permission: string) => useCommandExecutor().executeFromUi(new GrantPermissionCommand(permission))
-
 </script>

src/pages/sidepanel/SidePanelBookmarksPage.vue

@@ -38,14 +38,9 @@
 
 import BookmarksTree from "components/BookmarksTree.vue";
 import FirstToolbarHelper from "pages/sidepanel/helper/FirstToolbarHelper.vue";
-import SecondToolbarHelper from "pages/sidepanel/helper/SecondToolbarHelper.vue";
 import {SidePanelView, useUiStore} from "stores/uiStore";
 import {onMounted} from "vue";
 import Analytics from "src/utils/google-analytics";
-import {useTabsStore} from "stores/tabsStore";
-import NavigationService from "src/services/NavigationService";
-import {usePermissionsStore} from "stores/permissionsStore";
-import {FeatureIdent} from "src/models/AppFeature";
 import ToolbarButton from "components/buttons/ToolbarButton.vue";
 import SidePanelToolbarTabNavigationHelper from "pages/sidepanel/helper/SidePanelToolbarTabNavigationHelper.vue";
 

src/pages/sidepanel/SidePanelByDomainList.vue

@@ -44,7 +44,6 @@
 import {onMounted} from "vue";
 import {useRouter} from "vue-router";
 import InfoMessageWidget from "components/widgets/InfoMessageWidget.vue";
-import {SidePanelView, useUiStore} from "src/stores/uiStore";
 import FirstToolbarHelper from "pages/sidepanel/helper/FirstToolbarHelper.vue";
 import Analytics from "src/utils/google-analytics";
 import ByDomainListWidget from "components/widgets/ByDomainListWidget.vue";

src/pages/sidepanel/SidePanelNewestTabsPage.vue

@@ -49,10 +49,9 @@
 
 <script lang="ts" setup>
 
-import {SidePanelView, useUiStore} from "stores/uiStore";
 import {useTabsStore} from "stores/tabsStore";
 import _ from "lodash"
-import {Tabset, TabsetType} from "src/models/Tabset";
+import {Tabset} from "src/models/Tabset";
 import {Tab} from "src/models/Tab";
 import PanelTabListElementWidget from "components/widgets/PanelTabListElementWidget.vue";
 import {formatDistance} from "date-fns";
@@ -61,7 +60,6 @@ import InfoMessageWidget from "components/widgets/InfoMessageWidget.vue";
 import {onMounted} from "vue";
 import Analytics from "src/utils/google-analytics";
 import SidePanelToolbarTabNavigationHelper from "pages/sidepanel/helper/SidePanelToolbarTabNavigationHelper.vue";
-import CloseSidePanelView from "components/buttons/CloseSidePanelView.vue";
 import CloseSidePanelViewButton from "components/buttons/CloseSidePanelViewButton.vue";
 
 const tabsStore = useTabsStore()