ItsSkaiya/WaifuBoard
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 8 Wiki Activity

enhanced list modal and fixes

Browse Source
This commit is contained in:
lenafx
2025-12-27 20:35:57 +01:00
parent 4bca41f6a2
commit 295cab93f3
25 changed files with 191 additions and 761 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
desktop/src/scripts/anime/anime.js
View File

@@ -64,7 +64,7 @@ async function loadAnime() {
}
animeData = data;
animeData.entry_type = 'ANIME';
const metadata = MediaMetadataUtils.formatAnimeData(data, !!extensionName);
updatePageTitle(metadata.title);

1
desktop/src/scripts/anime/animes.js
View File

@@ -92,6 +92,7 @@ function startHeroCycle() {
async function updateHeroUI(anime) {
if(!anime) return;
anime.entry_type = 'ANIME';
const title = anime.title.english || anime.title.romaji || "Unknown Title";
const score = anime.averageScore ? anime.averageScore + '% Match' : 'N/A';

3
desktop/src/scripts/books/book.js
View File

@@ -69,7 +69,8 @@ async function loadBookMetadata() {
bookData = raw;
const metadata = MediaMetadataUtils.formatBookData(raw, !!extensionName);
bookData.entry_type =
metadata.format === 'MANGA' ? 'MANGA' : 'NOVEL';
updatePageTitle(metadata.title);
updateMetadata(metadata);
updateExtensionPill();

3
desktop/src/scripts/books/books.js
View File

@@ -55,7 +55,8 @@ function startHeroCycle() {
async function updateHeroUI(book) {
if(!book) return;
book.entry_type =
book.format === 'MANGA' ? 'MANGA' : 'NOVEL';
const title = book.title.english || book.title.romaji;
const desc = book.description || "No description available.";
const poster = (book.coverImage && (book.coverImage.extraLarge || book.coverImage.large)) || '';

2
desktop/src/scripts/gallery/gallery.js
View File

@@ -299,7 +299,7 @@ async function searchGallery(isLoadMore = false) {
const msg = favoritesMode
? (query ? 'No favorites found matching your search' : 'You don\'t have any favorite images yet')
: 'No results found';
resultsContainer.innerHTML = `<p style="text-align:center;color:var(--text-secondary);padding:4rem;font-size:1.1rem;">${msg}</p>`;
resultsContainer.innerHTML = `<p style="text-align:center;color:var(--color-text-secondary);padding:4rem;font-size:1.1rem;">${msg}</p>`;
}
if (msnry) msnry.layout();

2
desktop/src/scripts/list.js
View File

@@ -284,7 +284,7 @@ function createListItem(item) {
const itemLink = getEntryLink(item);
const posterUrl = item.poster || '/public/assets/placeholder.png';
const posterUrl = item.poster || '/public/assets/placeholder.svg';
const progress = item.progress || 0;
const totalUnits = item.entry_type === 'ANIME' ?

20
desktop/src/scripts/utils/list-modal-manager.js
View File

@@ -83,7 +83,7 @@ const ListModalManager = {
document.getElementById('progress-label');
if (this.isInList && this.currentEntry) {
document.getElementById('entry-status').value = this.currentEntry.status || 'PLANNING';
document.getElementById('entry-status').value = this.normalizeStatus(this.currentEntry.status);
document.getElementById('entry-progress').value = this.currentEntry.progress || 0;
document.getElementById('entry-score').value = this.currentEntry.score || '';
document.getElementById('entry-start-date').value = this.currentEntry.start_date?.split('T')[0] || '';
@@ -131,6 +131,12 @@ const ListModalManager = {
document.getElementById('add-list-modal').classList.add('active');
},
normalizeStatus(status) {
if (!status) return 'PLANNING';
if (status === 'WATCHING' || status === 'READING') return 'CURRENT';
return status;
},
close() {
document.getElementById('add-list-modal').classList.remove('active');
},
@@ -212,15 +218,21 @@ const ListModalManager = {
}
};
document.addEventListener('DOMContentLoaded', () => {
async function loadListModal() {
if (document.getElementById('add-list-modal')) return;
const res = await fetch('/views/components/list-modal.html');
const html = await res.text();
document.body.insertAdjacentHTML('beforeend', html);
const modal = document.getElementById('add-list-modal');
if (modal) {
modal.addEventListener('click', (e) => {
if (e.target.id === 'add-list-modal') {
ListModalManager.close();
}
});
}
});
document.addEventListener('DOMContentLoaded', loadListModal);
window.ListModalManager = ListModalManager;

69
desktop/views/anime/anime.html
View File

@@ -34,75 +34,6 @@
</div>
</div>
<div class="modal-overlay" id="add-list-modal">
<div class="modal-content modal-list">
<button class="modal-close" onclick="closeAddToListModal()">✕</button>
<h2 class="modal-title" id="modal-title">Add to List</h2>
<div class="modal-body">
<div class="modal-fields-grid">
<div class="form-group">
<label>Status</label>
<select id="entry-status" class="form-input">
<option value="WATCHING">Watching</option>
<option value="COMPLETED">Completed</option>
<option value="PLANNING">Planning</option>
<option value="PAUSED">Paused</option>
<option value="DROPPED">Dropped</option>
<option value="REPEATING">Rewatching</option>
</select>
</div>
<div class="form-group">
<label>Episodes Watched</label>
<input type="number" id="entry-progress" class="form-input" min="0" placeholder="0">
</div>
<div class="form-group">
<label>Your Score (0-10)</label>
<input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
</div>
<div class="form-group full-width">
<div class="date-group">
<div class="date-input-pair">
<label for="entry-start-date">Start Date</label>
<input type="date" id="entry-start-date" class="form-input">
</div>
<div class="date-input-pair">
<label for="entry-end-date">End Date</label>
<input type="date" id="entry-end-date" class="form-input">
</div>
</div>
</div>
<div class="form-group">
<label for="entry-repeat-count">Rewatch Count</label>
<input type="number" id="entry-repeat-count" class="form-input" min="0">
</div>
<div class="form-group notes-group">
<label for="entry-notes">Notes</label>
<textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
</div>
<div class="form-group checkbox-group">
<input type="checkbox" id="entry-is-private" class="form-checkbox">
<label for="entry-is-private">Mark as Private</label>
</div>
</div>
</div>
<div class="modal-actions">
<button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
<button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
<button class="btn-primary" onclick="saveToList()">Save Changes</button>
</div>
</div>
</div>
<a href="/anime" class="back-btn">
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
Back to Home

67
desktop/views/anime/animes.html
View File

@@ -157,73 +157,6 @@
</section>
</main>
<div class="modal-overlay" id="add-list-modal">
<div class="modal-content modal-list">
<button class="modal-close" onclick="closeAddToListModal()">✕</button>
<h2 class="modal-title" id="modal-title">Add to List</h2>
<div class="modal-body">
<div class="modal-fields-grid">
<div class="form-group">
<label>Status</label>
<select id="entry-status" class="form-input">
<option value="WATCHING"><Watchi></Watchi>ng/Reading</option>
<option value="COMPLETED">Completed</option>
<option value="PLANNING">Planning</option>
<option value="PAUSED">Paused</option>
<option value="DROPPED">Dropped</option>
<option value="REPEATING">Rewatching</option>
</select>
</div>
<div class="form-group">
<label>Episodes Watched</label>
<input type="number" id="entry-progress" class="form-input" min="0" placeholder="0">
</div>
<div class="form-group">
<label>Your Score (0-10)</label>
<input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
</div>
<div class="form-group full-width">
<div class="date-group">
<div class="date-input-pair">
<label for="entry-start-date">Start Date</label>
<input type="date" id="entry-start-date" class="form-input">
</div>
<div class="date-input-pair">
<label for="entry-end-date">End Date</label>
<input type="date" id="entry-end-date" class="form-input">
</div>
</div>
</div>
<div class="form-group">
<label for="entry-repeat-count">Rewatch Count</label>
<input type="number" id="entry-repeat-count" class="form-input" min="0">
</div>
<div class="form-group notes-group">
<label for="entry-notes">Notes</label>
<textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
</div>
<div class="form-group checkbox-group">
<input type="checkbox" id="entry-is-private" class="form-checkbox">
<label for="entry-is-private">Mark as Private</label>
</div>
</div>
</div>
<div class="modal-actions">
<button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
<button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
<button class="btn-primary" onclick="saveToList()">Save Changes</button>
</div>
</div>
</div>
<div id="updateToast" class="hidden">
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
<a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">

66
desktop/views/books/book.html
View File

@@ -25,72 +25,6 @@
</div>
</div>
<div class="modal-overlay" id="add-list-modal">
<div class="modal-content">
<button class="modal-close" onclick="closeAddToListModal()">✕</button>
<h2 class="modal-title" id="modal-title">Add to Library</h2>
<div class="modal-body">
<div class="modal-fields-grid">
<div class="form-group">
<label for="entry-status">Status</label>
<select id="entry-status" class="form-input">
<option value="CURRENT">Reading</option>
<option value="COMPLETED">Completed</option>
<option value="PLANNING">Plan to Read</option>
<option value="PAUSED">Paused</option>
<option value="DROPPED">Dropped</option>
<option value="REPEATING">Rereading</option>
</select>
</div>
<div class="form-group">
<label for="entry-progress" id="progress-label">Chapters Read</label>
<input type="number" id="entry-progress" class="form-input" min="0" max="0" placeholder="0">
</div>
<div class="form-group">
<label for="entry-score">Score (0-10)</label>
<input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
</div>
<div class="form-group full-width date-group">
<div class="date-input-pair">
<label for="entry-start-date">Start Date</label>
<input type="date" id="entry-start-date" class="form-input">
</div>
<div class="date-input-pair">
<label for="entry-end-date">End Date</label>
<input type="date" id="entry-end-date" class="form-input">
</div>
</div>
<div class="form-group">
<label for="entry-repeat-count">Re-read Count</label>
<input type="number" id="entry-repeat-count" class="form-input" min="0">
</div>
<div class="form-group notes-group">
<label for="entry-notes">Notes</label>
<textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
</div>
<div class="form-group checkbox-group">
<input type="checkbox" id="entry-is-private" class="form-checkbox">
<label for="entry-is-private">Mark as Private</label>
</div>
</div>
</div>
<div class="modal-actions">
<button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
<button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
<button class="btn-primary" onclick="saveToList()">Save Changes</button>
</div>
</div>
</div>
<a href="/books" class="back-btn">
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
Back to Books

66
desktop/views/books/books.html
View File

@@ -51,72 +51,6 @@
</div>
</div>
<div class="modal-overlay" id="add-list-modal">
<div class="modal-content modal-list">
<button class="modal-close" onclick="closeAddToListModal()">✕</button>
<h2 class="modal-title" id="modal-title">Add to Library</h2>
<div class="modal-body">
<div class="modal-fields-grid">
<div class="form-group">
<label for="entry-status">Status</label>
<select id="entry-status" class="form-input">
<option value="CURRENT">Reading</option>
<option value="COMPLETED">Completed</option>
<option value="PLANNING">Plan to Read</option>
<option value="PAUSED">Paused</option>
<option value="DROPPED">Dropped</option>
<option value="REPEATING">Rereading</option>
</select>
</div>
<div class="form-group">
<label for="entry-progress" id="progress-label">Chapters Read</label>
<input type="number" id="entry-progress" class="form-input" min="0" max="0" placeholder="0">
</div>
<div class="form-group">
<label for="entry-score">Score (0-10)</label>
<input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
</div>
<div class="form-group full-width date-group">
<div class="date-input-pair">
<label for="entry-start-date">Start Date</label>
<input type="date" id="entry-start-date" class="form-input">
</div>
<div class="date-input-pair">
<label for="entry-end-date">End Date</label>
<input type="date" id="entry-end-date" class="form-input">
</div>
</div>
<div class="form-group">
<label for="entry-repeat-count">Re-read Count</label>
<input type="number" id="entry-repeat-count" class="form-input" min="0">
</div>
<div class="form-group notes-group">
<label for="entry-notes">Notes</label>
<textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
</div>
<div class="form-group checkbox-group">
<input type="checkbox" id="entry-is-private" class="form-checkbox">
<label for="entry-is-private">Mark as Private</label>
</div>
</div>
</div>
<div class="modal-actions">
<button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
<button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
<button class="btn-primary" onclick="saveToList()">Save Changes</button>
</div>
</div>
</div>
<main>
<section class="section">
<div class="section-header">

66
desktop/views/components/list-modal.html Normal file
View File

@@ -0,0 +1,66 @@
<div class="modal-overlay" id="add-list-modal">
<div class="modal-content modal-list">
<button class="modal-close" onclick="closeAddToListModal()">✕</button>
<h2 class="modal-title" id="modal-title">Add to List</h2>
<div class="modal-body">
<div class="modal-fields-grid">
<div class="form-group">
<label>Status</label>
<select id="entry-status" class="form-input">
<option value="CURRENT">Watching/Reading</option>
<option value="COMPLETED">Completed</option>
<option value="PLANNING">Planning</option>
<option value="PAUSED">Paused</option>
<option value="DROPPED">Dropped</option>
<option value="REPEATING">Rewatching</option>
</select>
</div>
<div class="form-group">
<label>Episodes Watched</label>
<input type="number" id="entry-progress" class="form-input" min="0" placeholder="0">
</div>
<div class="form-group">
<label>Your Score (0-10)</label>
<input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
</div>
<div class="form-group full-width">
<div class="date-group">
<div class="date-input-pair">
<label for="entry-start-date">Start Date</label>
<input type="date" id="entry-start-date" class="form-input">
</div>
<div class="date-input-pair">
<label for="entry-end-date">End Date</label>
<input type="date" id="entry-end-date" class="form-input">
</div>
</div>
</div>
<div class="form-group">
<label for="entry-repeat-count">Rewatch Count</label>
<input type="number" id="entry-repeat-count" class="form-input" min="0">
</div>
<div class="form-group notes-group">
<label for="entry-notes">Notes</label>
<textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
</div>
<div class="form-group checkbox-group">
<input type="checkbox" id="entry-is-private" class="form-checkbox">
<label for="entry-is-private">Mark as Private</label>
</div>
</div>
</div>
<div class="modal-actions">
<button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
<button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
<button class="btn-primary" onclick="saveToList()">Save Changes</button>
</div>
</div>
</div>

71
desktop/views/list.html
View File

@@ -127,77 +127,6 @@
<div id="list-container" class="list-grid"></div>
</div>
<div class="modal-overlay" id="add-list-modal">
<div class="modal-content">
<button class="modal-close" onclick="window.ListModalManager.close()">✕</button>
<h2 class="modal-title" id="modal-title">Edit List Entry</h2>
<div class="modal-body">
<div class="modal-fields-grid">
<div class="form-group">
<label>Status</label>
<select id="entry-status" class="form-input">
<option value="CURRENT">Current</option>
<option value="COMPLETED">Completed</option>
<option value="PLANNING">Planning</option>
<option value="PAUSED">Paused</option>
<option value="DROPPED">Dropped</option>
<option value="REPEATING">Rewatching/Rereading</option>
</select>
</div>
<div class="form-group">
<label for="entry-progress" id="progress-label">Progress</label>
<input type="number" id="entry-progress" class="form-input" min="0">
</div>
<div class="form-group">
<label>Score (0-10)</label>
<input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1">
</div>
<div class="form-group full-width">
<div class="date-group">
<div class="date-input-pair">
<label for="entry-start-date">Start Date</label>
<input type="date" id="entry-start-date" class="form-input">
</div>
<div class="date-input-pair">
<label for="entry-end-date">End Date</label>
<input type="date" id="entry-end-date" class="form-input">
</div>
</div>
</div>
<div class="form-group">
<label for="entry-repeat-count">Repeat Count</label>
<input type="number" id="entry-repeat-count" class="form-input" min="0">
</div>
<div class="form-group notes-group">
<label for="entry-notes">Notes</label>
<textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
</div>
<div class="form-group checkbox-group">
<input type="checkbox" id="entry-is-private" class="form-checkbox">
<label for="entry-is-private">Mark as Private</label>
</div>
</div>
</div>
<div class="modal-actions">
<button class="btn-secondary" onclick="window.ListModalManager.close()">Cancel</button>
<button class="btn-danger" id="modal-delete-btn" style="display:none;">Delete</button>
<button class="btn-primary" id="modal-save-btn">Save Changes</button>
</div>
</div>
</div>
<div id="updateToast" class="hidden">
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
<a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">

2
docker/src/scripts/anime/anime.js
View File

@@ -63,7 +63,7 @@ async function loadAnime() {
}
animeData = data;
animeData.entry_type = 'ANIME';
const metadata = MediaMetadataUtils.formatAnimeData(data, !!extensionName);
updatePageTitle(metadata.title);

1
docker/src/scripts/anime/animes.js
View File

@@ -92,6 +92,7 @@ function startHeroCycle() {
async function updateHeroUI(anime) {
if(!anime) return;
anime.entry_type = 'ANIME';
const title = anime.title.english || anime.title.romaji || "Unknown Title";
const score = anime.averageScore ? anime.averageScore + '% Match' : 'N/A';

2
docker/src/scripts/books/book.js
View File

@@ -69,6 +69,8 @@ async function loadBookMetadata() {
bookData = raw;
const metadata = MediaMetadataUtils.formatBookData(raw, !!extensionName);
bookData.entry_type =
metadata.format === 'MANGA' ? 'MANGA' : 'NOVEL';
updatePageTitle(metadata.title);
updateMetadata(metadata);

3
docker/src/scripts/books/books.js
View File

@@ -55,7 +55,8 @@ function startHeroCycle() {
async function updateHeroUI(book) {
if(!book) return;
book.entry_type =
book.format === 'MANGA' ? 'MANGA' : 'NOVEL';
const title = book.title.english || book.title.romaji;
const desc = book.description || "No description available.";
const poster = (book.coverImage && (book.coverImage.extraLarge || book.coverImage.large)) || '';

2
docker/src/scripts/gallery/gallery.js
View File

@@ -299,7 +299,7 @@ async function searchGallery(isLoadMore = false) {
const msg = favoritesMode
? (query ? 'No favorites found matching your search' : 'You don\'t have any favorite images yet')
: 'No results found';
resultsContainer.innerHTML = `<p style="text-align:center;color:var(--text-secondary);padding:4rem;font-size:1.1rem;">${msg}</p>`;
resultsContainer.innerHTML = `<p style="text-align:center;color:var(--color-text-secondary);padding:4rem;font-size:1.1rem;">${msg}</p>`;
}
if (msnry) msnry.layout();

20
docker/src/scripts/utils/list-modal-manager.js
View File

@@ -83,7 +83,7 @@ const ListModalManager = {
document.getElementById('progress-label');
if (this.isInList && this.currentEntry) {
document.getElementById('entry-status').value = this.currentEntry.status || 'PLANNING';
document.getElementById('entry-status').value = this.normalizeStatus(this.currentEntry.status);
document.getElementById('entry-progress').value = this.currentEntry.progress || 0;
document.getElementById('entry-score').value = this.currentEntry.score || '';
document.getElementById('entry-start-date').value = this.currentEntry.start_date?.split('T')[0] || '';
@@ -131,6 +131,12 @@ const ListModalManager = {
document.getElementById('add-list-modal').classList.add('active');
},
normalizeStatus(status) {
if (!status) return 'PLANNING';
if (status === 'WATCHING' || status === 'READING') return 'CURRENT';
return status;
},
close() {
document.getElementById('add-list-modal').classList.remove('active');
},
@@ -212,15 +218,21 @@ const ListModalManager = {
}
};
document.addEventListener('DOMContentLoaded', () => {
async function loadListModal() {
if (document.getElementById('add-list-modal')) return;
const res = await fetch('/views/components/list-modal.html');
const html = await res.text();
document.body.insertAdjacentHTML('beforeend', html);
const modal = document.getElementById('add-list-modal');
if (modal) {
modal.addEventListener('click', (e) => {
if (e.target.id === 'add-list-modal') {
ListModalManager.close();
}
});
}
});
document.addEventListener('DOMContentLoaded', loadListModal);
window.ListModalManager = ListModalManager;

124
docker/views/anime/anime.html
View File

@@ -27,130 +27,6 @@
</div>
</div>
<div class="modal-overlay" id="add-list-modal">
<div class="modal-content modal-list">
<button class="modal-close" onclick="closeAddToListModal()">
✕
</button>
<h2 class="modal-title" id="modal-title">Add to List</h2>
<div class="modal-body">
<div class="modal-fields-grid">
<div class="form-group">
<label>Status</label>
<select id="entry-status" class="form-input">
<option value="WATCHING">Watching</option>
<option value="COMPLETED">Completed</option>
<option value="PLANNING">Planning</option>
<option value="PAUSED">Paused</option>
<option value="DROPPED">Dropped</option>
<option value="REPEATING">Rewatching</option>
</select>
</div>
<div class="form-group">
<label>Episodes Watched</label>
<input
type="number"
id="entry-progress"
class="form-input"
min="0"
placeholder="0"
/>
</div>
<div class="form-group">
<label>Your Score (0-10)</label>
<input
type="number"
id="entry-score"
class="form-input"
min="0"
max="10"
step="0.1"
placeholder="Optional"
/>
</div>
<div class="form-group full-width">
<div class="date-group">
<div class="date-input-pair">
<label for="entry-start-date"
>Start Date</label
>
<input
type="date"
id="entry-start-date"
class="form-input"
/>
</div>
<div class="date-input-pair">
<label for="entry-end-date">End Date</label>
<input
type="date"
id="entry-end-date"
class="form-input"
/>
</div>
</div>
</div>
<div class="form-group">
<label for="entry-repeat-count"
>Rewatch Count</label
>
<input
type="number"
id="entry-repeat-count"
class="form-input"
min="0"
/>
</div>
<div class="form-group notes-group">
<label for="entry-notes">Notes</label>
<textarea
id="entry-notes"
class="form-input notes-textarea"
rows="4"
placeholder="Personal notes..."
></textarea>
</div>
<div class="form-group checkbox-group">
<input
type="checkbox"
id="entry-is-private"
class="form-checkbox"
/>
<label for="entry-is-private"
>Mark as Private</label
>
</div>
</div>
</div>
<div class="modal-actions">
<button
class="btn-danger"
id="modal-delete-btn"
onclick="deleteFromList()"
>
Remove
</button>
<button
class="btn-secondary"
onclick="closeAddToListModal()"
>
Cancel
</button>
<button class="btn-primary" onclick="saveToList()">
Save Changes
</button>
</div>
</div>
</div>
<a href="/anime" class="back-btn">
<svg
width="20"

67
docker/views/anime/animes.html
View File

@@ -143,73 +143,6 @@
</section>
</main>
<div class="modal-overlay" id="add-list-modal">
<div class="modal-content modal-list">
<button class="modal-close" onclick="closeAddToListModal()">✕</button>
<h2 class="modal-title" id="modal-title">Add to List</h2>
<div class="modal-body">
<div class="modal-fields-grid">
<div class="form-group">
<label>Status</label>
<select id="entry-status" class="form-input">
<option value="WATCHING"><Watchi></Watchi>ng/Reading</option>
<option value="COMPLETED">Completed</option>
<option value="PLANNING">Planning</option>
<option value="PAUSED">Paused</option>
<option value="DROPPED">Dropped</option>
<option value="REPEATING">Rewatching</option>
</select>
</div>
<div class="form-group">
<label>Episodes Watched</label>
<input type="number" id="entry-progress" class="form-input" min="0" placeholder="0">
</div>
<div class="form-group">
<label>Your Score (0-10)</label>
<input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
</div>
<div class="form-group full-width">
<div class="date-group">
<div class="date-input-pair">
<label for="entry-start-date">Start Date</label>
<input type="date" id="entry-start-date" class="form-input">
</div>
<div class="date-input-pair">
<label for="entry-end-date">End Date</label>
<input type="date" id="entry-end-date" class="form-input">
</div>
</div>
</div>
<div class="form-group">
<label for="entry-repeat-count">Rewatch Count</label>
<input type="number" id="entry-repeat-count" class="form-input" min="0">
</div>
<div class="form-group notes-group">
<label for="entry-notes">Notes</label>
<textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
</div>
<div class="form-group checkbox-group">
<input type="checkbox" id="entry-is-private" class="form-checkbox">
<label for="entry-is-private">Mark as Private</label>
</div>
</div>
</div>
<div class="modal-actions">
<button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
<button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
<button class="btn-primary" onclick="saveToList()">Save Changes</button>
</div>
</div>
</div>
<div id="updateToast" class="hidden">
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
<a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">

66
docker/views/books/book.html
View File

@@ -13,72 +13,6 @@
</head>
<body>
<div class="modal-overlay" id="add-list-modal">
<div class="modal-content">
<button class="modal-close" onclick="closeAddToListModal()">✕</button>
<h2 class="modal-title" id="modal-title">Add to Library</h2>
<div class="modal-body">
<div class="modal-fields-grid">
<div class="form-group">
<label for="entry-status">Status</label>
<select id="entry-status" class="form-input">
<option value="CURRENT">Reading</option>
<option value="COMPLETED">Completed</option>
<option value="PLANNING">Plan to Read</option>
<option value="PAUSED">Paused</option>
<option value="DROPPED">Dropped</option>
<option value="REPEATING">Rereading</option>
</select>
</div>
<div class="form-group">
<label for="entry-progress" id="progress-label">Chapters Read</label>
<input type="number" id="entry-progress" class="form-input" min="0" max="0" placeholder="0">
</div>
<div class="form-group">
<label for="entry-score">Score (0-10)</label>
<input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
</div>
<div class="form-group full-width date-group">
<div class="date-input-pair">
<label for="entry-start-date">Start Date</label>
<input type="date" id="entry-start-date" class="form-input">
</div>
<div class="date-input-pair">
<label for="entry-end-date">End Date</label>
<input type="date" id="entry-end-date" class="form-input">
</div>
</div>
<div class="form-group">
<label for="entry-repeat-count">Re-read Count</label>
<input type="number" id="entry-repeat-count" class="form-input" min="0">
</div>
<div class="form-group notes-group">
<label for="entry-notes">Notes</label>
<textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
</div>
<div class="form-group checkbox-group">
<input type="checkbox" id="entry-is-private" class="form-checkbox">
<label for="entry-is-private">Mark as Private</label>
</div>
</div>
</div>
<div class="modal-actions">
<button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
<button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
<button class="btn-primary" onclick="saveToList()">Save Changes</button>
</div>
</div>
</div>
<a href="/books" class="back-btn">
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
Back to Books

66
docker/views/books/books.html
View File

@@ -38,72 +38,6 @@
</div>
</div>
<div class="modal-overlay" id="add-list-modal">
<div class="modal-content modal-list">
<button class="modal-close" onclick="closeAddToListModal()">✕</button>
<h2 class="modal-title" id="modal-title">Add to Library</h2>
<div class="modal-body">
<div class="modal-fields-grid">
<div class="form-group">
<label for="entry-status">Status</label>
<select id="entry-status" class="form-input">
<option value="CURRENT">Reading</option>
<option value="COMPLETED">Completed</option>
<option value="PLANNING">Plan to Read</option>
<option value="PAUSED">Paused</option>
<option value="DROPPED">Dropped</option>
<option value="REPEATING">Rereading</option>
</select>
</div>
<div class="form-group">
<label for="entry-progress" id="progress-label">Chapters Read</label>
<input type="number" id="entry-progress" class="form-input" min="0" max="0" placeholder="0">
</div>
<div class="form-group">
<label for="entry-score">Score (0-10)</label>
<input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
</div>
<div class="form-group full-width date-group">
<div class="date-input-pair">
<label for="entry-start-date">Start Date</label>
<input type="date" id="entry-start-date" class="form-input">
</div>
<div class="date-input-pair">
<label for="entry-end-date">End Date</label>
<input type="date" id="entry-end-date" class="form-input">
</div>
</div>
<div class="form-group">
<label for="entry-repeat-count">Re-read Count</label>
<input type="number" id="entry-repeat-count" class="form-input" min="0">
</div>
<div class="form-group notes-group">
<label for="entry-notes">Notes</label>
<textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
</div>
<div class="form-group checkbox-group">
<input type="checkbox" id="entry-is-private" class="form-checkbox">
<label for="entry-is-private">Mark as Private</label>
</div>
</div>
</div>
<div class="modal-actions">
<button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
<button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
<button class="btn-primary" onclick="saveToList()">Save Changes</button>
</div>
</div>
</div>
<main>
<section class="section">
<div class="section-header">

66
docker/views/components/list-modal.html Normal file
View File

@@ -0,0 +1,66 @@
<div class="modal-overlay" id="add-list-modal">
<div class="modal-content modal-list">
<button class="modal-close" onclick="closeAddToListModal()">✕</button>
<h2 class="modal-title" id="modal-title">Add to List</h2>
<div class="modal-body">
<div class="modal-fields-grid">
<div class="form-group">
<label>Status</label>
<select id="entry-status" class="form-input">
<option value="CURRENT">Watching/Reading</option>
<option value="COMPLETED">Completed</option>
<option value="PLANNING">Planning</option>
<option value="PAUSED">Paused</option>
<option value="DROPPED">Dropped</option>
<option value="REPEATING">Rewatching</option>
</select>
</div>
<div class="form-group">
<label>Episodes Watched</label>
<input type="number" id="entry-progress" class="form-input" min="0" placeholder="0">
</div>
<div class="form-group">
<label>Your Score (0-10)</label>
<input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
</div>
<div class="form-group full-width">
<div class="date-group">
<div class="date-input-pair">
<label for="entry-start-date">Start Date</label>
<input type="date" id="entry-start-date" class="form-input">
</div>
<div class="date-input-pair">
<label for="entry-end-date">End Date</label>
<input type="date" id="entry-end-date" class="form-input">
</div>
</div>
</div>
<div class="form-group">
<label for="entry-repeat-count">Rewatch Count</label>
<input type="number" id="entry-repeat-count" class="form-input" min="0">
</div>
<div class="form-group notes-group">
<label for="entry-notes">Notes</label>
<textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
</div>
<div class="form-group checkbox-group">
<input type="checkbox" id="entry-is-private" class="form-checkbox">
<label for="entry-is-private">Mark as Private</label>
</div>
</div>
</div>
<div class="modal-actions">
<button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
<button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
<button class="btn-primary" onclick="saveToList()">Save Changes</button>
</div>
</div>
</div>

71
docker/views/list.html
View File

@@ -115,77 +115,6 @@
<div id="list-container" class="list-grid"></div>
</div>
<div class="modal-overlay" id="add-list-modal">
<div class="modal-content">
<button class="modal-close" onclick="window.ListModalManager.close()">✕</button>
<h2 class="modal-title" id="modal-title">Edit List Entry</h2>
<div class="modal-body">
<div class="modal-fields-grid">
<div class="form-group">
<label>Status</label>
<select id="entry-status" class="form-input">
<option value="CURRENT">Current</option>
<option value="COMPLETED">Completed</option>
<option value="PLANNING">Planning</option>
<option value="PAUSED">Paused</option>
<option value="DROPPED">Dropped</option>
<option value="REPEATING">Rewatching/Rereading</option>
</select>
</div>
<div class="form-group">
<label for="entry-progress" id="progress-label">Progress</label>
<input type="number" id="entry-progress" class="form-input" min="0">
</div>
<div class="form-group">
<label>Score (0-10)</label>
<input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1">
</div>
<div class="form-group full-width">
<div class="date-group">
<div class="date-input-pair">
<label for="entry-start-date">Start Date</label>
<input type="date" id="entry-start-date" class="form-input">
</div>
<div class="date-input-pair">
<label for="entry-end-date">End Date</label>
<input type="date" id="entry-end-date" class="form-input">
</div>
</div>
</div>
<div class="form-group">
<label for="entry-repeat-count">Repeat Count</label>
<input type="number" id="entry-repeat-count" class="form-input" min="0">
</div>
<div class="form-group notes-group">
<label for="entry-notes">Notes</label>
<textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
</div>
<div class="form-group checkbox-group">
<input type="checkbox" id="entry-is-private" class="form-checkbox">
<label for="entry-is-private">Mark as Private</label>
</div>
</div>
</div>
<div class="modal-actions">
<button class="btn-secondary" onclick="window.ListModalManager.close()">Cancel</button>
<button class="btn-danger" id="modal-delete-btn" style="display:none;">Delete</button>
<button class="btn-primary" id="modal-save-btn">Save Changes</button>
</div>
</div>
</div>
<div id="updateToast" class="hidden">
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
<a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">