Add useCallbackRef hook and update imports

Implemented a custom `useCallbackRef` hook to optimize callback refs. Updated import paths for consistency and replaced `Cross2Icon` with `CrossIcon` in FileUploader component.

apps/frontend/src/components/file-uploader.tsx

@@ -1,11 +1,13 @@
 import Dropzone, { DropzoneProps, FileRejection } from 'react-dropzone';
 import { toast } from 'sonner';
 import React from 'react';
-import { FileTextIcon, UploadIcon } from 'lucide-react';
+import { CrossIcon, FileTextIcon, UploadIcon } from 'lucide-react';
 import { ScrollArea } from './ui/scroll-area';
 import { Progress } from '@radix-ui/react-progress';
 import { Button } from './ui/button';
-import { formatBytes } from '../lib/utils';
+import { cn, formatBytes } from '../lib/utils';
+import { useControllableState } from '../hooks/use-controllable-state';
+import Image from 'next/image';
 
 
 interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -288,7 +290,7 @@ function FileCard({ file, progress, onRemove }: FileCardProps) {
           className="size-7"
           onClick={onRemove}
         >
-          <Cross2Icon className="size-4" aria-hidden="true" />
+          <CrossIcon className="size-4" aria-hidden="true" />
           <span className="sr-only">Remove file</span>
         </Button>
       </div>

apps/frontend/src/components/ui/avatar.tsx

@@ -3,7 +3,7 @@
 import * as React from "react"
 import * as AvatarPrimitive from "@radix-ui/react-avatar"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,

apps/frontend/src/components/ui/drawer.tsx

@@ -3,7 +3,7 @@
 import * as React from "react"
 import { Drawer as DrawerPrimitive } from "vaul"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 const Drawer = ({
   shouldScaleBackground = true,

apps/frontend/src/components/ui/select.tsx

@@ -4,7 +4,7 @@ import * as React from "react"
 import * as SelectPrimitive from "@radix-ui/react-select"
 import { Check, ChevronDown, ChevronUp } from "lucide-react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 const Select = SelectPrimitive.Root
 

apps/frontend/src/hooks/use-callback-ref.ts

@@ -0,0 +1,27 @@
+import * as React from "react"
+
+/**
+ * @see https://github.com/radix-ui/primitives/blob/main/packages/react/use-callback-ref/src/useCallbackRef.tsx
+ */
+
+/**
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop or avoid re-executing effects when passed as a dependency
+ */
+function useCallbackRef<T extends (...args: never[]) => unknown>(
+  callback: T | undefined
+): T {
+  const callbackRef = React.useRef(callback)
+
+  React.useEffect(() => {
+    callbackRef.current = callback
+  })
+
+  // https://github.com/facebook/react/issues/19240
+  return React.useMemo(
+    () => ((...args) => callbackRef.current?.(...args)) as T,
+    []
+  )
+}
+
+export { useCallbackRef }

apps/frontend/src/hooks/use-controllable-state.ts

@@ -1,6 +1,7 @@
 import * as React from "react"
 
-import { useCallbackRef } from "@/hooks/use-callback-ref"
+import { useCallbackRef } from "../hooks/use-callback-ref"
+import { useEffect } from 'react';
 
 /**
  * @see https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/useControllableState.tsx
@@ -54,7 +55,8 @@ function useUncontrolledState<T>({
   const prevValueRef = React.useRef(value)
   const handleChange = useCallbackRef(onChange)
 
-  React.useEffect(() => {
+  // @ts-ignore
+  useEffect(() => {
     if (prevValueRef.current !== value) {
       handleChange(value as T)
       prevValueRef.current = value