justin/new-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve business name search results UI

Browse source 
Results now show as proper clickable cards with:
- Entity name (bold), DBA (if different from legal name)
- FRN (monospace) and Filer ID on the right
- Clear "click to check compliance" hint
- Bordered list with dividers and hover state
- Hides results after selection

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
justin 2026-04-27 08:15:32 -05:00
parent 04d65eef85
commit 4096c3739e
1 changed files with 17 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
site/src/pages/tools/fcc-compliance-check.astro
View file

@ -222,20 +222,24 @@ import Base from "../../layouts/Base.astro";
return;
}
let html = `<p class="text-xs text-gray-400 mb-2">${items.length} result${items.length !== 1 ? "s" : ""}</p>`;
html += '<div class="space-y-1 max-h-60 overflow-y-auto">';
let html = `<p class="text-xs text-gray-400 mb-2">${items.length} result${items.length !== 1 ? "s" : ""} — click to check compliance</p>`;
html += '<div class="space-y-2 max-h-72 overflow-y-auto border border-gray-200 rounded-lg divide-y divide-gray-100">';
for (const item of items) {
const label = [
item.legal_name || "",
item.dba ? `DBA: ${item.dba}` : "",
item.frn ? `FRN: ${item.frn}` : "",
item.filer_id ? `Filer ID: ${item.filer_id}` : "",
].filter(Boolean).join(" — ");
const dba = (item.dba && item.dba !== "None" && item.dba !== item.legal_name) ? item.dba : "";
html += `<button
data-frn="${item.frn || ""}"
class="name-result-btn block w-full text-left px-3 py-2 rounded-lg text-sm hover:bg-pw-50 border border-transparent hover:border-pw-200 transition"
>${label}</button>`;
class="name-result-btn w-full text-left px-4 py-3 flex items-center justify-between gap-3 hover:bg-pw-50 transition cursor-pointer"
style="display:flex;"
>
<div style="min-width:0;flex:1;">
<p style="font-weight:600;font-size:14px;color:#111827;margin:0;">${item.legal_name || "Unknown"}</p>
${dba ? `<p style="font-size:12px;color:#6b7280;margin:2px 0 0;">d/b/a ${dba}</p>` : ""}
</div>
<div style="text-align:right;flex-shrink:0;">
<p style="font-family:monospace;font-size:12px;color:#1a2744;font-weight:600;margin:0;">${item.frn || "—"}</p>
<p style="font-size:11px;color:#9ca3af;margin:2px 0 0;">ID: ${item.filer_id || "—"}</p>
</div>
</button>`;
}
html += "</div>";
nameResults.innerHTML = html;
@ -244,10 +248,11 @@ import Base from "../../layouts/Base.astro";
btn.addEventListener("click", () => {
const frn = btn.getAttribute("data-frn");
if (!frn) {
showError("No FRN available for this entity.");
showError("No FRN available for this entity. Try entering the FRN manually.");
return;
}
frnInput.value = frn;
nameResults.classList.add("hidden");
runCheck();
});
});