From a446cd6c5b5ddafaa1c6a2263c2fe7ca5de0e763 Mon Sep 17 00:00:00 2001
From: arcbtc <ben@arc.wales>
Date: Thu, 19 Dec 2024 22:47:37 +0000
Subject: [PATCH] different way to do wallet cards

---
 lnbits/core/templates/core/wallet.html | 67 +----------------------
 lnbits/static/js/base.js               | 12 ++++
 lnbits/static/js/wallet.js             |  1 -
 lnbits/templates/base.html             | 76 +++++++++++++++++++++++++-
 lnbits/templates/components.vue        |  4 +-
 5 files changed, 92 insertions(+), 68 deletions(-)

diff --git a/lnbits/core/templates/core/wallet.html b/lnbits/core/templates/core/wallet.html
index 47f373dcd..807f86ffc 100644
--- a/lnbits/core/templates/core/wallet.html
+++ b/lnbits/core/templates/core/wallet.html
@@ -25,68 +25,7 @@
     } : ''"
       >
         {% endif %}
-        <q-scroll-area
-          v-if="!mobileSimple"
-          style="
-            height: 115px;
-            width: 100%;
-            overflow-x: auto;
-            overflow-y: hidden;
-          "
-        >
-          <div class="row no-wrap q-gutter-md q-pr-md">
-            <q-card
-              v-for="wallet in g.user.wallets"
-              :key="wallet.id"
-              class="wallet-list-card"
-              bordered
-              tag="a"
-              :href="wallet.url"
-              :style="
-          g.wallet && g.wallet.id === wallet.id
-            ? `border: 1px solid ${primaryColor}; width: 250px; text-decoration: none;`
-            : 'width: 250px; text-decoration: none;'
-        "
-              :class="{
-            'active-wallet-card': g.wallet && g.wallet.id === wallet.id
-          }"
-            >
-              <q-card-section>
-                <div class="row items-center">
-                  <q-avatar
-                    size="lg"
-                    :color="
-                g.wallet && g.wallet.id === wallet.id
-                  ? $q.dark.isActive
-                    ? 'primary'
-                    : 'primary'
-                  : 'grey-5'
-              "
-                  >
-                    <q-icon
-                      name="flash_on"
-                      :size="$q.dark.isActive ? '21px' : '20px'"
-                      :color="$q.dark.isActive ? 'black' : 'grey-3'"
-                    ></q-icon>
-                  </q-avatar>
-                  <div
-                    class="text-h6 q-pl-md"
-                    :class="{
-                'text-bold': g.wallet && g.wallet.id === wallet.id
-              }"
-                    v-text="wallet.name"
-                  ></div>
-                </div>
-                <div class="row items-center q-pt-sm">
-                  <h6 class="q-my-none text-no-wrap">
-                    <strong v-text="wallet.fsat"></strong>
-                    <small> {{LNBITS_DENOMINATION}}</small>
-                  </h6>
-                </div>
-              </q-card-section>
-            </q-card>
-          </div>
-        </q-scroll-area>
+        
         <q-card
           :style="$q.screen.lt.md ? {
             background: $q.screen.lt.md ? 'none !important': ''
@@ -117,7 +56,7 @@
               </div>
               <div class="col">
                 <q-btn
-                  @click="mobileSimple = !mobileSimple"
+                  @click="simpleMobile()"
                   color="primary"
                   class="float-right lt-md"
                   size="sm"
@@ -186,7 +125,7 @@
       <div class="col-12 col-md-4 q-gutter-y-md">
         {% else %}
         <div
-          v-if="!mobileSimple || $q.screen.gt.sm"
+          v-if="!mobileSimple"
           class="col-12 col-md-5 q-gutter-y-md"
         >
           <q-card>
