feat: add drag-and-drop image upload and improve image previews

- Add FileDropZone component with overlay for web drag-and-drop - Add useFileDropZone hook using native addEventListener for web - Wire up drag-drop to agent screen to add images to input - Improve image preview styling with visible border - Show X button on hover with dark overlay for removal 🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-07 18:05:02 +07:00
parent 0d9a69d00f
commit a515f1fd03
5 changed files with 316 additions and 25 deletions
@@ -0,0 +1,95 @@
+import { View, Text, Platform } from "react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import Animated, {
+  useAnimatedStyle,
+  withTiming,
+  useSharedValue,
+} from "react-native-reanimated";
+import { useEffect } from "react";
+import { Upload } from "lucide-react-native";
+import { useFileDropZone } from "@/hooks/use-file-drop-zone";
+import type { ImageAttachment } from "./message-input";
+
+interface FileDropZoneProps {
+  children: React.ReactNode;
+  onFilesDropped: (files: ImageAttachment[]) => void;
+  disabled?: boolean;
+}
+
+const IS_WEB = Platform.OS === "web";
+
+export function FileDropZone({
+  children,
+  onFilesDropped,
+  disabled = false,
+}: FileDropZoneProps) {
+  const { theme } = useUnistyles();
+  const { isDragging, containerRef } = useFileDropZone({
+    onFilesDropped,
+    disabled,
+  });
+
+  const overlayOpacity = useSharedValue(0);
+
+  useEffect(() => {
+    overlayOpacity.value = withTiming(isDragging ? 1 : 0, { duration: 150 });
+  }, [isDragging, overlayOpacity]);
+
+  const overlayAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: overlayOpacity.value,
+    pointerEvents: overlayOpacity.value > 0 ? "auto" : "none",
+  }));
+
+  // On non-web platforms, just render children
+  if (!IS_WEB) {
+    return <>{children}</>;
+  }
+
+  return (
+    <View
+      // Cast ref for web - View renders as div on web
+      ref={containerRef as unknown as React.RefObject<View>}
+      style={styles.container}
+    >
+      {children}
+
+      {/* Drop overlay */}
+      <Animated.View style={[styles.overlay, overlayAnimatedStyle]}>
+        {/* Backdrop */}
+        <View style={styles.backdrop} />
+        {/* Content */}
+        <View style={styles.overlayContent}>
+          <Upload size={32} color={theme.colors.primary} />
+          <Text style={styles.overlayText}>Drop images here</Text>
+        </View>
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  container: {
+    flex: 1,
+    position: "relative",
+  },
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1000,
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: theme.colors.background,
+    opacity: 0.7,
+  },
+  overlayContent: {
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  overlayText: {
+    fontSize: theme.fontSize.base,
+    fontWeight: theme.fontWeight.medium,
+    color: theme.colors.foreground,
+  },
+}));