feat: dynamic extension loading via routes.json (#3605)

lnbits/templates/base.html

@@ -51,9 +51,12 @@
             <lnbits-header-wallets
               v-if="g.user && !g.isPublicPage"
             ></lnbits-header-wallets>
-            <router-view v-if="isVueRoute" :key="$route.path"></router-view>
-            <!-- FastAPI Content from extensions -->
-            <div v-else>{% block page %}{% endblock %}</div>
+            <!-- block page content from static extensions -->
+            <div v-if="$route.path === '{{ request.path }}'">
+              {% block page %}{% endblock %}
+            </div>
+            <!-- vue router-view -->
+            <router-view :key="$route.path"></router-view>
           </q-page>
         </q-page-container>
         {% endblock %}
@@ -64,6 +67,7 @@
       </q-layout>
     </div>
     <script type="text/javascript">
+      const RENDERED_ROUTE = '{{ request.path }}'
       const WINDOW_SETTINGS = {{ WINDOW_SETTINGS | tojson }}
       Object.keys(WINDOW_SETTINGS).forEach(key => {
         window[key] = WINDOW_SETTINGS[key]

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

@@ -17,11 +17,10 @@
     </q-item>
     <q-item
       v-for="extension in userExtensions"
-      :key="extension.code"
       clickable
-      :active="$route.path.startsWith(extension.url)"
+      :active="$route.path.startsWith('/' + extension.code)"
       tag="a"
-      :href="extension.url"
+      :to="'/' + extension.code + '/'"
     >
       <q-item-section side>
         <q-avatar size="md">
@@ -33,7 +32,10 @@
           ><span v-text="extension.name"></span>
         </q-item-label>
       </q-item-section>
-      <q-item-section side v-show="$route.path.startsWith(extension.url)">
+      <q-item-section
+        side
+        v-show="$route.path.startsWith('/' + extension.code)"
+      >
         <q-icon name="chevron_right" color="grey-5" size="md"></q-icon>
       </q-item-section>
     </q-item>