From 4d336e0913a04b95106e5083fe1d6150b547ba14 Mon Sep 17 00:00:00 2001
From: Jurn Wubben <jsw@jsw.tf>
Date: Tue, 3 Feb 2026 20:45:10 +0100
Subject: [PATCH] Replaced buttons with hyprlinks to make my lsp happy

Replaced scroll icon with a better handle that's easier to use on mobile

Fixed deletion logic
---
 static/index.html | 50 +++++++++++++++++++++++------------------------
 1 file changed, 24 insertions(+), 26 deletions(-)

diff --git a/static/index.html b/static/index.html
index 7e8513f..82135d8 100644
--- a/static/index.html
+++ b/static/index.html
@@ -72,43 +72,42 @@
 
 
     <!-- Main content -->
-    <div class="flex-grow flex flex-col md:flex-row-reverse gap-4 m-2">
-      <div class="flex-3 bg-base-200 rounded-md shadow-md">
-        <ul class="list bg-base-100 rounded-box shadow-md m-1 overflow-y-scroll" id="songlist-merged">
+    <div class="flex-grow flex flex-col md:flex-row-reverse gap-4 m-2 min-h-0 overflow-hidden">
+      <div class="flex-3 bg-base-200 rounded-md shadow-md min-h-0 overflow-hidden flex flex-col">
+        <ul class="list bg-base-100 rounded-box shadow-md m-1 flex-1 overflow-y-auto" id="songlist-merged">
           <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Merged Queue</li>
         </ul>
       </div>
-      <div class="flex-5 md:flex-4 lg:flex-5 bg-base-200 rounded-md shadow-md">
-        <ul class="list bg-base-100 rounded-box shadow-md m-1 overflow-y-scroll" id="songlist-personal">
+      <div class="flex-5 md:flex-4 lg:flex-5 bg-base-200 rounded-md shadow-md min-h-0 overflow-hidden flex flex-col">
+        <ul class="list bg-base-100 rounded-box shadow-md m-1 flex-1 overflow-y-auto" id="songlist-personal">
           <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Personal Queue</li>
         </ul>
       </div>
     </div>
 
-
     <!-- Mobile dock -->
     <div class="dock md:hidden justify-self-end z-0 static">
-      <button class="dock-active">
+      <a class="dock-active">
         <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256" class="size-[1.2em]">
           <path fill="currentColor"
             d="M32 64a8 8 0 0 1 8-8h176a8 8 0 0 1 0 16H40a8 8 0 0 1-8-8m104 56H40a8 8 0 0 0 0 16h96a8 8 0 0 0 0-16m0 64H40a8 8 0 0 0 0 16h96a8 8 0 0 0 0-16m112-24a8 8 0 0 1-3.76 6.78l-64 40A8 8 0 0 1 168 200v-80a8 8 0 0 1 12.24-6.78l64 40A8 8 0 0 1 248 160m-23.09 0L184 134.43v51.14Z" />
         </svg>
         <span class="dock-label">Queues</span>
-      </button>
-      <button id="search-dock-button">
+      </a>
+      <a id="search-dock-button">
         <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="size-[1.2em]">
           <path fill="currentColor"
             d="M9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l5.6 5.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-5.6-5.6q-.75.6-1.725.95T9.5 16m0-2q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14" />
         </svg>
         <span class="dock-label">Search</span>
-      </button>
-      <button id="dock-logout">
+      </a>
+      <a id="dock-logout">
         <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="size-[1.2em]">
           <path fill="currentColor"
             d="M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h6q.425 0 .713.288T12 4t-.288.713T11 5H5v14h6q.425 0 .713.288T12 20t-.288.713T11 21zm12.175-8H10q-.425 0-.712-.288T9 12t.288-.712T10 11h7.175L15.3 9.125q-.275-.275-.275-.675t.275-.7t.7-.313t.725.288L20.3 11.3q.3.3.3.7t-.3.7l-3.575 3.575q-.3.3-.712.288t-.713-.313q-.275-.3-.262-.712t.287-.688z" />
         </svg>
         <span class="dock-label">Logout</span>
