@salesforce/webapp-template-app-react-sample-b2x-experimental 1.84.0 → 1.85.0

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/components/PropertyListingCard.tsx

@@ -1,11 +1,11 @@
 /**
- * ZENLEASE-style listing card: image carousel area, name + address, price by beds, amenities, Apply button.
+ * Stacked property listing card: image on top, details below. Single price + bedrooms, amenity list, Apply button.
+ * No phone or secondary price. Virtual Tours / Videos pills on image.
  */
 import { useNavigate } from "react-router";
-import { useCallback, useState } from "react";
-import { Button } from "./ui/button";
-import type { SearchResultRecordData } from "../features/global-search/types/search/searchResults";
-import { Heart } from "lucide-react";
+import { useCallback, type MouseEvent } from "react";
+import { Button } from "@/components/ui/button";
+import type { SearchResultRecordData } from "@/features/global-search/types/search/searchResults.js";
 
 function fieldDisplay(
 	fields: Record<string, { value?: unknown; displayValue?: string | null }> | undefined,
@@ -36,18 +36,26 @@ interface PropertyListingCardProps {
 	imageUrl: string | null;
 	/** Property address (Address__c from Property__c) when available */
 	address?: string | null;
+	/** Amenities string (e.g. "In-unit washer | Pool | Gym"), separated by | */
+	amenities?: string | null;
 }
 
 export default function PropertyListingCard({
 	record,
 	imageUrl,
 	address,
+	amenities,
 }: PropertyListingCardProps) {
 	const navigate = useNavigate();
-	const [favorited, setFavorited] = useState(false);
 	const name = fieldDisplay(record.fields, "Name") ?? "Untitled";
 	const price = fieldDisplay(record.fields, "Listing_Price__c");
 	const propertyRef = fieldDisplay(record.fields, "Property__c");
+	const bedroomsRaw = fieldDisplay(record.fields, "Property__r.Bedrooms__c");
+	const bedroomsNum = bedroomsRaw != null && bedroomsRaw !== "" ? Number(bedroomsRaw) : NaN;
+	const bedroomsLabel =
+		!Number.isNaN(bedroomsNum) && bedroomsNum >= 0
+			? `${bedroomsNum} Bedroom${bedroomsNum !== 1 ? "s" : ""}`
+			: null;
 	const detailPath = `/property/${record.id}`;
 	const displayAddress = (address ?? propertyRef ?? "").trim().replace(/\n/g, ", ") || null;
 
@@ -65,21 +73,16 @@ export default function PropertyListingCard({
 		[handleClick],
 	);
 
-	const toggleFavorite = useCallback((e: React.MouseEvent) => {
-		e.stopPropagation();
-		setFavorited((v) => !v);
-	}, []);
-
 	return (
 		<article
-			className="cursor-pointer overflow-hidden rounded-2xl border border-border bg-card shadow-sm transition-all duration-200 hover:shadow-md focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2"
+			className="flex cursor-pointer flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-sm transition-all duration-200 hover:shadow-md focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2"
 			onClick={handleClick}
 			onKeyDown={handleKeyDown}
 			role="button"
 			tabIndex={0}
 			aria-label={`View details for ${name}`}
 		>
-			{/* Image area with carousel affordances + Virtual Tours / Videos overlays */}
+			{/* Image on top, full width */}
 			<div className="relative aspect-[16/10] w-full overflow-hidden rounded-t-2xl bg-muted">
 				{imageUrl ? (
 					<img src={imageUrl} alt="" className="h-full w-full object-cover" />
@@ -88,25 +91,7 @@ export default function PropertyListingCard({
 						No image
 					</div>
 				)}
-				{/* Left/right carousel arrows (visual only for now) */}
-				<button
-					type="button"
-					className="absolute left-2 top-1/2 flex h-8 w-8 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full bg-black/40 text-white transition-colors duration-200 hover:bg-black/60"
-					aria-label="Previous image"
-					onClick={(e) => e.stopPropagation()}
-				>
-					←
-				</button>
-				<button
-					type="button"
-					className="absolute right-2 top-1/2 flex h-8 w-8 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full bg-black/40 text-white transition-colors duration-200 hover:bg-black/60"
-					aria-label="Next image"
-					onClick={(e) => e.stopPropagation()}
-				>
-					→
-				</button>
-				{/* Virtual Tours / Videos pills – purple per ZENLEASE screenshots */}
-				<div className="absolute left-2 top-2 flex flex-col gap-1">
+				<div className="absolute left-1.5 top-1.5 flex flex-col gap-0.5">
 					<span className="rounded-full bg-violet-600 px-2 py-0.5 text-xs font-medium text-white">
 						Virtual Tours
 					</span>
@@ -116,42 +101,54 @@ export default function PropertyListingCard({
 				</div>
 			</div>
 
-			<div className="p-3">
-				{/* Name + address row with favorite */}
-				<div className="mb-2 flex items-start justify-between gap-2">
-					<div className="min-w-0">
-						<h3 className="font-semibold text-foreground">{name}</h3>
+			{/* Content below: name, address, price+beds, amenities, Apply */}
+			<div className="flex flex-col justify-between p-3">
+				<div>
+					<div className="mb-1.5">
+						<h3 className="text-2xl font-semibold text-foreground">{name}</h3>
 						{displayAddress && (
 							<p className="truncate text-sm text-muted-foreground">{displayAddress}</p>
 						)}
 					</div>
-					<button
-						type="button"
-						className="shrink-0 cursor-pointer rounded-xl p-1 text-muted-foreground transition-colors duration-200 hover:bg-muted hover:text-foreground"
-						aria-label={favorited ? "Remove from favorites" : "Add to favorites"}
-						onClick={toggleFavorite}
-					>
-						<Heart className={`h-5 w-5 ${favorited ? "fill-primary text-primary" : ""}`} />
-					</button>
-				</div>
 
-				{/* Price by beds – single price shown as main */}
-				<div className="mb-2 flex flex-wrap gap-3 text-sm">
-					{price != null && (
-						<span className="font-medium text-foreground">
-							{formatPrice(price)} <span className="font-normal text-muted-foreground">2 Beds</span>
-						</span>
+					{/* Single price + bedrooms – price bold, teal, 2x size */}
+					<div className="mb-1.5 flex flex-wrap items-baseline gap-x-3 gap-y-0.5 text-base">
+						{price != null && (
+							<span className="text-2xl font-semibold text-primary">
+								{formatPrice(price)}
+								{bedroomsLabel != null ? (
+									<span className="ml-1 text-base font-normal text-muted-foreground">
+										{bedroomsLabel}
+									</span>
+								) : null}
+							</span>
+						)}
+					</div>
+
+					{/* Amenity pills (fetched per property, string separated by |) */}
+					{amenities != null && amenities.trim() !== "" && (
+						<div className="mb-2 flex flex-wrap gap-1.5">
+							{amenities
+								.split(/\s*\|\s*/)
+								.map((label) => label.trim())
+								.filter(Boolean)
+								.map((label) => (
+									<span
+										key={label}
+										className="rounded-full border border-border bg-muted/60 px-2.5 py-0.5 text-xs font-medium text-muted-foreground"
+									>
+										{label}
+									</span>
+								))}
+						</div>
 					)}
 				</div>
 
-				{/* Amenities line */}
-				<p className="mb-3 text-xs text-muted-foreground">View details for amenities</p>
-
-				{/* Apply – teal primary button */}
+				{/* Apply button – no phone, no email */}
 				<Button
 					size="sm"
-					className="w-full cursor-pointer rounded-xl bg-primary transition-colors duration-200 hover:bg-primary/90"
-					onClick={(e) => {
+					className="mt-4 w-full cursor-pointer rounded-xl bg-primary px-5 py-5 text-lg font-medium transition-colors duration-200 hover:bg-primary/90"
+					onClick={(e: MouseEvent<HTMLButtonElement>) => {
 						e.stopPropagation();
 						navigate(`/application?listingId=${encodeURIComponent(record.id)}`);
 					}}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/components/PropertyMap.tsx

@@ -2,7 +2,7 @@
  * Leaflet map for property search and detail. Uses OpenStreetMap tiles (no API key).
  * Renders one pin per property (each marker in the markers array).
  */
-import { useMemo, useState, useEffect } from "react";
+import { useMemo, useState, useEffect, type ReactNode } from "react";
 import { MapContainer, TileLayer, Marker, Popup, useMap } from "react-leaflet";
 import L from "leaflet";
 import "leaflet/dist/leaflet.css";
@@ -18,19 +18,32 @@ const Leaflet = L as {
 	}) => unknown;
 };
 
-// Custom pin icon so each property shows a visible pin (no dependency on external marker images)
+// Lucide-style map pin (teardrop + circle), filled, 1.5x size
+const PIN_SVG =
+	'<svg xmlns="http://www.w3.org/2000/svg" width="42" height="60" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" fill="currentColor"/><circle cx="12" cy="10" r="3" fill="white" stroke="none"/></svg>';
+
 const pinIcon = Leaflet.divIcon({
 	className: "property-map-pin",
-	html: `<span class="property-pin-shape" aria-hidden="true"></span>`,
-	iconSize: [28, 40],
-	iconAnchor: [14, 40],
-	popupAnchor: [0, -40],
+	html: PIN_SVG,
+	iconSize: [42, 60],
+	iconAnchor: [21, 60],
+	popupAnchor: [0, -60],
 });
 
 export interface MapMarker {
 	lat: number;
 	lng: number;
 	label?: string;
+	/** Property__c id; used to look up listing record for popup card */
+	propertyId?: string;
+}
+
+/** Bounding box in lat/lng (Leaflet getBounds()). */
+export interface MapBounds {
+	north: number;
+	south: number;
+	east: number;
+	west: number;
 }
 
 interface PropertyMapProps {
@@ -40,6 +53,10 @@ interface PropertyMapProps {
 	zoom?: number;
 	/** Optional markers */
 	markers?: MapMarker[];
+	/** Optional: render custom content in each marker popup (e.g. PropertyListingCard) */
+	popupContent?: (marker: MapMarker) => ReactNode;
+	/** Called when the user pans or zooms; use to filter list by visible pins */
+	onBoundsChange?: (bounds: MapBounds | null) => void;
 	/** CSS class for the container (e.g. height) */
 	className?: string;
 }
@@ -52,10 +69,65 @@ function MapCenterUpdater({ center, zoom = 13 }: { center: [number, number]; zoo
 	return null;
 }
 
+function MapBoundsReporter({
+	onBoundsChange,
+}: {
+	onBoundsChange?: (bounds: MapBounds | null) => void;
+}) {
+	const map = useMap() as {
+		getBounds?: () => {
+			getNorth: () => number;
+			getSouth: () => number;
+			getEast: () => number;
+			getWest: () => number;
+		};
+		on?: (event: string, fn: () => void) => void;
+		off?: (event: string, fn: () => void) => void;
+	};
+	useEffect(() => {
+		if (!onBoundsChange || !map.getBounds) return;
+		const report = () => {
+			const b = map.getBounds!();
+			onBoundsChange({
+				north: b.getNorth(),
+				south: b.getSouth(),
+				east: b.getEast(),
+				west: b.getWest(),
+			});
+		};
+		// Only report on moveend (user pan/zoom). Reporting on mount caused setState -> re-render -> map setView -> moveend -> loop.
+		map.on?.("moveend", report);
+		return () => {
+			map.off?.("moveend", report);
+		};
+	}, [map, onBoundsChange]);
+	return null;
+}
+
+/** Wraps popup content with an in-card close button and shadow; removes need for Leaflet's default chrome */
+function PopupContentWrapper({ children }: { children: ReactNode }) {
+	const map = useMap() as { closePopup?: () => void };
+	return (
+		<div className="relative min-w-0">
+			<button
+				type="button"
+				onClick={() => map.closePopup?.()}
+				className="absolute right-2 top-2 z-10 flex h-7 w-7 items-center justify-center rounded-full bg-black/60 text-white transition-colors hover:bg-black/80"
+				aria-label="Close"
+			>
+				×
+			</button>
+			<div className="rounded-2xl shadow-lg overflow-hidden">{children}</div>
+		</div>
+	);
+}
+
 export default function PropertyMap({
 	center,
 	zoom = 13,
 	markers = [],
+	popupContent,
+	onBoundsChange,
 	className = "h-[400px] w-full rounded-xl overflow-hidden",
 }: PropertyMapProps) {
 	const [mounted, setMounted] = useState(false);
@@ -66,8 +138,7 @@ export default function PropertyMap({
 	const hasMarkers = markers.length > 0;
 	const effectiveCenter = useMemo((): [number, number] => {
 		if (hasMarkers) {
-			const sum = markers.reduce((acc, m) => [acc[0] + m.lat, acc[1] + m.lng], [0, 0]);
-			return [sum[0] / markers.length, sum[1] / markers.length];
+			return [markers[0].lat, markers[0].lng];
 		}
 		return center;
 	}, [center, hasMarkers, markers]);
@@ -95,14 +166,25 @@ export default function PropertyMap({
 				style={{ minHeight: 200 }}
 			>
 				<MapCenterUpdater center={effectiveCenter} zoom={zoom} />
+				<MapBoundsReporter onBoundsChange={onBoundsChange} />
 				<TileLayer
-					attribution='Data by &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+					attribution='&copy; <a href="https://leafletjs.com/">Leaflet</a> | Data by &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
 					url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
 					maxZoom={19}
 				/>
 				{markers.map((m, i) => (
-					<Marker key={`${m.lat}-${m.lng}-${i}`} position={[m.lat, m.lng]} icon={pinIcon}>
-						<Popup>{m.label ?? "Property"}</Popup>
+					<Marker
+						key={`${m.lat}-${m.lng}-${m.propertyId ?? i}`}
+						position={[m.lat, m.lng]}
+						icon={pinIcon}
+					>
+						<Popup>
+							{popupContent ? (
+								<PopupContentWrapper>{popupContent(m)}</PopupContentWrapper>
+							) : (
+								(m.label ?? "Property")
+							)}
+						</Popup>
 					</Marker>
 				))}
 			</MapContainer>

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/components/PropertySearchFilters.tsx

@@ -0,0 +1,315 @@
+/**
+ * Search and filter bar for property search: area search, price range, number of bedrooms.
+ */
+import { Popover } from "radix-ui";
+import { Search, ChevronDown } from "lucide-react";
+
+const SEARCH_INPUT_CLASS =
+	"h-10 rounded-full border-2 border-primary/50 bg-background px-4 text-sm outline-none transition-colors placeholder:text-muted-foreground focus:border-primary focus:ring-2 focus:ring-primary/20";
+
+const FILTER_PILL_CLASS =
+	"inline-flex h-10 items-center gap-1.5 rounded-full border-2 border-primary/50 bg-background px-4 text-sm font-medium text-foreground outline-none transition-colors hover:border-primary/70 focus:ring-2 focus:ring-primary/20";
+
+const SAVE_BUTTON_CLASS =
+	"mt-3 w-full rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary/20";
+
+const DEFAULT_PRICE_MIN = 0;
+const DEFAULT_PRICE_MAX = 100_000;
+
+/** Bedroom filter buckets: ≤2, exactly 3, or ≥4 */
+export type BedroomFilter = "le2" | "3" | "ge4" | null;
+
+const BEDROOM_OPTIONS: { value: BedroomFilter; label: string }[] = [
+	{ value: "le2", label: "≤2" },
+	{ value: "3", label: "3" },
+	{ value: "ge4", label: "≥4" },
+];
+
+/** Sort by price or number of bedrooms, ascending or descending */
+export type SortBy = "price_asc" | "price_desc" | "beds_asc" | "beds_desc" | null;
+
+const SORT_OPTIONS: { value: NonNullable<SortBy>; label: string }[] = [
+	{ value: "price_asc", label: "Price (low to high)" },
+	{ value: "price_desc", label: "Price (high to low)" },
+	{ value: "beds_asc", label: "Number of bedrooms (low to high)" },
+	{ value: "beds_desc", label: "Number of bedrooms (high to low)" },
+];
+
+export interface PropertySearchFiltersProps {
+	searchQuery: string;
+	onSearchQueryChange: (value: string) => void;
+	priceMin: string;
+	onPriceMinChange: (value: string) => void;
+	priceMax: string;
+	onPriceMaxChange: (value: string) => void;
+	/** Called when user clicks Save in the Price popover; use this to commit filters and run search. */
+	onPriceSave?: (min: string, max: string) => void;
+	bedrooms: BedroomFilter;
+	onBedroomsChange: (value: BedroomFilter) => void;
+	/** Called when user clicks Save in the Beds popover; use this to commit filters and run search. */
+	onBedsSave?: (value: BedroomFilter) => void;
+	sortBy: SortBy;
+	onSortChange: (value: SortBy) => void;
+	/** Called when user clicks Save in the Sort popover; use this to apply sort. */
+	onSortSave?: (value: SortBy) => void;
+	/** When set, pill shows this as the applied sort (e.g. after Save); otherwise pill shows sortBy. */
+	appliedSortBy?: SortBy | null;
+	onSubmit?: () => void;
+}
+
+export default function PropertySearchFilters({
+	searchQuery,
+	onSearchQueryChange,
+	priceMin,
+	onPriceMinChange,
+	priceMax,
+	onPriceMaxChange,
+	onPriceSave,
+	bedrooms,
+	onBedroomsChange,
+	onBedsSave,
+	sortBy,
+	onSortChange,
+	onSortSave,
+	appliedSortBy,
+	onSubmit,
+}: PropertySearchFiltersProps) {
+	const handleKeyDown = (e: React.KeyboardEvent) => {
+		if (e.key === "Enter") onSubmit?.();
+	};
+
+	const rangeMin = DEFAULT_PRICE_MIN;
+	const rangeMax = DEFAULT_PRICE_MAX;
+
+	const minNum = priceMin.trim() ? Number(priceMin.replace(/[^0-9.]/g, "")) : NaN;
+	const maxNum = priceMax.trim() ? Number(priceMax.replace(/[^0-9.]/g, "")) : NaN;
+	const hasMin = Number.isFinite(minNum) && minNum > 0;
+	const hasMax = Number.isFinite(maxNum) && maxNum > 0;
+	const formatPrice = (n: number) =>
+		new Intl.NumberFormat("en-US", {
+			style: "currency",
+			currency: "USD",
+			maximumFractionDigits: 0,
+		}).format(n);
+	const priceValueLabel =
+		hasMin && hasMax
+			? `${formatPrice(minNum)} – ${formatPrice(maxNum)}`
+			: hasMin
+				? `${formatPrice(minNum)}+`
+				: hasMax
+					? `– ${formatPrice(maxNum)}`
+					: null;
+	const priceLabel = priceValueLabel != null ? `Price: ${priceValueLabel}` : "Price";
+
+	const bedsLabel = bedrooms
+		? `Number of bedrooms: ${BEDROOM_OPTIONS.find((o) => o.value === bedrooms)?.label ?? ""}`
+		: "Number of bedrooms";
+
+	const sortForPill = appliedSortBy ?? sortBy;
+	const sortOptionLabel = sortForPill
+		? (SORT_OPTIONS.find((o) => o.value === sortForPill)?.label ?? null)
+		: null;
+	const sortLabel = sortOptionLabel != null ? `Sort By: ${sortOptionLabel}` : "Sort By";
+
+	return (
+		<div className="flex w-full shrink-0 flex-col items-stretch gap-3 border-b border-border px-4 py-4 lg:flex-row lg:items-center">
+			<div className="relative min-w-0 w-full lg:w-1/2 lg:shrink-0">
+				<Search
+					className="pointer-events-none absolute left-3 top-1/2 size-5 -translate-y-1/2 text-muted-foreground"
+					aria-hidden
+				/>
+				<input
+					type="text"
+					value={searchQuery}
+					onChange={(e) => onSearchQueryChange(e.target.value)}
+					onKeyDown={handleKeyDown}
+					placeholder="Area or search"
+					className={`${SEARCH_INPUT_CLASS} w-full pl-10`}
+					aria-label="Search property listings"
+				/>
+			</div>
+			<div className="flex flex-wrap items-center gap-3 lg:flex-1 lg:min-w-0 lg:flex-nowrap">
+				<div className="min-w-0 lg:flex-1">
+					<Popover.Root>
+						<Popover.Trigger asChild>
+							<button
+								type="button"
+								className={`${FILTER_PILL_CLASS} w-full justify-center`}
+								aria-label={priceValueLabel == null ? "Price filter" : priceLabel}
+							>
+								{priceLabel}
+								<ChevronDown className="size-4 shrink-0 text-muted-foreground" aria-hidden />
+							</button>
+						</Popover.Trigger>
+						<Popover.Portal>
+							<Popover.Content
+								sideOffset={8}
+								align="start"
+								className="z-[1100] w-[min(20rem,90vw)] rounded-xl border border-border bg-background p-4 shadow-lg outline-none"
+							>
+								<div className="space-y-3">
+									<p className="text-sm font-medium text-foreground">Price range</p>
+									<div className="flex items-center gap-2">
+										<div className="flex flex-1 items-center rounded-full border-2 border-primary/50 bg-background focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20">
+											<span className="pl-4 text-sm text-muted-foreground">$</span>
+											<input
+												type="number"
+												min={rangeMin}
+												max={rangeMax}
+												step={1000}
+												value={priceMin}
+												onChange={(e) => onPriceMinChange(e.target.value)}
+												onKeyDown={handleKeyDown}
+												className="h-10 flex-1 border-0 bg-transparent px-2 py-0 text-sm outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+												aria-label="Minimum price"
+											/>
+										</div>
+										<span className="text-muted-foreground">–</span>
+										<div className="flex flex-1 items-center rounded-full border-2 border-primary/50 bg-background focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20">
+											<span className="pl-4 text-sm text-muted-foreground">$</span>
+											<input
+												type="number"
+												min={rangeMin}
+												max={rangeMax}
+												step={1000}
+												value={priceMax}
+												onChange={(e) => onPriceMaxChange(e.target.value)}
+												onKeyDown={handleKeyDown}
+												className="h-10 flex-1 border-0 bg-transparent px-2 py-0 text-sm outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+												aria-label="Maximum price"
+											/>
+										</div>
+									</div>
+									<Popover.Close asChild>
+										<button
+											type="button"
+											className={SAVE_BUTTON_CLASS}
+											onClick={() => onPriceSave?.(priceMin, priceMax)}
+										>
+											Save
+										</button>
+									</Popover.Close>
+								</div>
+							</Popover.Content>
+						</Popover.Portal>
+					</Popover.Root>
+				</div>
+
+				<div className="min-w-0 lg:flex-1">
+					<Popover.Root>
+						<Popover.Trigger asChild>
+							<button
+								type="button"
+								className={`${FILTER_PILL_CLASS} w-full justify-center`}
+								aria-label={bedrooms ? bedsLabel : "Number of bedrooms filter"}
+							>
+								{bedsLabel}
+								<ChevronDown className="size-4 shrink-0 text-muted-foreground" aria-hidden />
+							</button>
+						</Popover.Trigger>
+						<Popover.Portal>
+							<Popover.Content
+								sideOffset={8}
+								align="start"
+								className="z-[1100] w-[min(20rem,90vw)] rounded-xl border border-border bg-background p-4 shadow-lg outline-none"
+							>
+								<div className="space-y-3">
+									<p className="text-sm font-medium text-foreground">Number of bedrooms</p>
+									<div
+										className="flex overflow-hidden rounded-full border-2 border-primary/40"
+										role="group"
+										aria-label="Number of bedrooms"
+									>
+										{BEDROOM_OPTIONS.map(({ value, label }) => (
+											<button
+												key={value}
+												type="button"
+												onClick={() => onBedroomsChange(bedrooms === value ? null : value)}
+												className={`min-w-[4rem] flex-1 border-r border-primary/40 px-4 py-2 text-sm font-medium transition-colors last:border-r-0 ${
+													bedrooms === value
+														? "bg-primary text-primary-foreground"
+														: "bg-background text-primary hover:bg-primary/10"
+												}`}
+												aria-pressed={bedrooms === value}
+												aria-label={
+													value === "le2"
+														? "2 or fewer bedrooms"
+														: value === "3"
+															? "3 bedrooms"
+															: "4 or more bedrooms"
+												}
+											>
+												{label}
+											</button>
+										))}
+									</div>
+									<Popover.Close asChild>
+										<button
+											type="button"
+											className={SAVE_BUTTON_CLASS}
+											onClick={() => onBedsSave?.(bedrooms)}
+										>
+											Save
+										</button>
+									</Popover.Close>
+								</div>
+							</Popover.Content>
+						</Popover.Portal>
+					</Popover.Root>
+				</div>
+
+				<div className="min-w-0 lg:flex-1">
+					<Popover.Root>
+						<Popover.Trigger asChild>
+							<button
+								type="button"
+								className={`${FILTER_PILL_CLASS} w-full justify-center`}
+								aria-label={sortBy ? sortLabel : "Sort By"}
+							>
+								{sortLabel}
+								<ChevronDown className="size-4 shrink-0 text-muted-foreground" aria-hidden />
+							</button>
+						</Popover.Trigger>
+						<Popover.Portal>
+							<Popover.Content
+								sideOffset={8}
+								align="start"
+								className="z-[1100] w-[min(20rem,90vw)] rounded-xl border border-border bg-background p-4 shadow-lg outline-none"
+							>
+								<div className="space-y-3">
+									<p className="text-sm font-medium text-foreground">Sort by</p>
+									<div className="flex flex-col gap-1">
+										{SORT_OPTIONS.map(({ value, label }) => (
+											<button
+												key={value}
+												type="button"
+												onClick={() => onSortChange(value)}
+												className={`rounded-lg px-3 py-2 text-left text-sm font-medium transition-colors ${
+													sortBy === value
+														? "bg-primary text-primary-foreground"
+														: "bg-background text-foreground hover:bg-muted"
+												}`}
+												aria-pressed={sortBy === value}
+											>
+												{label}
+											</button>
+										))}
+									</div>
+									<Popover.Close asChild>
+										<button
+											type="button"
+											className={SAVE_BUTTON_CLASS}
+											onClick={() => onSortSave?.(sortBy)}
+										>
+											Save
+										</button>
+									</Popover.Close>
+								</div>
+							</Popover.Content>
+						</Popover.Portal>
+					</Popover.Root>
+				</div>
+			</div>
+		</div>
+	);
+}