feat: onpush strategy

Author: autowp

src/app/about/about.component.ts

@@ -1,5 +1,5 @@
 import {AsyncPipe, DecimalPipe} from '@angular/common';
-import {Component, inject, OnInit} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject, OnInit} from '@angular/core';
 import {Router, RouterLink} from '@angular/router';
 import {APIUser} from '@grpc/spec.pb';
 import {StatisticsClient} from '@grpc/spec.pbsc';
@@ -81,6 +81,7 @@ You can support our project by [finances](/donate) or [moral](/feedback).
 Take part in [the translation of the site](https://github.com/autowp/autowp-frontend/tree/master/src/locale) into other languages.`;
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [RouterLink, AsyncPipe],
   providers: [BytesPipe],
   selector: 'app-about',

src/app/account/access/access.component.ts

@@ -1,9 +1,10 @@
-import {Component, inject, OnInit} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject, OnInit} from '@angular/core';
 import {RouterLink} from '@angular/router';
 import {environment} from '@environment/environment';
 import {PageEnvService} from '@services/page-env.service';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [RouterLink],
   selector: 'app-account-access',
   templateUrl: './access.component.html',

src/app/account/account.component.ts

@@ -1,5 +1,5 @@
 import {AsyncPipe} from '@angular/common';
-import {Component, inject} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
 import {RouterLink, RouterOutlet} from '@angular/router';
 import {ForumsClient} from '@grpc/spec.pbsc';
 import {Empty} from '@ngx-grpc/well-known-types';
@@ -24,6 +24,7 @@ interface SidebarItem {
 }
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [RouterLink, RouterOutlet, AsyncPipe],
   selector: 'app-account',
   templateUrl: './account.component.html',

src/app/account/accounts/accounts.component.html

