fix: search input on extension page (#3705)

lnbits/static/js/pages/extensions.js

@@ -26,7 +26,8 @@ window.PageExtensions = {
       selectedRelease: null,
       uninstallAndDropDb: false,
       maxStars: 5,
-      paylinkWebsocket: null
+      paylinkWebsocket: null,
+      searchToggle: false
     }
   },
   watch: {

lnbits/templates/pages/extensions.vue

@@ -15,6 +15,7 @@
               <q-space></q-space>
 
               <q-input
+                v-if="$q.screen.gt.sm"
                 :label="$t('search_extensions')"
                 :dense="dense"
                 class="float-right q-pr-xl"
@@ -33,6 +34,14 @@
                   </q-icon>
                 </template>
               </q-input>
+              <q-btn
+                v-else
+                flat
+                icon="search"
+                @click="searchToggle = !searchToggle"
+                class="q-mr-md"
+              >
+              </q-btn>
               <q-badge
                 v-if="g.user.admin && updatableExtensions?.length"
                 @click="showUpdateAllDialog = true"
@@ -68,6 +77,25 @@
                 ><q-tooltip v-text="$t('admin_settings')"></q-tooltip
               ></q-btn>
             </q-tabs>
+            <div v-if="$q.screen.lt.sm && searchToggle" class="q-pa-sm">
+              <q-input
+                :label="$t('search_extensions')"
+                dense
+                class=""
+                v-model="searchTerm"
+                autofocus
+              >
+                <template v-slot:append>
+                  <q-icon
+                    v-if="searchTerm !== ''"
+                    name="close"
+                    @click="searchTerm = ''"
+                    class="cursor-pointer"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </div>
           </div>
         </div>
       </q-card>