first commit

client/src/pages/CatPage.tsx

@@ -0,0 +1,161 @@
+import { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useCat, useDeleteCat } from '@/hooks/useCats';
+import { useLikeStatus, useLikeCat, useUnlikeCat } from '@/hooks/useLikes';
+import { useAuth } from '@/hooks/useAuth';
+import { useToast } from '@/components/Toast';
+import { Button } from '@/components/ui/button';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Heart, ArrowLeft, Trash2, MessageCircle } from 'lucide-react';
+
+export default function CatPage() {
+  const { id } = useParams<{ id: string }>();
+  const catId = parseInt(id!);
+  const navigate = useNavigate();
+  const { user, updateUser } = useAuth();
+  const { toast } = useToast();
+
+  const { data, isLoading, isError } = useCat(catId);
+  const { data: likeData, refetch: refetchLike } = useLikeStatus(catId);
+  const likeMutation = useLikeCat(catId);
+  const unlikeMutation = useUnlikeCat(catId);
+  const deleteMutation = useDeleteCat();
+
+  const [liked, setLiked] = useState(false);
+  const [animating, setAnimating] = useState(false);
+
+  const cat = data?.cat;
+  const isOwner = cat && user && cat.user_id === user.id;
+  const isLiked = likeData?.liked ?? false;
+
+  useEffect(() => { setLiked(isLiked); }, [isLiked]);
+
+  const handleLike = async () => {
+    if (isOwner || !user || !cat) return;
+    setAnimating(true);
+    setTimeout(() => setAnimating(false), 400);
+
+    if (isLiked) {
+      setLiked(false);
+      try {
+        const res = await unlikeMutation.mutateAsync();
+        if (res.ownerPoints !== undefined && cat.user_id === user.id) {
+          updateUser({ ...user, points: res.ownerPoints });
+        }
+        refetchLike();
+      } catch { setLiked(true); }
+    } else {
+      setLiked(true);
+      toast('Liked', 'like');
+      try {
+        await likeMutation.mutateAsync();
+        refetchLike();
+      } catch { setLiked(false); }
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!isOwner || !cat) return;
+    try {
+      await deleteMutation.mutateAsync(cat.id);
+      toast('Deleted', 'success');
+      navigate('/feed');
+    } catch {
+      toast('Failed to delete', 'error');
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="mx-auto max-w-2xl px-4 py-8">
+        <Skeleton className="mb-4 h-5 w-20" />
+        <Skeleton className="aspect-[4/3] w-full" />
+        <div className="mt-4 space-y-2">
+          <Skeleton className="h-5 w-32" />
+          <Skeleton className="h-4 w-48" />
+        </div>
+      </div>
+    );
+  }
+
+  if (isError || !cat) {
+    return (
+      <div className="flex flex-col items-center justify-center py-20">
+        <p className="text-muted-foreground">Cat not found</p>
+        <Button variant="outline" className="mt-4" onClick={() => navigate('/feed')}>Go to feed</Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-2xl px-4 py-8 animate-fade-in">
+      <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>
+
+      {/* Image */}
+      <div className="bg-muted mb-5">
+        <img src={cat.image_url} alt={cat.caption || 'Cat photo'} className="w-full max-h-[60vh] object-contain mx-auto" />
+      </div>
+
+      {/* Info */}
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2.5">
+            <Avatar className="h-7 w-7">
+              <AvatarFallback className="text-[10px] bg-foreground text-background">
+                {cat.username.charAt(0).toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+            <span className="text-sm font-medium">@{cat.username}</span>
+          </div>
+          {isOwner && (
+            <button onClick={handleDelete} className="text-muted-foreground hover:text-destructive transition-colors">
+              <Trash2 className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+
+        <div className="flex items-center gap-4">
+          <button
+            onClick={handleLike}
+            disabled={isOwner || !user}
+            className={`like-btn ${animating ? 'heart-animate' : ''}`}
+          >
+            <Heart
+              className={`h-5 w-5 ${isLiked ? 'fill-[#e00] text-[#e00]' : 'text-foreground'}`}
+              strokeWidth={isLiked ? 2 : 1.5}
+            />
+          </button>
+          <button className="hover:text-muted-foreground transition-colors">
+            <MessageCircle className="h-5 w-5" strokeWidth={1.5} />
+          </button>
+        </div>
+
+        <span className="text-sm font-semibold block">{cat.likes_count.toLocaleString()} likes</span>
+
+        {cat.caption && (
+          <p className="text-sm">
+            <span className="font-semibold mr-1.5">@{cat.username}</span>
+            {cat.caption}
+          </p>
+        )}
+
+        <p className="text-xs text-muted-foreground">
+          {new Date(cat.created_at).toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+          })}
+        </p>
+
+        <p className="text-xs text-muted-foreground">🏆 {cat.user_points} points</p>
+      </div>
+    </div>
+  );
+}

client/src/pages/FeedPage.tsx

@@ -0,0 +1,109 @@
+import { useState } from 'react';
+import { useCats } from '@/hooks/useCats';
+import { useAuth } from '@/hooks/useAuth';
+import CatCard from '@/components/CatCard';
+import FeedSidebar from '@/components/FeedSidebar';
+import StoryCircle from '@/components/StoryCircle';
+import CatModal from '@/components/CatModal';
+import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+function FeedSkeleton() {
+  return (
+    <div className="space-y-6">
+      {Array.from({ length: 2 }).map((_, i) => (
+        <div key={i}>
+          <div className="flex items-center gap-2.5 mb-3">
+            <Skeleton className="h-7 w-7 rounded-full" />
+            <Skeleton className="h-4 w-20" />
+          </div>
+          <Skeleton className="aspect-[4/3] w-full" />
+          <div className="mt-3 space-y-1.5">
+            <Skeleton className="h-4 w-16" />
+            <Skeleton className="h-4 w-48" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default function FeedPage() {
+  const [page, setPage] = useState(1);
+  const [modalCatId, setModalCatId] = useState<number | null>(null);
+  const { data, isLoading, isError } = useCats(page);
+  const { user } = useAuth();
+
+  return (
+    <div className="mx-auto max-w-5xl px-4 py-8">
+      <div className="flex gap-12">
+        {/* Main feed */}
+        <div className="flex-1 max-w-[520px] mx-auto lg:mx-0">
+          {/* Stories */}
+          <div className="mb-6 pb-6 border-b overflow-hidden">
+            <div className="flex gap-4 overflow-x-auto scrollbar-none">
+              {user && <StoryCircle user={user} />}
+              {data?.cats
+                .filter((c, i, arr) => arr.findIndex((x) => x.user_id === c.user_id) === i)
+                .slice(0, 7)
+                .map((c) => (
+                  <StoryCircle key={c.user_id} user={{ id: c.user_id, username: c.username, points: c.user_points }} />
+                ))}
+            </div>
+          </div>
+
+          {isLoading && <FeedSkeleton />}
+
+          {isError && (
+            <div className="flex flex-col items-center justify-center py-20 text-center">
+              <p className="text-muted-foreground">Failed to load cats</p>
+              <Button variant="outline" className="mt-4" onClick={() => setPage(1)}>Try again</Button>
+            </div>
+          )}
+
+          {data && data.cats.length === 0 && (
+            <div className="flex flex-col items-center justify-center py-20 text-center">
+              <p className="text-2xl font-semibold mb-1">No cats yet</p>
+              <p className="text-sm text-muted-foreground mb-4">Be the first to upload a cat photo</p>
+              <Button onClick={() => window.location.href = '/upload'}>Upload</Button>
+            </div>
+          )}
+
+          {data && data.cats.length > 0 && (
+            <>
+              {data.cats.map((cat) => (
+                <CatCard key={cat.id} cat={cat} onOpen={setModalCatId} />
+              ))}
+
+              {data.totalPages > 1 && (
+                <div className="flex items-center justify-center gap-4 mt-8 pb-8">
+                  <Button variant="outline" size="sm" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page === 1}>
+                    <ChevronLeft className="h-4 w-4" />
+                    Previous
+                  </Button>
+                  <span className="text-sm text-muted-foreground">{data.page} / {data.totalPages}</span>
+                  <Button variant="outline" size="sm" onClick={() => setPage((p) => p + 1)} disabled={page >= data.totalPages}>
+                    Next
+                    <ChevronRight className="h-4 w-4" />
+                  </Button>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+
+        {/* Sidebar */}
+        <div className="hidden lg:block w-[280px] shrink-0">
+          <div className="sticky top-20">
+            <FeedSidebar />
+          </div>
+        </div>
+      </div>
+
+      {modalCatId && (
+        <CatModal catId={modalCatId} onClose={() => setModalCatId(null)} />
+      )}
+    </div>
+  );
+}

client/src/pages/LoginPage.tsx

@@ -0,0 +1,69 @@
+import { useState, FormEvent } from 'react';
+import { Link, Navigate } from 'react-router-dom';
+import { useAuth } from '@/hooks/useAuth';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+
+export default function LoginPage() {
+  const { user, login } = useAuth();
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  if (user) return <Navigate to="/feed" replace />;
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+    try {
+      await login(username, password);
+    } catch (err: any) {
+      setError(err.response?.data?.error || 'Login failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center p-4">
+      <div className="w-full max-w-sm animate-fade-in">
+        <div className="text-center mb-8">
+          <h1 className="text-2xl font-semibold tracking-tight">Catstagram</h1>
+          <p className="text-sm text-muted-foreground mt-1">Sign in to your account</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-3">
+          <Input
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            placeholder="Username"
+            required
+            autoFocus
+            className="h-10 text-sm"
+          />
+          <Input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="Password"
+            required
+            className="h-10 text-sm"
+          />
+          {error && <p className="text-sm text-destructive">{error}</p>}
+          <Button type="submit" className="w-full h-10" disabled={loading}>
+            {loading ? 'Signing in...' : 'Sign in'}
+          </Button>
+        </form>
+
+        <p className="mt-6 text-center text-sm text-muted-foreground">
+          No account?{' '}
+          <Link to="/register" className="font-medium underline-offset-4 hover:underline">
+            Register
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

client/src/pages/ProfilePage.tsx

@@ -0,0 +1,152 @@
+import { useState } from 'react';
+import { useParams, Link, useNavigate } from 'react-router-dom';
+import { useAuth } from '@/hooks/useAuth';
+import { useUserCats } from '@/hooks/useCats';
+import CatModal from '@/components/CatModal';
+import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Heart, Plus, ArrowLeft } from 'lucide-react';
+
+export default function ProfilePage() {
+  const { id: paramId } = useParams<{ id?: string }>();
+  const navigate = useNavigate();
+  const { user: me } = useAuth();
+  const [modalCatId, setModalCatId] = useState<number | null>(null);
+
+  const profileUserId = paramId ? parseInt(paramId) : me?.id;
+  const isMe = !paramId || (me && profileUserId === me.id);
+
+  const { data, isLoading } = useUserCats(profileUserId ?? 0);
+
+  const profileUser = isMe ? me : data?.cats?.[0]
+    ? { id: data.cats[0].user_id, username: data.cats[0].username, points: data.cats[0].user_points }
+    : null;
+
+  if (isLoading) {
+    return (
+      <div className="mx-auto max-w-4xl px-4 py-10">
+        <div className="flex items-center gap-6 mb-10">
+          <Skeleton className="h-16 w-16 rounded-full" />
+          <div className="space-y-2">
+            <Skeleton className="h-6 w-32" />
+            <Skeleton className="h-4 w-48" />
+          </div>
+        </div>
+        <div className="grid grid-cols-3 gap-0.5">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <Skeleton key={i} className="aspect-square" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (!profileUser && !isMe) {
+    return (
+      <div className="flex flex-col items-center justify-center py-20">
+        <p className="text-muted-foreground">User not found</p>
+        <Button variant="outline" className="mt-4" onClick={() => navigate('/feed')}>Go to feed</Button>
+      </div>
+    );
+  }
+
+  const cats = data?.cats ?? [];
+  const initials = profileUser?.username?.charAt(0).toUpperCase() || '?';
+  const totalLikes = cats.reduce((sum, c) => sum + c.likes_count, 0);
+
+  return (
+    <div className="mx-auto max-w-4xl px-4 py-10">
+      {!isMe && (
+        <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>
+      )}
+
+      {/* Profile header */}
+      <div className="flex items-start gap-8 mb-10">
+        <Avatar className="h-16 w-16 shrink-0">
+          <AvatarFallback className="bg-foreground text-background text-lg font-medium">
+            {initials}
+          </AvatarFallback>
+        </Avatar>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-3 mb-4">
+            <h1 className="text-xl font-medium">@{profileUser?.username}</h1>
+            {/* Edit profile button - only for own profile, navigates to profile settings or does nothing */}
+            {isMe && (
+              <Button variant="outline" size="sm" className="text-xs h-7 rounded-sm">
+                Edit profile
+              </Button>
+            )}
+          </div>
+
+          <div className="flex items-center gap-6 text-sm mb-4">
+            <div><span className="font-semibold">{cats.length}</span> <span className="text-muted-foreground">posts</span></div>
+            <div><span className="font-semibold">{totalLikes}</span> <span className="text-muted-foreground">likes</span></div>
+            <div><span className="font-semibold">{profileUser?.points ?? 0}</span> <span className="text-muted-foreground">pts</span></div>
+          </div>
+
+          {isMe && (
+            <Link to="/upload">
+              <Button size="sm" className="text-xs h-7 rounded-sm gap-1">
+                <Plus className="h-3.5 w-3.5" />
+                New post
+              </Button>
+            </Link>
+          )}
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="flex items-center gap-6 border-t pt-4 mb-4">
+        <button className="text-xs font-semibold tracking-wider uppercase text-foreground">Posts</button>
+        <button className="text-xs font-semibold tracking-wider uppercase text-muted-foreground hover:text-foreground transition-colors">Saved</button>
+        <button className="text-xs font-semibold tracking-wider uppercase text-muted-foreground hover:text-foreground transition-colors">Liked</button>
+      </div>
+
+      {/* Grid */}
+      {cats.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-20 text-center border-t">
+          <p className="text-base font-medium mb-1">No cats yet</p>
+          <p className="text-sm text-muted-foreground mb-4">
+            {isMe ? 'Share your first cat photo' : 'This user has no cats yet'}
+          </p>
+          {isMe && (
+            <Link to="/upload">
+              <Button size="sm">Upload</Button>
+            </Link>
+          )}
+        </div>
+      ) : (
+        <div className="grid grid-cols-3 gap-0.5">
+          {cats.map((cat) => (
+            <button
+              key={cat.id}
+              onClick={() => setModalCatId(cat.id)}
+              className="group relative aspect-square overflow-hidden bg-muted"
+            >
+              <img
+                src={cat.image_url}
+                alt={cat.caption || 'Cat photo'}
+                className="h-full w-full object-cover transition-transform group-hover:scale-105"
+                loading="lazy"
+              />
+              <div className="absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity">
+                <div className="flex items-center gap-1 text-white text-sm font-medium">
+                  <Heart className="h-4 w-4 fill-white" strokeWidth={2} />
+                  <span>{cat.likes_count}</span>
+                </div>
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {modalCatId && (
+        <CatModal catId={modalCatId} onClose={() => setModalCatId(null)} />
+      )}
+    </div>
+  );
+}

client/src/pages/RegisterPage.tsx

@@ -0,0 +1,86 @@
+import { useState, FormEvent } from 'react';
+import { Link, Navigate } from 'react-router-dom';
+import { useAuth } from '@/hooks/useAuth';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+
+export default function RegisterPage() {
+  const { user, register } = useAuth();
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirm, setConfirm] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  if (user) return <Navigate to="/feed" replace />;
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    if (password !== confirm) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      await register(username, password);
+    } catch (err: any) {
+      setError(err.response?.data?.error || 'Registration failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center p-4">
+      <div className="w-full max-w-sm animate-fade-in">
+        <div className="text-center mb-8">
+          <h1 className="text-2xl font-semibold tracking-tight">Catstagram</h1>
+          <p className="text-sm text-muted-foreground mt-1">Create your account</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-3">
+          <Input
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            placeholder="Username"
+            minLength={3}
+            required
+            autoFocus
+            className="h-10 text-sm"
+          />
+          <Input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="Password"
+            minLength={4}
+            required
+            className="h-10 text-sm"
+          />
+          <Input
+            type="password"
+            value={confirm}
+            onChange={(e) => setConfirm(e.target.value)}
+            placeholder="Confirm password"
+            required
+            className="h-10 text-sm"
+          />
+          {error && <p className="text-sm text-destructive">{error}</p>}
+          <Button type="submit" className="w-full h-10" disabled={loading}>
+            {loading ? 'Creating account...' : 'Create account'}
+          </Button>
+        </form>
+
+        <p className="mt-6 text-center text-sm text-muted-foreground">
+          Already have an account?{' '}
+          <Link to="/login" className="font-medium underline-offset-4 hover:underline">
+            Sign in
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

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>
+  );
+}