Add community details page

app/lib/express.js

@@ -562,11 +562,28 @@ router.post("/about", async (req, res) => {
 });
 
 router.get("/communities", async (req, res) => {
+  if (isPhone(req)) {
+    return res.redirect(`/mobile/communities`);
+  }
+
   const communities = await queries.getCommunities(ssbServer);
 
   res.render("communities/list", { communities });
 });
 
+router.get("/mobile/communities", async (req, res) => {
+  const communities = await queries.getCommunities(ssbServer);
+
+  if (!isPhone(req)) {
+    return res.redirect(`/communities`);
+  }
+
+  res.render("mobile/communities/list", {
+    communities,
+    layout: "mobile/_layout",
+  });
+});
+
 const communityData = (req) => {
   const name = req.params.name;
   return queries.getCommunityMembers(ssbServer, name).then((members) => ({
@@ -578,6 +595,10 @@ const communityData = (req) => {
 router.get("/communities/:name", async (req, res) => {
   const name = req.params.name;
 
+  if (isPhone(req)) {
+    return res.redirect(`/mobile/communities/${name}`);
+  }
+
   const [community, posts] = await Promise.all([
     communityData(req),
     queries.getCommunityPosts(ssbServer, name),
@@ -590,6 +611,22 @@ router.get("/communities/:name", async (req, res) => {
   });
 });
 
+router.get("/mobile/communities/:name", async (req, res) => {
+  const name = req.params.name;
+
+  if (!isPhone(req)) {
+    return res.redirect(`/communities/${name}`);
+  }
+
+  const posts = await queries.getCommunityPosts(ssbServer, name);
+
+  res.render("mobile/communities/community", {
+    community: { name },
+    posts,
+    layout: "mobile/_layout",
+  });
+});
+
 router.get("/communities/:name/new", async (req, res) => {
   const community = await communityData(req);
 

app/public/js/desktop.js

@@ -80,7 +80,7 @@ composeButtons.forEach((composeButton) => {
     let url = composeButton.dataset.url;
     let body = "message=" + encodeURIComponent(messageInput.value);
 
-    if (parent.querySelector(".js-secret-recipients")) {
+    if (parent.querySelector(".js-recipients-list")) {
       const recipients = selectedRecipients();
       if (recipients.length == 0) return;
 

app/public/js/mobile.js

@@ -105,7 +105,7 @@ composeButtons.forEach((composeButton) => {
     let url = composeButton.dataset.url;
     let body = "message=" + encodeURIComponent(messageInput.value);
 
-    if (parent.querySelector(".js-secret-recipients")) {
+    if (parent.querySelector(".js-recipients-list")) {
       const recipients = selectedRecipients();
       if (recipients.length == 0) return;
 

app/public/mobile_style.css

@@ -95,6 +95,14 @@ nav a.selected {
   padding: 0;
 }
 
+.secret-chat.no-secrets {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+}
+
 .secret-button {
   padding: 8px 14px;
   font-size: 16px;
@@ -104,7 +112,14 @@ nav a.selected {
   margin-right: 12px;
 }
 
-.new-secret-button {
+a.compose-new-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+}
+
+.compose-new-button {
   position: fixed;
   bottom: 95px;
   width: 65px;
@@ -118,7 +133,7 @@ nav a.selected {
   color: #684510;
 }
 
-.new-secret-button:hover {
+.compose-new-button:hover {
   background: #fb1;
 }
 
@@ -146,3 +161,11 @@ nav a.selected {
   border-bottom: none;
   height: 33px;
 }
+
+.community-topic-link {
+  padding: 10px;
+}
+
+.friends-communities {
+  border-radius: 0;
+}

app/public/style.css

@@ -373,3 +373,11 @@ h2 {
 .community-topic-link:hover .community-topic-name {
   text-decoration: underline;
 }
+
+.community-topic-name {
+  width: calc(100% - 110px);
+}
+
+.community-topic-replies {
+  width: 110px;
+}

app/views/communities/community.ejs

@@ -7,6 +7,6 @@
     <div class="community-topic-name">
       <%= topicTitle(post.value) %>
     </div>
-    <div style="min-width: 110px; text-align: right;">💬 <%= post.value.replies.length %> replies</div>
+    <div class="community-topic-replies">💬 <%= post.value.replies.length %> replies</div>
   </a>
 <% }) %>

app/views/home.ejs

@@ -48,9 +48,15 @@
 
     <h2>Friends</h2>
     <%- include('_friends', { friends: friends.friends }) %>
+    <% if (friends.friends.length == 0) { %>
+      <p>You don't have any friends yet 🙁</p>
+      <p>Use the search or look in communities to find some</p>
+    <% } %>
 
-    <h2 style="margin-top: 30px">Requests Sent</h2>
-    <%- include('_friends', { friends: friends.requestsSent }) %>
+    <% if (friends.requestsSent.length > 0) { %>
+      <h2 style="margin-top: 30px">Requests Sent</h2>
+      <%- include('_friends', { friends: friends.requestsSent }) %>
+    <% } %>
   </div>
 </div>
 

app/views/mobile/communities/community.ejs

@@ -0,0 +1,20 @@
+<div class="friends-communities" style="flex-grow: 0;">
+  <h1>
+    <a href="/communities/<%= community.name %>" style="color: #600; text-decoration: none;">
+      #<%= community.name %>
+    </a>
+  </h1>
+  <a href="/mobile/communities/<%= community.name %>/new" class="compose-new-button" style="background: #fbb">
+    <div style="font-size: 40px; color: #FFF">+</div>
+  </a>
+</div>
+<div>
+  <% posts.map(post => { %>
+    <a href="/communities/<%= community.name %>/<%= post.key.replace("%", "") %>" class="columns community-topic-link">
+      <div class="community-topic-name">
+        <%= topicTitle(post.value) %>
+      </div>
+      <div class="community-topic-replies" style="text-align: right;">💬 <%= post.value.replies.length %> replies</div>
+    </a>
+  <% }) %>
+</div>

app/views/mobile/communities/list.ejs

@@ -0,0 +1,11 @@
+<div class="friends-communities">
+  <h1>Communities</h1>
+
+  <div style="padding-top: 20px">
+    <% communities.map(community => { %>
+      <a href="/mobile/communities/<%= community %>" class="link-block" style="display: inline-block">
+        #<%= community %>
+      </a>
+    <% }) %>
+  </div>
+</div>

app/views/mobile/friends.ejs

@@ -8,7 +8,13 @@
 
   <h2>Friends</h2>
   <%- include('_friends', { friends: friends.friends }) %>
+  <% if (friends.friends.length == 0) { %>
+    <p>You don't have any friends yet 🙁</p>
+    <p>Use the search or look in communities to find some</p>
+  <% } %>
 
-  <h2 style="margin-top: 30px">Requests Sent</h2>
-  <%- include('_friends', { friends: friends.requestsSent }) %>
+  <% if (friends.requestsSent.length > 0) { %>
+    <h2 style="margin-top: 30px">Requests Sent</h2>
+    <%- include('_friends', { friends: friends.requestsSent }) %>
+  <% } %>
 </div>

app/views/mobile/secrets.ejs

@@ -1,6 +1,9 @@
-<div class="secret-chat">
-  <div class="column-side-padding" <%= secretMessages.length > 0 ? "hidden" : "" %> style="margin: 25px 0 20px 0; font-size: 14px;">
-    👻 You don't have any secret messages yet
+<div class="secret-chat <%= secretMessages.length > 0 ? "" : "no-secrets" %>">
+  <div class="column-side-padding" <%= secretMessages.length > 0 ? "hidden" : "" %> style="margin: 25px 0 20px 0;">
+    <div style="font-size: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
+      <div style="font-size: 50px">🤫</div>
+      <div style="padding-top: 20px; font-size: 16px">You don't have any secret messages yet</div>
+    </div>
   </div>
 
   <% secretMessages.map(chat => { %>

app/views/mobile/secrets/_compose_multiple.ejs

@@ -1,5 +1,5 @@
 <div>
-  <button class="js-compose-secret-message new-secret-button">
+  <button class="js-compose-secret-message compose-new-button">
     <div style="font-size: 30px">✍️</div>
   </button>
   <div class="overlay" hidden></div>
@@ -22,8 +22,9 @@
         <div hidden class="js-sending-message"></div>
       </div>
       <div class="modal-header">Choose the recipients</div>
-      <div class="modal-body">
-        <% friends.friends.concat(friends.requestsSent).map(friend => { %>
+      <div class="modal-body js-recipients-list">
+        <% allFollowing = friends.friends.concat(friends.requestsSent) %>
+        <% allFollowing.map(friend => { %>
           <div>
             <label>
               <input type="checkbox" name="recps" class="js-secret-recipients" value="<%= friend.id %>">
@@ -31,6 +32,10 @@
             </label>
           </div>
         <% }) %>
+        <% if (allFollowing.length == 0) { %>
+          <p>You don't have any friends 🙁</p>
+          <p>Go add some to tell secrets</p>
+        <% } %>
       </div>
     </div>
   </div>

app/views/secrets/_compose_multiple.ejs

@@ -16,8 +16,9 @@
     </div>
     <div class="js-step" hidden>
       <div class="modal-header">Choose the recipients</div>
-      <div class="modal-body">
-        <% friends.friends.concat(friends.requestsSent).map(friend => { %>
+      <div class="modal-body js-recipients-list">
+        <% allFollowing = friends.friends.concat(friends.requestsSent) %>
+        <% allFollowing.map(friend => { %>
           <div>
             <label>
               <input type="checkbox" name="recps" class="js-secret-recipients" value="<%= friend.id %>">
@@ -25,6 +26,10 @@
             </label>
           </div>
         <% }) %>
+        <% if (allFollowing.length == 0) { %>
+          <p>You don't have any friends 🙁</p>
+          <p>Go add some to tell secrets</p>
+        <% } %>
       </div>
       <div class="modal-footer">
         this message will disapear right after being read

app/views/secrets/_messages.ejs

@@ -1,5 +1,5 @@
 <div class="column-side-padding" <%= secretMessages.length > 0 ? "hidden" : "" %> style="margin: 25px 0 20px 0; font-size: 14px;">
-  👻 You don't have any secret messages yet
+  🤫 You don't have any secret messages yet
 </div>
 <% secretMessages.map(chat => { %>
   <div>