first commit

client/src/pages/UploadPage.tsx

@@ -0,0 +1,139 @@
+import { useState, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useDropzone } from 'react-dropzone';
+import { useUploadCat } from '@/hooks/useCats';
+import { useAuth } from '@/hooks/useAuth';
+import { useToast } from '@/components/Toast';
+import { Button } from '@/components/ui/button';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { ArrowLeft, Upload, X } from 'lucide-react';
+
+export default function UploadPage() {
+  const navigate = useNavigate();
+  const { user, updateUser } = useAuth();
+  const [file, setFile] = useState<File | null>(null);
+  const [preview, setPreview] = useState<string | null>(null);
+  const [caption, setCaption] = useState('');
+  const uploadMutation = useUploadCat();
+  const { toast } = useToast();
+
+  const onDrop = useCallback((accepted: File[]) => {
+    const f = accepted[0];
+    if (f) {
+      setFile(f);
+      if (preview) URL.revokeObjectURL(preview);
+      setPreview(URL.createObjectURL(f));
+    }
+  }, [preview]);
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: { 'image/*': ['.jpg', '.jpeg', '.png', '.gif', '.webp'] },
+    maxFiles: 1,
+    maxSize: 10 * 1024 * 1024,
+  });
+
+  const handleUpload = async () => {
+    if (!file) return;
+
+    const fd = new FormData();
+    fd.append('image', file);
+    fd.append('caption', caption);
+
+    try {
+      const result = await uploadMutation.mutateAsync(fd);
+      if (user) updateUser({ ...user, points: (user.points || 0) + 10 });
+      toast('+10 points', 'success');
+      navigate(`/cat/${result.cat.id}`);
+    } catch {
+      toast('Upload failed', 'error');
+    }
+  };
+
+  const clearFile = () => {
+    setFile(null);
+    if (preview) URL.revokeObjectURL(preview);
+    setPreview(null);
+  };
+
+  return (
+    <div className="mx-auto max-w-xl px-4 py-8">
+      <button
+        onClick={() => navigate(-1)}
+        className="mb-6 flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
+      >
+        <ArrowLeft className="h-4 w-4" />
+        Back
+      </button>
+
+      <h1 className="text-xl font-medium mb-6">New post</h1>
+
+      {!preview ? (
+        <div
+          {...getRootProps()}
+          className={`border border-dashed p-16 text-center cursor-pointer transition-colors ${
+            isDragActive ? 'bg-secondary border-foreground' : 'hover:bg-secondary'
+          }`}
+        >
+          <input {...getInputProps()} />
+          <div className="mb-4">
+            <Upload className="mx-auto h-6 w-6 text-muted-foreground" strokeWidth={1.5} />
+          </div>
+          <p className="text-sm font-medium mb-1">
+            {isDragActive ? 'Drop your cat here' : 'Drag photo here'}
+          </p>
+          <p className="text-xs text-muted-foreground mb-4">or click to browse</p>
+          <Button variant="outline" size="sm">Select file</Button>
+          <p className="mt-3 text-xs text-muted-foreground">JPG, PNG, GIF, WebP · Max 10MB</p>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          <div className="relative bg-muted">
+            <img src={preview} alt="Preview" className="max-h-96 w-full object-contain" />
+            <button
+              onClick={clearFile}
+              className="absolute right-2 top-2 flex h-7 w-7 items-center justify-center bg-background border"
+            >
+              <X className="h-3.5 w-3.5" />
+            </button>
+          </div>
+
+          <div className="flex items-start gap-3">
+            <Avatar className="h-7 w-7 shrink-0 mt-0.5">
+              <AvatarFallback className="text-[10px] bg-foreground text-background">
+                {user?.username?.charAt(0).toUpperCase() || '?'}
+              </AvatarFallback>
+            </Avatar>
+            <div className="flex-1">
+              <p className="text-xs font-medium mb-1">{user?.username}</p>
+              <textarea
+                placeholder="Write a caption..."
+                value={caption}
+                onChange={(e) => setCaption(e.target.value)}
+                maxLength={200}
+                rows={2}
+                className="w-full resize-none text-sm bg-transparent outline-none placeholder:text-muted-foreground border-b pb-1"
+              />
+              <p className="text-right text-[11px] text-muted-foreground mt-1">{caption.length}/200</p>
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between pt-2">
+            <span className="text-xs text-muted-foreground">+10 points</span>
+            <Button
+              onClick={handleUpload}
+              disabled={uploadMutation.isPending}
+              size="sm"
+            >
+              {uploadMutation.isPending ? 'Sharing...' : 'Share'}
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {uploadMutation.isError && (
+        <p className="mt-3 text-sm text-destructive text-center">Failed to upload. Try again.</p>
+      )}
+    </div>
+  );
+}