From cccfba0712d6641f649c161d33b7f2f314c00820 Mon Sep 17 00:00:00 2001
From: Ian Keane <ian@keane.sh>
Date: Thu, 11 Jun 2026 12:35:38 -0400
Subject: [PATCH] Implement 'learn' button

---
 app.js     | 22 +++++++++++++---------
 index.html |  1 +
 style.css  |  1 +
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/app.js b/app.js
index d7df592..4366fe6 100644
--- a/app.js
+++ b/app.js
@@ -880,23 +880,24 @@ function openRefsModal(tuneId) {
   refsModal.showModal();
 }
 
-// ── Call mode ─────────────────────────────────────────────────────
+// ── Call / Learn mode ────────────────────────────────────────────
 const callModal = $('call-modal');
+let callMode         = 'callable'; // 'callable' | 'to_learn'
 let callStep         = 0;
 let callInstrumentId = null;
 let callTuningId     = null;
 
-function callableEntries() {
+function callGetEntries() {
   const result = [];
   for (const tune of allTunes)
     for (const entry of tune.instruments)
-      if (entry.callable) result.push({ tune, entry });
+      if (entry[callMode]) result.push({ tune, entry });
   return result;
 }
 
 function callGetInstruments() {
   const map = new Map();
-  callableEntries().forEach(({ entry }) => {
+  callGetEntries().forEach(({ entry }) => {
     if (!map.has(entry.instrument_id)) map.set(entry.instrument_id, entry.instrument_name);
   });
   return [...map.entries()].map(([id, name]) => ({ id, name }))
@@ -905,7 +906,7 @@ function callGetInstruments() {
 
 function callGetTunings() {
   const map = new Map();
-  callableEntries()
+  callGetEntries()
     .filter(({ entry }) => callInstrumentId === null || entry.instrument_id === callInstrumentId)
     .forEach(({ entry }) => {
       if (entry.tuning_id != null && !map.has(entry.tuning_id))
@@ -917,7 +918,7 @@ function callGetTunings() {
 
 function callGetKeys() {
   const map = new Map();
-  callableEntries()
+  callGetEntries()
     .filter(({ entry }) =>
       (callInstrumentId === null || entry.instrument_id === callInstrumentId) &&
       (callTuningId === null     || entry.tuning_id    === callTuningId)
@@ -932,7 +933,8 @@ function callGetKeys() {
     .sort((a, b) => a.key.localeCompare(b.key) || (a.modal ? 1 : -1));
 }
 
-function openCallModal() {
+function openCallModal(mode) {
+  callMode = mode;
   callStep = 0;
   callInstrumentId = null;
   callTuningId = null;
@@ -984,7 +986,8 @@ function callSelect(value, modal) {
     callStep = 2;
     renderCallStep();
   } else {
-    filters.callable   = true;
+    filters.callable   = callMode === 'callable'  ? true : null;
+    filters.to_learn   = callMode === 'to_learn'  ? true : null;
     filters.instrument = callInstrumentId !== null ? String(callInstrumentId) : null;
     filters.tuning     = callTuningId     !== null ? String(callTuningId)     : null;
     filters.key        = value;
@@ -995,7 +998,8 @@ function callSelect(value, modal) {
   }
 }
 
-$('btn-call').addEventListener('click', openCallModal);
+$('btn-call').addEventListener('click',  () => openCallModal('callable'));
+$('btn-learn').addEventListener('click', () => openCallModal('to_learn'));
 $('call-close').addEventListener('click', () => callModal.close());
 $('call-back').addEventListener('click', () => {
   callStep--;
diff --git a/index.html b/index.html
index bd03bc5..e5d23cb 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,7 @@
       <button id="btn-clear-filters" hidden>✕ Clear filters</button>
       <span id="status"></span>
       <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>
diff --git a/style.css b/style.css
index 8b1fdd9..1a2cfc1 100644
--- a/style.css
+++ b/style.css
@@ -490,6 +490,7 @@ fieldset.active .fs-body { display: contents; }
 
 #btn-bulk-edit { background: transparent; border: 1px solid var(--border); color: var(--muted); }
 #btn-call      { background: #1b4332; color: #74c69d; border: 1px solid #2d6a4f; font-weight: 600; }
+#btn-learn     { background: #3d2e10; color: #f2c94c; border: 1px solid #4d3a1e; font-weight: 600; }
 
 /* ── Call modal ───────────────────────────────────────────── */
 #call-modal {