add post actions menu

src/components/styled/Board.styled.jsx

@@ -1667,6 +1667,49 @@ export const BoardForm = styled.div`
       position: relative;
     }
 
+    #post-menu {
+      z-index: 999;
+      position: absolute;
+      font-size: 12px;
+      line-height: 1.3em;
+      left: 80%;
+
+      ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        white-space: nowrap;
+      }
+
+      li {
+        cursor: pointer;
+        position: relative;
+        padding: 2px 4px;
+      }
+
+      .dropdown {
+        position: relative;
+        display: inline-block;
+      }
+
+      .dropdown-menu {
+        display: none;
+        position: absolute;
+        left: 100%;
+        top: 0;
+        list-style: none;
+      }
+
+      .dropdown:hover .dropdown-menu {
+        display: block;
+      }
+
+      a {
+        text-decoration: none;
+        color: inherit;
+      }
+    }
+
     ${({ selectedStyle }) => {
     switch (selectedStyle) {
       case 'Yotsuba':
@@ -1675,6 +1718,23 @@ export const BoardForm = styled.div`
         border: 1px solid #d99f91 !important;
         border-left: none !important;
         border-top: none !important;
+      }
+      
+      #post-menu {
+        ul {
+          background-color: #f0e0d6;
+          border: 1px solid #d9bfb7;
+          border-bottom: 1px solid #d9bfb7;
+          border-right-width: 2px;
+        }
+
+        li {
+          border-bottom: 1px solid #ccc;
+
+          :hover {
+            background-color: #ffe;
+          }
+        }
       }`;
 
       case 'Yotsuba-B':
@@ -1683,16 +1743,68 @@ export const BoardForm = styled.div`
         border: 1px solid #ba9dbf !important;
         border-left: none !important;
         border-top: none !important;
+      }
+      
+      #post-menu {
+        ul {
+          background-color: #d6daf0;
+          border: 1px solid #b7c5d9;
+          border-right-width: 2px;
+        }
+
+        li {
+          border-bottom: 1px solid #b7c5d9;
+
+          :hover {
+            background-color: #eef2ff;
+          }
+        }
       }`;
 
       case 'Futaba':
         return `.highlighted {
         background-color: #f0c0b0 !important;
+      }
+      
+      #post-menu {
+        font-size: 13px !important;
+
+        ul {
+          background-color: #f0e0d6;
+          border: 1px solid #d9bfb7;
+          border-bottom: none;
+        }
+
+        li {
+          border-bottom: 1px solid #d9bfb7;
+
+          :hover {
+            background-color: #ffe;
+          }
+        }
       }`;
 
       case 'Burichan':
         return `.highlighted {
         background-color: #d6bad0 !important;
+      }
+      
+      #post-menu {
+        font-size: 13px !important;
+
+        ul {
+          background-color: #d6daf0;
+          border: 1px solid #b7c5d9;
+          border-bottom: none;
+        }
+
+        li {
+          border-bottom: 1px solid #b7c5d9;
+
+          :hover {
+            background-color: #eef2ff;
+          }
+        }
       }`;
 
       case 'Tomorrow':
@@ -1700,14 +1812,47 @@ export const BoardForm = styled.div`
         background-color: #1d1d21 !important;
         border: 1px solid #111 !important;
       }
+      
+      #post-menu {
+        ul {
+          background-color: #282a2e;
+          border: 1px solid #000;
+          border-bottom: none;
+        }
+
+        li {
+          border-bottom: 1px solid #000;
+
+          :hover {
+            background-color: #1d1f21;
+          }
+        }
+      }
 `;
 
       case 'Photon':
         return `.highlighted {
         background-color: #ccc !important;
         border: 1px solid #ccc !important;
+      }
+      
+      #post-menu {
+        ul {
+          background-color: #ddd;
+          border: 1px solid #ccc;
+          border-bottom: none;
+        }
+
+        li {
+          border-bottom: 1px solid #ccc;
+
+          :hover {
+            background-color: #eee;
+          }
+        }
       }`;
 
+        
         default:
           return '';
       }
@@ -3793,3 +3938,10 @@ export const BoardForm = styled.div`
     }}
   }
 `;
+
+export const PostMenu = styled.div`
+  display: inline-block;
+  cursor: pointer;
+  transition: transform 0.1s;
+  transform: ${props => props.rotated ? 'rotate(90deg)' : 'none'};
+`;

src/components/styled/Thread.styled.jsx

@@ -828,6 +828,49 @@ export const BoardForm = styled.div`
       margin-top: 10px;
     }
 
