feat: UI improvements

lnbits/core/templates/core/install.html

@@ -139,53 +139,66 @@
   <q-dialog v-model="showUpgradeDialog">
     <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
       <div class="col-12 col-md-5 q-gutter-y-md" v-if="selectedExtensionRepos">
-        <q-card v-for="repo of Object.keys(selectedExtensionRepos)" :key="repo">
+        <q-card
-          <q-card-section>
+          flat
-            <h6 class="text-subtitle1 q-my-none">Repository</h6>
+          bordered
-            <q-badge color="primary" rounded
+          class="my-card"
-              ><small v-text="repo"></small
+          v-for="repoName of Object.keys(selectedExtensionRepos)"
-            ></q-badge>
+          :key="repoName"
-          </q-card-section>
+        >
-          <q-card-section class="q-pa-none">
+          <q-expansion-item
-            <q-separator></q-separator>
+            :key="repoName"
-            <q-list>
+            group="repos"
-              <q-expansion-item
+            label="Repository"
-                v-for="release of selectedExtensionRepos[repo]"
+            :caption="repoName"
-                :key="release.version"
+            :content-inset-level="0.5"
-                group="extras"
+            :icon="selectedExtensionRepos[repoName].isInstalled ? 'download_done': ''"
-                :icon="isInstalledVersion(selectedExtension, release) ? 'download_done' : 'download'"
+            :header-class="selectedExtensionRepos[repoName].isInstalled ? 'text-green' : ''"
-                :label="release.description"
+          >
-                :caption="release.version"
+            <q-card-section class="q-pa-none">
-                :content-inset-level="0.5"
+              <q-separator></q-separator>
-                :header-class="isInstalledVersion(selectedExtension, release) ? 'text-green' : ''"
+
-              >
+              <q-list>
-                <q-card>
+                <q-expansion-item
-                  <q-card-section>
+                  v-for="release of selectedExtensionRepos[repoName].releases"
-                    <q-btn
+                  :key="release.version"
-                      v-if="!isInstalledVersion(selectedExtension, release)"
+                  group="releases"
-                      @click="installExtension(release)"
+                  :icon="release.isInstalled ? 'download_done' : 'download'"
-                      color="primary unelevated mt-lg pt-lg"
+                  :label="release.description"
-                      >Install</q-btn
+                  :caption="release.version"
-                    >
+                  :content-inset-level="0.5"
-                    <a
+                  :header-class="release.isInstalled ? 'text-green' : ''"
-                    v-if="release.html_url"
+                >
-                    class="text-secondary float-right"
+                  <q-card>
-                    :href="release.html_url"
+                    <q-card-section>
-                    target="_blank"
+                      <q-btn
-                    style="color: inherit"
+                        v-if="!release.isInstalled"
-                    >Release Notes</a
+                        @click="installExtension(release)"
-                  >
+                        color="primary unelevated mt-lg pt-lg"
-                  </q-card-section>
+                        >Install</q-btn
-                 
+                      >
-                  <div
+                      <q-btn v-else @click="showUninstall()" flat color="red">
-                    v-if="release.details_html"
+                        Uninstall</q-btn
-                    v-html="release.details_html"
+                      >
-                  ></div>
+                      <a
-                  <q-separator></q-separator>
+                        v-if="release.html_url"
-                </q-card></q-expansion-item
+                        class="text-secondary float-right"
-              >
+                        :href="release.html_url"
-            </q-list>
+                        target="_blank"
-          </q-card-section>
+                        style="color: inherit"
+                        >Release Notes</a
+                      >
+                    </q-card-section>
+
+                    <div
+                      v-if="release.details_html"
+                      v-html="release.details_html"
+                    ></div>
+                    <q-separator></q-separator> </q-card
+                ></q-expansion-item>
+              </q-list>
+            </q-card-section>
+          </q-expansion-item>
         </q-card>
       </div>
       <q-spinner v-else color="primary" size="2.55em"></q-spinner>
@@ -318,8 +331,18 @@
         )
 
         this.selectedExtensionRepos = data.reduce((repos, release) => {
-          repos[release.source_repo] = repos[release.source_repo] || []
+          repos[release.source_repo] = repos[release.source_repo] || {
-          repos[release.source_repo].push(release)
+            releases: [],
+            isInstalled: false
+          }
+          release.isInstalled = this.isInstalledVersion(
+            this.selectedExtension,
+            release
+          )
+          if (release.isInstalled) {
+            repos[release.source_repo].isInstalled = true
+          }
+          repos[release.source_repo].releases.push(release)
           return repos
         }, {})
         console.log('### repos', this.selectedExtensionRepos)