build 1

frontend/src/components/GalleryGrid.tsx

@@ -0,0 +1,31 @@
+import type { Meme } from '../api/client';
+import { MemeCard } from './MemeCard';
+
+interface Props {
+  memes: Meme[];
+  onOpen: (meme: Meme) => void;
+  onShare: (meme: Meme) => void;
+}
+
+export function GalleryGrid({ memes, onOpen, onShare }: Props) {
+  if (memes.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-32 text-center">
+        <div className="text-6xl mb-4">🎭</div>
+        <h2 className="text-xl font-semibold text-zinc-400 mb-2">No memes yet</h2>
+        <p className="text-zinc-600 text-sm">Upload your first meme to get started.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="columns-1 sm:columns-2 lg:columns-3 xl:columns-4 gap-3"
+      style={{ columnFill: 'balance' }}
+    >
+      {memes.map((meme) => (
+        <MemeCard key={meme.id} meme={meme} onOpen={onOpen} onShare={onShare} />
+      ))}
+    </div>
+  );
+}

frontend/src/components/MemeCard.tsx

@@ -0,0 +1,104 @@
+import { useState } from 'react';
+import { Share2, Eye, Layers } from 'lucide-react';
+import type { Meme } from '../api/client';
+import { api } from '../api/client';
+
+interface Props {
+  meme: Meme;
+  onOpen: (meme: Meme) => void;
+  onShare: (meme: Meme) => void;
+}
+
+export function MemeCard({ meme, onOpen, onShare }: Props) {
+  const [loaded, setLoaded] = useState(false);
+  const [hovered, setHovered] = useState(false);
+
+  return (
+    <div
+      className="relative group break-inside-avoid mb-3 rounded-xl overflow-hidden bg-zinc-900 cursor-pointer shadow-lg hover:shadow-accent/20 hover:shadow-xl transition-shadow duration-300"
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      onClick={() => onOpen(meme)}
+    >
+      {/* Image */}
+      <img
+        src={api.imageUrl(meme.file_path)}
+        alt={meme.title}
+        loading="lazy"
+        onLoad={() => setLoaded(true)}
+        className={`w-full block transition-all duration-500 ${
+          loaded ? 'opacity-100' : 'opacity-0'
+        } ${hovered ? 'scale-[1.02]' : 'scale-100'} transition-transform duration-300`}
+      />
+
+      {/* Skeleton while loading */}
+      {!loaded && (
+        <div
+          className="absolute inset-0 bg-zinc-800 animate-pulse"
+          style={{ paddingTop: `${(meme.height / meme.width) * 100}%` }}
+        />
+      )}
+
+      {/* Hover overlay */}
+      <div
+        className={`absolute inset-0 bg-gradient-to-t from-zinc-950/90 via-zinc-950/40 to-transparent transition-opacity duration-200 ${
+          hovered ? 'opacity-100' : 'opacity-0'
+        }`}
+      >
+        <div className="absolute bottom-0 left-0 right-0 p-3">
+          <p className="text-sm font-semibold text-white truncate mb-2">{meme.title}</p>
+
+          {/* Tags */}
+          {meme.tags.length > 0 && (
+            <div className="flex flex-wrap gap-1 mb-2">
+              {meme.tags.slice(0, 3).map((tag) => (
+                <span
+                  key={tag}
+                  className="text-xs px-1.5 py-0.5 rounded bg-accent/30 text-purple-300"
+                >
+                  {tag}
+                </span>
+              ))}
+              {meme.tags.length > 3 && (
+                <span className="text-xs text-zinc-400">+{meme.tags.length - 3}</span>
+              )}
+            </div>
+          )}
+
+          <div className="flex gap-2">
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                onOpen(meme);
+              }}
+              className="flex items-center gap-1 text-xs px-2 py-1 rounded-lg bg-white/10 hover:bg-white/20 text-white transition-colors"
+            >
+              <Eye size={12} />
+              View
+            </button>
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                onShare(meme);
+              }}
+              className="flex items-center gap-1 text-xs px-2 py-1 rounded-lg bg-accent/30 hover:bg-accent/50 text-purple-200 transition-colors"
+            >
+              <Share2 size={12} />
+              Share
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Child indicator */}
+      {/* (shown from parent detail) — not needed on card itself */}
+
+      {/* Dimensions badge */}
+      <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
+        <span className="text-xs px-1.5 py-0.5 rounded bg-zinc-900/80 text-zinc-400">
+          {meme.width}×{meme.height}
+        </span>
+      </div>
+    </div>
+  );
+}

