Development

src/components/account-bar/account-bar.module.css

@@ -8,7 +8,7 @@
   background-color: var(--background-secondary);
   padding: 4px;
   line-height: 12px;
-  z-index: 5;
+  z-index: 8;
 }
 
 .user a {

src/components/challenge-modal/challenge-modal.tsx

@@ -66,14 +66,14 @@ const Challenge = ({ challenge, closeModal }: ChallengeProps) => {
       <div className={styles.challengeFooter}>
         <div className={styles.counter}>{t('challenge_counter', { index: currentChallengeIndex + 1, total: challenges?.length })}</div>
         <span className={styles.buttons}>
+          {!challenges[currentChallengeIndex + 1] && <button onClick={onSubmit}>{t('submit')}</button>}
           <button onClick={closeModal}>{t('cancel')}</button>
           {challenges.length > 1 && (
             <button disabled={!challenges[currentChallengeIndex - 1]} onClick={() => setCurrentChallengeIndex((prev) => prev - 1)}>
               {t('previous')}
             </button>
           )}
           {challenges[currentChallengeIndex + 1] && <button onClick={() => setCurrentChallengeIndex((prev) => prev + 1)}>{t('next')}</button>}
-          {!challenges[currentChallengeIndex + 1] && <button onClick={onSubmit}>{t('submit')}</button>}
         </span>
       </div>
     </div>

src/components/header/header.tsx

@@ -183,12 +183,26 @@ const AuthorHeaderTabs = () => {
   );
 };
 
+const InboxHeaderTabs = () => {
+  return (
+    <>
+      <li>
+        <Link to={'/inbox'} className={styles.selected}>
+          inbox
+        </Link>
+      </li>
+      {/* TODO: add tabs for messaging when available in the API */}
+    </>
+  );
+};
+
 const HeaderTabs = () => {
   const params = useParams();
   const location = useLocation();
   const isAllPage = isAllView(location.pathname);
   const isAuthorPage = isAuthorView(location.pathname);
   const isHomePage = isHomeView(location.pathname, params);
+  const isInboxPage = isInboxView(location.pathname);
   const isPendingPage = isPendingView(location.pathname, params);
   const isPostPage = isPostView(location.pathname, params);
   const isProfilePage = isProfileView(location.pathname);
@@ -203,6 +217,8 @@ const HeaderTabs = () => {
     return <AuthorHeaderTabs />;
   } else if (isPendingPage) {
     return <span className={styles.pageName}>pending</span>;
+  } else if (isInboxPage) {
+    return <InboxHeaderTabs />;
   }
   return null;
 };
@@ -243,7 +259,7 @@ const HeaderTitle = ({ title, shortAddress }: { title: string; shortAddress: str
   } else if (isAuthorPage) {
     return authorTitle;
   } else if (isInboxPage) {
-    return 'inbox';
+    return 'message';
   }
   return null;
 };

src/components/post/comment-tools/comment-tools.tsx

@@ -1,11 +1,12 @@
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Author, useAccount, useComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import styles from './comment-tools.module.css';
 import HideMenu from './hide-menu';
 import ModTools from './mod-menu';
 import ShareMenu from './share-menu';
 import { FailedLabel, PendingLabel, SpoilerLabel } from '../label';
+import { isInboxView } from '../../../lib/utils/view-utils';
 
 interface CommentToolsProps {
   author?: Author;
@@ -115,9 +116,10 @@ const CommentTools = ({
   const authorRole = useSubplebbit({ subplebbitAddress })?.roles?.[account?.author?.address]?.role;
   const isMod = authorRole === 'admin' || authorRole === 'owner' || authorRole === 'moderator';
   hasLabel = spoiler || (cid === undefined && !isReply);
+  const isInboxPage = isInboxView(useLocation().pathname);
 
   return (
-    <ul className={`${styles.buttons} ${isReply ? styles.buttonsReply : ''} ${hasLabel ? styles.buttonsLabel : ''}`}>
+    <ul className={`${styles.buttons} ${isReply && !isInboxPage ? styles.buttonsReply : ''} ${hasLabel ? styles.buttonsLabel : ''}`}>
       {hasLabel && <CommentToolsLabel cid={cid} failed={failed} isReply={isReply} spoiler={spoiler} subplebbitAddress={subplebbitAddress} />}
       {isReply ? (
         isSingleReply ? (

src/components/post/comment-tools/share-menu/share-menu.module.css

@@ -28,4 +28,9 @@
 
 .menuItem:hover {
   background-color: var(--background-primary);
-}
+}
+
+.text {
+  color: var(--text) !important;
+  padding: 2px 3px 1px 3px;
+}

src/components/post/comment-tools/share-menu/share-menu.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
 import styles from './share-menu.module.css';
@@ -9,6 +9,28 @@ type ShareMenuProps = {
   subplebbitAddress: string;
 };
 
+const ShareButton = ({ cid, subplebbitAddress }: ShareMenuProps) => {
+  const [hasShared, setHasShared] = useState(false);
+
+  useEffect(() => {
+    if (hasShared) {
+      setTimeout(() => setHasShared(false), 2000);
+    }
+  }, [hasShared]);
+
+  return (
+    <div
+      className={`${!hasShared ? styles.menuItem : styles.text}`}
+      onClick={() => {
+        setHasShared(true);
+        copyShareLinkToClipboard(subplebbitAddress, cid);
+      }}
+    >
+      {hasShared ? 'link copied' : 'copy link'}
+    </div>
+  );
+};
+
 const ShareMenu = ({ cid, subplebbitAddress }: ShareMenuProps) => {
   const { t } = useTranslation();
   const [isShareMenuOpen, setIsShareMenuOpen] = useState(false);
@@ -23,28 +45,19 @@ const ShareMenu = ({ cid, subplebbitAddress }: ShareMenuProps) => {
   const click = useClick(context);
   const dismiss = useDismiss(context);
   const role = useRole(context);
-  const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);
+  const { getFloatingProps } = useInteractions([click, dismiss, role]);
   const headingId = useId();
 
   return (
     <>
-      <li className={styles.button} ref={refs.setReference} {...getReferenceProps()}>
-        <span onClick={() => setIsShareMenuOpen(!isShareMenuOpen)}>{t('share')}</span>
+      <li className={styles.button} ref={refs.setReference}>
+        <span onClick={() => cid && setIsShareMenuOpen(!isShareMenuOpen)}>{t('share')}</span>
       </li>
       {isShareMenuOpen && (
         <FloatingFocusManager context={context} modal={false}>
           <div className={styles.modal} ref={refs.setFloating} style={floatingStyles} aria-labelledby={headingId} {...getFloatingProps()}>
             <div className={styles.modMenu}>
-              <div className={styles.menuItem}>
-                <span
-                  onClick={() => {
-                    copyShareLinkToClipboard(subplebbitAddress, cid);
-                    setIsShareMenuOpen(false);
-                  }}
-                >
-                  copy link
-                </span>
-              </div>
+              <ShareButton cid={cid} subplebbitAddress={subplebbitAddress} />
               <div className={styles.menuItem}>
                 <a href={`https://plebchan.eth.limo/#/p/${subplebbitAddress}/c/${cid}`} target='_blank' rel='noopener noreferrer'>
                   view on plebchan

src/components/post/post.tsx

@@ -22,12 +22,13 @@ interface PostAuthorProps {
   authorRole: string;
   cid: string;
   displayName: string;
+  index?: number;
   shortAddress: string;
   shortAuthorAddress: string | undefined;
   authorAddressChanged: boolean;
 }
 
-const PostAuthor = ({ authorAddress, authorRole, cid, displayName, shortAddress, shortAuthorAddress, authorAddressChanged }: PostAuthorProps) => {
+const PostAuthor = ({ authorAddress, authorRole, cid, displayName, index, shortAddress, shortAuthorAddress, authorAddressChanged }: PostAuthorProps) => {
   const isAuthorOwner = authorRole === 'owner';
   const isAuthorAdmin = authorRole === 'admin';
   const isAuthorModerator = authorRole === 'moderator';
@@ -37,11 +38,11 @@ const PostAuthor = ({ authorAddress, authorRole, cid, displayName, shortAddress,
   return (
     <>
       {displayName && (
-        <Link to={`/u/${authorAddress}/c/${cid}`} className={`${styles.displayName} ${moderatorClass}`}>
+        <Link to={cid ? `/u/${authorAddress}/c/${cid}` : `/profile/${index}`} className={`${styles.displayName} ${moderatorClass}`}>
           {displayName}{' '}
         </Link>
       )}
-      <Link className={`${styles.authorAddressWrapper} ${moderatorClass}`} to={`/u/${authorAddress}/c/${cid}`}>
+      <Link className={`${styles.authorAddressWrapper} ${moderatorClass}`} to={cid ? `/u/${authorAddress}/c/${cid}` : `/profile/${index}`}>
         <span className={styles.authorAddressHidden}>u/{shortAddress || shortAuthorAddress}</span>
         <span className={`${styles.authorAddressVisible} ${authorAddressChanged && styles.authorAddressChanged}`}>u/{shortAuthorAddress}</span>
       </Link>
@@ -138,7 +139,7 @@ const Post = ({ post = {}, index }: PostProps) => {
                     {postTitle}
                   </a>
                 ) : (
-                  <Link className={linkClass} to={`/p/${subplebbitAddress}/c/${cid}`}>
+                  <Link className={linkClass} to={cid ? `/p/${subplebbitAddress}/c/${cid}` : `/profile/${post?.index}`}>
                     {postTitle}
                   </Link>
                 )}
@@ -175,6 +176,7 @@ const Post = ({ post = {}, index }: PostProps) => {
                   authorRole={authorRole}
                   cid={cid}
                   displayName={displayName}
+                  index={post?.index}
                   shortAddress={shortAddress}
                   shortAuthorAddress={shortAuthorAddress}
                   authorAddressChanged={authorAddressChanged}

src/components/reply-form/reply-form.module.css

@@ -57,12 +57,18 @@
   text-transform: lowercase;
 }
 
-.options {
+.optionsButton {
   font-size: smaller;
   float: right;
   margin-top: 5px;
   margin-left: 10px;
   margin-right: 5px;
   color: var(--text-primary);
   cursor: pointer;
+}
+
+.options {
+  font-size: 12px;
+  padding-bottom: 2px;
+  padding-top: 2px;
 }

src/components/reply-form/reply-form.tsx

@@ -74,14 +74,16 @@ const ReplyForm = ({ cid, isReplyingToReply, hideReplyForm }: ReplyFormProps) =>
   return (
     <div className={mdContainerClass}>
       <div className={styles.md}>
-        <span className={urlClass}>
-          media url: <input className={`${styles.url} ${urlClass}`} ref={urlRef} onChange={(e) => setContent.link(e.target.value)} />
-        </span>
-        <span className={`${styles.spoiler} ${spoilerClass}`}>
-          <label>
-            {t('spoiler')}: <input type='checkbox' className={styles.checkbox} ref={spoilerRef} onChange={(e) => setContent.spoiler(e.target.checked)} />
-          </label>
-        </span>
+        <div className={styles.options}>
+          <span className={urlClass}>
+            media url: <input className={`${styles.url} ${urlClass}`} ref={urlRef} onChange={(e) => setContent.link(e.target.value)} />
+          </span>
+          <span className={`${styles.spoiler} ${spoilerClass}`}>
+            <label>
+              {t('spoiler')}: <input type='checkbox' className={styles.checkbox} ref={spoilerRef} onChange={(e) => setContent.spoiler(e.target.checked)} />
+            </label>
+          </span>
+        </div>
         <textarea className={styles.textarea} ref={textRef} onChange={(e) => setContent.content(e.target.value)} />
       </div>
       <div className={styles.bottomArea}>
@@ -93,7 +95,7 @@ const ReplyForm = ({ cid, isReplyingToReply, hideReplyForm }: ReplyFormProps) =>
             {t('cancel')}
           </button>
         )}
-        <span className={styles.options} onClick={() => setShowOptions(!showOptions)}>
+        <span className={styles.optionsButton} onClick={() => setShowOptions(!showOptions)}>
           {showOptions ? t('hide_options') : t('options')}
         </span>
       </div>

src/components/reply/reply.module.css

@@ -14,11 +14,11 @@
 
 .unreadNotification {
   background-color: var(--gray-overlay);
-  border: 1px solid var(--gray-border);
+  border: 1px solid var(--gray-overlay-border);
+  margin-left: 30px;
+  margin-right: 15px;
   padding: 6px;
-  padding: 10px 5px;
-  margin-bottom: 10px;
-  margin-top: 2px;
+  margin-bottom: 5px;
 }
 
 .midcol {
@@ -184,4 +184,44 @@
 
 .parentSubplebbit {
   color: var(--text-primary)
+}
+
+.inboxParentLinkSubject {
+  color: var(--text);
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.inboxParentLink {
+  font-weight: normal;
+  font-style: italic;
+  margin-left: 10px;
+  font-size: 12px;
+  color: var(--link);
+  outline: none;
+  overflow: hidden;
+  unicode-bidi: isolate;
+}
+
+.inboxParentLinkWrapper {
+  margin-left: 7px;
+}
+
+.inboxParentInfo {
+  color: var(--green);
+  font-weight: 700;
+}
+
+.inboxParentInfo a {
+  color: var(--text-primary);
+}
+
+.inboxParentInfoButton {
+  cursor: pointer;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.addMargin {
+  margin-left: 29px;
 }