another commit without a list of specific changes! (misc)

src/components/TRip/RequestManagement.jsx

@@ -5,12 +5,13 @@ import { Column } from "primereact/column";
 import { Dropdown } from "primereact/dropdown";
 import { Button } from "@mui/joy";
 import { Dialog } from "primereact/dialog";
+import { authFetch } from "@/utils/authFetch";
 import { confirmDialog, ConfirmDialog } from "primereact/confirmdialog";
 import BreadcrumbNav from "./BreadcrumbNav";
 import { API_URL } from "@/config";
 
 const STATUS_OPTIONS = ["queued", "started", "compressing", "finished", "failed"];
-const TAR_BASE_URL = "https://codey.lol/m/m2/"; // configurable prefix
+const TAR_BASE_URL = "https://codey.lol/m/m2"; // configurable prefix
 
 export default function RequestManagement() {
   const [requests, setRequests] = useState([]);
@@ -22,12 +23,11 @@ export default function RequestManagement() {
   const pollingRef = useRef(null);
   const pollingDetailRef = useRef(null);
 
-  const authFetch = async (url, options = {}) => fetch(url, { ...options, credentials: "include" });
 
-  const tarballUrl = (absPath) => {
+  const tarballUrl = (absPath, quality) => {
     if (!absPath) return null;
     const filename = absPath.split("/").pop(); // get "SOMETHING.tar.gz"
-    return `${TAR_BASE_URL}${filename}`;
+    return `${TAR_BASE_URL}/${quality}/${filename}`;
   };
 
   const fetchJobs = async () => {
@@ -53,7 +53,12 @@ export default function RequestManagement() {
       return await res.json();
     } catch (err) {
       console.error(err);
-      toast.error("Failed to fetch job details");
+      if (!toast.isActive('fetch-job-fail-toast')) {
+        toast.error("Failed to fetch job details",
+          {
+            toastId: "fetch-job-fail-toast",
+          });
+      }
       return null;
     }
   };
@@ -108,17 +113,41 @@ export default function RequestManagement() {
     }
   };
 
+  const getQualityColorClass = (quality) => {
+    switch (quality) {
+      case "FLAC": return "bg-green-500 text-white";
+      case "Lossy": return "bg-yellow-500 text-white";
+      default: return "bg-gray-500 text-white";
+    }
+  };
+
+
   const statusBodyTemplate = (rowData) => (
     <span className={`inline-block px-3 py-1 rounded-full font-semibold text-sm ${getStatusColorClass(rowData.status)}`}>
       {rowData.status}
     </span>
   );
 
+  const qualityBodyTemplate = (rowData) => (
+    <span className={`inline-block px-3 py-1 rounded-full font-semibold text-sm ${getQualityColorClass(rowData.quality)}`}>
+      {rowData.quality}
+    </span>
+  );
+
+
   const safeText = (val) => (val === 0 ? "0" : val || "—");
   const textWithEllipsis = (val, width = "12rem") => (
     <span className="truncate block" style={{ maxWidth: width }} title={val || ""}>{val || "—"}</span>
   );
 
+  const truncate = (text, maxLen) =>
+    maxLen <= 3
+      ? text.slice(0, maxLen)
+      : text.length <= maxLen
+        ? text
+        : text.slice(0, maxLen - 3) + '...';
+
+
   const basename = (p) => (typeof p === "string" ? p.split("/").pop() : "");
 
   const formatProgress = (p) => {
@@ -280,16 +309,16 @@ export default function RequestManagement() {
           responsiveLayout="scroll"
           onRowClick={handleRowClick}
         >
-          <Column field="id" header="ID" sortable style={{ width: "10rem" }} body={(row) => textWithEllipsis(row.id, "8rem")} />
+          <Column field="id" header="ID" sortable style={{ width: "8rem" }} body={(row) => textWithEllipsis(row.id, "6rem")} />
           <Column field="target" header="Target" sortable style={{ width: "12rem" }} body={(row) => textWithEllipsis(row.target, "10rem")} />
-          <Column field="tracks" header="# Tracks" sortable style={{ width: "10rem" }} body={(row) => row.tracks} />
+          <Column field="tracks" header="# Tracks" sortable 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);
+              const url = tarballUrl(row.tarball, row.quality || "FLAC");
               return url ? (
                 <a
                   href={url}
@@ -298,14 +327,20 @@ export default function RequestManagement() {
                   className="text-blue-500 hover:underline truncate block"
                   title={url.split("/").pop()}
                 >
-                  {url.split("/").pop()}
+                  {truncate(url.split("/").pop(), 16)}
                 </a>
               ) : (
                 "—"
               );
             }}
-            style={{ width: "18rem" }}
+            style={{ width: "10rem" }}
           />
+          <Column
+            field="quality"
+            header="Quality"
+            body={qualityBodyTemplate}
+            style={{ width: "6rem", textAlign: "center" }}
+            sortable />
         </DataTable>
       </div>
 
@@ -368,12 +403,19 @@ export default function RequestManagement() {
                 </a>
               </p>
             )}
+            {selectedRequest.quality && (
+              <p><strong>Quality:</strong>{" "}
+                <span
+                  className={`px-2 py-0.5 rounded-full text-xs font-bold ${getQualityColorClass(selectedRequest.quality)}`}
+                >{selectedRequest.quality}</span></p>
+            )}
           </div>
         ) : (
           <p>Loading...</p>
-        )}
-      </Dialog>
+        )
+        }
+      </Dialog >
 
-    </div>
+    </div >
   );
 }