feat: (wip) added support for TUS file uploaded. Still missing support for resetting the uppy state plus handling uppy errors

2024-03-12 13:42:17 +01:00 · 2024-03-12 13:42:17 +01:00 · b0809c65f3
parent 92b414afb1
commit b0809c65f3
12 changed files with 1425 additions and 22 deletions
--- a/app/components/dashboard-layout.tsx
+++ b/app/components/dashboard-layout.tsx
@ -3,6 +3,17 @@ import logoPng from "~/images/lume-logo.png?url"
 import lumeColorLogoPng from "~/images/lume-color-logo.png?url"
 import discordLogoPng from "~/images/discord-logo.png?url"
 import { Link } from "@remix-run/react"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from "./ui/dialog"
+import { useUppy } from "./lib/uppy"
+import { UppyFile } from "@uppy/core"
+import { Progress } from "./ui/progress"
+import { DialogClose } from "@radix-ui/react-dialog"

 export const DashboardLayout = ({ children }: React.PropsWithChildren<{}>) => {
  return (
@ -39,14 +50,11 @@ export const DashboardLayout = ({ children }: React.PropsWithChildren<{}>) => {
          </ul>
        </nav>
        <span className="text-primary-2 mb-3 -space-y-1 opacity-40">
-        <p>Freedom</p>
-        <p>Privacy</p>
-        <p>Ownership</p>
+          <p>Freedom</p>
+          <p>Privacy</p>
+          <p>Ownership</p>
        </span>
-        <Button className="w-[calc(100%-3rem)] font-semibold h-16">
-          <CloudUploadIcon className="w-6 h-6 -ml-3 mr-4" />
-          Upload Files
-        </Button>
+        <UploadFileModal />
      </header>

      {children}
@ -81,9 +89,152 @@ export const DashboardLayout = ({ children }: React.PropsWithChildren<{}>) => {
  )
 }

+const UploadFileModal = () => {
+  const { getRootProps, getInputProps, files, upload, removeFile, cancelAll } =
+    useUppy({
+      uploader: "tus",
+      endpoint: import.meta.env.VITE_PUBLIC_TUS_ENDPOINT
+    })
+
+  const isUploading =
+    files.length > 0
+      ? files.map((file) => file.progress?.uploadStarted != null).includes(true)
+      : false
+  const isCompleted =
+    files.length > 0
+      ? files
+          .map((file) => file.progress?.uploadComplete)
+          .reduce((acc, cur) => acc && cur, true)
+      : false
+  const hasStarted = isUploading || isCompleted
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button size={"lg"} className="w-[calc(100%-3rem)] font-semibold">
+          <CloudUploadIcon className="w-6 h-6 -ml-3 mr-4" />
+          Upload Files
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader className="mb-6">
+          <DialogTitle>Upload Files</DialogTitle>
+        </DialogHeader>
+        {!hasStarted ? (
+          <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}
+
+        <div className="w-full space-y-3 max-h-48 overflow-y-auto">
+          {files.map((file) => (
+            <UploadFileItem
+              key={file.id}
+              file={file}
+              onRemove={(id) => {
+                removeFile(id)
+              }}
+            />
+          ))}
+        </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"
+              : `${files.length} being uploaded`}
+          </div>
+        ) : null}
+
+        {hasStarted ? (
+          <DialogClose asChild onClick={cancelAll}>
+            <Button size={"lg"} className="mt-6">
+              Cancel
+            </Button>
+          </DialogClose>
+        ) : (
+          <Button size={"lg"} className="mt-6" onClick={upload}>
+            Upload
+          </Button>
+        )}
+
+        {hasStarted && isCompleted ? (
+          <DialogClose asChild>
+            <Button size={"lg"} className="mt-6">
+              Close
+            </Button>
+          </DialogClose>
+        ) : null}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function bytestoMegabytes(bytes: number) {
+  return bytes / 1024 / 1024
+}
+
+const UploadFileItem = ({
+  file,
+  onRemove
+}: {
+  file: UppyFile
+  onRemove: (id: string) => void
+}) => {
+  return (
+    <div className="flex flex-col w-full py-4 px-2 bg-primary-dark">
+      <div className="flex text-primary-1 items-center justify-between">
+        <div className="flex items-center">
+          <div className="p-2">
+            {file.progress?.uploadComplete ? (
+              <BoxCheckedIcon className="w-4 h-4" />
+            ) : (
+              <PageIcon className="w-4 h-4" />
+            )}
+          </div>
+          <p className="w-full flex justify-between items-center">
+            <span className="truncate text-ellipsis max-w-[30ch]">
+              {file.name}
+            </span>{" "}
+            <span>({bytestoMegabytes(file.size).toFixed(2)} MB)</span>
+          </p>
+        </div>
+        <Button
+          size={"icon"}
+          variant={"ghost"}
+          className="!text-inherit"
+          onClick={() => onRemove(file.id)}
+        >
+          <TrashIcon className="w-4 h-4" />
+        </Button>
+      </div>
+
+      {file.progress?.uploadStarted && !file.progress.uploadComplete ? (
+        <Progress value={file.progress.percentage} className="mt-2" />
+      ) : null}
+    </div>
+  )
+}
+
 const NavigationButton = ({ children }: React.PropsWithChildren) => {
  return (
-    <Button variant="ghost" className="justify-start h-14 w-[calc(100%-3rem)] font-semibold">
+    <Button
+      variant="ghost"
+      className="justify-start h-14 w-[calc(100%-3rem)] font-semibold"
+    >
      {children}
    </Button>
  )
@ -164,3 +315,143 @@ const CloudUploadIcon = ({ className }: { className?: string }) => {
    </svg>
  )
 }
+
+const PageIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      aria-hidden="true"
+      width="21"
+      height="21"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M10.3276 4.21337V15.0287H0.59375V0.96875H5.46067"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5.46191 0.96875L10.3288 4.21337"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5.46191 0.96875V4.21337"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10.3288 4.21289H5.46191"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2.75684 8.53906H5.46068"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2.75684 10.7021H7.62376"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+const TrashIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      aria-hidden="true"
+      width="21"
+      height="21"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M10.0769 14.3093H2.69194C2.3247 14.3093 1.9725 14.1634 1.71282 13.9037C1.45314 13.6441 1.30725 13.2919 1.30725 12.9246V4.15492C1.30725 4.03251 1.35588 3.91511 1.44244 3.82855C1.529 3.74199 1.6464 3.69336 1.76881 3.69336C1.89123 3.69336 2.00863 3.74199 2.09519 3.82855C2.18175 3.91511 2.23038 4.03251 2.23038 4.15492V12.9246C2.23038 13.047 2.279 13.1644 2.36556 13.251C2.45212 13.3375 2.56952 13.3862 2.69194 13.3862H10.0769C10.1994 13.3862 10.3168 13.3375 10.4033 13.251C10.4899 13.1644 10.5385 13.047 10.5385 12.9246V4.15492C10.5385 4.03251 10.5871 3.91511 10.6737 3.82855C10.7602 3.74199 10.8776 3.69336 11.0001 3.69336C11.1225 3.69336 11.2399 3.74199 11.3264 3.82855C11.413 3.91511 11.4616 4.03251 11.4616 4.15492V12.9246C11.4616 13.2919 11.3157 13.6441 11.0561 13.9037C10.7964 14.1634 10.4442 14.3093 10.0769 14.3093Z"
+        fill="currentColor"
+      />
+      <path
+        d="M11.9237 3.23172H0.846206C0.723792 3.23172 0.606392 3.18309 0.519832 3.09653C0.433272 3.00997 0.384644 2.89257 0.384644 2.77016C0.384644 2.64774 0.433272 2.53034 0.519832 2.44378C0.606392 2.35722 0.723792 2.30859 0.846206 2.30859H11.9237C12.0461 2.30859 12.1635 2.35722 12.2501 2.44378C12.3366 2.53034 12.3853 2.64774 12.3853 2.77016C12.3853 2.89257 12.3366 3.00997 12.2501 3.09653C12.1635 3.18309 12.0461 3.23172 11.9237 3.23172Z"
+        fill="currentColor"
+      />
+      <path
+        d="M8.23121 3.23129C8.1088 3.23129 7.9914 3.18266 7.90484 3.0961C7.81828 3.00954 7.76965 2.89214 7.76965 2.76973V1.38504H5.00027V2.76973C5.00027 2.89214 4.95164 3.00954 4.86508 3.0961C4.77853 3.18266 4.66112 3.23129 4.53871 3.23129C4.4163 3.23129 4.2989 3.18266 4.21234 3.0961C4.12578 3.00954 4.07715 2.89214 4.07715 2.76973V0.923477C4.07715 0.801063 4.12578 0.683662 4.21234 0.597103C4.2989 0.510543 4.4163 0.461914 4.53871 0.461914H8.23121C8.35362 0.461914 8.47103 0.510543 8.55759 0.597103C8.64415 0.683662 8.69277 0.801063 8.69277 0.923477V2.76973C8.69277 2.89214 8.64415 3.00954 8.55759 3.0961C8.47103 3.18266 8.35362 3.23129 8.23121 3.23129Z"
+        fill="currentColor"
+      />
+      <path
+        d="M6.3849 12.0012C6.26249 12.0012 6.14509 11.9526 6.05853 11.866C5.97197 11.7795 5.92334 11.6621 5.92334 11.5396V5.07777C5.92334 4.95536 5.97197 4.83796 6.05853 4.7514C6.14509 4.66484 6.26249 4.61621 6.3849 4.61621C6.50732 4.61621 6.62472 4.66484 6.71128 4.7514C6.79784 4.83796 6.84646 4.95536 6.84646 5.07777V11.5396C6.84646 11.6621 6.79784 11.7795 6.71128 11.866C6.62472 11.9526 6.50732 12.0012 6.3849 12.0012Z"
+        fill="currentColor"
+      />
+      <path
+        d="M8.69313 11.0778C8.57072 11.0778 8.45332 11.0292 8.36676 10.9426C8.2802 10.8561 8.23157 10.7387 8.23157 10.6163V6.00062C8.23157 5.87821 8.2802 5.76081 8.36676 5.67425C8.45332 5.58769 8.57072 5.53906 8.69313 5.53906C8.81554 5.53906 8.93294 5.58769 9.0195 5.67425C9.10606 5.76081 9.15469 5.87821 9.15469 6.00062V10.6163C9.15469 10.7387 9.10606 10.8561 9.0195 10.9426C8.93294 11.0292 8.81554 11.0778 8.69313 11.0778Z"
+        fill="currentColor"
+      />
+      <path
+        d="M4.07716 11.0778C3.95475 11.0778 3.83735 11.0292 3.75079 10.9426C3.66423 10.8561 3.6156 10.7387 3.6156 10.6163V6.00062C3.6156 5.87821 3.66423 5.76081 3.75079 5.67425C3.83735 5.58769 3.95475 5.53906 4.07716 5.53906C4.19958 5.53906 4.31698 5.58769 4.40354 5.67425C4.4901 5.76081 4.53873 5.87821 4.53873 6.00062V10.6163C4.53873 10.7387 4.4901 10.8561 4.40354 10.9426C4.31698 11.0292 4.19958 11.0778 4.07716 11.0778Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+const CloudCheckIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      aria-hidden="true"
+      width="21"
+      height="21"
+      viewBox="0 0 72 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M58.2 18C56.1 7.8 47.1 0 36 0C27.3 0 19.8 4.8 16.2 12C6.9 13.2 0 20.7 0 30C0 39.9 8.1 48 18 48H57C65.4 48 72 41.4 72 33C72 25.2 65.7 18.6 58.2 18ZM30 39L19.5 28.5L23.7 24.3L30 30.6L45.6 15L49.8 19.2L30 39Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+const BoxCheckedIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      aria-hidden="true"
+      width="21"
+      height="21"
+      viewBox="0 0 21 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.5 4.5H15.5C16.6046 4.5 17.5 5.39543 17.5 6.5V16.5C17.5 17.6046 16.6046 18.5 15.5 18.5H5.5C4.39543 18.5 3.5 17.6046 3.5 16.5V6.5C3.5 5.39543 4.39543 4.5 5.5 4.5Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.5 11.5L9.5 13.5L13.5 9.5"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
--- a/app/components/lib/uppy-dropzone.ts
+++ b/app/components/lib/uppy-dropzone.ts
@ -0,0 +1,206 @@
+// Copied from https://github.com/transloadit/uppy/blob/main/packages/%40uppy/drop-target/src/index.ts
+// Is a less invasive implementation that allows for better unstyled integration
+
+import {
+  type Uppy,
+  type PluginOptions,
+  type BasePlugin as TUppyBasePlugin
+} from "@uppy/core"
+// @ts-expect-error -- Uppy types are all over the place it really is weird
+import UppyBasePlugin from "@uppy/core/lib/BasePlugin"
+import type { IndexedObject } from "@uppy/utils"
+import getDroppedFiles from "@uppy/utils/lib/getDroppedFiles"
+import toArray from "@uppy/utils/lib/toArray"
+
+export type DropTargetOptions = PluginOptions & {
+  target?: HTMLElement | string | null
+  onDrop?: (event: DragEvent) => void
+  onDragOver?: (event: DragEvent) => void
+  onDragLeave?: (event: DragEvent) => void
+}
+const BasePlugin = UppyBasePlugin as typeof TUppyBasePlugin<DropTargetOptions>
+
+type Meta = {
+  relativePath?: string | null
+}
+type Body = IndexedObject<unknown>
+
+// Default options
+const defaultOpts = {
+  target: null,
+} satisfies DropTargetOptions
+
+interface DragEventWithFileTransfer extends DragEvent {
+  dataTransfer: NonNullable<DragEvent["dataTransfer"]>
+}
+
+function isFileTransfer(event: DragEvent): event is DragEventWithFileTransfer {
+  return event.dataTransfer?.types?.some((type) => type === "Files") ?? false
+}
+
+/**
+ * Drop Target plugin
+ *
+ */
+class DropTarget<M extends Meta, B extends Body> extends BasePlugin {
+  static VERSION = "lume-internal"
+
+  private removeDragOverDataAttr: ReturnType<typeof setTimeout> | undefined
+  private nodes?: Array<HTMLElement>
+
+  public opts: DropTargetOptions
+
+  constructor(uppy: Uppy<M, B>, opts?: DropTargetOptions) {
+    super(uppy, { ...defaultOpts, ...opts })
+    this.opts = opts || defaultOpts
+    this.type = "acquirer"
+    this.id = this.opts.id || "DropTarget"
+    // @ts-expect-error TODO: remove in major
+    this.title = "Drop Target"
+  }
+
+  addFiles = (files: Array<File>): void => {
+    const descriptors = files.map((file) => ({
+      source: this.id,
+      name: file.name,
+      type: file.type,
+      data: file,
+      meta: {
+        // path of the file relative to the ancestor directory the user selected.
+        // e.g. 'docs/Old Prague/airbnb.pdf'
+        relativePath: (file as { relativePath?: string }).relativePath || null
+      } as Meta
+    }))
+
+    try {
+      this.uppy.addFiles(descriptors)
+    } catch (err) {
+      this.uppy.log(err as string)
+    }
+  }
+
+  handleDrop = async (event: DragEvent): Promise<void> => {
+    if (!isFileTransfer(event)) {
+      return
+    }
+
+    event.preventDefault()
+    event.stopPropagation()
+    clearTimeout(this.removeDragOverDataAttr)
+
+    // Remove dragover class
+    if (event.currentTarget) {
+      (event.currentTarget as HTMLElement).dataset.uppyIsDragOver = "false"
+      this.setPluginState({ isDraggingOver: false })
+    }
+
+    // Let any acquirer plugin (Url/Webcam/etc.) handle drops to the root
+    this.uppy.iteratePlugins((plugin) => {
+      if (plugin.type === "acquirer") {
+        // @ts-expect-error Every Plugin with .type acquirer can define handleRootDrop(event)
+        plugin.handleRootDrop?.(event)
+      }
+    })
+
+    // Add all dropped files, handle errors
+    let executedDropErrorOnce = false
+    const logDropError = (error: Error): void => {
+      this.uppy.log(error.message, "error")
+
+      // In practice all drop errors are most likely the same,
+      // so let's just show one to avoid overwhelming the user
+      if (!executedDropErrorOnce) {
+        this.uppy.info(error.message, "error")
+        executedDropErrorOnce = true
+      }
+    }
+
+    const files = await getDroppedFiles(event.dataTransfer, { logDropError })
+    if (files.length > 0) {
+      this.uppy.log("[DropTarget] Files were dropped")
+      this.addFiles(files)
+    }
+
+    this.opts.onDrop?.(event)
+  }
+
+  handleDragOver = (event: DragEvent): void => {
+    if (!isFileTransfer(event)) {
+      return
+    }
+
+    event.preventDefault()
+    event.stopPropagation()
+
+    // Add a small (+) icon on drop
+    // (and prevent browsers from interpreting this as files being _moved_ into the browser,
+    // https://github.com/transloadit/uppy/issues/1978)
+    event.dataTransfer.dropEffect = "copy" // eslint-disable-line no-param-reassign
+
+    clearTimeout(this.removeDragOverDataAttr)
+    ;(event.currentTarget as HTMLElement).dataset.uppyIsDragOver = "true"
+    this.setPluginState({ isDraggingOver: true })
+    this.opts.onDragOver?.(event)
+  }
+
+  handleDragLeave = (event: DragEvent): void => {
+    if (!isFileTransfer(event)) {
+      return
+    }
+
+    event.preventDefault()
+    event.stopPropagation()
+
+    const { currentTarget } = event
+
+    clearTimeout(this.removeDragOverDataAttr)
+    // Timeout against flickering, this solution is taken from drag-drop library.
+    // Solution with 'pointer-events: none' didn't work across browsers.
+    this.removeDragOverDataAttr = setTimeout(() => {
+      (currentTarget as HTMLElement).dataset.uppyIsDragOver = "false"
+      this.setPluginState({ isDraggingOver: false })
+    }, 50)
+    this.opts.onDragLeave?.(event)
+  }
+
+  addListeners = (): void => {
+    const { target } = this.opts
+
+    if (target instanceof Element) {
+      this.nodes = [target]
+    } else if (typeof target === "string") {
+      this.nodes = toArray(document.querySelectorAll(target))
+    }
+
+    if (!this.nodes || this.nodes.length === 0) {
+      throw new Error(`"${target}" does not match any HTML elements`)
+    }
+
+    for (const node of this.nodes) {
+      node.addEventListener("dragover", this.handleDragOver, false)
+      node.addEventListener("dragleave", this.handleDragLeave, false)
+      node.addEventListener("drop", this.handleDrop, false)
+    }
+  }
+
+  removeListeners = (): void => {
+    if (this.nodes) {
+      for (const node of this.nodes) {
+        node.removeEventListener("dragover", this.handleDragOver, false)
+        node.removeEventListener("dragleave", this.handleDragLeave, false)
+        node.removeEventListener("drop", this.handleDrop, false)
+      }
+    }
+  }
+
+  install(): void {
+    this.setPluginState({ isDraggingOver: false })
+    this.addListeners()
+  }
+
+  uninstall(): void {
+    this.removeListeners()
+  }
+}
+
+export default DropTarget
--- a/app/components/lib/uppy.ts
+++ b/app/components/lib/uppy.ts
@ -0,0 +1,159 @@
+import Uppy, { State, debugLogger } from "@uppy/core"
+
+import Tus from "@uppy/tus"
+import toArray from "@uppy/utils/lib/toArray"
+
+import {
+  ChangeEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react"
+import DropTarget, { DropTargetOptions } from "./uppy-dropzone"
+
+const LISTENING_EVENTS = [
+  "upload",
+  "upload-success",
+  "upload-error",
+  "file-added",
+  "file-removed",
+  "files-added"
+] as const
+
+export function useUppy({
+  uploader,
+  endpoint
+}: {
+  uploader: "tus"
+  endpoint: string
+}) {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [targetRef, _setTargetRef] = useState<HTMLElement | null>(null)
+  const uppyInstance = useRef<Uppy>()
+  const setRef = useCallback(
+    (element: HTMLElement | null) => _setTargetRef(element),
+    []
+  )
+  const [state, setState] = useState<State>()
+
+  const [inputProps, setInputProps] = useState<
+    | {
+        ref: typeof inputRef
+        type: "file"
+        onChange: (event: ChangeEvent<HTMLInputElement>) => void
+      }
+    | object
+  >({})
+  const getRootProps = useMemo(
+    () => () => {
+      return {
+        ref: setRef,
+        onClick: () => {
+          if (inputRef.current) {
+            //@ts-expect-error -- dumb html
+            inputRef.current.value = null
+            inputRef.current.click()
+            console.log("clicked", { input: inputRef.current })
+          }
+        },
+        role: "presentation"
+      }
+    },
+    [setRef]
+  )
+  const removeFile = useCallback(
+    (id: string) => {
+      uppyInstance.current?.removeFile(id)
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [targetRef, uppyInstance]
+  )
+  const cancelAll = useCallback(
+    () => uppyInstance.current?.cancelAll(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [targetRef, uppyInstance]
+  )
+
+  useEffect(() => {
+    if (!targetRef) return
+
+    const uppy = new Uppy({ logger: debugLogger }).use(DropTarget, {
+      target: targetRef
+    } as DropTargetOptions)
+
+    uppyInstance.current = uppy
+    setInputProps({
+      ref: inputRef,
+      type: "file",
+      onChange: (event) => {
+        const files = toArray(event.target.files)
+        if (files.length > 0) {
+          uppyInstance.current?.log("[DragDrop] Files selected through input")
+          uppyInstance.current?.addFiles(files)
+        }
+
+        // We clear the input after a file is selected, because otherwise
+        // change event is not fired in Chrome and Safari when a file
+        // with the same name is selected.
+        // ___Why not use value="" on <input/> instead?
+        //    Because if we use that method of clearing the input,
+        //    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
+      }
+    })
+
+    switch (uploader) {
+      case "tus":
+        uppy.use(Tus, { endpoint: endpoint, limit: 6 })
+        break
+      default:
+    }
+
+    uppy.on("complete", (result) => {
+      if (result.failed.length === 0) {
+        console.log("Upload successful üòÄ")
+      } else {
+        console.warn("Upload failed üòû")
+      }
+      console.log("successful files:", result.successful)
+      console.log("failed files:", result.failed)
+    })
+
+    const setStateCb = () => {
+      setState(uppy.getState())
+    }
+
+    for (const event of LISTENING_EVENTS) {
+      uppy.on(event, setStateCb)
+    }
+
+    return () => {
+      for (const event of ["complete", ...LISTENING_EVENTS]) {
+        uppyInstance.current?.off(
+          event as "complete" & keyof typeof LISTENING_EVENTS,
+          //@ts-expect-error -- huh? typescript wtf
+          setStateCb
+        )
+      }
+      uppyInstance.current?.close()
+      uppyInstance.current = undefined
+    }
+  }, [targetRef, endpoint, uploader])
+
+  return {
+    files: uppyInstance.current?.getFiles() ?? [],
+    error: uppyInstance.current?.getState,
+    state,
+    upload: () =>
+      uppyInstance.current?.upload() ??
+      new Error("[useUppy] Uppy has not initialized yet."),
+    getInputProps: () => inputProps,
+    getRootProps,
+    removeFile,
+    cancelAll,
+  }
+}
--- a/app/components/ui/button.tsx
+++ b/app/components/ui/button.tsx
@ -23,7 +23,7 @@ const buttonVariants = cva(
      size: {
        default: "h-9 px-4 py-2",
        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
+        lg: "h-16 rounded-md px-8",
        icon: "h-9 w-9",
      },
    },
--- a/app/components/ui/dialog.tsx
+++ b/app/components/ui/dialog.tsx
@ -0,0 +1,120 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { Cross2Icon } from "@radix-ui/react-icons"
+
+import { cn } from "~/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <Cross2Icon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
--- a/app/components/ui/progress.tsx
+++ b/app/components/ui/progress.tsx
@ -0,0 +1,26 @@
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "~/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary-1 transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }
--- a/app/routes/dashboard.tsx
+++ b/app/routes/dashboard.tsx
@ -12,3 +12,4 @@ export default function Dashboard() {
    </DashboardLayout>
  )
 }
+
--- a/app/tailwind.css
+++ b/app/tailwind.css
@ -16,6 +16,7 @@
    --primary: 242 51% 14%;
    --primary-1: 241 90% 82%;
    --primary-2: 241 21% 42%;
+    --primary-dark: 240 33% 4%;
    --primary-foreground: 0 0% 88%;
    --primary-1-foreground: 240 50% 9%;
 
--- a/package-lock.json
+++ b/package-lock.json
@ -1,23 +1,29 @@
 {
-  "name": "portal-dashboard",
+  "name": "lume-portal-dashboard",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
+      "name": "lume-portal-dashboard",
      "dependencies": {
        "@conform-to/react": "^1.0.2",
        "@conform-to/zod": "^1.0.2",
        "@fontsource-variable/manrope": "^5.0.19",
        "@lumeweb/portal-sdk": "^0.0.0-20240306231947",
        "@radix-ui/react-checkbox": "^1.0.4",
+        "@radix-ui/react-dialog": "^1.0.5",
        "@radix-ui/react-icons": "^1.3.0",
        "@radix-ui/react-label": "^2.0.2",
+        "@radix-ui/react-progress": "^1.0.3",
        "@radix-ui/react-slot": "^1.0.2",
        "@refinedev/cli": "^2.16.1",
        "@refinedev/core": "^4.47.2",
        "@refinedev/remix-router": "^3.0.0",
        "@remix-run/node": "^2.8.0",
        "@remix-run/react": "^2.8.0",
+        "@uppy/core": "^3.9.3",
+        "@uppy/tus": "^3.5.3",
+        "@uppy/utils": "^5.7.4",
        "class-variance-authority": "^0.7.0",
        "clsx": "^2.1.0",
        "react": "^18.2.0",
@ -3672,6 +3678,111 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz",
+      "integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz",
+      "integrity": "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-escape-keydown": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
+      "integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz",
+      "integrity": "sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-icons": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz",
@ -3680,6 +3791,24 @@
        "react": "^16.x || ^17.x || ^18.x"
      }
    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
+      "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-label": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.0.2.tgz",
@ -3703,6 +3832,29 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz",
+      "integrity": "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-presence": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz",
@ -3750,6 +3902,30 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-progress": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.0.3.tgz",
+      "integrity": "sha512-5G6Om/tYSxjSeEdrb1VfKkfZfn/1IlPWd731h2RfPuSbIfNUgfqAwbKfJCg/PP6nuUCTrYzalwHSpSinoWoCag==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-slot": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
@ -3803,6 +3979,24 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz",
+      "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-use-layout-effect": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
@ -4907,6 +5101,11 @@
        "url": "https://github.com/sponsors/tannerlinsley"
      }
    },
+    "node_modules/@transloadit/prettier-bytes": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@transloadit/prettier-bytes/-/prettier-bytes-0.3.1.tgz",
+      "integrity": "sha512-TozlXhWmBH1e2ZcQoz9tKuEl9dsvbS6uUghvcx/oluwN1XdcPHyF6+sZ3WhPv+FxO9j6dX7I3UV651mvJCbiQA=="
+    },
    "node_modules/@types/acorn": {
      "version": "4.0.6",
      "resolved": "https://registry.npmjs.org/@types/acorn/-/acorn-4.0.6.tgz",
@ -5033,6 +5232,11 @@
        "@types/react": "*"
      }
    },
