feat: add reusable form components and inline editing for all media types

Created reusable form components for all media types (Game, Book, Music, Show,
Manga, Art) to provide a consistent editing experience across the application.

Changes:
- Created 6 new form components in shared folder for all media types
- Each form component supports both 'add' and 'edit' modes
- Forms include all fields: title, author/artist/platform, status, dates,
  rating, time spent, notes, cover images, tags, and links
- Added inline editing to all detail views using form components
- Detail views now show edit form inline instead of navigating away
- Integrated form components into admin suggestions workflow
- Admins can now review and edit all suggestion details before accepting
- Added scroll-to-top functionality when clicking edit in all list views
- Ensures edit form is visible when opened from paginated lists

Benefits:
- Consistent UX across all media types
- Better editing experience with inline forms
- Improved admin suggestion workflow with full editing capabilities
- No route navigation for edits (better for SEO and UX)
- All forms follow the same styling and interaction patterns

Co-Authored-By: Naomi Carrigan <commits@nhcarrigan.com>

apps/frontend/src/app/components/music/music-detail.component.ts

@@ -14,18 +14,28 @@ import { AuthService } from '../../services/auth.service';
 import { SanitizeService } from '../../services/sanitize.service';
 import { CommentDisplayComponent } from '../comment-display/comment-display.component';
 import { LikeButtonComponent } from '../shared/like-button.component';
-import { Music, Comment, MusicStatus, MusicType } from '@library/shared-types';
+import { MusicFormComponent } from '../shared/music-form.component';
+import { Music, Comment, MusicStatus, MusicType, UpdateMusicDto } from '@library/shared-types';
 
 @Component({
   selector: 'app-music-detail',
   standalone: true,
-  imports: [CommonModule, RouterLink, FormsModule, CommentDisplayComponent, LikeButtonComponent],
+  imports: [CommonModule, RouterLink, FormsModule, CommentDisplayComponent, LikeButtonComponent, MusicFormComponent],
   template: `
     <div class="container">
       <div class="breadcrumb">
         <a routerLink="/music" class="breadcrumb-link">← Back to Music</a>
       </div>
 
+      @if (showEditForm() && authService.user()?.isAdmin && music()) {
+        <app-music-form
+          mode="edit"
+          [music]="music()!"
+          (save)="saveEdit($event)"
+          (cancel)="cancelEdit()"
+        ></app-music-form>
+      }
+
       @if (loading()) {
         <div class="loading">Loading music details...</div>
       } @else if (error()) {
@@ -54,6 +64,12 @@ import { Music, Comment, MusicStatus, MusicType } from '@library/shared-types';
             </div>
 
             <p class="artist">by {{ music()!.artist }}</p>
+            @if (authService.user()?.isAdmin) {
+              <div class="admin-actions">
+                <button (click)="editMusic()" class="btn btn-edit">✏️ Edit</button>
+                <button (click)="deleteMusic()" class="btn btn-delete">🗑️ Delete</button>
+              </div>
+            }
 
             @if (music()!.rating) {
               <div class="info-row">
@@ -322,6 +338,35 @@ import { Music, Comment, MusicStatus, MusicType } from '@library/shared-types';
       color: #4b5563;
     }
 
+
+    .admin-actions {
+      display: flex;
+      gap: 0.75rem;
+      margin-bottom: 1.5rem;
+      padding: 1rem;
+      background: #fef3c7;
+      border-radius: 4px;
+      border: 1px solid #fbbf24;
+    }
+
+    .btn-edit {
+      background: #3b82f6;
+      color: white;
+    }
+
+    .btn-edit:hover {
+      background: #2563eb;
+    }
+
+    .btn-delete {
+      background: #ef4444;
+      color: white;
+    }
+
+    .btn-delete:hover {
+      background: #dc2626;
+    }
+
     .info-row {
       display: flex;
       align-items: center;
@@ -521,7 +566,36 @@ import { Music, Comment, MusicStatus, MusicType } from '@library/shared-types';
         font-size: 1.5rem;
       }
 
-      .info-row {
+  
+    .admin-actions {
+      display: flex;
+      gap: 0.75rem;
+      margin-bottom: 1.5rem;
+      padding: 1rem;
+      background: #fef3c7;
+      border-radius: 4px;
+      border: 1px solid #fbbf24;
+    }
+
+    .btn-edit {
+      background: #3b82f6;
+      color: white;
+    }
+
+    .btn-edit:hover {
+      background: #2563eb;
+    }
+
+    .btn-delete {
+      background: #ef4444;
+      color: white;
+    }
+
+    .btn-delete:hover {
+      background: #dc2626;
+    }
+
+    .info-row {
         flex-direction: column;
         align-items: flex-start;
         gap: 0.25rem;
@@ -547,6 +621,7 @@ export class MusicDetailComponent implements OnInit {
   commentsLoading = signal(false);
   error = signal<string | null>(null);
   newCommentContent = '';
+  showEditForm = signal(false);
 
   ngOnInit() {
     const musicId = this.route.snapshot.paramMap.get('id');
@@ -664,4 +739,45 @@ export class MusicDetailComponent implements OnInit {
       return `${hours} hour${hours === 1 ? '' : 's'} ${mins} minute${mins === 1 ? '' : 's'}`;
     }
   }
-}
+
+  editMusic() {
+    this.showEditForm.set(true);
+  }
+
+  cancelEdit() {
+    this.showEditForm.set(false);
+  }
+
+  saveEdit(data: UpdateMusicDto) {
+    const music = this.music();
+    if (!music) return;
+
+    this.musicService.updateMusic(music.id, data).subscribe({
+      next: (updatedMusic) => {
+        this.music.set(updatedMusic);
+        this.showEditForm.set(false);
+      },
+      error: (err) => {
+        alert('Failed to update music: ' + (err.error?.message || 'Unknown error'));
+      }
+    });
+  }
+
+  deleteMusic() {
+    const music = this.music();
+    if (!music) return;
+
+    if (!confirm(`Are you sure you want to delete "${music.title}"? This action cannot be undone.`)) {
+      return;
+    }
+
+    this.musicService.deleteMusic(music.id).subscribe({
+      next: () => {
+        this.router.navigate(['/music']);
+      },
+      error: (err) => {
+        alert('Failed to delete music: ' + (err.error?.message || 'Unknown error'));
+      }
+    });
+  }
+}