refactor: update prettier to latest version

.prettierrc

@@ -4,5 +4,7 @@
   "useTabs": false,
   "tabWidth": 2,
   "semi": true,
-  "bracketSpacing": true
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "trailingComma": "none"
 }

package.json

@@ -101,7 +101,7 @@
     "lint-staged": "^8.1.0",
     "markdown-it": "^12.2.0",
     "nodemon": "^1.18.7",
-    "prettier": "^1.15.2",
+    "prettier": "^3.3.1",
     "shorthash": "^0.0.2",
     "ts-loader": "^5.3.1",
     "ts-node": "~8.3.0",

src/app/app.component.html

@@ -1,2 +1,4 @@
-<mat-progress-bar *ngIf="loading$ | async" mode="indeterminate"></mat-progress-bar>
+@if (loading$ | async) {
+<mat-progress-bar mode="indeterminate"></mat-progress-bar>
+}
 <router-outlet></router-outlet>

src/app/app.component.ts

@@ -3,15 +3,15 @@ import { NavigationEnd, NavigationStart, Router, RouterOutlet } from '@angular/r
 import { merge, Observable } from 'rxjs';
 import { filter, mapTo } from 'rxjs/operators';
 import { MatProgressBar } from '@angular/material/progress-bar';
-import { AsyncPipe, NgIf } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 
 @Component({
   standalone: true,
   selector: 'ac-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [RouterOutlet, AsyncPipe, NgIf, MatProgressBar]
+  imports: [RouterOutlet, AsyncPipe, MatProgressBar]
 })
 export class AppComponent implements OnInit {
   loading$: Observable<boolean>;

src/app/checklist/checklist-cta-bar/checklist-cta-bar.component.html

@@ -1,5 +1,6 @@
 <div class="cta-bar">
-  <div class="filters" *ngIf="filter">
+  @if (filter) {
+  <div class="filters">
     <button class="filter" mat-button (click)="filterChange.emit('ALL')" [class.active]="filter === 'ALL'">
       <mat-icon>assignment</mat-icon>
       ALL
@@ -13,8 +14,10 @@
       TODO
     </button>
   </div>
-  <div class="cta-buttons" *ngIf="showActionButtons">
-    <button mat-button (click)="checkAll.emit()"><mat-icon>done_all</mat-icon></button>
-    <button mat-button (click)="uncheckAll.emit()"><mat-icon>filter_none</mat-icon></button>
+  } @if (showActionButtons) {
+  <div class="cta-buttons">
+    <button mat-button (click)="checkAll.emit()" matTooltip="Check All"><mat-icon>done_all</mat-icon></button>
+    <button mat-button (click)="uncheckAll.emit()" matTooltip="Uncheck All"><mat-icon>filter_none</mat-icon></button>
   </div>
+  }
 </div>

src/app/checklist/checklist-cta-bar/checklist-cta-bar.component.ts

@@ -2,14 +2,14 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { ChecklistFilter } from '../models/checklist.model';
 import { MatIcon } from '@angular/material/icon';
 import { MatButton } from '@angular/material/button';
-import { NgIf } from '@angular/common';
+import { MatTooltip } from '@angular/material/tooltip';
 
 @Component({
   standalone: true,
   selector: 'ac-checklist-cta-bar',
   templateUrl: './checklist-cta-bar.component.html',
   styleUrls: ['./checklist-cta-bar.component.scss'],
-  imports: [NgIf, MatButton, MatIcon]
+  imports: [MatButton, MatIcon, MatTooltip]
 })
 export class ChecklistCtaBarComponent {
   @Input() filter: ChecklistFilter;

src/app/checklist/checklist-detail-view/checklist-detail-view.component.html

@@ -1,14 +1,13 @@
-<ng-container *ngIf="item$ | async as item">
-  <header>
-    <mat-checkbox color="primary" (click)="toggleItem(item)" [checked]="item.checked">Done</mat-checkbox>
-    <ac-checklist-favorite-button
-      (toggle)="toggleFavorite(item)"
-      [active]="item.favorite"
-    ></ac-checklist-favorite-button>
-    <ac-checklist-metadata [author]="item.author" [source]="item.source"></ac-checklist-metadata>
-  </header>
-  <ac-banner *ngIf="item.rework">
-    This practice includes outdated content currently under review. Contributions are welcome.
-  </ac-banner>
-  <main class="content" [innerHTML]="item.content"></main>
-</ng-container>
+@if (item(); as item) {
+<header>
+  <mat-checkbox color="primary" (click)="toggleItem(item)" [checked]="item.checked">Done</mat-checkbox>
+  <ac-checklist-favorite-button (toggle)="toggleFavorite(item)" [active]="item.favorite"></ac-checklist-favorite-button>
+  <ac-checklist-metadata [author]="item.author" [source]="item.source"></ac-checklist-metadata>
+</header>
+@if (item.rework) {
+<ac-banner>
+  This practice includes outdated content currently under review. Contributions are welcome.
+</ac-banner>
+}
+<main class="content" [innerHTML]="item.content"></main>
+}

src/app/checklist/checklist-detail-view/checklist-detail-view.component.ts

@@ -1,6 +1,5 @@
-import { Component, OnInit } from '@angular/core';
-import { select, Store } from '@ngrx/store';
-import { Observable } from 'rxjs';
+import { Component, inject } from '@angular/core';
+import { Store } from '@ngrx/store';
 import { ToggleFavorite, ToggleItem } from '../../projects/state/projects.actions';
 import { ApplicationState } from '../../state/app.state';
 import { ChecklistItem } from '../models/checklist.model';
@@ -9,23 +8,17 @@ import { BannerComponent } from '../../shared/banner/banner.component';
 import { ChecklistMetadataComponent } from '../checklist-item-metadata/checklist-metadata.component';
 import { ChecklistFavoriteButtonComponent } from '../checklist-favorite-button/checklist-favorite-button.component';
 import { MatCheckbox } from '@angular/material/checkbox';
-import { NgIf, AsyncPipe } from '@angular/common';
 
 @Component({
   standalone: true,
   selector: 'ac-checklist-detail-view',
   templateUrl: './checklist-detail-view.component.html',
   styleUrls: ['./checklist-detail-view.component.scss'],
-  imports: [NgIf, MatCheckbox, ChecklistFavoriteButtonComponent, ChecklistMetadataComponent, BannerComponent, AsyncPipe]
+  imports: [MatCheckbox, ChecklistFavoriteButtonComponent, ChecklistMetadataComponent, BannerComponent]
 })
-export class ChecklistDetailViewComponent implements OnInit {
-  item$: Observable<any>;
-
-  constructor(private store: Store<ApplicationState>) {}
-
-  ngOnInit() {
-    this.item$ = this.store.pipe(select(ChecklistSelectors.getSelectedItem));
-  }
+export class ChecklistDetailViewComponent {
+  private store = inject<Store<ApplicationState>>(Store);
+  item = this.store.selectSignal<any>(ChecklistSelectors.getSelectedItem);
 
   toggleItem(item: ChecklistItem) {
     this.store.dispatch(new ToggleItem(item));

src/app/checklist/checklist-favorites-view/checklist-favorites-view.component.html

@@ -1,27 +1,21 @@
 <header>Favorites</header>
 
-<ac-checklist-cta-bar [filter]="filter$ | async" [showActionButtons]="false" (filterChange)="setFilter($event)">
+<ac-checklist-cta-bar [filter]="filter()" [showActionButtons]="false" (filterChange)="setFilter($event)">
 </ac-checklist-cta-bar>
 
-<ng-container *ngIf="favorites$ | async as favorites">
-  <ng-container *ngIf="favorites.length; else noFavorites">
-    <ul class="category" *ngFor="let favorite of favorites; trackBy: trackByCategoryTitle">
-      <h4>{{ favorite.category.title }}</h4>
-      <ac-checklist-list>
-        <ac-checklist-list-item
-          *ngFor="let item of favorite.items; trackBy: trackById"
-          [item]="item"
-          (toggleItem)="toggleItem($event)"
-          (toggleFavorite)="toggleFavorite($event)"
-        >
-        </ac-checklist-list-item>
-      </ac-checklist-list>
-    </ul>
-  </ng-container>
-  <ng-template #noFavorites>
-    <div class="no-favorites">
-      <img src="assets/undraw_no_data.svg" alt="No Data" />
-      <span>You have no favorites yet... but they are only a few clicks away!</span>
-    </div>
-  </ng-template>
-</ng-container>
+@for (favorite of favorites(); track favorite.category.title) {
+<ul class="category">
+  <h4>{{ favorite.category.title }}</h4>
+  <ac-checklist-list>
+    @for (item of favorite.items; track item.id) {
+    <ac-checklist-list-item [item]="item" (toggleItem)="toggleItem($event)" (toggleFavorite)="toggleFavorite($event)">
+    </ac-checklist-list-item>
+    }
+  </ac-checklist-list>
+</ul>
+} @empty {
+<div class="no-favorites">
+  <img src="assets/undraw_no_data.svg" alt="No Data" />
+  <span>You have no favorites yet... but they are only a few clicks away!</span>
+</div>
+}

src/app/checklist/checklist-favorites-view/checklist-favorites-view.component.ts

@@ -1,33 +1,25 @@
-import { Component, OnInit } from '@angular/core';
-import { select, Store } from '@ngrx/store';
-import { Observable } from 'rxjs';
+import { Component, inject } from '@angular/core';
+import { Store } from '@ngrx/store';
 import { ToggleFavorite, ToggleItem } from '../../projects/state/projects.actions';
 import { ApplicationState } from '../../state/app.state';
 import { ChecklistFilter, ChecklistItem, Favorite } from '../models/checklist.model';
 import { SetFavoritesFilter } from '../state/checklist.actions';
 import { ChecklistSelectors } from '../state/checklist.selectors';
 import { ChecklistListItemComponent } from '../checklist-list/checklist-list-item.component';
 import { ChecklistListComponent } from '../checklist-list/checklist-list.component';
-import { NgIf, NgFor, AsyncPipe } from '@angular/common';
 import { ChecklistCtaBarComponent } from '../checklist-cta-bar/checklist-cta-bar.component';
 
 @Component({
   standalone: true,
   selector: 'ac-checklist-favorites-view',
   templateUrl: './checklist-favorites-view.component.html',
   styleUrls: ['./checklist-favorites-view.component.scss'],
-  imports: [ChecklistCtaBarComponent, NgIf, NgFor, ChecklistListComponent, ChecklistListItemComponent, AsyncPipe]
+  imports: [ChecklistCtaBarComponent, ChecklistListComponent, ChecklistListItemComponent]
 })
-export class ChecklistFavoritesViewComponent implements OnInit {
-  favorites$: Observable<Array<Favorite>>;
-  filter$: Observable<ChecklistFilter>;
-
-  constructor(private store: Store<ApplicationState>) {}
-
-  ngOnInit() {
-    this.favorites$ = this.store.pipe(select(ChecklistSelectors.getFilteredFavorites));
-    this.filter$ = this.store.pipe(select(ChecklistSelectors.getFavoritesFilter));
-  }
+export class ChecklistFavoritesViewComponent {
+  private store = inject<Store<ApplicationState>>(Store);
+  favorites = this.store.selectSignal(ChecklistSelectors.getFilteredFavorites);
+  filter = this.store.selectSignal(ChecklistSelectors.getFavoritesFilter);
 
   setFilter(filter: ChecklistFilter) {
     this.store.dispatch(new SetFavoritesFilter(filter));
@@ -40,12 +32,4 @@ export class ChecklistFavoritesViewComponent implements OnInit {
   toggleFavorite(item: ChecklistItem) {
     this.store.dispatch(new ToggleFavorite(item));
   }
-
-  trackByCategoryTitle(_, favorite: Favorite) {
-    return favorite.category.title;
-  }
-
-  trackById(_, item: ChecklistItem) {
-    return item.id;
-  }
 }

src/app/checklist/checklist-item-metadata/checklist-metadata.component.html

@@ -1,2 +1,5 @@
-<a class="info author" [href]="author.link" *ngIf="author">{{ author.name }}</a>
-<a class="info link" [href]="source" *ngIf="source">Source</a>
+@if (author) {
+<a class="info author" [href]="author.link">{{ author.name }}</a>
+} @if (source) {
+<a class="info link" [href]="source">Source</a>
+}

src/app/checklist/checklist-item-metadata/checklist-metadata.component.ts

@@ -1,13 +1,11 @@
 import { Component, Input } from '@angular/core';
 import { Author } from '../models/checklist.model';
-import { NgIf } from '@angular/common';
 
 @Component({
   standalone: true,
   selector: 'ac-checklist-metadata',
   templateUrl: './checklist-metadata.component.html',
-  styleUrls: ['./checklist-metadata.component.scss'],
-  imports: [NgIf]
+  styleUrls: ['./checklist-metadata.component.scss']
 })
 export class ChecklistMetadataComponent {
   @Input() author: Author;

src/app/checklist/checklist-list-view/checklist-list-view.component.html

@@ -1,18 +1,15 @@
 <ac-checklist-cta-bar
-  [filter]="filter$ | async"
-  [showActionButtons]="showActionButtons$ | async"
+  [filter]="filter()"
+  [showActionButtons]="showActionButtons()"
   (filterChange)="setFilter($event)"
   (checkAll)="checkAllItems()"
   (uncheckAll)="uncheckAllItems()"
 >
 </ac-checklist-cta-bar>
 
 <ac-checklist-list class="checklist-items">
-  <ac-checklist-list-item
-    *ngFor="let item of items$ | async; trackBy: trackById"
-    [item]="item"
-    (toggleItem)="toggleItem($event)"
-    (toggleFavorite)="toggleFavorite($event)"
-  >
+  @for (item of items(); track item.id) {
+  <ac-checklist-list-item [item]="item" (toggleItem)="toggleItem($event)" (toggleFavorite)="toggleFavorite($event)">
   </ac-checklist-list-item>
+  }
 </ac-checklist-list>

src/app/checklist/checklist-list-view/checklist-list-view.component.ts

@@ -1,15 +1,12 @@
-import { Component, OnInit } from '@angular/core';
-import { select, Store } from '@ngrx/store';
-import { combineLatest, Observable } from 'rxjs';
+import { Component, Signal, computed, inject } from '@angular/core';
+import { Store } from '@ngrx/store';
 import { CheckAll, ToggleFavorite, ToggleItem, UncheckAll } from '../../projects/state/projects.actions';
 import { BreakpointService } from '../../shared/breakpoint.service';
-import { selectOnce } from '../../shared/operators';
 import { ApplicationState } from '../../state/app.state';
 import { CategoryEntity, ChecklistFilter, ChecklistItem } from '../models/checklist.model';
 import { SetCategoriesFilter } from '../state/checklist.actions';
 import { ChecklistSelectors } from '../state/checklist.selectors';
 import { ChecklistListItemComponent } from '../checklist-list/checklist-list-item.component';
-import { NgFor, AsyncPipe } from '@angular/common';
 import { ChecklistListComponent } from '../checklist-list/checklist-list.component';
 import { ChecklistCtaBarComponent } from '../checklist-cta-bar/checklist-cta-bar.component';
 
@@ -18,22 +15,14 @@ import { ChecklistCtaBarComponent } from '../checklist-cta-bar/checklist-cta-bar
   selector: 'ac-list-view',
   templateUrl: './checklist-list-view.component.html',
   styleUrls: ['./checklist-list-view.component.scss'],
-  imports: [ChecklistCtaBarComponent, ChecklistListComponent, NgFor, ChecklistListItemComponent, AsyncPipe]
+  imports: [ChecklistCtaBarComponent, ChecklistListComponent, ChecklistListItemComponent]
 })
-export class ListViewComponent implements OnInit {
-  items$: Observable<any>;
-  filter$: Observable<ChecklistFilter>;
-  showActionButtons$: Observable<boolean>;
-
-  constructor(private store: Store<ApplicationState>, private breakpointService: BreakpointService) {}
-
-  ngOnInit() {
-    this.items$ = this.store.pipe(select(ChecklistSelectors.getItemsFromSelectedCategory));
-    this.filter$ = this.store.pipe(select(ChecklistSelectors.getCategoriesFilter));
-
-    const { medium$, desktop$ } = this.breakpointService.getAllBreakpoints();
-    this.showActionButtons$ = combineLatest(medium$, desktop$, (medium, desktop) => medium || desktop);
-  }
+export class ListViewComponent {
+  private store = inject<Store<ApplicationState>>(Store);
+  private breakpointService = inject(BreakpointService);
+  items = this.store.selectSignal(ChecklistSelectors.getItemsFromSelectedCategory);
+  filter = this.store.selectSignal(ChecklistSelectors.getCategoriesFilter);
+  showActionButtons = computed(() => this.breakpointService.medium() || this.breakpointService.desktop());
 
   toggleItem(item: ChecklistItem) {
     this.store.dispatch(new ToggleItem(item));
@@ -44,22 +33,20 @@ export class ListViewComponent implements OnInit {
   }
 
   checkAllItems() {
-    this.getSelectedCategory().subscribe(category => this.store.dispatch(new CheckAll(category)));
+    const categories = this.getSelectedCategory();
+    this.store.dispatch(new CheckAll(categories));
   }
 
   uncheckAllItems() {
-    this.getSelectedCategory().subscribe(category => this.store.dispatch(new UncheckAll(category)));
+    const categories = this.getSelectedCategory();
+    this.store.dispatch(new UncheckAll(categories));
   }
 
   toggleFavorite(item: ChecklistItem) {
     this.store.dispatch(new ToggleFavorite(item));
   }
 
-  trackById(_, item: ChecklistItem) {
-    return item.id;
-  }
-
-  private getSelectedCategory(): Observable<CategoryEntity> {
-    return this.store.pipe(selectOnce(ChecklistSelectors.getSelectedCategory));
+  private get getSelectedCategory(): Signal<CategoryEntity> {
+    return this.store.selectSignal(ChecklistSelectors.getSelectedCategory);
   }
 }

src/app/checklist/checklist-list/checklist-list-item.component.html

@@ -1,6 +1,8 @@
 <mat-checkbox color="primary" (click)="toggleItem.emit(item)" [checked]="item.checked"></mat-checkbox>
 <a [class.done]="item.checked" [routerLink]="['../../checklist', item.category, item.id]">{{ item.title }}</a>
-<ac-chip *ngIf="item.rework">needs rework</ac-chip>
+@if (item.rework) {
+<ac-chip>needs rework</ac-chip>
+}
 <ac-checklist-favorite-button
   [active]="item.favorite"
   (toggle)="toggleFavorite.emit(item)"

src/app/checklist/checklist-list/checklist-list-item.component.ts

@@ -2,7 +2,6 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { ChecklistItem } from '../models/checklist.model';
 import { ChecklistFavoriteButtonComponent } from '../checklist-favorite-button/checklist-favorite-button.component';
 import { ChipComponent } from '../../shared/chip/chip.component';
-import { NgIf } from '@angular/common';
 import { RouterLink } from '@angular/router';
 import { MatCheckbox } from '@angular/material/checkbox';
 
@@ -11,7 +10,7 @@ import { MatCheckbox } from '@angular/material/checkbox';
   selector: 'ac-checklist-list-item',
   templateUrl: './checklist-list-item.component.html',
   styleUrls: ['./checklist-list-item.component.scss'],
-  imports: [MatCheckbox, RouterLink, NgIf, ChipComponent, ChecklistFavoriteButtonComponent]
+  imports: [MatCheckbox, RouterLink, ChipComponent, ChecklistFavoriteButtonComponent]
 })
 export class ChecklistListItemComponent {
   @Input() item: ChecklistItem;