lukas.pupkalipinski/Aniworld
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(anime): rename NFO Diagnostics to Anime Settings + add edit endpoints

Browse Source 
Replaces the read-only 'NFO Diagnostics' page with a full per-anime
Settings page reached from the right-click context menu on series cards.
Users can now view and edit key, name, folder, tmdb_id, tvdb_id and site
for each anime; changes are persisted to the DB and optionally written
back to the NFO file or used to regenerate it.

Backend
- Rename NfoDiagnosticsResponse -> NfoSettingsResponse,
  NfoSeriesDiagnostics -> NfoSeriesSettings
- Rename get_nfo_diagnostics -> get_nfo_settings,
  repair_nfo -> repair_nfo_settings
- Fix nfo.py bug: repair was calling non-existent
  update_series_nfo_status(); now uses update_nfo_status() and an
  explicit AnimeSeriesService.update(nfo_path=...)
- New endpoints on /api/anime/{key}:
    GET  /settings            -> AnimeSettingsResponse
    PUT  /settings            -> AnimeSettingsResponse
                                 (body: name/folder/tmdb_id/tvdb_id/site,
                                  options: apply_to_nfo, rename_disk)
    POST /regenerate-nfo      -> AnimeSettingsRegenerateNfoResponse
- New Pydantic models: AnimeSettingsResponse,
  AnimeSettingsUpdateRequest, AnimeSettingsRegenerateNfoResponse
- /anime/settings page route; /settings/nfo now 301-redirects to it

Frontend
- New AniWorld.AnimeSettingsManager JS module (single-page form,
  no tabs) with public API init/loadSeries/saveSettings/regenerateNfo/
  validateField/populateForm/showSaveSuccess/showError
- New anime-settings.html template + anime-settings.css
- Right-click menu: data-action 'nfo-diagnostics' replaced by
  'anime-settings' (label 'Anime Settings'), navigates to
  /anime/settings?key=...
- Library 'Open NFO Diagnostics' link renamed to 'Open Anime Settings'

Bug fix
- context-menu click handler was calling hide() BEFORE building the
  navigation URL, which cleared currentSeriesKey to null and produced
  /anime/settings?key=null. Captures the key into a local const first.
  Regression-locked by tests/frontend/unit/context_menu.test.js.

Tests
- 21 new pytest tests in tests/api/test_anime_settings_endpoints.py
  (GET/PUT/regenerate-nfo, auth, validation, nfo-repair bug regression)
- tests/api/test_nfo_endpoints.py trimmed to 6 focused tests
- 31 new Vitest unit tests for AnimeSettingsManager
- 5 new Vitest unit tests for ContextMenu (incl. source-invariant
  regression guard for the hide()-before-key bug)
- 5 new Playwright E2E tests covering right-click, direct nav,
  legacy /settings/nfo redirect, and context-menu labels
- New vitest.config.js (environment: happy-dom)

Docs
- Docs/API.md: new section 'Anime Settings Endpoints'
- Docs/CHANGELOG.md: documents the rename and the context-menu bug fix

Verified
- pytest: 27/27 (21 new + 6 trimmed nfo)
- vitest: 36/36 (31 anime-settings + 5 context-menu)
- playwright e2e: 5/5
This commit is contained in:
Lukas
2026-06-21 07:52:22 +02:00
parent e050f6fa2d
commit eabce18e41
22 changed files with 3216 additions and 2302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

226
src/server/web/static/css/pages/anime-settings.css Normal file
View File

