rework UI of recommendations, fix not immediately marking chat as rea…

package.json

@@ -73,10 +73,10 @@
     "miragejs": "^0.1.47",
     "ng-mocks": "^14.11.0",
     "postcss": "^8.4.21",
-    "prettier": "2.8.3",
-    "prettier-plugin-tailwindcss": "^0.2.2",
-    "pretty-quick": "^3.1.3",
-    "tailwindcss": "^3.2.4",
+    "prettier": "3.2.4",
+    "prettier-plugin-tailwindcss": "^0.5.11",
+    "pretty-quick": "^4.0.0",
+    "tailwindcss": "^3.4.1",
     "ts-jest": "^29.1.1",
     "typescript": "~5.1.6"
   },

src/app/chat/data-access/chat-state.adapter.ts

@@ -70,8 +70,22 @@ export const chatStateAdapter = createAdapter<ChatAdaptState>()({
   }),
 
   selectChat: (state, chatId: string | null) => ({
+    // TODO: clear unread chat for this chat
     ...state,
     activeChatId: chatId,
+    // TODO: clear unread chat for this chat
+    chats: state.chats.map((chat) => {
+      if (chat.id !== chatId) return chat;
+      return {
+        ...chat,
+        lastMessage: chat.lastMessage
+          ? {
+              ...chat.lastMessage,
+              readByParticipants: chat.participants.map((p) => p.id),
+            }
+          : null,
+      };
+    }),
   }),
 
   chatMessagesFetched: (state, { messages, chatId }: MessagesWithChatId) => {

src/app/home/feature/contact.component.ts

@@ -116,6 +116,9 @@ export class ContactComponent implements OnInit {
   private authHttpService = inject(AuthHttpService);
   private eventLogService = inject(EventLogService);
 
+  // TODO: hier weiter
+  //public shouldShowCaptcha = this.authService.authData$.pipe();
+
   contactForm!: FormGroup;
   contactResponse?: OldAPIResponse<void>;
 

src/app/recommendation/recommendations.component.ts

@@ -1,36 +1,41 @@
-import { Component, inject } from '@angular/core';
-import { RecommendationService } from './data-access/recommendation.service';
-import { AlertComponent } from '@shared/ui/alert/alert.component';
-import { RecommendedDancerComponent } from './ui/recommended-dancer.component';
-import { AsyncPipe, NgFor, NgIf } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { Router } from '@angular/router';
 import { BehaviorSubject, filter, map, switchMap } from 'rxjs';
+import { AlertComponent } from '@shared/ui/alert/alert.component';
+import { RecommendationService } from './data-access/recommendation.service';
+import { RecommendedDancerComponent } from './ui/recommended-dancer.component';
 
 @Component({
   selector: 'app-recommendations',
+  standalone: true,
+  imports: [CommonModule, RecommendedDancerComponent, AlertComponent],
   template: `
-    <div>
+    <div class="my-12 mx-auto max-w-[1200px] px-4 md:px-10 lg:px-10">
       <ng-container *ngIf="visibleDancers$ | async as response; else loading">
         <ng-container *ngIf="response.isSuccess; else error">
           <ng-container *ngIf="response.payload.length > 0; else noDancers">
-            <h1 class="page-header">
+            <h1 class="page-header mb-10">
               Diese Tänzer könnten für Sie interessant sein
             </h1>
-            <div class="recommended-dancers">
-              <ng-container *ngFor="let recommendedDancer of response.payload">
+            <div class="">
+              <div
+                *ngFor="let recommendedDancer of response.payload"
+                class="mb-10"
+              >
                 <app-recommended-dancer
                   [dancer]="recommendedDancer"
                   (click)="openPublicProfile(recommendedDancer.id)"
                 ></app-recommended-dancer>
-              </ng-container>
+              </div>
             </div>
 
             <div
               *ngIf="
                 ((actualAmountOfDancers$ | async) || 0) >
                 response.payload.length
               "
-              class="load-more"
+              class="flex items-center justify-center"
             >
               <button class="btn-lg btn-secondary" (click)="showMoreDancers()">
                 Weitere anzeigen
@@ -93,9 +98,7 @@ import { BehaviorSubject, filter, map, switchMap } from 'rxjs';
       </ng-template>
     </div>
   `,
-  styleUrls: ['./recommendations.component.scss'],
-  standalone: true,
-  imports: [NgIf, NgFor, RecommendedDancerComponent, AlertComponent, AsyncPipe],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RecommendationsComponent {
   recommendationsService = inject(RecommendationService);