Map info page

.github/workflows/test.yml

@@ -39,6 +39,7 @@ jobs:
           ref: ${{ github.event.pull_request.head.ref }}
           repository: ${{ github.event.pull_request.head.repo.full_name }}
           fetch-depth: 0
+          submodules: 'true'
       - uses: actions/cache@v3
         with:
           path: node_modules

apps/backend/src/app/dto/map/map-submission-placeholder.dto.ts

@@ -1,7 +1,7 @@
 import { ApiProperty, PickType } from '@nestjs/swagger';
 import { MapSubmissionPlaceholder } from '@momentum/constants';
 import { JsonValue } from 'type-fest';
-import { IsString, MaxLength } from 'class-validator';
+import { IsString, MaxLength, MinLength } from 'class-validator';
 import { MapCreditDto } from './map-credit.dto';
 
 export class MapSubmissionPlaceholderDto
@@ -12,6 +12,7 @@ export class MapSubmissionPlaceholderDto
 
   @ApiProperty()
   @IsString()
+  @MinLength(3)
   @MaxLength(32)
   readonly alias: string;
 }

apps/backend/src/app/modules/map-review/map-review.service.ts

@@ -336,6 +336,10 @@ export class MapReviewService {
       throw new ForbiddenException();
     }
 
+    if (review.resolved && body.needsResolving === false) {
+      throw new BadRequestException();
+    }
+
     return DtoFactory(
       MapReviewDto,
       await this.db.mapReview.update({

apps/frontend/project.json

@@ -46,7 +46,6 @@
         "development": {
           "buildOptimizer": false,
           "optimization": false,
-          "vendorChunk": true,
           "extractLicenses": false,
           "sourceMap": true,
           "namedChunks": true

apps/frontend/src/app/app.component.css

@@ -10,31 +10,50 @@
   position: fixed;
   z-index: -10;
 
-  background: url('/assets/images/BGDarkGray.png') no-repeat center center fixed;
-  background-size: cover;
-}
+  & * {
+    position: absolute;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: cover;
+    scrollbar-gutter: stable;
+  }
+
+  & .default {
+    background-image: url('/assets/images/BGDarkGray.png');
+    z-index: 0;
+  }
 
-:root {
-  /* These vars need to be global so are set in styles.css.
-     layout.service.ts handles flipping between the underlying vars. */
-  --sidenav-width: var(--sidenav-width-wide);
+  & .custom {
+    z-index: 1;
+
+    filter: blur(4px) contrast(0.7) brightness(0.7);
+    transition-property: opacity;
+    transition-duration: 0.2s;
+    transition-timing-function: ease-in-out;
+  }
 }
 
 .chungus {
-  height: 100%;
-  width: 100%;
+  height: 100vh;
+  width: 100vw;
 
   display: grid;
   grid-template-areas:
     'head head'
     'side main';
   grid-template-rows: 5rem 1fr;
-  grid-template-columns: var(--sidenav-width) 1fr;
+  /* Remember, 1fr is equiv to minmax(auto, 1fr), so anything that can't fit on
+     main will expand out to the right. Looks bad if this happens, but site is
+     still usable, and better that clip/squishing etc. */
+  grid-template-columns: auto 1fr;
 }
 
 m-header {
   grid-area: head;
-  position: fixed;
 
   display: block;
   height: 5rem;
@@ -49,20 +68,22 @@ m-header {
 
 m-sidenav {
   grid-area: side;
-  position: sticky;
   display: block;
-
-  height: 100%;
 }
 
 main {
   grid-area: main;
+  display: block;
 
-  width: 100%;
-  max-width: 1800px;
-  margin: 3rem auto;
+  scroll-behavior: smooth;
+  overflow-y: scroll;
 
+  padding: 48px;
+}
+
+.scroll-container {
   display: flex;
   flex-direction: column;
-  padding: 0 64px;
+  margin: 0 auto;
+  max-width: 1800px;
 }

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

@@ -1,9 +1,24 @@
 <p-toast />
-<div class="bg-image"></div>
+<p-confirmDialog />
+<div class="bg-image">
+  <!-- Two backgrounds are needed so we can smoothly transition between between
+       them - some browsers support it (not FF), but transitioning
+       background-image is not officially in the W3 spec. -->
+  <div
+    class="custom"
+    [ngStyle]="{
+      'background-image': customBackgroundImage,
+      opacity: customBackgroundOpacity
+    }"
+  ></div>
+  <div class="default"></div>
+</div>
 <div class="chungus">
   <m-header />
   <m-sidenav />
   <main>
-    <router-outlet />
+    <div class="scroll-container">
+      <router-outlet />
+    </div>
   </main>
 </div>

apps/frontend/src/app/app.component.ts

@@ -1,12 +1,12 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { ToastModule } from 'primeng/toast';
-import { takeUntil } from 'rxjs/operators';
-import { Subject } from 'rxjs';
 import { NotificationsService } from './services/notifications.service';
 import { IconComponent } from './icons';
 import { HeaderComponent, SidenavComponent } from './components';
 import { LayoutService, SidenavState } from './services/layout.service';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
+import { NgStyle } from '@angular/common';
 
 @Component({
   selector: 'm-app',
@@ -18,22 +18,40 @@ import { LayoutService, SidenavState } from './services/layout.service';
     IconComponent,
     RouterOutlet,
     SidenavComponent,
-    ToastModule
+    ToastModule,
+    ConfirmDialogModule,
+    NgStyle
   ]
 })
 export class AppComponent {
-  protected state: SidenavState;
-
-  private readonly ngUnsub = new Subject<void>();
+  protected sideNavState: SidenavState;
+  protected customBackgroundImage = '';
+  protected customBackgroundOpacity = 0;
 
   constructor(
     private readonly notificationService: NotificationsService,
     private readonly layoutService: LayoutService
   ) {
     this.notificationService.inject();
 
-    this.layoutService.sidenavToggled
-      .pipe(takeUntil(this.ngUnsub))
-      .subscribe((state) => (this.state = state));
+    this.layoutService.sidenavToggled.subscribe(
+      (state) => (this.sideNavState = state)
+    );
+
+    this.layoutService.backgroundChange.subscribe((url: string | null) => {
+      if (url != null) {
+        this.customBackgroundImage = `url(${url})`;
+        if (this.layoutService.backgroundEnable.value) {
+          this.customBackgroundOpacity = 1;
+        }
+      } else {
+        // Don't unset the custom background, so we get a smooth transition
+        this.customBackgroundOpacity = 0;
+      }
+    });
+
+    this.layoutService.backgroundEnable.subscribe((enable: boolean) => {
+      this.customBackgroundOpacity = enable ? 1 : 0;
+    });
   }
 }

apps/frontend/src/app/app.routes.ts

@@ -32,11 +32,6 @@ export const APP_ROUTES: Route[] = [
     canActivate: [AuthGuard, RoleGuard],
     data: { roles: [Role.ADMIN, Role.MODERATOR] }
   },
-  {
-    path: 'runs',
-    loadChildren: () => import('./pages/runs/routes'),
-    canActivate: [AuthGuard]
-  },
   {
     path: '**',
     component: NotFoundComponent

apps/frontend/src/app/components/alert/alert.component.ts

@@ -0,0 +1,30 @@
+import { Component, HostBinding } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IconComponent } from '../../icons';
+
+@Component({
+  selector: 'm-alert',
+  standalone: true,
+  imports: [CommonModule, IconComponent],
+  template: ` <div class="prose max-w-none">
+      <ng-content />
+    </div>
+    <button
+      type="button"
+      class="absolute right-0 top-0 m-4 opacity-75 transition-opacity hover:opacity-100"
+      (click)="dismiss()"
+    >
+      <m-icon icon="close-thick" />
+    </button>`
+})
+export class AlertComponent {
+  @HostBinding('style.display')
+  protected display = 'block';
+
+  @HostBinding('class')
+  private readonly class = 'm-alert';
+
+  dismiss() {
+    this.display = 'none';
+  }
+}

apps/frontend/src/app/components/avatar/avatar.component.ts

@@ -1,13 +1,17 @@
 import { Component, Input } from '@angular/core';
 import { STEAM_MISSING_AVATAR_URL } from '@momentum/constants';
 
+/**
+ * Simple user avatar component.
+ * This has no height by default, you need to give it a specific value via
+ * CSS/Tailwind.
+ */
 @Component({
   selector: 'm-avatar',
   standalone: true,
   template: `
     <img [src]="url" class="aspect-square h-full rounded shadow-md" />
-  `,
-  styles: ':host { height: 1.5rem; }'
+  `
 })
 export class AvatarComponent {
   @Input() url: string = STEAM_MISSING_AVATAR_URL;

apps/frontend/src/app/components/card/card-body.component.ts

@@ -0,0 +1,11 @@
+import { Component, HostBinding } from '@angular/core';
+
+@Component({
+  selector: 'm-card-body',
+  standalone: true,
+  styles: [':host {display: block;}'],
+  template: '<ng-content></ng-content>'
+})
+export class CardBodyComponent {
+  @HostBinding('class') class = 'm-card';
+}

apps/frontend/src/app/components/card/card-header.component.ts

@@ -9,7 +9,7 @@ import { NgClass } from '@angular/common';
     <div class="flex items-end gap-2 mb-2" [ngClass]="{ 'items-end': !!title }">
       @if (title) {
         <p
-          class="flex-grow font-display font-bold opacity-80 leading-none ml-2"
+          class="flex-grow m-card-title"
           [style]="'font-size: ' + titleSize + 'rem;'"
         >
           {{ title }}

apps/frontend/src/app/components/card/card.component.ts

@@ -1,18 +1,19 @@
 import { Component, Input } from '@angular/core';
 import { NgClass } from '@angular/common';
 import { CardHeaderComponent } from './card-header.component';
+import { CardBodyComponent } from './card-body.component';
 
 @Component({
   selector: 'm-card',
   standalone: true,
-  imports: [CardHeaderComponent, NgClass],
+  imports: [CardHeaderComponent, NgClass, CardBodyComponent],
   template: `
     <m-card-header [title]="title" [titleSize]="titleSize">
       <ng-content select="[header]"></ng-content>
     </m-card-header>
-    <div class="m-card" [ngClass]="cardClass">
+    <m-card-body [ngClass]="cardClass">
       <ng-content></ng-content>
-    </div>
+    </m-card-body>
   `
 })
 export class CardComponent {

apps/frontend/src/app/components/file-upload/abstract-file-upload.component.ts

@@ -1,6 +1,7 @@
 import {
   Directive,
   ElementRef,
+  HostBinding,
   HostListener,
   Input,
   ViewChild
@@ -32,7 +33,16 @@ export abstract class AbstractFileUploadComponent<T extends File | File[]>
    * Extensions that file select dialog will accept
    * (use comma separation for multiple)
    */
-  @Input({ required: true }) accept = '';
+  @Input({ required: true }) acceptExtensions = '';
+
+  /**
+   * Mimetypes that the addFromClipboard feature will accept.
+   *
+   * 'Add from clipboard' button will be disabled if this is not provided.
+   */
+  @Input() acceptMimeTypes: string[];
+
+  @Input() enableClipboard = false;
 
   /**
    * Name of the file type to use in "select a <type> string"
@@ -54,6 +64,16 @@ export abstract class AbstractFileUploadComponent<T extends File | File[]>
    */
   @Input() icon: Icon = 'file-upload';
 
+  @HostBinding('class.dragging')
+  private get isDragging() {
+    return this.dragOverCounter > 0;
+  }
+
+  @HostBinding('class.hasSelection')
+  get getHasSelection() {
+    return this.hasSelection();
+  }
+
   @ViewChild('fileInput') private input: ElementRef<HTMLInputElement>;
 
   abstract onDrop(event: DragEvent): void;
@@ -92,6 +112,8 @@ export abstract class AbstractFileUploadComponent<T extends File | File[]>
     this.dragOverCounter--;
   }
 
+  abstract addFromClipboard(event: Event): Promise<void>;
+
   removeDragData(event: DragEvent) {
     this.dragOverCounter = 0;