Implement Global File Drop Handler with Toast Notifications and Project Selection

[Copilot]

This PR implements a comprehensive global file drop handler system that allows users to drag and drop PDF files anywhere in the application with intelligent project routing and persistent status notifications.

Overview

The implementation provides a seamless drag-and-drop experience for PDF statement uploads with context-aware project selection and real-time feedback through toast notifications that persist across navigation.

Key Features

🎯 Smart Drop Zones

• Global drop support: Users can drop files anywhere in the application
• Project-specific targets: Drop directly onto sidebar project items for targeted uploads
• Visual feedback: Overlay appears during drag operations showing the target project

🔒 File Validation

• PDF only: Restricts uploads to PDF format with proper MIME type checking
• Size limits: Enforces 5MB maximum file size
• Security checks: Detects and rejects password-protected PDFs
• Single file restriction: Only allows one file per drop operation

🎨 User Experience

• Context-aware routing:
  • Uploads to current project when dropping globally within a project context
  • Shows project selector dialog when no current project exists
  • Displays confirmation modal when dropping on a different project than current
• Persistent notifications: Toast messages remain visible during navigation using web worker processing
• Status tracking: Real-time upload status with states: pending → processing → completed/failed

⚙️ Technical Implementation

• Web Worker processing: File uploads and API calls run in background threads to prevent UI blocking
• Reactive state management: Custom toast store with observer pattern for cross-component state sharing
• TypeScript integration: Full type safety with proper interfaces and error handling
• API integration: Connects to existing /py-api/projects/{project_id}/statements endpoint

Component Architecture

GlobalFileDropHandler (Main handler)
├── ToastContainer (Notification system)
├── ProjectSelectorDialog (Project selection modal)
├── CrossProjectConfirmation (Cross-project confirmation modal)
└── upload-worker.js (Background processing)

Usage Examples

Scenario 1: Global drop with current project

1. User is viewing "Project A"
2. Drops PDF anywhere on page → Direct upload to "Project A"

Scenario 2: Global drop without current project

1. User is on organization overview
2. Drops PDF → Project selector dialog appears

Scenario 3: Cross-project drop

1. User is viewing "Project A"
2. Drops PDF on "Project B" in sidebar → Confirmation modal appears

Files Added/Modified

• components/global-file-drop-handler.tsx - Main drop handler component
• components/ui/toast.tsx - Toast notification system
• components/ui/project-selector-dialog.tsx - Project selection modal
• components/ui/cross-project-confirmation.tsx - Cross-project confirmation
• stores/toast-store.ts - Toast state management
• lib/file-validation.ts - PDF validation utilities
• public/upload-worker.js - Background file processing
• app/o/[org-slug]/(sidebar)/layout.tsx - Integration point
• app/o/[org-slug]/(sidebar)/components/projects/project-item.tsx - Added drop target attributes

The implementation follows existing code patterns and maintains consistency with the current UI/UX design while adding powerful new functionality for file management.

Created from VS Code via the GitHub Pull Request extension.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
modernstack	Ready	Preview	Comment	Sep 24, 2025 5:38pm