feat(front): Better profile page

apps/frontend/src/app/components/activity/activity.component.html

@@ -1,4 +1,4 @@
-<m-card [title]="headerTitle">
+<m-card [title]="headerTitle" class="h-full">
   <ng-container header>
     <span class="mr-2">Filter:</span>
     <p-dropdown

apps/frontend/src/app/components/map-forms/map-credits-selection/map-credits-selection.component.ts

@@ -16,7 +16,7 @@ import {
 import { Enum } from '@momentum/enum';
 import { KeyValuePipe } from '@angular/common';
 import { UserSearchComponent } from '../../search/user-search.component';
-import { GroupedMapCredits } from '../../../util';
+import { GroupedEditableMapCredits } from '../../../util';
 import { SharedModule } from '../../../shared.module';
 import { TooltipDirective } from '../../../directives/tooltip.directive';
 
@@ -40,7 +40,7 @@ import { TooltipDirective } from '../../../directives/tooltip.directive';
   ]
 })
 export class MapCreditsSelectionComponent implements ControlValueAccessor {
-  protected value: GroupedMapCredits;
+  protected value: GroupedEditableMapCredits;
 
   protected readonly MapCreditType = MapCreditType;
   protected readonly MapCreditNames = MapCreditNames;
@@ -121,11 +121,11 @@ export class MapCreditsSelectionComponent implements ControlValueAccessor {
     this.onChange(this.value);
   }
 
-  writeValue(value: GroupedMapCredits | null): void {
-    this.value = value ?? new GroupedMapCredits();
+  writeValue(value: GroupedEditableMapCredits | null): void {
+    this.value = value ?? new GroupedEditableMapCredits();
   }
 
-  onChange: (value: GroupedMapCredits) => void = () => void 0;
+  onChange: (value: GroupedEditableMapCredits) => void = () => void 0;
   registerOnChange(fn: () => void): void {
     this.onChange = fn;
   }

apps/frontend/src/app/components/report/report-button/report-button.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, HostBinding, HostListener, Input } from '@angular/core';
 import { ReportType } from '@momentum/constants';
 import { DialogService } from 'primeng/dynamicdialog';
 import { CreateReportDialogComponent } from '../create-report-dialog/create-report-dialog.component';
@@ -8,18 +8,19 @@ import { IconComponent } from '../../../icons';
   selector: 'm-report-button',
   standalone: true,
   imports: [IconComponent],
-  template: `
-    <button class="btn btn-red" (click)="onClick()">
-      <m-icon icon="flag-outline"></m-icon>
-    </button>
-  `
+  template: '<m-icon icon="flag-outline"/>'
 })
 export class ReportButtonComponent {
   @Input() reportType: ReportType;
   @Input() reportData: string;
 
   constructor(private readonly dialogService: DialogService) {}
 
+  @HostBinding('class') get classes() {
+    return 'btn btn-red';
+  }
+
+  @HostListener('click')
   onClick() {
     this.dialogService.open(CreateReportDialogComponent, {
       header: 'Submit Report',

apps/frontend/src/app/icons/packs/material-design-icons.icons.ts

@@ -80,5 +80,8 @@ export {
   mdiEye,
   mdiEyeClosed,
   mdiEyeOff,
-  mdiNumericOff
+  mdiNumericOff,
+  mdiHeart,
+  mdiHeartOutline,
+  mdiHeartBroken
 } from '@mdi/js';

apps/frontend/src/app/pages/maps/map-edit/map-edit.component.ts

@@ -43,7 +43,7 @@ import {
 import { MessageService } from 'primeng/api';
 import { DialogService } from 'primeng/dynamicdialog';
 import { SharedModule } from '../../../shared.module';
-import { FormUtils, GroupedMapCredits } from '../../../util';
+import { FormUtils, GroupedEditableMapCredits } from '../../../util';
 import {
   BackendValidators,
   creditsValidator,
@@ -303,7 +303,7 @@ export class MapEditComponent implements OnInit, ConfirmDeactivate {
     this.imageSelection.onThumbnailChanged();
 
     this.credits.setValue(
-      new GroupedMapCredits(
+      new GroupedEditableMapCredits(
         this.map.credits,
         this.map?.submission?.placeholders
       )
@@ -364,7 +364,10 @@ export class MapEditComponent implements OnInit, ConfirmDeactivate {
     const hasImages = this.images.dirty && this.haveImagesActuallyChanged();
     const hasCredits =
       this.credits.dirty &&
-      !deepEquals(this.credits.value, new GroupedMapCredits(this.map.credits));
+      !deepEquals(
+        this.credits.value,
+        new GroupedEditableMapCredits(this.map.credits)
+      );
 
     if (isEmpty(body) && !hasImages && !hasCredits) return;
 
@@ -675,7 +678,9 @@ export class MapEditComponent implements OnInit, ConfirmDeactivate {
   }
 
   get credits() {
-    return this.mainForm.get('credits') as FormControl<GroupedMapCredits>;
+    return this.mainForm.get(
+      'credits'
+    ) as FormControl<GroupedEditableMapCredits>;
   }
 
   get suggestions() {

apps/frontend/src/app/pages/maps/map-info/map-info.component.ts

@@ -20,7 +20,10 @@ import { SharedModule } from '../../../shared.module';
 import { MapLeaderboardComponent } from './map-leaderboard/map-leaderboard.component';
 import { MapNotifyEditComponent } from './map-info-notify-edit/map-info-notify-edit.component';
 import { GalleriaModule } from 'primeng/galleria';
-import { GroupedMapCredits, GroupedMapLeaderboards } from '../../../util';
+import {
+  GroupedEditableMapCredits,
+  GroupedMapLeaderboards
+} from '../../../util';
 import { Enum } from '@momentum/enum';
 import { MapSubmissionComponent } from './map-submission/map-submission.component';
 import { extractPrefixFromMapName } from '@momentum/util-fn';
@@ -83,7 +86,7 @@ export class MapInfoComponent implements OnInit {
   name: string;
   prefix: string | null;
   leaderboards: GroupedMapLeaderboards;
-  credits: GroupedMapCredits;
+  credits: GroupedEditableMapCredits;
   images: Array<{ full: string; thumb: string } | { youtube: true }>;
   youtubeID?: SafeUrl;
   youtubeThumbnail?: SafeUrl;
@@ -154,7 +157,7 @@ export class MapInfoComponent implements OnInit {
     const [name, prefix] = extractPrefixFromMapName(map.name);
     this.name = name;
     this.prefix = prefix;
-    this.credits = new GroupedMapCredits(
+    this.credits = new GroupedEditableMapCredits(
       this.map.credits ?? [],
       this.map.submission?.placeholders ?? []
     );

apps/frontend/src/app/pages/maps/submission-form/map-submission-form.component.ts

@@ -48,7 +48,7 @@ import {
 } from '../../../validators';
 import { SharedModule } from '../../../shared.module';
 import { SuggestionType } from '@momentum/formats/zone';
-import { GroupedMapCredits, FormUtils } from '../../../util';
+import { GroupedEditableMapCredits, FormUtils } from '../../../util';
 import { lastValueFrom } from 'rxjs';
 import { ConfirmDeactivate } from '../../../guards/component-can-deactivate.guard';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -459,7 +459,7 @@ export class MapSubmissionFormComponent implements OnInit, ConfirmDeactivate {
   }
 
   get credits() {
-    return this.form.get('credits') as FormControl<GroupedMapCredits>;
+    return this.form.get('credits') as FormControl<GroupedEditableMapCredits>;
   }
 
   get suggestions() {

apps/frontend/src/app/pages/profile/profile-edit/profile-edit.component.ts

@@ -2,8 +2,6 @@ import { Component, DestroyRef, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { switchMap, take, tap } from 'rxjs/operators';
-import { EMPTY, merge, Subject } from 'rxjs';
 import {
   AdminUpdateUser,
   MAX_BIO_LENGTH,