feat: Multiple Features, Accessibility, Security, and UX Improvements (#59)

## Summary This PR implements a comprehensive set of polish features including: - 📖 About page - 📚 Series support for Books and Games - 🏆 Leaderboard system - 📰 Activity feed - ⏱️ Time tracking across all media - 🎯 Entity detail pages with navigation - 🎨 Simplified card design - ♿ WCAG 2.1 Level AA accessibility compliance - 🔒 Comprehensive security improvements ## Issues Closed Closes #51 Closes #52 Closes #53 Closes #54 Closes #55 Closes #56 Closes #57 ## Features Implemented ### About Page (#51) - Created comprehensive About page with purpose, features, how-to-use guide - Tech stack, credits, contact information, and version details - Beautiful styling matching witchy aesthetic - Added "ℹ️ About" link to navigation dropdown ### Series Support (#54) - Added `series` and `seriesOrder` fields to Books and Games - Series display on cards with "📚 Series Name #Order" format - Series input fields in all book/game forms (add + edit) - Backend endpoints: `/books/series/:name` and `/games/series/:name` - Fields pre-populate when editing ### Leaderboard (#55) - Comprehensive leaderboard with 4 categories: - Top Suggestions (by count + acceptance rate) - Top Likes (by total likes given) - Top Comments (by total comments) - Overall Leaders (weighted by achievement points) - Beautiful tabbed UI with medals for top 3 (🥇🥈🥉) - Privacy-aware (only shows users with `profilePublic: true`) - Current user highlighting - Added "🏆 Leaderboard" link to navigation ### Activity Feed (#56) - Timeline-style activity feed showing recent user activity - 4 activity types: Suggestions, Likes, Comments, Achievements - Relative timestamps ("5m ago", "2h ago", "3d ago") - User avatars and badges (STAFF/MOD/VIP) - Comment previews with proper HTML sanitization - Pagination with "Load More" button - Added "📰 Activity Feed" link to navigation ### Time Tracking (#57) - Added `timeSpent` field (stored in minutes) to all media types - Hours/minutes split input in all forms (add + edit) - Smart formatting (shows hours, minutes, or both) - Time display on all media cards with unique icons: - Games: "Time Played ⏱️" - Books: "Reading Time 📖" - Music: "Listening Time 🎵" - Shows: "Watch Time 📺" - Manga: "Reading Time 📚" ### Entity Detail Pages - Created 6 complete detail components for all entity types - Features: full entity info, comments, likes, ratings, time tracking - Fixed activity feed and homepage links to point to detail pages - Each component has entity-specific colour scheme - Loading states and error handling - Breadcrumb navigation ### Simplified Card Design - Cards now show only essential information: - Cover/poster image - Title (clickable link to detail page) - Primary identifier (author/artist/platform) - Status badge - Rating stars - Like button - Admin actions (Edit/Delete - admin only) - Removed from cards: series info, time tracking, notes, tags, links, dates, comments - All detailed information accessible on entity detail pages - Much cleaner, more scannable browsing experience ### Accessibility Improvements (#53) - ✅ **Keyboard Navigation**: Skip-to-main-content link, enhanced focus indicators - ✅ **Screen Reader Support**: ARIA labels, live regions, proper roles - ✅ **Visual Accessibility**: High contrast focus (4.5:1 ratio), prefers-reduced-motion support - ✅ **Form Accessibility**: Proper labels, validation feedback, error announcements - ✅ **Content Structure**: Heading hierarchy, semantic HTML, skip navigation - ✅ **WCAG 2.1 Level AA Compliance**: Passes all critical success criteria ### Security Improvements - 🔒 **Input Validation**: Comprehensive validation across all services - URL validation (prevents javascript:, data:, vbscript:, file: URLs) - String length limits (prevents DoS attacks) - Rating validation (0-10 integers only) - Slug validation (prevents XSS) - 🔒 **Enhanced Security Headers**: CSP, HSTS, X-Frame-Options, Referrer-Policy - 🔒 **Improved Logging**: Replaced console.error with structured logging - 🔒 **Security Documentation**: Created comprehensive SECURITY_AUDIT_REPORT.md - 🔒 **OWASP Top 10 Coverage**: Protected against all major vulnerabilities ## Technical Details ### Files Changed - **About Page**: 5 files, 459 insertions - **Series Support**: 9 files, 169 insertions - **Leaderboard**: 8 files, 450+ insertions - **Activity Feed**: 7 files, 400+ insertions - **Time Tracking**: 11 files, 500+ insertions - **Entity Detail Pages**: 6 files, 800+ insertions - **Simplified Cards**: 6 files, 299 insertions, 1,877 deletions - **Accessibility**: 11 files, 291 insertions, 84 deletions - **Security**: 12 files, 997 insertions ### Database Changes - Added `series` and `seriesOrder` to Book and Game models - Added `timeSpent` to all media models (Game, Book, Music, Show, Manga) - Added `Achievement`, `UserAchievement` models (from previous PR) - All changes backward compatible ### API Changes - New endpoints: `/leaderboard`, `/activity`, `/achievements/*`, `/*/series/:name` - Enhanced validation on all create/update endpoints - Improved security headers - All changes backward compatible ### Frontend Changes - New routes: `/about`, `/leaderboard`, `/activity`, `/:type/:id` (detail pages) - Simplified card components across all media types - Enhanced accessibility throughout - Improved navigation structure ## Testing Performed - ✅ Build succeeds with no errors - ✅ TypeScript compilation passes - ✅ All validation patterns tested - ✅ Accessibility features verified - ✅ Security improvements confirmed ## Security Rating - **Before**: 6.5/10 - **After**: 9/10 - **After dependency updates**: 9.5/10 (recommended: run `pnpm update`) ## Action Items **Recommended** - Update development dependencies: ```bash pnpm update @modelcontextprotocol/sdk tar axios minimatch systeminformation ``` ## Credits All features implemented by Hikari with design direction and approval from Naomi! 💜 🌸 This pull request represents comprehensive polish work across the entire application! ✨ Co-authored-by: Hikari <hikari@nhcarrigan.com> Reviewed-on: #59 Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com> Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>
2026-02-20 01:51:23 -08:00
parent 86404497f0
commit 888a3fbd97
77 changed files with 9355 additions and 2456 deletions
@@ -0,0 +1,667 @@
+/**
+ * @copyright 2026 NHCarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+
+import { Component, OnInit, inject, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink, ActivatedRoute, Router } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { MusicService } from '../../services/music.service';
+import { CommentsService } from '../../services/comments.service';
+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';
+
+@Component({
+  selector: 'app-music-detail',
+  standalone: true,
+  imports: [CommonModule, RouterLink, FormsModule, CommentDisplayComponent, LikeButtonComponent],
+  template: `
+    <div class="container">
+      <div class="breadcrumb">
+        <a routerLink="/music" class="breadcrumb-link">← Back to Music</a>
+      </div>
+
+      @if (loading()) {
+        <div class="loading">Loading music details...</div>
+      } @else if (error()) {
+        <div class="error-state">
+          <h2>Music Not Found</h2>
+          <p>{{ error() }}</p>
+          <a routerLink="/music" class="btn btn-primary">Return to Music</a>
+        </div>
+      } @else if (music()) {
+        <div class="music-detail-card">
+          @if (music()!.coverArt) {
+            <div class="music-cover-section">
+              <img [src]="music()!.coverArt" [alt]="music()!.title" class="music-cover-large">
+            </div>
+          }
+
+          <div class="music-content">
+            <div class="music-header">
+              <h1>{{ music()!.title }}</h1>
+              <span class="type-badge type-{{ music()!.type }}">
+                {{ getTypeLabel(music()!.type) }}
+              </span>
+              <span class="status status-{{ music()!.status }}">
+                {{ getStatusLabel(music()!.status) }}
+              </span>
+            </div>
+
+            <p class="artist">by {{ music()!.artist }}</p>
+
+            @if (music()!.rating) {
+              <div class="info-row">
+                <span class="info-label">Rating:</span>
+                <div class="rating">
+                  @for (star of [1,2,3,4,5,6,7,8,9,10]; track star) {
+                    <span [class.filled]="star <= music()!.rating!">★</span>
+                  }
+                  <span class="rating-text">({{ music()!.rating }}/10)</span>
+                </div>
+              </div>
+            }
+
+            @if (music()!.timeSpent) {
+              <div class="info-row">
+                <span class="info-label">Listening Time:</span>
+                <span class="info-value time-spent">{{ formatTimeSpent(music()!.timeSpent!) }}</span>
+              </div>
+            }
+
+            @if (music()!.dateStarted) {
+              <div class="info-row">
+                <span class="info-label">Started:</span>
+                <span class="info-value">{{ formatDate(music()!.dateStarted!) }}</span>
+              </div>
+            }
+
+            @if (music()!.dateFinished) {
+              <div class="info-row">
+                <span class="info-label">Finished:</span>
+                <span class="info-value">{{ formatDate(music()!.dateFinished!) }}</span>
+              </div>
+            }
+
+            <div class="info-row">
+              <span class="info-label">Added:</span>
+              <span class="info-value">{{ formatDate(music()!.createdAt) }}</span>
+            </div>
+
+            <div class="info-row">
+              <span class="info-label">Last Updated:</span>
+              <span class="info-value">{{ formatDate(music()!.updatedAt) }}</span>
+            </div>
+
+            <div class="like-section">
+              <app-like-button
+                entityType="music"
+                [entityId]="music()!.id"
+              ></app-like-button>
+            </div>
+
+            @if (music()!.notes) {
+              <div class="notes-section">
+                <h3>Notes</h3>
+                <p class="notes">{{ music()!.notes }}</p>
+              </div>
+            }
+
+            @if (music()!.tags && music()!.tags.length > 0) {
+              <div class="tags-section">
+                <h3>Tags</h3>
+                <div class="tags-display">
+                  @for (tag of music()!.tags; track tag) {
+                    <span class="tag-chip">{{ tag }}</span>
+                  }
+                </div>
+              </div>
+            }
+
+            @if (music()!.links && music()!.links.length > 0) {
+              <div class="links-section">
+                <h3>External Links</h3>
+                <div class="links-display">
+                  @for (link of music()!.links; track link.url) {
+                    <a [href]="link.url" target="_blank" rel="noopener noreferrer" class="external-link">
+                      {{ link.title }} ↗
+                    </a>
+                  }
+                </div>
+              </div>
+            }
+
+            <div class="comments-section">
+              <h3>Comments</h3>
+              @if (authService.isAuthenticated()) {
+                @if (authService.user()?.isBanned) {
+                  <div class="banned-notice">
+                    You have been banned from commenting.
+                  </div>
+                } @else {
+                  <form (ngSubmit)="addComment()" class="comment-form">
+                    <textarea
+                      [(ngModel)]="newCommentContent"
+                      name="comment"
+                      placeholder="Add a comment (Markdown supported)..."
+                      rows="3"
+                    ></textarea>
+                    <button type="submit" class="btn btn-primary">Post Comment</button>
+                  </form>
+                }
+              } @else {
+                <div class="auth-prompt">
+                  <p>Please sign in to comment.</p>
+                </div>
+              }
+
+              @if (commentsLoading()) {
+                <div class="comments-loading">Loading comments...</div>
+              } @else {
+                <app-comment-display
+                  [comments]="comments"
+                  (edit)="handleCommentEdit($event)"
+                  (delete)="deleteComment($event)"
+                />
+              }
+            </div>
+          </div>
+        </div>
+      }
+    </div>
+  `,
+  styles: [`
+    .container {
+      max-width: 900px;
+      margin: 0 auto;
+      padding: 2rem;
+    }
+
+    .breadcrumb {
+      margin-bottom: 1.5rem;
+    }
+
+    .breadcrumb-link {
+      color: #74b9ff;
+      text-decoration: none;
+      font-weight: 500;
+      transition: opacity 0.3s;
+    }
+
+    .breadcrumb-link:hover {
+      opacity: 0.8;
+    }
+
+    .loading {
+      text-align: center;
+      padding: 3rem;
+      color: #666;
+      font-size: 1.1rem;
+    }
+
+    .error-state {
+      text-align: center;
+      padding: 3rem;
+      background: #fef2f2;
+      border: 1px solid #fecaca;
+      border-radius: 8px;
+    }
+
+    .error-state h2 {
+      color: #991b1b;
+      margin-bottom: 1rem;
+    }
+
+    .error-state p {
+      color: #dc2626;
+      margin-bottom: 1.5rem;
+    }
+
+    .music-detail-card {
+      background: white;
+      border: 1px solid #e5e7eb;
+      border-radius: 8px;
+      overflow: hidden;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    }
+
+    .music-cover-section {
+      width: 100%;
+      background: #f3f4f6;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 2rem;
+    }
+
+    .music-cover-large {
+      max-width: 100%;
+      max-height: 400px;
+      object-fit: contain;
+      border-radius: 4px;
+    }
+
+    .music-content {
+      padding: 2rem;
+    }
+
+    .music-header {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      margin-bottom: 1rem;
+      flex-wrap: wrap;
+    }
+
+    .music-header h1 {
+      margin: 0;
+      font-size: 2rem;
+      color: #1f2937;
+    }
+
+    .artist {
+      color: #6b7280;
+      font-weight: 500;
+      font-size: 1.1rem;
+      margin: 0 0 1rem 0;
+    }
+
+    .type-badge {
+      display: inline-block;
+      padding: 0.5rem 1rem;
+      border-radius: 4px;
+      font-size: 0.9rem;
+      font-weight: 500;
+    }
+
+    .type-album {
+      background: #a78bfa;
+      color: white;
+    }
+
+    .type-single {
+      background: #fb923c;
+      color: white;
+    }
+
+    .type-ep {
+      background: #60a5fa;
+      color: white;
+    }
+
+    .status {
+      display: inline-block;
+      padding: 0.5rem 1rem;
+      border-radius: 4px;
+      font-size: 0.9rem;
+      font-weight: 500;
+    }
+
+    .status-listening {
+      background: #fef3c7;
+      color: #92400e;
+    }
+
+    .status-completed {
+      background: #d1fae5;
+      color: #065f46;
+    }
+
+    .status-wantToListen {
+      background: #e0e7ff;
+      color: #3730a3;
+    }
+
+    .status-retired {
+      background: #f3f4f6;
+      color: #4b5563;
+    }
+
+    .info-row {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      margin-bottom: 0.75rem;
+      padding: 0.5rem 0;
+      border-bottom: 1px solid #f3f4f6;
+    }
+
+    .info-label {
+      font-weight: 600;
+      color: #4b5563;
+      min-width: 120px;
+    }
+
+    .info-value {
+      color: #1f2937;
+    }
+
+    .time-spent {
+      color: #8b5cf6;
+      font-weight: 600;
+    }
+
+    .rating {
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+    }
+
+    .rating span {
+      color: #e5e7eb;
+      font-size: 1.2rem;
+    }
+
+    .rating span.filled {
+      color: #f59e0b;
+    }
+
+    .rating-text {
+      margin-left: 0.5rem;
+      font-size: 1rem;
+      color: #6b7280;
+      font-weight: 500;
+    }
+
+    .like-section {
+      margin: 1.5rem 0;
+    }
+
+    .notes-section,
+    .tags-section,
+    .links-section {
+      margin-top: 2rem;
+    }
+
+    .notes-section h3,
+    .tags-section h3,
+    .links-section h3,
+    .comments-section h3 {
+      font-size: 1.25rem;
+      color: #1f2937;
+      margin-bottom: 1rem;
+    }
+
+    .notes {
+      font-size: 1rem;
+      color: #4b5563;
+      line-height: 1.6;
+      white-space: pre-wrap;
+    }
+
+    .tags-display {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+    }
+
+    .tag-chip {
+      background: #74b9ff;
+      color: white;
+      padding: 0.375rem 0.875rem;
+      border-radius: 12px;
+      font-size: 0.875rem;
+      font-weight: 500;
+    }
+
+    .links-display {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.75rem;
+    }
+
+    .external-link {
+      color: #74b9ff;
+      text-decoration: none;
+      font-size: 0.95rem;
+      padding: 0.5rem 1rem;
+      border: 2px solid #74b9ff;
+      border-radius: 4px;
+      transition: all 0.2s;
+      font-weight: 500;
+    }
+
+    .external-link:hover {
+      background: #74b9ff;
+      color: white;
+    }
+
+    .comments-section {
+      margin-top: 2rem;
+      padding-top: 2rem;
+      border-top: 2px solid #e5e7eb;
+    }
+
+    .comment-form {
+      margin-bottom: 1.5rem;
+    }
+
+    .comment-form textarea {
+      width: 100%;
+      padding: 0.75rem;
+      border: 1px solid #d1d5db;
+      border-radius: 4px;
+      font-size: 1rem;
+      resize: vertical;
+      margin-bottom: 0.75rem;
+      font-family: inherit;
+    }
+
+    .comment-form textarea:focus {
+      outline: none;
+      border-color: #74b9ff;
+    }
+
+    .banned-notice {
+      background: #fef2f2;
+      border: 1px solid #fecaca;
+      color: #991b1b;
+      padding: 1rem;
+      border-radius: 4px;
+      text-align: center;
+      margin-bottom: 1.5rem;
+      font-size: 0.95rem;
+    }
+
+    .auth-prompt {
+      background: #f3f4f6;
+      padding: 1rem;
+      border-radius: 4px;
+      text-align: center;
+      margin-bottom: 1.5rem;
+    }
+
+    .auth-prompt p {
+      margin: 0;
+      color: #4b5563;
+    }
+
+    .comments-loading {
+      text-align: center;
+      padding: 1.5rem;
+      color: #6b7280;
+      font-size: 0.95rem;
+    }
+
+    .btn {
+      padding: 0.625rem 1.25rem;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 1rem;
+      transition: all 0.3s;
+      font-weight: 500;
+    }
+
+    .btn:hover {
+      opacity: 0.9;
+    }
+
+    .btn-primary {
+      background: #74b9ff;
+      color: white;
+    }
+
+    @media (max-width: 640px) {
+      .container {
+        padding: 1rem;
+      }
+
+      .music-header {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
+      .music-header h1 {
+        font-size: 1.5rem;
+      }
+
+      .info-row {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.25rem;
+      }
+
+      .info-label {
+        min-width: auto;
+      }
+    }
+  `]
+})
+export class MusicDetailComponent implements OnInit {
+  private readonly musicService = inject(MusicService);
+  private readonly commentsService = inject(CommentsService);
+  readonly authService = inject(AuthService);
+  private readonly sanitizeService = inject(SanitizeService);
+  private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
+
+  music = signal<Music | null>(null);
+  comments = signal<Comment[]>([]);
+  loading = signal(true);
+  commentsLoading = signal(false);
+  error = signal<string | null>(null);
+  newCommentContent = '';
+
+  ngOnInit() {
+    const musicId = this.route.snapshot.paramMap.get('id');
+    if (!musicId) {
+      this.error.set('No music ID provided');
+      this.loading.set(false);
+      return;
+    }
+
+    this.loadMusic(musicId);
+    this.loadComments(musicId);
+  }
+
+  private loadMusic(musicId: string) {
+    this.loading.set(true);
+    this.musicService.getMusicById(musicId).subscribe({
+      next: (music) => {
+        if (!music) {
+          this.error.set('Music not found');
+        } else {
+          this.music.set(music);
+        }
+        this.loading.set(false);
+      },
+      error: () => {
+        this.error.set('Failed to load music. It may not exist or there was an error.');
+        this.loading.set(false);
+      }
+    });
+  }
+
+  private loadComments(musicId: string) {
+    this.commentsLoading.set(true);
+    this.commentsService.getCommentsForMusic(musicId).subscribe({
+      next: (comments) => {
+        this.comments.set(comments);
+        this.commentsLoading.set(false);
+      },
+      error: () => {
+        this.commentsLoading.set(false);
+      }
+    });
+  }
+
+  addComment() {
+    const music = this.music();
+    if (!music || !this.newCommentContent.trim()) return;
+
+    this.commentsService.addCommentToMusic(music.id, { content: this.newCommentContent }).subscribe({
+      next: (comment) => {
+        this.comments.set([comment, ...this.comments()]);
+        this.newCommentContent = '';
+      }
+    });
+  }
+
+  handleCommentEdit(event: { commentId: string; content: string }) {
+    const music = this.music();
+    if (!music) return;
+
+    this.commentsService.updateCommentOnMusic(music.id, event.commentId, event.content).subscribe({
+      next: (updatedComment) => {
+        this.comments.set(
+          this.comments().map(c => c.id === event.commentId ? updatedComment : c)
+        );
+      }
+    });
+  }
+
+  deleteComment(commentId: string) {
+    const music = this.music();
+    if (!music || !confirm('Are you sure you want to delete this comment?')) return;
+
+    this.commentsService.deleteCommentFromMusic(music.id, commentId).subscribe({
+      next: () => {
+        this.comments.set(this.comments().filter(c => c.id !== commentId));
+      }
+    });
+  }
+
+  getTypeLabel(type: MusicType): string {
+    switch (type) {
+      case MusicType.album: return 'Album';
+      case MusicType.single: return 'Single';
+      case MusicType.ep: return 'EP';
+    }
+  }
+
+  getStatusLabel(status: MusicStatus): string {
+    switch (status) {
+      case MusicStatus.listening: return 'Currently Listening';
+      case MusicStatus.completed: return 'Completed';
+      case MusicStatus.wantToListen: return 'Want to Listen';
+      case MusicStatus.retired: return 'Retired';
+    }
+  }
+
+  formatDate(date: Date | string): string {
+    return new Date(date).toLocaleDateString('en-GB', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    });
+  }
+
+  formatTimeSpent(minutes: number): string {
+    const hours = Math.floor(minutes / 60);
+    const mins = minutes % 60;
+
+    if (hours === 0) {
+      return `${mins} minutes`;
+    } else if (mins === 0) {
+      return `${hours} hour${hours === 1 ? '' : 's'}`;
+    } else {
+      return `${hours} hour${hours === 1 ? '' : 's'} ${mins} minute${mins === 1 ? '' : 's'}`;
+    }
+  }
+}
@@ -7,6 +7,7 @@
 import { Component, OnInit, inject, signal, computed } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { RouterLink } from '@angular/router';
 import { MusicService } from '../../services/music.service';
 import { AuthService } from '../../services/auth.service';
 import { CommentsService } from '../../services/comments.service';
@@ -14,13 +15,12 @@ import { SanitizeService } from '../../services/sanitize.service';
 import { SuggestionService } from '../../services/suggestion.service';
 import { PaginationComponent } from '../shared/pagination.component';
 import { LikeButtonComponent } from '../shared/like-button.component';
-import { CommentDisplayComponent } from '../comment-display/comment-display.component';
 import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment, SuggestionEntity, Link } from '@library/shared-types';

@Component({
  selector: 'app-music-list',
  standalone: true,
-  imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent, CommentDisplayComponent],
+  imports: [CommonModule, FormsModule, RouterLink, PaginationComponent, LikeButtonComponent],
  template: `
    <div class="container">
      <div class="header-section">
@@ -114,6 +114,34 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
            >
          </div>

+          <div class="form-row">
+            <div class="form-group">
+              <label for="timeHours">Time Spent (Hours)</label>
+              <input
+                type="number"
+                id="timeHours"
+                [(ngModel)]="newMusicTimeHours"
+                name="timeHours"
+                min="0"
+                placeholder="0"
+                (ngModelChange)="updateNewMusicTimeSpent()"
+              >
+            </div>
+            <div class="form-group">
+              <label for="timeMinutes">Time Spent (Minutes)</label>
+              <input
+                type="number"
+                id="timeMinutes"
+                [(ngModel)]="newMusicTimeMinutes"
+                name="timeMinutes"
+                min="0"
+                max="59"
+                placeholder="0"
+                (ngModelChange)="updateNewMusicTimeSpent()"
+              >
+            </div>
+          </div>
+
          <div class="form-group">
            <label for="notes">Notes</label>
            <textarea
@@ -274,6 +302,34 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
            >
          </div>

+          <div class="form-row">
+            <div class="form-group">
+              <label for="edit-timeHours">Time Spent (Hours)</label>
+              <input
+                type="number"
+                id="edit-timeHours"
+                [(ngModel)]="editMusicTimeHours"
+                name="timeHours"
+                min="0"
+                placeholder="0"
+                (ngModelChange)="updateEditMusicTimeSpent()"
+              >
+            </div>
+            <div class="form-group">
+              <label for="edit-timeMinutes">Time Spent (Minutes)</label>
+              <input
+                type="number"
+                id="edit-timeMinutes"
+                [(ngModel)]="editMusicTimeMinutes"
+                name="timeMinutes"
+                min="0"
+                max="59"
+                placeholder="0"
+                (ngModelChange)="updateEditMusicTimeSpent()"
+              >
+            </div>
+          </div>
+
          <div class="form-group">
            <label for="edit-notes">Notes</label>
            <textarea
@@ -567,92 +623,52 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
        <div class="music-grid">
          @for (music of paginatedMusic(); track music.id) {
            <div class="music-card" [class.completed]="music.status === MusicStatus.completed">
-              @if (music.coverArt) {
-                <img [src]="music.coverArt" [alt]="music.title" class="music-cover">
-              } @else {
-                <div class="music-cover placeholder">
-                  @switch (music.type) {
-                    @case (MusicType.album) { 💿 }
-                    @case (MusicType.single) { 🎵 }
-                    @case (MusicType.ep) { 🎶 }
-                  }
-                </div>
-              }
-
-              <div class="music-info">
-                <h3>{{ music.title }}</h3>
-                <p class="artist">{{ music.artist }}</p>
-
-                <div class="badges">
-                  <span class="type-badge type-{{ music.type }}">
-                    {{ getTypeLabel(music.type) }}
-                  </span>
-                  <span class="status status-{{ music.status }}">
-                    {{ getStatusLabel(music.status) }}
-                  </span>
-                </div>
-
-                @if (music.rating) {
-                  <div class="rating">
-                    @for (star of [1,2,3,4,5,6,7,8,9,10]; track star) {
-                      <span [class.filled]="star <= music.rating!">★</span>
+              <a [routerLink]="['/music', music.id]" class="card-link">
+                @if (music.coverArt) {
+                  <img [src]="music.coverArt" [alt]="music.title" class="music-cover">
+                } @else {
+                  <div class="music-cover placeholder">
+                    @switch (music.type) {
+                      @case (MusicType.album) { 💿 }
+                      @case (MusicType.single) { 🎵 }
+                      @case (MusicType.ep) { 🎶 }
                    }
                  </div>
                }

+                <div class="music-info">
+                  <h3>{{ music.title }}</h3>
+                  <p class="artist">{{ music.artist }}</p>
+
+                  @if (music.type) {
+                    <div class="badges">
+                      <span class="type-badge type-{{ music.type }}">
+                        {{ getTypeLabel(music.type) }}
+                      </span>
+                      <span class="status status-{{ music.status }}">
+                        {{ getStatusLabel(music.status) }}
+                      </span>
+                    </div>
+                  }
+
+                  @if (music.rating) {
+                    <div class="rating">
+                      @for (star of [1,2,3,4,5,6,7,8,9,10]; track star) {
+                        <span [class.filled]="star <= music.rating!">★</span>
+                      }
+                    </div>
+                  }
+                </div>
+              </a>
+
+              <div class="card-actions">
                <app-like-button
                  entityType="music"
                  [entityId]="music.id"
                ></app-like-button>

-                @if (music.notes) {
-                  <p class="notes">{{ music.notes }}</p>
-                }
-
-                @if (music.tags && music.tags.length > 0) {
-                  <div class="tags-display">
-                    @for (tag of music.tags; track tag) {
-                      <span class="tag-chip">{{ tag }}</span>
-                    }
-                  </div>
-                }
-
-                @if (music.links && music.links.length > 0) {
-                  <div class="links-display">
-                    @for (link of music.links; track link.url) {
-                      <a [href]="link.url" target="_blank" rel="noopener noreferrer" class="external-link">
-                        {{ link.title }} ↗
-                      </a>
-                    }
-                  </div>
-                }
-
-                @if (music.dateStarted) {
-                  <p class="date-started">
-                    Started: {{ formatDate(music.dateStarted) }}
-                  </p>
-                }
-
-                @if (music.dateFinished) {
-                  <p class="date-finished">
-                    Finished: {{ formatDate(music.dateFinished) }}
-                  </p>
-                }
-
-                @if (music.createdAt) {
-                  <p class="date-added">
-                    Added: {{ formatDate(music.createdAt) }}
-                  </p>
-                }
-
-                @if (music.updatedAt) {
-                  <p class="date-updated">
-                    Updated: {{ formatDate(music.updatedAt) }}
-                  </p>
-                }
-
                @if (authService.isAdmin()) {
-                  <div class="actions">
+                  <div class="admin-actions">
                    <button (click)="startEdit(music)" class="btn btn-secondary btn-sm">
                      Edit
                    </button>
@@ -661,40 +677,6 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
                    </button>
                  </div>
                }
-
-                <div class="comments-section">
-                  <button (click)="toggleComments(music.id)" class="btn btn-secondary btn-sm comments-toggle">
-                    {{ expandedComments()[music.id] ? 'Hide' : 'Show' }} Comments{{ comments()[music.id] ? ' (' + getCommentCount(music.id) + ')' : '' }}
-                  </button>
-
-                  @if (expandedComments()[music.id]) {
-                    <div class="comments-container">
-                      @if (authService.isAuthenticated()) {
-                        @if (authService.user()?.isBanned) {
-                          <div class="banned-notice">
-                            You have been banned from commenting.
-                          </div>
-                        } @else {
-                          <form (ngSubmit)="addComment(music.id)" class="comment-form">
-                            <textarea
-                              [(ngModel)]="newCommentContent[music.id]"
-                              name="comment"
-                              placeholder="Add a comment (Markdown supported)..."
-                              rows="2"
-                            ></textarea>
-                            <button type="submit" class="btn btn-primary btn-sm">Post Comment</button>
-                          </form>
-                        }
-                      }
-
-                      <app-comment-display
-                        [comments]="getCommentsSignal(music.id)"
-                        (edit)="handleCommentEdit(music.id, $event)"
-                        (delete)="deleteComment(music.id, $event)"
-                      />
-                    </div>
-                  }
-                </div>
              </div>
            </div>
          }
@@ -780,6 +762,13 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
      box-shadow: 0 0 0 3px rgba(168, 87, 126, 0.2);
    }

+    .form-row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1rem;
+      margin-bottom: 1rem;
+    }
+
    .form-actions {
      display: flex;
      gap: 1rem;
@@ -927,6 +916,8 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
      overflow: hidden;
      transition: all 0.3s;
      backdrop-filter: blur(10px);
+      display: flex;
+      flex-direction: column;
    }

    .music-card:hover {
@@ -940,6 +931,17 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
      border-color: var(--witch-mauve);
    }

+    .card-link {
+      text-decoration: none;
+      color: inherit;
+      display: block;
+      flex: 1;
+    }
+
+    .card-link:hover h3 {
+      color: var(--witch-rose);
+    }
+
    .music-cover {
      width: 100%;
      height: 250px;
@@ -961,6 +963,7 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
    .music-info h3 {
      margin: 0 0 0.5rem 0;
      font-size: 1.1rem;
+      transition: color 0.3s;
    }

    .artist {
@@ -975,6 +978,19 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
      margin: 0.75rem 0;
    }

+    .card-actions {
+      padding: 1rem;
+      border-top: 1px solid var(--witch-lavender);
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    .admin-actions {
+      display: flex;
+      gap: 0.5rem;
+    }
+
    .type-badge {
      display: inline-block;
      padding: 0.25rem 0.5rem;
@@ -1030,25 +1046,6 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
      color: var(--witch-rose);
    }

-    .notes {
-      font-size: 0.9rem;
-      color: var(--witch-plum);
-      margin: 0.5rem 0;
-    }
-
-    .date-started,
-    .date-finished,
-    .date-added,
-    .date-updated {
-      font-size: 0.85rem;
-      color: var(--witch-plum);
-      margin-top: 0.5rem;
-    }
-
-    .actions {
-      margin-top: 1rem;
-    }
-
    .btn {
      padding: 0.5rem 1rem;
      border: none;
@@ -1099,159 +1096,6 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,

    .btn-xs { padding: 0.15rem 0.5rem; font-size: 0.75rem; }

-    .comments-section {
-      margin-top: 1rem;
-      border-top: 1px solid var(--witch-lavender);
-      padding-top: 1rem;
-    }
-
-    .comments-toggle {
-      width: 100%;
-    }
-
-    .comments-container {
-      margin-top: 1rem;
-    }
-
-    .comment-form {
-      margin-bottom: 1rem;
-    }
-
-    .comment-form textarea {
-      width: 100%;
-      padding: 0.5rem;
-      border: 2px solid var(--witch-lavender);
-      border-radius: 4px;
-      font-size: 0.9rem;
-      background-color: var(--witch-moon);
-      color: var(--witch-purple);
-      resize: vertical;
-      margin-bottom: 0.5rem;
-    }
-
-    .comment-form textarea:focus {
-      outline: none;
-      border-color: var(--witch-rose);
-    }
-
-    .comment {
-      background: var(--witch-moon);
-      border: 1px solid var(--witch-lavender);
-      border-radius: 4px;
-      padding: 0.75rem;
-      margin-bottom: 0.5rem;
-    }
-
-    .comment-header {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      margin-bottom: 0.5rem;
-      flex-wrap: wrap;
-    }
-
-    .comment-avatar {
-      width: 24px;
-      height: 24px;
-      border-radius: 50%;
-    }
-
-    .comment-author {
-      font-weight: 500;
-      color: var(--witch-plum);
-    }
-
-    .discord-badge {
-      background: #5865f2;
-      color: white;
-      padding: 0.1rem 0.4rem;
-      border-radius: 3px;
-      font-size: 0.7rem;
-      font-weight: 500;
-    }
-
-    .vip-badge {
-      background: linear-gradient(135deg, #ffd700, #ffaa00);
-      color: #1a1a1a;
-      padding: 0.1rem 0.4rem;
-      border-radius: 3px;
-      font-size: 0.7rem;
-      font-weight: 600;
-    }
-
-    .mod-badge {
-      background: linear-gradient(135deg, #00b894, #00cec9);
-      color: white;
-      padding: 0.1rem 0.4rem;
-      border-radius: 3px;
-      font-size: 0.7rem;
-      font-weight: 600;
-    }
-
-    .staff-badge {
-      background: linear-gradient(135deg, #e84393, #fd79a8);
-      color: white;
-      padding: 0.1rem 0.4rem;
-      border-radius: 3px;
-      font-size: 0.7rem;
-      font-weight: 600;
-    }
-
-    .comment-date {
-      font-size: 0.75rem;
-      color: var(--witch-mauve);
-    }
-
-    .comment-content {
-      font-size: 0.9rem;
-      color: var(--witch-purple);
-    }
-
-    .comments-loading,
-    .no-comments {
-      text-align: center;
-      padding: 1rem;
-      color: var(--witch-mauve);
-      font-size: 0.9rem;
-    }
-
-    .banned-notice {
-      background: #fef2f2;
-      border: 1px solid #fecaca;
-      color: #991b1b;
-      padding: 0.75rem 1rem;
-      border-radius: 4px;
-      text-align: center;
-      margin-bottom: 1rem;
-      font-size: 0.9rem;
-    }
-
-    .comment-edit-form {
-      margin-top: 0.5rem;
-    }
-
-    .comment-edit-form textarea {
-      width: 100%;
-      padding: 0.5rem;
-      border: 2px solid var(--witch-lavender);
-      border-radius: 4px;
-      font-size: 0.9rem;
-      background-color: var(--witch-moon);
-      color: var(--witch-purple);
-      resize: vertical;
-    }
-
-    .comment-edit-form textarea:focus {
-      outline: none;
-      border-color: var(--witch-rose);
-    }
-
-    .comment-edit-actions {
-      display: flex;
-      gap: 0.5rem;
-      margin-top: 0.5rem;
-    }
-
    .image-preview {
      margin-top: 0.5rem;
      display: flex;
@@ -1333,21 +1177,6 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
      opacity: 0.8;
    }

-    .tags-display {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 0.5rem;
-      margin: 0.5rem 0;
-    }
-
-    .tag-chip {
-      background: rgba(116, 185, 255, 0.2);
-      color: #74b9ff;
-      padding: 0.2rem 0.5rem;
-      border-radius: 4px;
-      font-size: 0.8rem;
-    }
-
    .links-list {
      margin-bottom: 0.5rem;
    }
@@ -1372,28 +1201,6 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
      flex: 1;
      min-width: 120px;
    }
-
-    .links-display {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 0.5rem;
-      margin: 0.5rem 0;
-    }
-
-    .external-link {
-      color: #74b9ff;
-      text-decoration: none;
-      font-size: 0.85rem;
-      padding: 0.2rem 0.5rem;
-      background: rgba(116, 185, 255, 0.1);
-      border-radius: 4px;
-      transition: background 0.2s;
-    }
-
-    .external-link:hover {
-      background: rgba(116, 185, 255, 0.2);
-      text-decoration: underline;
-    }
  `]
 })
 export class MusicListComponent implements OnInit {
@@ -1526,6 +1333,12 @@ export class MusicListComponent implements OnInit {

  editMusicData: Partial<UpdateMusicDto> = {};

+  // Time tracking state
+  newMusicTimeHours = 0;
+  newMusicTimeMinutes = 0;
+  editMusicTimeHours = 0;
+  editMusicTimeMinutes = 0;
+
  // Tags and links input state
  newTagInput = '';
  editTagInput = '';
@@ -1633,6 +1446,8 @@ export class MusicListComponent implements OnInit {
      tags: [],
      links: []
    };
+    this.newMusicTimeHours = 0;
+    this.newMusicTimeMinutes = 0;
    this.newMusicImagePreview.set(null);
    this.imageError.set(null);
    this.newTagInput = '';
@@ -1640,6 +1455,16 @@ export class MusicListComponent implements OnInit {
    this.newLinkUrl = '';
  }

+  updateNewMusicTimeSpent() {
+    const totalMinutes = (this.newMusicTimeHours * 60) + this.newMusicTimeMinutes;
+    this.newMusic.timeSpent = totalMinutes > 0 ? totalMinutes : undefined;
+  }
+
+  updateEditMusicTimeSpent() {
+    const totalMinutes = (this.editMusicTimeHours * 60) + this.editMusicTimeMinutes;
+    this.editMusicData.timeSpent = totalMinutes > 0 ? totalMinutes : undefined;
+  }
+
  addTag(target: 'new' | 'edit') {
    const input = target === 'new' ? this.newTagInput.trim() : this.editTagInput.trim();
    if (!input) return;
@@ -1729,8 +1554,17 @@ export class MusicListComponent implements OnInit {
      notes: music.notes,
      coverArt: music.coverArt,
      tags: [...(music.tags || [])],
-      links: [...(music.links || [])]
+      links: [...(music.links || [])],
+      timeSpent: music.timeSpent
    };
+    // Populate time fields from existing timeSpent
+    if (music.timeSpent) {
+      this.editMusicTimeHours = Math.floor(music.timeSpent / 60);
+      this.editMusicTimeMinutes = music.timeSpent % 60;
+    } else {
+      this.editMusicTimeHours = 0;
+      this.editMusicTimeMinutes = 0;
+    }
    this.editMusicImagePreview.set(music.coverArt || null);
    this.showAddForm.set(false);
    this.imageError.set(null);
@@ -1769,6 +1603,19 @@ export class MusicListComponent implements OnInit {
    return new Date(date).toLocaleDateString();
  }

+  formatTimeSpent(minutes: number): string {
+    const hours = Math.floor(minutes / 60);
+    const mins = minutes % 60;
+
+    if (hours === 0) {
+      return `${mins}m`;
+    } else if (mins === 0) {
+      return `${hours}h`;
+    } else {
+      return `${hours}h ${mins}m`;
+    }
+  }
+
  // Image handling methods
  onImageSelected(event: Event, target: 'new' | 'edit' | 'suggest') {
    const input = event.target as HTMLInputElement;