From 297569f3ed22c8eff252ddec334653af7ff5b830 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sat, 1 Jul 2023 13:23:03 +0200
Subject: [PATCH 01/15] remove useLayoutEffect

---
 src/components/views/All.jsx           | 18 +++++++++---------
 src/components/views/Board.jsx         | 18 +++++++++---------
 src/components/views/Subscriptions.jsx | 18 +++++++++---------
 src/components/views/Thread.jsx        | 18 +++++++++---------
 4 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx
index 34dd3b47..66c6d8d0 100755
--- a/src/components/views/All.jsx
+++ b/src/components/views/All.jsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useState, useRef } from 'react';
+import React, { Fragment, useCallback, useEffect, useMemo, useState, useRef } from 'react';
 import { confirmAlert } from 'react-confirm-alert';
 import { createPortal } from 'react-dom';
 import { Helmet } from 'react-helmet-async';
@@ -163,6 +163,14 @@ const All = () => {
   }, [openMenuCid, handleOutsideClick]);
 
 
+  useEffect(() => {
+    if (postOnHoverRef.current) {
+      const rect = postOnHoverRef.current.getBoundingClientRect();
+      setPostOnHoverHeight(rect.height);
+    }
+  }, [outOfViewCid]);
+
+
   const errorString = useMemo(() => {
     for (const subplebbit of subplebbits) {
       if (subplebbit?.updatingState !== 'failed') {
@@ -457,14 +465,6 @@ const All = () => {
   };
 
 
-  useLayoutEffect(() => {
-    if (postOnHoverRef.current) {
-      const rect = postOnHoverRef.current.getBoundingClientRect();
-      setPostOnHoverHeight(rect.height);
-    }
-  }, [outOfViewCid]);
-
-
   return (
     <>
       <Helmet>
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index c645eaf4..ff9561dd 100755
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Helmet } from 'react-helmet-async';
 import { Link, useNavigate, useParams } from 'react-router-dom';
@@ -169,7 +169,14 @@ const Board = () => {
       document.removeEventListener('click', handleOutsideClick);
     };
   }, [openMenuCid, handleOutsideClick]);
-  
+
+
+  useEffect(() => {
+    if (postOnHoverRef.current) {
+      const rect = postOnHoverRef.current.getBoundingClientRect();
+      setPostOnHoverHeight(rect.height);
+    }
+  }, [outOfViewCid]);
   
 
   const errorString = useMemo(() => {
@@ -618,13 +625,6 @@ const Board = () => {
   };
 
 
-  useLayoutEffect(() => {
-    if (postOnHoverRef.current) {
-      const rect = postOnHoverRef.current.getBoundingClientRect();
-      setPostOnHoverHeight(rect.height);
-    }
-  }, [outOfViewCid]);
-
   
 
   return (
diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx
index a6067f87..9cd3f77f 100755
--- a/src/components/views/Subscriptions.jsx
+++ b/src/components/views/Subscriptions.jsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useState, useRef } from 'react';
+import React, { Fragment, useCallback, useEffect, useMemo, useState, useRef } from 'react';
 import { confirmAlert } from 'react-confirm-alert';
 import { createPortal } from 'react-dom';
 import { Helmet } from 'react-helmet-async';
@@ -161,6 +161,14 @@ const Subscriptions = () => {
     };
   }, [openMenuCid, handleOutsideClick]);
 
+
+  useEffect(() => {
+    if (postOnHoverRef.current) {
+      const rect = postOnHoverRef.current.getBoundingClientRect();
+      setPostOnHoverHeight(rect.height);
+    }
+  }, [outOfViewCid]);
+
   
   const errorString = useMemo(() => {
     for (const subplebbit of subplebbits) {
@@ -458,14 +466,6 @@ const Subscriptions = () => {
     navigate(`/p/${selected}`);
   };
 
-  
-  useLayoutEffect(() => {
-    if (postOnHoverRef.current) {
-      const rect = postOnHoverRef.current.getBoundingClientRect();
-      setPostOnHoverHeight(rect.height);
-    }
-  }, [outOfViewCid]);
-  
 
   return (
     <>
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index b714d8be..599e2629 100755
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Helmet } from 'react-helmet-async';
 import { Link, useNavigate, useParams } from 'react-router-dom';
@@ -161,6 +161,14 @@ const Thread = () => {
     };
   }, [openMenuCid, handleOutsideClick]);
 
+
+  useEffect(() => {
+    if (postOnHoverRef.current) {
+      const rect = postOnHoverRef.current.getBoundingClientRect();
+      setPostOnHoverHeight(rect.height);
+    }
+  }, [outOfViewCid]);
+
   
   useEffect(() => {
     window.scrollTo(0, 0);
@@ -549,14 +557,6 @@ const Thread = () => {
   };
 
 
-  useLayoutEffect(() => {
-    if (postOnHoverRef.current) {
-      const rect = postOnHoverRef.current.getBoundingClientRect();
-      setPostOnHoverHeight(rect.height);
-    }
-  }, [outOfViewCid]);
-
-
   return (
     <>
       <Helmet>

From e2a95563051e46919f14f04f924c084010769cb2 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sun, 2 Jul 2023 11:45:56 +0200
Subject: [PATCH 02/15] fix plebbitOptions, improve error messages

---
 src/components/modals/ModerationModal.jsx     |  4 +-
 src/components/modals/ReplyModal.jsx          |  4 +-
 src/components/modals/SettingsModal.jsx       | 48 ++++++++++++-------
 src/components/views/All.jsx                  |  4 +-
 src/components/views/AllCatalog.jsx           |  4 +-
 src/components/views/Board.jsx                |  8 ++--
 src/components/views/Catalog.jsx              |  8 ++--
 src/components/views/Subscriptions.jsx        |  4 +-
 src/components/views/SubscriptionsCatalog.jsx |  4 +-
 src/components/views/Thread.jsx               |  6 +--
 10 files changed, 55 insertions(+), 39 deletions(-)

diff --git a/src/components/modals/ModerationModal.jsx b/src/components/modals/ModerationModal.jsx
index 44caad8d..296b74bc 100755
--- a/src/components/modals/ModerationModal.jsx
+++ b/src/components/modals/ModerationModal.jsx
@@ -63,7 +63,7 @@ const ModerationModal = ({ isOpen, closeModal, deletePost }) => {
       challengeAnswers = await getChallengeAnswersFromUser(challenges)
     }
     catch (error) {
-      setNewErrorMessage(error);
+      setNewErrorMessage(error.message); console.log(error);
     }
     if (challengeAnswers) {
       await comment.publishChallengeAnswers(challengeAnswers)
@@ -113,7 +113,7 @@ const ModerationModal = ({ isOpen, closeModal, deletePost }) => {
     onChallenge,
     onChallengeVerification,
     onError: (error) => {
-      setNewErrorMessage(error);
+      setNewErrorMessage(error.message); console.log(error);
     },
   });
   
diff --git a/src/components/modals/ReplyModal.jsx b/src/components/modals/ReplyModal.jsx
index a73ed331..e185ebac 100755
--- a/src/components/modals/ReplyModal.jsx
+++ b/src/components/modals/ReplyModal.jsx
@@ -115,7 +115,7 @@ const ReplyModal = ({ isOpen, closeModal }) => {
       challengeAnswers = await getChallengeAnswersFromUser(challenges)
     }
     catch (error) {
-      setNewErrorMessage(error);
+      setNewErrorMessage(error.message); console.log(error);
     }
     if (challengeAnswers) {
       await comment.publishChallengeAnswers(challengeAnswers)
@@ -136,7 +136,7 @@ const ReplyModal = ({ isOpen, closeModal }) => {
     onChallenge,
     onChallengeVerification,
     onError: (error) => {
-      setNewErrorMessage(error);
+      setNewErrorMessage(error.message); console.log(error);
     },
   });
 
diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx
index f60d28bc..844e42ed 100755
--- a/src/components/modals/SettingsModal.jsx
+++ b/src/components/modals/SettingsModal.jsx
@@ -36,6 +36,17 @@ const SettingsModal = ({ isOpen, closeModal }) => {
   const importRef = useRef();
   const nameRef = useRef();
 
+  const defaultGatewayUrls = [
+    'https://ipfs.io',
+    'https://ipfsgateway.xyz',
+    'https://cloudflare-ipfs.com',
+    'https://plebpubsub.live'
+  ];
+  const defaultPubsubHttpClientsOptions = [
+    'https://pubsubprovider.xyz/api/v0',
+    'https://plebpubsub.live/api/v0'
+  ];
+
   const isValidURL = (url) => {
     try {
       new URL(url);
@@ -46,14 +57,26 @@ const SettingsModal = ({ isOpen, closeModal }) => {
   };
 
   const handleSavePlebbitOptions = async () => {
-    const gatewayUrls = gatewayRef.current.value.split('\n').filter(url => url.trim());
-    const ipfsClientsOptions = ipfsRef.current.value.split('\n').filter(url => url.trim()) || undefined;
-    const pubsubClientsOptions = pubsubRef.current.value.split('\n').filter(url => url.trim());
+    let gatewayUrls = gatewayRef.current.value.split('\n').filter(url => url.trim());
+    let ipfsClientsOptions = ipfsRef.current.value.split('\n').filter(url => url.trim());
+    let pubsubClientsOptions = pubsubRef.current.value.split('\n').filter(url => url.trim());
+
+    if (!gatewayUrls.length) {
+      gatewayUrls = defaultGatewayUrls;
+    }
+
+    if (!ipfsClientsOptions.length) {
+      ipfsClientsOptions = undefined;
+    }
+
+    if (!pubsubClientsOptions.length) {
+      pubsubClientsOptions = defaultPubsubHttpClientsOptions;
+    }
 
     const invalidUrls = [
-      ...gatewayUrls,
+      ...gatewayUrls || defaultGatewayUrls,
       ...(ipfsClientsOptions || []),
-      ...pubsubClientsOptions,
+      ...pubsubClientsOptions || defaultPubsubHttpClientsOptions,
     ].filter((url) => !isValidURL(url));
 
     if (invalidUrls.length > 0) {
@@ -72,7 +95,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
       localStorage.setItem("successToast", "Settings Saved");
       window.location.reload();
     } catch (error) {
-      setNewErrorMessage(error.message);
+      setNewErrorMessage(error.message); console.log(error);
     }
   };
 
@@ -81,13 +104,6 @@ const SettingsModal = ({ isOpen, closeModal }) => {
     setNewErrorMessage(null);
     setNewSuccessMessage(null);
 
-    const defaultGatewayUrls = [
-      'https://ipfs.io',
-      'https://ipfsgateway.xyz',
-      'https://cloudflare-ipfs.com'
-    ];
-    const defaultPubsubHttpClientsOptions = ['https://pubsubprovider.xyz/api/v0'];
-
     gatewayRef.current.value = defaultGatewayUrls.join('\n');
     ipfsRef.current.value = "";
     pubsubRef.current.value = defaultPubsubHttpClientsOptions.join('\n');
@@ -105,7 +121,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
       localStorage.setItem("successToast", "Settings Reset");
       window.location.reload();
     } catch (error) {
-      setNewErrorMessage(error.message);
+      setNewErrorMessage(error.message); console.log(error);
     }
   };
 
@@ -169,7 +185,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
       setNewSuccessMessage("Account Imported");
       
     } catch (error) {
-      setNewErrorMessage(error.message);
+      setNewErrorMessage(error.message); console.log(error);
     }
   };
 
@@ -190,7 +206,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
      }});
       setNewSuccessMessage("Account Name Saved");
     } catch (error) {
-      setNewErrorMessage(error.message);
+      setNewErrorMessage(error.message); console.log(error);
     }
   };
 
diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx
index 66c6d8d0..5a7dea04 100755
--- a/src/components/views/All.jsx
+++ b/src/components/views/All.jsx
@@ -298,7 +298,7 @@ const All = () => {
       challengeAnswers = await getChallengeAnswersFromUser(challenges)
     }
     catch (error) {
-      setNewErrorMessage(error);
+      setNewErrorMessage(error.message); console.log(error);
     }
     if (challengeAnswers) {
       await comment.publishChallengeAnswers(challengeAnswers)
@@ -355,7 +355,7 @@ const All = () => {
     onChallenge,
     onChallengeVerification,
     onError: (error) => {
-      setNewErrorMessage(error);
+      setNewErrorMessage(error.message); console.log(error);
     },
   });
   
diff --git a/src/components/views/AllCatalog.jsx b/src/components/views/AllCatalog.jsx
index 63fa7b1c..515b1104 100755
--- a/src/components/views/AllCatalog.jsx
+++ b/src/components/views/AllCatalog.jsx
@@ -160,7 +160,7 @@ const AllCatalog = () => {
       challengeAnswers = await getChallengeAnswersFromUser(challenges)
     }
     catch (error) {
-      setNewErrorMessage(error);
+      setNewErrorMessage(error.message); console.log(error);
     }
     if (challengeAnswers) {
       await comment.publishChallengeAnswers(challengeAnswers)
@@ -209,7 +209,7 @@ const AllCatalog = () => {
     onChallenge,
     onChallengeVerification,
     onError: (error) => {
-      setNewErrorMessage(error);
+      setNewErrorMessage(error.message); console.log(error);
     },
   });
   
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index ff9561dd..e6a91ea5 100755
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -323,7 +323,7 @@ const Board = () => {
       challengeAnswers = await getChallengeAnswersFromUser(challenges)
     }
     catch (error) {
-      setNewErrorMessage(error);
+      setNewErrorMessage(error.message); console.log(error);
     }
     if (challengeAnswers) {
       await comment.publishChallengeAnswers(challengeAnswers)
@@ -344,7 +344,7 @@ const Board = () => {
     onChallenge,
     onChallengeVerification,
     onError: (error) => {
-      setNewErrorMessage(error);
+      setNewErrorMessage(error.message); console.log(error);
     },
   });
   
@@ -497,7 +497,7 @@ const Board = () => {
     onChallenge,
     onChallengeVerification,
     onError: (error) => {
-      setNewErrorMessage(error);
+      setNewErrorMessage(error.message); console.log(error);
     },
   });
   
@@ -620,7 +620,7 @@ const Board = () => {
         await unsubscribe(selectedAddress);
       }
     } catch (error) {
-      setNewErrorMessage(error);
+      setNewErrorMessage(error.message); console.log(error);
     }
   };
 
diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx
index 40b175cf..bba78daf 100755
--- a/src/components/views/Catalog.jsx
+++ b/src/components/views/Catalog.jsx
@@ -208,7 +208,7 @@ const Catalog = () => {
       challengeAnswers = await getChallengeAnswersFromUser(challenges)
     }
     catch (error) {
-      setNewErrorMessage(error);
+      setNewErrorMessage(error.message); console.log(error);
     }
     if (challengeAnswers) {
       await comment.publishChallengeAnswers(challengeAnswers)
@@ -229,7 +229,7 @@ const Catalog = () => {
     onChallenge,
     onChallengeVerification,
     onError: (error) => {
-      setNewErrorMessage(error);
+      setNewErrorMessage(error.message); console.log(error);
     },
   });
   
@@ -381,7 +381,7 @@ const Catalog = () => {
     onChallenge,
     onChallengeVerification,
     onError: (error) => {
-      setNewErrorMessage(error);
+      setNewErrorMessage(error.message); console.log(error);
     },
   });
   
@@ -485,7 +485,7 @@ const Catalog = () => {
         await unsubscribe(selectedAddress);
       }
     } catch (error) {
-      setNewErrorMessage(error);
+      setNewErrorMessage(error.message); console.log(error);
     }
   };
 
diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx
index 9cd3f77f..c093a71d 100755
--- a/src/components/views/Subscriptions.jsx
+++ b/src/components/views/Subscriptions.jsx
@@ -299,7 +299,7 @@ const Subscriptions = () => {
       challengeAnswers = await getChallengeAnswersFromUser(challenges)
     }
     catch (error) {
-      setNewErrorMessage(error);
+      setNewErrorMessage(error.message); console.log(error);
     }
     if (challengeAnswers) {
       await comment.publishChallengeAnswers(challengeAnswers)
@@ -349,7 +349,7 @@ const Subscriptions = () => {
     onChallenge,
     onChallengeVerification,
     onError: (error) => {
-      setNewErrorMessage(error);
+      setNewErrorMessage(error.message); console.log(error);
     },
   });
 
diff --git a/src/components/views/SubscriptionsCatalog.jsx b/src/components/views/SubscriptionsCatalog.jsx
index 34ee696a..7bbb5a3c 100755
--- a/src/components/views/SubscriptionsCatalog.jsx
+++ b/src/components/views/SubscriptionsCatalog.jsx
@@ -157,7 +157,7 @@ const SubscriptionsCatalog = () => {
       challengeAnswers = await getChallengeAnswersFromUser(challenges)
     }
     catch (error) {
-      setNewErrorMessage(error);
+      setNewErrorMessage(error.message); console.log(error);
     }
     if (challengeAnswers) {
       await comment.publishChallengeAnswers(challengeAnswers)
@@ -206,7 +206,7 @@ const SubscriptionsCatalog = () => {
     onChallenge,
     onChallengeVerification,
     onError: (error) => {
-      setNewErrorMessage(error);
+      setNewErrorMessage(error.message); console.log(error);
     },
   });
   
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index 599e2629..708a73e0 100755
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -280,7 +280,7 @@ const Thread = () => {
       challengeAnswers = await getChallengeAnswersFromUser(challenges)
     }
     catch (error) {
-      setNewErrorMessage(error);
+      setNewErrorMessage(error.message); console.log(error);
     }
     if (challengeAnswers) {
       await comment.publishChallengeAnswers(challengeAnswers)
@@ -301,7 +301,7 @@ const Thread = () => {
     onChallenge,
     onChallengeVerification,
     onError: (error) => {
-      setNewErrorMessage(error);
+      setNewErrorMessage(error.message); console.log(error);
     },
   });
 
@@ -454,7 +454,7 @@ const Thread = () => {
     onChallenge,
     onChallengeVerification,
     onError: (error) => {
-      setNewErrorMessage(error);
+      setNewErrorMessage(error.message); console.log(error);
     },
   });
   

From 42bafa6abdf9bc62ce9c491bcf4607bd6fa87d4a Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sun, 2 Jul 2023 21:36:08 +0200
Subject: [PATCH 03/15] fix error messages, comment edits, ENS discrepancy

---
 src/components/modals/ModerationModal.jsx     | 13 ++++++++-
 src/components/modals/ReplyModal.jsx          |  3 +-
 src/components/views/All.jsx                  | 26 ++++++++++-------
 src/components/views/AllCatalog.jsx           | 12 +++++---
 src/components/views/Board.jsx                | 28 +++++++++++--------
 src/components/views/Catalog.jsx              | 12 +++++---
 src/components/views/Subscriptions.jsx        | 26 ++++++++++-------
 src/components/views/SubscriptionsCatalog.jsx | 12 +++++---
 src/components/views/Thread.jsx               | 26 ++++++++++-------
 9 files changed, 103 insertions(+), 55 deletions(-)

diff --git a/src/components/modals/ModerationModal.jsx b/src/components/modals/ModerationModal.jsx
index 296b74bc..9188516a 100755
--- a/src/components/modals/ModerationModal.jsx
+++ b/src/components/modals/ModerationModal.jsx
@@ -50,7 +50,8 @@ const ModerationModal = ({ isOpen, closeModal, deletePost }) => {
     if (challengeVerification.challengeSuccess === true) {
         setNewSuccessMessage('Challenge Success');
     } else if (challengeVerification.challengeSuccess === false) {
-      setNewErrorMessage('Challenge Failed', {reason: challengeVerification.reason, errors: challengeVerification.errors});
+      setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
+      console.log('challenge failed', challengeVerification);
     }
   };
 
@@ -116,6 +117,16 @@ const ModerationModal = ({ isOpen, closeModal, deletePost }) => {
       setNewErrorMessage(error.message); console.log(error);
     },
   });
+
+
+  useEffect(() => {
+    if (selectedAddress) {
+      setPublishCommentEditOptions((prevOptions) => ({
+        ...prevOptions,
+        subplebbitAddress: selectedAddress,
+      }));
+    }
+  }, [selectedAddress]);
   
   
   const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions);
diff --git a/src/components/modals/ReplyModal.jsx b/src/components/modals/ReplyModal.jsx
index e185ebac..15edc674 100755
--- a/src/components/modals/ReplyModal.jsx
+++ b/src/components/modals/ReplyModal.jsx
@@ -102,7 +102,8 @@ const ReplyModal = ({ isOpen, closeModal }) => {
       console.log('challenge success');
     }
     else if (challengeVerification.challengeSuccess === false) {
-      setNewErrorMessage('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors});
+      setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
+      console.log('challenge failed', challengeVerification);
     }
   };
 
diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx
index 5a7dea04..e4ff28d1 100755
--- a/src/components/views/All.jsx
+++ b/src/components/views/All.jsx
@@ -287,7 +287,8 @@ const All = () => {
         setNewSuccessMessage('Challenge Success');
     } 
     else if (challengeVerification.challengeSuccess === false) {
-      setNewErrorMessage('Challenge Failed', {reason: challengeVerification.reason, errors: challengeVerification.errors});
+      setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
+      console.log('challenge failed', challengeVerification);
     }
   };
 
@@ -363,8 +364,8 @@ const All = () => {
   const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions);
 
 