+    "node_modules/@types/retry": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.2.tgz",
+      "integrity": "sha512-XISRgDJ2Tc5q4TRqvgJtzsRkFYNJzZrhTdtMoGVBttwzzQJkPnS3WWTFc7kuDRoPtPakl+T+OfdEUjYJj7Jbow=="
+    },
    "node_modules/@types/scheduler": {
      "version": "0.16.8",
      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
@ -5350,6 +5554,78 @@
      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
      "dev": true
    },
+    "node_modules/@uppy/companion-client": {
+      "version": "3.7.4",
+      "resolved": "https://registry.npmjs.org/@uppy/companion-client/-/companion-client-3.7.4.tgz",
+      "integrity": "sha512-mBQ9dFZeobPAI3p1VdhGAgjnTGqMKVmW37f/q84Qz9TaxGplQFzYJGYR8/9aoj00ickMtzKtkKtrTAyFxgwHmw==",
+      "dependencies": {
+        "@uppy/utils": "^5.7.4",
+        "namespace-emitter": "^2.0.1",
+        "p-retry": "^6.1.0"
+      },
+      "peerDependencies": {
+        "@uppy/core": "^3.9.3"
+      }
+    },
+    "node_modules/@uppy/core": {
+      "version": "3.9.3",
+      "resolved": "https://registry.npmjs.org/@uppy/core/-/core-3.9.3.tgz",
+      "integrity": "sha512-sUgiJ9Ag3eq8qf3i1unn7BOpjcidBj2lwnpJ8xlMGRcnQqwNznBXP2m39tK8nWEFvrj4kPgIslMZyoR0Lelzxg==",
+      "dependencies": {
+        "@transloadit/prettier-bytes": "^0.3.0",
+        "@uppy/store-default": "^3.2.2",
+        "@uppy/utils": "^5.7.4",
+        "lodash": "^4.17.21",
+        "mime-match": "^1.0.2",
+        "namespace-emitter": "^2.0.1",
+        "nanoid": "^4.0.0",
+        "preact": "^10.5.13"
+      }
+    },
+    "node_modules/@uppy/core/node_modules/nanoid": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.2.tgz",
+      "integrity": "sha512-7ZtY5KTCNheRGfEFxnedV5zFiORN1+Y1N6zvPTnHQd8ENUvfaDBeuJDZb2bN/oXwXxu3qkTXDzy57W5vAmDTBw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      }
+    },
+    "node_modules/@uppy/store-default": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@uppy/store-default/-/store-default-3.2.2.tgz",
+      "integrity": "sha512-OiSgT++Jj4nLK0N9WTeod3UNjCH81OXE5BcMJCd9oWzl2d0xPNq2T/E9Y6O72XVd+6Y7+tf5vZlPElutfMB3KQ=="
+    },
+    "node_modules/@uppy/tus": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@uppy/tus/-/tus-3.5.3.tgz",
+      "integrity": "sha512-YUdeIZquFgnLfssZrweqf24Iui3+zYCaFC36W21/lmeWZl5oPUioICvoBUFOV3q7jnqpsK4pAUMQfR4KH04Plg==",
+      "dependencies": {
+        "@uppy/companion-client": "^3.7.3",
+        "@uppy/utils": "^5.7.3",
+        "tus-js-client": "^3.1.3"
+      },
+      "peerDependencies": {
+        "@uppy/core": "^3.9.2"
+      }
+    },
+    "node_modules/@uppy/utils": {
+      "version": "5.7.4",
+      "resolved": "https://registry.npmjs.org/@uppy/utils/-/utils-5.7.4.tgz",
+      "integrity": "sha512-0Xsr7Xqdrb9mgfY3hi0YdhIaAxUw6qJasAflNMwNsyLGt3kH4pLfQHucolBKfWglVGtk1vfb49hZYvJGpcpzYA==",
+      "dependencies": {
+        "lodash": "^4.17.21",
+        "preact": "^10.5.13"
+      }
+    },
    "node_modules/@vanilla-extract/babel-plugin-debug-ids": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/@vanilla-extract/babel-plugin-debug-ids/-/babel-plugin-debug-ids-1.0.5.tgz",
