app/components/data-table.tsx

@@ -1,4 +1,4 @@
-import { useMemo} from "react";
+import { useState } from "react";
 import { BaseRecord } from "@refinedev/core";
 import { useTable } from "@refinedev/react-table";
 import {
@@ -14,7 +14,6 @@ import {
   TableHeader,
   TableRow,
 } from "./ui/table"
-import { Skeleton } from "./ui/skeleton";
 import { DataTablePagination } from "./table-pagination"
 
 interface DataTableProps<TData extends BaseRecord = BaseRecord, TValue = unknown> {
@@ -22,31 +21,22 @@ interface DataTableProps<TData extends BaseRecord = BaseRecord, TValue = unknown
 }
 
 export function DataTable<TData extends BaseRecord, TValue>({
-  columns,
+  columns
 }: DataTableProps<TData, TValue>) {
+  const [hoveredRowId, setHoveredRowId] = useState<string>("");
+
   const table = useTable({
     columns,
+    meta: {
+      hoveredRowId,
+    },
     refineCoreProps: {
       resource: "files"
     }
   })
 
-  const loadingRows = useMemo(() => Array(4).fill({}).map(() => ({
-    getIsSelected: () => false,
-    getVisibleCells: () => columns.map(() => ({
-      column: {
-        columnDef: {
-          cell: <Skeleton className="h-4 w-full bg-primary-1/30" />,
-        }
-      },
-      getContext: () => null
-    })),
-  })), [])
-
-  const rows = table.refineCore.tableQueryResult.isLoading ? loadingRows : table.getRowModel().rows
-
   return (
-    <>
+    <div className="rounded-lg">
       <Table>
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
@@ -67,12 +57,15 @@ export function DataTable<TData extends BaseRecord, TValue>({
           ))}
         </TableHeader>
         <TableBody>
-          {rows.length ? (
+          {table.getRowModel().rows?.length ? (
-            rows.map((row) => (
+            table.getRowModel().rows.map((row) => (
               <TableRow
                 key={row.id}
                 data-state={row.getIsSelected() && "selected"}
-                className="group"
+                onMouseEnter={() => {
+                  console.log(hoveredRowId, row.id);
+                  setHoveredRowId(row.id)
+                }}
               >
                 {row.getVisibleCells().map((cell) => (
                   <TableCell key={cell.id}>
@@ -91,6 +84,6 @@ export function DataTable<TData extends BaseRecord, TValue>({
         </TableBody>
       </Table>
       <DataTablePagination table={table} />
-    </>
+    </div>
   )
 }

app/components/management-card.tsx

@@ -3,21 +3,16 @@ import { Avatar } from "./ui/avatar";
 import { Button } from "./ui/button";
 import { EditIcon, FingerPrintIcon } from "./icons";
 
-const ManagementCardAvatar = ({ src, button, onClick }: { src?: string; button?: React.ReactNode; onClick?: () => void }) => {
+const ManagementCardAvatar = ({ src }: { src?: string }) => {
   return (
     <div className="flex justify-center">
       <div className="relative w-fit h-fit">
         <Avatar className="border-2 border-ring h-28 w-28" />
-        {!button
+        <Button
-          ? <Button
+          variant="outline"
-              onClick={onClick}
+          className="absolute bottom-0 right-0 z-50 flex items-center w-10 h-10 p-0 border-white rounded-full justiyf-center hover:bg-secondary-2">
-              variant="outline"
+          <EditIcon />
-              className="absolute bottom-0 right-0 z-50 flex items-center w-10 h-10 p-0 border-white rounded-full justiyf-center hover:bg-secondary-2">
+        </Button>
-              <EditIcon />
-            </Button>
-          : button
-        }
-        
       </div>
     </div>
   );

app/components/ui/skeleton.tsx

@@ -1,15 +0,0 @@
-import { cn } from "~/utils"
-
-function Skeleton({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn("animate-pulse rounded-md bg-primary/10", className)}
-      {...props}
-    />
-  )
-}
-
-export { Skeleton }

app/components/ui/toast.tsx

@@ -1,127 +0,0 @@
-import * as React from "react"
-import { Cross2Icon } from "@radix-ui/react-icons"
-import * as ToastPrimitives from "@radix-ui/react-toast"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "~/utils"
-
-const ToastProvider = ToastPrimitives.Provider
-
-const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className
-    )}
-    {...props}
-  />
-))
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
-
-const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
-  {
-    variants: {
-      variant: {
-        default: "border bg-background text-foreground",
-        destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants> & { cancelMutation?: () => void }
->(({ className, variant, ...props }, ref) => {
-  return (
-    <ToastPrimitives.Root
-      ref={ref}
-      className={cn(toastVariants({ variant }), className)}
-      {...props}
-    />
-  )
-})
-Toast.displayName = ToastPrimitives.Root.displayName
-
-const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
-  <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",
-      className
-    )}
-    {...props}
-  />
-))
-ToastAction.displayName = ToastPrimitives.Action.displayName
-
-const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-      className
-    )}
-    toast-close=""
-    {...props}
-  >
-    <Cross2Icon className="h-4 w-4" />
-  </ToastPrimitives.Close>
-))
-ToastClose.displayName = ToastPrimitives.Close.displayName
-
-const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title
-    ref={ref}
-    className={cn("text-sm font-semibold [&+div]:text-xs", className)}
-    {...props}
-  />
-))
-ToastTitle.displayName = ToastPrimitives.Title.displayName
-
-const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description
-    ref={ref}
-    className={cn("text-sm opacity-90", className)}
-    {...props}
-  />
-))
-ToastDescription.displayName = ToastPrimitives.Description.displayName
-
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
-
-type ToastActionElement = React.ReactElement<typeof ToastAction>
-
-export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
-}

