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

@@ -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);

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>

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');