-  const handleAuthorDeleteClick = (cid) => {
-    handleOptionClick(cid);
+  const handleAuthorDeleteClick = (comment) => {
+    handleOptionClick(comment.cid);
 
     confirmAlert({
       customUI: ({ onClose }) => {
@@ -378,9 +379,10 @@ const All = () => {
                   onClick={() => {
                     setIsAuthorDelete(true);
                     setIsAuthorEdit(false);
-                    setCommentCid(cid);
                     setPublishCommentEditOptions(prevOptions => ({
                       ...prevOptions,
+                      commentCid: comment.cid,
+                      subplebbitAddress: comment.subplebbitAddress,
                       deleted: true,
                     }));
                     setTriggerPublishCommentEdit(true);
@@ -776,15 +778,17 @@ const All = () => {
                               >
                                 <ul className="post-menu-catalog">
                                   <li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
-                                  {thread.author.shortAddress === account?.author.shortAddress ? (
+                                  {thread.author.address === account?.author.address ||
+                                  thread.author.address === account?.signer.address ? (
                                     <>
                                       <li onClick={() => {handleAuthorEditClick(thread); setSelectedAddress(thread.subplebbitAddress);}}>Edit post</li>
-                                      <li onClick={() => {handleAuthorDeleteClick(thread.cid); setSelectedAddress(thread.subplebbitAddress);}}>Delete post</li>
+                                      <li onClick={() => {handleAuthorDeleteClick(thread); setSelectedAddress(thread.subplebbitAddress);}}>Delete post</li>
                                     </>
                                   ) : null}
                                   {isModerator ? (
                                     <>
-                                      {thread.author.shortAddress === account?.author.shortAddress ? (
+                                      {thread.author.address === account?.author.address ||
+                                      thread.author.address === account?.signer.address ? (
                                         null
                                       ) : (
                                         <li onClick={() => {
@@ -1064,15 +1068,17 @@ const All = () => {
                               >
                                 <ul className="post-menu-catalog">
                                   <li onClick={() => handleOptionClick(reply.cid)}>Hide post</li>
-                                  {reply.author.shortAddress === account?.author.shortAddress ? (
+                                  {reply.author.address === account?.author.address ||
+                                    reply.author.address === account?.signer.address ? (
                                     <>
                                       <li onClick={() => {handleAuthorEditClick(reply); setSelectedAddress(thread.subplebbitAddress);}}>Edit post</li>
-                                      <li onClick={() => {handleAuthorDeleteClick(reply.cid); setSelectedAddress(thread.subplebbitAddress);}}>Delete post</li>
+                                      <li onClick={() => {handleAuthorDeleteClick(reply); setSelectedAddress(thread.subplebbitAddress);}}>Delete post</li>
                                     </>
                                   ) : null}
                                   {isModerator ? (
                                     <>
-                                      {reply.author.shortAddress === account?.author.shortAddress ? (
+                                    {reply.author.address === account?.author.address ||
+                                    reply.author.address === account?.signer.address ? (
                                         null
                                       ) : (
                                         <li onClick={() => {
diff --git a/src/components/views/AllCatalog.jsx b/src/components/views/AllCatalog.jsx
index 515b1104..028000d9 100755
--- a/src/components/views/AllCatalog.jsx
+++ b/src/components/views/AllCatalog.jsx
@@ -149,7 +149,8 @@ const AllCatalog = () => {
         setNewSuccessMessage('Challenge Success');
     } 
     else if (challengeVerification.challengeSuccess === false) {
-      setNewErrorMessage('Challenge Failed', {reason: challengeVerification.reason, errors: challengeVerification.errors});
+      setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
+      console.log('challenge failed', challengeVerification);
     }
   };
 
@@ -232,9 +233,10 @@ const AllCatalog = () => {
                   onClick={() => {
                     setIsAuthorDelete(true);
                     setIsAuthorEdit(false);
-                    setCommentCid(comment.cid);
                     setPublishCommentEditOptions(prevOptions => ({
                       ...prevOptions,
+                      commentCid: comment.cid,
+                      subplebbitAddress: comment.subplebbitAddress,
                       deleted: true,
                     }));
                     setTriggerPublishCommentEdit(true);
@@ -557,7 +559,8 @@ const AllCatalog = () => {
                           >
                             <ul className="post-menu-catalog">
                               <li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
-                              {thread.author.shortAddress === account?.author.shortAddress ? (
+                              {thread.author.address === account?.author.address || 
+                              thread.author.address === account?.signer.address ? (
                                 <>
                                   <li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
                                   <li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
@@ -565,7 +568,8 @@ const AllCatalog = () => {
                               ) : null}
                               {isModerator ? (
                                 <>
-                                  {thread.author.shortAddress === account?.author.shortAddress ? (
+                                  {thread.author.address === account?.author.address || 
+                                  thread.author.address === account?.signer.address ? (
                                     null
                                   ) : (
                                     <li onClick={() => {
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index e6a91ea5..572970d4 100755
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -310,7 +310,8 @@ const Board = () => {
       }
     }
     else if (challengeVerification.challengeSuccess === false) {
-      setNewErrorMessage('Challenge Failed', {reason: challengeVerification.reason, errors: challengeVerification.errors});
+      setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
+      console.log('challenge failed', challengeVerification);
     }
   };
 
@@ -505,8 +506,8 @@ const Board = () => {
   const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions);
 
 
-  const handleAuthorDeleteClick = (cid) => {
-    handleOptionClick(cid);
+  const handleAuthorDeleteClick = (comment) => {
+    handleOptionClick(comment.cid);
 
     confirmAlert({
       customUI: ({ onClose }) => {
@@ -520,9 +521,10 @@ const Board = () => {
                   onClick={() => {
                     setIsAuthorDelete(true);
                     setIsAuthorEdit(false);
-                    setCommentCid(cid);
                     setPublishCommentEditOptions(prevOptions => ({
                       ...prevOptions,
+                      commentCid: comment.cid,
+                      subplebbitAddress: comment.subplebbitAddress,
                       deleted: true,
                     }));
                     setTriggerPublishCommentEdit(true);
@@ -838,7 +840,7 @@ const Board = () => {
             {subplebbit?.state === "failed" ? (
               null
             ) : (
-              subplebbit?.state === "succeeded" ? (
+              feed.length > 0 ? (
                 <>
                   {subplebbit.rules ? 
                     <>
@@ -1421,15 +1423,17 @@ const Board = () => {
                                 >
                                   <ul className="post-menu-catalog">
                                     <li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
-                                    {thread.author.shortAddress === account?.author.shortAddress ? (
+                                    {thread.author.address === account?.author.address || 
+                                    thread.author.address === account?.signer.address ? (
                                       <>
                                         <li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
-                                        <li onClick={() => handleAuthorDeleteClick(thread.cid)}>Delete post</li>
+                                        <li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
                                       </>
                                     ) : null}
                                     {isModerator ? (
                                       <>
-                                        {thread.author.shortAddress === account?.author.shortAddress ? (
+                                        {thread.author.address === account?.author.address ||
+                                         thread.author.address === account?.signer.address ? (
                                           null
                                         ) : (
                                           <li onClick={() => {
@@ -1702,15 +1706,17 @@ const Board = () => {
                                 >
                                   <ul className="post-menu-catalog">
                                     <li onClick={() => handleOptionClick(reply.cid)}>Hide post</li>
-                                    {reply.author.shortAddress === account?.author.shortAddress ? (
+                                    {reply.author.address === account?.author.address ||
+                                    reply.author.address === account?.signer.address ? (
                                       <>
                                         <li onClick={() => handleAuthorEditClick(reply)}>Edit post</li>
-                                        <li onClick={() => handleAuthorDeleteClick(reply.cid)}>Delete post</li>
+                                        <li onClick={() => handleAuthorDeleteClick(reply)}>Delete post</li>
                                       </>
                                     ) : null}
                                     {isModerator ? (
                                       <>
-                                        {reply.author.shortAddress === account?.author.shortAddress ? (
+                                        {reply.author.address === account?.author.address || 
+                                         reply.author.address === account?.signer.address ? (
                                           null
                                         ) : (
                                           <li onClick={() => {
diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx
index bba78daf..633b6427 100755
--- a/src/components/views/Catalog.jsx
+++ b/src/components/views/Catalog.jsx
@@ -195,7 +195,8 @@ const Catalog = () => {
       }
     }
     else if (challengeVerification.challengeSuccess === false) {
-      setNewErrorMessage('Challenge Failed', {reason: challengeVerification.reason, errors: challengeVerification.errors});
+      setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
+      console.log('challenge failed', challengeVerification);
     }
   };
 
@@ -404,9 +405,10 @@ const Catalog = () => {
                   onClick={() => {
                     setIsAuthorDelete(true);
                     setIsAuthorEdit(false);
-                    setCommentCid(comment.cid);
                     setPublishCommentEditOptions(prevOptions => ({
                       ...prevOptions,
+                      commentCid: comment.cid,
+                      subplebbitAddress: comment.subplebbitAddress,
                       deleted: true,
                     }));
                     setTriggerPublishCommentEdit(true);
@@ -1005,7 +1007,8 @@ const Catalog = () => {
                                 >
                                   <ul className="post-menu-catalog">
                                     <li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
-                                    {thread.author.shortAddress === account?.author.shortAddress ? (
+                                    {thread.author.address === account?.author.address || 
+                                    thread.author.address === account?.signer.address ? (
                                       <>
                                         <li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
                                         <li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
@@ -1013,7 +1016,8 @@ const Catalog = () => {
                                     ) : null}
                                     {isModerator ? (
                                       <>
-                                        {thread.author.shortAddress === account?.author.shortAddress ? (
+                                        {thread.author.address === account?.author.address || 
+                                        thread.author.address === account?.signer.address ? (
                                           null
                                         ) : (
                                           <li onClick={() => {
diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx
index c093a71d..8aff1a0c 100755
--- a/src/components/views/Subscriptions.jsx
+++ b/src/components/views/Subscriptions.jsx
@@ -288,7 +288,8 @@ const Subscriptions = () => {
         setNewSuccessMessage('Challenge Success');
     } 
     else if (challengeVerification.challengeSuccess === false) {
-      setNewErrorMessage('Challenge Failed', {reason: challengeVerification.reason, errors: challengeVerification.errors});
+      setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
+      console.log('challenge failed', challengeVerification);
     }
   };
 
@@ -364,8 +365,8 @@ const Subscriptions = () => {
   const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions);
 
 
-  const handleAuthorDeleteClick = (cid) => {
-    handleOptionClick(cid);
+  const handleAuthorDeleteClick = (comment) => {
+    handleOptionClick(comment.cid);
 
     confirmAlert({
       customUI: ({ onClose }) => {
@@ -379,9 +380,10 @@ const Subscriptions = () => {
                   onClick={() => {
                     setIsAuthorDelete(true);
                     setIsAuthorEdit(false);
-                    setCommentCid(cid);
                     setPublishCommentEditOptions(prevOptions => ({
                       ...prevOptions,
+                      commentCid: comment.cid,
+                      subplebbitAddress: comment.subplebbitAddress,
                       deleted: true,
                     }));
                     setTriggerPublishCommentEdit(true);
@@ -786,15 +788,17 @@ const Subscriptions = () => {
                               >
                                 <ul className="post-menu-catalog">
                                   <li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
-                                  {thread.author.shortAddress === account?.author.shortAddress ? (
+                                  {thread.author.address === account?.author.address || 
+                                  thread.author.address === account?.signer.address ? (
                                     <>
                                       <li onClick={() => {handleAuthorEditClick(thread); setSelectedAddress(thread.subplebbitAddress);}}>Edit post</li>
-                                      <li onClick={() => {handleAuthorDeleteClick(thread.cid); setSelectedAddress(thread.subplebbitAddress);}}>Delete post</li>
+                                      <li onClick={() => {handleAuthorDeleteClick(thread); setSelectedAddress(thread.subplebbitAddress);}}>Delete post</li>
                                     </>
                                   ) : null}
                                   {isModerator ? (
                                     <>
-                                      {thread.author.shortAddress === account?.author.shortAddress ? (
+                                      {thread.author.address === account?.author.address || 
+                                      thread.author.address === account?.signer.address ? (
                                         null
                                       ) : (
                                         <li onClick={() => {
@@ -1074,15 +1078,17 @@ const Subscriptions = () => {
                               >
                                 <ul className="post-menu-catalog">
                                   <li onClick={() => handleOptionClick(reply.cid)}>Hide post</li>
-                                  {reply.author.shortAddress === account?.author.shortAddress ? (
+                                  {reply.author.address === account?.author.address || 
+                                  reply.author.address === account?.signer.address ? (
                                     <>
                                       <li onClick={() => {handleAuthorEditClick(reply); setSelectedAddress(thread.subplebbitAddress);}}>Edit post</li>
-                                      <li onClick={() => {handleAuthorDeleteClick(reply.cid); setSelectedAddress(thread.subplebbitAddress);}}>Delete post</li>
+                                      <li onClick={() => {handleAuthorDeleteClick(reply); setSelectedAddress(thread.subplebbitAddress);}}>Delete post</li>
                                     </>
                                   ) : null}
                                   {isModerator ? (
                                     <>
-                                      {reply.author.shortAddress === account?.author.shortAddress ? (
+                                    {reply.author.address === account?.author.address || 
+                                    reply.author.address === account?.signer.address ? (
                                         null
                                       ) : (
                                         <li onClick={() => {
diff --git a/src/components/views/SubscriptionsCatalog.jsx b/src/components/views/SubscriptionsCatalog.jsx
index 7bbb5a3c..037debc3 100755
--- a/src/components/views/SubscriptionsCatalog.jsx
+++ b/src/components/views/SubscriptionsCatalog.jsx
@@ -146,7 +146,8 @@ const SubscriptionsCatalog = () => {
         setNewSuccessMessage('Challenge Success');
     } 
     else if (challengeVerification.challengeSuccess === false) {
-      setNewErrorMessage('Challenge Failed', {reason: challengeVerification.reason, errors: challengeVerification.errors});
+      setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
+      console.log('challenge failed', challengeVerification);
     }
   };
 
@@ -229,9 +230,10 @@ const SubscriptionsCatalog = () => {
                   onClick={() => {
                     setIsAuthorDelete(true);
                     setIsAuthorEdit(false);
-                    setCommentCid(comment.cid);
                     setPublishCommentEditOptions(prevOptions => ({
                       ...prevOptions,
+                      commentCid: comment.cid,
+                      subplebbitAddress: comment.subplebbitAddress,
                       deleted: true,
                     }));
                     setTriggerPublishCommentEdit(true);
@@ -561,7 +563,8 @@ const SubscriptionsCatalog = () => {
                           >
                             <ul className="post-menu-catalog">
                               <li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
-                              {thread.author.shortAddress === account?.author.shortAddress ? (
+                              {thread.author.address === account?.author.address || 
+                              thread.author.address === account?.signer.address ? (
                                 <>
                                   <li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
                                   <li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
@@ -569,7 +572,8 @@ const SubscriptionsCatalog = () => {
                               ) : null}
                               {isModerator ? (
                                 <>
-                                  {thread.author.shortAddress === account?.author.shortAddress ? (
+                                  {thread.author.address === account?.author.address || 
+                                  thread.author.address === account?.signer.address ? (
                                     null
                                   ) : (
                                     <li onClick={() => {
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index 708a73e0..bd3a2f17 100755
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -267,7 +267,8 @@ const Thread = () => {
         setNewSuccessMessage('Challenge Success');
       }
     } else if (challengeVerification.challengeSuccess === false) {
-      setNewErrorMessage('Challenge Failed', {reason: challengeVerification.reason, errors: challengeVerification.errors});
+      setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
+      console.log('challenge failed', challengeVerification);
     }
   };
 
@@ -462,8 +463,8 @@ const Thread = () => {
   const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions);
 
 
-  const handleAuthorDeleteClick = (cid) => {
-    handleOptionClick(cid);
+  const handleAuthorDeleteClick = (comment) => {
+    handleOptionClick(comment.cid);
 
     confirmAlert({
       customUI: ({ onClose }) => {
@@ -477,9 +478,10 @@ const Thread = () => {
                   onClick={() => {
                     setIsAuthorDelete(true);
                     setIsAuthorEdit(false);
-                    setCommentCid(cid);
                     setPublishCommentEditOptions(prevOptions => ({
                       ...prevOptions,
+                      commentCid: comment.cid,
+                      subplebbitAddress: comment.subplebbitAddress,
                       deleted: true,
                     }));
                     setTriggerPublishCommentEdit(true);
@@ -948,15 +950,17 @@ const Thread = () => {
                           >
                             <ul className="post-menu-catalog">
                               <li onClick={() => handleOptionClick(comment.cid)}>Hide thread</li>
-                              {comment.author?.shortAddress === account?.author.shortAddress ? (
+                                {comment.author.address === account?.author.address || 
+                                comment.author.address === account?.signer.address ? (
                                 <>
                                   <li onClick={() => handleAuthorEditClick(comment)}>Edit post</li>
-                                  <li onClick={() => handleAuthorDeleteClick(comment.cid)}>Delete post</li>
+                                  <li onClick={() => handleAuthorDeleteClick(comment)}>Delete post</li>
                                 </>
                               ) : null}
                               {isModerator ? (
                                 <>
-                                  {comment.author?.shortAddress === account?.author.shortAddress ? (
+                                  {comment.author.address === account?.author.address || 
+                                    comment.author.address === account?.signer.address ? (
                                     null
                                   ) : (
                                     <li onClick={() => {
@@ -1194,15 +1198,17 @@ const Thread = () => {
                               >
                                 <ul className="post-menu-catalog">
                                   <li onClick={() => handleOptionClick(reply.cid)}>Hide post</li>
-                                  {reply.author.shortAddress === account?.author.shortAddress ? (
+                                    {reply.author.address === account?.author.address ||
+                                    reply.author.address === account?.signer.address ? (
                                     <>
                                       <li onClick={() => handleAuthorEditClick(reply)}>Edit post</li>
-                                      <li onClick={() => handleAuthorDeleteClick(reply.cid)}>Delete post</li>
+                                      <li onClick={() => handleAuthorDeleteClick(reply)}>Delete post</li>
                                     </>
                                   ) : null}
                                   {isModerator ? (
                                     <>
-                                      {reply.author.shortAddress === account?.author.shortAddress ? (
+                                    {reply.author.address === account?.author.address ||
+                                    reply.author.address === account?.signer.address ? (
                                         null
                                       ) : (
                                         <li onClick={() => {

From 7a9a31a7ed9a2e9318bb9636614ab21e5352ce0d Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Mon, 3 Jul 2023 08:53:54 +0200
Subject: [PATCH 04/15] fix undefined

---
 src/components/views/Thread.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index bd3a2f17..b134cec7 100755
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -950,8 +950,8 @@ const Thread = () => {
                           >
                             <ul className="post-menu-catalog">
                               <li onClick={() => handleOptionClick(comment.cid)}>Hide thread</li>
-                                {comment.author.address === account?.author.address || 
-                                comment.author.address === account?.signer.address ? (
+                                {comment.author?.address === account?.author.address || 
+                                comment.author?.address === account?.signer.address ? (
                                 <>
                                   <li onClick={() => handleAuthorEditClick(comment)}>Edit post</li>
                                   <li onClick={() => handleAuthorDeleteClick(comment)}>Delete post</li>
@@ -959,8 +959,8 @@ const Thread = () => {
                               ) : null}
                               {isModerator ? (
                                 <>
-                                  {comment.author.address === account?.author.address || 
-                                    comment.author.address === account?.signer.address ? (
+                                  {comment.author?.address === account?.author.address || 
+                                    comment.author?.address === account?.signer.address ? (
                                     null
                                   ) : (
                                     <li onClick={() => {

From ee0788a90a86072f7d96bf219b91771c2c60fd9d Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Mon, 3 Jul 2023 15:42:34 +0200
Subject: [PATCH 05/15] add exposed flag for the electron client

---
 electron/preload.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/electron/preload.js b/electron/preload.js
index ee5de106..80bf9917 100644
--- a/electron/preload.js
+++ b/electron/preload.js
@@ -38,6 +38,9 @@ const defaultPlebbitOptions = {
   ipfsGatewayUrls: ['http://localhost:11028'] || undefined,
 };
 
+// expose a flag to indicate that we are running in electron
+contextBridge.exposeInMainWorld('electron', { isElectron: true });
+
 // expose plebbit-js native functions into electron's renderer
 contextBridge.exposeInMainWorld('plebbitJsNativeFunctions', require('@plebbit/plebbit-js').nativeFunctions.node)
 contextBridge.exposeInMainWorld('defaultPlebbitOptions', defaultPlebbitOptions)
@@ -47,4 +50,4 @@ try {
   if (isDev) localStorage.debug = 'plebbit-js:*,plebbit-react-hooks:*,plebchan:*';
 } catch (e) {
   console.log(e);
-}
+}
\ No newline at end of file

From e9377ae1aab3bd944698bf080ef04b1dd788356b Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Tue, 4 Jul 2023 13:42:19 +0200
Subject: [PATCH 06/15] add link to node stats in the settings

---
 electron/main.js                              | 42 ++++++++++---------
 src/components/modals/SettingsModal.jsx       |  8 +++-
 .../styled/modals/SettingsModal.styled.jsx    |  4 ++
 3 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/electron/main.js b/electron/main.js
index 69d1620b..66083c3c 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -117,15 +117,18 @@ const createMainWindow = () => {
         // only open valid https urls to prevent remote execution
         // will throw if url isn't valid
         const validatedUrl = new URL(originalUrl);
-        if (validatedUrl.protocol !== 'https:') {
-          throw Error(`can't open url '${originalUrl}' not https`);
+        let serializedUrl = '';
+
+        // make an exception for ipfs stats
+        if (validatedUrl.toString() === 'http://localhost:5001/webui/') {
+          serializedUrl = validatedUrl.toString();
+        } else if (validatedUrl.protocol === 'https:') {
+          // open serialized url to prevent remote execution
+          serializedUrl = validatedUrl.toString();
+        } else {
+          throw Error(`can't open url '${originalUrl}', it's not https and not the allowed http exception`);
         }
 
-        // do not open http protocol, not private
-        // do not open any other protocol, will lead to remote execution
-
-        // open serialized url to prevent remote execution
-        const serializedUrl = validatedUrl.toString();
         shell.openExternal(serializedUrl);
       } catch (e) {
         console.warn(e);
@@ -136,7 +139,7 @@ const createMainWindow = () => {
   // open links (with target="_blank") in external browser
   // do not open links in plebchan or will lead to remote execution
   mainWindow.webContents.setWindowOpenHandler(({url}) => {
-    const originalUrl = url
+    const originalUrl = url;
     try {
       // do not let the user open any url with shell.openExternal
       // or it will lead to remote execution https://benjamin-altpeter.de/shell-openexternal-dangers/
@@ -144,25 +147,26 @@ const createMainWindow = () => {
       // only open valid https urls to prevent remote execution
       // will throw if url isn't valid
       const validatedUrl = new URL(originalUrl);
-      if (validatedUrl.protocol !== 'https:') {
-        throw Error(`can't open url '${originalUrl}' not https`);
+      let serializedUrl = '';
+
+      // make an exception for ipfs stats
+      if (validatedUrl.toString() === 'http://localhost:5001/webui/') {
+        serializedUrl = validatedUrl.toString();
+      } else if (validatedUrl.protocol === 'https:') {
+        // open serialized url to prevent remote execution
+        serializedUrl = validatedUrl.toString();
+      } else {
+        throw Error(`can't open url '${originalUrl}', it's not https and not the allowed http exception`);
       }
 
-      // do not open http protocol, not private
-      // do not open any other protocol, will lead to remote execution
-
-      // open serialized url to prevent remote execution
-      const serializedUrl = validatedUrl.toString();
       shell.openExternal(serializedUrl);
-      setImmediate(() => {
-        shell.openExternal(serializedUrl)
-      })
     } catch (e) {
       console.warn(e);
     }
-    return {action: 'deny'}
+    return {action: 'deny'};
   })
 
+
   // deny permissions like location, notifications, etc https://www.electronjs.org/docs/latest/tutorial/security#5-handle-session-permission-requests-from-remote-content
   mainWindow.webContents.session.setPermissionRequestHandler((webContents, permission, callback) => {
     // deny all permissions
diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx
index 844e42ed..144e847d 100755
--- a/src/components/modals/SettingsModal.jsx
+++ b/src/components/modals/SettingsModal.jsx
@@ -223,7 +223,13 @@ const SettingsModal = ({ isOpen, closeModal }) => {
       <div className="panel">
         <div className="panel-header">
           <span id="version">
-            v{version}
+            v{version} -&nbsp;
+            {window.electron && window.electron.isElectron ? (
+              <Link className="all-button" id="node-stats" to="http://localhost:5001/webui/" target="_blank" rel="noreferrer">
+                full node
+              </Link>
+              ) : (<span>web</span>)
+            }
           </span>
           Settings
           <Link to="" onClick={handleCloseModal}>
diff --git a/src/components/styled/modals/SettingsModal.styled.jsx b/src/components/styled/modals/SettingsModal.styled.jsx
index 094a4b5e..806afb47 100644
--- a/src/components/styled/modals/SettingsModal.styled.jsx
+++ b/src/components/styled/modals/SettingsModal.styled.jsx
@@ -417,4 +417,8 @@ export const StyledModal = styled(Modal)`
           return '';
       }
   }}
+
+  #node-stats {
+    text-decoration: none;
+  }
 `;
\ No newline at end of file

From 17708274a6e86ca169f4d508711c3eb51190b162 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Tue, 4 Jul 2023 13:50:21 +0200
Subject: [PATCH 07/15] remove log

---
 src/components/modals/ReplyModal.jsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/modals/ReplyModal.jsx b/src/components/modals/ReplyModal.jsx
index 15edc674..7a72c837 100755
--- a/src/components/modals/ReplyModal.jsx
+++ b/src/components/modals/ReplyModal.jsx
@@ -99,9 +99,8 @@ const ReplyModal = ({ isOpen, closeModal }) => {
 
   const onChallengeVerification = (challengeVerification) => {
     if (challengeVerification.challengeSuccess === true) {
-      console.log('challenge success');
-    }
-    else if (challengeVerification.challengeSuccess === false) {
+      return;
+    } else if (challengeVerification.challengeSuccess === false) {
       setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
       console.log('challenge failed', challengeVerification);
     }

From 02ce0a5474baa10c9056b63abcc250d0276e3a27 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Thu, 6 Jul 2023 10:33:01 +0200
Subject: [PATCH 08/15] fix yotsuba b

---
 src/components/styled/views/Board.styled.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/styled/views/Board.styled.jsx b/src/components/styled/views/Board.styled.jsx
index f3ef6856..81c3b8c4 100644
--- a/src/components/styled/views/Board.styled.jsx
+++ b/src/components/styled/views/Board.styled.jsx
@@ -267,7 +267,7 @@ export const Header = styled.div`
         clear: both;
 
         .banner {
-          border: 1px solid #800;
+          border: 1px solid #34345c;
           margin: 5px auto;
           width: 300px;
           height: 100px;

From 87fcc80898916a8de1e34cd1c3ece1b75cc4cb83 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Thu, 6 Jul 2023 13:14:20 +0200
Subject: [PATCH 09/15] fix loading state of empty feed

---
 src/components/views/All.jsx                  |  6 +++---
 src/components/views/AllCatalog.jsx           |  4 ++--
 src/components/views/Board.jsx                |  6 +++---
 src/components/views/Catalog.jsx              |  4 ++--
 src/components/views/Subscriptions.jsx        | 14 +++++++-------
 src/components/views/SubscriptionsCatalog.jsx |  6 +++---
 6 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx
index e4ff28d1..a4a4a254 100755
--- a/src/components/views/All.jsx
+++ b/src/components/views/All.jsx
@@ -585,7 +585,7 @@ const All = () => {
             <Link to={`/p/all/catalog`}>Catalog</Link>
             ]
           </div>
-          {feed.length > 0 ? (
+          {feed ? (
             null
           ) : (
             <div id="stats" style={{float: "right", marginTop: "5px"}}>
@@ -601,7 +601,7 @@ const All = () => {
         <Tooltip id="tooltip" className="tooltip" />
         <BoardForm selectedStyle={selectedStyle}>
           <div className="board">
-            {feed.length > 0 ? (
+            {feed ? (
               <Virtuoso
                 increaseViewportBy={2000}
                 data={selectedFeed}
@@ -2068,7 +2068,7 @@ const All = () => {
                 }}
                 endReached={tryLoadMore}
                 useWindowScroll={true}
-                components={{ Footer: hasMore ? () => <PostLoader /> : null }}
+                components={{ Footer: hasMore && feed ? () => <PostLoader /> : null }}
               />
             ) : (
               <PostLoader />
diff --git a/src/components/views/AllCatalog.jsx b/src/components/views/AllCatalog.jsx
index 028000d9..cf9b5a63 100755
--- a/src/components/views/AllCatalog.jsx
+++ b/src/components/views/AllCatalog.jsx
@@ -442,7 +442,7 @@ const AllCatalog = () => {
               <Link to={`/p/all`}>Return</Link>
             </span>
           </div>
-          {feed.length > 0 ? (
+          {feed ? (
             null
           ) : (
             <div id="stats" style={{float: "right", marginTop: "5px"}}>
@@ -453,7 +453,7 @@ const AllCatalog = () => {
         </TopBar>
         <Tooltip id="tooltip" className="tooltip" />
         <Threads selectedStyle={selectedStyle}>
-          {feed.length > 0 ? (
+          {feed ? (
             <InfiniteScroll
             pageStart={0}
             loadMore={tryLoadMore}
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index 572970d4..5d1bdc81 100755
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -806,7 +806,7 @@ const Board = () => {
             <Link to={`/p/${selectedAddress}/catalog`} onClick={()=> {window.scrollTo(0, 0)}}>Catalog</Link>
             ]
           </div>
-          {feed.length > 0 ? (
+          {subplebbit?.state === "succeeded" ? (
             <>
               <span className="subscribe-button-desktop">
                 [
@@ -840,7 +840,7 @@ const Board = () => {
             {subplebbit?.state === "failed" ? (
               null
             ) : (
-              feed.length > 0 ? (
+              feed ? (
                 <>
                   {subplebbit.rules ? 
                     <>
@@ -2685,7 +2685,7 @@ const Board = () => {
                   }}
                   endReached={tryLoadMore}
                   useWindowScroll={true}
-                  components={{ Footer: hasMore && feed.length > 0 ? () => <PostLoader /> : null }}
+                  components={{ Footer: hasMore && feed ? () => <PostLoader /> : null }}
                   />
                 </>
               ) : (<PostLoader />)
diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx
index 633b6427..8702120b 100755
--- a/src/components/views/Catalog.jsx
+++ b/src/components/views/Catalog.jsx
@@ -665,7 +665,7 @@ const Catalog = () => {
             <Link to={`/p/${selectedAddress}`} onClick={()=> {window.scrollTo(0, 0)}}>Return</Link>
             ]
           </div>
-          {feed.length > 0 ? (
+          {feed ? (
             <>
               <span className="subscribe-button-desktop">
                 [
@@ -699,7 +699,7 @@ const Catalog = () => {
           {subplebbit?.state === "failed" ? (
             null
           ) : (
-            feed.length > 0 ? (
+            feed ? (
                 <InfiniteScroll
                   pageStart={0}
                   loadMore={tryLoadMore}
diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx
index 8aff1a0c..867a11a0 100755
--- a/src/components/views/Subscriptions.jsx
+++ b/src/components/views/Subscriptions.jsx
@@ -408,9 +408,9 @@ const Subscriptions = () => {
     setCommentCid(comment.cid);
     setOriginalCommentContent(comment.content);
     setIsEditModalOpen(true);
-  }
-  
-  
+  };
+
+
   useEffect(() => {
     setPublishCommentEditOptions((prevOptions) => ({
       ...prevOptions,
@@ -563,7 +563,7 @@ const Subscriptions = () => {
             </div>
               <>
               <div className="board-title">Subscriptions</div>
-              {feed.length < 1 ? (
+              {account.subscriptions.length < 1 ? (
                 <div className="board-address">You haven't subscribed to any board yet.</div>
               ) : (
                 <div className="board-address">
@@ -593,7 +593,7 @@ const Subscriptions = () => {
             <Link to={`/p/subscriptions/catalog`}>Catalog</Link>
             ]
           </div>
-          {feed.length > 0 ? (
+          {feed ? (
             null
           ) : (
             <div id="stats" style={{float: "right", marginTop: "5px"}}>
@@ -609,7 +609,7 @@ const Subscriptions = () => {
         <Tooltip id="tooltip" className="tooltip" />
         <BoardForm selectedStyle={selectedStyle}>
           <div className="board">
-            { feed.length < 1 ? (
+            { feed ? (
               null
             ) : (
               <Virtuoso
@@ -2078,7 +2078,7 @@ const Subscriptions = () => {
                 }}
                 endReached={tryLoadMore}
                 useWindowScroll={true}
-                components={{ Footer: hasMore ? () => <PostLoader /> : null }}
+                components={{ Footer: hasMore && feed ? () => <PostLoader /> : null }}
               />
             )}
           </div>
diff --git a/src/components/views/SubscriptionsCatalog.jsx b/src/components/views/SubscriptionsCatalog.jsx
index 037debc3..539f45e0 100755
--- a/src/components/views/SubscriptionsCatalog.jsx
+++ b/src/components/views/SubscriptionsCatalog.jsx
@@ -411,7 +411,7 @@ const SubscriptionsCatalog = () => {
             </div>
               <>
               <div className="board-title">Subscriptions</div>
-              {feed.length < 1 ? (
+              {account.subscriptions.length < 1 ? (
                 <div className="board-address">You haven't subscribed to any board yet.</div>
               ) : (
                 <div className="board-address">
@@ -446,7 +446,7 @@ const SubscriptionsCatalog = () => {
               <Link to={`/p/subscriptions`}>Return</Link>
             </span>
           </div>
-          {feed.length > 0 ? (
+          {feed ? (
             null
           ) : (
             <div id="stats" style={{float: "right", marginTop: "5px"}}>
@@ -457,7 +457,7 @@ const SubscriptionsCatalog = () => {
         </TopBar>
         <Tooltip id="tooltip" className="tooltip" />
         <Threads selectedStyle={selectedStyle}>
-          {feed.length > 0 ? (
+          {feed ? (
             <InfiniteScroll
             pageStart={0}
             loadMore={tryLoadMore}

From 97fb0de9bf04fb7e620e5baf942f8ac755a80d10 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Thu, 6 Jul 2023 21:59:53 +0200
Subject: [PATCH 10/15] Update Subscriptions.jsx

---
 src/components/views/Subscriptions.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx
index 867a11a0..714a72fb 100755
--- a/src/components/views/Subscriptions.jsx
+++ b/src/components/views/Subscriptions.jsx
@@ -563,11 +563,11 @@ const Subscriptions = () => {
             </div>
               <>
               <div className="board-title">Subscriptions</div>
-              {account.subscriptions.length < 1 ? (
+              {account?.subscriptions.length < 1 ? (
                 <div className="board-address">You haven't subscribed to any board yet.</div>
               ) : (
                 <div className="board-address">
-                  You have subscribed to {account.subscriptions.length} board{account.subscriptions.length > 1 ? "s" : null}.
+                  You have subscribed to {account?.subscriptions.length} board{account?.subscriptions.length > 1 ? "s" : null}.
                 </div>
               )}
               </>
@@ -609,7 +609,7 @@ const Subscriptions = () => {
         <Tooltip id="tooltip" className="tooltip" />
         <BoardForm selectedStyle={selectedStyle}>
           <div className="board">
-            { feed ? (
+            { !feed ? (
               null
             ) : (
               <Virtuoso

From 106c865b8228bb636fa2d7fb6bb8e1bed70ed761 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Fri, 7 Jul 2023 17:48:24 +0200
Subject: [PATCH 11/15] add embeds: youtube, odysee, bitchute, streamable

---
 src/components/modals/ReplyModal.jsx          |   6 +-
 src/components/styled/views/Board.styled.jsx  |  12 +-
 src/components/styled/views/Thread.styled.jsx |  10 +-
 src/components/views/All.jsx                  | 289 ++++++++++++-----
 src/components/views/Board.jsx                | 153 ++++++++-
 src/components/views/Pending.jsx              | 293 ++++++++++++++----
 src/components/views/Subscriptions.jsx        | 290 ++++++++++++-----
 src/components/views/Thread.jsx               | 263 ++++++++++++----
 src/utils/getCommentMediaInfo.js              |  96 ++++--
 9 files changed, 1076 insertions(+), 336 deletions(-)

diff --git a/src/components/modals/ReplyModal.jsx b/src/components/modals/ReplyModal.jsx
index 7a72c837..96fb2235 100755
--- a/src/components/modals/ReplyModal.jsx
+++ b/src/components/modals/ReplyModal.jsx
@@ -229,8 +229,10 @@ const ReplyModal = ({ isOpen, closeModal }) => {
   }, [selectedParentCid, anonymousMode, account]);
   
   useEffect(() => {
-    updateSigner();
-  }, [updateSigner]);
+    if (anonymousMode) {
+      updateSigner();
+    }
+  }, [updateSigner, anonymousMode]);
   
   
   useEffect(() => {
diff --git a/src/components/styled/views/Board.styled.jsx b/src/components/styled/views/Board.styled.jsx
index 81c3b8c4..c2cb1312 100644
--- a/src/components/styled/views/Board.styled.jsx
+++ b/src/components/styled/views/Board.styled.jsx
@@ -2016,6 +2016,16 @@ export const BoardForm = styled.div`
       }
 
       video {
+        width: 100%;
+        height: auto;
+      }
+
+      iframe {
+        width: 100%;
+        height: auto;
+      }
+
+      #video-thumbnail-mobile {
         width: 100px;
       }
   
@@ -3804,7 +3814,7 @@ export const BoardForm = styled.div`
                 color: #707070;
                 font-weight: 700;
                 background-color: rgb(27,28,30);
-                border: 1px solid #282A2E;
+                border: 1px solid #2D2F33;
                 background-image: url(assets/buttonfade-dark.png);
                 background-repeat: repeat-x;
                 text-decoration: none;
diff --git a/src/components/styled/views/Thread.styled.jsx b/src/components/styled/views/Thread.styled.jsx
index 6c1f8cc2..09b9c343 100644
--- a/src/components/styled/views/Thread.styled.jsx
+++ b/src/components/styled/views/Thread.styled.jsx
@@ -1193,7 +1193,13 @@ export const BoardForm = styled.div`
       }
 
       video {
-        width: 100px;
+        width: 100%;
+        height: auto;
+      }
+
+      iframe {
+        width: 100%;
+        height: auto;
       }
   
       img {
@@ -2932,7 +2938,7 @@ export const BoardForm = styled.div`
                 color: #707070;
                 font-weight: 700;
                 background-color: rgb(27,28,30);
-                border: 1px solid #282A2E;
+                border: 1px solid #2D2F33;
                 background-image: url(assets/buttonfade-dark.png);
                 background-repeat: repeat-x;
                 text-decoration: none;
diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx
index a4a4a254..27f960b3 100755
--- a/src/components/views/All.jsx
+++ b/src/components/views/All.jsx
@@ -102,6 +102,8 @@ const All = () => {
   const [moderatorPermissions, setModeratorPermissions] = useState({});
   const [executeAnonMode, setExecuteAnonMode] = useState(false);
   const [cidTracker, setCidTracker] = useState({});
+  const [isThumbnailClicked, setIsThumbnailClicked] = useState({});
+  const [isMobileThumbnailClicked, setIsMobileThumbnailClicked] = useState({});
 
   const setSelectedThreadCid = (cid) => {
     selectedThreadCidRef.current = cid;
@@ -117,6 +119,20 @@ const All = () => {
   const stateString = useFeedStateString(subplebbits);
   
 
+  const handleThumbnailClick = (index, isMobile=false) => {
+    if (isMobile) {
+      setIsMobileThumbnailClicked(prevState => ({
+        ...prevState,
+        [index]: !prevState[index],
+      }));
+    } else {
+      setIsThumbnailClicked(prevState => ({
+        ...prevState,
+        [index]: !prevState[index],
+      }));
+    }
+  };
+
   useEffect(() => {
     let permissions = {};
   
@@ -618,56 +634,110 @@ const All = () => {
                         <hr key={`hr-${index}`} />
                         <div key={`pi-${index}`} className="post-info">
                         {commentMediaInfo?.url ? (
-                          <div key={`f-${index}`} className="file" style={{marginBottom: "5px"}}>
-                            <div key={`ft-${index}`} className="file-text">
-                              Link:&nbsp;
-                              <a key={`fa-${index}`} href={commentMediaInfo.url} target="_blank"
-                              rel="noopener noreferrer">{
-                              commentMediaInfo?.url.length > 30 ?
-                              commentMediaInfo?.url.slice(0, 30) + "(...)" :
-                              commentMediaInfo?.url
-                              }</a>&nbsp;({commentMediaInfo?.type})
-                            </div>
-                            {commentMediaInfo?.type === "webpage" ? (
-                              <div key={`enlarge-${index}`} className="img-container">
-                                <span key={`fta-${index}`} className="file-thumb">
-                                  {thread.thumbnailUrl ? (
+                            <div key={`f-${index}`} className="file" style={{marginBottom: "5px"}}>
+                              <div key={`ft-${index}`} className="file-text">
+                                Link:&nbsp;
+                                <a key={`fa-${index}`} href={commentMediaInfo.url} target="_blank"
+                                rel="noopener noreferrer">{
+                                commentMediaInfo?.url.length > 30 ?
+                                commentMediaInfo?.url.slice(0, 30) + "(...)" :
+                                commentMediaInfo?.url
+                                }</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type})
+                                {isThumbnailClicked[index] ? (
+                                  <span>
+                                    -[
+                                      <span className='reply-link' 
+                                      style={{textDecoration: 'underline', cursor: 'pointer'}}
+                                      onClick={() => {handleThumbnailClick(index)}}>Close</span>
+                                    ]
+                                  </span>
+                                ) : null}
+                              </div>
+                              {commentMediaInfo?.type === 'iframe' && (
+                                <div key={`enlarge-${index}`}
+                                className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}>
+                                  <span key={`fta-${index}`} className="file-thumb">
+                                    {(isThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
+                                      <iframe 
+                                        className='enlarged'
+                                        key={`fti-${index}`} 
+                                        src={commentMediaInfo.embedUrl}
+                                        width={commentMediaInfo.thumbnail ? "560" : "250"} 
+                                        height="315"
+                                        style={{border: "none"}}
+                                        title="Embedded content"
+                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                                        allowFullScreen />
+                                    ) : (
+                                      <img 
+                                        key={`fti-${index}`}
+                                        src={commentMediaInfo.thumbnail} 
+                                        alt="thumbnail"
+                                        onClick={() => {handleThumbnailClick(index)}}
+                                        style={{cursor: "pointer"}}
+                                        onError={(e) => e.target.src = fallbackImgUrl} />
+                                    )}
+                                  </span>
+                                </div>
+                              )}
+                              {commentMediaInfo?.type === "webpage" ? (
+                                <div key={`enlarge-${index}`} className="img-container">
+                                  <span key={`fta-${index}`} className="file-thumb">
+                                    {thread.thumbnailUrl ? (
+                                      <img key={`fti-${index}`} 
+                                      src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
+                                      onClick={handleImageClick}
+                                      style={{cursor: "pointer"}}
+                                      onError={(e) => e.target.src = fallbackImgUrl} />
+                                    ) : null}
+                                  </span>
+                                </div>
+                              ) : null}
+                              {commentMediaInfo?.type === "image" ? (
+                                <div key={`enlarge-${index}`} className="img-container">
+                                  <span key={`fta-${index}`} className="file-thumb">
                                     <img key={`fti-${index}`} 
-                                    src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
+                                    src={commentMediaInfo.url} alt={commentMediaInfo.type}
                                     onClick={handleImageClick}
                                     style={{cursor: "pointer"}}
                                     onError={(e) => e.target.src = fallbackImgUrl} />
-                                  ) : null}
+                                  </span>
+                                </div>
+                              ) : null}
+                              {commentMediaInfo?.type === "video" ? (
+                              <div key={`enlarge-${index}`} className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}>
+                                <span key={`fta-${index}`} className="file-thumb">
+                                  {isThumbnailClicked[index] ? (
+                                    <video 
+                                      className='enlarged'
+                                      key={`fti-${index}`} 
+                                      src={commentMediaInfo.url} 
+                                      controls
+                                      style={{cursor: "pointer"}}
+                                      onError={(e) => e.target.src = fallbackImgUrl} 
+                                    />
+                                  ) : (
+                                    <video 
+                                      key={`fti-${index}`}
+                                      src={commentMediaInfo.url} 
+                                      alt="thumbnail"
+                                      onClick={() => {handleThumbnailClick(index)}}
+                                      style={{cursor: "pointer"}}
+                                      onError={(e) => e.target.src = fallbackImgUrl} 
+                                    />
+                                  )}
                                 </span>
                               </div>
-                            ) : null}
-                            {commentMediaInfo?.type === "image" ? (
-                              <div key={`enlarge-${index}`} className="img-container">
+                              ) : null}
+                              {commentMediaInfo?.type === "audio" ? (
                                 <span key={`fta-${index}`} className="file-thumb">
-                                  <img key={`fti-${index}`} 
+                                  <audio controls key={`fti-${index}`} 
                                   src={commentMediaInfo.url} alt={commentMediaInfo.type}
-                                  onClick={handleImageClick}
-                                  style={{cursor: "pointer"}}
                                   onError={(e) => e.target.src = fallbackImgUrl} />
                                 </span>
-                              </div>
-                            ) : null}
-                            {commentMediaInfo?.type === "video" ? (
-                              <span key={`fta-${index}`} className="file-thumb">
-                                <video controls width="" key={`fti-${index}`} 
-                                src={commentMediaInfo.url} alt={commentMediaInfo.type}
-                                onError={(e) => e.target.src = fallbackImgUrl} />
-                              </span>
-                            ) : null}
-                            {commentMediaInfo?.type === "audio" ? (
-                              <span key={`fta-${index}`} className="file-thumb">
-                                <audio controls key={`fti-${index}`} 
-                                src={commentMediaInfo.url} alt={commentMediaInfo.type}
-                                onError={(e) => e.target.src = fallbackImgUrl} />
-                              </span>
-                            ) : null}
-                          </div>
-                        ) : null}
+                              ) : null}
+                            </div>
+                          ) : null}
                           <span key={`nb-${index}`} className="name-block">
                             {thread.title ? (
                               thread.title.length > 75 ?
@@ -1562,51 +1632,108 @@ const All = () => {
                           </span>
                         </div>
                         {thread.link ? (
-                          <div key={`mob-f-${index}`} className="file-mobile">
-                              {commentMediaInfo?.url ? (
-                                commentMediaInfo.type === "webpage" ? (
-                                  <div key={`enlarge-mob-${index}`} className="img-container">
-                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
-                                      {thread.thumbnailUrl ? (
+                            <div key={`mob-f-${index}`} className="file-mobile">
+                              {commentMediaInfo?.type === 'iframe' && (
+                                <div key={`enlarge-mob-${index}`} className="img-container">
+                                  <span key={`mob-fta-${index}`} className="file-thumb-mobile">
+                                    {(isMobileThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
+                                      <div style={{width: "92vw"}}>
+                                        <iframe 
+                                          key={`mob-fti-${index}`} 
+                                          src={commentMediaInfo.embedUrl}
+                                          style={{border: "none", height: "250px"}}
+                                          title="Embedded content"
+                                          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                                          allowFullScreen />
+                                      </div>
+                                    ) : (
+                                      <img 
+                                        key={`mob-fti-${index}`}
+                                        src={commentMediaInfo.thumbnail} 
+                                        alt="thumbnail"
+                                        onClick={() => {handleThumbnailClick(index, true)}}
+                                        style={{cursor: "pointer"}}
+                                        onError={(e) => e.target.src = fallbackImgUrl} />
+                                    )}
+                                    {commentMediaInfo?.type === "video" || "iframe" ? (
+                                      isMobileThumbnailClicked[index] ? (
+                                        <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
+                                          <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
+                                          onClick={() => {handleThumbnailClick(index, true)}}
+                                          >Close</span>
+                                        </div>
+                                      ) : (
+                                        <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
+                                    )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
+                                  </span>
+                                </div>
+                              )}
+                                {commentMediaInfo?.url ? (
+                                  commentMediaInfo.type === "webpage" ? (
+                                    <div key={`enlarge-mob-${index}`} className="img-container">
+                                      <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
+                                        {thread.thumbnailUrl ? (
+                                          <img key={`mob-img-${index}`} 
+                                          src={commentMediaInfo.thumbnail} alt="thumbnail" 
+                                          onClick={handleImageClick}
+                                          style={{cursor: "pointer"}}
+                                          onError={(e) => e.target.src = fallbackImgUrl} />
+                                        ) : null}
+                                        <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                      </span>
+                                    </div>
+                                  ) : commentMediaInfo.type === "image" ? (
+                                    <div key={`enlarge-mob-${index}`} className="img-container">
+                                      <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
                                         <img key={`mob-img-${index}`} 
-                                        src={commentMediaInfo.thumbnail} alt="thumbnail" 
+                                        src={commentMediaInfo.url} alt={commentMediaInfo.type} 
                                         onClick={handleImageClick}
                                         style={{cursor: "pointer"}}
                                         onError={(e) => e.target.src = fallbackImgUrl} />
-                                      ) : null}
-                                      <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
-                                    </span>
-                                  </div>
-                                ) : commentMediaInfo.type === "image" ? (
-                                  <div key={`enlarge-mob-${index}`} className="img-container">
-                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
-                                      <img key={`mob-img-${index}`} 
-                                      src={commentMediaInfo.url} alt={commentMediaInfo.type} 
-                                      onClick={handleImageClick}
-                                      style={{cursor: "pointer"}}
-                                      onError={(e) => e.target.src = fallbackImgUrl} />
-                                      <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
-                                    </span>
-                                  </div>
-                                ) : commentMediaInfo.type === "video" ? (
-                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
-                                      <video key={`fti-${index}`} 
-                                      src={commentMediaInfo.url} alt={commentMediaInfo.type}
-                                      style={{ pointerEvents: "none" }} 
-                                      onError={(e) => e.target.src = fallbackImgUrl} />
-                                      <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
-                                    </span>
-                                ) : commentMediaInfo.type === "audio" ? (
-                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
-                                      <audio key={`mob-img-${index}`} 
-                                      src={commentMediaInfo.url} alt={commentMediaInfo.type} 
-                                      onError={(e) => e.target.src = fallbackImgUrl} />
-                                      <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
-                                    </span>
-                                ) : null
-                              ) : null}
-                          </div>
-                        ) : null}
+                                        <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                      </span>
+                                    </div>
+                                  ) : commentMediaInfo.type === "video" ? (
+                                      <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
+                                        {isMobileThumbnailClicked[index] ? (
+                                          <video key={`fti-${index}`} 
+                                          src={commentMediaInfo.url} alt={commentMediaInfo.type}
+                                          controls
+                                          style={{ cursor: 'pointer' }} 
+                                          onError={(e) => e.target.src = fallbackImgUrl} />
+                                        ) : (
+                                          <video 
+                                            key={`fti-${index}`}
+                                            src={commentMediaInfo.url} 
+                                            alt="thumbnail"
+                                            onClick={() => {handleThumbnailClick(index, true)}}
+                                            style={{cursor: "pointer"}}
+                                            id="video-thumbnail-mobile"
+                                            onError={(e) => e.target.src = fallbackImgUrl} 
+                                          />
+                                        )}
+                                        {commentMediaInfo?.type === "video" || "iframe" ? (
+                                          isMobileThumbnailClicked[index] ? (
+                                            <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
+                                              <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
+                                              onClick={() => {handleThumbnailClick(index, true)}}
+                                              >Close</span>
+                                            </div>
+                                          ) : (
+                                            <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
+                                        )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
+                                      </span>
+                                  ) : commentMediaInfo.type === "audio" ? (
+                                      <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
+                                        <audio key={`mob-img-${index}`} 
+                                        src={commentMediaInfo.url} alt={commentMediaInfo.type} 
+                                        onError={(e) => e.target.src = fallbackImgUrl} />
+                                        <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                      </span>
+                                  ) : null
+                                ) : null}
+                            </div>
+                          ) : null}
                         {thread.content ? (
                           thread.content?.length > 500 ?
                           <Fragment key={`fragment12-${index}`}>
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index 5d1bdc81..3058470f 100755
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -128,6 +128,8 @@ const Board = () => {
   const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
   const [executeAnonMode, setExecuteAnonMode] = useState(false);
   const [cidTracker, setCidTracker] = useState({});
+  const [isThumbnailClicked, setIsThumbnailClicked] = useState({});
+  const [isMobileThumbnailClicked, setIsMobileThumbnailClicked] = useState({});
 
   const setSelectedThreadCid = (cid) => { selectedThreadCidRef.current = cid;}
 
@@ -147,10 +149,26 @@ const Board = () => {
   }, [account?.author.address, subplebbit.roles]);
 
 
+  const handleThumbnailClick = (index, isMobile=false) => {
+    if (isMobile) {
+      setIsMobileThumbnailClicked(prevState => ({
+        ...prevState,
+        [index]: !prevState[index],
+      }));
+    } else {
+      setIsThumbnailClicked(prevState => ({
+        ...prevState,
+        [index]: !prevState[index],
+      }));
+    }
+  };
+  
+
   const handleOptionClick = () => {
     setOpenMenuCid(null);
   };
 
+
   const handleOutsideClick = useCallback((e) => {
     if (openMenuCid !== null && !postMenuCatalogRef.current.contains(e.target)) {
       setOpenMenuCid(null);
@@ -439,8 +457,10 @@ const Board = () => {
   }, [selectedThreadCidRef, anonymousMode, account]);
   
   useEffect(() => {
-    updateSigner();
-  }, [updateSigner]);
+    if (anonymousMode) {
+      updateSigner();
+    }
+  }, [updateSigner, anonymousMode]);
   
 
 
@@ -1268,8 +1288,44 @@ const Board = () => {
                                 commentMediaInfo?.url.length > 30 ?
                                 commentMediaInfo?.url.slice(0, 30) + "(...)" :
                                 commentMediaInfo?.url
-                                }</a>&nbsp;({commentMediaInfo?.type})
+                                }</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type})
+                                {isThumbnailClicked[index] ? (
+                                  <span>
+                                    -[
+                                      <span className='reply-link' 
+                                      style={{textDecoration: 'underline', cursor: 'pointer'}}
+                                      onClick={() => {handleThumbnailClick(index)}}>Close</span>
+                                    ]
+                                  </span>
+                                ) : null}
                               </div>
+                              {commentMediaInfo?.type === 'iframe' && (
+                                <div key={`enlarge-${index}`}
+                                className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}>
+                                  <span key={`fta-${index}`} className="file-thumb">
+                                    {(isThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
+                                      <iframe 
+                                        className='enlarged'
+                                        key={`fti-${index}`} 
+                                        src={commentMediaInfo.embedUrl}
+                                        width={commentMediaInfo.thumbnail ? "560" : "250"} 
+                                        height="315"
+                                        style={{border: "none"}}
+                                        title="Embedded content"
+                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                                        allowFullScreen />
+                                    ) : (
+                                      <img 
+                                        key={`fti-${index}`}
+                                        src={commentMediaInfo.thumbnail} 
+                                        alt="thumbnail"
+                                        onClick={() => {handleThumbnailClick(index)}}
+                                        style={{cursor: "pointer"}}
+                                        onError={(e) => e.target.src = fallbackImgUrl} />
+                                    )}
+                                  </span>
+                                </div>
+                              )}
                               {commentMediaInfo?.type === "webpage" ? (
                                 <div key={`enlarge-${index}`} className="img-container">
                                   <span key={`fta-${index}`} className="file-thumb">
@@ -1295,11 +1351,29 @@ const Board = () => {
                                 </div>
                               ) : null}
                               {commentMediaInfo?.type === "video" ? (
+                              <div key={`enlarge-${index}`} className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}>
                                 <span key={`fta-${index}`} className="file-thumb">
-                                  <video controls width="" key={`fti-${index}`} 
-                                  src={commentMediaInfo.url} alt={commentMediaInfo.type}
-                                  onError={(e) => e.target.src = fallbackImgUrl} />
+                                  {isThumbnailClicked[index] ? (
+                                    <video 
+                                      className='enlarged'
+                                      key={`fti-${index}`} 
+                                      src={commentMediaInfo.url} 
+                                      controls
+                                      style={{cursor: "pointer"}}
+                                      onError={(e) => e.target.src = fallbackImgUrl} 
+                                    />
+                                  ) : (
+                                    <video 
+                                      key={`fti-${index}`}
+                                      src={commentMediaInfo.url} 
+                                      alt="thumbnail"
+                                      onClick={() => {handleThumbnailClick(index)}}
+                                      style={{cursor: "pointer"}}
+                                      onError={(e) => e.target.src = fallbackImgUrl} 
+                                    />
+                                  )}
                                 </span>
+                              </div>
                               ) : null}
                               {commentMediaInfo?.type === "audio" ? (
                                 <span key={`fta-${index}`} className="file-thumb">
@@ -2191,6 +2265,41 @@ const Board = () => {
                           </div>
                           {thread.link ? (
                             <div key={`mob-f-${index}`} className="file-mobile">
+                              {commentMediaInfo?.type === 'iframe' && (
+                                <div key={`enlarge-mob-${index}`} className="img-container">
+                                  <span key={`mob-fta-${index}`} className="file-thumb-mobile">
+                                    {(isMobileThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
+                                      <div style={{width: "92vw"}}>
+                                        <iframe 
+                                          key={`mob-fti-${index}`} 
+                                          src={commentMediaInfo.embedUrl}
+                                          style={{border: "none", height: "250px"}}
+                                          title="Embedded content"
+                                          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                                          allowFullScreen />
+                                      </div>
+                                    ) : (
+                                      <img 
+                                        key={`mob-fti-${index}`}
+                                        src={commentMediaInfo.thumbnail} 
+                                        alt="thumbnail"
+                                        onClick={() => {handleThumbnailClick(index, true)}}
+                                        style={{cursor: "pointer"}}
+                                        onError={(e) => e.target.src = fallbackImgUrl} />
+                                    )}
+                                    {commentMediaInfo?.type === "video" || "iframe" ? (
+                                      isMobileThumbnailClicked[index] ? (
+                                        <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
+                                          <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
+                                          onClick={() => {handleThumbnailClick(index, true)}}
+                                          >Close</span>
+                                        </div>
+                                      ) : (
+                                        <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
+                                    )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
+                                  </span>
+                                </div>
+                              )}
                                 {commentMediaInfo?.url ? (
                                   commentMediaInfo.type === "webpage" ? (
                                     <div key={`enlarge-mob-${index}`} className="img-container">
@@ -2218,11 +2327,33 @@ const Board = () => {
                                     </div>
                                   ) : commentMediaInfo.type === "video" ? (
                                       <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
-                                        <video key={`fti-${index}`} 
-                                        src={commentMediaInfo.url} alt={commentMediaInfo.type}
-                                        style={{ pointerEvents: "none" }} 
-                                        onError={(e) => e.target.src = fallbackImgUrl} />
-                                        <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                        {isMobileThumbnailClicked[index] ? (
+                                          <video key={`fti-${index}`} 
+                                          src={commentMediaInfo.url} alt={commentMediaInfo.type}
+                                          controls
+                                          style={{ cursor: 'pointer' }} 
+                                          onError={(e) => e.target.src = fallbackImgUrl} />
+                                        ) : (
+                                          <video 
+                                            key={`fti-${index}`}
+                                            src={commentMediaInfo.url} 
+                                            alt="thumbnail"
+                                            onClick={() => {handleThumbnailClick(index, true)}}
+                                            style={{cursor: "pointer"}}
+                                            id="video-thumbnail-mobile"
+                                            onError={(e) => e.target.src = fallbackImgUrl} 
+                                          />
+                                        )}
+                                        {commentMediaInfo?.type === "video" || "iframe" ? (
+                                          isMobileThumbnailClicked[index] ? (
+                                            <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
+                                              <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
+                                              onClick={() => {handleThumbnailClick(index, true)}}
+                                              >Close</span>
+                                            </div>
+                                          ) : (
+                                            <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
+                                        )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
                                       </span>
                                   ) : commentMediaInfo.type === "audio" ? (
                                       <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
diff --git a/src/components/views/Pending.jsx b/src/components/views/Pending.jsx
index 51ab0d2f..f2f4b07f 100755
--- a/src/components/views/Pending.jsx
+++ b/src/components/views/Pending.jsx
@@ -12,6 +12,7 @@ import PostLoader from '../PostLoader';
 import SettingsModal from '../modals/SettingsModal';
 import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
 import getDate from '../../utils/getDate';
+import handleImageClick from '../../utils/handleImageClick';
 import handleQuoteClick from '../../utils/handleQuoteClick';
 import handleStyleChange from '../../utils/handleStyleChange';
 import useError from '../../hooks/useError';
@@ -35,6 +36,23 @@ const Pending = () => {
   const account = useAccount();
   const comment = useAccountComment({commentIndex: index});
   const [, setNewErrorMessage] = useError();
+  const [isThumbnailClicked, setIsThumbnailClicked] = useState({});
+  const [isMobileThumbnailClicked, setIsMobileThumbnailClicked] = useState({});
+
+
+  const handleThumbnailClick = (index, isMobile=false) => {
+    if (isMobile) {
+      setIsMobileThumbnailClicked(prevState => ({
+        ...prevState,
+        [index]: !prevState[index],
+      }));
+    } else {
+      setIsThumbnailClicked(prevState => ({
+        ...prevState,
+        [index]: !prevState[index],
+      }));
+    }
+  };
 
   useEffect(() => {
     setSelectedAddress(comment?.subplebbitAddress);
@@ -138,28 +156,29 @@ const Pending = () => {
               ]
             </span>
             <div id="board-nav-mobile" style={{ top: visible ? 0 : '-23px' }}>
-              <div className="board-select">
-                <strong>Board</strong>
-                &nbsp;
-                <select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
-                  <option value="all">All</option>
-                  <option value="subscriptions">Subscriptions</option>
-                  {defaultSubplebbits.map(subplebbit => (
-                      <option key={`option-${subplebbit.address}`} value={subplebbit.address}
-                      >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
-                    ))}
-                </select>
-                <span style={{cursor: 'pointer'}} onClick={
+              <div className="nav-container">
+                <div className="board-select">
+                  <strong>Board</strong>
+                  &nbsp;
+                  <select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
+                    <option value="all">All</option>
+                    <option value="subscriptions">Subscriptions</option>
+                    {defaultSubplebbits.map(subplebbit => (
+                        <option key={`option-${subplebbit.address}`} value={subplebbit.address}
+                        >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
+                      ))}
+                  </select> 
+                  <span id="button-span" style={{cursor: 'pointer'}} onClick={
                   () => alert(
                     'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
                     )
-                }>Create Board</span>
-              </div>
-              <div className="page-jump">
-                <Link to={`/profile/c/${index}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
-                &nbsp;
-                <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
-                  )}>Home</Link>
+                  }>Create Board</span>
+                </div>
+                <div className="page-jump">
+                  <Link to={`/p/${selectedAddress}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
+                  &nbsp;
+                  <Link to="/" onClick={() => {handleStyleChange({target: {value: "Yotsuba"}}); window.scrollTo(0, 0);}}>Home</Link>
+                </div>
               </div>
             </div>
             <div id="separator-mobile">&nbsp;</div>
@@ -228,35 +247,107 @@ const Pending = () => {
                 <div className="op-container">
                   <div className="post op">
                     <div className="post-info">
-                    {commentMediaInfo?.url ? (
-                        <div key={`f-${"pending"}`} className="file" style={{marginBottom: "5px"}}>
-                          <div key={`ft-${"pending"}`} className="file-text">
+                      {commentMediaInfo?.url ? (
+                        <div key={`f-${index}`} className="file" style={{marginBottom: "5px"}}>
+                          <div key={`ft-${index}`} className="file-text">
                             Link:&nbsp;
-                            <a key={`fa-${"pending"}`} href={commentMediaInfo.url} 
-                            target="_blank" rel="noreferrer">{
+                            <a key={`fa-${index}`} href={commentMediaInfo.url} target="_blank"
+                            rel="noopener noreferrer">{
                             commentMediaInfo?.url.length > 30 ?
                             commentMediaInfo?.url.slice(0, 30) + "(...)" :
                             commentMediaInfo?.url
-                            }</a>&nbsp;({commentMediaInfo?.type})
+                            }</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type})
+                            {isThumbnailClicked[index] ? (
+                              <span>
+                                -[
+                                  <span className='reply-link' 
+                                  style={{textDecoration: 'underline', cursor: 'pointer'}}
+                                  onClick={() => {handleThumbnailClick(index)}}>Close</span>
+                                ]
+                              </span>
+                            ) : null}
                           </div>
+                          {commentMediaInfo?.type === 'iframe' && (
+                            <div key={`enlarge-${index}`}
+                            className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}>
+                              <span key={`fta-${index}`} className="file-thumb">
+                                {(isThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
+                                  <iframe 
+                                    className='enlarged'
+                                    key={`fti-${index}`} 
+                                    src={commentMediaInfo.embedUrl}
+                                    width={commentMediaInfo.thumbnail ? "560" : "250"} 
+                                    height="315"
+                                    style={{border: "none"}}
+                                    title="Embedded content"
+                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                                    allowFullScreen />
+                                ) : (
+                                  <img 
+                                    key={`fti-${index}`}
+                                    src={commentMediaInfo.thumbnail} 
+                                    alt="thumbnail"
+                                    onClick={() => {handleThumbnailClick(index)}}
+                                    style={{cursor: "pointer"}}
+                                    onError={(e) => e.target.src = fallbackImgUrl} />
+                                )}
+                              </span>
+                            </div>
+                          )}
                           {commentMediaInfo?.type === "webpage" ? (
-                            <span key={`fta-${"pending"}`} className="file-thumb">
-                              <img key={`fti-${"pending"}`} src={comment.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
-                            </span>
+                            <div key={`enlarge-${index}`} className="img-container">
+                              <span key={`fta-${index}`} className="file-thumb">
+                                {comment.thumbnailUrl ? (
+                                  <img key={`fti-${index}`} 
+                                  src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
+                                  onClick={handleImageClick}
+                                  style={{cursor: "pointer"}}
+                                  onError={(e) => e.target.src = fallbackImgUrl} />
+                                ) : null}
+                              </span>
+                            </div>
                           ) : null}
                           {commentMediaInfo?.type === "image" ? (
-                            <span key={`fta-${"pending"}`} className="file-thumb">
-                              <img key={`fti-${"pending"}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
-                            </span>
+                            <div key={`enlarge-${index}`} className="img-container">
+                              <span key={`fta-${index}`} className="file-thumb">
+                                <img key={`fti-${index}`} 
+                                src={commentMediaInfo.url} alt={commentMediaInfo.type}
+                                onClick={handleImageClick}
+                                style={{cursor: "pointer"}}
+                                onError={(e) => e.target.src = fallbackImgUrl} />
+                              </span>
+                            </div>
                           ) : null}
                           {commentMediaInfo?.type === "video" ? (
-                            <span key={`fta-${"pending"}`} className="file-thumb">
-                              <video controls key={`fti-${"pending"}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                          <div key={`enlarge-${index}`} className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}>
+                            <span key={`fta-${index}`} className="file-thumb">
+                              {isThumbnailClicked[index] ? (
+                                <video 
+                                  className='enlarged'
+                                  key={`fti-${index}`} 
+                                  src={commentMediaInfo.url} 
+                                  controls
+                                  style={{cursor: "pointer"}}
+                                  onError={(e) => e.target.src = fallbackImgUrl} 
+                                />
+                              ) : (
+                                <video 
+                                  key={`fti-${index}`}
+                                  src={commentMediaInfo.url} 
+                                  alt="thumbnail"
+                                  onClick={() => {handleThumbnailClick(index)}}
+                                  style={{cursor: "pointer"}}
+                                  onError={(e) => e.target.src = fallbackImgUrl} 
+                                />
+                              )}
                             </span>
+                          </div>
                           ) : null}
                           {commentMediaInfo?.type === "audio" ? (
-                            <span key={`fta-${"pending"}`} className="file-thumb">
-                              <audio controls key={`fti-${"pending"}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                            <span key={`fta-${index}`} className="file-thumb">
+                              <audio controls key={`fti-${index}`} 
+                              src={commentMediaInfo.url} alt={commentMediaInfo.type}
+                              onError={(e) => e.target.src = fallbackImgUrl} />
                             </span>
                           ) : null}
                         </div>
@@ -360,37 +451,109 @@ const Pending = () => {
                           <span key="pending-mob" style={{color: 'red', fontWeight: '700'}}>Pending</span>
                         </span>
                       </div>
-                      {commentMediaInfo?.url ? (
-                        commentMediaInfo.type === "webpage" ? (
-                          <div key={`mob-f-${"pending"}`} className="file-mobile">
-                            <span key={`mob-ft${"pending"}`} className="file-thumb-mobile">
-                              <img key={`mob-img-${"pending"}`} src={comment.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
-                              <div key={`mob-fi-${"pending"}`} className="file-info-mobile">{commentMediaInfo.type}</div>
-                            </span>
+                        {comment.link ? (
+                          <div key={`mob-f-${index}`} className="file-mobile">
+                            {commentMediaInfo?.type === 'iframe' && (
+                              <div key={`enlarge-mob-${index}`} className="img-container">
+                                <span key={`mob-fta-${index}`} className="file-thumb-mobile">
+                                  {(isMobileThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
+                                    <div style={{width: "92vw"}}>
+                                      <iframe 
+                                        key={`mob-fti-${index}`} 
+                                        src={commentMediaInfo.embedUrl}
+                                        style={{border: "none", height: "250px"}}
+                                        title="Embedded content"
+                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                                        allowFullScreen />
+                                    </div>
+                                  ) : (
+                                    <img 
+                                      key={`mob-fti-${index}`}
+                                      src={commentMediaInfo.thumbnail} 
+                                      alt="thumbnail"
+                                      onClick={() => {handleThumbnailClick(index, true)}}
+                                      style={{cursor: "pointer"}}
+                                      onError={(e) => e.target.src = fallbackImgUrl} />
+                                  )}
+                                  {commentMediaInfo?.type === "video" || "iframe" ? (
+                                    isMobileThumbnailClicked[index] ? (
+                                      <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
+                                        <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
+                                        onClick={() => {handleThumbnailClick(index, true)}}
+                                        >Close</span>
+                                      </div>
+                                    ) : (
+                                      <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
+                                  )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
+                                </span>
+                              </div>
+                            )}
+                            {commentMediaInfo?.url ? (
+                              commentMediaInfo.type === "webpage" ? (
+                                <div key={`enlarge-mob-${index}`} className="img-container">
+                                  <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
+                                    {comment.thumbnailUrl ? (
+                                      <img key={`mob-img-${index}`} 
+                                      src={commentMediaInfo.thumbnail} alt="thumbnail" 
+                                      onClick={handleImageClick}
+                                      style={{cursor: "pointer"}}
+                                      onError={(e) => e.target.src = fallbackImgUrl} />
+                                    ) : null}
+                                    <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                  </span>
+                                </div>
+                              ) : commentMediaInfo.type === "image" ? (
+                                <div key={`enlarge-mob-${index}`} className="img-container">
+                                  <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
+                                    <img key={`mob-img-${index}`} 
+                                    src={commentMediaInfo.url} alt={commentMediaInfo.type} 
+                                    onClick={handleImageClick}
+                                    style={{cursor: "pointer"}}
+                                    onError={(e) => e.target.src = fallbackImgUrl} />
+                                    <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                  </span>
+                                </div>
+                              ) : commentMediaInfo.type === "video" ? (
+                                  <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
+                                    {isMobileThumbnailClicked[index] ? (
+                                      <video key={`fti-${index}`} 
+                                      src={commentMediaInfo.url} alt={commentMediaInfo.type}
+                                      controls
+                                      style={{ cursor: 'pointer' }} 
+                                      onError={(e) => e.target.src = fallbackImgUrl} />
+                                    ) : (
+                                      <video 
+                                        key={`fti-${index}`}
+                                        src={commentMediaInfo.url} 
+                                        alt="thumbnail"
+                                        onClick={() => {handleThumbnailClick(index, true)}}
+                                        style={{cursor: "pointer"}}
+                                        id="video-thumbnail-mobile"
+                                        onError={(e) => e.target.src = fallbackImgUrl} 
+                                      />
+                                    )}
+                                    {commentMediaInfo?.type === "video" || "iframe" ? (
+                                      isMobileThumbnailClicked[index] ? (
+                                        <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
+                                          <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
+                                          onClick={() => {handleThumbnailClick(index, true)}}
+                                          >Close</span>
+                                        </div>
+                                      ) : (
+                                        <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
+                                    )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
+                                  </span>
+                              ) : commentMediaInfo.type === "audio" ? (
+                                  <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
+                                    <audio key={`mob-img-${index}`} 
+                                    src={commentMediaInfo.url} alt={commentMediaInfo.type} 
+                                    onError={(e) => e.target.src = fallbackImgUrl} />
+                                    <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                  </span>
+                              ) : null
+                            ) : null}
                           </div>
-                        ) : commentMediaInfo.type === "image" ? (
-                          <div key={`mob-f-${"pending"}`} className="file-mobile">
-                            <span key={`mob-ft${"pending"}`} className="file-thumb-mobile">
-                              <img key={`mob-img-${"pending"}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
-                              <div key={`mob-fi-${"pending"}`} className="file-info-mobile">{commentMediaInfo.type}</div>
-                            </span>
-                          </div>
-                        ) : commentMediaInfo.type === "video" ? (
-                          <div key={`mob-f-${"pending"}`} className="file-mobile">
-                            <span key={`mob-ft${"pending"}`} className="file-thumb-mobile">
-                              <video controls key={`mob-img-${"pending"}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
-                              <div key={`mob-fi-${"pending"}`} className="file-info-mobile">{commentMediaInfo.type}</div>
-                            </span>
-                          </div>
-                        ) : commentMediaInfo.type === "audio" ? (
-                          <div key={`mob-f-${"pending"}`} className="file-mobile">
-                            <span key={`mob-ft${"pending"}`} className="file-thumb-mobile">
-                              <audio controls key={`mob-img-${"pending"}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
-                              <div key={`mob-fi-${"pending"}`} className="file-info-mobile">{commentMediaInfo.type}</div>
-                            </span>
-                          </div>
-                        ) : null
-                      ) : null}
+                        ) : null}
                       <blockquote key={`mob-bq-${"pending"}`} className="post-message-mobile">
                         {comment.content ? (
                           <>
diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx
index 714a72fb..f050e422 100755
--- a/src/components/views/Subscriptions.jsx
+++ b/src/components/views/Subscriptions.jsx
@@ -102,6 +102,8 @@ const Subscriptions = () => {
   const [moderatorPermissions, setModeratorPermissions] = useState({});
   const [executeAnonMode, setExecuteAnonMode] = useState(false);
   const [cidTracker, setCidTracker] = useState({});
+  const [isThumbnailClicked, setIsThumbnailClicked] = useState({});
+  const [isMobileThumbnailClicked, setIsMobileThumbnailClicked] = useState({});
 
   const setSelectedThreadCid = (cid) => {
     selectedThreadCidRef.current = cid;
@@ -116,6 +118,21 @@ const Subscriptions = () => {
   const stateString = useFeedStateString(subplebbits);
   
 
+  const handleThumbnailClick = (index, isMobile=false) => {
+    if (isMobile) {
+      setIsMobileThumbnailClicked(prevState => ({
+        ...prevState,
+        [index]: !prevState[index],
+      }));
+    } else {
+      setIsThumbnailClicked(prevState => ({
+        ...prevState,
+        [index]: !prevState[index],
+      }));
+    }
+  };
+
+
   useEffect(() => {
     let permissions = {};
   
@@ -628,56 +645,110 @@ const Subscriptions = () => {
                         <hr key={`hr-${index}`} />
                         <div key={`pi-${index}`} className="post-info">
                         {commentMediaInfo?.url ? (
-                          <div key={`f-${index}`} className="file" style={{marginBottom: "5px"}}>
-                            <div key={`ft-${index}`} className="file-text">
-                              Link:&nbsp;
-                              <a key={`fa-${index}`} href={commentMediaInfo.url} target="_blank"
-                              rel="noopener noreferrer">{
-                              commentMediaInfo?.url.length > 30 ?
-                              commentMediaInfo?.url.slice(0, 30) + "(...)" :
-                              commentMediaInfo?.url
-                              }</a>&nbsp;({commentMediaInfo?.type})
-                            </div>
-                            {commentMediaInfo?.type === "webpage" ? (
-                              <div key={`enlarge-${index}`} className="img-container">
-                                <span key={`fta-${index}`} className="file-thumb">
-                                  {thread.thumbnailUrl ? (
+                            <div key={`f-${index}`} className="file" style={{marginBottom: "5px"}}>
+                              <div key={`ft-${index}`} className="file-text">
+                                Link:&nbsp;
+                                <a key={`fa-${index}`} href={commentMediaInfo.url} target="_blank"
+                                rel="noopener noreferrer">{
+                                commentMediaInfo?.url.length > 30 ?
+                                commentMediaInfo?.url.slice(0, 30) + "(...)" :
+                                commentMediaInfo?.url
+                                }</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type})
+                                {isThumbnailClicked[index] ? (
+                                  <span>
+                                    -[
+                                      <span className='reply-link' 
+                                      style={{textDecoration: 'underline', cursor: 'pointer'}}
+                                      onClick={() => {handleThumbnailClick(index)}}>Close</span>
+                                    ]
+                                  </span>
+                                ) : null}
+                              </div>
+                              {commentMediaInfo?.type === 'iframe' && (
+                                <div key={`enlarge-${index}`}
+                                className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}>
+                                  <span key={`fta-${index}`} className="file-thumb">
+                                    {(isThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
+                                      <iframe 
+                                        className='enlarged'
+                                        key={`fti-${index}`} 
+                                        src={commentMediaInfo.embedUrl}
+                                        width={commentMediaInfo.thumbnail ? "560" : "250"} 
+                                        height="315"
+                                        style={{border: "none"}}
+                                        title="Embedded content"
+                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                                        allowFullScreen />
+                                    ) : (
+                                      <img 
+                                        key={`fti-${index}`}
+                                        src={commentMediaInfo.thumbnail} 
+                                        alt="thumbnail"
+                                        onClick={() => {handleThumbnailClick(index)}}
+                                        style={{cursor: "pointer"}}
+                                        onError={(e) => e.target.src = fallbackImgUrl} />
+                                    )}
+                                  </span>
+                                </div>
+                              )}
+                              {commentMediaInfo?.type === "webpage" ? (
+                                <div key={`enlarge-${index}`} className="img-container">
+                                  <span key={`fta-${index}`} className="file-thumb">
+                                    {thread.thumbnailUrl ? (
+                                      <img key={`fti-${index}`} 
+                                      src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
+                                      onClick={handleImageClick}
+                                      style={{cursor: "pointer"}}
+                                      onError={(e) => e.target.src = fallbackImgUrl} />
+                                    ) : null}
+                                  </span>
+                                </div>
+                              ) : null}
+                              {commentMediaInfo?.type === "image" ? (
+                                <div key={`enlarge-${index}`} className="img-container">
+                                  <span key={`fta-${index}`} className="file-thumb">
                                     <img key={`fti-${index}`} 
-                                    src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
+                                    src={commentMediaInfo.url} alt={commentMediaInfo.type}
                                     onClick={handleImageClick}
                                     style={{cursor: "pointer"}}
                                     onError={(e) => e.target.src = fallbackImgUrl} />
-                                  ) : null}
+                                  </span>
+                                </div>
+                              ) : null}
+                              {commentMediaInfo?.type === "video" ? (
+                              <div key={`enlarge-${index}`} className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}>
+                                <span key={`fta-${index}`} className="file-thumb">
+                                  {isThumbnailClicked[index] ? (
+                                    <video 
+                                      className='enlarged'
+                                      key={`fti-${index}`} 
+                                      src={commentMediaInfo.url} 
+                                      controls
+                                      style={{cursor: "pointer"}}
+                                      onError={(e) => e.target.src = fallbackImgUrl} 
+                                    />
+                                  ) : (
+                                    <video 
+                                      key={`fti-${index}`}
+                                      src={commentMediaInfo.url} 
+                                      alt="thumbnail"
+                                      onClick={() => {handleThumbnailClick(index)}}
+                                      style={{cursor: "pointer"}}
+                                      onError={(e) => e.target.src = fallbackImgUrl} 
+                                    />
+                                  )}
                                 </span>
                               </div>
-                            ) : null}
-                            {commentMediaInfo?.type === "image" ? (
-                              <div key={`enlarge-${index}`} className="img-container">
+                              ) : null}
+                              {commentMediaInfo?.type === "audio" ? (
                                 <span key={`fta-${index}`} className="file-thumb">
-                                  <img key={`fti-${index}`} 
+                                  <audio controls key={`fti-${index}`} 
                                   src={commentMediaInfo.url} alt={commentMediaInfo.type}
-                                  onClick={handleImageClick}
-                                  style={{cursor: "pointer"}}
                                   onError={(e) => e.target.src = fallbackImgUrl} />
                                 </span>
-                              </div>
-                            ) : null}
-                            {commentMediaInfo?.type === "video" ? (
-                              <span key={`fta-${index}`} className="file-thumb">
-                                <video controls width="" key={`fti-${index}`} 
-                                src={commentMediaInfo.url} alt={commentMediaInfo.type}
-                                onError={(e) => e.target.src = fallbackImgUrl} />
-                              </span>
-                            ) : null}
-                            {commentMediaInfo?.type === "audio" ? (
-                              <span key={`fta-${index}`} className="file-thumb">
-                                <audio controls key={`fti-${index}`} 
-                                src={commentMediaInfo.url} alt={commentMediaInfo.type}
-                                onError={(e) => e.target.src = fallbackImgUrl} />
-                              </span>
-                            ) : null}
-                          </div>
-                        ) : null}
+                              ) : null}
+                            </div>
+                          ) : null}
                           <span key={`nb-${index}`} className="name-block">
                             {thread.title ? (
                               thread.title.length > 75 ?
@@ -1572,51 +1643,108 @@ const Subscriptions = () => {
                           </span>
                         </div>
                         {thread.link ? (
-                          <div key={`mob-f-${index}`} className="file-mobile">
-                              {commentMediaInfo?.url ? (
-                                commentMediaInfo.type === "webpage" ? (
-                                  <div key={`enlarge-mob-${index}`} className="img-container">
-                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
-                                      {thread.thumbnailUrl ? (
+                            <div key={`mob-f-${index}`} className="file-mobile">
+                              {commentMediaInfo?.type === 'iframe' && (
+                                <div key={`enlarge-mob-${index}`} className="img-container">
+                                  <span key={`mob-fta-${index}`} className="file-thumb-mobile">
+                                    {(isMobileThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
+                                      <div style={{width: "92vw"}}>
+                                        <iframe 
+                                          key={`mob-fti-${index}`} 
+                                          src={commentMediaInfo.embedUrl}
+                                          style={{border: "none", height: "250px"}}
+                                          title="Embedded content"
+                                          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                                          allowFullScreen />
+                                      </div>
+                                    ) : (
+                                      <img 
+                                        key={`mob-fti-${index}`}
+                                        src={commentMediaInfo.thumbnail} 
+                                        alt="thumbnail"
+                                        onClick={() => {handleThumbnailClick(index, true)}}
+                                        style={{cursor: "pointer"}}
+                                        onError={(e) => e.target.src = fallbackImgUrl} />
+                                    )}
+                                    {commentMediaInfo?.type === "video" || "iframe" ? (
+                                      isMobileThumbnailClicked[index] ? (
+                                        <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
+                                          <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
+                                          onClick={() => {handleThumbnailClick(index, true)}}
+                                          >Close</span>
+                                        </div>
+                                      ) : (
+                                        <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
+                                    )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
+                                  </span>
+                                </div>
+                              )}
+                                {commentMediaInfo?.url ? (
+                                  commentMediaInfo.type === "webpage" ? (
+                                    <div key={`enlarge-mob-${index}`} className="img-container">
+                                      <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
+                                        {thread.thumbnailUrl ? (
+                                          <img key={`mob-img-${index}`} 
+                                          src={commentMediaInfo.thumbnail} alt="thumbnail" 
+                                          onClick={handleImageClick}
+                                          style={{cursor: "pointer"}}
+                                          onError={(e) => e.target.src = fallbackImgUrl} />
+                                        ) : null}
+                                        <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                      </span>
+                                    </div>
+                                  ) : commentMediaInfo.type === "image" ? (
+                                    <div key={`enlarge-mob-${index}`} className="img-container">
+                                      <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
                                         <img key={`mob-img-${index}`} 
-                                        src={commentMediaInfo.thumbnail} alt="thumbnail" 
+                                        src={commentMediaInfo.url} alt={commentMediaInfo.type} 
                                         onClick={handleImageClick}
                                         style={{cursor: "pointer"}}
                                         onError={(e) => e.target.src = fallbackImgUrl} />
-                                      ) : null}
-                                      <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
-                                    </span>
-                                  </div>
-                                ) : commentMediaInfo.type === "image" ? (
-                                  <div key={`enlarge-mob-${index}`} className="img-container">
-                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
-                                      <img key={`mob-img-${index}`} 
-                                      src={commentMediaInfo.url} alt={commentMediaInfo.type} 
-                                      onClick={handleImageClick}
-                                      style={{cursor: "pointer"}}
-                                      onError={(e) => e.target.src = fallbackImgUrl} />
-                                      <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
-                                    </span>
-                                  </div>
-                                ) : commentMediaInfo.type === "video" ? (
-                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
-                                      <video key={`fti-${index}`} 
-                                      src={commentMediaInfo.url} alt={commentMediaInfo.type}
-                                      style={{ pointerEvents: "none" }} 
-                                      onError={(e) => e.target.src = fallbackImgUrl} />
-                                      <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
-                                    </span>
-                                ) : commentMediaInfo.type === "audio" ? (
-                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
-                                      <audio key={`mob-img-${index}`} 
-                                      src={commentMediaInfo.url} alt={commentMediaInfo.type} 
-                                      onError={(e) => e.target.src = fallbackImgUrl} />
-                                      <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
-                                    </span>
-                                ) : null
-                              ) : null}
-                          </div>
-                        ) : null}
+                                        <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                      </span>
+                                    </div>
+                                  ) : commentMediaInfo.type === "video" ? (
+                                      <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
+                                        {isMobileThumbnailClicked[index] ? (
+                                          <video key={`fti-${index}`} 
+                                          src={commentMediaInfo.url} alt={commentMediaInfo.type}
+                                          controls
+                                          style={{ cursor: 'pointer' }} 
+                                          onError={(e) => e.target.src = fallbackImgUrl} />
+                                        ) : (
+                                          <video 
+                                            key={`fti-${index}`}
+                                            src={commentMediaInfo.url} 
+                                            alt="thumbnail"
+                                            onClick={() => {handleThumbnailClick(index, true)}}
+                                            style={{cursor: "pointer"}}
+                                            id="video-thumbnail-mobile"
+                                            onError={(e) => e.target.src = fallbackImgUrl} 
+                                          />
+                                        )}
+                                        {commentMediaInfo?.type === "video" || "iframe" ? (
+                                          isMobileThumbnailClicked[index] ? (
+                                            <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
+                                              <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
+                                              onClick={() => {handleThumbnailClick(index, true)}}
+                                              >Close</span>
+                                            </div>
+                                          ) : (
+                                            <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
+                                        )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
+                                      </span>
+                                  ) : commentMediaInfo.type === "audio" ? (
+                                      <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
+                                        <audio key={`mob-img-${index}`} 
+                                        src={commentMediaInfo.url} alt={commentMediaInfo.type} 
+                                        onError={(e) => e.target.src = fallbackImgUrl} />
+                                        <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                      </span>
+                                  ) : null
+                                ) : null}
+                            </div>
+                          ) : null}
                         {thread.content ? (
                           thread.content?.length > 500 ?
                           <Fragment key={`fragment12-${index}`}>
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index b134cec7..ad7813a3 100755
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -111,6 +111,8 @@ const Thread = () => {
   const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
   const [executeAnonMode, setExecuteAnonMode] = useState(false);
   const [cidTracker, setCidTracker] = useState({});
+  const [isThumbnailClicked, setIsThumbnailClicked] = useState({});
+  const [isMobileThumbnailClicked, setIsMobileThumbnailClicked] = useState({});
 
 
   useAnonMode(selectedThread, anonymousMode && executeAnonMode);
@@ -126,6 +128,21 @@ const Thread = () => {
   const fallbackImgUrl = "assets/filedeleted-res.gif";
 
 
+  const handleThumbnailClick = (index, isMobile=false) => {
+    if (isMobile) {
+      setIsMobileThumbnailClicked(prevState => ({
+        ...prevState,
+        [index]: !prevState[index],
+      }));
+    } else {
+      setIsThumbnailClicked(prevState => ({
+        ...prevState,
+        [index]: !prevState[index],
+      }));
+    }
+  };
+
+
   useEffect(() => {
     if (subplebbit.roles !== undefined) { 
       const role = subplebbit.roles[account?.author?.address]?.role;
@@ -397,8 +414,10 @@ const Thread = () => {
   }, [selectedThread, anonymousMode, account]);
   
   useEffect(() => {
-    updateSigner();
-  }, [updateSigner]);
+    if (anonymousMode) {
+      updateSigner();
+    }
+  }, [updateSigner, anonymousMode]);
   
   
   useEffect(() => {
@@ -794,52 +813,106 @@ const Thread = () => {
                 <div className="op-container">
                   <div className="post op op-desktop">
                     <div className="post-info">
-                    {commentMediaInfo?.url ? (
-                        <div key={`f-${comment.cid}`} className="file" style={{marginBottom: "5px"}}>
-                          <div key={`ft-${comment.cid}`} className="file-text">
+                      {commentMediaInfo?.url ? (
+                        <div key={`f-${index}`} className="file" style={{marginBottom: "5px"}}>
+                          <div key={`ft-${index}`} className="file-text">
                             Link:&nbsp;
-                            <a key={`fa-${comment.cid}`} href={commentMediaInfo.url} 
-                            target="_blank" rel="noreferrer">{
+                            <a key={`fa-${index}`} href={commentMediaInfo.url} target="_blank"
+                            rel="noopener noreferrer">{
                             commentMediaInfo?.url.length > 30 ?
                             commentMediaInfo?.url.slice(0, 30) + "(...)" :
                             commentMediaInfo?.url
-                            }</a>&nbsp;({commentMediaInfo?.type})
+                            }</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type})
+                            {isThumbnailClicked[index] ? (
+                              <span>
+                                -[
+                                  <span className='reply-link' 
+                                  style={{textDecoration: 'underline', cursor: 'pointer'}}
+                                  onClick={() => {handleThumbnailClick(index)}}>Close</span>
+                                ]
+                              </span>
+                            ) : null}
                           </div>
+                          {commentMediaInfo?.type === 'iframe' && (
+                            <div key={`enlarge-${index}`}
+                            className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}>
+                              <span key={`fta-${index}`} className="file-thumb">
+                                {(isThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
+                                  <iframe 
+                                    className='enlarged'
+                                    key={`fti-${index}`} 
+                                    src={commentMediaInfo.embedUrl}
+                                    width={commentMediaInfo.thumbnail ? "560" : "250"} 
+                                    height="315"
+                                    style={{border: "none"}}
+                                    title="Embedded content"
+                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                                    allowFullScreen />
+                                ) : (
+                                  <img 
+                                    key={`fti-${index}`}
+                                    src={commentMediaInfo.thumbnail} 
+                                    alt="thumbnail"
+                                    onClick={() => {handleThumbnailClick(index)}}
+                                    style={{cursor: "pointer"}}
+                                    onError={(e) => e.target.src = fallbackImgUrl} />
+                                )}
+                              </span>
+                            </div>
+                          )}
                           {commentMediaInfo?.type === "webpage" ? (
-                            <div key="enlarge" className="img-container">
-                              <span key={`fta-${comment.cid}`} className="file-thumb">
+                            <div key={`enlarge-${index}`} className="img-container">
+                              <span key={`fta-${index}`} className="file-thumb">
                                 {comment.thumbnailUrl ? (
-                                  <img key={`fti-${comment.cid}`} 
+                                  <img key={`fti-${index}`} 
                                   src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
                                   onClick={handleImageClick}
-                                  style={{cursor: "pointer"}} 
+                                  style={{cursor: "pointer"}}
                                   onError={(e) => e.target.src = fallbackImgUrl} />
                                 ) : null}
                               </span>
                             </div>
                           ) : null}
                           {commentMediaInfo?.type === "image" ? (
-                            <div key="enlarge" className="img-container">
-                              <span key={`fta-${comment.cid}`} className="file-thumb">
-                                <img key={`fti-${comment.cid}`} 
+                            <div key={`enlarge-${index}`} className="img-container">
+                              <span key={`fta-${index}`} className="file-thumb">
+                                <img key={`fti-${index}`} 
                                 src={commentMediaInfo.url} alt={commentMediaInfo.type}
                                 onClick={handleImageClick}
-                                style={{cursor: "pointer"}} 
+                                style={{cursor: "pointer"}}
                                 onError={(e) => e.target.src = fallbackImgUrl} />
                               </span>
                             </div>
                           ) : null}
                           {commentMediaInfo?.type === "video" ? (
-                            <span key={`fta-${comment.cid}`} className="file-thumb">
-                              <video controls key={`fti-${comment.cid}`} 
-                              src={commentMediaInfo.url} alt={commentMediaInfo.type} 
-                              onError={(e) => e.target.src = fallbackImgUrl} />
+                          <div key={`enlarge-${index}`} className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}>
+                            <span key={`fta-${index}`} className="file-thumb">
+                              {isThumbnailClicked[index] ? (
+                                <video 
+                                  className='enlarged'
+                                  key={`fti-${index}`} 
+                                  src={commentMediaInfo.url} 
+                                  controls
+                                  style={{cursor: "pointer"}}
+                                  onError={(e) => e.target.src = fallbackImgUrl} 
+                                />
+                              ) : (
+                                <video 
+                                  key={`fti-${index}`}
+                                  src={commentMediaInfo.url} 
+                                  alt="thumbnail"
+                                  onClick={() => {handleThumbnailClick(index)}}
+                                  style={{cursor: "pointer"}}
+                                  onError={(e) => e.target.src = fallbackImgUrl} 
+                                />
+                              )}
                             </span>
+                          </div>
                           ) : null}
                           {commentMediaInfo?.type === "audio" ? (
-                            <span key={`fta-${comment.cid}`} className="file-thumb">
-                              <audio controls key={`fti-${comment.cid}`} 
-                              src={commentMediaInfo.url} alt={commentMediaInfo.type} 
+                            <span key={`fta-${index}`} className="file-thumb">
+                              <audio controls key={`fti-${index}`} 
+                              src={commentMediaInfo.url} alt={commentMediaInfo.type}
                               onError={(e) => e.target.src = fallbackImgUrl} />
                             </span>
                           ) : null}
@@ -1559,54 +1632,108 @@ const Thread = () => {
                             }}}>{comment.shortCid}</Link>
                         </span>
                       </div>
-                      {commentMediaInfo?.url ? (
-                        commentMediaInfo.type === "webpage" ? (
-                          <div key={`mob-f-${comment.cid}`} className="file-mobile">
-                            <div key="enlarge-reply-mob" className="img-container">
-                              <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
-                                {comment.thumbnailUrl ? (
-                                  <img key={`mob-img-${comment.cid}`} 
-                                  src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type} 
+                      {comment.link ? (
+                        <div key={`mob-f-${index}`} className="file-mobile">
+                          {commentMediaInfo?.type === 'iframe' && (
+                            <div key={`enlarge-mob-${index}`} className="img-container">
+                              <span key={`mob-fta-${index}`} className="file-thumb-mobile">
+                                {(isMobileThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
+                                  <div style={{width: "92vw"}}>
+                                    <iframe 
+                                      key={`mob-fti-${index}`} 
+                                      src={commentMediaInfo.embedUrl}
+                                      style={{border: "none", height: "250px"}}
+                                      title="Embedded content"
+                                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                                      allowFullScreen />
+                                  </div>
+                                ) : (
+                                  <img 
+                                    key={`mob-fti-${index}`}
+                                    src={commentMediaInfo.thumbnail} 
+                                    alt="thumbnail"
+                                    onClick={() => {handleThumbnailClick(index, true)}}
+                                    style={{cursor: "pointer"}}
+                                    onError={(e) => e.target.src = fallbackImgUrl} />
+                                )}
+                                {commentMediaInfo?.type === "video" || "iframe" ? (
+                                  isMobileThumbnailClicked[index] ? (
+                                    <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
+                                      <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
+                                      onClick={() => {handleThumbnailClick(index, true)}}
+                                      >Close</span>
+                                    </div>
+                                  ) : (
+                                    <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
+                                )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
+                              </span>
+                            </div>
+                          )}
+                          {commentMediaInfo?.url ? (
+                            commentMediaInfo.type === "webpage" ? (
+                              <div key={`enlarge-mob-${index}`} className="img-container">
+                                <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
+                                  {comment.thumbnailUrl ? (
+                                    <img key={`mob-img-${index}`} 
+                                    src={commentMediaInfo.thumbnail} alt="thumbnail" 
+                                    onClick={handleImageClick}
+                                    style={{cursor: "pointer"}}
+                                    onError={(e) => e.target.src = fallbackImgUrl} />
+                                  ) : null}
+                                  <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                </span>
+                              </div>
+                            ) : commentMediaInfo.type === "image" ? (
+                              <div key={`enlarge-mob-${index}`} className="img-container">
+                                <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
+                                  <img key={`mob-img-${index}`} 
+                                  src={commentMediaInfo.url} alt={commentMediaInfo.type} 
                                   onClick={handleImageClick}
                                   style={{cursor: "pointer"}}
                                   onError={(e) => e.target.src = fallbackImgUrl} />
-                                  ) : null}
-                                <div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
-                              </span>
-                            </div>
-                          </div>
-                        ) : commentMediaInfo.type === "image" ? (
-                          <div key={`mob-f-${comment.cid}`} className="file-mobile">
-                            <div key="enlarge-reply-mob" className="img-container">
-                              <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
-                                <img key={`mob-img-${comment.cid}`} 
-                                src={commentMediaInfo.url} alt={commentMediaInfo.type} 
-                                onClick={handleImageClick}
-                                style={{cursor: "pointer"}}
-                                onError={(e) => e.target.src = fallbackImgUrl} />
-                                <div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
-                              </span>
-                            </div>
-                          </div>
-                        ) : commentMediaInfo.type === "video" ? (
-                          <div key={`mob-f-${comment.cid}`} className="file-mobile">
-                            <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
-                              <video controls key={`mob-img-${comment.cid}`} 
-                              src={commentMediaInfo.url} alt={commentMediaInfo.type} 
-                              onError={(e) => e.target.src = fallbackImgUrl} />
-                              <div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
-                            </span>
-                          </div>
-                        ) : commentMediaInfo.type === "audio" ? (
-                          <div key={`mob-f-${comment.cid}`} className="file-mobile">
-                            <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
-                              <audio controls key={`mob-img-${comment.cid}`} 
-                              src={commentMediaInfo.url} alt={commentMediaInfo.type} 
-                              onError={(e) => e.target.src = fallbackImgUrl} />
-                              <div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
-                            </span>
-                          </div>
-                        ) : null
+                                  <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                </span>
+                              </div>
+                            ) : commentMediaInfo.type === "video" ? (
+                                <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
+                                  {isMobileThumbnailClicked[index] ? (
+                                    <video key={`fti-${index}`} 
+                                    src={commentMediaInfo.url} alt={commentMediaInfo.type}
+                                    controls
+                                    style={{ cursor: 'pointer' }} 
+                                    onError={(e) => e.target.src = fallbackImgUrl} />
+                                  ) : (
+                                    <video 
+                                      key={`fti-${index}`}
+                                      src={commentMediaInfo.url} 
+                                      alt="thumbnail"
+                                      onClick={() => {handleThumbnailClick(index, true)}}
+                                      style={{cursor: "pointer"}}
+                                      id="video-thumbnail-mobile"
+                                      onError={(e) => e.target.src = fallbackImgUrl} 
+                                    />
+                                  )}
+                                  {commentMediaInfo?.type === "video" || "iframe" ? (
+                                    isMobileThumbnailClicked[index] ? (
+                                      <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
+                                        <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
+                                        onClick={() => {handleThumbnailClick(index, true)}}
+                                        >Close</span>
+                                      </div>
+                                    ) : (
+                                      <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
+                                  )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
+                                </span>
+                            ) : commentMediaInfo.type === "audio" ? (
+                                <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
+                                  <audio key={`mob-img-${index}`} 
+                                  src={commentMediaInfo.url} alt={commentMediaInfo.type} 
+                                  onError={(e) => e.target.src = fallbackImgUrl} />
+                                  <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                </span>
+                            ) : null
+                          ) : null}
+                        </div>
                       ) : null}
                       <blockquote key={`mob-bq-${comment.cid}`} className="post-message-mobile">
                         {comment.content ? (
diff --git a/src/utils/getCommentMediaInfo.js b/src/utils/getCommentMediaInfo.js
index 6d237b50..fc26ac3a 100644
--- a/src/utils/getCommentMediaInfo.js
+++ b/src/utils/getCommentMediaInfo.js
@@ -7,34 +7,80 @@ const getCommentMediaInfo = (comment) => {
 
   if (comment?.link) {
     try {
-      new URL(comment.link);
+      const url = new URL(comment.link);
+      const host = url.hostname;
+      let embedUrl = null;
+
+      if (['youtube.com', 'www.youtube.com', 'youtu.be'].includes(host)) {
+        const videoId = host === 'youtu.be' ? url.pathname.slice(1) : url.searchParams.get('v');
+        embedUrl = `https://www.youtube-nocookie.com/embed/${videoId}`;
+      } else if (host.includes('odysee.com')) {
+        const pathComponents = url.pathname.split('/');
+        const channelAndId = pathComponents[1];
+        const videoAndId = pathComponents[2];
+        embedUrl = `https://odysee.com/$/embed/${channelAndId}/${videoAndId}`;
+
+        // TODO: add support for Rumble, video id is dynamic
+
+      // } else if (host.includes('rumble.com')) {
+      //   const regex = /(\/v.+?)-/;
+      //   const match = regex.exec(url.pathname);
+      //   if (match) {
+      //     const videoId = match[1].slice(1);
+      //     embedUrl = `https://rumble.com/embed/${videoId}/?pub=4`;
+      //   }
+
+
+      } else if (host.includes('bitchute.com')) {
+        const videoId = url.pathname.split('/')[2];
+        embedUrl = `https://www.bitchute.com/embed/${videoId}/`;
+      } else if (host.includes('streamable.com')) {
+        const videoId = url.pathname.split('/')[1];
+        embedUrl = `https://streamable.com/e/${videoId}?quality=highest`;
+        
+        // TODO: Add support for Giphy (doesn't have thumbnails, size is variable)
+
+      // } else if (host.includes('giphy.com')) {
+      //   const hyphenComponents = url.pathname.split('-');
+      //   const gifId = hyphenComponents[hyphenComponents.length - 1];
+      //   embedUrl = `https://giphy.com/embed/${gifId}`;
+      }
+
+      if (embedUrl) {
+        return {
+          url: comment.link,
+          embedUrl,
+          type: 'iframe',
+          thumbnail: comment.thumbnailUrl,
+        };
+      }
+
+      const mime = extName(url.pathname.replace('/', ''))[0]?.mime;
+
+      if (mime?.startsWith('image')) {
+        return {
+          url: comment.link,
+          type: 'image',
+        };
+      }
+
+      if (mime?.startsWith('video')) {
+        return {
+          url: comment.link,
+          type: 'video',
+          thumbnail: comment.thumbnailUrl,
+        };
+      }
+
+      if (mime?.startsWith('audio')) {
+        return {
+          url: comment.link,
+          type: 'audio',
+        };
+      }
     } catch (error) {
-      // console.error("Invalid URL:", comment.link);
       return;
     }
-
-    const mime = extName(new URL(comment?.link).pathname.replace('/', ''))[0]?.mime;
-
-    if (mime?.startsWith('image')) {
-      return {
-        url: comment.link,
-        type: 'image',
-      };
-    }
-
-    if (mime?.startsWith('video')) {
-      return {
-        url: comment.link,
-        type: 'video',
-      };
-    }
-
-    if (mime?.startsWith('audio')) {
-      return {
-        url: comment.link,
-        type: 'audio',
-      };
-    }
   }
 
   if (comment?.thumbnailUrl && comment?.thumbnailUrl !== comment?.link) {

From 04aeff48bdebebe0f2bbfccaf6a98ed511f07c2c Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sat, 8 Jul 2023 09:03:36 +0200
Subject: [PATCH 12/15] fix CaptchaModal state

---
 src/components/modals/CaptchaModal.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/modals/CaptchaModal.jsx b/src/components/modals/CaptchaModal.jsx
index 4477766c..91a7dc2d 100644
--- a/src/components/modals/CaptchaModal.jsx
+++ b/src/components/modals/CaptchaModal.jsx
@@ -95,6 +95,7 @@ const CaptchaModal = () => {
   const handleCloseModal = () => {
     setImageSources([]);
     setChallengesArray([]);
+    setCurrentChallengeIndex(0);
     setIsCaptchaOpen(false);
   };
 

From 972f425f5855d88d370fab94ae75f391c811eefb Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sat, 8 Jul 2023 09:11:37 +0200
Subject: [PATCH 13/15] fix hasMore

---
 src/components/views/All.jsx           | 2 +-
 src/components/views/Board.jsx         | 2 +-
 src/components/views/Subscriptions.jsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx
index 27f960b3..a6b45e42 100755
--- a/src/components/views/All.jsx
+++ b/src/components/views/All.jsx
@@ -2195,7 +2195,7 @@ const All = () => {
                 }}
                 endReached={tryLoadMore}
                 useWindowScroll={true}
-                components={{ Footer: hasMore && feed ? () => <PostLoader /> : null }}
+                components={{ Footer: hasMore && feed.length > 0 ? () => <PostLoader /> : null }}
               />
             ) : (
               <PostLoader />
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index 3058470f..0d1d5ea8 100755
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -2816,7 +2816,7 @@ const Board = () => {
                   }}
                   endReached={tryLoadMore}
                   useWindowScroll={true}
-                  components={{ Footer: hasMore && feed ? () => <PostLoader /> : null }}
+                  components={{ Footer: hasMore && feed.length > 0 ? () => <PostLoader /> : null }}
                   />
                 </>
               ) : (<PostLoader />)
diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx
index f050e422..0206bd43 100755
--- a/src/components/views/Subscriptions.jsx
+++ b/src/components/views/Subscriptions.jsx
@@ -2206,7 +2206,7 @@ const Subscriptions = () => {
                 }}
                 endReached={tryLoadMore}
                 useWindowScroll={true}
-                components={{ Footer: hasMore && feed ? () => <PostLoader /> : null }}
+                components={{ Footer: hasMore && feed.length > 0 ? () => <PostLoader /> : null }}
               />
             )}
           </div>

From 956efdd4c3b6c90b7d8c1d62c43adc0ca3861041 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sat, 8 Jul 2023 14:37:08 +0200
Subject: [PATCH 14/15] verify comment author addresses

---
 src/components/VerifiedAuthor.jsx             | 10 +++++++
 src/components/views/All.jsx                  | 29 ++++++++++---------
 src/components/views/AllCatalog.jsx           |  9 +++---
 src/components/views/Board.jsx                | 29 ++++++++++---------
 src/components/views/Catalog.jsx              |  9 +++---
 src/components/views/Subscriptions.jsx        | 29 ++++++++++---------
 src/components/views/SubscriptionsCatalog.jsx |  9 +++---
 src/components/views/Thread.jsx               | 25 ++++++++--------
 8 files changed, 83 insertions(+), 66 deletions(-)
 create mode 100644 src/components/VerifiedAuthor.jsx

diff --git a/src/components/VerifiedAuthor.jsx b/src/components/VerifiedAuthor.jsx
new file mode 100644
index 00000000..5a832381
--- /dev/null
+++ b/src/components/VerifiedAuthor.jsx
@@ -0,0 +1,10 @@
+import {useComment, useAuthorAddress} from '@plebbit/plebbit-react-hooks';
+
+function VerifiedAuthor({ commentCid, children }) {
+  const comment = useComment({commentCid});
+  const {authorAddress, shortAuthorAddress} = useAuthorAddress({comment});
+
+  return children({ authorAddress, shortAuthorAddress });
+}
+
+export default VerifiedAuthor;
\ No newline at end of file
diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx
index a6b45e42..68e4e058 100755
--- a/src/components/views/All.jsx
+++ b/src/components/views/All.jsx
@@ -21,6 +21,7 @@ import Post from '../Post';
 import PostLoader from '../PostLoader';
 import PostOnHover from '../PostOnHover';
 import StateLabel from '../StateLabel';
+import VerifiedAuthor from '../VerifiedAuthor';
 import ReplyModal from '../modals/ReplyModal';
 import SettingsModal from '../modals/SettingsModal';
 import findShortParentCid from '../../utils/findShortParentCid';
@@ -771,9 +772,9 @@ const All = () => {
                             (u/
                             <span key={`pa-${index}`} className="poster-address address-desktop"
                             id="reply-button" style={{cursor: "pointer"}}
-                              onClick={() => handleAddressClick(thread.author.shortAddress)}
+                              onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
                             >
-                              {thread.author.shortAddress}
+                              {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>}
                             </span>)
                             &nbsp;
                             <span key={`dt-${index}`} className="date-time" data-utc="data">{getDate(thread.timestamp)}</span>
@@ -848,8 +849,8 @@ const All = () => {
                               >
                                 <ul className="post-menu-catalog">
                                   <li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
-                                  {thread.author.address === account?.author.address ||
-                                  thread.author.address === account?.signer.address ? (
+                                  {<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address ||
+                                  <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
                                     <>
                                       <li onClick={() => {handleAuthorEditClick(thread); setSelectedAddress(thread.subplebbitAddress);}}>Edit post</li>
                                       <li onClick={() => {handleAuthorDeleteClick(thread); setSelectedAddress(thread.subplebbitAddress);}}>Delete post</li>
@@ -857,8 +858,8 @@ const All = () => {
                                   ) : null}
                                   {isModerator ? (
                                     <>
-                                      {thread.author.address === account?.author.address ||
-                                      thread.author.address === account?.signer.address ? (
+                                      {<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address ||
+                                      <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
                                         null
                                       ) : (
                                         <li onClick={() => {
@@ -1043,7 +1044,7 @@ const All = () => {
                                 &nbsp;
                                 <span key={`pa-${index}`} className="poster-address address-desktop"
                                   id="reply-button" style={{cursor: "pointer"}}
-                                  onClick={() => handleAddressClick(reply.author.shortAddress)}
+                                  onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
                                 >
                                   (u/
                                     {reply.author?.shortAddress ?
@@ -1138,8 +1139,8 @@ const All = () => {
                               >
                                 <ul className="post-menu-catalog">
                                   <li onClick={() => handleOptionClick(reply.cid)}>Hide post</li>
-                                  {reply.author.address === account?.author.address ||
-                                    reply.author.address === account?.signer.address ? (
+                                  {<VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address ||
+                                    <VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
                                     <>
                                       <li onClick={() => {handleAuthorEditClick(reply); setSelectedAddress(thread.subplebbitAddress);}}>Edit post</li>
                                       <li onClick={() => {handleAuthorDeleteClick(reply); setSelectedAddress(thread.subplebbitAddress);}}>Delete post</li>
@@ -1147,8 +1148,8 @@ const All = () => {
                                   ) : null}
                                   {isModerator ? (
                                     <>
-                                    {reply.author.address === account?.author.address ||
-                                    reply.author.address === account?.signer.address ? (
+                                    {<VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address ||
+                                    <VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
                                         null
                                       ) : (
                                         <li onClick={() => {
@@ -1563,11 +1564,11 @@ const All = () => {
                             &nbsp;
                             <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
                               id="reply-button" style={{cursor: "pointer"}}
-                              onClick={() => handleAddressClick(thread.author.shortAddress)}
+                              onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
                             >
                               (u/
                               <span key={`mob-ha-${index}`} className="highlight-address-mobile">
-                                {thread.author.shortAddress}
+                                {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>}
                               </span>
                               )&nbsp;
                             </span>
@@ -1803,7 +1804,7 @@ const All = () => {
                               &nbsp;
                               <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
                                 id="reply-button" style={{cursor: "pointer"}}
-                                onClick={() => handleAddressClick(reply.author.shortAddress)}
+                                onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
                               >
                                 (u/
                                   {reply.author?.shortAddress ?
diff --git a/src/components/views/AllCatalog.jsx b/src/components/views/AllCatalog.jsx
index cf9b5a63..6400ecba 100755
--- a/src/components/views/AllCatalog.jsx
+++ b/src/components/views/AllCatalog.jsx
@@ -13,6 +13,7 @@ import { TopBar, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled
 import CatalogLoader from '../CatalogLoader';
 import EditModal from '../modals/EditModal';
 import ImageBanner from '../ImageBanner';
+import VerifiedAuthor from '../VerifiedAuthor';
 import ModerationModal from '../modals/ModerationModal';
 import OfflineIndicator from '../OfflineIndicator';
 import SettingsModal from '../modals/SettingsModal';
@@ -559,8 +560,8 @@ const AllCatalog = () => {
                           >
                             <ul className="post-menu-catalog">
                               <li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
-                              {thread.author.address === account?.author.address || 
-                              thread.author.address === account?.signer.address ? (
+                              {<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address || 
+                              <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
                                 <>
                                   <li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
                                   <li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
@@ -568,8 +569,8 @@ const AllCatalog = () => {
                               ) : null}
                               {isModerator ? (
                                 <>
-                                  {thread.author.address === account?.author.address || 
-                                  thread.author.address === account?.signer.address ? (
+                                  {<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address || 
+                                  <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
                                     null
                                   ) : (
                                     <li onClick={() => {
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index 0d1d5ea8..f9109d95 100755
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -22,6 +22,7 @@ import Post from '../Post';
 import PostLoader from '../PostLoader';
 import PostOnHover from '../PostOnHover';
 import StateLabel from '../StateLabel';
+import VerifiedAuthor from '../VerifiedAuthor';
 import ReplyModal from '../modals/ReplyModal';
 import SettingsModal from '../modals/SettingsModal';
 import findShortParentCid from '../../utils/findShortParentCid';
@@ -1417,9 +1418,9 @@ const Board = () => {
                               (u/
                               <span key={`pa-${index}`} className="poster-address address-desktop"
                               id="reply-button" style={{cursor: "pointer"}}
-                                onClick={() => handleAddressClick(thread.author.shortAddress)}
+                                onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
                               >
-                                {thread.author.shortAddress}
+                                <VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>
                               </span>)
                               &nbsp;
                               <span key={`dt-${index}`} className="date-time" data-utc="data">{getDate(thread.timestamp)}</span>
@@ -1497,8 +1498,8 @@ const Board = () => {
                                 >
                                   <ul className="post-menu-catalog">
                                     <li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
-                                    {thread.author.address === account?.author.address || 
-                                    thread.author.address === account?.signer.address ? (
+                                    {<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address || 
+                                    <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
                                       <>
                                         <li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
                                         <li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
@@ -1506,8 +1507,8 @@ const Board = () => {
                                     ) : null}
                                     {isModerator ? (
                                       <>
-                                        {thread.author.address === account?.author.address ||
-                                         thread.author.address === account?.signer.address ? (
+                                        {<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address ||
+                                         <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
                                           null
                                         ) : (
                                           <li onClick={() => {
@@ -1700,7 +1701,7 @@ const Board = () => {
                                   &nbsp;
                                   <span key={`pa-${index}`} className="poster-address address-desktop"
                                     id="reply-button" style={{cursor: "pointer"}}
-                                    onClick={() => handleAddressClick(reply.author.shortAddress)}
+                                    onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
                                   >
                                     (u/
                                       {reply.author?.shortAddress ?
@@ -1780,8 +1781,8 @@ const Board = () => {
                                 >
                                   <ul className="post-menu-catalog">
                                     <li onClick={() => handleOptionClick(reply.cid)}>Hide post</li>
-                                    {reply.author.address === account?.author.address ||
-                                    reply.author.address === account?.signer.address ? (
+                                    {<VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address ||
+                                    <VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
                                       <>
                                         <li onClick={() => handleAuthorEditClick(reply)}>Edit post</li>
                                         <li onClick={() => handleAuthorDeleteClick(reply)}>Delete post</li>
@@ -1789,8 +1790,8 @@ const Board = () => {
                                     ) : null}
                                     {isModerator ? (
                                       <>
-                                        {reply.author.address === account?.author.address || 
-                                         reply.author.address === account?.signer.address ? (
+                                        {<VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address || 
+                                         <VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
                                           null
                                         ) : (
                                           <li onClick={() => {
@@ -2203,11 +2204,11 @@ const Board = () => {
                               &nbsp;
                               <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
                                 id="reply-button" style={{cursor: "pointer"}}
-                                onClick={() => handleAddressClick(thread.author.shortAddress)}
+                                onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
                               >
                                 (u/
                                 <span key={`mob-ha-${index}`} className="highlight-address-mobile">
-                                  {thread.author.shortAddress}
+                                  {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>}
                                 </span>
                                 )&nbsp;
                               </span>
@@ -2442,7 +2443,7 @@ const Board = () => {
                                 &nbsp;
                                 <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
                                   id="reply-button" style={{cursor: "pointer"}}
-                                  onClick={() => handleAddressClick(reply.author.shortAddress)}
+                                  onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
                                 >
                                   (u/
                                     {reply.author?.shortAddress ?
diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx
index 8702120b..f3262287 100755
--- a/src/components/views/Catalog.jsx
+++ b/src/components/views/Catalog.jsx
@@ -13,6 +13,7 @@ import { TopBar, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled
 import CatalogLoader from '../CatalogLoader';
 import EditModal from '../modals/EditModal';
 import ImageBanner from '../ImageBanner';
+import VerifiedAuthor from '../VerifiedAuthor';
 import ModerationModal from '../modals/ModerationModal';
 import OfflineIndicator from '../OfflineIndicator';
 import SettingsModal from '../modals/SettingsModal';
@@ -1007,8 +1008,8 @@ const Catalog = () => {
                                 >
                                   <ul className="post-menu-catalog">
                                     <li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
-                                    {thread.author.address === account?.author.address || 
-                                    thread.author.address === account?.signer.address ? (
+                                    {<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address || 
+                                    <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
                                       <>
                                         <li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
                                         <li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
@@ -1016,8 +1017,8 @@ const Catalog = () => {
                                     ) : null}
                                     {isModerator ? (
                                       <>
-                                        {thread.author.address === account?.author.address || 
-                                        thread.author.address === account?.signer.address ? (
+                                        {<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address || 
+                                        <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
                                           null
                                         ) : (
                                           <li onClick={() => {
diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx
index 0206bd43..5651dd13 100755
--- a/src/components/views/Subscriptions.jsx
+++ b/src/components/views/Subscriptions.jsx
@@ -22,6 +22,7 @@ import Post from '../Post';
 import PostLoader from '../PostLoader';
 import PostOnHover from '../PostOnHover';
 import StateLabel from '../StateLabel';
+import VerifiedAuthor from '../VerifiedAuthor';
 import ReplyModal from '../modals/ReplyModal';
 import SettingsModal from '../modals/SettingsModal';
 import findShortParentCid from '../../utils/findShortParentCid';
@@ -782,9 +783,9 @@ const Subscriptions = () => {
                             (u/
                             <span key={`pa-${index}`} className="poster-address address-desktop"
                             id="reply-button" style={{cursor: "pointer"}}
-                              onClick={() => handleAddressClick(thread.author.shortAddress)}
+                              onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
                             >
-                              {thread.author.shortAddress}
+                              {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>}
                             </span>)
                             &nbsp;
                             <span key={`dt-${index}`} className="date-time" data-utc="data">{getDate(thread.timestamp)}</span>
@@ -859,8 +860,8 @@ const Subscriptions = () => {
                               >
                                 <ul className="post-menu-catalog">
                                   <li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
-                                  {thread.author.address === account?.author.address || 
-                                  thread.author.address === account?.signer.address ? (
+                                  {<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address || 
+                                  <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
                                     <>
                                       <li onClick={() => {handleAuthorEditClick(thread); setSelectedAddress(thread.subplebbitAddress);}}>Edit post</li>
                                       <li onClick={() => {handleAuthorDeleteClick(thread); setSelectedAddress(thread.subplebbitAddress);}}>Delete post</li>
@@ -868,8 +869,8 @@ const Subscriptions = () => {
                                   ) : null}
                                   {isModerator ? (
                                     <>
-                                      {thread.author.address === account?.author.address || 
-                                      thread.author.address === account?.signer.address ? (
+                                      {<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address || 
+                                      <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
                                         null
                                       ) : (
                                         <li onClick={() => {
@@ -1054,7 +1055,7 @@ const Subscriptions = () => {
                                 &nbsp;
                                 <span key={`pa-${index}`} className="poster-address address-desktop"
                                   id="reply-button" style={{cursor: "pointer"}}
-                                  onClick={() => handleAddressClick(reply.author.shortAddress)}
+                                  onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
                                 >
                                   (u/
                                     {reply.author?.shortAddress ?
@@ -1149,8 +1150,8 @@ const Subscriptions = () => {
                               >
                                 <ul className="post-menu-catalog">
                                   <li onClick={() => handleOptionClick(reply.cid)}>Hide post</li>
-                                  {reply.author.address === account?.author.address || 
-                                  reply.author.address === account?.signer.address ? (
+                                  {<VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address || 
+                                  <VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
                                     <>
                                       <li onClick={() => {handleAuthorEditClick(reply); setSelectedAddress(thread.subplebbitAddress);}}>Edit post</li>
                                       <li onClick={() => {handleAuthorDeleteClick(reply); setSelectedAddress(thread.subplebbitAddress);}}>Delete post</li>
@@ -1158,8 +1159,8 @@ const Subscriptions = () => {
                                   ) : null}
                                   {isModerator ? (
                                     <>
-                                    {reply.author.address === account?.author.address || 
-                                    reply.author.address === account?.signer.address ? (
+                                    {<VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address || 
+                                    <VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
                                         null
                                       ) : (
                                         <li onClick={() => {
@@ -1574,11 +1575,11 @@ const Subscriptions = () => {
                             &nbsp;
                             <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
                               id="reply-button" style={{cursor: "pointer"}}
-                              onClick={() => handleAddressClick(thread.author.shortAddress)}
+                              onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
                             >
                               (u/
                               <span key={`mob-ha-${index}`} className="highlight-address-mobile">
-                                {thread.author.shortAddress}
+                                {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>}
                               </span>
                               )&nbsp;
                             </span>
@@ -1814,7 +1815,7 @@ const Subscriptions = () => {
                               &nbsp;
                               <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
                                 id="reply-button" style={{cursor: "pointer"}}
-                                onClick={() => handleAddressClick(reply.author.shortAddress)}
+                                onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
                               >
                                 (u/
                                   {reply.author?.shortAddress ?
diff --git a/src/components/views/SubscriptionsCatalog.jsx b/src/components/views/SubscriptionsCatalog.jsx
index 539f45e0..0fe0369c 100755
--- a/src/components/views/SubscriptionsCatalog.jsx
+++ b/src/components/views/SubscriptionsCatalog.jsx
@@ -14,6 +14,7 @@ import { TopBar, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled
 import CatalogLoader from '../CatalogLoader';
 import EditModal from '../modals/EditModal';
 import ImageBanner from '../ImageBanner';
+import VerifiedAuthor from '../VerifiedAuthor';
 import ModerationModal from '../modals/ModerationModal';
 import OfflineIndicator from '../OfflineIndicator';
 import SettingsModal from '../modals/SettingsModal';
@@ -563,8 +564,8 @@ const SubscriptionsCatalog = () => {
                           >
                             <ul className="post-menu-catalog">
                               <li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
-                              {thread.author.address === account?.author.address || 
-                              thread.author.address === account?.signer.address ? (
+                              {<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address || 
+                              <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
                                 <>
                                   <li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
                                   <li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
@@ -572,8 +573,8 @@ const SubscriptionsCatalog = () => {
                               ) : null}
                               {isModerator ? (
                                 <>
-                                  {thread.author.address === account?.author.address || 
-                                  thread.author.address === account?.signer.address ? (
+                                  {<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address || 
+                                  <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
                                     null
                                   ) : (
                                     <li onClick={() => {
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index ad7813a3..6931b402 100755
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -20,6 +20,7 @@ import Post from '../Post';
 import PostLoader from '../PostLoader';
 import PostOnHover from '../PostOnHover';
 import StateLabel from '../StateLabel';
+import VerifiedAuthor from '../VerifiedAuthor';
 import ReplyModal from '../modals/ReplyModal';
 import SettingsModal from '../modals/SettingsModal';
 import findShortParentCid from '../../utils/findShortParentCid';
@@ -952,10 +953,10 @@ const Thread = () => {
                         &nbsp;
                         <span className="poster-address address-desktop"
                           id="reply-button" style={{cursor: "pointer"}}
-                          onClick={() => handleAddressClick(comment?.author?.shortAddress)}>
+                          onClick={() => handleAddressClick(<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}>
                           (u/
                             <span key={`pa-${comment.cid}`} className="poster-address">
-                            {comment?.author?.shortAddress}
+                            {<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>}
                           </span>)
                         </span>
                         &nbsp;
@@ -1023,8 +1024,8 @@ const Thread = () => {
                           >
                             <ul className="post-menu-catalog">
                               <li onClick={() => handleOptionClick(comment.cid)}>Hide thread</li>
-                                {comment.author?.address === account?.author.address || 
-                                comment.author?.address === account?.signer.address ? (
+                                {<VerifiedAuthor commentCid={comment.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address || 
+                                <VerifiedAuthor commentCid={comment.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
                                 <>
                                   <li onClick={() => handleAuthorEditClick(comment)}>Edit post</li>
                                   <li onClick={() => handleAuthorDeleteClick(comment)}>Delete post</li>
@@ -1032,8 +1033,8 @@ const Thread = () => {
                               ) : null}
                               {isModerator ? (
                                 <>
-                                  {comment.author?.address === account?.author.address || 
-                                    comment.author?.address === account?.signer.address ? (
+                                  {<VerifiedAuthor commentCid={comment.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address || 
+                                    <VerifiedAuthor commentCid={comment.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
                                     null
                                   ) : (
                                     <li onClick={() => {
@@ -1271,8 +1272,8 @@ const Thread = () => {
                               >
                                 <ul className="post-menu-catalog">
                                   <li onClick={() => handleOptionClick(reply.cid)}>Hide post</li>
-                                    {reply.author.address === account?.author.address ||
-                                    reply.author.address === account?.signer.address ? (
+                                    {<VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address ||
+                                    <VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
                                     <>
                                       <li onClick={() => handleAuthorEditClick(reply)}>Edit post</li>
                                       <li onClick={() => handleAuthorDeleteClick(reply)}>Delete post</li>
@@ -1280,8 +1281,8 @@ const Thread = () => {
                                   ) : null}
                                   {isModerator ? (
                                     <>
-                                    {reply.author.address === account?.author.address ||
-                                    reply.author.address === account?.signer.address ? (
+                                    {<VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address ||
+                                    <VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
                                         null
                                       ) : (
                                         <li onClick={() => {
@@ -1578,11 +1579,11 @@ const Thread = () => {
                           &nbsp;
                           <span key={`mob-pa-${comment.cid}`} className="poster-address-mobile address-mobile"
                             id="reply-button" style={{cursor: "pointer"}}
-                            onClick={() => handleAddressClick(comment?.author?.shortAddress)}
+                            onClick={() => handleAddressClick(<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
                           >
                             (u/
                             <span key={`mob-ha-${comment.cid}`} className="highlight-address-mobile">
-                              {comment?.author?.shortAddress}
+                              {<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>}
                             </span>
                             )&nbsp;
                           </span>

From ec2bc277c07cf801b4383ff009e5d2a3e1ed39dd Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sun, 9 Jul 2023 16:03:46 +0200
Subject: [PATCH 15/15] fix verified author actions

---
 src/components/views/All.jsx                  |  122 +-
 src/components/views/AllCatalog.jsx           |   68 +-
 src/components/views/Board.jsx                | 2754 +++++++++--------
 src/components/views/Catalog.jsx              |   64 +-
 src/components/views/Subscriptions.jsx        |  122 +-
 src/components/views/SubscriptionsCatalog.jsx |   68 +-
 src/components/views/Thread.jsx               |  120 +-
 7 files changed, 1682 insertions(+), 1636 deletions(-)

diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx
index 68e4e058..d984ba16 100755
--- a/src/components/views/All.jsx
+++ b/src/components/views/All.jsx
@@ -849,40 +849,44 @@ const All = () => {
                               >
                                 <ul className="post-menu-catalog">
                                   <li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
-                                  {<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address ||
-                                  <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
+                                  <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
                                     <>
-                                      <li onClick={() => {handleAuthorEditClick(thread); setSelectedAddress(thread.subplebbitAddress);}}>Edit post</li>
-                                      <li onClick={() => {handleAuthorDeleteClick(thread); setSelectedAddress(thread.subplebbitAddress);}}>Delete post</li>
+                                      {authorAddress === account?.author.address || 
+                                      authorAddress === account?.signer.address ? (
+                                        <>
+                                          <li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
+                                          <li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
+                                        </>
+                                      ) : null}
+                                      {isModerator ? (
+                                        <>
+                                          {authorAddress === account?.author.address ||
+                                          authorAddress === account?.signer.address ? (
+                                            null
+                                          ) : (
+                                            <li onClick={() => {
+                                              setSelectedAddress(thread.subplebbitAddress);
+                                              setModeratingCommentCid(thread.cid)
+                                              setIsModerationOpen(true); 
+                                              handleOptionClick(thread.cid);
+                                              setDeletePost(true);
+                                            }}>
+                                              Delete post
+                                            </li>
+                                          )}
+                                          <li
+                                          onClick={() => {
+                                            setSelectedAddress(thread.subplebbitAddress);
+                                            setModeratingCommentCid(thread.cid)
+                                            setIsModerationOpen(true); 
+                                            handleOptionClick(thread.cid);
+                                          }}>
+                                            Mod tools
+                                          </li>
+                                        </>
+                                      ) : null}
                                     </>
-                                  ) : null}
-                                  {isModerator ? (
-                                    <>
-                                      {<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address ||
-                                      <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
-                                        null
-                                      ) : (
-                                        <li onClick={() => {
-                                          setSelectedAddress(thread.subplebbitAddress);
-                                          setModeratingCommentCid(thread.cid)
-                                          setIsModerationOpen(true); 
-                                          handleOptionClick(thread.cid);
-                                          setDeletePost(true);
-                                        }}>
-                                        Delete post
-                                        </li>
-                                      )}
-                                      <li
-                                      onClick={() => {
-                                        setSelectedAddress(thread.subplebbitAddress);
-                                        setModeratingCommentCid(thread.cid)
-                                        setIsModerationOpen(true); 
-                                        handleOptionClick(thread.cid);
-                                      }}>
-                                        Mod tools
-                                      </li>
-                                    </>
-                                  ) : null}
+                                  )}</VerifiedAuthor>
                                   {(commentMediaInfo && (
                                     commentMediaInfo.type === 'image' || 
                                     (commentMediaInfo.type === 'webpage' && 
@@ -1139,40 +1143,44 @@ const All = () => {
                               >
                                 <ul className="post-menu-catalog">
                                   <li onClick={() => handleOptionClick(reply.cid)}>Hide post</li>
-                                  {<VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address ||
-                                    <VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
+                                  <VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (
                                     <>
-                                      <li onClick={() => {handleAuthorEditClick(reply); setSelectedAddress(thread.subplebbitAddress);}}>Edit post</li>
-                                      <li onClick={() => {handleAuthorDeleteClick(reply); setSelectedAddress(thread.subplebbitAddress);}}>Delete post</li>
-                                    </>
-                                  ) : null}
-                                  {isModerator ? (
-                                    <>
-                                    {<VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address ||
-                                    <VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
-                                        null
-                                      ) : (
-                                        <li onClick={() => {
+                                      {authorAddress === account?.author.address ||
+                                      authorAddress === account?.signer.address ? (
+                                        <>
+                                          <li onClick={() => handleAuthorEditClick(reply)}>Edit post</li>
+                                          <li onClick={() => handleAuthorDeleteClick(reply)}>Delete post</li>
+                                        </>
+                                      ) : null}
+                                      {isModerator ? (
+                                        <>
+                                          {authorAddress === account?.author.address || 
+                                          authorAddress === account?.signer.address ? (
+                                            null
+                                          ) : (
+                                          <li onClick={() => {
                                           setSelectedAddress(thread.subplebbitAddress);
                                           setModeratingCommentCid(reply.cid)
                                           setIsModerationOpen(true); 
                                           handleOptionClick(reply.cid);
                                           setDeletePost(true);
+                                          }}>
+                                          Delete post
+                                          </li>
+                                        )}
+                                        <li
+                                        onClick={() => {
+                                          setSelectedAddress(thread.subplebbitAddress);
+                                          setModeratingCommentCid(reply.cid)
+                                          setIsModerationOpen(true); 
+                                          handleOptionClick(reply.cid);
                                         }}>
-                                        Delete post
+                                          Mod tools
                                         </li>
-                                      )}
-                                      <li
-                                      onClick={() => {
-                                        setSelectedAddress(thread.subplebbitAddress);
-                                        setModeratingCommentCid(reply.cid)
-                                        setIsModerationOpen(true); 
-                                        handleOptionClick(reply.cid);
-                                      }}>
-                                        Mod tools
-                                      </li>
+                                      </>
+                                      ) : null}
                                     </>
-                                  ) : null}
+                                  )}</VerifiedAuthor>
                                   {(replyMediaInfo && (
                                     replyMediaInfo.type === 'image' || 
                                     (replyMediaInfo.type === 'webpage' && 
diff --git a/src/components/views/AllCatalog.jsx b/src/components/views/AllCatalog.jsx
index 6400ecba..88819ac8 100755
--- a/src/components/views/AllCatalog.jsx
+++ b/src/components/views/AllCatalog.jsx
@@ -560,40 +560,44 @@ const AllCatalog = () => {
                           >
                             <ul className="post-menu-catalog">
                               <li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
-                              {<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address || 
-                              <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
+                              <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
                                 <>
-                                  <li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
-                                  <li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
+                                  {authorAddress === account?.author.address || 
+                                  authorAddress === account?.signer.address ? (
+                                    <>
+                                      <li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
+                                      <li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
+                                    </>
+                                  ) : null}
+                                  {isModerator ? (
+                                    <>
+                                      {authorAddress === account?.author.address ||
+                                      authorAddress === account?.signer.address ? (
+                                        null
+                                      ) : (
+                                        <li onClick={() => {
+                                          setSelectedAddress(thread.subplebbitAddress);
+                                          setModeratingCommentCid(thread.cid)
+                                          setIsModerationOpen(true); 
+                                          handleOptionClick(thread.cid);
+                                          setDeletePost(true);
+                                        }}>
+                                        Delete post
+                                        </li>
+                                      )}
+                                      <li
+                                      onClick={() => {
+                                        setSelectedAddress(thread.subplebbitAddress);
+                                        setModeratingCommentCid(thread.cid)
+                                        setIsModerationOpen(true); 
+                                        handleOptionClick(thread.cid);
+                                      }}>
+                                        Mod tools
+                                      </li>
+                                    </>
+                                  ) : null}
                                 </>
-                              ) : null}
-                              {isModerator ? (
-                                <>
-                                  {<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address || 
-                                  <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
-                                    null
-                                  ) : (
-                                    <li onClick={() => {
-                                      setSelectedAddress(thread.subplebbitAddress);
-                                      setModeratingCommentCid(thread.cid)
-                                      setIsModerationOpen(true); 
-                                      handleOptionClick(thread.cid);
-                                      setDeletePost(true);
-                                    }}>
-                                    Delete post
-                                    </li>
-                                  )}
-                                  <li
-                                  onClick={() => {
-                                    setSelectedAddress(thread.subplebbitAddress);
-                                    setModeratingCommentCid(thread.cid)
-                                    setIsModerationOpen(true); 
-                                    handleOptionClick(thread.cid);
-                                  }}>
-                                    Mod tools
-                                  </li>
-                                </>
-                              ) : null}
+                              )}</VerifiedAuthor>
                               {(commentMediaInfo && (
                                 commentMediaInfo.type === 'image' || 
                                 (commentMediaInfo.type === 'webpage' && 
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index f9109d95..140e5b27 100755
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -1274,463 +1274,159 @@ const Board = () => {
                     const commentMediaInfo = getCommentMediaInfo(thread);
                     const fallbackImgUrl = "assets/filedeleted-res.gif";
                     return (
-                  <Fragment key={`fr-${index}`}>
-                    <div key={`t-${index}`} className="thread">
-                      <div key={`c-${index}`} className="op-container">
-                        <div key={`po-${index}`} className="post op op-desktop">
-                          <hr key={`hr-${index}`} />
-                          <div key={`pi-${index}`} className="post-info">
-                          {commentMediaInfo?.url ? (
-                            <div key={`f-${index}`} className="file" style={{marginBottom: "5px"}}>
-                              <div key={`ft-${index}`} className="file-text">
-                                Link:&nbsp;
-                                <a key={`fa-${index}`} href={commentMediaInfo.url} target="_blank"
-                                rel="noopener noreferrer">{
-                                commentMediaInfo?.url.length > 30 ?
-                                commentMediaInfo?.url.slice(0, 30) + "(...)" :
-                                commentMediaInfo?.url
-                                }</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type})
-                                {isThumbnailClicked[index] ? (
-                                  <span>
-                                    -[
-                                      <span className='reply-link' 
-                                      style={{textDecoration: 'underline', cursor: 'pointer'}}
-                                      onClick={() => {handleThumbnailClick(index)}}>Close</span>
-                                    ]
-                                  </span>
-                                ) : null}
-                              </div>
-                              {commentMediaInfo?.type === 'iframe' && (
-                                <div key={`enlarge-${index}`}
-                                className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}>
-                                  <span key={`fta-${index}`} className="file-thumb">
-                                    {(isThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
-                                      <iframe 
-                                        className='enlarged'
-                                        key={`fti-${index}`} 
-                                        src={commentMediaInfo.embedUrl}
-                                        width={commentMediaInfo.thumbnail ? "560" : "250"} 
-                                        height="315"
-                                        style={{border: "none"}}
-                                        title="Embedded content"
-                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
-                                        allowFullScreen />
-                                    ) : (
-                                      <img 
-                                        key={`fti-${index}`}
-                                        src={commentMediaInfo.thumbnail} 
-                                        alt="thumbnail"
-                                        onClick={() => {handleThumbnailClick(index)}}
+                      <Fragment key={`fr-${index}`}>
+                        <div key={`t-${index}`} className="thread">
+                          <div key={`c-${index}`} className="op-container">
+                            <div key={`po-${index}`} className="post op op-desktop">
+                              <hr key={`hr-${index}`} />
+                              <div key={`pi-${index}`} className="post-info">
+                              {commentMediaInfo?.url ? (
+                                <div key={`f-${index}`} className="file" style={{marginBottom: "5px"}}>
+                                  <div key={`ft-${index}`} className="file-text">
+                                    Link:&nbsp;
+                                    <a key={`fa-${index}`} href={commentMediaInfo.url} target="_blank"
+                                    rel="noopener noreferrer">{
+                                    commentMediaInfo?.url.length > 30 ?
+                                    commentMediaInfo?.url.slice(0, 30) + "(...)" :
+                                    commentMediaInfo?.url
+                                    }</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type})
+                                    {isThumbnailClicked[index] ? (
+                                      <span>
+                                        -[
+                                          <span className='reply-link' 
+                                          style={{textDecoration: 'underline', cursor: 'pointer'}}
+                                          onClick={() => {handleThumbnailClick(index)}}>Close</span>
+                                        ]
+                                      </span>
+                                    ) : null}
+                                  </div>
+                                  {commentMediaInfo?.type === 'iframe' && (
+                                    <div key={`enlarge-${index}`}
+                                    className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}>
+                                      <span key={`fta-${index}`} className="file-thumb">
+                                        {(isThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
+                                          <iframe 
+                                            className='enlarged'
+                                            key={`fti-${index}`} 
+                                            src={commentMediaInfo.embedUrl}
+                                            width={commentMediaInfo.thumbnail ? "560" : "250"} 
+                                            height="315"
+                                            style={{border: "none"}}
+                                            title="Embedded content"
+                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                                            allowFullScreen />
+                                        ) : (
+                                          <img 
+                                            key={`fti-${index}`}
+                                            src={commentMediaInfo.thumbnail} 
+                                            alt="thumbnail"
+                                            onClick={() => {handleThumbnailClick(index)}}
+                                            style={{cursor: "pointer"}}
+                                            onError={(e) => e.target.src = fallbackImgUrl} />
+                                        )}
+                                      </span>
+                                    </div>
+                                  )}
+                                  {commentMediaInfo?.type === "webpage" ? (
+                                    <div key={`enlarge-${index}`} className="img-container">
+                                      <span key={`fta-${index}`} className="file-thumb">
+                                        {thread.thumbnailUrl ? (
+                                          <img key={`fti-${index}`} 
+                                          src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
+                                          onClick={handleImageClick}
+                                          style={{cursor: "pointer"}}
+                                          onError={(e) => e.target.src = fallbackImgUrl} />
+                                        ) : null}
+                                      </span>
+                                    </div>
+                                  ) : null}
+                                  {commentMediaInfo?.type === "image" ? (
+                                    <div key={`enlarge-${index}`} className="img-container">
+                                      <span key={`fta-${index}`} className="file-thumb">
+                                        <img key={`fti-${index}`} 
+                                        src={commentMediaInfo.url} alt={commentMediaInfo.type}
+                                        onClick={handleImageClick}
                                         style={{cursor: "pointer"}}
                                         onError={(e) => e.target.src = fallbackImgUrl} />
-                                    )}
-                                  </span>
-                                </div>
-                              )}
-                              {commentMediaInfo?.type === "webpage" ? (
-                                <div key={`enlarge-${index}`} className="img-container">
-                                  <span key={`fta-${index}`} className="file-thumb">
-                                    {thread.thumbnailUrl ? (
-                                      <img key={`fti-${index}`} 
-                                      src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
-                                      onClick={handleImageClick}
-                                      style={{cursor: "pointer"}}
-                                      onError={(e) => e.target.src = fallbackImgUrl} />
-                                    ) : null}
-                                  </span>
-                                </div>
-                              ) : null}
-                              {commentMediaInfo?.type === "image" ? (
-                                <div key={`enlarge-${index}`} className="img-container">
-                                  <span key={`fta-${index}`} className="file-thumb">
-                                    <img key={`fti-${index}`} 
-                                    src={commentMediaInfo.url} alt={commentMediaInfo.type}
-                                    onClick={handleImageClick}
-                                    style={{cursor: "pointer"}}
-                                    onError={(e) => e.target.src = fallbackImgUrl} />
-                                  </span>
-                                </div>
-                              ) : null}
-                              {commentMediaInfo?.type === "video" ? (
-                              <div key={`enlarge-${index}`} className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}>
-                                <span key={`fta-${index}`} className="file-thumb">
-                                  {isThumbnailClicked[index] ? (
-                                    <video 
-                                      className='enlarged'
-                                      key={`fti-${index}`} 
-                                      src={commentMediaInfo.url} 
-                                      controls
-                                      style={{cursor: "pointer"}}
-                                      onError={(e) => e.target.src = fallbackImgUrl} 
-                                    />
-                                  ) : (
-                                    <video 
-                                      key={`fti-${index}`}
-                                      src={commentMediaInfo.url} 
-                                      alt="thumbnail"
-                                      onClick={() => {handleThumbnailClick(index)}}
-                                      style={{cursor: "pointer"}}
-                                      onError={(e) => e.target.src = fallbackImgUrl} 
-                                    />
-                                  )}
-                                </span>
-                              </div>
-                              ) : null}
-                              {commentMediaInfo?.type === "audio" ? (
-                                <span key={`fta-${index}`} className="file-thumb">
-                                  <audio controls key={`fti-${index}`} 
-                                  src={commentMediaInfo.url} alt={commentMediaInfo.type}
-                                  onError={(e) => e.target.src = fallbackImgUrl} />
-                                </span>
-                              ) : null}
-                            </div>
-                          ) : null}
-                            <span key={`nb-${index}`} className="name-block">
-                              {thread.title ? (
-                                thread.title.length > 75 ?
-                                <Fragment key={`fragment2-${index}`}>
-                                  <span key={`q-${index}`} className="title"
-                                  data-tooltip-id="tooltip"
-                                  data-tooltip-content={thread.title}
-                                  data-tooltip-place="top">
-                                    {thread.title.slice(0, 75) + " (...)"}
-                                  </span>
-                                </Fragment>
-                              : <span key={`q-${index}`} className="title">
-                                {thread.title}
-                                </span>) 
-                              : null}&nbsp;
-                              {thread.author.displayName
-                              ? thread.author.displayName.length > 20
-                              ? <Fragment key={`fragment3-${index}`}>
-                                  <span key={`n-${index}`} className="name"
-                                  data-tooltip-id="tooltip"
-                                  data-tooltip-content={thread.author.displayName}
-                                  data-tooltip-place="top">
-                                    {thread.author.displayName.slice(0, 20) + " (...)"}
-                                  </span>
-                                </Fragment> 
-                                : <span key={`n-${index}`} className="name">
-                                  {thread.author.displayName}</span>
-                              : <span key={`n-${index}`} className="name">
-                                Anonymous</span>}
-                              &nbsp;
-                              (u/
-                              <span key={`pa-${index}`} className="poster-address address-desktop"
-                              id="reply-button" style={{cursor: "pointer"}}
-                                onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
-                              >
-                                <VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>
-                              </span>)
-                              &nbsp;
-                              <span key={`dt-${index}`} className="date-time" data-utc="data">{getDate(thread.timestamp)}</span>
-                              &nbsp;
-                              <span key={`pn-${index}`} className="post-number post-number-desktop">
-                                <span key={`pl1-${index}`}>c/</span>
-                                <Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`pl2-${index}`} 
-                                onClick={(e) => {
-                                  if (e.button === 2) return;
-                                  e.preventDefault();
-                                  setSelectedThreadCid(thread.cid);
-                                  let text = document.getSelection().toString();
-                                  text = text ? `>${text}` : text;
-                                  setSelectedText(text);
-                                  if (isReplyOpen) {
-                                    setReplyQuoteCid(thread.shortCid);
-                                    setTriggerInsertion(Date.now());
-                                  } else {
-                                    setIsReplyOpen(true); 
-                                    setSelectedShortCid(thread.shortCid); 
-                                    setSelectedParentCid(thread.cid);
-                                  }
-                                  }} title="Reply to this post">{thread.shortCid}</Link>
-                                &nbsp;
-                              {thread.pinned ? (
-                                <>
-                                  &nbsp;
-                                  <img src="assets/sticky.gif" alt="Sticky" title="Sticky"
-                                  style={{marginBottom: "-1px",
-                                  imageRendering: "pixelated",}} />
-                                </>
-                              ) : null}
-                              {thread.locked ? (
-                                <>
-                                  &nbsp;
-                                  <img src="assets/closed.gif" alt="Closed" title="Closed"
-                                  style={{
-                                    marginBottom: "-1px",
-                                    imageRendering: "pixelated",
-                                    }} />
-                                </>
-                              ) : null}
-                                <span key={`rl1-${index}`}>&nbsp;
-                                  [
-                                  <Link key={`rl2-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="reply-link" >Reply</Link>
-                                  ]
-                                </span>
-                              </span>
-                              <PostMenu 
-                                key={`pmb-${index}`} 
-                                title="Post menu"
-                                ref={el => { 
-                                  threadMenuRefs.current[thread.cid] = el;
-                                }}
-                                className='post-menu-button' 
-                                rotated={openMenuCid === thread.cid}
-                                onClick={(event) => {
-                                  event.stopPropagation();
-                                  const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
-                                  setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
-                                  setOpenMenuCid(prevCid => (prevCid === thread.cid ? null : thread.cid));
-                                }}                              
-                              >
-                                ▶
-                              </PostMenu>
-                              {createPortal(
-                                <PostMenuCatalog selectedStyle={selectedStyle} 
-                                ref={el => {postMenuCatalogRef.current = el}}
-                                onClick={(event) => event.stopPropagation()}
-                                style={{position: "absolute", 
-                                top: menuPosition.top + 7, 
-                                left: menuPosition.left}}>
-                                <div className={`post-menu-thread post-menu-thread-${thread.cid}`}
-                                style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}
-                                >
-                                  <ul className="post-menu-catalog">
-                                    <li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
-                                    {<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address || 
-                                    <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
-                                      <>
-                                        <li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
-                                        <li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
-                                      </>
-                                    ) : null}
-                                    {isModerator ? (
-                                      <>
-                                        {<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address ||
-                                         <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
-                                          null
-                                        ) : (
-                                          <li onClick={() => {
-                                            setModeratingCommentCid(thread.cid)
-                                            setIsModerationOpen(true); 
-                                            handleOptionClick(thread.cid);
-                                            setDeletePost(true);
-                                          }}>
-                                          Delete post
-                                          </li>
-                                        )}
-                                        <li
-                                        onClick={() => {
-                                          setModeratingCommentCid(thread.cid)
-                                          setIsModerationOpen(true); 
-                                          handleOptionClick(thread.cid);
-                                        }}>
-                                          Mod tools
-                                        </li>
-                                      </>
-                                    ) : null}
-                                    {(commentMediaInfo && (
-                                      commentMediaInfo.type === 'image' || 
-                                      (commentMediaInfo.type === 'webpage' && 
-                                      commentMediaInfo.thumbnail))) ? ( 
-                                        <li 
-                                        onMouseOver={() => {setIsImageSearchOpen(true)}}
-                                        onMouseLeave={() => {setIsImageSearchOpen(false)}}>
-                                          Image search »
-                                          <ul className="dropdown-menu post-menu-catalog"
-                                            style={{display: isImageSearchOpen ? 'block': 'none'}}>
-                                            <li onClick={() => handleOptionClick(thread.cid)}>
-                                              <a 
-                                              href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
-                                              target="_blank" rel="noreferrer"
-                                              >Google</a>
-                                            </li>
-                                            <li onClick={() => handleOptionClick(thread.cid)}>
-                                              <a
-                                              href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
-                                              target="_blank" rel="noreferrer"
-                                              >Yandex</a>
-                                            </li>
-                                            <li onClick={() => handleOptionClick(thread.cid)}>
-                                              <a
-                                              href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
-                                              target="_blank" rel="noreferrer"
-                                              >SauceNAO</a>
-                                            </li>
-                                          </ul>
-                                        </li>
-                                      ) : null
-                                    }
-                                  </ul>
-                                </div>
-                                </PostMenuCatalog>, document.body
-                              )}
-                              <div key={`bi-${index}`} id="backlink-id" className="backlink">
-                                {thread.replies?.pages?.topAll.comments
-                                  .sort((a, b) => a.timestamp - b.timestamp)
-                                  .map((reply, index) => (
-                                    <div key={`div-${index}`} style={{display: 'inline-block'}} 
-                                    ref={el => {
-                                      backlinkRefs.current[reply.cid] = el;
-                                    }}>
-                                      <Link key={`ql-${index}`}
-                                      to={() => {}}
-                                      className="quote-link" 
-                                      onClick={(event) => handleQuoteClick(reply, null, event)}
-                                      onMouseOver={(event) => {
-                                        event.stopPropagation();
-                                        handleQuoteHover(reply, null, () => {
-                                          const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
-                                          const distanceToRight = window.innerWidth - rect.right;
-                                          const distanceToTop = rect.top;
-                                          const distanceToBottom = window.innerHeight - rect.bottom;
-                                          let top;
-
-                                          if (distanceToTop < postOnHoverHeight / 2) {
-                                            top = window.scrollY - 5;
-                                          } else if (distanceToBottom < postOnHoverHeight / 2) {
-                                            top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
-                                          } else {
-                                            top = rect.top + window.scrollY - postOnHoverHeight / 2;
-                                          }
-                                        
-                                          if (distanceToRight < 200) {
-                                            setOutOfViewPosition({
-                                              top,
-                                              right: window.innerWidth - rect.left - 10,
-                                              maxWidth: rect.left - 5
-                                            });
-                                          } else {
-                                            setOutOfViewPosition({
-                                              top,
-                                              left: rect.left + rect.width + 5,
-                                              maxWidth: window.innerWidth - rect.left - rect.width - 5
-                                            });
-                                          }
-                                          setOutOfViewCid(reply.cid);
-                                        });
-                                      }}
-                                      onMouseLeave={() => {
-                                        removeHighlight();
-                                        setOutOfViewCid(null);
-                                      }}>
-                                        c/{reply.shortCid}</Link>
-                                        &nbsp;
+                                      </span>
                                     </div>
-                                  ))
-                                }
-                              </div>
-                            </span>
-                            {thread.content ? (
-                              thread.content?.length > 1000 ?
-                              <Fragment key={`fragment5-${index}`}>
-                                <blockquote key={`bq-${index}`}>
-                                  <Post content={thread.content?.slice(0, 1000)} key={`post-${index}`} />
-                                  <span key={`ttl-s-${index}`} className="ttl"> (...) 
-                                    <br key={`ttl-s-br1-${index}`} />
-                                    <EditLabel key={`edit-label-thread-${index}`} 
-                                    commentCid={thread.cid}
-                                    className="ttl"/>
-                                    <StateLabel key={`state-label-thread-${index}`}
-                                    commentIndex={thread.index}
-                                    className="ttl ellipsis"/>
-                                    <br key={`ttl-s-br2${index}`} />
-                                    Post too long.&nbsp;
-                                    <Link key={`ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
-                                    &nbsp;to view. 
-                                  </span>
-                                </blockquote>
-                              </Fragment>
-                            : <blockquote key={`bq-${index}`}>
-                                <Post content={thread.content} key={`post-${index}`} />
-                                <EditLabel key={`edit-label-thread-${index}`} 
-                                commentCid={thread.cid}
-                                className="ttl"/>
-                                <StateLabel key={`state-label-thread-${index}`}
-                                commentIndex={thread.index}
-                                className="ttl ellipsis"/>
-                              </blockquote>)
-                            : null}
-                          </div>
-                        </div>
-                      </div>
-                      <span key={`summary-${index}`} className="summary">
-                        {omittedCount > 0 ? (
-                          <>
-                            {thread.content ? null : <br />}
-                            <span key={`oc-${index}`} className="ttl">
-                              <span key={`oc1-${index}`}>
-                                {omittedCount} post{omittedCount > 1 ? "s" : ""} omitted. Click&nbsp;
-                                <Link key={`oc2-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">here</Link>
-                                &nbsp;to view.
-                              </span>
-                            </span>
-                          </>
-                        ) : null}
-                      </span>
-                      {displayedReplies?.map((reply, index) => {
-                        const replyMediaInfo = getCommentMediaInfo(reply);
-                        const fallbackImgUrl = "assets/filedeleted-res.gif";
-                        const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed);
-                        let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {};
-                        let signerAddress;
-                        if (storedSigners[reply.parentCid]) {
-                          signerAddress = storedSigners[reply.parentCid].address;
-                        }
-                        return (
-                          <div key={`rc-${index}`} className="reply-container">
-                            <div key={`sa-${index}`} className="side-arrows">{'>>'}</div>
-                            <div key={`pr-${index}`} className="post-reply post-reply-desktop">
-                              <div key={`pi-${index}`} className="post-info">
-                                <span key={`nb-${index}`} className="nameblock">
-                                  {reply.author.displayName
-                                    ? reply.author.displayName.length > 20
-                                    ? <Fragment key={`fragment6-${index}`}>
-                                        <span key={`mob-n-${index}`} className="name"
-                                        data-tooltip-id="tooltip"
-                                        data-tooltip-content={reply.author.displayName}
-                                        data-tooltip-place="top">
-                                          {reply.author.displayName.slice(0, 20) + " (...)"}
-                                        </span>
-                                      </Fragment>
-                                      : <span key={`mob-n-${index}`} className="name">
-                                        {reply.author.displayName}</span>
-                                    : <span key={`mob-n-${index}`} className="name">
-                                      Anonymous</span>}
+                                  ) : null}
+                                  {commentMediaInfo?.type === "video" ? (
+                                  <div key={`enlarge-${index}`} className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}>
+                                    <span key={`fta-${index}`} className="file-thumb">
+                                      {isThumbnailClicked[index] ? (
+                                        <video 
+                                          className='enlarged'
+                                          key={`fti-${index}`} 
+                                          src={commentMediaInfo.url} 
+                                          controls
+                                          style={{cursor: "pointer"}}
+                                          onError={(e) => e.target.src = fallbackImgUrl} 
+                                        />
+                                      ) : (
+                                        <video 
+                                          key={`fti-${index}`}
+                                          src={commentMediaInfo.url} 
+                                          alt="thumbnail"
+                                          onClick={() => {handleThumbnailClick(index)}}
+                                          style={{cursor: "pointer"}}
+                                          onError={(e) => e.target.src = fallbackImgUrl} 
+                                        />
+                                      )}
+                                    </span>
+                                  </div>
+                                  ) : null}
+                                  {commentMediaInfo?.type === "audio" ? (
+                                    <span key={`fta-${index}`} className="file-thumb">
+                                      <audio controls key={`fti-${index}`} 
+                                      src={commentMediaInfo.url} alt={commentMediaInfo.type}
+                                      onError={(e) => e.target.src = fallbackImgUrl} />
+                                    </span>
+                                  ) : null}
+                                </div>
+                              ) : null}
+                                <span key={`nb-${index}`} className="name-block">
+                                  {thread.title ? (
+                                    thread.title.length > 75 ?
+                                    <Fragment key={`fragment2-${index}`}>
+                                      <span key={`q-${index}`} className="title"
+                                      data-tooltip-id="tooltip"
+                                      data-tooltip-content={thread.title}
+                                      data-tooltip-place="top">
+                                        {thread.title.slice(0, 75) + " (...)"}
+                                      </span>
+                                    </Fragment>
+                                  : <span key={`q-${index}`} className="title">
+                                    {thread.title}
+                                    </span>) 
+                                  : null}&nbsp;
+                                  {thread.author.displayName
+                                  ? thread.author.displayName.length > 20
+                                  ? <Fragment key={`fragment3-${index}`}>
+                                      <span key={`n-${index}`} className="name"
+                                      data-tooltip-id="tooltip"
+                                      data-tooltip-content={thread.author.displayName}
+                                      data-tooltip-place="top">
+                                        {thread.author.displayName.slice(0, 20) + " (...)"}
+                                      </span>
+                                    </Fragment> 
+                                    : <span key={`n-${index}`} className="name">
+                                      {thread.author.displayName}</span>
+                                  : <span key={`n-${index}`} className="name">
+                                    Anonymous</span>}
                                   &nbsp;
+                                  (u/
                                   <span key={`pa-${index}`} className="poster-address address-desktop"
-                                    id="reply-button" style={{cursor: "pointer"}}
-                                    onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
+                                  id="reply-button" style={{cursor: "pointer"}}
+                                    onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
                                   >
-                                    (u/
-                                      {reply.author?.shortAddress ?
-                                        (
-                                          <span key={`mob-ha-${index}`}>
-                                            {reply.author?.shortAddress}
-                                          </span>
-                                        ) : (
-                                          anonymousMode ? (
-                                            <span key={`mob-ha-${index}`}>
-                                              {signerAddress?.slice(8, 20)}
-                                            </span>
-                                          ) : (
-                                            <span key={`mob-ha-${index}`}
-                                            >
-                                              {account?.author?.shortAddress}
-                                            </span>
-                                          )
-                                        )
-                                      }
-                                    )
-                                  </span>
-                                </span>
-                                &nbsp;
-                                <span key={`dt-${index}`} className="date-time" data-utc="data">{getDate(reply.timestamp)}</span>
-                                &nbsp;
-                                <span key={`pn-${index}`} className="post-number post-number-desktop">
-                                  <span key={`pl1-${index}`}>c/</span>
-                                  {reply.shortCid ? (
+                                    <VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>
+                                  </span>)
+                                  &nbsp;
+                                  <span key={`dt-${index}`} className="date-time" data-utc="data">{getDate(thread.timestamp)}</span>
+                                  &nbsp;
+                                  <span key={`pn-${index}`} className="post-number post-number-desktop">
+                                    <span key={`pl1-${index}`}>c/</span>
                                     <Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`pl2-${index}`} 
                                     onClick={(e) => {
                                       if (e.button === 2) return;
@@ -1740,131 +1436,1134 @@ const Board = () => {
                                       text = text ? `>${text}` : text;
                                       setSelectedText(text);
                                       if (isReplyOpen) {
-                                        setReplyQuoteCid(reply.shortCid);
+                                        setReplyQuoteCid(thread.shortCid);
                                         setTriggerInsertion(Date.now());
                                       } else {
                                         setIsReplyOpen(true); 
-                                        setSelectedShortCid(reply.shortCid); 
-                                        setSelectedParentCid(reply.cid);
+                                        setSelectedShortCid(thread.shortCid); 
+                                        setSelectedParentCid(thread.cid);
                                       }
-                                    }} title="Reply to this post">{reply.shortCid}</Link>
-                                  ) : (
-                                    <PendingLabel key="pending" commentIndex={reply.index} />
+                                      }} title="Reply to this post">{thread.shortCid}</Link>
+                                    &nbsp;
+                                  {thread.pinned ? (
+                                    <>
+                                      &nbsp;
+                                      <img src="assets/sticky.gif" alt="Sticky" title="Sticky"
+                                      style={{marginBottom: "-1px",
+                                      imageRendering: "pixelated",}} />
+                                    </>
+                                  ) : null}
+                                  {thread.locked ? (
+                                    <>
+                                      &nbsp;
+                                      <img src="assets/closed.gif" alt="Closed" title="Closed"
+                                      style={{
+                                        marginBottom: "-1px",
+                                        imageRendering: "pixelated",
+                                        }} />
+                                    </>
+                                  ) : null}
+                                    <span key={`rl1-${index}`}>&nbsp;
+                                      [
+                                      <Link key={`rl2-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="reply-link" >Reply</Link>
+                                      ]
+                                    </span>
+                                  </span>
+                                  <PostMenu 
+                                    key={`pmb-${index}`} 
+                                    title="Post menu"
+                                    ref={el => { 
+                                      threadMenuRefs.current[thread.cid] = el;
+                                    }}
+                                    className='post-menu-button' 
+                                    rotated={openMenuCid === thread.cid}
+                                    onClick={(event) => {
+                                      event.stopPropagation();
+                                      const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
+                                      setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
+                                      setOpenMenuCid(prevCid => (prevCid === thread.cid ? null : thread.cid));
+                                    }}                              
+                                  >
+                                    ▶
+                                  </PostMenu>
+                                  {createPortal(
+                                    <PostMenuCatalog selectedStyle={selectedStyle} 
+                                    ref={el => {postMenuCatalogRef.current = el}}
+                                    onClick={(event) => event.stopPropagation()}
+                                    style={{position: "absolute", 
+                                    top: menuPosition.top + 7, 
+                                    left: menuPosition.left}}>
+                                    <div className={`post-menu-thread post-menu-thread-${thread.cid}`}
+                                    style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}
+                                    >
+                                      <ul className="post-menu-catalog">
+                                        <li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
+                                        <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
+                                          <>
+                                            {authorAddress === account?.author.address || 
+                                            authorAddress === account?.signer.address ? (
+                                              <>
+                                                <li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
+                                                <li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
+                                              </>
+                                            ) : null}
+                                            {isModerator ? (
+                                              <>
+                                                {authorAddress === account?.author.address ||
+                                                authorAddress === account?.signer.address ? (
+                                                  null
+                                                ) : (
+                                                  <li onClick={() => {
+                                                    setModeratingCommentCid(thread.cid)
+                                                    setIsModerationOpen(true); 
+                                                    handleOptionClick(thread.cid);
+                                                    setDeletePost(true);
+                                                  }}>
+                                                  Delete post
+                                                  </li>
+                                                )}
+                                                <li
+                                                onClick={() => {
+                                                  setModeratingCommentCid(thread.cid)
+                                                  setIsModerationOpen(true); 
+                                                  handleOptionClick(thread.cid);
+                                                }}>
+                                                  Mod tools
+                                                </li>
+                                              </>
+                                            ) : null}
+                                          </>
+                                        )}</VerifiedAuthor>
+                                        {(commentMediaInfo && (
+                                          commentMediaInfo.type === 'image' || 
+                                          (commentMediaInfo.type === 'webpage' && 
+                                          commentMediaInfo.thumbnail))) ? ( 
+                                            <li 
+                                            onMouseOver={() => {setIsImageSearchOpen(true)}}
+                                            onMouseLeave={() => {setIsImageSearchOpen(false)}}>
+                                              Image search »
+                                              <ul className="dropdown-menu post-menu-catalog"
+                                                style={{display: isImageSearchOpen ? 'block': 'none'}}>
+                                                <li onClick={() => handleOptionClick(thread.cid)}>
+                                                  <a 
+                                                  href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
+                                                  target="_blank" rel="noreferrer"
+                                                  >Google</a>
+                                                </li>
+                                                <li onClick={() => handleOptionClick(thread.cid)}>
+                                                  <a
+                                                  href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
+                                                  target="_blank" rel="noreferrer"
+                                                  >Yandex</a>
+                                                </li>
+                                                <li onClick={() => handleOptionClick(thread.cid)}>
+                                                  <a
+                                                  href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
+                                                  target="_blank" rel="noreferrer"
+                                                  >SauceNAO</a>
+                                                </li>
+                                              </ul>
+                                            </li>
+                                          ) : null
+                                        }
+                                      </ul>
+                                    </div>
+                                    </PostMenuCatalog>, document.body
                                   )}
-                                </span>&nbsp;
-                                <PostMenu 
-                                key={`pmb-${index}`} 
-                                title="Post menu"
-                                ref={el => { 
-                                  replyMenuRefs.current[reply.cid] = el; 
-                                }}
-                                className='post-menu-button' 
-                                rotated={openMenuCid === reply.cid}
-                                onClick={(event) => {
-                                  event.stopPropagation();
-                                  const rect = replyMenuRefs.current[reply.cid].getBoundingClientRect();
-                                  setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
-                                  setOpenMenuCid(prevCid => (prevCid === reply.cid ? null : reply.cid));
-                                }} 
-                              >
-                                ▶
-                              </PostMenu>
-                              {createPortal(
-                                <PostMenuCatalog selectedStyle={selectedStyle} 
-                                ref={el => {postMenuCatalogRef.current = el}}
-                                onClick={(event) => event.stopPropagation()}
-                                style={{position: "absolute", 
-                                top: menuPosition.top + 7, 
-                                left: menuPosition.left}}>
-                                <div className={`post-menu-reply post-menu-reply-${reply.cid}`}
-                                style={{ display: openMenuCid === reply.cid ? 'block' : 'none' }}
-                                >
-                                  <ul className="post-menu-catalog">
-                                    <li onClick={() => handleOptionClick(reply.cid)}>Hide post</li>
-                                    {<VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address ||
-                                    <VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
-                                      <>
-                                        <li onClick={() => handleAuthorEditClick(reply)}>Edit post</li>
-                                        <li onClick={() => handleAuthorDeleteClick(reply)}>Delete post</li>
-                                      </>
-                                    ) : null}
-                                    {isModerator ? (
-                                      <>
-                                        {<VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address || 
-                                         <VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
-                                          null
-                                        ) : (
-                                          <li onClick={() => {
-                                            setModeratingCommentCid(reply.cid)
-                                            setIsModerationOpen(true); 
-                                            handleOptionClick(reply.cid);
-                                            setDeletePost(true);
-                                          }}>
-                                          Delete post
-                                          </li>
-                                        )}
-                                        <li
-                                        onClick={() => {
-                                          setModeratingCommentCid(reply.cid)
-                                          setIsModerationOpen(true); 
-                                          handleOptionClick(reply.cid);
+                                  <div key={`bi-${index}`} id="backlink-id" className="backlink">
+                                    {thread.replies?.pages?.topAll.comments
+                                      .sort((a, b) => a.timestamp - b.timestamp)
+                                      .map((reply, index) => (
+                                        <div key={`div-${index}`} style={{display: 'inline-block'}} 
+                                        ref={el => {
+                                          backlinkRefs.current[reply.cid] = el;
                                         }}>
-                                          Mod tools
-                                        </li>
-                                      </>
-                                    ) : null}
-                                    {(replyMediaInfo && (
-                                      replyMediaInfo.type === 'image' || 
-                                      (replyMediaInfo.type === 'webpage' && 
-                                      replyMediaInfo.thumbnail))) ? ( 
-                                        <li 
-                                        onMouseOver={() => {setIsImageSearchOpen(true)}}
-                                        onMouseLeave={() => {setIsImageSearchOpen(false)}}>
-                                          Image search »
-                                          <ul className="dropdown-menu post-menu-catalog"
-                                            style={{display: isImageSearchOpen ? 'block': 'none'}}>
-                                            <li onClick={() => handleOptionClick(reply.cid)}>
-                                              <a 
-                                              href={`https://lens.google.com/uploadbyurl?url=${replyMediaInfo.url}`}
-                                              target="_blank" rel="noreferrer"
-                                              >Google</a>
-                                            </li>
-                                            <li onClick={() => handleOptionClick(reply.cid)}>
-                                              <a
-                                              href={`https://yandex.com/images/search?url=${replyMediaInfo.url}`}
-                                              target="_blank" rel="noreferrer"
-                                              >Yandex</a>
-                                            </li>
-                                            <li onClick={() => handleOptionClick(reply.cid)}>
-                                              <a
-                                              href={`https://saucenao.com/search.php?url=${replyMediaInfo.url}`}
-                                              target="_blank" rel="noreferrer"
-                                              >SauceNAO</a>
-                                            </li>
-                                          </ul>
-                                        </li>
-                                      ) : null
+                                          <Link key={`ql-${index}`}
+                                          to={() => {}}
+                                          className="quote-link" 
+                                          onClick={(event) => handleQuoteClick(reply, null, event)}
+                                          onMouseOver={(event) => {
+                                            event.stopPropagation();
+                                            handleQuoteHover(reply, null, () => {
+                                              const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
+                                              const distanceToRight = window.innerWidth - rect.right;
+                                              const distanceToTop = rect.top;
+                                              const distanceToBottom = window.innerHeight - rect.bottom;
+                                              let top;
+
+                                              if (distanceToTop < postOnHoverHeight / 2) {
+                                                top = window.scrollY - 5;
+                                              } else if (distanceToBottom < postOnHoverHeight / 2) {
+                                                top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
+                                              } else {
+                                                top = rect.top + window.scrollY - postOnHoverHeight / 2;
+                                              }
+                                            
+                                              if (distanceToRight < 200) {
+                                                setOutOfViewPosition({
+                                                  top,
+                                                  right: window.innerWidth - rect.left - 10,
+                                                  maxWidth: rect.left - 5
+                                                });
+                                              } else {
+                                                setOutOfViewPosition({
+                                                  top,
+                                                  left: rect.left + rect.width + 5,
+                                                  maxWidth: window.innerWidth - rect.left - rect.width - 5
+                                                });
+                                              }
+                                              setOutOfViewCid(reply.cid);
+                                            });
+                                          }}
+                                          onMouseLeave={() => {
+                                            removeHighlight();
+                                            setOutOfViewCid(null);
+                                          }}>
+                                            c/{reply.shortCid}</Link>
+                                            &nbsp;
+                                        </div>
+                                      ))
                                     }
-                                  </ul>
+                                  </div>
+                                </span>
+                                {thread.content ? (
+                                  thread.content?.length > 1000 ?
+                                  <Fragment key={`fragment5-${index}`}>
+                                    <blockquote key={`bq-${index}`}>
+                                      <Post content={thread.content?.slice(0, 1000)} key={`post-${index}`} />
+                                      <span key={`ttl-s-${index}`} className="ttl"> (...) 
+                                        <br key={`ttl-s-br1-${index}`} />
+                                        <EditLabel key={`edit-label-thread-${index}`} 
+                                        commentCid={thread.cid}
+                                        className="ttl"/>
+                                        <StateLabel key={`state-label-thread-${index}`}
+                                        commentIndex={thread.index}
+                                        className="ttl ellipsis"/>
+                                        <br key={`ttl-s-br2${index}`} />
+                                        Post too long.&nbsp;
+                                        <Link key={`ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
+                                        &nbsp;to view. 
+                                      </span>
+                                    </blockquote>
+                                  </Fragment>
+                                : <blockquote key={`bq-${index}`}>
+                                    <Post content={thread.content} key={`post-${index}`} />
+                                    <EditLabel key={`edit-label-thread-${index}`} 
+                                    commentCid={thread.cid}
+                                    className="ttl"/>
+                                    <StateLabel key={`state-label-thread-${index}`}
+                                    commentIndex={thread.index}
+                                    className="ttl ellipsis"/>
+                                  </blockquote>)
+                                : null}
+                              </div>
+                            </div>
+                          </div>
+                          <span key={`summary-${index}`} className="summary">
+                            {omittedCount > 0 ? (
+                              <>
+                                {thread.content ? null : <br />}
+                                <span key={`oc-${index}`} className="ttl">
+                                  <span key={`oc1-${index}`}>
+                                    {omittedCount} post{omittedCount > 1 ? "s" : ""} omitted. Click&nbsp;
+                                    <Link key={`oc2-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">here</Link>
+                                    &nbsp;to view.
+                                  </span>
+                                </span>
+                              </>
+                            ) : null}
+                          </span>
+                          {displayedReplies?.map((reply, index) => {
+                            const replyMediaInfo = getCommentMediaInfo(reply);
+                            const fallbackImgUrl = "assets/filedeleted-res.gif";
+                            const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed);
+                            let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {};
+                            let signerAddress;
+                            if (storedSigners[reply.parentCid]) {
+                              signerAddress = storedSigners[reply.parentCid].address;
+                            }
+                            return (
+                              <Fragment key={`fr-reply-${index}`}>
+                                <div key={`rc-${index}`} className="reply-container">
+                                  <div key={`sa-${index}`} className="side-arrows">{'>>'}</div>
+                                  <div key={`pr-${index}`} className="post-reply post-reply-desktop">
+                                    <div key={`pi-${index}`} className="post-info">
+                                      <span key={`nb-${index}`} className="nameblock">
+                                        {reply.author.displayName
+                                          ? reply.author.displayName.length > 20
+                                          ? <Fragment key={`fragment6-${index}`}>
+                                              <span key={`mob-n-${index}`} className="name"
+                                              data-tooltip-id="tooltip"
+                                              data-tooltip-content={reply.author.displayName}
+                                              data-tooltip-place="top">
+                                                {reply.author.displayName.slice(0, 20) + " (...)"}
+                                              </span>
+                                            </Fragment>
+                                            : <span key={`mob-n-${index}`} className="name">
+                                              {reply.author.displayName}</span>
+                                          : <span key={`mob-n-${index}`} className="name">
+                                            Anonymous</span>}
+                                        &nbsp;
+                                        <span key={`pa-${index}`} className="poster-address address-desktop"
+                                          id="reply-button" style={{cursor: "pointer"}}
+                                          onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
+                                        >
+                                          (u/
+                                            {reply.author?.shortAddress ?
+                                              (
+                                                <span key={`mob-ha-${index}`}>
+                                                  {reply.author?.shortAddress}
+                                                </span>
+                                              ) : (
+                                                anonymousMode ? (
+                                                  <span key={`mob-ha-${index}`}>
+                                                    {signerAddress?.slice(8, 20)}
+                                                  </span>
+                                                ) : (
+                                                  <span key={`mob-ha-${index}`}
+                                                  >
+                                                    {account?.author?.shortAddress}
+                                                  </span>
+                                                )
+                                              )
+                                            }
+                                          )
+                                        </span>
+                                      </span>
+                                      &nbsp;
+                                      <span key={`dt-${index}`} className="date-time" data-utc="data">{getDate(reply.timestamp)}</span>
+                                      &nbsp;
+                                      <span key={`pn-${index}`} className="post-number post-number-desktop">
+                                        <span key={`pl1-${index}`}>c/</span>
+                                        {reply.shortCid ? (
+                                          <Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`pl2-${index}`} 
+                                          onClick={(e) => {
+                                            if (e.button === 2) return;
+                                            e.preventDefault();
+                                            setSelectedThreadCid(thread.cid);
+                                            let text = document.getSelection().toString();
+                                            text = text ? `>${text}` : text;
+                                            setSelectedText(text);
+                                            if (isReplyOpen) {
+                                              setReplyQuoteCid(reply.shortCid);
+                                              setTriggerInsertion(Date.now());
+                                            } else {
+                                              setIsReplyOpen(true); 
+                                              setSelectedShortCid(reply.shortCid); 
+                                              setSelectedParentCid(reply.cid);
+                                            }
+                                          }} title="Reply to this post">{reply.shortCid}</Link>
+                                        ) : (
+                                          <PendingLabel key="pending" commentIndex={reply.index} />
+                                        )}
+                                      </span>&nbsp;
+                                      <PostMenu 
+                                      key={`pmb-${index}`} 
+                                      title="Post menu"
+                                      ref={el => { 
+                                        replyMenuRefs.current[reply.cid] = el; 
+                                      }}
+                                      className='post-menu-button' 
+                                      rotated={openMenuCid === reply.cid}
+                                      onClick={(event) => {
+                                        event.stopPropagation();
+                                        const rect = replyMenuRefs.current[reply.cid].getBoundingClientRect();
+                                        setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
+                                        setOpenMenuCid(prevCid => (prevCid === reply.cid ? null : reply.cid));
+                                      }} 
+                                    >
+                                      ▶
+                                    </PostMenu>
+                                    {createPortal(
+                                      <PostMenuCatalog selectedStyle={selectedStyle} 
+                                      ref={el => {postMenuCatalogRef.current = el}}
+                                      onClick={(event) => event.stopPropagation()}
+                                      style={{position: "absolute", 
+                                      top: menuPosition.top + 7, 
+                                      left: menuPosition.left}}>
+                                      <div className={`post-menu-reply post-menu-reply-${reply.cid}`}
+                                      style={{ display: openMenuCid === reply.cid ? 'block' : 'none' }}
+                                      >
+                                        <ul className="post-menu-catalog">
+                                          <li onClick={() => handleOptionClick(reply.cid)}>Hide post</li>
+                                          <VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (
+                                            <>
+                                              {authorAddress === account?.author.address ||
+                                              authorAddress === account?.signer.address ? (
+                                                <>
+                                                  <li onClick={() => handleAuthorEditClick(reply)}>Edit post</li>
+                                                  <li onClick={() => handleAuthorDeleteClick(reply)}>Delete post</li>
+                                                </>
+                                              ) : null}
+                                              {isModerator ? (
+                                                <>
+                                                  {authorAddress === account?.author.address || 
+                                                  authorAddress === account?.signer.address ? (
+                                                    null
+                                                  ) : (
+                                                    <li onClick={() => {
+                                                      setModeratingCommentCid(reply.cid)
+                                                      setIsModerationOpen(true); 
+                                                      handleOptionClick(reply.cid);
+                                                      setDeletePost(true);
+                                                    }}>
+                                                    Delete post
+                                                    </li>
+                                                  )}
+                                                  <li
+                                                  onClick={() => {
+                                                    setModeratingCommentCid(reply.cid)
+                                                    setIsModerationOpen(true); 
+                                                    handleOptionClick(reply.cid);
+                                                  }}>
+                                                    Mod tools
+                                                  </li>
+                                                </>
+                                              ) : null}
+                                            </>
+                                          )}</VerifiedAuthor>
+                                          {(replyMediaInfo && (
+                                            replyMediaInfo.type === 'image' || 
+                                            (replyMediaInfo.type === 'webpage' && 
+                                            replyMediaInfo.thumbnail))) ? ( 
+                                              <li 
+                                              onMouseOver={() => {setIsImageSearchOpen(true)}}
+                                              onMouseLeave={() => {setIsImageSearchOpen(false)}}>
+                                                Image search »
+                                                <ul className="dropdown-menu post-menu-catalog"
+                                                  style={{display: isImageSearchOpen ? 'block': 'none'}}>
+                                                  <li onClick={() => handleOptionClick(reply.cid)}>
+                                                    <a 
+                                                    href={`https://lens.google.com/uploadbyurl?url=${replyMediaInfo.url}`}
+                                                    target="_blank" rel="noreferrer"
+                                                    >Google</a>
+                                                  </li>
+                                                  <li onClick={() => handleOptionClick(reply.cid)}>
+                                                    <a
+                                                    href={`https://yandex.com/images/search?url=${replyMediaInfo.url}`}
+                                                    target="_blank" rel="noreferrer"
+                                                    >Yandex</a>
+                                                  </li>
+                                                  <li onClick={() => handleOptionClick(reply.cid)}>
+                                                    <a
+                                                    href={`https://saucenao.com/search.php?url=${replyMediaInfo.url}`}
+                                                    target="_blank" rel="noreferrer"
+                                                    >SauceNAO</a>
+                                                  </li>
+                                                </ul>
+                                              </li>
+                                            ) : null
+                                          }
+                                        </ul>
+                                      </div>
+                                      </PostMenuCatalog>, document.body
+                                    )}
+                                      <div key={`bi-${index}`} id="backlink-id" className="backlink">
+                                        {reply.replies?.pages?.topAll.comments
+                                          .sort((a, b) => a.timestamp - b.timestamp)
+                                          .map((reply, index) => (
+                                            <div key={`div-${index}`} style={{display: 'inline-block'}} 
+                                            ref={el => {
+                                              backlinkRefs.current[reply.cid] = el;
+                                            }}>
+                                            <Link key={`ql-${index}`}
+                                            to={() => {}} className="quote-link" 
+                                            onClick={(event) => handleQuoteClick(reply, null, event)}
+                                            onMouseOver={(event) => {
+                                              event.stopPropagation();
+                                              handleQuoteHover(reply, null, () => {
+                                                setOutOfViewCid(reply.cid);
+                                                const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
+                                                const distanceToRight = window.innerWidth - rect.right;
+                                                const distanceToTop = rect.top;
+                                                const distanceToBottom = window.innerHeight - rect.bottom;
+                                                let top;
+
+                                                if (distanceToTop < postOnHoverHeight / 2) {
+                                                  top = window.scrollY - 5;
+                                                } else if (distanceToBottom < postOnHoverHeight / 2) {
+                                                  top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
+                                                } else {
+                                                  top = rect.top + window.scrollY - postOnHoverHeight / 2;
+                                                }
+                                              
+                                                if (distanceToRight < 200) {
+                                                  setOutOfViewPosition({
+                                                    top,
+                                                    right: window.innerWidth - rect.left - 10,
+                                                    maxWidth: rect.left - 5
+                                                  });
+                                                } else {
+                                                  setOutOfViewPosition({
+                                                    top,
+                                                    left: rect.left + rect.width + 5,
+                                                    maxWidth: window.innerWidth - rect.left - rect.width - 5
+                                                  });
+                                                }
+                                              });
+                                            }}
+                                            onMouseLeave={() => {
+                                              removeHighlight();
+                                              setOutOfViewCid(null);
+                                            }}>
+                                              c/{reply.shortCid}</Link>
+                                              &nbsp;
+                                            </div>
+                                          ))
+                                        }
+                                      </div>
+                                    </div>
+                                    {replyMediaInfo?.url ? (
+                                      <div key={`f-${index}`} className="file" 
+                                      style={{marginBottom: "5px"}}>
+                                        <div key={`ft-${index}`} className="reply-file-text">
+                                          Link:&nbsp;
+                                          <a key={`fa-${index}`} href={replyMediaInfo.url} target="_blank"
+                                          rel="noopener noreferrer">{
+                                          replyMediaInfo?.url.length > 30 ?
+                                          replyMediaInfo?.url.slice(0, 30) + "(...)" :
+                                          replyMediaInfo?.url
+                                          }</a>&nbsp;({replyMediaInfo?.type})
+                                        </div>
+                                        {replyMediaInfo?.type === "webpage" ? (
+                                          <div key={`enlarge-reply-${index}`} className="img-container">
+                                            <span key={`fta-${index}`} className="file-thumb-reply">
+                                              {reply.thumbnailUrl ? (
+                                                <img key={`fti-${index}`}
+                                                src={replyMediaInfo.thumbnail} alt={replyMediaInfo.type}
+                                                onClick={handleImageClick}
+                                                style={{cursor: "pointer"}}
+                                                onError={(e) => e.target.src = fallbackImgUrl} />
+                                              ) : null}
+                                            </span>
+                                          </div>
+                                        ) : null}
+                                        {replyMediaInfo?.type === "image" ? (
+                                          <div key={`enlarge-reply-${index}`} className="img-container">
+                                            <span key={`fta-${index}`} className="file-thumb-reply">
+                                              <img key={`fti-${index}`}
+                                              src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                              onClick={handleImageClick}
+                                              style={{cursor: "pointer"}}
+                                              onError={(e) => e.target.src = fallbackImgUrl} />
+                                            </span>
+                                          </div>
+                                        ) : null}
+                                        {replyMediaInfo?.type === "video" ? (
+                                          <span key={`fta-${index}`} className="file-thumb-reply">
+                                            <video controls
+                                            key={`fti-${index}`} 
+                                            src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                            onError={(e) => e.target.src = fallbackImgUrl} />
+                                          </span>
+                                        ) : null}
+                                        {replyMediaInfo?.type === "audio" ? (
+                                          <span key={`fta-${index}`} className="file-thumb-reply">
+                                            <audio controls 
+                                            key={`fti-${index}`}
+                                            src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                            onError={(e) => e.target.src = fallbackImgUrl} />
+                                          </span>
+                                        ) : null}
+                                      </div>
+                                    ) : null}
+                                    {reply.content ? (
+                                      reply.content?.length > 500 ?
+                                      <Fragment key={`fragment8-${index}`}>
+                                        <blockquote key={`pm-${index}`} comment={reply} className="post-message">
+                                          <Link to={() => {}} key={`r-pm-${index}`} className="quotelink"  
+                                            ref={el => {
+                                              quoteRefs.current[reply.cid] = el;
+                                            }}
+                                            onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
+                                            onMouseOver={(event) => {
+                                              event.stopPropagation();
+                                              handleQuoteHover(reply, shortParentCid, () => {
+                                                  setOutOfViewCid(reply.parentCid);
+                                                  const rect = quoteRefs.current[reply.cid].getBoundingClientRect();
+                                                  const distanceToRight = window.innerWidth - rect.right;
+                                                  const distanceToTop = rect.top;
+                                                  const distanceToBottom = window.innerHeight - rect.bottom;
+                                                  let top;
+
+                                                  if (distanceToTop < postOnHoverHeight / 2) {
+                                                    top = window.scrollY - 5;
+                                                  } else if (distanceToBottom < postOnHoverHeight / 2) {
+                                                    top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
+                                                  } else {
+                                                    top = rect.top + window.scrollY - postOnHoverHeight / 2;
+                                                  }
+                                                
+                                                  if (distanceToRight < 200) {
+                                                    setOutOfViewPosition({
+                                                      top,
+                                                      right: window.innerWidth - rect.left - 10,
+                                                      maxWidth: rect.left - 5
+                                                    });
+                                                  } else {
+                                                    setOutOfViewPosition({
+                                                      top,
+                                                      left: rect.left + rect.width + 5,
+                                                      maxWidth: window.innerWidth - rect.left - rect.width - 5
+                                                    });
+                                                  }
+                                                });
+                                            }}                                
+                                            onMouseLeave={() => {
+                                              removeHighlight();
+                                              setOutOfViewCid(null);
+                                            }}>
+                                              {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
+                                          </Link>
+                                          <Post key={`post-${index}`}
+                                            content={reply.content?.slice(0, 500)}
+                                            postQuoteRef={(quoteShortParentCid, ref) => {
+                                              postRefs.current[quoteShortParentCid] = ref;
+                                            }}
+                                            postQuoteOnClick={(quoteShortParentCid) => {
+                                              handleQuoteClick(reply, quoteShortParentCid, null)
+                                            }}
+                                            postQuoteOnOver={(quoteShortParentCid) => {
+                                              const quoteParentCid = cidTracker[quoteShortParentCid];
+                                              if (outOfViewCid !== quoteParentCid) {
+                                                handleQuoteHover(reply, quoteShortParentCid, () => {
+                                                  setOutOfViewCid(quoteParentCid);
+              
+                                                const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
+                                                const distanceToRight = window.innerWidth - rect.right;
+                                                const distanceToTop = rect.top;
+                                                const distanceToBottom = window.innerHeight - rect.bottom;
+                                                let top;
+              
+                                                if (distanceToTop < postOnHoverHeight / 2) {
+                                                  top = window.scrollY - 5;
+                                                } else if (distanceToBottom < postOnHoverHeight / 2) {
+                                                  top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
+                                                } else {
+                                                  top = rect.top + window.scrollY - postOnHoverHeight / 2;
+                                                }
+                                              
+                                                if (distanceToRight < 200) {
+                                                  setOutOfViewPosition({
+                                                    top,
+                                                    right: window.innerWidth - rect.left - 10,
+                                                    maxWidth: rect.left - 5
+                                                  });
+                                                } else {
+                                                  setOutOfViewPosition({
+                                                    top,
+                                                    left: rect.left + rect.width + 5,
+                                                    maxWidth: window.innerWidth - rect.left - rect.width - 5
+                                                  });
+                                                }
+                                              })
+                                            }}
+                                          }
+                                            postQuoteOnLeave={() => {
+                                              removeHighlight();
+                                              setOutOfViewCid(null);
+                                            }}
+                                          />
+                                          <span key={`ttl-s-${index}`} className="ttl"> (...)
+                                          <br key={`ttl-s-br1-${index}`} />
+                                          <EditLabel key={`edit-label-reply-${index}`} 
+                                          commentCid={reply.cid}
+                                          className="ttl"/>
+                                          <StateLabel key={`state-label-reply-${index}`}
+                                          commentIndex={reply.index}
+                                          className="ttl ellipsis"/>
+                                          <br key={`ttl-s-br2${index}`} />
+                                          Comment too long.&nbsp;
+                                            <Link key={`ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
+                                          &nbsp;to view. </span>
+                                        </blockquote>
+                                      </Fragment>
+                                    : <blockquote key={`pm-${index}`} className="post-message">
+                                        <Link to={() => {}} key={`r-pm-${index}`} className="quotelink"  
+                                          ref={el => {
+                                            quoteRefs.current[reply.cid] = el;
+                                          }}
+                                          onClick={() => handleQuoteClick(reply, shortParentCid, null)}
+                                          onMouseOver={(event) => {
+                                            event.stopPropagation();
+                                            handleQuoteHover(reply, shortParentCid, () => {
+                                                setOutOfViewCid(reply.parentCid);
+                                                const rect = quoteRefs.current[reply.cid].getBoundingClientRect();
+                                                const distanceToRight = window.innerWidth - rect.right;
+                                                const distanceToTop = rect.top;
+                                                const distanceToBottom = window.innerHeight - rect.bottom;
+                                                let top;
+
+                                                if (distanceToTop < postOnHoverHeight / 2) {
+                                                  top = window.scrollY - 5;
+                                                } else if (distanceToBottom < postOnHoverHeight / 2) {
+                                                  top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
+                                                } else {
+                                                  top = rect.top + window.scrollY - postOnHoverHeight / 2;
+                                                }
+                                              
+                                                if (distanceToRight < 200) {
+                                                  setOutOfViewPosition({
+                                                    top,
+                                                    right: window.innerWidth - rect.left - 10,
+                                                    maxWidth: rect.left - 5
+                                                  });
+                                                } else {
+                                                  setOutOfViewPosition({
+                                                    top,
+                                                    left: rect.left + rect.width + 5,
+                                                    maxWidth: window.innerWidth - rect.left - rect.width - 5
+                                                  });
+                                                }
+                                            });
+                                          }}                                
+                                          onMouseLeave={() => {
+                                            removeHighlight();
+                                            setOutOfViewCid(null);
+                                          }}>
+                                            {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
+                                        </Link>
+                                        <Post key={`post-${index}`}
+                                          content={reply.content}
+                                          postQuoteRef={(quoteShortParentCid, ref) => {
+                                            postRefs.current[quoteShortParentCid] = ref;
+                                          }}
+                                          postQuoteOnClick={(quoteShortParentCid) => {
+                                            handleQuoteClick(reply, quoteShortParentCid, null)
+                                          }}
+                                          postQuoteOnOver={(quoteShortParentCid) => {
+                                            const quoteParentCid = cidTracker[quoteShortParentCid];
+                                            if (outOfViewCid !== quoteParentCid) {
+                                              handleQuoteHover(reply, quoteShortParentCid, () => {
+                                                setOutOfViewCid(quoteParentCid);
+            
+                                              const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
+                                              const distanceToRight = window.innerWidth - rect.right;
+                                              const distanceToTop = rect.top;
+                                              const distanceToBottom = window.innerHeight - rect.bottom;
+                                              let top;
+            
+                                              if (distanceToTop < postOnHoverHeight / 2) {
+                                                top = window.scrollY - 5;
+                                              } else if (distanceToBottom < postOnHoverHeight / 2) {
+                                                top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
+                                              } else {
+                                                top = rect.top + window.scrollY - postOnHoverHeight / 2;
+                                              }
+                                            
+                                              if (distanceToRight < 200) {
+                                                setOutOfViewPosition({
+                                                  top,
+                                                  right: window.innerWidth - rect.left - 10,
+                                                  maxWidth: rect.left - 5
+                                                });
+                                              } else {
+                                                setOutOfViewPosition({
+                                                  top,
+                                                  left: rect.left + rect.width + 5,
+                                                  maxWidth: window.innerWidth - rect.left - rect.width - 5
+                                                });
+                                              }
+                                            })
+                                          }}
+                                        }
+                                          postQuoteOnLeave={() => {
+                                            removeHighlight();
+                                            setOutOfViewCid(null);
+                                          }}
+                                        />
+                                        <EditLabel key={`edit-label-reply-${index}`} 
+                                          commentCid={reply.cid}
+                                          className="ttl"/>
+                                        <StateLabel key={`state-label-reply-${index}`}
+                                        commentIndex={reply.index}
+                                        className="ttl ellipsis"/>
+                                      </blockquote>)
+                                    : null}
+                                  </div>
                                 </div>
-                                </PostMenuCatalog>, document.body
-                              )}
-                                <div key={`bi-${index}`} id="backlink-id" className="backlink">
-                                  {reply.replies?.pages?.topAll.comments
-                                    .sort((a, b) => a.timestamp - b.timestamp)
-                                    .map((reply, index) => (
-                                      <div key={`div-${index}`} style={{display: 'inline-block'}} 
+                              </Fragment>
+                            )
+                          })}
+                        </div>
+                        <div key={`mob-t-${index}`} className="thread-mobile">
+                        {index === 0 && (!subplebbit.rules && !subplebbit.description) ? (
+                            <hr key={`mob-hr-${index}`} style={{marginTop: '10px'}} />
+                          ) : (
+                            <hr key={`mob-hr-${index}`} />
+                          )}
+                          <div key={`mob-c-${index}`} className="op-container">
+                            <div key={`mob-po-${index}`} className="post op op-mobile">
+                              <div key={`mob-pi-${index}`} className="post-info-mobile">
+                                <button key={`mob-pb-${index}`} className="post-menu-button-mobile" style={{ all: 'unset', cursor: 'pointer' }}>...</button>
+                                <span key={`mob-nbm-${index}`} className="name-block-mobile">
+                                  {thread.author.displayName
+                                  ? thread.author.displayName.length > 20
+                                  ? <Fragment key={`fragment9-${index}`}>
+                                      <span key={`mob-n-${index}`} className="name-mobile"
+                                      data-tooltip-id="tooltip"
+                                      data-tooltip-content={thread.author.displayName}
+                                      data-tooltip-place="top">
+                                        {thread.author.displayName.slice(0, 20) + " (...)"}
+                                      </span>
+                                    </Fragment> 
+                                    : <span key={`mob-n-${index}`} className="name-mobile">
+                                      {thread.author.displayName}</span>
+                                  : <span key={`mob-n-${index}`} className="name-mobile">
+                                    Anonymous</span>}
+                                  &nbsp;
+                                  <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
+                                    id="reply-button" style={{cursor: "pointer"}}
+                                    onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
+                                  >
+                                    (u/
+                                    <span key={`mob-ha-${index}`} className="highlight-address-mobile">
+                                      {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>}
+                                    </span>
+                                    )&nbsp;
+                                  </span>
+                                  <span key={`ti-mob-${index}`} className="thread-icons-mobile" style={{float: "right", marginRight: "18px"}}>
+                                    {thread.pinned ? (
+                                      <img src="assets/sticky.gif" alt="Sticky" title="Sticky"
+                                      style={{marginTop: "-1px", marginRight: "2px",
+                                      imageRendering: "pixelated",}} />
+                                    ) : null}
+                                    {thread.locked ? (
+                                      <img src="assets/closed.gif" alt="Closed" title="Closed"
+                                      style={{marginTop: "-1px", marginRight: "2px",
+                                      imageRendering: "pixelated",}} />
+                                    ) : null}
+                                  </span>
+                                  <br key={`mob-br1-${index}`} />
+                                  {thread.title ? (
+                                    thread.title.length > 30 ?
+                                    <Fragment key={`fragment11-${index}`}>
+                                      <span key={`mob-t-${index}`} className="subject-mobile"
+                                      data-tooltip-id="tooltip"
+                                      data-tooltip-content={thread.title}
+                                      data-tooltip-place="top">
+                                        {thread.title.slice(0, 30) + " (...)"}
+                                      </span>
+                                    </Fragment>
+                                  : <span key={`mob-t-${index}`} className="subject-mobile">
+                                    {thread.title}
+                                    </span>) 
+                                  : null}
+                                </span>
+                                <span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
+                                  {getDate(thread.timestamp)}
+                                  &nbsp;
+                                  <span key={`mob-no-${index}`}>c/</span>
+                                  <Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`mob-no2-${index}`} 
+                                    onClick={(e) => {
+                                      if (e.button === 2) return;
+                                      e.preventDefault();
+                                      setSelectedThreadCid(thread.cid);
+                                      let text = document.getSelection().toString();
+                                      text = text ? `>${text}` : text;
+                                      setSelectedText(text);
+                                      if (isReplyOpen) {
+                                        setReplyQuoteCid(thread.shortCid);
+                                        setTriggerInsertion(Date.now());
+                                      } else {
+                                        setIsReplyOpen(true); 
+                                        setSelectedShortCid(thread.shortCid); 
+                                        setSelectedParentCid(thread.cid);
+                                      }
+                                    }} title="Reply to this post">{thread.shortCid}
+                                  </Link>
+                                </span>
+                              </div>
+                              {thread.link ? (
+                                <div key={`mob-f-${index}`} className="file-mobile">
+                                  {commentMediaInfo?.type === 'iframe' && (
+                                    <div key={`enlarge-mob-${index}`} className="img-container">
+                                      <span key={`mob-fta-${index}`} className="file-thumb-mobile">
+                                        {(isMobileThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
+                                          <div style={{width: "92vw"}}>
+                                            <iframe 
+                                              key={`mob-fti-${index}`} 
+                                              src={commentMediaInfo.embedUrl}
+                                              style={{border: "none", height: "250px"}}
+                                              title="Embedded content"
+                                              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                                              allowFullScreen />
+                                          </div>
+                                        ) : (
+                                          <img 
+                                            key={`mob-fti-${index}`}
+                                            src={commentMediaInfo.thumbnail} 
+                                            alt="thumbnail"
+                                            onClick={() => {handleThumbnailClick(index, true)}}
+                                            style={{cursor: "pointer"}}
+                                            onError={(e) => e.target.src = fallbackImgUrl} />
+                                        )}
+                                        {commentMediaInfo?.type === "video" || "iframe" ? (
+                                          isMobileThumbnailClicked[index] ? (
+                                            <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
+                                              <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
+                                              onClick={() => {handleThumbnailClick(index, true)}}
+                                              >Close</span>
+                                            </div>
+                                          ) : (
+                                            <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
+                                        )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
+                                      </span>
+                                    </div>
+                                  )}
+                                    {commentMediaInfo?.url ? (
+                                      commentMediaInfo.type === "webpage" ? (
+                                        <div key={`enlarge-mob-${index}`} className="img-container">
+                                          <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
+                                            {thread.thumbnailUrl ? (
+                                              <img key={`mob-img-${index}`} 
+                                              src={commentMediaInfo.thumbnail} alt="thumbnail" 
+                                              onClick={handleImageClick}
+                                              style={{cursor: "pointer"}}
+                                              onError={(e) => e.target.src = fallbackImgUrl} />
+                                            ) : null}
+                                            <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                          </span>
+                                        </div>
+                                      ) : commentMediaInfo.type === "image" ? (
+                                        <div key={`enlarge-mob-${index}`} className="img-container">
+                                          <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
+                                            <img key={`mob-img-${index}`} 
+                                            src={commentMediaInfo.url} alt={commentMediaInfo.type} 
+                                            onClick={handleImageClick}
+                                            style={{cursor: "pointer"}}
+                                            onError={(e) => e.target.src = fallbackImgUrl} />
+                                            <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                          </span>
+                                        </div>
+                                      ) : commentMediaInfo.type === "video" ? (
+                                          <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
+                                            {isMobileThumbnailClicked[index] ? (
+                                              <video key={`fti-${index}`} 
+                                              src={commentMediaInfo.url} alt={commentMediaInfo.type}
+                                              controls
+                                              style={{ cursor: 'pointer' }} 
+                                              onError={(e) => e.target.src = fallbackImgUrl} />
+                                            ) : (
+                                              <video 
+                                                key={`fti-${index}`}
+                                                src={commentMediaInfo.url} 
+                                                alt="thumbnail"
+                                                onClick={() => {handleThumbnailClick(index, true)}}
+                                                style={{cursor: "pointer"}}
+                                                id="video-thumbnail-mobile"
+                                                onError={(e) => e.target.src = fallbackImgUrl} 
+                                              />
+                                            )}
+                                            {commentMediaInfo?.type === "video" || "iframe" ? (
+                                              isMobileThumbnailClicked[index] ? (
+                                                <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
+                                                  <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
+                                                  onClick={() => {handleThumbnailClick(index, true)}}
+                                                  >Close</span>
+                                                </div>
+                                              ) : (
+                                                <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
+                                            )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
+                                          </span>
+                                      ) : commentMediaInfo.type === "audio" ? (
+                                          <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
+                                            <audio key={`mob-img-${index}`} 
+                                            src={commentMediaInfo.url} alt={commentMediaInfo.type} 
+                                            onError={(e) => e.target.src = fallbackImgUrl} />
+                                            <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                          </span>
+                                      ) : null
+                                    ) : null}
+                                </div>
+                              ) : null}
+                              {thread.content ? (
+                                thread.content?.length > 500 ?
+                                <Fragment key={`fragment12-${index}`}>
+                                  <blockquote key={`mob-bq-${index}`} className="post-message-mobile">
+                                    <Post content={thread.content?.slice(0, 500)} key={`post-mobile-${index}`} />
+                                    <span key={`mob-ttl-s-${index}`} className="ttl"> (...)
+                                    <br key={`mob-ttl-s-br1-${index}`} />
+                                    <EditLabel key={`edit-label-thread-mob-${index}`} 
+                                    commentCid={thread.cid}
+                                    className="ttl"/>
+                                    <StateLabel key={`state-label-thread-mob-${index}`}
+                                    commentIndex={thread.index}
+                                    className="ttl ellipsis"/>
+                                    <br key={`mob-ttl-s-br2${thread.cid}`} />
+                                    Post too long.&nbsp;
+                                      <Link key={`mob-ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
+                                      &nbsp;to view. </span>
+                                  </blockquote>
+                                </Fragment>
+                              : <blockquote key={`mob-bq-${index}`} className="post-message-mobile">
+                                  <Post content={thread.content} key={`post-mobile-${index}`} />
+                                  <EditLabel key={`edit-label-thread-mob-${index}`} 
+                                  commentCid={thread.cid}
+                                  className="ttl"/>
+                                  <StateLabel key={`state-label-thread-mob-${index}`}
+                                  commentIndex={thread.index}
+                                  className="ttl ellipsis"/>
+                                </blockquote>)
+                              : null}
+                            </div>
+                            <div key={`mob-pl-${index}`} className="post-link-mobile">
+                              <span key={`mob-info-${index}`} className="info-mobile">{
+                              (thread.replyCount + pendingReplyCounts[thread.cid]) === 0 ?
+                              ("No replies")
+                              : (thread.replyCount + pendingReplyCounts[thread.cid]) === 1 ?
+                              ("1 reply")
+                              : (thread.replyCount + pendingReplyCounts[thread.cid]) > 1 ?
+                              ((thread.replyCount + pendingReplyCounts[thread.cid]) + " replies")
+                              : null
+                              }</span>
+                              <Link key={`rl2-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} 
+                              onClick={() => {setSelectedThread(thread.cid); window.scrollTo(0, 0);}}
+                              className="button-mobile" >View Thread</Link>
+                            </div>
+                          </div>
+                          {displayedReplies?.map((reply, index) => {
+                            const replyMediaInfo = getCommentMediaInfo(reply);
+                            const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed);
+                            let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {};
+                            let signerAddress;
+                            if (storedSigners[selectedThreadCidRef]) {
+                              signerAddress = storedSigners[selectedThreadCidRef].address;
+                            }
+                            return (
+                            <div key={`mob-rc-${index}`} className="reply-container">
+                              <div key={`mob-pr-${index}`} className="post-reply post-reply-mobile">
+                                <div key={`mob-pi-${index}`} className="post-info-mobile">
+                                  <button key={`pmbm-${index}`} className="post-menu-button-mobile" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>...</button>
+                                  <span key={`mob-nb-${index}`} className="name-block-mobile">
+                                    {reply.author.displayName
+                                    ? reply.author.displayName.length > 20
+                                    ? <Fragment key={`fragment13-${index}`}>
+                                        <span key={`mob-n-${index}`} className="name-mobile"
+                                        data-tooltip-id="tooltip"
+                                        data-tooltip-content={reply.author.displayName}
+                                        data-tooltip-place="top">
+                                          {reply.author.displayName.slice(0, 20) + " (...)"}
+                                        </span>
+                                      </Fragment>
+                                      : <span key={`mob-n-${index}`} className="name-mobile">
+                                        {reply.author.displayName}</span>
+                                    : <span key={`mob-n-${index}`} className="name-mobile">
+                                      Anonymous</span>}
+                                    &nbsp;
+                                    <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
+                                      id="reply-button" style={{cursor: "pointer"}}
+                                      onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
+                                    >
+                                      (u/
+                                        {reply.author?.shortAddress ?
+                                          (
+                                            <span key={`mob-ha-${index}`} className="highlight-address-mobile">
+                                              {reply.author?.shortAddress}
+                                            </span>
+                                          ) : (
+                                            anonymousMode ? (
+                                              <span key={`mob-ha-${index}`}>
+                                                {signerAddress?.slice(8, 20)}
+                                              </span>
+                                              ) : (
+                                              <span key={`mob-ha-${index}`}>
+                                                {account?.author?.shortAddress}
+                                              </span>
+                                            )
+                                          )
+                                        }
+                                      )&nbsp;
+                                    </span>
+                                    <br key={`mob-br-${index}`} />
+                                  </span>
+                                  <span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
+                                  {getDate(reply.timestamp)}&nbsp;
+                                    <span key={`mob-pl1-${index}`}>c/</span>
+                                    {reply.shortCid ? (
+                                      <Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`mob-pl2-${index}`} 
+                                        onClick={(e) => {
+                                          if (e.button === 2) return;
+                                          e.preventDefault();
+                                          setSelectedThreadCid(thread.cid);
+                                          let text = document.getSelection().toString();
+                                          text = text ? `>${text}` : text;
+                                          setSelectedText(text);
+                                          if (isReplyOpen) {
+                                            setReplyQuoteCid(reply.shortCid);
+                                            setTriggerInsertion(Date.now());
+                                          } else {
+                                            setIsReplyOpen(true); 
+                                            setSelectedShortCid(reply.shortCid); 
+                                            setSelectedParentCid(reply.cid);
+                                          }
+                                        }} title="Reply to this post">{reply.shortCid}
+                                      </Link>
+                                    ) : (
+                                      <PendingLabel key="pending-mob" commentIndex={reply.index} />
+                                    )}
+                                  </span>
+                                </div>
+                                {reply.link ? (
+                                  <div key={`mob-f-${index}`} className="file-mobile">
+                                      {replyMediaInfo?.url ? (
+                                        replyMediaInfo.type === "webpage" ? (
+                                          <div key={`enlarge-mob-reply-${index}`} className="img-container">
+                                            <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
+                                              {reply.thumbnailUrl ? (
+                                                <img key={`mob-img-${index}`} 
+                                                src={replyMediaInfo.thumbnail} alt="thumbnail" 
+                                                onClick={handleImageClick}
+                                                style={{cursor: "pointer"}}
+                                                onError={(e) => e.target.src = fallbackImgUrl} />
+                                              ) : null}
+                                              <div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
+                                            </span>
+                                          </div>
+                                        ) : replyMediaInfo.type === "image" ? (
+                                          <div key={`enlarge-mob-reply-${index}`} className="img-container">
+                                            <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
+                                              <img key={`mob-img-${index}`} 
+                                              src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                              onClick={handleImageClick}
+                                              style={{cursor: "pointer"}}
+                                              onError={(e) => e.target.src = fallbackImgUrl} />
+                                              <div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
+                                            </span>
+                                          </div>
+                                        ) : replyMediaInfo.type === "video" ? (
+                                            <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
+                                                <video key={`fti-${index}`} 
+                                                src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                                style={{ pointerEvents: "none" }}
+                                                onError={(e) => e.target.src = fallbackImgUrl} />
+                                              <div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
+                                            </span>
+                                        ) : replyMediaInfo.type === "audio" ? (
+                                            <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
+                                              <audio key={`mob-img-${index}`} 
+                                              src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                              onError={(e) => e.target.src = fallbackImgUrl} />
+                                              <div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
+                                            </span>
+                                        ) : null
+                                      ) : null}
+                                  </div>
+                                ) : null}
+                                {reply.content ? (
+                                  reply.content?.length > 500 ?
+                                  <Fragment key={`fragment15-${index}`}>
+                                    <blockquote key={`mob-pm-${index}`} className="post-message">
+                                      <Link to={() => {}} key={`mob-r-pm-${index}`} className="quotelink" 
                                       ref={el => {
-                                        backlinkRefs.current[reply.cid] = el;
-                                      }}>
-                                      <Link key={`ql-${index}`}
-                                      to={() => {}} className="quote-link" 
-                                      onClick={(event) => handleQuoteClick(reply, null, event)}
+                                        quoteRefsMobile.current[reply.cid] = el;
+                                      }}
+                                      onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
                                       onMouseOver={(event) => {
                                         event.stopPropagation();
-                                        handleQuoteHover(reply, null, () => {
-                                          setOutOfViewCid(reply.cid);
-                                          const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
+                                        handleQuoteHover(reply, shortParentCid, () => {
+                                          setOutOfViewCid(reply.parentCid);
+                                          const rect = quoteRefsMobile.current[reply.cid].getBoundingClientRect();
                                           const distanceToRight = window.innerWidth - rect.right;
                                           const distanceToTop = rect.top;
                                           const distanceToBottom = window.innerHeight - rect.bottom;
@@ -1897,86 +2596,28 @@ const Board = () => {
                                         removeHighlight();
                                         setOutOfViewCid(null);
                                       }}>
-                                        c/{reply.shortCid}</Link>
-                                        &nbsp;
-                                      </div>
-                                    ))
-                                  }
-                                </div>
-                              </div>
-                              {replyMediaInfo?.url ? (
-                                <div key={`f-${index}`} className="file" 
-                                style={{marginBottom: "5px"}}>
-                                  <div key={`ft-${index}`} className="reply-file-text">
-                                    Link:&nbsp;
-                                    <a key={`fa-${index}`} href={replyMediaInfo.url} target="_blank"
-                                    rel="noopener noreferrer">{
-                                    replyMediaInfo?.url.length > 30 ?
-                                    replyMediaInfo?.url.slice(0, 30) + "(...)" :
-                                    replyMediaInfo?.url
-                                    }</a>&nbsp;({replyMediaInfo?.type})
-                                  </div>
-                                  {replyMediaInfo?.type === "webpage" ? (
-                                    <div key={`enlarge-reply-${index}`} className="img-container">
-                                      <span key={`fta-${index}`} className="file-thumb-reply">
-                                        {reply.thumbnailUrl ? (
-                                          <img key={`fti-${index}`}
-                                          src={replyMediaInfo.thumbnail} alt={replyMediaInfo.type}
-                                          onClick={handleImageClick}
-                                          style={{cursor: "pointer"}}
-                                          onError={(e) => e.target.src = fallbackImgUrl} />
-                                        ) : null}
-                                      </span>
-                                    </div>
-                                  ) : null}
-                                  {replyMediaInfo?.type === "image" ? (
-                                    <div key={`enlarge-reply-${index}`} className="img-container">
-                                      <span key={`fta-${index}`} className="file-thumb-reply">
-                                        <img key={`fti-${index}`}
-                                        src={replyMediaInfo.url} alt={replyMediaInfo.type} 
-                                        onClick={handleImageClick}
-                                        style={{cursor: "pointer"}}
-                                        onError={(e) => e.target.src = fallbackImgUrl} />
-                                      </span>
-                                    </div>
-                                  ) : null}
-                                  {replyMediaInfo?.type === "video" ? (
-                                    <span key={`fta-${index}`} className="file-thumb-reply">
-                                      <video controls
-                                      key={`fti-${index}`} 
-                                      src={replyMediaInfo.url} alt={replyMediaInfo.type} 
-                                      onError={(e) => e.target.src = fallbackImgUrl} />
-                                    </span>
-                                  ) : null}
-                                  {replyMediaInfo?.type === "audio" ? (
-                                    <span key={`fta-${index}`} className="file-thumb-reply">
-                                      <audio controls 
-                                      key={`fti-${index}`}
-                                      src={replyMediaInfo.url} alt={replyMediaInfo.type} 
-                                      onError={(e) => e.target.src = fallbackImgUrl} />
-                                    </span>
-                                  ) : null}
-                                </div>
-                              ) : null}
-                              {reply.content ? (
-                                reply.content?.length > 500 ?
-                                <Fragment key={`fragment8-${index}`}>
-                                  <blockquote key={`pm-${index}`} comment={reply} className="post-message">
-                                    <Link to={() => {}} key={`r-pm-${index}`} className="quotelink"  
-                                      ref={el => {
-                                        quoteRefs.current[reply.cid] = el;
-                                      }}
-                                      onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
-                                      onMouseOver={(event) => {
-                                        event.stopPropagation();
-                                        handleQuoteHover(reply, shortParentCid, () => {
-                                            setOutOfViewCid(reply.parentCid);
-                                            const rect = quoteRefs.current[reply.cid].getBoundingClientRect();
+                                        {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
+                                      </Link>
+                                      <Post key={`post-mobile-${index}`}
+                                        content={reply.content?.slice(0, 500)}
+                                        postQuoteRef={(quoteShortParentCid, ref) => {
+                                          postRefs.current[quoteShortParentCid] = ref;
+                                        }}
+                                        postQuoteOnClick={(quoteShortParentCid) => {
+                                          handleQuoteClick(reply, quoteShortParentCid, null)
+                                        }}
+                                        postQuoteOnOver={(quoteShortParentCid) => {
+                                          const quoteParentCid = cidTracker[quoteShortParentCid];
+                                          if (outOfViewCid !== quoteParentCid) {
+                                            handleQuoteHover(reply, quoteShortParentCid, () => {
+                                              setOutOfViewCid(quoteParentCid);
+          
+                                            const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
                                             const distanceToRight = window.innerWidth - rect.right;
                                             const distanceToTop = rect.top;
                                             const distanceToBottom = window.innerHeight - rect.bottom;
                                             let top;
-
+          
                                             if (distanceToTop < postOnHoverHeight / 2) {
                                               top = window.scrollY - 5;
                                             } else if (distanceToBottom < postOnHoverHeight / 2) {
@@ -1998,16 +2639,75 @@ const Board = () => {
                                                 maxWidth: window.innerWidth - rect.left - rect.width - 5
                                               });
                                             }
+                                          })
+                                        }}
+                                      }
+                                        postQuoteOnLeave={() => {
+                                          removeHighlight();
+                                          setOutOfViewCid(null);
+                                        }}
+                                      />
+                                      <span key={`mob-ttl-s-${index}`} className="ttl"> (...)
+                                      <br key={`mob-ttl-s-br1-${index}`} />
+                                      <EditLabel key={`edit-label-reply-mob-${index}`} 
+                                      commentCid={reply.cid}
+                                      className="ttl"/>
+                                      <StateLabel key={`state-label-reply-mob-${index}`}
+                                      commentIndex={reply.index}
+                                      className="ttl ellipsis"/>
+                                      <br key={`mob-ttl-s-br2${reply.cid}`} />
+                                      Comment too long.&nbsp;
+                                        <Link key={`mob-ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
+                                      &nbsp;to view. </span>
+                                    </blockquote>
+                                  </Fragment>
+                                : <blockquote key={`mob-pm-${index}`} className="post-message">
+                                    <Link to={() => {}} key={`mob-r-pm-${index}`} className="quotelink" 
+                                    ref={el => {
+                                      quoteRefsMobile.current[reply.cid] = el;
+                                    }}
+                                    onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
+                                    onMouseOver={(event) => {
+                                      event.stopPropagation();
+                                      handleQuoteHover(reply, shortParentCid, () => {
+                                        setOutOfViewCid(reply.parentCid);
+                                        const rect = quoteRefsMobile.current[reply.cid].getBoundingClientRect();
+                                        const distanceToRight = window.innerWidth - rect.right;
+                                        const distanceToTop = rect.top;
+                                        const distanceToBottom = window.innerHeight - rect.bottom;
+                                        let top;
+
+                                        if (distanceToTop < postOnHoverHeight / 2) {
+                                          top = window.scrollY - 5;
+                                        } else if (distanceToBottom < postOnHoverHeight / 2) {
+                                          top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
+                                        } else {
+                                          top = rect.top + window.scrollY - postOnHoverHeight / 2;
+                                        }
+                                      
+                                        if (distanceToRight < 200) {
+                                          setOutOfViewPosition({
+                                            top,
+                                            right: window.innerWidth - rect.left - 10,
+                                            maxWidth: rect.left - 5
                                           });
-                                      }}                                
-                                      onMouseLeave={() => {
-                                        removeHighlight();
-                                        setOutOfViewCid(null);
-                                      }}>
-                                        {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
+                                        } else {
+                                          setOutOfViewPosition({
+                                            top,
+                                            left: rect.left + rect.width + 5,
+                                            maxWidth: window.innerWidth - rect.left - rect.width - 5
+                                          });
+                                        }
+                                      });
+                                    }}
+                                    onMouseLeave={() => {
+                                      removeHighlight();
+                                      setOutOfViewCid(null);
+                                    }}>
+                                      {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
                                     </Link>
-                                    <Post key={`post-${index}`}
-                                      content={reply.content?.slice(0, 500)}
+                                    <Post key={`post-mobile-${index}`}
+                                      content={reply.content} 
                                       postQuoteRef={(quoteShortParentCid, ref) => {
                                         postRefs.current[quoteShortParentCid] = ref;
                                       }}
@@ -2055,31 +2755,30 @@ const Board = () => {
                                         setOutOfViewCid(null);
                                       }}
                                     />
-                                    <span key={`ttl-s-${index}`} className="ttl"> (...)
-                                    <br key={`ttl-s-br1-${index}`} />
-                                    <EditLabel key={`edit-label-reply-${index}`} 
+                                    <EditLabel key={`edit-label-reply-mob-${index}`} 
                                     commentCid={reply.cid}
                                     className="ttl"/>
-                                    <StateLabel key={`state-label-reply-${index}`}
+                                    <StateLabel key={`state-label-reply-mob-${index}`}
                                     commentIndex={reply.index}
                                     className="ttl ellipsis"/>
-                                    <br key={`ttl-s-br2${index}`} />
-                                    Comment too long.&nbsp;
-                                      <Link key={`ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
-                                    &nbsp;to view. </span>
-                                  </blockquote>
-                                </Fragment>
-                              : <blockquote key={`pm-${index}`} className="post-message">
-                                  <Link to={() => {}} key={`r-pm-${index}`} className="quotelink"  
-                                    ref={el => {
-                                      quoteRefs.current[reply.cid] = el;
-                                    }}
-                                    onClick={() => handleQuoteClick(reply, shortParentCid, null)}
-                                    onMouseOver={(event) => {
-                                      event.stopPropagation();
-                                      handleQuoteHover(reply, shortParentCid, () => {
-                                          setOutOfViewCid(reply.parentCid);
-                                          const rect = quoteRefs.current[reply.cid].getBoundingClientRect();
+                                  </blockquote>)
+                                : null}
+                                  {reply.replyCount > 0 ? (
+                                    <div key={`back-mob-${index}`} className='backlink backlink-mobile'>
+                                    {reply.replies?.pages?.topAll.comments
+                                    .sort((a, b) => a.timestamp - b.timestamp)
+                                    .map((reply, index) => (
+                                      <div key={`div-back${index}`} style={{display: 'inline-block'}} 
+                                      ref={el => {
+                                        backlinkRefsMobile.current[reply.cid] = el;
+                                      }}>
+                                      <Link key={`ql-${index}`} to={() => {}}
+                                      onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
+                                      onMouseOver={(event) => {
+                                        event.stopPropagation();
+                                        handleQuoteHover(reply, reply.shortCid, () => {
+                                          setOutOfViewCid(reply.cid)
+                                          const rect = backlinkRefsMobile.current[reply.cid].getBoundingClientRect();
                                           const distanceToRight = window.innerWidth - rect.right;
                                           const distanceToTop = rect.top;
                                           const distanceToBottom = window.innerHeight - rect.bottom;
@@ -2106,713 +2805,24 @@ const Board = () => {
                                               maxWidth: window.innerWidth - rect.left - rect.width - 5
                                             });
                                           }
-                                      });
-                                    }}                                
-                                    onMouseLeave={() => {
-                                      removeHighlight();
-                                      setOutOfViewCid(null);
-                                    }}>
-                                      {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
-                                  </Link>
-                                  <Post key={`post-${index}`}
-                                    content={reply.content}
-                                    postQuoteRef={(quoteShortParentCid, ref) => {
-                                      postRefs.current[quoteShortParentCid] = ref;
-                                    }}
-                                    postQuoteOnClick={(quoteShortParentCid) => {
-                                      handleQuoteClick(reply, quoteShortParentCid, null)
-                                    }}
-                                    postQuoteOnOver={(quoteShortParentCid) => {
-                                      const quoteParentCid = cidTracker[quoteShortParentCid];
-                                      if (outOfViewCid !== quoteParentCid) {
-                                        handleQuoteHover(reply, quoteShortParentCid, () => {
-                                          setOutOfViewCid(quoteParentCid);
-      
-                                        const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
-                                        const distanceToRight = window.innerWidth - rect.right;
-                                        const distanceToTop = rect.top;
-                                        const distanceToBottom = window.innerHeight - rect.bottom;
-                                        let top;
-      
-                                        if (distanceToTop < postOnHoverHeight / 2) {
-                                          top = window.scrollY - 5;
-                                        } else if (distanceToBottom < postOnHoverHeight / 2) {
-                                          top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
-                                        } else {
-                                          top = rect.top + window.scrollY - postOnHoverHeight / 2;
-                                        }
-                                      
-                                        if (distanceToRight < 200) {
-                                          setOutOfViewPosition({
-                                            top,
-                                            right: window.innerWidth - rect.left - 10,
-                                            maxWidth: rect.left - 5
-                                          });
-                                        } else {
-                                          setOutOfViewPosition({
-                                            top,
-                                            left: rect.left + rect.width + 5,
-                                            maxWidth: window.innerWidth - rect.left - rect.width - 5
-                                          });
-                                        }
-                                      })
-                                    }}
-                                  }
-                                    postQuoteOnLeave={() => {
-                                      removeHighlight();
-                                      setOutOfViewCid(null);
-                                    }}
-                                  />
-                                  <EditLabel key={`edit-label-reply-${index}`} 
-                                    commentCid={reply.cid}
-                                    className="ttl"/>
-                                  <StateLabel key={`state-label-reply-${index}`}
-                                  commentIndex={reply.index}
-                                  className="ttl ellipsis"/>
-                                </blockquote>)
-                              : null}
-                            </div>
-                          </div>
-                          )
-                      })}
-                    </div>
-                    <div key={`mob-t-${index}`} className="thread-mobile">
-                    {index === 0 && (!subplebbit.rules && !subplebbit.description) ? (
-                        <hr key={`mob-hr-${index}`} style={{marginTop: '10px'}} />
-                      ) : (
-                        <hr key={`mob-hr-${index}`} />
-                      )}
-                      <div key={`mob-c-${index}`} className="op-container">
-                        <div key={`mob-po-${index}`} className="post op op-mobile">
-                          <div key={`mob-pi-${index}`} className="post-info-mobile">
-                            <button key={`mob-pb-${index}`} className="post-menu-button-mobile" style={{ all: 'unset', cursor: 'pointer' }}>...</button>
-                            <span key={`mob-nbm-${index}`} className="name-block-mobile">
-                              {thread.author.displayName
-                              ? thread.author.displayName.length > 20
-                              ? <Fragment key={`fragment9-${index}`}>
-                                  <span key={`mob-n-${index}`} className="name-mobile"
-                                  data-tooltip-id="tooltip"
-                                  data-tooltip-content={thread.author.displayName}
-                                  data-tooltip-place="top">
-                                    {thread.author.displayName.slice(0, 20) + " (...)"}
-                                  </span>
-                                </Fragment> 
-                                : <span key={`mob-n-${index}`} className="name-mobile">
-                                  {thread.author.displayName}</span>
-                              : <span key={`mob-n-${index}`} className="name-mobile">
-                                Anonymous</span>}
-                              &nbsp;
-                              <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
-                                id="reply-button" style={{cursor: "pointer"}}
-                                onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
-                              >
-                                (u/
-                                <span key={`mob-ha-${index}`} className="highlight-address-mobile">
-                                  {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>}
-                                </span>
-                                )&nbsp;
-                              </span>
-                              <span key={`ti-mob-${index}`} className="thread-icons-mobile" style={{float: "right", marginRight: "18px"}}>
-                                {thread.pinned ? (
-                                  <img src="assets/sticky.gif" alt="Sticky" title="Sticky"
-                                  style={{marginTop: "-1px", marginRight: "2px",
-                                  imageRendering: "pixelated",}} />
-                                ) : null}
-                                {thread.locked ? (
-                                  <img src="assets/closed.gif" alt="Closed" title="Closed"
-                                  style={{marginTop: "-1px", marginRight: "2px",
-                                  imageRendering: "pixelated",}} />
-                                ) : null}
-                              </span>
-                              <br key={`mob-br1-${index}`} />
-                              {thread.title ? (
-                                thread.title.length > 30 ?
-                                <Fragment key={`fragment11-${index}`}>
-                                  <span key={`mob-t-${index}`} className="subject-mobile"
-                                  data-tooltip-id="tooltip"
-                                  data-tooltip-content={thread.title}
-                                  data-tooltip-place="top">
-                                    {thread.title.slice(0, 30) + " (...)"}
-                                  </span>
-                                </Fragment>
-                              : <span key={`mob-t-${index}`} className="subject-mobile">
-                                {thread.title}
-                                </span>) 
-                              : null}
-                            </span>
-                            <span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
-                              {getDate(thread.timestamp)}
-                              &nbsp;
-                              <span key={`mob-no-${index}`}>c/</span>
-                              <Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`mob-no2-${index}`} 
-                                onClick={(e) => {
-                                  if (e.button === 2) return;
-                                  e.preventDefault();
-                                  setSelectedThreadCid(thread.cid);
-                                  let text = document.getSelection().toString();
-                                  text = text ? `>${text}` : text;
-                                  setSelectedText(text);
-                                  if (isReplyOpen) {
-                                    setReplyQuoteCid(thread.shortCid);
-                                    setTriggerInsertion(Date.now());
-                                  } else {
-                                    setIsReplyOpen(true); 
-                                    setSelectedShortCid(thread.shortCid); 
-                                    setSelectedParentCid(thread.cid);
-                                  }
-                                }} title="Reply to this post">{thread.shortCid}
-                              </Link>
-                            </span>
-                          </div>
-                          {thread.link ? (
-                            <div key={`mob-f-${index}`} className="file-mobile">
-                              {commentMediaInfo?.type === 'iframe' && (
-                                <div key={`enlarge-mob-${index}`} className="img-container">
-                                  <span key={`mob-fta-${index}`} className="file-thumb-mobile">
-                                    {(isMobileThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
-                                      <div style={{width: "92vw"}}>
-                                        <iframe 
-                                          key={`mob-fti-${index}`} 
-                                          src={commentMediaInfo.embedUrl}
-                                          style={{border: "none", height: "250px"}}
-                                          title="Embedded content"
-                                          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
-                                          allowFullScreen />
+                                        });
+                                      }}
+                                      onMouseLeave={() => {
+                                        removeHighlight();
+                                        setOutOfViewCid(null);
+                                      }} 
+                                      className="quote-link">
+                                        c/{reply.shortCid}</Link>
+                                        &nbsp;
                                       </div>
-                                    ) : (
-                                      <img 
-                                        key={`mob-fti-${index}`}
-                                        src={commentMediaInfo.thumbnail} 
-                                        alt="thumbnail"
-                                        onClick={() => {handleThumbnailClick(index, true)}}
-                                        style={{cursor: "pointer"}}
-                                        onError={(e) => e.target.src = fallbackImgUrl} />
-                                    )}
-                                    {commentMediaInfo?.type === "video" || "iframe" ? (
-                                      isMobileThumbnailClicked[index] ? (
-                                        <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
-                                          <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
-                                          onClick={() => {handleThumbnailClick(index, true)}}
-                                          >Close</span>
-                                        </div>
-                                      ) : (
-                                        <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
-                                    )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
-                                  </span>
-                                </div>
-                              )}
-                                {commentMediaInfo?.url ? (
-                                  commentMediaInfo.type === "webpage" ? (
-                                    <div key={`enlarge-mob-${index}`} className="img-container">
-                                      <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
-                                        {thread.thumbnailUrl ? (
-                                          <img key={`mob-img-${index}`} 
-                                          src={commentMediaInfo.thumbnail} alt="thumbnail" 
-                                          onClick={handleImageClick}
-                                          style={{cursor: "pointer"}}
-                                          onError={(e) => e.target.src = fallbackImgUrl} />
-                                        ) : null}
-                                        <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
-                                      </span>
+                                    ))}
                                     </div>
-                                  ) : commentMediaInfo.type === "image" ? (
-                                    <div key={`enlarge-mob-${index}`} className="img-container">
-                                      <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
-                                        <img key={`mob-img-${index}`} 
-                                        src={commentMediaInfo.url} alt={commentMediaInfo.type} 
-                                        onClick={handleImageClick}
-                                        style={{cursor: "pointer"}}
-                                        onError={(e) => e.target.src = fallbackImgUrl} />
-                                        <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
-                                      </span>
-                                    </div>
-                                  ) : commentMediaInfo.type === "video" ? (
-                                      <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
-                                        {isMobileThumbnailClicked[index] ? (
-                                          <video key={`fti-${index}`} 
-                                          src={commentMediaInfo.url} alt={commentMediaInfo.type}
-                                          controls
-                                          style={{ cursor: 'pointer' }} 
-                                          onError={(e) => e.target.src = fallbackImgUrl} />
-                                        ) : (
-                                          <video 
-                                            key={`fti-${index}`}
-                                            src={commentMediaInfo.url} 
-                                            alt="thumbnail"
-                                            onClick={() => {handleThumbnailClick(index, true)}}
-                                            style={{cursor: "pointer"}}
-                                            id="video-thumbnail-mobile"
-                                            onError={(e) => e.target.src = fallbackImgUrl} 
-                                          />
-                                        )}
-                                        {commentMediaInfo?.type === "video" || "iframe" ? (
-                                          isMobileThumbnailClicked[index] ? (
-                                            <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
-                                              <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
-                                              onClick={() => {handleThumbnailClick(index, true)}}
-                                              >Close</span>
-                                            </div>
-                                          ) : (
-                                            <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
-                                        )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
-                                      </span>
-                                  ) : commentMediaInfo.type === "audio" ? (
-                                      <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
-                                        <audio key={`mob-img-${index}`} 
-                                        src={commentMediaInfo.url} alt={commentMediaInfo.type} 
-                                        onError={(e) => e.target.src = fallbackImgUrl} />
-                                        <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
-                                      </span>
-                                  ) : null
-                                ) : null}
-                            </div>
-                          ) : null}
-                          {thread.content ? (
-                            thread.content?.length > 500 ?
-                            <Fragment key={`fragment12-${index}`}>
-                              <blockquote key={`mob-bq-${index}`} className="post-message-mobile">
-                                <Post content={thread.content?.slice(0, 500)} key={`post-mobile-${index}`} />
-                                <span key={`mob-ttl-s-${index}`} className="ttl"> (...)
-                                <br key={`mob-ttl-s-br1-${index}`} />
-                                <EditLabel key={`edit-label-thread-mob-${index}`} 
-                                commentCid={thread.cid}
-                                className="ttl"/>
-                                <StateLabel key={`state-label-thread-mob-${index}`}
-                                commentIndex={thread.index}
-                                className="ttl ellipsis"/>
-                                <br key={`mob-ttl-s-br2${thread.cid}`} />
-                                Post too long.&nbsp;
-                                  <Link key={`mob-ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
-                                  &nbsp;to view. </span>
-                              </blockquote>
-                            </Fragment>
-                          : <blockquote key={`mob-bq-${index}`} className="post-message-mobile">
-                              <Post content={thread.content} key={`post-mobile-${index}`} />
-                              <EditLabel key={`edit-label-thread-mob-${index}`} 
-                              commentCid={thread.cid}
-                              className="ttl"/>
-                              <StateLabel key={`state-label-thread-mob-${index}`}
-                              commentIndex={thread.index}
-                              className="ttl ellipsis"/>
-                            </blockquote>)
-                          : null}
-                        </div>
-                        <div key={`mob-pl-${index}`} className="post-link-mobile">
-                          <span key={`mob-info-${index}`} className="info-mobile">{
-                          (thread.replyCount + pendingReplyCounts[thread.cid]) === 0 ?
-                          ("No replies")
-                          : (thread.replyCount + pendingReplyCounts[thread.cid]) === 1 ?
-                          ("1 reply")
-                          : (thread.replyCount + pendingReplyCounts[thread.cid]) > 1 ?
-                          ((thread.replyCount + pendingReplyCounts[thread.cid]) + " replies")
-                          : null
-                          }</span>
-                          <Link key={`rl2-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} 
-                          onClick={() => {setSelectedThread(thread.cid); window.scrollTo(0, 0);}}
-                          className="button-mobile" >View Thread</Link>
-                        </div>
-                      </div>
-                      {displayedReplies?.map((reply, index) => {
-                        const replyMediaInfo = getCommentMediaInfo(reply);
-                        const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed);
-                        let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {};
-                        let signerAddress;
-                        if (storedSigners[selectedThreadCidRef]) {
-                          signerAddress = storedSigners[selectedThreadCidRef].address;
-                        }
-                        return (
-                        <div key={`mob-rc-${index}`} className="reply-container">
-                          <div key={`mob-pr-${index}`} className="post-reply post-reply-mobile">
-                            <div key={`mob-pi-${index}`} className="post-info-mobile">
-                              <button key={`pmbm-${index}`} className="post-menu-button-mobile" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>...</button>
-                              <span key={`mob-nb-${index}`} className="name-block-mobile">
-                                {reply.author.displayName
-                                ? reply.author.displayName.length > 20
-                                ? <Fragment key={`fragment13-${index}`}>
-                                    <span key={`mob-n-${index}`} className="name-mobile"
-                                    data-tooltip-id="tooltip"
-                                    data-tooltip-content={reply.author.displayName}
-                                    data-tooltip-place="top">
-                                      {reply.author.displayName.slice(0, 20) + " (...)"}
-                                    </span>
-                                  </Fragment>
-                                  : <span key={`mob-n-${index}`} className="name-mobile">
-                                    {reply.author.displayName}</span>
-                                : <span key={`mob-n-${index}`} className="name-mobile">
-                                  Anonymous</span>}
-                                &nbsp;
-                                <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
-                                  id="reply-button" style={{cursor: "pointer"}}
-                                  onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
-                                >
-                                  (u/
-                                    {reply.author?.shortAddress ?
-                                      (
-                                        <span key={`mob-ha-${index}`} className="highlight-address-mobile">
-                                          {reply.author?.shortAddress}
-                                        </span>
-                                      ) : (
-                                        anonymousMode ? (
-                                          <span key={`mob-ha-${index}`}>
-                                            {signerAddress?.slice(8, 20)}
-                                          </span>
-                                          ) : (
-                                          <span key={`mob-ha-${index}`}>
-                                            {account?.author?.shortAddress}
-                                          </span>
-                                        )
-                                      )
-                                    }
-                                  )&nbsp;
-                                </span>
-                                <br key={`mob-br-${index}`} />
-                              </span>
-                              <span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
-                              {getDate(reply.timestamp)}&nbsp;
-                                <span key={`mob-pl1-${index}`}>c/</span>
-                                {reply.shortCid ? (
-                                  <Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`mob-pl2-${index}`} 
-                                    onClick={(e) => {
-                                      if (e.button === 2) return;
-                                      e.preventDefault();
-                                      setSelectedThreadCid(thread.cid);
-                                      let text = document.getSelection().toString();
-                                      text = text ? `>${text}` : text;
-                                      setSelectedText(text);
-                                      if (isReplyOpen) {
-                                        setReplyQuoteCid(reply.shortCid);
-                                        setTriggerInsertion(Date.now());
-                                      } else {
-                                        setIsReplyOpen(true); 
-                                        setSelectedShortCid(reply.shortCid); 
-                                        setSelectedParentCid(reply.cid);
-                                      }
-                                    }} title="Reply to this post">{reply.shortCid}
-                                  </Link>
-                                ) : (
-                                  <PendingLabel key="pending-mob" commentIndex={reply.index} />
-                                )}
-                              </span>
-                            </div>
-                            {reply.link ? (
-                              <div key={`mob-f-${index}`} className="file-mobile">
-                                  {replyMediaInfo?.url ? (
-                                    replyMediaInfo.type === "webpage" ? (
-                                      <div key={`enlarge-mob-reply-${index}`} className="img-container">
-                                        <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
-                                          {reply.thumbnailUrl ? (
-                                            <img key={`mob-img-${index}`} 
-                                            src={replyMediaInfo.thumbnail} alt="thumbnail" 
-                                            onClick={handleImageClick}
-                                            style={{cursor: "pointer"}}
-                                            onError={(e) => e.target.src = fallbackImgUrl} />
-                                          ) : null}
-                                          <div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
-                                        </span>
-                                      </div>
-                                    ) : replyMediaInfo.type === "image" ? (
-                                      <div key={`enlarge-mob-reply-${index}`} className="img-container">
-                                        <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
-                                          <img key={`mob-img-${index}`} 
-                                          src={replyMediaInfo.url} alt={replyMediaInfo.type} 
-                                          onClick={handleImageClick}
-                                          style={{cursor: "pointer"}}
-                                          onError={(e) => e.target.src = fallbackImgUrl} />
-                                          <div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
-                                        </span>
-                                      </div>
-                                    ) : replyMediaInfo.type === "video" ? (
-                                        <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
-                                            <video key={`fti-${index}`} 
-                                            src={replyMediaInfo.url} alt={replyMediaInfo.type} 
-                                            style={{ pointerEvents: "none" }}
-                                            onError={(e) => e.target.src = fallbackImgUrl} />
-                                          <div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
-                                        </span>
-                                    ) : replyMediaInfo.type === "audio" ? (
-                                        <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
-                                          <audio key={`mob-img-${index}`} 
-                                          src={replyMediaInfo.url} alt={replyMediaInfo.type} 
-                                          onError={(e) => e.target.src = fallbackImgUrl} />
-                                          <div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
-                                        </span>
-                                    ) : null
                                   ) : null}
                               </div>
-                            ) : null}
-                            {reply.content ? (
-                              reply.content?.length > 500 ?
-                              <Fragment key={`fragment15-${index}`}>
-                                <blockquote key={`mob-pm-${index}`} className="post-message">
-                                  <Link to={() => {}} key={`mob-r-pm-${index}`} className="quotelink" 
-                                  ref={el => {
-                                    quoteRefsMobile.current[reply.cid] = el;
-                                  }}
-                                  onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
-                                  onMouseOver={(event) => {
-                                    event.stopPropagation();
-                                    handleQuoteHover(reply, shortParentCid, () => {
-                                      setOutOfViewCid(reply.parentCid);
-                                      const rect = quoteRefsMobile.current[reply.cid].getBoundingClientRect();
-                                      const distanceToRight = window.innerWidth - rect.right;
-                                      const distanceToTop = rect.top;
-                                      const distanceToBottom = window.innerHeight - rect.bottom;
-                                      let top;
-
-                                      if (distanceToTop < postOnHoverHeight / 2) {
-                                        top = window.scrollY - 5;
-                                      } else if (distanceToBottom < postOnHoverHeight / 2) {
-                                        top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
-                                      } else {
-                                        top = rect.top + window.scrollY - postOnHoverHeight / 2;
-                                      }
-                                    
-                                      if (distanceToRight < 200) {
-                                        setOutOfViewPosition({
-                                          top,
-                                          right: window.innerWidth - rect.left - 10,
-                                          maxWidth: rect.left - 5
-                                        });
-                                      } else {
-                                        setOutOfViewPosition({
-                                          top,
-                                          left: rect.left + rect.width + 5,
-                                          maxWidth: window.innerWidth - rect.left - rect.width - 5
-                                        });
-                                      }
-                                    });
-                                  }}
-                                  onMouseLeave={() => {
-                                    removeHighlight();
-                                    setOutOfViewCid(null);
-                                  }}>
-                                    {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
-                                  </Link>
-                                  <Post key={`post-mobile-${index}`}
-                                    content={reply.content?.slice(0, 500)}
-                                    postQuoteRef={(quoteShortParentCid, ref) => {
-                                      postRefs.current[quoteShortParentCid] = ref;
-                                    }}
-                                    postQuoteOnClick={(quoteShortParentCid) => {
-                                      handleQuoteClick(reply, quoteShortParentCid, null)
-                                    }}
-                                    postQuoteOnOver={(quoteShortParentCid) => {
-                                      const quoteParentCid = cidTracker[quoteShortParentCid];
-                                      if (outOfViewCid !== quoteParentCid) {
-                                        handleQuoteHover(reply, quoteShortParentCid, () => {
-                                          setOutOfViewCid(quoteParentCid);
-      
-                                        const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
-                                        const distanceToRight = window.innerWidth - rect.right;
-                                        const distanceToTop = rect.top;
-                                        const distanceToBottom = window.innerHeight - rect.bottom;
-                                        let top;
-      
-                                        if (distanceToTop < postOnHoverHeight / 2) {
-                                          top = window.scrollY - 5;
-                                        } else if (distanceToBottom < postOnHoverHeight / 2) {
-                                          top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
-                                        } else {
-                                          top = rect.top + window.scrollY - postOnHoverHeight / 2;
-                                        }
-                                      
-                                        if (distanceToRight < 200) {
-                                          setOutOfViewPosition({
-                                            top,
-                                            right: window.innerWidth - rect.left - 10,
-                                            maxWidth: rect.left - 5
-                                          });
-                                        } else {
-                                          setOutOfViewPosition({
-                                            top,
-                                            left: rect.left + rect.width + 5,
-                                            maxWidth: window.innerWidth - rect.left - rect.width - 5
-                                          });
-                                        }
-                                      })
-                                    }}
-                                  }
-                                    postQuoteOnLeave={() => {
-                                      removeHighlight();
-                                      setOutOfViewCid(null);
-                                    }}
-                                  />
-                                  <span key={`mob-ttl-s-${index}`} className="ttl"> (...)
-                                  <br key={`mob-ttl-s-br1-${index}`} />
-                                  <EditLabel key={`edit-label-reply-mob-${index}`} 
-                                  commentCid={reply.cid}
-                                  className="ttl"/>
-                                  <StateLabel key={`state-label-reply-mob-${index}`}
-                                  commentIndex={reply.index}
-                                  className="ttl ellipsis"/>
-                                  <br key={`mob-ttl-s-br2${reply.cid}`} />
-                                  Comment too long.&nbsp;
-                                    <Link key={`mob-ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
-                                  &nbsp;to view. </span>
-                                </blockquote>
-                              </Fragment>
-                            : <blockquote key={`mob-pm-${index}`} className="post-message">
-                                <Link to={() => {}} key={`mob-r-pm-${index}`} className="quotelink" 
-                                ref={el => {
-                                  quoteRefsMobile.current[reply.cid] = el;
-                                }}
-                                onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
-                                onMouseOver={(event) => {
-                                  event.stopPropagation();
-                                  handleQuoteHover(reply, shortParentCid, () => {
-                                    setOutOfViewCid(reply.parentCid);
-                                    const rect = quoteRefsMobile.current[reply.cid].getBoundingClientRect();
-                                    const distanceToRight = window.innerWidth - rect.right;
-                                    const distanceToTop = rect.top;
-                                    const distanceToBottom = window.innerHeight - rect.bottom;
-                                    let top;
-
-                                    if (distanceToTop < postOnHoverHeight / 2) {
-                                      top = window.scrollY - 5;
-                                    } else if (distanceToBottom < postOnHoverHeight / 2) {
-                                      top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
-                                    } else {
-                                      top = rect.top + window.scrollY - postOnHoverHeight / 2;
-                                    }
-                                  
-                                    if (distanceToRight < 200) {
-                                      setOutOfViewPosition({
-                                        top,
-                                        right: window.innerWidth - rect.left - 10,
-                                        maxWidth: rect.left - 5
-                                      });
-                                    } else {
-                                      setOutOfViewPosition({
-                                        top,
-                                        left: rect.left + rect.width + 5,
-                                        maxWidth: window.innerWidth - rect.left - rect.width - 5
-                                      });
-                                    }
-                                  });
-                                }}
-                                onMouseLeave={() => {
-                                  removeHighlight();
-                                  setOutOfViewCid(null);
-                                }}>
-                                  {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
-                                </Link>
-                                <Post key={`post-mobile-${index}`}
-                                  content={reply.content} 
-                                  postQuoteRef={(quoteShortParentCid, ref) => {
-                                    postRefs.current[quoteShortParentCid] = ref;
-                                  }}
-                                  postQuoteOnClick={(quoteShortParentCid) => {
-                                    handleQuoteClick(reply, quoteShortParentCid, null)
-                                  }}
-                                  postQuoteOnOver={(quoteShortParentCid) => {
-                                    const quoteParentCid = cidTracker[quoteShortParentCid];
-                                    if (outOfViewCid !== quoteParentCid) {
-                                      handleQuoteHover(reply, quoteShortParentCid, () => {
-                                        setOutOfViewCid(quoteParentCid);
-    
-                                      const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
-                                      const distanceToRight = window.innerWidth - rect.right;
-                                      const distanceToTop = rect.top;
-                                      const distanceToBottom = window.innerHeight - rect.bottom;
-                                      let top;
-    
-                                      if (distanceToTop < postOnHoverHeight / 2) {
-                                        top = window.scrollY - 5;
-                                      } else if (distanceToBottom < postOnHoverHeight / 2) {
-                                        top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
-                                      } else {
-                                        top = rect.top + window.scrollY - postOnHoverHeight / 2;
-                                      }
-                                    
-                                      if (distanceToRight < 200) {
-                                        setOutOfViewPosition({
-                                          top,
-                                          right: window.innerWidth - rect.left - 10,
-                                          maxWidth: rect.left - 5
-                                        });
-                                      } else {
-                                        setOutOfViewPosition({
-                                          top,
-                                          left: rect.left + rect.width + 5,
-                                          maxWidth: window.innerWidth - rect.left - rect.width - 5
-                                        });
-                                      }
-                                    })
-                                  }}
-                                }
-                                  postQuoteOnLeave={() => {
-                                    removeHighlight();
-                                    setOutOfViewCid(null);
-                                  }}
-                                />
-                                <EditLabel key={`edit-label-reply-mob-${index}`} 
-                                commentCid={reply.cid}
-                                className="ttl"/>
-                                <StateLabel key={`state-label-reply-mob-${index}`}
-                                commentIndex={reply.index}
-                                className="ttl ellipsis"/>
-                              </blockquote>)
-                            : null}
-                              {reply.replyCount > 0 ? (
-                                <div key={`back-mob-${index}`} className='backlink backlink-mobile'>
-                                {reply.replies?.pages?.topAll.comments
-                                .sort((a, b) => a.timestamp - b.timestamp)
-                                .map((reply, index) => (
-                                  <div key={`div-back${index}`} style={{display: 'inline-block'}} 
-                                  ref={el => {
-                                    backlinkRefsMobile.current[reply.cid] = el;
-                                  }}>
-                                  <Link key={`ql-${index}`} to={() => {}}
-                                  onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
-                                  onMouseOver={(event) => {
-                                    event.stopPropagation();
-                                    handleQuoteHover(reply, reply.shortCid, () => {
-                                      setOutOfViewCid(reply.cid)
-                                      const rect = backlinkRefsMobile.current[reply.cid].getBoundingClientRect();
-                                      const distanceToRight = window.innerWidth - rect.right;
-                                      const distanceToTop = rect.top;
-                                      const distanceToBottom = window.innerHeight - rect.bottom;
-                                      let top;
-
-                                      if (distanceToTop < postOnHoverHeight / 2) {
-                                        top = window.scrollY - 5;
-                                      } else if (distanceToBottom < postOnHoverHeight / 2) {
-                                        top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
-                                      } else {
-                                        top = rect.top + window.scrollY - postOnHoverHeight / 2;
-                                      }
-                                    
-                                      if (distanceToRight < 200) {
-                                        setOutOfViewPosition({
-                                          top,
-                                          right: window.innerWidth - rect.left - 10,
-                                          maxWidth: rect.left - 5
-                                        });
-                                      } else {
-                                        setOutOfViewPosition({
-                                          top,
-                                          left: rect.left + rect.width + 5,
-                                          maxWidth: window.innerWidth - rect.left - rect.width - 5
-                                        });
-                                      }
-                                    });
-                                  }}
-                                  onMouseLeave={() => {
-                                    removeHighlight();
-                                    setOutOfViewCid(null);
-                                  }} 
-                                  className="quote-link">
-                                    c/{reply.shortCid}</Link>
-                                    &nbsp;
-                                  </div>
-                                ))}
-                                </div>
-                              ) : null}
-                          </div>
+                            </div>
+                          )})}
                         </div>
-                      )})}
-                    </div>
-                  </Fragment>
+                      </Fragment>
                     );
                   }}
                   endReached={tryLoadMore}
diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx
index f3262287..e5238b1d 100755
--- a/src/components/views/Catalog.jsx
+++ b/src/components/views/Catalog.jsx
@@ -1008,38 +1008,42 @@ const Catalog = () => {
                                 >
                                   <ul className="post-menu-catalog">
                                     <li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
-                                    {<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address || 
-                                    <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
+                                    <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
                                       <>
-                                        <li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
-                                        <li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
+                                        {authorAddress === account?.author.address || 
+                                        authorAddress === account?.signer.address ? (
+                                          <>
+                                            <li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
+                                            <li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
+                                          </>
+                                        ) : null}
+                                        {isModerator ? (
+                                          <>
+                                            {authorAddress === account?.author.address ||
+                                            authorAddress === account?.signer.address ? (
+                                              null
+                                            ) : (
+                                              <li onClick={() => {
+                                                setModeratingCommentCid(thread.cid)
+                                                setIsModerationOpen(true); 
+                                                handleOptionClick(thread.cid);
+                                                setDeletePost(true);
+                                              }}>
+                                              Delete post
+                                              </li>
+                                            )}
+                                            <li
+                                            onClick={() => {
+                                              setModeratingCommentCid(thread.cid)
+                                              setIsModerationOpen(true); 
+                                              handleOptionClick(thread.cid);
+                                            }}>
+                                              Mod tools
+                                            </li>
+                                          </>
+                                        ) : null}
                                       </>
-                                    ) : null}
-                                    {isModerator ? (
-                                      <>
-                                        {<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address || 
-                                        <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
-                                          null
-                                        ) : (
-                                          <li onClick={() => {
-                                            setModeratingCommentCid(thread.cid)
-                                            setIsModerationOpen(true); 
-                                            handleOptionClick(thread.cid);
-                                            setDeletePost(true);
-                                          }}>
-                                          Delete post
-                                          </li>
-                                        )}
-                                        <li
-                                        onClick={() => {
-                                          setModeratingCommentCid(thread.cid)
-                                          setIsModerationOpen(true); 
-                                          handleOptionClick(thread.cid);
-                                        }}>
-                                          Mod tools
-                                        </li>
-                                      </>
-                                    ) : null}
+                                    )}</VerifiedAuthor>
                                     {(commentMediaInfo && (
                                       commentMediaInfo.type === 'image' || 
                                       (commentMediaInfo.type === 'webpage' && 
diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx
index 5651dd13..33be2a40 100755
--- a/src/components/views/Subscriptions.jsx
+++ b/src/components/views/Subscriptions.jsx
@@ -860,40 +860,44 @@ const Subscriptions = () => {
                               >
                                 <ul className="post-menu-catalog">
                                   <li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
-                                  {<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address || 
-                                  <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
+                                  <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
                                     <>
-                                      <li onClick={() => {handleAuthorEditClick(thread); setSelectedAddress(thread.subplebbitAddress);}}>Edit post</li>
-                                      <li onClick={() => {handleAuthorDeleteClick(thread); setSelectedAddress(thread.subplebbitAddress);}}>Delete post</li>
+                                      {authorAddress === account?.author.address || 
+                                      authorAddress === account?.signer.address ? (
+                                        <>
+                                          <li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
+                                          <li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
+                                        </>
+                                      ) : null}
+                                      {isModerator ? (
+                                        <>
+                                          {authorAddress === account?.author.address ||
+                                          authorAddress === account?.signer.address ? (
+                                            null
+                                          ) : (
+                                            <li onClick={() => {
+                                              setSelectedAddress(thread.subplebbitAddress);
+                                              setModeratingCommentCid(thread.cid)
+                                              setIsModerationOpen(true); 
+                                              handleOptionClick(thread.cid);
+                                              setDeletePost(true);
+                                            }}>
+                                              Delete post
+                                            </li>
+                                          )}
+                                          <li
+                                          onClick={() => {
+                                            setSelectedAddress(thread.subplebbitAddress);
+                                            setModeratingCommentCid(thread.cid)
+                                            setIsModerationOpen(true); 
+                                            handleOptionClick(thread.cid);
+                                          }}>
+                                            Mod tools
+                                          </li>
+                                        </>
+                                      ) : null}
                                     </>
-                                  ) : null}
-                                  {isModerator ? (
-                                    <>
-                                      {<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address || 
-                                      <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
-                                        null
-                                      ) : (
-                                        <li onClick={() => {
-                                          setSelectedAddress(thread.subplebbitAddress);
-                                          setModeratingCommentCid(thread.cid)
-                                          setIsModerationOpen(true); 
-                                          handleOptionClick(thread.cid);
-                                          setDeletePost(true);
-                                        }}>
-                                        Delete post
-                                        </li>
-                                      )}
-                                      <li
-                                      onClick={() => {
-                                        setSelectedAddress(thread.subplebbitAddress);
-                                        setModeratingCommentCid(thread.cid)
-                                        setIsModerationOpen(true); 
-                                        handleOptionClick(thread.cid);
-                                      }}>
-                                        Mod tools
-                                      </li>
-                                    </>
-                                  ) : null}
+                                  )}</VerifiedAuthor>
                                   {(commentMediaInfo && (
                                     commentMediaInfo.type === 'image' || 
                                     (commentMediaInfo.type === 'webpage' && 
@@ -1150,40 +1154,44 @@ const Subscriptions = () => {
                               >
                                 <ul className="post-menu-catalog">
                                   <li onClick={() => handleOptionClick(reply.cid)}>Hide post</li>
-                                  {<VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address || 
-                                  <VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
+                                  <VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (
                                     <>
-                                      <li onClick={() => {handleAuthorEditClick(reply); setSelectedAddress(thread.subplebbitAddress);}}>Edit post</li>
-                                      <li onClick={() => {handleAuthorDeleteClick(reply); setSelectedAddress(thread.subplebbitAddress);}}>Delete post</li>
-                                    </>
-                                  ) : null}
-                                  {isModerator ? (
-                                    <>
-                                    {<VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address || 
-                                    <VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
-                                        null
-                                      ) : (
-                                        <li onClick={() => {
+                                      {authorAddress === account?.author.address ||
+                                      authorAddress === account?.signer.address ? (
+                                        <>
+                                          <li onClick={() => handleAuthorEditClick(reply)}>Edit post</li>
+                                          <li onClick={() => handleAuthorDeleteClick(reply)}>Delete post</li>
+                                        </>
+                                      ) : null}
+                                      {isModerator ? (
+                                        <>
+                                          {authorAddress === account?.author.address || 
+                                          authorAddress === account?.signer.address ? (
+                                            null
+                                          ) : (
+                                          <li onClick={() => {
                                           setSelectedAddress(thread.subplebbitAddress);
                                           setModeratingCommentCid(reply.cid)
                                           setIsModerationOpen(true); 
                                           handleOptionClick(reply.cid);
                                           setDeletePost(true);
+                                          }}>
+                                          Delete post
+                                          </li>
+                                        )}
+                                        <li
+                                        onClick={() => {
+                                          setSelectedAddress(thread.subplebbitAddress);
+                                          setModeratingCommentCid(reply.cid)
+                                          setIsModerationOpen(true); 
+                                          handleOptionClick(reply.cid);
                                         }}>
-                                        Delete post
+                                          Mod tools
                                         </li>
-                                      )}
-                                      <li
-                                      onClick={() => {
-                                        setSelectedAddress(thread.subplebbitAddress);
-                                        setModeratingCommentCid(reply.cid)
-                                        setIsModerationOpen(true); 
-                                        handleOptionClick(reply.cid);
-                                      }}>
-                                        Mod tools
-                                      </li>
+                                      </>
+                                      ) : null}
                                     </>
-                                  ) : null}
+                                  )}</VerifiedAuthor>
                                   {(replyMediaInfo && (
                                     replyMediaInfo.type === 'image' || 
                                     (replyMediaInfo.type === 'webpage' && 
diff --git a/src/components/views/SubscriptionsCatalog.jsx b/src/components/views/SubscriptionsCatalog.jsx
index 0fe0369c..42312209 100755
--- a/src/components/views/SubscriptionsCatalog.jsx
+++ b/src/components/views/SubscriptionsCatalog.jsx
@@ -564,40 +564,44 @@ const SubscriptionsCatalog = () => {
                           >
                             <ul className="post-menu-catalog">
                               <li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
-                              {<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address || 
-                              <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
+                              <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
                                 <>
-                                  <li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
-                                  <li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
+                                  {authorAddress === account?.author.address || 
+                                  authorAddress === account?.signer.address ? (
+                                    <>
+                                      <li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
+                                      <li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
+                                    </>
+                                  ) : null}
+                                  {isModerator ? (
+                                    <>
+                                      {authorAddress === account?.author.address ||
+                                      authorAddress === account?.signer.address ? (
+                                        null
+                                      ) : (
+                                        <li onClick={() => {
+                                          setSelectedAddress(thread.subplebbitAddress);
+                                          setModeratingCommentCid(thread.cid)
+                                          setIsModerationOpen(true); 
+                                          handleOptionClick(thread.cid);
+                                          setDeletePost(true);
+                                        }}>
+                                        Delete post
+                                        </li>
+                                      )}
+                                      <li
+                                      onClick={() => {
+                                        setSelectedAddress(thread.subplebbitAddress);
+                                        setModeratingCommentCid(thread.cid)
+                                        setIsModerationOpen(true); 
+                                        handleOptionClick(thread.cid);
+                                      }}>
+                                        Mod tools
+                                      </li>
+                                    </>
+                                  ) : null}
                                 </>
-                              ) : null}
-                              {isModerator ? (
-                                <>
-                                  {<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address || 
-                                  <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
-                                    null
-                                  ) : (
-                                    <li onClick={() => {
-                                      setSelectedAddress(thread.subplebbitAddress);
-                                      setModeratingCommentCid(thread.cid)
-                                      setIsModerationOpen(true); 
-                                      handleOptionClick(thread.cid);
-                                      setDeletePost(true);
-                                    }}>
-                                    Delete post
-                                    </li>
-                                  )}
-                                  <li
-                                  onClick={() => {
-                                    setSelectedAddress(thread.subplebbitAddress);
-                                    setModeratingCommentCid(thread.cid)
-                                    setIsModerationOpen(true); 
-                                    handleOptionClick(thread.cid);
-                                  }}>
-                                    Mod tools
-                                  </li>
-                                </>
-                              ) : null}
+                              )}</VerifiedAuthor>
                               {(commentMediaInfo && (
                                 commentMediaInfo.type === 'image' || 
                                 (commentMediaInfo.type === 'webpage' && 
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index 6931b402..178ed2a3 100755
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -1024,38 +1024,42 @@ const Thread = () => {
                           >
                             <ul className="post-menu-catalog">
                               <li onClick={() => handleOptionClick(comment.cid)}>Hide thread</li>
-                                {<VerifiedAuthor commentCid={comment.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address || 
-                                <VerifiedAuthor commentCid={comment.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
+                              <VerifiedAuthor commentCid={comment.cid}>{({ authorAddress }) => (
                                 <>
-                                  <li onClick={() => handleAuthorEditClick(comment)}>Edit post</li>
-                                  <li onClick={() => handleAuthorDeleteClick(comment)}>Delete post</li>
-                                </>
-                              ) : null}
-                              {isModerator ? (
-                                <>
-                                  {<VerifiedAuthor commentCid={comment.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address || 
-                                    <VerifiedAuthor commentCid={comment.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
-                                    null
-                                  ) : (
-                                    <li onClick={() => {
+                                  {authorAddress === account?.author.address || 
+                                  authorAddress === account?.signer.address ? (
+                                    <>
+                                      <li onClick={() => handleAuthorEditClick(comment)}>Edit post</li>
+                                      <li onClick={() => handleAuthorDeleteClick(comment)}>Delete post</li>
+                                    </>
+                                  ) : null}
+                                  {isModerator ? (
+                                    <>
+                                      {authorAddress === account?.author.address ||
+                                      authorAddress === account?.signer.address ? (
+                                        null
+                                      ) : (
+                                      <li onClick={() => {
+                                        setModeratingCommentCid(comment.cid)
+                                        setIsModerationOpen(true); 
+                                        handleOptionClick(comment.cid);
+                                        setDeletePost(true);
+                                      }}>
+                                      Delete post
+                                      </li>
+                                    )}
+                                    <li
+                                    onClick={() => {
                                       setModeratingCommentCid(comment.cid)
                                       setIsModerationOpen(true); 
                                       handleOptionClick(comment.cid);
-                                      setDeletePost(true);
                                     }}>
-                                    Delete post
+                                      Mod tools
                                     </li>
-                                  )}
-                                  <li
-                                  onClick={() => {
-                                    setModeratingCommentCid(comment.cid)
-                                    setIsModerationOpen(true); 
-                                    handleOptionClick(comment.cid);
-                                  }}>
-                                    Mod tools
-                                  </li>
-                                </>
-                              ) : null}
+                                  </>
+                                ) : null}
+                              </>
+                            )}</VerifiedAuthor>
                               {(commentMediaInfo && (
                                 commentMediaInfo.type === 'image' || 
                                 (commentMediaInfo.type === 'webpage' && 
@@ -1272,38 +1276,42 @@ const Thread = () => {
                               >
                                 <ul className="post-menu-catalog">
                                   <li onClick={() => handleOptionClick(reply.cid)}>Hide post</li>
-                                    {<VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address ||
-                                    <VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
+                                  <VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (
                                     <>
-                                      <li onClick={() => handleAuthorEditClick(reply)}>Edit post</li>
-                                      <li onClick={() => handleAuthorDeleteClick(reply)}>Delete post</li>
+                                      {authorAddress === account?.author.address ||
+                                      authorAddress === account?.signer.address ? (
+                                        <>
+                                          <li onClick={() => handleAuthorEditClick(reply)}>Edit post</li>
+                                          <li onClick={() => handleAuthorDeleteClick(reply)}>Delete post</li>
+                                        </>
+                                      ) : null}
+                                      {isModerator ? (
+                                        <>
+                                          {authorAddress === account?.author.address || 
+                                          authorAddress === account?.signer.address ? (
+                                            null
+                                          ) : (
+                                            <li onClick={() => {
+                                              setModeratingCommentCid(reply.cid)
+                                              setIsModerationOpen(true); 
+                                              handleOptionClick(reply.cid);
+                                              setDeletePost(true);
+                                            }}>
+                                            Delete post
+                                            </li>
+                                          )}
+                                          <li
+                                          onClick={() => {
+                                            setModeratingCommentCid(reply.cid)
+                                            setIsModerationOpen(true); 
+                                            handleOptionClick(reply.cid);
+                                          }}>
+                                            Mod tools
+                                          </li>
+                                        </>
+                                      ) : null}
                                     </>
-                                  ) : null}
-                                  {isModerator ? (
-                                    <>
-                                    {<VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.author.address ||
-                                    <VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (authorAddress)}</VerifiedAuthor> === account?.signer.address ? (
-                                        null
-                                      ) : (
-                                        <li onClick={() => {
-                                          setModeratingCommentCid(reply.cid)
-                                          setIsModerationOpen(true); 
-                                          handleOptionClick(reply.cid);
-                                          setDeletePost(true);
-                                        }}>
-                                        Delete post
-                                        </li>
-                                      )}
-                                      <li
-                                      onClick={() => {
-                                        setModeratingCommentCid(reply.cid)
-                                        setIsModerationOpen(true); 
-                                        handleOptionClick(reply.cid);
-                                      }}>
-                                        Mod tools
-                                      </li>
-                                    </>
-                                  ) : null}
+                                  )}</VerifiedAuthor>
                                   {(replyMediaInfo && (
                                     replyMediaInfo.type === 'image' || 
                                     (replyMediaInfo.type === 'webpage' &&