app/components/ui/toaster.tsx

@@ -1,36 +0,0 @@
-import {
-  Toast,
-  ToastAction,
-  ToastClose,
-  ToastDescription,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport,
-} from "~/components/ui/toast"
-import { useToast } from "~/components/ui/use-toast"
-
-export function Toaster() {
-  const { toasts } = useToast()
-
-  return (
-    <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, cancelMutation, ...props }) {
-        const undoButton = cancelMutation ? <ToastAction altText="Undo" onClick={cancelMutation}>Undo</ToastAction> : undefined
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && (
-                <ToastDescription>{description}</ToastDescription>
-              )}
-            </div>
-            {action}
-            {undoButton}
-            <ToastClose />
-          </Toast>
-        )
-      })}
-      <ToastViewport />
-    </ToastProvider>
-  )
-}

app/components/ui/use-toast.ts

@@ -1,192 +0,0 @@
-// Inspired by react-hot-toast library
-import * as React from "react"
-
-import type {
-  ToastActionElement,
-  ToastProps,
-} from "~/components/ui/toast"
-
-const TOAST_LIMIT = 1
-const TOAST_REMOVE_DELAY = 1000000
-
-type ToasterToast = ToastProps & {
-  id: string
-  title?: React.ReactNode
-  description?: React.ReactNode
-  action?: ToastActionElement
-}
-
-const actionTypes = {
-  ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
-  DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST",
-} as const
-
-let count = 0
-
-function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER
-  return count.toString()
-}
-
-type ActionType = typeof actionTypes
-
-type Action =
-  | {
-      type: ActionType["ADD_TOAST"]
-      toast: ToasterToast
-    }
-  | {
-      type: ActionType["UPDATE_TOAST"]
-      toast: Partial<ToasterToast>
-    }
-  | {
-      type: ActionType["DISMISS_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
-  | {
-      type: ActionType["REMOVE_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
-
-interface State {
-  toasts: ToasterToast[]
-}
-
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
-
-const addToRemoveQueue = (toastId: string) => {
-  if (toastTimeouts.has(toastId)) {
-    return
-  }
-
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId)
-    dispatch({
-      type: "REMOVE_TOAST",
-      toastId: toastId,
-    })
-  }, TOAST_REMOVE_DELAY)
-
-  toastTimeouts.set(toastId, timeout)
-}
-
-export const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case "ADD_TOAST":
-      return {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      }
-
-    case "UPDATE_TOAST":
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === action.toast.id ? { ...t, ...action.toast } : t
-        ),
-      }
-
-    case "DISMISS_TOAST": {
-      const { toastId } = action
-
-      // ! Side effects ! - This could be extracted into a dismissToast() action,
-      // but I'll keep it here for simplicity
-      if (toastId) {
-        addToRemoveQueue(toastId)
-      } else {
-        state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id)
-        })
-      }
-
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === toastId || toastId === undefined
-            ? {
-                ...t,
-                open: false,
-              }
-            : t
-        ),
-      }
-    }
-    case "REMOVE_TOAST":
-      if (action.toastId === undefined) {
-        return {
-          ...state,
-          toasts: [],
-        }
-      }
-      return {
-        ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      }
-  }
-}
-
-const listeners: Array<(state: State) => void> = []
-
-let memoryState: State = { toasts: [] }
-
-function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action)
-  listeners.forEach((listener) => {
-    listener(memoryState)
-  })
-}
-
-type Toast = Omit<ToasterToast, "id">
-
-function toast({ ...props }: Toast) {
-  const id = genId()
-
-  const update = (props: ToasterToast) =>
-    dispatch({
-      type: "UPDATE_TOAST",
-      toast: { ...props, id },
-    })
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
-
-  dispatch({
-    type: "ADD_TOAST",
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) dismiss()
-      },
-    },
-  })
-
-  return {
-    id: id,
-    dismiss,
-    update,
-  }
-}
-
-function useToast() {
-  const [state, setState] = React.useState<State>(memoryState)
-
-  React.useEffect(() => {
-    listeners.push(setState)
-    return () => {
-      const index = listeners.indexOf(setState)
-      if (index > -1) {
-        listeners.splice(index, 1)
-      }
-    }
-  }, [state])
-
-  return {
-    ...state,
-    toast,
-    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  }
-}
-
-export { useToast, toast }

app/data/account-provider.ts

@@ -10,16 +10,10 @@ type AccountData = AccountParams;
 
 export const accountProvider: SdkProvider = {
     getList: () => {
-        console.log("Not implemented");
+        throw Error("Not Implemented")
-        return Promise.resolve({
-            data: [],
-        });
     },
     getOne: () => {
-        console.log("Not implemented");
+        throw Error("Not Implemented")
-        return Promise.resolve({
-            data: {},
-        });
     },
     // @ts-ignore
     async update<TVariables extends AccountParams = AccountParams>(
@@ -50,16 +44,10 @@ export const accountProvider: SdkProvider = {
         };
     },
     create: () => {
-        console.log("Not implemented");
+        throw Error("Not Implemented")
-        return Promise.resolve({
-            data: {},
-        });
     },
     deleteOne: () => {
-        console.log("Not implemented");
+        throw Error("Not Implemented")
-        return Promise.resolve({
-            data: {},
-        });
     },
     getApiUrl: () => "",
 }

