RIFFMASTER: FRONTEND: add table form for list of riffs and displaying no riffs message if song does not have riffs

Backend/Spring/.idea/workspace.xml

@@ -11,8 +11,8 @@
   <component name="ChangeListManager">
     <list default="true" id="8315de53-8c15-472c-a710-45938463dc02" name="Changes" comment="RIFFMASTER: add frontend files">
       <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/app.module.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/app.module.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/main-page/main-page.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/main-page/main-page.component.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/main-page/main-page.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/main-page/main-page.component.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />

Frontend/RiffMasterFront/.idea/workspace.xml

@@ -97,7 +97,7 @@
       <workItem from="1686820564623" duration="521000" />
       <workItem from="1686836939723" duration="5206000" />
       <workItem from="1686898660229" duration="4682000" />
-      <workItem from="1686909264196" duration="2289000" />
+      <workItem from="1686909264196" duration="3087000" />
     </task>
     <task id="LOCAL-00001" summary="RIFFMASTER: add frontend project">
       <created>1685976235580</created>

Frontend/RiffMasterFront/src/app/app.module.ts

@@ -24,6 +24,9 @@ import { HttpClientModule } from '@angular/common/http';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatRadioChange } from '@angular/material/radio';
 
+import { MatTableModule } from '@angular/material/table';
+
+
 
 
 @NgModule({
@@ -49,6 +52,7 @@ import { MatRadioChange } from '@angular/material/radio';
     BrowserAnimationsModule,
 
     MatRadioModule,
+    MatTableModule,
   
     DatePipe,
   ],

Frontend/RiffMasterFront/src/app/main-page/main-page.component.html

@@ -84,7 +84,7 @@
 
 </div>
 
-<div class="riff-list-container">
+<div class="riff-list-container" *ngIf="selectedSong?.riffs && selectedSong.riffs.length > 0; else noRiffsMessage">
   <mat-card class="riff-list-card">
 
     <mat-card-header>
@@ -92,17 +92,30 @@
     </mat-card-header>
 
     <mat-card-content>
-      <div class="riff-list">
-        <mat-list>
-          <mat-list-item *ngFor="let riff of selectedSong?.riffs">
-            <span mat-line>{{ riff.name }}</span>
-            <span mat-line class="riff-details">
-              Start: {{ riff.startMs }} ms | End: {{ riff.endMs }} ms
-            </span>
-          </mat-list-item>
-        </mat-list>
-      </div>
+      <table mat-table [dataSource]="selectedSong?.riffs || []">
+
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef>Riff Name</th>
+          <td mat-cell *matCellDef="let riff">{{ riff.name }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="startMs">
+          <th mat-header-cell *matHeaderCellDef>Start (ms)</th>
+          <td mat-cell *matCellDef="let riff">{{ riff.startMs }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="endMs">
+          <th mat-header-cell *matHeaderCellDef>End (ms)</th>
+          <td mat-cell *matCellDef="let riff">{{ riff.endMs }}</td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="['name', 'startMs', 'endMs']"></tr>
+        <tr mat-row *matRowDef="let row; columns: ['name', 'startMs', 'endMs']"></tr>
+      </table>
     </mat-card-content>
 
   </mat-card>
 </div>
+<ng-template #noRiffsMessage>
+  <p>No riffs found for this song.</p>
+</ng-template>