build auth modal

frontend/src/components/MemeDetail.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { X, Minimize2, Trash2, Edit2, Check, Layers } from 'lucide-react';
 import { useMeme, useDeleteMeme, useUpdateMeme } from '../hooks/useMemes';
+import { useAuth } from '../hooks/useAuth';
 import { SharePanel } from './SharePanel';
 import { RescaleModal } from './RescaleModal';
 import { api, type Meme } from '../api/client';
@@ -26,6 +27,8 @@ export function MemeDetail({ memeId, onClose }: Props) {
   const { data, isLoading, refetch } = useMeme(memeId);
   const deleteMeme = useDeleteMeme();
   const updateMeme = useUpdateMeme();
+  const { data: auth } = useAuth();
+  const isAdmin = auth?.authenticated === true;
 
   const [editing, setEditing] = useState(false);
   const [editTitle, setEditTitle] = useState('');
@@ -94,24 +97,26 @@ export function MemeDetail({ memeId, onClose }: Props) {
             <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>
+            {isAdmin && (
+              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 && (
+            {isAdmin && !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"
@@ -121,14 +126,16 @@ export function MemeDetail({ memeId, onClose }: Props) {
                 <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>
+            {isAdmin && (
+              <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>
@@ -164,7 +171,7 @@ export function MemeDetail({ memeId, onClose }: Props) {
               {/* Description */}
               <section>
                 <h3 className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Description</h3>
-                {editing ? (
+                {isAdmin && editing ? (
                   <textarea
                     value={editDesc}
                     onChange={(e) => setEditDesc(e.target.value)}
@@ -180,7 +187,7 @@ export function MemeDetail({ memeId, onClose }: Props) {
               {/* Tags */}
               <section>
                 <h3 className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Tags</h3>
-                {editing ? (
+                {isAdmin && editing ? (
                   <input
                     type="text"
                     value={editTags}