wip

e2e/AboutPage.ts

@@ -35,23 +35,4 @@ export class AboutPage extends TabsetPage {
     await expect(this.page.locator('text=Add new Tabset')).not.toBeVisible()
   }
 
-  async submitNewTabsetDialog(tabsetName: string): Promise<TabsetTestPage> {
-    await this.createFirstTabsetBtn.click()
-    await this.newTabsetName.fill(tabsetName)
-    // await this.newTabsetAutoAdd.uncheck()
-    await this.fillByTestId(this.page, 'newTabsetName', tabsetName)
-    await this.newTabsetNameSubmit.click()
-    return new TabsetTestPage(this.page, this.extensionId)
-  }
-
-  async submitAddUrlDialog(url: string): Promise<TabsetTestPage> {
-    await this.screenshot(this.page, 'addTabset','beforeAddUrl.png');
-    await this.addUrlDialogBtn.click()
-    //await this.page.waitForSelector('text="NEW TAB"')
-    //await this.page.locator('text="NEW TAB"').click()
-    await this.addUrlDialogSubmit.fill(url)
-    await this.screenshot(this.page, 'addTabset','afterAddUrl.png');
-    await this.submitUrlDialogSubmit.click()
-    return new TabsetTestPage(this.page, this.extensionId)
-  }
 }

e2e/PageDefs/SidePanelWelcomePageDefinition.ts

@@ -27,25 +27,4 @@ export class SidePanelWelcomePageDefinition extends TabsetPageDefinition {
     //await expect(this.page.locator('text=Add')).not.toBeVisible()
   }
 
-  async submitNewTabsetDialog(tabsetName: string) {
-    console.log("page url 1", this.page.url())
-    await this.newTabsetName.fill(tabsetName)
-    await this.addTabsetSubmitBtn.click()
-    //await delay(2000)
-    console.log(`checking for chrome-extension://${this.extensionId}/www/index.html#/sidepanel`)
-    await this.page.waitForURL("**\/sidepanel**")
-    console.log("page url 2", this.page.url())
-    //return Promise.resolve(new SidePanelPageDefinition(this.page, this.extensionId))
-  }
-
-  // async submitAddUrlDialog(url: string): Promise<TabsetTestPage> {
-  //   await this.screenshot(this.page, 'addTabset','beforeAddUrl.png');
-  //   await this.addUrlDialogBtn.click()
-  //   //await this.page.waitForSelector('text="NEW TAB"')
-  //   //await this.page.locator('text="NEW TAB"').click()
-  //   await this.addUrlDialogSubmit.fill(url)
-  //   await this.screenshot(this.page, 'addTabset','afterAddUrl.png');
-  //   await this.submitUrlDialogSubmit.click()
-  //   return new TabsetTestPage(this.page, this.extensionId)
-  // }
 }

package.json

@@ -53,6 +53,7 @@
     "@editorjs/editorjs": "^2.30.5",
     "@editorjs/header": "^2.8.7",
     "@extractus/feed-extractor": "^7.1.3",
+    "@he-tree/vue": "^2.8.7",
     "@intlify/unplugin-vue-i18n": "^4.0.0",
     "@quasar/extras": "^1.16.12",
     "@sentry/browser": "^8.32.0",
@@ -93,6 +94,7 @@
     "vue": "^3.5.10",
     "vue-draggable-next": "^2.2.1",
     "vue-grid-layout-v3": "^3.0.3",
+    "vue-highlight-words": "^3.0.1",
     "vue-i18n": "^10.0.3",
     "vue-json-pretty": "^2.4.0",
     "vue-router": "^4.4.3",

src/components/TabsAsTree.vue

@@ -1,23 +1,51 @@
 <template>