frontend/src/components/MemeDetail.tsx

@@ -0,0 +1,278 @@
+import { useState } from 'react';
+import { X, Minimize2, Trash2, Edit2, Check, Layers } from 'lucide-react';
+import { useMeme, useDeleteMeme, useUpdateMeme } from '../hooks/useMemes';
+import { SharePanel } from './SharePanel';
+import { RescaleModal } from './RescaleModal';
+import { api, type Meme } from '../api/client';
+
+interface Props {
+  memeId: string;
+  onClose: () => void;
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+
+function formatDate(iso: string): string {
+  return new Date(iso).toLocaleDateString('en-US', {
+    year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit',
+  });
+}
+
+export function MemeDetail({ memeId, onClose }: Props) {
+  const { data, isLoading, refetch } = useMeme(memeId);
+  const deleteMeme = useDeleteMeme();
+  const updateMeme = useUpdateMeme();
+
+  const [editing, setEditing] = useState(false);
+  const [editTitle, setEditTitle] = useState('');
+  const [editDesc, setEditDesc] = useState('');
+  const [editTags, setEditTags] = useState('');
+  const [showRescale, setShowRescale] = useState(false);
+  const [activeChild, setActiveChild] = useState<Meme | null>(null);
+
+  const meme = data;
+  const displayMeme = activeChild ?? meme;
+
+  function startEdit() {
+    if (!meme) return;
+    setEditTitle(meme.title);
+    setEditDesc(meme.description ?? '');
+    setEditTags(meme.tags.join(', '));
+    setEditing(true);
+  }
+
+  async function saveEdit() {
+    if (!meme) return;
+    await updateMeme.mutateAsync({
+      id: meme.id,
+      title: editTitle,
+      description: editDesc || undefined,
+      tags: editTags.split(',').map((t) => t.trim()).filter(Boolean),
+    });
+    setEditing(false);
+  }
+
+  async function handleDelete() {
+    if (!meme) return;
+    if (!confirm(`Delete "${meme.title}"? This also removes all rescaled copies.`)) return;
+    await deleteMeme.mutateAsync(meme.id);
+    onClose();
+  }
+
+  if (isLoading) {
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70">
+        <div className="w-10 h-10 border-2 border-accent border-t-transparent rounded-full animate-spin" />
+      </div>
+    );
+  }
+
+  if (!meme) return null;
+
+  return (
+    <>
+      <div
+        className="fixed inset-0 z-40 bg-black/80 animate-fade-in"
+        onClick={onClose}
+      />
+
+      <div className="fixed inset-4 md:inset-8 z-50 flex flex-col bg-zinc-900 rounded-2xl shadow-2xl border border-zinc-800 overflow-hidden animate-scale-in">
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-4 border-b border-zinc-800 flex-shrink-0">
+          {editing ? (
+            <input
+              autoFocus
+              value={editTitle}
+              onChange={(e) => setEditTitle(e.target.value)}
+              className="flex-1 bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-1.5 text-sm font-semibold focus:outline-none focus:border-accent mr-3"
+            />
+          ) : (
+            <h2 className="text-lg font-semibold truncate flex-1 mr-3">{meme.title}</h2>
+          )}
+          <div className="flex items-center gap-2 flex-shrink-0">
+            {editing ? (
+              <button
+                onClick={saveEdit}
+                disabled={updateMeme.isPending}
+                className="flex items-center gap-1 text-sm px-3 py-1.5 rounded-lg bg-accent hover:bg-accent-hover text-white transition-colors"
+              >
+                <Check size={14} /> Save
+              </button>
+            ) : (
+              <button
+                onClick={startEdit}
+                className="text-zinc-500 hover:text-zinc-300 transition-colors p-1"
+                title="Edit"
+              >
+                <Edit2 size={16} />
+              </button>
+            )}
+            {!meme.parent_id && (
+              <button
+                onClick={() => setShowRescale(true)}
+                className="flex items-center gap-1 text-sm px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-300 transition-colors"
+                title="Create rescaled copy"
+              >
+                <Minimize2 size={14} />
+                <span className="hidden sm:inline">Rescale</span>
+              </button>
+            )}
+            <button
+              onClick={handleDelete}
+              disabled={deleteMeme.isPending}
+              className="text-zinc-500 hover:text-red-400 transition-colors p-1"
+              title="Delete"
+            >
+              <Trash2 size={16} />
+            </button>
+            <button onClick={onClose} className="text-zinc-500 hover:text-zinc-300 transition-colors p-1">
+              <X size={20} />
+            </button>
+          </div>
+        </div>
+
+        {/* Body */}
+        <div className="flex flex-col md:flex-row flex-1 overflow-hidden">
+          {/* Image panel */}
+          <div className="flex-1 flex items-center justify-center bg-zinc-950 p-4 overflow-hidden">
+            {displayMeme && (
+              <img
+                key={displayMeme.id}
+                src={api.imageUrl(displayMeme.file_path)}
+                alt={displayMeme.title}
+                className="max-w-full max-h-full object-contain rounded-lg animate-fade-in"
+              />
+            )}
+          </div>
+
+          {/* Sidebar */}
+          <div className="md:w-80 border-t md:border-t-0 md:border-l border-zinc-800 flex flex-col overflow-y-auto">
+            <div className="p-5 space-y-5 flex-1">
+
+              {/* Share */}
+              {displayMeme && (
+                <section>
+                  <h3 className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Share</h3>
+                  <SharePanel meme={displayMeme} />
+                </section>
+              )}
+
+              {/* Description */}
+              <section>
+                <h3 className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Description</h3>
+                {editing ? (
+                  <textarea
+                    value={editDesc}
+                    onChange={(e) => setEditDesc(e.target.value)}
+                    rows={3}
+                    placeholder="Add a description…"
+                    className="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-accent resize-none"
+                  />
+                ) : (
+                  <p className="text-sm text-zinc-400">{meme.description ?? 'No description.'}</p>
+                )}
+              </section>
+
+              {/* Tags */}
+              <section>
+                <h3 className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Tags</h3>
+                {editing ? (
+                  <input
+                    type="text"
+                    value={editTags}
+                    onChange={(e) => setEditTags(e.target.value)}
+                    placeholder="funny, reaction, wholesome"
+                    className="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-accent"
+                  />
+                ) : (
+                  <div className="flex flex-wrap gap-1.5">
+                    {meme.tags.length > 0
+                      ? meme.tags.map((t) => (
+                          <span key={t} className="text-xs px-2 py-0.5 rounded-full bg-accent/20 text-purple-300">
+                            {t}
+                          </span>
+                        ))
+                      : <span className="text-sm text-zinc-600">No tags</span>
+                    }
+                  </div>
+                )}
+              </section>
+
+              {/* Metadata */}
+              <section>
+                <h3 className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Info</h3>
+                <dl className="space-y-1.5 text-sm">
+                  <div className="flex justify-between">
+                    <dt className="text-zinc-500">Dimensions</dt>
+                    <dd className="text-zinc-300">{meme.width} × {meme.height}</dd>
+                  </div>
+                  <div className="flex justify-between">
+                    <dt className="text-zinc-500">Size</dt>
+                    <dd className="text-zinc-300">{formatBytes(meme.file_size)}</dd>
+                  </div>
+                  <div className="flex justify-between">
+                    <dt className="text-zinc-500">Type</dt>
+                    <dd className="text-zinc-300">{meme.mime_type.replace('image/', '')}</dd>
+                  </div>
+                  <div className="flex justify-between">
+                    <dt className="text-zinc-500">Uploaded</dt>
+                    <dd className="text-zinc-300 text-right text-xs">{formatDate(meme.created_at)}</dd>
+                  </div>
+                </dl>
+              </section>
+
+              {/* Rescaled variants */}
+              {meme.children && meme.children.length > 0 && (
+                <section>
+                  <h3 className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2 flex items-center gap-1">
+                    <Layers size={12} /> Rescaled Copies ({meme.children.length})
+                  </h3>
+                  <div className="space-y-1.5">
+                    <button
+                      onClick={() => setActiveChild(null)}
+                      className={`w-full text-left text-xs px-3 py-2 rounded-lg transition-colors ${
+                        activeChild === null
+                          ? 'bg-accent/20 text-purple-300'
+                          : 'bg-zinc-800 text-zinc-400 hover:bg-zinc-700'
+                      }`}
+                    >
+                      Original — {meme.width}×{meme.height} ({formatBytes(meme.file_size)})
+                    </button>
+                    {meme.children.map((child) => (
+                      <button
+                        key={child.id}
+                        onClick={() => setActiveChild(activeChild?.id === child.id ? null : child)}
+                        className={`w-full text-left text-xs px-3 py-2 rounded-lg transition-colors ${
+                          activeChild?.id === child.id
+                            ? 'bg-accent/20 text-purple-300'
+                            : 'bg-zinc-800 text-zinc-400 hover:bg-zinc-700'
+                        }`}
+                      >
+                        {child.title.replace(meme.title, '').trim() || child.title} — {child.width}×{child.height} ({formatBytes(child.file_size)})
+                      </button>
+                    ))}
+                  </div>
+                </section>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {showRescale && (
+        <RescaleModal
+          meme={meme}
+          onClose={() => setShowRescale(false)}
+          onDone={() => {
+            setShowRescale(false);
+            refetch();
+          }}
+        />
+      )}
+    </>
+  );
+}

frontend/src/components/RescaleModal.tsx

@@ -0,0 +1,131 @@
+import { useState } from 'react';
+import { X, Minimize2 } from 'lucide-react';
+import type { Meme } from '../api/client';
+import { useRescaleMeme } from '../hooks/useMemes';
+
+interface Props {
+  meme: Meme;
+  onClose: () => void;
+  onDone: () => void;
+}
+
+export function RescaleModal({ meme, onClose, onDone }: Props) {
+  const [width, setWidth] = useState('');
+  const [height, setHeight] = useState('');
+  const [quality, setQuality] = useState('85');
+  const [label, setLabel] = useState('');
+  const rescale = useRescaleMeme();
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!width && !height) return;
+
+    await rescale.mutateAsync({
+      id: meme.id,
+      width: width ? Number(width) : undefined,
+      height: height ? Number(height) : undefined,
+      quality: Number(quality),
+      label: label || undefined,
+    });
+    onDone();
+  }
+
+  const isGif = meme.mime_type === 'image/gif';
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 animate-fade-in">
+      <div className="bg-zinc-900 rounded-2xl shadow-2xl w-full max-w-md border border-zinc-800 animate-scale-in">
+        <div className="flex items-center justify-between p-5 border-b border-zinc-800">
+          <div className="flex items-center gap-2">
+            <Minimize2 size={18} className="text-accent" />
+            <h2 className="text-lg font-semibold">Rescale Meme</h2>
+          </div>
+          <button onClick={onClose} className="text-zinc-500 hover:text-zinc-300 transition-colors">
+            <X size={20} />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-5 space-y-4">
+          <p className="text-sm text-zinc-400">
+            Creates a new derived image. Original ({meme.width}×{meme.height}) is never modified.
+          </p>
+
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="block text-xs text-zinc-500 mb-1">Width (px)</label>
+              <input
+                type="number"
+                value={width}
+                onChange={(e) => setWidth(e.target.value)}
+                placeholder={String(meme.width)}
+                min={1}
+                className="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-accent"
+              />
+            </div>
+            <div>
+              <label className="block text-xs text-zinc-500 mb-1">Height (px)</label>
+              <input
+                type="number"
+                value={height}
+                onChange={(e) => setHeight(e.target.value)}
+                placeholder={String(meme.height)}
+                min={1}
+                className="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-accent"
+              />
+            </div>
+          </div>
+
+          <p className="text-xs text-zinc-500 -mt-1">
+            Aspect ratio is preserved automatically (fit: inside).
+          </p>
+
+          {!isGif && (
+            <div>
+              <label className="block text-xs text-zinc-500 mb-1">Quality ({quality}%)</label>
+              <input
+                type="range"
+                min={10}
+                max={100}
+                value={quality}
+                onChange={(e) => setQuality(e.target.value)}
+                className="w-full accent-purple-500"
+              />
+            </div>
+          )}
+
+          <div>
+            <label className="block text-xs text-zinc-500 mb-1">Label (optional)</label>
+            <input
+              type="text"
+              value={label}
+              onChange={(e) => setLabel(e.target.value)}
+              placeholder={`e.g. "thumb" or "${width || meme.width}w"`}
+              className="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-accent"
+            />
+          </div>
+
+          {rescale.error && (
+            <p className="text-red-400 text-sm">{(rescale.error as Error).message}</p>
+          )}
+
+          <div className="flex gap-3 pt-1">
+            <button
+              type="button"
+              onClick={onClose}
+              className="flex-1 py-2 rounded-lg border border-zinc-700 text-sm text-zinc-400 hover:bg-zinc-800 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={(!width && !height) || rescale.isPending}
+              className="flex-1 py-2 rounded-lg bg-accent hover:bg-accent-hover text-white text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {rescale.isPending ? 'Rescaling…' : 'Create Rescaled Copy'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

frontend/src/components/SharePanel.tsx

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import { Copy, Check, Send, MessageSquare, Download } from 'lucide-react';
+import type { Meme } from '../api/client';
+import { api } from '../api/client';
+
+interface Props {
+  meme: Meme;
+}
+
+export function SharePanel({ meme }: Props) {
+  const [copied, setCopied] = useState(false);
+  const imageUrl = `${window.location.origin}${api.imageUrl(meme.file_path)}`;
+
+  async function copyLink() {
+    await navigator.clipboard.writeText(imageUrl);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }
+
+  const telegramUrl = `https://t.me/share/url?url=${encodeURIComponent(imageUrl)}&text=${encodeURIComponent(meme.title)}`;
+  const smsUrl = `sms:?body=${encodeURIComponent(imageUrl)}`;
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      <button
+        onClick={copyLink}
+        className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-sm font-medium transition-colors"
+        title="Copy image link"
+      >
+        {copied ? (
+          <Check size={14} className="text-green-400" />
+        ) : (
+          <Copy size={14} className="text-zinc-400" />
+        )}
+        {copied ? 'Copied!' : 'Copy link'}
+      </button>
+
+      <a
+        href={telegramUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#229ED9]/20 hover:bg-[#229ED9]/30 text-[#229ED9] text-sm font-medium transition-colors"
+        title="Share on Telegram"
+      >
+        <Send size={14} />
+        Telegram
+      </a>
+
+      <a
+        href={smsUrl}
+        className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-green-900/30 hover:bg-green-900/50 text-green-400 text-sm font-medium transition-colors"
+        title="Share via SMS"
+      >
+        <MessageSquare size={14} />
+        SMS
+      </a>
+
+      <a
+        href={api.imageUrl(meme.file_path)}
+        download={meme.file_name}
+        className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-sm font-medium transition-colors"
+        title="Download original"
+      >
+        <Download size={14} />
+        Download
+      </a>
+    </div>
+  );
+}

frontend/src/components/TagFilter.tsx

@@ -0,0 +1,42 @@
+import { X } from 'lucide-react';
+import type { Tag } from '../api/client';
+
+interface Props {
+  tags: Tag[];
+  activeTag: string | null;
+  onSelect: (tag: string | null) => void;
+}
+
+export function TagFilter({ tags, activeTag, onSelect }: Props) {
+  if (tags.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap gap-2 items-center">
+      <button
+        onClick={() => onSelect(null)}
+        className={`text-sm px-3 py-1 rounded-full border transition-colors ${
+          activeTag === null
+            ? 'bg-accent text-white border-accent'
+            : 'border-zinc-700 text-zinc-400 hover:border-zinc-500 hover:text-zinc-300'
+        }`}
+      >
+        All
+      </button>
+      {tags.map((tag) => (
+        <button
+          key={tag.id}
+          onClick={() => onSelect(activeTag === tag.name ? null : tag.name)}
+          className={`flex items-center gap-1 text-sm px-3 py-1 rounded-full border transition-colors ${
+            activeTag === tag.name
+              ? 'bg-accent text-white border-accent'
+              : 'border-zinc-700 text-zinc-400 hover:border-zinc-500 hover:text-zinc-300'
+          }`}
+        >
+          {tag.name}
+          <span className="text-xs opacity-60">({tag.meme_count})</span>
+          {activeTag === tag.name && <X size={12} />}
+        </button>
+      ))}
+    </div>
+  );
+}

frontend/src/components/UploadModal.tsx

@@ -0,0 +1,174 @@
+import { useState, useRef, useCallback } from 'react';
+import { X, Upload, ImagePlus } from 'lucide-react';
+import { useUploadMeme } from '../hooks/useMemes';
+
+interface Props {
+  onClose: () => void;
+}
+
+const ALLOWED = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+
+export function UploadModal({ onClose }: Props) {
+  const [files, setFiles] = useState<File[]>([]);
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [tags, setTags] = useState('');
+  const [dragging, setDragging] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const upload = useUploadMeme();
+
+  const addFiles = useCallback((incoming: FileList | File[]) => {
+    const valid = Array.from(incoming).filter((f) => ALLOWED.includes(f.type));
+    setFiles((prev) => [...prev, ...valid]);
+  }, []);
+
+  function onDrop(e: React.DragEvent) {
+    e.preventDefault();
+    setDragging(false);
+    addFiles(e.dataTransfer.files);
+  }
+
+  function removeFile(idx: number) {
+    setFiles((prev) => prev.filter((_, i) => i !== idx));
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (files.length === 0) return;
+
+    for (const file of files) {
+      const fd = new FormData();
+      fd.append('file', file);
+      fd.append('title', title || file.name.replace(/\.[^.]+$/, ''));
+      if (description) fd.append('description', description);
+      if (tags) fd.append('tags', tags);
+      await upload.mutateAsync(fd);
+    }
+
+    onClose();
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 animate-fade-in">
+      <div className="bg-zinc-900 rounded-2xl shadow-2xl w-full max-w-lg border border-zinc-800 animate-scale-in">
+        {/* Header */}
+        <div className="flex items-center justify-between p-5 border-b border-zinc-800">
+          <div className="flex items-center gap-2">
+            <ImagePlus size={18} className="text-accent" />
+            <h2 className="text-lg font-semibold">Upload Memes</h2>
+          </div>
+          <button onClick={onClose} className="text-zinc-500 hover:text-zinc-300 transition-colors">
+            <X size={20} />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-5 space-y-4">
+          {/* Drop zone */}
+          <div
+            onDragOver={(e) => { e.preventDefault(); setDragging(true); }}
+            onDragLeave={() => setDragging(false)}
+            onDrop={onDrop}
+            onClick={() => inputRef.current?.click()}
+            className={`border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-colors ${
+              dragging
+                ? 'border-accent bg-accent/10'
+                : 'border-zinc-700 hover:border-zinc-500 hover:bg-zinc-800/50'
+            }`}
+          >
+            <Upload size={28} className="mx-auto mb-2 text-zinc-500" />
+            <p className="text-sm text-zinc-400">
+              Drag & drop images here, or{' '}
+              <span className="text-accent">browse files</span>
+            </p>
+            <p className="text-xs text-zinc-600 mt-1">JPG, PNG, GIF, WebP — max 100 MB each</p>
+            <input
+              ref={inputRef}
+              type="file"
+              accept="image/jpeg,image/png,image/gif,image/webp"
+              multiple
+              className="hidden"
+              onChange={(e) => e.target.files && addFiles(e.target.files)}
+            />
+          </div>
+
+          {/* Selected files */}
+          {files.length > 0 && (
+            <div className="space-y-1 max-h-32 overflow-y-auto">
+              {files.map((f, i) => (
+                <div key={i} className="flex items-center justify-between text-sm px-3 py-1.5 rounded-lg bg-zinc-800">
+                  <span className="truncate text-zinc-300">{f.name}</span>
+                  <button
+                    type="button"
+                    onClick={() => removeFile(i)}
+                    className="ml-2 text-zinc-500 hover:text-red-400 transition-colors flex-shrink-0"
+                  >
+                    <X size={14} />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* Metadata */}
+          <div>
+            <label className="block text-xs text-zinc-500 mb-1">
+              Title {files.length > 1 && <span className="text-zinc-600">(applied to all)</span>}
+            </label>
+            <input
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder={files[0]?.name.replace(/\.[^.]+$/, '') ?? 'Untitled'}
+              className="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-accent"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs text-zinc-500 mb-1">Description (optional)</label>
+            <textarea
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              rows={2}
+              placeholder="What's this meme about?"
+              className="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-accent resize-none"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs text-zinc-500 mb-1">Tags (comma-separated)</label>
+            <input
+              type="text"
+              value={tags}
+              onChange={(e) => setTags(e.target.value)}
+              placeholder="funny, reaction, wholesome"
+              className="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-accent"
+            />
+          </div>
+
+          {upload.error && (
+            <p className="text-red-400 text-sm">{(upload.error as Error).message}</p>
+          )}
+
+          <div className="flex gap-3 pt-1">
+            <button
+              type="button"
+              onClick={onClose}
+              className="flex-1 py-2 rounded-lg border border-zinc-700 text-sm text-zinc-400 hover:bg-zinc-800 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={files.length === 0 || upload.isPending}
+              className="flex-1 py-2 rounded-lg bg-accent hover:bg-accent-hover text-white text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {upload.isPending
+                ? 'Uploading…'
+                : `Upload ${files.length > 0 ? files.length : ''} Meme${files.length !== 1 ? 's' : ''}`}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}