feat: add tags and links

2026-02-04 19:49:27 -08:00
parent 9902c5ad45
commit b9f33bc055
21 changed files with 1873 additions and 31 deletions
@@ -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 { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, SuggestionEntity } from '@library/shared-types';
+import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, SuggestionEntity, Link } from '@library/shared-types';

@Component({
  selector: 'app-manga-list',
@@ -112,6 +112,52 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
            }
          </div>

+          <div class="form-group">
+            <label>Tags</label>
+            <div class="tags-input-container">
+              @for (tag of newManga.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 newManga.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., MyAnimeList)"
+              >
+              <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 Manga</button>
            <button type="button" (click)="toggleAddForm()" class="btn btn-secondary">Cancel</button>
@@ -198,6 +244,52 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
            }
          </div>

+          <div class="form-group">
+            <label>Tags</label>
+            <div class="tags-input-container">
+              @for (tag of editManga.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 editManga.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., MyAnimeList)"
+              >
+              <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>
@@ -335,6 +427,24 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
                  <p class="notes">{{ manga.notes }}</p>
                }

+                @if (manga.tags && manga.tags.length > 0) {
+                  <div class="tags-display">
+                    @for (tag of manga.tags; track tag) {
+                      <span class="tag-chip">{{ tag }}</span>
+                    }
+                  </div>
+                }
+
+                @if (manga.links && manga.links.length > 0) {
+                  <div class="links-display">
+                    @for (link of manga.links; track link.url) {
+                      <a [href]="link.url" target="_blank" rel="noopener noreferrer" class="external-link">
+                        {{ link.title }} ↗
+                      </a>
+                    }
+                  </div>
+                }
+
                @if (authService.isAdmin()) {
                  <div class="actions">
                    <button (click)="startEdit(manga)" class="btn btn-secondary btn-sm">
@@ -801,6 +911,116 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
    input[type="file"]:hover {
      border-color: #ec4899;
    }
+
+    .tags-input-container {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      padding: 0.5rem;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      background: #f9fafb;
+    }
+
+    .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: #00b894;
+      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(0, 184, 148, 0.2);
+      color: #00b894;
+      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: #f9fafb;
+      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: #00b894;
+      text-decoration: none;
+      font-size: 0.85rem;
+      padding: 0.2rem 0.5rem;
+      background: rgba(0, 184, 148, 0.1);
+      border-radius: 4px;
+      transition: background 0.2s;
+    }
+
+    .external-link:hover {
+      background: rgba(0, 184, 148, 0.2);
+      text-decoration: underline;
+    }
  `]
 })
 export class MangaListComponent implements OnInit {
@@ -857,11 +1077,21 @@ export class MangaListComponent implements OnInit {
    author: '',
    status: MangaStatus.wantToRead,
    rating: undefined,
-    notes: ''
+    notes: '',
+    tags: [],
+    links: []
  };

  editManga: Partial<UpdateMangaDto> = {};

+  // Tags and links input state
+  newTagInput = '';
+  editTagInput = '';
+  newLinkTitle = '';
+  newLinkUrl = '';
+  editLinkTitle = '';
+  editLinkUrl = '';
+
  ngOnInit() {
    this.loadManga();
  }
@@ -905,10 +1135,60 @@ export class MangaListComponent implements OnInit {
      status: MangaStatus.wantToRead,
      rating: undefined,
      notes: '',
-      coverImage: undefined
+      coverImage: undefined,
+      tags: [],
+      links: []
    };
    this.newMangaImagePreview.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.newManga.tags = [...(this.newManga.tags || []), input];
+      this.newTagInput = '';
+    } else {
+      this.editManga.tags = [...(this.editManga.tags || []), input];
+      this.editTagInput = '';
+    }
+  }
+
+  removeTag(index: number, target: 'new' | 'edit') {
+    if (target === 'new') {
+      this.newManga.tags = (this.newManga.tags || []).filter((_, i) => i !== index);
+    } else {
+      this.editManga.tags = (this.editManga.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.newManga.links = [...(this.newManga.links || []), { title, url }];
+      this.newLinkTitle = '';
+      this.newLinkUrl = '';
+    } else {
+      this.editManga.links = [...(this.editManga.links || []), { title, url }];
+      this.editLinkTitle = '';
+      this.editLinkUrl = '';
+    }
+  }
+
+  removeLink(index: number, target: 'new' | 'edit') {
+    if (target === 'new') {
+      this.newManga.links = (this.newManga.links || []).filter((_, i) => i !== index);
+    } else {
+      this.editManga.links = (this.editManga.links || []).filter((_, i) => i !== index);
+    }
  }

  addManga() {
@@ -920,7 +1200,9 @@ export class MangaListComponent implements OnInit {
      status: this.newManga.status,
      rating: this.newManga.rating,
      notes: this.newManga.notes,
-      coverImage: this.newManga.coverImage
+      coverImage: this.newManga.coverImage,
+      tags: this.newManga.tags || [],
+      links: this.newManga.links || []
    };

    this.mangaService.createManga(mangaToAdd).subscribe(() => {
@@ -945,11 +1227,16 @@ export class MangaListComponent implements OnInit {
      status: manga.status,
      rating: manga.rating,
      notes: manga.notes,
-      coverImage: manga.coverImage
+      coverImage: manga.coverImage,
+      tags: [...(manga.tags || [])],
+      links: [...(manga.links || [])]
    };
    this.editMangaImagePreview.set(manga.coverImage || null);
    this.showAddForm.set(false);
    this.imageError.set(null);
+    this.editTagInput = '';
+    this.editLinkTitle = '';
+    this.editLinkUrl = '';
  }

  cancelEdit() {
@@ -957,6 +1244,9 @@ export class MangaListComponent implements OnInit {
    this.editManga = {};
    this.editMangaImagePreview.set(null);
    this.imageError.set(null);
+    this.editTagInput = '';
+    this.editLinkTitle = '';
+    this.editLinkUrl = '';
  }

  saveEdit() {