feat: add tabs to install all/featured/installed

lnbits/core/templates/core/install.html

@@ -1,13 +1,35 @@
 {% extends "base.html" %} {% from "macros.jinja" import window_vars with context
 %} {% block page %}
 <div class="row q-col-gutter-md q-mb-md">
-  <div class="col-sm-7 col-xs-4 mt-lg">
+  <div class="col-sm-9 col-xs-4">
-    <q-toggle
+    <q-card>
-      label="Installed Only"
+      <div class="q-pa-xs">
-      color="secodary"
+        <div class="q-gutter-y-md">
-      class="float-left"
+          <q-tabs
-      v-model="showOnlyInstalledExtensions"
+            v-model="tab"
-    ></q-toggle>
+            @input="handleTabChanged"
+            active-color="primary"
+            align="justify"
+          >
+            <q-tab
+              name="all"
+              label="All"
+              @update="val => tab = val.name"
+            ></q-tab>
+            <q-tab
+              name="featured"
+              label="Featured"
+              @update="val => tab = val.name"
+            ></q-tab>
+            <q-tab
+              name="installed"
+              label="Installed"
+              @update="val => tab = val.name"
+            ></q-tab>
+          </q-tabs>
+        </div>
+      </div>
+    </q-card>
   </div>
 
   <div class="col-sm-3 col-xs-4 q-ml-auto">
@@ -273,7 +295,7 @@
     data: function () {
       return {
         searchTerm: '',
-        showOnlyInstalledExtensions: false,
+        tab: 'all',
         filteredExtensions: null,
         showUninstallDialog: false,
         showUpgradeDialog: false,
@@ -284,14 +306,14 @@
     },
     watch: {
       searchTerm(term) {
-        this.filterExtensions(term, this.onlyInstalled)
+        this.filterExtensions(term, this.tab)
       },
-      showOnlyInstalledExtensions(onlyInstalled) {
-        this.filterExtensions(this.searchTerm, onlyInstalled)
-      }
     },
     methods: {
-      filterExtensions: function (term, onlyInstalled) {
+      handleTabChanged: function (tab) {
+        this.filterExtensions(this.searchTerm, tab)
+      },
+      filterExtensions: function (term, tab) {
         // Filter the extensions list
         function extensionNameContains(searchTerm) {
           return function (extension) {
@@ -305,9 +327,8 @@
         }
 
         this.filteredExtensions = this.extensions
-          .filter(e =>
+          .filter(e => (tab === 'installed' ? e.isInstalled : true))
-            this.showOnlyInstalledExtensions ? e.isInstalled : true
+          .filter(e => (tab === 'featured' ? e.isFeatured : true))
-          )
           .filter(extensionNameContains(term))
       },
       installExtension: async function (release) {

lnbits/core/views/generic.py

@@ -135,6 +135,7 @@ async def extensions_install(
                     "iconUrl": ext.icon_url,
                     "shortDescription": ext.short_description,
                     "stars": ext.stars,
+                    "isFeatured": ext.featured,
                     "dependencies": ext.dependencies,
                     "isInstalled": ext.id in installed_exts_ids,
                     "isAvailable": ext.id in all_extensions,

lnbits/extension_manager.py

@@ -160,6 +160,7 @@ class GitHubRelease(BaseModel):
 
 
 class Manifest(BaseModel):
+    featured: List[str] = []
     extensions: List["ExplicitRelease"] = []
     repos: List["GitHubRelease"] = []
 
@@ -192,6 +193,7 @@ class InstallableExtension(BaseModel):
     dependencies: List[str] = []
     is_admin_only: bool = False
     stars: int = 0
+    featured = False
     latest_release: Optional[ExtensionRelease]
     installed_release: Optional[ExtensionRelease]
 
@@ -385,13 +387,16 @@ class InstallableExtension(BaseModel):
                         continue
                     ext = await InstallableExtension.from_github_release(r)
                     if ext:
+                        ext.featured = ext.id in manifest.featured
                         extension_list += [ext]
                         extension_id_list += [ext.id]
 
                 for e in manifest.extensions:
                     if e.id in extension_id_list:
                         continue
-                    extension_list += [InstallableExtension.from_explicit_release(e)]
+                    ext = InstallableExtension.from_explicit_release(e)
+                    ext.featured = ext.id in manifest.featured
+                    extension_list += [ext]
                     extension_id_list += [e.id]
             except Exception as e:
                 logger.warning(f"Manifest {url} failed with '{str(e)}'")