copilot

dnywh · dnywh · commit dedf6be33008 · 2026-04-12T13:39:32.000+10:00
diff --git a/messages/de.json b/messages/de.json
@@ -111,5 +111,27 @@
         "answer": "<p>We only send emails that are necessary to keep Peels working. That includes one or two account-related emails, and emails to notify you whenever a fellow Peels member has sent you message.</p><p>Email notifications are required for listing hosts, as it means a prospective donor has enquired about dropping off scraps (or picking something up). Hosts who longer wish to receive emails can either hide their listing from the map (making it impossible for new donors to reach out) or delete their listing entirely (meaning previous donors can no longer message, either).</p><p>People without listings cannot be messaged (and thus emailed) unless they initiate contact with a host first.</p><p>Anyone can report or block individual Peels members via our messaging system. Blocking someone means they can no longer message or email you.</p>"
       }
     }
+  },
+  "Contact": {
+    "title": "Kontakt",
+    "subtitle": "So erreichst du das Peels-Team.",
+    "via": {
+      "therot": "Hallo, Leser von The Rot. Danke fürs Vorbeischauen. Hier ist ein direkter Draht zu Danny.",
+      "general": "Hallo. Hier sind einige E-Mail-Adressen, unter denen du uns erreichen kannst."
+    },
+    "contactLabel": "Wenn du",
+    "contactOptions": {
+      "general": "Eine allgemeine Anfrage stellen möchtest",
+      "support": "Hilfe bei etwas brauchst",
+      "dw": "Mit Danny sprechen möchtest",
+      "newsletter": "Über den Newsletter sprechen möchtest"
+    },
+    "emailLabel": "Am besten schreibst du an",
+    "copyButton": {
+      "copied": "Kopiert",
+      "copying": "Wird kopiert...",
+      "copyFailed": "Kopieren fehlgeschlagen",
+      "copyAddress": "Adresse kopieren"
+    }
   }
 }
diff --git a/messages/en.json b/messages/en.json
@@ -129,6 +129,8 @@
     "emailLabel": "You’re best off emailing",
     "copyButton": {
       "copied": "Copied!",
+      "copying": "Copying...",
+      "copyFailed": "Copy failed",
       "copyAddress": "Copy address"
     }
   }
diff --git a/messages/es.json b/messages/es.json
@@ -111,5 +111,27 @@
         "answer": "<p>We only send emails that are necessary to keep Peels working. That includes one or two account-related emails, and emails to notify you whenever a fellow Peels member has sent you message.</p><p>Email notifications are required for listing hosts, as it means a prospective donor has enquired about dropping off scraps (or picking something up). Hosts who longer wish to receive emails can either hide their listing from the map (making it impossible for new donors to reach out) or delete their listing entirely (meaning previous donors can no longer message, either).</p><p>People without listings cannot be messaged (and thus emailed) unless they initiate contact with a host first.</p><p>Anyone can report or block individual Peels members via our messaging system. Blocking someone means they can no longer message or email you.</p>"
       }
     }
