chore: various tweaks

lnbits/static/css/base.css

@@ -29,12 +29,15 @@
     color: inherit;
     font-weight: bold; }
 
-.q-table--dense th:first-child, .q-table--dense td:first-child,
-.q-table--dense .q-table__bottom {
-  padding-left: 6px !important; }
-  .q-table--dense th:last-child, .q-table--dense td:last-child,
+.lnbits__dialog-card {
+  width: 500px; }
+
+  .q-table--dense th:first-child, .q-table--dense td:first-child,
   .q-table--dense .q-table__bottom {
-    padding-right: 6px !important; }
+    padding-left: 6px !important; }
+    .q-table--dense th:last-child, .q-table--dense td:last-child,
+    .q-table--dense .q-table__bottom {
+      padding-right: 6px !important; }
 
 video {
   border-radius: 3px; }

lnbits/static/js/components.js

@@ -91,13 +91,17 @@ Vue.component('lnbits-extension-list', {
     }
   },
   template: `
-    <q-list v-if="user" dense class="lnbits-drawer__q-list">
+    <q-list v-if="user && extensions.length" dense class="lnbits-drawer__q-list">
       <q-item-label header>Extensions</q-item-label>
       <q-item v-for="extension in userExtensions" :key="extension.code"
         clickable
+        :active="extension.isActive"
         tag="a" :href="[extension.url, '?usr=', user.id].join('')">
         <q-item-section side>
-          <q-avatar size="md" color="grey-5">
+          <q-avatar size="md"
+            :color="(extension.isActive)
+              ? (($q.dark.isActive) ? 'deep-purple-5' : 'deep-purple')
+              : 'grey-5'">
             <q-icon :name="extension.icon" :size="($q.dark.isActive) ? '21px' : '20px'"
               :color="($q.dark.isActive) ? 'blue-grey-10' : 'grey-3'"></q-icon>
           </q-avatar>
@@ -105,6 +109,9 @@ Vue.component('lnbits-extension-list', {
         <q-item-section>
           <q-item-label lines="1">{{ extension.name }}</q-item-label>
         </q-item-section>
+        <q-item-section side v-show="extension.isActive">
+          <q-icon name="chevron_right" color="grey-5" size="md"></q-icon>
+        </q-item-section>
       </q-item>
       <q-item clickable tag="a" :href="['/extensions?usr=', user.id].join('')">
         <q-item-section side>
@@ -119,18 +126,26 @@ Vue.component('lnbits-extension-list', {
   computed: {
     userExtensions: function () {
       if (!this.user) return [];
+
+      var path = window.location.pathname;
       var userExtensions = this.user.extensions;
+
       return this.extensions.filter(function (obj) {
         return userExtensions.indexOf(obj.code) !== -1;
+      }).map(function (obj) {
+        obj.isActive = path.startsWith(obj.url);
+        return obj;
       });
     }
   },
   created: function () {
-    this.extensions = window.extensions.map(function (data) {
-      return LNbits.map.extension(data);
-    }).sort(function (a, b) {
-      return a.name.localeCompare(b.name);
-    });
+    if (window.extensions) {
+      this.extensions = window.extensions.map(function (data) {
+        return LNbits.map.extension(data);
+      }).sort(function (a, b) {
+        return a.name.localeCompare(b.name);
+      });
+    }
 
     if (window.user) {
       this.user = LNbits.map.user(window.user);

lnbits/static/scss/base.scss

@@ -48,6 +48,10 @@ body.body--dark .q-field--error {
   }
 }
 
+.lnbits__dialog-card {
+  width: 500px;
+}
+
 .q-table--dense {
   th:first-child,
   td:first-child,