From 785fd5885d700b5ff69bf6dccff7d5d33a932be9 Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Sun, 12 Apr 2026 13:08:03 +1000
Subject: [PATCH 1/5] add loading states and refactor to TSX

---
 src/app/(forms)/forgot-password/page.tsx      |   5 +-
 .../(forms)/profile/reset-password/page.tsx   |   5 +-
 ...tarUploadView.jsx => AvatarUploadView.tsx} |  61 ++++-
 .../AvatarUploadView/{index.js => index.ts}   |   0
 .../Button/{Button.jsx => Button.tsx}         | 140 +++++++----
 src/components/Button/{index.js => index.ts}  |   0
 ...{ButtonToDialog.jsx => ButtonToDialog.tsx} |  42 +++-
 .../ButtonToDialog/{index.js => index.ts}     |   0
 .../{ChatComposer.jsx => ChatComposer.tsx}    |  28 ++-
 .../ChatComposer/{index.js => index.ts}       |   0
 .../{ChatWindow.jsx => ChatWindow.tsx}        |  76 ++++--
 .../ChatWindow/{index.js => index.ts}         |   0
 .../{EmailSelector.jsx => EmailSelector.tsx}  |  59 +++--
 .../EmailSelector/{index.js => index.ts}      |   0
 src/components/IconButton/IconButton.jsx      |  70 ------
 src/components/IconButton/IconButton.tsx      | 159 ++++++++++++
 .../IconButton/{index.js => index.ts}         |   0
 ...osManager.jsx => ListingPhotosManager.tsx} |  79 ++++--
 .../{index.js => index.ts}                    |   0
 .../{ListingWrite.jsx => ListingWrite.tsx}    | 238 +++++++++++-------
 .../ListingWrite/{index.js => index.ts}       |   0
 ...ettings.jsx => ProfileAccountSettings.tsx} |  44 +++-
 .../{index.js => index.ts}                    |   0
 ...{ProfileActions.jsx => ProfileActions.tsx} |  31 ++-
 .../ProfileActions/{index.js => index.ts}     |   0
 src/components/SubmitButton/SubmitButton.jsx  |  20 --
 src/components/SubmitButton/SubmitButton.tsx  |  34 +++
 .../SubmitButton/{index.js => index.ts}       |   0
 28 files changed, 772 insertions(+), 319 deletions(-)
 rename src/components/AvatarUploadView/{AvatarUploadView.jsx => AvatarUploadView.tsx} (69%)
 rename src/components/AvatarUploadView/{index.js => index.ts} (100%)
 rename src/components/Button/{Button.jsx => Button.tsx} (66%)
 rename src/components/Button/{index.js => index.ts} (100%)
 rename src/components/ButtonToDialog/{ButtonToDialog.jsx => ButtonToDialog.tsx} (67%)
 rename src/components/ButtonToDialog/{index.js => index.ts} (100%)
 rename src/components/ChatComposer/{ChatComposer.jsx => ChatComposer.tsx} (70%)
 rename src/components/ChatComposer/{index.js => index.ts} (100%)
 rename src/components/ChatWindow/{ChatWindow.jsx => ChatWindow.tsx} (83%)
 rename src/components/ChatWindow/{index.js => index.ts} (100%)
 rename src/components/EmailSelector/{EmailSelector.jsx => EmailSelector.tsx} (71%)
 rename src/components/EmailSelector/{index.js => index.ts} (100%)
 delete mode 100644 src/components/IconButton/IconButton.jsx
 create mode 100644 src/components/IconButton/IconButton.tsx
 rename src/components/IconButton/{index.js => index.ts} (100%)
 rename src/components/ListingPhotosManager/{ListingPhotosManager.jsx => ListingPhotosManager.tsx} (80%)
 rename src/components/ListingPhotosManager/{index.js => index.ts} (100%)
 rename src/components/ListingWrite/{ListingWrite.jsx => ListingWrite.tsx} (73%)
 rename src/components/ListingWrite/{index.js => index.ts} (100%)
 rename src/components/ProfileAccountSettings/{ProfileAccountSettings.jsx => ProfileAccountSettings.tsx} (91%)
 rename src/components/ProfileAccountSettings/{index.js => index.ts} (100%)
 rename src/components/ProfileActions/{ProfileActions.jsx => ProfileActions.tsx} (80%)
 rename src/components/ProfileActions/{index.js => index.ts} (100%)
 delete mode 100644 src/components/SubmitButton/SubmitButton.jsx
 create mode 100644 src/components/SubmitButton/SubmitButton.tsx
 rename src/components/SubmitButton/{index.js => index.ts} (100%)

