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

TAB-430 "Last visited" back/forward feature: Idea: you jump from one …

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

@@ -0,0 +1,17 @@
+<template>
+  <q-btn
+      :icon="props.icon"
+      flat
+      class="q-ma-none q-pa-xs cursor-pointer"
+      style="max-width:20px"
+      size="13px">
+    <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}
+})
+</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

@@ -70,7 +70,7 @@ import {useSettingsStore} from "src/stores/settingsStore"
 import {PropType} from "vue";
 
 const props = defineProps({
-  tab: {type: Object as PropType<Tab>, required: true},
+  tab: {type: Object as PropType<chrome.tabs.Tab>, required: true},
   useSelection: {type: Boolean, default: false}
 })
 
@@ -119,6 +119,14 @@ const showAddToTabsetIcon = (tab: Tab) => {
 
 const showSelectIcon = (tab: 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)
+}
+
 </script>
 
 <style lang="sass" scoped>

src/css/app.scss

@@ -27,6 +27,8 @@
   background-color: white;
   color: black;
   font-size: 12px;
+  margin: 2px;
+  padding: 3px 6px 3px 6px;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.14), 0 1px 10px rgba(0, 0, 0, 0.12);
 }
 

src/domain/queries/StatsQuery.ts → src/domain/queries/StatsQuery.ts_

@@ -1,6 +1,5 @@
 import Query from "src/domain/Query";
 import {QueryResult} from "src/domain/QueryResult";
-import {StatsEntry} from "src/models/StatsEntry";
 import {useDB} from "src/services/usePersistenceService";
 
 const {db} = useDB()

src/pages/SidePanelPage.vue

@@ -325,7 +325,6 @@ watchEffect(() => {
                 ts.status !== TabsetStatus.ARCHIVED),
         getTabsetOrder, ["asc"])
   }
-  console.log(" *** watchEffect ***")
 })
 
 
@@ -556,6 +555,7 @@ const headerStyle = (tabset: Tabset) => {
   }
   return style
 }
+
 </script>
 
 <style>

src/pages/SidePanelSearchPage.vue

@@ -35,16 +35,7 @@
           :search-hits="tabsetHits.length"
           :title="'Found ' + searchStore.term + ' ' + tabsetHits.length + ' time(s)'">
         <template v-slot:iconsRight>
-          <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>
+          <CloseSidePanelViewButton />
         </template>
       </FirstToolbarHelper>
 
@@ -71,6 +62,7 @@ import FirstToolbarHelper from "pages/sidepanel/helper/FirstToolbarHelper.vue";
 import Analytics from "src/utils/google-analytics";
 import {useTabsStore} from "stores/tabsStore";
 import {Tabset} from "src/models/Tabset";
+import CloseSidePanelViewButton from "components/buttons/CloseSidePanelViewButton.vue";
 
 const route = useRoute()
 const searchStore = useSearchStore()

src/pages/sidepanel/SidePanelBookmarksPage.vue

@@ -17,16 +17,14 @@
       <FirstToolbarHelper title="Bookmarks">
 
         <template v-slot:iconsRight>
-          <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>
+
+          <SidePanelToolbarTabNavigationHelper />
+
+          <ToolbarButton
+              icon="close"
+              tooltip="Close this view"
+              @click="useUiStore().sidePanelSetActiveView(SidePanelView.MAIN)"
+              color="black" />
         </template>
 
       </FirstToolbarHelper>
@@ -44,6 +42,12 @@ 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";
 
 onMounted(() => {
   Analytics.firePageViewEvent('SidePanelBookmarksPage', document.location.href);

src/pages/sidepanel/SidePanelByDomainList.vue

@@ -28,16 +28,8 @@
       <FirstToolbarHelper title="Domain List">
 
         <template v-slot:iconsRight>
-          <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>
+          <SidePanelToolbarTabNavigationHelper/>
+          <CloseSidePanelViewButton />
         </template>
 
       </FirstToolbarHelper>
@@ -56,6 +48,8 @@ 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";
+import SidePanelToolbarTabNavigationHelper from "pages/sidepanel/helper/SidePanelToolbarTabNavigationHelper.vue";
+import CloseSidePanelViewButton from "components/buttons/CloseSidePanelViewButton.vue";
 
 const router = useRouter()
 

src/pages/sidepanel/SidePanelNewestTabsPage.vue

@@ -34,16 +34,8 @@
       <FirstToolbarHelper title="Newest Tabs">
 
         <template v-slot:iconsRight>
-          <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>
+          <SidePanelToolbarTabNavigationHelper/>
+          <CloseSidePanelViewButton />
         </template>
 
       </FirstToolbarHelper>
@@ -68,6 +60,9 @@ import FirstToolbarHelper from "pages/sidepanel/helper/FirstToolbarHelper.vue";
 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()