Add browser search and richer URL matching

browser/extension/popup.js

@@ -43,21 +43,19 @@ function matchSubtitle(match) {
   return parts.join(" · ") || "No username";
 }
 
-function renderMatches(state) {
-  const root = document.getElementById("matches");
+function renderMatchList(root, matches, options = {}) {
   const targetTabID = popupTabID();
+  const emptyMessage = options.emptyMessage || "No matching entries.";
   root.textContent = "";
-  if (!Array.isArray(state.matches) || state.matches.length === 0) {
+  if (!Array.isArray(matches) || matches.length === 0) {
     const empty = document.createElement("p");
     empty.className = "subtle";
-    empty.textContent = state.pageHasLoginForm
-      ? "No matching entries for this page."
-      : "No login fields detected on this page.";
+    empty.textContent = emptyMessage;
     root.appendChild(empty);
     return;
   }
 
-  for (const match of state.matches) {
+  for (const match of matches) {
     const row = document.createElement("button");
     row.type = "button";
     row.className = "match-row";
@@ -98,6 +96,28 @@ function renderMatches(state) {
   }
 }
 
+function renderMatches(state) {
+  const emptyMessage = state.pageHasLoginForm
+    ? "No matching entries for this page."
+    : "No login fields detected on this page.";
+  renderMatchList(document.getElementById("matches"), state.matches, { emptyMessage });
+}
+
+function renderSearchResults(results, query) {
+  const root = document.getElementById("search-results");
+  if (!query) {
+    root.textContent = "";
+    const hint = document.createElement("p");
+    hint.className = "subtle";
+    hint.textContent = "Search all entries you can access with this token.";
+    root.appendChild(hint);
+    return;
+  }
+  renderMatchList(root, results, {
+    emptyMessage: `No entries matched "${query}".`
+  });
+}
+
 function renderPageHint(state) {
   const hint = document.getElementById("page-hint");
   if (state.pendingFill) {
@@ -124,8 +144,38 @@ function popupTabID() {
   return Number.isInteger(parsed) ? parsed : null;
 }
 
+async function searchVault(event) {
+  event.preventDefault();
+  const query = document.getElementById("search-query").value.trim();
+  const resultsRoot = document.getElementById("search-results");
+  if (!query) {
+    renderSearchResults([], "");
+    return;
+  }
+  resultsRoot.textContent = "";
+  const loading = document.createElement("p");
+  loading.className = "subtle";
+  loading.textContent = "Searching KeePassGO…";
+  resultsRoot.appendChild(loading);
+  try {
+    const response = await runtimeSend({
+      type: "keepassgo-search-logins",
+      query
+    });
+    if (!response?.success) {
+      throw new Error(response?.error || "Search failed.");
+    }
+    renderSearchResults(Array.isArray(response.results) ? response.results : [], query);
+  } catch (error) {
+    renderSearchResults([], query);
+    setStatus("Search failed", error instanceof Error ? error.message : String(error), "error");
+  }
+}
+
 async function main() {
   try {
+    document.getElementById("search-form").addEventListener("submit", searchVault);
+    renderSearchResults([], "");
     const state = await runtimeSend({
       type: "keepassgo-popup-state",
       force: true,