clock selected block arrow

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html

@@ -3,6 +3,11 @@
   *ngIf="static || (loadingBlocks$ | async) === false; else loadingBlocksTemplate">
   <div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn">
     <ng-container *ngIf="connected && block && !block.loading && !block.placeholder; else placeholderBlock">
+      <div
+        *ngIf="minimal && spotlight < 0 && chainTip + spotlight + 1 === block.height"
+        class="spotlight-bottom"
+        [style.left]="blockStyles[i].left"
+      ></div>
       <div [attr.data-cy]="'bitcoin-block-offset-' + offset + '-index-' + i"
         class="text-center bitcoin-block mined-block blockchain-blocks-offset-{{ offset }}-index-{{ i }}"
         [class.offscreen]="!static && count && i >= count"

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss

@@ -174,4 +174,16 @@
   .bitcoin-block {
     transform: scaleX(-1);
   }
+}
+
+.spotlight-bottom {
+  position: absolute;
+  width: calc(0.6 * var(--block-size));
+  height: calc(0.25 * var(--block-size));
+  border-left: solid calc(0.3 * var(--block-size)) transparent;
+  border-bottom: solid calc(0.3 * var(--block-size)) white;
+  border-right: solid calc(0.3 * var(--block-size)) transparent;
+  transform: translate(calc(0.2 * var(--block-size)), calc(1.1 * var(--block-size)));
+  border-radius: 2px;
+  z-index: -1;
 }

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts

@@ -26,6 +26,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
   @Input() connected: boolean = true;
   @Input() minimal: boolean = false;
   @Input() blockWidth: number = 125;
+  @Input() spotlight: number = 0;
   
   specialBlocks = specialBlocks;
   network = '';