chore: refactor windowMixin, init-app.js, lnbits-theme (#3569)

lnbits/static/js/components/lnbits-theme.js

@@ -1,6 +1,12 @@
 window.app.component('lnbits-theme', {
   mixins: [window.windowMixin],
   watch: {
+    'g.walletFlip'(val) {
+      this.$q.localStorage.setItem('lnbits.walletFlip', val)
+      if (val === true && this.$q.screen.lt.md) {
+        this.g.visibleDrawer = false
+      }
+    },
     'g.disclaimerShown'(val) {
       this.$q.localStorage.setItem('lnbits.disclaimerShown', val)
     },

lnbits/static/js/init-app.js

@@ -1,3 +1,11 @@
+const quasarConfig = {
+  config: {
+    loading: {
+      spinner: Quasar.QSpinnerBars
+    }
+  }
+}
+
 const routes = [
   {
     path: '/node',
@@ -71,6 +79,12 @@ window.router = VueRouter.createRouter({
   routes
 })
 
+window.i18n = new VueI18n.createI18n({
+  locale: window.g.locale,
+  fallbackLocale: 'en',
+  messages: window.localisation
+})
+
 window.app.mixin({
   computed: {
     isVueRoute() {
@@ -83,22 +97,8 @@ window.app.mixin({
 })
 
 window.app.use(VueQrcodeReader)
-window.app.use(Quasar, {
+window.app.use(Quasar, quasarConfig)
-  config: {
-    loading: {
-      spinner: Quasar.QSpinnerBars
-    }
-  }
-})
-
-window.i18n = new VueI18n.createI18n({
-  locale: window.g.locale,
-  fallbackLocale: 'en',
-  messages: window.localisation
-})
 
 window.app.use(window.i18n)
-
-window.app.provide('g', g)
 window.app.use(window.router)
 window.app.mount('#vue')

lnbits/static/js/windowMixin.js

@@ -2,10 +2,7 @@ window.windowMixin = {
   i18n: window.i18n,
   data() {
     return {
-      api: window._lnbitsApi,
-      utils: window._lnbitsUtils,
       g: window.g,
-      currencies: window.currencies,
       ...WINDOW_SETTINGS
     }
   },
@@ -14,18 +11,6 @@ window.windowMixin = {
       this.g.newWalletType = walletType
       this.g.showNewWalletDialog = true
     },
-    flipWallets(smallScreen) {
-      this.g.walletFlip = !this.g.walletFlip
-      if (this.g.walletFlip && smallScreen) {
-        this.g.visibleDrawer = false
-      }
-      this.$q.localStorage.set('lnbits.walletFlip', this.g.walletFlip)
-    },
-    goToWallets() {
-      this.$router.push({
-        path: '/wallets'
-      })
-    },
     paymentEvents() {
       this.g.walletEventListeners = this.g.walletEventListeners || []
       this.g.user.wallets.forEach(wallet => {

lnbits/templates/components/lnbits-drawer.vue

@@ -8,7 +8,10 @@
   >
     <q-scroll-area style="height: 100%">
       <q-item>
-        <q-item-section class="cursor-pointer" @click="goToWallets()">
+        <q-item-section
+          class="cursor-pointer"
+          @click="$router.push('/wallets')"
+        >
           <q-item-label
             :style="$q.dark.isActive ? 'color:rgba(255, 255, 255, 0.64)' : ''"
             class="q-item__label q-item__label--header q-pa-none"
@@ -22,7 +25,7 @@
             :icon="g.walletFlip ? 'view_list' : 'view_column'"
             color="grey"
             class=""
-            @click="flipWallets($q.screen.lt.md)"
+            @click="g.walletFlip = !g.walletFlip"
           >
             <q-tooltip
               ><span

lnbits/templates/components/lnbits-header-wallets.vue

@@ -97,7 +97,7 @@
               round
               color="primary"
               icon="more_horiz"
-              @click="goToWallets()"
+              @click="$router.push('/wallets')"
             >
               <q-tooltip
                 ><span

lnbits/templates/components/lnbits-manage-wallet-list.vue

@@ -54,7 +54,7 @@
     <q-item
       v-if="g.user.hiddenWalletsCount > 0"
       clickable
-      @click="goToWallets()"
+      @click="$router.push('/wallets')"
     >
       <q-item-section side>
         <q-icon name="more_horiz" color="grey-5" size="md"></q-icon>