misc

src/components/TRip/MediaRequestForm.jsx

@@ -268,7 +268,7 @@ export default function MediaRequestForm() {
         if (albumsToFetch.length === 0) return;
 
         const fetchTracksSequentially = async () => {
-            const minDelay = 500; // ms between API requests
+            const minDelay = 650; // ms between API requests
             setIsFetching(true);
 
             const totalAlbums = albumsToFetch.length;

src/components/TRip/RequestManagement.jsx

@@ -308,38 +308,56 @@ export default function RequestManagement() {
           emptyMessage="No requests found."
           onRowClick={handleRowClick}
         >
-          <Column field="id" header="ID" style={{ width: "8rem" }} body={(row) => textWithEllipsis(row.id, "6rem")} />
+
+          <Column
+            field="id"
+            header="ID"
+            style={{ width: "6rem" }}
+            body={(row) => (
+              <span title={row.id}>
+                {row.id.split("-").slice(-1)[0]}
+              </span>
+            )}
+          />
           <Column field="target" header="Target" sortable style={{ width: "12rem" }} body={(row) => textWithEllipsis(row.target, "10rem")} />
           <Column field="tracks" header="# Tracks" style={{ width: "8rem" }} body={(row) => row.tracks} />
           <Column field="status" header="Status" body={statusBodyTemplate} style={{ width: "10rem", textAlign: "center" }} sortable />
           <Column field="progress" header="Progress" body={(row) => formatProgress(row.progress)} style={{ width: "8rem", textAlign: "center" }} sortable />
-          <Column
-            field="tarball"
-            header="Tarball"
-            body={(row) => {
-              const url = tarballUrl(row.tarball, row.quality || "FLAC");
-              return url ? (
-                <a
-                  href={url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-blue-500 hover:underline truncate block"
-                  title={url.split("/").pop()}
-                >
-                  {truncate(url.split("/").pop(), 16)}
-                </a>
-              ) : (
-                "—"
-              );
-            }}
-            style={{ width: "10rem" }}
-          />
           <Column
             field="quality"
             header="Quality"
             body={qualityBodyTemplate}
             style={{ width: "6rem", textAlign: "center" }}
             sortable />
+          <Column
+            field="tarball"
+            header={
+              <span className="flex items-center">
+                <i className="pi pi-download mr-1" /> {/* download icon in header */}
+                Tarball
+              </span>
+            }
+            body={(row) => {
+              const url = tarballUrl(row.tarball, row.quality || "FLAC");
+              const encodedURL = encodeURI(url);
+              if (!url) return "—";
+
+              const fileName = url.split("/").pop();
+
+              return (
+                <a
+                  href={encodedURL}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="truncate text-blue-500 hover:underline"
+                  title={fileName}
+                >
+                  {truncate(fileName, 16)}
+                </a>
+              );
+            }}
+            style={{ width: "10rem" }}
+          />
         </DataTable>
       </div>
 
@@ -402,7 +420,7 @@ export default function RequestManagement() {
                   <p>
                     <strong>Tarball:</strong>{" "}
                     <a
-                      href={tarballUrl(selectedRequest.tarball, selectedRequest.quality)}
+                      href={encodeURI(tarballUrl(selectedRequest.tarball, selectedRequest.quality))}
                       target="_blank"
                       rel="noopener noreferrer"
                       className="text-blue-500 hover:underline"