feat: settings modal with database export and import
All checks were successful
CI / test (pull_request) Successful in 12s
CI / build-dev (pull_request) Has been skipped

Adds a gear button to the nav that opens a settings modal with:
- Export: GET /api/export returns all instances as a JSON backup file
  with a Content-Disposition attachment header
- Import: POST /api/import validates and bulk-replaces all instances;
  client uses FileReader to POST the parsed JSON, with a confirm dialog
  before destructive replace

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-28 14:10:59 -04:00
parent 20d8a13375
commit af207339a4
7 changed files with 230 additions and 4 deletions

View File

@@ -22,6 +22,7 @@
<span class="nav-divider">·</span>
<span id="nav-version"></span>
</div>
<button class="nav-btn" onclick="openSettingsModal()" title="Settings">&#9881;</button>
</nav>
<main>
@@ -171,6 +172,31 @@
</div>
</div>
<!-- SETTINGS MODAL -->
<div id="settings-modal" class="modal-overlay">
<div class="modal">
<div class="modal-header">
<span class="modal-title">Settings</span>
<button class="modal-close" onclick="closeSettingsModal()">&#x2715;</button>
</div>
<div class="modal-body">
<div class="settings-section">
<div class="settings-section-title">Export</div>
<p class="settings-desc">Download all instance data as a JSON backup file.</p>
<button class="btn btn-secondary" onclick="exportDB()">Export Database</button>
</div>
<div class="settings-section">
<div class="settings-section-title">Import</div>
<p class="settings-desc">Restore from a backup file. This replaces all current instances.</p>
<div class="import-row">
<input type="file" id="import-file" accept=".json" class="form-input import-file-input">
<button class="btn btn-danger" onclick="importDB()">Import</button>
</div>
</div>
</div>
</div>
</div>
<!-- TOAST -->
<div class="toast" id="toast">
<div class="toast-dot"></div>