fix: resolve SearchBar, SEO, accessibility, and performance issues (#420, #419, #418, #417)

src/app/claims/layout.tsx

@@ -0,0 +1,14 @@
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Claims | Parashield',
+  description: 'Submit and manage your insurance claims on Parashield. Track claim status and receive automatic payouts.',
+};
+
+export default function ClaimsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return children;
+}

src/app/dashboard/layout.tsx

@@ -0,0 +1,14 @@
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Dashboard | Parashield',
+  description: 'View your active insurance policies, track coverage, and monitor claims status on Parashield.',
+};
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return children;
+}

src/app/dashboard/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useState, useCallback, useMemo } from "react";
 import { useWallet } from "@/hooks/useWallet";
 import { usePolicies } from "@/hooks/usePolicies";
 import { fetchUserClaims } from "@/lib/api";
@@ -83,9 +83,9 @@ export default function DashboardPage() {
     );
   }
 
-  const active = policies.filter((p) => p.status === "Active");
-  const totalCov = active.reduce((sum, p) => sum + safeBigInt(p.coverage), 0n);
-  const totalPaid = active.reduce((sum, p) => sum + safeBigInt(p.premiumPaid), 0n);
+  const active = useMemo(() => policies.filter((p) => p.status === "Active"), [policies]);
+  const totalCov = useMemo(() => active.reduce((sum, p) => sum + safeBigInt(p.coverage), 0n), [active]);
+  const totalPaid = useMemo(() => active.reduce((sum, p) => sum + safeBigInt(p.premiumPaid), 0n), [active]);
 
   return (
     <main className="mx-auto max-w-7xl px-6 py-12">

src/components/ConnectWalletPrompt.tsx

@@ -32,13 +32,16 @@ export function ConnectWalletPrompt({ message = 'Connect your wallet to continue
           <CopyButton text={storedAddress} label="Copy" className="border-white/10" />
         </div>
       )}
-      <button
-        onClick={connect}
-        disabled={connecting}
-        className="mt-6 rounded-xl bg-teal-500 px-6 py-2.5 font-semibold text-white hover:bg-teal-400 disabled:opacity-60 transition-colors"
-      >
-        {connecting ? 'Connecting…' : storedAddress ? 'Switch Wallet' : 'Connect Wallet'}
-      </button>
+      <div aria-live="polite" aria-atomic="true" className="mt-6">
+        <button
+          onClick={connect}
+          disabled={connecting}
+          aria-busy={connecting}
+          className="rounded-xl bg-teal-500 px-6 py-2.5 font-semibold text-white hover:bg-teal-400 disabled:opacity-60 transition-colors"
+        >
+          {connecting ? 'Connecting…' : storedAddress ? 'Switch Wallet' : 'Connect Wallet'}
+        </button>
+      </div>
     </div>
   );
 }

src/components/SearchBar.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect } from 'react';
 import { useDebounce } from '@/hooks/useDebounce';
 
 interface SearchBarProps {
@@ -17,14 +17,9 @@ export function SearchBar({
   const [query, setQuery] = useState('');
   const debouncedQuery   = useDebounce(query, 250);
 
-  const onSearchRef = useRef(onSearch);
   useEffect(() => {
-    onSearchRef.current = onSearch;
-  });
-
-  useEffect(() => {
-    onSearchRef.current(debouncedQuery);
-  }, [debouncedQuery]);
+    onSearch(debouncedQuery);
+  }, [debouncedQuery, onSearch]);
 
   return (
     <div className={`relative ${className ?? ''}`}>