From caf5083caae7bd160e2582a6e35463b00e567b46 Mon Sep 17 00:00:00 2001
From: OFF0 <offbyn@protonmail.com>
Date: Mon, 16 Jan 2023 09:09:18 +0100
Subject: [PATCH] nip-13: difficulty filter

added a slider to adjust the difficulty filter, current default is
0 so all notes are rendered. increasing the filter will hide notes
with lower difficulty target.

changed the max difficulty from 256 to 32 for now so that the
range slider is usable.

this does not yet hide reactions with lower difficulty.
---
 src/form.css   |  9 +++++----
 src/index.html | 10 +++++++++-
 src/main.js    | 27 +++++++++++++++++++++++++--
 3 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/src/form.css b/src/form.css
index 562c7a0..200476e 100644
--- a/src/form.css
+++ b/src/form.css
@@ -52,9 +52,13 @@ textarea {
   border: .2rem solid #b7b7b7;
   border-radius: .2rem;
   display: block;
-  margin: 0 0 1.2rem 0;
+  margin: 0 0 var(--gap-half) 0;
   padding: var(--padding);
 }
+label.number,
+input[type="range"] {
+  margin: 0 0 var(--gap) 0;
+}
 input[type="number"]:focus,
 input[type="password"]:focus,
 input[type="text"]:focus,
@@ -194,9 +198,6 @@ label.number {
   gap: var(--gap);
   padding: 0;
 }
-* + label.number {
-  margin: var(--gap) 0 0 0;
-}
 label.number span {
   flex-grow: 1;
   padding: 0 0 0 var(--padding);
diff --git a/src/index.html b/src/index.html
index 31493a0..333f00c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -84,6 +84,14 @@
             </div>
           </form>
           <form action="#" name="options">
+            <label for="filterDifficulty">
+               difficulty filter<br>
+              <small>
+                hide text notes with mining proof lower
+                than:&nbsp;<span data-display="filter_difficulty"></span>. a zero value shows all notes.
+              </small>
+            </label>
+            <input type="range" name="filter_difficulty" step="1" min="0" max="32" id="filterDifficulty" value="0">
             <label class="number" for="miningTarget">
               <span>
                 mining difficulty<br>
@@ -94,7 +102,7 @@
                   <a href="https://github.com/nostr-protocol/nips/blob/master/13.md" target="_blank" rel="noopener noreferrer">proof of work (nip-13)</a>.
                 </small>
               </span>
-              <input type="number" name="mining_target" step="1" min="0" max="256" id="miningTarget" value="16">
+              <input type="number" name="mining_target" step="1" min="0" max="32" id="miningTarget" value="16">
             </label>
             <label class="number" for="miningTimeout">
               <span>
diff --git a/src/main.js b/src/main.js
index 59062e3..dc85c1e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -324,7 +324,9 @@ const sortByCreatedAt = (evt1, evt2) => {
 };
 
 function renderFeed() {
-  const sortedFeeds = textNoteList.sort(sortByCreatedAt).reverse();
+  const sortedFeeds = textNoteList
+    .filter(note => !fitlerDifficulty || note.tags.some(([tag, , commitment]) => tag === 'nonce' && commitment >= fitlerDifficulty))
+    .sort(sortByCreatedAt).reverse();
   sortedFeeds.forEach((evt, i) => {
     if (feedDomMap[evt.id]) {
       // TODO check eventRelayMap if event was published to different relays
@@ -340,6 +342,13 @@ function renderFeed() {
   });
 }
 
+function rerenderFeed() {
+  Object.keys(feedDomMap).forEach(key => delete feedDomMap[key]);
+  Object.keys(replyDomMap).forEach(key => delete replyDomMap[key]);
+  feedContainer.replaceChildren([]);
+  renderFeed();
+}
+
 setInterval(() => {
   document.querySelectorAll('time[datetime]').forEach(timeElem => {
     timeElem.textContent = formatTime(new Date(timeElem.dateTime));
@@ -516,7 +525,9 @@ function handleRecommendServer(evt, relay) {
   if (textNoteList.length < 2) {
     feedContainer.append(art);
   } else {
-    const closestTextNotes = textNoteList.sort(sortEventCreatedAt(evt.created_at));
+    const closestTextNotes = textNoteList
+      .filter(note => !fitlerDifficulty || note.tags.some(([tag, , commitment]) => tag === 'nonce' && commitment >= fitlerDifficulty))
+      .sort(sortEventCreatedAt(evt.created_at));
     feedDomMap[closestTextNotes[0].id].after(art);
   }
   feedDomMap[evt.id] = art;
@@ -758,6 +769,18 @@ function hideNewMessage(hide) {
   newMessageDiv.hidden = hide;
 }
 
+let fitlerDifficulty = JSON.parse(localStorage.getItem('filter_difficulty')) ?? 0;
+const filterDifficultyInput = document.querySelector('#filterDifficulty');
+const filterDifficultyDisplay = document.querySelector('[data-display="filter_difficulty"]');
+filterDifficultyInput.addEventListener('input', (e) => {
+  localStorage.setItem('filter_difficulty', filterDifficultyInput.valueAsNumber);
+  fitlerDifficulty = filterDifficultyInput.valueAsNumber;
+  filterDifficultyDisplay.textContent = filterDifficultyInput.value;
+  rerenderFeed();
+});
+filterDifficultyInput.value = fitlerDifficulty;
+filterDifficultyDisplay.textContent = filterDifficultyInput.value;
+
 // arbitrary difficulty default, still experimenting.
 let difficulty = JSON.parse(localStorage.getItem('mining_target')) ?? 16;
 const miningTargetInput = document.querySelector('#miningTarget');