fix: UX changes regarding showing dates on table and actions pannel

app/components/data-table.tsx

@@ -1,8 +1,8 @@
 import { useMemo} from "react";
-import { BaseRecord } from "@refinedev/core";
+import type { BaseRecord } from "@refinedev/core";
 import { useTable } from "@refinedev/react-table";
 import {
-  ColumnDef,
+  type ColumnDef,
   flexRender,
 } from "@tanstack/react-table";
 

app/components/general-layout.tsx

@@ -29,10 +29,10 @@ import { DropdownMenu, DropdownMenuTrigger,  DropdownMenuContent, DropdownMenuGr
 import { Avatar } from "@radix-ui/react-avatar";
 import { cn } from "~/utils";
 import { useGetIdentity, useLogout } from "@refinedev/core";
-import { Identity } from "~/data/auth-provider";
+import type { Identity } from "~/data/auth-provider";
 
 
-export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
+export const GeneralLayout = ({ children }: React.PropsWithChildren) => {
   const location = useLocation();
   const { data: identity } = useGetIdentity<Identity>();
   const{ mutate: logout } = useLogout()

app/components/lib/uppy.ts

@@ -1,14 +1,21 @@
-import Uppy, {debugLogger, type State, UppyFile} from "@uppy/core"
+import Uppy, { debugLogger, type State, type UppyFile } from "@uppy/core";
 
-import Tus from "@uppy/tus"
+import Tus from "@uppy/tus";
-import toArray from "@uppy/utils/lib/toArray"
+import toArray from "@uppy/utils/lib/toArray";
 
-import {type ChangeEvent, useCallback, useEffect, useMemo, useRef, useState} from "react"
+import {
-import DropTarget, {type DropTargetOptions} from "./uppy-dropzone"
+  type ChangeEvent,
-import {useSdk} from "~/components/lib/sdk-context.js";
+  useCallback,
-import UppyFileUpload from "~/components/lib/uppy-file-upload.js";
+  useEffect,
-import {PROTOCOL_S5, Sdk} from "@lumeweb/portal-sdk";
+  useMemo,
-import {S5Client, HashProgressEvent} from "@lumeweb/s5-js";
+  useRef,
+  useState,
+} from "react";
+import DropTarget, { type DropTargetOptions } from "./uppy-dropzone";
+import { useSdk } from "~/components/lib/sdk-context";
+import UppyFileUpload from "~/components/lib/uppy-file-upload";
+import { PROTOCOL_S5, type Sdk } from "@lumeweb/portal-sdk";
+import type { S5Client, HashProgressEvent } from "@lumeweb/s5-js";
 
 const LISTENING_EVENTS = [
   "upload",
@@ -16,13 +23,13 @@ const LISTENING_EVENTS = [
   "upload-error",
   "file-added",
   "file-removed",
-  "files-added"
+  "files-added",
-] as const
+] as const;
 
 export function useUppy() {
-    const sdk = useSdk()
+  const sdk = useSdk();
 
-    const [uploadLimit, setUploadLimit] = useState<number>(0)
+  const [uploadLimit, setUploadLimit] = useState<number>(0);
 
   useEffect(() => {
     async function getUploadLimit() {
@@ -30,32 +37,32 @@ export function useUppy() {
         const limit = await sdk.account!().uploadLimit();
         setUploadLimit(limit);
       } catch (err) {
-                console.log('Error occured while fetching upload limit', err);
+        console.log("Error occured while fetching upload limit", err);
       }
     }
     getUploadLimit();
-    }, []);
+  }, [sdk.account]);
 
-  const inputRef = useRef<HTMLInputElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null);
-  const [targetRef, _setTargetRef] = useState<HTMLElement | null>(null)
+  const [targetRef, _setTargetRef] = useState<HTMLElement | null>(null);
-  const uppyInstance = useRef<Uppy>()
+  const uppyInstance = useRef<Uppy>();
   const setRef = useCallback(
     (element: HTMLElement | null) => _setTargetRef(element),
-    []
+    [],
-  )
+  );
-  const [, setUppyState] = useState<State>()
+  const [, setUppyState] = useState<State>();
   const [state, setState] = useState<
     "completed" | "idle" | "initializing" | "error" | "uploading"
