+3 -1

src/facets/tools/auto-queue/index.html

reviewed

··· 24 24 </label> 25 25 </div> 26 26 <div class="row"> 27 27 - <label class="with-icon" for="sort-by"> 27 27 + <label class="with-icon" for="sort-by" style="width: min(80vw, var(--container-xs))"> 28 28 <i class="ph-bold ph-arrows-down-up"></i> 29 29 <select id="sort-by"> 30 30 <option value="[]">Default order</option> ··· 37 37 <option value='["tags.year"]'>Year</option> 38 38 <option value='["tags.date"]'>Date</option> 39 39 </select> 40 40 + <button id="sort-direction" style="flex: none">DESC</button> 40 41 </label> 41 42 </div> 42 43 </div> ··· 60 61 61 62 label { 62 63 flex: 1; 64 64 + flex-wrap: wrap; 63 65 letter-spacing: var(--leading-relaxed); 64 66 text-transform: uppercase; 65 67 }

+13

src/facets/tools/auto-queue/index.inline.js

reviewed

··· 23 23 /** @type {HTMLSelectElement} */ (document.querySelector("#playlist")); 24 24 const sortBySelect = 25 25 /** @type {HTMLSelectElement} */ (document.querySelector("#sort-by")); 26 26 + const sortDirectionBtn = 27 27 + /** @type {HTMLButtonElement} */ (document.querySelector("#sort-direction")); 26 28 27 29 // Repeat & Shuffle state 28 30 effect(() => { ··· 113 115 sortBySelect.onchange = () => { 114 116 scope.setSortBy(JSON.parse(sortBySelect.value)); 115 117 }; 118 118 + 119 119 + // Sort direction state 120 120 + effect(() => { 121 121 + const dir = scope.sortDirection() ?? "desc"; 122 122 + sortDirectionBtn.textContent = dir.toUpperCase(); 123 123 + }); 124 124 + 125 125 + sortDirectionBtn.onclick = () => { 126 126 + const dir = scope.sortDirection() ?? "desc"; 127 127 + scope.setSortDirection(dir === "asc" ? "desc" : "asc"); 128 128 + };