Add csv upload, make instruments table expandable

index.html

@@ -15,9 +15,9 @@
       <button id="btn-clear-filters" hidden>✕ Clear filters</button>
       <button id="btn-call">Call</button>
       <button id="btn-learn">Learn</button>
-      <button id="btn-bulk-edit" hidden>⚡ Bulk Edit</button>
       <button id="btn-add-tune" hidden>+ Add tune</button>
       <button id="btn-unlock">🔒 Unlock</button>
+      <button id="btn-bulk-edit" hidden>☰</button>
     </div>
   </header>
 
@@ -51,6 +51,7 @@
   <!-- ── Bulk edit popover ─────────────────────────────────────── -->
   <div id="bulk-edit-popover" hidden>
     <button id="btn-open-bulk-refs">📎 Bulk Edit References</button>
+    <button id="btn-upload-csv">📂 Upload from CSV</button>
   </div>
 
   <!-- ── Bulk edit references modal ───────────────────────────── -->
@@ -105,9 +106,12 @@
       <fieldset id="fs-instrument">
         <legend>Instrument entry</legend>
         <label>Instrument
-          <select name="instrument_id" id="instrument-select">
-            <option value="">— none —</option>
-          </select>
+          <span class="autocomplete-row">
+            <select name="instrument_id" id="instrument-select">
+              <option value="">— none —</option>
+            </select>
+            <button type="button" class="quick-add-btn" id="btn-quick-add-instrument" title="Add new instrument">+</button>
+          </span>
         </label>
         <label>Tuning
           <span class="autocomplete-row">
@@ -196,6 +200,39 @@
     <div id="call-options"></div>
   </dialog>
 
+  <!-- ── CSV upload modal ─────────────────────────────────────── -->
+  <dialog id="upload-csv-modal">
+    <h2>Upload from CSV</h2>
+    <details id="csv-format-details" open>
+      <summary>Expected format</summary>
+      <p style="font-size:.85rem;margin:.5rem 0 .4rem">One tune per row. Headers (case-insensitive):</p>
+      <table class="csv-format-table">
+        <thead><tr><th>Column</th><th>Required</th><th>Notes</th></tr></thead>
+        <tbody>
+          <tr><td>name</td><td>Yes</td><td>Tune name</td></tr>
+          <tr><td>key</td><td></td><td>e.g. D, G, Am</td></tr>
+          <tr><td>modal</td><td></td><td>true / false</td></tr>
+          <tr><td>source</td><td></td><td>Created if new</td></tr>
+          <tr><td>instrument</td><td></td><td>Created if new</td></tr>
+          <tr><td>tuning</td><td></td><td>Created if new</td></tr>
+          <tr><td>learned_from</td><td></td><td>Musician name — created if new</td></tr>
+          <tr><td>date_learned</td><td></td><td>YYYY-MM-DD</td></tr>
+          <tr><td>status</td><td></td><td>callable / review / to_learn</td></tr>
+          <tr><td>difficulty</td><td></td><td>easy / hard</td></tr>
+        </tbody>
+      </table>
+      <p class="csv-format-note">If a tune with the same name already exists a new instrument entry is added to it. Sources, tunings, and musicians are created automatically if they don’t exist.</p>
+    </details>
+    <div id="csv-upload-area">
+      <input type="file" id="csv-file-input" accept=".csv,.tsv,text/csv" />
+    </div>
+    <div id="csv-results" hidden></div>
+    <div class="modal-actions">
+      <button id="btn-csv-import" disabled>Import</button>
+      <button id="btn-csv-cancel">Cancel</button>
+    </div>
+  </dialog>
+
   <!-- Tooltip for truncated mobile text -->
   <div id="mob-tooltip" hidden></div>