feed: enable ignoring duplicate textnotes option

This option drops textNotes with exactly the same content after,
it was already shown 5 times.

src/cards.css

@@ -10,7 +10,7 @@
 }
 @media (orientation: portrait) {
   .mbox {
-    padding: 0 calc(.5 * var(--gap));
+    padding: 0 var(--gap-half);
   }
 }
 .mbox:last-child {

src/form.css

@@ -187,6 +187,16 @@ button:disabled {
   flex-grow: 0;
 }
 
+
+input[type="checkbox"] {
+  margin: 0;
+}
+label.checkbox {
+  align-items: baseline;
+  display: flex;
+  gap: var(--gap-half);
+}
+
 button#publish {
   align-self: end;
   order: 2;

src/index.html

@@ -83,6 +83,15 @@
               <button type="submit" name="publish" tabindex="0" disabled>publish</button>
             </div>
           </form>
+          <form action="#" name="options">
+            <label class="checkbox" for="duplicates">
+              <input type="checkbox" name="dropDuplicate" id="duplicates">
+              <span>
+                drop duplicate events<br>
+                <small>ignore events that have already been rendered 5&nbsp;times</small>
+              </span>
+            </label>
+          </form>
           <form action="#" name="settings" autocomplete="new-password">
             <label for="pubkey">public-key</label>
             <input type="text" id="pubkey" autocomplete="off">

src/main.css

@@ -14,6 +14,7 @@
   --focus-outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
   --font-small: 1.2rem;
   --gap: 2.4rem;
+  --gap-half: 1.2rem;
 }
 
 ::selection {

src/main.js

@@ -259,7 +259,29 @@ const textNoteList = []; // could use indexDB
 const eventRelayMap = {}; // eventId: [relay1, relay2]
 const hasEventTag = tag => tag[0] === 'e';
 
+const dropDuplicateToggle = document.querySelector('#duplicates');
+let dropDuplicate = JSON.parse(localStorage.getItem('filter_duplicates')) ?? true;
+dropDuplicateToggle.addEventListener('click', (e) => {
+  localStorage.setItem('filter_duplicates', e.target.checked);
+  dropDuplicate = e.target.checked;
+});
+dropDuplicateToggle.checked = dropDuplicate;
+
+function isValidNote(evt) {
+  if (dropDuplicate) {
+    const similarEvents = textNoteList.filter(({content}) => content === evt.content);
+    if (similarEvents?.length >= 5) {
+      console.info(`DROP event ${evt.id} already got ${similarEvents.length}`, similarEvents);
+      return false;
+    }
+  }
+  return true;
+}
+
 function handleTextNote(evt, relay) {
+  if (!isValidNote(evt)) {
+    return;
+  }
   if (eventRelayMap[evt.id]) {
     eventRelayMap[evt.id] = [relay, ...(eventRelayMap[evt.id])];
   } else {

src/tabs.css

@@ -45,7 +45,7 @@ input[type="radio"]:checked + label {
 .tab-content {
   max-width: 96ch;
   min-height: 200px;
-  padding: calc(.5 * var(--gap)) 0 100px 0;
+  padding: var(--gap-half) 0 100px 0;
 }
 .tabbed {
   align-items: start;