@ -5633,6 +5909,17 @@
      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
      "dev": true
    },
+    "node_modules/aria-hidden": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.3.tgz",
+      "integrity": "sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/aria-query": {
      "version": "5.3.0",
      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
@ -6800,6 +7087,24 @@
      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
    },
+    "node_modules/combine-errors": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/combine-errors/-/combine-errors-3.0.3.tgz",
+      "integrity": "sha512-C8ikRNRMygCwaTx+Ek3Yr+OuZzgZjduCOfSQBjbM8V3MfgcjSTeto/GXP6PAwKvJz/v15b7GHZvx5rOlczFw/Q==",
+      "dependencies": {
+        "custom-error-instance": "2.1.1",
+        "lodash.uniqby": "4.5.0"
+      }
+    },
+    "node_modules/combine-errors/node_modules/lodash.uniqby": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.5.0.tgz",
+      "integrity": "sha512-IRt7cfTtHy6f1aRVA5n7kT8rgN3N1nH6MOWLcHfpWG2SH19E3JksLK38MktLxZDhlAjCP9jpIXkOnRXlu6oByQ==",
+      "dependencies": {
+        "lodash._baseiteratee": "~4.7.0",
+        "lodash._baseuniq": "~4.6.0"
+      }
+    },
    "node_modules/combined-stream": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@ -7013,6 +7318,11 @@
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
    },