app/data/file-provider.ts

@@ -1,39 +1,11 @@
 import type { DataProvider } from "@refinedev/core";
-import { SdkProvider } from "~/data/sdk-provider.js";
+import {SdkProvider} from "~/data/sdk-provider.js";
 
-export const fileProvider = {
+export const fileProvider: SdkProvider = {
-  getList: () => {
+  getList: () => { throw Error("Not Implemented") },
-    console.log("Not implemented");
+  getOne: () => { throw Error("Not Implemented") },
-    return Promise.resolve({
+  update: () => { throw Error("Not Implemented") },
-      data: [],
+  create: () => { throw Error("Not Implemented") },
-      total: 0,
+  deleteOne: () => { throw Error("Not Implemented") },
-    });
-  },
-  getOne: () => {
-    console.log("Not implemented");
-    return Promise.resolve({
-      data: {
-        id: 1
-      },
-    });
-  },
-  update: () => {
-    console.log("Not implemented");
-    return Promise.resolve({
-      data: {},
-    });
-  },
-  create: () => {
-    console.log("Not implemented");
-    return Promise.resolve({
-      data: {},
-    });
-  },
-  deleteOne: () => {
-    console.log("Not implemented");
-    return Promise.resolve({
-      data: {},
-    });
-  },
   getApiUrl: () => "",
-} satisfies SdkProvider;
+}

app/data/notification-provider.tsx

@@ -1,40 +0,0 @@
-import type {
-  NotificationProvider,
-  OpenNotificationParams,
-} from "@refinedev/core";
-import type { ToastActionElement } from "~/components/ui/toast";
-import { toast } from "~/components/ui/use-toast";
-
-interface Provider extends Omit<NotificationProvider, "open"> {
-  open: (
-    params: Omit<OpenNotificationParams, "type"> & {
-      action?: ToastActionElement;
-      type: "default" | "destructive";
-    },
-  ) => void;
-}
-
-export const notificationProvider = () => {
-  return {
-    open: ({
-      key,
-      message,
-      description,
-      undoableTimeout,
-      cancelMutation,
-      action,
-      type,
-    }) => {
-      toast({
-        variant: type,
-        key,
-        title: message,
-        description,
-        duration: undoableTimeout,
-        action,
-        cancelMutation,
-      });
-    },
-    close: () => {},
-  } satisfies Provider;
-};

app/root.tsx

@@ -7,9 +7,7 @@ import type {LinksFunction} from "@remix-run/node";
 import '@fontsource-variable/manrope';
 import {Refine} from "@refinedev/core";
 import routerProvider from "@refinedev/remix-router";
-import { notificationProvider } from "~/data/notification-provider";
+import {SdkContextProvider} from "~/components/lib/sdk-context.js";
-import {SdkContextProvider} from "~/components/lib/sdk-context";
-import { Toaster } from "~/components/ui/toaster";
 import {getProviders} from "~/data/providers.js";
 import {Sdk} from "@lumeweb/portal-sdk";
 import resources from "~/data/resources.js";
