Add File Uploads to Next.js (Cursor Prompt)

Add file upload functionality to this Next.js app using Supabase Storage.

FILES TO CREATE:
- src/lib/storage.ts — Upload, download, delete utility functions
- src/components/upload/FileUploader.tsx — Drag-and-drop upload component
- src/components/upload/FilePreview.tsx — Preview component for uploaded files
- src/app/api/upload/route.ts — Server-side upload handler for large files

IMPLEMENTATION:
1. In storage.ts, create functions: uploadFile(bucket, path, file), getPublicUrl(bucket, path), getSignedUrl(bucket, path, expiresIn), deleteFile(bucket, path), listFiles(bucket, folder).
2. FileUploader component supports: drag-and-drop zone, click-to-browse, multiple files, file type restrictions (configurable), max size validation, upload progress per file, and error display.
3. For private files, use signed URLs with expiration (e.g., 1 hour). For public files (avatars, product images), use public URLs.
4. Compress images before upload using canvas API (max 1920px width, 0.8 quality).
5. Organize files in buckets by type: 'avatars', 'documents', 'images'. Use folder structure: {user_id}/{timestamp}-{filename}.

STORAGE POLICIES:
- avatars bucket: public read, authenticated upload/delete own files
- documents bucket: private, authenticated read/upload/delete own files only
- images bucket: public read, authenticated upload, admin delete

DO NOT:
- Store files in the Next.js public/ directory
- Use external CDNs (Cloudinary, S3) — use Supabase Storage only
- Skip file type validation

ENVIRONMENT VARIABLES:
- NEXT_PUBLIC_SUPABASE_URL (already set)
- NEXT_PUBLIC_SUPABASE_ANON_KEY (already set)