@@ -0,0 +1,226 @@
/* ============================================================
Anime Settings Page
------------------------------------------------------------
Layout and styling for /anime/settings (renamed from
/settings/nfo — formerly "NFO Diagnostics").
============================================================ */
.anime-settings-main {
padding: 1.5rem;
max-width: 1100px;
margin: 0 auto;
}
.settings-section {
margin-bottom: 1.5rem;
}
.settings-header-card {
background: var(--color-card-bg, #1f2937);
color: var(--color-text, #f3f4f6);
padding: 1.25rem 1.5rem;
border-radius: 8px;
margin-bottom: 1.25rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.settings-header-card h2 {
margin: 0 0 0.5rem 0;
font-size: 1.5rem;
}
.status-badges {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.status-badge {
display: inline-block;
padding: 0.25rem 0.6rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
background: var(--color-badge-bg, #374151);
color: var(--color-badge-text, #f9fafb);
}
.status-badge.status-complete {
background: #10b981;
color: #ffffff;
}
.status-badge.status-incomplete {
background: #f59e0b;
color: #ffffff;
}
.status-badge.status-failed {
background: #ef4444;
color: #ffffff;
}
.status-badge.status-pending {
background: #6366f1;
color: #ffffff;
}
.settings-section-card {
background: var(--color-card-bg, #1f2937);
border: 1px solid var(--color-border, #374151);
padding: 1.25rem 1.5rem;
border-radius: 8px;
margin-bottom: 1.25rem;
}
.settings-section-card h3 {
margin-top: 0;
margin-bottom: 0.75rem;
font-size: 1.1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.settings-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem 1.5rem;
margin-bottom: 1rem;
}
.settings-field {
display: flex;
flex-direction: column;
}
.settings-field.full-width {
grid-column: 1 / -1;
}
.settings-field label {
font-weight: 600;
font-size: 0.85rem;
color: var(--color-text-muted, #9ca3af);
margin-bottom: 0.25rem;
}
.settings-field input.input-field {
width: 100%;
padding: 0.5rem 0.75rem;
border: 1px solid var(--color-border, #4b5563);
border-radius: 6px;
background: var(--color-input-bg, #111827);
color: var(--color-text, #f9fafb);
font-size: 0.95rem;
}
.settings-field input.input-field:focus {
outline: none;
border-color: var(--color-accent, #3b82f6);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}
.settings-field .config-hint {
font-size: 0.8rem;
color: var(--color-text-muted, #9ca3af);
margin-top: 0.25rem;
}
.settings-field .config-hint.hint-error {
color: #ef4444;
}
.value-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
background: var(--color-code-bg, #111827);
padding: 0.25rem 0.5rem;
border-radius: 4px;
word-break: break-all;
display: inline-block;
font-size: 0.9rem;
}
.value {
font-size: 0.95rem;
color: var(--color-text, #f3f4f6);
}
.settings-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.settings-toggles {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--color-border, #374151);
}
.nfo-content {
margin-top: 1rem;
padding: 0.75rem;
background: var(--color-code-bg, #111827);
border: 1px solid var(--color-border, #4b5563);
border-radius: 6px;
max-height: 400px;
overflow: auto;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.8rem;
white-space: pre-wrap;
word-break: break-all;
color: var(--color-text, #e5e7eb);
}
.error-box {
background: var(--color-card-bg, #1f2937);
border: 1px solid #ef4444;
padding: 1.5rem;
border-radius: 8px;
text-align: center;
color: var(--color-text, #f3f4f6);
}
.error-box i {
font-size: 2rem;
color: #ef4444;
margin-bottom: 0.5rem;
display: block;
}
.error-box h2 {
margin: 0 0 0.5rem 0;
}
.error-box p {
color: var(--color-text-muted, #9ca3af);
margin-bottom: 1rem;
}
.loading-spinner {
text-align: center;
padding: 3rem 1rem;
color: var(--color-text-muted, #9ca3af);
}
.loading-spinner i {
font-size: 2rem;
margin-bottom: 0.5rem;
display: block;
color: var(--color-accent, #3b82f6);
}
.hidden {
display: none !important;
}
@media (max-width: 720px) {
.settings-grid {
grid-template-columns: 1fr;
}
.anime-settings-main {
padding: 1rem;
}
}

637
src/server/web/static/css/pages/nfo-settings.css
View File

@@ -1,637 +0,0 @@
/**
* AniWorld - NFO Settings Page Styles
*
* Standalone page for NFO diagnostics, repair, and settings.
*/
.nfo-main-content {
padding: var(--spacing-lg);
max-width: 1400px;
margin: 0 auto;
}
/* ========== Stats Section ========== */
.nfo-stats-section {
margin-bottom: var(--spacing-xl);
}
.nfo-stats-section .stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-lg);
}
.nfo-stats-section .stat-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-lg);
padding: var(--spacing-lg);
display: flex;
align-items: center;
gap: var(--spacing-lg);
}
.nfo-stats-section .stat-icon {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-tertiary);
font-size: 20px;
}
.nfo-stats-section .stat-success .stat-icon {
background: rgba(16, 124, 16, 0.1);
color: var(--color-success);
}
.nfo-stats-section .stat-warning .stat-icon {
background: rgba(255, 140, 0, 0.1);
color: var(--color-warning);
}
.nfo-stats-section .stat-error .stat-icon {
background: rgba(209, 52, 56, 0.1);
color: var(--color-error);
}
.nfo-stats-section .stat-info {
display: flex;
flex-direction: column;
}
.nfo-stats-section .stat-value {
font-size: 28px;
font-weight: 600;
color: var(--color-text-primary);
line-height: 1.2;
}
.nfo-stats-section .stat-label {
font-size: var(--font-size-body);
color: var(--color-text-secondary);
}
/* ========== Tab Navigation ========== */
.nfo-tabs {
display: flex;
gap: var(--spacing-xs);
background: var(--color-bg-secondary);
padding: var(--spacing-xs);
border-radius: var(--border-radius-lg);
margin-bottom: var(--spacing-lg);
border: 1px solid var(--color-border);
}
.nfo-tab {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm);
padding: var(--spacing-md) var(--spacing-lg);
border: none;
background: transparent;
color: var(--color-text-secondary);
font-size: var(--font-size-body);
font-weight: 500;
cursor: pointer;
border-radius: var(--border-radius-md);
transition: all var(--transition-duration) ease;
}
.nfo-tab:hover {
background: var(--color-surface-hover);
color: var(--color-text-primary);
}
.nfo-tab.active {
background: var(--color-surface);
color: var(--color-primary);
box-shadow: var(--shadow-card);
}
.nfo-tab i {
font-size: 16px;
}
/* ========== Tab Content ========== */
.nfo-tab-content {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-lg);
overflow: hidden;
}
.tab-panel {
display: none;
padding: var(--spacing-xl);
animation: fadeIn 0.2s ease;
}
.tab-panel.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-xl);
flex-wrap: wrap;
gap: var(--spacing-md);
}
.panel-header h2 {
margin: 0;
font-size: var(--font-size-title);
color: var(--color-text-primary);
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.panel-header h2 i {
color: var(--color-primary);
}
.panel-actions {
display: flex;
gap: var(--spacing-sm);
align-items: center;
}
.panel-actions .search-input {
width: 200px;
}
.panel-actions .filter-select {
min-width: 140px;
}
/* ========== Overview Tab ========== */
.overview-content {
max-width: 900px;
}
.health-summary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-xl);
}
.health-chart {
background: var(--color-bg-secondary);
border-radius: var(--border-radius-lg);
padding: var(--spacing-xl);
display: flex;
align-items: center;
justify-content: center;
min-height: 250px;
}
.health-details h3 {
font-size: var(--font-size-subtitle);
margin: 0 0 var(--spacing-sm) 0;
color: var(--color-text-primary);
}
.health-details h3:not(:first-child) {
margin-top: var(--spacing-xl);
}
.info-text {
color: var(--color-text-secondary);
margin: 0 0 var(--spacing-sm) 0;
font-size: var(--font-size-body);
}
.tag-list {
list-style: none;
padding: 0;
margin: 0;
}
.tag-list li {
padding: var(--spacing-xs) 0;
color: var(--color-text-secondary);
font-size: var(--font-size-body);
}
.tag-list li code {
background: var(--color-bg-tertiary);
padding: 2px 6px;
border-radius: var(--border-radius-sm);
font-family: 'Consolas', 'Monaco', monospace;
font-size: 13px;
color: var(--color-text-primary);
}
.optional-tags {
columns: 2;
}
/* ========== Diagnostics Tab ========== */
.series-list-container {
overflow-x: auto;
}
.series-diagnostics-table {
width: 100%;
border-collapse: collapse;
font-size: var(--font-size-body);
}
.series-diagnostics-table th,
.series-diagnostics-table td {
padding: var(--spacing-md);
text-align: left;
border-bottom: 1px solid var(--color-border);
}
.series-diagnostics-table th {
background: var(--color-bg-secondary);
font-weight: 600;
color: var(--color-text-primary);
white-space: nowrap;
}
.series-diagnostics-table th.sortable {
cursor: pointer;
user-select: none;
}
.series-diagnostics-table th.sortable:hover {
background: var(--color-bg-tertiary);
}
.series-diagnostics-table th i {
margin-left: var(--spacing-xs);
color: var(--color-text-tertiary);
}
.series-diagnostics-table tbody tr:hover {
background: var(--color-surface-hover);
}
.series-diagnostics-table .status-badge {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
padding: 4px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
.series-diagnostics-table .status-complete {
background: rgba(16, 124, 16, 0.1);
color: var(--color-success);
}
.series-diagnostics-table .status-incomplete {
background: rgba(255, 140, 0, 0.1);
color: var(--color-warning);
}
.series-diagnostics-table .status-missing {
background: rgba(209, 52, 56, 0.1);
color: var(--color-error);
}
.missing-tags-list {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xs);
}
.missing-tag-chip {
display: inline-block;
background: var(--color-bg-tertiary);
color: var(--color-text-secondary);
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-family: 'Consolas', 'Monaco', monospace;
}
.nfo-path {
font-family: 'Consolas', 'Monaco', monospace;
font-size: 12px;
color: var(--color-text-tertiary);
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.loading-row td {
text-align: center;
padding: var(--spacing-xxl);
}
.loading-spinner {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm);
color: var(--color-text-secondary);
}
.loading-spinner i {
font-size: 24px;
}
/* ========== Repair Tab ========== */
.repair-content {
max-width: 900px;
}
.repair-info {
margin-bottom: var(--spacing-xl);
}
.info-card {
display: flex;
gap: var(--spacing-md);
padding: var(--spacing-lg);
background: var(--color-bg-secondary);
border-radius: var(--border-radius-lg);
border-left: 4px solid var(--color-primary);
}
.info-card i {
font-size: 20px;
color: var(--color-primary);
flex-shrink: 0;
}
.info-card h4 {
margin: 0 0 var(--spacing-xs) 0;
font-size: var(--font-size-subtitle);
color: var(--color-text-primary);
}
.info-card p {
margin: 0;
font-size: var(--font-size-body);
color: var(--color-text-secondary);
}
.repair-actions {
display: flex;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-lg);
}
.repair-list-container {
margin-bottom: var(--spacing-lg);
}
.repair-table {
width: 100%;
border-collapse: collapse;
font-size: var(--font-size-body);
}
.repair-table th,
.repair-table td {
padding: var(--spacing-md);
text-align: left;
border-bottom: 1px solid var(--color-border);
}
.repair-table th {
background: var(--color-bg-secondary);
font-weight: 600;
color: var(--color-text-primary);
}
.checkbox-col {
width: 40px;
}
.repair-table tbody tr:hover {
background: var(--color-surface-hover);
}
.repair-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: var(--spacing-lg);
border-top: 1px solid var(--color-border);
}
.selection-count {
color: var(--color-text-secondary);
font-size: var(--font-size-body);
}
.selection-count span {
font-weight: 600;
color: var(--color-primary);
}
/* ========== Settings Tab ========== */
.settings-content {
max-width: 700px;
}
.settings-section {
margin-bottom: var(--spacing-xxl);
padding-bottom: var(--spacing-xxl);
border-bottom: 1px solid var(--color-border);
}
.settings-section:last-child {
border-bottom: none;
margin-bottom: 0;
}
.settings-section h3 {
margin: 0 0 var(--spacing-lg) 0;
font-size: var(--font-size-subtitle);
color: var(--color-text-primary);
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.settings-section h3 i {
color: var(--color-primary);
}
.setting-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--spacing-xl);
padding: var(--spacing-md) 0;
}
.setting-info {
flex: 1;
}
.setting-info label {
font-weight: 500;
color: var(--color-text-primary);
display: block;
margin-bottom: var(--spacing-xs);
}
.setting-description {
margin: 0;
font-size: var(--font-size-body);
color: var(--color-text-secondary);
}
.setting-description a {
color: var(--color-primary);
}
.setting-control {
display: flex;
gap: var(--spacing-sm);
align-items: center;
}
.setting-control .input-field {
width: 300px;
}
/* Toggle Switch */
.toggle-switch {
position: relative;
display: inline-block;
width: 48px;
height: 26px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--color-bg-tertiary);
transition: 0.2s;
border-radius: 13px;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 3px;
bottom: 3px;
background-color: white;
transition: 0.2s;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-slider {
background-color: var(--color-primary);
}
.toggle-switch input:checked + .toggle-slider:before {
transform: translateX(22px);
}
/* Connection Status */
.connection-status {
margin-top: var(--spacing-md);
padding: var(--spacing-md);
border-radius: var(--border-radius-md);
font-size: var(--font-size-body);
}
.connection-status.success {
background: rgba(16, 124, 16, 0.1);
color: var(--color-success);
border: 1px solid var(--color-success);
}
.connection-status.error {
background: rgba(209, 52, 56, 0.1);
color: var(--color-error);
border: 1px solid var(--color-error);
}
/* ========== Responsive ========== */
@media (max-width: 1024px) {
.nfo-stats-section .stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.health-summary {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.nfo-tabs {
flex-wrap: wrap;
}
.nfo-tab {
flex: 1 1 45%;
}
.nfo-tab span {
display: none;
}
.panel-header {
flex-direction: column;
align-items: flex-start;
}
.panel-actions {
width: 100%;
}
.panel-actions .search-input,
.panel-actions .filter-select {
flex: 1;
}
.setting-item {
flex-direction: column;
gap: var(--spacing-md);
}
.setting-control {
width: 100%;
}
.setting-control .input-field {
width: 100%;
}
.repair-footer {
flex-direction: column;
gap: var(--spacing-md);
}
.repair-footer .btn {
width: 100%;
}
}