-  >("initializing")
+  >("initializing");
 
   const [inputProps, setInputProps] = useState<
     | {
-        ref: typeof inputRef
+        ref: typeof inputRef;
-        type: "file"
+        type: "file";
-        onChange: (event: ChangeEvent<HTMLInputElement>) => void
+        onChange: (event: ChangeEvent<HTMLInputElement>) => void;
       }
     | object
-  >({})
+  >({});
   const getRootProps = useMemo(
     () => () => {
       return {
@@ -63,35 +70,35 @@ export function useUppy() {
         onClick: () => {
           if (inputRef.current) {
             //@ts-expect-error -- dumb html
-            inputRef.current.value = null
+            inputRef.current.value = null;
-            inputRef.current.click()
+            inputRef.current.click();
-            console.log("clicked", { input: inputRef.current })
+            console.log("clicked", { input: inputRef.current });
           }
         },
-        role: "presentation"
+        role: "presentation",
-      }
+      };
     },
-    [setRef]
+    [setRef],
-  )
+  );
   const removeFile = useCallback(
     (id: string) => {
-      uppyInstance.current?.removeFile(id)
+      uppyInstance.current?.removeFile(id);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [targetRef, uppyInstance]
+    [targetRef, uppyInstance],
-  )
+  );
   const cancelAll = useCallback(
     () => uppyInstance.current?.cancelAll({ reason: "user" }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [targetRef, uppyInstance]
+    [targetRef, uppyInstance],
-  )
+  );
 
   useEffect(() => {
-    if (!targetRef) return
+    if (!targetRef) return;
 
     const tusPreprocessor = async (fileIDs: string[]) => {
-        for(const fileID of fileIDs) {
+      for (const fileID of fileIDs) {
-            const file = uppyInstance.current?.getFile(fileID) as UppyFile
+        const file = uppyInstance.current?.getFile(fileID) as UppyFile;
         // @ts-ignore
         if (file.uploader === "tus") {
           const hashProgressCb = (event: HashProgressEvent) => {
@@ -101,21 +108,28 @@ export function useUppy() {
               preprocess: {
                 mode: "determinate",
                 message: "Hashing file...",
-                            value: Math.round((event.total / event.total) * 100)
+                value: Math.round((event.total / event.total) * 100),
-                        }
+              },
-                    })
+            });
-                }
+          };
-                const options = await sdk.protocols!().get<S5Client>(PROTOCOL_S5).getSdk().getTusOptions(file.data as File,  {}, {onHashProgress: hashProgressCb})
+          const options = await sdk.protocols!()
+            .get<S5Client>(PROTOCOL_S5)
+            .getSdk()
+            .getTusOptions(
+              file.data as File,
+              {},
+              { onHashProgress: hashProgressCb },
+            );
           uppyInstance.current?.setFileState(fileID, {
             tus: options,
             meta: {
               ...options.metadata,
               ...file.meta,
-                    }
+            },
-                })
+          });
-            }
         }
       }
+    };
 
     const uppy = new Uppy({
       logger: debugLogger,
@@ -128,25 +142,25 @@ export function useUppy() {
         return true;
       },
     }).use(DropTarget, {
-      target: targetRef
+      target: targetRef,
-    } as DropTargetOptions)
+    } as DropTargetOptions);
 
-    uppyInstance.current = uppy
+    uppyInstance.current = uppy;
     setInputProps({
       ref: inputRef,
       type: "file",
       onChange: (event) => {
-        const files = toArray(event.target.files)
+        const files = toArray(event.target.files);
         if (files.length > 0) {
-          uppyInstance.current?.log("[DragDrop] Files selected through input")
+          uppyInstance.current?.log("[DragDrop] Files selected through input");
-          uppyInstance.current?.addFiles(files)
+          uppyInstance.current?.addFiles(files);
         }
 
         uppy.iteratePlugins((plugin) => {
           uppy.removePlugin(plugin);
         });
 
-          uppy.use(UppyFileUpload, { sdk: sdk as Sdk })
+        uppy.use(UppyFileUpload, { sdk: sdk as Sdk });
 
         let useTus = false;
 
@@ -154,11 +168,11 @@ export function useUppy() {
           if (file.size > uploadLimit) {
             useTus = true;
           }
-          })
+        });
 
         if (useTus) {
-              uppy.use(Tus, { limit: 6, parallelUploads: 10 })
+          uppy.use(Tus, { limit: 6, parallelUploads: 10 });
-              uppy.addPreProcessor(tusPreprocessor)
+          uppy.addPreProcessor(tusPreprocessor);
         }
 
         // We clear the input after a file is selected, because otherwise
