feat: add anime metadata editing and NFO diagnostics
- Add PUT /anime/{key} endpoint for updating anime key, tmdb_id, tvdb_id
- Add NFO diagnostics and repair endpoints (GET/POST /nfo/diagnostics)
- Add edit modal UI with context menu integration
- Add frontend JS modules for context-menu and edit-modal
- Add comprehensive tests for edit, rename, and NFO repair flows
This commit is contained in:
@@ -268,3 +268,205 @@
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Context Menu
|
||||
============================================================================ */
|
||||
|
||||
.context-menu {
|
||||
position: fixed;
|
||||
z-index: 1500;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow-elevated);
|
||||
min-width: 180px;
|
||||
padding: var(--spacing-xs) 0;
|
||||
animation: contextMenuFadeIn 0.12s ease-out;
|
||||
}
|
||||
|
||||
@keyframes contextMenuFadeIn {
|
||||
from { opacity: 0; transform: scale(0.95); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
.context-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
cursor: pointer;
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-body);
|
||||
transition: background-color 0.1s ease;
|
||||
}
|
||||
|
||||
.context-menu-item:hover {
|
||||
background-color: var(--color-hover);
|
||||
}
|
||||
|
||||
.context-menu-item i {
|
||||
width: 16px;
|
||||
text-align: center;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Edit Metadata Modal
|
||||
============================================================================ */
|
||||
|
||||
.edit-modal-content {
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
.edit-section {
|
||||
margin-bottom: var(--spacing-lg);
|
||||
padding-bottom: var(--spacing-lg);
|
||||
border-bottom: 1px solid var(--color-divider);
|
||||
}
|
||||
|
||||
.edit-section:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.edit-section h4 {
|
||||
margin: 0 0 var(--spacing-md) 0;
|
||||
font-size: var(--font-size-body);
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.edit-section h4 i {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
font-size: var(--font-size-caption);
|
||||
font-weight: 500;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.field-error {
|
||||
display: block;
|
||||
margin-top: var(--spacing-xs);
|
||||
font-size: var(--font-size-caption);
|
||||
color: var(--color-error, #e74c3c);
|
||||
}
|
||||
|
||||
.input-error {
|
||||
border-color: var(--color-error, #e74c3c) !important;
|
||||
}
|
||||
|
||||
.key-warning {
|
||||
background: rgba(255, 193, 7, 0.1);
|
||||
border: 1px solid rgba(255, 193, 7, 0.3);
|
||||
border-radius: var(--border-radius);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
margin-top: var(--spacing-sm);
|
||||
font-size: var(--font-size-caption);
|
||||
color: var(--color-warning, #f39c12);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
/* NFO Diagnostics */
|
||||
.nfo-diagnostics {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.nfo-status-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: var(--font-size-caption);
|
||||
font-weight: 600;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.nfo-status-badge.nfo-complete {
|
||||
background: rgba(46, 204, 113, 0.15);
|
||||
color: var(--color-success, #2ecc71);
|
||||
}
|
||||
|
||||
.nfo-status-badge.nfo-incomplete {
|
||||
background: rgba(243, 156, 18, 0.15);
|
||||
color: var(--color-warning, #f39c12);
|
||||
}
|
||||
|
||||
.nfo-status-badge.nfo-missing {
|
||||
background: rgba(231, 76, 60, 0.15);
|
||||
color: var(--color-error, #e74c3c);
|
||||
}
|
||||
|
||||
.missing-tags-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-xs);
|
||||
margin-top: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.missing-tag-chip {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
background: var(--color-background-subtle);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
font-size: var(--font-size-caption);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.nfo-all-good {
|
||||
color: var(--color-success, #2ecc71);
|
||||
font-size: var(--font-size-caption);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nfo-error {
|
||||
color: var(--color-error, #e74c3c);
|
||||
font-size: var(--font-size-caption);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.repair-hint {
|
||||
font-size: var(--font-size-caption);
|
||||
color: var(--color-text-secondary);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.btn-repair {
|
||||
align-self: flex-start;
|
||||
margin-top: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: var(--spacing-md) var(--spacing-lg);
|
||||
border-top: 1px solid var(--color-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user