[feat] filter payments in wallet (#2997)

* fix: search payments
* fix rogue button
* feat: UI polishing
* feat: better charts

---------

Co-authored-by: Tiago Vasconcelos <talvasconcelos@gmail.com>

lnbits/templates/components.vue

@@ -419,7 +419,6 @@
             dense
             use-input
             use-chips
-            multiple
             hide-dropdown-icon
           ></q-select>
           <div v-else-if="o.type === 'bool'">
@@ -639,16 +638,100 @@
       </q-input>
     </div>
     <div class="gt-sm col-auto">
+      <q-btn icon="event" flat color="grey">
+        <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+          <q-date v-model="searchDate" mask="YYYY-MM-DD" range />
+          <div class="row">
+            <div class="col-6">
+              <q-btn
+                label="Search"
+                @click="searchByDate()"
+                color="primary"
+                flat
+                class="float-left"
+                v-close-popup
+              />
+            </div>
+            <div class="col-6">
+              <q-btn
+                v-close-popup
+                @click="clearDateSeach()"
+                label="Clear"
+                class="float-right"
+                color="grey"
+                flat
+              />
+            </div>
+          </div>
+        </q-popup-proxy>
+        <q-badge
+          v-if="searchDate?.to || searchDate?.from"
+          class="q-mt-lg q-mr-md"
+          color="primary"
+          rounded
+          floating
+          style="border-radius: 6px"
+        ></q-badge>
+        <q-tooltip>
+          <span v-text="$t('filter_date')"></span>
+        </q-tooltip>
+      </q-btn>
+      <q-btn color="grey" icon="filter_alt" flat>
+        <q-menu>
+          <q-item dense>
+            <q-checkbox
+              v-model="searchStatus.success"
+              @click="handleFilterChanged"
+              label="Success Payments"
+            ></q-checkbox>
+          </q-item>
+          <q-item dense>
+            <q-checkbox
+              v-model="searchStatus.pending"
+              @click="handleFilterChanged"
+              label="Pending Payments"
+            ></q-checkbox>
+          </q-item>
+          <q-item dense>
+            <q-checkbox
+              v-model="searchStatus.failed"
+              @click="handleFilterChanged"
+              label="Failed Payments"
+            ></q-checkbox>
+          </q-item>
+          <q-separator></q-separator>
+          <q-item dense>
+            <q-checkbox
+              v-model="searchStatus.incoming"
+              @click="handleFilterChanged"
+              label="Incoming Payments"
+            ></q-checkbox>
+          </q-item>
+          <q-item dense>
+            <q-checkbox
+              v-model="searchStatus.outgoing"
+              @click="handleFilterChanged"
+              label="Outgoing Payments"
+            ></q-checkbox>
+          </q-item>
+        </q-menu>
+        <q-tooltip>
+          <span v-text="$t('filter_payments')"></span>
+        </q-tooltip>
+      </q-btn>
       <q-btn-dropdown
+        dense
         outline
         persistent
-        dense
+        icon="archive"
+        split
         class="q-mr-sm"
         color="grey"
-        label="Export"
-        split
         @click="exportCSV(false)"
       >
+        <q-tooltip>
+          <span v-text="$t('export_csv')"></span>
+        </q-tooltip>
         <q-list>
           <q-item>
             <q-item-section>
@@ -688,59 +771,12 @@
                 outline
                 color="grey"
                 @click="exportCSV(true)"
-                label="Export to CSV with details"
+                :label="$t('export_csv_details')"
               ></q-btn>
             </q-item-section>
           </q-item>
         </q-list>
       </q-btn-dropdown>
-      <q-btn icon="event" outline flat color="grey">
-        <q-popup-proxy cover transition-show="scale" transition-hide="scale">
-          <q-date v-model="searchDate" mask="YYYY-MM-DD" range />
-          <div class="row">
-            <div class="col-6">
-              <q-btn
-                label="Search"
-                @click="searchByDate()"
-                color="primary"
-                flat
-                class="float-left"
-                v-close-popup
-              />
-            </div>
-            <div class="col-6">
-              <q-btn
-                v-close-popup
-                @click="clearDateSeach()"
-                label="Clear"
-                class="float-right"
-                color="grey"
-                flat
-              />
-            </div>
-          </div>
-        </q-popup-proxy>
-        <q-badge
-          v-if="searchDate?.to || searchDate?.from"
-          class="q-mt-lg q-mr-md"
-          color="primary"
-          rounded
-          floating
-          style="border-radius: 6px"
-        />
-      </q-btn>
-
-      <q-checkbox
-        v-model="failedPaymentsToggle"
-        checked-icon="warning"
-        unchecked-icon="warning_off"
-        :color="failedPaymentsToggle ? 'yellow' : 'grey'"
-        size="xs"
-      >
-        <q-tooltip>
-          <span v-text="`Include failed payments`"></span>
-        </q-tooltip>
-      </q-checkbox>
     </div>
   </div>
   <div class="row q-my-md"></div>