From c019355c9fb7a17b12efb453ca2c600f8d46ef1b Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Wed, 13 Dec 2023 11:29:10 +0000
Subject: [PATCH] Adapt block filter UI for small screens

---
 .../block-filters.component.html              | 11 +++++--
 .../block-filters.component.scss              | 24 ++++++++++++++
 .../block-filters/block-filters.component.ts  | 15 +++++++--
 .../block-overview-graph.component.html       |  2 +-
 frontend/src/app/shared/filters.utils.ts      | 31 ++++++++++---------
 5 files changed, 63 insertions(+), 20 deletions(-)

diff --git a/frontend/src/app/components/block-filters/block-filters.component.html b/frontend/src/app/components/block-filters/block-filters.component.html
index ff86e6b3b..90b66ddc3 100644
--- a/frontend/src/app/components/block-filters/block-filters.component.html
+++ b/frontend/src/app/components/block-filters/block-filters.component.html
@@ -1,4 +1,4 @@
-<div class="block-filters" [class.filters-active]="activeFilters.length > 0" [class.menu-open]="menuOpen">
+<div class="block-filters" [class.filters-active]="activeFilters.length > 0" [class.menu-open]="menuOpen" [class.small]="cssWidth < 500" [class.vsmall]="cssWidth < 400" [class.tiny]="cssWidth < 200">
   <div class="filter-bar">
     <button class="menu-toggle" (click)="menuOpen = !menuOpen">
       <fa-icon [icon]="['fas', 'filter']"></fa-icon>
@@ -9,7 +9,7 @@
       </ng-container>
     </div>
   </div>
-  <div class="filter-menu" *ngIf="menuOpen">
+  <div class="filter-menu" *ngIf="menuOpen && cssWidth > 280">
     <ng-container *ngFor="let group of filterGroups;">
       <h5>{{ group.label }}</h5>
       <div class="filter-group">
@@ -19,4 +19,11 @@
       </div>
     </ng-container>
   </div>
+  <div class="filter-menu" *ngIf="menuOpen && cssWidth <= 280">
+    <ng-container *ngFor="let group of filterGroups;">
+      <ng-container *ngFor="let filter of group.filters;">
+        <button *ngIf="filter.important" class="btn filter-tag" [class.selected]="filterFlags[filter.key]" (click)="toggleFilter(filter.key)">{{ filter.label }}</button>
+      </ng-container>
+    </ng-container>
+  </div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/components/block-filters/block-filters.component.scss b/frontend/src/app/components/block-filters/block-filters.component.scss
index ee9e7f4d3..20b565293 100644
--- a/frontend/src/app/components/block-filters/block-filters.component.scss
+++ b/frontend/src/app/components/block-filters/block-filters.component.scss
@@ -101,4 +101,28 @@
     pointer-events: all;
     background: #181b2d7f;
   }
+
+  &.small {
+    .filter-tag {
+      font-size: 0.8em;
+    }
+  }
+
+  &.vsmall {
+    .filter-menu {
+      margin-top: 0.25em;
+      h5 {
+        display: none;
+      }
+    }
+    .filter-tag {
+      font-size: 0.7em;
+    }
+  }
+
+  &.tiny {
+    .filter-tag {
+      font-size: 0.5em;
+    }
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/block-filters/block-filters.component.ts b/frontend/src/app/components/block-filters/block-filters.component.ts
index 97b23a4db..ce0dd76ab 100644
--- a/frontend/src/app/components/block-filters/block-filters.component.ts
+++ b/frontend/src/app/components/block-filters/block-filters.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output, HostListener } from '@angular/core';
+import { Component, EventEmitter, Output, HostListener, Input, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';
 import { FilterGroups, TransactionFilters } from '../../shared/filters.utils';
 
 
@@ -7,7 +7,8 @@ import { FilterGroups, TransactionFilters } from '../../shared/filters.utils';
   templateUrl: './block-filters.component.html',
   styleUrls: ['./block-filters.component.scss'],
 })
