implement back button, restructure sort-opts

src/index.js

···
 const express = require("express");
 const rateLimit = require("express-rate-limit");
 const path = require("node:path");
-const geddit = require("./geddit.js");
 const cookieParser = require("cookie-parser");
 const app = express();
 const hasher = new Bun.CryptoHasher("sha256", "secret-key");

src/mixins/post.pug

···
 include ../utils
 include postUtils
-mixin post(p)
+mixin post(p, currentUrl)
+  - var from = encodeURIComponent(currentUrl)
   article.post
-    div.post-container
+    div(id=`${p.id}`).post-container
       div.post-text
         div.title-container
-          a(href=`/comments/${p.id}`)
+          a(href=`/comments/${p.id}?from=${from}`)
             != p.title
           span.domain   (#{p.domain})
         div.info-container 
···
             |  · 
             a(href=`/r/${p.subreddit}`) r/#{p.subreddit}
             |  · 
-            a(href=`/comments/${p.id}`) #{fmtnum (p.num_comments)} ↩
+            a(href=`/comments/${p.id}?from=${from}`) #{fmtnum (p.num_comments)} ↩
       div.media-preview
         if isPostGallery(p)
           - var item = postGalleryItems(p)[0]

src/public/styles.css

···
 }
 
 .sort-opts {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
+  display: grid;
+  margin: 10px;
 }
 
-.sort-opts a {
-  margin: 10px;
+.sort-opts {
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(5, 1fr);
+  grid-auto-flow: column;
 }
 
 .footer {
···
   form {
     width: 40%;
   }
+  .sort-opts {
+    grid-template-columns: repeat(9, 1fr);
+    grid-template-rows: repeat(1, 1fr);
+    grid-auto-flow: row;
+  }
 }
 
 @media (min-width: 1080px) {
···
   form {
     width: 20%;
   }
+  .sort-opts {
+    grid-template-columns: repeat(9, 1fr);
+    grid-template-rows: repeat(1, 1fr);
+    grid-auto-flow: row;
+  }
 }
 
 @media (min-width: 2560px) {
   .post, .comments-container, .hero, .header, .footer {
     flex: 1 1 40%;
     width: 40%;
+  }
+  .sort-opts {
+    grid-template-columns: repeat(9, 1fr);
+    grid-template-rows: repeat(1, 1fr);
+    grid-auto-flow: row;
   }
 }
 
···
 .comment-info-container > p {
   margin-top: 0px;
 }
+
+select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  text-indent: 1px;
+  text-overflow: '';
+}

src/routes/index.js

···
 const { db } = require("../db");
 const { authenticateToken, authenticateAdmin } = require("../auth");
 const { validateInviteToken } = require("../invite");
+const url = require("url");
 
 const router = express.Router();
 const G = new geddit.Geddit();
···
 		isMulti,
 		user: req.user,
 		isSubbed,
+		currentUrl: req.url,
 	});
 });
 
···
 		limit: 50,
 	};
 	response = await G.getSubmissionComments(id, params);
-
 	res.render("comments", {
 		data: unescape_submission(response),
 		user: req.user,
+		from: req.query.from,
 	});
 });
 

src/views/comments.pug

···
       +header(user)
       div.hero
         h3.sub-title
+          if from
+            a(href=`${from}#${post.id}`) <- back
+            | &nbsp;&nbsp;
+            | ·
+            | &nbsp;&nbsp;
           a(href=`/r/${post.subreddit}`) r/#{post.subreddit}
 
         div.info-container 

src/views/index.pug

···
         details
           summary.sorting sorting by #{query.sort + (query.t?' '+query.t:'')}
           div.sort-opts
-            a(href=`/r/${subreddit}?sort=hot`) hot
-            a(href=`/r/${subreddit}?sort=new`) new
-            a(href=`/r/${subreddit}?sort=rising`) rising
-            a(href=`/r/${subreddit}?sort=top`) top
-            a(href=`/r/${subreddit}?sort=top&t=day`) top day
-            a(href=`/r/${subreddit}?sort=top&t=week`) top week
-            a(href=`/r/${subreddit}?sort=top&t=month`) top month
-            a(href=`/r/${subreddit}?sort=top&t=year`) top year
-            a(href=`/r/${subreddit}?sort=top&t=all`) top all
+            div
+              a(href=`/r/${subreddit}?sort=hot`) hot
+            div
+              a(href=`/r/${subreddit}?sort=new`) new
+            div
+              a(href=`/r/${subreddit}?sort=rising`) rising
+            div
+              a(href=`/r/${subreddit}?sort=top`) top
+            div
+              a(href=`/r/${subreddit}?sort=top&t=day`) top day
+            div
+              a(href=`/r/${subreddit}?sort=top&t=week`) top week
+            div
+              a(href=`/r/${subreddit}?sort=top&t=month`) top month
+            div
+              a(href=`/r/${subreddit}?sort=top&t=year`) top year
+            div
+              a(href=`/r/${subreddit}?sort=top&t=all`) top all
 
       if posts
         each child in posts.posts
-          +post(child.data)
-        
+          +post(child.data, currentUrl)
+
         if posts.after
           div.footer
             div.footer-item