refactor: collapse duplicated stores, header, property detail and filter UIs

src/app/accessibility/page.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import React, { useEffect, useRef, useState } from 'react';
-import Link from 'next/link';
 import { useAxeAudit } from '@/hooks/useAxeAudit';
 import { WalletConnector } from '@/components/WalletConnector';
+import { AppHeader } from '@/components/layout/AppHeader';
 
 /**
  * Accessibility audit page — Issue #85
@@ -134,19 +134,7 @@ export default function AccessibilityPage() {
         {announcement}
       </div>
 
-      <header className="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700 sticky top-0 z-30">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center h-16">
-            <Link href="/" className="flex items-center gap-3" aria-label="PropChain home">
-              <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center" aria-hidden="true">
-                <span className="text-white font-bold text-sm">PC</span>
-              </div>
-              <span className="text-xl font-bold text-gray-900 dark:text-white">PropChain</span>
-            </Link>
-            <WalletConnector />
-          </div>
-        </div>
-      </header>
+      <AppHeader sticky actions={<WalletConnector />} />
 
       <main id="main-content" className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">Accessibility</h1>

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 (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
       {/* Header */}
-      <header className="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700 sticky top-0 z-30">
-        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center h-16">
-            <div className="flex items-center gap-4">
-              <Link href="/properties">
-                <Button variant="ghost" size="sm">
-                  <ArrowLeft className="w-4 h-4 mr-2" />
-                  Properties
-                </Button>
-              </Link>
-              <div className="flex items-center gap-2">
-                <div className="w-7 h-7 bg-blue-600 rounded-lg flex items-center justify-center">
-                  <span className="text-white font-bold text-xs">PC</span>
-                </div>
-                <span className="font-bold text-gray-900 dark:text-white">PropChain</span>
-              </div>
-            </div>
-            <div className="flex items-center gap-2">
-              <PriceAlertBell />
-              <WalletConnector />
-            </div>
-          </div>
-        </div>
-      </header>
+      <AppHeader
+        sticky
+        containerClassName="max-w-4xl"
+        leading={
+          <Link href="/properties">
+            <Button variant="ghost" size="sm">
+              <ArrowLeft className="w-4 h-4 mr-2" />
+              Properties
+            </Button>
+          </Link>
+        }
+        actions={
+          <>
+            <PriceAlertBell />
+            <WalletConnector />
+          </>
+        }
+      />
 
       <div className="container mx-auto py-8 px-4">
         <div className="max-w-4xl mx-auto">

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<Property[]>([]);
 
   useEffect(() => {

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 = () => {
       />
       <div className="flex-1 flex flex-col min-w-0">
         <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
-          <header className="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
-            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-              <div className="flex justify-between items-center h-16">
-                <div className="flex items-center gap-3">
-                  {/* Mobile menu toggle */}
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="lg:hidden"
-                    onClick={() => setSidebarOpen(true)}
-                    aria-label="Open sidebar"
-                  >
-                    <Menu className="w-5 h-5" />
-                  </Button>
-                  <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
-                    <span className="text-white font-bold text-sm">PC</span>
-                  </div>
-                  <h1 className="text-xl font-bold text-gray-900 dark:text-white">
-                    PropChain
-                  </h1>
-                </div>
-                <WalletConnector />
-              </div>
-            </div>
-          </header>
+          <AppHeader
+            leading={
+              <Button
+                variant="ghost"
+                size="icon"
+                className="lg:hidden"
+                onClick={() => setSidebarOpen(true)}
+                aria-label="Open sidebar"
+              >
+                <Menu className="w-5 h-5" />
+              </Button>
+            }
+            actions={<WalletConnector />}
+          />
 
           <main className="flex-1 p-4 md:p-6 lg:p-8 space-y-6 md:space-y-8 overflow-auto">
             <div className="space-y-1">

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 (
       <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
-        <header className="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
-          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div className="flex justify-between items-center h-16">
-              <Link href="/" className="flex items-center gap-3">
-                <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
-                  <span className="text-white font-bold text-sm">PC</span>
-                </div>
-                <h1 className="text-xl font-bold text-gray-900 dark:text-white">
-                  PropChain
-                </h1>
-              </Link>
-              <WalletConnector />
-            </div>
-          </div>
-        </header>
+        <AppHeader actions={<WalletConnector />} />
 
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
           <div className="text-center py-20">
@@ -122,21 +109,7 @@ function SavedSearchesContent() {
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
       {/* Header */}
-      <header className="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center h-16">
-            <Link href="/" className="flex items-center gap-3">
-              <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
-                <span className="text-white font-bold text-sm">PC</span>
-              </div>
-              <h1 className="text-xl font-bold text-gray-900 dark:text-white">
-                PropChain
-              </h1>
-            </Link>
-            <WalletConnector />
-          </div>
-        </div>
-      </header>
+      <AppHeader actions={<WalletConnector />} />
 
       {/* Main Content */}
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

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 (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
       {/* Header */}
-      <header className="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700 sticky top-0 z-30">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center h-16">
-            <Link href="/" className="flex items-center gap-3" aria-label="PropChain home">
-              <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center" aria-hidden="true">
-                <span className="text-white font-bold text-sm">PC</span>
-              </div>
-              <span className="text-xl font-bold text-gray-900 dark:text-white">PropChain</span>
-            </Link>
-            <WalletConnector />
-          </div>
-        </div>
-      </header>
+      <AppHeader sticky actions={<WalletConnector />} />
 
       <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         {/* Page title */}