admin: replace icon buttons with user detail slide-over panel

- Click user row to open detail panel instead of inline icons
- Panel shows user info, role toggle (User/Admin buttons), password reset, and delete
- Cleaner UX: all user management in one place

src/pages/AdminPage.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Users, Mail, Plus, Trash2, Copy, Check, KeyRound } from 'lucide-react';
+import { Users, Mail, Plus, Trash2, Copy, Check, X, KeyRound, ChevronRight, Shield, ShieldAlert } from 'lucide-react';
 import { api } from '@/lib/api';
 import { useAuthStore } from '@/stores/auth';
 import type { User, Invite } from '@/types';
@@ -12,6 +12,9 @@ export default function AdminPage() {
   const [isLoading, setIsLoading] = useState(true);
   const [activeTab, setActiveTab] = useState<'users' | 'invites'>('users');
 
+  // User detail panel
+  const [selectedUser, setSelectedUser] = useState<User | null>(null);
+
   // Invite form
   const [showInviteForm, setShowInviteForm] = useState(false);
   const [inviteEmail, setInviteEmail] = useState('');
@@ -21,8 +24,7 @@ export default function AdminPage() {
   const [inviteUrl, setInviteUrl] = useState('');
   const [copied, setCopied] = useState(false);
 
-  // Password reset
-  const [resetUserId, setResetUserId] = useState<string | null>(null);
+  // Password reset (in detail panel)
   const [resetUrl, setResetUrl] = useState('');
   const [resetCopied, setResetCopied] = useState(false);
   const [resetLoading, setResetLoading] = useState(false);
@@ -69,7 +71,11 @@ export default function AdminPage() {
   const handleChangeRole = async (userId: string, role: 'admin' | 'user') => {
     try {
       await api.updateUserRole(userId, role);
-      setUsers(users.map(u => u.id === userId ? { ...u, role } : u));
+      const updated = users.map(u => u.id === userId ? { ...u, role } : u);
+      setUsers(updated);
+      if (selectedUser?.id === userId) {
+        setSelectedUser({ ...selectedUser, role });
+      }
     } catch (error) {
       console.error('Failed to update role:', error);
     }
@@ -79,7 +85,6 @@ export default function AdminPage() {
     setResetLoading(true);
     try {
       const result = await api.createPasswordReset(userId);
-      setResetUserId(userId);
       setResetUrl(result.resetUrl);
     } catch (error) {
       console.error('Failed to generate reset link:', error);
@@ -94,8 +99,8 @@ export default function AdminPage() {
     setTimeout(() => setResetCopied(false), 2000);
   };
 
-  const dismissReset = () => {
-    setResetUserId(null);
+  const closeUserPanel = () => {
+    setSelectedUser(null);
     setResetUrl('');
     setResetCopied(false);
   };
@@ -105,6 +110,7 @@ export default function AdminPage() {
     try {
       await api.deleteUser(userId);
       setUsers(users.filter(u => u.id !== userId));
+      if (selectedUser?.id === userId) closeUserPanel();
     } catch (error) {
       console.error('Failed to delete user:', error);
     }
@@ -179,77 +185,31 @@ export default function AdminPage() {
                 <th className="px-4 py-3 font-medium">Email</th>
                 <th className="px-4 py-3 font-medium">Role</th>
                 <th className="px-4 py-3 font-medium">Joined</th>
-                <th className="px-4 py-3"></th>
+                <th className="px-4 py-3 w-8"></th>
               </tr>
             </thead>
             <tbody>
               {users.map((user) => (
-                <tr key={user.id} className="border-b border-slate-100 last:border-0">
+                <tr
+                  key={user.id}
+                  onClick={() => setSelectedUser(user)}
+                  className="border-b border-slate-100 last:border-0 cursor-pointer hover:bg-slate-50 transition-colors"
+                >
                   <td className="px-4 py-3 text-sm font-medium text-slate-900">{user.name}</td>
                   <td className="px-4 py-3 text-sm text-slate-600">{user.email}</td>
                   <td className="px-4 py-3">
-                    {user.id === currentUser?.id ? (
-                      <span className="px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-700">
-                        {user.role}
-                      </span>
-                    ) : (
-                      <select
-                        value={user.role || 'user'}
-                        onChange={(e) => handleChangeRole(user.id, e.target.value as 'admin' | 'user')}
-                        className={cn(
-                          'px-2 py-1 text-xs rounded-full border-none cursor-pointer appearance-none',
-                          user.role === 'admin' ? 'bg-purple-100 text-purple-700' : 'bg-slate-100 text-slate-700'
-                        )}
-                      >
-                        <option value="user">user</option>
-                        <option value="admin">admin</option>
-                      </select>
-                    )}
+                    <span className={cn(
+                      'px-2 py-1 text-xs rounded-full',
+                      user.role === 'admin' ? 'bg-purple-100 text-purple-700' : 'bg-slate-100 text-slate-700'
+                    )}>
+                      {user.role}
+                    </span>
                   </td>
                   <td className="px-4 py-3 text-sm text-slate-500">
                     {user.createdAt ? new Date(user.createdAt).toLocaleDateString() : '—'}
                   </td>
                   <td className="px-4 py-3">
-                    {user.id !== currentUser?.id && (
-                      <div className="flex items-center gap-1">
-                        {resetUserId === user.id ? (
-                          <div className="flex items-center gap-1">
-                            <span className="text-xs text-green-600 whitespace-nowrap">✓ Link ready</span>
-                            <button
-                              onClick={handleCopyResetUrl}
-                              className="text-xs px-2 py-1 bg-blue-600 text-white rounded flex items-center gap-1"
-                            >
-                              {resetCopied ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
-                              {resetCopied ? 'Copied!' : 'Copy'}
-                            </button>
-                            <button
-                              onClick={dismissReset}
-                              className="text-xs px-1 py-1 text-slate-400 hover:text-slate-600"
-                            >
-                              ✕
-                            </button>
-                          </div>
-                        ) : (
-                          <>
-                            <button
-                              onClick={() => handleGenerateResetLink(user.id)}
-                              disabled={resetLoading}
-                              className="p-1 text-slate-400 hover:text-blue-500 transition-colors"
-                              title="Generate password reset link"
-                            >
-                              <KeyRound className="w-4 h-4" />
-                            </button>
-                            <button
-                              onClick={() => handleDeleteUser(user.id)}
-                              className="p-1 text-slate-400 hover:text-red-500 transition-colors"
-                              title="Delete user"
-                            >
-                              <Trash2 className="w-4 h-4" />
-                            </button>
-                          </>
-                        )}
-                      </div>
-                    )}
+                    <ChevronRight className="w-4 h-4 text-slate-400" />
                   </td>
                 </tr>
               ))}
@@ -419,6 +379,152 @@ export default function AdminPage() {
           </div>
         </div>
       )}
+
+      {/* User Detail Slide-Over Panel */}
+      {selectedUser && (
+        <>
+          {/* Backdrop */}
+          <div
+            className="fixed inset-0 bg-black/20 z-40"
+            onClick={closeUserPanel}
+          />
+          {/* Panel */}
+          <div className="fixed inset-y-0 right-0 w-full max-w-md bg-white shadow-xl z-50 flex flex-col animate-in slide-in-from-right duration-200">
+            {/* Header */}
+            <div className="flex items-center justify-between px-6 py-4 border-b border-slate-200">
+              <h2 className="text-lg font-semibold text-slate-900">User Settings</h2>
+              <button
+                onClick={closeUserPanel}
+                className="p-1 text-slate-400 hover:text-slate-600 transition-colors"
+              >
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+
+            {/* Content */}
+            <div className="flex-1 overflow-y-auto p-6 space-y-6">
+              {/* User info */}
+              <div className="flex items-center gap-4">
+                <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-semibold text-lg">
+                  {selectedUser.name?.charAt(0).toUpperCase() || '?'}
+                </div>
+                <div>
+                  <h3 className="font-medium text-slate-900">{selectedUser.name}</h3>
+                  <p className="text-sm text-slate-500">{selectedUser.email}</p>
+                </div>
+              </div>
+
+              {/* Details */}
+              <div className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium text-slate-700 mb-1">Joined</label>
+                  <p className="text-sm text-slate-600">
+                    {selectedUser.createdAt ? new Date(selectedUser.createdAt).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) : '—'}
+                  </p>
+                </div>
+
+                {/* Role */}
+                <div>
+                  <label className="block text-sm font-medium text-slate-700 mb-2">Role</label>
+                  {selectedUser.id === currentUser?.id ? (
+                    <div className="flex items-center gap-2">
+                      <span className="px-3 py-1.5 text-sm rounded-lg bg-purple-100 text-purple-700 font-medium">
+                        {selectedUser.role}
+                      </span>
+                      <span className="text-xs text-slate-400">(your account)</span>
+                    </div>
+                  ) : (
+                    <div className="flex gap-2">
+                      <button
+                        onClick={() => handleChangeRole(selectedUser.id, 'user')}
+                        className={cn(
+                          'flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium border transition-colors',
+                          selectedUser.role === 'user'
+                            ? 'bg-slate-100 border-slate-300 text-slate-900'
+                            : 'border-slate-200 text-slate-500 hover:bg-slate-50'
+                        )}
+                      >
+                        <Shield className="w-4 h-4" />
+                        User
+                      </button>
+                      <button
+                        onClick={() => handleChangeRole(selectedUser.id, 'admin')}
+                        className={cn(
+                          'flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium border transition-colors',
+                          selectedUser.role === 'admin'
+                            ? 'bg-purple-100 border-purple-300 text-purple-700'
+                            : 'border-slate-200 text-slate-500 hover:bg-slate-50'
+                        )}
+                      >
+                        <ShieldAlert className="w-4 h-4" />
+                        Admin
+                      </button>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* Actions — only for non-self users */}
+              {selectedUser.id !== currentUser?.id && (
+                <div className="space-y-4 pt-4 border-t border-slate-200">
+                  <h4 className="text-sm font-medium text-slate-700">Actions</h4>
+
+                  {/* Password Reset */}
+                  <div className="bg-slate-50 rounded-lg p-4">
+                    <div className="flex items-center gap-2 mb-2">
+                      <KeyRound className="w-4 h-4 text-slate-500" />
+                      <span className="text-sm font-medium text-slate-700">Password Reset</span>
+                    </div>
+                    {resetUrl ? (
+                      <div className="space-y-2">
+                        <p className="text-xs text-green-600">✓ Reset link generated</p>
+                        <div className="flex gap-2">
+                          <input
+                            type="text"
+                            value={resetUrl}
+                            readOnly
+                            className="flex-1 px-3 py-1.5 border border-slate-300 rounded-lg text-xs bg-white font-mono"
+                          />
+                          <button
+                            onClick={handleCopyResetUrl}
+                            className="px-3 py-1.5 bg-blue-600 text-white text-xs rounded-lg flex items-center gap-1 hover:bg-blue-700 transition-colors"
+                          >
+                            {resetCopied ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
+                            {resetCopied ? 'Copied' : 'Copy'}
+                          </button>
+                        </div>
+                      </div>
+                    ) : (
+                      <button
+                        onClick={() => handleGenerateResetLink(selectedUser.id)}
+                        disabled={resetLoading}
+                        className="text-sm text-blue-600 hover:text-blue-700 font-medium disabled:opacity-50"
+                      >
+                        {resetLoading ? 'Generating...' : 'Generate reset link'}
+                      </button>
+                    )}
+                  </div>
+
+                  {/* Delete User */}
+                  <div className="bg-red-50 rounded-lg p-4">
+                    <div className="flex items-center gap-2 mb-2">
+                      <Trash2 className="w-4 h-4 text-red-500" />
+                      <span className="text-sm font-medium text-red-700">Danger Zone</span>
+                    </div>
+                    <p className="text-xs text-red-600 mb-3">Permanently delete this user and all their data.</p>
+                    <button
+                      onClick={() => handleDeleteUser(selectedUser.id)}
+                      className="px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700 transition-colors"
+                    >
+                      Delete User
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </>
+      )}
     </div>
   );
 }