💄 (memory): Improve info title UI

src/popup/css/popup.css

@@ -665,6 +665,10 @@ code {
 .expand-memory-authors {
     cursor: pointer;
 }
+.paper-info-span {
+    font-family: "Fira Code", monospace;
+    font-size: 0.7rem;
+}
 
 svg.favorite {
     stroke-width: 2px !important;

src/popup/js/templates.js

@@ -1,3 +1,5 @@
+const infoSpan = (k, ml) =>
+    `<span class="paper-info-span">${padRight(k, ml, "&nbsp;")}</span>`;
 /**
  * Return a formatted HTML string describing some metadata about a paper
  * added date, last open date, number of visits, venue if available
@@ -7,13 +9,17 @@
 const getPaperinfoTitle = (paper) => {
     const addDate = new Date(paper.addDate).toLocaleString().replace(",", "");
     const lastOpenDate = new Date(paper.lastOpenDate).toLocaleString().replace(",", "");
-
-    let infoTitle = `Added ${addDate}\n`;
-    infoTitle += `Last open ${lastOpenDate}\n`;
-    infoTitle += `Visits: ${paper.count}\n`;
-    infoTitle += `Source: ${global.knownPaperPages[paper.source].name}\n`;
+    const ml = "Publication".length + 1;
+    let infoTitle = `${infoSpan("Added", ml)} ${addDate}\n`;
+    infoTitle += `${infoSpan("Last open", ml)} ${lastOpenDate}\n`;
+    infoTitle += `${infoSpan("Visits", ml)} ${paper.count}\n`;
+    infoTitle += `${infoSpan("Source", ml)} ${
+        global.knownPaperPages[paper.source].name
+    }\n`;
     if (paper.venue) {
-        infoTitle += `\n<strong>${paper.venue} ${paper.year}</strong>`;
+        infoTitle += `${infoSpan("Publication", ml)} <strong>${paper.venue} ${
+            paper.year
+        }</strong>`;
     }
     infoTitle = infoTitle.replaceAll("\n", "<br/>");
     return infoTitle;

src/shared/js/utils/functions.js

@@ -302,11 +302,25 @@ async function pasteRich(rich, plain) {
  * @param {string} title The title of the url to copy to the clipboard
  * @returns {void}
  * */
-copyHyperLinkToClipboard = (url, title) => {
+const copyHyperLinkToClipboard = (url, title) => {
     const linkHtml = `<a href="${url}">${title}</a>`;
     pasteRich(linkHtml, `${title} ${url}`);
 };
 
+/**
+ * Pad a string with a character on the right. Character is " " by default.
+ * @param {string} str The string to pad
+ * @param {number} length The length of the padded string
+ * @param {string} char The character to pad with
+ * @returns {string} The padded string
+ */
+const padRight = (str, length, char) => {
+    if (typeof char === "undefined") {
+        char = " ";
+    }
+    return str.length < length ? str + char.repeat(length - str.length) : str;
+};
+
 /**
  * Parse a url and return an object with the url's components
  * @param {string} url The url to parse