feat: add post-menu-mobile

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}>

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>
   );
 };

src/components/post/post-desktop/post-menu-desktop/index.ts

@@ -0,0 +1 @@
+export { default } from './post-menu-desktop';

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 {

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;

src/components/post/post-menu/index.ts

@@ -1 +0,0 @@
-export { default } from './post-menu';

src/components/post/post-mobile/post-menu-mobile/index.ts

@@ -0,0 +1 @@
+export { default } from './post-menu-mobile';

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);
+}

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;

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'))}

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;