-export class BlockFiltersComponent {
+export class BlockFiltersComponent implements OnChanges {
+  @Input() cssWidth: number = 800;
   @Output() onFilterChanged: EventEmitter<bigint | null> = new EventEmitter();
 
   filters = TransactionFilters;
@@ -16,6 +17,16 @@ export class BlockFiltersComponent {
   filterFlags: { [key: string]: boolean } = {};
   menuOpen: boolean = false;
 
+  constructor(
+    private cd: ChangeDetectorRef,
+  ) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.cssWidth) {
+      this.cd.markForCheck();
+    }
+  }
+
   toggleFilter(key): void {
     const filter = this.filters[key];
     this.filterFlags[key] = !this.filterFlags[key];
diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.html b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.html
index 9f7408323..251b84a73 100644
--- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.html
+++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.html
@@ -13,6 +13,6 @@
       [auditEnabled]="auditHighlighting"
       [blockConversion]="blockConversion"
     ></app-block-overview-tooltip>
-    <app-block-filters (onFilterChanged)="setFilterFlags($event)"></app-block-filters>
+    <app-block-filters [cssWidth]="cssWidth" (onFilterChanged)="setFilterFlags($event)"></app-block-filters>
   </div>
 </div>
diff --git a/frontend/src/app/shared/filters.utils.ts b/frontend/src/app/shared/filters.utils.ts
index 72cb5976a..4a8cb6a15 100644
--- a/frontend/src/app/shared/filters.utils.ts
+++ b/frontend/src/app/shared/filters.utils.ts
@@ -4,6 +4,7 @@ export interface Filter {
   flag: bigint,
   toggle?: string,
   group?: string,
+  important?: boolean,
 }
 
 // binary flags for transaction classification
@@ -44,29 +45,29 @@ export const TransactionFlags = {
 
 export const TransactionFilters: { [key: string]: Filter } = {
     /* features */
-    rbf: { key: 'rbf', label: 'RBF enabled', flag: TransactionFlags.rbf, toggle: 'rbf' },
-    no_rbf: { key: 'no_rbf', label: 'RBF disabled', flag: TransactionFlags.no_rbf, toggle: 'rbf' },
+    rbf: { key: 'rbf', label: 'RBF enabled', flag: TransactionFlags.rbf, toggle: 'rbf', important: true },
+    no_rbf: { key: 'no_rbf', label: 'RBF disabled', flag: TransactionFlags.no_rbf, toggle: 'rbf', important: true },
     v1: { key: 'v1', label: 'Version 1', flag: TransactionFlags.v1, toggle: 'version' },
     v2: { key: 'v2', label: 'Version 2', flag: TransactionFlags.v2, toggle: 'version' },
     // multisig: { key: 'multisig', label: 'Multisig', flag: TransactionFlags.multisig },
     /* address types */
-    p2pk: { key: 'p2pk', label: 'P2PK', flag: TransactionFlags.p2pk },
-    p2ms: { key: 'p2ms', label: 'Bare multisig', flag: TransactionFlags.p2ms },
-    p2pkh: { key: 'p2pkh', label: 'P2PKH', flag: TransactionFlags.p2pkh },
-    p2sh: { key: 'p2sh', label: 'P2SH', flag: TransactionFlags.p2sh },
-    p2wpkh: { key: 'p2wpkh', label: 'P2WPKH', flag: TransactionFlags.p2wpkh },
-    p2wsh: { key: 'p2wsh', label: 'P2WSH', flag: TransactionFlags.p2wsh },
-    p2tr: { key: 'p2tr', label: 'Taproot', flag: TransactionFlags.p2tr },
+    p2pk: { key: 'p2pk', label: 'P2PK', flag: TransactionFlags.p2pk, important: true },
+    p2ms: { key: 'p2ms', label: 'Bare multisig', flag: TransactionFlags.p2ms, important: true },
+    p2pkh: { key: 'p2pkh', label: 'P2PKH', flag: TransactionFlags.p2pkh, important: true },
+    p2sh: { key: 'p2sh', label: 'P2SH', flag: TransactionFlags.p2sh, important: true },
+    p2wpkh: { key: 'p2wpkh', label: 'P2WPKH', flag: TransactionFlags.p2wpkh, important: true },
+    p2wsh: { key: 'p2wsh', label: 'P2WSH', flag: TransactionFlags.p2wsh, important: true },
+    p2tr: { key: 'p2tr', label: 'Taproot', flag: TransactionFlags.p2tr, important: true },
     /* behavior */
-    cpfp_parent: { key: 'cpfp_parent', label: 'Paid for by child', flag: TransactionFlags.cpfp_parent },
-    cpfp_child: { key: 'cpfp_child', label: 'Pays for parent', flag: TransactionFlags.cpfp_child },
-    replacement: { key: 'replacement', label: 'Replacement', flag: TransactionFlags.replacement },
+    cpfp_parent: { key: 'cpfp_parent', label: 'Paid for by child', flag: TransactionFlags.cpfp_parent, important: true },
+    cpfp_child: { key: 'cpfp_child', label: 'Pays for parent', flag: TransactionFlags.cpfp_child, important: true },
+    replacement: { key: 'replacement', label: 'Replacement', flag: TransactionFlags.replacement, important: true },
     /* data */
-    op_return: { key: 'op_return', label: 'OP_RETURN', flag: TransactionFlags.op_return },
+    op_return: { key: 'op_return', label: 'OP_RETURN', flag: TransactionFlags.op_return, important: true },
     // fake_multisig: { key: 'fake_multisig', label: 'Fake multisig', flag: TransactionFlags.fake_multisig },
-    inscription: { key: 'inscription', label: 'Inscription', flag: TransactionFlags.inscription },
+    inscription: { key: 'inscription', label: 'Inscription', flag: TransactionFlags.inscription, important: true },
     /* heuristics */
-    coinjoin: { key: 'coinjoin', label: 'Coinjoin', flag: TransactionFlags.coinjoin },
+    coinjoin: { key: 'coinjoin', label: 'Coinjoin', flag: TransactionFlags.coinjoin, important: true },
     consolidation: { key: 'consolidation', label: 'Consolidation', flag: TransactionFlags.consolidation },
     batch_payout: { key: 'batch_payout', label: 'Batch payment', flag: TransactionFlags.batch_payout },
     /* sighash */