pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-20 12:11:17 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: Improve Uppy component styling

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-09-29 17:04:13 +00:00
parent 730f4c4457
commit be42c019c9
4 changed files with 442 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@@ -15,6 +15,9 @@
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@lovable_dev" /> <meta name="twitter:site" content="@lovable_dev" />
<meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" /> <meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
<!-- Uppy CSS for photo upload functionality -->
<link href="https://releases.transloadit.com/uppy/v3.25.3/uppy.min.css" rel="stylesheet">
</head> </head>
<body> <body>

112
src/components/upload/UppyPhotoSubmissionUpload.tsx
View File

@@ -1,14 +1,16 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Card } from '@/components/ui/card'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label'; import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea'; import { Textarea } from '@/components/ui/textarea';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import { UppyPhotoUpload } from './UppyPhotoUpload'; import { UppyPhotoUpload } from './UppyPhotoUpload';
import { supabase } from '@/integrations/supabase/client'; import { supabase } from '@/integrations/supabase/client';
import { useAuth } from '@/hooks/useAuth'; import { useAuth } from '@/hooks/useAuth';
import { useToast } from '@/hooks/use-toast'; import { useToast } from '@/hooks/use-toast';
import { Camera } from 'lucide-react'; import { Camera, CheckCircle, AlertCircle, Info } from 'lucide-react';
interface UppyPhotoSubmissionUploadProps { interface UppyPhotoSubmissionUploadProps {
onSubmissionComplete?: () => void; onSubmissionComplete?: () => void;
@@ -118,16 +120,43 @@ export function UppyPhotoSubmissionUpload({
}; };
return ( return (
<Card className="p-6"> <Card className="w-full max-w-2xl mx-auto shadow-lg">
<div className="space-y-6"> <CardHeader className="text-center space-y-4">
<div className="flex items-center gap-2"> <div className="mx-auto w-16 h-16 bg-gradient-to-br from-primary to-secondary rounded-full flex items-center justify-center">
<Camera className="h-5 w-5 text-primary" /> <Camera className="w-8 h-8 text-primary-foreground" />
<h3 className="text-lg font-semibold">Submit Photos</h3> </div>
<div>
<CardTitle className="text-2xl bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
Submit Photos
</CardTitle>
<CardDescription className="text-base mt-2">
Share your photos with the community. All submissions will be reviewed before being published.
</CardDescription>
</div>
</CardHeader>
<CardContent className="space-y-6">
<div className="bg-muted/50 rounded-lg p-4 border border-border">
<div className="flex items-start gap-3">
<Info className="w-5 h-5 text-primary mt-0.5 flex-shrink-0" />
<div className="space-y-2 text-sm">
<p className="font-medium">Submission Guidelines:</p>
<ul className="space-y-1 text-muted-foreground">
<li>• Photos should be clear and well-lit</li>
<li>• Maximum 10 images per submission</li>
<li>• Each image up to 25MB in size</li>
<li>• Review process takes 24-48 hours</li>
</ul>
</div>
</div>
</div> </div>
<div className="space-y-4"> <Separator />
<div>
<Label htmlFor="title">Title *</Label> <div className="space-y-2">
<Label htmlFor="title" className="text-base font-medium">
Title *
</Label>
<Input <Input
id="title" id="title"
value={title} value={title}
@@ -135,14 +164,17 @@ export function UppyPhotoSubmissionUpload({
placeholder="Give your photos a descriptive title" placeholder="Give your photos a descriptive title"
maxLength={100} maxLength={100}
required required
className="transition-all duration-200 focus:ring-2 focus:ring-primary/20"
/> />
<p className="text-sm text-muted-foreground mt-1"> <p className="text-sm text-muted-foreground">
{title.length}/100 characters {title.length}/100 characters
</p> </p>
</div> </div>
<div> <div className="space-y-2">
<Label htmlFor="caption">Caption</Label> <Label htmlFor="caption" className="text-base font-medium">
Caption
</Label>
<Textarea <Textarea
id="caption" id="caption"
value={caption} value={caption}
@@ -150,45 +182,61 @@ export function UppyPhotoSubmissionUpload({
placeholder="Add a description or story about these photos..." placeholder="Add a description or story about these photos..."
maxLength={500} maxLength={500}
rows={3} rows={3}
className="transition-all duration-200 focus:ring-2 focus:ring-primary/20 resize-none"
/> />
<p className="text-sm text-muted-foreground mt-1"> <p className="text-sm text-muted-foreground">
{caption.length}/500 characters {caption.length}/500 characters
</p> </p>
</div> </div>
<div> <div className="space-y-3">
<Label>Photos</Label> <div className="flex items-center justify-between">
<Label className="text-base font-medium">Photos *</Label>
{uploadedUrls.length > 0 && (
<Badge variant="secondary" className="text-xs">
{uploadedUrls.length} photo{uploadedUrls.length !== 1 ? 's' : ''} selected
</Badge>
)}
</div>
<UppyPhotoUpload <UppyPhotoUpload
onUploadComplete={handleUploadComplete} onUploadComplete={handleUploadComplete}
maxFiles={10} maxFiles={10}
maxSizeMB={25} maxSizeMB={25}
metadata={metadata} metadata={metadata}
variant="public" variant="public"
className="mt-2" showPreview={true}
size="default"
/> />
{uploadedUrls.length > 0 && (
<p className="text-sm text-muted-foreground mt-2">
{uploadedUrls.length} photo(s) uploaded and ready to submit
</p>
)}
</div>
</div> </div>
<div className="flex gap-3"> <Separator />
<div className="space-y-4">
<Button <Button
onClick={handleSubmit} onClick={handleSubmit}
disabled={isSubmitting || uploadedUrls.length === 0 || !title.trim()} disabled={isSubmitting || !title.trim() || uploadedUrls.length === 0}
className="flex-1" className="w-full h-12 text-base font-medium photo-upload-trigger"
size="lg"
> >
{isSubmitting ? 'Submitting...' : 'Submit Photos'} {isSubmitting ? (
<div className="flex items-center gap-2">
<div className="w-4 h-4 border-2 border-primary-foreground/30 border-t-primary-foreground rounded-full animate-spin" />
Submitting Photos...
</div>
) : (
<div className="flex items-center gap-2">
<CheckCircle className="w-5 h-5" />
Submit {uploadedUrls.length} Photo{uploadedUrls.length !== 1 ? 's' : ''}
</div>
)}
</Button> </Button>
</div>
<p className="text-sm text-muted-foreground"> <div className="flex items-center justify-center gap-2 text-sm text-muted-foreground">
All photo submissions are reviewed before being published. Please ensure your photos <AlertCircle className="w-4 h-4" />
follow our community guidelines and are appropriate for all audiences. <span>Your submission will be reviewed and published within 24-48 hours</span>
</p>
</div> </div>
</div>
</CardContent>
</Card> </Card>
); );
} }

150
src/components/upload/UppyPhotoUpload.tsx
View File

@@ -7,9 +7,9 @@ import { DashboardModal } from '@uppy/react';
import { supabase } from '@/integrations/supabase/client'; import { supabase } from '@/integrations/supabase/client';
import { useToast } from '@/hooks/use-toast'; import { useToast } from '@/hooks/use-toast';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Upload, Image as ImageIcon } from 'lucide-react'; import { Badge } from '@/components/ui/badge';
import { Upload, X, Eye, Loader2 } from 'lucide-react';
// CSS imports removed to avoid build issues - using custom styling instead import { cn } from '@/lib/utils';
interface UppyPhotoUploadProps { interface UppyPhotoUploadProps {
onUploadComplete?: (urls: string[]) => void; onUploadComplete?: (urls: string[]) => void;
@@ -23,6 +23,8 @@ interface UppyPhotoUploadProps {
className?: string; className?: string;
children?: React.ReactNode; children?: React.ReactNode;
disabled?: boolean; disabled?: boolean;
showPreview?: boolean;
size?: 'default' | 'compact' | 'large';
} }
interface CloudflareResponse { interface CloudflareResponse {
@@ -55,9 +57,13 @@ export function UppyPhotoUpload({
className = '', className = '',
children, children,
disabled = false, disabled = false,
showPreview = true,
size = 'default',
}: UppyPhotoUploadProps) { }: UppyPhotoUploadProps) {
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
const [uploadedImages, setUploadedImages] = useState<string[]>([]); const [uploadedImages, setUploadedImages] = useState<string[]>([]);
const [isUploading, setIsUploading] = useState(false);
const [uploadProgress, setUploadProgress] = useState(0);
const uppyRef = useRef<Uppy | null>(null); const uppyRef = useRef<Uppy | null>(null);
const { toast } = useToast(); const { toast } = useToast();
@@ -81,11 +87,18 @@ export function UppyPhotoUpload({
showRemoveButtonAfterComplete: true, showRemoveButtonAfterComplete: true,
showSelectedFiles: true, showSelectedFiles: true,
note: `Images up to ${maxSizeMB}MB, max ${maxFiles} files`, note: `Images up to ${maxSizeMB}MB, max ${maxFiles} files`,
theme: 'auto',
closeAfterFinish: true,
}); });
// Add Image Editor plugin // Add Image Editor plugin
uppy.use(ImageEditor, { uppy.use(ImageEditor, {
quality: 0.8, quality: 0.8,
cropperOptions: {
viewMode: 1,
background: false,
autoCropArea: 1,
},
}); });
// Add XHR Upload plugin (configured per file in beforeUpload) // Add XHR Upload plugin (configured per file in beforeUpload)
@@ -103,6 +116,8 @@ export function UppyPhotoUpload({
return; return;
} }
setIsUploading(true);
setUploadProgress(0);
onUploadStart?.(); onUploadStart?.();
// Process each file to get upload URL // Process each file to get upload URL
@@ -144,6 +159,11 @@ export function UppyPhotoUpload({
} }
}); });
// Handle upload progress
uppy.on('progress', (progress) => {
setUploadProgress(Math.round(progress));
});
// Handle upload success // Handle upload success
uppy.on('upload-success', async (file, response) => { uppy.on('upload-success', async (file, response) => {
try { try {
@@ -187,6 +207,7 @@ export function UppyPhotoUpload({
// Handle upload error // Handle upload error
uppy.on('upload-error', (file, error, response) => { uppy.on('upload-error', (file, error, response) => {
console.error('Upload error:', error); console.error('Upload error:', error);
setIsUploading(false);
// Check if it's an expired URL error and retry // Check if it's an expired URL error and retry
if (error.message?.includes('expired') || response?.status === 400) { if (error.message?.includes('expired') || response?.status === 400) {
@@ -219,6 +240,9 @@ export function UppyPhotoUpload({
// Handle upload complete // Handle upload complete
uppy.on('complete', (result) => { uppy.on('complete', (result) => {
setIsUploading(false);
setUploadProgress(0);
if (result.successful.length > 0) { if (result.successful.length > 0) {
onUploadComplete?.(uploadedImages); onUploadComplete?.(uploadedImages);
toast({ toast({
@@ -234,7 +258,15 @@ export function UppyPhotoUpload({
return () => { return () => {
uppy.destroy(); uppy.destroy();
}; };
}, [maxFiles, maxSizeMB, allowedFileTypes, metadata, variant, disabled, onUploadStart, onUploadComplete, onUploadError, toast, uploadedImages]); }, [maxFiles, maxSizeMB, allowedFileTypes, metadata, variant, disabled, onUploadStart, onUploadComplete, onUploadError, toast, uploadedImages, size]);
const removeImage = (index: number) => {
const newUrls = uploadedImages.filter((_, i) => i !== index);
setUploadedImages(newUrls);
if (onUploadComplete) {
onUploadComplete(newUrls);
}
};
const handleOpenModal = () => { const handleOpenModal = () => {
if (!disabled) { if (!disabled) {
@@ -242,25 +274,100 @@ export function UppyPhotoUpload({
} }
}; };
const getSizeClasses = () => {
switch (size) {
case 'compact':
return 'px-4 py-2 text-sm';
case 'large':
return 'px-8 py-4 text-lg';
default:
return 'px-6 py-3';
}
};
const renderUploadTrigger = () => {
if (children) {
return ( return (
<>
<div className={className}>
{children ? (
<div onClick={handleOpenModal} className="cursor-pointer"> <div onClick={handleOpenModal} className="cursor-pointer">
{children} {children}
</div> </div>
) : ( );
}
const baseClasses = "photo-upload-trigger transition-all duration-300 flex items-center justify-center gap-2";
const sizeClasses = getSizeClasses();
const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:scale-105';
return (
<Button <Button
onClick={handleOpenModal} onClick={handleOpenModal}
disabled={disabled} disabled={disabled || isUploading}
variant="outline" className={cn(baseClasses, sizeClasses, disabledClasses)}
className="w-full" size={size === 'compact' ? 'sm' : size === 'large' ? 'lg' : 'default'}
> >
<Upload className="mr-2 h-4 w-4" /> {isUploading ? (
Upload Photos <>
</Button> <Loader2 className="w-4 h-4 animate-spin" />
Uploading... {uploadProgress}%
</>
) : (
<>
<Upload className="w-4 h-4" />
{size === 'compact' ? 'Upload' : 'Upload Photos'}
</>
)} )}
</Button>
);
};
const renderPreview = () => {
if (!showPreview || uploadedImages.length === 0) return null;
return (
<div className="mt-4">
<div className="flex items-center justify-between mb-3">
<span className="text-sm font-medium text-muted-foreground">
Uploaded Photos ({uploadedImages.length})
</span>
<Badge variant="secondary" className="text-xs">
{uploadedImages.length}/{maxFiles}
</Badge>
</div> </div>
<div className="upload-preview-grid">
{uploadedImages.map((url, index) => (
<div key={index} className="upload-preview-item group">
<img
src={url}
alt={`Uploaded ${index + 1}`}
className="w-full h-full object-cover"
/>
<div className="upload-preview-overlay">
<button
onClick={() => removeImage(index)}
className="p-1 bg-destructive text-destructive-foreground rounded-full hover:bg-destructive/90 transition-colors mr-2"
title="Remove image"
>
<X className="w-3 h-3" />
</button>
<button
onClick={() => window.open(url, '_blank')}
className="p-1 bg-primary text-primary-foreground rounded-full hover:bg-primary/90 transition-colors"
title="View full size"
>
<Eye className="w-3 h-3" />
</button>
</div>
</div>
))}
</div>
</div>
);
};
return (
<div className={cn("space-y-4", className)}>
{renderUploadTrigger()}
{renderPreview()}
{uppyRef.current && ( {uppyRef.current && (
<DashboardModal <DashboardModal
@@ -272,21 +379,6 @@ export function UppyPhotoUpload({
browserBackButtonClose browserBackButtonClose
/> />
)} )}
{uploadedImages.length > 0 && (
<div className="mt-4 grid grid-cols-2 sm:grid-cols-3 gap-2">
{uploadedImages.map((url, index) => (
<div key={index} className="relative aspect-square rounded-lg overflow-hidden bg-muted">
<img
src={url}
alt={`Uploaded ${index + 1}`}
className="w-full h-full object-cover"
/>
<div className="absolute inset-0 bg-black/0 hover:bg-black/10 transition-colors" />
</div> </div>
))}
</div>
)}
</>
); );
} }

200
src/index.css
View File

@@ -119,3 +119,203 @@ All colors MUST be HSL.
@apply bg-background text-foreground; @apply bg-background text-foreground;
} }
} }
/* Custom Uppy Photo Upload Styling */
@layer components {
/* Uppy Dashboard customization to match theme */
.uppy-Dashboard {
@apply bg-card text-card-foreground border border-border rounded-lg;
box-shadow: var(--shadow-card);
}
.uppy-Dashboard-inner {
@apply bg-transparent;
}
.uppy-Dashboard-dropFilesHereHint {
@apply text-muted-foreground;
}
.uppy-Dashboard-browse {
@apply text-primary hover:text-primary-glow transition-colors duration-300;
}
.uppy-Dashboard-AddFiles {
@apply bg-gradient-to-r from-primary to-secondary text-primary-foreground;
background: var(--gradient-primary);
border: none;
border-radius: var(--radius);
transition: var(--transition-smooth);
}
.uppy-Dashboard-AddFiles:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-glow);
}
.uppy-Dashboard-AddFiles-info {
@apply text-primary-foreground;
}
.uppy-Dashboard-Item {
@apply bg-card border border-border rounded-lg;
}
.uppy-Dashboard-Item-preview {
@apply rounded-lg overflow-hidden;
}
.uppy-Dashboard-Item-progress {
@apply bg-muted;
}
.uppy-Dashboard-Item-progressIndicator {
@apply bg-primary;
}
.uppy-Dashboard-Item-action--remove {
@apply text-destructive hover:text-destructive-foreground hover:bg-destructive;
transition: var(--transition-smooth);
}
.uppy-Dashboard-Item-action--edit {
@apply text-accent hover:text-accent-foreground hover:bg-accent;
transition: var(--transition-smooth);
}
/* Modal overlay styling */
.uppy-Dashboard--modal {
z-index: 9999;
}
.uppy-Dashboard--modal .uppy-Dashboard-overlay {
@apply bg-background/80 backdrop-blur-sm;
}
.uppy-Dashboard--modal .uppy-Dashboard-inner {
@apply bg-card border border-border rounded-xl;
box-shadow: var(--shadow-intense);
max-width: 90vw;
max-height: 90vh;
}
/* Status bar customization */
.uppy-StatusBar {
@apply bg-muted border-t border-border;
}
.uppy-StatusBar-progress {
@apply bg-primary;
}
.uppy-StatusBar-actions {
@apply gap-2;
}
.uppy-StatusBar-actionBtn {
@apply bg-primary text-primary-foreground hover:bg-primary/90;
border: none;
border-radius: var(--radius);
transition: var(--transition-smooth);
}
.uppy-StatusBar-actionBtn:hover {
transform: translateY(-1px);
}
/* Image editor customization */
.uppy-ImageEditor {
@apply bg-card text-card-foreground;
}
.uppy-ImageEditor-controls {
@apply bg-muted border-t border-border;
}
.uppy-ImageEditor-controls button {
@apply text-foreground hover:text-primary;
transition: var(--transition-smooth);
}
/* Custom upload trigger styling */
.photo-upload-trigger {
@apply relative overflow-hidden;
background: var(--gradient-primary);
transition: var(--transition-smooth);
}
.photo-upload-trigger:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-glow);
}
.photo-upload-trigger::before {
content: '';
@apply absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent;
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.photo-upload-trigger:hover::before {
transform: translateX(100%);
}
/* Upload preview grid */
.upload-preview-grid {
@apply grid gap-4;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.upload-preview-item {
@apply relative aspect-square rounded-lg overflow-hidden border border-border;
background: var(--gradient-card);
transition: var(--transition-smooth);
}
.upload-preview-item:hover {
transform: scale(1.05);
box-shadow: var(--shadow-card);
}
.upload-preview-item img {
@apply w-full h-full object-cover;
}
.upload-preview-overlay {
@apply absolute inset-0 bg-black/40 opacity-0 hover:opacity-100 flex items-center justify-center;
transition: var(--transition-smooth);
}
/* Loading states */
.upload-loading {
@apply relative;
}
.upload-loading::after {
content: '';
@apply absolute inset-0 bg-primary/10 rounded-lg;
animation: pulse 2s infinite;
}
/* Mobile optimizations */
@media (max-width: 640px) {
.uppy-Dashboard--modal .uppy-Dashboard-inner {
@apply m-4 max-h-[80vh];
}
.upload-preview-grid {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
@apply gap-2;
}
}
/* Dark mode specific adjustments */
.dark .uppy-Dashboard {
border-color: hsl(var(--border));
}
.dark .uppy-Dashboard-Item {
background-color: hsl(var(--card));
border-color: hsl(var(--border));
}
}