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 within the last hour</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

@@ -257,9 +257,36 @@ document.body.addEventListener('click', (e) => {
 
 const textNoteList = []; // could use indexDB
 const eventRelayMap = {}; // eventId: [relay1, relay2]
+const replyList = [];
+const reactionMap = {};
 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),
+      ...replyList.filter(({content}) => content === evt.content),
+    ].filter(({created_at}) => ((created_at + 3600) > evt.created_at));
+    if (similarEvents?.length >= 5) {
+      console.info(`DROP event with content: "${evt.content.trim()}" already got ${similarEvents.length} similar events withing the last hour`, similarEvents, `\n dropped event id: ${evt.id}`);
+      return false;
+    }
+  }
+  return true;
+}
+
 function handleTextNote(evt, relay) {
+  if (!isValidNote(evt)) {
+    return;
+  }
   if (eventRelayMap[evt.id]) {
     eventRelayMap[evt.id] = [relay, ...(eventRelayMap[evt.id])];
   } else {
@@ -273,9 +300,6 @@ function handleTextNote(evt, relay) {
   }
 }
 
-const replyList = [];
-const reactionMap = {};
-
 const getReactionList = (id) => {
   return reactionMap[id]?.map(({content}) => content) || [];
 };
@@ -357,6 +381,7 @@ setInterval(() => {
 }, 10000);
 
 const getNoxyUrl = (type, url, id, relay) => {
+  return false;
   if (!isHttpUrl(url)) {
     return false;
   }
@@ -371,6 +396,9 @@ const fetchQue = [];
 let fetchPending;
 const fetchNext = (href, id, relay) => {
   const noxy = getNoxyUrl('meta', href, id, relay);
+  if (!noxy) {
+    return;
+  }
   const previewId = noxy.searchParams.toString();
   if (fetchPending) {
     fetchQue.push({href, id, relay});

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;