feat: add tags and links

apps/frontend/src/app/components/books/books-list.component.ts

@@ -12,7 +12,7 @@ import { AuthService } from '../../services/auth.service';
 import { CommentsService } from '../../services/comments.service';
 import { SanitizeService } from '../../services/sanitize.service';
 import { SuggestionService } from '../../services/suggestion.service';
-import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEntity } from '@library/shared-types';
+import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
 
 @Component({
   selector: 'app-books-list',
@@ -123,6 +123,52 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
             }
           </div>
 
+          <div class="form-group">
+            <label>Tags</label>
+            <div class="tags-input-container">
+              @for (tag of newBook.tags; track tag; let i = $index) {
+                <span class="tag">
+                  {{ tag }}
+                  <button type="button" (click)="removeTag(i, 'new')" class="tag-remove">×</button>
+                </span>
+              }
+              <input
+                type="text"
+                [(ngModel)]="newTagInput"
+                name="newTagInput"
+                placeholder="Add a tag and press Enter"
+                (keydown.enter)="addTag('new'); $event.preventDefault()"
+              >
+            </div>
+          </div>
+
+          <div class="form-group">
+            <label>External Links</label>
+            <div class="links-list">
+              @for (link of newBook.links; track link.url; let i = $index) {
+                <div class="link-item">
+                  <span>{{ link.title }}: {{ link.url }}</span>
+                  <button type="button" (click)="removeLink(i, 'new')" class="btn btn-danger btn-sm">×</button>
+                </div>
+              }
+            </div>
+            <div class="link-add-form">
+              <input
+                type="text"
+                [(ngModel)]="newLinkTitle"
+                name="newLinkTitle"
+                placeholder="Link title (e.g., Goodreads)"
+              >
+              <input
+                type="url"
+                [(ngModel)]="newLinkUrl"
+                name="newLinkUrl"
+                placeholder="https://..."
+              >
+              <button type="button" (click)="addLink('new')" class="btn btn-secondary btn-sm">Add Link</button>
+            </div>
+          </div>
+
           <div class="form-actions">
             <button type="submit" class="btn btn-primary">Add Book</button>
             <button type="button" (click)="toggleAddForm()" class="btn btn-secondary">Cancel</button>
@@ -220,6 +266,52 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
             }
           </div>
 
+          <div class="form-group">
+            <label>Tags</label>
+            <div class="tags-input-container">
+              @for (tag of editBook.tags; track tag; let i = $index) {
+                <span class="tag">
+                  {{ tag }}
+                  <button type="button" (click)="removeTag(i, 'edit')" class="tag-remove">×</button>
+                </span>
+              }
+              <input
+                type="text"
+                [(ngModel)]="editTagInput"
+                name="editTagInput"
+                placeholder="Add a tag and press Enter"
+                (keydown.enter)="addTag('edit'); $event.preventDefault()"
+              >
+            </div>
+          </div>
+
+          <div class="form-group">
+            <label>External Links</label>
+            <div class="links-list">
+              @for (link of editBook.links; track link.url; let i = $index) {
+                <div class="link-item">
+                  <span>{{ link.title }}: {{ link.url }}</span>
+                  <button type="button" (click)="removeLink(i, 'edit')" class="btn btn-danger btn-sm">×</button>
+                </div>
+              }
+            </div>
+            <div class="link-add-form">
+              <input
+                type="text"
+                [(ngModel)]="editLinkTitle"
+                name="editLinkTitle"
+                placeholder="Link title (e.g., Goodreads)"
+              >
+              <input
+                type="url"
+                [(ngModel)]="editLinkUrl"
+                name="editLinkUrl"
+                placeholder="https://..."
+              >
+              <button type="button" (click)="addLink('edit')" class="btn btn-secondary btn-sm">Add Link</button>
+            </div>
+          </div>
+
           <div class="form-actions">
             <button type="submit" class="btn btn-primary">Save Changes</button>
             <button type="button" (click)="cancelEdit()" class="btn btn-secondary">Cancel</button>
@@ -375,6 +467,24 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
                   <p class="notes">{{ book.notes }}</p>
                 }
 