-
-  <q-list class="q-mt-md">
-
-    <!--      v-model:expanded="useNotificationsStore().bookmarksExpanded"-->
-    <q-tree
-      :nodes="tabNodes"
-      node-key="id"
-      selected-color="dark"
-      @mouseenter="entered(true)"
-      @mouseleave="entered(false)"
-      v-model:selected="selected">
-
-      <template v-slot:header-node="prop">
-        <q-icon name="o_folder" class="q-mr-sm"/>
-        <span class="cursor-pointer fit no-wrap">{{ prop.node.label }}</span>
-      </template>
-    </q-tree>
-
-  </q-list>
+  <!-- TabsAsTree -->
+
+  <div class="row q-mt-xs">
+    <div class="col-12 q-mb-xs">
+      <q-input
+        dense
+        autofocus
+        ref="filterRef"
+        filled
+        v-model="filter"
+        label="Filter Urls">
+        <template v-slot:append>
+          <q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" @click="resetFilter"/>
+        </template>
+      </q-input>
+    </div>
+  </div>
+
+  <q-tree v-if="!loading"
+          :nodes="tabNodes"
+          node-key="id"
+          :filter="filter"
+          :filter-method="filterMethod"
+          selected-color="dark"
+          @mouseenter="entered(true)"
+          @mouseleave="entered(false)"
+          v-model:selected="selected">
+
+    <template v-slot:default-header="prop">
+
+      <q-img v-if="prop.node.header === 'root'"
+             class="rounded-borders q-mr-sm"
+             width="20px"
+             height="20px"
+             :src="getFaviconUrl(prop.node)">
+      </q-img>
+
+      <q-icon v-else name="o_folder" class="q-mr-sm"/>
+
+      <Highlighter class="cursor-pointer fit no-wrap my-highlight"
+                   :highlightStyle="{backgroundColor:'yellow'}"
+                   :searchWords="[filter]"
+                   :autoEscape="true"
+                   :textToHighlight="prop.node.label"/>
+    </template>
+  </q-tree>
+  <q-spinner v-else></q-spinner>
 
 </template>
 
@@ -29,19 +57,26 @@ import {useBookmarksStore} from "src/bookmarks/stores/bookmarksStore";
 import {useNotificationsStore} from "src/stores/notificationsStore";
 import {useNotificationHandler} from "src/core/services/ErrorHandler";
 import NavigationService from "src/services/NavigationService";
-import DeleteBookmarkFolderDialog from "src/bookmarks/dialogues/DeleteBookmarkFolderDialog.vue";
 import _ from "lodash"
 import {TreeNode} from "src/bookmarks/models/Tree";
 import {useTabsetsStore} from "src/tabsets/stores/tabsetsStore";
+import Highlighter from 'vue-highlight-words'
+import {useSettingsStore} from "stores/settingsStore";
+import {useUtils} from "src/core/services/Utils";
+
+const {favIconFromUrl} = useUtils()
 
 const $q = useQuasar();
 const localStorage = useQuasar().localStorage
 
 const mouseHover = ref(false)
 const selected = ref('')
 const deleteButtonId = ref('')
-const nodesToUrl = ref<Map<string, object>>(new Map())
+const nodesToUrl = ref<Map<string, string>>(new Map())
 const bookmarksPermissionGranted = ref<boolean | undefined>(undefined)
+const filterRef = ref(null)
+const filter = ref('')
+const loading = ref(true)
 
 const {handleSuccess, handleError} = useNotificationHandler()
 
@@ -70,22 +105,23 @@ function createNodes(tabs: object[], level = 0): TreeNode[] {
       return (segments && segments.length > level + 1 && segments[level] === name)
     })
     const children: TreeNode[] = createNodes(filteredTabs, level + 1)
-   // console.log("calculated children", children.length)
+    // console.log("calculated children", children.length)
     const newNodeId = uid()
-    let url = t['protocol' as keyof object] + "//" + t['hostname' as keyof object]
+    let url: string = t['protocol' as keyof object] + "//" + t['hostname' as keyof object]
     for (let i = 1; i <= level; i++) {
       url += "/" + t['segments' as keyof object][i]
     }
     children.length === 0 ?
       nodesToUrl.value.set(newNodeId, t['url' as keyof object]) :
       nodesToUrl.value.set(newNodeId, url)
