wip

src/App.vue

@@ -57,7 +57,8 @@ onAuthStateChanged(auth, async (user) => {
     console.log("%conAuthStateChanged: logged out", "border:1px solid green")
     await AppService.init($q, router, true, undefined)
     if (!router.currentRoute.value.path.startsWith("/mainpanel")) {
-      await router.push("/")
+      console.log("NOT redirecting to '/'")
+      //await router.push("/")
     }
   }
 });
@@ -99,7 +100,8 @@ if (useDarkMode === "true") {
   $q.dark.set("auto")
 }
 
-if (useDarkMode) {
+if (useDarkMode === "true") {
+  console.log(" applying dark color scheme")
   setCssVar('primary', '#D9E8F5');
   setCssVar('secondary', '#26A69A');
   setCssVar('accent', '#9C27B0');

src/components/SidePanelFooter.vue

@@ -12,8 +12,7 @@
     </div>
 
     <div class="row fit q-mb-sm" v-if="showStatsTable">
-      <!-- https://michaelnthiessen.com/force-re-render -->
-      <SidePanelWindowMarkupTable :key="randomKey"/>
+      <SidePanelStatsMarkupTable :key="randomKey"/>
     </div>
 
     <div class="row fit">
@@ -81,7 +80,7 @@
         </q-btn>
 
         <q-btn
-          icon="monitoring"
+          icon="show_chart"
           :class="rightButtonClass()"
           flat
           :size="getButtonSize()"
@@ -177,6 +176,7 @@ import {Account} from "src/models/Account";
 import {useNotificationHandler} from "src/services/ErrorHandler";
 import SidePanelLoginWidget from "components/helper/SidePanelLoginWidget.vue";
 import SidePanelWindowMarkupTable from "components/helper/SidePanelWindowMarkupTable.vue";
+import SidePanelStatsMarkupTable from "components/helper/SidePanelStatsMarkupTable.vue"
 import {Window} from "src/models/Window"
 
 const {handleSuccess, handleError} = useNotificationHandler()
@@ -350,6 +350,7 @@ const toggleShowWindowTable = () => {
   showWindowTable.value = !showWindowTable.value
   if (showWindowTable.value) {
     randomKey.value = uid()
+    showStatsTable.value = false
   }
   const windowId = useWindowsStore().currentChromeWindow?.id || 0
   const currentWindow: Window | undefined = useWindowsStore().windowForId(windowId)
@@ -359,7 +360,12 @@ const toggleShowWindowTable = () => {
   }
 }
 
-const toggleShowStatsTable = () => showStatsTable.value = !showWindowTable.value
+const toggleShowStatsTable = () => {
+  showStatsTable.value = !showStatsTable.value
+  if (showWindowTable.value) {
+    showWindowTable.value = false
+  }
+}
 
 const logout = () => {
   authStore.logout()
@@ -375,10 +381,7 @@ const logout = () => {
     })
 }
 
-const subscribe = () => router.push("/subscribe")
-
 const offsetBottom = () => ($q.platform.is.capacitor || $q.platform.is.cordova) ? 'margin-bottom:20px;' : ''
-
 const gotoStripe = () => openURL("https://billing.stripe.com/p/login/test_5kA9EHf2Da596HuaEE")
 
 </script>

src/components/helper/SidePanelStatsMarkupTable.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="col-12 text-right">
+
+    <q-markup-table class="q-ma-none" dense flat>
+      <thead>
+      <tr>
+        <th class="text-left">Type</th>
+        <th class="text-right">Count</th>
+        <th class="text-right q-pr-none">
+          <span class="cursor-pointer"><q-icon name="save" class="q-mr-xs"/>Save current values</span>
+        </th>
+      </tr>
+      </thead>
+
+      <tbody>
+      <tr v-for="row in rows" style="max-height:15px">
+        <td class="text-left">
+            <span class="cursor-pointer" :data-testid="'windowDataColumn_name_' + row['id' as keyof object]">
+                {{ row['name' as keyof object] }}
+                <q-tooltip class="tooltip-small" v-if="devMode">{{ row['id' as keyof object] }}</q-tooltip>
+              </span>
+
+        </td>
+        <td>
+          {{ row['count' as keyof object] }}
+        </td>
+        <td>
+        </td>
+      </tr>
+      </tbody>
+    </q-markup-table>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+import {useWindowsStore} from "stores/windowsStore";
+import {onMounted, ref, watch, watchEffect} from "vue";
+import {Window} from "src/models/Window"
+import _ from "lodash";
+import {uid, useQuasar} from "quasar";
+import {VueDraggableNext} from 'vue-draggable-next'
+import NewTabsetDialog from "components/dialogues/NewTabsetDialog.vue";
+import {useSpacesStore} from "stores/spacesStore";
+import {useTabsStore} from "stores/tabsStore";
+import {Tabset} from "src/models/Tabset";
+import {useCommandExecutor} from "src/services/CommandExecutor";
+import {RestoreTabsetCommand} from "src/domain/tabsets/RestoreTabset";
+import {useUtils} from "src/services/Utils";
+import {useNotificationHandler} from "src/services/ErrorHandler";
+import RenameWindowDialog from "components/dialogues/RenameWindowDialog.vue";
+import {useSettingsStore} from "stores/settingsStore";
+import {useBookmarksStore} from "stores/bookmarksStore";
+
+const settingsStore = useSettingsStore()
+
+const rows = ref<object[]>([])
+const currentWindowName = ref('---')
+
+const devMode = ref<boolean>(settingsStore.isEnabled('dev'))
+
+onMounted(() => {
+  rows.value = calcWindowRows()
+})
+
+watch(() => useWindowsStore().currentChromeWindows, (newWindows, oldWindows) => {
+  rows.value = calcWindowRows()
+})
+
+watchEffect(() => {
+  const res = useWindowsStore().currentChromeWindow && useWindowsStore().currentChromeWindow.id ?
+    useWindowsStore().windowNameFor(useWindowsStore().currentChromeWindow.id || 0) || 'n/a' :
+    'n/a'
+  currentWindowName.value = res
+})
+
+const calcWindowRows = () => {
+  return [
+    {name: 'Tabs', count: useTabsStore().allTabsCount},
+    {name: 'Tabsets', count: useTabsStore().tabsets.size},
+    {name: 'Spaces', count: useSpacesStore().spaces.size},
+    {name: 'Bookmarks', count: useBookmarksStore().bookmarksCount},
+    {name: 'Bookmark Folders', count: useBookmarksStore().foldersCount},
+    {name: 'Open Windows', count: useWindowsStore().currentChromeWindows.length},
+    {name: 'Open Tabs', count: useTabsStore().tabs.length},
+  ]
+}
+
+</script>
+
+<style scoped>
+
+.q-table th, .q-table td {
+  padding-top: 0;
+  padding-bottom: 0
+}
+
+</style>

src/models/Tree.ts

@@ -8,7 +8,9 @@ export class TreeNode {
     public label: string,
     public url: string | undefined,
     public icon: string,
-    public children: TreeNode[]) {
+    public children: TreeNode[],
+    public subFoldersCount = 0,
+    public subNodesCount = 0) {
     // this.header = children.length > 0 ? 'node' : 'leaf'
     this.header = !url ? 'node' : 'leaf'
 

src/pages/sidepanel/WelcomePage.vue

@@ -46,30 +46,22 @@
 <script lang="ts" setup>
 
 import {SidePanelView, useUiStore} from "src/stores/uiStore";
-import {useQuasar} from "quasar";
 import {onMounted, ref, watchEffect} from "vue";
 import {useTabsStore} from "stores/tabsStore";
 import {useRouter} from "vue-router";
 import {useCommandExecutor} from "src/services/CommandExecutor";
 import {CreateTabsetCommand} from "src/domain/tabsets/CreateTabset";
-import NavigationService from "src/services/NavigationService";
 import {STRIP_CHARS_IN_USER_INPUT} from "boot/constants";
-import {useSpacesStore} from "stores/spacesStore";
-import {TabsetStatus} from "src/models/Tabset";
 import Analytics from "src/utils/google-analytics";
 import {nextTick} from 'vue'
 import DialogButton from "components/buttons/DialogButton.vue";
-import ImportDialog from "components/dialogues/ImportDialog.vue";
 import {useAuthStore} from "stores/authStore";
 
-const $q = useQuasar()
 const router = useRouter()
 
 const tabsetName = ref('')
 const tabsetNameRef = ref<HTMLElement>(null as unknown as HTMLInputElement)
 const windowLocation = ref('---')
-const user = ref<any>()
-
 
 onMounted(() => {
   Analytics.firePageViewEvent('WelcomePage', document.location.href);
@@ -94,16 +86,16 @@ watchEffect(() => {
   }
 })
 
-
-setTimeout(() => {
-  console.log("focusing", tabsetNameRef.value)
-  //document.getElementsByTagName("input")[0].focus()
-  nextTick(() => {
-    window.document.getElementsByTagName("input")[0].focus()
-    tabsetNameRef.value.focus()
-  });
-
-}, 2000)
+//
+// setTimeout(() => {
+//   console.log("focusing", tabsetNameRef.value)
+//   //document.getElementsByTagName("input")[0].focus()
+//   nextTick(() => {
+//     window.document.getElementsByTagName("input")[0].focus()
+//     tabsetNameRef.value.focus()
+//   });
+//
+// }, 2000)
 
 watchEffect(() => {
   // we might have been redirected here too early, redirecting
@@ -129,8 +121,6 @@ const newTabsetNameIsValid = () =>
 //https://groups.google.com/a/chromium.org/g/chromium-extensions/c/nb058-YrrWc
 const selected = () => tabsetNameRef.value.focus()
 
-const showImportDialog = () => $q.dialog({component: ImportDialog, componentProps: {inSidePanel: true}})
-
 </script>
 
 <style scoped>

src/pages/sidepanel/helper/FirstToolbarHelper.vue

@@ -14,7 +14,6 @@
 
           <template v-else>
             <div class="column q-ma-none q-pa-none">
-              <!-- @click.stop="router.push('/sidepanel/spaces')" -->
               <div class="col q-ma-none q-pa-none cursor-pointer text-subtitle1">
                 <slot name="title">{{ props.title }}</slot>
               </div>

src/services/AppService.ts

@@ -162,6 +162,7 @@ class AppService {
     // tabsets not in bex mode means running on "shared.tabsets.net"
     // probably running an import ("/imp/:sharedId")
     // we do not want to go to the welcome back
+    // console.log("checking for welcome page", tabsStore.tabsets.size === 0, quasar.platform.is.bex, !useAuthStore().isAuthenticated())
     if (tabsStore.tabsets.size === 0 && quasar.platform.is.bex && !useAuthStore().isAuthenticated()) {
       await router.push("/sidepanel/welcome")
     }

src/stores/bookmarksStore.ts

@@ -8,21 +8,27 @@ import {Tabset} from "src/models/Tabset";
 
 function getChildren(
   parent: chrome.bookmarks.BookmarkTreeNode,
+  folderCount: number = 0,
+  bmCount: number = 0,
   predicate: (x: chrome.bookmarks.BookmarkTreeNode) => boolean = x => true,
   level: number = 1): TreeNode[] {
 
   if (parent && parent.children) {
     //let predicate: x: chrome.bookmarks.BookmarkTreeNode => string = (x:chrome.bookmarks.BookmarkTreeNode) => !x.url;
     return _.map(_.filter(parent.children, predicate), c => {
-      const childrenWithoutPredicate = getChildren(c)
-      const children = getChildren(c, predicate)
+      const childrenWithoutPredicate = getChildren(c, bmCount)
+      const children = getChildren(c, folderCount,bmCount, predicate)
+      bmCount += children.length
       return new TreeNode(
         c.id,
         c.title,
         c.url ? c.title : c.title + ' (' + childrenWithoutPredicate.length + ')',
         c.url,
         c.url ? 'o_article' : 'o_folder',
-        children)
+        children,
+        folderCount + 1,
+        bmCount + children.length
+        )
     })
   } else {
     return [];
@@ -37,7 +43,10 @@ export const  useBookmarksStore = defineStore('bookmarks', {
     currentBookmark: null as unknown as Bookmark,
 
     // the bookmarks (nodes and leaves) for the selected parent id
-    bookmarksForFolder: null as unknown as Bookmark[]
+    bookmarksForFolder: null as unknown as Bookmark[],
+
+    bookmarksCount: 0,
+    foldersCount: 0
   }),
 
   getters: {
@@ -73,11 +82,23 @@ export const  useBookmarksStore = defineStore('bookmarks', {
 
         _.forEach(tree[0].children, parent => {
           const children: TreeNode[] = getChildren(parent)
+          for (const c of children) {
+            this.bookmarksCount += c.subNodesCount
+            this.foldersCount += c.subFoldersCount
+          }
+
           const treeNode = new TreeNode(parent.id, parent.title, parent.title, parent.url, 'o_folder', children)
           this.bookmarksTree.push(treeNode)
 
-          const childrenNodes: TreeNode[] = getChildren(parent, x => !x.url)
+          const childrenNodes: TreeNode[] = getChildren(parent, 0,0,x => !x.url)
+          for (const c of childrenNodes) {
+            this.bookmarksCount += c.subNodesCount
+            this.foldersCount += c.subFoldersCount
+          }
           this.bookmarksNodes.push(new TreeNode(parent.id, parent.title, parent.title, parent.url, 'o_folder', childrenNodes))
+
+          this.foldersCount+=1
+
         })
         //console.log("loading bookmarks done")
         return Promise.resolve()