@@ -169,54 +183,52 @@ export function useUppy() {
         //    Chrome will not trigger change if we drop the same file twice (Issue #768).
         // @ts-expect-error TS freaks out, but this is fine
         // eslint-disable-next-line no-param-reassign
-        event.target.value = null
+        event.target.value = null;
-      }
+      },
-    })
+    });
-
-
 
     uppy.on("complete", (result) => {
       if (result.failed.length === 0) {
-        console.log("Upload successful üòÄ")
+        console.log("Upload successful üòÄ");
-        setState("completed")
+        setState("completed");
       } else {
-        console.warn("Upload failed üòû")
+        console.warn("Upload failed üòû");
-        setState("error")
+        setState("error");
       }
-      console.log("successful files:", result.successful)
+      console.log("successful files:", result.successful);
-      console.log("failed files:", result.failed)
+      console.log("failed files:", result.failed);
-    })
+    });
 
     const setStateCb = (event: (typeof LISTENING_EVENTS)[number]) => {
       switch (event) {
         case "upload":
-          setState("uploading")
+          setState("uploading");
-          break
+          break;
         case "upload-error":
-          setState("error")
+          setState("error");
-          break
+          break;
         default:
-          break
+          break;
-      }
-      setUppyState(uppy.getState())
       }
+      setUppyState(uppy.getState());
+    };
 
     for (const event of LISTENING_EVENTS) {
       uppy.on(event, function cb() {
-        setStateCb(event)
+        setStateCb(event);
-      })
+      });
     }
-    setState("idle")
+    setState("idle");
-  }, [targetRef, uploadLimit])
+  }, [targetRef, uploadLimit]);
 
   useEffect(() => {
     return () => {
-      uppyInstance.current?.cancelAll({ reason: "unmount" })
+      uppyInstance.current?.cancelAll({ reason: "unmount" });
-      uppyInstance.current?.logout()
+      uppyInstance.current?.logout();
-      uppyInstance.current?.close()
+      uppyInstance.current?.close();
-      uppyInstance.current = undefined
+      uppyInstance.current = undefined;
-    }
+    };
-  }, [])
+  }, []);
   return {
     getFiles: () => uppyInstance.current?.getFiles() ?? [],
     error: uppyInstance.current?.getState,
@@ -227,6 +239,6 @@ export function useUppy() {
     getInputProps: () => inputProps,
     getRootProps,
     removeFile,
-    cancelAll
+    cancelAll,
-  }
+  };
 }

app/components/ui/toast.tsx

@@ -60,7 +60,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-background px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
       className
     )}
     {...props}

app/components/ui/toaster.tsx