+                @if (book.tags && book.tags.length > 0) {
+                  <div class="tags-display">
+                    @for (tag of book.tags; track tag) {
+                      <span class="tag-chip">{{ tag }}</span>
+                    }
+                  </div>
+                }
+
+                @if (book.links && book.links.length > 0) {
+                  <div class="links-display">
+                    @for (link of book.links; track link.url) {
+                      <a [href]="link.url" target="_blank" rel="noopener noreferrer" class="external-link">
+                        {{ link.title }} ↗
+                      </a>
+                    }
+                  </div>
+                }
+
                 @if (book.dateFinished) {
                   <p class="date-finished">
                     Finished: {{ formatDate(book.dateFinished) }}
@@ -938,6 +1048,116 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
     input[type="file"]:hover {
       border-color: var(--witch-rose);
     }
+
+    .tags-input-container {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      padding: 0.5rem;
+      border: 2px solid var(--witch-lavender);
+      border-radius: 4px;
+      background: var(--witch-moon);
+    }
+
+    .tags-input-container input {
+      flex: 1;
+      min-width: 150px;
+      border: none;
+      padding: 0.25rem;
+      font-size: 0.9rem;
+      background: transparent;
+    }
+
+    .tags-input-container input:focus {
+      outline: none;
+    }
+
+    .tag {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.25rem;
+      background: #8b6f47;
+      color: white;
+      padding: 0.25rem 0.5rem;
+      border-radius: 4px;
+      font-size: 0.85rem;
+    }
+
+    .tag-remove {
+      background: none;
+      border: none;
+      color: white;
+      cursor: pointer;
+      padding: 0;
+      font-size: 1rem;
+      line-height: 1;
+    }
+
+    .tag-remove:hover {
+      opacity: 0.8;
+    }
+
+    .tags-display {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      margin: 0.5rem 0;
+    }
+
+    .tag-chip {
+      background: rgba(139, 111, 71, 0.2);
+      color: #8b6f47;
+      padding: 0.2rem 0.5rem;
+      border-radius: 4px;
+      font-size: 0.8rem;
+    }
+
+    .links-list {
+      margin-bottom: 0.5rem;
+    }
+
+    .link-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0.5rem;
+      background: var(--witch-moon);
+      border-radius: 4px;
+      margin-bottom: 0.25rem;
+    }
+
+    .link-add-form {
+      display: flex;
+      gap: 0.5rem;
+      flex-wrap: wrap;
+    }
+
+    .link-add-form input {
+      flex: 1;
+      min-width: 120px;
+    }
+
+    .links-display {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      margin: 0.5rem 0;
+    }
+
+    .external-link {
+      color: #8b6f47;
+      text-decoration: none;
+      font-size: 0.85rem;
+      padding: 0.2rem 0.5rem;
+      background: rgba(139, 111, 71, 0.1);
+      border-radius: 4px;
+      transition: background 0.2s;
+    }
+
+    .external-link:hover {
+      background: rgba(139, 111, 71, 0.2);
+      text-decoration: underline;
+    }
   `]
 })
 export class BooksListComponent implements OnInit {
@@ -1000,11 +1220,21 @@ export class BooksListComponent implements OnInit {
     isbn: '',
     status: BookStatus.toRead,
     rating: undefined,
-    notes: ''
+    notes: '',
+    tags: [],
+    links: []
   };
 
   editBook: Partial<UpdateBookDto> = {};
 
+  // Tags and links input state
+  newTagInput = '';
+  editTagInput = '';
+  newLinkTitle = '';
+  newLinkUrl = '';
+  editLinkTitle = '';
+  editLinkUrl = '';
+
   ngOnInit() {
     this.loadBooks();
   }
@@ -1049,10 +1279,60 @@ export class BooksListComponent implements OnInit {
       status: BookStatus.toRead,
       rating: undefined,
       notes: '',
-      coverImage: undefined
+      coverImage: undefined,
+      tags: [],
+      links: []
     };
     this.newBookImagePreview.set(null);
     this.imageError.set(null);
+    this.newTagInput = '';
+    this.newLinkTitle = '';
+    this.newLinkUrl = '';
+  }
+
+  addTag(target: 'new' | 'edit') {
+    const input = target === 'new' ? this.newTagInput.trim() : this.editTagInput.trim();
+    if (!input) return;
+
+    if (target === 'new') {
+      this.newBook.tags = [...(this.newBook.tags || []), input];
+      this.newTagInput = '';
+    } else {
+      this.editBook.tags = [...(this.editBook.tags || []), input];
+      this.editTagInput = '';
+    }
+  }
+
+  removeTag(index: number, target: 'new' | 'edit') {
+    if (target === 'new') {
+      this.newBook.tags = (this.newBook.tags || []).filter((_, i) => i !== index);
+    } else {
+      this.editBook.tags = (this.editBook.tags || []).filter((_, i) => i !== index);
+    }
+  }
+
+  addLink(target: 'new' | 'edit') {
+    const title = target === 'new' ? this.newLinkTitle.trim() : this.editLinkTitle.trim();
+    const url = target === 'new' ? this.newLinkUrl.trim() : this.editLinkUrl.trim();
+    if (!title || !url) return;
+
+    if (target === 'new') {
+      this.newBook.links = [...(this.newBook.links || []), { title, url }];
+      this.newLinkTitle = '';
+      this.newLinkUrl = '';
+    } else {
+      this.editBook.links = [...(this.editBook.links || []), { title, url }];
+      this.editLinkTitle = '';
+      this.editLinkUrl = '';
+    }
+  }
+
+  removeLink(index: number, target: 'new' | 'edit') {
+    if (target === 'new') {
+      this.newBook.links = (this.newBook.links || []).filter((_, i) => i !== index);
+    } else {
+      this.editBook.links = (this.editBook.links || []).filter((_, i) => i !== index);
+    }
   }
 
   addBook() {
@@ -1065,7 +1345,9 @@ export class BooksListComponent implements OnInit {
       status: this.newBook.status,
       rating: this.newBook.rating,
       notes: this.newBook.notes,
-      coverImage: this.newBook.coverImage
+      coverImage: this.newBook.coverImage,
+      tags: this.newBook.tags || [],
+      links: this.newBook.links || []
     };
 
     this.booksService.createBook(bookToAdd).subscribe(() => {
@@ -1091,11 +1373,16 @@ export class BooksListComponent implements OnInit {
       status: book.status,
       rating: book.rating,
       notes: book.notes,
-      coverImage: book.coverImage
+      coverImage: book.coverImage,
+      tags: [...(book.tags || [])],
+      links: [...(book.links || [])]
     };
     this.editBookImagePreview.set(book.coverImage || null);
     this.showAddForm.set(false);
     this.imageError.set(null);
+    this.editTagInput = '';
+    this.editLinkTitle = '';
+    this.editLinkUrl = '';
   }
 
   cancelEdit() {
@@ -1103,6 +1390,9 @@ export class BooksListComponent implements OnInit {
     this.editBook = {};
     this.editBookImagePreview.set(null);
     this.imageError.set(null);
+    this.editTagInput = '';
+    this.editLinkTitle = '';
+    this.editLinkUrl = '';
   }
 
   saveEdit() {