Improve search a bit

app/lib/express.js

@@ -507,8 +507,11 @@ router.get("/search", async (req, res) => {
 
   const query = req.query.query;
 
-  const people = await queries.searchPeople(ssbServer, query);
-  metrics.searchResults.observe(people.length);
+  let people = [];
+  if (query.length >= 3) {
+    people = await queries.searchPeople(ssbServer, query);
+    metrics.searchResults.observe(people.length);
+  }
 
   res.render("search", { people, query });
 });

app/lib/queries.js

@@ -191,6 +191,17 @@ const getSecretMessages = async (ssbServer, profile) => {
 const searchPeople = async (ssbServer, search) => {
   debugPeople("Fetching");
 
+  // https://stackoverflow.com/questions/3446170/escape-string-for-use-in-javascript-regex
+  const normalizedSearch = search
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "");
+  const safelyEscapedSearch = normalizedSearch.replace(
+    /[.*+?^${}()|[\]\\]/g,
+    "\\$&"
+  );
+  const loosenSpacesSearch = safelyEscapedSearch.replace(" ", ".*");
+  const searchRegex = new RegExp(`.*${loosenSpacesSearch}.*`, "i");
+
   const people = await promisePull(
     ssbServer.query.read({
       reverse: true,
@@ -208,12 +219,12 @@ const searchPeople = async (ssbServer, search) => {
       ],
     }),
     pull.filter((msg) => {
-      return (
-        msg.value.content &&
-        msg.value.author == msg.value.content.about &&
-        msg.value.content.name.includes(search)
-      );
-    })
+      const normalizedName = msg.value.content.name
+        .normalize("NFD")
+        .replace(/[\u0300-\u036f]/g, "");
+      return msg.value.content && searchRegex.exec(normalizedName);
+    }),
+    paramap(mapProfiles(ssbServer))
   );
 
   debugPeople("Done");

app/views/search.ejs

@@ -1,15 +1,16 @@
 <%- include('_header') %>
 
-<h2>Results for "<%= query %>"</h2>
+<% if (query.length < 3) { %>
+  <h2>You need to search for 3 or more characters</h2>
+<% } else { %>
+  <h2>Results for "<%= query %>"</h2>
 
-<ul>
   <% people.map(person => { %>
-    <li>
-      <a href="<%= profileUrl(person.author) %>">
-        <%= person.content.name %> (<%= person.author.slice(0, 8) %>)
+      <a class="link-block" href="<%= profileUrl(person.author) %>">
+        <img class="link-profile-pic" src="<%= profileImageUrl(person.authorProfile) %>" />
+        <div><%= person.content.name %></div>
       </a>
-    </li>
   <% }) %>
-</ul>
+<% } %>
 
 <%- include('_footer') %>