@@ -29,7 +27,6 @@ export function Layout({children}: { children: React.ReactNode }) {
         </head>
         <body>
         {children}
-        <Toaster />
         <ScrollRestoration/>
         <Scripts/>
         </body>
@@ -44,7 +41,6 @@ export default function App() {
         <Refine
             authProvider={providers.auth}
             routerProvider={routerProvider}
-            notificationProvider={notificationProvider}
             dataProvider={providers.default}
             resources={resources}
             options={{disableTelemetry: true}}

app/routes/_index.tsx

@@ -1,19 +1,24 @@
-import { useGo, useIsAuthenticated } from "@refinedev/core";
+import {useGo, useIsAuthenticated} from "@refinedev/core";
+import {useEffect} from "react";
 
 export default function Index() {
-  const { isLoading, data } = useIsAuthenticated();
+    const {isLoading, data} = useIsAuthenticated();
 
-  const go = useGo();
+    const go = useGo();
 
-  if (isLoading) {
+    useEffect(() => {
-    return <>Checking Login Status</>;
+        if (!isLoading) {
-  }
+            if (data?.authenticated) {
+                go({to: "/dashboard", type: "replace"});
+            } else {
+                go({to: "/login", type: "replace"});
+            }
+        }
+    }, [isLoading, data]);
 
-  if (data?.authenticated) {
+    if (isLoading) {
-    go({ to: "/dashboard", type: "replace" });
+        return <>Checking Login Status</> || null;
-  } else {
+    }
-    go({ to: "/login", type: "replace" });
-  }
 
-  return <>Redirecting</>;
+    return (<>Redirecting</>) || null;
 }

app/routes/account.tsx

@@ -1,7 +1,5 @@
 import { getFormProps, useForm } from "@conform-to/react";
 import { getZodConstraint, parseWithZod } from "@conform-to/zod";
-import { DialogClose } from "@radix-ui/react-dialog";
-import { Cross2Icon } from "@radix-ui/react-icons";
 import {
     Authenticated,
     BaseKey,
@@ -9,19 +7,11 @@ import {
     useUpdate,
     useUpdatePassword,
 } from "@refinedev/core";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { z } from "zod";
 import { Field } from "~/components/forms";
 import { GeneralLayout } from "~/components/general-layout";
-import {
+import { AddIcon, CloudIcon, CrownIcon } from "~/components/icons";
-  AddIcon,
-  CloudCheckIcon,
-  CloudIcon,
-  CloudUploadIcon,
-  CrownIcon,
-  EditIcon,
-} from "~/components/icons";
-import { useUppy } from "~/components/lib/uppy";
 import {
   ManagementCard,
   ManagementCardAvatar,
@@ -35,7 +25,6 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
 } from "~/components/ui/dialog";
 import { Input } from "~/components/ui/input";
 import { UsageCard } from "~/components/usage-card";
@@ -50,169 +39,147 @@ export default function MyAccount() {
     changeEmail: false,
     changePassword: false,
     setupTwoFactor: false,
-    changeAvatar: false,
   });
 
   return (
       <Authenticated key="account" v3LegacyAuthProviderCompatible>
         <GeneralLayout>
       <h1 className="text-lg font-bold mb-4">My Account</h1>
-      <Dialog
+      <UsageCard
-        onOpenChange={(open) => {
+        label="Usage"
-          if (!open) {
+        currentUsage={2}
-            setModal({
+        monthlyUsage={10}
-              changeEmail: false,
+        icon={<CloudIcon className="text-ring" />}
-              changePassword: false,
+        button={
-              setupTwoFactor: false,
+          <Button variant="accent" className="gap-x-2 h-12">
-              changeAvatar: false,
+            <AddIcon />
-            });
+            Upgrade to Premium
-          }
+          </Button>
-        }}>
+        }
-        <UsageCard
+      />
-          label="Usage"
+      <h2 className="font-bold my-8">Account Management</h2>
-          currentUsage={2}
+      <div className="grid grid-cols-3 gap-x-8">
-          monthlyUsage={10}
+        <ManagementCard>
-          icon={<CloudIcon className="text-ring" />}
+          <ManagementCardAvatar />
-          button={
+        </ManagementCard>
-            <Button variant="accent" className="gap-x-2 h-12">
+        <ManagementCard>
+          <ManagementCardTitle>Email Address</ManagementCardTitle>
+          <ManagementCardContent className="text-ring font-semibold">
+            {identity?.email}
+          </ManagementCardContent>
+          <ManagementCardFooter>
+            <Button
+              className="h-12 gap-x-2"
+              onClick={() => setModal({ ...openModal, changeEmail: true })}>
+              <AddIcon />
+              Change Email Address
+            </Button>
+          </ManagementCardFooter>
+        </ManagementCard>
+        <ManagementCard>
+          <ManagementCardTitle>Account Type</ManagementCardTitle>
+          <ManagementCardContent className="text-ring font-semibold flex gap-x-2">
+            Lite Premium Account
+            <CrownIcon />
+          </ManagementCardContent>
+          <ManagementCardFooter>
+            <Button className="h-12 gap-x-2">
               <AddIcon />
               Upgrade to Premium
             </Button>
-          }
+          </ManagementCardFooter>
-        />
+        </ManagementCard>
-        <h2 className="font-bold my-8">Account Management</h2>
+      </div>
-        <div className="grid grid-cols-3 gap-x-8">
+      <h2 className="font-bold my-8">Security</h2>
-          <ManagementCard>
+      <div className="grid grid-cols-3 gap-x-8">
-            <ManagementCardAvatar
+        <ManagementCard>
-              button={
+          <ManagementCardTitle>Password</ManagementCardTitle>
-                <DialogTrigger className="absolute bottom-0 right-0 z-50">
+          <ManagementCardContent>
-                  <Button
+            <PasswordDots className="mt-6" />
-                    onClick={() => setModal({ ...openModal, changeAvatar: true })}
+          </ManagementCardContent>
-                    variant="outline"
+          <ManagementCardFooter>
-                    className=" flex items-center w-10 h-10 p-0 border-white rounded-full justiyf-center hover:bg-secondary-2">
+            <Button
-                    <EditIcon />
+              className="h-12 gap-x-2"
-                  </Button>
+              onClick={() => setModal({ ...openModal, changePassword: true })}>
-                </DialogTrigger>
+              <AddIcon />
-              }
+              Change Password
-            />
+            </Button>
-          </ManagementCard>
+          </ManagementCardFooter>
-          <ManagementCard>
+        </ManagementCard>
-            <ManagementCardTitle>Email Address</ManagementCardTitle>
+        <ManagementCard>
-            <ManagementCardContent className="text-ring font-semibold">
+          <ManagementCardTitle>Two-Factor Authentication</ManagementCardTitle>
-              {identity?.email}
+          <ManagementCardContent>
-            </ManagementCardContent>
+            Improve security by enabling 2FA.
-            <ManagementCardFooter>
+          </ManagementCardContent>
-              <DialogTrigger>
+          <ManagementCardFooter>
-                <Button
+            <Button
-                  className="h-12 gap-x-2"
+              className="h-12 gap-x-2"
-                  onClick={() => setModal({ ...openModal, changeEmail: true })}>
+              onClick={() => setModal({ ...openModal, setupTwoFactor: true })}>
-                  <AddIcon />
+              <AddIcon />
-                  Change Email Address
+              Enable Two-Factor Authorization
-                </Button>
+            </Button>
-              </DialogTrigger>
+          </ManagementCardFooter>
-            </ManagementCardFooter>
+        </ManagementCard>
-          </ManagementCard>
+      </div>
-          <ManagementCard>
+      <h2 className="font-bold my-8">More</h2>
-            <ManagementCardTitle>Account Type</ManagementCardTitle>
+      <div className="grid grid-cols-3 gap-x-8">
-            <ManagementCardContent className="text-ring font-semibold flex gap-x-2">
+        <ManagementCard variant="accent">
-              Lite Premium Account
+          <ManagementCardTitle>Invite a Friend</ManagementCardTitle>
-              <CrownIcon />
+          <ManagementCardContent>
-            </ManagementCardContent>
+            Get 1 GB per friend invited for free (max 5 GB).
-            <ManagementCardFooter>
+          </ManagementCardContent>
-              <Button className="h-12 gap-x-2">
+          <ManagementCardFooter>
-                <AddIcon />
+            <Button variant="accent" className="h-12 gap-x-2">
-                Upgrade to Premium
+              <AddIcon />
-              </Button>
+              Send Invitation
-            </ManagementCardFooter>
+            </Button>
-          </ManagementCard>
+          </ManagementCardFooter>
-        </div>
+        </ManagementCard>
-        <h2 className="font-bold my-8">Security</h2>
+        <ManagementCard>
-        <div className="grid grid-cols-3 gap-x-8">
+          <ManagementCardTitle>Read our Resources</ManagementCardTitle>
-          <ManagementCard>
+          <ManagementCardContent>
-            <ManagementCardTitle>Password</ManagementCardTitle>
+            Navigate helpful articles or get assistance.
-            <ManagementCardContent>
+          </ManagementCardContent>
-              <PasswordDots className="mt-6" />
+          <ManagementCardFooter>
-            </ManagementCardContent>
+            <Button className="h-12 gap-x-2">
-            <ManagementCardFooter>
+              <AddIcon />
-              <DialogTrigger>
+              Open Support Centre
-                <Button
+            </Button>
-                  className="h-12 gap-x-2"
+          </ManagementCardFooter>
-                  onClick={() =>
+        </ManagementCard>
-                    setModal({ ...openModal, changePassword: true })
+        <ManagementCard>
-                  }>
+          <ManagementCardTitle>Delete Account</ManagementCardTitle>
-                  <AddIcon />
+          <ManagementCardContent>
-                  Change Password
+            Once initiated, this action cannot be undone.
-                </Button>
+          </ManagementCardContent>
-              </DialogTrigger>
+          <ManagementCardFooter>
-            </ManagementCardFooter>
+            <Button className="h-12 gap-x-2" variant="destructive">
-          </ManagementCard>
+              <AddIcon />
-          <ManagementCard>
+              Delete my Account
-            <ManagementCardTitle>Two-Factor Authentication</ManagementCardTitle>
+            </Button>
-            <ManagementCardContent>
+          </ManagementCardFooter>
-              Improve security by enabling 2FA.
+        </ManagementCard>
-            </ManagementCardContent>
+      </div>
-            <ManagementCardFooter>
+      {/* Dialogs must be near to body as possible to open the modal, otherwise will be restricted to parent height-width */}
-              <DialogTrigger>
+      <ChangeEmailForm
-                <Button
+        open={openModal.changeEmail}
-                  className="h-12 gap-x-2"
+        setOpen={(value: boolean) =>
-                  onClick={() =>
+          setModal({ ...openModal, changeEmail: value })
-                    setModal({ ...openModal, setupTwoFactor: true })
+        }
-                  }>
+        currentValue={identity?.email || ""}
-                  <AddIcon />
+      />
-                  Enable Two-Factor Authorization
+      <ChangePasswordForm
-                </Button>
+        open={openModal.changePassword}
-              </DialogTrigger>
+        setOpen={(value: boolean) =>
-            </ManagementCardFooter>
+          setModal({ ...openModal, changePassword: value })
-          </ManagementCard>
+        }
-        </div>
+      />
-        <h2 className="font-bold my-8">More</h2>
+      <SetupTwoFactorDialog
-        <div className="grid grid-cols-3 gap-x-8">
+        open={openModal.setupTwoFactor}
-          <ManagementCard variant="accent">
+        setOpen={(value: boolean) =>
-            <ManagementCardTitle>Invite a Friend</ManagementCardTitle>
+          setModal({ ...openModal, setupTwoFactor: value })
-            <ManagementCardContent>
+        }
-              Get 1 GB per friend invited for free (max 5 GB).
+      />
-            </ManagementCardContent>
-            <ManagementCardFooter>
-              <Button variant="accent" className="h-12 gap-x-2">
-                <AddIcon />
-                Send Invitation
-              </Button>
-            </ManagementCardFooter>
-          </ManagementCard>
-          <ManagementCard>
-            <ManagementCardTitle>Read our Resources</ManagementCardTitle>
-            <ManagementCardContent>
-              Navigate helpful articles or get assistance.
-            </ManagementCardContent>
-            <ManagementCardFooter>
-              <Button className="h-12 gap-x-2">
-                <AddIcon />
-                Open Support Centre
-              </Button>
-            </ManagementCardFooter>
-          </ManagementCard>
-          <ManagementCard>
-            <ManagementCardTitle>Delete Account</ManagementCardTitle>
-            <ManagementCardContent>
-              Once initiated, this action cannot be undone.
-            </ManagementCardContent>
-            <ManagementCardFooter>
-              <Button className="h-12 gap-x-2" variant="destructive">
-                <AddIcon />
-                Delete my Account
-              </Button>
-            </ManagementCardFooter>
-          </ManagementCard>
-        </div>
-        <DialogContent>
-          {openModal.changeAvatar && <ChangeAvatarForm />}
-          {openModal.changeEmail && (
-            <ChangeEmailForm currentValue={identity?.email || ""} />
-          )}
-          {openModal.changePassword && <ChangePasswordForm />}
-          {openModal.setupTwoFactor && <SetupTwoFactorDialog />}
-        </DialogContent>
-      </Dialog>
     </GeneralLayout>
       </Authenticated>
   );
@@ -235,7 +202,15 @@ const ChangeEmailSchema = z
     return true;
   });
 
