Update admin nav

public/style.css

@@ -111,6 +111,8 @@ a {
 .wrapper {
   min-height: 40vh;
   margin: 2rem 0;
+  display: flex;
+  flex-direction: column-reverse;
 }
 
 @media (min-width: 600px) {
@@ -205,7 +207,7 @@ h3 {
   margin-bottom: 1rem;
 }
 
-p {
+p, ol, ul, form {
   margin-bottom: 1rem;
 }
 
@@ -439,12 +441,16 @@ a.bookmark-date {
 
 .admin-links {
   list-style: none;
+  margin: 0 0 2rem;
+  font-weight: bold;
+  font-size: .875rem;
+  line-height: 1.25rem;
+  color: var(--color-dimmed);
 }
 
 .admin-links a {
-  color: var(--color-dimmed);
-  font-size: .875rem;
-  line-height: 1.25rem;
+  font-weight: normal;
+  color: inherit;
 }
 
 .bookmark-permalink-title {

server.js

@@ -94,6 +94,9 @@ const hbs = create({
     ifThisTag(tag, path, options) {
       return path === `/tagged/${tag}` ? options.fn(this) : options.inverse(this);
     },
+    eq(a, b, options) {
+      return a === b ? options.fn(this) : options.inverse(this);
+    },
   },
   partialsDir: './src/pages/partials',
   extname: '.hbs',

src/pages/admin/data.hbs

@@ -1,19 +1,18 @@
 <h3>
   Download bookmarks
 </h3>
-<p style="margin: 0;">
+<p>
   You can download your bookmarks as:
 </p>
-  <ul>
-    <li><a href="/admin/bookmarks.db">sqlite database</a></li>
-    <li><a href="/admin/bookmarks.csv">csv</a></li>
-  </ul>
+<ul>
+  <li><a href="/admin/bookmarks.db">sqlite database</a></li>
+  <li><a href="/admin/bookmarks.csv">csv</a></li>
+</ul>
 <p>
-  It's less likely you'll need this, but you can also download your
+  It’s less likely you’ll need this, but you can also download your
   activitypub.db
   <a href="/admin/activitypub.db">here</a>.
 </p>
-
 <form action="/admin/reset" method="post"
   onsubmit="return confirm('Last chance! This will DELETE ALL YOUR BOOKMARKS. Are you sure you want to do this?')">
   <h3>

src/pages/layouts/main.hbs

@@ -40,8 +40,8 @@
         {{/if}}
         {{{body}}}
       </div>
-      {{#if admin}}
-        {{> admin_subnav}}
+      {{#if adminLinks}}
+        {{> admin_subnav links=adminLinks currentPath=currentPath}}
       {{else}}
         {{> tag_list tags=tags}}
       {{/if}}

src/pages/partials/admin_subnav.hbs

@@ -1,7 +1,15 @@
-<ul class="admin-links">
-  <li><a href="/admin">Bookmarklet</a></li>
-  <li><a href="/admin/bookmarks">Import bookmarks</a></li>
-  <li><a href="/admin/followers">Permissions &amp; followers</a></li>
-  <li><a href="/admin/following">Federated follows</a></li>
-  <li><a href="/admin/data">Data export</a></li>
-</ul>
+{{#if links}}
+  <ul class="admin-links">
+    {{#each links}}
+      <li>
+        {{#eq href ../currentPath}}
+          {{label}}
+        {{else}}
+          <a href="{{href}}">
+            {{label}}
+          </a>
+        {{/eq}}
+      </li>
+    {{/each}}
+  </ul>
+{{/if}}

src/routes/admin.js

@@ -7,11 +7,20 @@ import { lookupActorInfo, createFollowMessage, createUnfollowMessage, signAndSen
 
 const DATA_PATH = '/app/.data';
 
+const ADMIN_LINKS = [
+  { href: '/admin', label: 'Bookmarklet' },
+  { href: '/admin/bookmarks', label: 'Import bookmarks' },
+  { href: '/admin/followers', label: 'Permissions & followers' },
+  { href: '/admin/following', label: 'Federated follows' },
+  { href: '/admin/data', label: 'Data export' },
+];
+
 const router = express.Router();
 
 router.get('/', isAuthenticated, async (req, res) => {
   const params = req.query.raw ? {} : { title: 'Bookmarklet' };
-  params.admin = true;
+  params.adminLinks = ADMIN_LINKS;
+  params.currentPath = req.originalUrl;
   params.bookmarklet = `javascript:(function(){w=window.open('https://${domain}/bookmark/popup?url='+encodeURIComponent(window.location.href)+'&highlight='+encodeURIComponent(window.getSelection().toString()),'postmarks','scrollbars=yes,width=550,height=600');})();`;
   params.bookmarkletTruncated = `${params.bookmarklet.substr(0, 30)}…`;
 
@@ -20,14 +29,16 @@ router.get('/', isAuthenticated, async (req, res) => {
 
 router.get('/bookmarks', isAuthenticated, async (req, res) => {
   const params = req.query.raw ? {} : { title: 'Import bookmarks' };
-  params.admin = true;
+  params.adminLinks = ADMIN_LINKS;
+  params.currentPath = req.originalUrl;
 
   return res.render('admin/bookmarks', params);
 });
 
 router.get('/followers', isAuthenticated, async (req, res) => {
   const params = req.query.raw ? {} : { title: 'Permissions & followers' };
-  params.admin = true;
+  params.adminLinks = ADMIN_LINKS;
+  params.currentPath = req.originalUrl;
 
   const apDb = req.app.get('apDb');
 
@@ -59,7 +70,8 @@ router.get('/followers', isAuthenticated, async (req, res) => {
 
 router.get('/following', isAuthenticated, async (req, res) => {
   const params = req.query.raw ? {} : { title: 'Federated follows' };
-  params.admin = true;
+  params.adminLinks = ADMIN_LINKS;
+  params.currentPath = req.originalUrl;
 
   const apDb = req.app.get('apDb');
 
@@ -79,7 +91,8 @@ router.get('/following', isAuthenticated, async (req, res) => {
 
 router.get('/data', isAuthenticated, async (req, res) => {
   const params = req.query.raw ? {} : { title: 'Data export' };
-  params.admin = true;
+  params.adminLinks = ADMIN_LINKS;
+  params.currentPath = req.originalUrl;
 
   return res.render('admin/data', params);
 });