squashed commit of general improvements

commit f833519
Author: Danny White <3104761+dnywh@users.noreply.github.com>
Date:   Fri Mar 13 14:27:09 2026 +1100

    profile client leaf

commit 7471b7a
Author: Danny White <3104761+dnywh@users.noreply.github.com>
Date:   Fri Mar 13 14:15:17 2026 +1100

    version bump

commit c669444
Author: Danny White <3104761+dnywh@users.noreply.github.com>
Date:   Fri Mar 13 14:13:38 2026 +1100

    more deduplicate route fetching

commit fcf5f12
Author: Danny White <3104761+dnywh@users.noreply.github.com>
Date:   Fri Mar 13 14:08:41 2026 +1100

    deduplicate route data fetching for listing and map pages

commit 4bba868
Author: Danny White <3104761+dnywh@users.noreply.github.com>
Date:   Fri Mar 13 14:03:34 2026 +1100

    fix chat text alignment

Author: dnywh

package-lock.json

@@ -52,7 +52,7 @@
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",
     "autoprefixer": "^10.4.20",
-    "baseline-browser-mapping": "^2.9.14",
+    "baseline-browser-mapping": "^2.10.7",
     "postcss": "^8.4.49",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",

package.json

@@ -3,6 +3,7 @@ import { notFound } from "next/navigation";
 import { generateListingMetadata } from "@/utils/listingUtils";
 import ListingRead from "@/components/ListingRead";
 import { styled } from "@pigment-css/react";
