Add search mobile

app/lib/express.js

@@ -564,7 +564,7 @@ router.get(
   }
 );
 
-router.get("/search", async (req, res) => {
+router.get("/search", { mobileVersion: "/mobile/search" }, async (req, res) => {
   const query = req.query.query;
 
   let results = {

app/lib/mobile-routes.js

@@ -1,5 +1,5 @@
 const queries = require("./queries");
-const ssb = require("./ssb-client");
+const metrics = require("./metrics");
 
 module.exports.setupRoutes = (router) => {
   router.get(
@@ -129,4 +129,28 @@ module.exports.setupRoutes = (router) => {
       });
     }
   );
+
+  router.get(
+    "/mobile/search",
+    { desktopVersion: "/search" },
+    async (req, res) => {
+      const query = req.query.query || "";
+
+      let results = {
+        people: [],
+        communities: [],
+      };
+      if (query.length >= 3) {
+        results = await queries.search(query);
+        metrics.searchResultsPeople.observe(results.people.length);
+        metrics.searchResultsCommunities.observe(results.communities.length);
+      }
+
+      res.render("mobile/search", {
+        ...results,
+        query,
+        layout: "mobile/_layout",
+      });
+    }
+  );
 };

app/public/mobile.css

@@ -180,3 +180,19 @@ a.compose-new-button {
 .community-topic-link {
   padding: 10px;
 }
+
+.search-icon {
+  margin: 22px 0 0 10px;
+  font-size: 24px;
+}
+
+.input-search {
+  width: 100%;
+  border-radius: none;
+  line-height: 32px;
+  padding: 6px 6px 6px 40px;
+  width: 100%;
+  font-size: 15px;
+  margin-top: 8px;
+  border: 1px solid #bbb;
+}

app/views/mobile/profile.ejs

@@ -1,6 +1,6 @@
 <div class="columns">
   <div><img class="profile-pic" src="<%= profileImageUrl(profile) %>" style="display:block" /></div>
-  <div style="padding-left: 10px">
+  <div style="padding-left: 10px; max-width: calc(100% - 128px)">
     <h1><%= profile.name %></h1>
 
     <%= (profile.description || "").substr(0, 70) %>

app/views/mobile/search.ejs

@@ -0,0 +1,32 @@
+<div style="padding: 14px">
+  <form action="/mobile/search" method="GET" style="padding-bottom: 20px">
+    <div class="search-icon">🔎</div>
+    <input type="search" class="input-search" name="query" placeholder="Search for people..." value="<%= query %>">
+  </form>
+  <% if (query.length < 3) { %>
+    <h2>You need to search for 3 or more characters</h2>
+  <% } else { %>
+    <h3>People</h3>
+
+    <% if (people.length == 0) { %>
+      <p>No results found</p>
+    <% } %>
+    <% people.map(person => { %>
+        <a class="link-block" href="<%= profileUrl(person.author) %>">
+          <img class="link-profile-pic" src="<%= profileImageUrl(person.authorProfile) %>" />
+          <div><%= person.content.name %></div>
+        </a>
+    <% }) %>
+
+    <h3 style="padding-top: 20px">Communities</h3>
+
+    <% if (communities.length == 0) { %>
+      <p>No results found</p>
+    <% } %>
+    <% communities.map(community => { %>
+        <a href="/communities/<%= community %>" class="link-block" style="display: inline-block">
+          #<%= community %>
+        </a>
+    <% }) %>
+  <% } %>
+</div>