+  },
+  "Contact": {
+    "title": "Contacto",
+    "subtitle": "Así puedes contactar con el equipo de Peels.",
+    "via": {
+      "therot": "Hola, lector de The Rot. Gracias por pasar por aquí. Esta es una línea directa con Danny.",
+      "general": "Hola. Aquí tienes algunas direcciones de correo para contactarnos."
+    },
+    "contactLabel": "Si quieres",
+    "contactOptions": {
+      "general": "Hacer una consulta general",
+      "support": "Obtener ayuda con algo",
+      "dw": "Hablar con Danny",
+      "newsletter": "Hablar sobre el boletín"
+    },
+    "emailLabel": "Lo mejor es escribir a",
+    "copyButton": {
+      "copied": "Copiado",
+      "copying": "Copiando...",
+      "copyFailed": "No se pudo copiar",
+      "copyAddress": "Copiar dirección"
+    }
   }
 }
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -68,6 +68,11 @@ const buttonStyles = ({ theme }: { theme: any }): any => ({
   "&[data-focus]": {
     outline: `3px solid ${theme.colors.focus.outline}`,
   },
+  '&[aria-disabled="true"]': {
+    cursor: "default",
+    background: theme.colors.button.disabled.background,
+    color: theme.colors.button.disabled.text,
+  },
 
   variants: [
     {
@@ -122,7 +127,7 @@ const buttonStyles = ({ theme }: { theme: any }): any => ({
         "&:not([disabled])": {
           boxShadow: `0px 0px 0px 2px ${theme.colors.button.primary.background}`, // Match visual height of sibling buttons with box-shadow
         },
-        "&:hover&:not([disabled])": {
+        '&:hover&:not([disabled]):not([aria-disabled="true"])': {
           background: `color-mix(in srgb, ${theme.colors.button.primary.background}, ${theme.colors.button.primary.hover.tint} ${theme.colors.button.primary.hover.mix})`,
           boxShadow: `0px 0px 0px 2px color-mix(in srgb, ${theme.colors.button.primary.background}, ${theme.colors.button.primary.hover.tint} ${theme.colors.button.primary.hover.mix})`,
         },
@@ -135,7 +140,7 @@ const buttonStyles = ({ theme }: { theme: any }): any => ({
         color: theme.colors.button.secondary.text,
         // borderColor: theme.colors.border.base,
         boxShadow: `0px 0px 0px 2px ${theme.colors.border.base}`,
-        "&:hover&:not([disabled])": {
+        '&:hover&:not([disabled]):not([aria-disabled="true"])': {
           color: `color-mix(in srgb, ${theme.colors.button.secondary.text}, ${theme.colors.button.secondary.hover.tint} ${theme.colors.button.secondary.hover.mix})`,
         },
       },
@@ -147,7 +152,7 @@ const buttonStyles = ({ theme }: { theme: any }): any => ({
         color: theme.colors.button.danger.text,
         // borderColor: theme.colors.border.base,
         boxShadow: `0px 0px 0px 2px ${theme.colors.border.base}`,
-        "&:hover&:not([disabled])": {
+        '&:hover&:not([disabled]):not([aria-disabled="true"])': {
           color: `color-mix(in srgb, ${theme.colors.button.danger.text}, ${theme.colors.button.danger.hover.tint} ${theme.colors.button.danger.hover.mix})`,
         },
       },
@@ -159,7 +164,7 @@ const buttonStyles = ({ theme }: { theme: any }): any => ({
         border: "none",
         color: theme.colors.button.send.text,
 
-        "&:hover&:not([disabled])": {
+        '&:hover&:not([disabled]):not([aria-disabled="true"])': {
           backgroundColor: `color-mix(in srgb, ${theme.colors.button.send.text}, ${theme.colors.button.send.hover.tint} ${theme.colors.button.send.hover.mix})`,
         },
       },
@@ -172,7 +177,7 @@ const buttonStyles = ({ theme }: { theme: any }): any => ({
         background: theme.colors.button.secondary.background,
         color: theme.colors.button.secondary.text,
         border: `1px solid ${theme.colors.border.base}`,
-        "&:hover&:not([disabled])": {
+        '&:hover&:not([disabled]):not([aria-disabled="true"])': {
           backgroundColor: theme.colors.background.sunk,
         },
       },
@@ -212,6 +217,7 @@ const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
       loadingText = "Loading...",
       type = "button",
       size = "normal",
+      onClick,
       ...props
     },
     ref
@@ -220,6 +226,15 @@ const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
     const isLoading = loading && !isLink;
     const isDisabled = disabled || isLoading;
     const buttonContent = <span>{isLoading ? loadingText : children}</span>;
+    const handleLinkClick: React.MouseEventHandler<HTMLElement> = (event) => {
+      if (isDisabled) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+
+      onClick?.(event);
+    };
 
     if (href) {
       return (
@@ -231,7 +246,7 @@ const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
           aria-disabled={isDisabled || undefined}
           aria-busy={isLoading || undefined}
           size={size}
-          disabled={isDisabled}
+          onClick={handleLinkClick}
           {...props}
         >
           {buttonContent}
@@ -249,6 +264,7 @@ const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
         aria-disabled={isDisabled || undefined}
         aria-busy={isLoading || undefined}
         size={size}
+        onClick={onClick}
         {...props}
       >
         {buttonContent}
diff --git a/src/components/EmailSelector/EmailSelector.tsx b/src/components/EmailSelector/EmailSelector.tsx
@@ -115,12 +115,12 @@ export default function EmailSelector() {
         <Button
           onClick={handleCopy}
           loading={copyStatus === "copying"}
-          loadingText="Copying..."
+          loadingText={t("copyButton.copying")}
         >
           {copyStatus === "copied"
             ? t("copyButton.copied")
             : copyStatus === "error"
-              ? "Copy failed"
+              ? t("copyButton.copyFailed")
               : t("copyButton.copyAddress")}
         </Button>
       </SubSectionBottom>
diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
@@ -114,7 +114,11 @@ const IconButton = forwardRef<
     : ariaLabel || iconLabels[icon];
 
   const handleClick: React.MouseEventHandler<HTMLElement> = (e) => {
-    if (loading || disabled) return;
+    if (loading || disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
 
     if (onClick) {
       onClick(e);
diff --git a/src/components/ListingPhotosManager/ListingPhotosManager.tsx b/src/components/ListingPhotosManager/ListingPhotosManager.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { uploadListingPhoto, deleteListingPhoto } from "@/utils/mediaUtils";
 import Button from "@/components/Button";
 import RemoteImage from "@/components/RemoteImage";
@@ -110,8 +110,19 @@ function ListingPhotosManager({
   isNewListing = false,
 }: ListingPhotosManagerProps) {
   const [photos, setPhotos] = useState(initialPhotos);
+  const photosRef = useRef(initialPhotos);
   const [isUploading, setIsUploading] = useState(false);
   const [deletingPhoto, setDeletingPhoto] = useState<string | null>(null);
+  const isMutatingPhotos = isUploading || deletingPhoto !== null;
+
+  const updatePhotos = (
+    getNextPhotos: (currentPhotos: string[]) => string[]
+  ) => {
+    const nextPhotos = getNextPhotos(photosRef.current);
+    photosRef.current = nextPhotos;
+    setPhotos(nextPhotos);
+    onPhotosChange?.(nextPhotos);
+  };
 
   const compressFile = (file: File) => {
     return new Promise<File>((resolve, reject) => {
@@ -127,15 +138,15 @@ function ListingPhotosManager({
   };
 
   const handleDrop = async (acceptedFiles: File[]) => {
-    if (isUploading) return;
+    if (isMutatingPhotos) return;
 
     console.log("Dropped files:", acceptedFiles);
 
     // Convert FileList to Array and process as if they came from input
     const files = Array.from(acceptedFiles);
 
     // Reuse existing photo handling logic
-    if (files.length + photos.length > MAX_PHOTOS) {
+    if (files.length + photosRef.current.length > MAX_PHOTOS) {
       alert(`You can only upload up to ${MAX_PHOTOS} photos`);
       return;
     }
@@ -168,9 +179,7 @@ function ListingPhotosManager({
         uploadListingPhotoAction(file, !isNewListing ? listingSlug : undefined)
       );
       const newFilenames = (await Promise.all(uploadPromises)) as string[];
-      const newPhotos = [...photos, ...newFilenames];
-      setPhotos(newPhotos);
-      onPhotosChange?.(newPhotos);
+      updatePhotos((currentPhotos) => [...currentPhotos, ...newFilenames]);
     } catch (error) {
       // console.error("Upload error details:", error);
 
@@ -197,39 +206,42 @@ function ListingPhotosManager({
   };
 
   const handlePhotoDelete = async (photoToDelete: string) => {
-    if (deletingPhoto) return;
+    if (isMutatingPhotos) return;
 
     setDeletingPhoto(photoToDelete);
     try {
       // Immediately remove from react-beautiful-dnd's context
-      const newPhotos = photos.filter((photo) => photo !== photoToDelete);
-      setPhotos(newPhotos);
-      onPhotosChange?.(newPhotos);
+      updatePhotos((currentPhotos) =>
+        currentPhotos.filter((photo) => photo !== photoToDelete)
+      );
 
       // Then attempt the delete operation
       await deleteListingPhotoAction(photoToDelete, listingSlug);
     } catch (error) {
       console.error("Error deleting photo:", error);
 
-      // If the delete fails, revert the UI state
-      setPhotos(photos);
-      onPhotosChange?.(photos);
+      // Restore only the failed deletion, preserving other state changes.
+      updatePhotos((currentPhotos) =>
+        currentPhotos.includes(photoToDelete)
+          ? currentPhotos
+          : [...currentPhotos, photoToDelete]
+      );
       alert("Failed to delete photo. Please try again.");
     } finally {
       setDeletingPhoto(null);
     }
   };
 
   const handleDragEnd = (result: DropResult) => {
+    if (isMutatingPhotos) return;
     if (!result.destination) return;
 
-    const items = Array.from(photos);
+    const items = Array.from(photosRef.current);
     const [reorderedItem] = items.splice(result.source.index, 1);
     items.splice(result.destination.index, 0, reorderedItem);
 
     console.log("Photos reordered:", items);
-    setPhotos(items);
-    onPhotosChange?.(items);
+    updatePhotos(() => items);
   };
 
   return (
@@ -243,7 +255,7 @@ function ListingPhotosManager({
                   droppableId="photos"
                   direction="vertical"
                   // Things that react-beautiful-dnd gets mad about me NOT defining...
-                  isDropDisabled={false}
+                  isDropDisabled={isMutatingPhotos}
                   isCombineEnabled={false}
                   ignoreContainerClipping={false}
                 >
@@ -257,6 +269,7 @@ function ListingPhotosManager({
                           key={filename}
                           draggableId={filename}
                           index={index}
+                          isDragDisabled={isMutatingPhotos}
                         >
                           {(provided, snapshot) => (
                             <PhotoItem
@@ -280,7 +293,7 @@ function ListingPhotosManager({
                                 size="small"
                                 loading={deletingPhoto === filename}
                                 loadingText="Deleting..."
-                                disabled={deletingPhoto !== null}
+                                disabled={isMutatingPhotos}
                                 onClick={() => handlePhotoDelete(filename)}
                               >
                                 Delete
@@ -307,7 +320,7 @@ function ListingPhotosManager({
               type="file"
               accept="image/*"
               multiple
-              disabled={isUploading || photos.length >= MAX_PHOTOS}
+              disabled={isMutatingPhotos || photos.length >= MAX_PHOTOS}
               style={{ display: "none" }}
               id="photo-upload"
             />
@@ -320,7 +333,7 @@ function ListingPhotosManager({
                 size="small"
                 loading={isUploading}
                 loadingText="Uploading..."
-                disabled={isUploading || photos.length >= MAX_PHOTOS}
+                disabled={isMutatingPhotos || photos.length >= MAX_PHOTOS}
               >
                 {photos.length > 0 ? "Add more photos" : "Add photos"}
               </Button>
diff --git a/src/components/ProfileAccountSettings/ProfileAccountSettings.tsx b/src/components/ProfileAccountSettings/ProfileAccountSettings.tsx
@@ -205,7 +205,7 @@ function ProfileAccountSettings({
     firstName.reset();
   };
 
-  const handleNewslettePreferenceUpdate = async (formData: FormData) => {
+  const handleNewsletterPreferenceUpdate = async (formData: FormData) => {
     const nextNewsletterPreference =
       formData.get("newsletter_preference") === "true";
     console.log("Updating newsletter preference to", nextNewsletterPreference);
@@ -347,7 +347,7 @@ function ProfileAccountSettings({
 
       <ListItem editing={newsletterPreference.isEditing}>
         {newsletterPreference.isEditing ? (
-          <Form nested={true} action={handleNewslettePreferenceUpdate}>
+          <Form nested={true} action={handleNewsletterPreferenceUpdate}>
             <Field>
               <Label>Newsletter</Label>
               <Select

Original file line number	Diff line number	Diff line change
`@@ -129,6 +129,8 @@`
`129`	`129`	`"emailLabel": "You’re best off emailing",`
`130`	`130`	`"copyButton": {`
`131`	`131`	`"copied": "Copied!",`
	`132`	`+ "copying": "Copying...",`
	`133`	`+ "copyFailed": "Copy failed",`
`132`	`134`	`"copyAddress": "Copy address"`
`133`	`135`	`}`
`134`	`136`	`}`