-      </button>
+      </a>
     </div>
 
     <dialog id="pmodal" class="modal modal-bottom sm:modal-middle">
@@ -124,19 +123,24 @@
     <!-- template song personal -->
     <template id="template-song-personal">
       <li class="list-row song " draggable="true">
-        <div class="drag-handle cursor-move select-none touch-none text-2xl opacity-50 mr-2">⋮⋮</div>
+        <a class="btn btn-square btn-ghost drag-handle cursor-move select-none touch-none">
+          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="size-[2em]">
+            <path fill="currentColor"
+              d="M5 15q-.425 0-.712-.288T4 14t.288-.712T5 13h14q.425 0 .713.288T20 14t-.288.713T19 15zm0-4q-.425 0-.712-.288T4 10t.288-.712T5 9h14q.425 0 .713.288T20 10t-.288.713T19 11z" />
+          </svg>
+        </a>
         <div><img class="size-10 rounded-box"
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="thumbnail"></div>
         <div class="list-col-grow">
           <div class="song-songname">Songname</div>
           <div class="text-xs uppercase font-semibold opacity-60 song-artistname">Artistname</div>
         </div>
-        <button class="btn btn-square btn-soft btn-error">
-          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="size-[1.2em]">
+        <a class="btn btn-square btn-soft btn-error">
+          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="size-[1.6em]">
             <path fill="currentColor"
               d="M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zm2-4h2V8H9zm4 0h2V8h-2z" />
           </svg>
-        </button>
+        </a>
       </li>
     </template>
 
@@ -166,7 +170,7 @@
           <div class="song-songname">Songname</div>
           <div class="text-xs uppercase font-semibold opacity-60 song-artistname">Artist name</div>
         </div>
-        <button class="btn btn-square btn-soft btn-success">
+        <button class="btn btn-square btn-soft btn-success text-2xl">
           +
         </button>
       </li>
@@ -277,9 +281,7 @@
       },
       set personal(newV) {
         this._personal = newV;
-        (DOMMainSongPersonal.querySelectorAll(".song") ?? []).forEach(v => {
-          DOMMainSongPersonal.removeChild(v);
-        })
+        (DOMMainSongPersonal.querySelectorAll(".song") ?? []).forEach(v => v.remove())
 
         if (newV.length === 0) {
           const el = document.importNode(DOMTemplateSongPersonal.content, true);
@@ -302,7 +304,7 @@
           el.querySelector(".song-songname").innerText = song.name;
           el.querySelector(".song-artistname").innerText = song.artists.join(", ");
           el.querySelector("img").src = song.album?.coverUrl ?? "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
-          el.querySelector("button").addEventListener("click", () => removeSongFromQueue(index))
+          el.querySelector("a.btn-error").addEventListener("click", () => removeSongFromQueue(index))
 
           DOMMainSongPersonal.append(el);
 
@@ -314,9 +316,7 @@
       },
       set merged(newV) {
         this._merged = newV;
-        (DOMMainSongMerged.querySelectorAll(".song") ?? []).forEach(v => {
-          DOMMainSongMerged.removeChild(v);
-        })
+        (DOMMainSongMerged.querySelectorAll(".song") ?? []).forEach(v => v.remove())
 
         if (newV.length === 0) {
           const el = document.importNode(DOMTemplateSongMerged.content, true);
@@ -390,7 +390,6 @@
         const msg = JSON.parse(e.data);
         if (msg.c === 'ping') {ws.send(JSON.stringify({c: 'pong'})); return;}
         else if (msg.c === 'getqueue') {
-          console.log(msg.d)
           queues.personal = msg.d.personal || [];
           queues.merged = msg.d.merged || [];
         }
@@ -462,7 +461,6 @@
       location.reload();
     }
     function removeSongFromQueue(index) {
-      console.log(index)
       queues.personal.splice(index, 1)
       queues.personal = [...queues.personal];