@@ -2,7 +2,7 @@
   <h1 i18n>My accounts</h1>
 </div>
 @if (accounts$ | async; as accounts) {
-  @if (accounts.length > 0 && !disconnectFailed) {
+  @if (accounts.length > 0 && !disconnectFailed()) {
     <div class="card card-body mb-4">
       @for (account of accounts; track account.id) {
         <div>
@@ -33,13 +33,13 @@ <h1 i18n>My accounts</h1>
   }
 }
 
-@if (disconnectFailed) {
+@if (disconnectFailed()) {
   <div class="card card-body">
     <app-markdown
       i18n-markdown
       markdown="Не удалось удалить учетную запись.
 
 Такое бывает, если привязанная учётная запись является единственным способом авторизации, т.е. не задан e-mail или другие учётный записи."
-    ></app-markdown>
+    />
   </div>
 }

src/app/account/accounts/accounts.component.ts

@@ -1,5 +1,5 @@
 import {AsyncPipe} from '@angular/common';
-import {Component, inject, OnInit} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject, OnInit, signal} from '@angular/core';
 import {APIAccountsAccount, DeleteUserAccountRequest} from '@grpc/spec.pb';
 import {UsersClient} from '@grpc/spec.pbsc';
 import {Empty} from '@ngx-grpc/well-known-types';
@@ -11,6 +11,7 @@ import {catchError, map} from 'rxjs/operators';
 import {ToastsService} from '../../toasts/toasts.service';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [MarkdownComponent, AsyncPipe],
   selector: 'app-account-accounts',
   templateUrl: './accounts.component.html',
@@ -32,7 +33,7 @@ export class AccountAccountsComponent implements OnInit {
     map(([response]) => response.items || []),
   );
 
-  protected disconnectFailed = false;
+  protected readonly disconnectFailed = signal(false);
 
   ngOnInit(): void {
     setTimeout(() => this.#pageEnv.set({pageId: 123}), 0);
@@ -41,7 +42,7 @@ export class AccountAccountsComponent implements OnInit {
   protected remove(account: APIAccountsAccount) {
     this.#usersClient.deleteUserAccount(new DeleteUserAccountRequest({id: account.id})).subscribe({
       error: (response: unknown) => {
-        this.disconnectFailed = true;
+        this.disconnectFailed.set(true);
         this.#toastService.handleError(response);
       },
       next: () => {

src/app/account/contacts/contacts.component.html

@@ -23,7 +23,7 @@ <h1 i18n>Contacts</h1>
           <div class="flex-grow-1">
             <button class="btn-close float-end" (click)="deleteContact(contact.user.id)"></button>
             <h4>
-              <app-user [user]="contact.user"></app-user>
+              <app-user [user]="contact.user" />
             </h4>
             @if (contact.user.lastOnline) {
               <p

src/app/account/contacts/contacts.component.ts

@@ -1,5 +1,5 @@
 import {AsyncPipe, DatePipe} from '@angular/common';
-import {Component, inject, OnInit} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject, OnInit} from '@angular/core';
 import {RouterLink} from '@angular/router';
 import {Contact, DeleteContactRequest} from '@grpc/spec.pb';
 import {ContactsClient} from '@grpc/spec.pbsc';
@@ -17,6 +17,7 @@ import {ToastsService} from '../../toasts/toasts.service';
 import {UserComponent} from '../../user/user/user.component';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [RouterLink, UserComponent, NgbTooltip, AsyncPipe, DatePipe, TimeAgoPipe],
   selector: 'app-account-contacts',
   templateUrl: './contacts.component.html',

src/app/account/delete/delete.component.html

@@ -9,22 +9,23 @@ <h1 i18n>Account delete</h1>
 Нажав на красную кнопку, все данные, касающиеся вас, будут обезличены или удалены.
 
 Этот процесс необратим, поэтому хорошенько подумайте и не принимайте поспешных решений."
-  ></app-markdown>
+  />
   <hr />
   <form class="form-horizontal" (submit)="submit()">
     <div class="mb-3 row">
       <label class="col-md-2 col-form-label" for="password_old" i18n="@@user/password">Password</label>
       <div class="col-md-10">
         <input
+          id="password_old"
           type="password"
           size="50"
           maxlength="50"
           name="password_old"
           class="form-control"
           [(ngModel)]="form.password_old"
-          [class.is-invalid]="invalidParams && invalidParams['password_old']"
+          [class.is-invalid]="invalidParams() && invalidParams()['password_old']"
         />
-        @for (message of invalidParams | invalidParams: 'password_old'; track message) {
+        @for (message of invalidParams() | invalidParams: 'password_old'; track message) {
           <p [textContent]="message" class="invalid-feedback"></p>
         }
       </div>

src/app/account/delete/delete.component.ts

@@ -1,4 +1,4 @@
-import {Component, inject, OnInit} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject, OnInit, signal} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {Router} from '@angular/router';
 import {APIDeleteUserRequest} from '@grpc/spec.pb';
@@ -15,6 +15,7 @@ import {extractFieldViolations, fieldViolations2InvalidParams} from '../../grpc'
 import {ToastsService} from '../../toasts/toasts.service';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [MarkdownComponent, FormsModule, InvalidParamsPipe],
   selector: 'app-account-delete',
   templateUrl: './delete.component.html',
@@ -29,7 +30,7 @@ export class AccountDeleteComponent implements OnInit {
   protected readonly form = {
     password_old: '',
   };
-  protected invalidParams?: InvalidParams;
+  protected readonly invalidParams = signal<InvalidParams>({});
 
   ngOnInit(): void {
     setTimeout(() => this.#pageEnv.set({pageId: 137}), 0);
@@ -54,7 +55,7 @@ export class AccountDeleteComponent implements OnInit {
           this.#toastService.handleError(response);
           if (response instanceof GrpcStatusEvent && response.statusCode === 3) {
             const fieldViolations = extractFieldViolations(response);
-            this.invalidParams = fieldViolations2InvalidParams(fieldViolations);
+            this.invalidParams.set(fieldViolations2InvalidParams(fieldViolations));
           }
         },
         next: () => {

src/app/account/delete/deleted/deleted.component.html

@@ -7,5 +7,5 @@ <h1 i18n>Account removed</h1>
     i18n-markdown
     markdown="Account removed.
 Good luck."
-  ></app-markdown>
+  />
 </div>

src/app/account/delete/deleted/deleted.component.ts

@@ -1,8 +1,9 @@
-import {Component, inject, OnInit} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject, OnInit} from '@angular/core';
 import {PageEnvService} from '@services/page-env.service';
 import {MarkdownComponent} from '@utils/markdown/markdown.component';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [MarkdownComponent],
   selector: 'app-account-delete-deleted',
   templateUrl: './deleted.component.html',

src/app/account/email/email.component.ts

@@ -1,5 +1,5 @@
 import {AsyncPipe} from '@angular/common';
-import {Component, inject, OnInit} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject, OnInit} from '@angular/core';
 import {environment} from '@environment/environment';
 import {APIMeRequest, UserFields} from '@grpc/spec.pb';
 import {UsersClient} from '@grpc/spec.pbsc';
@@ -10,6 +10,7 @@ import {catchError, map} from 'rxjs/operators';
 import {ToastsService} from '../../toasts/toasts.service';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [AsyncPipe],
   selector: 'app-account-email',
   templateUrl: './email.component.html',

src/app/account/inbox-pictures/inbox-pictures.component.html

@@ -5,7 +5,7 @@ <h1 i18n>Unmoderated</h1>
   <div class="row">
     @for (picture of data.items || []; track picture.id) {
       <div class="col-12 cols-sm-6 col-md-6 col-lg-4">
-        <app-thumbnail [picture]="picture" [route]="['/picture', picture.identity]"></app-thumbnail>
+        <app-thumbnail [picture]="picture" [route]="['/picture', picture.identity]" />
       </div>
     }
   </div>

src/app/account/inbox-pictures/inbox-pictures.component.ts

@@ -1,5 +1,5 @@
 import {AsyncPipe} from '@angular/common';
-import {Component, inject, OnInit} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject, OnInit} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import {PictureFields, PictureListOptions, PicturesList, PicturesRequest, PictureStatus} from '@grpc/spec.pb';
 import {PicturesClient} from '@grpc/spec.pbsc';
@@ -14,6 +14,7 @@ import {ThumbnailComponent} from '../../thumbnail/thumbnail/thumbnail.component'
 import {ToastsService} from '../../toasts/toasts.service';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [PaginatorComponent, AsyncPipe, ThumbnailComponent],
   selector: 'app-account-inbox-pictures',
   templateUrl: './inbox-pictures.component.html',