2 files changed, 144 insertions, 1 deletions

diff --git a/assets/css/custom.css b/assets/css/custom.css
index acbff4f..addb33a 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -452,4 +452,59 @@ button#clear-search svg {
 
 .back-to-top {
   text-align: center;
+}
+
+#setlist-tab {
+  position: fixed;
+  bottom: 5px;
+  right: 3px;
+  background: rgba(0, 0, 0, 0.5); /* translucent black */
+  color: white;
+  padding: 3px 5px;
+  border-radius: 6px;
+  font-size: 14px;
+  cursor: pointer;
+  z-index: 9999;
+  transition: opacity 0.2s ease-in-out, background 0.2s;
+  opacity: 0.6;
+}
+
+#setlist-tab:hover {
+  background: rgba(0, 0, 0, 0.7); /* slightly darker on hover */
+  opacity: 1; /* fade in */
+}
+
+#setlist-sidebar {
+  position: fixed;
+  bottom: 50px;
+  right: 10px;
+  width: 250px;
+  background: #241E1A;
+  border: 2px solid #ccc;
+  padding: 12px;
+  border-radius: 8px;
+  box-shadow: 0 0 8px rgba(0,0,0,0.2);
+  z-index: 9998;
+}
+
+#setlist-sidebar h6{
+  margin-top: 5px;
+}
+
+#setlist-sidebar.hidden {
+  display: none;
+}
+
+#setlist li {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 6px;
+}
+
+#setlist li button {
+  background: none;
+  border: none;
+  color: red;
+  font-size: 1rem;
+  cursor: pointer;
 }
\ No newline at end of file
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 }}