Accessibility
diff --git a/src/app/alerts/page.tsx b/src/app/alerts/page.tsx index d989d9cf..063b0657 100644 --- a/src/app/alerts/page.tsx +++ b/src/app/alerts/page.tsx @@ -28,6 +28,7 @@ import Link from 'next/link'; import { toast } from 'sonner'; import { WalletConnector } from '@/components/WalletConnector'; import { PriceAlertBell } from '@/components/PriceAlertBell'; +import { AppHeader } from '@/components/layout/AppHeader'; export default function AlertsPage() { const { @@ -77,30 +78,24 @@ export default function AlertsPage() { return (
{/* Header */}
-
-
+
+
+
+ }
+ actions={
+ <>
+
-
-
-
-
-
-
-
-
-
-
-
- PC
-
- PropChain
-
-
-
diff --git a/src/app/compare/page.tsx b/src/app/compare/page.tsx
index 57a8b0da..cfddd733 100644
--- a/src/app/compare/page.tsx
+++ b/src/app/compare/page.tsx
@@ -5,8 +5,7 @@ import { useRouter, useSearchParams } from 'next/navigation';
import Link from 'next/link';
import { ArrowLeft, Share2, Download, Clock, Trash2, FileText } from 'lucide-react';
import { propertyService } from '@/lib/propertyService';
-import { useComparisonHistoryStore } from '@/store/comparisonHistoryStore';
-import { useComparisonStore } from '@/store/comparisonStore';
+import { useCompareStore } from '@/store/compareStore';
import { withRouteErrorBoundary } from '@/components/error/withRouteErrorBoundary';
import type { Property } from '@/types/property';
import { formatPrice, formatROI } from '@/utils/searchUtils';
@@ -94,8 +93,15 @@ function getBestValue(properties: Property[], metric: ComparisonMetric): number
function ComparePage() {
const router = useRouter();
const searchParams = useSearchParams();
- const { selectedProperties, clearProperties } = useComparisonStore();
- const { addComparison, history, removeComparison, clearHistory } = useComparisonHistoryStore();
+ // Selection and history come from the one compare store now (#1090). This
+ // page previously read selection from comparisonStore while ComparisonBar read
+ // compareStore, so the two could show different selections.
+ const selectedProperties = useCompareStore((state) => state.getSelectedProperties());
+ const clearProperties = useCompareStore((state) => state.clearCompare);
+ const addComparison = useCompareStore((state) => state.addComparison);
+ const history = useCompareStore((state) => state.history);
+ const removeComparison = useCompareStore((state) => state.removeComparison);
+ const clearHistory = useCompareStore((state) => state.clearHistory);
const [properties, setProperties] = useState([]);
useEffect(() => {
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index c9ff05f7..794d4fd5 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -18,6 +18,7 @@ import { Skeleton } from "@/components/ui/skeleton";
import { Sidebar } from "@/components/dashboard/Sidebar";
import { Menu } from "lucide-react";
import { Button } from "@/components/ui/button";
+import { AppHeader } from "@/components/layout/AppHeader";
const StakingPanel = dynamic(
() => import("@/components/dashboard/StakingPanel").then((m) => m.StakingPanel),
@@ -95,31 +96,20 @@ const Index = () => {
/>
-
-
+ setSidebarOpen(true)}
+ aria-label="Open sidebar"
+ >
+
+
+ }
+ actions={
-
-
-
-
- {/* Mobile menu toggle */}
-
-
-
- PC
-
- - PropChain -
-
diff --git a/src/app/dashboard/saved-searches/page.tsx b/src/app/dashboard/saved-searches/page.tsx
index f293f33b..88b760f4 100644
--- a/src/app/dashboard/saved-searches/page.tsx
+++ b/src/app/dashboard/saved-searches/page.tsx
@@ -28,6 +28,7 @@ import { Input } from "@/components/ui/input";
import { Search, Filter, Settings, Bell, Mail, Bookmark } from "lucide-react";
import { Skeleton } from "@/components/ui/skeleton";
import { CardSkeleton } from "@/components/ui/LoadingSkeletons";
+import { AppHeader } from "@/components/layout/AppHeader";
function SavedSearchesContent() {
const { address } = useWalletStore();
@@ -88,21 +89,7 @@ function SavedSearchesContent() {
if (!address) {
return (
-
-
+
-
-
-
-
-
- PC
-
- - PropChain -
- -
@@ -122,21 +109,7 @@ function SavedSearchesContent() {
return (
{/* Header */}
-
-
+
-
-
-
-
-
- PC
-
- - PropChain -
- -
diff --git a/src/app/governance/page.tsx b/src/app/governance/page.tsx
index c80fab09..9fc731a2 100644
--- a/src/app/governance/page.tsx
+++ b/src/app/governance/page.tsx
@@ -1,9 +1,9 @@
'use client';
import React, { useState, useEffect, useCallback } from 'react';
-import Link from 'next/link';
import { WalletConnector } from '@/components/WalletConnector';
import { withRouteErrorBoundary } from '@/components/error/withRouteErrorBoundary';
+import { AppHeader } from '@/components/layout/AppHeader';
// ─── Types ────────────────────────────────────────────────────────────────────
@@ -265,19 +265,7 @@ function GovernancePage() {
return (
{/* Header */}
-
-
+
{/* Page title */}
diff --git a/src/app/properties/[id]/PropertyDetailClient.tsx b/src/app/properties/[id]/PropertyDetailClient.tsx
deleted file mode 100644
index 063258ee..00000000
--- a/src/app/properties/[id]/PropertyDetailClient.tsx
+++ /dev/null
@@ -1,316 +0,0 @@
-'use client';
-
-import React, { useEffect, useRef, useState } from 'react';
-import Link from 'next/link';
-import Image from 'next/image';
-import QRCode from 'qrcode';
-import type { Property } from '@/types/property';
-import { WalletConnector } from '@/components/WalletConnector';
-import { PriceAlertBell } from '@/components/PriceAlertBell';
-import { SetPriceAlertModal } from '@/components/property/SetPriceAlertModal';
-import { useNotificationStore } from '@/store/notificationStore';
-import { toast } from 'sonner';
-import { useI18nFormatting } from '@/utils/i18nFormatting';
-import type { PriceAlertType } from '@/types/property';
-
-interface Props {
- property: Property;
-}
-
-export function PropertyDetailClient({ property }: Props) {
- const qrRef = useRef(null);
- const [qrGenerated, setQrGenerated] = useState(false);
- const [copied, setCopied] = useState(false);
- const [isAlertModalOpen, setIsAlertModalOpen] = useState(false);
- const { priceAlerts, addPriceAlert } = useNotificationStore();
- const existingAlert = priceAlerts.find((a) => a.propertyId === property.id);
- const { formatCurrency, formatNumber, formatDate } = useI18nFormatting();
-
- const handleSetAlert = (alertType: PriceAlertType, targetPrice: number, emailNotification: boolean) => {
- addPriceAlert({
- id: `alert-${property.id}-${Date.now()}`,
- propertyId: property.id,
- propertyName: property.name,
- propertyImage: property.images[0],
- alertType,
- targetPrice,
- currentPrice: property.price.perToken,
- createdAt: new Date().toISOString(),
- isActive: true,
- isTriggered: false,
- userId: '',
- emailNotification,
- });
- toast.success('Price alert set successfully');
- };
-
- const shareUrl =
- typeof window !== 'undefined'
- ? window.location.href
- : `https://propchain.io/properties/${property.id}`;
-
- useEffect(() => {
- if (qrRef.current) {
- QRCode.toCanvas(qrRef.current, shareUrl, { width: 160, margin: 1 }, () => {
- setQrGenerated(true);
- });
- }
- }, [shareUrl]);
-
- const handleCopy = async () => {
- await navigator.clipboard.writeText(shareUrl);
- setCopied(true);
- setTimeout(() => setCopied(false), 2000);
- };
-
- return (
- {
- const property = mockProperties[params.id as keyof typeof mockProperties];
-
- if (!property) {
- return {
- title: 'Property Not Found | PropChain',
- description: 'The requested property could not be found.',
- };
- }
-
- return generatePropertyMetadata(property, `/properties/${params.id}`);
-}
-
-// Generate JSON-LD structured data
-function generateStructuredData(property: any, url: string) {
- const propertyStructuredData = generatePropertyStructuredData(property, url);
- const breadcrumbStructuredData = generateBreadcrumbStructuredData([
- { name: 'Home', url: '/' },
- { name: 'Properties', url: '/properties' },
- { name: property.name, url: `/properties/${property.id}` }
- ]);
-
- return {
- __html: `${propertyStructuredData}\n${breadcrumbStructuredData}`
- };
-}
-
-export default function PropertyPage({ params }: PropertyPageProps) {
- const property = mockProperties[params.id as keyof typeof mockProperties];
- const url = `/properties/${params.id}`;
-
- if (!property) {
- return (
-
-
-
-
-
- PropChain
-
-
-
- {/* Header */}
-
-
-
-
- {/* Breadcrumb */}
-
-
-
-
-
- );
-}
diff --git a/src/app/properties/[id]/PropertyDetailPageClient.tsx b/src/app/properties/[id]/PropertyDetailPageClient.tsx
deleted file mode 100644
index c1aea4c2..00000000
--- a/src/app/properties/[id]/PropertyDetailPageClient.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-'use client';
-
-import React from 'react';
-import { PropertyDetail } from '@/components/PropertyDetail';
-import { WalletConnector } from '@/components/WalletConnector';
-import { Button } from '@/components/ui/button';
-import Link from 'next/link';
-import { ArrowLeft, Monitor } from 'lucide-react';
-
-interface PropertyDetailPageClientProps {
- propertyId: string;
-}
-
-export function PropertyDetailPageClient({ propertyId }: PropertyDetailPageClientProps) {
- return (
-
-
-
-
-
- PropChain
-
-
-
-
-
- {/* Left: Images + Details */}
-
-
- {/* Hero Image */}
- {property.images[0] && (
-
-
- {/* Right: Purchase + Share */}
-
-
- )}
-
- {/* Property Info */}
-
-
-
- {/* Metrics */}
-
-
-
-
- {property.name}
-- {property.location.address}, {property.location.city}, {property.location.state} -
-
- {property.verified && (
-
- Verified
-
- )}
- {property.featured && (
-
- Featured
-
- )}
-
- {property.description}
-
-
-
- {/* Property Details */}
- Investment Metrics
--
- {[
- { label: 'Annual ROI', value: `${property.metrics.roi}%` },
- { label: 'Annual Return', value: formatCurrency(property.metrics.annualReturn) },
- { label: 'Appreciation', value: `${property.metrics.appreciationRate}%` },
- { label: 'Volume', value: formatCurrency(property.metrics.transactionVolume) },
- ].map(({ label, value }) => (
-
- {label} -
- {value} -
-
- ))}
-
-
- Property Details
--
- {property.details.bedrooms !== undefined && (
-
- Bedrooms
- {property.details.bedrooms}
- Bathrooms
- {property.details.bathrooms}
- Square Feet
- {formatNumber(property.details.squareFeet)} sqft
- Year Built
- {property.details.yearBuilt}
- Listed
- {formatDate(property.listedDate)}
- Type
- {property.propertyType}
- Blockchain
- {property.blockchain}
- Amenities
-
- {property.details.amenities.map((a) => (
- {a}
- ))}
-
-
- )}
-
- {/* Pricing Card */}
-
-
-
-
- {/* Share / QR Code */}
-
-
-
- {/* Token availability */}
- {formatCurrency(property.price.total)}
-{formatCurrency(property.price.perToken)} per token
-
-
-
-
-
-
-
-
- Tokens Available
- {formatNumber(property.tokenInfo.available)} / {formatNumber(property.tokenInfo.totalSupply)}
-
-
-
-
- - Token: {property.tokenInfo.tokenSymbol} · {property.blockchain} -
-
-
- Share This Property
- - {/* QR Code */} -
-
- {!qrGenerated && (
-
- )}
-
-
- {/* Copy link */}
- Scan to open on mobile
-
-
-
-
-
- {/* Social share links */}
-
-
- Twitter
-
-
- LinkedIn
-
-
-
- {/* Header */}
-
-
-
- {/* Property Detail */}
-
- );
-}
diff --git a/src/app/properties/[id]/page-new.tsx b/src/app/properties/[id]/page-new.tsx
deleted file mode 100644
index db59edb3..00000000
--- a/src/app/properties/[id]/page-new.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import type { Metadata } from 'next';
-import { generatePropertyMetadata, generatePropertyStructuredData, generateBreadcrumbStructuredData } from '@/utils/seo';
-import PropertyDetailClient from './PropertyDetailClient';
-
-// Mock property data - in a real app this would come from an API
-const mockProperties = {
- '1': {
- id: '1',
- name: 'Manhattan Tower Suite',
- location: {
- address: '123 Wall Street',
- city: 'New York',
- state: 'NY',
- country: 'USA',
- zipCode: '10005',
- coordinates: { lat: 40.7074, lng: -74.0113 }
- },
- type: 'Commercial',
- description: 'Luxury commercial space in the heart of Manhattan with premium amenities and excellent connectivity.',
- images: [
- 'https://images.unsplash.com/photo-1486325212027-8081e485255e?w=800&auto=format&fit=crop&q=80',
- 'https://images.unsplash.com/photo-1497366216548-37526070297c?w=800&auto=format&fit=crop&q=80'
- ],
- value: 524000,
- tokens: 1048,
- roi: 14.2,
- monthlyIncome: 3280,
- contractAddress: '0x742d35Cc6634C0532925a3b844Bc454e4438f44e',
- blockchain: 'ethereum',
- details: {
- bedrooms: 0,
- bathrooms: 2,
- squareFeet: 2500,
- yearBuilt: 2019,
- parking: 4
- },
- tokenInfo: {
- available: 524,
- totalSupply: 1048,
- perToken: 500
- },
- listedDate: '2023-01-15T00:00:00Z',
- updatedAt: '2023-12-01T00:00:00Z',
- price: {
- total: 524000,
- perToken: 500,
- currency: 'USD'
- },
- propertyType: 'commercial',
- metrics: {
- roi: 14.2,
- annualReturn: 62400,
- transactionVolume: 1500000,
- appreciationRate: 8.5
- },
- featured: true,
- verified: true
- },
- '2': {
- id: '2',
- name: 'Sunset Beach Villa',
- location: {
- address: '456 Ocean Drive',
- city: 'Miami',
- state: 'FL',
- country: 'USA',
- zipCode: '33139',
- coordinates: { lat: 25.7617, lng: -80.1918 }
- },
- type: 'Residential',
- description: 'Beautiful beachfront property with stunning ocean views and modern amenities.',
- images: [
- 'https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=800&auto=format&fit=crop&q=80',
- 'https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?w=800&auto=format&fit=crop&q=80'
- ],
- value: 389000,
- tokens: 778,
- roi: 11.8,
- monthlyIncome: 2450,
- contractAddress: '0x1234567890123456789012345678901234567890',
- blockchain: 'polygon',
- details: {
- bedrooms: 4,
- bathrooms: 3,
- squareFeet: 3200,
- yearBuilt: 2021,
- parking: 2
- },
- tokenInfo: {
- available: 389,
- totalSupply: 778,
- perToken: 500
- },
- listedDate: '2023-03-20T00:00:00Z',
- updatedAt: '2023-11-15T00:00:00Z',
- price: {
- total: 389000,
- perToken: 500,
- currency: 'USD'
- },
- propertyType: 'residential',
- metrics: {
- roi: 11.8,
- annualReturn: 45960,
- transactionVolume: 800000,
- appreciationRate: 6.2
- },
- featured: false,
- verified: true
- }
-};
-
-interface PropertyPageProps {
- params: { id: string };
- searchParams: { [key: string]: string | string[] | undefined };
-}
-
-// Generate dynamic metadata for the property
-export async function generateMetadata({ params }: PropertyPageProps): Promise
-
-
-
-
-
-
-
-
-
-
-
- PC
-
- - PropChain -
-
-
-
-
-
-
-
-
-
-
-
-
- );
- }
-
- return (
- <>
-
-
-
- Property Not Found
-The property you're looking for doesn't exist or has been removed.
- - Back to Properties - -
-
-
+
-
-
-
-
-
-
-
-
- {/* Client-side components for interactive elements */}
-
-
-
- PC
-
- - PropChain -
-
diff --git a/src/app/properties/page.tsx b/src/app/properties/page.tsx
index 8e6393a6..085c4707 100644
--- a/src/app/properties/page.tsx
+++ b/src/app/properties/page.tsx
@@ -18,6 +18,7 @@ import type { SortOption } from "@/types/property";
import Link from "next/link";
import { Heart } from "lucide-react";
import PropertyPageSkeleton from "@/components/PropertyPageSkeleton";
+import { AppHeader } from "@/components/layout/AppHeader";
function PropertiesContent() {
const { viewMode: storeViewMode, setViewMode: setStoreViewMode } =
@@ -104,56 +105,46 @@ function PropertiesContent() {
return (
- {/* Header */}
-
-
+ Secondary Market
+
+
+
+
+
+
-
-
-
-
-
- PC
-
- - PropChain -
- -
-
-
-
-
-
-
-
-
diff --git a/src/app/secondary-market/page.tsx b/src/app/secondary-market/page.tsx
index f79e6cac..9208484e 100644
--- a/src/app/secondary-market/page.tsx
+++ b/src/app/secondary-market/page.tsx
@@ -11,6 +11,7 @@ import { withRouteErrorBoundary } from '@/components/error/withRouteErrorBoundar
import Link from 'next/link';
import Image from 'next/image';
import { toast } from 'sonner';
+import { AppHeader } from '@/components/layout/AppHeader';
function SecondaryMarketPage() {
const [listings, setListings] = useState([]);
@@ -46,21 +47,7 @@ function SecondaryMarketPage() {
return (
{/* Header */}
-
-
+
-
-
-
-
-
- PC
-
- PropChain
- -
-
-
diff --git a/src/app/tax-report/page.tsx b/src/app/tax-report/page.tsx
index 297f88b3..4fc6ec53 100644
--- a/src/app/tax-report/page.tsx
+++ b/src/app/tax-report/page.tsx
@@ -1,9 +1,9 @@
'use client';
import React, { useState } from 'react';
-import Link from 'next/link';
import { WalletConnector } from '@/components/WalletConnector';
import { withRouteErrorBoundary } from '@/components/error/withRouteErrorBoundary';
+import { AppHeader } from '@/components/layout/AppHeader';
// ─── Types ────────────────────────────────────────────────────────────────────
@@ -208,19 +208,7 @@ function TaxReportPage() {
return (
{/* Header */}
-
-
+
-
-
-
-
- PropChain
-
-
-
diff --git a/src/app/transactions/page.tsx b/src/app/transactions/page.tsx
index 05f22257..de203084 100644
--- a/src/app/transactions/page.tsx
+++ b/src/app/transactions/page.tsx
@@ -1,13 +1,13 @@
'use client';
import React from 'react';
-import Link from 'next/link';
import { useAccount } from 'wagmi';
import { useTranslation } from 'react-i18next';
import { TransactionHistory } from '@/components/TransactionHistory';
import { WalletConnector } from '@/components/WalletConnector';
-import { ArrowLeft, History } from 'lucide-react';
+import { History } from 'lucide-react';
import { EmptyState } from '@/components/ui/EmptyState';
+import { AppHeader } from '@/components/layout/AppHeader';
function TransactionsContent() {
const { t } = useTranslation('common');
@@ -15,28 +15,12 @@ function TransactionsContent() {
return (
-
-
+
-
-
-
-
-
-
-
-
-
- PC
-
- PropChain
-
diff --git a/src/app/watchlist/page.tsx b/src/app/watchlist/page.tsx
index 15abb767..010c60bf 100644
--- a/src/app/watchlist/page.tsx
+++ b/src/app/watchlist/page.tsx
@@ -1,12 +1,12 @@
'use client';
import React from 'react';
-import Link from 'next/link';
import { PropertyCard } from '@/components/PropertyCard';
import { useFavoritesStore } from '@/store/favoritesStore';
import { WalletConnector } from '@/components/WalletConnector';
-import { Heart, ArrowLeft } from 'lucide-react';
+import { Heart } from 'lucide-react';
import { EmptyState } from '@/components/ui/EmptyState';
+import { AppHeader } from '@/components/layout/AppHeader';
function WatchlistContent() {
const { favorites, clearFavorites } = useFavoritesStore();
@@ -14,30 +14,12 @@ function WatchlistContent() {
return (
{/* Header */}
-
-
+
-
-
-
-
-
-
-
-
-
- PC
-
- - PropChain -
-
diff --git a/src/components/FilterSidebar.tsx b/src/components/FilterSidebar.tsx
deleted file mode 100644
index 7b76cf8d..00000000
--- a/src/components/FilterSidebar.tsx
+++ /dev/null
@@ -1,308 +0,0 @@
-'use client';
-
-import React, { useState } from 'react';
-import type { SearchFilters, PropertyType, BlockchainNetwork } from '@/types/property';
-import { PROPERTY_TYPE_LABELS, BLOCKCHAIN_LABELS } from '@/types/property';
-
-interface FilterSidebarProps {
- filters: SearchFilters;
- onFilterChange: (key: K, value: SearchFilters[K]) => void;
- onClearFilters: () => void;
-}
-
-const FilterSidebarInner: React.FC = ({
- filters,
- onFilterChange,
- onClearFilters,
-}) => {
- const [isOpen, setIsOpen] = useState(false);
-
- const togglePropertyType = (type: PropertyType) => {
- const current = filters.propertyTypes || [];
- const updated = current.includes(type)
- ? current.filter(t => t !== type)
- : [...current, type];
- onFilterChange('propertyTypes', updated);
- };
-
- const toggleBlockchain = (chain: BlockchainNetwork) => {
- const current = filters.blockchains || [];
- const updated = current.includes(chain)
- ? current.filter(c => c !== chain)
- : [...current, chain];
- onFilterChange('blockchains', updated);
- };
-
- const hasActiveFilters = () => {
- return (
- filters.priceRange[0] > 0 ||
- filters.priceRange[1] < 10000000 ||
- filters.propertyTypes.length > 0 ||
- filters.blockchains.length > 0 ||
- filters.roiMin > 0 ||
- filters.roiMax < 100 ||
- filters.location ||
- filters.bedrooms.length > 0 ||
- filters.bathrooms.length > 0 ||
- filters.squareFeetRange[0] > 0 ||
- filters.squareFeetRange[1] < 50000
- );
- };
-
- return (
- <>
- {/* Mobile Filter Button */}
-
-
- {/* Overlay for mobile */}
- {isOpen && (
-
setIsOpen(false)}
- />
- )}
-
- {/* Sidebar */}
- = ({
}) => {
const isListView = viewMode === 'list';
const { addItem } = useCartStore();
- const { isPropertySelected, toggleProperty } = useComparisonStore();
-
- const isSelectedForComparison = isPropertySelected(property.id);
const selectedIds = useCompareStore((state) => state.selectedIds);
- const togglePropertyId = useCompareStore((state) => state.toggleProperty);
+ const toggleProperty = useCompareStore((state) => state.toggleProperty);
+ // One source of truth (#1090). This used to write to two stores per toggle
+ // while reading selection from one and the limit from the other, so the two
+ // could disagree.
const isCompared = selectedIds.includes(property.id);
- const compareLimitReached = selectedIds.length >= 3 && !isCompared;
+ const isSelectedForComparison = isCompared;
+ const compareLimitReached = selectedIds.length >= MAX_COMPARE && !isCompared;
const { addFavorite, removeFavorite, isFavorite } = useFavoritesStore();
const handleAddToCart = (e: React.MouseEvent) => {
@@ -48,13 +48,15 @@ const PropertyCardInner: React.FC = ({
const handleComparisonToggle = (e: React.MouseEvent) => {
e.stopPropagation();
+ // Passing the object caches it, so the floating bar can render a chip for a
+ // property the user just picked without refetching it.
toggleProperty(property);
};
const handleCompareToggle = (e: React.MouseEvent) => {
e.stopPropagation();
if (!compareLimitReached) {
- togglePropertyId(property.id);
+ toggleProperty(property);
}
};
diff --git a/src/components/PropertyDetail.tsx b/src/components/PropertyDetail.tsx
deleted file mode 100644
index f8b02b6d..00000000
--- a/src/components/PropertyDetail.tsx
+++ /dev/null
@@ -1,424 +0,0 @@
-'use client';
-
-import React, { useState, useEffect } from 'react';
-import Image from 'next/image';
-import { usePropertyQuery } from '@/hooks/usePropertySearchQuery';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { ShoppingCart, Plus, Share2, Heart, ExternalLink, Bell, Star, CheckCircle2 } from 'lucide-react';
-import { formatPrice, formatROI, getBlockchainColor } from '@/utils/searchUtils';
-import { BLOCKCHAIN_LABELS, PROPERTY_TYPE_LABELS, type PriceAlertType } from '@/types/property';
-import { useCartStore } from '@/store/cartStore';
-import { useNotificationStore } from '@/store/notificationStore';
-import { useRecentlyViewedStore } from '@/store/recentlyViewedStore';
-import { toast } from 'sonner';
-import { withLazyChart } from '@/components/LazyChart';
-const MortgageCalculator = withLazyChart(() => import('@/components/MortgageCalculator').then(m => ({ default: m.MortgageCalculator })));
-import { Loader2, ArrowLeft } from 'lucide-react';
-import Link from 'next/link';
-import { SetPriceAlertModal } from './property/SetPriceAlertModal';
-import { QRCode } from './QRCode';
-
-interface PropertyDetailProps {
- propertyId: string;
-}
-
-export const PropertyDetail: React.FC = ({ propertyId }) => {
- const { addItem } = useCartStore();
- const { priceAlerts, addPriceAlert } = useNotificationStore();
- const { addProperty: addRecentlyViewed } = useRecentlyViewedStore();
- const [isAlertModalOpen, setIsAlertModalOpen] = useState(false);
-
- const {
- data: property,
- isLoading,
- error
- } = usePropertyQuery(propertyId);
-
- // Track property view
- useEffect(() => {
- if (property) {
- addRecentlyViewed({
- id: property.id,
- name: property.name,
- location: `${property.location.city}, ${property.location.state}`,
- price: property.price.total,
- image: property.images[0],
- });
- }
- }, [property, addRecentlyViewed]);
-
- // Check if there's an existing alert for this property
- const existingAlert = priceAlerts.find(alert => alert.propertyId === propertyId);
-
- const handleSetAlert = (alertType: PriceAlertType, targetPrice: number, emailNotification: boolean) => {
- if (property) {
- addPriceAlert({
- id: `alert-${property.id}-${Date.now()}`,
- propertyId: property.id,
- propertyName: property.name,
- propertyImage: property.images[0],
- alertType,
- targetPrice,
- currentPrice: property.price.perToken,
- createdAt: new Date().toISOString(),
- isActive: true,
- isTriggered: false,
- userId: '', // Will be set from wallet
- emailNotification,
- });
- toast.success('Price alert set successfully!');
- }
- };
-
- const handleAddToCart = () => {
- if (property) {
- addItem(property, 1);
- toast.success('Property added to cart!');
- }
- };
-
-
- const handleSaveToFavorites = () => {
- if (property) {
- // Implement save to favorites logic
- toast.success('Property saved to favorites!');
- }
- };
-
- if (isLoading) {
- return (
- = ({ propertyId }) => {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
\ No newline at end of file
diff --git a/src/components/filters/index.ts b/src/components/filters/index.ts
deleted file mode 100644
index 513f2de1..00000000
--- a/src/components/filters/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as FilterSidebar } from "./FilterSidebar";
-export { default as FilterSection } from "./FilterSection";
-export { default as AdvancedFilters } from "./AdvancedFilters";
\ No newline at end of file
diff --git a/src/components/forms/SearchFilterForm.tsx b/src/components/forms/SearchFilterForm.tsx
index d614dfad..74d33991 100644
--- a/src/components/forms/SearchFilterForm.tsx
+++ b/src/components/forms/SearchFilterForm.tsx
@@ -9,6 +9,7 @@ import {
Form,
FormControl,
FormDescription,
+ FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form"
diff --git a/src/components/forms/__tests__/FilterUiConsolidation.test.tsx b/src/components/forms/__tests__/FilterUiConsolidation.test.tsx
new file mode 100644
index 00000000..f6271ba3
--- /dev/null
+++ b/src/components/forms/__tests__/FilterUiConsolidation.test.tsx
@@ -0,0 +1,125 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { render, waitFor } from '@testing-library/react';
+import { SearchFilterForm } from '@/components/forms/SearchFilterForm';
+import { DEFAULT_FILTERS, type SearchFilters } from '@/types/property';
+
+/**
+ * Issue #1092 — one canonical filter UI, one canonical filter state.
+ *
+ * Filter UI existed three times over:
+ *
+ * components/forms/SearchFilterForm live on /properties and /forms
+ * components/FilterSidebar same controls, per-key onFilterChange,
+ * tested but rendered by no page
+ * components/filters/* a sidebar referencing ten filter
+ * components that were never imported and
+ * do not exist; ten TS2304 errors
+ *
+ * The third could not compile at all. It went unnoticed because a syntax error
+ * in `src/middleware.ts` makes `tsc` skip the semantic pass for the whole
+ * program, so every type error in the repo is currently masked.
+ *
+ * `SearchFilterForm` is canonical: it is the one two pages actually render, it
+ * validates through `searchFilterSchema`, and it already speaks `SearchFilters`.
+ * The other two are gone.
+ *
+ * These assertions are structural on purpose. They cannot stop someone building
+ * a fourth filter UI, but they fail the moment a duplicate module reappears or
+ * the canonical form stops emitting the canonical state shape.
+ */
+const SRC = path.join(process.cwd(), 'src');
+
+function sourceFiles(dir: string, acc: string[] = []): string[] {
+ for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+ const full = path.join(dir, entry.name);
+ if (entry.isDirectory()) {
+ sourceFiles(full, acc);
+ } else if (/\.(ts|tsx)$/.test(entry.name)) {
+ acc.push(full);
+ }
+ }
+ return acc;
+}
+
+describe('filter UI module graph', () => {
+ const files = sourceFiles(SRC);
+
+ it('finds source files to scan', () => {
+ expect(files.length).toBeGreaterThan(100);
+ });
+
+ it('has exactly one filter form module', () => {
+ const forms = files.filter((file) =>
+ /[\\/]SearchFilterForm\.tsx$/.test(file),
+ );
+
+ expect(forms).toHaveLength(1);
+ });
+
+ it('has no FilterSidebar module left', () => {
+ const sidebars = files.filter((file) =>
+ /[\\/]FilterSidebar\.tsx$/.test(file),
+ );
+
+ expect(sidebars).toEqual([]);
+ });
+
+ it('has no components/filters directory left', () => {
+ expect(fs.existsSync(path.join(SRC, 'components', 'filters'))).toBe(false);
+ });
+
+ it('has no import of the removed filter modules', () => {
+ const offenders = files.filter((file) => {
+ if (file.includes('__tests__')) return false;
+ const source = fs.readFileSync(file, 'utf8');
+ return /from\s+['"][^'"]*(FilterSidebar|components\/filters|filters\/AdvancedFilters|filters\/FilterSection)['"]/.test(
+ source,
+ );
+ });
+
+ expect(offenders).toEqual([]);
+ });
+});
+
+describe('canonical filter state', () => {
+ it('emits exactly the SearchFilters keys and nothing else', async () => {
+ const onApplyFilters = jest.fn();
+
+ render(
+ `.** Most pages rendered `
-
-
- );
-};
-
-export const FilterSidebar = React.memo(FilterSidebarInner);
diff --git a/src/components/FloatingComparisonBar.tsx b/src/components/FloatingComparisonBar.tsx
index a9ec85eb..11ba8db2 100644
--- a/src/components/FloatingComparisonBar.tsx
+++ b/src/components/FloatingComparisonBar.tsx
@@ -3,7 +3,7 @@
import React, { memo, useMemo } from 'react';
import Link from 'next/link';
import { X, BarChart3 } from 'lucide-react';
-import { useComparisonStore } from '@/store/comparisonStore';
+import { useCompareStore } from '@/store/compareStore';
import { formatPrice } from '@/utils/searchUtils';
// ============================================================================
@@ -41,7 +41,12 @@ const PropertyChip = memo(function PropertyChip({ name, price, onRemove }: Prope
// ============================================================================
const FloatingComparisonBar = () => {
- const { selectedProperties, removeProperty, clearProperties } = useComparisonStore();
+ // Resolved from the selection cache (#1090). Ids whose object is not cached
+ // - a selection restored from storage or a share link - are omitted rather
+ // than rendered as placeholders.
+ const selectedProperties = useCompareStore((state) => state.getSelectedProperties());
+ const removeProperty = useCompareStore((state) => state.removeProperty);
+ const clearProperties = useCompareStore((state) => state.clearCompare);
const propertyCount = selectedProperties.length;
diff --git a/src/components/PropertyCard.tsx b/src/components/PropertyCard.tsx
index eea475dd..d534e73a 100644
--- a/src/components/PropertyCard.tsx
+++ b/src/components/PropertyCard.tsx
@@ -8,8 +8,7 @@ import type { Property } from '@/types/property';
import { formatPrice, formatNumber, formatROI, getBlockchainColor } from '@/utils/searchUtils';
import { BLOCKCHAIN_LABELS, PROPERTY_TYPE_LABELS } from '@/types/property';
import { useCartStore } from '@/store/cartStore';
-import { useComparisonStore } from '@/store/comparisonStore';
-import { useCompareStore } from '@/store/compareStore';
+import { MAX_COMPARE, useCompareStore } from '@/store/compareStore';
import { useFavoritesStore } from '@/store/favoritesStore';
import { ShareButton } from './property/ShareButton';
import { CurrencyToggle } from './property/CurrencyToggle';
@@ -31,14 +30,15 @@ const PropertyCardInner: React.FC
- {/* Header */}
-
-
-
-
- {/* Price Range */}
- Filters
-
- {hasActiveFilters() && (
-
- )}
-
-
-
-
-
-
- {/* Property Type */}
-
-
-
-
- onFilterChange('priceRange', [Number(e.target.value), filters.priceRange[1]])}
- className="w-full mt-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
- placeholder="$0"
- />
-
-
-
- onFilterChange('priceRange', [filters.priceRange[0], Number(e.target.value)])}
- className="w-full mt-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
- placeholder="$10,000,000"
- />
-
-
-
-
-
- {/* Blockchain */}
-
- {(Object.keys(PROPERTY_TYPE_LABELS) as PropertyType[]).map((type) => (
-
- ))}
-
-
-
-
-
- {/* ROI Range */}
-
- {(Object.keys(BLOCKCHAIN_LABELS) as BlockchainNetwork[]).map((chain) => (
-
- ))}
-
-
-
-
-
- {/* Bedrooms */}
-
-
-
-
- onFilterChange('roiMin', Number(e.target.value))}
- className="w-full mt-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
- placeholder="0%"
- min="0"
- max="100"
- />
-
-
-
- onFilterChange('roiMax', Number(e.target.value))}
- className="w-full mt-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
- placeholder="100%"
- min="0"
- max="100"
- />
-
-
-
-
-
- {/* Bathrooms */}
-
- {[1, 2, 3, 4, 5].map((num) => (
-
- ))}
-
-
-
-
-
- {/* Square Feet */}
-
- {[1, 2, 3, 4].map((num) => (
-
- ))}
-
-
-
-
-
-
-
-
- onFilterChange('squareFeetRange', [Number(e.target.value), filters.squareFeetRange[1]])}
- className="w-full mt-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
- placeholder="0"
- />
-
-
-
- onFilterChange('squareFeetRange', [filters.squareFeetRange[0], Number(e.target.value)])}
- className="w-full mt-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
- placeholder="50,000"
- />
-
-
-
- );
- }
-
- if (error || !property) {
- return (
-
-
- Loading property details...
-
-
- );
- }
-
- return (
-
-
- - Property not found -
-- The property you're looking for doesn't exist or has been removed. -
- - - -
- {/* Property Header */}
-
- );
-};
diff --git a/src/components/PropertyDetailClient.tsx b/src/components/PropertyDetailClient.tsx
deleted file mode 100644
index b91a6b02..00000000
--- a/src/components/PropertyDetailClient.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-'use client';
-
-import React from 'react';
-import { WalletConnector } from '@/components/WalletConnector';
-import { PriceAlertBell } from '@/components/PriceAlertBell';
-
-interface PropertyDetailClientProps {
- propertyId: string;
-}
-
-export const PropertyDetailClient: React.FC
- {/* Main Image and Gallery */}
-
-
- {/* Property Details */}
-
-
-
- {/* Property Info Sidebar */}
-
- {/* Badges */}
-
-
- {property.featured && (
-
-
- Featured
-
- )}
- {property.verified && (
-
-
- Verified
-
- )}
-
-
- {/* ROI Badge */}
-
-
-
-
- {formatROI(property.metrics.roi)} ROI
-
-
- {/* Title and Location */}
-
-
- Investment Details
-
-
-
-
-
- {/* Blockchain Information */}
-
-
- Blockchain
-
-
-
-
-
- {/* Action Buttons */}
-
-
-
-
- {/* Price Information */}
-
-
- {PROPERTY_TYPE_LABELS[property.propertyType]}
-
-
- - {property.name} -
-
-
-
- {property.location.address}, {property.location.city}, {property.location.state}
-
-
-
- Total Value
-
-
- Per Token
-
-
- Available Tokens
-
- {property.tokenInfo.available.toLocaleString()} / {property.tokenInfo.totalSupply.toLocaleString()}
-
-
-
- Expected ROI
-
- {formatROI(property.metrics.roi)}
-
-
-
-
-
- {BLOCKCHAIN_LABELS[property.blockchain]}
-
-
-
- Contract: {property.tokenInfo.contractAddress}
-
-
-
-
-
-
- {property && (
-
-
- {/* Set Price Alert Button */}
-
-
- {/* Description */}
-
-
- {/* Set Price Alert Modal */}
- {property && (
-
-
-
- About this Property
-
-
-
-
-
- {/* Property Features */}
-
-
- Property Features
-
-
-
-
-
-
- {/* Sidebar */}
- - {property.description} -
-
- {property.details.bedrooms && (
-
-
-
- )}
-
- {property.details.bathrooms && (
-
-
-
- {property.details.bedrooms}
- Bedrooms
-
-
- )}
-
-
-
-
- {property.details.bathrooms}
- Bathrooms
-
-
-
-
-
-
- {property.details.squareFeet.toLocaleString()}
- Square Feet
-
-
-
-
-
- {formatROI(property.metrics.roi)}
- ROI
-
- {/* Investment Summary */}
-
-
- Investment Summary
-
-
-
-
-
- {/* External Links */}
-
-
- External Links
-
-
-
-
-
-
-
-
- Annual Yield
-
- {formatROI(property.metrics.roi)}
-
-
-
- Transaction Volume
-
- {property.metrics.transactionVolume.toLocaleString()}
-
-
-
- Listed Date
-
- {new Date(property.listedDate).toLocaleDateString()}
-
-
-
-
-
- {/* QR Code for Print - Only visible when printing */}
-
-
- - Scan to view this property online -
-
-
- );
-};
diff --git a/src/components/__tests__/FilterSidebar.test.tsx b/src/components/__tests__/FilterSidebar.test.tsx
deleted file mode 100644
index 96647109..00000000
--- a/src/components/__tests__/FilterSidebar.test.tsx
+++ /dev/null
@@ -1,318 +0,0 @@
-import { render, screen, fireEvent, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { FilterSidebar } from '../FilterSidebar';
-import { DEFAULT_FILTERS } from '@/types/property';
-import type { SearchFilters } from '@/types/property';
-
-const activeFilters: SearchFilters = {
- ...DEFAULT_FILTERS,
- priceRange: [100000, 500000],
- propertyTypes: ['residential'],
- blockchains: ['ethereum'],
- roiMin: 5,
- bedrooms: [2],
-};
-
-describe('FilterSidebar visual snapshots', () => {
- it('matches snapshot with default filters', () => {
- const { container } = render(
-
-
-`;
-
-exports[`FilterSidebar visual snapshots matches snapshot with active filters 1`] = `
-
-
-
-
- - Filters -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`FilterSidebar visual snapshots matches snapshot with default filters 1`] = `
-
-
-
-
-
-
- - Filters -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`;
diff --git a/src/components/filters/AdvancedFilters.tsx b/src/components/filters/AdvancedFilters.tsx
deleted file mode 100644
index f8b4fad2..00000000
--- a/src/components/filters/AdvancedFilters.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-interface Props {
- values: any;
- onChange: (name: string, value: any) => void;
-}
-
-export default function AdvancedFilters({
- values,
- onChange,
-}: Props) {
- return (
- <>
-
-
-
-
-
-
- - Filters -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {isOpen && (
-
- );
-}
\ No newline at end of file
diff --git a/src/components/filters/FilterSidebar.tsx b/src/components/filters/FilterSidebar.tsx
deleted file mode 100644
index 1e8483e7..00000000
--- a/src/components/filters/FilterSidebar.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import FilterSection from "./FilterSection";
-import AdvancedFilters from "./AdvancedFilters";
-
-export default function FilterSidebar(props) {
- return (
- <>
-
- {children}
-
- )}
- `.** Most pages rendered `PropChain
`
+ * in the header *and* an `` for the page title, giving every page two level-1
+ * headings and making the real title ambiguous to a screen reader. The brand is
+ * a `` here, so each page keeps exactly one `` — its own.
+ *
+ * **One banner landmark per page.** A page that rendered its own `` and
+ * also mounted a component that rendered one produced two `banner` landmarks.
+ * Rendering this component once per route keeps that to one; `as="div"` is
+ * available for the rare case where a second header-shaped block is wanted
+ * inside a page without claiming the landmark.
+ */
+export interface AppHeaderProps {
+ /**
+ * Pin the header to the top of the viewport. Most routes do; the dashboard
+ * shell does not, because it scrolls inside its own ``.
+ */
+ sticky?: boolean;
+ /** Back link rendered before the brand. */
+ backHref?: string;
+ /**
+ * Visible label for the back link, hidden below `sm`. When omitted the link
+ * still carries an accessible name via `aria-label`.
+ */
+ backLabel?: string;
+ /** Slot before the brand — e.g. the dashboard's mobile sidebar toggle. */
+ leading?: ReactNode;
+ /** Right-hand slot. `WalletConnector` is the common case. */
+ actions?: ReactNode;
+ /**
+ * Where the brand links to. Pass `null` to render it as plain text, which is
+ * the right choice on the home page where the link would point at itself.
+ */
+ brandHref?: string | null;
+ /**
+ * Render as a plain `div` instead of ``, so a second header-shaped
+ * row inside a page does not create a competing `banner` landmark.
+ */
+ as?: "header" | "div";
+ className?: string;
+ /**
+ * Override the inner container width. Defaults to `max-w-7xl`, matching most
+ * routes; `/alerts` is laid out at `max-w-4xl` and its header must line up
+ * with its own body rather than with the wider pages.
+ */
+ containerClassName?: string;
+}
+
+/**
+ * The PC square plus the PropChain wordmark.
+ *
+ * Deliberately not a heading: see the note on {@link AppHeaderProps}.
+ */
+function Brand() {
+ return (
+
+
+
+ PropChain
+
+
+ );
+}
+
+/**
+ * Renders the one PropChain page header.
+ *
+ * @param props - See {@link AppHeaderProps}.
+ * @returns The header row, with `leading`/back-link/brand on the left and
+ * `actions` on the right.
+ */
+export function AppHeader({
+ sticky = false,
+ backHref,
+ backLabel,
+ leading,
+ actions,
+ brandHref = "/",
+ as: Element = "header",
+ className,
+ containerClassName,
+}: AppHeaderProps) {
+ return (
+
+
+
+
+ {leading}
+
+ {backHref ? (
+
+
+ {backLabel ? (
+ {backLabel}
+ ) : null}
+
+ ) : null}
+
+ {brandHref ? (
+
+
+ );
+}
+
+export default AppHeader;
diff --git a/src/components/layout/__tests__/AppHeader.test.tsx b/src/components/layout/__tests__/AppHeader.test.tsx
new file mode 100644
index 00000000..df440576
--- /dev/null
+++ b/src/components/layout/__tests__/AppHeader.test.tsx
@@ -0,0 +1,107 @@
+import { render, screen } from '@testing-library/react';
+import { AppHeader } from '@/components/layout/AppHeader';
+
+/**
+ * Issue #1094 — the shared header.
+ *
+ * The interesting assertions are the accessibility ones. The twenty inlined
+ * copies this replaces mostly rendered `PropChain
`, so a page ended up
+ * with two level-1 headings, and any page that also mounted a header-rendering
+ * component ended up with two `banner` landmarks. Both are pinned here so they
+ * cannot come back.
+ */
+describe('AppHeader', () => {
+ it('renders exactly one banner landmark', () => {
+ render(; the brand must not compete with it.
+ expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+ });
+
+ it('links the brand to the home page by default', () => {
+ render(Open sidebar}
+ actions={}
+ />,
+ );
+
+ expect(
+ screen.getByRole('button', { name: 'Open sidebar' }),
+ ).toBeInTheDocument();
+ expect(
+ screen.getByRole('button', { name: 'Connect wallet' }),
+ ).toBeInTheDocument();
+ });
+
+ it('applies sticky positioning only when asked', () => {
+ const { container: plain } = render(wallet
}
+ />,
+ );
+
+ expect(container.firstChild).toMatchSnapshot();
+ });
+});
diff --git a/src/components/layout/__tests__/__snapshots__/AppHeader.test.tsx.snap b/src/components/layout/__tests__/__snapshots__/AppHeader.test.tsx.snap
new file mode 100644
index 00000000..e5a3c6d9
--- /dev/null
+++ b/src/components/layout/__tests__/__snapshots__/AppHeader.test.tsx.snap
@@ -0,0 +1,82 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AppHeader matches the rendered structure 1`] = `
+
+
+
+
+
+
+ wallet
+
+
+
+
+
+`;
diff --git a/src/components/property/PropertyDetailHeaderActions.tsx b/src/components/property/PropertyDetailHeaderActions.tsx
new file mode 100644
index 00000000..13d76ff9
--- /dev/null
+++ b/src/components/property/PropertyDetailHeaderActions.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import { PriceAlertBell } from '@/components/PriceAlertBell';
+import { WalletConnector } from '@/components/WalletConnector';
+
+/**
+ * Issue #1093 — the client island in the property detail header.
+ *
+ * This was `src/components/PropertyDetailClient.tsx`, a name that promised a
+ * client rendering of the whole property detail and delivered two buttons. The
+ * misleading name is most of why a second, unrelated `PropertyDetailClient`
+ * grew under `src/app/properties/[id]/` taking a different prop shape: nothing
+ * about the old name said "header actions", so the obvious name was still free.
+ *
+ * It also took a `propertyId` prop it never read. That is gone; the bell and the
+ * connector both resolve their own state.
+ *
+ * `AppHeader` supplies the flex row, so this returns a fragment.
+ *
+ * @returns The interactive controls for the property detail header.
+ */
+export function PropertyDetailHeaderActions() {
+ return (
+ <>
+ ;
+
+ addProperty: (target: Property | string) => void;
+ removeProperty: (target: Property | string) => void;
+ toggleProperty: (target: Property | string) => void;
clearCompare: () => void;
setSelectedIds: (ids: string[]) => void;
+ isPropertySelected: (propertyId: string) => boolean;
+ /** Selected properties resolvable from the cache, ordered by selection. */
+ getSelectedProperties: () => Property[];
+
+ // ── history slice ──────────────────────────────────────────────────────
+ history: ComparisonHistory[];
+ addComparison: (propertyIds: string[]) => void;
+ removeComparison: (id: string) => void;
+ clearHistory: () => void;
+ getHistory: () => ComparisonHistory[];
}
+/** Accepts either a `Property` or a bare id, since both call styles exist. */
+const idOf = (target: Property | string): string =>
+ typeof target === 'string' ? target : target.id;
+
+/**
+ * Canonical compare store: selection and history in one module (#1090).
+ *
+ * Previously three stores split this. `compareStore` held ids, `comparisonStore`
+ * held whole `Property` objects under a separate persistence key, and
+ * `comparisonHistoryStore` held snapshots. A fourth module,
+ * `compareStoreCanonical`, declared `compareStore` authoritative but had no
+ * importers, so it changed nothing.
+ *
+ * The split was not merely untidy. `PropertyCard` wrote to *both* selection
+ * stores on every toggle while reading "is this selected" from one and "is the
+ * limit reached" from the other, so the two could disagree — and `/compare` read
+ * `comparisonStore` while `ComparisonBar` read `compareStore`, so the bar and
+ * the page could show different selections. One store removes the class of bug
+ * rather than patching an instance of it.
+ */
export const useCompareStore = create()(
persist(
(set, get) => ({
selectedIds: [],
+ propertyCache: {},
+ history: [],
+
+ addProperty: (target) => {
+ const id = idOf(target);
- addProperty: (id: string) => {
set((state) => {
- if (state.selectedIds.includes(id) || state.selectedIds.length >= 3) {
+ if (state.selectedIds.includes(id) || state.selectedIds.length >= MAX_COMPARE) {
return state;
}
return {
selectedIds: [...state.selectedIds, id],
+ propertyCache:
+ typeof target === 'string'
+ ? state.propertyCache
+ : { ...state.propertyCache, [id]: target },
};
});
},
- removeProperty: (id: string) => {
- set((state) => ({
- selectedIds: state.selectedIds.filter((selectedId) => selectedId !== id),
- }));
- },
+ removeProperty: (target) => {
+ const id = idOf(target);
- toggleProperty: (id: string) => {
set((state) => {
- if (state.selectedIds.includes(id)) {
- return {
- selectedIds: state.selectedIds.filter((selectedId) => selectedId !== id),
- };
- }
-
- if (state.selectedIds.length >= 3) {
- return state;
- }
+ // The cache entry is dropped with the selection so a long session does
+ // not accumulate objects for properties nobody is comparing.
+ const { [id]: _removed, ...remainingCache } = state.propertyCache;
return {
- selectedIds: [...state.selectedIds, id],
+ selectedIds: state.selectedIds.filter((selectedId) => selectedId !== id),
+ propertyCache: remainingCache,
};
});
},
- clearCompare: () => {
- set({ selectedIds: [] });
+ toggleProperty: (target) => {
+ const id = idOf(target);
+
+ if (get().selectedIds.includes(id)) {
+ get().removeProperty(id);
+ return;
+ }
+
+ get().addProperty(target);
},
- setSelectedIds: (ids: string[]) => {
- set({ selectedIds: ids.slice(0, 3) });
+ clearCompare: () => set({ selectedIds: [], propertyCache: {} }),
+
+ setSelectedIds: (ids) =>
+ set((state) => {
+ const capped = ids.slice(0, MAX_COMPARE);
+ const cache: Record = {};
+
+ for (const id of capped) {
+ const cached = state.propertyCache[id];
+ if (cached) cache[id] = cached;
+ }
+
+ return { selectedIds: capped, propertyCache: cache };
+ }),
+
+ isPropertySelected: (propertyId) => get().selectedIds.includes(propertyId),
+
+ getSelectedProperties: () => {
+ const { selectedIds, propertyCache } = get();
+
+ return selectedIds
+ .map((id) => propertyCache[id])
+ .filter((property): property is Property => Boolean(property));
+ },
+
+ addComparison: (propertyIds) => {
+ if (propertyIds.length === 0) return;
+
+ const entry: ComparisonHistory = {
+ id: generateSecureId('comp'),
+ propertyIds,
+ timestamp: Date.now(),
+ shareUrl: `/compare?ids=${propertyIds.join(',')}`,
+ };
+
+ set((state) => ({
+ history: [entry, ...state.history].slice(0, MAX_HISTORY),
+ }));
},
+
+ removeComparison: (id) =>
+ set((state) => ({
+ history: state.history.filter((item) => item.id !== id),
+ })),
+
+ clearHistory: () => set({ history: [] }),
+
+ getHistory: () => get().history,
}),
{
+ // Same key as the previous selection store, so an existing selection
+ // survives this refactor rather than being silently dropped.
name: 'propchain-compare',
- partialize: (state) => ({ selectedIds: state.selectedIds }),
- }
- )
+ version: 2,
+ partialize: (state) => ({
+ selectedIds: state.selectedIds,
+ propertyCache: state.propertyCache,
+ history: state.history,
+ }),
+ /**
+ * v1 persisted only `selectedIds` under this key, and history lived under
+ * `propchain-comparison-history`. Carry both forward so users do not lose
+ * a selection or their recent comparisons on upgrade.
+ */
+ migrate: (persisted, version) => {
+ const state = (persisted ?? {}) as Partial;
+ if (version >= 2) return state;
+
+ let history: ComparisonHistory[] = state.history ?? [];
+
+ if (history.length === 0 && typeof window !== 'undefined') {
+ try {
+ const legacy = window.localStorage.getItem('propchain-comparison-history');
+ if (legacy) {
+ const parsed = JSON.parse(legacy) as { state?: { history?: ComparisonHistory[] } };
+ history = parsed.state?.history ?? [];
+ }
+ } catch {
+ // A malformed or unreadable legacy entry is not worth failing the
+ // upgrade over; history is recoverable by comparing again.
+ history = [];
+ }
+ }
+
+ return {
+ ...state,
+ selectedIds: state.selectedIds ?? [],
+ propertyCache: state.propertyCache ?? {},
+ history,
+ };
+ },
+ },
+ ),
);
diff --git a/src/store/compareStoreCanonical.ts b/src/store/compareStoreCanonical.ts
deleted file mode 100644
index 396b4c7b..00000000
--- a/src/store/compareStoreCanonical.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Canonical compare-selection accessor.
- *
- * PropertyCard, the compare page, and the header badge previously read
- * selection state from two independent stores (`compareStore` and
- * `comparisonStore`), which could disagree. `compareStore` is the single
- * source of truth for the current selection; `comparisonHistoryStore`
- * remains scoped to history snapshots only. Consumers should import
- * `useCanonicalCompareSelection` instead of reading `comparisonStore`
- * directly, so selection state can't fork again.
- */
-import { useCompareStore } from './compareStore';
-
-export function useCanonicalCompareSelection() {
- const selectedIds = useCompareStore((state) => state.selectedIds ?? []);
- const toggle = useCompareStore((state) => state.toggleProperty);
- const clear = useCompareStore((state) => state.clearCompare);
-
- return {
- selectedIds,
- count: selectedIds.length,
- toggle,
- clear,
- };
-}
diff --git a/src/store/comparisonHistoryStore.ts b/src/store/comparisonHistoryStore.ts
deleted file mode 100644
index 3ab7c91d..00000000
--- a/src/store/comparisonHistoryStore.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-'use client';
-
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
-import { genId } from '@/utils/genId';
-import { generateSecureId } from '@/utils/secureId';
-
-export interface ComparisonHistory {
- id: string;
- propertyIds: string[];
- timestamp: number;
- shareUrl: string;
-}
-
-interface ComparisonHistoryStore {
- history: ComparisonHistory[];
- addComparison: (propertyIds: string[]) => void;
- removeComparison: (id: string) => void;
- clearHistory: () => void;
- getHistory: () => ComparisonHistory[];
-}
-
-const MAX_HISTORY = 5;
-
-export const useComparisonHistoryStore = create()(
- persist(
- (set, get) => ({
- history: [],
-
- addComparison: (propertyIds: string[]) => {
- if (propertyIds.length === 0) return;
-
- const id = generateSecureId('comp');
- const shareUrl = `/compare?ids=${propertyIds.join(',')}`;
-
- const newComparison: ComparisonHistory = {
- id,
- propertyIds,
- timestamp: Date.now(),
- shareUrl,
- };
-
- set((state) => {
- const updatedHistory = [newComparison, ...state.history].slice(0, MAX_HISTORY);
- return { history: updatedHistory };
- });
- },
-
- removeComparison: (id: string) => {
- set((state) => ({
- history: state.history.filter((item) => item.id !== id),
- }));
- },
-
- clearHistory: () => {
- set({ history: [] });
- },
-
- getHistory: () => {
- return get().history;
- },
- }),
- {
- name: 'propchain-comparison-history',
- partialize: (state) => ({ history: state.history }),
- }
- )
-);
diff --git a/src/store/comparisonStore.ts b/src/store/comparisonStore.ts
deleted file mode 100644
index 721b179e..00000000
--- a/src/store/comparisonStore.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
-import type { Property } from '@/types/property';
-
-interface ComparisonState {
- selectedProperties: Property[];
- maxProperties: number;
- addProperty: (property: Property) => void;
- removeProperty: (property: Property) => void;
- clearProperties: () => void;
- isPropertySelected: (propertyId: string) => boolean;
- toggleProperty: (property: Property) => void;
-}
-
-export const useComparisonStore = create()(
- persist(
- (set, get) => ({
- selectedProperties: [],
- maxProperties: 3,
-
- addProperty: (property: Property) => {
- const { selectedProperties, maxProperties } = get();
- if (selectedProperties.length >= maxProperties) return;
-
- // Check if property is already selected
- if (selectedProperties.some(p => p.id === property.id)) return;
-
- set({ selectedProperties: [...selectedProperties, property] });
- },
-
- removeProperty: (property: Property) => {
- const { selectedProperties } = get();
- set({
- selectedProperties: selectedProperties.filter(p => p.id !== property.id)
- });
- },
-
- clearProperties: () => {
- set({ selectedProperties: [] });
- },
-
- isPropertySelected: (propertyId: string) => {
- const { selectedProperties } = get();
- return selectedProperties.some(p => p.id === propertyId);
- },
-
- toggleProperty: (property: Property) => {
- const { isPropertySelected, addProperty, removeProperty } = get();
- if (isPropertySelected(property.id)) {
- removeProperty(property);
- } else {
- addProperty(property);
- }
- },
- }),
- {
- name: 'property-comparison-storage',
- partialize: (state) => ({ selectedProperties: state.selectedProperties }),
- }
- )
-);
\ No newline at end of file
diff --git a/src/store/domains/property/index.ts b/src/store/domains/property/index.ts
index 497330eb..c996cf32 100644
--- a/src/store/domains/property/index.ts
+++ b/src/store/domains/property/index.ts
@@ -1,8 +1,8 @@
// Property domain - combines property, portfolio, favorites, comparison stores
export { usePortfolioStore } from '../portfolioStore';
export { useFavoritesStore } from '../favoritesStore';
-export { useCompareStore } from '../compareStore';
-export { useComparisonStore } from '../comparisonStore';
-export { useComparisonHistoryStore } from '../comparisonHistoryStore';
+// Selection and history now live in one store (#1090).
+export { useCompareStore, MAX_COMPARE, MAX_HISTORY } from '../compareStore';
+export type { ComparisonHistory } from '../compareStore';
export { useRecentlyViewedStore } from '../recentlyViewedStore';
export { useCertificateStore } from '../certificateStore';
` — its own.
+ *
+ * **One banner landmark per page.** A page that rendered its own `` and
+ * also mounted a component that rendered one produced two `banner` landmarks.
+ * Rendering this component once per route keeps that to one; `as="div"` is
+ * available for the rare case where a second header-shaped block is wanted
+ * inside a page without claiming the landmark.
+ */
+export interface AppHeaderProps {
+ /**
+ * Pin the header to the top of the viewport. Most routes do; the dashboard
+ * shell does not, because it scrolls inside its own ``.
+ */
+ sticky?: boolean;
+ /** Back link rendered before the brand. */
+ backHref?: string;
+ /**
+ * Visible label for the back link, hidden below `sm`. When omitted the link
+ * still carries an accessible name via `aria-label`.
+ */
+ backLabel?: string;
+ /** Slot before the brand — e.g. the dashboard's mobile sidebar toggle. */
+ leading?: ReactNode;
+ /** Right-hand slot. `WalletConnector` is the common case. */
+ actions?: ReactNode;
+ /**
+ * Where the brand links to. Pass `null` to render it as plain text, which is
+ * the right choice on the home page where the link would point at itself.
+ */
+ brandHref?: string | null;
+ /**
+ * Render as a plain `div` instead of ``, so a second header-shaped
+ * row inside a page does not create a competing `banner` landmark.
+ */
+ as?: "header" | "div";
+ className?: string;
+ /**
+ * Override the inner container width. Defaults to `max-w-7xl`, matching most
+ * routes; `/alerts` is laid out at `max-w-4xl` and its header must line up
+ * with its own body rather than with the wider pages.
+ */
+ containerClassName?: string;
+}
+
+/**
+ * The PC square plus the PropChain wordmark.
+ *
+ * Deliberately not a heading: see the note on {@link AppHeaderProps}.
+ */
+function Brand() {
+ return (
+
+
+
+ PropChain
+
+
+ );
+}
+
+/**
+ * Renders the one PropChain page header.
+ *
+ * @param props - See {@link AppHeaderProps}.
+ * @returns The header row, with `leading`/back-link/brand on the left and
+ * `actions` on the right.
+ */
+export function AppHeader({
+ sticky = false,
+ backHref,
+ backLabel,
+ leading,
+ actions,
+ brandHref = "/",
+ as: Element = "header",
+ className,
+ containerClassName,
+}: AppHeaderProps) {
+ return (
+
+
+
+
+ {leading}
+
+ {backHref ? (
+
+
+ {backLabel ? (
+ {backLabel}
+ ) : null}
+
+ ) : null}
+
+ {brandHref ? (
+
+
+ );
+}
+
+export default AppHeader;
diff --git a/src/components/layout/__tests__/AppHeader.test.tsx b/src/components/layout/__tests__/AppHeader.test.tsx
new file mode 100644
index 00000000..df440576
--- /dev/null
+++ b/src/components/layout/__tests__/AppHeader.test.tsx
@@ -0,0 +1,107 @@
+import { render, screen } from '@testing-library/react';
+import { AppHeader } from '@/components/layout/AppHeader';
+
+/**
+ * Issue #1094 — the shared header.
+ *
+ * The interesting assertions are the accessibility ones. The twenty inlined
+ * copies this replaces mostly rendered `PropChain
`, so a page ended up
+ * with two level-1 headings, and any page that also mounted a header-rendering
+ * component ended up with two `banner` landmarks. Both are pinned here so they
+ * cannot come back.
+ */
+describe('AppHeader', () => {
+ it('renders exactly one banner landmark', () => {
+ render(; the brand must not compete with it.
+ expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+ });
+
+ it('links the brand to the home page by default', () => {
+ render(Open sidebar}
+ actions={}
+ />,
+ );
+
+ expect(
+ screen.getByRole('button', { name: 'Open sidebar' }),
+ ).toBeInTheDocument();
+ expect(
+ screen.getByRole('button', { name: 'Connect wallet' }),
+ ).toBeInTheDocument();
+ });
+
+ it('applies sticky positioning only when asked', () => {
+ const { container: plain } = render(wallet
}
+ />,
+ );
+
+ expect(container.firstChild).toMatchSnapshot();
+ });
+});
diff --git a/src/components/layout/__tests__/__snapshots__/AppHeader.test.tsx.snap b/src/components/layout/__tests__/__snapshots__/AppHeader.test.tsx.snap
new file mode 100644
index 00000000..e5a3c6d9
--- /dev/null
+++ b/src/components/layout/__tests__/__snapshots__/AppHeader.test.tsx.snap
@@ -0,0 +1,82 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AppHeader matches the rendered structure 1`] = `
+
+
+
+
+
+ {leading}
+
+ {backHref ? (
+
+
+ {backLabel ? (
+ {backLabel}
+ ) : null}
+
+ ) : null}
+
+ {brandHref ? (
+
+
+
+ {actions ? (
+ {actions}
+ ) : null}
+ PropChain
`, so a page ended up + * with two level-1 headings, and any page that also mounted a header-rendering + * component ended up with two `banner` landmarks. Both are pinned here so they + * cannot come back. + */ +describe('AppHeader', () => { + it('renders exactly one banner landmark', () => { + render(; the brand must not compete with it.
+ expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+ });
+
+ it('links the brand to the home page by default', () => {
+ render(Open sidebar}
+ actions={}
+ />,
+ );
+
+ expect(
+ screen.getByRole('button', { name: 'Open sidebar' }),
+ ).toBeInTheDocument();
+ expect(
+ screen.getByRole('button', { name: 'Connect wallet' }),
+ ).toBeInTheDocument();
+ });
+
+ it('applies sticky positioning only when asked', () => {
+ const { container: plain } = render(wallet
+
+
+
+
+
+
+ wallet
+
+
+