Merge pull request #413 from plebbit/development

Development

src/app.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { Outlet, Route, Routes, useLocation, useParams } from 'react-router-dom';
 import { isAllView, isSubscriptionsView } from './lib/utils/view-utils';
 import useIsMobile from './hooks/use-is-mobile';
@@ -16,6 +17,7 @@ import SubplebbitStats from './components/subplebbit-stats';
 import TopBar from './components/topbar';
 import { timeFilterNames } from './hooks/use-time-filter';
 import useTheme from './hooks/use-theme';
+import useInitialTheme from './hooks/use-initial-theme';
 
 const BoardLayout = () => {
   const { accountCommentIndex, subplebbitAddress, timeFilterName } = useParams();
@@ -68,6 +70,12 @@ const GlobalLayout = () => {
 };
 
 const App = () => {
+  const initialTheme = useInitialTheme();
+
+  useEffect(() => {
+    document.body.classList.add(initialTheme);
+  }, [initialTheme]);
+
   return (
     <div className={styles.app}>
       <Routes>

src/components/board-buttons/board-buttons.tsx

@@ -118,12 +118,11 @@ const ImageSizeOptions = () => {
 
 const ShowOPCommentOption = () => {
   const { showOPComment, setShowOPComment } = useCatalogStyleStore();
-  const { showTextOnlyThreads } = useCatalogFiltersStore();
 
   return (
     <>
       <span>Show OP Comment:</span>&nbsp;
-      <select value={showOPComment ? 'On' : 'Off'} onChange={(e) => setShowOPComment(e.target.value === 'On')} disabled={showTextOnlyThreads}>
+      <select value={showOPComment ? 'On' : 'Off'} onChange={(e) => setShowOPComment(e.target.value === 'On')}>
         <option value='Off'>Off</option>
         <option value='On'>On</option>
       </select>

src/components/catalog-row/catalog-row.module.css

@@ -31,18 +31,6 @@
   display: inline-block;
 }
 
-.spoilerThumbnail {
-  width: var(--maxWidth);
-  height: var(--maxHeight);
-  display: inline-block;
-  background-color: black;
-  color: white !important;
-  display: flex;
-  cursor: pointer;
-  justify-content: center;
-  align-items: center;
-}
-
 .mediaPaddingWrapper {
   padding-bottom: 5px;
   display: inline-flex;

src/components/catalog-row/catalog-row.tsx

@@ -197,6 +197,8 @@ const CatalogPost = ({ post }: { post: Comment }) => {
     '--maxHeight': maxHeight,
   } as React.CSSProperties;
 
+  const isTextOnlyThread = !hasThumbnail || isRules;
+
   return (
     <>
       <div className={`${styles.post} ${imageSize === 'Large' ? styles.large : ''}`} style={CSSProperties}>
@@ -221,9 +223,7 @@ const CatalogPost = ({ post }: { post: Comment }) => {
               >
                 {threadIcons}
                 {spoiler ? (
-                  <span className={styles.spoilerThumbnail}>
-                    <span className={styles.spoilerText}>{t('spoiler')}</span>
-                  </span>
+                  <img src='/assets/spoiler.png' alt='' />
                 ) : (
                   <CatalogPostMedia commentMediaInfo={commentMediaInfo} isOutOfFeed={isDescription || isRules} linkWidth={linkWidth} linkHeight={linkHeight} />
                 )}
@@ -244,7 +244,7 @@ const CatalogPost = ({ post }: { post: Comment }) => {
               <PostMenuDesktop post={post} />
             </span>
           </div>
-          {showOPComment && (hasThumbnail ? postContent : <Link to={postLink}>{postContent}</Link>)}
+          {(showOPComment || isTextOnlyThread) && (hasThumbnail ? postContent : <Link to={postLink}>{postContent}</Link>)}
         </div>
       </div>
       {hoveredCid === cid &&

src/components/comment-media/comment-media.module.css

@@ -22,14 +22,7 @@
 }
 
 .spoiler {
-  display: inline-block;
   margin: 3px 20px 5px 20px;
-  background-color: black;
-  color: white;
-  display: flex;
-  cursor: pointer;
-  justify-content: center;
-  align-items: center;
 }
 
 @media (max-width: 640px) {
@@ -39,6 +32,10 @@
     margin: 3px 10px 5px 5px;
     display: inline-block;
   }
+
+  .spoiler {
+    margin: 3px 10px 5px 5px;
+  }
 }
 
 .thumbnailSmall {

src/components/comment-media/comment-media.tsx

@@ -7,6 +7,7 @@ import { getHostname } from '../../lib/utils/url-utils';
 import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
 import useIsMobile from '../../hooks/use-is-mobile';
 import Embed, { canEmbed } from '../embed';
+import _ from 'lodash';
 
 interface MediaProps {
   commentMediaInfo?: CommentMediaInfo;
@@ -20,7 +21,6 @@ interface MediaProps {
 }
 
 const Thumbnail = ({ commentMediaInfo, isFloatingEmbed, post, setShowThumbnail }: MediaProps) => {
-  const { t } = useTranslation();
   const { deleted, linkHeight, linkWidth, parentCid, removed, spoiler } = post || {};
   const { isDescription, isRules } = post || {}; // custom properties, not from api
   const isOutOfFeed = isDescription || isRules || isFloatingEmbed; // virtuoso wrapper unneeded
@@ -81,9 +81,7 @@ const Thumbnail = ({ commentMediaInfo, isFloatingEmbed, post, setShowThumbnail }
   return hasError || isDeleted ? (
     <img className={styles.fileDeleted} src='/assets/filedeleted-res.gif' alt='File deleted' />
   ) : spoiler ? (
-    <span className={styles.spoiler} style={{ width: maxThumbnailSize, height: maxThumbnailSize }} onClick={() => setShowThumbnail(false)}>
-      <span className={styles.spoilerText}>[{t('view_spoiler')}]</span>
-    </span>
+    <img className={styles.spoiler} src='/assets/spoiler.png' alt='' onClick={() => setShowThumbnail(false)} />
   ) : isOutOfFeed ? (
     <span className={`${isFloatingEmbed ? styles.floatingEmbed : styles.subplebbitAvatar}`}>{thumbnailComponent}</span>
   ) : isMobile || isReply ? (
@@ -154,7 +152,7 @@ const CommentMedia = ({ commentMediaInfo, isFloatingEmbed, post, showThumbnail,
     <span className={styles.content}>
       <span className={`${showThumbnail ? styles.show : styles.hide} ${styles.thumbnail}`}>
         {url && <Thumbnail commentMediaInfo={commentMediaInfo} isFloatingEmbed={isFloatingEmbed} post={post} setShowThumbnail={setShowThumbnail} />}
-        {isMobile && type && <div className={styles.fileInfo}>{getDisplayMediaInfoType(type, t)}</div>}
+        {isMobile && type && <div className={styles.fileInfo}>{`${post?.spoiler && `${t('spoiler')} - `} ${getDisplayMediaInfoType(type, t)}`}</div>}
       </span>
       {!showThumbnail && <Media commentMediaInfo={commentMediaInfo} isReply={post?.parentCid} setShowThumbnail={setShowThumbnail} />}
     </span>

src/components/post-desktop/post-desktop.tsx

@@ -22,6 +22,7 @@ import ReplyQuotePreview from '../reply-quote-preview';
 import { PostProps } from '../../views/post/post';
 import Timestamp from '../timestamp';
 import _ from 'lodash';
+import { getFormattedDate } from '../../lib/utils/time-utils';
 
 const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
   const { t } = useTranslation();
@@ -116,10 +117,11 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
 
 const PostMedia = ({ post }: PostProps) => {
   const { t } = useTranslation();
+  const { link, spoiler } = post || {};
   const commentMediaInfo = getCommentMediaInfo(post);
   const { type, url } = commentMediaInfo || {};
   const embedUrl = url && new URL(url);
-  const hasThumbnail = getHasThumbnail(commentMediaInfo, post?.link);
+  const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
   const [showThumbnail, setShowThumbnail] = useState(true);
 
   return (
@@ -127,7 +129,7 @@ const PostMedia = ({ post }: PostProps) => {
       <div className={styles.fileText}>
         {t('link')}:{' '}
         <a href={url} target='_blank' rel='noopener noreferrer'>
-          {url && url.length > 30 ? url.slice(0, 30) + '...' : url}
+          {spoiler ? _.capitalize(t('spoiler')) : url && url.length > 30 ? url.slice(0, 30) + '...' : url}
         </a>{' '}
         ({type && _.lowerCase(getDisplayMediaInfoType(type, t))})
         {!showThumbnail && (type === 'iframe' || type === 'video' || type === 'audio') && (
@@ -161,11 +163,13 @@ const PostMedia = ({ post }: PostProps) => {
 };
 
 const PostMessage = ({ post }: PostProps) => {
-  const { cid, content, deleted, parentCid, postCid, reason, removed, spoiler, state, subplebbitAddress } = post || {};
+  const { cid, deleted, edit, original, parentCid, postCid, reason, removed, spoiler, state, subplebbitAddress } = post || {};
   const { t } = useTranslation();
   const params = useParams();
   const location = useLocation();
   const isInPostView = isPostPageView(location.pathname, params);
+  const [content, setContent] = useState(post?.content);
+  const [showOriginal, setShowOriginal] = useState(false);
 
   const displayContent = content && !isInPostView && content.length > 1000 ? content?.slice(0, 1000) + '(...)' : content;
 
@@ -188,7 +192,25 @@ const PostMessage = ({ post }: PostProps) => {
       ) : deleted ? (
         <span className={styles.deletedContent}>{t('user_deleted_this_post')}</span>
       ) : (
-        <Markdown content={displayContent} spoiler={spoiler} />
+        <>
+          <Markdown content={displayContent} spoiler={spoiler} />
+          {edit && original?.content !== post?.content && (
+            <span className={styles.editedInfo}>
+              <br />
+              (Edited at {getFormattedDate(edit?.timestamp)},{' '}
+              <span
+                className={styles.showOriginal}
+                onClick={() => {
+                  setContent(showOriginal ? post?.content : original?.content);
+                  setShowOriginal(!showOriginal);
+                }}
+              >
+                show {showOriginal ? 'edited' : 'original'}
+              </span>
+              )
+            </span>
+          )}
+        </>
       )}
       {(removed || deleted) && reason && (
         <span>

src/components/post-mobile/post-mobile.tsx

@@ -5,6 +5,7 @@ import { Comment, useAccount, useComment } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import styles from '../../views/post/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';
 import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
 import useHide from '../../hooks/use-hide';
@@ -118,7 +119,9 @@ const ReplyBacklinks = ({ post }: PostProps) => {
 
 const PostMessageMobile = ({ post }: PostProps) => {
   const { t } = useTranslation();
-  const { cid, content, deleted, parentCid, postCid, reason, removed, spoiler, state, subplebbitAddress } = post || {};
+  const { cid, deleted, edit, original, parentCid, postCid, reason, removed, spoiler, state, subplebbitAddress } = post || {};
+  const [content, setContent] = useState(post?.content);
+  const [showOriginal, setShowOriginal] = useState(false);
 
   const params = useParams();
   const location = useLocation();
@@ -146,7 +149,25 @@ const PostMessageMobile = ({ post }: PostProps) => {
         ) : deleted ? (
           <span className={styles.removedContent}>{t('user_deleted_this_post')}</span>
         ) : (
-          <Markdown content={displayContent} spoiler={spoiler} />
+          <>
+            <Markdown content={displayContent} spoiler={spoiler} />
+            {edit && original?.content !== post?.content && (
+              <span className={styles.editedInfo}>
+                <br />
+                (Edited at {getFormattedDate(edit?.timestamp)},{' '}
+                <span
+                  className={styles.showOriginal}
+                  onClick={() => {
+                    setContent(showOriginal ? post?.content : original?.content);
+                    setShowOriginal(!showOriginal);
+                  }}
+                >
+                  show {showOriginal ? 'edited' : 'original'}
+                </span>
+                )
+              </span>
+            )}
+          </>
         )}
         {(removed || deleted) && reason && (
           <span>

src/components/settings-modal/plebbit-options/plebbit-options.module.css

@@ -3,7 +3,7 @@
 }
 
 .category {
-  margin-bottom: 10px;
+  margin-bottom: 15px;
 }
 
 .settingTitle {
@@ -69,8 +69,8 @@
 .settingTip {
   display: block;
   font-size: 0.85em;
-  margin: 5px 0 0 0;
-  padding-left: 2px;
+  margin: 10px 0 0 0;
+  padding-left: 1px;
 }
 
 .plebbitRPCSettings button {

src/components/settings-modal/plebbit-options/plebbit-options.tsx

@@ -219,7 +219,9 @@ const PlebbitOptions = () => {
         </span>
       </div>
       <div className={styles.category}>
-        <span className={styles.categoryTitle}>blockchain providers:</span>
+        <span className={styles.categoryTitle} style={{ marginBottom: '-5px' }}>
+          blockchain providers:
+        </span>
         <span className={styles.categorySettings}>
           <BlockchainProvidersSettings ethRpcRef={ethRpcRef} solRpcRef={solRpcRef} maticRpcRef={maticRpcRef} avaxRpcRef={avaxRpcRef} />
         </span>

src/hooks/use-initial-theme.ts

@@ -0,0 +1,37 @@
+import { useLocation, useParams } from 'react-router-dom';
+import useThemeStore from '../stores/use-theme-store';
+import useDefaultSubplebbits from './use-default-subplebbits';
+import { isAllView, isHomeView, isNotFoundView, isSubscriptionsView } from '../lib/utils/view-utils';
+import { nsfwTags } from '../views/home/home';
+
+const useInitialTheme = () => {
+  const location = useLocation();
+  const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
+  const getTheme = useThemeStore((state) => state.getTheme);
+  const subplebbits = useDefaultSubplebbits();
+  const params = useParams();
+  const isInHomeView = isHomeView(location.pathname);
+  const isInNotFoundView = isNotFoundView(location.pathname, params);
+  const isInAllView = isAllView(location.pathname, params);
+  const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
+
+  if (isInAllView || isInSubscriptionsView) {
+    const userTheme = getTheme(isInAllView ? 'all' : 'subscriptions');
+    return userTheme || 'yotsuba-b';
+  } else if (isInHomeView || isInNotFoundView) {
+    return 'yotsuba';
+  } else if (subplebbitAddress) {
+    const userTheme = getTheme(subplebbitAddress);
+    if (userTheme) {
+      return userTheme;
+    }
+    const subplebbit = subplebbits.find((s) => s.address === subplebbitAddress);
+    if (subplebbit && subplebbit.tags && subplebbit.tags.some((tag) => nsfwTags.includes(tag))) {
+      return 'yotsuba';
+    }
+    return 'yotsuba-b';
+  }
+  return 'yotsuba';
+};
+
+export default useInitialTheme;

src/hooks/use-theme.ts

@@ -1,50 +1,49 @@
-import { useState, useMemo } from 'react';
+import { useState, useEffect } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
+import { isAllView, isSubscriptionsView } from '../lib/utils/view-utils';
 import useThemeStore from '../stores/use-theme-store';
-import useDefaultSubplebbits from './use-default-subplebbits';
-import { isAllView, isHomeView, isNotFoundView, isSubscriptionsView } from '../lib/utils/view-utils';
-import { nsfwTags } from '../views/home/home';
+import determineInitialTheme from './use-initial-theme';
 
 const useTheme = (): [string, (theme: string) => void] => {
   const location = useLocation();
-  const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
-  const getTheme = useThemeStore((state) => state.getTheme);
-  const setThemeStore = useThemeStore((state) => state.setTheme);
-  const subplebbits = useDefaultSubplebbits();
   const params = useParams();
-  const isInHomeView = isHomeView(location.pathname);
-  const isInNotFoundView = isNotFoundView(location.pathname, params);
-  const isInAllView = isAllView(location.pathname, params);
-  const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
+  const setThemeStore = useThemeStore((state) => state.setTheme);
+  const loadThemes = useThemeStore((state) => state.loadThemes);
 
-  const initialTheme = useMemo(() => {
-    if (isInAllView || isInSubscriptionsView) {
-      const userTheme = getTheme(isInAllView ? 'all' : 'subscriptions');
-      return userTheme || 'yotsuba-b';
-    } else if (isInHomeView || isInNotFoundView) {
-      return 'yotsuba';
-    } else if (subplebbitAddress) {
-      const userTheme = getTheme(subplebbitAddress);
-      if (userTheme) {
-        return userTheme;
-      }
-      const subplebbit = subplebbits.find((s) => s.address === subplebbitAddress);
-      if (subplebbit && subplebbit.tags && subplebbit.tags.some((tag) => nsfwTags.includes(tag))) {
-        return 'yotsuba';
-      }
-      return 'yotsuba-b';
-    }
-    return 'yotsuba';
-  }, [subplebbitAddress, subplebbits, getTheme, isInAllView, isInHomeView, isInNotFoundView, isInSubscriptionsView]);
+  const [themesLoaded, setThemesLoaded] = useState(false);
+
+  useEffect(() => {
+    const load = async () => {
+      await loadThemes();
+      setThemesLoaded(true);
+    };
+    load();
+  }, [loadThemes]);
+
+  const initialTheme = determineInitialTheme();
 
   const [theme, setLocalTheme] = useState(initialTheme);
 
-  useMemo(() => {
-    document.body.classList.remove('yotsuba', 'yotsuba-b', 'futaba', 'burichan', 'tomorrow', 'photon');
+  useEffect(() => {
     document.body.classList.add(initialTheme);
+    return () => {
+      document.body.classList.remove(initialTheme);
+    };
   }, [initialTheme]);
 
+  useEffect(() => {
+    if (themesLoaded) {
+      document.body.classList.remove('yotsuba', 'yotsuba-b', 'futaba', 'burichan', 'tomorrow', 'photon');
+      document.body.classList.add(initialTheme);
+      setLocalTheme(initialTheme);
+    }
+  }, [initialTheme, themesLoaded]);
+
   const setSubplebbitTheme = (newTheme: string) => {
+    const subplebbitAddress = params?.subplebbitAddress;
+    const isInAllView = isAllView(location.pathname, params);
+    const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
+
     if (subplebbitAddress) {
       setThemeStore(subplebbitAddress, newTheme);
     } else if (isInAllView) {

src/themes.css

@@ -354,6 +354,7 @@
   --post-mobile-link-border-top: 1px solid #b7c5d9;
   --post-mobile-link-info-text-color: #34345c;
   --post-mobile-abbr-text-color: #707070;
+  --post-mobile-file-info-text-color: #707070;
   --post-mobile-abbr-font-size: 10pt;
   --post-mobile-content-font-size: 11pt;
 
@@ -530,6 +531,7 @@
   --post-mobile-link-border-top: 1px solid #d9bfb7;
   --post-mobile-link-info-text-color: #800;
   --post-mobile-abbr-text-color: #707070;
+  --post-mobile-file-info-text-color: #707070;
   --post-mobile-abbr-font-size: 12pt;
   --post-mobile-content-font-size: 13pt;
 
@@ -714,6 +716,7 @@
   --post-mobile-link-border-top: 1px solid #b7c5d9;
   --post-mobile-link-info-text-color: #34345c;
   --post-mobile-abbr-text-color: #707070;
+  --post-mobile-file-info-text-color: #707070;
   --post-mobile-abbr-font-size: 12pt;
   --post-mobile-content-font-size: 13pt;
 
@@ -910,6 +913,7 @@
   --post-mobile-link-border-bottom: 1px solid #2D2F33;
   --post-mobile-link-info-text-color: #707070;
   --post-mobile-abbr-text-color: #707070;
+  --post-mobile-file-info-text-color: #707070;
   --post-mobile-abbr-font-size: 10pt;
   --post-mobile-content-font-size: 11pt;
 
@@ -1071,6 +1075,7 @@
   --post-mobile-link-border-bottom: 1px solid #ccc;
   --post-mobile-link-info-text-color: #333;
   --post-mobile-abbr-text-color: #333;
+  --post-mobile-file-info-text-color: #333;
   --post-mobile-abbr-font-size: 10pt;
   --post-mobile-content-font-size: 11pt;
 

src/views/catalog/catalog.tsx

@@ -26,6 +26,7 @@ const useFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolean, subp
   const { t } = useTranslation();
   const { address, createdAt, description, rules, shortAddress, suggested, title } = subplebbit || {};
   const { avatarUrl } = suggested || {};
+  const { showTextOnlyThreads } = useCatalogFiltersStore();
 
   const location = useLocation();
   const isInAllView = isAllView(location.pathname, useParams());
@@ -35,11 +36,13 @@ const useFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolean, subp
     if (!isFeedLoaded) {
       return []; // prevent rules and description from appearing while feed is loading
     }
+
     if (!description && !rules && !isInAllView) {
       return feed;
     }
+
     const _feed = [...feed];
-    if ((description && description.length > 0) || isInAllView) {
+    if ((description && description.length > 0 && (showTextOnlyThreads || (!showTextOnlyThreads && suggested?.avatarUrl))) || isInAllView) {
       _feed.unshift({
         isDescription: true,
         subplebbitAddress: address,
@@ -52,7 +55,7 @@ const useFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolean, subp
         locked: true,
       });
     }
-    if (rules && rules.length > 0) {
+    if (rules && rules.length > 0 && showTextOnlyThreads) {
       _feed.unshift({
         isRules: true,
         subplebbitAddress: address,

src/views/post/post.module.css

@@ -462,6 +462,21 @@
   padding: 1.5px 0;
 }
 
+.editedInfo {
+  color: var(--post-mobile-abbr-text-color);
+}
+
+.showOriginal {
+  color: var(--post-link-text-color);
+  text-decoration: var(--post-content-link-text-decoration);
+}
+
+.showOriginal:hover {
+  cursor: pointer;
+  color: var(--post-link-text-color-hover);
+  text-decoration: var(--post-content-link-text-decoration-hover);
+}
+
 @media (max-width: 640px) {
   .replyQuotePreview {
     margin-right: 10px;