feat: Move delete account button to user edit modal (#144)

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>

components/UserSelectModal.tsx

@@ -36,62 +36,19 @@ function UserCard({
   onEdit,
   showEdit,
   isCurrentUser,
-  currentLoggedInUserId, // For "don't delete self" check
-  onUserDeleted // Callback to update usersAtom
 }: {
   user: User,
   onSelect: () => void,
   onEdit: () => void,
   showEdit: boolean,
   isCurrentUser: boolean,
-  currentLoggedInUserId?: string,
-  onUserDeleted: (userId: string) => void,
 }) {
   const t = useTranslations('UserSelectModal');
-  const tWarning = useTranslations('Warning');
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
-  const [isDeleting, setIsDeleting] = useState(false);
-
-  const handleDeleteUser = async () => {
-    setIsDeleting(true);
-    try {
-      const response = await fetch('/api/user/delete', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ userId: user.id }),
-      });
-
-      if (response.ok) {
-        toast({
-          title: t('deleteUserSuccessTitle'),
-          description: t('deleteUserSuccessDescription', { username: user.username }),
-        });
-        onUserDeleted(user.id);
-      } else {
-        const errorData = await response.json();
-        toast({
-          title: t('deleteUserErrorTitle'),
-          description: errorData.error || t('genericError'),
-          variant: 'destructive',
-        });
-      }
-    } catch (error) {
-      toast({
-        title: t('deleteUserErrorTitle'),
-        description: t('networkError'),
-        variant: 'destructive',
-      });
-    } finally {
-      setIsDeleting(false);
-      setShowDeleteConfirm(false);
-    }
-  };
 
   return (
     <div key={user.id} className="relative group">
       <button
         onClick={onSelect}
-        disabled={isDeleting} // Disable main button while deleting this user
         className={cn(
           "flex flex-col items-center gap-2 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors w-full",
           isCurrentUser && "ring-2 ring-primary"
@@ -119,48 +76,12 @@ function UserCard({
                 e.stopPropagation(); // Prevent card selection
                 onEdit();
               }}
-              disabled={isDeleting}
               className="p-1 rounded-full bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 transition-colors"
               title={t('editUserTooltip')}
             >
               <UserRoundPen className="h-4 w-4" />
             </button>
           )}
-          {showEdit && user.id !== currentLoggedInUserId && (
-            <AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
-              <AlertDialogTrigger asChild>
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation(); // Prevent card selection
-                    setShowDeleteConfirm(true);
-                  }}
-                  disabled={isDeleting}
-                  className="p-1 rounded-full bg-red-200 hover:bg-red-300 dark:bg-red-700 dark:hover:bg-red-600 transition-colors text-red-600 dark:text-red-300"
-                  title={t('deleteUserTooltip')}
-                >
-                  <Trash2 className="h-4 w-4" />
-                </button>
-              </AlertDialogTrigger>
-              <AlertDialogContent>
-                <AlertDialogHeader>
-                  <AlertDialogTitle>{tWarning('areYouSure')}</AlertDialogTitle>
-                  <AlertDialogDescription>
-                    {t('deleteUserConfirmation', { username: user.username })}
-                  </AlertDialogDescription>
-                </AlertDialogHeader>
-                <AlertDialogFooter>
-                  <AlertDialogCancel onClick={(e) => { e.stopPropagation(); setShowDeleteConfirm(false);}} disabled={isDeleting}>{tWarning('cancel')}</AlertDialogCancel>
-                  <AlertDialogAction
-                    onClick={(e) => { e.stopPropagation(); handleDeleteUser();}}
-                    disabled={isDeleting}
-                    className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-                  >
-                    {isDeleting ? t('deletingButtonText') : t('confirmDeleteButtonText')}
-                  </AlertDialogAction>
-                </AlertDialogFooter>
-              </AlertDialogContent>
-            </AlertDialog>
-          )}
         </div>
       )}
     </div>
@@ -190,14 +111,12 @@ function UserSelectionView({
   onUserSelect,
   onEditUser,
   onCreateUser,
-  onUserDeleted, // Pass through the delete handler
 }: {
   users: User[],
   currentUserFromHook?: SafeUser,
   onUserSelect: (userId: string) => void,
   onEditUser: (userId: string) => void,
   onCreateUser: () => void,
-  onUserDeleted: (userId: string) => void,
 }) {
   return (
     <div className="grid grid-cols-3 gap-4 p-2 max-h-80 overflow-y-auto">
@@ -211,8 +130,6 @@ function UserSelectionView({
             onEdit={() => onEditUser(user.id)}
             showEdit={!!currentUserFromHook?.isAdmin}
             isCurrentUser={false} // This card isn't the currently logged-in user for switching TO
-            currentLoggedInUserId={currentUserFromHook?.id} // For the "don't delete self" check
-            onUserDeleted={onUserDeleted}
           />
         ))}
       {currentUserFromHook?.isAdmin && <AddUserButton onClick={onCreateUser} />}
@@ -230,12 +147,6 @@ export default function UserSelectModal({ onClose }: { onClose: () => void }) {
   const users = usersData.users;
   const { currentUser } = useHelpers();
 
-  const handleUserDeleted = (userIdToDelete: string) => {
-    setUsersData(prevData => ({
-      ...prevData,
-      users: prevData.users.filter(u => u.id !== userIdToDelete)
-    }));
-  };
 
   const handleUserSelect = (userId: string) => {
     setSelectedUser(userId);
@@ -281,7 +192,6 @@ export default function UserSelectModal({ onClose }: { onClose: () => void }) {
               onUserSelect={handleUserSelect}
               onEditUser={handleEditUser}
               onCreateUser={handleCreateUser}
-              onUserDeleted={handleUserDeleted}
             />
           ) : isCreating || isEditing ? (
             <UserForm