Adapt block filter UI for small screens

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>

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;
+    }
+  }
 }

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];

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>

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' },
+    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' },
+    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 },
+    p2pk: { key: 'p2pk', label: 'P2PK', flag: TransactionFlags.p2pk, important: true },
-    p2ms: { key: 'p2ms', label: 'Bare multisig', flag: TransactionFlags.p2ms },
+    p2ms: { key: 'p2ms', label: 'Bare multisig', flag: TransactionFlags.p2ms, important: true },
-    p2pkh: { key: 'p2pkh', label: 'P2PKH', flag: TransactionFlags.p2pkh },
+    p2pkh: { key: 'p2pkh', label: 'P2PKH', flag: TransactionFlags.p2pkh, important: true },
-    p2sh: { key: 'p2sh', label: 'P2SH', flag: TransactionFlags.p2sh },
+    p2sh: { key: 'p2sh', label: 'P2SH', flag: TransactionFlags.p2sh, important: true },
-    p2wpkh: { key: 'p2wpkh', label: 'P2WPKH', flag: TransactionFlags.p2wpkh },
+    p2wpkh: { key: 'p2wpkh', label: 'P2WPKH', flag: TransactionFlags.p2wpkh, important: true },
-    p2wsh: { key: 'p2wsh', label: 'P2WSH', flag: TransactionFlags.p2wsh },
+    p2wsh: { key: 'p2wsh', label: 'P2WSH', flag: TransactionFlags.p2wsh, important: true },
-    p2tr: { key: 'p2tr', label: 'Taproot', flag: TransactionFlags.p2tr },
+    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_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 },
+    cpfp_child: { key: 'cpfp_child', label: 'Pays for parent', flag: TransactionFlags.cpfp_child, important: true },
-    replacement: { key: 'replacement', label: 'Replacement', flag: TransactionFlags.replacement },
+    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 */