Add create new community functionality

app/lib/express.js

@@ -518,6 +518,48 @@ router.get(
   }
 );
 
+router.get(
+  "/communities/new",
+  { mobileVersion: "/mobile/communities/new" },
+  async (_req, res) => {
+    res.render("desktop/communities/new");
+  }
+);
+
+router.post("/communities/new", async (req, res) => {
+  const name = req.body.name;
+  if (!name.match(/^[a-z0-9-]+$/)) {
+    res.send("Invalid community name");
+    return;
+  }
+
+  const title = req.body.title;
+  const post = req.body.post;
+
+  await ssb.client().identities.publishAs({
+    id: req.context.profile.id,
+    private: false,
+    content: {
+      type: "post",
+      title: title,
+      text: post,
+      channel: name,
+    },
+  });
+
+  await ssb.client().identities.publishAs({
+    id: req.context.profile.id,
+    private: false,
+    content: {
+      type: "channel",
+      channel: name,
+      subscribed: true,
+    },
+  });
+
+  res.redirect(`/communities/${name}`);
+});
+
 const communityData = (req) => {
   const name = req.params.name;
   return Promise.all([

app/lib/mobile-routes.js

@@ -100,6 +100,14 @@ module.exports.setupRoutes = (router) => {
     }
   );
 
+  router.get(
+    "/mobile/communities/new",
+    { desktopVersion: "/communities/new" },
+    async (_req, res) => {
+      res.render("mobile/communities/new", { layout: "mobile/_layout" });
+    }
+  );
+
   router.get(
     "/mobile/communities/:name",
     { desktopVersion: "/communities/:name" },

app/views/desktop/communities/list.ejs

@@ -1,6 +1,9 @@
 <%- include('../_header') %>
 
-<h1 style="margin-bottom: 10px">My communities</h1>
+<div class="columns" style="justify-content: space-between;">
+  <h1 style="margin-bottom: 10px">My communities</h1>
+  <a href="/communities/new" class="button">New Community</a>
+</div>
 
 <% if (participating.length == 0) { %>
   <p>You haven't joined any communities yet, explore some below to join</p>

app/views/desktop/communities/new.ejs

@@ -0,0 +1,28 @@
+<%- include('../_header') %>
+
+<h1 style="margin-bottom: 20px">Create a new community</h1>
+
+<form action="/communities/new" method="POST">
+  <label>
+    Name:
+    <div class="columns" style="align-items: center; margin: 8px 0 20px 0;">
+      <div style="padding-right: 10px">#</div>
+      <input type="text" name="name" maxlength="70" style="margin: 0" placeholder="my-community" />
+    </div>
+  </label>
+
+  <h1 style="margin: 40px 0 20px 0">First topic</h1>
+  <label>
+    Title:
+    <input type="text" name="title" style="margin-bottom: 20px" maxlength="70" />
+  </label>
+  <label>
+    Post:
+    <textarea name="post" rows="5"></textarea>
+  </label>
+  <div class="reverse-columns" style="margin-top: 10px">
+    <input type="submit" value="Publish" />
+  </div>
+</form>
+
+<%- include('../_footer') %>

app/views/mobile/communities/list.ejs

@@ -17,4 +17,8 @@
       #<%= community %>
     </a>
   <% }) %>
+
+  <a href="/mobile/communities/new" class="compose-new-button" style="background: #600">
+    <div style="font-size: 40px; color: #FFF">+</div>
+  </a>
 </div>

app/views/mobile/communities/new.ejs

@@ -0,0 +1,26 @@
+<div class="pink-background">
+  <h1 style="margin-bottom: 20px">New community</h1>
+
+  <form action="/communities/new" method="POST">
+    <label>
+      Name:
+      <div class="columns" style="align-items: center; margin: 8px 0 20px 0;">
+        <div style="padding-right: 10px">#</div>
+        <input type="text" name="name" maxlength="70" style="margin: 0" placeholder="my-community" />
+      </div>
+    </label>
+
+    <h1 style="margin: 40px 0 20px 0">First topic</h1>
+    <label>
+      Title:
+      <input type="text" name="title" style="margin-bottom: 20px" maxlength="70" />
+    </label>
+    <label>
+      Post:
+      <textarea name="post" rows="5"></textarea>
+    </label>
+    <div class="reverse-columns" style="margin-top: 10px">
+      <input type="submit" value="Publish" />
+    </div>
+  </form>
+</div>

app/views/mobile/search.ejs

@@ -1,11 +1,11 @@
 <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" value="<%= query %>">
+    <input type="search" class="input-search" name="query" placeholder="Search" autofocus value="<%= query %>">
   </form>
-  <% if (query.length < 3) { %>
+  <% if (query.length > 0 && query.length < 3) { %>
     <h2>You need to search for 3 or more characters</h2>
-  <% } else { %>
+  <% } else if (query.length > 3) { %>
     <h3>People</h3>
 
     <% if (people.length == 0) { %>