layout and config fix

quasar.config.js

@@ -43,7 +43,7 @@ module.exports = configure(function (ctx) {
       // 'ionicons-v4',
       // 'mdi-v5',
       // 'fontawesome-v6',
-      // 'eva-icons',
+      'eva-icons',
       // 'themify',
       // 'line-awesome',
       // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
@@ -143,7 +143,7 @@ module.exports = configure(function (ctx) {
     framework: {
       config: {},
 
-      // iconSet: 'material-icons', // Quasar icon set
+      iconSet: 'eva-icons',
       // lang: 'en-US', // Quasar language pack
 
       // For special cases outside of where the auto-import strategy can have an impact

src-bex/background.ts

@@ -107,7 +107,7 @@ chrome.runtime.onConnect.addListener(function (port) {
 
 export default bexBackground((bridge, cons/* , allActiveConnections */) => {
 
-  if (process.env.USE_FIREBASE) {
+  if (process.env.USE_FIREBASE == "true") {
     //console.debug("[service-worker] about to obtain cloud messaging token")
 
     const firebaseApp = firebase.initializeApp({

src/App.vue

@@ -27,7 +27,7 @@ const {info} = useLogger()
 const emitter = new EventEmitter()
 emitter.setMaxListeners(12)
 
-if (process.env.USE_FIREBASE) {
+if (process.env.USE_FIREBASE == "true") {
   FirebaseServices.init()
 }
 
@@ -63,7 +63,7 @@ if (inBexMode()) {
   })
 }
 
-if (process.env.USE_FIREBASE) {
+if (process.env.USE_FIREBASE == "true") {
   const auth = FirebaseServices.getAuth()
   onAuthStateChanged(auth, async (user) => {
     if (user) {

src/components/BookmarksTree.vue

@@ -21,8 +21,15 @@
       </div>
     </div>
 
+    <div class="row q-ma-lg fit items-center justify-center" v-if="useUiStore().bookmarksLoading">
+      <q-spinner-dots
+        color="primary"
+        size="2em"
+      />
+    </div>
+
     <q-tree
-      v-if="bookmarksPermissionGranted"
+      v-if="bookmarksPermissionGranted && !useUiStore().bookmarksLoading"
       :nodes="showOnlyFolders ? bookmarksStore.nonLeafNodes : bookmarksStore.bookmarksNodes2"
       :filter="filter"
       :filterMethod="bookmarksFilter"
@@ -85,13 +92,15 @@ import NewTabsetDialog from "components/dialogues/NewTabsetDialog.vue";
 import DeleteBookmarkFolderDialog from "components/dialogues/bookmarks/DeleteBookmarkFolderDialog.vue";
 import {TreeNode} from "src/models/Tree";
 import {useUtils} from "src/services/Utils";
+import {useUiStore} from "stores/uiStore";
 
 const router = useRouter()
 const bookmarksStore = useBookmarksStore()
 
 const $q = useQuasar();
 const localStorage = useQuasar().localStorage
 
+const loading = ref(true)
 const mouseHover = ref(false)
 const selected = ref('')
 const deleteButtonId = ref('')

src/components/helper/SidePanelFooterLeftButton.vue

@@ -3,7 +3,7 @@
          :icon="props.icon"
          :class="leftButtonClass()"
          flat
-         :color="isActive() ? 'secondary':'primary'"
+         :color="isActive() ? 'secondary':''"
          :size="props.size"
          @click="toggleView()">
     <q-tooltip v-if="props.tooltip"

src/components/helper/SidePanelFooterLeftButtons.vue

@@ -72,7 +72,7 @@
   </SidePanelFooterLeftButton>
 
   <SidePanelFooterLeftButton :side-panel-view="SidePanelView.BOOKMARKS"
-                             icon="bookmark"
+                             icon="o_bookmark"
                              :class="{ shake: animateBookmarksButton }"
                              :size="props.size"
                              tooltip="Show the Bookmarks Browser"/>

src/i18n/de/de.json

@@ -7,10 +7,10 @@
   "documentation": "Dokumentation",
   "experimental": "experimental",
   "language": "Sprache",
-  "no_space_selected": "Kein Space ausgewählt",
+  "no_space_selected": "Kein Space gewählt",
   "no_special_chars_and_length": "Bitte nur Standardzeichen, max. Länge ist 32",
   "optionally": "Optional:",
-  "provide_name_add_later": "Vergebe einen Namen und füge die Tabs später hinzu",
+  "provide_name_add_later": "Vergebe einen Namen (und füge die Tabs später hinzu)",
   "tabset_name": "Tabset Name",
   "welcome_to_tabsets": "Willkommen zu Tabsets"
 }

src/i18n/en/en.json

@@ -11,7 +11,9 @@
   "no_space_selected": "No Space selected",
   "no_special_chars_and_length": "Please do not use special Characters, maximum length is 32",
   "optionally": "Optionally",
-  "provide_name_add_later": "Provide a name and add tabs later",
+  "one_line_about_tabsets1": "Mange your links:",
+  "one_line_about_tabsets2": "locally and private or synced and safe",
+  "provide_name_add_later": "provide a name (and add tabs later)",
   "tabset_name": "Tabset name",
   "welcome_to_tabsets": "Welcome  to Tabsets"
 }

src/pages/SidePanelPage.vue

@@ -20,9 +20,7 @@
           <q-list>
             <q-item clickable @click="useUiStore().startButtonAnimation('newTabset')">
               <q-item-section avatar>
-                <SidePanelToolbarButton
-                  icon="o_add_circle"
-                  color="warning"/>
+                <q-btn outline label="..." color="primary" size="sm"/>
               </q-item-section>
 
               <q-item-section>

src/pages/sidepanel/SidePanelBookmarksPage.vue

@@ -51,17 +51,17 @@ onMounted(() => {
   Analytics.firePageViewEvent('SidePanelBookmarksPage', document.location.href);
 })
 
-const onMessageListener = async (message: any, sender: any, sendResponse: any) => {
-  console.log(" <<< received message", message)
-  if (message.name === "sidepanel-switch-view") {
-    // const tsId = message.data.changedTabsetId
-    // await useTabsetService().reloadTabset(tsId)
-    // console.log("tsId", tsId)
-    // sortedSpaces.value = getSortedSpaces()
-    // tabsetsForSpaces.value = await getTabsetsForSpaces()
-    // randomKey.value = uid()
-    // //console.log("tabsetsForSpace", tabsetsForSpaces.value)
-  }
-}
+// const onMessageListener = async (message: any, sender: any, sendResponse: any) => {
+//   console.log(" <<< received message", message)
+//   if (message.name === "sidepanel-switch-view") {
+//     // const tsId = message.data.changedTabsetId
+//     // await useTabsetService().reloadTabset(tsId)
+//     // console.log("tsId", tsId)
+//     // sortedSpaces.value = getSortedSpaces()
+//     // tabsetsForSpaces.value = await getTabsetsForSpaces()
+//     // randomKey.value = uid()
+//     // //console.log("tabsetsForSpace", tabsetsForSpaces.value)
+//   }
+// }
 
 </script>

src/pages/sidepanel/SidePanelTop10Page.vue

@@ -88,7 +88,7 @@ watchEffect(() => {
   loading.value = true
   setTimeout(() => {
     top10.value = _.orderBy(
-      _.flatMap([...tabsStore.tabsets.values()],
+      _.flatMap([...tabsStore.tabsets.values()] as Tabset[],
         (tabset: Tabset) =>
           _.flatMap(tabset.tabs)),
       (t: Tab) => t.activatedCount, "desc")

src/pages/sidepanel/WelcomePage.vue

@@ -12,6 +12,10 @@
           <div class="col-12 text-h6 q-mb-md">
             {{ t('welcome_to_tabsets') }} {{ stageIdentifier() }}
           </div>
+<!--          <div class="col-12 text-caption text-primary q-mx-sm q-my-sm">-->
+<!--            {{ t('one_line_about_tabsets1') }}<br>-->
+<!--            {{ t('one_line_about_tabsets2') }}-->
+<!--          </div>-->
         </div>
 
         <div class="q-pa-sm q-mb-none row items-start q-gutter-md" @click.stop="selected()">
@@ -23,6 +27,7 @@
             </q-card-section>
             <q-card-section class="q-pb-none">
               <q-input v-model="tabsetName"
+                       class="input-box"
                        dense
                        autofocus
                        ref="tabsetNameRef"
@@ -221,3 +226,11 @@ const openBookmarksView = () => {
 }
 
 </script>
+
+<style scoped>
+:deep(.input-box .q-field__control),
+:deep(.input-box .q-field__marginal) {
+  height: 52px;
+  font-size: 18px;
+}
+</style>

src/stores/bookmarksStore.ts

@@ -3,6 +3,7 @@ import _ from "lodash";
 import {TreeNode} from "src/models/Tree";
 import {Bookmark} from "src/models/Bookmark";
 import {useUtils} from "src/services/Utils";
+import {useUiStore} from "stores/uiStore";
 
 function nodesFrom(
   parent: chrome.bookmarks.BookmarkTreeNode,
@@ -92,6 +93,7 @@ export const useBookmarksStore = defineStore('bookmarks', {
       this.initListeners()
     },
     async loadBookmarks(): Promise<void> {
+      useUiStore().bookmarksLoading = true
       this.bookmarksTree = []
       this.bookmarksNodes = []
       this.bookmarksNodes2 = []
@@ -117,6 +119,7 @@ export const useBookmarksStore = defineStore('bookmarks', {
       this.foldersCount = nodes[1]
       this.bookmarksCount = nodes[2]
 
+      useUiStore().bookmarksLoading = false
       return Promise.resolve()
 
 

src/stores/uiStore.ts

@@ -144,6 +144,7 @@ export const useUiStore = defineStore('ui', () => {
   const selectedTag = ref<string | undefined>(undefined)
   const tabsetsExpanded = ref<boolean>(false)
   const appLoading = ref<string | undefined>(undefined)
+  const bookmarksLoading = ref<boolean>(false)
   const progress = ref<object | undefined>(undefined)
 
   // online offline
@@ -604,6 +605,7 @@ export const useUiStore = defineStore('ui', () => {
     networkOnline,
     tabBeingDragged,
     appLoading,
+    bookmarksLoading,
     progress,
     setProgress,
     animateNewTabsetButton,