added time ago to notes, asc -> desc order for notes, fixed settings …

…bug, refactor etc

src/github/feed/boost-helpers.js

@@ -59,27 +59,3 @@ export const issueIcon = html.span({ classList: "n-github-issue-icon" });
 issueIcon.innerHTML = `<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened UnderlineNav-octicon d-none d-sm-inline">
     <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path>
 </svg>`;
-
-export function timeAgo(timestampInSeconds) {
-  const nowInSeconds = Math.floor(Date.now() / 1000);
-  const secondsAgo = nowInSeconds - timestampInSeconds;
-
-  let value, unit;
-
-  if (secondsAgo < 60) {
-    value = secondsAgo;
-    unit = "second";
-  } else if (secondsAgo < 3600) {
-    value = Math.floor(secondsAgo / 60);
-    unit = "minute";
-  } else if (secondsAgo < 86400) {
-    value = Math.floor(secondsAgo / 3600);
-    unit = "hour";
-  } else {
-    value = Math.floor(secondsAgo / 86400);
-    unit = "day";
-  }
-
-  const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
-  return rtf.format(-value, unit);
-}

src/github/feed/boost.js

@@ -6,6 +6,7 @@ import {
 } from "../../helpers/local-cache.js";
 import { getIconComponent } from "../github-connect.js";
 import { logger } from "../../helpers/logger.js";