-const ChangeEmailForm = ({ currentValue }: { currentValue: string }) => {
+const ChangeEmailForm = ({
+  open,
+  setOpen,
+  currentValue,
+}: {
+  open: boolean;
+  setOpen: (value: boolean) => void;
+  currentValue: string;
+}) => {
   const { data: identity } = useGetIdentity<{ id: BaseKey }>();
   const { mutate: updateEmail } = useUpdate();
   const [form, fields] = useForm({
@@ -262,36 +237,38 @@ const ChangeEmailForm = ({ currentValue }: { currentValue: string }) => {
   });
 
   return (
-    <>
+    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogHeader>
+      <DialogContent className="p-8">
-        <DialogTitle className="mb-8">Change Email</DialogTitle>
+        <DialogHeader>
-      </DialogHeader>
+          <DialogTitle className="mb-8">Change Email</DialogTitle>
-      <div className="rounded-full px-4 py-2 w-fit text-sm bg-ring font-bold text-secondary-1">
+          <div className="rounded-full px-4 py-2 w-fit text-sm bg-ring font-bold text-secondary-1">
-        {currentValue}
+            {currentValue}
-      </div>
+          </div>
-      <form {...getFormProps(form)}>
+          <form {...getFormProps(form)}>
-        <Field
+            <Field
-          className="mt-8"
+              className="mt-8"
-          inputProps={{ name: fields.email.name }}
+              inputProps={{ name: fields.email.name }}
-          labelProps={{ children: "New Email Address" }}
+              labelProps={{ children: "New Email Address" }}
-          errors={fields.email.errors}
+              errors={fields.email.errors}
-        />
+            />
-        <Field
+            <Field
-          inputProps={{ name: fields.password.name, type: "password" }}
+              inputProps={{ name: fields.password.name, type: "password" }}
-          labelProps={{ children: "Password" }}
+              labelProps={{ children: "Password" }}
-          errors={fields.password.errors}
+              errors={fields.password.errors}
-        />
+            />
-        <Field
+            <Field
-          inputProps={{
+              inputProps={{
-            name: fields.retypePassword.name,
+                name: fields.retypePassword.name,
-            type: "password",
+                type: "password",
-          }}
+              }}
-          labelProps={{ children: "Retype Password" }}
+              labelProps={{ children: "Retype Password" }}
-          errors={fields.retypePassword.errors}
+              errors={fields.retypePassword.errors}
-        />
+            />
-        <Button className="w-full h-14">Change Email Address</Button>
+            <Button className="w-full h-14">Change Email Address</Button>
-      </form>
+          </form>
-    </>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
   );
 };
 
@@ -312,8 +289,14 @@ const ChangePasswordSchema = z
     return true;
   });
 
