Compact event listing

src/app/components/items/compact-event.component.ts

@@ -0,0 +1,111 @@
+import {Component, Input} from '@angular/core';
+import {DateComponent} from "../ui/info/date.component";
+import {UserLinkComponent} from "../ui/text/links/user-link.component";
+import {ActivityEvent} from "../../api/types/activity/activity-event";
+import {User} from "../../api/types/users/user";
+import {EventType} from "../../api/types/activity/event-type";
+import {FaIconComponent} from "@fortawesome/angular-fontawesome";
+import {
+  faCertificate,
+  faCircleArrowUp, faComment, faCommentSlash,
+  faHeart,
+  faHeartBroken, faImages, faList, faListAlt,
+  faPlay,
+  faPlayCircle, faPlusCircle, faTag,
+  faUpDown
+} from "@fortawesome/free-solid-svg-icons";
+
+@Component({
+  selector: 'app-compact-event',
+  standalone: true,
+  imports: [
+    DateComponent,
+    UserLinkComponent,
+    FaIconComponent
+  ],
+  template: `
+    <app-user-link [user]="submittingUser" class="font-bold"></app-user-link>
+    <span class="ml-1">
+    @switch (event.eventType) {
+      @case (EventType.Level_Upload) {
+        <fa-icon [icon]="faCircleArrowUp"></fa-icon>
+        uploaded this level
+      }
+      @case (EventType.Level_Favourite) {
+        <fa-icon [icon]="faHeart"></fa-icon>
+        hearted this level
+      }
+      @case (EventType.Level_Unfavourite) {
+        <fa-icon [icon]="faHeartBroken"></fa-icon>
+        unhearted this level
+      }
+      @case (EventType.Level_Play) {
+        <fa-icon [icon]="faPlayCircle"></fa-icon>
+        played this level
+      }
+      @case (EventType.Level_Rate) {
+        <fa-icon [icon]="faUpDown"></fa-icon>
+        rated this level
+      }
+      @case (EventType.Level_Tag) {
+        <fa-icon [icon]="faTag"></fa-icon>
+        tagged this level
+      }
+      @case (EventType.PostLevelComment) {
+        <fa-icon [icon]="faComment"></fa-icon>
+        posted a comment on this level
+      }
+      @case (EventType.DeleteLevelComment) {
+        <fa-icon [icon]="faCommentSlash"></fa-icon>
+        deleted their comment on this level
+      }
+      @case (EventType.Photo_Upload) {
+        <fa-icon [icon]="faImages"></fa-icon>
+        uploaded a photo on this level
+      }
+      @case (EventType.Level_TeamPick) {
+        <fa-icon [icon]="faCertificate"></fa-icon>
+        team picked this level
+      }
+      @case (EventType.Level_Rate) {
+        <fa-icon [icon]="faUpDown"></fa-icon>
+        rated this level
+      }
+      @case (EventType.Level_Review) {
+        <fa-icon [icon]="faComment"></fa-icon>
+        reviewed this level
+      }
+      @case (EventType.Playlist_AddLevel) {
+        <fa-icon [icon]="faPlusCircle"></fa-icon>
+        added this level to a playlist
+      }
+      @case (EventType.SubmittedScore_Create) {
+        <fa-icon [icon]="faListAlt"></fa-icon>
+        set a score on this level
+      }
+    }
+    </span>
+
+    <span class="text-gentle italic">
+        <app-date [date]="event.occurredAt" [ticking]="true"></app-date>
+    </span>
+  `
+})
+export class CompactEventComponent {
+  @Input({required: true}) event: ActivityEvent = null!;
+  @Input({required: true}) submittingUser: User = null!;
+
+  protected readonly EventType = EventType;
+  protected readonly faCircleArrowUp = faCircleArrowUp;
+  protected readonly faHeart = faHeart;
+  protected readonly faHeartBroken = faHeartBroken;
+  protected readonly faPlayCircle = faPlayCircle;
+  protected readonly faUpDown = faUpDown;
+  protected readonly faTag = faTag;
+  protected readonly faComment = faComment;
+  protected readonly faCommentSlash = faCommentSlash;
+  protected readonly faImages = faImages;
+  protected readonly faCertificate = faCertificate;
+  protected readonly faPlusCircle = faPlusCircle;
+  protected readonly faListAlt = faListAlt;
+}

src/app/components/items/event-page.component.ts

@@ -7,18 +7,22 @@ import {Level} from "../../api/types/levels/level";
 import {Score} from "../../api/types/levels/score";
 import {Photo} from "../../api/types/photos/photo";
 import {ContainerComponent} from "../ui/container.component";
+import {CompactEventComponent} from "./compact-event.component";
 
 @Component({
   selector: 'app-event-page',
   standalone: true,
   imports: [
     EventComponent,
-    ContainerComponent
+    ContainerComponent,
+    CompactEventComponent
   ],
   template: `
     <div class="flex flex-col gap-y-2.5">
       @for (event of page.events; track event.eventId) {
-        @if(container) {
+        @if(compact) {
+          <app-compact-event [event]="event" [submittingUser]="user(event.userId)!"></app-compact-event>
+        } @else {
           <app-container>
             <app-event [event]="event" [submittingUser]="user(event.userId)!"
                        [user]="user(event.storedObjectId)"
@@ -27,21 +31,14 @@ import {ContainerComponent} from "../ui/container.component";
                        [photo]="photo(event.storedSequentialId)">
             </app-event>
           </app-container>
-        } @else {
-          <app-event [event]="event" [submittingUser]="user(event.userId)!"
-                     [user]="user(event.storedObjectId)"
-                     [level]="level(event.storedSequentialId)"
-                     [score]="score(event.storedObjectId)"
-                     [photo]="photo(event.storedSequentialId)">
-          </app-event>
         }
       }
     </div>
     `
 })
 export class EventPageComponent {
   @Input({required: true}) page: ActivityPage = undefined!;
-  @Input() container: boolean = true;
+  @Input() compact: boolean = false;
 
   user(id: string | undefined): User | undefined {
     if(!id) return undefined;

src/app/components/items/event.component.ts

@@ -101,7 +101,7 @@ import {UserPreviewComponent} from "./user-preview.component";
 
     <span class="text-gentle italic">
         <app-date [date]="event.occurredAt" [ticking]="true"></app-date>
-      </span>
+    </span>
 
     <app-dark-container class="block mt-1.5">
       <div class="flex gap-x-5">

src/app/pages/level/level.component.html

@@ -33,7 +33,7 @@
           </app-pane-title>
           <app-divider></app-divider>
           @if(activityPage) {
-              <app-event-page [page]="activityPage" [container]="false"></app-event-page>
+              <app-event-page [page]="activityPage" [compact]="true"></app-event-page>
           }
       </app-container>
   </app-two-pane-layout>

src/app/pages/level/level.component.ts

@@ -66,7 +66,7 @@ export class LevelComponent {
     route.params.subscribe(params => {
       const id: number = +params['id'];
       this.client.getLevelById(id).subscribe(data => this.setDataFromLevel(data));
-      this.client.getActivityPageForLevel(id, 0, 5).subscribe(page => this.activityPage = page);
+      this.client.getActivityPageForLevel(id, 0, 20).subscribe(page => this.activityPage = page);
     });
 
     this.layout.isMobile.subscribe(v => {