refactor: rename PostPage to Post, export Post component from Post view

src/views/board/board.tsx

@@ -12,7 +12,7 @@ import useTimeFilter from '../../hooks/use-time-filter';
 import useFeedResetStore from '../../stores/use-feed-reset-store';
 import useSortingStore from '../../stores/use-sorting-store';
 import LoadingEllipsis from '../../components/loading-ellipsis';
-import Post from '../../components/post';
+import { Post } from '../post';
 import ReplyModal from '../../components/reply-modal';
 import SettingsModal from '../../components/settings-modal';
 import SubplebbitDescription from '../../components/subplebbit-description';

src/views/pending-post/pending-post.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useAccountComment } from '@plebbit/plebbit-react-hooks';
 import { isSettingsView } from '../../lib/utils/view-utils';
-import Post from '../../components/post';
+import { Post } from '../post';
 import SettingsModal from '../../components/settings-modal';
 
 const PendingPost = () => {

src/views/post-page/index.ts

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

src/views/post-page/post-page.module.css

@@ -1,4 +0,0 @@
-.content {
-  margin-bottom: 150px;
-  overflow-x: hidden;
-}

src/views/post/index.ts

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

src/views/post/post.module.css

@@ -0,0 +1,478 @@
+.content {
+  margin-bottom: 150px;
+  overflow-x: hidden;
+}
+
+.thread {
+  clear: both;
+}
+
+.hrWrapper hr {
+  margin: 0; /* margin bugs Virtuoso scrolling */
+}
+
+.postDesktop .hrWrapper {
+  padding: 0.5em 0; /* instead of using margin, wrap with padding */
+}
+
+.hideButtonWrapper {
+  height: 15px;
+  width: 18px;
+  padding-right: 5px;
+  float: left;
+}
+
+.postDesktop .hideButton {
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 18px;
+  height: 18px;
+  display: inline-block;
+  image-rendering: pixelated;
+  cursor: pointer;
+  transform: translateY(-1px);
+}
+
+.postDesktopBlocked {
+  opacity: 0.5;
+}
+
+/* clearfix to contain float elements */
+.postDesktop::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.postDesktop .hideThread {
+  background-image: var(--post-hide-button-background-image);
+}
+
+.postDesktop .unhideThread {
+  background-image: var(--post-unhide-button-background-image);
+}
+
+.postDesktop .fileText a {
+  color: var(--post-link-text-color);
+  text-decoration: var(--post-link-text-decoration);
+}
+
+.postDesktop .fileText a:hover {
+  color: var(--post-link-text-color-hover);
+  text-decoration: var(--post-link-text-decoration-hover);
+}
+
+.postDesktop .postInfo {
+  width: 100%;
+}
+
+.postDesktop .subject {
+  color: var(--post-subject-text-color);
+  font-weight: var(--post-subject-font-weight);
+}
+
+.postDesktop .name, .replyDesktop .name {
+  color: var(--post-name-text-color);
+  font-weight: var(--post-name-font-weight);
+}
+
+.postDesktop .postNumLink a, .postDesktop .postNumLink span, .replyDesktop .postNumLink a, .replyDesktop .postNumLink span {
+  color: unset;
+  text-decoration: unset;
+}
+
+.postDesktop .postNumLink a:hover, .postDesktop .postNumLink span:hover, .replyDesktop .postNumLink a:hover, .replyDesktop .postNumLink span:hover {
+  color: var(--button-desktop-text-color-hover);
+}
+
+.postDesktop .stickyIconWrapper, .replyDesktop .stickyIconWrapper {
+  padding-left: 5px;
+  padding-right: 10px;
+}
+
+.postDesktop .closedIconWrapper {
+  padding-left: 5px;
+  padding-right: 10px;
+}
+
+.postDesktop .addPaddingInBetween {
+  padding-left: 8px;
+}
+
+.stickyIconWrapper img, .closedIconWrapper img {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  image-rendering: pixelated;
+}
+
+.postDesktop .addPaddingBeforeReply {
+  padding-right: 15px;
+}
+
+.postDesktop .closeMedia {
+  color: var(--button-desktop-text-color);
+  text-decoration: underline;
+  text-transform: capitalize;
+}
+
+.postDesktop .closeMedia:hover {
+  cursor: pointer;
+  color: var(--button-desktop-text-color-hover);
+}
+
+.postDesktop .replyButton {
+  padding-left: 10px;
+}
+
+.postDesktop .replyButton a {
+  color: var(--button-desktop-text-color);
+  text-decoration: var(--button-desktop-text-decoration);
+  text-transform: capitalize;
+}
+
+.postDesktop .replyButton a:hover {
+  cursor: pointer;
+  color: var(--button-desktop-text-color-hover);
+}
+
+.postDesktop .spacer {
+  width: 100%;
+  padding: 5px;
+}
+
+.postDesktop .postMessage, .replyDesktop .postMessage {
+  padding: 1em 40px;
+}
+
+.postDesktop .abbr {
+  color: var(--post-mobile-abbr-text-color);
+  font-size: var(--post-mobile-abbr-font-size);
+}
+
+.postDesktop .abbr a {
+  color: var(--post-link-text-color);
+  text-decoration: var(--post-content-link-text-decoration);
+}
+
+.postDesktop .abbr a:hover {
+  color: var(--post-link-text-color-hover);
+  text-decoration: var(--post-content-link-text-decoration-hover);
+}
+
+.postDesktop .summary {
+  padding-top: 10px;
+  padding-left: 23px;
+  position: relative;
+  color: var(--post-mobile-abbr-text-color);
+}
+
+.stateString {
+  color: var(--post-mobile-abbr-text-color);
+}
+
+.postDesktop .summary .expandButtonWrapper {
+  position: absolute;
+  top: 8px;
+  left: 2px;
+}
+
+.postDesktop .summary .expandButton {
+  background-image: var(--post-replies-expand-button-background-image);
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 18px;
+  height: 18px;
+  display: inline-block;
+  image-rendering: pixelated;
+  cursor: pointer;
+}
+
+.postDesktop .summary a {
+  color: var(--post-link-text-color);
+  text-decoration: var(--post-content-link-text-decoration);
+}
+
+.postDesktop .summary a:hover {
+  color: var(--post-link-text-color-hover);
+  text-decoration: var(--post-content-link-text-decoration-hover);
+}
+
+/* clearfix to contain float elements */
+.postMobile .postOp::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.postMobile hr {
+  padding-bottom: 30px;
+}
+
+.postMobile .thread {
+  border-top: none;
+  margin: 0;
+  clear: both;
+  padding-bottom: 30px;
+}
+
+.quotePreview {
+  padding: 3px;
+}
+
+.postMobile .postContainer {
+  background-color: var(--post-mobile-background-color);
+}
+
+.postMobile .postOp {
+  display: inline;
+}
+
+.postMobile .postInfo {
+  overflow: hidden;
+  border-bottom: var(--post-mobile-info-border-bottom);
+  border-top: var(--post-mobile-info-border-top);
+  background-color: var(--post-mobile-info-background-color);
+  color: var(--post-mobile-info-text-color);
+  padding: 5px;
+  clear: left;
+}
+
+.postMobile .nameBlock {
+  clear: none;
+}
+
+.postMobile .nameBlock .name {
+  color: var(--post-mobile-name-text-color);
+  font-weight: var(--post-mobile-name-font-weight);
+}
+
+.postMobile .stickyIconWrapper {
+  padding: 0 5px;
+}
+
+.postMobile .closedIconWrapper {
+  padding: 0 5px;
+}
+
+.postMobile .addPaddingInBetween {
+  padding: 0 13px;
+}
+
+.postMobile .nameBlock .subject {
+  color: var(--post-mobile-subject-text-color);
+  font-weight: var(--post-mobile-subject-font-weight);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
+
+.postMobile .dateTimePostNum {
+  display: block;
+  text-align: right;
+}
+
+.postMobile .postNumLink a {
+  color: unset;
+  text-decoration: unset;
+}
+
+.postMobile .postMessage {
+  padding: 10px;
+  font-size: var(--post-mobile-content-font-size);
+}
+
+.postMobile .postLink {
+  clear: both;
+  background-color: var(--post-mobile-link-background-color);
+  border-top: var(--post-mobile-link-border-top);
+  border-bottom: var(--post-mobile-link-border-bottom);
+  padding: 5px;
+  overflow: hidden;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.postMobile .postLink .info {
+  color: var(--post-mobile-link-info-text-color);
+}
+
+.postMobile .abbr {
+  color: var(--post-mobile-abbr-text-color);
+  font-size: var(--post-mobile-abbr-font-size);
+}
+
+.postMobile .abbr a {
+  color: var(--post-link-text-color);
+  text-decoration: var(--post-content-link-text-decoration);
+
+}
+
+.postMobile .abbr a:hover {
+  color: var(--post-link-text-color-hover);
+  text-decoration: var(--post-content-link-text-decoration-hover);
+}
+
+.replyDesktop {
+  padding-top: 4px;
+}
+
+.replyDesktop .sideArrows {
+  color: var(--side-arrows-color);
+  float: left;
+  padding: 0 2px;
+}
+
+.replyDesktop .reply {
+  background-color: var(--reply-desktop-background-color);
+  border: var(--reply-desktop-border);
+  border-left: none;
+  border-top: none;
+  display: table;
+  padding: 0 2px 2px 2px;
+}
+
+.replyDesktop .postInfo {
+  padding: 3px 3px 0 0;
+}
+
+.quoteLink {
+  color: var(--post-quotelink-text-color);
+  text-decoration: var(--post-quotelink-text-decoration);
+}
+
+.quoteLink:hover {
+  color: var(--post-quotelink-text-color-hover);
+  text-decoration: var(--post-quotelink-text-decoration-hover);
+  cursor: pointer;
+}
+
+.replyMobile {
+  padding-top: 7px;
+}
+
+.replyMobile .replyContainer {
+  background-color: var(--post-mobile-background-color);
+  border-bottom: var(--post-mobile-border-bottom);
+}
+
+/* clearfix to contain float elements */
+.replyMobile .replyContainer::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.replyMobile .postInfo {
+  padding: 5px;
+  border-top: var(--post-mobile-info-border-top);
+  border-bottom: var(--post-mobile-info-border-bottom);
+  background-color: var(--post-mobile-info-background-color);
+  color: var(--post-mobile-info-text-color);
+}
+
+.replyMobile .nameBlock {
+  display: inline;
+  float: left;
+}
+
+.replyMobile .dateTimePostNum {
+  float: right;
+  text-align: right;
+}
+
+.capcodeMod {
+  color: var(--post-capcode-mod-text-color) !important;
+  text-transform: capitalize;
+}
+
+.pendingCid {
+  color: red !important;
+  font-weight: 700 !important;
+}
+
+.replyToPost {
+  cursor: pointer;
+}
+
+.removedContent, .deletedContent {
+  font-weight: 700;
+  color: red;
+}
+
+.removedContent {
+  text-transform: uppercase;
+}
+
+.backlink, .backlinkHash {
+  font-size: 0.8em;
+}
+
+.backlink {
+  padding-left: 5px;
+}
+
+.backlink, .backlinkHash {
+  color: var(--post-backlink-text-color);
+  text-decoration: var(--post-backlink-text-decoration);
+}
+
+.backlink:hover, .backlinkHash:hover {
+  color: var(--post-backlink-text-color-hover);
+  text-decoration: var(--post-backlink-text-decoration-hover);
+  cursor: pointer;
+}
+
+.mobileReplyBacklinks {
+  padding: 0 0;
+  padding-bottom: 3px;
+  line-height: 2;
+  background-color: var(--reply-backlink-mobile-background-color);
+  border-top: var(--reply-backlink-mobile-border-top);
+}
+
+.highlight {
+  background: var(--reply-highlight-background-color) !important;
+}
+
+.replyQuotePreview {
+  background:  var(--quote-preview-background);
+  border: var(--quote-preview-border);
+  border-right: var(--quote-preview-border-right);
+  border-bottom: var(--quote-preview-border-bottom);
+}
+
+.postDesktop .replyQuotePreviewSpacer {
+  padding: 1.5px 0;
+}
+
+@media (max-width: 640px) {
+  .replyQuotePreview {
+    margin-right: 10px;
+  }
+
+  .postDesktop {
+    display: none;
+  }
+
+  .replyDesktop {
+    display: none;
+  }
+}
+
+@media (min-width: 640px) {
+  .replyQuotePreview {
+    padding-right: 7px;
+    padding-left: 2px;
+  }
+
+  .postMobile {
+    display: none;
+  }
+
+  .replyMobile {
+    display: none;
+  }
+}

src/views/post/post.tsx

@@ -1,15 +1,45 @@
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Comment, useComment, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { Comment, Role, useComment, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import { useLocation, useParams } from 'react-router-dom';
-import styles from './post-page.module.css';
 import { isDescriptionView, isRulesView, isSettingsView } from '../../lib/utils/view-utils';
+import useIsMobile from '../../hooks/use-is-mobile';
 import useReplyModal from '../../hooks/use-reply-modal';
-import Post from '../../components/post';
+import PostDesktop from '../../components/post-desktop';
+import PostMobile from '../../components/post-mobile';
 import ReplyModal from '../../components/reply-modal';
 import SettingsModal from '../../components/settings-modal';
 import SubplebbitDescription from '../../components/subplebbit-description';
 import SubplebbitRules from '../../components/subplebbit-rules';
+import styles from './post.module.css';
+
+export interface PostProps {
+  index?: number;
+  isHidden?: boolean;
+  post?: any;
+  reply?: any;
+  roles?: Role[];
+  showAllReplies?: boolean;
+  showReplies?: boolean;
+  openReplyModal?: (cid: string) => void;
+}
+
+export const Post = ({ post, showAllReplies = false, showReplies = true, openReplyModal }: PostProps) => {
+  const subplebbit = useSubplebbit({ subplebbitAddress: post?.subplebbitAddress });
+  const isMobile = useIsMobile();
+
+  return (
+    <div className={styles.thread}>
+      <div className={styles.postContainer}>
+        {isMobile ? (
+          <PostMobile post={post} roles={subplebbit?.roles} showAllReplies={showAllReplies} showReplies={showReplies} openReplyModal={openReplyModal} />
+        ) : (
+          <PostDesktop post={post} roles={subplebbit?.roles} showAllReplies={showAllReplies} showReplies={showReplies} openReplyModal={openReplyModal} />
+        )}
+      </div>
+    </div>
+  );
+};
 
 const PostPage = () => {
   const { t } = useTranslation();