+import { timeAgo } from "../../helpers/time.js";
 
 import {
   fetchGithubTitle,
@@ -14,7 +15,6 @@ import {
   pickRandomEmoji,
   prIcon,
   spanSpaced,
-  timeAgo,
   typeToReactions,
 } from "./boost-helpers.js";
 

src/helpers/local-cache.js

@@ -1,7 +1,7 @@
 import { mergeSettings } from "./utils.js";
 
 export const defaultSettings = {
-  version: 1,
+  version: 2,
   debug: {
     log: true,
     namespace: "[N]",
@@ -12,7 +12,7 @@ export const defaultSettings = {
     nip07: {
       useRelays: false,
     },
-    openNostr: "https://nosta.me",
+    openNostr: "https://nost.at",
   },
   lightsatsSettings: {
     apiKey: "",

src/helpers/nostr.js

@@ -306,15 +306,17 @@ export async function requestSigningFromNip07(messageParams) {
  * @param {Object} event - The event to insert
  * @returns {number} - The index where the event was inserted
  */
-function insertEventIntoAscendingList(sortedArray, event) {
+function insertEventIntoDescendingList(sortedArray, event) {
   const [idx, found] = binarySearch(sortedArray, (b) => {
     if (event.id === b.id) {
       return 0;
     }
+
     if (event.created_at === b.created_at) {
       return -1;
     }
-    return event.created_at - b.created_at;
+
+    return b.created_at - event.created_at;
   });
 
   if (!found) {
@@ -355,7 +357,7 @@ export function fetchLatestNotes({ pubkey, relays, callback }) {
 
         notesSet.add(event.id);
 
-        const index = insertEventIntoAscendingList(latestNotes, event);
+        const index = insertEventIntoDescendingList(latestNotes, event);
 
         console.log(`inserted at index: ${index}`);
 

src/helpers/time.js

@@ -0,0 +1,23 @@
+export function timeAgo(timestampInSeconds) {
+  const nowInSeconds = Math.floor(Date.now() / 1000);
+  const secondsAgo = nowInSeconds - timestampInSeconds;
+
+  let value, unit;
+
+  if (secondsAgo < 60) {
+    value = secondsAgo;
+    unit = "second";
+  } else if (secondsAgo < 3600) {
+    value = Math.floor(secondsAgo / 60);
+    unit = "minute";
+  } else if (secondsAgo < 86400) {
+    value = Math.floor(secondsAgo / 3600);
+    unit = "hour";
+  } else {
+    value = Math.floor(secondsAgo / 86400);
+    unit = "day";
+  }
+
+  const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+  return rtf.format(-value, unit);
+}

src/settings/settings.js

@@ -99,6 +99,7 @@ async function settingsPage() {
     state.nostrSettings.nip07.useRelays =
       defaultSettings.nostrSettings.nip07.useRelays;
     state.nostrSettings.relays = [...defaultSettings.nostrSettings.relays];
+    state.nostrSettings.openNostr = defaultSettings.nostrSettings.openNostr;
 
     // Lightsats settings
     state.lightsatsSettings.apiKey = defaultSettings.lightsatsSettings.apiKey;
@@ -153,6 +154,9 @@ async function settingsPage() {
     toggleNIP07Settings();
   };
 
+  document.getElementById("open-nostr").onchange = (e) =>
+    (state.nostrSettings.openNostr = e.target.value);
+
   document.getElementById("nip07-relays").onchange = (e) =>
     (state.nostrSettings.nip07.useRelays = e.target.checked);
 

src/twitter/profile/notes.css

@@ -15,20 +15,37 @@
 }
 
 .n-tw-note {
+  position: relative;
+}
+
+.n-tw-note-content {
   background-color: rgb(208, 173, 240);
-  padding: 10px;
+  padding: 15px 10px 10px 10px;
   border-radius: 5px;
   margin: 10px;
   color: black;
 }
 
-.n-tw-note img {
+.n-tw-note .ago {
+  position: absolute;
+  text-decoration: none;
+  top: 12px;
+  right: 22px;
+  font-size: small;
+  color: blueviolet;
+}
+
+.n-tw-note .ago:hover {
+  text-decoration: underline;
+}
+
+.n-tw-note-content img {
   max-width: 100%;
   height: auto;
   margin: 5px 0 5px 0;
 }
 
-.n-tw-note a {
+.n-tw-note-content a {
   color: white;
   text-decoration: underline;
-}
+}

src/twitter/profile/profile.js

@@ -28,10 +28,10 @@ import { wrapInputTooltip } from "../../components/tooltip/tooltip-wrapper.js";
 
 import {
   createTwitterButton,
-  setNostrMode,
+  setupNostrMode,
   updateFollowButton,
 } from "./twitter-helpers.js";
-import { wrapCheckbox } from "../../components/checkbox/checkbox-wrapper.js";
+import { setupNostrProfileLink } from "./twitter-helpers.js";
 
 async function twitterProfilePage() {
   const settings = await getLocalSettings();
@@ -161,43 +161,15 @@ async function twitterProfilePage() {
     'nav[aria-label="Profile timelines"]',
   );
 
-  const nostrModeOnclick = async (checked) => {
-    if (checked) {
-      timelineNavbar.style.display = "none";
-    } else {
-      timelineNavbar.style.display = "flex";
-    }
-
-    await setNostrMode({
-      enabled: checked,
-      pageUserPubkey,
-      pageUserWriteRelays,
-      openNostr: settings.nostrSettings.openNostr,
-    });
-  };
-
-  const enableNostrModeCheckbox = wrapCheckbox({
-    input: html.input({
-      type: "checkbox",
-      id: "n-tw-enable-nostr-mode",
-      checked: true,
-    }),
-    onclick: nostrModeOnclick,
-    text: "Enable Nostr Mode",
+  const { enableNostrModeCheckbox, notesSection } = setupNostrMode({
+    timelineNavbar,
+    pageUserPubkey,
+    pageUserWriteRelays,
+    settings,
   });
 
-  timelineNavbar.insertAdjacentElement("beforebegin", enableNostrModeCheckbox);
-
-  enableNostrModeCheckbox.insertAdjacentElement(
-    "afterend",
-    html.div({
-      id: "n-tw-notes-section",
-      style: [["display", "none"]],
-    }),
-  );
-
   // nostr mode is on by default
-  nostrModeOnclick(true);
+  enableNostrModeCheckbox.insertAdjacentElement("afterend", notesSection);
 
   if (pageUserPubkey === nostrizeUserPubkey) {
     log("current page user is the nostrize user");
@@ -213,29 +185,7 @@ async function twitterProfilePage() {
     relays: nostrizeUserRelays,
   });
 
-  // handle container is the div that contains the username and the handle
-  const usernamePanel = document.querySelector("div[data-testid='UserName']");
-  const handleContainer =
-    usernamePanel?.childNodes[0]?.childNodes[0]?.childNodes[0]?.childNodes[1];
-  const handle = handleContainer?.childNodes[0];
-  const handleContent = handle.textContent;
-  handle.style.display = "none";
-
-  // nostr profile link
-  if (handleContainer) {
-    gui.prepend(
-      handleContainer,
-      wrapInputTooltip({
-        id: "n-tw-nostr-profile-button",
-        input: html.link({
-          text: handleContent,
-          href: `${settings.nostrSettings.openNostr}/${pageUserPubkey}`,
-          targetBlank: true,
-        }),
-        tooltipText: `User is on Nostr. Click to open Nostr profile.`,
-      }),
-    );
-  }
+  const handleContainer = setupNostrProfileLink(settings, pageUserPubkey);
 
   // follows of the account
   const pageUserFollowSubscription = getFollowSet({