setlist kind of works

1 files changed, 89 insertions, 1 deletions

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index d505868..9dad6a7 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -27,6 +27,16 @@
       </main>
     </div>
 
+
+    <div id="setlist-tab">Setlist</div>
+
+    <div id="setlist-sidebar" class="hidden">
+      <h6>Set List</h3>
+      <ul id="setlist"></ul>
+      <button id="add-to-setlist">＋ Add Song</button>
+    </div>
+
+    
   </body>
 
   <script>
@@ -113,7 +123,16 @@ document.addEventListener("DOMContentLoaded", () => {
   renderChords();
 
   const selector = document.getElementById('key-selector');
-  const originalKey = selector?.dataset.originalKey || 'C';
+const originalKey = selector?.dataset.originalKey || 'C';
+
+// Read override from URL query
+const urlParams = new URLSearchParams(window.location.search);
+const selectedKey = urlParams.get('key') || selector?.value || originalKey;
+
+// Set selector to match the query key (if present)
+if (selector && selectedKey) {
+  selector.value = selectedKey;
+}
 
   // Trigger initial transpose to match the default selected key
   transposeToKey(originalKey, selector.value);
@@ -142,6 +161,75 @@ document.addEventListener("DOMContentLoaded", () => {
     document.body.classList.toggle("hide-chords", !toggle.checked);
   });
 });
+
+document.addEventListener("DOMContentLoaded", () => {
+  const setlistTab = document.getElementById("setlist-tab");
+  const setlistSidebar = document.getElementById("setlist-sidebar");
+  const setlistEl = document.getElementById("setlist");
+  const addButton = document.getElementById("add-to-setlist");
+
+  // Load setlist from localStorage
+  let setlist = JSON.parse(localStorage.getItem("setlist")) || [];
+
+  function saveSetlist() {
+    localStorage.setItem("setlist", JSON.stringify(setlist));
+  }
+
+  function renderSetlist() {
+  setlistEl.innerHTML = "";
+  setlist.forEach((song) => {
+    const li = document.createElement("li");
+
+    const link = document.createElement("a");
+    link.href = song.url;
+    link.textContent = song.title;
+    link.style.flex = "1";
+
+    const key = document.createElement("span");
+    key.textContent = ` (${song.key})`;
+    key.style.marginLeft = "6px";
+    key.style.color = "#555";
+
+    const removeBtn = document.createElement("button");
+    removeBtn.textContent = "−";
+    removeBtn.addEventListener("click", () => {
+      setlist = setlist.filter((s) => s.url !== song.url);
+      saveSetlist();
+      renderSetlist();
+    });
+
+    li.appendChild(link);
+    li.appendChild(key);
+    li.appendChild(removeBtn);
+    setlistEl.appendChild(li);
+  });
+}
+
+  // Toggle sidebar
+  setlistTab.addEventListener("click", () => {
+    setlistSidebar.classList.toggle("hidden");
+  });
+
+  // Add current song
+  addButton.addEventListener("click", () => {
+  const title = document.title.split(" | ")[0]; // Adjust to your site's title format
+  const url = window.location.href;
+  const keySelector = document.getElementById("key-selector");
+  const transposedKey = keySelector?.value || "C";
+
+  const exists = setlist.some((s) => s.url === url);
+  if (!exists) {
+    // Add ?key=E or &key=E if query already exists
+    const urlObj = new URL(url);
+    urlObj.searchParams.set("key", transposedKey);
+    setlist.push({ title, url: urlObj.toString(), key: transposedKey });
+    saveSetlist();
+    renderSetlist();
+  }
+});
+
+  renderSetlist();
+});
 </script>
 {{ end }}