refactor: add favorite-button as component

src/app/stalker/favorites-button/favorites-button.component.html

@@ -0,0 +1,16 @@
+<button
+    *ngIf="!isFavorite; else removeFromFavoritesButton"
+    mat-flat-button
+    color="accent"
+    (click)="addToFavorites()"
+>
+    <mat-icon>star_outline</mat-icon>
+    {{ 'PORTALS.ADD_TO_FAVORITES' | translate }}
+</button>
+
+<ng-template #removeFromFavoritesButton>
+    <button mat-stroked-button color="accent" (click)="removeFromFavorites()">
+        <mat-icon>star</mat-icon>
+        {{ 'PORTALS.REMOVE_FROM_FAVORITES' | translate }}
+    </button>
+</ng-template>

src/app/stalker/favorites-button/favorites-button.component.ts

@@ -0,0 +1,73 @@
+import { NgIf } from '@angular/common';
+import { Component, OnInit, inject, input } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { ActivatedRoute } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { PlaylistsService } from '../../services/playlists.service';
+
+@Component({
+    standalone: true,
+    selector: 'app-favorites-button',
+    templateUrl: './favorites-button.component.html',
+    imports: [MatButtonModule, MatIconModule, NgIf, TranslateModule],
+})
+export class FavoritesButtonComponent implements OnInit {
+    private playlistService = inject(PlaylistsService);
+    private route = inject(ActivatedRoute);
+    private snackBar = inject(MatSnackBar);
+
+    portalId = this.route.snapshot.paramMap.get('id');
+    serialMeta = input.required<{
+        movie_id: string;
+        name: string;
+        cover: string;
+    }>();
+
+    isFavorite = false;
+
+    ngOnInit() {
+        this.checkFavoriteStatus();
+    }
+
+    checkFavoriteStatus() {
+        this.playlistService
+            .getPortalFavorites(this.portalId)
+            .subscribe((favorites) => {
+                this.isFavorite = favorites.some(
+                    (i) => (i as any).movie_id === this.serialMeta().movie_id
+                );
+            });
+    }
+
+    toggleFavorites(isFav: boolean) {
+        if (isFav) this.removeFromFavorites();
+        else this.addToFavorites();
+    }
+
+    removeFromFavorites() {
+        this.playlistService
+            .removeFromPortalFavorites(
+                this.portalId,
+                this.serialMeta().movie_id
+            )
+            .subscribe(() => {
+                this.snackBar.open('Removed from favorites', null, {
+                    duration: 1000,
+                });
+                this.checkFavoriteStatus();
+            });
+    }
+
+    addToFavorites() {
+        this.playlistService
+            .addPortalFavorite(this.portalId, this.serialMeta())
+            .subscribe(() => {
+                this.snackBar.open('Added to favorites', null, {
+                    duration: 1000,
+                });
+                this.checkFavoriteStatus();
+            });
+    }
+}