fix(nebula): consolidate image upload validation and enhance UX - Move all file validation logic to handleImageUpload function as requested - Add consistent validation to onDrop and onPaste handlers - Enhance drag-and-drop UX with visual feedback and state management - Add accessibility attributes (aria-dropeffect) for better screen reader support - Remove duplicate validation from ImageUploadButton to avoid redundancy - Preserve existing validation behavior (5MB file size limit) - Addresses CodeRabbit suggestions and Manan's feedback for consistent file validation across all upload methods

Author: pinkhoodie

apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx

@@ -76,6 +76,7 @@ export function ChatBar(props: {
   const [images, setImages] = useState<
     Array<{ file: File; b64: string | undefined }>
   >([]);
+  const [isDragOver, setIsDragOver] = useState(false);
 
   function handleSubmit(message: string) {
     const userMessage: NebulaUserMessage = {
@@ -104,10 +105,35 @@ export function ChatBar(props: {
     },
   });
 
-  async function handleImageUpload(images: File[]) {
+  async function handleImageUpload(files: File[]) {
+    const totalFiles = files.length + images.length;
+
+    if (totalFiles > maxAllowedImagesPerMessage) {
+      toast.error(
+        `You can only upload up to ${maxAllowedImagesPerMessage} images at a time`,
+        {
+          position: "top-right",
+        }
+      );
+      return;
+    }
+
+    const validFiles: File[] = [];
+
+    for (const file of files) {
+      if (file.size <= 5 * 1024 * 1024) {
+        validFiles.push(file);
+      } else {
+        toast.error("Image is larger than 5MB", {
+          description: `File: ${file.name}`,
+          position: "top-right",
+        });
+      }
+    }
+
     try {
       const urls = await Promise.all(
-        images.map(async (image) => {
+        validFiles.map(async (image) => {
           const b64 = await uploadImageMutation.mutateAsync(image);
           return { file: image, b64: b64 };
         })
@@ -126,16 +152,39 @@ export function ChatBar(props: {
     <DynamicHeight transition="height 200ms ease">
       <div
         className={cn(
-          "overflow-hidden rounded-2xl border border-border bg-card",
+          "overflow-hidden rounded-2xl border border-border bg-card transition-colors",
+          isDragOver &&
+            props.allowImageUpload &&
+            "border-nebula-pink-foreground bg-nebula-pink/5",
           props.className
         )}
         onDrop={(e) => {
           e.preventDefault();
+          setIsDragOver(false);
           if (!props.allowImageUpload) return;
           const files = Array.from(e.dataTransfer.files);
           if (files.length > 0) handleImageUpload(files);
         }}
-        onDragOver={(e) => e.preventDefault()}
+        onDragOver={(e) => {
+          e.preventDefault();
+          if (props.allowImageUpload) {
+            setIsDragOver(true);
+          }
+        }}
+        onDragEnter={(e) => {
+          e.preventDefault();
+          if (props.allowImageUpload) {
+            setIsDragOver(true);
+          }
+        }}
+        onDragLeave={(e) => {
+          e.preventDefault();
+          // Only set drag over to false if we're leaving the container entirely
+          if (!e.currentTarget.contains(e.relatedTarget as Node)) {
+            setIsDragOver(false);
+          }
+        }}
+        aria-dropeffect={props.allowImageUpload ? "copy" : "none"}
       >
         {images.length > 0 && (
           <ImagePreview
@@ -274,32 +323,7 @@ export function ChatBar(props: {
                   value={undefined}
                   accept="image/jpeg,image/png,image/webp"
                   onChange={(files) => {
-                    const totalFiles = files.length + images.length;
-
-                    if (totalFiles > maxAllowedImagesPerMessage) {
-                      toast.error(
-                        `You can only upload up to ${maxAllowedImagesPerMessage} images at a time`,
-                        {
-                          position: "top-right",
-                        }
-                      );
-                      return;
-                    }
-
-                    const validFiles: File[] = [];
-
-                    for (const file of files) {
-                      if (file.size <= 5 * 1024 * 1024) {
-                        validFiles.push(file);
-                      } else {
-                        toast.error("Image is larger than 5MB", {
-                          description: `File: ${file.name}`,
-                          position: "top-right",
-                        });
-                      }
-                    }
-
-                    handleImageUpload(validFiles);
+                    handleImageUpload(files);
                   }}
                   variant="ghost"
                   className="!h-auto w-auto shrink-0 gap-2 p-2"