@@ -14,7 +14,7 @@ export function Toaster() {
 
   return (
     <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, cancelMutation, ...props }) {
+      {toasts.map(({ id, title, description, action, cancelMutation, ...props }) => {
         const undoButton = cancelMutation ? <ToastAction altText="Undo" onClick={cancelMutation}>Undo</ToastAction> : undefined
         return (
           <Toast key={id} {...props}>

app/root.tsx

@@ -28,7 +28,7 @@ export function Layout({children}: { children: React.ReactNode }) {
             <Meta/>
             <Links/>
         </head>
-        <body>
+        <body className="overflow-hidden">
         {children}
         <Toaster/>
         <ScrollRestoration/>

app/routes/file-manager/columns.tsx

@@ -2,14 +2,20 @@ import { DrawingPinIcon, TrashIcon } from "@radix-ui/react-icons";
 import type { ColumnDef, RowData } from "@tanstack/react-table";
 import { FileIcon, MoreIcon } from "~/components/icons";
 import { Checkbox } from "~/components/ui/checkbox";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "~/components/ui/dropdown-menu";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
 import { cn } from "~/utils";
-import {FileItem} from "~/data/file-provider.js";
+import type { FileItem } from "~/data/file-provider";
-import {format} from "date-fns/fp";
 
-declare module '@tanstack/table-core' {
+declare module "@tanstack/table-core" {
   interface TableMeta<TData extends RowData> {
-      hoveredRowId: string,
+    hoveredRowId: string;
   }
 }
 
@@ -19,7 +25,6 @@ export const columns: ColumnDef<FileItem>[] = [
     size: 20,
     header: ({ table }) => (
       <Checkbox
-
         checked={
           table.getIsAllPageRowsSelected() ||
           (table.getIsSomePageRowsSelected() && "indeterminate")
@@ -46,7 +51,7 @@ export const columns: ColumnDef<FileItem>[] = [
         <FileIcon />
         {row.getValue("name")}
       </div>
-        )
+    ),
   },
   {
     accessorKey: "cid",
@@ -58,24 +63,25 @@ export const columns: ColumnDef<FileItem>[] = [
   },
   {
     accessorKey: "pinned",
-        size: 200,
     header: "Pinned On",
+    cell: ({ row }) => new Date(row.getValue("pinned")).toLocaleString(),
+  },
+  {
+    accessorKey: "actions",
+    header: () => null,
+    size: 20,
     cell: ({ row }) => (
-          <div className="flex items-center justify-between">
+      <div className="flex w-5 items-center justify-between">
-            {format(row.getValue("pinned")) as unknown as string}
         <DropdownMenu>
-              <DropdownMenuTrigger className={
+          <DropdownMenuTrigger
-                cn("hidden group-hover:block data-[state=open]:block", row.getIsSelected() && "block")
+            className={cn(
-              }>
+              "hidden group-hover:block data-[state=open]:block",
+              row.getIsSelected() && "block",
+            )}>
             <MoreIcon />
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end">
             <DropdownMenuGroup>
-                  <DropdownMenuItem>
-                    <DrawingPinIcon className="mr-2" />
-                    Ping CID
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
               <DropdownMenuItem variant="destructive">
                 <TrashIcon className="mr-2" />
                 Delete
@@ -84,6 +90,6 @@ export const columns: ColumnDef<FileItem>[] = [
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
-        )
+    ),
-    }
+  },
 ];

app/routes/file-manager/index.tsx

@@ -18,8 +18,8 @@ import { Field } from "~/components/forms";
 export default function FileManager() {
   return (
     <Authenticated key="dashboard" v3LegacyAuthProviderCompatible>
-      <Dialog>
       <GeneralLayout>
+        <Dialog>
           <h1 className="font-bold mb-4 text-lg">File Manager</h1>
           <FileCardList>
             <FileCard
@@ -67,14 +67,16 @@ export default function FileManager() {
             </DialogTrigger>
           </div>
           <DataTable columns={columns} />
-        </GeneralLayout>
-        <DialogHeader>
-          <DialogTitle>Pinning Contnet</DialogTitle>
-        </DialogHeader>
           <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Pin Content</DialogTitle>
+            </DialogHeader>
             <form action="" className="w-full flex flex-col gap-y-4">
               <Field
-              inputProps={{ name: "cids", placeholder: "Comma separated CIDs" }}
+                inputProps={{
+                  name: "cids",
+                  placeholder: "Comma separated CIDs",
+                }}
                 labelProps={{ htmlFor: "cids", children: "Content to Pin" }}
               />
 
@@ -84,6 +86,7 @@ export default function FileManager() {
             </form>
           </DialogContent>
         </Dialog>
+      </GeneralLayout>
     </Authenticated>
   );
 }

app/routes/login.tsx

@@ -47,7 +47,7 @@ export default function Login() {
         go({ to, type: "push" });
       }
     }
-  }, [isAuthLoading, authData]);
+  }, [isAuthLoading, authData, parsed, go]);
 
   return (
     <div className="p-10 h-screen relative">
@@ -109,16 +109,18 @@ const LoginForm = () => {
       return parseWithZod(formData, { schema: LoginSchema });
     },
     shouldValidate: "onSubmit",
-    onSubmit(e) {
+    onSubmit(e, { submission }) {
       e.preventDefault();
 
-      const data = Object.fromEntries(new FormData(e.currentTarget).entries());
+      if (submission?.status === "success") {
+        const data = submission.value;
         login.mutate({
-        email: data.email.toString(),
+          email: data.email,
-        password: data.password.toString(),
+          password: data.password,
-        rememberMe: data.rememberMe.toString() === "on",
+          rememberMe: data.rememberMe ?? false,
           redirectTo: parsed.params?.to,
         });
+      }
     },
   });
 

app/tailwind.css

@@ -4,8 +4,8 @@
  
 @layer base {
   :root {
-    --background: 240, 33%, 3%;
+    --background: 0 0% 3.9%;
-    --foreground: 0, 0%, 88%;
+    --foreground: 0 0% 98%;
 
     --card: 0 0% 0%;
     --card-foreground: 0 0% 3.9%;