+    "node_modules/custom-error-instance": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/custom-error-instance/-/custom-error-instance-2.1.1.tgz",
+      "integrity": "sha512-p6JFxJc3M4OTD2li2qaHkDCw9SfMw82Ldr6OC9Je1aXiGfhx2W8p3GaoeaGrPJTUN9NirTM/KTxHWMUdR1rsUg=="
+    },
    "node_modules/damerau-levenshtein": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@ -7216,6 +7526,11 @@
        "npm": "1.2.8000 || >= 1.4.16"
      }
    },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+    },
    "node_modules/didyoumean": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@ -9206,6 +9521,14 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/get-port": {
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/get-port/-/get-port-5.1.1.tgz",
@ -9906,6 +10229,14 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
    "node_modules/ipaddr.js": {
      "version": "1.9.1",
      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@ -10219,6 +10550,17 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/is-network-error": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-network-error/-/is-network-error-1.0.1.tgz",
+      "integrity": "sha512-OwQXkwBJeESyhFw+OumbJVD58BFBJJI5OM5S1+eyrDKlgDZPX2XNT5gXS56GSD3NPbbwUuMlR1Q71SRp5SobuQ==",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/is-number": {
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@ -10499,6 +10841,11 @@
        "jiti": "bin/jiti.js"
      }
    },
