Frontend - Block Production Pill

Author: directcuteo

frontend/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "1.0.16",
+  "version": "1.0.20",
   "scripts": {
     "install:deps": "npm install",
     "start": "npm install && ng serve --configuration local --open",
@@ -42,7 +42,7 @@
     "@ngrx/router-store": "^17.2.0",
     "@ngrx/store": "^17.2.0",
     "@nguniversal/express-engine": "^7.0.2",
-    "@openmina/shared": "^0.107.0",
+    "@openmina/shared": "^0.108.0",
     "@sentry/angular": "^8.35.0",
     "@sentry/cli": "^2.38.2",
     "@sentry/tracing": "^7.114.0",

frontend/package.json

@@ -7,26 +7,32 @@
   <mat-sidenav-container [hasBackdrop]="false"
                          class="w-100 h-100"
                          *ngIf="menu$ | async as menu">
-    <mat-sidenav [mode]="menu.isMobile ? 'over' : 'side'"
-                 [class.opened]="menu.open"
-                 [class.collapsed]="menu.collapsed"
-                 [class.mobile]="menu.isMobile">
-      <mina-menu></mina-menu>
-      <div class="backdrop" (click)="toggleMenu()"></div>
-    </mat-sidenav>
+    @if (isDesktop) {
+      <mat-sidenav mode="side"
+                   [class.opened]="menu.open"
+                   [class.collapsed]="menu.collapsed"
+                   [class.mobile]="menu.isMobile">
+        <mina-menu></mina-menu>
+        <div class="backdrop" (click)="toggleMenu()"></div>
+      </mat-sidenav>
+    }
     <mat-sidenav-content class="flex-column"
                          [style.margin-left.px]="menu.isMobile ? 0 : (menu.collapsed ? 44 : 160)">
-      <mina-toolbar *ngIf="!hideToolbar"></mina-toolbar>
+      @if (!hideToolbar) {
+        <mina-toolbar></mina-toolbar>
+      }
       <div class="mina-content"
            [class.no-toolbar]="hideToolbar"
            [class.no-submenus]="subMenusLength < 2"
            [class.mobile]="menu.isMobile">
         <router-outlet></router-outlet>
       </div>
-      <mina-submenu-tabs *ngIf="menu.isMobile"
-                         [class.d-none]="subMenusLength < 2"
-                         class="mobile-menu border-top"
-                         (subMenusLength)="onSubmenusLengthChange($event)"></mina-submenu-tabs>
+      @if (!isDesktop) {
+        <mina-submenu-tabs [class.d-none]="subMenusLength < 2"
+                           class="mobile-menu border-top"
+                           (subMenusLength)="onSubmenusLengthChange($event)"></mina-submenu-tabs>
+        <mina-menu-tabs></mina-menu-tabs>
+      }
     </mat-sidenav-content>
   </mat-sidenav-container>
 }

frontend/src/app/app.component.html

@@ -44,7 +44,9 @@ mat-sidenav {
 }
 
 mat-sidenav-content {
-  transition: 200ms ease-out !important;
+  @media (min-width: 768px) {
+    transition: 200ms ease-out !important;
+  }
   overflow: hidden;
 }
 