-const ChangePasswordForm = () => {
+const ChangePasswordForm = ({
-  const { mutate: updatePassword } = useUpdatePassword<{ password: string }>();
+  open,
+  setOpen,
+}: {
+  open: boolean;
+  setOpen: (value: boolean) => void;
+}) => {
+  const { mutate: updatePassword } = useUpdatePassword<UpdatePasswordFormRequest>();
   const [form, fields] = useForm({
     id: "login",
     constraint: getZodConstraint(ChangePasswordSchema),
@@ -327,174 +310,98 @@ const ChangePasswordForm = () => {
       const data = Object.fromEntries(new FormData(e.currentTarget).entries());
 
       updatePassword({
+          currentPassword: data.currentPassword.toString(),
           password: data.newPassword.toString(),
       });
     },
   });
 
   return (
-    <>
+    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogHeader>
+      <DialogContent className="p-8">
-        <DialogTitle className="mb-8">Change Password</DialogTitle>
+        <DialogHeader>
-      </DialogHeader>
+          <DialogTitle className="mb-8">Change Password</DialogTitle>
-      <form {...getFormProps(form)}>
+          <form {...getFormProps(form)}>
-        <Field
+            <Field
-          inputProps={{
+              inputProps={{
-            name: fields.currentPassword.name,
+                name: fields.currentPassword.name,
-            type: "password",
+                type: "password",
-          }}
+              }}
-          labelProps={{ children: "Current Password" }}
+              labelProps={{ children: "Current Password" }}
-          errors={fields.currentPassword.errors}
+              errors={fields.currentPassword.errors}
-        />
+            />
-        <Field
+            <Field
-          inputProps={{ name: fields.newPassword.name, type: "password" }}
+              inputProps={{ name: fields.newPassword.name, type: "password" }}
-          labelProps={{ children: "New Password" }}
+              labelProps={{ children: "New Password" }}
-          errors={fields.newPassword.errors}
+              errors={fields.newPassword.errors}
-        />
+            />
-        <Field
+            <Field
-          inputProps={{
+              inputProps={{
-            name: fields.retypePassword.name,
+                name: fields.retypePassword.name,
-            type: "password",
+                type: "password",
-          }}
+              }}
-          labelProps={{ children: "Retype Password" }}
+              labelProps={{ children: "Retype Password" }}
-          errors={fields.retypePassword.errors}
+              errors={fields.retypePassword.errors}
-        />
+            />
-        <Button className="w-full h-14">Change Password</Button>
+            <Button className="w-full h-14">Change Password</Button>
-      </form>
+          </form>
-    </>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
   );
 };
 
-const SetupTwoFactorDialog = () => {
+const SetupTwoFactorDialog = ({
+  open,
+  setOpen,
+}: {
+  open: boolean;
+  setOpen: (value: boolean) => void;
+}) => {
   const [continueModal, setContinue] = useState<boolean>(false);
 
   return (
-    <>
+    <Dialog
-      <DialogHeader>
+      open={open}
-        <DialogTitle className="mb-8">Setup Two-Factor</DialogTitle>
+      onOpenChange={(value) => {
-      </DialogHeader>
+        setOpen(value);
-      <div className="flex flex-col gap-y-6">
+        setContinue(false);
-        {continueModal ? (
+      }}>
-          <>
+      <DialogContent className="p-8">
-            <p className="text-sm text-primary-2">
+        <DialogHeader>
-              Enter the authentication code generated in your two-factor
+          <DialogTitle className="mb-8">Setup Two-Factor</DialogTitle>
-              application to confirm your setup.
+          <div className="flex flex-col gap-y-6">
-            </p>
+            {continueModal ? (
-            <Input fullWidth className="text-center" />
+              <>
-            <Button className="w-full h-14">Confirm</Button>
+                <p className="text-sm text-primary-2">
-          </>
+                  Enter the authentication code generated in your two-factor
-        ) : (
+                  application to confirm your setup.
-          <>
+                </p>
-            <div className="p-6 flex justify-center border bg-secondary-2">
+                <Input fullWidth className="text-center" />
-              <img src={QRImg} alt="QR" className="h-36 w-36" />
+                <Button className="w-full h-14">Confirm</Button>
-            </div>
+              </>
-            <p className="font-semibold">
+            ) : (
-              Don’t have access to scan? Use this code instead.
+              <>
-            </p>
+                <div className="p-6 flex justify-center border bg-secondary-2">
-            <div className="p-4 border text-primary-2 text-center font-bold">
+                  <img src={QRImg} alt="QR" className="h-36 w-36" />
-              HHH7MFGAMPJ44OM44FGAMPJ44O232
+                </div>
-            </div>
+                <p className="font-semibold">
-            <Button className="w-full h-14" onClick={() => setContinue(true)}>
+                  Don’t have access to scan? Use this code instead.
-              Continue
+                </p>
-            </Button>
+                <div className="p-4 border text-primary-2 text-center font-bold">
-          </>
+                  HHH7MFGAMPJ44OM44FGAMPJ44O232
-        )}
+                </div>
-      </div>
+                <Button
-    </>
+                  className="w-full h-14"
-  );
+                  onClick={() => setContinue(true)}>
-};
+                  Continue
-
+                </Button>
-const ChangeAvatarForm = () => {
+              </>
-  const {
+            )}
-    getRootProps,
+          </div>
-    getInputProps,
+        </DialogHeader>
-    getFiles,
+      </DialogContent>
-    upload,
+    </Dialog>
-    state,
-    removeFile,
-    cancelAll,
-  } = useUppy();
-
-  console.log({ state, files: getFiles() });
-
-  const isUploading = state === "uploading";
-  const isCompleted = state === "completed";
-  const hasStarted = state !== "idle" && state !== "initializing";
-
-  const file = getFiles()?.[0];
-
-  const imagePreview = useMemo(() => {
-    if (file) {
-      return URL.createObjectURL(file.data);
-    }
-  }, [file]);
-
-  return (
-    <>
-      <DialogHeader className="mb-6">
-        <DialogTitle>Edit Avatar</DialogTitle>
-      </DialogHeader>
-      {!hasStarted && !getFiles().length ? (
-        <div
-          {...getRootProps()}
-          className="border border-border rounded text-primary-2 bg-primary-dark h-48 flex flex-col items-center justify-center">
-          <input
-            hidden
-            aria-hidden
-            name="uppyFiles[]"
-            key={new Date().toISOString()}
-            multiple
-            {...getInputProps()}
-          />
-          <CloudUploadIcon className="w-24 h-24 stroke stroke-primary-dark" />
-          <p>Drag & Drop Files or Browse</p>
-        </div>
-      ) : null}
-
-      {!hasStarted && file && (
-        <div className="border border-border rounded p-4 bg-primary-dark relative">
-          <Button
-            className="absolute top-1/2 right-1/2 rounded-full bg-gray-800/50 hover:bg-primary p-2 text-sm"
-            onClick={() => removeFile(file?.id)}>
-            <Cross2Icon className="size-4" />
-          </Button>
-          <img
-            className="w-full h-48 object-contain"
-            src={imagePreview}
-            alt="New Avatar Preview"
-          />
-        </div>
-      )}
-
-      {hasStarted ? (
-        <div className="flex flex-col items-center gap-y-2 w-full text-primary-1">
-          <CloudCheckIcon className="w-32 h-32" />
-          {isCompleted ? "Upload completed" : `0% completed`}
-        </div>
-      ) : null}
-
-      {isUploading ? (
-        <DialogClose asChild onClick={cancelAll}>
-          <Button size={"lg"} className="mt-6">
-            Cancel
-          </Button>
-        </DialogClose>
-      ) : null}
-
-      {isCompleted ? (
-        <DialogClose asChild>
-          <Button size={"lg"} className="mt-6">
-            Close
-          </Button>
-        </DialogClose>
-      ) : null}
-
-      {!hasStarted && !isCompleted && !isUploading ? (
-        <Button size={"lg"} className="mt-6" onClick={upload}>
-          Upload
-        </Button>
-      ) : null}
-    </>
   );
 };
 

app/routes/file-manager/columns.tsx

@@ -3,7 +3,6 @@ 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 { cn } from "~/utils";
 
 // This type is used to define the shape of our data.
 // You can use a Zod schema here if you want.
@@ -67,13 +66,12 @@ export const columns: ColumnDef<File>[] = [
         accessorKey: "createdOn",
         size: 200,
         header: "Created On",
-        cell: ({ row }) => (
+        cell: ({ row, table }) => (
           <div className="flex items-center justify-between">
             {row.getValue("createdOn")}
+            {(row.getIsSelected() || table.options.meta?.hoveredRowId === row.id)  && (
               <DropdownMenu>
-              <DropdownMenuTrigger className={
+              <DropdownMenuTrigger>
-                cn("hidden group-hover:block data-[state=open]:block", row.getIsSelected() && "block")
-              }>
                 <MoreIcon />
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end">
@@ -90,6 +88,7 @@ export const columns: ColumnDef<File>[] = [
                 </DropdownMenuGroup>
               </DropdownMenuContent>
             </DropdownMenu>
+            )}
           </div>
         )
     }

app/routes/register.tsx

@@ -9,7 +9,7 @@ import { Field, FieldCheckbox } from "~/components/forms"
 import { getFormProps, useForm } from "@conform-to/react"
 import { z } from "zod"
 import { getZodConstraint, parseWithZod } from "@conform-to/zod"
-import {useLogin, useNotification, useRegister} from "@refinedev/core";
+import {useLogin, useRegister} from "@refinedev/core";
 import {AuthFormRequest, RegisterFormRequest} from "~/data/auth-provider.js";
 
 export const meta: MetaFunction = () => {
@@ -43,9 +43,8 @@ const RegisterSchema = z
   });
 
 export default function Register() {
-  const register = useRegister<RegisterFormRequest>()
+    const register = useRegister<RegisterFormRequest>()
-  const login = useLogin<AuthFormRequest>();
+    const login = useLogin<AuthFormRequest>();
-  const { open } = useNotification();
   const [form, fields] = useForm({
     id: "register",
     constraint: getZodConstraint(RegisterSchema),
@@ -63,12 +62,6 @@ export default function Register() {
               lastName: data.lastName.toString(),
           }, {
                 onSuccess: () => {
-                  open?.({
-                    type: "success",
-                    message: "Verify your Email",
-                    description: "An Email was sent to your email address. Please verify your email address to activate your account.",
-                    key: "register-success"
-                  })
                     login.mutate({
                         email: data.email.toString(),
                         password: data.password.toString(),

app/routes/reset-password.tsx

@@ -9,8 +9,6 @@ import { Field } from "~/components/forms";
 import { getFormProps, useForm } from "@conform-to/react";
 import { z } from "zod";
 import { getZodConstraint, parseWithZod } from "@conform-to/zod";
-import { ToastAction } from "~/components/ui/toast";
-import { useNotification } from "@refinedev/core";
 
 export const meta: MetaFunction = () => {
   return [{ title: "Sign Up" }];
@@ -20,26 +18,12 @@ const RecoverPasswordSchema = z.object({
   email: z.string().email(),
 });
 export default function RecoverPassword() {
-  const { open } = useNotification();
   const [form, fields] = useForm({
     id: "sign-up",
     constraint: getZodConstraint(RecoverPasswordSchema),
     onValidate({ formData }) {
       return parseWithZod(formData, { schema: RecoverPasswordSchema });
     },
-    onSubmit(e) {
-      e.preventDefault();
-      open?.({
-        type: "success",
-        message: "Password reset email sent",
-        description: "Check your email for a link to reset your password. If it doesn’t appear within a few minutes, check your spam folder.",
-        action: <ToastAction altText="Cancel">Cancel</ToastAction>,
-        cancelMutation: () => {
-          console.log("cancel mutation");
-        },
-      })
-      
-    }
   });
 
   // TODO: another detail is the reset password has no screen to either accept a new pass or  

package.json

@@ -26,7 +26,6 @@
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-toast": "^1.1.5",
     "@refinedev/cli": "^2.16.1",
     "@refinedev/core": "https://gitpkg.now.sh/LumeWeb/refine/packages/core?remix",
     "@refinedev/devtools-internal": "https://gitpkg.now.sh/LumeWeb/refine/packages/devtools-internal?remix",