Add info-box for compilations

src/app/components/actionbar/actionbar.component.html

@@ -133,6 +133,16 @@
         <mat-icon>share</mat-icon>
       </button>
     </div>
+
+    @if (isCompilation()) {
+      <button
+        mat-icon-button
+        [matMenuTriggerFor]="informationMenu"
+        #infoMenuTrigger="matMenuTrigger"
+      >
+        <mat-icon>info</mat-icon>
+      </button>
+    }
   }
 </mat-toolbar>
 
@@ -233,3 +243,27 @@
     }
   }
 </mat-menu>
+
+<mat-menu #informationMenu="matMenu">
+  @if (element(); as element) {
+    @if (isCompilation()) {
+      <div class="actionbar-info">
+        <div class="info-header">
+          <p class="info-headline">{{ element.name }}</p>
+          <button mat-icon-button (click)="closeInfoMenu()">
+            <mat-icon class="material-symbols-outlined">close</mat-icon>
+          </button>
+        </div>
+        <p>{{ compilationDescription() }}</p>
+        <p>
+          <span class="info-bold">{{ entityCount() }}</span>
+          {{ 'objects' | translate }}
+        </p>
+        <p>
+          <span class="info-bold">{{ 'Creator: ' }}</span>
+          {{ element.creator.fullname }}
+        </p>
+      </div>
+    }
+  }
+</mat-menu>

src/app/components/actionbar/actionbar.component.scss

@@ -62,3 +62,22 @@
 .container {
   padding-top: 10px;
 }
+
+.actionbar-info {
+  padding: 30px;
+
+  .info-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .info-headline {
+    font-size: 16px !important;
+    font-weight: bold;
+  }
+
+  .info-bold {
+    font-weight: bold;
+  }
+}

src/app/components/actionbar/actionbar.component.ts

@@ -1,6 +1,6 @@
 import { filter, firstValueFrom, map, of, shareReplay, switchMap, tap } from 'rxjs';
 
-import { Component, computed, input, signal } from '@angular/core';
+import { Component, computed, input, signal, viewChild } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatSelectModule } from '@angular/material/select';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
@@ -14,7 +14,7 @@ import { MatInputModule } from '@angular/material/input';
 
 import { toObservable, toSignal } from '@angular/core/rxjs-interop';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatMenuModule } from '@angular/material/menu';
+import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import {
@@ -32,14 +32,14 @@ import {
   AccountService,
   AllowAnnotatingService,
   BackendService,
-  DetailPageHelperService,
   DialogHelperService,
   SelectHistoryService,
   SnackbarService,
 } from 'src/app/services';
 import { IsUserOfRolePipe } from '../../pipes/is-user-of-role.pipe';
 import { TranslatePipe } from '../../pipes/translate.pipe';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { OverlayModule } from '@angular/cdk/overlay';
 
 @Component({
   selector: 'app-actionbar',
@@ -58,6 +58,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
     MatProgressSpinnerModule,
     ReactiveFormsModule,
     MatOptionModule,
+    OverlayModule,
     RouterLink,
     MatMenuModule,
     TranslatePipe,
@@ -91,6 +92,16 @@ export class ActionbarComponent {
 
   showUsesInCollection = computed(() => this.isEntity() && this.isDetailPage());
 
+  compilationDescription = computed(() => {
+    const element = this.element();
+    return isCompilation(element) ? element.description : '';
+  });
+
+  entityCount = computed(() => {
+    const element = this.element();
+    return isCompilation(element) && element.entities ? Object.keys(element.entities).length : 0;
+  });
+
   metadataDownload = computed(() => {
     const element = this.element();
     if (!isEntity(element) && !isCompilation(element)) return;
@@ -134,6 +145,8 @@ export class ActionbarComponent {
     return !!element.options?.allowDownload;
   });
 
+  readonly infoMenuTrigger = viewChild<MatMenuTrigger>('infoMenuTrigger');
+
   constructor(
     private account: AccountService,
     private allowAnnotatingHelper: AllowAnnotatingService,
@@ -335,6 +348,10 @@ export class ActionbarComponent {
     this.isUpdatingPublishState.set(false);
   }
 
+  public closeInfoMenu() {
+    this.infoMenuTrigger()?.closeMenu();
+  }
+
   public async openDownloadDialog() {
     const options = await firstValueFrom(this.entityDownloadOptions$);
     if (!options) {