feat: closes #21

app/components/icons.tsx

@@ -589,3 +589,22 @@ export const ExclamationCircleIcon = ({
     </svg>
   );
 };
+
+export const DownloadIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}>
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"
+        />
+    </svg>
+  );
+};

app/routes/file-manager/columns.tsx

@@ -1,6 +1,6 @@
 import { TrashIcon } from "@radix-ui/react-icons";
 import type { ColumnDef } from "@tanstack/react-table";
-import { FileIcon, MoreIcon } from "~/components/icons";
+import { DownloadIcon, FileIcon, MoreIcon } from "~/components/icons";
 import { Checkbox } from "~/components/ui/checkbox";
 import {
   DropdownMenu,
@@ -14,6 +14,7 @@ import { cn } from "~/utils";
 import type { FileItem } from "~/data/file-provider";
 import { usePinning } from "~/hooks/usePinning";
 import filesize from "~/components/lib/filesize";
+import { Button } from "~/components/ui/button";
 
 
 // This type is used to define the shape of our data.
@@ -50,19 +51,15 @@ export const columns: ColumnDef<FileItem>[] = [
     enableHiding: false,
   },
   {
-    accessorKey: "name",
+    accessorKey: "cid",
-    header: "Name",
+    header: "CID",
     cell: ({ row }) => (
       <div className="flex items-center gap-x-2">
         <FileIcon />
-        {row.getValue("name")}
+        {row.getValue("name") ?? row.getValue("cid")}
       </div>
     ),
   },
-  {
-    accessorKey: "cid",
-    header: "CID",
-  },
   {
     accessorKey: "size",
     header: "Size",
@@ -82,12 +79,20 @@ export const columns: ColumnDef<FileItem>[] = [
     size: 20,
     cell: ({ row }) => {
       const { unpin } = usePinning();
+      const downloadFile = () => {
+        // TODO: @pcfreak30 download file
+        const cid = row.getValue("cid");
+        console.log(cid);
+      };
       return (
-        <div className="flex w-5 items-center justify-between">
+        <div className="flex space-x-2 w-10 items-center justify-between">
+          <Button size={"icon"} variant="ghost" onClick={downloadFile}>
+            <DownloadIcon className="w-5"/>
+          </Button>
           <DropdownMenu>
             <DropdownMenuTrigger
               className={cn(
-                "hidden group-hover:block data-[state=open]:block",
+                "opacity-0 group-hover:opacity-100 data-[state=open]:opacity-100",
                 row.getIsSelected() && "block",
               )}>
               <MoreIcon />