+    "node_modules/js-base64": {
+      "version": "3.7.7",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.7.tgz",
+      "integrity": "sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw=="
+    },
    "node_modules/js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@ -11003,6 +11350,46 @@
      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
    },
+    "node_modules/lodash._baseiteratee": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash._baseiteratee/-/lodash._baseiteratee-4.7.0.tgz",
+      "integrity": "sha512-nqB9M+wITz0BX/Q2xg6fQ8mLkyfF7MU7eE+MNBNjTHFKeKaZAPEzEg+E8LWxKWf1DQVflNEn9N49yAuqKh2mWQ==",
+      "dependencies": {
+        "lodash._stringtopath": "~4.8.0"
+      }
+    },
+    "node_modules/lodash._basetostring": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-4.12.0.tgz",
+      "integrity": "sha512-SwcRIbyxnN6CFEEK4K1y+zuApvWdpQdBHM/swxP962s8HIxPO3alBH5t3m/dl+f4CMUug6sJb7Pww8d13/9WSw=="
+    },
+    "node_modules/lodash._baseuniq": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz",
+      "integrity": "sha512-Ja1YevpHZctlI5beLA7oc5KNDhGcPixFhcqSiORHNsp/1QTv7amAXzw+gu4YOvErqVlMVyIJGgtzeepCnnur0A==",
+      "dependencies": {
+        "lodash._createset": "~4.0.0",
+        "lodash._root": "~3.0.0"
+      }
+    },
+    "node_modules/lodash._createset": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/lodash._createset/-/lodash._createset-4.0.3.tgz",
+      "integrity": "sha512-GTkC6YMprrJZCYU3zcqZj+jkXkrXzq3IPBcF/fIPpNEAB4hZEtXU8zp/RwKOvZl43NUmwDbyRk3+ZTbeRdEBXA=="
+    },
+    "node_modules/lodash._root": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash._root/-/lodash._root-3.0.1.tgz",
+      "integrity": "sha512-O0pWuFSK6x4EXhM1dhZ8gchNtG7JMqBtrHdoUFUWXD7dJnNSUze1GuyQr5sOs0aCvgGeI3o/OJW8f4ca7FDxmQ=="
+    },
+    "node_modules/lodash._stringtopath": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/lodash._stringtopath/-/lodash._stringtopath-4.8.0.tgz",
+      "integrity": "sha512-SXL66C731p0xPDC5LZg4wI5H+dJo/EO4KTqOMwLYCH3+FmmfAKJEZCm6ohGpI+T1xwsDsJCfL4OnhorllvlTPQ==",
+      "dependencies": {
+        "lodash._basetostring": "~4.12.0"
+      }
+    },
    "node_modules/lodash.camelcase": {
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@ -11050,6 +11437,11 @@
      "resolved": "https://registry.npmjs.org/lodash.omitby/-/lodash.omitby-4.6.0.tgz",
      "integrity": "sha512-5OrRcIVR75M288p4nbI2WLAf3ndw2GD9fyNv3Bc15+WCxJDdZ4lYndSxGd7hnG6PVjiJTeJE2dHEGhIuKGicIQ=="
    },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
    "node_modules/lodash.topath": {
      "version": "4.5.2",
      "resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz",
@ -12150,6 +12542,14 @@
        "node": ">= 0.6"
      }
    },
