Generated by Spark: the button does not do anything and dragging and dropping afile does nothin

Author: rajbos

src/App.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback } from "react";
+import { useState, useCallback, useRef, DragEvent } from "react";
 import { Upload } from "@phosphor-icons/react";
 import { toast } from "sonner";
 import {
@@ -14,9 +14,10 @@ function App() {
   const [data, setData] = useState<CopilotUsageData[] | null>(null);
   const [aggregatedData, setAggregatedData] = useState<AggregatedData[]>([]);
   const [uniqueModels, setUniqueModels] = useState<string[]>([]);
+  const [isDragging, setIsDragging] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
-  const handleFileUpload = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
+  const processFile = useCallback((file: File) => {
     if (!file) return;
 
     const reader = new FileReader();
@@ -48,6 +49,49 @@ function App() {
     reader.readAsText(file);
   }, []);
 
+  const handleFileUpload = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      processFile(file);
+    }
+    // Reset the input value to allow selecting the same file again
+    if (event.target) {
+      event.target.value = '';
+    }
+  }, [processFile]);
+  
+  const handleButtonClick = () => {
+    fileInputRef.current?.click();
+  };
+  
+  const handleDragOver = useCallback((e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  }, []);
+  
+  const handleDragLeave = useCallback((e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  }, []);
+  
+  const handleDrop = useCallback((e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+    
+    const files = e.dataTransfer?.files;
+    if (files && files.length > 0) {
+      const file = files[0];
+      if (file.type === "text/csv" || file.name.endsWith('.csv')) {
+        processFile(file);
+      } else {
+        toast.error("Please upload a CSV file.");
+      }
+    }
+  }, [processFile]);
+  
   // Generate chart data grouped by date with a stacked entry for each model
   const chartData = useCallback(() => {
     if (!aggregatedData.length) return [];
@@ -83,28 +127,34 @@ function App() {
       </header>
 
       <Card className="mb-8">
-        <div className="p-6 text-center">
+        <div 
+          className={`p-6 text-center ${isDragging ? 'bg-secondary/50' : ''} transition-colors duration-200`}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+        >
           <div className="mb-4">
             <Upload size={48} weight="thin" className="mx-auto text-muted-foreground" />
           </div>
 
           <h2 className="text-xl font-medium mb-2">Upload CSV File</h2>
           <p className="text-muted-foreground mb-4 max-w-md mx-auto">
-            Upload your GitHub Copilot premium requests usage CSV export to visualize the data
+            {isDragging 
+              ? "Drop your file here..." 
+              : "Upload your GitHub Copilot premium requests usage CSV export to visualize the data. Drag and drop or select a file."}
           </p>
 
-          <label htmlFor="csv-upload">
-            <Button as="div" className="cursor-pointer">
-              Select CSV File
-            </Button>
-            <input
-              id="csv-upload"
-              type="file"
-              accept=".csv"
-              onChange={handleFileUpload}
-              className="hidden"
-            />
-          </label>
+          <Button onClick={handleButtonClick} className="cursor-pointer">
+            Select CSV File
+          </Button>
+          <input
+            ref={fileInputRef}
+            id="csv-upload"
+            type="file"
+            accept=".csv"
+            onChange={handleFileUpload}
+            className="hidden"
+          />
         </div>
       </Card>
 

src/index.css

@@ -72,4 +72,10 @@
 
 body {
   font-family: 'Inter', sans-serif;
+}
+
+/* Add styles for drag and drop */
+[data-dragging="true"] {
+  border: 2px dashed var(--primary);
+  background-color: var(--secondary);
 }

src/prd.md

@@ -20,9 +20,9 @@
 
 ## Essential Features
 1. **CSV Upload**
-   - What: Allow users to upload GitHub Copilot usage CSV exports
-   - Why: Provides the raw data needed for analysis
-   - Success: Properly parses CSV format with correct data types and handles validation
+   - What: Allow users to upload GitHub Copilot usage CSV exports via file selection or drag-and-drop interface
+   - Why: Provides flexible options for adding data to the analysis
+   - Success: Properly parses CSV format with correct data types and handles validation with clear feedback
 
 2. **Stacked Line Graph**
    - What: Visualize request data by model per day with color-coded status indicators
@@ -79,9 +79,9 @@
 - **Contextual Appropriateness**: Minimal animations focused on data state changes
 
 ### UI Elements & Component Selection
-- **Component Usage**: Card for the upload area, Button for triggering upload, Toast for notifications
-- **Component Customization**: Rounded corners and subtle shadows for cards
-- **Component States**: Clear hover/focus states for interactive elements
+- **Component Usage**: Card with drag-and-drop support for the upload area, Button for triggering upload, Toast for notifications
+- **Component Customization**: Rounded corners and subtle shadows for cards, visual feedback for drag states
+- **Component States**: Clear hover/focus states for interactive elements, distinctive styling for drag-over states
 - **Icon Selection**: Upload icon, chart icon, and information icon where appropriate
 - **Component Hierarchy**: Upload component as primary action initially, chart as main focus after data load
 - **Spacing System**: Consistent spacing using Tailwind's spacing scale