+    #post-menu {
+      z-index: 999;
+      position: absolute;
+      font-size: 12px;
+      line-height: 1.3em;
+      left: 80%;
+
+      ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        white-space: nowrap;
+      }
+
+      li {
+        cursor: pointer;
+        position: relative;
+        padding: 2px 4px;
+      }
+
+      .dropdown {
+        position: relative;
+        display: inline-block;
+      }
+
+      .dropdown-menu {
+        display: none;
+        position: absolute;
+        left: 100%;
+        top: 0;
+        list-style: none;
+      }
+
+      .dropdown:hover .dropdown-menu {
+        display: block;
+      }
+
+      a {
+        text-decoration: none;
+        color: inherit;
+      }
+    }
+
     ${({ selectedStyle }) => {
     switch (selectedStyle) {
       case 'Yotsuba':
@@ -836,6 +879,23 @@ export const BoardForm = styled.div`
         border: 1px solid #d99f91 !important;
         border-left: none !important;
         border-top: none !important;
+      }
+      
+      #post-menu {
+        ul {
+          background-color: #f0e0d6;
+          border: 1px solid #d9bfb7;
+          border-bottom: 1px solid #d9bfb7;
+          border-right-width: 2px;
+        }
+
+        li {
+          border-bottom: 1px solid #ccc;
+
+          :hover {
+            background-color: #ffe;
+          }
+        }
       }`;
 
       case 'Yotsuba-B':
@@ -844,28 +904,112 @@ export const BoardForm = styled.div`
         border: 1px solid #ba9dbf !important;
         border-left: none !important;
         border-top: none !important;
+      }
+      
+      #post-menu {
+        ul {
+          background-color: #d6daf0;
+          border: 1px solid #b7c5d9;
+          border-right-width: 2px;
+        }
+
+        li {
+          border-bottom: 1px solid #b7c5d9;
+
+          :hover {
+            background-color: #eef2ff;
+          }
+        }
       }`;
 
       case 'Futaba':
         return `.highlighted {
         background-color: #f0c0b0 !important;
+      }
+      
+      #post-menu {
+        font-size: 13px !important;
+
+        ul {
+          background-color: #f0e0d6;
+          border: 1px solid #d9bfb7;
+          border-bottom: none;
+        }
+
+        li {
+          border-bottom: 1px solid #d9bfb7;
+
+          :hover {
+            background-color: #ffe;
+          }
+        }
       }`;
 
       case 'Burichan':
         return `.highlighted {
         background-color: #d6bad0 !important;
+      }
+      
+      #post-menu {
+        font-size: 13px !important;
+
+        ul {
+          background-color: #d6daf0;
+          border: 1px solid #b7c5d9;
+          border-bottom: none;
+        }
+
+        li {
+          border-bottom: 1px solid #b7c5d9;
+
+          :hover {
+            background-color: #eef2ff;
+          }
+        }
       }`;
 
       case 'Tomorrow':
         return `.highlighted {
         background-color: #1d1d21 !important;
         border: 1px solid #111 !important;
+      }
+      
+      #post-menu {
+        ul {
+          background-color: #282a2e;
+          border: 1px solid #000;
+          border-bottom: none;
+        }
+
+        li {
+          border-bottom: 1px solid #000;
+
+          :hover {
+            background-color: #1d1f21;
+          }
+        }
       }`;
 
       case 'Photon':
         return `.highlighted {
         background-color: #ccc !important;
         border: 1px solid #ccc !important;
+      }
+      
+      #post-menu {
+        ul {
+          background-color: #ddd;
+          border: 1px solid #ccc;
+          border-bottom: none;
+        }
+
+        li {
+          border-bottom: 1px solid #ccc;
+
+          :hover {
+            background-color: #eee;
+          }
+        }
       }`;
 
         default:

src/components/views/All.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useMemo, useState } from 'react';
+import React, { Fragment, useEffect, useMemo, useState, useRef } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { Link, useNavigate } from 'react-router-dom';
 import { Tooltip } from 'react-tooltip';
@@ -7,7 +7,7 @@ import { useAccount, useAccountComments, useFeed, useSubplebbits } from '@plebbi
 import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
 import { debounce } from 'lodash';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
-import { Container, NavBar, Header, Break, TopBar, BoardForm } from '../styled/Board.styled';
+import { Container, NavBar, Header, Break, TopBar, BoardForm, PostMenu } from '../styled/Board.styled';
 import { Footer } from '../styled/Thread.styled';
 import ImageBanner from '../ImageBanner';
 import OfflineIndicator from '../OfflineIndicator';
@@ -41,13 +41,18 @@ const All = () => {
   } = useGeneralStore(state => state);
 
   const account = useAccount();
+  const navigate = useNavigate();
+
+  const threadMenuRefs = useRef({});
+  const replyMenuRefs = useRef({});
 
   const [isReplyOpen, setIsReplyOpen] = useState(false);
-  const navigate = useNavigate();
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
-
+  const [rotatedStates, setRotatedStates] = useState({});
   const [errorMessage, setErrorMessage] = useState(null);
+  const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
+
   useError(errorMessage, [errorMessage]);
 
   const addresses = defaultSubplebbits.map(subplebbit => subplebbit.address);
@@ -446,7 +451,66 @@ const All = () => {
                                 ]
                               </span>
                             </span>&nbsp;
-                            <button key={`pmb-${index}`} className="post-menu-button" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }} data-cmd="post-menu">▶</button>
+                            <PostMenu 
+                              key={`pmb-${index}`} 
+                              title="Post menu"
+                              ref={el => threadMenuRefs.current[thread.cid] = el}
+                              className='post-menu-button' 
+                              rotated={rotatedStates[thread.cid]}
+                              onClick={() => {
+                                const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
+                                const menu = document.querySelector(`.post-menu-thread-${thread.cid}`);
+                                const scrollY = window.scrollY || window.pageYOffset;
+                                menu.style.top = `calc(${rect.top + scrollY}px - 225px)`;
+                                menu.style.left = `${rect.left}px`;
+                              
+                                setRotatedStates(prevState => ({
+                                  ...prevState,
+                                  [thread.cid]: !prevState[thread.cid]
+                                }));
+                              }}                              
+                            >
+                              ▶
+                            </PostMenu>
+                            <div id="post-menu" className={`post-menu-thread post-menu-thread-${thread.cid}`}
+                              style={{ display: rotatedStates[thread.cid] ? 'block' : 'none' }}>
+                              <ul>
+                                <li>Edit post</li>
+                                <li>Hide thread</li>
+                                {(commentMediaInfo && (
+                                  commentMediaInfo.type === 'image' || 
+                                  (commentMediaInfo.type === 'webpage' && 
+                                  commentMediaInfo.thumbnail))) ? ( 
+                                    <li 
+                                    onMouseOver={() => {setIsImageSearchOpen(true)}}
+                                    onMouseLeave={() => {setIsImageSearchOpen(false)}}>
+                                      Image search »
+                                      <ul className="dropdown-menu"
+                                        style={{display: isImageSearchOpen ? 'block': 'none'}}>
+                                        <li>
+                                          <a 
+                                          href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
+                                          target="_blank" rel="noreferrer"
+                                          >Google</a>
+                                        </li>
+                                        <li>
+                                          <a
+                                          href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
+                                          target="_blank" rel="noreferrer"
+                                          >Yandex</a>
+                                        </li>
+                                        <li>
+                                          <a
+                                          href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
+                                          target="_blank" rel="noreferrer"
+                                          >SauceNAO</a>
+                                        </li>
+                                      </ul>
+                                    </li>
+                                  ) : null
+                                }
+                              </ul>
+                            </div>
                             <div key={`bi-${index}`} id="backlink-id" className="backlink">
                               {thread.replies?.pages?.topAll.comments
                                 .sort((a, b) => a.timestamp - b.timestamp)
@@ -575,7 +639,65 @@ const All = () => {
                               tooltipPlace="top"
                               className="offline-reply" />
                               </span>&nbsp;
-                              <button key={`pmb-${index}`} className="post-menu-button" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }} data-cmd="post-menu">▶</button>
+                              <PostMenu 
+                              key={`pmb-${index}`} 
+                              title="Post menu"
+                              ref={el => replyMenuRefs.current[reply.cid] = el}
+                              className='post-menu-button' 
+                              rotated={rotatedStates[reply.cid]}
+                              onClick={() => {
+                                const rect = replyMenuRefs.current[reply.cid].getBoundingClientRect();
+                                const menu = document.querySelector(`.post-menu-reply-${reply.cid}`);
+                                const scrollY = window.scrollY || window.pageYOffset;
+                                menu.style.top = `calc(${rect.top + scrollY}px - 225px)`;
+                                menu.style.left = `${rect.left}px`;
+                              
+                                setRotatedStates(prevState => ({
+                                  ...prevState,
+                                  [reply.cid]: !prevState[reply.cid]
+                                }));
+                              }}                              
+                            >
+                              ▶
+                            </PostMenu>
+                              <div id="post-menu" className={`post-menu-reply post-menu-reply-${reply.cid}`}
+                              style={{ display: rotatedStates[reply.cid] ? 'block' : 'none' }}>
+                                <ul>
+                                  <li>Edit post</li>
+                                  <li>Hide post</li>
+                                  {(replyMediaInfo && (
+                                    replyMediaInfo.type === 'image' || 
+                                    (replyMediaInfo.type === 'webpage' && 
+                                    replyMediaInfo.thumbnail))) ? ( 
+                                    <li 
+                                    onMouseOver={() => {setIsImageSearchOpen(true)}}
+                                    onMouseLeave={() => {setIsImageSearchOpen(false)}}>
+                                      Image search »
+                                      <ul className="dropdown-menu"
+                                        style={{display: isImageSearchOpen ? 'block': 'none'}}>
+                                        <li>
+                                          <a 
+                                          href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
+                                          target="_blank" rel="noreferrer"
+                                          >Google</a>
+                                        </li>
+                                        <li>
+                                          <a
+                                          href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
+                                          target="_blank" rel="noreferrer"
+                                          >Yandex</a>
+                                        </li>
+                                        <li>
+                                          <a
+                                          href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
+                                          target="_blank" rel="noreferrer"
+                                          >SauceNAO</a>
+                                        </li>
+                                      </ul>
+                                    </li>
+                                    ) : null}
+                                </ul>
+                              </div>
                               <div id="backlink-id" className="backlink">
                                 {reply.replies?.pages?.topAll.comments
                                   .sort((a, b) => a.timestamp - b.timestamp)

src/components/views/Board.jsx

@@ -7,7 +7,7 @@ import { useAccount, useAccountComments, useFeed, usePublishComment, useSubplebb
 import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
 import { debounce } from 'lodash';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
-import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from '../styled/Board.styled';
+import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm, PostMenu} from '../styled/Board.styled';
 import { Footer } from '../styled/Thread.styled';
 import ImageBanner from '../ImageBanner';
 import OfflineIndicator from '../OfflineIndicator';
@@ -51,31 +51,35 @@ const Board = () => {
   } = useGeneralStore(state => state);
 
   const account = useAccount();
+  const navigate = useNavigate();
+  const { subplebbitAddress } = useParams();
 
   const nameRef = useRef();
   const subjectRef = useRef();
   const commentRef = useRef();
   const linkRef = useRef();
+  const threadMenuRefs = useRef({});
+  const replyMenuRefs = useRef({});
 
-  const [isReplyOpen, setIsReplyOpen] = useState(false);
-  const navigate = useNavigate();
-  const [prevScrollPos, setPrevScrollPos] = useState(0);
-  const [visible, setVisible] = useState(true);
   const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'});
-  const [selectedFeed, setSelectedFeed] = useState(feed);
-  const { subplebbitAddress } = useParams();
   const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
-
+  const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress});
   const stateString = useStateString(subplebbit);
 