+    "node_modules/mime-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/mime-match/-/mime-match-1.0.2.tgz",
+      "integrity": "sha512-VXp/ugGDVh3eCLOBCiHZMYWQaTNUHv2IJrut+yXA6+JbLPXHglHwfS/5A5L0ll+jkCY7fIzRJcH6OIunF+c6Cg==",
+      "dependencies": {
+        "wildcard": "^1.1.0"
+      }
+    },
    "node_modules/mime-types": {
      "version": "2.1.35",
      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
@ -12416,6 +12816,11 @@
        "thenify-all": "^1.0.0"
      }
    },
+    "node_modules/namespace-emitter": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/namespace-emitter/-/namespace-emitter-2.0.1.tgz",
+      "integrity": "sha512-N/sMKHniSDJBjfrkbS/tpkPj4RAbvW3mr8UAzvlMHyun93XEm83IAvhWtJVHo+RHn/oO8Job5YN4b+wRjSVp5g=="
+    },
    "node_modules/nanoid": {
      "version": "3.3.7",
      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@ -13196,6 +13601,30 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/p-retry": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-6.2.0.tgz",
+      "integrity": "sha512-JA6nkq6hKyWLLasXQXUrO4z8BUZGUt/LjlJxx8Gb2+2ntodU/SS63YZ8b0LUTbQ8ZB9iwOfhEPhg4ykKnn2KsA==",
+      "dependencies": {
+        "@types/retry": "0.12.2",
+        "is-network-error": "^1.0.0",
+        "retry": "^0.13.1"
+      },
+      "engines": {
+        "node": ">=16.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-retry/node_modules/retry": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
+      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
    "node_modules/p-try": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
@ -13817,6 +14246,15 @@
      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
    },
+    "node_modules/preact": {
+      "version": "10.19.6",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.19.6.tgz",
+      "integrity": "sha512-gympg+T2Z1fG1unB8NH29yHJwnEaCH37Z32diPDku316OTnRPeMbiRV9kTrfZpocXjdfnWuFUl/Mj4BHaf6gnw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
    "node_modules/preferred-pm": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/preferred-pm/-/preferred-pm-3.1.3.tgz",
@ -13930,6 +14368,16 @@
        "react-is": "^16.13.1"
      }
    },
