Merge pull request #254 from plebbit/development

Development
plebbit · Feb 19, 2024 · 1f33f3f · 1f33f3f
2 parents b9a275c + 52654ff
commit 1f33f3f
Show file tree

Hide file tree

Showing 24 changed files with 157 additions and 93 deletions.
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "i18next-browser-languagedetector": "7.1.0",
     "i18next-http-backend": "2.2.2",
     "json-stringify-pretty-compact": "4.0.0",
+    "lodash": "4.17.21",
     "memoizee": "0.4.15",
     "prettier": "3.0.3",
     "react": "18.2.0",

diff --git a/src/components/post/comment-tools/comment-tools.tsx b/src/components/post/comment-tools/comment-tools.tsx
@@ -39,10 +39,10 @@ const PostTools = ({ author, cid, hasLabel, index, isAuthor, isMod, subplebbitAd
   // show gray dotted border around last clicked post
   const handlePostClick = () => {
     if (cid) {
-      if (localStorage.getItem('lastClickedPost') === cid) {
-        localStorage.removeItem('lastClickedPost');
+      if (sessionStorage.getItem('lastClickedPost') === cid) {
+        sessionStorage.removeItem('lastClickedPost');
       } else {
-        localStorage.setItem('lastClickedPost', cid);
+        sessionStorage.setItem('lastClickedPost', cid);
       }
     }
   };

diff --git a/src/components/post/expando/expando.module.css b/src/components/post/expando/expando.module.css
@@ -68,6 +68,7 @@
   color: white;
   text-transform: lowercase;
   position: absolute;
+  font-size: 12px;
   z-index: 1;
   top: 50%;
   left: 50%;

diff --git a/src/components/post/expando/expando.tsx b/src/components/post/expando/expando.tsx
@@ -24,16 +24,13 @@ const Expando = ({ commentMediaInfo, content, expanded, link, reason, removed, s
   const [showSpoiler, setShowSpoiler] = useState(false);
 
   let mediaComponent = null;
-  let noExpandButton = false;
 
   if (commentMediaInfo?.type === 'image') {
     mediaComponent = <img src={commentMediaInfo.url} alt='' />;
-    noExpandButton = true;
   } else if (commentMediaInfo?.type === 'video' && expanded) {
     mediaComponent = <video src={commentMediaInfo.url} controls />;
   } else if (commentMediaInfo?.type === 'webpage' && commentMediaInfo?.thumbnail) {
     mediaComponent = <img src={commentMediaInfo.thumbnail} alt='' />;
-    noExpandButton = true;
   } else if (commentMediaInfo?.type === 'audio' && expanded) {
     mediaComponent = <audio src={commentMediaInfo.url} controls />;
   } else if (commentMediaInfo?.type === 'iframe' && expanded) {
@@ -47,13 +44,18 @@ const Expando = ({ commentMediaInfo, content, expanded, link, reason, removed, s
         spoiler && !showSpoiler && setShowSpoiler(true);
       }}
     >
-      <div className={spoiler && !showSpoiler ? styles.hideSpoiler : ''} />
+      {spoiler && !showSpoiler && (
+        <>
+          <div className={styles.hideSpoiler} />
+          <span className={styles.showSpoilerButton}>{t('view_spoiler')}</span>
+        </>
+      )}
       {link && !removed && (
         <div className={styles.mediaPreview}>
           <Link
             to={link}
             onClick={(e) => {
-              if (e.button === 0 && noExpandButton) {
+              if (e.button === 0) {
                 e.preventDefault();
                 toggleExpanded && toggleExpanded();
               }
@@ -66,7 +68,6 @@ const Expando = ({ commentMediaInfo, content, expanded, link, reason, removed, s
       {content && showContent && (
         <div className={styles.usertext}>
           <div className={styles.markdown}>
-            {spoiler && !showSpoiler && <div className={styles.showSpoilerButton}>{t('view_spoiler')}</div>}
             <Markdown content={content} />
             {reason && (
               <div className={styles.modReason}>

diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css
@@ -242,7 +242,6 @@
 
 .subscribeButton {
   position: absolute;
-  bottom: -1px;
   border: none;
   background: none;
   background-repeat: no-repeat;
@@ -267,4 +266,8 @@
 
 .greenSubplebbitAddress {
   color: var(--green-bright) !important;
-}
+}
+
+.subscribeButtonWrapper:hover + .subplebbit {
+  color: var(--green-bright) !important;
+}
diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx
@@ -148,17 +148,16 @@ const Post = ({ index, post = {} }: PostProps) => {
   const { blocked, unblock } = useBlock({ address: cid });
 
   const [hasClickedSubscribe, setHasClickedSubscribe] = useState(false);
-  const [isHoveringOnSubscribe, setIsHoveringOnSubscribe] = useState(false);
   const { subscribe, subscribed } = useSubscribe({ subplebbitAddress });
 
   // show gray dotted border around last clicked post
-  const isLastClicked = localStorage.getItem('lastClickedPost') === cid;
+  const isLastClicked = sessionStorage.getItem('lastClickedPost') === cid;
   const handlePostClick = () => {
     if (cid) {
-      if (localStorage.getItem('lastClickedPost') === cid) {
-        localStorage.removeItem('lastClickedPost');
+      if (sessionStorage.getItem('lastClickedPost') === cid) {
+        sessionStorage.removeItem('lastClickedPost');
       } else {
-        localStorage.setItem('lastClickedPost', cid);
+        sessionStorage.setItem('lastClickedPost', cid);
       }
     }
   };
@@ -253,25 +252,22 @@ const Post = ({ index, post = {} }: PostProps) => {
                   {!isInSubplebbitView && (
                     <>
                        {t('post_to')}{' '}
-                      {isInAllView && (!subscribed || (subscribed && hasClickedSubscribe)) && (
-                        <span className={styles.subscribeButtonWrapper}>
-                          <button
-                            className={`${styles.subscribeButton} ${subscribed ? styles.buttonSubscribed : styles.buttonSubscribe}`}
-                            onClick={() => {
-                              subscribe();
-                              setHasClickedSubscribe(true);
-                            }}
-                            onMouseOver={() => setIsHoveringOnSubscribe(true)}
-                            onMouseLeave={() => setIsHoveringOnSubscribe(false)}
-                          />
-                        </span>
-                      )}
-                      <Link
-                        className={`${styles.subplebbit} ${isHoveringOnSubscribe || (subscribed && hasClickedSubscribe) ? styles.greenSubplebbitAddress : ''}`}
-                        to={`/p/${subplebbitAddress}`}
-                      >
-                        p/{subplebbit?.shortAddress || subplebbitAddress}
-                      </Link>
+                      <span className={styles.subscribeHoverGroup}>
+                        {isInAllView && (!subscribed || (subscribed && hasClickedSubscribe)) && (
+                          <span className={styles.subscribeButtonWrapper}>
+                            <button
+                              className={`${styles.subscribeButton} ${subscribed ? styles.buttonSubscribed : styles.buttonSubscribe}`}
+                              onClick={() => {
+                                subscribe();
+                                setHasClickedSubscribe(true);
+                              }}
+                            />
+                          </span>
+                        )}
+                        <Link className={`${styles.subplebbit} ${subscribed && hasClickedSubscribe ? styles.greenSubplebbitAddress : ''}`} to={`/p/${subplebbitAddress}`}>
+                          p/{subplebbit?.shortAddress || subplebbitAddress}
+                        </Link>
+                      </span>
                     </>
                   )}
                   {pinned && <span className={styles.announcement}> - {t('announcement')}</span>}

diff --git a/src/components/topbar/topbar.module.css b/src/components/topbar/topbar.module.css
@@ -52,12 +52,17 @@
   background-color: var(--background-primary);
 }
 
-.editSubscriptions {
+.defaultCommunities {
   font-style: italic;
   text-transform: uppercase;
   border-top: 1px dotted var(--text-primary);
 }
 
+.editSubscriptions {
+  font-style: italic;
+  text-transform: uppercase;
+}
+
 .dropChoices a {
   text-decoration: none;
   color: var(--text-primary);

diff --git a/src/components/topbar/topbar.tsx b/src/components/topbar/topbar.tsx
@@ -114,7 +114,7 @@ const TopBar = () => {
                 {getShortAddress(subscription)}
               </Link>
             ))}
-            <Link to='/communities/vote' className={`${styles.dropdownItem} ${styles.editSubscriptions}`}>
+            <Link to='/communities/vote' className={`${styles.dropdownItem} ${styles.defaultCommunities}`}>
               {t('default_communities')}
             </Link>
             <Link to='/communities/subscriber' className={`${styles.dropdownItem} ${styles.editSubscriptions}`}>

diff --git a/src/lib/utils/challenge-utils.ts b/src/lib/utils/challenge-utils.ts
@@ -132,7 +132,7 @@ export type OptionInput = {
 
 export type Exclude = {
   postScore?: number;
-  postReply?: number;
+  replyScore?: number;
   firstCommentTimestamp?: number;
   challenges?: number[];
   post?: boolean;

diff --git a/src/modules.d.ts b/src/modules.d.ts
@@ -4,3 +4,5 @@ declare module '*.module.css' {
 }
 
 declare module 'ext-name';
+
+declare module 'lodash';
diff --git a/src/views/all/all.tsx b/src/views/all/all.tsx
@@ -10,6 +10,7 @@ import Sidebar from '../../components/sidebar';
 import { useDefaultSubplebbitAddresses } from '../../lib/utils/addresses-utils';
 import useFeedStateString from '../../hooks/use-feed-state-string';
 import useTimeFilter, { TimeFilterKey } from '../../hooks/use-time-filter';
+import _ from 'lodash';
 
 const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
 
@@ -40,9 +41,10 @@ const All = () => {
     </div>
   );
 
+  const documentTitle = _.capitalize(t('all')) + ' - Seedit';
   useEffect(() => {
-    document.title = `p/all - seedit`;
-  }, [t]);
+    document.title = documentTitle;
+  }, [documentTitle]);
 
   const Footer = () => {
     let footerContent;

diff --git a/src/views/author/author.tsx b/src/views/author/author.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
-import { useAuthorComments } from '@plebbit/plebbit-react-hooks';
+import { useAuthorComments, useAuthor } from '@plebbit/plebbit-react-hooks';
 import { StateSnapshot, Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 import { isAuthorCommentsView, isAuthorSubmittedView } from '../../lib/utils/view-utils';
 import { useTranslation } from 'react-i18next';
@@ -17,6 +17,7 @@ const Author = () => {
   const location = useLocation();
   const navigate = useNavigate();
   const { authorAddress, commentCid, sortType } = useParams();
+  const author = useAuthor({ commentCid, authorAddress });
   const params = useParams();
   const isInAuthorCommentsView = isAuthorCommentsView(location.pathname, params);
   const isInAuthorSubmittedView = isAuthorSubmittedView(location.pathname, params);
@@ -64,6 +65,11 @@ const Author = () => {
     }
   }, [authorAddress, lastCommentCid, commentCid, navigate]);
 
+  const profileTitle = author?.author?.displayName ? `${author?.author?.displayName} (u/${author?.author?.shortAddress})` : `u/${author?.author?.shortAddress}`;
+  useEffect(() => {
+    document.title = profileTitle + ' - Seedit';
+  }, [t, profileTitle]);
+
   return (
     <div className={styles.content}>
       <div className={isMobile ? styles.sidebarMobile : styles.sidebarDesktop}>

diff --git a/src/views/home/home.tsx b/src/views/home/home.tsx
@@ -56,7 +56,7 @@ const Home = () => {
   );
 
   useEffect(() => {
-    document.title = `${t('home')} - seedit`;
+    document.title = `Seedit`;
   }, [t]);
 
   const Footer = () => {

diff --git a/src/views/inbox/inbox.tsx b/src/views/inbox/inbox.tsx
@@ -1,11 +1,12 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { StateSnapshot, Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 import { useAccount, useNotifications } from '@plebbit/plebbit-react-hooks';
 import styles from './inbox.module.css';
 import Reply from '../../components/reply/reply';
 import { isInboxCommentRepliesView, isInboxPostRepliesView, isInboxUnreadView } from '../../lib/utils/view-utils';
 import { useTranslation } from 'react-i18next';
+import _ from 'lodash';
 
 const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
 
@@ -82,6 +83,22 @@ const Inbox = () => {
     return () => window.removeEventListener('scroll', setLastVirtuosoState);
   }, [unreadNotificationCount]);
 
+  const documentTitle = useMemo(() => {
+    let title = _.startCase(t('inbox'));
+    if (isInInboxUnreadView) {
+      title += ` - ${_.startCase(t('unread'))}`;
+    } else if (isInInboxCommentRepliesView) {
+      title += ` - ${_.startCase(t('comment_replies'))}`;
+    } else if (isInInboxPostRepliesView) {
+      title += ` - ${_.startCase(t('post_replies'))}`;
+    }
+    return `${title} - Seedit`;
+  }, [isInInboxCommentRepliesView, isInInboxPostRepliesView, isInInboxUnreadView, t]);
+
+  useEffect(() => {
+    document.title = documentTitle;
+  }, [documentTitle]);
+
   return (
     <div className={styles.content}>
       <InboxTabs />

diff --git a/src/views/post-page/post-page.tsx b/src/views/post-page/post-page.tsx
@@ -144,7 +144,7 @@ const PostPage = () => {
   const postTitle = post.title?.slice(0, 40) || post?.content?.slice(0, 40);
   const subplebbitTitle = subplebbit?.title || subplebbit?.shortAddress;
   useEffect(() => {
-    document.title = `${postTitle || ''}${postTitle && subplebbitTitle ? ' - ' : ''}${subplebbitTitle || ''}${postTitle || subplebbitTitle ? ' - seedit' : 'seedit'}`;
+    document.title = `${postTitle || ''}${postTitle && subplebbitTitle ? ' - ' : ''}${subplebbitTitle || ''}${postTitle || subplebbitTitle ? ' - Seedit' : 'Seedit'}`;
   }, [postTitle, subplebbitTitle]);
 
   useEffect(() => {

diff --git a/src/views/profile/profile.tsx b/src/views/profile/profile.tsx
@@ -141,6 +141,11 @@ const Profile = () => {
     return () => window.removeEventListener('scroll', setLastVirtuosoState);
   }, [account?.shortAddress, params.sortType]);
 
+  const profileTitle = account?.author?.displayName ? `${account?.author?.displayName} (u/${account?.author?.shortAddress})` : `u/${account?.author?.shortAddress}`;
+  useEffect(() => {
+    document.title = profileTitle + ' - Seedit';
+  }, [t, profileTitle]);
+
   return (
     <div className={styles.content}>
       <div className={isMobile ? styles.sidebarMobile : styles.sidebarDesktop}>

diff --git a/src/views/settings/address-settings/address-settings.tsx b/src/views/settings/address-settings/address-settings.tsx
@@ -132,7 +132,7 @@ const AddressSettings = () => {
   return (
     <div className={styles.addressSettings}>
       <div className={styles.copyAddressSetting}>
-        <Trans i18nKey='copy_full_address' components={{ 1: <button onClick={() => navigator.clipboard.writeText(account?.signer?.address)} /> }} />
+        <button onClick={() => navigator.clipboard.writeText(account?.signer?.address)}>{t('copy')}</button> plebbit-author-address
       </div>
       <div className={styles.cryptoAddressSetting}>
         <span className={styles.settingTitle}>{t('crypto_address')}</span>

diff --git a/src/views/settings/settings.tsx b/src/views/settings/settings.tsx
@@ -6,6 +6,7 @@ import AccountSettings from './account-settings';
 import AddressSettings from './address-settings';
 import useTheme from '../../hooks/use-theme';
 import packageJson from '../../../package.json';
+import _ from 'lodash';
 
 const commitRef = process.env.REACT_APP_COMMIT_REF;
 const isElectron = window.isElectron === true;
@@ -173,9 +174,10 @@ const Settings = () => {
     window.scrollTo(0, 0);
   }, []);
 
+  const documentTitle = `${_.startCase(t('preferences'))} - Seedit`;
   useEffect(() => {
-    document.title = `${t('preferences')} - seedit`;
-  }, [t]);
+    document.title = documentTitle;
+  }, [documentTitle]);
 
   return (
     <div className={styles.content}>

diff --git a/src/views/submit/submit.module.css b/src/views/submit/submit.module.css
@@ -6,6 +6,7 @@
 h1 {
   font-size: 18px;
   font-weight: normal;
+  text-transform: lowercase;
   margin: 10px 0 !important;
 }
 

diff --git a/src/views/submit/submit.tsx b/src/views/submit/submit.tsx
@@ -141,14 +141,6 @@ const Submit = () => {
   const { subscriptions } = account || {};
   const defaultSubplebbitAddresses = useDefaultSubplebbitAddresses();
 
-  useEffect(() => {
-    window.scrollTo(0, 0);
-  }, []);
-
-  useEffect(() => {
-    document.title = t('submit_to_string', { string: subplebbit?.title || subplebbit?.shortAddress || 'seedit', interpolation: { escapeValue: false } });
-  }, [subplebbit, t]);
-
   const onPublish = () => {
     if (!titleRef.current?.value) {
       alert(`Missing title`);
@@ -272,6 +264,15 @@ const Submit = () => {
     }
   }, [paramsSubplebbitAddress, setSubmitStore]);
 
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  const documentTitle = t('submit_to_string', { string: subplebbit?.title || subplebbit?.shortAddress || 'Seedit', interpolation: { escapeValue: false } });
+  useEffect(() => {
+    document.title = documentTitle;
+  }, [documentTitle]);
+
   return (
     <div className={styles.content}>
       <h1>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,3 +4,5 @@ declare module '*.module.css' {
		}

		declare module 'ext-name';

		declare module 'lodash';