OZG-7773 poc mailbox icon

alfa-client/libs/postfach/src/lib/postfach-page-container/postfach-page/mail-unread-button/mail-unread-button.component.html

+@if (postfachMailListStateResource.resource | hasLink: PostfachMailListLinkRel.SET_HAS_NEW_POSTFACH_NACHRICHT) {
+  @if (showAsIconButton) {
+    <a [routerLink]="'../'" tabindex="-1">
+      <ods-button
+        (clickEmitter)="markMailAsUnread()"
+        [tooltip]="'Nachrichten als ungelesen markieren'"
+        tooltipAriaType="aria-labelledby"
+        variant="ghost"
+        size="fit"
+        dataTestId="mail-unread-icon-button"
+      >
+        <ods-mail-unread-icon icon class="fill-text" />
+      </ods-button>
+    </a>
+  } @else {
+    <a [routerLink]="'../'" tabindex="-1">
+      <ods-button
+        (clickEmitter)="markMailAsUnread()"
+        [tooltip]="'Nachrichten als ungelesen markieren'"
+        text="Als ungelesen markieren"
+        variant="outline"
+        dataTestId="mail-unread-button"
+      >
+        <ods-mail-unread-icon icon />
+      </ods-button>
+    </a>
+  }
+}

alfa-client/libs/postfach/src/lib/postfach-page-container/postfach-page/mail-unread-button/mail-unread-button.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PostfachPageMailUnreadButtonComponent } from './mail-unread-button.component';
+
+describe('MailUnreadButtonComponent', () => {
+  let component: PostfachPageMailUnreadButtonComponent;
+  let fixture: ComponentFixture<PostfachPageMailUnreadButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PostfachPageMailUnreadButtonComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PostfachPageMailUnreadButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

alfa-client/libs/postfach/src/lib/postfach-page-container/postfach-page/mail-unread-button/mail-unread-button.component.ts

+import { CommandResource } from '@alfa-client/command-shared';
+import { PostfachMailListLinkRel, PostfachMailListResource, PostfachService } from '@alfa-client/postfach-shared';
+import { createEmptyStateResource, HasLinkPipe, StateResource } from '@alfa-client/tech-shared';
+import { AsyncPipe } from '@angular/common';
+import { Component, inject, Input } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { ButtonComponent, MailUnreadIconComponent, TooltipDirective } from '@ods/system';
+import { Observable, of } from 'rxjs';
+
+@Component({
+  selector: 'alfa-postfach-page-mail-unread-button',
+  standalone: true,
+  imports: [
+    ButtonWithSpinnerComponent,
+    HasLinkPipe,
+    MailUnreadIconComponent,
+    AsyncPipe,
+    TooltipDirective,
+    ButtonComponent,
+    RouterLink,
+  ],
+  templateUrl: './mail-unread-button.component.html',
+})
+export class PostfachPageMailUnreadButtonComponent {
+  private readonly postfachService = inject(PostfachService);
+
+  @Input() postfachMailListStateResource: StateResource<PostfachMailListResource>;
+  @Input() showAsIconButton: boolean = false;
+
+  commandStateResource$: Observable<StateResource<CommandResource>> = of(createEmptyStateResource<CommandResource>());
+
+  protected readonly PostfachMailListLinkRel = PostfachMailListLinkRel;
+
+  markMailAsUnread() {
+    this.postfachService.setHasNewPostfachNachrichten(true);
+  }
+}

alfa-client/libs/postfach/src/lib/postfach-page-container/postfach-page/postfach-page.component.html

@@ -24,15 +24,17 @@
 
 -->
 <ozgcloud-subnavigation class="mat-typography mat-app-background">
-  <ozgcloud-back-button linkTo="../" label="zurück zur Detailseite"></ozgcloud-back-button>
+  <ozgcloud-back-button linkTo="../" label="zurück zur Detailseite" />
+  <alfa-postfach-page-mail-unread-button
+    [postfachMailListStateResource]="postfachMailListStateResource"
+    showAsIconButton="true"
+  />
 </ozgcloud-subnavigation>
 
 <div class="l-scroll-area--full flex flex-col">
-  <h1 data-test-id="postfach-mail-heading" class="pl-7 pt-4 text-lg font-medium">
-    Nachrichten zum Vorgang
-  </h1>
+  <h1 data-test-id="postfach-mail-heading" class="pl-7 pt-4 text-lg font-medium">Nachrichten zum Vorgang</h1>
   <alfa-postfach-page-mail-list
     [postfachMailListStateResource]="postfachMailListStateResource"
     data-test-id="postfach-mail-list"
-  ></alfa-postfach-page-mail-list>
+  />
 </div>

alfa-client/libs/postfach/src/lib/postfach.module.ts

@@ -61,6 +61,7 @@ import { PostfachMailComponent } from './postfach-mail-list-container/postfach-m
 import { PostfachMailPdfButtonContainerComponent } from './postfach-mail-pdf-button-container/postfach-mail-pdf-button-container.component';
 import { PostfachMailPdfButtonComponent } from './postfach-mail-pdf-button-container/postfach-mail-pdf-button/postfach-mail-pdf-button.component';
 import { PostfachPageContainerComponent } from './postfach-page-container/postfach-page-container.component';
+import { PostfachPageMailUnreadButtonComponent } from './postfach-page-container/postfach-page/mail-unread-button/mail-unread-button.component';
 import { PostfachPageMailListComponent } from './postfach-page-container/postfach-page/postfach-page-mail-list/postfach-page-mail-list.component';
 import { PostfachPageComponent } from './postfach-page-container/postfach-page/postfach-page.component';
 
@@ -101,6 +102,8 @@ const routes: Routes = [
     TooltipDirective,
     MultiFileUploadComponent,
     PostfachMailListMailboxIconComponent,
+    PostfachPageMailUnreadButtonComponent,
+    PostfachPageMailUnreadButtonComponent,
   ],
   declarations: [
     PostfachMailListContainerComponent,