Refactor to move desktop views to desktop/ folder to put it as same level with mobile, because desktop shouldn't sound like a first-class citzen, it should be equal, also, having a shared/ folder will make it more obvious which parts are reused for both

app/lib/express.js

@@ -12,6 +12,7 @@ const {
   uploadPicture,
   identityFilename,
   ssbFolder,
+  isPhone,
 } = require("./utils");
 const queries = require("./queries");
 const serveBlobs = require("./serve-blobs");
@@ -161,7 +162,7 @@ router.get(
   { public: true, mobileVersion: "/mobile" },
   async (req, res) => {
     if (!req.context.profile) {
-      return res.render("index");
+      return res.render("shared/index");
     }
 
     const [posts, friends, secretMessages, communities] = await Promise.all([
@@ -170,7 +171,7 @@ router.get(
       queries.getSecretMessages(req.context.profile),
       queries.getProfileCommunities(req.context.profile.id),
     ]);
-    res.render("home", {
+    res.render("desktop/home", {
       posts,
       friends,
       secretMessages,
@@ -181,7 +182,7 @@ router.get(
 );
 
 router.get("/login", { public: true }, (_req, res) => {
-  res.render("login", { mode });
+  res.render("shared/login", { mode });
 });
 
 router.post("/login", { public: true }, async (req, res) => {
@@ -207,7 +208,7 @@ router.post("/login", { public: true }, async (req, res) => {
 });
 
 router.get("/download", { public: true }, (_req, res) => {
-  res.render("download");
+  res.render("shared/download");
 });
 
 router.get("/logout", async (_req, res) => {
@@ -220,7 +221,7 @@ router.get("/signup", { public: true }, (req, res) => {
     return res.redirect("/");
   }
 
-  res.render("signup", { mode });
+  res.render("shared/signup", { mode });
 });
 
 router.post("/signup", { public: true }, async (req, res) => {
@@ -259,7 +260,7 @@ router.post("/signup", { public: true }, async (req, res) => {
 });
 
 router.get("/keys", (req, res) => {
-  res.render("keys", {
+  res.render("shared/keys", {
     useEmail: process.env.SENDGRID_API_KEY,
     key: req.signedCookies["ssb_key"],
   });
@@ -269,7 +270,7 @@ router.post("/keys/email", async (req, res) => {
   const email = req.body.email;
   const origin = req.body.origin;
 
-  let html = await ejs.renderFile("views/email_sign_in.ejs", {
+  let html = await ejs.renderFile("views/shared/email_sign_in.ejs", {
     origin,
     ssb_key: req.signedCookies["ssb_key"],
   });
@@ -287,7 +288,7 @@ router.post("/keys/email", async (req, res) => {
 });
 
 router.get("/keys/copy", (req, res) => {
-  res.render("keys_copy", { key: req.signedCookies["ssb_key"] });
+  res.render("shared/keys_copy", { key: req.signedCookies["ssb_key"] });
 });
 
 router.get("/keys/download", async (req, res) => {
@@ -324,7 +325,7 @@ router.get(
       queries.getProfileCommunities(id),
     ]);
 
-    res.render("profile", {
+    res.render("desktop/profile", {
       profile,
       posts,
       friends,
@@ -456,7 +457,7 @@ router.get("/pubs", async (_req, res) => {
   const invite = await ssb.client().invite.create({ uses: 10 });
   const peers = await ssb.client().gossip.peers();
 
-  res.render("pubs", { invite, peers });
+  res.render("desktop/pubs", { invite, peers });
 });
 
 router.post("/pubs/add", async (req, res) => {
@@ -468,7 +469,7 @@ router.post("/pubs/add", async (req, res) => {
 });
 
 router.get("/about", { mobileVersion: "/mobile/about" }, (_req, res) => {
-  res.render("about");
+  res.render("desktop/about");
 });
 
 router.post("/about", async (req, res) => {
@@ -513,7 +514,7 @@ router.get(
       queries.getProfileCommunities(req.context.profile.id),
     ]);
 
-    res.render("communities/list", { communities, participating });
+    res.render("desktop/communities/list", { communities, participating });
   }
 );
 
@@ -540,10 +541,10 @@ router.get(
       queries.getCommunityPosts(name),
     ]);
 
-    res.render("communities/community", {
+    res.render("desktop/communities/community", {
       community,
       posts,
-      layout: "communities/_layout",
+      layout: "desktop/communities/_layout",
     });
   }
 );
@@ -554,9 +555,9 @@ router.get(
   async (req, res) => {
     const community = await communityData(req);
 
-    res.render("communities/new_topic", {
+    res.render("desktop/communities/new_topic", {
       community,
-      layout: "communities/_layout",
+      layout: "desktop/communities/_layout",
     });
   }
 );
@@ -643,10 +644,10 @@ router.get(
       queries.getPostWithReplies(name, key),
     ]);
 
-    res.render("communities/topic", {
+    res.render("desktop/communities/topic", {
       posts,
       community,
-      layout: "communities/_layout",
+      layout: "desktop/communities/_layout",
     });
   }
 );
@@ -664,7 +665,7 @@ router.get("/search", { mobileVersion: "/mobile/search" }, async (req, res) => {
     metrics.searchResultsCommunities.observe(results.communities.length);
   }
 
-  res.render("search", { ...results, query });
+  res.render("desktop/search", { ...results, query });
 });
 
 router.get("/blob/*", { public: true }, (req, res) => {
@@ -680,7 +681,7 @@ router.get("/debug", async (req, res) => {
 
   const entries = await queries.getAllEntries(query);
 
-  res.render("debug", { entries, query });
+  res.render("desktop/debug", { entries, query });
 });
 
 router.get("/debug-error", (_req, res) => {
@@ -700,9 +701,13 @@ if (SENTRY_DSN && process.env.NODE_ENV == "production") {
   app.use(Sentry.Handlers.errorHandler());
 }
 
-app.use((error, _req, res, _next) => {
+app.use((error, req, res, _next) => {
   res.statusCode = 500;
-  res.render("error", { error });
+  if (isPhone(req)) {
+    res.render("mobile/error", { error, layout: "mobile/_layout" });
+  } else {
+    res.render("desktop/error", { error });
+  }
 });
 
 const expressServer = app.listen(port, () =>

app/lib/mobile-routes.js

@@ -7,7 +7,7 @@ module.exports.setupRoutes = (router) => {
     { public: true, desktopVersion: "/" },
     async (req, res) => {
       if (!req.context.profile) {
-        return res.render("index");
+        return res.render("shared/index");
       }
 
       const posts = await queries.getPosts(req.context.profile);

app/lib/utils.js

@@ -6,6 +6,7 @@ const metrics = require("./metrics");
 const isMobile = require("ismobilejs").default;
 
 const isPhone = (req) => isMobile(req.headers["user-agent"]).phone;
+module.exports.isPhone = isPhone;
 
 module.exports.asyncRouter = (app) => {
   const debug = require("debug")("router");

app/views/desktop/communities/_layout.ejs

@@ -22,7 +22,7 @@
       <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
         <h2 style="margin: 0;">Members</h2>
         <div>
-          <%- include('../shared/_join_button') %>
+          <%- include('../../shared/_join_button') %>
         </div>
       </div>
       <%- include('../_friends', { friends: community.members }) %>

app/views/desktop/communities/topic.ejs

@@ -1,6 +1,6 @@
 <% if (posts.length > 0) { %>
   <h1><%- topicTitle(posts[0].value) %></h1>
-  <%- include("../_posts", { posts: posts.map(x => x.value), dont_cut: true }) %>
+  <%- include("../../shared/_posts", { posts: posts.map(x => x.value), dont_cut: true }) %>
 
   <form action="/communities/<%= community.name %>/<%= posts[0].key.replace("%", "") %>/publish" method="POST" style="padding-top: 20px; border-top: 1px solid #ddd;">
     <label>

app/views/desktop/home.ejs

@@ -29,7 +29,7 @@
     <h2 style="margin: 0">Your Wall</h2>
     <div style="padding-top: 15px;">
       <% if (posts.length > 0) { %>
-        <%- include('_posts', { posts }) %>
+        <%- include('../shared/_posts', { posts }) %>
       <% } else { %>
         <div class="post">
           You have no posts yet, publish something!

app/views/desktop/profile.ejs

@@ -22,7 +22,7 @@
         <% } %>
 
         <div class="columns profile-actions">
-          <%- include('_friendship_button') %>
+          <%- include('../shared/_friendship_button') %>
 
           <button class="button-yellow js-compose-secret-message" style="margin-left: 5px" data-url="<%= profileUrl(profile.id, "/publish_secret") %>">
             🤫 Secret Message
@@ -46,7 +46,7 @@
           No posts yet
         </div>
       <% } else { %>
-        <%- include('_posts', { posts }) %>
+        <%- include('../shared/_posts', { posts }) %>
       <% } %>
     </div>
   </div>

app/views/mobile/communities/topic.ejs

@@ -7,7 +7,7 @@
     </h2>
     <h1><%- topicTitle(posts[0].value) %></h1>
   </div>
-  <%- include("../../_posts", { posts: posts.map(x => x.value), dont_cut: true }) %>
+  <%- include("../../shared/_posts", { posts: posts.map(x => x.value), dont_cut: true }) %>
 
   <form action="/communities/<%= community.name %>/<%= posts[0].key.replace("%", "") %>/publish" method="POST" style="padding: 14px; border-top: 1px solid #ddd;">
     <label>

app/views/mobile/error.ejs

@@ -0,0 +1,5 @@
+<div style="padding: 14px">
+  <h1>Social had an error</h1>
+  <p style="margin: 30px 0">If you are a developer, this should help:</p>
+  <pre style="white-space: pre-wrap"><%= error.stack %></pre>
+</div>

app/views/mobile/friends.ejs

@@ -2,7 +2,7 @@
   <% if (friends.requestsReceived.length) { %>
     <h2>Friend Requests</h2>
     <div style="margin-bottom: 30px">
-      <%- include('../_friends', { friends: friends.requestsReceived }) %>
+      <%- include('_friends', { friends: friends.requestsReceived }) %>
     </div>
   <% } %>
 

app/views/mobile/home.ejs

@@ -14,7 +14,7 @@
       <input type="submit" value="Publish" style="display: none; margin: 5px 0" class="js-publish-button" />
     </div>
   </form>
-  <%- include('../_posts', { posts }) %>
+  <%- include('../shared/_posts', { posts }) %>
 <% } else { %>
   <div style="padding-top: 15px;">
     <div class="post">

app/views/mobile/profile.ejs

@@ -12,7 +12,7 @@
     <% } %>
 
     <div class="columns profile-actions" style="margin-top: 10px;">
-      <%- include('../_friendship_button') %>
+      <%- include('../shared/_friendship_button') %>
 
       <button class="button-yellow js-compose-secret-message" style="margin-left: 5px" data-url="<%= profileUrl(profile.id, "/publish_secret") %>">
         🤫 Secret
@@ -42,7 +42,7 @@
           <input type="submit" value="Publish" style="display: none; margin: 5px 0" class="js-publish-button" />
         </div>
       </form>
-      <%- include('../_posts', { posts }) %>
+      <%- include('../shared/_posts', { posts }) %>
     <% } else { %>
       <div style="padding-top: 15px;">
         <div class="post">

app/views/shared/download.ejs

@@ -1,5 +1,4 @@
-
-<%- include('_header') %>
+<%- include('../desktop/_header') %>
 
 <div style="max-width: 800px; margin: 0 auto">
   <h1>Download the app</h1>
@@ -14,4 +13,4 @@
   </p>
 </div>
 
-<%- include('_footer') %>
+<%- include('../desktop/_footer') %>

app/views/shared/index.ejs

@@ -1,4 +1,4 @@
-<%- include('_header', { body_class: "entrance", main_class: "" }) %>
+<%- include('../desktop/_header', { body_class: "entrance", main_class: "" }) %>
 
 <div class="index-welcome">
   <div class="screen-center">
@@ -53,4 +53,4 @@
   });
 </script>
 
-<%- include('_footer') %>
+<%- include('../desktop/_footer') %>

app/views/shared/keys.ejs

@@ -1,4 +1,4 @@
-<%- include('_header', { hideHeader: true }) %>
+<%- include('../desktop/_header', { hideHeader: true }) %>
 
 <div style="max-width: 800px; margin: 0 auto">
   <h1>Save your keys</h1>
@@ -43,4 +43,4 @@
   <% } %>
 </div>
 
-<%- include('_footer') %>
+<%- include('../desktop/_footer') %>

app/views/shared/keys_copy.ejs

@@ -1,4 +1,4 @@
-<%- include('_header', { hideHeader: true }) %>
+<%- include('../desktop/_header', { hideHeader: true }) %>
 
 <div style="max-width: 800px; margin: 0 auto">
   <h1>Save your keys</h1>
@@ -16,4 +16,4 @@
   }, 500);
 </script>
 
-<%- include('_footer') %>
+<%- include('../desktop/_footer') %>

app/views/shared/login.ejs

@@ -1,4 +1,4 @@
-<%- include('_header') %>
+<%- include('../desktop/_header') %>
 
 <div style="max-width: 800px; margin: 0 auto">
   <h1>Login</h1>
@@ -30,4 +30,4 @@
   </form>
 </div>
 
-<%- include('_footer') %>
+<%- include('../desktop/_footer') %>

app/views/shared/signup.ejs

@@ -1,4 +1,4 @@
-<%- include('_header') %>
+<%- include('../desktop/_header') %>
 
 <div style="max-width: 800px; margin: 0 auto">
   <h1>Create account</h1>
@@ -33,4 +33,4 @@
   </form>
 </div>
 
-<%- include('_footer') %>
+<%- include('../desktop/_footer') %>