From 6fec48e084046fa59950735f1b725cde5b8d2661 Mon Sep 17 00:00:00 2001
From: Thales <>
Date: Sun, 4 Oct 2026 10:50:07 +0100
Subject: [PATCH] feat(trash): hold a row for a second to restore it, pick
 several, and a count on the icon

Restoring from the Trash used to mean dragging one row at a time onto the
Library button, which nothing on screen explained, and a click on a
trashed row opened it in the studio as if it were not trashed.

Hovering a Trash row now turns its second line into "Hold left click for
1 second to restore". A click selects a row, Ctrl+click adds or removes
one, Shift+click takes a range. Holding the mouse button, or Enter, for a
second restores the row, or the whole selection when the row is part of
it; letting go early does nothing. Every row the hold will restore fills
while it is held.
Dragging onto Library still restores, the selection too. Restore never
queues a song again (#748).

The Trash icon carries the same count badge as the Queue, and its label
says how many songs are in it, so a full Trash is visible from anywhere.

Closes #749
Closes #755
---
 static/css/daw.css               |  31 +++-
 static/index.html                |   3 +-
 static/js/catalog.js             | 161 +++++++++++++++++++--
 static/js/i18n.js                |  20 +++
 tests/e2e/trash-restore.spec.mjs | 240 +++++++++++++++++++++++++++++++
 5 files changed, 441 insertions(+), 14 deletions(-)
 create mode 100644 tests/e2e/trash-restore.spec.mjs

diff --git a/static/css/daw.css b/static/css/daw.css
index db6cde71..cb2090e9 100644
--- a/static/css/daw.css
+++ b/static/css/daw.css
@@ -578,8 +578,9 @@ input, textarea { font-family: inherit; }
 .rail-btn > span { white-space: nowrap; max-width: 56px; overflow: hidden; text-overflow: ellipsis; }
 
 /* Queue rail button. Only present while something is importing, so the rail
-   stays as it is today for anyone not using the queue. */
-.rail-queue { position: relative; }
+   stays as it is today for anyone not using the queue. The Trash button wears
+   the same badge, with how many songs are in it (#749). */
+.rail-queue, .rail-trash { position: relative; }
 .rail-badge {
   position: absolute; top: 2px; right: 2px;
   min-width: 15px; height: 15px; padding: 0 4px;
@@ -931,6 +932,32 @@ input, textarea { font-family: inherit; }
 .cat-fav.active, .cat-fav.active:hover { color: #e54e4e; }
 /* A stopped song (#748) offers Extract at rest: it is the row's only way on. */
 .cat-item.is-stopped .cat-actions { opacity: 1; pointer-events: auto; }
+
+/* Trash rows look like library rows. On hover the second line becomes the
+   hint, and a hold fills the row from the left over --hold-ms (set from
+   TRASH_HOLD_MS in catalog.js), then restores. */
+.cat-item.in-trash { user-select: none; -webkit-user-select: none; overflow: hidden; }
+.cat-item.in-trash .trash-hint { display: none; color: var(--fg-2); }
+.cat-item.in-trash:hover .trash-hint,
+.cat-item.in-trash:focus-visible .trash-hint,
+.cat-item.in-trash.holding .trash-hint { display: block; overflow: hidden; text-overflow: ellipsis; }
+.cat-item.in-trash:hover .cat-sub:not(.trash-hint),
+.cat-item.in-trash:focus-visible .cat-sub:not(.trash-hint),
+.cat-item.in-trash.holding .cat-sub:not(.trash-hint) { display: none; }
+.trash-hold { position: absolute; inset: 0; pointer-events: none; }
+.trash-hold::before {
+  content: ""; position: absolute; inset: 0;
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
+  transform: scaleX(0); transform-origin: left center;
+}
+.cat-item.in-trash.holding .trash-hold::before {
+  transform: scaleX(1);
+  transition: transform var(--hold-ms, 1000ms) linear;
+}
+.cat-item.in-trash.selected {
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
+  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
+}
 .cat-extract {
   height: 20px; padding: 0 8px; border: 1px solid var(--accent); border-radius: 5px;
   background: transparent; color: var(--accent); cursor: pointer;
diff --git a/static/index.html b/static/index.html
index 7baf25c0..56490e23 100644
--- a/static/index.html
+++ b/static/index.html
@@ -323,11 +323,12 @@
               <span data-i18n="nav.queue">Queue</span>
               <span class="rail-badge hidden" id="queueBadge" aria-hidden="true"></span>
             </button>
-            <button class="rail-btn rail-trash" type="button" title="Trash" aria-label="Trash" aria-pressed="false" data-i18n-title="nav.trash" data-i18n-aria-label="nav.trash">
+            <button class="rail-btn rail-trash" type="button" title="Trash" aria-label="Trash" aria-pressed="false">
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
                 <path d="M3 6h18 M8 6V4h8v2 M19 6l-1 14H6L5 6"/>
               </svg>
               <span data-i18n="nav.trash">Trash</span>
+              <span class="rail-badge hidden" id="trashBadge" aria-hidden="true"></span>
             </button>
             <div style="flex:1"></div>
             <!-- Notifications (#636). In the rail rather than at the end
diff --git a/static/js/catalog.js b/static/js/catalog.js
index 51e68275..06231b0e 100644
--- a/static/js/catalog.js
+++ b/static/js/catalog.js
@@ -216,6 +216,13 @@ let _loadTrackToken = 0;
 const _autoOpenTokens = new Map();
 let catalogView = "library";
 let catalogSearchQuery = "";
+// Rows picked in the Trash with a click, Ctrl or Shift. A hold on one of them
+// restores them all. The anchor is where the next Shift+click range starts.
+const _trashSelection = new Set();
+let _trashAnchor = null;
+// How long a Trash row has to be held to restore it. daw.css reads it through
+// --hold-ms, so the fill and the timer cannot drift apart.
+const TRASH_HOLD_MS = 1000;
 
 // ─── Persistence ───
 
@@ -1017,6 +1024,7 @@ function setCatalogView(view) {
   // the collapse button's aria-expanded is left claiming the sidebar is still
   // shut.
   if (catalogView !== "library") setSidebarCollapsed(false);
+  if (catalogView !== "trash") clearTrashSelection();
   render();
   // The lyrics panel (lyrics.js) draws itself; this is how it learns it is on
   // screen, without catalog.js importing it.
@@ -1571,22 +1579,145 @@ function wireRailTrashDrop() {
   });
 }
 
-function restoreTrackFromTrash(trackId) {
-  if (!tracks[trackId]) return;
+/** Take tracks back out of the Trash, with one save and one render however
+ *  many there are. Restore never queues a song again (#748): a stopped one
+ *  comes back stopped, with its Extract button. */
+function restoreTracksFromTrash(trackIds) {
   const trash = getTrashFolder();
-  if (!trash?.items.includes(trackId)) return;
-  trash.items = trash.items.filter((id) => id !== trackId);
+  const ids = trackIds.filter((id) => tracks[id] && trash?.items.includes(id));
+  if (!ids.length) return;
+  trash.items = trash.items.filter((id) => !ids.includes(id));
   let target = folders.find((f) => f.id !== TRASH_ID);
   if (!target) {
     target = makeFolder({ id: "f-unsorted", name: "Unsorted" });
     folders.unshift(target);
   }
-  if (!target.items.includes(trackId)) target.items.push(trackId);
-  syncTrashToServer(trackId, false);
+  for (const id of ids) {
+    _trashSelection.delete(id);
+    if (!target.items.includes(id)) target.items.push(id);
+    syncTrashToServer(id, false);
+  }
   saveState();
   render();
 }
 
+/** The rows a gesture on this one acts on: the whole selection when the row
+ *  is part of it, otherwise the row alone. */
+function trashTargets(trackId) {
+  return _trashSelection.has(trackId) ? [..._trashSelection] : [trackId];
+}
+
+function clearTrashSelection() {
+  _trashSelection.clear();
+  _trashAnchor = null;
+}
+
+function paintTrashSelection() {
+  for (const el of document.querySelectorAll(".cat-item.in-trash")) {
+    const selected = _trashSelection.has(el.dataset.id);
+    el.classList.toggle("selected", selected);
+    el.setAttribute("aria-selected", String(selected));
+  }
+}
+
+/** Click picks rows: alone, Ctrl (Cmd on a Mac) adds or removes one, Shift
+ *  takes the range from the last row picked, in the order on screen. */
+function selectTrashRow(trackId, e) {
+  if (e.shiftKey && _trashAnchor) {
+    const order = [...document.querySelectorAll(".cat-item.in-trash")].map((el) => el.dataset.id);
+    const from = order.indexOf(_trashAnchor);
+    const to = order.indexOf(trackId);
+    if (from !== -1 && to !== -1) {
+      if (!(e.ctrlKey || e.metaKey)) _trashSelection.clear();
+      const [a, b] = from < to ? [from, to] : [to, from];
+      for (const id of order.slice(a, b + 1)) _trashSelection.add(id);
+      paintTrashSelection();
+      return;
+    }
+  }
+  if (e.ctrlKey || e.metaKey) {
+    if (_trashSelection.has(trackId)) _trashSelection.delete(trackId);
+    else _trashSelection.add(trackId);
+  } else {
+    _trashSelection.clear();
+    _trashSelection.add(trackId);
+  }
+  _trashAnchor = trackId;
+  paintTrashSelection();
+}
+
+/** A Trash row: click selects, holding for TRASH_HOLD_MS restores it (or the
+ *  selection it belongs to), and dragging it onto Library still restores. A
+ *  click no longer opens the song: every hold let go early would do that. */
+function wireTrashRow(el, trackId) {
+  el.draggable = true;
+  el.tabIndex = 0;
+  el.style.setProperty("--hold-ms", `${TRASH_HOLD_MS}ms`);
+  let timer = null;
+  let restored = false;
+  // Every row the hold will restore fills together, so a selection shows as
+  // one gesture rather than only the row under the pointer.
+  let held = [];
+  const cancel = () => {
+    clearTimeout(timer);
+    timer = null;
+    for (const row of held) row.classList.remove("holding");
+    held = [];
+  };
+  const start = () => {
+    cancel();
+    restored = false;
+    const targets = new Set(trashTargets(trackId));
+    held = [...document.querySelectorAll(".cat-item.in-trash")].filter((row) => targets.has(row.dataset.id));
+    if (!held.includes(el)) held.push(el);
+    for (const row of held) row.classList.add("holding");
+    timer = setTimeout(() => {
+      timer = null;
+      restored = true;
+      for (const row of held) row.classList.remove("holding");
+      held = [];
+      restoreTracksFromTrash([...targets]);
+    }, TRASH_HOLD_MS);
+  };
+  el.addEventListener("pointerdown", (e) => {
+    // Ctrl and Shift are for picking rows, not for restoring them.
+    if (e.button !== 0 || e.ctrlKey || e.metaKey || e.shiftKey) return;
+    start();
+  });
+  for (const type of ["pointerup", "pointerleave", "pointercancel"]) el.addEventListener(type, cancel);
+  el.addEventListener("keydown", (e) => {
+    if ((e.key === "Enter" || e.key === " ") && !e.repeat) {
+      e.preventDefault();
+      start();
+    }
+  });
+  el.addEventListener("keyup", (e) => {
+    if (e.key === "Enter" || e.key === " ") cancel();
+  });
+  el.addEventListener("click", (e) => {
+    if (restored) return;
+    selectTrashRow(trackId, e);
+  });
+  el.addEventListener("dragstart", (e) => {
+    cancel();
+    startDrag(trackId, el, e);
+  });
+  el.addEventListener("dragend", () => endDrag(el));
+}
+
+/** The Trash shows how full it is (#749): the reporter never noticed it was
+ *  there, so nothing told them their deleted songs were still on disk. */
+function updateTrashBadge(count = getTrashFolder()?.items.length ?? 0) {
+  const btn = document.querySelector(".rail-trash");
+  const badge = document.getElementById("trashBadge");
+  if (!btn || !badge) return;
+  badge.textContent = count > 99 ? "99+" : String(count);
+  badge.classList.toggle("hidden", count === 0);
+  const label = count ? i18nT("nav.trashWithCount", { count }) : i18nT("nav.trash");
+  btn.title = label;
+  btn.setAttribute("aria-label", label);
+}
+
 function wireRailLibraryDrop() {
   const btn = document.querySelector(".rail-library");
   if (!btn || btn.dataset.dropReady === "1") return;
@@ -1607,7 +1738,7 @@ function wireRailLibraryDrop() {
     const trackId = getDraggedTrackId(e);
     if (!trackId || !tracks[trackId]) return;
     e.preventDefault();
-    restoreTrackFromTrash(trackId);
+    restoreTracksFromTrash(trashTargets(trackId));
     setCatalogView("library");
   });
 }
@@ -1824,17 +1955,17 @@ function renderTrackItem(trackId, { inTrash = false } = {}) {
 
   const el = document.createElement("div");
   const isUnavailable = track.status === "unavailable";
-  el.className = `cat-item${trackId === _currentTrackId ? " active" : ""}${isUnavailable ? " unavailable" : ""}${!inTrash && track.favorite ? " is-fav" : ""}${!inTrash && track.status === "stopped" ? " is-stopped" : ""}`;
+  el.className = `cat-item${trackId === _currentTrackId ? " active" : ""}${isUnavailable ? " unavailable" : ""}${!inTrash && track.favorite ? " is-fav" : ""}${!inTrash && track.status === "stopped" ? " is-stopped" : ""}${inTrash ? " in-trash" : ""}${inTrash && _trashSelection.has(trackId) ? " selected" : ""}`;
   el.dataset.id = trackId;
 
   el.innerHTML = `
     <div class="cat-thumb">${thumbHtml(track)}</div>
     <div class="cat-meta">
       <div class="cat-title">${esc(displayTitle(track.title))}</div>
-      <div class="cat-sub">${trackSublineHtml(track, { inTrash })}</div>
+      <div class="cat-sub">${trackSublineHtml(track, { inTrash })}</div>${inTrash ? `<div class="cat-sub trash-hint">${esc(i18nT("trash.holdToRestore"))}</div>` : ""}
     </div>
     <div class="cat-status${PROCESSING_STATUSES.has(track.status) ? " processing" : isUnavailable ? " unavailable" : ""}"></div>
-    ${inTrash ? "" : `<div class="cat-actions">${track.status === "stopped" ? extractButtonHtml(track) : ""}${favButtonHtml(track)}<button class="cat-del" type="button" title="${esc(i18nT("track.moveToTrash"))}">
+    ${inTrash ? `<div class="trash-hold" aria-hidden="true"></div>` : `<div class="cat-actions">${track.status === "stopped" ? extractButtonHtml(track) : ""}${favButtonHtml(track)}<button class="cat-del" type="button" title="${esc(i18nT("track.moveToTrash"))}">
       ${TRASH_ICON_SVG}
     </button></div>`}
   `;
@@ -1851,7 +1982,13 @@ function renderTrackItem(trackId, { inTrash = false } = {}) {
   });
   wireFavButton(el, trackId);
 
-  wireTrackDragAndLoad(el, trackId);
+  if (inTrash) {
+    el.title = i18nT("trash.holdToRestore");
+    el.setAttribute("aria-selected", String(_trashSelection.has(trackId)));
+    wireTrashRow(el, trackId);
+  } else {
+    wireTrackDragAndLoad(el, trackId);
+  }
 
   return el;
 }
@@ -2077,6 +2214,8 @@ function render() {
 
   const trash = getTrashFolder();
   const trashIds = new Set(trash?.items || []);
+  for (const id of _trashSelection) if (!trashIds.has(id)) _trashSelection.delete(id);
+  updateTrashBadge(trashIds.size);
   const isTrashView = catalogView === "trash";
   const isFavoritesView = catalogView === "favorites";
   const isQueueView = catalogView === "queue";
diff --git a/static/js/i18n.js b/static/js/i18n.js
index c746b052..f10e4d40 100644
--- a/static/js/i18n.js
+++ b/static/js/i18n.js
@@ -434,6 +434,7 @@ const en = {
   "nav.library": "Library",
   "nav.favorites": "Favorites",
   "nav.trash": "Trash",
+  "nav.trashWithCount": "Trash ({count})",
   "nav.importQueue": "Import queue",
   "nav.queue": "Queue",
   "nav.settings": "Settings",
@@ -464,6 +465,7 @@ const en = {
   "trash.empty": "Empty trash",
   "trash.isEmptyState": "Trash is empty",
   "trash.noSearchMatch": "No deleted tracks match your search",
+  "trash.holdToRestore": "Hold left click for 1 second to restore",
 
   "meta.key": "Key",
   "key.label": "{tonic} {mode}",
@@ -1244,6 +1246,7 @@ const pl = {
   "nav.library": "Biblioteka",
   "nav.favorites": "Ulubione",
   "nav.trash": "Kosz",
+  "nav.trashWithCount": "Kosz ({count})",
   "nav.importQueue": "Kolejka importu",
   "nav.queue": "Kolejka",
   "nav.settings": "Ustawienia",
@@ -1274,6 +1277,7 @@ const pl = {
   "trash.empty": "Opróżnij kosz",
   "trash.isEmptyState": "Kosz jest pusty",
   "trash.noSearchMatch": "Żadne usunięte utwory nie pasują do wyszukiwania",
+  "trash.holdToRestore": "Przytrzymaj lewy przycisk przez 1 sekundę, aby przywrócić",
 
   "meta.key": "Tonacja",
   "key.label": "{tonic} {mode}",
@@ -2044,6 +2048,7 @@ const ja = {
   "nav.library": "ライブラリ",
   "nav.favorites": "お気に入り",
   "nav.trash": "ゴミ箱",
+  "nav.trashWithCount": "ゴミ箱 ({count})",
   "nav.importQueue": "インポートキュー",
   "nav.queue": "キュー",
   "nav.settings": "設定",
@@ -2074,6 +2079,7 @@ const ja = {
   "trash.empty": "ゴミ箱を空にする",
   "trash.isEmptyState": "ゴミ箱は空です",
   "trash.noSearchMatch": "検索に一致する削除済みトラックはありません",
+  "trash.holdToRestore": "左クリックを1秒長押しで復元",
 
   "meta.key": "キー",
   "key.label": "{tonic} {mode}",
@@ -2819,6 +2825,7 @@ const zhHans = {
   "nav.library": "资料库",
   "nav.favorites": "收藏夹",
   "nav.trash": "回收站",
+  "nav.trashWithCount": "回收站 ({count})",
   "nav.importQueue": "导入队列",
   "nav.queue": "队列",
   "nav.settings": "设置",
@@ -2849,6 +2856,7 @@ const zhHans = {
   "trash.empty": "清空回收站",
   "trash.isEmptyState": "回收站是空的",
   "trash.noSearchMatch": "没有已删除的曲目与你的搜索匹配",
+  "trash.holdToRestore": "按住鼠标左键 1 秒即可恢复",
 
   "meta.key": "调性",
   "key.label": "{tonic} {mode}",
@@ -3594,6 +3602,7 @@ const de = {
   "nav.library": "Bibliothek",
   "nav.favorites": "Favoriten",
   "nav.trash": "Papierkorb",
+  "nav.trashWithCount": "Papierkorb ({count})",
   "nav.importQueue": "Importwarteschlange",
   "nav.queue": "Warteschlange",
   "nav.settings": "Einstellungen",
@@ -3624,6 +3633,7 @@ const de = {
   "trash.empty": "Papierkorb leeren",
   "trash.isEmptyState": "Papierkorb ist leer",
   "trash.noSearchMatch": "Keine gelöschten Tracks entsprechen deiner Suche",
+  "trash.holdToRestore": "Linke Maustaste 1 Sekunde halten zum Wiederherstellen",
 
   "meta.key": "Tonart",
   "key.label": "{tonic} {mode}",
@@ -4380,6 +4390,7 @@ const pt = {
   "nav.library": "Biblioteca",
   "nav.favorites": "Favoritos",
   "nav.trash": "Lixeira",
+  "nav.trashWithCount": "Lixeira ({count})",
   "nav.importQueue": "Fila de importação",
   "nav.queue": "Fila",
   "nav.settings": "Configurações",
@@ -4410,6 +4421,7 @@ const pt = {
   "trash.empty": "Esvaziar lixeira",
   "trash.isEmptyState": "A lixeira está vazia",
   "trash.noSearchMatch": "Nenhuma faixa excluída corresponde à sua pesquisa",
+  "trash.holdToRestore": "Segure o clique esquerdo por 1 segundo para restaurar",
 
   "meta.key": "Tom",
   "key.label": "{tonic} {mode}",
@@ -5168,6 +5180,7 @@ const id = {
   "nav.library": "Pustaka",
   "nav.favorites": "Favorit",
   "nav.trash": "Sampah",
+  "nav.trashWithCount": "Sampah ({count})",
   "nav.importQueue": "Antrean impor",
   "nav.queue": "Antrean",
   "nav.settings": "Pengaturan",
@@ -5198,6 +5211,7 @@ const id = {
   "trash.empty": "Kosongkan sampah",
   "trash.isEmptyState": "Sampah kosong",
   "trash.noSearchMatch": "Tidak ada trek terhapus yang cocok dengan pencarian Anda",
+  "trash.holdToRestore": "Tahan klik kiri selama 1 detik untuk memulihkan",
 
   "meta.key": "Nada Dasar",
   "key.label": "{tonic} {mode}",
@@ -5943,6 +5957,7 @@ const fr = {
   "nav.library": "Bibliothèque",
   "nav.favorites": "Favoris",
   "nav.trash": "Corbeille",
+  "nav.trashWithCount": "Corbeille ({count})",
   "nav.importQueue": "File d'importation",
   "nav.queue": "File d'attente",
   "nav.settings": "Paramètres",
@@ -5973,6 +5988,7 @@ const fr = {
   "trash.empty": "Vider la corbeille",
   "trash.isEmptyState": "La corbeille est vide",
   "trash.noSearchMatch": "Aucun morceau supprimé ne correspond à votre recherche",
+  "trash.holdToRestore": "Maintenez le clic gauche 1 seconde pour restaurer",
 
   "meta.key": "Tonalité",
   "key.label": "{tonic} {mode}",
@@ -6903,6 +6919,7 @@ const es = {
   "nav.library": "Biblioteca",
   "nav.favorites": "Favoritos",
   "nav.trash": "Papelera",
+  "nav.trashWithCount": "Papelera ({count})",
   "nav.importQueue": "Cola de importación",
   "nav.queue": "Cola",
   "nav.settings": "Ajustes",
@@ -6933,6 +6950,7 @@ const es = {
   "trash.empty": "Vaciar papelera",
   "trash.isEmptyState": "La papelera está vacía",
   "trash.noSearchMatch": "Ninguna pista eliminada coincide con tu búsqueda",
+  "trash.holdToRestore": "Mantén pulsado el clic izquierdo 1 segundo para restaurar",
 
   "meta.key": "Tonalidad",
   "key.label": "{tonic} {mode}",
@@ -7712,6 +7730,7 @@ const ko = {
   "nav.library": "라이브러리",
   "nav.favorites": "즐겨찾기",
   "nav.trash": "휴지통",
+  "nav.trashWithCount": "휴지통 ({count})",
   "nav.importQueue": "가져오기 대기열",
   "nav.queue": "대기열",
   "nav.settings": "설정",
@@ -7742,6 +7761,7 @@ const ko = {
   "trash.empty": "휴지통 비우기",
   "trash.isEmptyState": "휴지통이 비어 있어요",
   "trash.noSearchMatch": "검색과 맞는 삭제된 트랙이 없어요",
+  "trash.holdToRestore": "왼쪽 클릭을 1초 동안 누르면 복원돼요",
 
   "meta.key": "키",
   "key.label": "{tonic} {mode}",
diff --git a/tests/e2e/trash-restore.spec.mjs b/tests/e2e/trash-restore.spec.mjs
new file mode 100644
index 00000000..88a1019d
--- /dev/null
+++ b/tests/e2e/trash-restore.spec.mjs
@@ -0,0 +1,240 @@
+// The Trash: hovering a row shows how to restore it, a click picks rows
+// (Ctrl adds one, Shift takes a range), and holding the mouse button for a
+// second restores the row, or the whole selection it belongs to. The Trash
+// icon carries a count, so a full Trash is visible from anywhere (#749).
+//
+// The server's trash and restore endpoints are stubbed and recorded. The real
+// ones would leave the shared fixture jobs trashed on the server, and the next
+// spec's startup sync would move them out of its library.
+
+import { test, expect } from "@playwright/test";
+
+import {
+  JOB_ID,
+  SIBLING_JOB_ID,
+  TRACK_TITLE,
+  fixtureTrack,
+  readCatalogState,
+  seedCatalogState,
+  stubUpdateCheck,
+} from "./helpers.mjs";
+
+const THIRD_ID = "e2e0feedface";
+const TRASHED = [JOB_ID, SIBLING_JOB_ID, THIRD_ID];
+
+async function seedFullTrash(page) {
+  await seedCatalogState(page, {
+    folders: [
+      { id: "f-unsorted", name: "Unsorted", items: [], color: null },
+      { id: "trash", name: "Trash", items: [...TRASHED], color: null },
+    ],
+    tracks: {
+      [JOB_ID]: fixtureTrack(JOB_ID, TRACK_TITLE),
+      [SIBLING_JOB_ID]: fixtureTrack(SIBLING_JOB_ID, "Second Trashed"),
+      [THIRD_ID]: { ...fixtureTrack(THIRD_ID, "Third Trashed"), sourceUrl: "local:third.wav" },
+    },
+  });
+  await stubUpdateCheck(page);
+  const calls = [];
+  await page.route(/\/api\/jobs\/[^/]+\/(trash|restore)$/, (route) => {
+    const [, id, action] = route.request().url().match(/\/api\/jobs\/([^/]+)\/(trash|restore)$/);
+    calls.push({ id, action });
+    return route.fulfill({ status: 200, contentType: "application/json", body: "{}" });
+  });
+  return calls;
+}
+
+async function openTrash(page) {
+  await page.goto("/", { waitUntil: "domcontentloaded" });
+  await page.locator(".rail-trash").click();
+  await expect(page.locator("#catalogPanel")).toHaveClass(/trash-view/);
+  for (const id of TRASHED) await expect(trashRow(page, id)).toBeVisible();
+}
+
+const trashRow = (page, id) => page.locator(`#catalogList .cat-item.in-trash[data-id="${id}"]`);
+const restoreCalls = (calls) => calls.filter((c) => c.action === "restore").map((c) => c.id).sort();
+
+/** Press and hold on a row for `ms`, then let go. */
+async function holdOn(page, id, ms) {
+  const box = await trashRow(page, id).boundingBox();
+  await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+  await page.mouse.down();
+  await page.waitForTimeout(ms);
+  await page.mouse.up();
+}
+
+test.describe("the Trash icon", () => {
+  test("shows how many songs are in the Trash", async ({ page }) => {
+    await seedFullTrash(page);
+    await page.goto("/", { waitUntil: "domcontentloaded" });
+    const badge = page.locator("#trashBadge");
+    await expect(badge).toBeVisible();
+    await expect(badge).toHaveText("3");
+    await expect(page.locator(".rail-trash")).toHaveAttribute("aria-label", "Trash (3)");
+  });
+
+  test("shows no count when the Trash is empty", async ({ page }) => {
+    await seedCatalogState(page, {
+      folders: [
+        { id: "f-unsorted", name: "Unsorted", items: [JOB_ID, SIBLING_JOB_ID], color: null },
+        { id: "trash", name: "Trash", items: [], color: null },
+      ],
+      tracks: {
+        [JOB_ID]: fixtureTrack(JOB_ID, TRACK_TITLE),
+        [SIBLING_JOB_ID]: fixtureTrack(SIBLING_JOB_ID, "Second"),
+      },
+    });
+    await stubUpdateCheck(page);
+    await page.goto("/", { waitUntil: "domcontentloaded" });
+    await expect(page.locator(".cat-item").first()).toBeVisible();
+    await expect(page.locator("#trashBadge")).toBeHidden();
+    await expect(page.locator(".rail-trash")).toHaveAttribute("aria-label", "Trash");
+  });
+});
+
+test.describe("a Trash row", () => {
+  test("looks like a library row at rest, and shows the hint on hover", async ({ page }) => {
+    await seedFullTrash(page);
+    await openTrash(page);
+    const row = trashRow(page, JOB_ID);
+    const hint = row.locator(".trash-hint");
+    const line = row.locator(".cat-sub:not(.trash-hint)");
+    await page.mouse.move(0, 0);
+    await expect(row.locator(".cat-meta")).toHaveCSS("filter", "none");
+    await expect(line).toBeVisible();
+    await expect(hint).toBeHidden();
+
+    await row.hover();
+    await expect(hint).toBeVisible();
+    await expect(hint).toHaveText("Hold left click for 1 second to restore");
+    await expect(line).toBeHidden();
+  });
+
+  test("a click selects it and does not open the song", async ({ page }) => {
+    const calls = await seedFullTrash(page);
+    await openTrash(page);
+    await trashRow(page, JOB_ID).click();
+    await expect(trashRow(page, JOB_ID)).toHaveClass(/selected/);
+    await expect(trashRow(page, JOB_ID)).toHaveAttribute("aria-selected", "true");
+    await expect(page.locator(".app")).toHaveClass(/no-track/);
+    expect(restoreCalls(calls)).toEqual([]);
+  });
+
+  test("Ctrl+click picks several, and Ctrl+click again drops one", async ({ page }) => {
+    await seedFullTrash(page);
+    await openTrash(page);
+    await trashRow(page, JOB_ID).click();
+    await trashRow(page, THIRD_ID).click({ modifiers: ["Control"] });
+    await expect(trashRow(page, JOB_ID)).toHaveClass(/selected/);
+    await expect(trashRow(page, THIRD_ID)).toHaveClass(/selected/);
+    await expect(trashRow(page, SIBLING_JOB_ID)).not.toHaveClass(/selected/);
+
+    await trashRow(page, JOB_ID).click({ modifiers: ["Control"] });
+    await expect(trashRow(page, JOB_ID)).not.toHaveClass(/selected/);
+    await expect(trashRow(page, THIRD_ID)).toHaveClass(/selected/);
+  });
+
+  test("Shift+click picks the range from the last row picked", async ({ page }) => {
+    await seedFullTrash(page);
+    await openTrash(page);
+    const order = await page.locator("#catalogList .cat-item.in-trash").evaluateAll((els) => els.map((e) => e.dataset.id));
+    await trashRow(page, order[0]).click();
+    await trashRow(page, order[2]).click({ modifiers: ["Shift"] });
+    for (const id of order) await expect(trashRow(page, id)).toHaveClass(/selected/);
+
+    // A plain click starts over with that row alone.
+    await trashRow(page, order[1]).click();
+    await expect(trashRow(page, order[1])).toHaveClass(/selected/);
+    await expect(trashRow(page, order[0])).not.toHaveClass(/selected/);
+    await expect(trashRow(page, order[2])).not.toHaveClass(/selected/);
+  });
+
+  test("let go before a second and nothing is restored", async ({ page }) => {
+    const calls = await seedFullTrash(page);
+    await openTrash(page);
+    await holdOn(page, JOB_ID, 400);
+    await page.waitForTimeout(900);
+    await expect(trashRow(page, JOB_ID)).toBeVisible();
+    expect(restoreCalls(calls)).toEqual([]);
+  });
+
+  test("held for a second, it leaves the Trash for the library", async ({ page }) => {
+    const calls = await seedFullTrash(page);
+    await openTrash(page);
+    await holdOn(page, JOB_ID, 1300);
+    await expect(trashRow(page, JOB_ID)).toHaveCount(0);
+    await expect(trashRow(page, SIBLING_JOB_ID)).toBeVisible();
+    await expect.poll(() => restoreCalls(calls)).toEqual([JOB_ID]);
+    await expect(page.locator("#trashBadge")).toHaveText("2");
+
+    const state = await readCatalogState(page);
+    expect(state.folders.find((f) => f.id === "trash").items).not.toContain(JOB_ID);
+    expect(state.folders.find((f) => f.id === "f-unsorted").items).toContain(JOB_ID);
+  });
+
+  test("held on a selected row, the whole selection is restored", async ({ page }) => {
+    const calls = await seedFullTrash(page);
+    await openTrash(page);
+    await trashRow(page, JOB_ID).click();
+    await trashRow(page, THIRD_ID).click({ modifiers: ["Control"] });
+    await holdOn(page, THIRD_ID, 1300);
+    await expect(trashRow(page, JOB_ID)).toHaveCount(0);
+    await expect(trashRow(page, THIRD_ID)).toHaveCount(0);
+    await expect(trashRow(page, SIBLING_JOB_ID)).toBeVisible();
+    await expect.poll(() => restoreCalls(calls)).toEqual([JOB_ID, THIRD_ID].sort());
+    await expect(page.locator("#trashBadge")).toHaveText("1");
+  });
+
+  test("held on a selected row, every selected row shows the fill, and letting go clears it", async ({ page }) => {
+    await seedFullTrash(page);
+    await openTrash(page);
+    await trashRow(page, JOB_ID).click();
+    await trashRow(page, THIRD_ID).click({ modifiers: ["Control"] });
+    const box = await trashRow(page, THIRD_ID).boundingBox();
+    await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+    await page.mouse.down();
+    await expect(trashRow(page, JOB_ID)).toHaveClass(/holding/);
+    await expect(trashRow(page, THIRD_ID)).toHaveClass(/holding/);
+    await expect(trashRow(page, SIBLING_JOB_ID)).not.toHaveClass(/holding/);
+    await page.mouse.up();
+    await expect(trashRow(page, JOB_ID)).not.toHaveClass(/holding/);
+    await expect(trashRow(page, THIRD_ID)).not.toHaveClass(/holding/);
+  });
+
+  test("held on a row outside the selection, only that row shows the fill", async ({ page }) => {
+    await seedFullTrash(page);
+    await openTrash(page);
+    await trashRow(page, JOB_ID).click();
+    await trashRow(page, THIRD_ID).click({ modifiers: ["Control"] });
+    const box = await trashRow(page, SIBLING_JOB_ID).boundingBox();
+    await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+    await page.mouse.down();
+    await expect(trashRow(page, SIBLING_JOB_ID)).toHaveClass(/holding/);
+    await expect(trashRow(page, JOB_ID)).not.toHaveClass(/holding/);
+    await expect(trashRow(page, THIRD_ID)).not.toHaveClass(/holding/);
+    await page.mouse.up();
+  });
+
+  test("held on a row outside the selection, only that row is restored", async ({ page }) => {
+    const calls = await seedFullTrash(page);
+    await openTrash(page);
+    await trashRow(page, JOB_ID).click();
+    await trashRow(page, THIRD_ID).click({ modifiers: ["Control"] });
+    await holdOn(page, SIBLING_JOB_ID, 1300);
+    await expect(trashRow(page, SIBLING_JOB_ID)).toHaveCount(0);
+    await expect(trashRow(page, JOB_ID)).toBeVisible();
+    await expect(trashRow(page, THIRD_ID)).toBeVisible();
+    await expect.poll(() => restoreCalls(calls)).toEqual([SIBLING_JOB_ID]);
+  });
+
+  test("holding Enter on a focused row restores it too", async ({ page }) => {
+    const calls = await seedFullTrash(page);
+    await openTrash(page);
+    await trashRow(page, JOB_ID).focus();
+    await page.keyboard.down("Enter");
+    await page.waitForTimeout(1300);
+    await page.keyboard.up("Enter");
+    await expect(trashRow(page, JOB_ID)).toHaveCount(0);
+    await expect.poll(() => restoreCalls(calls)).toEqual([JOB_ID]);
+  });
+});