-    const newNode = new TreeNode(newNodeId, name as string, name as string, undefined, "", children)
+    const newNode = new TreeNode(newNodeId, name as string, name as string, url, "", children, level)
     nodes.push(newNode)
   }
   return nodes
 }
 
 watchEffect(() => {
+  loading.value = true
   const tabs: object[] = []
   for (const ts of useTabsetsStore().tabsets.values()) {
     for (const t of ts.tabs) {
@@ -110,8 +146,13 @@ watchEffect(() => {
     }
   }
   const nodes = createNodes(tabs, 0);
-  console.log("nodes", nodes)
   tabNodes.value = JSON.parse(JSON.stringify(nodes))
+  // console.log("v", tabNodes.value)
+  loading.value = false
+})
+
+watchEffect(() => {
+  console.log("loading", loading.value)
 })
 
 watchEffect(() => {
@@ -141,17 +182,47 @@ $q.loadingBar.setDefaults({
   position: 'bottom'
 })
 
-const deleteBookmarksFolderDialog = () => {
-  $q.dialog({
-    component: DeleteBookmarkFolderDialog,
-    componentProps: {
-      folderId: selected.value
-    }
-  })
+const resetFilter = () => {
+  filter.value = ''
+  if (filterRef.value) {
+    // @ts-ignore
+    filterRef.value.focus()
+  }
 }
 
+const filterMethod = (node: TreeNode, filter: any): boolean =>
+  (node.url !== undefined) && (node.url.toLowerCase().indexOf(filter.toLowerCase()) > -1)
+
+
 const entered = (b: boolean) => mouseHover.value = b
 
+const getFaviconUrl = (n: TreeNode) => {
+  // if (!useSettingsStore().isEnabled('noDDG')) {
+  let theUrl = n.url || ''
+  //   let theRealUrl
+  //   try {
+  //     theRealUrl = new URL(theUrl)
+  //   } catch (err) {
+  //     if (!theUrl.startsWith('http')) {
+  //       theUrl = 'https://' + theUrl
+  //       try {
+  //         theRealUrl = new URL(theUrl)
+  //       } catch (err) {
+  //       }
+  //     }
+  //   }
+  //   return theRealUrl ? "https://icons.duckduckgo.com/ip3/" + theRealUrl.hostname + ".ico" : 'favicon-unknown-32x32.png'
+  //}
+
+    //const chromeTab = tab?.chromeTab
+    if (theUrl.startsWith("chrome")) {
+      return ''
+    }
+    if (!useSettingsStore().isEnabled('noDDG')) {
+      return favIconFromUrl(theUrl)
+    }
+    return ''
+}
 </script>
 
 <style lang="sass" scoped>

src/css/app.scss

@@ -142,6 +142,11 @@
   color: black;
 }
 
+::highlight(yellow-highlight) {
+  color: orange;
+  text-decoration: underline;
+}
+
 // for notification (bottom) not to hide the panel footer
 .q-notifications__list {
   margin-bottom: 45px

src/layouts/NotesLayout.vue_

@@ -0,0 +1,78 @@
+<template>
+  <q-layout view="hHh lpR fFf">
+
+    <q-header class="bg-white text-primary">
+      <q-toolbar>
+        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer"/>
+
+        <q-toolbar-title>
+          <q-avatar>
+            <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg">
+          </q-avatar>
+          Notes
+        </q-toolbar-title>
+        <q-btn flat round dense>
+<!--          <q-btn class="cursor-pointer q-mr-md" @click="createSubfolder()"-->
+<!--                 icon="edit" size="sm" label="New Sub-Page"/>-->
+          <q-btn class="cursor-pointer q-mr-md" @click="openInEditMode()"
+                 icon="edit" size="sm"  label="Edit"/>
+<!--          <q-btn class="cursor-pointer q-mr-md" @click="deleteNote()"-->
+<!--                 icon="edit" size="sm"  label="Delete"/>-->
+        </q-btn>
+        <q-icon name="save" @click="saveInPage"/>
+        <q-icon name="save" v-if="savingIndicator" />
+      </q-toolbar>
+    </q-header>
+
+    <q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered>
+      <!-- drawer content -->
+    </q-drawer>
+
+    <q-page-container>
+      <router-view ref="routerView"/>
+    </q-page-container>
+
+  </q-layout>
+</template>
+
+<script lang="ts" setup>
+import {ref, useTemplateRef, watchEffect} from 'vue'
+import {useRoute, useRouter} from "vue-router";
+import {useUiStore} from "src/ui/stores/uiStore";
+import MainPanelNotePage from "src/notes/pages/mainpanel/MainPanelNotePage.vue";
+
+// https://stackoverflow.com/questions/42632711/how-to-call-function-on-child-component-on-parent-events
+// https://vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs
+type MainPanelNotePageType = InstanceType<typeof MainPanelNotePage>
+
+const compRef = useTemplateRef<MainPanelNotePageType>('routerView')
+
+const route = useRoute()
+const router = useRouter()
+
+const leftDrawerOpen = ref(false)
+const savingIndicator = ref(false)
+const noteId = ref<string | undefined>(undefined)
+const tabsetId = ref<string | undefined>(route.query.tsId as string)
+
+watchEffect(async () => {
+  noteId.value = route.params.noteId as unknown as string
+})
+
+watchEffect(() => {
+  console.log("hier", useUiStore().saving)
+  savingIndicator.value = useUiStore().saving
+})
+
+const saveInPage = () => {
+  console.log("compRef", compRef.value)
+  compRef.value?.save()
+}
+
+const toggleLeftDrawer = () => {
+  leftDrawerOpen.value = !leftDrawerOpen.value
+}
+
+const openInEditMode = () => router.push('./' + noteId.value + '?edit=true&tsId=' + tabsetId.value)
+
+</script>