Removable footer, compact styling for particle creator

frontend/src/app/pages/particles/components/frames/frames.component.html

@@ -1,12 +1,27 @@
 <div class="card-div">
   <mat-card>
-    <mat-card-header>
-      <mat-card-title>Frames</mat-card-title>
+    <mat-card-header class="frame-header-fullwidth">
+      <div class="frame-header-row" mat-card-title>
+        <span class="frame-title-text">Frames</span>
+        <div>
+          <ng-content></ng-content>
+          <button mat-icon-button color="warn" (click)="removeFrame(currentFrame)"
+                  matTooltip="Delete {{currentFrame}}"
+                  [disabled]="frames.length <= 1">
+            <mat-icon [class.can-delete]="frames.length > 1" [class.can-not-delete]="frames.length <= 1">
+              delete
+            </mat-icon>
+          </button>
+          <button mat-icon-button (click)="addFrame()" matTooltip="Add Frame">
+            <mat-icon class="add-button">add</mat-icon>
+          </button>
+        </div>
+      </div>
     </mat-card-header>
     <mat-card-content>
       <div class="frames-container">
         <mat-tab-group [selectedIndex]="frames.indexOf(currentFrame)"
-          (selectedIndexChange)="switchFrame(frames[$event])">
+                       (selectedIndexChange)="switchFrame(frames[$event])">
           @for (frameId of frames; track frameId) {
             <mat-tab [label]="frameId">
               <div class="frame-content">
@@ -33,21 +48,10 @@
                     </div>
                   }
                 </div>
-                <div class="frame-actions">
-                  <button mat-raised-button color="warn" (click)="removeFrame(frameId)"
-                    [disabled]="frames.length <= 1">
-                    Remove Frame
-                  </button>
-                </div>
               </div>
             </mat-tab>
           }
         </mat-tab-group>
-        <div class="add-frame">
-          <button mat-raised-button color="primary" (click)="addFrame()">
-            Add New Frame
-          </button>
-        </div>
       </div>
     </mat-card-content>
   </mat-card>

frontend/src/app/pages/particles/components/frames/frames.component.scss

@@ -6,6 +6,36 @@
   padding: 15px;
 }
 
+:host ::ng-deep .mat-mdc-card-header-text {
+  width: 90%;
+  text-align: center;
+}
+
+.frame-header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.frame-title-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.add-button {
+  color: green
+}
+
+.can-delete {
+  color: red;
+}
+
+.can-not-delete {
+  color: gray;
+}
+
 .particles-list {
   height: 550px;
   overflow-y: auto;

frontend/src/app/pages/particles/components/frames/frames.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FramesComponent } from './frames.component';
-
-describe('FramesComponent', () => {
-  let component: FramesComponent;
-  let fixture: ComponentFixture<FramesComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [FramesComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(FramesComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

frontend/src/app/pages/particles/components/frames/frames.component.ts

@@ -1,5 +1,5 @@
-import {Component} from '@angular/core';
-import {MatButton, MatIconButton} from "@angular/material/button";
+import {Component, inject} from '@angular/core';
+import {MatIconButton} from "@angular/material/button";
 import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from "@angular/material/card";
 import {MatTab, MatTabGroup} from "@angular/material/tabs";
 
@@ -7,11 +7,11 @@ import {ParticleData} from '../../models/particle.model';
 import {MatIcon} from '@angular/material/icon';
 import {ParticleManagerService} from '../../services/particle-manager.service';
 import {FrameManagerService} from '../../services/frame-manager.service';
+import {MatTooltipModule} from '@angular/material/tooltip';
 
 @Component({
   selector: 'app-frames',
   imports: [
-    MatButton,
     MatCard,
     MatCardContent,
     MatCardHeader,
@@ -19,17 +19,15 @@ import {FrameManagerService} from '../../services/frame-manager.service';
     MatIcon,
     MatIconButton,
     MatTab,
-    MatTabGroup
-],
+    MatTabGroup,
+    MatTooltipModule,
+  ],
   templateUrl: './frames.component.html',
   styleUrl: './frames.component.scss'
 })
 export class FramesComponent {
-
-  constructor(
-    private particleManagerService: ParticleManagerService,
-    private frameManagerService: FrameManagerService) {
-  }
+  private particleManagerService = inject(ParticleManagerService);
+  private frameManagerService = inject(FrameManagerService);
 
   /**
    * Get the particle data