+import { cache } from "react";
 
 const StyledMain = styled("main")(({ theme }) => ({
   flex: 1, // Should be shared with layout used by Profile and Listings pages
@@ -29,7 +30,7 @@ const StyledMain = styled("main")(({ theme }) => ({
   },
 }));
 
-async function getListingData(slug) {
+const getListingData = cache(async (slug) => {
   const supabase = await createClient();
   const {
     data: { user },
@@ -40,7 +41,7 @@ async function getListingData(slug) {
     .match({ slug })
     .single();
   return { user, listing };
-}
+});
 
 export async function generateMetadata({ params }) {
   const { slug } = await params;

src/app/(core)/(interact)/(centered)/listings/[slug]/page.js

@@ -5,39 +5,37 @@ import ProfileListings from "@/components/ProfileListings";
 import ProfileActions from "@/components/ProfileActions";
 import LegalFooter from "@/components/LegalFooter";
 import { styled } from "@pigment-css/react";
+import { Suspense } from "react";
+import Toast from "@/components/Toast";
 
 export const metadata = {
   title: "Profile",
 };
 
-// This page could be static instead of dynamic by handling searchParams in a client component instead and using Suspense here. See the homepage and Toast component as an example.
-export default async function ProfilePage({ searchParams }) {
-  const message = (await searchParams)?.message;
-  const error = (await searchParams)?.error;
+// Keep URL-based feedback in a client leaf so server rendering is driven by auth/data only.
+export default async function ProfilePage() {
   const supabase = await createClient();
-  // Get user data and listings in one query
+  // Get the authenticated user first, then fetch profile data in parallel.
   const {
     data: { user },
   } = await supabase.auth.getUser();
 
-  const { data: listings } = await supabase
-    // We can access the "listings" table here directly as we have a policy set allowing authenticated owners access to their full listings
-    // TODO: but should we? Can we get everything we need from the private_data view?
-    .from("listings")
-    .select()
-    .eq("owner_id", user.id)
-    .order("created_at", { ascending: true });
-
-  const { data: profile } = await supabase
-    .from("profiles")
-    .select()
-    .eq("id", user.id)
-    .single();
+  const [{ data: listings }, { data: profile }] = await Promise.all([
+    supabase
+      // We can access the "listings" table here directly as we have a policy set allowing authenticated owners access to their full listings
+      // TODO: but should we? Can we get everything we need from the private_data view?
+      .from("listings")
+      .select()
+      .eq("owner_id", user.id)
+      .order("created_at", { ascending: true }),
+    supabase.from("profiles").select().eq("id", user.id).single(),
+  ]);
 
   return (
     <>
-      {message && <p>Message: {message}</p>}
-      {error && <p>Error: {error}</p>}
+      <Suspense>
+        <Toast />
+      </Suspense>
 
       <NakedSection>
         <ProfileHeader profile={profile} user={user} />

src/app/(core)/(interact)/(centered)/profile/page.js

@@ -2,9 +2,10 @@ import { createClient } from "@/utils/supabase/server";
 import { siteConfig } from "@/config/site";
 import { generateListingMetadata } from "@/utils/listingUtils";
 import MapPageClient from "@/components/MapPageClient";
+import { cache } from "react";
 
 // Fetch data only once and use across metadata and page
-async function getInitialData(listingSlug) {
+const getInitialData = cache(async (listingSlug) => {
   const supabase = await createClient();
 
   // Get user first
@@ -25,11 +26,10 @@ async function getInitialData(listingSlug) {
     user,
     listing: listingResponse?.data,
   };
-}
+});
 
 export async function generateMetadata({ searchParams }) {
   const listingSlug = (await searchParams)?.listing;
-  const { user, listing } = await getInitialData(listingSlug);
 
   if (!listingSlug) {
     return {
@@ -40,6 +40,8 @@ export async function generateMetadata({ searchParams }) {
     };
   }
 
+  const { user, listing } = await getInitialData(listingSlug);
+
   // Use shared utility to generate metadata
   return generateListingMetadata(listing, user);
 }

src/app/(core)/(interact)/(stretched)/map/page.js

@@ -34,7 +34,6 @@ const ChatBubble = styled("p")(({ theme }) => ({
         marginLeft: "30%",
         backgroundColor: theme.colors.message.sent.background,
         color: theme.colors.message.sent.text,
-        textAlign: "right",
         textShadow: `0 0.35px 1px rgba(0, 0, 0, .1)`, // To increase contrast of text
       },
     },
@@ -45,7 +44,6 @@ const ChatBubble = styled("p")(({ theme }) => ({
         marginRight: "30%",
         backgroundColor: theme.colors.message.received.background,
         color: theme.colors.message.received.text,
-        textAlign: "left",
       },
     },
   ],

src/components/ChatMessage/ChatMessage.jsx

@@ -1,7 +1,5 @@
 "use client";
 
-import { useState, useEffect } from "react";
-import Button from "@/components/Button";
 import { styled } from "@pigment-css/react";
 import { useSearchParams } from "next/navigation";
 
@@ -55,26 +53,28 @@ const StyledToast = styled("div")(({ theme }) => ({
 }));
 
 function Toast({ variant: propVariant, children: propChildren }) {
-  const [isOpen, setIsOpen] = useState(true);
   const searchParams = useSearchParams();
 
   // Handle URL-based toasts
   const error = searchParams?.get("error");
+  const message = searchParams?.get("message");
   const success = searchParams?.get("success");
-  const shouldShowEmailUpdatedToast = success === "email_change";
+  const successMessage =
+    message ||
+    (success === "email_change"
+      ? "Your email has been successfully updated"
+      : success && success !== "true"
+        ? success
+        : null);
 
   const variant = propVariant || (error ? "error" : "success");
-  const children =
-    propChildren ||
-    (error
-      ? "Something's not right. Mind trying again?"
-      : "Your email has been successfully updated");
+  const children = propChildren || error || successMessage;
 
   // Only show if we have props OR relevant URL params
-  if (!propChildren && !error && !shouldShowEmailUpdatedToast) return null;
+  if (!children) return null;
 
   return (
-    <StyledToast variant={variant} isOpen={isOpen}>
+    <StyledToast variant={variant}>
       <p>{children}</p>
       {/* <Button
         variant="secondary"

src/components/Toast/Toast.jsx

@@ -1,12 +1,13 @@
 import { notFound } from "next/navigation";
+import { cache } from "react";
 import type { LegalPageData } from "../types";
 import {
   formatContentData,
   validateBaseCustomMetadata,
   validateBaseMetadata,
 } from "../utils";
 
-export async function getLegalPageMetadata(
+export const getLegalPageMetadata = cache(async function getLegalPageMetadata(
   slug: string
 ): Promise<LegalPageData> {
   try {
@@ -36,4 +37,4 @@ export async function getLegalPageMetadata(
     console.error(error?.message);
     return notFound();
   }
-}
+});

src/lib/content/handlers/legal.ts

@@ -1,4 +1,5 @@
 import { notFound } from "next/navigation";
+import { cache } from "react";
 import type { NewsletterIssueData } from "../types";
 import {
   formatContentData,
@@ -7,33 +8,35 @@ import {
   validateNewsletterMetadata,
 } from "../utils";
 
-export async function getNewsletterIssueMetadata(
-  slug: string
-): Promise<NewsletterIssueData> {
-  try {
-    const file = await import(`@/content/newsletter/${slug}.mdx`);
+export const getNewsletterIssueMetadata = cache(
+  async function getNewsletterIssueMetadata(
+    slug: string
+  ): Promise<NewsletterIssueData> {
+    try {
+      const file = await import(`@/content/newsletter/${slug}.mdx`);
 
-    if (file?.metadata && file?.customMetadata) {
-      validateNewsletterMetadata(file.metadata, slug);
-      validateNewsletterCustomMetadata(file.customMetadata, slug);
+      if (file?.metadata && file?.customMetadata) {
+        validateNewsletterMetadata(file.metadata, slug);
+        validateNewsletterCustomMetadata(file.customMetadata, slug);
 
-      return formatContentData(
-        {
-          slug,
-          metadata: file.metadata,
-          customMetadata: file.customMetadata,
-        },
-        "publishDate",
-        true // publishDate is required for legal pages
-      );
-    }
+        return formatContentData(
+          {
+            slug,
+            metadata: file.metadata,
+            customMetadata: file.customMetadata,
+          },
+          "publishDate",
+          true // publishDate is required for legal pages
+        );
+      }
 
-    throw new Error(`Unable to find metadata for ${slug}.mdx`);
-  } catch (error: any) {
-    console.error(error?.message);
-    return notFound();
+      throw new Error(`Unable to find metadata for ${slug}.mdx`);
+    } catch (error: any) {
+      console.error(error?.message);
+      return notFound();
+    }
   }
-}
+);
 
 export async function getAllNewsletterIssues(): Promise<NewsletterIssueData[]> {
   const slugs = await getAllContentSlugs("newsletter");