🪢 Wiring up to addTorrent endpoint (#105)

* 🪢 Wiring up to addTorrent endpoint

* 🧲 Added a torrent download sub-panel

* 🧲 Fixed the auto-population of search box

* 🧲 Added downloads panel

* 🧲 Surfacing torrent progress in UI via scheduled job

* 🧲 Added visual indicators of torrent progress

* 💅🏼 Formatting improvements

* 💅🏼 Formatting tweaks to tabs

src/client/components/ComicDetail/TorrentDownloads.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import dayjs from "dayjs";
+import prettyBytes from "pretty-bytes";
+
+export const TorrentDownloads = (props) => {
+  const { data } = props;
+  console.log(Object.values(data));
+  return (
+    <>
+      {data.map(({ torrent }) => {
+        return (
+          <dl className="mt-5 dark:text-slate-200 text-slate-600">
+            <dt className="text-lg">{torrent.name}</dt>
+            <p className="text-sm">{torrent.hash}</p>
+            <p className="text-sm">
+              Added on {dayjs.unix(torrent.added_on).format("ddd, D MMM, YYYY")}
+            </p>
+
+            <p className="flex gap-2 mt-1">
+              {torrent.progress > 0 ? (
+                <>
+                  <progress
+                    className="w-80 mt-2 [&::-webkit-progress-bar]:rounded-lg [&::-webkit-progress-value]:rounded-lg [&::-webkit-progress-bar]:bg-slate-300 [&::-webkit-progress-value]:bg-green-400 [&::-moz-progress-bar]:bg-green-400 h-2"
+                    value={Math.floor(torrent.progress * 100).toString()}
+                    max="100"
+                  ></progress>
+
+                  <span>{Math.floor(torrent.progress * 100)}%</span>
+
+                  {/* downloaded/left */}
+                  <p className="inline-flex items-center bg-slate-200 text-green-800 dark:text-green-900 text-xs font-medium px-2.5 py-1 rounded-md dark:bg-slate-400">
+                    <span className="pr-1">
+                      <i className="icon-[solar--arrow-to-down-left-outline] h-4 w-4"></i>
+                    </span>
+                    <span className="text-md">
+                      {prettyBytes(torrent.downloaded)}
+                    </span>
+                    {/* uploaded */}
+                    <span className="pr-1 text-orange-800 dark:text-orange-900 ml-2">
+                      <i className="icon-[solar--arrow-to-top-left-outline] h-4 w-4"></i>
+                    </span>
+                    <span className="text-md text-orange-800 dark:text-orange-900">
+                      {prettyBytes(torrent.uploaded)}
+                    </span>
+                  </p>
+                </>
+              ) : null}
+            </p>
+            <div className="flex gap-4 mt-2">
+              {/* Peers */}
+              <span className="inline-flex items-center bg-slate-200 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                <span className="pr-1">
+                  <i className="icon-[solar--station-minimalistic-line-duotone] h-5 w-5"></i>
+                </span>
+                <span className="text-md text-slate-900">
+                  {torrent.trackers_count}
+                </span>
+              </span>
+
+              {/* Size */}
+              <span className="inline-flex items-center bg-slate-200 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                <span className="pr-1 pt-1">
+                  <i className="icon-[solar--mirror-right-bold-duotone] h-4 w-4"></i>
+                </span>
+                <span className="text-md text-slate-900">
+                  {prettyBytes(torrent.total_size)}
+                </span>
+              </span>
+            </div>
+          </dl>
+        );
+      })}
+    </>
+  );
+};
+
+export default TorrentDownloads;