diff --git a/lnbits/static/js/base.js b/lnbits/static/js/base.js
index c2cb11c5f..a2e6a927f 100644
--- a/lnbits/static/js/base.js
+++ b/lnbits/static/js/base.js
@@ -453,6 +453,8 @@ window.windowMixin = {
   data() {
     return {
       toggleSubs: true,
+      walletFlip: true,
+      mobileSimple: false,
       reactionChoice: 'confettiBothSides',
       borderChoice: '',
       gradientChoice:
@@ -472,6 +474,14 @@ window.windowMixin = {
   },
 
   methods: {
+    flipWallets() {
+      this.walletFlip = !this.walletFlip
+      this.$q.localStorage.set('lnbits.walletFlip', this.walletFlip)
+    },
+    simpleMobile() {
+      this.mobileSimple = !this.mobileSimple
+      this.$q.localStorage.set('lnbits.mobileSimple', this.mobileSimple)
+    },
     changeColor(newValue) {
       document.body.setAttribute('data-theme', newValue)
       this.$q.localStorage.set('lnbits.theme', newValue)
@@ -700,6 +710,8 @@ window.windowMixin = {
     }
     await this.checkUsrInUrl()
     this.themeParams()
+    this.walletFlip = this.$q.localStorage.getItem('lnbits.walletFlip')
+    this.mobileSimple = this.$q.localStorage.getItem('lnbits.mobileSimple')
   }
 }
 
diff --git a/lnbits/static/js/wallet.js b/lnbits/static/js/wallet.js
index a9fd62932..5e159d06b 100644
--- a/lnbits/static/js/wallet.js
+++ b/lnbits/static/js/wallet.js
@@ -50,7 +50,6 @@ window.app = Vue.createApp({
       },
       balance: parseInt(wallet.balance_msat / 1000),
       fiatBalance: 0,
-      mobileSimple: false,
       update: {
         name: null,
         currency: null
diff --git a/lnbits/templates/base.html b/lnbits/templates/base.html
index ae56f6d44..b61db5f7c 100644
--- a/lnbits/templates/base.html
+++ b/lnbits/templates/base.html
@@ -158,7 +158,14 @@
           show-if-above
           :elevated="$q.screen.lt.md"
         >
-          <lnbits-wallet-list :balance="balance"></lnbits-wallet-list>
+        <q-item-label  :style="$q.dark.isActive ? 'color:rgba(255, 255, 255, 0.64)' : ''" class="q-item__label q-item__label--header" header v-text="$t('wallets')"></q-item-label>
+        <q-btn
+        flat
+        :icon=" walletFlip ? 'keyboard_arrow_right' : 'keyboard_arrow_down'"
+        class="absolute-top-right"
+        @click="flipWallets()"
+      ></q-btn>
+            <lnbits-wallet-list v-if="!walletFlip" :balance="balance"></lnbits-wallet-list>
 
           <lnbits-manage
             :show-admin="'{{LNBITS_ADMIN_UI}}' == 'True'"
@@ -172,6 +179,73 @@
         {% endblock %} {% block page_container %}
         <q-page-container>
           <q-page class="q-px-md q-py-lg" :class="{'q-px-lg': $q.screen.gt.xs}">
+            
+
+            <q-scroll-area
+            v-if="walletFlip && !mobileSimple"
+   
+          style="
+            height: 130px;
+            width: 100%;
+            overflow-x: auto;
+            overflow-y: hidden;
+          "
+        >
+          <div class="row no-wrap q-gutter-md q-pr-md">
+            <q-card
+              v-for="wallet in g.user.wallets"
+              :key="wallet.id"
+              class="wallet-list-card"
+              bordered
+              tag="a"
+              :href="wallet.url"
+              :style="
+          g.wallet && g.wallet.id === wallet.id
+            ? `border: 1px solid ${primaryColor}; width: 250px; text-decoration: none;`
+            : 'width: 250px; text-decoration: none;'
+        "
+              :class="{
+            'active-wallet-card': g.wallet && g.wallet.id === wallet.id
+          }"
+            >
+              <q-card-section>
+                <div class="row items-center">
+                  <q-avatar
+                    size="lg"
+                    :color="
+                g.wallet && g.wallet.id === wallet.id
+                  ? $q.dark.isActive
+                    ? 'primary'
+                    : 'primary'
+                  : 'grey-5'
+              "
+                  >
+                    <q-icon
+                      name="flash_on"
+                      :size="$q.dark.isActive ? '21px' : '20px'"
+                      :color="$q.dark.isActive ? 'black' : 'grey-3'"
+                    ></q-icon>
+                  </q-avatar>
+                  <div
+                    class="text-h6 q-pl-md"
+                    :class="{
+                'text-bold': g.wallet && g.wallet.id === wallet.id
+              }"
+                    v-text="wallet.name"
+                  ></div>
+                </div>
+                <div class="row items-center q-pt-sm">
+                  <h6 class="q-my-none text-no-wrap">
+                    <strong v-text="wallet.fsat"></strong>
+                    <small> {{LNBITS_DENOMINATION}}</small>
+                  </h6>
+                </div>
+              </q-card-section>
+            </q-card>
+          </div>
+        </q-scroll-area>
+
+
             {% block page %}{% endblock %}
           </q-page>
         </q-page-container>
diff --git a/lnbits/templates/components.vue b/lnbits/templates/components.vue
index 955670aed..88b0fad78 100644
--- a/lnbits/templates/components.vue
+++ b/lnbits/templates/components.vue
@@ -1,10 +1,11 @@
 <template id="lnbits-wallet-list">
+
   <q-list
     v-if="user && user.wallets.length"
     dense
     class="lnbits-drawer__q-list"
   >
-    <q-item-label header v-text="$t('wallets')"></q-item-label>
+    
     <q-item
       v-for="wallet in wallets"
       :key="wallet.id"
@@ -53,7 +54,6 @@
         side
         v-show="activeWallet && activeWallet.id === wallet.id"
       >
-        <q-icon name="chevron_right" color="grey-5" size="md"></q-icon>
       </q-item-section>
     </q-item>
     <q-item clickable @click="showForm = !showForm">