copilot

Author: dnywh

src/components/ListingPhotosManager/ListingPhotosManager.tsx

@@ -194,7 +194,11 @@ function ListingPhotosManager({
         uploadError?.statusCode === "413" ||
         uploadError?.error?.statusCode === "413"
       ) {
-        alert(overSizedFileAlertPlural);
+        alert(
+          files.length === 1
+            ? overSizedFileAlertSingular
+            : overSizedFileAlertPlural
+        );
       } else if (uploadError?.message?.includes("max_photos")) {
         alert(`You can only upload up to ${MAX_PHOTOS} photos`);
       } else {
@@ -208,6 +212,7 @@ function ListingPhotosManager({
   const handlePhotoDelete = async (photoToDelete: string) => {
     if (isMutatingPhotos) return;
 
+    const deletedPhotoIndex = photosRef.current.indexOf(photoToDelete);
     setDeletingPhoto(photoToDelete);
     try {
       // Immediately remove from react-beautiful-dnd's context
@@ -221,11 +226,22 @@ function ListingPhotosManager({
       console.error("Error deleting photo:", error);
 
       // Restore only the failed deletion, preserving other state changes.
-      updatePhotos((currentPhotos) =>
-        currentPhotos.includes(photoToDelete)
-          ? currentPhotos
-          : [...currentPhotos, photoToDelete]
-      );
+      updatePhotos((currentPhotos) => {
+        if (currentPhotos.includes(photoToDelete)) {
+          return currentPhotos;
+        }
+
+        const restoreIndex =
+          deletedPhotoIndex === -1
+            ? currentPhotos.length
+            : Math.min(deletedPhotoIndex, currentPhotos.length);
+
+        return [
+          ...currentPhotos.slice(0, restoreIndex),
+          photoToDelete,
+          ...currentPhotos.slice(restoreIndex),
+        ];
+      });
       alert("Failed to delete photo. Please try again.");
     } finally {
       setDeletingPhoto(null);

src/components/ProfileActions/ProfileActions.tsx

@@ -2,10 +2,9 @@
 
 import { signOutAction, deleteAccountAction } from "@/app/actions";
 import { siteConfig } from "@/config/site";
-import Button from "@/components/Button";
 import ButtonToDialog from "@/components/ButtonToDialog";
 import EncodedEmailLink from "@/components/EncodedEmailLink";
-import { useState } from "react";
+import SubmitButton from "@/components/SubmitButton";
 
 import { styled } from "@pigment-css/react";
 
@@ -36,40 +35,27 @@ const ListItemText = styled("div")(({ theme }) => ({
   },
 }));
 
+const ActionForm = styled("form")({
+  flexShrink: 0,
+});
+
 type ProfileActionsProps = {
   listings?: unknown[];
 };
 
 export default function ProfileActions({ listings = [] }: ProfileActionsProps) {
-  const [isSigningOut, setIsSigningOut] = useState(false);
-
-  const handleSignOut = async () => {
-    if (isSigningOut) return;
-
-    setIsSigningOut(true);
-    try {
-      await signOutAction();
-    } catch (error) {
-      console.error("Error signing out:", error);
-      setIsSigningOut(false);
-    }
-  };
-
   return (
     <List>
       <ListItem>
         <ListItemText>
           <h4>Sign out</h4>
           <p>Goodbye for now!</p>
         </ListItemText>
-        <Button
-          variant="secondary"
-          onClick={handleSignOut}
-          loading={isSigningOut}
-          loadingText="Signing out..."
-        >
-          Sign out
-        </Button>
+        <ActionForm action={signOutAction}>
+          <SubmitButton variant="secondary" loadingText="Signing out...">
+            Sign out
+          </SubmitButton>
+        </ActionForm>
       </ListItem>
 
       <ListItem>