build auth modal

frontend/src/pages/Gallery.tsx

@@ -1,9 +1,11 @@
 import { useState, useCallback } from 'react';
-import { Search, Upload as UploadIcon, X, Share2 } from 'lucide-react';
+import { Search, Upload as UploadIcon, X, Share2, Lock, LogOut } from 'lucide-react';
 import { useMemes, useTags } from '../hooks/useMemes';
+import { useAuth, useLogout } from '../hooks/useAuth';
 import { GalleryGrid } from '../components/GalleryGrid';
 import { MemeDetail } from '../components/MemeDetail';
 import { UploadModal } from '../components/UploadModal';
+import { LoginModal } from '../components/LoginModal';
 import { SharePanel } from '../components/SharePanel';
 import type { Meme } from '../api/client';
 
@@ -14,6 +16,11 @@ export function Gallery() {
   const [selectedMemeId, setSelectedMemeId] = useState<string | null>(null);
   const [quickShareMeme, setQuickShareMeme] = useState<Meme | null>(null);
   const [showUpload, setShowUpload] = useState(false);
+  const [showLogin, setShowLogin] = useState(false);
+
+  const { data: auth } = useAuth();
+  const logout = useLogout();
+  const isAdmin = auth?.authenticated === true;
 
   // Debounce search
   const [searchTimer, setSearchTimer] = useState<ReturnType<typeof setTimeout> | null>(null);
@@ -40,6 +47,14 @@ export function Gallery() {
     setQuickShareMeme(meme);
   }, []);
 
+  function handleUploadClick() {
+    if (isAdmin) {
+      setShowUpload(true);
+    } else {
+      setShowLogin(true);
+    }
+  }
+
   return (
     <div className="min-h-screen bg-zinc-950">
       {/* Topbar */}
@@ -71,14 +86,37 @@ export function Gallery() {
             )}
           </div>
 
-          <div className="ml-auto flex-shrink-0">
+          {/* Right side actions */}
+          <div className="ml-auto flex items-center gap-2 flex-shrink-0">
+            {/* Upload button — always visible, gates on auth */}
             <button
-              onClick={() => setShowUpload(true)}
+              onClick={handleUploadClick}
               className="flex items-center gap-1.5 px-4 py-2 rounded-lg bg-accent hover:bg-accent-hover text-white text-sm font-medium transition-colors"
+              title={isAdmin ? 'Upload meme' : 'Sign in to upload'}
             >
-              <UploadIcon size={15} />
-              <span className="hidden sm:inline">Upload</span>
+              {isAdmin ? <UploadIcon size={15} /> : <Lock size={15} />}
+              <span className="hidden sm:inline">{isAdmin ? 'Upload' : 'Upload'}</span>
             </button>
+
+            {/* Auth state */}
+            {isAdmin ? (
+              <button
+                onClick={() => logout.mutate()}
+                title={`Sign out (${auth?.user})`}
+                className="flex items-center gap-1.5 px-3 py-2 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-400 hover:text-zinc-200 text-sm transition-colors"
+              >
+                <LogOut size={15} />
+                <span className="hidden sm:inline text-xs">{auth?.user}</span>
+              </button>
+            ) : (
+              <button
+                onClick={() => setShowLogin(true)}
+                className="flex items-center gap-1.5 px-3 py-2 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-400 hover:text-zinc-200 text-sm transition-colors"
+                title="Admin login"
+              >
+                <Lock size={15} />
+              </button>
+            )}
           </div>
         </div>
 
@@ -114,7 +152,6 @@ export function Gallery() {
 
       {/* Gallery */}
       <main className="max-w-screen-2xl mx-auto px-4 py-6">
-        {/* Status bar */}
         <div className="flex items-center justify-between mb-4">
           <p className="text-sm text-zinc-500">
             {isLoading
@@ -175,8 +212,16 @@ export function Gallery() {
         </div>
       )}
 
-      {/* Upload modal */}
-      {showUpload && <UploadModal onClose={() => setShowUpload(false)} />}
+      {/* Upload modal (admin only) */}
+      {showUpload && isAdmin && <UploadModal onClose={() => setShowUpload(false)} />}
+
+      {/* Login modal */}
+      {showLogin && (
+        <LoginModal
+          onClose={() => setShowLogin(false)}
+          onSuccess={() => setShowUpload(true)}
+        />
+      )}
     </div>
   );
 }