setlist mvp

3 files changed, 85 insertions, 78 deletions

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 9dad6a7..bdb4b03 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -28,15 +28,6 @@
     </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>
@@ -69,6 +60,75 @@
   }
 
   setTheme();
+
+  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(key);
+    li.appendChild(link);
+    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>
@@ -161,75 +221,6 @@ 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 }}
 
diff --git a/layouts/_default/home.html b/layouts/_default/home.html
index 52db7eb..997ed7d 100644
--- a/layouts/_default/home.html
+++ b/layouts/_default/home.html
@@ -72,6 +72,14 @@
         {{ .Content }}
 </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" style="display: none">＋ Add Song</button>
+    </div>
+
 <div class="back-to-top">
 <a href="#top">
     back to top
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index ad55680..3c863a1 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -63,6 +63,14 @@
     {{ .Content }}
   </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>
+
   {{/* Back to top */}}
   <div class="back-to-top">
     <a href="#top">