From ff8c9ec22ec789174a3b33014fee7f1ae07385f1 Mon Sep 17 00:00:00 2001
From: KubaPro010 <kuba.pro010@gmail.com>
Date: Sat, 18 Apr 2026 20:54:01 +0200
Subject: [PATCH] some design changes

---
 modules/web/index.html | 24 +++++++++++++-----------
 modules/web/web.js     |  8 +++-----
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/modules/web/index.html b/modules/web/index.html
index 640f3ec..533e8ae 100644
--- a/modules/web/index.html
+++ b/modules/web/index.html
@@ -19,8 +19,8 @@
             .left{flex:1.2; min-width:420px}
             .right{flex:1; display:flex; flex-direction:column; gap:6px}
 
-            .frame-title-nc{ font-size:16px; color:var(--muted); margin-bottom:6px; display: flex; justify-content: space-between; align-items: center; user-select: none; padding: 4px 0; transition: color 0.2s ease; }
-            .frame-title{ font-size:16px; color:var(--muted); margin-bottom:6px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; padding: 4px 0; transition: color 0.2s ease; }
+            .frame-title-nc{ font-size:16px; color:var(--muted); margin-bottom:6px; display: flex; justify-content: space-between; align-items: center; user-select: none; padding: 2px 0; transition: color 0.2s ease; }
+            .frame-title{ font-size:16px; color:var(--muted); margin-bottom:4px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; padding: 2px 0; transition: color 0.2s ease; }
             .frame-title:hover { color: #fff; }
             .frame-title::after { content: '▼'; font-size: 10px; transition: transform 0.3s ease; opacity: 0.5; margin-left: 8px; }
 
@@ -33,7 +33,7 @@
             .now .track, .next .track {font-weight:400; font-size:14px; word-break:break-all}
             .progress-wrap { display:flex; gap:10px; align-items:center}
             .progress-bar { flex:1; height:10px; background:var(--glass); border-radius:8px; overflow:hidden; position:relative }
-            .progress-fill { height:100%; width:0%; background:linear-gradient(90deg,var(--accent), #2aa2ff); transition:width 0.5s linear}
+            .progress-fill { height:100%; width:0%; background:linear-gradient(45deg,var(--accent), #2aa2ff); transition: width 0.5s linear}
 
             button, .btn{ background:transparent; border:1px solid rgba(255,255,255,0.06); padding:8px 12px; border-radius:8px; color:inherit; cursor:pointer; transition: background-color 0.15s ease, transform 0.15s ease; }
             button:hover, .btn:hover { background-color: var(--glass); }
@@ -42,13 +42,13 @@
             .btn.primary:hover { background:linear-gradient(90deg, #3399ee, #5bbaff); }
 
             ul.playlist{list-style:none; padding:6px; margin:0; font-family: "Consolas",monospace; font-size:13px;}
-            ul.playlist li{ padding:6px 8px; border-radius:6px; display:flex; justify-content:space-between; gap:8px; transition: background-color 0.2s ease, transform 0.15s ease; }
+            ul.playlist li{ padding:4px 6px; border-radius:6px; display:flex; justify-content:space-between; gap:8px; transition: background-color 0.2s ease, transform 0.15s ease; }
             ul.playlist li:hover{ background:rgba(255,255,255,0.04); }
             ul.playlist li.current{background:rgba(62,166,255,0.08)}
             ul.playlist li.selected{background:rgba(62, 165, 255, 0.305)}
             ul.playlist li.pointer{background:rgba(255,255,255,0.04)}
 
-            .controls{display:flex; gap:6px; margin-top:6px}
+            .controls{display:flex; gap:4px; margin-top:4px}
 
             .listbox{
                 height:100%;
@@ -62,7 +62,7 @@
             }
             .listbox::-webkit-scrollbar { display: none; }
 
-            .listbox div.item{ padding:6px; border-radius:6px; transition: background-color 0.2s ease; }
+            .listbox div.item{ padding:4px; border-radius:6px; transition: background-color 0.2s ease; }
             .listbox div.item:hover{background:rgba(255,255,255,0.04); cursor:pointer}
             .listbox div.item.selected{background:rgba(62, 165, 255, 0.305)}
 
@@ -74,10 +74,10 @@
 
             .small{font-size:12px; color:var(--muted)}
             .muted{color:var(--muted); font-size:13px}
-            .footer{display:flex; justify-content:space-between; gap:8px; align-items:center; margin-top:8px; background:var(--panel); border-radius:10px; padding:8px; box-shadow: 0 6px 18px rgba(2,8,16,0.6);}
+            .footer{display:flex; justify-content:space-between; gap:5px; align-items:center; margin-top:8px; background:var(--panel); border-radius:10px; padding:8px; box-shadow: 0 8px 18px rgba(2,8,16,0.6);}
             .directory-grid {
                 display: flex;
-                gap: 12px;
+                gap: 8px;
                 flex-grow: 1;
                 overflow: hidden;
                 align-items: stretch;
@@ -106,7 +106,9 @@
                 margin-bottom: 8px;
             }
             #keybinds {display: flex; gap: 10px; align-items: center; white-space: nowrap; }
-            #keybinds kbd {background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; padding: 2px 6px; font-family: "Consolas", monospace; font-size: 12px; }
+            #keybinds kbd {background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; padding: 2px 4px; font-family: "Consolas", monospace; font-size: 12px; }
+
+            #clear-btn { margin: 8px; }
 
             #whep-section { flex-shrink: 0; }
             #whep-section .collapsible-content {
@@ -166,6 +168,7 @@
                 button, .btn {padding: 10px 14px}
                 .panel.right { height: auto; }
                 #section-playlist, #section-queue { flex: 1 1 auto; }
+                #keybinds {display: none;}
             }
         </style>
         <script defer src="./reader.js"></script>
@@ -190,7 +193,6 @@
                     <div class="small" id="rds-text" style="margin-top:6px; color:var(--muted); font-family:'Consolas',monospace;"></div>
                     <div class="controls" style="margin-top:10px">
                         <button id="skip-btn" class="btn">⏭ Skip</button>
-                        <button id="clear-btn" class="btn">✖ Clear Queue</button>
                         <div style="display:flex;align-items:center;gap:4px;border:1px solid rgba(255,255,255,0.06);border-radius:8px;padding:2px 4px">
                             <button id="skpn-dec" class="btn" style="padding:4px 10px;border:none">−</button>
                             <span style="font-size:13px;min-width:60px;text-align:center">Skip next: <b id="skpn-count">0</b></span>
@@ -216,7 +218,7 @@
                     </div>
 
                     <div class="box" id="section-queue">
-                        <div class="frame-title" onclick="toggleSection('section-queue')">Queue</div>
+                        <div class="frame-title" onclick="toggleSection('section-queue')"><div>Queue<button id="clear-btn" class="btn">✖ Clear</button></div></div>
                         <div class="collapsible-content listbox" id="queue-box" style="flex-grow: 1;">
                             <ul class="playlist" id="queue-ul"></ul>
                         </div>
diff --git a/modules/web/web.js b/modules/web/web.js
index 955c9b7..a993699 100644
--- a/modules/web/web.js
+++ b/modules/web/web.js
@@ -158,7 +158,7 @@ function renderPlaylist() {
         if(currentIndex !== null && Queue.length === 0 && i > currentIndex && i <= currentIndex + skipCount)
             li.style.textDecoration = "line-through";
         li.textContent = ` ${String(i).padStart(digits,'0')}: `;
-        li.textContent = li.textContent + (i === currentTrackIndex ? "▶ " : "  ") + displayPath;
+        li.textContent = (i === currentTrackIndex ? "▶ " : "  ") + li.textContent + displayPath;
         ul.appendChild(li);
     });
     if(currentIndex !== null){
@@ -172,7 +172,7 @@ function renderQueue() {
     ul.innerHTML = "";
     Queue.forEach((element, i) => {
         const li = document.createElement("li");
-        li.textContent = element;
+        li.textContent = element.replace(basePath, "").slice(1);
         if(i < skipCount) li.style.textDecoration = "line-through";
         ul.appendChild(li);
     });
@@ -382,9 +382,7 @@ async function whepConnect() {
 
             onStateChange: (state) => {
                 whepLog('State: ' + state);
-                if (state === 'closed') {
-                    whepDisconnect();
-                }
+                if (state === 'closed') whepDisconnect();
             }
         });