-  const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress});
+  const [isReplyOpen, setIsReplyOpen] = useState(false);
+  const [prevScrollPos, setPrevScrollPos] = useState(0);
+  const [visible, setVisible] = useState(true);
+  const [triggerPublishComment, setTriggerPublishComment] = useState(false);
+  const [selectedFeed, setSelectedFeed] = useState(feed);
+  const [rotatedStates, setRotatedStates] = useState({});
+  const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
+
 
   const [errorMessage, setErrorMessage] = useState(null);
   const [successMessage] = useState(null);
   useError(errorMessage, [errorMessage]);
   useSuccess(successMessage, [successMessage]);
 
-  const [triggerPublishComment, setTriggerPublishComment] = useState(false);
 
   const errorString = useMemo(() => {
     if (subplebbit?.state === 'failed') {
@@ -87,6 +91,7 @@ const Board = () => {
     }
   }, [subplebbit?.state, subplebbit?.error, selectedAddress])
 
+
   useEffect(() => {
     if (errorString) {
       setErrorMessage(errorString);
@@ -674,7 +679,66 @@ const Board = () => {
                                 ]
                               </span>
                             </span>&nbsp;
-                            <button key={`pmb-${index}`} className="post-menu-button" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }} data-cmd="post-menu">▶</button>
+                            <PostMenu 
+                              key={`pmb-${index}`} 
+                              title="Post menu"
+                              ref={el => threadMenuRefs.current[thread.cid] = el}
+                              className='post-menu-button' 
+                              rotated={rotatedStates[thread.cid]}
+                              onClick={() => {
+                                const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
+                                const menu = document.querySelector(`.post-menu-thread-${thread.cid}`);
+                                const scrollY = window.scrollY || window.pageYOffset;
+                                menu.style.top = `calc(${rect.top + scrollY}px - 258px)`;
+                                menu.style.left = `${rect.left}px`;
+                              
+                                setRotatedStates(prevState => ({
+                                  ...prevState,
+                                  [thread.cid]: !prevState[thread.cid]
+                                }));
+                              }}                              
+                            >
+                              ▶
+                            </PostMenu>
+                            <div id="post-menu" className={`post-menu-thread post-menu-thread-${thread.cid}`}
+                              style={{ display: rotatedStates[thread.cid] ? 'block' : 'none' }}>
+                              <ul>
+                                <li>Edit post</li>
+                                <li>Hide thread</li>
+                                {(commentMediaInfo && (
+                                  commentMediaInfo.type === 'image' || 
+                                  (commentMediaInfo.type === 'webpage' && 
+                                  commentMediaInfo.thumbnail))) ? ( 
+                                    <li 
+                                    onMouseOver={() => {setIsImageSearchOpen(true)}}
+                                    onMouseLeave={() => {setIsImageSearchOpen(false)}}>
+                                      Image search »
+                                      <ul className="dropdown-menu"
+                                        style={{display: isImageSearchOpen ? 'block': 'none'}}>
+                                        <li>
+                                          <a 
+                                          href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
+                                          target="_blank" rel="noreferrer"
+                                          >Google</a>
+                                        </li>
+                                        <li>
+                                          <a
+                                          href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
+                                          target="_blank" rel="noreferrer"
+                                          >Yandex</a>
+                                        </li>
+                                        <li>
+                                          <a
+                                          href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
+                                          target="_blank" rel="noreferrer"
+                                          >SauceNAO</a>
+                                        </li>
+                                      </ul>
+                                    </li>
+                                  ) : null
+                                }
+                              </ul>
+                            </div>
                             <div key={`bi-${index}`} id="backlink-id" className="backlink">
                               {thread.replies?.pages?.topAll.comments
                                 .sort((a, b) => a.timestamp - b.timestamp)
@@ -785,7 +849,65 @@ const Board = () => {
                                   <span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span>
                                 )}
                               </span>&nbsp;
-                              <button key={`pmb-${index}`} className="post-menu-button" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }} data-cmd="post-menu">▶</button>
+                              <PostMenu 
+                              key={`pmb-${index}`} 
+                              title="Post menu"
+                              ref={el => replyMenuRefs.current[reply.cid] = el}
+                              className='post-menu-button' 
+                              rotated={rotatedStates[reply.cid]}
+                              onClick={() => {
+                                const rect = replyMenuRefs.current[reply.cid].getBoundingClientRect();
+                                const menu = document.querySelector(`.post-menu-reply-${reply.cid}`);
+                                const scrollY = window.scrollY || window.pageYOffset;
+                                menu.style.top = `calc(${rect.top + scrollY}px - 258px)`;
+                                menu.style.left = `${rect.left}px`;
+                              
+                                setRotatedStates(prevState => ({
+                                  ...prevState,
+                                  [reply.cid]: !prevState[reply.cid]
+                                }));
+                              }}                              
+                            >
+                              ▶
+                            </PostMenu>
+                              <div id="post-menu" className={`post-menu-reply post-menu-reply-${reply.cid}`}
+                              style={{ display: rotatedStates[reply.cid] ? 'block' : 'none' }}>
+                                <ul>
+                                  <li>Edit post</li>
+                                  <li>Hide post</li>
+                                  {(replyMediaInfo && (
+                                    replyMediaInfo.type === 'image' || 
+                                    (replyMediaInfo.type === 'webpage' && 
+                                    replyMediaInfo.thumbnail))) ? ( 
+                                    <li 
+                                    onMouseOver={() => {setIsImageSearchOpen(true)}}
+                                    onMouseLeave={() => {setIsImageSearchOpen(false)}}>
+                                      Image search »
+                                      <ul className="dropdown-menu"
+                                        style={{display: isImageSearchOpen ? 'block': 'none'}}>
+                                        <li>
+                                          <a 
+                                          href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
+                                          target="_blank" rel="noreferrer"
+                                          >Google</a>
+                                        </li>
+                                        <li>
+                                          <a
+                                          href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
+                                          target="_blank" rel="noreferrer"
+                                          >Yandex</a>
+                                        </li>
+                                        <li>
+                                          <a
+                                          href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
+                                          target="_blank" rel="noreferrer"
+                                          >SauceNAO</a>
+                                        </li>
+                                      </ul>
+                                    </li>
+                                    ) : null}
+                                </ul>
+                              </div>
                               <div id="backlink-id" className="backlink">
                                 {reply.replies?.pages?.topAll.comments
                                   .sort((a, b) => a.timestamp - b.timestamp)

src/components/views/Subscriptions.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useMemo, useState } from 'react';
+import React, { Fragment, useEffect, useMemo, useState, useRef } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { Link, useNavigate } from 'react-router-dom';
 import { Tooltip } from 'react-tooltip';