diff --git a/src/app/(forms)/forgot-password/page.tsx b/src/app/(forms)/forgot-password/page.tsx
index 5624990c..6e2b0b17 100644
--- a/src/app/(forms)/forgot-password/page.tsx
+++ b/src/app/(forms)/forgot-password/page.tsx
@@ -50,7 +50,10 @@ export default async function ForgotPassword(props: {
         {searchParams.error && (
           <FormMessage message={{ error: searchParams.error }} />
         )}
-        <SubmitButton formAction={forgotPasswordAction}>
+        <SubmitButton
+          formAction={forgotPasswordAction}
+          pendingText="Emailing..."
+        >
           Email me the link
         </SubmitButton>
       </Form>
diff --git a/src/app/(forms)/profile/reset-password/page.tsx b/src/app/(forms)/profile/reset-password/page.tsx
index 5c002b70..d782d9fc 100644
--- a/src/app/(forms)/profile/reset-password/page.tsx
+++ b/src/app/(forms)/profile/reset-password/page.tsx
@@ -67,7 +67,10 @@ export default async function ResetPassword(props: {
         {searchParams.error && (
           <FormMessage message={{ error: searchParams.error }} />
         )}
-        <SubmitButton formAction={resetPasswordAction}>
+        <SubmitButton
+          formAction={resetPasswordAction}
+          pendingText="Resetting..."
+        >
           Reset password
         </SubmitButton>
       </Form>
diff --git a/src/components/AvatarUploadView/AvatarUploadView.jsx b/src/components/AvatarUploadView/AvatarUploadView.tsx
similarity index 69%
rename from src/components/AvatarUploadView/AvatarUploadView.jsx
rename to src/components/AvatarUploadView/AvatarUploadView.tsx
index 9b1d9e85..3a95ad2d 100644
--- a/src/components/AvatarUploadView/AvatarUploadView.jsx
+++ b/src/components/AvatarUploadView/AvatarUploadView.tsx
@@ -30,7 +30,6 @@ const LoadingSpinner = styled("div")(({ theme }) => ({
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
-  color: "white",
   fontSize: "20px",
 
   position: "absolute",
@@ -42,6 +41,20 @@ const LoadingSpinner = styled("div")(({ theme }) => ({
   borderRadius: theme.corners.avatar,
 }));
 
+const AvatarComponent = Avatar as React.ComponentType<any>;
+
+type AvatarUploadViewProps = {
+  avatar?: string;
+  onChange: (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => void | Promise<void>;
+  onDelete: () => void | Promise<void>;
+  getAvatarUrl?: (filename: string) => string;
+  bucket: string;
+  inputHintShown?: boolean;
+  listingType?: string;
+};
+
 function AvatarUploadView({
   avatar,
   onChange,
@@ -50,19 +63,36 @@ function AvatarUploadView({
   bucket,
   inputHintShown = false,
   listingType,
-}) {
+}: AvatarUploadViewProps) {
   // Hidden file input that we'll trigger programmatically
-  const fileInputRef = useRef(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
   const [loading, setLoading] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const isBusy = loading || isDeleting;
 
   const handleFileSelect = () => {
+    if (isBusy) return;
     fileInputRef.current?.click();
   };
 
-  const handleUpload = async (event) => {
+  const handleUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
     setLoading(true);
-    await onChange(event);
-    setLoading(false);
+    try {
+      await onChange(event);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (isBusy) return;
+
+    setIsDeleting(true);
+    try {
+      await onDelete();
+    } finally {
+      setIsDeleting(false);
+    }
   };
 
   return (
@@ -75,11 +105,12 @@ function AvatarUploadView({
           accept="image/*"
           multiple={false}
           onChange={handleUpload}
+          disabled={isBusy}
           style={{ display: "none" }}
         />
 
         <StyledImgContainer>
-          <Avatar
+          <AvatarComponent
             bucket={bucket}
             filename={avatar}
             alt="Your avatar"
@@ -96,6 +127,9 @@ function AvatarUploadView({
             variant="secondary"
             size="small"
             onClick={handleFileSelect}
+            loading={loading}
+            loadingText="Uploading..."
+            disabled={isBusy}
           >
             Add
           </AvatarButton>
@@ -106,6 +140,9 @@ function AvatarUploadView({
               as={AvatarButton}
               variant="secondary"
               size="small"
+              loading={loading || isDeleting}
+              loadingText={loading ? "Uploading..." : "Deleting..."}
+              disabled={isBusy}
             >
               Edit
             </DropdownMenu.Button>
@@ -119,12 +156,20 @@ function AvatarUploadView({
                   onClick={handleFileSelect}
                   variant="secondary"
                   size="small"
+                  disabled={isBusy}
                 >
                   Replace
                 </Button>
               </DropdownMenu.Item>
               <DropdownMenu.Item>
-                <Button onClick={onDelete} variant="danger" size="small">
+                <Button
+                  onClick={handleDelete}
+                  variant="danger"
+                  size="small"
+                  loading={isDeleting}
+                  loadingText="Deleting..."
+                  disabled={isBusy}
+                >
                   Delete
                 </Button>
               </DropdownMenu.Item>
diff --git a/src/components/AvatarUploadView/index.js b/src/components/AvatarUploadView/index.ts
similarity index 100%
rename from src/components/AvatarUploadView/index.js
rename to src/components/AvatarUploadView/index.ts
diff --git a/src/components/Button/Button.jsx b/src/components/Button/Button.tsx
similarity index 66%
rename from src/components/Button/Button.jsx
rename to src/components/Button/Button.tsx
index d05ca5e7..1619e668 100644
--- a/src/components/Button/Button.jsx
+++ b/src/components/Button/Button.tsx
@@ -1,8 +1,42 @@
 import { Button as UnstyledButton } from "@headlessui/react";
 import Link from "next/link";
 import { styled } from "@pigment-css/react";
+import { forwardRef, type ElementType, type ReactNode, type Ref } from "react";
 
-const buttonStyles = ({ theme }) => ({
+export type ButtonVariant =
+  | "primary"
+  | "secondary"
+  | "danger"
+  | "send"
+  | "subtle";
+export type ButtonSize = "massive" | "large" | "normal" | "small" | "icon";
+export type ButtonWidth = "contained" | "full";
+
+type ButtonStyleProps = {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  width?: ButtonWidth;
+  disabled?: boolean;
+};
+
+export type ButtonProps = ButtonStyleProps &
+  Omit<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    keyof ButtonStyleProps | "children" | "onClick"
+  > &
+  Omit<
+    React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    keyof ButtonStyleProps | "children" | "onClick" | "href"
+  > & {
+    as?: ElementType;
+    children?: ReactNode;
+    href?: string;
+    loading?: boolean;
+    loadingText?: string;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+  };
+
+const buttonStyles = ({ theme }: { theme: any }): any => ({
   // Resets
   border: "none",
   appearance: "none",
@@ -163,54 +197,64 @@ const buttonStyles = ({ theme }) => ({
   ],
 });
 
-const StyledButton = styled(UnstyledButton)(buttonStyles);
-const StyledLink = styled(Link)(buttonStyles);
+const StyledButton = styled(UnstyledButton)<ButtonStyleProps>(buttonStyles);
+const StyledLink = styled(Link)<ButtonStyleProps>(buttonStyles);
 
-/**
- * @param {object} props
- * @param {string} [props.variant]
- * @param {boolean} [props.disabled]
- * @param {string} [props.href] - If provided, renders as Link. Otherwise renders as Button.
- * @param {React.ReactNode} props.children
- * @param {number} [props.tabIndex]
- * @param {boolean} [props.loading]
- * @param {string} [props.loadingText]
- * @param {string} [props.type]
- * @param {string} [props.size]
- */
-export default function Button({
-  variant = "secondary",
-  disabled = false,
-  href = undefined,
-  children,
-  tabIndex = 0,
-  loading = false,
-  loadingText = "Loading...",
-  type = "button",
-  size = "normal",
-  ...props
-}) {
-  const isDisabled = disabled || loading;
+const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
+  function Button(
+    {
+      variant = "secondary",
+      disabled = false,
+      href = undefined,
+      children,
+      tabIndex = 0,
+      loading = false,
+      loadingText = "Loading...",
+      type = "button",
+      size = "normal",
+      ...props
+    },
+    ref
+  ) {
+    const isLink = Boolean(href);
+    const isLoading = loading && !isLink;
+    const isDisabled = disabled || isLoading;
+    const buttonContent = <span>{isLoading ? loadingText : children}</span>;
 
-  const sharedProps = {
-    disabled: isDisabled,
-    variant,
-    tabIndex: isDisabled ? -1 : tabIndex,
-    "aria-disabled": isDisabled,
-    size,
-    ...props,
-  };
+    if (href) {
+      return (
+        <StyledLink
+          href={href}
+          ref={ref as Ref<HTMLAnchorElement>}
+          variant={variant}
+          tabIndex={isDisabled ? -1 : tabIndex}
+          aria-disabled={isDisabled || undefined}
+          aria-busy={isLoading || undefined}
+          size={size}
+          disabled={isDisabled}
+          {...props}
+        >
+          {buttonContent}
+        </StyledLink>
+      );
+    }
 
-  const buttonContent = <span>{loading ? loadingText : children}</span>;
+    return (
+      <StyledButton
+        type={type}
+        ref={ref as Ref<HTMLButtonElement>}
+        disabled={isDisabled}
+        variant={variant}
+        tabIndex={isDisabled ? -1 : tabIndex}
+        aria-disabled={isDisabled || undefined}
+        aria-busy={isLoading || undefined}
+        size={size}
+        {...props}
+      >
+        {buttonContent}
+      </StyledButton>
+    );
+  }
+);
 
-  // Render either a button or a link based on the presence of href
-  return href ? (
-    <StyledLink href={href} {...sharedProps}>
-      {buttonContent}
-    </StyledLink>
-  ) : (
-    <StyledButton type={type} {...sharedProps}>
-      {buttonContent}
-    </StyledButton>
-  );
-}
+export default Button;
diff --git a/src/components/Button/index.js b/src/components/Button/index.ts
similarity index 100%
rename from src/components/Button/index.js
rename to src/components/Button/index.ts
diff --git a/src/components/ButtonToDialog/ButtonToDialog.jsx b/src/components/ButtonToDialog/ButtonToDialog.tsx
similarity index 67%
rename from src/components/ButtonToDialog/ButtonToDialog.jsx
rename to src/components/ButtonToDialog/ButtonToDialog.tsx
index c09377d8..d56b8aa2 100644
--- a/src/components/ButtonToDialog/ButtonToDialog.jsx
+++ b/src/components/ButtonToDialog/ButtonToDialog.tsx
@@ -5,6 +5,7 @@ import Button from "@/components/Button";
 import SubmitButton from "@/components/SubmitButton";
 
 import { styled } from "@pigment-css/react";
+import { useState, type ReactNode } from "react";
 
 const DialogContent = styled(Dialog.Content)(({ theme }) => ({
   background: "white",
@@ -44,6 +45,19 @@ const DialogOverlay = styled(Dialog.Overlay)({
   zIndex: 3, // Stop map controls, AvatarButton, etc from showing above overlay and dialog
 });
 
+type ButtonToDialogProps = {
+  variant?: "primary" | "secondary" | "danger";
+  size?: "massive" | "large" | "normal" | "small";
+  initialButtonText: ReactNode;
+  dialogTitle: ReactNode;
+  children: ReactNode;
+  confirmButtonText?: ReactNode;
+  confirmLoadingText?: string;
+  cancelButtonText?: ReactNode;
+  action?: React.FormHTMLAttributes<HTMLFormElement>["action"];
+  onSubmit?: React.FormEventHandler<HTMLFormElement>;
+};
+
 function ButtonToDialog({
   variant = "danger",
   size,
@@ -51,11 +65,33 @@ function ButtonToDialog({
   dialogTitle,
   children,
   confirmButtonText,
+  confirmLoadingText,
   cancelButtonText = "No, cancel",
   action,
   onSubmit,
   // ...props // Setting this on Button (for size etc) seems to stop the dialog from opening
-}) {
+}: ButtonToDialogProps) {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const resolvedConfirmLoadingText =
+    confirmLoadingText || (variant === "danger" ? "Deleting..." : "Working...");
+
+  const handleSubmit: React.FormEventHandler<HTMLFormElement> | undefined =
+    onSubmit
+      ? async (event) => {
+          if (isSubmitting) {
+            event.preventDefault();
+            return;
+          }
+
+          setIsSubmitting(true);
+          try {
+            await onSubmit(event);
+          } finally {
+            setIsSubmitting(false);
+          }
+        }
+      : undefined;
+
   return (
     <Dialog.Root>
       <Dialog.Trigger asChild>
@@ -71,10 +107,12 @@ function ButtonToDialog({
         </Text>
         <Buttons>
           {(action || onSubmit) && (
-            <form action={action} onSubmit={onSubmit}>
+            <form action={action} onSubmit={handleSubmit}>
               <SubmitButton
                 variant={variant !== "danger" ? "primary" : "danger"}
                 width="contained"
+                loading={isSubmitting}
+                loadingText={resolvedConfirmLoadingText}
                 // tabIndex={undefined} // Doesn't work. See below.
                 autoFocus={variant === "danger" ? false : undefined} // Doesn't work. TODO: Make it so this button isn't tabbed to by default (but can be for accessibilty)
               >
diff --git a/src/components/ButtonToDialog/index.js b/src/components/ButtonToDialog/index.ts
similarity index 100%
rename from src/components/ButtonToDialog/index.js
rename to src/components/ButtonToDialog/index.ts
diff --git a/src/components/ChatComposer/ChatComposer.jsx b/src/components/ChatComposer/ChatComposer.tsx
similarity index 70%
rename from src/components/ChatComposer/ChatComposer.jsx
rename to src/components/ChatComposer/ChatComposer.tsx
index e72372dd..7a05fc30 100644
--- a/src/components/ChatComposer/ChatComposer.jsx
+++ b/src/components/ChatComposer/ChatComposer.tsx
@@ -1,5 +1,4 @@
 import Textarea from "@/components/Textarea";
-import SubmitButton from "@/components/SubmitButton";
 import IconButton from "@/components/IconButton";
 import { styled } from "@pigment-css/react";
 import FormMessage from "@/components/FormMessage";
@@ -27,6 +26,18 @@ const StyledIconButton = styled(IconButton)(({ theme }) => ({
   marginBottom: "0.6rem", // TODO: Make dynamic. Since we're aligning items to the bottom, we need to manually set this to appear horizontally centered
 }));
 
+const TextareaComponent = Textarea as React.ComponentType<any>;
+
+type ChatComposerProps = {
+  onSubmit: React.FormEventHandler<HTMLFormElement>;
+  message: string;
+  handleMessageChange: React.ChangeEventHandler<HTMLTextAreaElement>;
+  error?: string | null;
+  recipientName?: string;
+  isDemo?: boolean;
+  isSending?: boolean;
+};
+
 function ChatComposer({
   onSubmit,
   message,
@@ -34,26 +45,31 @@ function ChatComposer({
   error,
   recipientName,
   isDemo,
-}) {
+  isSending = false,
+}: ChatComposerProps) {
+  const isSendDisabled = !message.trim() || (!isDemo && isSending);
+
   return (
     <ChatComposerForm>
       {error && <FormMessage message={{ error: error }} />}
       <ChatComposerInner onSubmit={onSubmit}>
-        <Textarea
+        <TextareaComponent
           variant="chat"
           placeholder={`Send a message${recipientName && ` to ${recipientName}`}...`}
           value={message}
           onChange={handleMessageChange}
+          disabled={!isDemo && isSending}
           rows={1}
         />
-        {/* <SubmitButton pendingText="Sending...">Send</SubmitButton> */}
         <StyledIconButton
           type={isDemo ? "button" : "submit"}
           href={isDemo ? "/#drop-off" : undefined}
           icon="send"
           variant="send"
-          // TODO: Some sort of Aria label to indicate this is a 'Send' button
-          disabled={!message.trim()}
+          aria-label="Send"
+          loading={!isDemo && isSending}
+          loadingLabel="Sending..."
+          disabled={isSendDisabled}
         />
       </ChatComposerInner>
     </ChatComposerForm>
diff --git a/src/components/ChatComposer/index.js b/src/components/ChatComposer/index.ts
similarity index 100%
rename from src/components/ChatComposer/index.js
rename to src/components/ChatComposer/index.ts
diff --git a/src/components/ChatWindow/ChatWindow.jsx b/src/components/ChatWindow/ChatWindow.tsx
similarity index 83%
rename from src/components/ChatWindow/ChatWindow.jsx
rename to src/components/ChatWindow/ChatWindow.tsx
index fbb8d006..093a0d84 100644
--- a/src/components/ChatWindow/ChatWindow.jsx
+++ b/src/components/ChatWindow/ChatWindow.tsx
@@ -13,6 +13,16 @@ import { formatWeekday } from "@/utils/dateUtils";
 import { styled } from "@pigment-css/react";
 import { useUnreadMessages } from "@/contexts/UnreadMessagesContext";
 
+type ChatWindowProps = {
+  isDrawer?: boolean;
+  user: any;
+  listing: any;
+  existingThread?: any;
+  isDemo?: boolean;
+};
+
+type ChatMessageRecord = any;
+
 const StyledChatWindow = styled("div")(({ theme }) => ({
   height: "100%",
   flex: 1,
@@ -89,25 +99,31 @@ const ChatWindow = memo(function ChatWindow({
   listing,
   existingThread = null,
   isDemo = false,
-}) {
+}: ChatWindowProps) {
   // const router = useRouter();
   // Move Supabase client creation outside of render
-  const supabase = isDemo ? null : useMemo(() => createClient(), []);
+  const supabase = useMemo(() => (isDemo ? null : createClient()), [isDemo]);
   const { setUnreadCount, markThreadAsRead } = useUnreadMessages();
 
   const [message, setMessage] = useState("");
-  const [threadId, setThreadId] = useState(existingThread?.id || null);
-  const [messages, setMessages] = useState([]);
-  const [messageSendError, setMessageSendError] = useState(null);
+  const [threadId, setThreadId] = useState<string | null>(
+    existingThread?.id || null
+  );
+  const [messages, setMessages] = useState<ChatMessageRecord[]>([]);
+  const [messageSendError, setMessageSendError] = useState<string | null>(null);
+  const [isSendingMessage, setIsSendingMessage] = useState(false);
+
+  function handleChatSendError(error: unknown) {
+    const errorMessage =
+      error instanceof Error ? error.message : "Something went wrong.";
 
-  function handleChatSendError(error) {
     // Turn the rate limiting message into something more friendly (original: new row violates row-level security policy for table "chat_messages")
-    if (error.message.includes("violates row-level security policy")) {
+    if (errorMessage.includes("violates row-level security policy")) {
       setMessageSendError(
         "You’ve sent too many messages. Please try again later."
       );
     } else {
-      setMessageSendError(error.message);
+      setMessageSendError(errorMessage);
     }
   }
 
@@ -123,7 +139,7 @@ const ChatWindow = memo(function ChatWindow({
 
   // Mark messages as read when thread is viewed
   useEffect(() => {
-    if (isDemo || !existingThread?.id || !user) return;
+    if (isDemo || !supabase || !existingThread?.id || !user) return;
 
     const markMessagesAsRead = async () => {
       try {
@@ -162,7 +178,7 @@ const ChatWindow = memo(function ChatWindow({
         }
 
         // Update the messages state
-        setMessages((prevMessages) =>
+        setMessages((prevMessages: ChatMessageRecord[]) =>
           prevMessages.map((msg) =>
             msg.sender_id !== user.id
               ? { ...msg, read_at: new Date().toISOString() }
@@ -171,7 +187,9 @@ const ChatWindow = memo(function ChatWindow({
         );
 
         // Update global unread count AND mark thread as read
-        setUnreadCount((prevCount) => Math.max(0, prevCount - unreadCount));
+        setUnreadCount((prevCount: number) =>
+          Math.max(0, prevCount - unreadCount)
+        );
         markThreadAsRead(existingThread.id);
 
         console.log("Messages marked as read, new unread count:", unreadCount);
@@ -191,7 +209,7 @@ const ChatWindow = memo(function ChatWindow({
   ]);
 
   async function initializeChat() {
-    if (isDemo) return;
+    if (isDemo || !supabase) return null;
 
     try {
       const { data: thread, error } = await supabase
@@ -211,7 +229,7 @@ const ChatWindow = memo(function ChatWindow({
 
       if (thread) {
         setThreadId(thread.id);
-        loadMessages(thread.id);
+        await loadMessages(thread.id);
         return thread;
       }
 
@@ -236,6 +254,8 @@ const ChatWindow = memo(function ChatWindow({
         return;
       }
 
+      if (!newThread?.id) return null;
+
       setThreadId(newThread.id);
       return newThread;
     } catch (error) {
@@ -244,8 +264,8 @@ const ChatWindow = memo(function ChatWindow({
     }
   }
 
-  async function loadMessages(threadId) {
-    if (isDemo) return;
+  async function loadMessages(threadId: string) {
+    if (isDemo || !supabase) return;
 
     const { data: messages, error } = await supabase
       .from("chat_messages_with_senders")
@@ -260,51 +280,56 @@ const ChatWindow = memo(function ChatWindow({
     setMessages(messages || []);
   }
 
-  async function handleSubmit(e) {
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
     setMessageSendError(null);
 
-    if (!message.trim()) return;
+    const messageToSend = message.trim();
+    if (!messageToSend || isSendingMessage) return;
 
+    setIsSendingMessage(true);
     try {
       if (threadId) {
-        await sendMessage(threadId);
+        await sendMessage(threadId, messageToSend);
         return;
       }
 
       const thread = await initializeChat();
-      if (thread) {
-        await sendMessage(thread.id);
+      if (thread?.id) {
+        await sendMessage(thread.id, messageToSend);
       }
     } catch (error) {
       handleChatSendError(error);
       return;
+    } finally {
+      setIsSendingMessage(false);
     }
   }
 
-  async function sendMessage(threadId) {
-    if (isDemo) return;
+  async function sendMessage(threadId: string, content: string) {
+    if (isDemo || !supabase) return;
 
     const { error } = await supabase
       .from("chat_messages")
       .insert({
         thread_id: threadId,
         sender_id: user.id,
-        content: message.trim(),
+        content,
       })
       .select();
 
     if (error) {
       handleChatSendError(error);
+      return;
     }
 
     // Message sent, clear message and reload messages
     setMessage("");
-    loadMessages(threadId);
+    await loadMessages(threadId);
   }
 
   // Optimize the textarea onChange handler
-  const handleMessageChange = (e) => {
+  const handleMessageChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setMessage(e.target.value);
   };
 
@@ -391,6 +416,7 @@ const ChatWindow = memo(function ChatWindow({
         recipientName={otherPersonName}
         error={messageSendError}
         isDemo={isDemo}
+        isSending={isSendingMessage}
       />
     </StyledChatWindow>
   );
diff --git a/src/components/ChatWindow/index.js b/src/components/ChatWindow/index.ts
similarity index 100%
rename from src/components/ChatWindow/index.js
rename to src/components/ChatWindow/index.ts
diff --git a/src/components/EmailSelector/EmailSelector.jsx b/src/components/EmailSelector/EmailSelector.tsx
similarity index 71%
rename from src/components/EmailSelector/EmailSelector.jsx
rename to src/components/EmailSelector/EmailSelector.tsx
index 435a13c4..abc48e43 100644
--- a/src/components/EmailSelector/EmailSelector.jsx
+++ b/src/components/EmailSelector/EmailSelector.tsx
@@ -13,6 +13,9 @@ import PostageStamp from "@/components/PostageStamp";
 import { styled } from "@pigment-css/react";
 import { useTranslations } from "next-intl";
 
+type EmailType = "support" | "dw" | "general" | "newsletter";
+type CopyStatus = "idle" | "copying" | "copied" | "error";
+
 export default function EmailSelector() {
   const searchParams = useSearchParams();
   const t = useTranslations("Contact");
@@ -24,7 +27,7 @@ export default function EmailSelector() {
   const address = searchParams.get("address");
 
   // Map via parameters to their corresponding addresses
-  const viaToAddressMap = {
+  const viaToAddressMap: Partial<Record<string, EmailType>> = {
     therot: "dw",
     // Add more mappings as needed:
     // podcast: "general",
@@ -32,7 +35,7 @@ export default function EmailSelector() {
   };
 
   // Determine the address: via mapping takes precedence, then address param, then default
-  let finalAddress = "general";
+  let finalAddress: string = "general";
   if (via && viaToAddressMap[via]) {
     finalAddress = viaToAddressMap[via];
   } else if (address) {
@@ -40,24 +43,40 @@ export default function EmailSelector() {
   }
 
   // Validate the final address against valid options
-  const validAddresses = ["support", "dw", "general", "newsletter"];
-  const validatedAddress = validAddresses.includes(finalAddress)
-    ? finalAddress
+  const validAddresses: EmailType[] = [
+    "support",
+    "dw",
+    "general",
+    "newsletter",
+  ];
+  const validatedAddress = validAddresses.includes(finalAddress as EmailType)
+    ? (finalAddress as EmailType)
     : "general";
 
   const [selectedEmailType, setSelectedEmailType] = useState(validatedAddress);
-  const [isCopied, setIsCopied] = useState(false);
+  const [copyStatus, setCopyStatus] = useState<CopyStatus>("idle");
 
   // Reset isCopied when selectedEmailType changes
   useEffect(() => {
-    setIsCopied(false);
+    setCopyStatus("idle");
   }, [selectedEmailType]);
 
-  const handleCopy = () => {
-    navigator.clipboard.writeText(
-      atob(siteConfig.encodedEmail[selectedEmailType])
-    );
-    setIsCopied(true);
+  const handleCopy = async () => {
+    if (copyStatus === "copying") return;
+
+    setCopyStatus("copying");
+    try {
+      await Promise.all([
+        navigator.clipboard.writeText(
+          atob(siteConfig.encodedEmail[selectedEmailType])
+        ),
+        new Promise((resolve) => setTimeout(resolve, 150)),
+      ]);
+      setCopyStatus("copied");
+    } catch (error) {
+      console.error("Error copying email address:", error);
+      setCopyStatus("error");
+    }
   };
 
   return (
@@ -70,7 +89,9 @@ export default function EmailSelector() {
           <Select
             id="contact"
             value={selectedEmailType}
-            onChange={(event) => setSelectedEmailType(event.target.value)}
+            onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
+              setSelectedEmailType(event.target.value as EmailType)
+            }
             required={true}
           >
             <option value="general">{t("contactOptions.general")}</option>
@@ -91,8 +112,16 @@ export default function EmailSelector() {
             </DecodedSpan>
           </EncodedEmailLink>
         </Field>
-        <Button onClick={handleCopy}>
-          {isCopied ? t("copyButton.copied") : t("copyButton.copyAddress")}
+        <Button
+          onClick={handleCopy}
+          loading={copyStatus === "copying"}
+          loadingText="Copying..."
+        >
+          {copyStatus === "copied"
+            ? t("copyButton.copied")
+            : copyStatus === "error"
+              ? "Copy failed"
+              : t("copyButton.copyAddress")}
         </Button>
       </SubSectionBottom>
     </FormSection>
diff --git a/src/components/EmailSelector/index.js b/src/components/EmailSelector/index.ts
similarity index 100%
rename from src/components/EmailSelector/index.js
rename to src/components/EmailSelector/index.ts
diff --git a/src/components/IconButton/IconButton.jsx b/src/components/IconButton/IconButton.jsx
deleted file mode 100644
index 250d39c9..00000000
--- a/src/components/IconButton/IconButton.jsx
+++ /dev/null
@@ -1,70 +0,0 @@
-"use client";
-
-import { useRouter } from "next/navigation";
-// import { Button as UnstyledButton } from "@headlessui/react";
-import Button from "@/components/Button";
-import {
-  X,
-  ArrowLeft,
-  ArrowUp,
-  ArrowDown,
-  EllipsisVertical,
-} from "lucide-react";
-
-import { styled } from "@pigment-css/react";
-
-const StyledButton = styled(Button)(({ theme }) => ({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-
-  variants: [
-    {
-      props: { breakpoint: "sm" },
-      style: {
-        display: "flex",
-        "@media (min-width: 768px)": {
-          display: "none",
-        },
-      },
-    },
-  ],
-}));
-
-function IconButton({
-  onClick,
-  variant = "subtle",
-  icon = "back",
-  breakpoint,
-  ...props
-}) {
-  const router = useRouter();
-
-  const handleClick = (e) => {
-    if (onClick) {
-      onClick(e);
-    }
-
-    if (!onClick && icon === "back") {
-      router.back();
-    }
-  };
-
-  return (
-    <StyledButton
-      size="icon"
-      variant={variant}
-      breakpoint={breakpoint}
-      onClick={handleClick}
-      {...props}
-    >
-      {icon === "close" && <X size={16} />}
-      {icon === "back" && <ArrowLeft size={16} />}
-      {icon === "maximize" || icon === "send" ? <ArrowUp size={16} /> : null}
-      {icon === "minimize" && <ArrowDown size={16} />}
-      {icon === "overflow" && <EllipsisVertical size={16} />}
-    </StyledButton>
-  );
-}
-
-export default IconButton;
diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
new file mode 100644
index 00000000..bcba783e
--- /dev/null
+++ b/src/components/IconButton/IconButton.tsx
@@ -0,0 +1,159 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import Button, { type ButtonProps } from "@/components/Button";
+import {
+  X,
+  ArrowLeft,
+  ArrowUp,
+  ArrowDown,
+  EllipsisVertical,
+} from "lucide-react";
+
+import { styled } from "@pigment-css/react";
+import { forwardRef } from "react";
+
+type IconButtonIcon =
+  | "back"
+  | "close"
+  | "maximize"
+  | "minimize"
+  | "overflow"
+  | "send";
+type IconButtonBreakpoint = "sm";
+
+type StyledButtonProps = {
+  breakpoint?: IconButtonBreakpoint;
+};
+
+export type IconButtonProps = Omit<
+  ButtonProps,
+  "children" | "size" | "loadingText"
+> &
+  StyledButtonProps & {
+    icon?: IconButtonIcon;
+    loading?: boolean;
+    loadingLabel?: string;
+  };
+
+const StyledButton = styled(Button)<StyledButtonProps>(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+
+  variants: [
+    {
+      props: { breakpoint: "sm" },
+      style: {
+        display: "flex",
+        "@media (min-width: 768px)": {
+          display: "none",
+        },
+      },
+    },
+  ],
+}));
+
+const iconLabels: Record<IconButtonIcon, string> = {
+  back: "Go back",
+  close: "Close",
+  maximize: "Expand",
+  minimize: "Collapse",
+  overflow: "More options",
+  send: "Send",
+};
+
+function SpinnerIcon() {
+  return (
+    <svg
+      aria-hidden="true"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <g>
+        <path d="M21 12a9 9 0 1 1-6.22-8.56" />
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          from="0 12 12"
+          to="360 12 12"
+          dur="0.8s"
+          repeatCount="indefinite"
+        />
+      </g>
+    </svg>
+  );
+}
+
+const IconButton = forwardRef<
+  HTMLButtonElement | HTMLAnchorElement,
+  IconButtonProps
+>(function IconButton(
+  {
+    onClick,
+    variant = "subtle",
+    icon = "back",
+    breakpoint,
+    loading = false,
+    loadingLabel,
+    "aria-label": ariaLabel,
+    disabled = false,
+    ...props
+  },
+  ref
+) {
+  const router = useRouter();
+  const accessibleLabel = loading
+    ? loadingLabel || ariaLabel || "Loading"
+    : ariaLabel || iconLabels[icon];
+
+  const handleClick: React.MouseEventHandler<HTMLElement> = (e) => {
+    if (loading || disabled) return;
+
+    if (onClick) {
+      onClick(e);
+    }
+
+    if (!onClick && icon === "back") {
+      router.back();
+    }
+  };
+
+  return (
+    <StyledButton
+      ref={ref}
+      size="icon"
+      variant={variant}
+      breakpoint={breakpoint}
+      onClick={handleClick}
+      aria-label={accessibleLabel}
+      aria-busy={loading || undefined}
+      disabled={disabled || loading}
+      {...props}
+    >
+      {loading ? (
+        <SpinnerIcon />
+      ) : (
+        <>
+          {icon === "close" && <X size={16} aria-hidden="true" />}
+          {icon === "back" && <ArrowLeft size={16} aria-hidden="true" />}
+          {icon === "maximize" || icon === "send" ? (
+            <ArrowUp size={16} aria-hidden="true" />
+          ) : null}
+          {icon === "minimize" && <ArrowDown size={16} aria-hidden="true" />}
+          {icon === "overflow" && (
+            <EllipsisVertical size={16} aria-hidden="true" />
+          )}
+        </>
+      )}
+    </StyledButton>
+  );
+});
+
+export default IconButton;
diff --git a/src/components/IconButton/index.js b/src/components/IconButton/index.ts
similarity index 100%
rename from src/components/IconButton/index.js
rename to src/components/IconButton/index.ts
diff --git a/src/components/ListingPhotosManager/ListingPhotosManager.jsx b/src/components/ListingPhotosManager/ListingPhotosManager.tsx
similarity index 80%
rename from src/components/ListingPhotosManager/ListingPhotosManager.jsx
rename to src/components/ListingPhotosManager/ListingPhotosManager.tsx
index 48f89c61..53265375 100644
--- a/src/components/ListingPhotosManager/ListingPhotosManager.jsx
+++ b/src/components/ListingPhotosManager/ListingPhotosManager.tsx
@@ -7,7 +7,12 @@ import RemoteImage from "@/components/RemoteImage";
 import Compressor from "compressorjs";
 import Dropzone from "react-dropzone";
 // import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
-import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
+import {
+  DragDropContext,
+  Droppable,
+  Draggable,
+  type DropResult,
+} from "@hello-pangea/dnd";
 
 import { styled } from "@pigment-css/react";
 
@@ -81,30 +86,49 @@ const MAX_DIMENSION = 2048; // Reasonable max dimension for listing photos
 const overSizedFileAlertSingular = `Your photo is too large. The maximum file size is ${MAX_MB}MB.`;
 const overSizedFileAlertPlural = `One or more of your photos are too large. The maximum file size is ${MAX_MB}MB per photo.`;
 
+const RemoteImageComponent = RemoteImage as React.ComponentType<any>;
+const uploadListingPhotoAction = uploadListingPhoto as (
+  file: File,
+  listingSlug?: string
+) => Promise<string>;
+const deleteListingPhotoAction = deleteListingPhoto as (
+  filePath: string,
+  listingSlug?: string
+) => Promise<string[] | null>;
+
+type ListingPhotosManagerProps = {
+  initialPhotos?: string[];
+  listingSlug?: string;
+  onPhotosChange?: (photos: string[]) => void;
+  isNewListing?: boolean;
+};
+
 function ListingPhotosManager({
   initialPhotos = [],
   listingSlug,
   onPhotosChange,
   isNewListing = false,
-}) {
+}: ListingPhotosManagerProps) {
   const [photos, setPhotos] = useState(initialPhotos);
   const [isUploading, setIsUploading] = useState(false);
-  const [isDragging, setIsDragging] = useState(false);
+  const [deletingPhoto, setDeletingPhoto] = useState<string | null>(null);
 
-  const compressFile = (file) => {
-    return new Promise((resolve, reject) => {
+  const compressFile = (file: File) => {
+    return new Promise<File>((resolve, reject) => {
       new Compressor(file, {
         quality: 0.8, // Good balance between quality and compression
         maxWidth: MAX_DIMENSION, // Reasonable max dimension for property photos
         maxHeight: MAX_DIMENSION,
         convertSize: 1000000, // Convert PNGs to JPEGs if they're over ~1MB
-        success: (result) => resolve(result),
+        success: (result) => resolve(result as File),
         error: (err) => reject(err),
       });
     });
   };
 
-  const handleDrop = async (acceptedFiles) => {
+  const handleDrop = async (acceptedFiles: File[]) => {
+    if (isUploading) return;
+
     console.log("Dropped files:", acceptedFiles);
 
     // Convert FileList to Array and process as if they came from input
@@ -141,9 +165,9 @@ function ListingPhotosManager({
       );
 
       const uploadPromises = compressedFiles.map((file) =>
-        uploadListingPhoto(file, !isNewListing ? listingSlug : undefined)
+        uploadListingPhotoAction(file, !isNewListing ? listingSlug : undefined)
       );
-      const newFilenames = await Promise.all(uploadPromises);
+      const newFilenames = (await Promise.all(uploadPromises)) as string[];
       const newPhotos = [...photos, ...newFilenames];
       setPhotos(newPhotos);
       onPhotosChange?.(newPhotos);
@@ -151,9 +175,18 @@ function ListingPhotosManager({
       // console.error("Upload error details:", error);
 
       // Handle different error structures from Supabase
-      if (error?.statusCode === "413" || error?.error?.statusCode === "413") {
+      const uploadError = error as {
+        statusCode?: string;
+        error?: { statusCode?: string };
+        message?: string;
+      };
+
+      if (
+        uploadError?.statusCode === "413" ||
+        uploadError?.error?.statusCode === "413"
+      ) {
         alert(overSizedFileAlertPlural);
-      } else if (error?.message?.includes("max_photos")) {
+      } else if (uploadError?.message?.includes("max_photos")) {
         alert(`You can only upload up to ${MAX_PHOTOS} photos`);
       } else {
         alert("There was an error uploading your photos. Please try again.");
@@ -163,7 +196,10 @@ function ListingPhotosManager({
     }
   };
 
-  const handlePhotoDelete = async (photoToDelete) => {
+  const handlePhotoDelete = async (photoToDelete: string) => {
+    if (deletingPhoto) return;
+
+    setDeletingPhoto(photoToDelete);
     try {
       // Immediately remove from react-beautiful-dnd's context
       const newPhotos = photos.filter((photo) => photo !== photoToDelete);
@@ -171,7 +207,7 @@ function ListingPhotosManager({
       onPhotosChange?.(newPhotos);
 
       // Then attempt the delete operation
-      await deleteListingPhoto(photoToDelete, listingSlug);
+      await deleteListingPhotoAction(photoToDelete, listingSlug);
     } catch (error) {
       console.error("Error deleting photo:", error);
 
@@ -179,10 +215,12 @@ function ListingPhotosManager({
       setPhotos(photos);
       onPhotosChange?.(photos);
       alert("Failed to delete photo. Please try again.");
+    } finally {
+      setDeletingPhoto(null);
     }
   };
 
-  const handleDragEnd = (result) => {
+  const handleDragEnd = (result: DropResult) => {
     if (!result.destination) return;
 
     const items = Array.from(photos);
@@ -230,7 +268,7 @@ function ListingPhotosManager({
                                 opacity: snapshot.isDragging ? 0.8 : 1,
                               }}
                             >
-                              <RemoteImage
+                              <RemoteImageComponent
                                 bucket="listing_photos"
                                 filename={filename}
                                 alt={`Photo ${index + 1}`}
@@ -240,6 +278,9 @@ function ListingPhotosManager({
                               <Button
                                 variant="danger"
                                 size="small"
+                                loading={deletingPhoto === filename}
+                                loadingText="Deleting..."
+                                disabled={deletingPhoto !== null}
                                 onClick={() => handlePhotoDelete(filename)}
                               >
                                 Delete
@@ -277,13 +318,11 @@ function ListingPhotosManager({
                 as="span"
                 variant="secondary"
                 size="small"
+                loading={isUploading}
+                loadingText="Uploading..."
                 disabled={isUploading || photos.length >= MAX_PHOTOS}
               >
-                {isUploading
-                  ? "Uploading..."
-                  : photos.length > 0
-                    ? "Add more photos"
-                    : "Add photos"}
+                {photos.length > 0 ? "Add more photos" : "Add photos"}
               </Button>
             </label>
           </DropzoneContents>
diff --git a/src/components/ListingPhotosManager/index.js b/src/components/ListingPhotosManager/index.ts
similarity index 100%
rename from src/components/ListingPhotosManager/index.js
rename to src/components/ListingPhotosManager/index.ts
diff --git a/src/components/ListingWrite/ListingWrite.jsx b/src/components/ListingWrite/ListingWrite.tsx
similarity index 73%
rename from src/components/ListingWrite/ListingWrite.jsx
rename to src/components/ListingWrite/ListingWrite.tsx
index 7c775b00..a77ae090 100644
--- a/src/components/ListingWrite/ListingWrite.jsx
+++ b/src/components/ListingWrite/ListingWrite.tsx
@@ -49,41 +49,69 @@ const AdditionalSettings = styled("footer")(({ theme }) => ({
   gap: `calc(${theme.spacing.unit} * 1.5)`,
 }));
 
+const AvatarUploadManagerComponent =
+  AvatarUploadManager as React.ComponentType<any>;
+const InputComponent = Input as React.ComponentType<any>;
+const InputHintComponent = InputHint as React.ComponentType<any>;
+const ListingPhotosManagerComponent =
+  ListingPhotosManager as React.ComponentType<any>;
+const LocationSelectComponent = LocationSelect as React.ComponentType<any>;
+const MultiInputComponent = MultiInput as React.ComponentType<any>;
+const SelectComponent = Select as React.ComponentType<any>;
+const TextareaComponent = Textarea as React.ComponentType<any>;
+
+type Coordinates = {
+  latitude: number;
+  longitude: number;
+};
+
+type ListingErrors = Partial<Record<"name" | "location", string>>;
+
+type ListingWriteProps = {
+  initialListing?: any;
+  user: any;
+  profile: any;
+};
+
 // Component
-export default function ListingWrite({ initialListing, user, profile }) {
-  const { type } = useParams();
+export default function ListingWrite({
+  initialListing,
+  user,
+  profile,
+}: ListingWriteProps) {
+  const { type } = useParams<{ type?: string }>();
   const router = useRouter();
 
-  const listingType = initialListing?.type || type;
+  const listingType = initialListing?.type || type || "residential";
 
   // Update error state to handle both field and global errors
-  const [errors, setErrors] = useState({});
+  const [errors, setErrors] = useState<ListingErrors>({});
   const [globalError, setGlobalError] = useState("");
 
   // Handle form submission state
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   // Populate editable fields
-  const [avatar, setAvatar] = useState(
-    initialListing ? initialListing.avatar : ""
+  const [avatar, setAvatar] = useState<string>(
+    initialListing ? initialListing.avatar || "" : ""
   );
-  const [name, setName] = useState(
+  const [name, setName] = useState<string>(
     listingType === "residential"
-      ? profile.first_name // Use profile.first_name for residential listings
+      ? profile.first_name || "" // Use profile.first_name for residential listings
       : initialListing
-        ? initialListing.name
+        ? initialListing.name || ""
         : "" // Use listing name for others
   );
 
-  const [description, setDescription] = useState(
-    initialListing ? initialListing.description : ""
+  const [description, setDescription] = useState<string>(
+    initialListing ? initialListing.description || "" : ""
   );
 
-  const [countryCode, setCountryCode] = useState(
-    initialListing ? initialListing.country_code : ""
+  const [countryCode, setCountryCode] = useState<string>(
+    initialListing ? initialListing.country_code || "" : ""
   );
 
-  const [coordinates, setCoordinates] = useState(
+  const [coordinates, setCoordinates] = useState<Coordinates | null>(
     initialListing
       ? {
           latitude: initialListing.latitude,
@@ -92,63 +120,67 @@ export default function ListingWrite({ initialListing, user, profile }) {
       : null
   );
 
-  const [areaName, setAreaName] = useState(
-    initialListing ? initialListing.area_name : ""
+  const [areaName, setAreaName] = useState<string>(
+    initialListing ? initialListing.area_name || "" : ""
   );
 
-  const [acceptedItems, setAcceptedItems] = useState(
-    initialListing ? initialListing.accepted_items : [""]
+  const [acceptedItems, setAcceptedItems] = useState<string[]>(
+    initialListing ? initialListing.accepted_items || [""] : [""]
   );
-  const [rejectedItems, setRejectedItems] = useState(
-    initialListing ? initialListing.rejected_items : []
+  const [rejectedItems, setRejectedItems] = useState<string[]>(
+    initialListing ? initialListing.rejected_items || [] : []
   );
-  const [donatedItems, setDonatedItems] = useState(
-    initialListing ? initialListing.donated_items : [""]
+  const [donatedItems, setDonatedItems] = useState<string[]>(
+    initialListing ? initialListing.donated_items || [""] : [""]
   );
 
-  const [photos, setPhotos] = useState(
-    initialListing ? initialListing.photos : []
+  const [photos, setPhotos] = useState<string[]>(
+    initialListing ? initialListing.photos || [] : []
   );
-  const [links, setLinks] = useState(
-    initialListing ? initialListing.links : []
+  const [links, setLinks] = useState<string[]>(
+    initialListing ? initialListing.links || [] : []
   );
-  const [visibility, setVisibility] = useState(
+  const [visibility, setVisibility] = useState<boolean>(
     initialListing ? initialListing.visibility : true
   );
 
-  const [isStub, setIsStub] = useState(
+  const [isStub, setIsStub] = useState<boolean>(
     initialListing ? initialListing.is_stub : false
   );
 
   // Other states
   const [feedbackMessage, setFeedbackMessage] = useState("");
-  const [pendingPhotos, setPendingPhotos] = useState([]);
+  const [pendingPhotos, setPendingPhotos] = useState<string[]>([]);
 
-  async function handleDeleteListing(event) {
+  async function handleDeleteListing(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
-    // console.log("Deleting listing with slug:", initialListing.slug);
-    const response = await deleteListingAction(initialListing.slug);
-    if (response.success) {
-      router.push(`/profile/?message=${response.message}`);
-    } else {
-      setFeedbackMessage(response.message);
+
+    setFeedbackMessage("");
+    try {
+      const response = await deleteListingAction(initialListing.slug);
+      if (response.success) {
+        router.push(`/profile/?message=${response.message}`);
+      } else {
+        setFeedbackMessage(response.message);
+      }
+    } catch (error) {
+      console.error("Error deleting listing:", error);
+      setFeedbackMessage("Hmm, something’s not right. Mind trying again?");
     }
   }
 
   // Form handling logic here
-  async function handleSubmit(event) {
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
 
     if (isSubmitting) return;
 
-    setIsSubmitting(true);
-
     // Reset all errors
     setErrors({});
     setGlobalError("");
 
     // Validate required fields
-    const nextErrors = {};
+    const nextErrors: ListingErrors = {};
     let validatedName = name; // Store the validated name
 
     if (listingType === "residential") {
@@ -158,7 +190,7 @@ export default function ListingWrite({ initialListing, user, profile }) {
         if (!validation.isValid) {
           nextErrors.name = validation.error;
         } else {
-          validatedName = validation.value; // Store the trimmed value
+          validatedName = validation.value ?? ""; // Store the trimmed value
         }
       }
     } else {
@@ -167,11 +199,13 @@ export default function ListingWrite({ initialListing, user, profile }) {
       if (!validation.isValid) {
         nextErrors.name = `You can't have an empty ${listingType} name.`;
       } else {
-        validatedName = validation.value; // Store the trimmed value
+        validatedName = validation.value ?? ""; // Store the trimmed value
       }
     }
 
-    if (!coordinates) {
+    const selectedCoordinates = coordinates;
+
+    if (!selectedCoordinates) {
       nextErrors.location = "Please select a location.";
     }
 
@@ -181,6 +215,11 @@ export default function ListingWrite({ initialListing, user, profile }) {
       return;
     }
 
+    if (!selectedCoordinates) return;
+
+    setIsSubmitting(true);
+    let shouldResetSubmitting = true;
+
     try {
       // For residential listings, update the profile first name if changed
       if (listingType === "residential" && profile.first_name !== name) {
@@ -194,31 +233,36 @@ export default function ListingWrite({ initialListing, user, profile }) {
         formData.append("first_name", validatedName);
         const result = await updateFirstNameAction(formData);
         if (result?.error) {
-          setErrors({ name: result.error });
+          setErrors({ name: String(result.error) });
           return;
         }
       }
 
       const supabase = createClient();
       const {
-        data: { user },
+        data: { user: activeUser },
       } = await supabase.auth.getUser();
 
+      if (!activeUser) {
+        setGlobalError("Please sign in and then try again.");
+        return;
+      }
+
       // Prepare the listing data
       const listingData = {
         // Add the id if it's an existing listing, so we know which to update
         ...(initialListing && { id: initialListing.id }),
-        owner_id: user.id,
+        owner_id: activeUser.id,
         type: listingType,
         ...(listingType !== "residential" && avatar && { avatar }),
         // Only include name for non-residential listings
         ...(listingType !== "residential" && { name: validatedName }),
         description,
-        location: `POINT(${coordinates.longitude} ${coordinates.latitude})`,
+        location: `POINT(${selectedCoordinates.longitude} ${selectedCoordinates.latitude})`,
         // Temporarily store the coordinates as longitude and latitude floats in the database as well
         // ...because I can't get the geometry type to convert to to long and lat dynamically if a user goes direct to a listing, e.g. http://localhost:3000/map?listing=9xvN9zxH0rzZ
-        longitude: coordinates.longitude,
-        latitude: coordinates.latitude,
+        longitude: selectedCoordinates.longitude,
+        latitude: selectedCoordinates.latitude,
         area_name: areaName,
         country_code: countryCode,
         accepted_items: acceptedItems.filter((item) => item.trim() !== ""),
@@ -235,11 +279,17 @@ export default function ListingWrite({ initialListing, user, profile }) {
       const { data, error } = await createOrUpdateListingAction(listingData);
 
       if (error) {
-        setGlobalError(error);
+        setGlobalError(String(error));
+        return;
+      }
+
+      if (!data?.slug) {
+        setGlobalError("Something went wrong. Please try again later.");
         return;
       }
 
       // Redirect to the new/updated listing
+      shouldResetSubmitting = false;
       router.push(
         `/listings/${data.slug}?status=${initialListing ? "updated" : "created"}`
       );
@@ -247,8 +297,7 @@ export default function ListingWrite({ initialListing, user, profile }) {
       console.error("Error in handleSubmit:", error);
       setGlobalError("An unexpected error occurred. Please try again later.");
     } finally {
-      // Only reset isSubmitting if we're not navigating away
-      if (globalError) {
+      if (shouldResetSubmitting) {
         setIsSubmitting(false);
       }
     }
@@ -270,19 +319,19 @@ export default function ListingWrite({ initialListing, user, profile }) {
     setLinks([...links, ""]);
     // }
   };
-  const handleAcceptedItemChange = (index, value) => {
+  const handleAcceptedItemChange = (index: number, value: string) => {
     const newItems = [...acceptedItems];
     newItems[index] = value;
     setAcceptedItems(newItems);
   };
 
-  const handleRejectedItemChange = (index, value) => {
+  const handleRejectedItemChange = (index: number, value: string) => {
     const newItems = [...rejectedItems];
     newItems[index] = value;
     setRejectedItems(newItems);
   };
 
-  const handleLinksChange = (index, value) => {
+  const handleLinksChange = (index: number, value: string) => {
     const newLinks = [...links];
     newLinks[index] = value;
     setLinks(newLinks);
@@ -293,7 +342,7 @@ export default function ListingWrite({ initialListing, user, profile }) {
       {initialListing && initialListing.is_stub && <Lozenge>Stub</Lozenge>}
       <Form onSubmit={handleSubmit}>
         {listingType === "residential" ? (
-          <AvatarUploadManager
+          <AvatarUploadManagerComponent
             initialAvatar={profile?.avatar || ""}
             bucket="avatars"
             entityId={user.id}
@@ -302,7 +351,7 @@ export default function ListingWrite({ initialListing, user, profile }) {
             listingType={listingType}
           />
         ) : (
-          <AvatarUploadManager
+          <AvatarUploadManagerComponent
             initialAvatar={avatar}
             bucket="listing_avatars"
             entityId={initialListing?.slug}
@@ -319,22 +368,24 @@ export default function ListingWrite({ initialListing, user, profile }) {
           {listingType === "residential" ? (
             <Field>
               <Label htmlFor="first_name">Your first name</Label>
-              <Input
+              <InputComponent
                 id="first_name"
                 name="first_name"
                 {...FIELD_CONFIGS.firstName}
                 defaultValue={profile.first_name}
-                onChange={(event) => setName(event.target.value)}
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                  setName(event.target.value)
+                }
                 error={errors.name}
               />
-              <InputHint>
-                {errors.name ? errors.name : FIELD_CONFIGS.firstName.hint}
-              </InputHint>
+              <InputHintComponent>
+                {errors.name || "Use your first name or a nickname."}
+              </InputHintComponent>
             </Field>
           ) : (
             <Field>
               <Label htmlFor="name">Place name</Label>
-              <Input
+              <InputComponent
                 id="name"
                 name="name"
                 required={true}
@@ -342,16 +393,20 @@ export default function ListingWrite({ initialListing, user, profile }) {
                 minLength={FIELD_CONFIGS.firstName.minLength}
                 placeholder={`Your ${listingType === "business" ? "business’" : `${listingType}’s`} name`}
                 value={name}
-                onChange={(event) => setName(event.target.value)}
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                  setName(event.target.value)
+                }
                 error={errors.name}
               />
               {errors.name && (
-                <InputHint variant="error">{errors.name}</InputHint>
+                <InputHintComponent variant="error">
+                  {errors.name}
+                </InputHintComponent>
               )}
             </Field>
           )}
 
-          <LocationSelect
+          <LocationSelectComponent
             listingType={listingType}
             initialPlaceholderText={
               initialListing
@@ -374,7 +429,7 @@ export default function ListingWrite({ initialListing, user, profile }) {
           {listingType === "business" ? (
             <Field>
               <Label htmlFor="description">Donation details</Label>
-              <Textarea
+              <TextareaComponent
                 id="description"
                 rows={6}
                 maxLength={DESCRIPTION_MAX_CHARACTERS}
@@ -382,19 +437,21 @@ export default function ListingWrite({ initialListing, user, profile }) {
                 resize="vertical"
                 placeholder="Your donation details"
                 value={description}
-                onChange={(event) => setDescription(event.target.value)}
+                onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) =>
+                  setDescription(event.target.value)
+                }
               />
-              <InputHint>
+              <InputHintComponent>
                 What kind of scraps you have to give away and the collection
                 details. Save any links for the dedicated section, below.
-              </InputHint>
+              </InputHintComponent>
             </Field>
           ) : (
             <Field>
               <Label htmlFor="description" required={false}>
                 Short description or instructions
               </Label>
-              <Textarea
+              <TextareaComponent
                 id="description"
                 rows={listingType === "residential" ? 4 : 5}
                 maxLength={DESCRIPTION_MAX_CHARACTERS}
@@ -402,16 +459,18 @@ export default function ListingWrite({ initialListing, user, profile }) {
                 resize="vertical"
                 placeholder={`About your ${listingType === "residential" ? "listing" : listingType}`}
                 value={description}
-                onChange={(event) => setDescription(event.target.value)}
+                onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) =>
+                  setDescription(event.target.value)
+                }
               />
-              <InputHint>
+              <InputHintComponent>
                 {listingType === "community"
                   ? "Opening hours and composting facilities."
                   : "Your composting set up and general availability."}{" "}
                 Save the scraps you accept{" "}
                 {listingType !== "residential" && "and any links"} for the
                 dedicated section{listingType !== "residential" && "s"}, below.
-              </InputHint>
+              </InputHintComponent>
             </Field>
           )}
         </FormSection>
@@ -426,7 +485,7 @@ export default function ListingWrite({ initialListing, user, profile }) {
               </p>
             </FormSectionHeader>
 
-            <MultiInput
+            <MultiInputComponent
               label="What scraps do you accept?"
               addButtonText="Add an item"
               addAnotherButtonText="Add another item"
@@ -439,7 +498,7 @@ export default function ListingWrite({ initialListing, user, profile }) {
               limit={12}
             />
 
-            <MultiInput
+            <MultiInputComponent
               label="What scraps do you not accept?"
               addButtonText="Add an item"
               addAnotherButtonText="Add another item"
@@ -471,7 +530,7 @@ export default function ListingWrite({ initialListing, user, profile }) {
             <Label htmlFor="photo-upload-button" required={false}>
               Photos
             </Label>
-            <ListingPhotosManager
+            <ListingPhotosManagerComponent
               initialPhotos={initialListing ? photos : pendingPhotos}
               listingSlug={initialListing?.slug}
               onPhotosChange={initialListing ? setPhotos : setPendingPhotos}
@@ -481,7 +540,7 @@ export default function ListingWrite({ initialListing, user, profile }) {
 
           {/* TODO: Selecting field should highlight button, just like every other input */}
           {listingType !== "residential" && (
-            <MultiInput
+            <MultiInputComponent
               label="External links"
               required={false}
               addButtonText="Add link"
@@ -508,17 +567,17 @@ export default function ListingWrite({ initialListing, user, profile }) {
 
             <Field>
               <Label htmlFor="visibility">Map visibility</Label>
-              <Select
+              <SelectComponent
                 id="visibility"
-                value={initialListing ? visibility : "true"}
-                onChange={(event) =>
+                value={String(initialListing ? visibility : true)}
+                onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
                   setVisibility(event.target.value === "true")
                 }
                 required={true}
               >
                 <option value="true">Show this listing on the map</option>
                 <option value="false">Hide this listing from the map</option>
-              </Select>
+              </SelectComponent>
             </Field>
           </FormSection>
         )}
@@ -532,10 +591,12 @@ export default function ListingWrite({ initialListing, user, profile }) {
 
             <Field>
               <Label htmlFor="stub">Stub settings</Label>
-              <Select
+              <SelectComponent
                 id="stub"
-                value={isStub}
-                onChange={(event) => setIsStub(event.target.value === "true")}
+                value={String(isStub)}
+                onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
+                  setIsStub(event.target.value === "true")
+                }
                 required={true}
               >
                 <option value="false">
@@ -544,12 +605,12 @@ export default function ListingWrite({ initialListing, user, profile }) {
                 <option value="true">
                   This listing is a stub that others can claim
                 </option>
-              </Select>
-              <InputHint>
+              </SelectComponent>
+              <InputHintComponent>
                 {isStub
                   ? "This listing will not contain your contact information. Others can claim it as their own and take it over."
                   : "This listing will be presented just like any other."}
-              </InputHint>
+              </InputHintComponent>
             </Field>
           </FormSection>
         )}
@@ -600,6 +661,7 @@ export default function ListingWrite({ initialListing, user, profile }) {
             initialButtonText="Delete listing"
             dialogTitle="Delete listing"
             confirmButtonText="Yes, delete listing"
+            confirmLoadingText="Deleting..."
             onSubmit={handleDeleteListing}
           >
             Are you sure you want to delete your listing? This is irreversible.
diff --git a/src/components/ListingWrite/index.js b/src/components/ListingWrite/index.ts
similarity index 100%
rename from src/components/ListingWrite/index.js
rename to src/components/ListingWrite/index.ts
diff --git a/src/components/ProfileAccountSettings/ProfileAccountSettings.jsx b/src/components/ProfileAccountSettings/ProfileAccountSettings.tsx
similarity index 91%
rename from src/components/ProfileAccountSettings/ProfileAccountSettings.jsx
rename to src/components/ProfileAccountSettings/ProfileAccountSettings.tsx
index a0f238d3..80e2f429 100644
--- a/src/components/ProfileAccountSettings/ProfileAccountSettings.jsx
+++ b/src/components/ProfileAccountSettings/ProfileAccountSettings.tsx
@@ -25,12 +25,11 @@ const List = styled("ul")(({ theme }) => ({
   // gap: `calc(${theme.spacing.unit} * 1)`,
 }));
 
-const ListItem = styled("li")(({ theme }) => ({
+const ListItem = styled("li")<{ editing?: boolean }>(({ theme }) => ({
   display: "flex",
   flexDirection: "row",
 
   borderStyle: "solid",
-  borderWidth: "0px",
   borderColor: "transparent",
   transition: "border-color 25ms linear",
   // Assume middle row by default
@@ -75,11 +74,13 @@ const PasswordPreview = styled("p")(({ theme }) => ({
   userSelect: "none",
 }));
 
+const InputComponent = Input as React.ComponentType<any>;
+
 // New custom hook for managing edit states
 function useEditableField(initialState = false) {
   const [isEditing, setIsEditing] = useState(initialState);
   const [isUpdating, setIsUpdating] = useState(false);
-  const [error, setError] = useState(null);
+  const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState(false);
   const [lastSentAt, setLastSentAt] = useState(0);
 
@@ -104,7 +105,20 @@ function useEditableField(initialState = false) {
   };
 }
 
-function ProfileAccountSettings({ user, profile }) {
+type ProfileAccountSettingsProps = {
+  user: {
+    email: string;
+  };
+  profile: {
+    first_name?: string;
+    is_newsletter_subscribed?: boolean;
+  };
+};
+
+function ProfileAccountSettings({
+  user,
+  profile,
+}: ProfileAccountSettingsProps) {
   // Use our custom hook for each editable field
   const firstName = useEditableField();
   const email = useEditableField();
@@ -134,7 +148,7 @@ function ProfileAccountSettings({ user, profile }) {
   //   }
   // };
 
-  const handleEmailUpdate = async (formData) => {
+  const handleEmailUpdate = async (formData: FormData) => {
     const newEmail = formData.get("email")?.toString();
 
     // Client-side validation for unchanged email
@@ -161,10 +175,10 @@ function ProfileAccountSettings({ user, profile }) {
     }
   };
 
-  const handleFirstNameUpdate = async (formData) => {
+  const handleFirstNameUpdate = async (formData: FormData) => {
     const validation = validateName(formData.get("first_name"));
     if (!validation.isValid) {
-      firstName.setError(validation.error);
+      firstName.setError(validation.error ?? null);
       return;
     }
 
@@ -176,7 +190,7 @@ function ProfileAccountSettings({ user, profile }) {
       if (result?.error) {
         firstName.setError(result.error);
       } else {
-        setTempFirstName(validation.value);
+        setTempFirstName(validation.value ?? "");
         firstName.setIsEditing(false);
       }
     } catch (error) {
@@ -191,12 +205,13 @@ function ProfileAccountSettings({ user, profile }) {
     firstName.reset();
   };
 
-  const handleNewslettePreferenceUpdate = async (formData) => {
+  const handleNewslettePreferenceUpdate = async (formData: FormData) => {
     const nextNewsletterPreference =
       formData.get("newsletter_preference") === "true";
     console.log("Updating newsletter preference to", nextNewsletterPreference);
 
     newsletterPreference.setIsUpdating(true);
+    newsletterPreference.setError(null);
 
     try {
       const result = await updateNewsletterPreferenceAction(formData);
@@ -228,7 +243,7 @@ function ProfileAccountSettings({ user, profile }) {
           <Form nested={true} action={handleFirstNameUpdate}>
             <Field>
               <Label>First name</Label>
-              <Input
+              <InputComponent
                 name="first_name"
                 {...FIELD_CONFIGS.firstName}
                 defaultValue={tempFirstName}
@@ -242,6 +257,7 @@ function ProfileAccountSettings({ user, profile }) {
             <ButtonGroup>
               <SubmitButton
                 disabled={firstName.isUpdating}
+                loading={firstName.isUpdating}
                 pendingText="Updating..."
               >
                 Update
@@ -276,7 +292,7 @@ function ProfileAccountSettings({ user, profile }) {
           <Form nested={true} action={handleEmailUpdate}>
             <Field>
               <Label>Email</Label>
-              <Input
+              <InputComponent
                 name="email"
                 defaultValue={user.email}
                 {...FIELD_CONFIGS.email}
@@ -298,6 +314,7 @@ function ProfileAccountSettings({ user, profile }) {
               {!email.success && (
                 <SubmitButton
                   disabled={email.isUpdating}
+                  loading={email.isUpdating}
                   pendingText="Sending..."
                 >
                   Send the link
@@ -335,8 +352,8 @@ function ProfileAccountSettings({ user, profile }) {
               <Label>Newsletter</Label>
               <Select
                 name="newsletter_preference"
-                value={tempNewsletterPreference}
-                onChange={(event) =>
+                value={String(tempNewsletterPreference)}
+                onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
                   setTempNewsletterPreference(event.target.value === "true")
                 }
                 required={true}
@@ -358,6 +375,7 @@ function ProfileAccountSettings({ user, profile }) {
             <ButtonGroup>
               <SubmitButton
                 disabled={newsletterPreference.isUpdating}
+                loading={newsletterPreference.isUpdating}
                 pendingText="Updating..."
               >
                 Update
diff --git a/src/components/ProfileAccountSettings/index.js b/src/components/ProfileAccountSettings/index.ts
similarity index 100%
rename from src/components/ProfileAccountSettings/index.js
rename to src/components/ProfileAccountSettings/index.ts
diff --git a/src/components/ProfileActions/ProfileActions.jsx b/src/components/ProfileActions/ProfileActions.tsx
similarity index 80%
rename from src/components/ProfileActions/ProfileActions.jsx
rename to src/components/ProfileActions/ProfileActions.tsx
index 20796002..21ad5b9a 100644
--- a/src/components/ProfileActions/ProfileActions.jsx
+++ b/src/components/ProfileActions/ProfileActions.tsx
@@ -1,8 +1,11 @@
+"use client";
+
 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 { styled } from "@pigment-css/react";
 
@@ -33,7 +36,25 @@ const ListItemText = styled("div")(({ theme }) => ({
   },
 }));
 
-export default function ProfileActions({ listings }) {
+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>
@@ -41,7 +62,12 @@ export default function ProfileActions({ listings }) {
           <h4>Sign out</h4>
           <p>Goodbye for now!</p>
         </ListItemText>
-        <Button variant="secondary" onClick={signOutAction}>
+        <Button
+          variant="secondary"
+          onClick={handleSignOut}
+          loading={isSigningOut}
+          loadingText="Signing out..."
+        >
           Sign out
         </Button>
       </ListItem>
@@ -84,6 +110,7 @@ export default function ProfileActions({ listings }) {
               ? `Yes, delete my account and listing${listings.length > 1 ? "s" : ""}`
               : "Yes, delete my account"
           }
+          confirmLoadingText="Deleting..."
           action={deleteAccountAction}
         >
           Are you sure you want to delete your account?{" "}
diff --git a/src/components/ProfileActions/index.js b/src/components/ProfileActions/index.ts
similarity index 100%
rename from src/components/ProfileActions/index.js
rename to src/components/ProfileActions/index.ts
diff --git a/src/components/SubmitButton/SubmitButton.jsx b/src/components/SubmitButton/SubmitButton.jsx
deleted file mode 100644
index e82a48aa..00000000
--- a/src/components/SubmitButton/SubmitButton.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-"use client";
-
-import Button from "@/components/Button";
-
-export default function SubmitButton({
-  variant = "primary",
-  children,
-  pending = false,
-  pendingText = "Loading...",
-  ...props
-}) {
-  // TODO: Add a loading state
-  // Look at Next.js server actions and mutations
-  // https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
-  return (
-    <Button variant={variant} type="submit" aria-disabled={pending} {...props}>
-      {pending ? pendingText : children}
-    </Button>
-  );
-}
diff --git a/src/components/SubmitButton/SubmitButton.tsx b/src/components/SubmitButton/SubmitButton.tsx
new file mode 100644
index 00000000..7dd19608
--- /dev/null
+++ b/src/components/SubmitButton/SubmitButton.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { useFormStatus } from "react-dom";
+import Button, { type ButtonProps } from "@/components/Button";
+
+export type SubmitButtonProps = Omit<ButtonProps, "type"> & {
+  pending?: boolean;
+  pendingText?: string;
+};
+
+export default function SubmitButton({
+  variant = "primary",
+  children,
+  pending = false,
+  loading = false,
+  pendingText = "Loading...",
+  loadingText = pendingText,
+  ...props
+}: SubmitButtonProps) {
+  const { pending: formPending } = useFormStatus();
+  const isLoading = loading || pending || formPending;
+
+  return (
+    <Button
+      variant={variant}
+      type="submit"
+      loading={isLoading}
+      loadingText={loadingText}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+}
diff --git a/src/components/SubmitButton/index.js b/src/components/SubmitButton/index.ts
similarity index 100%
rename from src/components/SubmitButton/index.js
rename to src/components/SubmitButton/index.ts

From 31188395b73b22347c796ed87ae4516d5a006908 Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Sun, 12 Apr 2026 13:08:47 +1000
Subject: [PATCH 2/5] format

---
 scripts/seed-local-media.mjs                  | 18 +++++-----
 src/app/(forms)/auth/complete/page.tsx        |  3 +-
 src/proxy.ts                                  | 16 +++++----
 .../_templates/email-change-email.tsx         |  4 +--
 .../functions/_templates/invite-email.tsx     |  4 +--
 .../functions/_templates/magic-link-email.tsx |  4 +--
 .../_templates/reset-password-email.tsx       |  4 +--
 .../functions/_templates/sign-up-email.tsx    |  6 +---
 .../send-email-for-auth-action/index.ts       | 34 +++++++++++++------
 9 files changed, 50 insertions(+), 43 deletions(-)

diff --git a/scripts/seed-local-media.mjs b/scripts/seed-local-media.mjs
index cffacf41..e06fa9f8 100644
--- a/scripts/seed-local-media.mjs
+++ b/scripts/seed-local-media.mjs
@@ -79,7 +79,10 @@ function walkFiles(sourceDir, currentDir = sourceDir) {
 
     return {
       absolutePath,
-      objectPath: path.relative(sourceDir, absolutePath).split(path.sep).join("/"),
+      objectPath: path
+        .relative(sourceDir, absolutePath)
+        .split(path.sep)
+        .join("/"),
     };
   });
 }
@@ -105,7 +108,8 @@ async function ensureBucket(supabase, bucketName, bucketConfig) {
     allowedMimeTypes: bucketConfig.allowedMimeTypes,
   };
 
-  const { data: buckets, error: listError } = await supabase.storage.listBuckets();
+  const { data: buckets, error: listError } =
+    await supabase.storage.listBuckets();
 
   if (listError) {
     throw listError;
@@ -147,14 +151,12 @@ async function uploadBucketObjects(supabase, bucketName, bucketConfig) {
     const body = readFileSync(file.absolutePath);
     const contentType = getContentType(file.absolutePath);
 
-    const { error } = await supabase.storage.from(bucketName).upload(
-      file.objectPath,
-      body,
-      {
+    const { error } = await supabase.storage
+      .from(bucketName)
+      .upload(file.objectPath, body, {
         contentType,
         upsert: true,
-      }
-    );
+      });
 
     if (error) {
       throw new Error(
diff --git a/src/app/(forms)/auth/complete/page.tsx b/src/app/(forms)/auth/complete/page.tsx
index 6e57e29e..06f6ec11 100644
--- a/src/app/(forms)/auth/complete/page.tsx
+++ b/src/app/(forms)/auth/complete/page.tsx
@@ -9,8 +9,7 @@ export default function AuthCompletePage() {
       </FormHeader>
       <Form as="container">
         <p>
-          We’re securely confirming your link. You’ll be redirected in a
-          moment.
+          We’re securely confirming your link. You’ll be redirected in a moment.
         </p>
       </Form>
     </>
diff --git a/src/proxy.ts b/src/proxy.ts
index e6d166a2..b86b1641 100644
--- a/src/proxy.ts
+++ b/src/proxy.ts
@@ -31,16 +31,20 @@ export async function proxy(request: NextRequest) {
   const hasInitialReferrerCookie = request.cookies.get(INITIAL_REFERRER_COOKIE);
   const externalReferrer = getExternalReferrer(request);
 
-  if (!hasInitialReferrerCookie && externalReferrer && request.method === "GET") {
+  if (
+    !hasInitialReferrerCookie &&
+    externalReferrer &&
+    request.method === "GET"
+  ) {
     response.cookies.set(
       INITIAL_REFERRER_COOKIE,
       encodeURIComponent(externalReferrer),
       {
-      httpOnly: false,
-      maxAge: INITIAL_REFERRER_MAX_AGE,
-      path: "/",
-      sameSite: "lax",
-      secure: request.nextUrl.protocol === "https:",
+        httpOnly: false,
+        maxAge: INITIAL_REFERRER_MAX_AGE,
+        path: "/",
+        sameSite: "lax",
+        secure: request.nextUrl.protocol === "https:",
       }
     );
   }
diff --git a/supabase/functions/_templates/email-change-email.tsx b/supabase/functions/_templates/email-change-email.tsx
index 5b165d49..7f16ad84 100644
--- a/supabase/functions/_templates/email-change-email.tsx
+++ b/supabase/functions/_templates/email-change-email.tsx
@@ -40,9 +40,7 @@ export const EmailChangeEmail = ({
         Follow this link to confirm your new email on Peels:
       </EmailParagraph>
 
-      <EmailButton href={confirmUrl}>
-        Change email address
-      </EmailButton>
+      <EmailButton href={confirmUrl}>Change email address</EmailButton>
 
       <EmailParagraph>
         As a reminder, you’re changing from {email} to {newEmail}.
diff --git a/supabase/functions/_templates/invite-email.tsx b/supabase/functions/_templates/invite-email.tsx
index 0ae2e413..091656fa 100644
--- a/supabase/functions/_templates/invite-email.tsx
+++ b/supabase/functions/_templates/invite-email.tsx
@@ -45,9 +45,7 @@ export const InviteEmail = ({
         to try it out. Follow this link to accept the invite:
       </EmailParagraph>
 
-      <EmailButton href={confirmUrl}>
-        Accept invite
-      </EmailButton>
+      <EmailButton href={confirmUrl}>Accept invite</EmailButton>
 
       <EmailParagraph>
         Just hit ‘reply’ if you run into any issues or have questions.
diff --git a/supabase/functions/_templates/magic-link-email.tsx b/supabase/functions/_templates/magic-link-email.tsx
index 64fa0116..dc049758 100644
--- a/supabase/functions/_templates/magic-link-email.tsx
+++ b/supabase/functions/_templates/magic-link-email.tsx
@@ -42,9 +42,7 @@ export const MagicLinkEmail = ({
         Follow this link to instantly sign in to Peels:
       </EmailParagraph>
 
-      <EmailButton href={confirmUrl}>
-        Sign in to Peels
-      </EmailButton>
+      <EmailButton href={confirmUrl}>Sign in to Peels</EmailButton>
 
       <EmailParagraph>
         Just hit ‘reply’ if you run into any issues or have questions.
diff --git a/supabase/functions/_templates/reset-password-email.tsx b/supabase/functions/_templates/reset-password-email.tsx
index 8c886581..b818675e 100644
--- a/supabase/functions/_templates/reset-password-email.tsx
+++ b/supabase/functions/_templates/reset-password-email.tsx
@@ -43,9 +43,7 @@ export const ResetPasswordEmail = ({
         link to reset your password:
       </EmailParagraph>
 
-      <EmailButton href={confirmUrl}>
-        Reset password
-      </EmailButton>
+      <EmailButton href={confirmUrl}>Reset password</EmailButton>
 
       <EmailParagraph>
         Just hit ‘reply’ if you run into any issues or have questions.
diff --git a/supabase/functions/_templates/sign-up-email.tsx b/supabase/functions/_templates/sign-up-email.tsx
index 8a365f57..a01471b1 100644
--- a/supabase/functions/_templates/sign-up-email.tsx
+++ b/supabase/functions/_templates/sign-up-email.tsx
@@ -46,11 +46,7 @@ export const SignUpEmail = ({
         account:
       </EmailParagraph>
 
-      <EmailButton
-        href={confirmUrl}
-      >
-        Verify your Peels account
-      </EmailButton>
+      <EmailButton href={confirmUrl}>Verify your Peels account</EmailButton>
 
       <EmailParagraph>
         Just hit ‘reply’ if you run into any issues or have questions.
diff --git a/supabase/functions/send-email-for-auth-action/index.ts b/supabase/functions/send-email-for-auth-action/index.ts
index d9494e8b..215983fc 100644
--- a/supabase/functions/send-email-for-auth-action/index.ts
+++ b/supabase/functions/send-email-for-auth-action/index.ts
@@ -76,9 +76,15 @@ const isNonEmptyString = (value: unknown): value is string =>
 
 const toErrorShape = (error: unknown) => {
   if (error && typeof error === "object") {
-    const maybeError = error as { code?: unknown; message?: unknown; name?: unknown };
+    const maybeError = error as {
+      code?: unknown;
+      message?: unknown;
+      name?: unknown;
+    };
     return {
-      error_code: isNonEmptyString(maybeError.code) ? maybeError.code : "unknown_error",
+      error_code: isNonEmptyString(maybeError.code)
+        ? maybeError.code
+        : "unknown_error",
       error_name: isNonEmptyString(maybeError.name) ? maybeError.name : "Error",
       error_message: isNonEmptyString(maybeError.message)
         ? maybeError.message
@@ -98,10 +104,7 @@ const getRecipientDomain = (email: string) => {
   return parts.length === 2 ? parts[1] : "unknown";
 };
 
-const logEvent = (
-  event: string,
-  details: Record<string, unknown>
-) => {
+const logEvent = (event: string, details: Record<string, unknown>) => {
   console.log(
     JSON.stringify({
       event,
@@ -114,7 +117,10 @@ const parseAndVerify = (payload: string, headers: Headers, wh: Webhook) => {
   const parsed = wh.verify(payload, Object.fromEntries(headers)) as HookPayload;
   const actionType = parsed.email_data?.email_action_type;
 
-  if (!isNonEmptyString(actionType) || !allowedActionTypes.has(actionType as EmailActionType)) {
+  if (
+    !isNonEmptyString(actionType) ||
+    !allowedActionTypes.has(actionType as EmailActionType)
+  ) {
     throw new Error(`Unsupported email_action_type: ${String(actionType)}`);
   }
 
@@ -145,7 +151,9 @@ const prepareEmail = async (
     ) &&
     !isNonEmptyString(tokenHash)
   ) {
-    throw new Error(`Invalid payload: missing token_hash for ${emailActionType}`);
+    throw new Error(
+      `Invalid payload: missing token_hash for ${emailActionType}`
+    );
   }
 
   if (
@@ -211,7 +219,9 @@ const prepareEmail = async (
 
   if (emailActionType === "email_change") {
     if (!isNonEmptyString(userNewEmail)) {
-      throw new Error("Invalid payload: missing user.new_email for email_change");
+      throw new Error(
+        "Invalid payload: missing user.new_email for email_change"
+      );
     }
 
     return {
@@ -360,7 +370,11 @@ Deno.serve(async (req) => {
     return json(400, { error: { message: "not allowed" } });
   }
 
-  if (!isNonEmptyString(hookSecret) || !isNonEmptyString(resendApiKey) || !isNonEmptyString(generalEmailAddress)) {
+  if (
+    !isNonEmptyString(hookSecret) ||
+    !isNonEmptyString(resendApiKey) ||
+    !isNonEmptyString(generalEmailAddress)
+  ) {
     logEvent("auth_email_hook_config_error", {
       hook_request_id: hookRequestId,
       has_hook_secret: isNonEmptyString(hookSecret),

From dedf6be33008ffe720c3d587c31d65bbf79c9c02 Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Sun, 12 Apr 2026 13:39:32 +1000
Subject: [PATCH 3/5] copilot

---
 messages/de.json                              | 22 ++++++++
 messages/en.json                              |  2 +
 messages/es.json                              | 22 ++++++++
 src/components/Button/Button.tsx              | 28 +++++++---
 .../EmailSelector/EmailSelector.tsx           |  4 +-
 src/components/IconButton/IconButton.tsx      |  6 ++-
 .../ListingPhotosManager.tsx                  | 53 ++++++++++++-------
 .../ProfileAccountSettings.tsx                |  4 +-
 8 files changed, 110 insertions(+), 31 deletions(-)

diff --git a/messages/de.json b/messages/de.json
index 76ebe393..b8202eb2 100644
--- 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
index 14ae0444..f1bfb350 100644
--- 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
index eed5de26..1b27ab1e 100644
--- 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
index 1619e668..26981313 100644
--- 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
index abc48e43..a482e646 100644
--- 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
index bcba783e..49922339 100644
--- 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
index 53265375..24342b38 100644
--- 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,7 +138,7 @@ function ListingPhotosManager({
   };
 
   const handleDrop = async (acceptedFiles: File[]) => {
-    if (isUploading) return;
+    if (isMutatingPhotos) return;
 
     console.log("Dropped files:", acceptedFiles);
 
@@ -135,7 +146,7 @@ function ListingPhotosManager({
     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,23 +206,26 @@ 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);
@@ -221,15 +233,15 @@ function ListingPhotosManager({
   };
 
   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
index 80e2f429..b3cb64b4 100644
--- 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

From 3b34c5ef5218a7792f7f4e7db86ae12827ac04ed Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Sun, 12 Apr 2026 13:52:04 +1000
Subject: [PATCH 4/5] copilot

---
 .../ListingPhotosManager.tsx                  | 28 +++++++++++----
 .../ProfileActions/ProfileActions.tsx         | 34 ++++++-------------
 2 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/src/components/ListingPhotosManager/ListingPhotosManager.tsx b/src/components/ListingPhotosManager/ListingPhotosManager.tsx
index 24342b38..689ec638 100644
--- a/src/components/ListingPhotosManager/ListingPhotosManager.tsx
+++ b/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);
diff --git a/src/components/ProfileActions/ProfileActions.tsx b/src/components/ProfileActions/ProfileActions.tsx
index 21ad5b9a..40df3980 100644
--- a/src/components/ProfileActions/ProfileActions.tsx
+++ b/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,25 +35,15 @@ 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>
@@ -62,14 +51,11 @@ export default function ProfileActions({ listings = [] }: ProfileActionsProps) {
           <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>

From 584faa2b6a1e91b9572452c1440aea0a17514826 Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Sun, 12 Apr 2026 14:20:49 +1000
Subject: [PATCH 5/5] copilot

---
 src/components/Button/Button.tsx             | 170 +++++++++++++++----
 src/components/ListingWrite/ListingWrite.tsx |   5 +-
 src/components/SubmitButton/SubmitButton.tsx |   4 +-
 3 files changed, 143 insertions(+), 36 deletions(-)

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 26981313..b978fe1b 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -19,22 +19,123 @@ type ButtonStyleProps = {
   disabled?: boolean;
 };
 
-export type ButtonProps = ButtonStyleProps &
-  Omit<
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    keyof ButtonStyleProps | "children" | "onClick"
-  > &
-  Omit<
-    React.AnchorHTMLAttributes<HTMLAnchorElement>,
-    keyof ButtonStyleProps | "children" | "onClick" | "href"
-  > & {
+type BaseButtonProps = ButtonStyleProps & {
+  children?: ReactNode;
+  loading?: boolean;
+  loadingText?: string;
+  onClick?: React.MouseEventHandler<HTMLElement>;
+};
+
+type DataAttributes = {
+  [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+};
+
+type SharedDomProps = React.AriaAttributes &
+  DataAttributes & {
+    autoFocus?: boolean;
+    className?: string;
+    id?: string;
+    role?: React.AriaRole;
+    style?: React.CSSProperties;
+    tabIndex?: number;
+    title?: string;
+  };
+
+type LinkNavigationProps = {
+  href: string;
+  locale?: string | false;
+  onNavigate?: (event: { preventDefault: () => void }) => void;
+  prefetch?: boolean | "auto" | null;
+  replace?: boolean;
+  scroll?: boolean;
+  shallow?: boolean;
+};
+
+export type ButtonElementProps = BaseButtonProps &
+  SharedDomProps & {
     as?: ElementType;
-    children?: ReactNode;
-    href?: string;
-    loading?: boolean;
-    loadingText?: string;
-    onClick?: React.MouseEventHandler<HTMLElement>;
+    form?: string;
+    formAction?: string | ((formData: FormData) => void | Promise<void>);
+    formEncType?: string;
+    formMethod?: string;
+    formNoValidate?: boolean;
+    formTarget?: string;
+    href?: undefined;
+    name?: string;
+    type?: "button" | "submit" | "reset";
+    value?: string | number | readonly string[];
+  };
+
+export type LinkButtonProps = BaseButtonProps &
+  SharedDomProps &
+  LinkNavigationProps & {
+    as?: never;
+    download?: boolean | string;
+    formAction?: never;
+    formEncType?: never;
+    formMethod?: never;
+    formNoValidate?: never;
+    formTarget?: never;
+    name?: never;
+    rel?: string;
+    target?: React.HTMLAttributeAnchorTarget;
+    type?: never;
+    value?: never;
+  };
+
+export type ButtonProps = ButtonElementProps | LinkButtonProps;
+
+type ButtonElementRestProps = Omit<
+  ButtonElementProps,
+  keyof BaseButtonProps | "href"
+>;
+
+type LinkButtonRestProps = Omit<
+  LinkButtonProps,
+  keyof BaseButtonProps | "href"
+>;
+
+const isLinkButton = (props: ButtonProps): props is LinkButtonProps =>
+  props.href !== undefined;
+
+const getCommonProps = (props: ButtonProps) => {
+  const {
+    variant = "secondary",
+    disabled = false,
+    children,
+    tabIndex = 0,
+    loading = false,
+    loadingText = "Loading...",
+    size = "normal",
+    onClick,
+    href,
+    ...restProps
+  } = props;
+
+  return {
+    variant,
+    disabled,
+    children,
+    tabIndex,
+    loading,
+    loadingText,
+    size,
+    onClick,
+    href,
+    restProps,
+  };
+};
+
+const getButtonElementProps = (props: ButtonElementRestProps) => {
+  const { type = "button", ...buttonProps } = props;
+
+  return {
+    type,
+    buttonProps,
   };
+};
+
+const getLinkButtonProps = (props: LinkButtonRestProps) => props;
 
 const buttonStyles = ({ theme }: { theme: any }): any => ({
   // Resets
@@ -206,23 +307,20 @@ const StyledButton = styled(UnstyledButton)<ButtonStyleProps>(buttonStyles);
 const StyledLink = styled(Link)<ButtonStyleProps>(buttonStyles);
 
 const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
-  function Button(
-    {
-      variant = "secondary",
-      disabled = false,
-      href = undefined,
+  function Button(allProps, ref) {
+    const {
+      variant,
+      disabled,
+      href,
       children,
-      tabIndex = 0,
-      loading = false,
-      loadingText = "Loading...",
-      type = "button",
-      size = "normal",
+      tabIndex,
+      loading,
+      loadingText,
+      size,
       onClick,
-      ...props
-    },
-    ref
-  ) {
-    const isLink = Boolean(href);
+      restProps,
+    } = getCommonProps(allProps);
+    const isLink = isLinkButton(allProps);
     const isLoading = loading && !isLink;
     const isDisabled = disabled || isLoading;
     const buttonContent = <span>{isLoading ? loadingText : children}</span>;
@@ -236,10 +334,12 @@ const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
       onClick?.(event);
     };
 
-    if (href) {
+    if (isLink) {
+      const linkProps = getLinkButtonProps(restProps as LinkButtonRestProps);
+
       return (
         <StyledLink
-          href={href}
+          href={allProps.href}
           ref={ref as Ref<HTMLAnchorElement>}
           variant={variant}
           tabIndex={isDisabled ? -1 : tabIndex}
@@ -247,13 +347,17 @@ const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
           aria-busy={isLoading || undefined}
           size={size}
           onClick={handleLinkClick}
-          {...props}
+          {...linkProps}
         >
           {buttonContent}
         </StyledLink>
       );
     }
 
+    const { type, buttonProps } = getButtonElementProps(
+      restProps as ButtonElementRestProps
+    );
+
     return (
       <StyledButton
         type={type}
@@ -265,7 +369,7 @@ const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
         aria-busy={isLoading || undefined}
         size={size}
         onClick={onClick}
-        {...props}
+        {...buttonProps}
       >
         {buttonContent}
       </StyledButton>
diff --git a/src/components/ListingWrite/ListingWrite.tsx b/src/components/ListingWrite/ListingWrite.tsx
index a77ae090..5a741dc1 100644
--- a/src/components/ListingWrite/ListingWrite.tsx
+++ b/src/components/ListingWrite/ListingWrite.tsx
@@ -222,7 +222,10 @@ export default function ListingWrite({
 
     try {
       // For residential listings, update the profile first name if changed
-      if (listingType === "residential" && profile.first_name !== name) {
+      if (
+        listingType === "residential" &&
+        profile.first_name !== validatedName
+      ) {
         console.log(
           "Updating first name from",
           profile.first_name,
diff --git a/src/components/SubmitButton/SubmitButton.tsx b/src/components/SubmitButton/SubmitButton.tsx
index 7dd19608..ce9fb5bb 100644
--- a/src/components/SubmitButton/SubmitButton.tsx
+++ b/src/components/SubmitButton/SubmitButton.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import { useFormStatus } from "react-dom";
-import Button, { type ButtonProps } from "@/components/Button";
+import Button, { type ButtonElementProps } from "@/components/Button";
 
-export type SubmitButtonProps = Omit<ButtonProps, "type"> & {
+export type SubmitButtonProps = Omit<ButtonElementProps, "type"> & {
   pending?: boolean;
   pendingText?: string;
 };