@@ -69,14 +71,15 @@ mat-sidenav-content {
   &.mobile {
     $toolbar: 56px;
     $subMenus: 56px;
-    height: calc(100% - #{$toolbar} - #{$subMenus});
+    $tabs: 56px;
+    height: calc(100% - #{$toolbar} - #{$subMenus} - #{$tabs});
 
     &.no-toolbar {
-      height: calc(100% - #{$subMenus});
+      height: calc(100% - #{$subMenus} - #{$tabs});
     }
 
     &.no-submenus {
-      height: calc(100% - #{$toolbar});
+      height: calc(100% - #{$toolbar} - #{$tabs});
 
       &.no-toolbar {
         height: 100%;

frontend/src/app/app.component.scss

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { any, getMergedRoute, getWindow, isBrowser, MAX_WIDTH_700, MergedRoute, safelyExecuteInBrowser } from '@openmina/shared';
+import { any, getMergedRoute, getWindow, isBrowser, isDesktop, MAX_WIDTH_700, MergedRoute, safelyExecuteInBrowser } from '@openmina/shared';
 import { AppMenu } from '@shared/types/app/app-menu.type';
 import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
 import { AppSelectors } from '@app/app.state';
@@ -26,6 +26,7 @@ export class AppComponent extends StoreDispatcher implements OnInit {
   subMenusLength: number = 0;
   hideToolbar: boolean = CONFIG.hideToolbar;
   loaded: boolean;
+  isDesktop: boolean = isDesktop();
 
   private nodeUpdateSubscription: Subscription | null = null;
 

frontend/src/app/app.component.ts

@@ -40,6 +40,7 @@ import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
 import { getAnalytics, provideAnalytics, ScreenTrackingService } from '@angular/fire/analytics';
 import { getPerformance, providePerformance } from '@angular/fire/performance';
 import { BlockProductionPillComponent } from '@app/layout/block-production-pill/block-production-pill.component';
+import { MenuTabsComponent } from '@app/layout/menu-tabs/menu-tabs.component';
 
 registerLocaleData(localeFr, 'fr');
 registerLocaleData(localeEn, 'en');
@@ -161,6 +162,7 @@ export class AppGlobalErrorhandler implements ErrorHandler {
     CopyComponent,
     WebNodeLandingPageComponent,
     BlockProductionPillComponent,
+    MenuTabsComponent,
   ],
   providers: [
     THEME_PROVIDER,
@@ -195,5 +197,8 @@ export class AppGlobalErrorhandler implements ErrorHandler {
     providePerformance(() => getPerformance()),
   ],
   bootstrap: [AppComponent],
+  exports: [
+    MenuComponent,
+  ],
 })
 export class AppModule {}

frontend/src/app/app.module.ts

@@ -26,6 +26,7 @@ const getSlotsSuccess = createAction(type('Get Slots Success'), props<{
 }>());
 const changeFilters = createAction(type('Change Filters'), props<{ filters: BlockProductionWonSlotsFilters }>());
 const setActiveSlot = createAction(type('Set Active Slot'), props<{ slot: BlockProductionWonSlotsSlot }>());
+const setActiveSlotNumber = createAction(type('Set Active Slot Number'), props<{ slotNumber: number }>());
 const sort = createAction(type('Sort'), props<{ sort: TableSort<BlockProductionWonSlotsSlot> }>());
 const toggleSidePanel = createAction(type('Toggle Side Panel'));
 
@@ -36,6 +37,7 @@ export const BlockProductionWonSlotsActions = {
   getSlotsSuccess,
   changeFilters,
   setActiveSlot,
+  setActiveSlotNumber,
   sort,
   toggleSidePanel,
 };

frontend/src/app/features/block-production/won-slots/block-production-won-slots.actions.ts

@@ -27,6 +27,7 @@ export class BlockProductionWonSlotsEffects extends BaseEffect {
 
   readonly init$: Effect;
   readonly getSlots$: Effect;
+  readonly setActiveSlotNumber$: Effect;
 
   constructor(private router: Router,
               private actions$: Actions,
@@ -79,5 +80,13 @@ export class BlockProductionWonSlotsEffects extends BaseEffect {
         activeSlot: undefined,
       })),
     ));
+
+    this.setActiveSlotNumber$ = createEffect(() => this.actions$.pipe(
+      ofType(BlockProductionWonSlotsActions.setActiveSlotNumber),
+      this.latestActionState(),
+      map(({ action, state }) => BlockProductionWonSlotsActions.setActiveSlot({
+        slot: state.blockProduction[BLOCK_PRODUCTION_WON_SLOTS_KEY].slots.find(s => s.globalSlot === action.slotNumber),
+      })),
+    ));
   }
 }

frontend/src/app/features/block-production/won-slots/block-production-won-slots.effects.ts

@@ -16,6 +16,7 @@ import { DashboardBlocksSyncComponent } from './dashboard-blocks-sync/dashboard-
 import {
   DashboardPeersMinimalTableComponent,
 } from './dashboard-peers-minimal-table/dashboard-peers-minimal-table.component';
+import { BlockProductionPillComponent } from '@app/layout/block-production-pill/block-production-pill.component';
 
 
 @NgModule({
@@ -33,6 +34,7 @@ import {
     EffectsModule.forFeature(DashboardEffects),
     LoadingSpinnerComponent,
     CopyComponent,
+    BlockProductionPillComponent,
   ],
 })
 export class DashboardModule {}

frontend/src/app/features/dashboard/dashboard.module.ts

@@ -63,20 +63,18 @@ $white: #000000;
   button {
     width: 158px;
     height: 48px !important;
-    background-color: $cta-container;
-    color: $base-background;
+    background-color: $base-background;
+    color: $base-primary;
+    filter: invert(1);
 
     &.disabled {
       opacity: 0.25;
       pointer-events: none;
     }
-
-    &:hover:not(.disabled) {
-      background-color: $selected-primary;
-    }
   }
 
   @media (max-width: 768px) {
+    border: none !important;
     > div {
       display: none;
     }