@@ -7,7 +7,7 @@ import { useAccount, useAccountComments, useFeed, useSubplebbits } from '@plebbi
 import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
 import { debounce } from 'lodash';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
-import { Container, NavBar, Header, Break, TopBar, BoardForm } from '../styled/Board.styled';
+import { Container, NavBar, Header, Break, TopBar, BoardForm, PostMenu } from '../styled/Board.styled';
 import { Footer } from '../styled/Thread.styled';
 import ImageBanner from '../ImageBanner';
 import OfflineIndicator from '../OfflineIndicator';
@@ -41,11 +41,16 @@ const Subscriptions = () => {
   } = useGeneralStore(state => state);
 
   const account = useAccount();
+  const navigate = useNavigate();
+
+  const threadMenuRefs = useRef({});
+  const replyMenuRefs = useRef({});
 
   const [isReplyOpen, setIsReplyOpen] = useState(false);
-  const navigate = useNavigate();
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
+  const [rotatedStates, setRotatedStates] = useState({});
+  const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
 
   const [errorMessage, setErrorMessage] = useState(null);
   useError(errorMessage, [errorMessage]);
@@ -451,7 +456,66 @@ const Subscriptions = () => {
                                 ]
                               </span>
                             </span>&nbsp;
-                            <button key={`pmb-${index}`} className="post-menu-button" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }} data-cmd="post-menu">▶</button>
+                            <PostMenu 
+                              key={`pmb-${index}`} 
+                              title="Post menu"
+                              ref={el => threadMenuRefs.current[thread.cid] = el}
+                              className='post-menu-button' 
+                              rotated={rotatedStates[thread.cid]}
+                              onClick={() => {
+                                const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
+                                const menu = document.querySelector(`.post-menu-thread-${thread.cid}`);
+                                const scrollY = window.scrollY || window.pageYOffset;
+                                menu.style.top = `calc(${rect.top + scrollY}px - 225px)`;
+                                menu.style.left = `${rect.left}px`;
+                              
+                                setRotatedStates(prevState => ({
+                                  ...prevState,
+                                  [thread.cid]: !prevState[thread.cid]
+                                }));
+                              }}                              
+                            >
+                              ▶
+                            </PostMenu>
+                            <div id="post-menu" className={`post-menu-thread post-menu-thread-${thread.cid}`}
+                              style={{ display: rotatedStates[thread.cid] ? 'block' : 'none' }}>
+                              <ul>
+                                <li>Edit post</li>
+                                <li>Hide thread</li>
+                                {(commentMediaInfo && (
+                                  commentMediaInfo.type === 'image' || 
+                                  (commentMediaInfo.type === 'webpage' && 
+                                  commentMediaInfo.thumbnail))) ? ( 
+                                    <li 
+                                    onMouseOver={() => {setIsImageSearchOpen(true)}}
+                                    onMouseLeave={() => {setIsImageSearchOpen(false)}}>
+                                      Image search »
+                                      <ul className="dropdown-menu"
+                                        style={{display: isImageSearchOpen ? 'block': 'none'}}>
+                                        <li>
+                                          <a 
+                                          href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
+                                          target="_blank" rel="noreferrer"
+                                          >Google</a>
+                                        </li>
+                                        <li>
+                                          <a
+                                          href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
+                                          target="_blank" rel="noreferrer"
+                                          >Yandex</a>
+                                        </li>
+                                        <li>
+                                          <a
+                                          href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
+                                          target="_blank" rel="noreferrer"
+                                          >SauceNAO</a>
+                                        </li>
+                                      </ul>
+                                    </li>
+                                  ) : null
+                                }
+                              </ul>
+                            </div>
                             <div key={`bi-${index}`} id="backlink-id" className="backlink">
                               {thread.replies?.pages?.topAll.comments
                                 .sort((a, b) => a.timestamp - b.timestamp)
@@ -580,7 +644,65 @@ const Subscriptions = () => {
                               tooltipPlace="top"
                               className="offline-reply" />
                               </span>&nbsp;
-                              <button key={`pmb-${index}`} className="post-menu-button" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }} data-cmd="post-menu">▶</button>
+                              <PostMenu 
+                              key={`pmb-${index}`} 
+                              title="Post menu"
+                              ref={el => replyMenuRefs.current[reply.cid] = el}
+                              className='post-menu-button' 
+                              rotated={rotatedStates[reply.cid]}
+                              onClick={() => {
+                                const rect = replyMenuRefs.current[reply.cid].getBoundingClientRect();
+                                const menu = document.querySelector(`.post-menu-reply-${reply.cid}`);
+                                const scrollY = window.scrollY || window.pageYOffset;
+                                menu.style.top = `calc(${rect.top + scrollY}px - 225px)`;
+                                menu.style.left = `${rect.left}px`;
+                              
+                                setRotatedStates(prevState => ({
+                                  ...prevState,
+                                  [reply.cid]: !prevState[reply.cid]
+                                }));
+                              }}                              
+                            >
+                              ▶
+                            </PostMenu>
+                              <div id="post-menu" className={`post-menu-reply post-menu-reply-${reply.cid}`}
+                              style={{ display: rotatedStates[reply.cid] ? 'block' : 'none' }}>
+                                <ul>
+                                  <li>Edit post</li>
+                                  <li>Hide post</li>
+                                  {(replyMediaInfo && (
+                                    replyMediaInfo.type === 'image' || 
+                                    (replyMediaInfo.type === 'webpage' && 
+                                    replyMediaInfo.thumbnail))) ? ( 
+                                      <li 
+                                    onMouseOver={() => {setIsImageSearchOpen(true)}}
+                                    onMouseLeave={() => {setIsImageSearchOpen(false)}}>
+                                      Image search »
+                                      <ul className="dropdown-menu"
+                                        style={{display: isImageSearchOpen ? 'block': 'none'}}>
+                                        <li>
+                                          <a 
+                                          href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
+                                          target="_blank" rel="noreferrer"
+                                          >Google</a>
+                                        </li>
+                                        <li>
+                                          <a
+                                          href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
+                                          target="_blank" rel="noreferrer"
+                                          >Yandex</a>
+                                        </li>
+                                        <li>
+                                          <a
+                                          href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
+                                          target="_blank" rel="noreferrer"
+                                          >SauceNAO</a>
+                                        </li>
+                                      </ul>
+                                    </li>
+                                    ) : null}
+                                </ul>
+                              </div>
                               <div id="backlink-id" className="backlink">
                                 {reply.replies?.pages?.topAll.comments
                                   .sort((a, b) => a.timestamp - b.timestamp)

src/components/views/Thread.jsx

@@ -6,7 +6,7 @@ import { useAccount, useAccountComments, useComment, usePublishComment, useSubpl
 import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
 import { debounce } from 'lodash';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
-import { Container, NavBar, Header, Break, PostForm, PostFormTable } from '../styled/Board.styled';
+import { Container, NavBar, Header, Break, PostForm, PostFormTable, PostMenu } from '../styled/Board.styled';
 import { ReplyFormLink, TopBar, BottomBar, BoardForm, Footer } from '../styled/Thread.styled';
 import ImageBanner from '../ImageBanner';
 import OfflineIndicator from '../OfflineIndicator';
@@ -48,23 +48,27 @@ const Thread = () => {
     showPostFormLink,
   } = useGeneralStore(state => state);
 
+  const account = useAccount();
+  const navigate = useNavigate();
+  const handleClickForm = useClickForm();
+
   const nameRef = useRef();
   const commentRef = useRef();
   const linkRef = useRef();
+  const threadMenuRefs = useRef({});
+  const replyMenuRefs = useRef({});
 
   const [triggerPublishComment, setTriggerPublishComment] = useState(false);
-
   const [errorMessage, setErrorMessage] = useState(null);
-  useError(errorMessage, [errorMessage]);
-
   const [isReplyOpen, setIsReplyOpen] = useState(false);
-  const navigate = useNavigate();
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
-  const account = useAccount();
+  const [rotatedStates, setRotatedStates] = useState({});
+  const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
+  
+  useError(errorMessage, [errorMessage]);
   const comment = useComment({commentCid: selectedThread});
   const { subplebbitAddress, threadCid } = useParams();
-  const handleClickForm = useClickForm();
   const subplebbit = useSubplebbit({subplebbitAddress: comment.subplebbitAddress});
   const selectedAddress = subplebbit.address;
 
@@ -631,7 +635,65 @@ const Thread = () => {
                             setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid);
                             }} title="Reply to this post">{comment.shortCid}</button>
                         </span>&nbsp;&nbsp;
