From 572eb3b4e203b870469543af37261d434bf7cf82 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Tue, 28 May 2024 16:44:56 +0200
Subject: [PATCH 01/13] feat(catalog): add post menu

---
 .../catalog-row/catalog-row.module.css        | 34 ++------------
 src/components/catalog-row/catalog-row.tsx    | 45 +++----------------
 .../post/post-menu/post-menu.module.css       | 30 +++++++++++++
 src/components/post/post-menu/post-menu.tsx   | 31 ++++++++-----
 4 files changed, 58 insertions(+), 82 deletions(-)

diff --git a/src/components/catalog-row/catalog-row.module.css b/src/components/catalog-row/catalog-row.module.css
index d28ba1c8..f09270bb 100644
--- a/src/components/catalog-row/catalog-row.module.css
+++ b/src/components/catalog-row/catalog-row.module.css
@@ -79,36 +79,10 @@
   text-decoration: none;
 }
 
-.postMenuBtnPadding {
-  left: 5px;
-  top: 5px;
-  position: relative;
+.post .postMenu {
+  visibility: hidden;
 }
 
-.postMenuBtn {
-  position: absolute;
-  bottom: 5px;
-  line-height: 1em;
-  color: var(--catalog-post-menu-btn-color);
-  opacity: 0;
-  transition: transform 0.1s;
-}
-
-.post:hover .postMenuBtn {
-  opacity: var(--catalog-post-menu-btn-opacity);
-}
-
-.post:hover .postMenuBtn:hover {
-  cursor: pointer;
-  color: var(--catalog-post-menu-btn-hover-color);
-  opacity: var(--catalog-post-menu-btn-hover-opacity);
-}
-
-.postMenuBtn {
-  /* preserve unicode triangle for button, some browsers will use an emoji */
-  font-variant: normal;
-  font-feature-settings: "tnum";
-  -webkit-font-feature-settings: "tnum"; /* Chrome, Opera, and Safari */
-  -moz-font-feature-settings: "tnum";    /* Firefox */
-  font-variant-numeric: tabular-nums;
+.post:hover .postMenu {
+  visibility: visible;
 }
\ No newline at end of file
diff --git a/src/components/catalog-row/catalog-row.tsx b/src/components/catalog-row/catalog-row.tsx
index db5cc4ca..f1bc7a1d 100644
--- a/src/components/catalog-row/catalog-row.tsx
+++ b/src/components/catalog-row/catalog-row.tsx
@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Comment } from '@plebbit/plebbit-react-hooks';
@@ -7,6 +6,7 @@ import { isAllView } from '../../lib/utils/view-utils';
 import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
 import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
 import styles from './catalog-row.module.css';
+import PostMenu from '../post/post-menu/post-menu';
 
 export const CatalogPostMedia = ({ commentMediaInfo }: { commentMediaInfo: any }) => {
   const { patternThumbnailUrl, thumbnail, type, url } = commentMediaInfo || {};
@@ -30,13 +30,7 @@ export const CatalogPostMedia = ({ commentMediaInfo }: { commentMediaInfo: any }
   return thumbnailComponent;
 };
 
-interface CatalogPostProps {
-  post: Comment;
-  openMenu: boolean;
-  toggleMenu: () => void;
-}
-
-const CatalogPost = ({ openMenu, post, toggleMenu }: CatalogPostProps) => {
+const CatalogPost = ({ post }: { post: Comment }) => {
   const { t } = useTranslation();
   const { cid, content, isDescription, isRules, link, linkHeight, linkWidth, locked, pinned, replyCount, subplebbitAddress, title } = post || {};
   const commentMediaInfo = getCommentMediaInfo(post);
@@ -76,19 +70,6 @@ const CatalogPost = ({ openMenu, post, toggleMenu }: CatalogPostProps) => {
     </div>
   );
 
-  useEffect(() => {
-    const handlePageClick = () => {
-      if (openMenu) {
-        toggleMenu();
-      }
-    };
-    document.addEventListener('click', handlePageClick);
-
-    return () => {
-      document.removeEventListener('click', handlePageClick);
-    };
-  }, [openMenu, toggleMenu]);
-
   return (
     <div className={styles.post}>
       {hasThumbnail ? (
@@ -111,18 +92,8 @@ const CatalogPost = ({ openMenu, post, toggleMenu }: CatalogPostProps) => {
             / L: <b>{linkCount}</b>
           </span>
         )}
-        <span className={styles.postMenuBtnPadding}>
-          <span
-            className={styles.postMenuBtn}
-            title='Thread Menu'
-            onClick={(e) => {
-              e.stopPropagation();
-              toggleMenu();
-            }}
-            style={{ transform: openMenu ? 'rotate(90deg)' : 'rotate(0deg)' }}
-          >
-            ▶
-          </span>
+        <span className={styles.postMenu}>
+          <PostMenu post={post} />
         </span>
       </div>
       <Link to={postLink}>
@@ -141,16 +112,10 @@ interface CatalogRowProps {
 }
 
 const CatalogRow = ({ row }: CatalogRowProps) => {
-  const [postWithMenuOpen, setPostWithMenuOpen] = useState<number | null>(null);
-
-  const handleToggleMenu = (index: number) => {
-    setPostWithMenuOpen(postWithMenuOpen === index ? null : index);
-  };
-
   return (
     <div className={styles.row}>
       {row.map((post, index) => (
-        <CatalogPost key={index} post={post} openMenu={postWithMenuOpen === index} toggleMenu={() => handleToggleMenu(index)} />
+        <CatalogPost key={index} post={post} />
       ))}
     </div>
   );
diff --git a/src/components/post/post-menu/post-menu.module.css b/src/components/post/post-menu/post-menu.module.css
index a97282c7..451151f5 100644
--- a/src/components/post/post-menu/post-menu.module.css
+++ b/src/components/post/post-menu/post-menu.module.css
@@ -60,6 +60,36 @@
   display: block;
 }
 
+.postMenuBtnCatalogWrapper {
+  left: 5px;
+  top: 5px;
+  position: relative;
+}
+
+.postMenuBtnCatalog {
+  position: absolute;
+  bottom: 5px;
+  line-height: 1em;
+  color: var(--catalog-post-menu-btn-color);
+  opacity: var(--catalog-post-menu-btn-opacity);
+  transition: transform 0.1s;
+}
+
+.postMenuBtnCatalog:hover {
+  cursor: pointer;
+  color: var(--catalog-post-menu-btn-hover-color);
+  opacity: var(--catalog-post-menu-btn-hover-opacity);
+}
+
+.postMenuBtnCatalog {
+  /* preserve unicode triangle for button, some browsers will use an emoji */
+  font-variant: normal;
+  font-feature-settings: "tnum";
+  -webkit-font-feature-settings: "tnum"; /* Chrome, Opera, and Safari */
+  -moz-font-feature-settings: "tnum";    /* Firefox */
+  font-variant-numeric: tabular-nums;
+}
+
 @media (max-width: 640px) {
   .postMenuBtn {
     width: 1em;
diff --git a/src/components/post/post-menu/post-menu.tsx b/src/components/post/post-menu/post-menu.tsx
index 241ff171..39dd653d 100644
--- a/src/components/post/post-menu/post-menu.tsx
+++ b/src/components/post/post-menu/post-menu.tsx
@@ -1,9 +1,12 @@
 import { useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useLocation } from 'react-router-dom';
 import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
 import { Comment } from '@plebbit/plebbit-react-hooks';
 import styles from './post-menu.module.css';
 import { getCommentMediaInfo } from '../../../lib/utils/media-utils';
 import { copyShareLinkToClipboard, isValidURL } from '../../../lib/utils/url-utils';
+import { isCatalogView } from '../../../lib/utils/view-utils';
 
 interface PostMenuProps {
   cid: string;
@@ -84,11 +87,13 @@ const PostMenu = ({ post }: { post: Comment }) => {
   const { thumbnail, type, url } = commentMediaInfo || {};
   const [menuBtnRotated, setMenuBtnRotated] = useState(false);
 
+  const isInCatalogView = isCatalogView(useLocation().pathname);
+
   const { refs, floatingStyles, context } = useFloating({
     placement: 'bottom-start',
     open: menuBtnRotated,
     onOpenChange: setMenuBtnRotated,
-    middleware: [offset({ mainAxis: 10, crossAxis: 5 }), flip({ fallbackAxisSideDirection: 'end' }), shift({ padding: 10 })],
+    middleware: [offset({ mainAxis: isInCatalogView ? -2 : 6, crossAxis: isInCatalogView ? -1 : 5 }), flip({ fallbackAxisSideDirection: 'end' }), shift({ padding: 10 })],
     whileElementsMounted: autoUpdate,
   });
   const click = useClick(context);
@@ -101,9 +106,9 @@ const PostMenu = ({ post }: { post: Comment }) => {
 
   return (
     <>
-      <span className={styles.postMenuBtnWrapper} ref={refs.setReference} {...getReferenceProps()}>
+      <span className={isInCatalogView ? styles.postMenuBtnCatalogWrapper : styles.postMenuBtnWrapper} ref={refs.setReference} {...getReferenceProps()}>
         <span
-          className={styles.postMenuBtn}
+          className={isInCatalogView ? styles.postMenuBtnCatalog : styles.postMenuBtn}
           title='Post menu'
           onClick={() => setMenuBtnRotated((prev) => !prev)}
           style={{ transform: menuBtnRotated ? 'rotate(90deg)' : 'rotate(0deg)' }}
@@ -111,15 +116,17 @@ const PostMenu = ({ post }: { post: Comment }) => {
           ▶
         </span>
       </span>
-      {menuBtnRotated && (
-        <FloatingFocusManager context={context} modal={false}>
-          <div className={styles.postMenu} ref={refs.setFloating} style={floatingStyles} aria-labelledby={headingId} {...getFloatingProps()}>
-            {cid && subplebbitAddress && <CopyLinkButton cid={cid} subplebbitAddress={subplebbitAddress} onClose={handleClose} />}
-            {link && isValidURL(link) && (type === 'image' || type === 'gif' || thumbnail) && url && <ImageSearchButton url={url} onClose={handleClose} />}
-            <ViewOnButton cid={cid} isDescription={isDescription} isRules={isRules} subplebbitAddress={subplebbitAddress} onClose={handleClose} />
-          </div>
-        </FloatingFocusManager>
-      )}
+      {menuBtnRotated &&
+        createPortal(
+          <FloatingFocusManager context={context} modal={false}>
+            <div className={styles.postMenu} ref={refs.setFloating} style={floatingStyles} aria-labelledby={headingId} {...getFloatingProps()}>
+              {cid && subplebbitAddress && <CopyLinkButton cid={cid} subplebbitAddress={subplebbitAddress} onClose={handleClose} />}
+              {link && isValidURL(link) && (type === 'image' || type === 'gif' || thumbnail) && url && <ImageSearchButton url={url} onClose={handleClose} />}
+              <ViewOnButton cid={cid} isDescription={isDescription} isRules={isRules} subplebbitAddress={subplebbitAddress} onClose={handleClose} />
+            </div>
+          </FloatingFocusManager>,
+          document.body,
+        )}
     </>
   );
 };

From d964590f544029ae126a5e0dd4fec9f44ee86845 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Tue, 28 May 2024 18:02:48 +0200
Subject: [PATCH 02/13] fix(post menu): use floating ui to dynamically position
 dropdowns based on available space

---
 src/components/post/post-menu/post-menu.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/post/post-menu/post-menu.tsx b/src/components/post/post-menu/post-menu.tsx
index 39dd653d..944c9097 100644
--- a/src/components/post/post-menu/post-menu.tsx
+++ b/src/components/post/post-menu/post-menu.tsx
@@ -31,16 +31,23 @@ const CopyLinkButton = ({ cid, subplebbitAddress, onClose }: PostMenuProps) => {
 
 const ImageSearchButton = ({ url, onClose }: { url: string; onClose: () => void }) => {
   const [isImageSearchMenuOpen, setIsImageSearchMenuOpen] = useState(false);
+
+  const { refs, floatingStyles } = useFloating({
+    placement: 'right-start',
+    middleware: [flip(), shift({ padding: 10 })],
+  });
+
   return (
     <div
       className={`${styles.postMenuItem} ${styles.dropdown}`}
       onMouseOver={() => setIsImageSearchMenuOpen(true)}
       onMouseLeave={() => setIsImageSearchMenuOpen(false)}
+      ref={refs.setReference}
       onClick={onClose}
     >
       Image search »
       {isImageSearchMenuOpen && (
-        <div className={styles.dropdownMenu}>
+        <div ref={refs.setFloating} style={floatingStyles} className={styles.dropdownMenu}>
           <a href={`https://lens.google.com/uploadbyurl?url=${url}`} target='_blank' rel='noreferrer'>
             <div className={styles.postMenuItem}>Google</div>
           </a>
@@ -59,16 +66,23 @@ const ImageSearchButton = ({ url, onClose }: { url: string; onClose: () => void
 const ViewOnButton = ({ cid, isDescription, isRules, subplebbitAddress, onClose }: PostMenuProps) => {
   const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false);
   const viewOnOtherClientLink = `p/${subplebbitAddress}${isDescription || isRules ? '' : `/c/${cid}`}`;
+
+  const { refs, floatingStyles } = useFloating({
+    placement: 'right-start',
+    middleware: [flip(), shift({ padding: 10 })],
+  });
+
   return (
     <div
       className={`${styles.postMenuItem} ${styles.dropdown}`}
       onMouseOver={() => setIsClientRedirectMenuOpen(true)}
       onMouseLeave={() => setIsClientRedirectMenuOpen(false)}
+      ref={refs.setReference}
       onClick={onClose}
     >
       View on »
       {isClientRedirectMenuOpen && (
-        <div className={styles.dropdownMenu}>
+        <div ref={refs.setFloating} style={floatingStyles} className={styles.dropdownMenu}>
           <a href={`https://seedit.app/#/${viewOnOtherClientLink}`} target='_blank' rel='noreferrer'>
             <div className={styles.postMenuItem}>Seedit</div>
           </a>

From 9c753d8a73e408ad374a005fa98d84e7cca62060 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Tue, 28 May 2024 18:25:53 +0200
Subject: [PATCH 03/13] Update comment-media.module.css

---
 src/components/comment-media/comment-media.module.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/comment-media/comment-media.module.css b/src/components/comment-media/comment-media.module.css
index bc16045b..1694db3c 100644
--- a/src/components/comment-media/comment-media.module.css
+++ b/src/components/comment-media/comment-media.module.css
@@ -18,6 +18,15 @@
   display: inline-block;
 }
 
+@media (max-width: 640px) {
+  .subplebbitAvatar {
+    max-width: 125px;
+    max-height: 125px;
+    margin: 3px 10px 5px 5px;
+    display: inline-block;
+  }
+}
+
 .thumbnailSmall {
   background-color: var(--media-thumbnail-background-color);
   width: var(--width);

From bf6fa1c7371efd146bfa35608ae86cfdfc69c337 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Tue, 28 May 2024 18:55:26 +0200
Subject: [PATCH 04/13] update variables

---
 src/themes.css | 168 ++++++++++++++++++++++++-------------------------
 1 file changed, 84 insertions(+), 84 deletions(-)

diff --git a/src/themes.css b/src/themes.css
index 693243e0..17b53f88 100644
--- a/src/themes.css
+++ b/src/themes.css
@@ -25,10 +25,10 @@
   --body-font-size: 13px;
 
   /* catalog post */
-  --catalog-post-menu-btn-color: navy;
-  --catalog-post-menu-btn-hover-color: red;
-  --catalog-post-menu-btn-opacity: 0.5;
-  --catalog-post-menu-btn-hover-opacity: 1;
+  --catalog-post-menu-desktop-btn-color: navy;
+  --catalog-post-menu-desktop-btn-hover-color: red;
+  --catalog-post-menu-desktop-btn-opacity: 0.5;
+  --catalog-post-menu-desktop-btn-hover-opacity: 1;
 
   /* challenge modal */
   --challenge-modal-background-color: #f0e0d6;
@@ -97,9 +97,9 @@
   --post-subject-font-weight: 700;
   --post-name-text-color: #117743;
   --post-name-font-weight: 700;
-  --post-menu-button-color: #000080;
-  --post-menu-btn-opacity: 0.8;
-  --post-menu-button-color-hover: red;
+  --post-menu-desktop-button-color: #000080;
+  --post-menu-desktop-btn-opacity: 0.8;
+  --post-menu-desktop-button-color-hover: red;
   --post-greentext-color: #789922;
   --post-replies-expand-button-background-image: url("/public/assets/buttons/plus-red.png");
 
@@ -119,13 +119,13 @@
   --post-form-field-input-focus-border: 1px solid #ea8;
   --post-form-field-input-color: #000;
 
-  /* post menu */
-  --post-menu-border-bottom: 2px solid #d9bfb7;
-  --post-menu-border-right: 1px solid #d9bfb7;
-  --post-menu-background-color: #f0e0d6;
-  --post-menu-item-border-color: #d9bfb7;
-  --post-menu-item-background-color: #f0e0d6;
-  --post-menu-item-hover-background-color: #ffe;
+  /* post menu desktop */
+  --post-menu-desktop-border-bottom: 2px solid #d9bfb7;
+  --post-menu-desktop-border-right: 1px solid #d9bfb7;
+  --post-menu-desktop-background-color: #f0e0d6;
+  --post-menu-desktop-item-border-color: #d9bfb7;
+  --post-menu-desktop-item-background-color: #f0e0d6;
+  --post-menu-desktop-item-hover-background-color: #ffe;
 
   /* post mobile */
   --post-mobile-background-color: #f5e9e1;
@@ -204,10 +204,10 @@
   --body-font-size: 13px;
 
   /* catalog post */
-  --catalog-post-menu-btn-color: navy;
-  --catalog-post-menu-btn-hover-color: #d00;
-  --catalog-post-menu-btn-opacity: 0.5;
-  --catalog-post-menu-btn-hover-opacity: 1;
+  --catalog-post-menu-desktop-btn-color: navy;
+  --catalog-post-menu-desktop-btn-hover-color: #d00;
+  --catalog-post-menu-desktop-btn-opacity: 0.5;
+  --catalog-post-menu-desktop-btn-hover-opacity: 1;
 
   /* challenge modal */
   --challenge-modal-background-color: #d6daf0;
@@ -275,9 +275,9 @@
   --post-subject-font-weight: 700;
   --post-name-text-color: #117743;
   --post-name-font-weight: 700;
-  --post-menu-button-color: #34345c;
-  --post-menu-btn-opacity: 0.8;
-  --post-menu-button-color-hover: #d00;
+  --post-menu-desktop-button-color: #34345c;
+  --post-menu-desktop-btn-opacity: 0.8;
+  --post-menu-desktop-button-color-hover: #d00;
   --post-greentext-color: #789922;
   --post-replies-expand-button-background-image: url("/public/assets/buttons/plus-blue.png");
 
@@ -297,13 +297,13 @@
   --post-form-field-input-focus-border: 1px solid #98e;
   --post-form-field-input-color: #000;
 
-  /* post menu */
-  --post-menu-border-bottom: 2px solid #b7c5d9;
-  --post-menu-border-right: 1px solid #b7c5d9;
-  --post-menu-background-color: #d6daf0;
-  --post-menu-item-border-color: #b7c5d9;
-  --post-menu-item-background-color: #d6daf0;
-  --post-menu-item-hover-background-color: #eef2ff;
+  /* post menu desktop */
+  --post-menu-desktop-border-bottom: 2px solid #b7c5d9;
+  --post-menu-desktop-border-right: 1px solid #b7c5d9;
+  --post-menu-desktop-background-color: #d6daf0;
+  --post-menu-desktop-item-border-color: #b7c5d9;
+  --post-menu-desktop-item-background-color: #d6daf0;
+  --post-menu-desktop-item-hover-background-color: #eef2ff;
 
   /* post mobile */
   --post-mobile-background-color: #d6daf0;
@@ -377,10 +377,10 @@
   --board-address-font-size: 10pt;
 
   /* catalog post */
-  --catalog-post-menu-btn-color: navy;
-  --catalog-post-menu-btn-hover-color: red;
-  --catalog-post-menu-btn-opacity: 0.5;
-  --catalog-post-menu-btn-hover-opacity: 1;
+  --catalog-post-menu-desktop-btn-color: navy;
+  --catalog-post-menu-desktop-btn-hover-color: red;
+  --catalog-post-menu-desktop-btn-opacity: 0.5;
+  --catalog-post-menu-desktop-btn-hover-opacity: 1;
 
   /* challenge modal */
   --challenge-modal-background-color: #f0e0d6;
@@ -429,9 +429,9 @@
   --post-subject-font-weight: 700;
   --post-name-text-color: #117743;
   --post-name-font-weight: 700;
-  --post-menu-button-color: #000080;
-  --post-menu-btn-opacity: 0.8;
-  --post-menu-button-color-hover: red;
+  --post-menu-desktop-button-color: #000080;
+  --post-menu-desktop-btn-opacity: 0.8;
+  --post-menu-desktop-button-color-hover: red;
   --post-greentext-color: #789922;
   --post-replies-expand-button-background-image: url("/public/assets/buttons/plus-red.png");
 
@@ -445,13 +445,13 @@
   --post-form-field-title-font-size: 16px;
   --post-form-field-input-color: #000;
 
-  /* post menu */
-  --post-menu-border-bottom: 1px solid #d9bfb7;
-  --post-menu-border-right: unset;
-  --post-menu-background-color: #f0e0d6;
-  --post-menu-item-border-color: #d9bfb7;
-  --post-menu-item-background-color: #f0e0d6;
-  --post-menu-item-hover-background-color: #ffe;
+  /* post menu desktop */
+  --post-menu-desktop-border-bottom: 1px solid #d9bfb7;
+  --post-menu-desktop-border-right: unset;
+  --post-menu-desktop-background-color: #f0e0d6;
+  --post-menu-desktop-item-border-color: #d9bfb7;
+  --post-menu-desktop-item-background-color: #f0e0d6;
+  --post-menu-desktop-item-hover-background-color: #ffe;
 
   /* post mobile */
   --post-mobile-background-color: #f5e9e1;
@@ -524,10 +524,10 @@
   --body-font-size: 16px;
 
   /* catalog post */
-  --catalog-post-menu-btn-color: navy;
-  --catalog-post-menu-btn-hover-color: red;
-  --catalog-post-menu-btn-opacity: 0.5;
-  --catalog-post-menu-btn-hover-opacity: 1;
+  --catalog-post-menu-desktop-btn-color: navy;
+  --catalog-post-menu-desktop-btn-hover-color: red;
+  --catalog-post-menu-desktop-btn-opacity: 0.5;
+  --catalog-post-menu-desktop-btn-hover-opacity: 1;
 
   /* challenge modal */
   --challenge-modal-background-color: #d6daf0;
@@ -586,9 +586,9 @@
   --post-subject-font-weight: 700;
   --post-name-text-color: #117743;
   --post-name-font-weight: 700;
-  --post-menu-button-color: #34345c;
-  --post-menu-btn-opacity: 0.8;
-  --post-menu-button-color-hover: #d00;
+  --post-menu-desktop-button-color: #34345c;
+  --post-menu-desktop-btn-opacity: 0.8;
+  --post-menu-desktop-button-color-hover: #d00;
   --post-greentext-color: #789922;
   --post-replies-expand-button-background-image: url("/public/assets/buttons/plus-blue.png");
   
@@ -602,13 +602,13 @@
   --post-form-field-title-font-size: 16px;
   --post-form-field-input-color: #000;
 
-  /* post menu */
-  --post-menu-border-bottom: 1px solid #b7c5d9;
-  --post-menu-border-right: unset;
-  --post-menu-background-color: #d6daf0;
-  --post-menu-item-border-color: #b7c5d9;
-  --post-menu-item-background-color: #d6daf0;
-  --post-menu-item-hover-background-color: #eef2ff;
+  /* post menu desktop */
+  --post-menu-desktop-border-bottom: 1px solid #b7c5d9;
+  --post-menu-desktop-border-right: unset;
+  --post-menu-desktop-background-color: #d6daf0;
+  --post-menu-desktop-item-border-color: #b7c5d9;
+  --post-menu-desktop-item-background-color: #d6daf0;
+  --post-menu-desktop-item-hover-background-color: #eef2ff;
 
   /* post mobile */
   --post-mobile-background-color: #d6daf0;
@@ -678,10 +678,10 @@
   --board-address-font-size: x-small;
 
   /* catalog post */
-  --catalog-post-menu-btn-color: #5f89ac;
-  --catalog-post-menu-btn-hover-color: #5f89ac;
-  --catalog-post-menu-btn-opacity: 0.5;
-  --catalog-post-menu-btn-hover-opacity: 1;
+  --catalog-post-menu-desktop-btn-color: #5f89ac;
+  --catalog-post-menu-desktop-btn-hover-color: #5f89ac;
+  --catalog-post-menu-desktop-btn-opacity: 0.5;
+  --catalog-post-menu-desktop-btn-hover-opacity: 1;
 
   /* challenge modal */
   --challenge-modal-background-color: #282a2e;
@@ -744,9 +744,9 @@
   --post-subject-font-weight: 700;
   --post-name-text-color: #c5c8c6;
   --post-name-font-weight: 700;
-  --post-menu-button-color: #5F89AC;
-  --post-menu-btn-opacity: 0.8;
-  --post-menu-button-color-hover: #81a2be;
+  --post-menu-desktop-button-color: #5F89AC;
+  --post-menu-desktop-btn-opacity: 0.8;
+  --post-menu-desktop-button-color-hover: #81a2be;
   --post-greentext-color: #b5bd68;
   --post-replies-expand-button-background-image: url("/public/assets/buttons/plus-dark.png");
 
@@ -767,13 +767,13 @@
   --post-form-field-input-appearance: none;
   --post-form-field-input-outline: none;
 
-  /* post menu */
-  --post-menu-border-bottom: 1px solid #000;
-  --post-menu-border-right: unset;
-  --post-menu-background-color: #282a2e;
-  --post-menu-item-border-color: #000;
-  --post-menu-item-background-color: #282a2e;
-  --post-menu-item-hover-background-color: #1d1f21;
+  /* post menu desktop */
+  --post-menu-desktop-border-bottom: 1px solid #000;
+  --post-menu-desktop-border-right: unset;
+  --post-menu-desktop-background-color: #282a2e;
+  --post-menu-desktop-item-border-color: #000;
+  --post-menu-desktop-item-background-color: #282a2e;
+  --post-menu-desktop-item-hover-background-color: #1d1f21;
 
   /* post mobile */
   --post-mobile-background-color: #282A2E;
@@ -858,10 +858,10 @@
   --board-address-font-size: x-small;
 
   /* catalog post */
-  --catalog-post-menu-btn-color: #f60;
-  --catalog-post-menu-btn-hover-color: #f30;
-  --catalog-post-menu-btn-opacity: 0.5;
-  --catalog-post-menu-btn-hover-opacity: 1;
+  --catalog-post-menu-desktop-btn-color: #f60;
+  --catalog-post-menu-desktop-btn-hover-color: #f30;
+  --catalog-post-menu-desktop-btn-opacity: 0.5;
+  --catalog-post-menu-desktop-btn-hover-opacity: 1;
 
   /* challenge modal */
   --challenge-modal-background-color: #ddd;
@@ -910,9 +910,9 @@
   --post-subject-font-weight: 700;
   --post-name-text-color: #004a99;
   --post-name-font-weight: 700;
-  --post-menu-button-color: #FF6600;
-  --post-menu-btn-opacity: 0.8;
-  --post-menu-button-color-hover: #FF3300;
+  --post-menu-desktop-button-color: #FF6600;
+  --post-menu-desktop-btn-opacity: 0.8;
+  --post-menu-desktop-button-color-hover: #FF3300;
   --post-greentext-color: #789922;
   --post-replies-expand-button-background-image: url("/public/assets/buttons/plus-photon.png");
 
@@ -951,13 +951,13 @@
   --post-form-field-input-focus-border: 1px solid #ea8;
   --post-form-field-input-color: #000;
 
-  /* post menu */
-  --post-menu-border-bottom: 1px solid #ccc;
-  --post-menu-border-right: unset;
-  --post-menu-background-color: #ddd;
-  --post-menu-item-border-color: #ccc;
-  --post-menu-item-background-color: #ddd;
-  --post-menu-item-hover-background-color: #eee;
+  /* post menu desktop */
+  --post-menu-desktop-border-bottom: 1px solid #ccc;
+  --post-menu-desktop-border-right: unset;
+  --post-menu-desktop-background-color: #ddd;
+  --post-menu-desktop-item-border-color: #ccc;
+  --post-menu-desktop-item-background-color: #ddd;
+  --post-menu-desktop-item-hover-background-color: #eee;
 
   /* quotelink */
   --post-quotelink-text-color: #f60;

From 475d9ae4166e887748e0211776dff7cb23e4db8a Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Tue, 28 May 2024 19:03:43 +0200
Subject: [PATCH 05/13] feat: add post-menu-mobile

---
 src/components/catalog-row/catalog-row.tsx    |  6 +--
 .../post/post-desktop/post-desktop.tsx        |  6 +--
 .../post-desktop/post-menu-desktop/index.ts   |  1 +
 .../post-menu-desktop.module.css}             | 22 ++++-----
 .../post-menu-desktop/post-menu-desktop.tsx}  | 18 ++++----
 src/components/post/post-menu/index.ts        |  1 -
 .../post-mobile/post-menu-mobile/index.ts     |  1 +
 .../post-menu-mobile.module.css               | 37 +++++++++++++++
 .../post-menu-mobile/post-menu-mobile.tsx     | 46 +++++++++++++++++++
 .../post/post-mobile/post-mobile.tsx          |  7 ++-
 src/themes.css                                | 42 +++++++++++++++++
 11 files changed, 156 insertions(+), 31 deletions(-)
 create mode 100644 src/components/post/post-desktop/post-menu-desktop/index.ts
 rename src/components/post/{post-menu/post-menu.module.css => post-desktop/post-menu-desktop/post-menu-desktop.module.css} (73%)
 rename src/components/post/{post-menu/post-menu.tsx => post-desktop/post-menu-desktop/post-menu-desktop.tsx} (92%)
 delete mode 100644 src/components/post/post-menu/index.ts
 create mode 100644 src/components/post/post-mobile/post-menu-mobile/index.ts
 create mode 100644 src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.module.css
 create mode 100644 src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.tsx

diff --git a/src/components/catalog-row/catalog-row.tsx b/src/components/catalog-row/catalog-row.tsx
index f1bc7a1d..30a19bde 100644
--- a/src/components/catalog-row/catalog-row.tsx
+++ b/src/components/catalog-row/catalog-row.tsx
@@ -1,12 +1,12 @@
 import { Link, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Comment } from '@plebbit/plebbit-react-hooks';
+import styles from './catalog-row.module.css';
 import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
 import { isAllView } from '../../lib/utils/view-utils';
 import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
 import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
-import styles from './catalog-row.module.css';
-import PostMenu from '../post/post-menu/post-menu';
+import PostMenuDesktop from '../post/post-desktop/post-menu-desktop/';
 
 export const CatalogPostMedia = ({ commentMediaInfo }: { commentMediaInfo: any }) => {
   const { patternThumbnailUrl, thumbnail, type, url } = commentMediaInfo || {};
@@ -93,7 +93,7 @@ const CatalogPost = ({ post }: { post: Comment }) => {
           </span>
         )}
         <span className={styles.postMenu}>
-          <PostMenu post={post} />
+          <PostMenuDesktop post={post} />
         </span>
       </div>
       <Link to={postLink}>
diff --git a/src/components/post/post-desktop/post-desktop.tsx b/src/components/post/post-desktop/post-desktop.tsx
index 0e1f3eb8..b65e8eee 100644
--- a/src/components/post/post-desktop/post-desktop.tsx
+++ b/src/components/post/post-desktop/post-desktop.tsx
@@ -4,6 +4,7 @@ import { useLocation, useParams } from 'react-router-dom';
 import { Link } from 'react-router-dom';
 import { useAccount } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
+import styles from '../post.module.css';
 import { getCommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../../lib/utils/media-utils';
 import { getFormattedDate } from '../../../lib/utils/time-utils';
 import { isValidURL } from '../../../lib/utils/url-utils';
@@ -15,9 +16,8 @@ import CommentMedia from '../../comment-media';
 import { canEmbed } from '../../embed';
 import LoadingEllipsis from '../../loading-ellipsis';
 import Markdown from '../../markdown';
+import PostMenuDesktop from './post-menu-desktop/';
 import { PostProps } from '../post';
-import styles from '../post.module.css';
-import PostMenu from '../post-menu';
 import _ from 'lodash';
 
 const PostInfo = ({ openReplyModal, post, roles }: PostProps) => {
@@ -102,7 +102,7 @@ const PostInfo = ({ openReplyModal, post, roles }: PostProps) => {
           </span>
         )}
       </span>
-      <PostMenu post={post} />
+      <PostMenuDesktop post={post} />
     </div>
   );
 };
diff --git a/src/components/post/post-desktop/post-menu-desktop/index.ts b/src/components/post/post-desktop/post-menu-desktop/index.ts
new file mode 100644
index 00000000..54cc808b
--- /dev/null
+++ b/src/components/post/post-desktop/post-menu-desktop/index.ts
@@ -0,0 +1 @@
+export { default } from './post-menu-desktop';
diff --git a/src/components/post/post-menu/post-menu.module.css b/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.module.css
similarity index 73%
rename from src/components/post/post-menu/post-menu.module.css
rename to src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.module.css
index 451151f5..1a48bec9 100644
--- a/src/components/post/post-menu/post-menu.module.css
+++ b/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.module.css
@@ -1,8 +1,8 @@
 .postMenu {
   position: absolute;
-  background-color: var(--post-menu-background-color);
-  border-bottom: var(--post-menu-border-bottom);
-  border-right: var(--post-menu-border-right);
+  background-color: var(--post-menu-desktop-background-color);
+  border-bottom: var(--post-menu-desktop-border-bottom);
+  border-right: var(--post-menu-desktop-border-right);
   outline: none;
   z-index: 2;
 }
@@ -14,7 +14,7 @@
 }
 
 .postMenuBtn {
-  color: var(--post-menu-button-color);
+  color: var(--post-menu-desktop-button-color);
   transition: transform 0.1s;
   transform: rotate(90deg);
   position: absolute;
@@ -23,19 +23,19 @@
 
 .postMenuBtn:hover {
   cursor: pointer;
-  color: var(--post-menu-button-color-hover);
+  color: var(--post-menu-desktop-button-color-hover);
 }
 
 .postMenuItem {
   cursor: pointer;
   padding: 2px 4px;
-  border: 1px solid var(--post-menu-item-border-color);
-  background-color: var(--post-menu-item-background-color);
+  border: 1px solid var(--post-menu-desktop-item-border-color);
+  background-color: var(--post-menu-desktop-item-background-color);
   border-bottom: none;
 }
 
 .postMenuItem:hover {
-  background-color: var(--post-menu-item-hover-background-color);
+  background-color: var(--post-menu-desktop-item-hover-background-color);
 }
 
 .dropdown {
@@ -47,8 +47,8 @@
   left: 100%;
   top: -1px;
   display: none;
-  border-bottom: var(--post-menu-border-bottom);
-  border-right: var(--post-menu-border-right);
+  border-bottom: var(--post-menu-desktop-border-bottom);
+  border-right: var(--post-menu-desktop-border-right);
 }
 
 .dropdown a {
@@ -107,7 +107,7 @@
 @media (min-width: 640px) {
   .postMenuBtn {
     right: -2px;
-    opacity: var(--post-menu-btn-opacity);
+    opacity: var(--post-menu-desktop-btn-opacity);
   }
 
   .stickyIconWrapper {
diff --git a/src/components/post/post-menu/post-menu.tsx b/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.tsx
similarity index 92%
rename from src/components/post/post-menu/post-menu.tsx
rename to src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.tsx
index 944c9097..6c19f7ff 100644
--- a/src/components/post/post-menu/post-menu.tsx
+++ b/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.tsx
@@ -3,12 +3,12 @@ import { createPortal } from 'react-dom';
 import { useLocation } from 'react-router-dom';
 import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
 import { Comment } from '@plebbit/plebbit-react-hooks';
-import styles from './post-menu.module.css';
-import { getCommentMediaInfo } from '../../../lib/utils/media-utils';
-import { copyShareLinkToClipboard, isValidURL } from '../../../lib/utils/url-utils';
-import { isCatalogView } from '../../../lib/utils/view-utils';
+import styles from './post-menu-desktop.module.css';
+import { getCommentMediaInfo } from '../../../../lib/utils/media-utils';
+import { copyShareLinkToClipboard, isValidURL } from '../../../../lib/utils/url-utils';
+import { isCatalogView } from '../../../../lib/utils/view-utils';
 
-interface PostMenuProps {
+interface PostMenuDesktopProps {
   cid: string;
   isDescription?: boolean;
   isRules?: boolean;
@@ -16,7 +16,7 @@ interface PostMenuProps {
   onClose: () => void;
 }
 
-const CopyLinkButton = ({ cid, subplebbitAddress, onClose }: PostMenuProps) => {
+const CopyLinkButton = ({ cid, subplebbitAddress, onClose }: PostMenuDesktopProps) => {
   return (
     <div
       onClick={() => {
@@ -63,7 +63,7 @@ const ImageSearchButton = ({ url, onClose }: { url: string; onClose: () => void
   );
 };
 
-const ViewOnButton = ({ cid, isDescription, isRules, subplebbitAddress, onClose }: PostMenuProps) => {
+const ViewOnButton = ({ cid, isDescription, isRules, subplebbitAddress, onClose }: PostMenuDesktopProps) => {
   const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false);
   const viewOnOtherClientLink = `p/${subplebbitAddress}${isDescription || isRules ? '' : `/c/${cid}`}`;
 
@@ -95,7 +95,7 @@ const ViewOnButton = ({ cid, isDescription, isRules, subplebbitAddress, onClose
   );
 };
 
-const PostMenu = ({ post }: { post: Comment }) => {
+const PostMenuDesktop = ({ post }: { post: Comment }) => {
   const { cid, isDescription, isRules, link, subplebbitAddress } = post;
   const commentMediaInfo = getCommentMediaInfo(post);
   const { thumbnail, type, url } = commentMediaInfo || {};
@@ -145,4 +145,4 @@ const PostMenu = ({ post }: { post: Comment }) => {
   );
 };
 
-export default PostMenu;
+export default PostMenuDesktop;
diff --git a/src/components/post/post-menu/index.ts b/src/components/post/post-menu/index.ts
deleted file mode 100644
index 7c04c4cc..00000000
--- a/src/components/post/post-menu/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './post-menu';
diff --git a/src/components/post/post-mobile/post-menu-mobile/index.ts b/src/components/post/post-mobile/post-menu-mobile/index.ts
new file mode 100644
index 00000000..6fccc4be
--- /dev/null
+++ b/src/components/post/post-mobile/post-menu-mobile/index.ts
@@ -0,0 +1 @@
+export { default } from './post-menu-mobile';
diff --git a/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.module.css b/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.module.css
new file mode 100644
index 00000000..bbcee2bd
--- /dev/null
+++ b/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.module.css
@@ -0,0 +1,37 @@
+.postMenuBtn {
+  color: var(--post-mobile-menu-button-color);
+  line-height: 1em;
+  width: 1em;
+  text-align: center;
+  transition: transform 0.1s;
+  transform: rotate(90deg);
+  -webkit-transform: rotate(90deg);
+  float: left;
+  font-weight: 700;
+  font-size: 16px;
+  height: 100%;
+}
+
+.postMenu {
+  font-size: 16px;
+  line-height: 2.5em;
+  background-color: var(--post-menu-mobile-background-color);
+  border: var(--post-menu-mobile-border);
+  border-right-width: var(---post-menu-mobile-border-right-width);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  white-space: nowrap;
+}
+
+.postMenuItem {
+  cursor: pointer;
+  position: relative;
+  padding: 2px 4px;
+  vertical-align: middle;
+  border-bottom: var(--post-menu-mobile-item-border-bottom);
+}
+
+.postMenuItem:hover {
+  background-color: var(--post-menu-mobile-item-hover-background-color);
+}
\ No newline at end of file
diff --git a/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.tsx b/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.tsx
new file mode 100644
index 00000000..2d79a22a
--- /dev/null
+++ b/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.tsx
@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { createPortal } from 'react-dom';
+import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
+import { Comment } from '@plebbit/plebbit-react-hooks';
+import styles from './post-menu-mobile.module.css';
+
+const PostMenuMobile = ({ post }: { post: Comment }) => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const { refs, floatingStyles, context } = useFloating({
+    placement: 'bottom-start',
+    open: isMenuOpen,
+    onOpenChange: setIsMenuOpen,
+    middleware: [offset({ mainAxis: 3, crossAxis: 8 }), flip(), shift({ padding: 10 })],
+    whileElementsMounted: autoUpdate,
+  });
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context);
+  const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);
+  const headingId = useId();
+
+  return (
+    <>
+      <span className={styles.postMenuBtn} title='Post menu' onClick={() => setIsMenuOpen((prev) => !prev)} ref={refs.setReference} {...getReferenceProps()}>
+        ...
+      </span>
+      {isMenuOpen &&
+        createPortal(
+          <FloatingFocusManager context={context} modal={false}>
+            <div className={styles.postMenu} ref={refs.setFloating} style={floatingStyles} aria-labelledby={headingId} {...getFloatingProps()}>
+              <div className={styles.postMenuItem}>Copy link</div>
+              <div className={styles.postMenuItem}>Search image on Google</div>
+              <div className={styles.postMenuItem}>Search image on Yandex</div>
+              <div className={styles.postMenuItem}>Search image on SauceNAO</div>
+              <div className={styles.postMenuItem}>View on Seedit</div>
+              <div className={styles.postMenuItem}>View on Plebones</div>
+            </div>
+          </FloatingFocusManager>,
+          document.body,
+        )}
+    </>
+  );
+};
+
+export default PostMenuMobile;
diff --git a/src/components/post/post-mobile/post-mobile.tsx b/src/components/post/post-mobile/post-mobile.tsx
index 3ad4c4ed..ec01f7c9 100644
--- a/src/components/post/post-mobile/post-mobile.tsx
+++ b/src/components/post/post-mobile/post-mobile.tsx
@@ -3,6 +3,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { Link, useLocation, useParams } from 'react-router-dom';
 import { useAccount } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
+import styles from '../post.module.css';
 import { getCommentMediaInfo, getHasThumbnail } from '../../../lib/utils/media-utils';
 import { getFormattedDate } from '../../../lib/utils/time-utils';
 import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../../lib/utils/view-utils';
@@ -12,8 +13,8 @@ import useStateString from '../../../hooks/use-state-string';
 import CommentMedia from '../../comment-media';
 import LoadingEllipsis from '../../loading-ellipsis';
 import Markdown from '../../markdown';
+import PostMenuMobile from './post-menu-mobile';
 import { PostProps } from '../post';
-import styles from '../post.module.css';
 import _ from 'lodash';
 
 const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
@@ -45,9 +46,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
   return (
     <>
       <div className={styles.postInfo}>
-        <span className={styles.postMenuBtn} title='Post menu'>
-          ...
-        </span>
+        <PostMenuMobile post={post} />
         <span className={styles.nameBlock}>
           <span className={`${styles.name} ${(isDescription || isRules || authorRole) && styles.capcodeMod}`}>
             {shortDisplayName || _.capitalize(t('anonymous'))}
diff --git a/src/themes.css b/src/themes.css
index 17b53f88..92b938ea 100644
--- a/src/themes.css
+++ b/src/themes.css
@@ -127,6 +127,13 @@
   --post-menu-desktop-item-background-color: #f0e0d6;
   --post-menu-desktop-item-hover-background-color: #ffe;
 
+  /* post menu mobile */
+  --post-menu-mobile-background-color: #f0e0d6;
+  --post-menu-mobile-border: 1px solid #d9bfb7;
+  --post-menu-mobile-border-right-width: 2px;
+  --post-menu-mobile-item-border-bottom: 1px solid #d9bfb7;
+  --post-menu-mobile-item-hover-background-color: #ffe;
+
   /* post mobile */
   --post-mobile-background-color: #f5e9e1;
   --post-mobile-info-border-bottom: 1px solid #d9bfb7;
@@ -305,6 +312,13 @@
   --post-menu-desktop-item-background-color: #d6daf0;
   --post-menu-desktop-item-hover-background-color: #eef2ff;
 
+  /* post menu mobile */
+  --post-menu-mobile-background-color: #d6daf0;
+  --post-menu-mobile-border: 1px solid #b7c5d9;
+  --post-menu-mobile-border-right-width: 2px;
+  --post-menu-mobile-item-border-bottom: 1px solid #b7c5d9;
+  --post-menu-mobile-item-hover-background-color: #eef2ff;
+
   /* post mobile */
   --post-mobile-background-color: #d6daf0;
   --post-mobile-info-border-bottom: 1px solid #b7c5d9;
@@ -453,6 +467,13 @@
   --post-menu-desktop-item-background-color: #f0e0d6;
   --post-menu-desktop-item-hover-background-color: #ffe;
 
+  /* post menu mobile */
+  --post-menu-mobile-background-color: #f0e0d6;
+  --post-menu-mobile-border: 1px solid #d9bfb7;
+  --post-menu-mobile-border-right-width: 2px;
+  --post-menu-mobile-item-border-bottom: 1px solid #d9bfb7;
+  --post-menu-mobile-item-hover-background-color: #ffe;
+
   /* post mobile */
   --post-mobile-background-color: #f5e9e1;
   --post-mobile-info-border-bottom: 1px solid #d9bfb7;
@@ -610,6 +631,13 @@
   --post-menu-desktop-item-background-color: #d6daf0;
   --post-menu-desktop-item-hover-background-color: #eef2ff;
 
+  /* post menu mobile */
+  --post-menu-mobile-background-color: #d6daf0;
+  --post-menu-mobile-border: 1px solid #b7c5d9;
+  --post-menu-mobile-border-right-width: 2px;
+  --post-menu-mobile-item-border-bottom: 1px solid #b7c5d9;
+  --post-menu-mobile-item-hover-background-color: #eef2ff;
+
   /* post mobile */
   --post-mobile-background-color: #d6daf0;
   --post-mobile-info-border-bottom: 1px solid #b7c5d9;
@@ -775,6 +803,13 @@
   --post-menu-desktop-item-background-color: #282a2e;
   --post-menu-desktop-item-hover-background-color: #1d1f21;
 
+  /* post menu mobile */
+  --post-menu-mobile-background-color: #282a2e;
+  --post-menu-mobile-border: 1px solid #000;
+  --post-menu-mobile-border-right-width: 2px;
+  --post-menu-mobile-item-border-bottom: 1px solid #000;
+  --post-menu-mobile-item-hover-background-color: #1d1f21;
+
   /* post mobile */
   --post-mobile-background-color: #282A2E;
   --post-mobile-info-border-top: 1px solid #2D2F33;
@@ -959,6 +994,13 @@
   --post-menu-desktop-item-background-color: #ddd;
   --post-menu-desktop-item-hover-background-color: #eee;
 
+  /* post menu mobile */
+  --post-menu-mobile-background-color: #ddd;
+  --post-menu-mobile-border: 1px solid #ccc;
+  --post-menu-mobile-border-right-width: 2px;
+  --post-menu-mobile-item-border-bottom: 1px solid #ccc;
+  --post-menu-mobile-item-hover-background-color: #eee;
+
   /* quotelink */
   --post-quotelink-text-color: #f60;
   --post-quotelink-text-color-hover: #f30;

From 999c566566dc9d9fbbd65d0ab58ac3b3ffeacce1 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Tue, 28 May 2024 19:15:26 +0200
Subject: [PATCH 06/13] update post menu mobile

---
 .../post-menu-mobile.module.css               |  5 ++
 .../post-menu-mobile/post-menu-mobile.tsx     | 68 +++++++++++++++++--
 2 files changed, 67 insertions(+), 6 deletions(-)

diff --git a/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.module.css b/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.module.css
index bbcee2bd..95ce0b45 100644
--- a/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.module.css
+++ b/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.module.css
@@ -24,6 +24,11 @@
   white-space: nowrap;
 }
 
+.postMenu a {
+  text-decoration: none;
+  color: inherit;
+}
+
 .postMenuItem {
   cursor: pointer;
   position: relative;
diff --git a/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.tsx b/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.tsx
index 2d79a22a..e5bb94a7 100644
--- a/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.tsx
+++ b/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.tsx
@@ -3,8 +3,65 @@ import { createPortal } from 'react-dom';
 import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
 import { Comment } from '@plebbit/plebbit-react-hooks';
 import styles from './post-menu-mobile.module.css';
+import { getCommentMediaInfo } from '../../../../lib/utils/media-utils';
+import { copyShareLinkToClipboard, isValidURL } from '../../../../lib/utils/url-utils';
+
+interface PostMenuMobileProps {
+  cid: string;
+  isDescription?: boolean;
+  isRules?: boolean;
+  subplebbitAddress: string;
+  onClose: () => void;
+}
+
+const CopyLinkButton = ({ cid, subplebbitAddress, onClose }: PostMenuMobileProps) => {
+  return (
+    <div
+      onClick={() => {
+        copyShareLinkToClipboard(subplebbitAddress, cid);
+        onClose();
+      }}
+    >
+      <div className={styles.postMenuItem}>Copy link</div>
+    </div>
+  );
+};
+
+const ImageSearchButtons = ({ url, onClose }: { url: string; onClose: () => void }) => {
+  return (
+    <div onClick={onClose}>
+      <a href={`https://lens.google.com/uploadbyurl?url=${url}`} target='_blank' rel='noreferrer'>
+        <div className={styles.postMenuItem}>Search image on Google</div>
+      </a>
+      <a href={`https://www.yandex.com/images/search?img_url=${url}&rpt=imageview`} target='_blank' rel='noreferrer'>
+        <div className={styles.postMenuItem}>Search image on Yandex</div>
+      </a>
+      <a href={`https://saucenao.com/search.php?url=${url}`} target='_blank' rel='noreferrer'>
+        <div className={styles.postMenuItem}>Search image on SauceNAO</div>
+      </a>
+    </div>
+  );
+};
+
+const ViewOnButtons = ({ cid, isDescription, isRules, subplebbitAddress, onClose }: PostMenuMobileProps) => {
+  const viewOnOtherClientLink = `p/${subplebbitAddress}${isDescription || isRules ? '' : `/c/${cid}`}`;
+
+  return (
+    <div onClick={onClose}>
+      <a href={`https://seedit.app/#/${viewOnOtherClientLink}`} target='_blank' rel='noreferrer'>
+        <div className={styles.postMenuItem}>View on Seedit</div>
+      </a>
+      <a href={`https://plebones.netlify.app/#/${viewOnOtherClientLink}`} target='_blank' rel='noreferrer'>
+        <div className={styles.postMenuItem}>View on Plebones</div>
+      </a>
+    </div>
+  );
+};
 
 const PostMenuMobile = ({ post }: { post: Comment }) => {
+  const { cid, isDescription, isRules, link, subplebbitAddress } = post;
+  const commentMediaInfo = getCommentMediaInfo(post);
+  const { thumbnail, type, url } = commentMediaInfo || {};
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
   const { refs, floatingStyles, context } = useFloating({
@@ -20,6 +77,8 @@ const PostMenuMobile = ({ post }: { post: Comment }) => {
   const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);
   const headingId = useId();
 
+  const handleClose = () => setIsMenuOpen(false);
+
   return (
     <>
       <span className={styles.postMenuBtn} title='Post menu' onClick={() => setIsMenuOpen((prev) => !prev)} ref={refs.setReference} {...getReferenceProps()}>
@@ -29,12 +88,9 @@ const PostMenuMobile = ({ post }: { post: Comment }) => {
         createPortal(
           <FloatingFocusManager context={context} modal={false}>
             <div className={styles.postMenu} ref={refs.setFloating} style={floatingStyles} aria-labelledby={headingId} {...getFloatingProps()}>
-              <div className={styles.postMenuItem}>Copy link</div>
-              <div className={styles.postMenuItem}>Search image on Google</div>
-              <div className={styles.postMenuItem}>Search image on Yandex</div>
-              <div className={styles.postMenuItem}>Search image on SauceNAO</div>
-              <div className={styles.postMenuItem}>View on Seedit</div>
-              <div className={styles.postMenuItem}>View on Plebones</div>
+              {cid && subplebbitAddress && <CopyLinkButton cid={cid} subplebbitAddress={subplebbitAddress} onClose={handleClose} />}
+              {link && isValidURL(link) && (type === 'image' || type === 'gif' || thumbnail) && url && <ImageSearchButtons url={url} onClose={handleClose} />}
+              <ViewOnButtons cid={cid} isDescription={isDescription} isRules={isRules} subplebbitAddress={subplebbitAddress} onClose={handleClose} />
             </div>
           </FloatingFocusManager>,
           document.body,

From 817aae3e79034e5c5d0d57e296dd2a9f96b2c0f9 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Wed, 29 May 2024 10:21:54 +0200
Subject: [PATCH 07/13] update variable

---
 .../post/post-desktop/post-menu-desktop/post-menu-desktop.tsx   | 2 +-
 .../post/post-mobile/post-menu-mobile/post-menu-mobile.tsx      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.tsx b/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.tsx
index 6c19f7ff..a363b952 100644
--- a/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.tsx
+++ b/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.tsx
@@ -96,7 +96,7 @@ const ViewOnButton = ({ cid, isDescription, isRules, subplebbitAddress, onClose
 };
 
 const PostMenuDesktop = ({ post }: { post: Comment }) => {
-  const { cid, isDescription, isRules, link, subplebbitAddress } = post;
+  const { cid, isDescription, isRules, link, postCid, subplebbitAddress } = post || {};
   const commentMediaInfo = getCommentMediaInfo(post);
   const { thumbnail, type, url } = commentMediaInfo || {};
   const [menuBtnRotated, setMenuBtnRotated] = useState(false);
diff --git a/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.tsx b/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.tsx
index e5bb94a7..85ad88bb 100644
--- a/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.tsx
+++ b/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.tsx
@@ -59,7 +59,7 @@ const ViewOnButtons = ({ cid, isDescription, isRules, subplebbitAddress, onClose
 };
 
 const PostMenuMobile = ({ post }: { post: Comment }) => {
-  const { cid, isDescription, isRules, link, subplebbitAddress } = post;
+  const { cid, isDescription, isRules, link, subplebbitAddress } = post || {};
   const commentMediaInfo = getCommentMediaInfo(post);
   const { thumbnail, type, url } = commentMediaInfo || {};
   const [isMenuOpen, setIsMenuOpen] = useState(false);

From 2aa5dc01eb0955af5829e426a1c4a9481f4b442e Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Wed, 29 May 2024 11:59:06 +0200
Subject: [PATCH 08/13] feat(catalog post): add loading skeleton for image,
 "file deleted" fallback img

---
 .../catalog-row/catalog-row.module.css        | 10 +++
 src/components/catalog-row/catalog-row.tsx    | 80 ++++++++++++-------
 .../post-menu-desktop.module.css              |  8 +-
 src/views/home/home.tsx                       |  2 +-
 4 files changed, 66 insertions(+), 34 deletions(-)

diff --git a/src/components/catalog-row/catalog-row.module.css b/src/components/catalog-row/catalog-row.module.css
index f09270bb..e97bb7c5 100644
--- a/src/components/catalog-row/catalog-row.module.css
+++ b/src/components/catalog-row/catalog-row.module.css
@@ -85,4 +85,14 @@
 
 .post:hover .postMenu {
   visibility: visible;
+}
+
+.loadingSkeleton {
+  width: 150px;
+  height: 150px;
+  display: inline-block;
+}
+
+.fileDeleted {
+  image-rendering: pixelated;
 }
\ No newline at end of file
diff --git a/src/components/catalog-row/catalog-row.tsx b/src/components/catalog-row/catalog-row.tsx
index 30a19bde..766cd4ff 100644
--- a/src/components/catalog-row/catalog-row.tsx
+++ b/src/components/catalog-row/catalog-row.tsx
@@ -8,34 +8,24 @@ import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
 import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
 import PostMenuDesktop from '../post/post-desktop/post-menu-desktop/';
 
-export const CatalogPostMedia = ({ commentMediaInfo }: { commentMediaInfo: any }) => {
+import React, { useState } from 'react';
+
+interface CatalogPostMediaProps {
+  commentMediaInfo: any;
+  isOutOfFeed?: boolean;
+  linkWidth?: number;
+  linkHeight?: number;
+}
+
+export const CatalogPostMedia = ({ commentMediaInfo, isOutOfFeed, linkWidth, linkHeight }: CatalogPostMediaProps) => {
   const { patternThumbnailUrl, thumbnail, type, url } = commentMediaInfo || {};
   const iframeThumbnail = patternThumbnailUrl || thumbnail;
   const gifFrameUrl = useFetchGifFirstFrame(type === 'gif' ? url : undefined);
-  let thumbnailComponent: React.ReactNode = null;
-
-  if (type === 'image') {
-    thumbnailComponent = <img src={url} alt='' />;
-  } else if (type === 'video') {
-    thumbnailComponent = thumbnail ? <img src={thumbnail} alt='' /> : <video src={`${url}#t=0.001`} />;
-  } else if (type === 'webpage') {
-    thumbnailComponent = <img src={thumbnail} alt='' />;
-  } else if (type === 'iframe') {
-    thumbnailComponent = iframeThumbnail ? <img src={iframeThumbnail} alt='' /> : null;
-  } else if (type === 'gif' && gifFrameUrl) {
-    thumbnailComponent = <img src={gifFrameUrl} alt='' />;
-  } else if (type === 'audio') {
-    thumbnailComponent = <audio src={url} controls />;
-  }
-  return thumbnailComponent;
-};
-
-const CatalogPost = ({ post }: { post: Comment }) => {
-  const { t } = useTranslation();
-  const { cid, content, isDescription, isRules, link, linkHeight, linkWidth, locked, pinned, replyCount, subplebbitAddress, title } = post || {};
-  const commentMediaInfo = getCommentMediaInfo(post);
-  const { type } = commentMediaInfo || {};
-  const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  const handleLoad = () => setIsLoaded(true);
+  const handleError = () => setHasError(true);
+  const loadingStyle = { display: isLoaded ? 'block' : 'none' };
 
   let displayWidth, displayHeight;
   const maxThumbnailSize = 150;
@@ -49,13 +39,47 @@ const CatalogPost = ({ post }: { post: Comment }) => {
     displayHeight = `${maxThumbnailSize}px`;
   }
 
-  if (type === 'audio' || isDescription || isRules) {
+  if (type === 'audio' || isOutOfFeed) {
     displayWidth = 'unset';
     displayHeight = 'unset';
   }
 
   const thumbnailDimensions = { '--width': displayWidth, '--height': displayHeight } as React.CSSProperties;
 
+  let thumbnailComponent: React.ReactNode = null;
+
+  if (type === 'image' && !hasError) {
+    thumbnailComponent = <img src={url} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} />;
+  } else if (type === 'video' && !hasError) {
+    thumbnailComponent = thumbnail ? (
+      <img src={thumbnail} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} />
+    ) : (
+      <video src={`${url}#t=0.001`} onLoad={handleLoad} onError={handleError} style={loadingStyle} />
+    );
+  } else if (type === 'webpage' && !hasError) {
+    thumbnailComponent = <img src={thumbnail} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} />;
+  } else if (type === 'iframe' && iframeThumbnail && !hasError) {
+    thumbnailComponent = <img src={iframeThumbnail} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} />;
+  } else if (type === 'gif' && gifFrameUrl && !hasError) {
+    thumbnailComponent = <img src={gifFrameUrl} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} />;
+  } else if (type === 'audio') {
+    thumbnailComponent = <audio src={url} controls />;
+  }
+
+  return (
+    <div className={hasError ? '' : styles.mediaWrapper} style={thumbnailDimensions}>
+      {!isLoaded && !hasError && <span className={styles.loadingSkeleton} />}
+      {hasError ? <img className={styles.fileDeleted} src='/assets/filedeleted-res.gif' alt='File deleted' /> : thumbnailComponent}
+    </div>
+  );
+};
+
+const CatalogPost = ({ post }: { post: Comment }) => {
+  const { t } = useTranslation();
+  const { cid, content, isDescription, isRules, link, linkHeight, linkWidth, locked, pinned, replyCount, subplebbitAddress, title } = post || {};
+  const commentMediaInfo = getCommentMediaInfo(post);
+  const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
+
   const location = useLocation();
   const isInAllView = isAllView(location.pathname);
 
@@ -76,9 +100,7 @@ const CatalogPost = ({ post }: { post: Comment }) => {
         <Link to={postLink}>
           <div className={styles.mediaPaddingWrapper}>
             {threadIcons}
-            <div className={styles.mediaWrapper} style={thumbnailDimensions}>
-              <CatalogPostMedia commentMediaInfo={commentMediaInfo} />
-            </div>
+            <CatalogPostMedia commentMediaInfo={commentMediaInfo} isOutOfFeed={isDescription || isRules} linkWidth={linkWidth} linkHeight={linkHeight} />
           </div>
         </Link>
       ) : (
diff --git a/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.module.css b/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.module.css
index 1a48bec9..0e585a4b 100644
--- a/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.module.css
+++ b/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.module.css
@@ -70,15 +70,15 @@
   position: absolute;
   bottom: 5px;
   line-height: 1em;
-  color: var(--catalog-post-menu-btn-color);
-  opacity: var(--catalog-post-menu-btn-opacity);
+  color: var(--catalog-post-menu-desktop-btn-color);
+  opacity: var(--catalog-post-menu-desktop-btn-opacity);
   transition: transform 0.1s;
 }
 
 .postMenuBtnCatalog:hover {
   cursor: pointer;
-  color: var(--catalog-post-menu-btn-hover-color);
-  opacity: var(--catalog-post-menu-btn-hover-opacity);
+  color: var(--catalog-post-menu-desktop-btn-hover-color);
+  opacity: var(--catalog-post-menu-desktop-btn-hover-opacity);
 }
 
 .postMenuBtnCatalog {
diff --git a/src/views/home/home.tsx b/src/views/home/home.tsx
index 92fdadd1..404caa65 100644
--- a/src/views/home/home.tsx
+++ b/src/views/home/home.tsx
@@ -202,7 +202,7 @@ const PopularThreadCard = ({ post, boardTitle, boardShortAddress }: PopularThrea
       <div className={styles.title}>{boardTitle || boardShortAddress}</div>
       <div className={styles.mediaContainer}>
         <Link to={`/p/${subplebbitAddress}/c/${cid}`}>
-          <CatalogPostMedia commentMediaInfo={commentMediaInfo} />
+          <CatalogPostMedia commentMediaInfo={commentMediaInfo} isOutOfFeed={true} />
         </Link>
       </div>
       <div className={styles.threadContent}>

From 18824468d403d68e313d2223bd6083067d0c0ba4 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Wed, 29 May 2024 15:45:54 +0200
Subject: [PATCH 09/13] feat(post): add "file deleted" img on error

---
 .../comment-media/comment-media.module.css    |  4 ++
 .../comment-media/comment-media.tsx           | 40 ++++++++-----------
 2 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/src/components/comment-media/comment-media.module.css b/src/components/comment-media/comment-media.module.css
index 1694db3c..f3732cba 100644
--- a/src/components/comment-media/comment-media.module.css
+++ b/src/components/comment-media/comment-media.module.css
@@ -112,4 +112,8 @@
 
 .mediaDesktopOp img, .mediaDesktopOp video, .mediaDesktopOp iframe, .mediaDesktopOp audio {
   padding: 3px 20px 5px 0;
+}
+
+.fileDeleted {
+  image-rendering: pixelated;
 }
\ No newline at end of file
diff --git a/src/components/comment-media/comment-media.tsx b/src/components/comment-media/comment-media.tsx
index b147b1df..25f4c659 100644
--- a/src/components/comment-media/comment-media.tsx
+++ b/src/components/comment-media/comment-media.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styles from './comment-media.module.css';
 import { CommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../lib/utils/media-utils';
@@ -18,26 +18,10 @@ interface MediaProps {
   toggleExpanded?: () => void;
 }
 
-interface ThumbnailProps {
-  style: React.CSSProperties;
-  children: React.ReactNode;
-  thumbnailSmallPadding?: string;
-}
-
-const ThumbnailBig = ({ style, children }: ThumbnailProps) => (
-  <span className={styles.thumbnailBig} style={style}>
-    {children}
-  </span>
-);
-
-const ThumbnailSmall = ({ style, children, thumbnailSmallPadding }: ThumbnailProps) => (
-  <span className={`${styles.thumbnailSmall} ${thumbnailSmallPadding}`} style={style}>
-    {children}
-  </span>
-);
-
 const Thumbnail = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWidth, setShowThumbnail }: MediaProps) => {
   const { patternThumbnailUrl, thumbnail, type, url } = commentMediaInfo || {};
+  const [hasError, setHasError] = useState(false);
+  const handleError = () => setHasError(true);
 
   let displayWidth, displayHeight;
   const isMobile = useWindowWidth() < 640;
@@ -63,7 +47,7 @@ const Thumbnail = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWid
   const hasThumbnail = getHasThumbnail(commentMediaInfo, url);
 
   if (type === 'image') {
-    thumbnailComponent = <img src={url} alt='' onClick={() => setShowThumbnail(false)} />;
+    thumbnailComponent = <img src={url} alt='' onError={handleError} onClick={() => setShowThumbnail(false)} />;
   } else if (type === 'video') {
     thumbnailComponent = thumbnail ? <img src={thumbnail} alt='' /> : <video src={`${url}#t=0.001`} onClick={() => setShowThumbnail(false)} />;
   } else if (type === 'webpage') {
@@ -76,15 +60,21 @@ const Thumbnail = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWid
     thumbnailComponent = <audio src={url} controls />;
   }
 
+  if (hasError) {
+    thumbnailComponent = <img className={styles.fileDeleted} src='/assets/filedeleted-res.gif' alt='File deleted' />;
+  }
+
   const thumbnailSmallPadding = isMobile ? styles.thumbnailMobile : styles.thumbnailReplyDesktop;
   const thumbnailDimensions = { '--width': displayWidth, '--height': displayHeight } as React.CSSProperties;
 
   const linkWithoutThumbnail = url && new URL(url);
 
-  return isOutOfFeed ? (
+  return hasError ? (
+    <img className={styles.fileDeleted} src='/assets/filedeleted-res.gif' alt='File deleted' />
+  ) : isOutOfFeed ? (
     <span className={styles.subplebbitAvatar}>{thumbnailComponent}</span>
   ) : isMobile || isReply ? (
-    <ThumbnailSmall style={thumbnailDimensions} thumbnailSmallPadding={thumbnailSmallPadding}>
+    <span className={`${styles.thumbnailSmall} ${thumbnailSmallPadding}`} style={thumbnailDimensions}>
       {thumbnailComponent}
       {isMobile &&
         !hasThumbnail &&
@@ -96,9 +86,11 @@ const Thumbnail = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWid
             {getHostname(url) || (url.length > 30 ? url.slice(0, 30) + '...' : url)}
           </a>
         ))}
-    </ThumbnailSmall>
+    </span>
   ) : (
-    <ThumbnailBig style={thumbnailDimensions}>{thumbnailComponent}</ThumbnailBig>
+    <span className={styles.thumbnailBig} style={thumbnailDimensions}>
+      {thumbnailComponent}
+    </span>
   );
 };
 

From 7dca5bd01da95d0b68cd48d640119ee141534cd5 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Wed, 29 May 2024 15:53:41 +0200
Subject: [PATCH 10/13] fix assets paths and remove cache busters

---
 src/components/board-banner/board-banner.tsx      | 3 +--
 src/components/post/post-desktop/post-desktop.tsx | 4 ++--
 src/components/post/post-mobile/post-mobile.tsx   | 4 ++--
 src/views/not-found/not-found.tsx                 | 3 +--
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/board-banner/board-banner.tsx b/src/components/board-banner/board-banner.tsx
index f04ff400..ec4b7026 100644
--- a/src/components/board-banner/board-banner.tsx
+++ b/src/components/board-banner/board-banner.tsx
@@ -10,8 +10,7 @@ const totalBanners = 57;
 const ImageBanner = () => {
   const [imagePath] = useState(() => {
     const randomBannerIndex = Math.floor(Math.random() * totalBanners) + 1;
-    const cacheBuster = new Date().getTime();
-    return `assets/banners/banner-${randomBannerIndex}.jpg?cacheBuster=${cacheBuster}`;
+    return `/assets/banners/banner-${randomBannerIndex}.jpg`;
   });
 
   return <img src={imagePath} alt='' />;
diff --git a/src/components/post/post-desktop/post-desktop.tsx b/src/components/post/post-desktop/post-desktop.tsx
index b65e8eee..a74f8256 100644
--- a/src/components/post/post-desktop/post-desktop.tsx
+++ b/src/components/post/post-desktop/post-desktop.tsx
@@ -82,12 +82,12 @@ const PostInfo = ({ openReplyModal, post, roles }: PostProps) => {
         )}
         {pinned && (
           <span className={`${styles.stickyIconWrapper} ${!locked && styles.addPaddingBeforeReply}`}>
-            <img src='assets/icons/sticky.gif' alt='' className={styles.stickyIcon} title={t('sticky')} />
+            <img src='/assets/icons/sticky.gif' alt='' className={styles.stickyIcon} title={t('sticky')} />
           </span>
         )}
         {locked && (
           <span className={`${styles.closedIconWrapper} ${styles.addPaddingBeforeReply} ${pinned && styles.addPaddingInBetween}`}>
-            <img src='assets/icons/closed.gif' alt='' className={styles.closedIcon} title={t('closed')} />
+            <img src='/assets/icons/closed.gif' alt='' className={styles.closedIcon} title={t('closed')} />
           </span>
         )}
         {!isInPostView && !isReply && (
diff --git a/src/components/post/post-mobile/post-mobile.tsx b/src/components/post/post-mobile/post-mobile.tsx
index ec01f7c9..4c7128d9 100644
--- a/src/components/post/post-mobile/post-mobile.tsx
+++ b/src/components/post/post-mobile/post-mobile.tsx
@@ -55,12 +55,12 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
           {!(isDescription || isRules) && <span className={styles.address}>(u/{shortAddress || accountShortAddress})</span>}
           {pinned && (
             <span className={styles.stickyIconWrapper}>
-              <img src='assets/icons/sticky.gif' alt='' className={styles.stickyIcon} title={t('sticky')} />
+              <img src='/assets/icons/sticky.gif' alt='' className={styles.stickyIcon} title={t('sticky')} />
             </span>
           )}
           {locked && (
             <span className={`${styles.closedIconWrapper} ${pinned && styles.addPaddingInBetween}`}>
-              <img src='assets/icons/closed.gif' alt='' className={styles.closedIcon} title={t('closed')} />
+              <img src='/assets/icons/closed.gif' alt='' className={styles.closedIcon} title={t('closed')} />
             </span>
           )}
           {title && (
diff --git a/src/views/not-found/not-found.tsx b/src/views/not-found/not-found.tsx
index 150ef906..7e206fe8 100644
--- a/src/views/not-found/not-found.tsx
+++ b/src/views/not-found/not-found.tsx
@@ -10,8 +10,7 @@ const totalNotFoundImages = 2;
 const NotFoundImage = () => {
   const [imagePath] = useState(() => {
     const randomBannerIndex = Math.floor(Math.random() * totalNotFoundImages) + 1;
-    const cacheBuster = new Date().getTime();
-    return `assets/not-found/not-found-${randomBannerIndex}.jpg?cacheBuster=${cacheBuster}`;
+    return `/assets/not-found/not-found-${randomBannerIndex}.jpg`;
   });
 
   return <img src={imagePath} alt='' />;

From c491b0729588cc6f58094bea269c945fc0429de6 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Wed, 29 May 2024 16:13:14 +0200
Subject: [PATCH 11/13] fix(board banner): subplebbit short address was wrong

---
 src/components/board-banner/board-banner.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/board-banner/board-banner.tsx b/src/components/board-banner/board-banner.tsx
index ec4b7026..d6c3648f 100644
--- a/src/components/board-banner/board-banner.tsx
+++ b/src/components/board-banner/board-banner.tsx
@@ -27,20 +27,19 @@ const BoardBanner = () => {
   const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress;
 
   const subplebbit = useSubplebbit({ subplebbitAddress });
-  const displayAddress =
-    subplebbit?.address && subplebbit?.address.length > 10 && !subplebbit?.address.includes('.') ? subplebbit?.address.slice(0, 13).concat('...') : subplebbit?.address;
+  const { address, shortAddress } = subplebbit || {};
 
   const multisubMetadata = useMultisubMetadata();
 
   const title = isInAllView ? multisubMetadata?.title : isInSubscriptionsView ? 'Subscriptions' : subplebbit?.title;
-  const subtitle = isInAllView ? 'p/all' : isInSubscriptionsView ? 'p/subscriptions' : `p/${subplebbit?.address}`;
+  const subtitle = isInAllView ? 'p/all' : isInSubscriptionsView ? 'p/subscriptions' : `p/${address}`;
 
   return (
     <div className={styles.content}>
       <div className={styles.bannerCnt}>
-        <ImageBanner key={isInAllView ? 'all' : isInSubscriptionsView ? 'subscriptions' : subplebbit?.address} />
+        <ImageBanner key={isInAllView ? 'all' : isInSubscriptionsView ? 'subscriptions' : address} />
       </div>
-      <div className={styles.boardTitle}>{title || `p/${displayAddress}`}</div>
+      <div className={styles.boardTitle}>{title || `p/${shortAddress}`}</div>
       <div className={styles.boardSubtitle}>{subtitle}</div>
       <hr />
     </div>

From 0701f82174dca7e15400672341b7501761ef72d0 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Wed, 29 May 2024 16:17:37 +0200
Subject: [PATCH 12/13] refactor: add hook use-is-mobile for use-window-width
 calls

---
 src/components/challenge-modal/challenge-modal.tsx | 4 ++--
 src/components/comment-media/comment-media.tsx     | 8 ++++----
 src/components/post/post.tsx                       | 4 ++--
 src/components/reply-modal/reply-modal.tsx         | 4 ++--
 src/hooks/use-is-mobile.ts                         | 8 ++++++++
 src/hooks/use-reply-modal.ts                       | 4 ++--
 6 files changed, 20 insertions(+), 12 deletions(-)
 create mode 100644 src/hooks/use-is-mobile.ts

diff --git a/src/components/challenge-modal/challenge-modal.tsx b/src/components/challenge-modal/challenge-modal.tsx
index c9a57908..f95abb5c 100644
--- a/src/components/challenge-modal/challenge-modal.tsx
+++ b/src/components/challenge-modal/challenge-modal.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Challenge as ChallengeType } from '@plebbit/plebbit-react-hooks';
 import { getPublicationType } from '../../lib/utils/challenge-utils';
 import useChallenges from '../../hooks/use-challenges';
-import useWindowWidth from '../../hooks/use-window-width';
+import useIsMobile from '../../hooks/use-is-mobile';
 import styles from './challenge-modal.module.css';
 import _ from 'lodash';
 
@@ -54,7 +54,7 @@ const Challenge = ({ challenge, closeModal }: ChallengeProps) => {
 
   // react-draggable requires a ref to the modal node
   const nodeRef = useRef(null);
-  const isMobile = useWindowWidth() < 640;
+  const isMobile = useIsMobile();
 
   const modalContent = (
     <div className={styles.container} ref={nodeRef}>
diff --git a/src/components/comment-media/comment-media.tsx b/src/components/comment-media/comment-media.tsx
index 25f4c659..0df99bc7 100644
--- a/src/components/comment-media/comment-media.tsx
+++ b/src/components/comment-media/comment-media.tsx
@@ -4,7 +4,7 @@ import styles from './comment-media.module.css';
 import { CommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../lib/utils/media-utils';
 import { getHostname } from '../../lib/utils/url-utils';
 import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
-import useWindowWidth from '../../hooks/use-window-width';
+import useIsMobile from '../../hooks/use-is-mobile';
 import Embed, { canEmbed } from '../embed';
 
 interface MediaProps {
@@ -24,7 +24,7 @@ const Thumbnail = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWid
   const handleError = () => setHasError(true);
 
   let displayWidth, displayHeight;
-  const isMobile = useWindowWidth() < 640;
+  const isMobile = useIsMobile();
   const maxThumbnailSize = isMobile || isReply ? 125 : 250;
 
   if (linkWidth && linkHeight) {
@@ -97,7 +97,7 @@ const Thumbnail = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWid
 const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => {
   const { t } = useTranslation();
   const { thumbnail, type, url } = commentMediaInfo || {};
-  const isMobile = useWindowWidth() < 640;
+  const isMobile = useIsMobile();
   const mediaClass = isMobile ? styles.mediaMobile : isReply ? styles.mediaDesktopReply : styles.mediaDesktopOp;
 
   return (
@@ -134,7 +134,7 @@ const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => {
 
 const CommentMedia = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWidth, showThumbnail, setShowThumbnail }: MediaProps) => {
   const { t } = useTranslation();
-  const isMobile = useWindowWidth() < 640;
+  const isMobile = useIsMobile();
   const { type, url } = commentMediaInfo || {};
 
   return (
diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx
index ec65fdaa..2dc6569b 100644
--- a/src/components/post/post.tsx
+++ b/src/components/post/post.tsx
@@ -1,5 +1,5 @@
 import { Role, useSubplebbit } from '@plebbit/plebbit-react-hooks';
-import useWindowWidth from '../../hooks/use-window-width';
+import useIsMobile from '../../hooks/use-is-mobile';
 import styles from './post.module.css';
 import PostDesktop from './post-desktop';
 import PostMobile from './post-mobile';
@@ -15,7 +15,7 @@ export interface PostProps {
 
 const Post = ({ post, showAllReplies = false, openReplyModal }: PostProps) => {
   const subplebbit = useSubplebbit({ subplebbitAddress: post?.subplebbitAddress });
-  const isMobile = useWindowWidth() < 640;
+  const isMobile = useIsMobile();
 
   return (
     <div className={styles.thread}>
diff --git a/src/components/reply-modal/reply-modal.tsx b/src/components/reply-modal/reply-modal.tsx
index 35d7eac7..17bed746 100644
--- a/src/components/reply-modal/reply-modal.tsx
+++ b/src/components/reply-modal/reply-modal.tsx
@@ -6,7 +6,7 @@ import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import { setAccount, useAccount } from '@plebbit/plebbit-react-hooks';
 import { isValidURL } from '../../lib/utils/url-utils';
 import useReply from '../../hooks/use-reply';
-import useWindowWidth from '../../hooks/use-window-width';
+import useIsMobile from '../../hooks/use-is-mobile';
 import styles from './reply-modal.module.css';
 import _ from 'lodash';
 
@@ -51,7 +51,7 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
   }, [replyIndex, resetContent, closeModal]);
 
   const nodeRef = useRef<HTMLDivElement>(null);
-  const isMobile = useWindowWidth() < 640;
+  const isMobile = useIsMobile();
 
   // on mobile, the position is absolute instead of fixed, so we need to calculate the top position
   useEffect(() => {
diff --git a/src/hooks/use-is-mobile.ts b/src/hooks/use-is-mobile.ts
new file mode 100644
index 00000000..fc7cd9f6
--- /dev/null
+++ b/src/hooks/use-is-mobile.ts
@@ -0,0 +1,8 @@
+import useWindowWidth from './use-window-width';
+
+const useIsMobile = () => {
+  const windowWidth = useWindowWidth();
+  return windowWidth < 640;
+};
+
+export default useIsMobile;
diff --git a/src/hooks/use-reply-modal.ts b/src/hooks/use-reply-modal.ts
index acb4a8df..d15cc2b1 100644
--- a/src/hooks/use-reply-modal.ts
+++ b/src/hooks/use-reply-modal.ts
@@ -1,12 +1,12 @@
 import { useState, useCallback } from 'react';
-import useWindowWidth from './use-window-width';
+import useIsMobile from './use-is-mobile';
 
 const useReplyModal = () => {
   const [showReplyModal, setShowReplyModal] = useState(false);
   const [activeCid, setActiveCid] = useState<string | null>(null);
 
   // on mobile, the position is absolute instead of fixed, so we need to calculate the top position
-  const isMobile = useWindowWidth() < 640;
+  const isMobile = useIsMobile();
   const [scrollY, setScrollY] = useState<number>(0);
 
   const closeModal = useCallback(() => {

From 79b660eaa02e3dac9923064b36013965be560844 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Wed, 29 May 2024 16:50:00 +0200
Subject: [PATCH 13/13] fix(use-subplebbits-stats): hook would fetch the same
 stats if pending fetching

---
 src/hooks/use-subplebbits-stats.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/hooks/use-subplebbits-stats.ts b/src/hooks/use-subplebbits-stats.ts
index a03acdba..075a9e8f 100644
--- a/src/hooks/use-subplebbits-stats.ts
+++ b/src/hooks/use-subplebbits-stats.ts
@@ -2,6 +2,8 @@ import { useEffect, useMemo } from 'react';
 import { useAccount, useSubplebbits } from '@plebbit/plebbit-react-hooks';
 import { create } from 'zustand';
 
+const pendingFetchCid: { [cid: string]: boolean } = {};
+
 const useSubplebbitsStats = (options: any) => {
   const { subplebbitAddresses, accountName } = options || {};
   const account = useAccount({ accountName });
@@ -15,13 +17,15 @@ const useSubplebbitsStats = (options: any) => {
     }
 
     subplebbits.forEach((subplebbit) => {
-      if (subplebbit && subplebbit.statsCid && !subplebbitsStats[subplebbit.address]) {
+      if (subplebbit && subplebbit.statsCid && !subplebbitsStats[subplebbit.address] && !pendingFetchCid[subplebbit.statsCid]) {
+        pendingFetchCid[subplebbit.statsCid] = true;
         account.plebbit
           .fetchCid(subplebbit.statsCid)
           .then((fetchedStats: any) => {
             setSubplebbitStats(subplebbit.address, JSON.parse(fetchedStats));
           })
           .catch((error: any) => {
+            pendingFetchCid[subplebbit.statsCid] = false;
             console.error('Fetching subplebbit stats failed', { subplebbitAddress: subplebbit.address, error });
           });
       }