feat(web): link Dashboard stats to Releases page (#1281)

* feat(web): link stats to release table

- added Errored Pushes
- Made Recent Activity same color as Stats

* feat(releasetable): made links a separate row

https://i.imgur.com/ZoAOrXP.png

remove comment

* added LinkIcon to StatsItem

- Changed grid-cols to 2, as we now have 4 for narrow widths

* fix linting

* move some text modifier to parent element

* feat: add scale on hover with transition

deduplicated some classes

* adapt gap between StatsItems for mobile
remove border and title on stats divs

---------

Co-authored-by: Fabricio Silva <hi@fabricio.dev>
Co-authored-by: martylukyy <35452459+martylukyy@users.noreply.github.com>

web/src/components/data-table/Cells.tsx

@@ -8,6 +8,8 @@ import { toast } from "react-hot-toast";
 import { formatDistanceToNowStrict } from "date-fns";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { ArrowPathIcon, CheckIcon } from "@heroicons/react/24/solid";
+import { ArrowDownTrayIcon, ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
+import { ExternalLink } from "../ExternalLink";
 import { ClockIcon, XMarkIcon, NoSymbolIcon } from "@heroicons/react/24/outline";
 
 import { APIClient } from "@api/APIClient";
@@ -21,6 +23,10 @@ interface CellProps {
     value: string;
 }
 
+interface LinksCellProps {
+  value: Release;
+}
+
 export const AgeCell = ({ value }: CellProps) => (
   <div className="text-sm text-gray-500" title={simplifyDate(value)}>
     {formatDistanceToNowStrict(new Date(value), { addSuffix: false })}
@@ -243,3 +249,20 @@ export const ReleaseStatusCell = ({ value }: ReleaseStatusCellProps) => (
     ))}
   </div>
 );
+
+export const LinksCell = ({ value }: LinksCellProps) => {
+  return (
+    <div className="flex space-x-2 text-blue-400 dark:text-blue-500">
+      {value.download_url && (
+        <ExternalLink href={value.download_url}>
+          <ArrowDownTrayIcon title="Download torrent file" className="h-5 w-5 hover:text-blue-500 dark:hover:text-blue-600" aria-hidden="true" />
+        </ExternalLink>
+      )}
+      {value.info_url && (
+        <ExternalLink href={value.info_url}>
+          <ArrowTopRightOnSquareIcon title="Visit torrentinfo url" className="h-5 w-5 hover:text-blue-500 dark:hover:text-blue-600" aria-hidden="true" />
+        </ExternalLink>
+      )}
+    </div>
+  );
+};

web/src/components/data-table/index.tsx

@@ -4,4 +4,4 @@
  */
 
 export { Button, PageButton } from "./Buttons";
-export { AgeCell, IndexerCell, TitleCell, ReleaseStatusCell } from "./Cells";
+export { AgeCell, IndexerCell, TitleCell, ReleaseStatusCell, LinksCell } from "./Cells";