feat: ability to edit and delete comments

apps/frontend/src/app/components/admin/admin-audit.component.ts

@@ -104,7 +104,12 @@ import type { AuditLog, AuditAction, AuditCategory } from '@library/shared-types
                       </span>
                     </td>
                     <td>{{ auditService.getActionLabel(log.action) }}</td>
-                    <td class="details">{{ log.details ?? '-' }}</td>
+                    <td class="details" [class.expanded]="expandedRows()[log.id]" (click)="toggleRowExpand(log.id)">
+                      <span class="details-content">{{ log.details ?? '-' }}</span>
+                      @if (log.details && log.details.length > 50) {
+                        <span class="expand-hint">{{ expandedRows()[log.id] ? '(click to collapse)' : '(click to expand)' }}</span>
+                      }
+                    </td>
                     <td>
                       <span class="status-badge" [class.success]="log.success" [class.failed]="!log.success">
                         {{ log.success ? '✓' : '✗' }}
@@ -258,11 +263,33 @@ import type { AuditLog, AuditAction, AuditCategory } from '@library/shared-types
 
     .details {
       max-width: 400px;
+      cursor: pointer;
+      position: relative;
+    }
+
+    .details .details-content {
+      display: block;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
+    .details.expanded .details-content {
+      white-space: normal;
+      word-break: break-word;
+    }
+
+    .details .expand-hint {
+      display: block;
+      font-size: 0.7rem;
+      color: #9ca3af;
+      margin-top: 0.25rem;
+    }
+
+    .details:hover {
+      background: #f3f4f6;
+    }
+
     .status-badge {
       display: inline-block;
       width: 24px;
@@ -320,6 +347,7 @@ export class AdminAuditComponent implements OnInit {
   loading = signal(true);
   currentPage = signal(1);
   totalPages = signal(1);
+  expandedRows = signal<Record<string, boolean>>({});
 
   selectedCategory = '';
   selectedAction = '';
@@ -370,4 +398,11 @@ export class AdminAuditComponent implements OnInit {
     const d = new Date(date);
     return d.toLocaleString();
   }
+
+  toggleRowExpand(logId: string) {
+    this.expandedRows.set({
+      ...this.expandedRows(),
+      [logId]: !this.expandedRows()[logId]
+    });
+  }
 }