-                        <button className="post-menu-button" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>▶</button>
+                        <PostMenu 
+                              key={`pmb-${index}`} 
+                              title="Post menu"
+                              ref={el => threadMenuRefs.current[comment.cid] = el}
+                              className='post-menu-button' 
+                              rotated={rotatedStates[comment.cid]}
+                              onClick={() => {
+                                const rect = threadMenuRefs.current[comment.cid].getBoundingClientRect();
+                                const menu = document.querySelector(`.post-menu-thread-${comment.cid}`);
+                                menu.style.top = `calc(${rect.top}px + 17px)`;
+                                menu.style.left = `${rect.left}px`;
+                              
+                                setRotatedStates(prevState => ({
+                                  ...prevState,
+                                  [comment.cid]: !prevState[comment.cid]
+                                }));
+                              }}                              
+                            >
+                              ▶
+                            </PostMenu>
+                            <div id="post-menu" className={`post-menu-thread post-menu-thread-${comment.cid}`}
+                              style={{ display: rotatedStates[comment.cid] ? 'block' : 'none' }}>
+                              <ul>
+                                <li>Edit post</li>
+                                <li>Hide thread</li>
+                                {(commentMediaInfo && (
+                                  commentMediaInfo.type === 'image' || 
+                                  (commentMediaInfo.type === 'webpage' && 
+                                  commentMediaInfo.thumbnail))) ? ( 
+                                    <li 
+                                    onMouseOver={() => {setIsImageSearchOpen(true)}}
+                                    onMouseLeave={() => {setIsImageSearchOpen(false)}}>
+                                      Image search »
+                                      <ul className="dropdown-menu"
+                                        style={{display: isImageSearchOpen ? 'block': 'none'}}>
+                                        <li>
+                                          <a 
+                                          href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
+                                          target="_blank" rel="noreferrer"
+                                          >Google</a>
+                                        </li>
+                                        <li>
+                                          <a
+                                          href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
+                                          target="_blank" rel="noreferrer"
+                                          >Yandex</a>
+                                        </li>
+                                        <li>
+                                          <a
+                                          href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
+                                          target="_blank" rel="noreferrer"
+                                          >SauceNAO</a>
+                                        </li>
+                                      </ul>
+                                    </li>
+                                  ) : null
+                                }
+                              </ul>
+                            </div>
                         <div id="backlink-id" className="backlink">
                           {comment?.replies?.pages?.topAll.comments
                             .sort((a, b) => a.timestamp - b.timestamp)
@@ -716,7 +778,64 @@ const Thread = () => {
                                 <span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span>
                               )}
                             </span>&nbsp;
