feat(add-properties): filter long address result lists

Postcode searches can return ~100 addresses. Add a client-side filter
above the results that narrows the list live by address substring, so a
user can jump to a house number or street name without scrolling.

- Filter box only appears when a postcode returns more than 8 addresses
- Header count reflects the filtered subset (e.g. "12 of 97 addresses")
- Empty state when nothing matches; clear button and new searches reset it

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/app/portfolio/[slug]/properties/add/AddPropertiesClient.tsx

@@ -44,6 +44,7 @@ export default function AddPropertiesClient({
   const [input, setInput] = useState("");
   const [inputError, setInputError] = useState<string | null>(null);
   const [search, setSearch] = useState<{ pc: string; refresh: number } | null>(null);
+  const [filter, setFilter] = useState("");
   const [basket, setBasket] = useState<Basket>({});
   const [done, setDone] = useState<{ added: number; skipped: number } | null>(null);
 
@@ -110,6 +111,7 @@ export default function AddPropertiesClient({
     }
     setInputError(null);
     setDone(null);
+    setFilter("");
     setSearch({ pc, refresh: 0 });
   };
 
@@ -130,6 +132,12 @@ export default function AddPropertiesClient({
   const addable = data
     ? data.candidates.filter((c) => c.selectable && !c.alreadyInPortfolio)
     : [];
+  const needle = filter.trim().toLowerCase();
+  const visible = data
+    ? needle
+      ? data.candidates.filter((c) => c.address.toLowerCase().includes(needle))
+      : data.candidates
+    : [];
   const totalSelected = countSelected(basket);
   const postcodes = Object.keys(basket);
 
@@ -267,7 +275,9 @@ export default function AddPropertiesClient({
           <div className="flex items-baseline gap-3 flex-wrap mb-4">
             <h2 className="text-lg font-bold text-gray-800">{data.postcode}</h2>
             <span className="text-xs text-slate-400 font-medium">
-              {data.candidates.length}{" "}
+              {needle
+                ? `${visible.length} of ${data.candidates.length}`
+                : data.candidates.length}{" "}
               {data.candidates.length === 1 ? "address" : "addresses"}
             </span>
             {addable.length > 0 && (
@@ -307,10 +317,40 @@ export default function AddPropertiesClient({
             </span>
           </div>
 
+          {/* Long postcodes can return ~100 addresses — a filter lets the user
+              jump to a house number or street name without scrolling. */}
+          {data.candidates.length > 8 && (
+            <div className="relative mb-3">
+              <MagnifyingGlassIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400 pointer-events-none" />
+              <input
+                value={filter}
+                onChange={(e) => setFilter(e.target.value)}
+                placeholder="Filter these addresses…"
+                spellCheck={false}
+                autoComplete="off"
+                className="w-full border border-slate-200 rounded-xl pl-9 pr-9 py-2 text-sm focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/10"
+              />
+              {filter && (
+                <button
+                  aria-label="Clear filter"
+                  onClick={() => setFilter("")}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm leading-none hover:text-slate-700"
+                >
+                  ✕
+                </button>
+              )}
+            </div>
+          )}
+
           {/* Long postcodes can return ~100 addresses — scroll inside the card
               rather than growing the page. */}
           <div className="max-h-[26rem] overflow-y-auto pr-1 -mr-1">
-          {data.candidates.map((c) => {
+          {visible.length === 0 ? (
+            <p className="py-8 text-center text-sm text-slate-400">
+              No addresses match &ldquo;{filter.trim()}&rdquo;.
+            </p>
+          ) : (
+          visible.map((c) => {
             const { label, note } = describeCandidate(c);
             const disabled = !c.selectable || c.alreadyInPortfolio;
             const isSelected = !!selected[c.uprn];
@@ -361,7 +401,8 @@ export default function AddPropertiesClient({
                 </span>
               </button>
             );
-          })}
+          })
+          )}
           </div>
         </div>
       )}