Show * mark when list editor has unsaved changes

Add a red asterisk in the top-right of the dashboard header (and
prefix the document title with *) whenever the dirty flag is set,
so the user can tell at a glance that the music/image list hasn't
been saved yet. The indicator is driven by markDirty/markClean so
it follows the existing tracking.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-05-12 14:58:56 +09:00
parent 4d18c93369
commit da3a398684
3 changed files with 21 additions and 2 deletions

View File

@@ -10,8 +10,14 @@
// 저장되지 않은 변경 추적
var dirty = false
function markDirty() { dirty = true }
function markClean() { dirty = false }
var dirtyMarkEl = document.getElementById('dirty-mark')
var baseTitle = document.title
function updateDirtyIndicator() {
if (dirtyMarkEl) dirtyMarkEl.hidden = !dirty
document.title = dirty ? ('*' + baseTitle) : baseTitle
}
function markDirty() { dirty = true; updateDirtyIndicator() }
function markClean() { dirty = false; updateDirtyIndicator() }
// ── 탭 ────────────────────────────────────────────
var tabBtns = document.querySelectorAll('.tabBtn')

View File

@@ -545,3 +545,15 @@ body.siteBody.centerLayout {
}
.packCard.pickable { cursor: pointer; }
.packCard.pickable:hover { border-color: var(--accent); }
/* 저장 안 됨 표시 (목록 편집기) */
.dirtyMark {
font-size: 36px;
font-weight: 700;
color: var(--danger, #f85149);
line-height: 1;
margin-left: auto;
align-self: flex-start;
padding: 4px 8px;
user-select: none;
}