-                            <button key={`pmb-${index}`} className="post-menu-button" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>▶</button>
+                            <PostMenu 
+                              key={`pmb-${index}`} 
+                              title="Post menu"
+                              ref={el => replyMenuRefs.current[reply.cid] = el}
+                              className='post-menu-button' 
+                              rotated={rotatedStates[reply.cid]}
+                              onClick={() => {
+                                const rect = replyMenuRefs.current[reply.cid].getBoundingClientRect();
+                                const menu = document.querySelector(`.post-menu-reply-${reply.cid}`);
+                                menu.style.top = `calc(${rect.top}px + 17px)`;
+                                menu.style.left = `${rect.left}px`;
+                              
+                                setRotatedStates(prevState => ({
+                                  ...prevState,
+                                  [reply.cid]: !prevState[reply.cid]
+                                }));
+                              }}                              
+                            >
+                              ▶
+                            </PostMenu>
+                              <div id="post-menu" className={`post-menu-reply post-menu-reply-${reply.cid}`}
+                              style={{ display: rotatedStates[reply.cid] ? 'block' : 'none' }}>
+                                <ul>
+                                  <li>Edit post</li>
+                                  <li>Hide post</li>
+                                  {(replyMediaInfo && (
+                                    replyMediaInfo.type === 'image' || 
+                                    (replyMediaInfo.type === 'webpage' && 
+                                    replyMediaInfo.thumbnail))) ? ( 
+                                    <li 
+                                    onMouseOver={() => {setIsImageSearchOpen(true)}}
+                                    onMouseLeave={() => {setIsImageSearchOpen(false)}}>
+                                      Image search »
+                                      <ul className="dropdown-menu"
+                                        style={{display: isImageSearchOpen ? 'block': 'none'}}>
+                                        <li>
+                                          <a 
+                                          href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
+                                          target="_blank" rel="noreferrer"
+                                          >Google</a>
+                                        </li>
+                                        <li>
+                                          <a
+                                          href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
+                                          target="_blank" rel="noreferrer"
+                                          >Yandex</a>
+                                        </li>
+                                        <li>
+                                          <a
+                                          href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
+                                          target="_blank" rel="noreferrer"
+                                          >SauceNAO</a>
+                                        </li>
+                                      </ul>
+                                    </li>
+                                    ) : null}
+                                </ul>
+                              </div>
                             <div id="backlink-id" className="backlink">
                               {reply.replies?.pages?.topAll.comments
                                 .sort((a, b) => a.timestamp - b.timestamp)