+    "node_modules/proper-lockfile": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/proper-lockfile/-/proper-lockfile-4.1.2.tgz",
+      "integrity": "sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "retry": "^0.12.0",
+        "signal-exit": "^3.0.2"
+      }
+    },
    "node_modules/property-information": {
      "version": "6.4.1",
      "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.4.1.tgz",
@ -14017,6 +14465,11 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
+    },
    "node_modules/queue-microtask": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@ -14125,6 +14578,51 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-remove-scroll": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
+      "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.3",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.5.tgz",
+      "integrity": "sha512-3cqjOqg6s0XbOjWvmasmqHch+RLxIEk2r/70rzGXuz3iIGQsQheEQyqYCBb5EECoD01Vo2SIbDqW4paLeLTASw==",
+      "dependencies": {
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/react-router": {
      "version": "6.22.2",
      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.2.tgz",
@ -14155,6 +14653,28 @@
        "react-dom": ">=16.8"
      }
    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
+      "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "invariant": "^2.2.4",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/react-textarea-autosize": {
      "version": "8.5.3",
      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.3.tgz",
@ -14606,7 +15126,6 @@
      "version": "0.12.0",
      "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
      "integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==",
-      "dev": true,
      "engines": {
        "node": ">= 4"
      }
@ -16315,6 +16834,20 @@
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
    },
+    "node_modules/tus-js-client": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/tus-js-client/-/tus-js-client-3.1.3.tgz",
+      "integrity": "sha512-n9k6rI/nPOuP2TaqPG6Ogz3a3V1cSH9en7N0VH4gh95jmG8JA58TJzLms2lBfb7aKVb3fdUunqYEG3WnQnZRvQ==",
+      "dependencies": {
+        "buffer-from": "^1.1.2",
+        "combine-errors": "^3.0.3",
+        "is-stream": "^2.0.0",
+        "js-base64": "^3.7.2",
+        "lodash.throttle": "^4.1.1",
+        "proper-lockfile": "^4.1.2",
+        "url-parse": "^1.5.7"
+      }
+    },
    "node_modules/type-check": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@ -16849,6 +17382,15 @@
      "integrity": "sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg==",
      "deprecated": "Please see https://github.com/lydell/urix#deprecated"
    },
+    "node_modules/url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "dependencies": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
    "node_modules/use": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
@ -16857,6 +17399,26 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.1.tgz",
+      "integrity": "sha512-Lg4Vx1XZQauB42Hw3kK7JM6yjVjgFmFC5/Ab797s79aARomD2nEErc4mCgM8EZrARLmmbWpi5DGCadmK50DcAQ==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/use-composed-ref": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz",
@ -16894,6 +17456,27 @@
        }
      }
    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
+      "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/use-sync-external-store": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
@ -17708,6 +18291,11 @@
        "node": ">=8"
      }
    },
+    "node_modules/wildcard": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-1.1.2.tgz",
+      "integrity": "sha512-DXukZJxpHA8LuotRwL0pP1+rS6CS7FF2qStDDE1C7DDg2rLud2PXRMuEDYIPhgEezwnlHNL4c+N6MfMTjCGTng=="
+    },
    "node_modules/wordwrap": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -16,14 +16,19 @@
    "@fontsource-variable/manrope": "^5.0.19",
    "@lumeweb/portal-sdk": "^0.0.0-20240306231947",
    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-progress": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@refinedev/cli": "^2.16.1",
    "@refinedev/core": "^4.47.2",
    "@refinedev/remix-router": "^3.0.0",
    "@remix-run/node": "^2.8.0",
    "@remix-run/react": "^2.8.0",
+    "@uppy/core": "^3.9.3",
+    "@uppy/tus": "^3.5.3",
+    "@uppy/utils": "^5.7.4",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "react": "^18.2.0",
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -20,7 +20,7 @@ const config = {
        border: "hsl(var(--border))",
        input: {
          DEFAULT: "hsl(var(--input))",
-          placeholder: "hsl(var(--input-placeholder))",
+          placeholder: "hsl(var(--input-placeholder))"
        },
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
@ -34,7 +34,10 @@ const config = {
          foreground: "hsl(var(--primary-1-foreground))"
        },
        "primary-2": {
-          DEFAULT: "hsl(var(--primary-2))",
+          DEFAULT: "hsl(var(--primary-2))"
+        },
+        "primary-dark": {
+          DEFAULT: "hsl(var(--primary-dark))"
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,14 +1,14 @@
-import { vitePlugin as remix } from "@remix-run/dev";
-import { defineConfig } from "vite";
-import tsconfigPaths from "vite-tsconfig-paths";
+import { vitePlugin as remix } from "@remix-run/dev"
+import { defineConfig } from "vite"
+import tsconfigPaths from "vite-tsconfig-paths"

 export default defineConfig({
  plugins: [
    remix({
      ssr: false,
-      ignoredRouteFiles: ["**/*.css"],
+      ignoredRouteFiles: ["**/*.css"]
    }),
-    tsconfigPaths(),
+    tsconfigPaths()
  ],
  server: {
    fs: {
@ -18,7 +18,10 @@ export default defineConfig({
      // If you're comfortable with Vite's dev server making any file within the
      // project root available, you can remove this option.  See more:
      // https://vitejs.dev/config/server-options.html#server-fs-allow
-      allow: ["app", "node_modules/@fontsource-variable/manrope"],
-    },
-  },
-});
+      allow: [
+        "app",
+        "node_modules/@fontsource-variable/manrope",
+      ]
+    }
+  }
+})