Merge pull request #358 from plebbit/development

Development

public/translations/ar/default.json

@@ -72,5 +72,8 @@
   "interests": "اهتمامات",
   "random": "عشوائي",
   "international": "دولية",
-  "projects": "مشاريع"
+  "projects": "مشاريع",
+  "challenge_counter": "{{index}} من {{total}}",
+  "embed": "تضمين",
+  "remove": "إزالة"
 }

public/translations/bn/default.json

@@ -72,5 +72,8 @@
   "interests": "আগ্রহসমূহ",
   "random": "এলোমেলো",
   "international": "আন্তর্জাতিক",
-  "projects": "প্রকল্পসমূহ"
+  "projects": "প্রকল্পসমূহ",
+  "challenge_counter": "{{index}} থেকে {{total}}",
+  "embed": "এম্বেড",
+  "remove": "অপসারণ"
 }

public/translations/cs/default.json

@@ -72,5 +72,8 @@
   "interests": "zájmy",
   "random": "náhodný",
   "international": "mezinárodní",
-  "projects": "projekty"
+  "projects": "projekty",
+  "challenge_counter": "{{index}} z {{total}}",
+  "embed": "vložit",
+  "remove": "odstranit"
 }

public/translations/da/default.json

@@ -72,5 +72,8 @@
   "interests": "interesser",
   "random": "tilfældig",
   "international": "internationale",
-  "projects": "projekter"
+  "projects": "projekter",
+  "challenge_counter": "{{index}} af {{total}}",
+  "embed": "integrer",
+  "remove": "fjern"
 }

public/translations/de/default.json

@@ -72,5 +72,8 @@
   "interests": "Interessen",
   "random": "zufällig",
   "international": "internationale",
-  "projects": "Projekte"
+  "projects": "Projekte",
+  "challenge_counter": "{{index}} von {{total}}",
+  "embed": "einbetten",
+  "remove": "entfernen"
 }

public/translations/el/default.json

@@ -72,5 +72,8 @@
   "interests": "ενδιαφέροντα",
   "random": "τυχαίος",
   "international": "διεθνείς",
-  "projects": "έργα"
+  "projects": "έργα",
+  "challenge_counter": "{{index}} από {{total}}",
+  "embed": "ενσωμάτωση",
+  "remove": "αφαίρεση"
 }

public/translations/en/default.json

@@ -72,5 +72,8 @@
   "interests": "interests",
   "random": "random",
   "international": "international",
-  "projects": "projects"
+  "projects": "projects",
+  "challenge_counter": "{{index}} of {{total}}",
+  "embed": "embed",
+  "remove": "remove"
 }

public/translations/es/default.json

@@ -72,5 +72,8 @@
   "interests": "intereses",
   "random": "aleatorio",
   "international": "internacionales",
-  "projects": "proyectos"
+  "projects": "proyectos",
+  "challenge_counter": "{{index}} de {{total}}",
+  "embed": "incrustar",
+  "remove": "eliminar"
 }

public/translations/fa/default.json

@@ -72,5 +72,8 @@
   "interests": "علایق",
   "random": "تصادفی",
   "international": "بین‌المللی",
-  "projects": "پروژه‌ها"
+  "projects": "پروژه‌ها",
+  "challenge_counter": "{{index}} از {{total}}",
+  "embed": "جاسازی",
+  "remove": "حذف"
 }

public/translations/fi/default.json

@@ -72,5 +72,8 @@
   "interests": "kiinnostuksen kohteet",
   "random": "satunnainen",
   "international": "kansainväliset",
-  "projects": "projektit"
+  "projects": "projektit",
+  "challenge_counter": "{{index}} / {{total}}",
+  "embed": "upota",
+  "remove": "poista"
 }

public/translations/fil/default.json

@@ -72,5 +72,8 @@
   "interests": "mga interes",
   "random": "random",
   "international": "internasyonal",
-  "projects": "mga proyekto"
+  "projects": "mga proyekto",
+  "challenge_counter": "{{index}} ng {{total}}",
+  "embed": "i-embed",
+  "remove": "alisin"
 }

public/translations/fr/default.json

@@ -72,5 +72,8 @@
   "interests": "intérêts",
   "random": "aléatoire",
   "international": "internationaux",
-  "projects": "projets"
+  "projects": "projets",
+  "challenge_counter": "{{index}} sur {{total}}",
+  "embed": "intégrer",
+  "remove": "supprimer"
 }

public/translations/he/default.json

@@ -72,5 +72,8 @@
   "interests": "עניינים",
   "random": "אקראי",
   "international": "בינלאומיים",
-  "projects": "פרויקטים"
+  "projects": "פרויקטים",
+  "challenge_counter": "{{index}} מתוך {{total}}",
+  "embed": "הטמע",
+  "remove": "הסר"
 }

public/translations/hi/default.json

@@ -72,5 +72,8 @@
   "interests": "रुचियाँ",
   "random": "यादृच्छिक",
   "international": "अंतरराष्ट्रीय",
-  "projects": "परियोजनाएं"
+  "projects": "परियोजनाएं",
+  "challenge_counter": "{{index}} में से {{total}}",
+  "embed": "एम्बेड",
+  "remove": "हटाएं"
 }

public/translations/hu/default.json

@@ -72,5 +72,8 @@
   "interests": "érdeklődési körök",
   "random": "véletlenszerű",
   "international": "nemzetközi",
-  "projects": "projektek"
+  "projects": "projektek",
+  "challenge_counter": "{{index}} a(z) {{total}}-ból/ből",
+  "embed": "beágyaz",
+  "remove": "eltávolít"
 }

public/translations/id/default.json

@@ -72,5 +72,8 @@
   "interests": "minat",
   "random": "acak",
   "international": "internasional",
-  "projects": "proyek"
+  "projects": "proyek",
+  "challenge_counter": "{{index}} dari {{total}}",
+  "embed": "sematkan",
+  "remove": "hapus"
 }

public/translations/it/default.json

@@ -72,5 +72,8 @@
   "interests": "interessi",
   "random": "casuale",
   "international": "internazionali",
-  "projects": "progetti"
+  "projects": "progetti",
+  "challenge_counter": "{{index}} di {{total}}",
+  "embed": "incorpora",
+  "remove": "rimuovi"
 }

public/translations/ja/default.json

@@ -72,5 +72,8 @@
   "interests": "興味",
   "random": "ランダム",
   "international": "国際的な",
-  "projects": "プロジェクト"
+  "projects": "プロジェクト",
+  "challenge_counter": "{{index}} / {{total}}",
+  "embed": "埋め込み",
+  "remove": "削除"
 }

public/translations/ko/default.json

@@ -72,5 +72,8 @@
   "interests": "관심사",
   "random": "랜덤",
   "international": "국제적인",
-  "projects": "프로젝트"
+  "projects": "프로젝트",
+  "challenge_counter": "{{index}} 중 {{total}}",
+  "embed": "임베드",
+  "remove": "제거"
 }

public/translations/mr/default.json

@@ -72,5 +72,8 @@
   "interests": "आवडी",
   "random": "यादृच्छ",
   "international": "आंतरराष्ट्रीय",
-  "projects": "प्रकल्प"
+  "projects": "प्रकल्प",
+  "challenge_counter": "{{index}} पैकी {{total}}",
+  "embed": "एम्बेड",
+  "remove": "काढा"
 }

public/translations/nl/default.json

@@ -72,5 +72,8 @@
   "interests": "interesses",
   "random": "willekeurig",
   "international": "internationale",
-  "projects": "projecten"
+  "projects": "projecten",
+  "challenge_counter": "{{index}} van {{total}}",
+  "embed": "insluiten",
+  "remove": "verwijderen"
 }

public/translations/no/default.json

@@ -72,5 +72,8 @@
   "interests": "interesser",
   "random": "tilfeldig",
   "international": "internasjonale",
-  "projects": "prosjekter"
+  "projects": "prosjekter",
+  "challenge_counter": "{{index}} av {{total}}",
+  "embed": "bygg inn",
+  "remove": "fjern"
 }

public/translations/pl/default.json

@@ -72,5 +72,8 @@
   "interests": "zainteresowania",
   "random": "losowy",
   "international": "międzynarodowe",
-  "projects": "projekty"
+  "projects": "projekty",
+  "challenge_counter": "{{index}} z {{total}}",
+  "embed": "osadź",
+  "remove": "usuń"
 }

public/translations/pt/default.json

@@ -72,5 +72,8 @@
   "interests": "interesses",
   "random": "aleatório",
   "international": "internacionais",
-  "projects": "projetos"
+  "projects": "projetos",
+  "challenge_counter": "{{index}} de {{total}}",
+  "embed": "embutir",
+  "remove": "remover"
 }

public/translations/ro/default.json

@@ -72,5 +72,8 @@
   "interests": "interese",
   "random": "aleator",
   "international": "internaționale",
-  "projects": "proiecte"
+  "projects": "proiecte",
+  "challenge_counter": "{{index}} din {{total}}",
+  "embed": "încorpora",
+  "remove": "elimina"
 }

public/translations/ru/default.json

@@ -72,5 +72,8 @@
   "interests": "интересы",
   "random": "случайный",
   "international": "международные",
-  "projects": "проекты"
+  "projects": "проекты",
+  "challenge_counter": "{{index}} из {{total}}",
+  "embed": "встроить",
+  "remove": "удалить"
 }

public/translations/sq/default.json

@@ -72,5 +72,8 @@
   "interests": "interesat",
   "random": "i rastësishëm",
   "international": "ndërkombëtare",
-  "projects": "projekte"
+  "projects": "projekte",
+  "challenge_counter": "{{index}} nga {{total}}",
+  "embed": "integro",
+  "remove": "hiq"
 }

public/translations/sv/default.json

@@ -72,5 +72,8 @@
   "interests": "intressen",
   "random": "slumpmässig",
   "international": "internationella",
-  "projects": "projekt"
+  "projects": "projekt",
+  "challenge_counter": "{{index}} av {{total}}",
+  "embed": "bädda in",
+  "remove": "ta bort"
 }

public/translations/te/default.json

@@ -72,5 +72,8 @@
   "interests": "ఆసక్తులు",
   "random": "యాదృచ్ఛిక",
   "international": "అంతర్జాతీయ",
-  "projects": "ప్రాజెక్టులు"
+  "projects": "ప్రాజెక్టులు",
+  "challenge_counter": "{{index}} లో {{total}}",
+  "embed": "ఎంబెడ్",
+  "remove": "తొలగించు"
 }

public/translations/th/default.json

@@ -72,5 +72,8 @@
   "interests": "ความสนใจ",
   "random": "สุ่ม",
   "international": "นานาชาติ",
-  "projects": "โครงการ"
+  "projects": "โครงการ",
+  "challenge_counter": "{{index}} จาก {{total}}",
+  "embed": "ฝัง",
+  "remove": "ลบ"
 }

public/translations/tr/default.json

@@ -72,5 +72,8 @@
   "interests": "ilgi alanları",
   "random": "rastgele",
   "international": "uluslararası",
-  "projects": "projeler"
+  "projects": "projeler",
+  "challenge_counter": "{{index}} / {{total}}",
+  "embed": "göm",
+  "remove": "kaldır"
 }

public/translations/uk/default.json

@@ -72,5 +72,8 @@
   "interests": "інтереси",
   "random": "випадковий",
   "international": "міжнародні",
-  "projects": "проекти"
+  "projects": "проекти",
+  "challenge_counter": "{{index}} з {{total}}",
+  "embed": "вбудувати",
+  "remove": "видалити"
 }

public/translations/ur/default.json

@@ -72,5 +72,8 @@
   "interests": "دلچسپیاں",
   "random": "بے ترتیب",
   "international": "بین الاقوامی",
-  "projects": "منصوبے"
+  "projects": "منصوبے",
+  "challenge_counter": "{{index}} میں سے {{total}}",
+  "embed": "ایمبیڈ",
+  "remove": "ہٹائیں"
 }

public/translations/vi/default.json

@@ -72,5 +72,8 @@
   "interests": "sở thích",
   "random": "ngẫu nhiên",
   "international": "quốc tế",
-  "projects": "dự án"
+  "projects": "dự án",
+  "challenge_counter": "{{index}} trong {{total}}",
+  "embed": "nhúng",
+  "remove": "xóa"
 }

public/translations/zh/default.json

@@ -72,5 +72,8 @@
   "interests": "兴趣",
   "random": "随机",
   "international": "国际的",
-  "projects": "项目"
+  "projects": "项目",
+  "challenge_counter": "{{index}} / {{total}}",
+  "embed": "嵌入",
+  "remove": "移除"
 }

src/app.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { Outlet, Route, Routes, useLocation, useParams } from 'react-router-dom';
-import { isHomeView, isNotFoundView } from './lib/utils/view-utils';
+import { isHomeView } from './lib/utils/view-utils';
 import useTheme from './hooks/use-theme';
 import styles from './app.module.css';
 import Board from './views/board';
@@ -47,16 +47,14 @@ const BoardLayout = () => {
 
 const App = () => {
   const location = useLocation();
-  const params = useParams();
   const isInHomeView = isHomeView(location.pathname);
-  const isInNotFoundPage = isNotFoundView(location.pathname, params);
   const [theme] = useTheme();
 
   useEffect(() => {
     document.body.classList.forEach((className) => document.body.classList.remove(className));
-    const classToAdd = isInHomeView || isInNotFoundPage ? 'yotsuba' : theme;
+    const classToAdd = isInHomeView ? 'yotsuba' : theme;
     document.body.classList.add(classToAdd);
-  }, [theme, isInHomeView, isInNotFoundPage]);
+  }, [theme, isInHomeView]);
 
   const globalLayout = (
     <>

src/components/markdown/markdown.module.css

@@ -19,3 +19,13 @@
 .hrWrapper hr {
   margin: 0;
 }
+
+.embedButton {
+  color: var(--button-desktop-text-color);
+  text-transform: capitalize;
+}
+
+.embedButton:hover {
+  cursor: pointer;
+  color: var(--button-desktop-text-color-hover);
+}

src/components/markdown/markdown.tsx

@@ -1,9 +1,12 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
-import styles from './markdown.module.css';
 import ReactMarkdown from 'react-markdown';
-import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
 import remarkGfm from 'remark-gfm';
 import supersub from 'remark-supersub';
+import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
+import styles from './markdown.module.css';
+import { useTranslation } from 'react-i18next';
+import { getLinkMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
+import CommentMedia from '../comment-media';
 
 interface MarkdownProps {
   content: string;
@@ -55,6 +58,9 @@ const Markdown = ({ content }: MarkdownProps) => {
 
   remarkPlugins.push([blockquoteToGreentext]);
 
+  const { t } = useTranslation();
+  const [showMedia, setShowMedia] = useState(false);
+
   return (
     <span className={styles.markdown}>
       <ReactMarkdown
@@ -71,6 +77,37 @@ const Markdown = ({ content }: MarkdownProps) => {
               <hr />
             </div>
           ),
+          a: ({ href, children }) => {
+            if (href) {
+              const linkMediaInfo = getLinkMediaInfo(href);
+              if (getHasThumbnail(linkMediaInfo, href)) {
+                return (
+                  <>
+                    <a href={href} target='_blank' rel='noopener noreferrer'>
+                      {children}
+                    </a>{' '}
+                    [
+                    <span className={styles.embedButton} onClick={() => setShowMedia(!showMedia)}>
+                      {showMedia ? t('remove') : t('embed')}
+                    </span>
+                    ]
+                    {showMedia && (
+                      <>
+                        <br />
+                        <CommentMedia isReply={false} setShowThumbnail={setShowMedia} commentMediaInfo={linkMediaInfo} showThumbnail={false} />
+                      </>
+                    )}
+                  </>
+                );
+              } else {
+                return (
+                  <a href={href} target='_blank' rel='noopener noreferrer'>
+                    {children}
+                  </a>
+                );
+              }
+            }
+          },
         }}
       />
     </span>

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

@@ -57,7 +57,6 @@
   outline: var(--post-form-field-input-outline, revert);
   background-color: var(--post-form-field-input-background-color, revert);
   color: var(--post-form-field-input-color, revert);
-  filter: var(--filter80);
   padding: 2px 4px 3px;
   font-size: 10pt;
 }

src/components/post-form/post-form.tsx

@@ -58,17 +58,30 @@ const LinkTypePreviewer = ({ link }: { link: string }) => {
   return isValidURL(link) ? mediaInfo?.type : 'Invalid URL';
 };
 
-const PostFormTable = () => {
+const PostFormTable = ({ closeForm }: { closeForm: () => void }) => {
   const { t } = useTranslation();
   const account = useAccount();
   const { displayName } = account?.author || {};
-
   const [url, setUrl] = useState('');
-
   const { title, content, link, publishCommentOptions, setSubmitStore, resetSubmitStore } = useSubmitStore();
-
   const { index, publishComment } = usePublishComment(publishCommentOptions);
 
+  const textRef = useRef<HTMLTextAreaElement>(null);
+  const urlRef = useRef<HTMLInputElement>(null);
+  const subjectRef = useRef<HTMLInputElement>(null);
+
+  const resetFields = () => {
+    if (textRef.current) {
+      textRef.current.value = '';
+    }
+    if (urlRef.current) {
+      urlRef.current.value = '';
+    }
+    if (subjectRef.current) {
+      subjectRef.current.value = '';
+    }
+  };
+
   const onPublishPost = () => {
     if (!title && !content && !link) {
       alert(`Cannot post empty comment`);
@@ -96,6 +109,7 @@ const PostFormTable = () => {
   useEffect(() => {
     if (typeof index === 'number') {
       resetSubmitStore();
+      resetFields();
       navigate(`/profile/${index}`);
     }
   }, [index, resetSubmitStore, navigate]);
@@ -106,9 +120,6 @@ const PostFormTable = () => {
   const cid = params?.commentCid as string;
   const { setContent, resetContent, replyIndex, publishReply } = useReply({ cid, subplebbitAddress });
 
-  const textRef = useRef<HTMLTextAreaElement>(null);
-  const urlRef = useRef<HTMLInputElement>(null);
-
   const onPublishReply = () => {
     const currentContent = textRef.current?.value || '';
     const currentUrl = urlRef.current?.value || '';
@@ -128,6 +139,8 @@ const PostFormTable = () => {
   useEffect(() => {
     if (typeof replyIndex === 'number') {
       resetContent();
+      resetFields();
+      closeForm();
     }
   }, [replyIndex, resetContent]);
 
@@ -152,6 +165,7 @@ const PostFormTable = () => {
             <td>
               <input
                 type='text'
+                ref={subjectRef}
                 onChange={(e) => {
                   setSubmitStore({ title: e.target.value });
                 }}
@@ -169,7 +183,8 @@ const PostFormTable = () => {
               wrap='soft'
               ref={textRef}
               onChange={(e) => {
-                isInPostPage ? setContent.content(e.target.value) : setSubmitStore({ content: e.target.value });
+                const content = e.target.value.replace(/\n/g, '\n\n');
+                isInPostPage ? setContent.content(content) : setSubmitStore({ content });
               }}
             />
           </td>
@@ -234,7 +249,7 @@ const PostForm = () => {
             ]
           </div>
         ) : (
-          <PostFormTable />
+          <PostFormTable closeForm={() => setShowForm(false)} />
         )}
       </div>
       <div className={styles.postFormMobile}>
@@ -249,7 +264,7 @@ const PostForm = () => {
             <button className={`${styles.showFormButton} button`} onClick={() => setShowForm(showForm ? false : true)}>
               {showForm ? t('close_post_form') : isInPostPage ? t('post_a_reply') : t('start_new_thread')}
             </button>
-            {showForm && <PostFormTable />}
+            {showForm && <PostFormTable closeForm={() => setShowForm(false)} />}
           </>
         )}
       </div>

src/components/post/post.module.css

@@ -77,7 +77,6 @@
 }
 
 .postDesktop .postNumLink a:hover, .postDesktop .postNumLink span:hover, .replyDesktop .postNumLink a:hover, .replyDesktop .postNumLink span:hover {
-  cursor: pointer;
   color: var(--button-desktop-text-color-hover);
 }
 

src/components/post/post.tsx

@@ -5,7 +5,7 @@ import { Role, useAccount, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
 import { getFormattedDate } from '../../lib/utils/time-utils';
-import { isPostPageView } from '../../lib/utils/view-utils';
+import { isPendingPostView, isPostPageView } from '../../lib/utils/view-utils';
 import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
 import useReplies from '../../hooks/use-replies';
 import useStateString from '../../hooks/use-state-string';
@@ -39,6 +39,7 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
   const params = useParams();
   const location = useLocation();
   const isInPostPage = isPostPageView(location.pathname, params);
+  const isPendingPostPage = isPendingPostView(location.pathname, params);
 
   const displayTitle = title && title.length > 75 ? title?.slice(0, 75) + '...' : title;
   const displayContent = content && !isInPostPage && content.length > 1000 ? content?.slice(0, 1000) + '(...)' : content;
@@ -141,7 +142,7 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
                 c/
               </Link>
               {!cid ? (
-                <span className={styles.pendingCid}>{state === 'failed' ? 'Failed' : 'Pending'}</span>
+                <span className={styles.pendingCid}>{state === 'failed' || stateString === 'Failed' ? 'Failed' : 'Pending'}</span>
               ) : (
                 <span className={styles.replyToPost} title={t('reply_to_post')} onClick={() => openReplyModal && openReplyModal(cid)}>
                   {shortCid}
@@ -186,7 +187,7 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
               <Trans i18nKey={'comment_too_long'} shouldUnescape={true} components={{ 1: <Link to={`/p/${subplebbitAddress}/c/${cid}`} /> }} />
             </span>
           )}
-          {!cid && state === 'pending' && (
+          {!cid && state === 'pending' && stateString !== 'Failed' && (
             <>
               <br />
               {loadingString}
@@ -194,7 +195,7 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
           )}
         </blockquote>
       )}
-      {!isDescription && !isRules && (replies.length > 5 || (pinned && replies.length > 0)) && !isInPostPage && (
+      {!isDescription && !isRules && !isPendingPostPage && (replies.length > 5 || (pinned && replies.length > 0)) && !isInPostPage && (
         <span className={styles.summary}>
           <span className={styles.expandButtonWrapper}>
             <span className={styles.expandButton} />
@@ -212,6 +213,7 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
         </span>
       )}
       {!(pinned && !isInPostPage) &&
+        !isPendingPostPage &&
         !isDescription &&
         !isRules &&
         replies &&
@@ -272,7 +274,7 @@ const ReplyDesktop = ({ reply, roles, openReplyModal }: PostProps) => {
                 c/
               </Link>
               {!cid ? (
-                <span className={styles.pendingCid}>{state === 'failed' ? 'Failed' : 'Pending'}</span>
+                <span className={styles.pendingCid}>{state === 'failed' || stateString === 'Failed' ? 'Failed' : 'Pending'}</span>
               ) : (
                 <span className={styles.replyToPost} title={t('reply_to_post')} onClick={() => openReplyModal && openReplyModal(cid)}>
                   {shortCid}
@@ -342,13 +344,13 @@ const ReplyDesktop = ({ reply, roles, openReplyModal }: PostProps) => {
             {isReplyingToReply && (
               <>
                 <Link to={`/p/${subplebbitAddress}/c/${parentCid}`} className={styles.quoteLink}>
-                  {`c/${Plebbit.getShortCid(parentCid)}`}
+                  {`c/${parentCid && Plebbit.getShortCid(parentCid)}`}
                 </Link>
                 <br />
               </>
             )}
             <Markdown content={content} />
-            {!cid && state === 'pending' && (
+            {!cid && state === 'pending' && stateString !== 'Failed' && (
               <>
                 <br />
                 {loadingString}
@@ -373,6 +375,7 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
   const params = useParams();
   const location = useLocation();
   const isInPostPage = isPostPageView(location.pathname, params);
+  const isPendingPostPage = isPendingPostView(location.pathname, params);
 
   const linksCount = useCountLinksInReplies(post);
   const displayTitle = title && title.length > 30 ? title?.slice(0, 30) + '(...)' : title;
@@ -436,7 +439,7 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
                       c/
                     </Link>
                     {!cid ? (
-                      <span className={styles.pendingCid}>{state === 'failed' ? 'Failed' : 'Pending'}</span>
+                      <span className={styles.pendingCid}>{state === 'failed' || stateString === 'Failed' ? 'Failed' : 'Pending'}</span>
                     ) : (
                       <span className={styles.replyToPost} title={t('reply_to_post')} onClick={() => openReplyModal && openReplyModal(cid)}>
                         {shortCid}
@@ -466,7 +469,7 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
                     <Trans i18nKey={'comment_too_long'} shouldUnescape={true} components={{ 1: <Link to={`/p/${subplebbitAddress}/c/${cid}`} /> }} />
                   </span>
                 )}
-                {!cid && state === 'pending' && (
+                {!cid && state === 'pending' && stateString !== 'Failed' && (
                   <>
                     <br />
                     {loadingString}
@@ -475,7 +478,7 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
               </blockquote>
             )}
           </div>
-          {!isInPostPage && (
+          {!isInPostPage && !isPendingPostPage && (
             <div className={styles.postLink}>
               <span className={styles.info}>
                 {replyCount > 0 && `${replyCount} Replies`}
@@ -488,6 +491,7 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
           )}
         </div>
         {!(pinned && !isInPostPage) &&
+          !isPendingPostPage &&
           !isDescription &&
           !isRules &&
           replies &&
@@ -549,7 +553,7 @@ const ReplyMobile = ({ reply, roles, openReplyModal }: PostProps) => {
                 </Link>
               </span>
               {!cid ? (
-                <span className={styles.pendingCid}>{state === 'failed' ? 'Failed' : 'Pending'}</span>
+                <span className={styles.pendingCid}>{state === 'failed' || stateString === 'Failed' ? 'Failed' : 'Pending'}</span>
               ) : (
                 <span className={styles.replyToPost} title={t('reply_to_post')} onClick={() => openReplyModal && openReplyModal(cid)}>
                   {shortCid}
@@ -572,13 +576,13 @@ const ReplyMobile = ({ reply, roles, openReplyModal }: PostProps) => {
               {isReplyingToReply && (
                 <>
                   <Link to={`/p/${subplebbitAddress}/c/${parentCid}`} className={styles.quoteLink}>
-                    {`c/${Plebbit.getShortCid(parentCid)}`}
+                    {`c/${parentCid && Plebbit.getShortCid(parentCid)}`}
                   </Link>
                   <br />
                 </>
               )}
               <Markdown content={content} />
-              {!cid && state === 'pending' && (
+              {!cid && state === 'pending' && stateString !== 'Failed' && (
                 <>
                   <br />
                   {loadingString}

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

@@ -39,18 +39,21 @@
 }
 
 .container input[type="text"], .container textarea {
-  border: var(--post-form-field-input-border, revert);
+  border: var(--reply-modal-field-input-border, revert);
   font-family: var(--post-form-field-font-family, revert);
+  appearance: var(--post-form-field-input-appearance, revert);
+  outline: var(--post-form-field-input-outline, revert);
+  background-color: var(--post-form-field-input-background-color, revert);
+  color: var(--post-form-field-input-color, revert);
   font-size: 10pt;
   outline: var(--post-form-field-input-outline, revert);
   width: 298px;
-  filter: var(--filter80);
   padding: 2px;
   margin-bottom: 1px;
 }
 
 .container input[type="text"]:focus, .container textarea:focus {
-  border: var(--post-form-field-input-focus-border, revert);
+  border: var(--reply-modal-field-input-border-focus, revert);
 }
 
 .content textarea {
@@ -63,6 +66,14 @@
   cursor: pointer;
 }
 
+.parentCid input[type="text"] {
+  margin-bottom: -1px !important;
+}
+
+.parentCid input[type="text"]:focus {
+  border: var(--reply-modal-field-input-border, revert) !important;
+}
+
 @media (max-width: 640px) {
   .container {
     position: absolute;

src/components/reply-modal/reply-modal.tsx

@@ -88,6 +88,9 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
         <div className={styles.link}>
           <input type='text' ref={urlRef} placeholder={_.capitalize(t('link'))} onChange={(e) => setContent.link(e.target.value)} />
         </div>
+        <div className={styles.parentCid}>
+          <input type='text' readOnly value={`c/${parentCid && Plebbit.getShortCid(parentCid)}`} />
+        </div>
         <div className={styles.content}>
           <textarea
             cols={48}
@@ -95,7 +98,10 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
             wrap='soft'
             ref={textRef}
             placeholder={_.capitalize(t('comment'))}
-            onChange={(e) => setContent.content(e.target.value)}
+            onChange={(e) => {
+              const content = e.target.value.replace(/\n/g, '\n\n');
+              setContent.content(content);
+            }}
             autoFocus={!isMobile} // autofocus causes auto scroll to top on mobile
           />
         </div>

src/hooks/use-reply-modal.ts

@@ -21,11 +21,7 @@ const useReplyModal = () => {
         setScrollY(currentScrollY);
       }
       if (activeCid && activeCid !== cid) {
-        closeModal();
+        return;
-        setTimeout(() => {
-          setActiveCid(cid);
-          setShowReplyModal(true);
-        }, 0); // minimal timeout to allow for state reset
       } else if (!activeCid) {
         setActiveCid(cid);
         setShowReplyModal(true);

src/themes.css

@@ -134,6 +134,10 @@
   --post-form-field-input-outline: none;
   --post-form-field-input-focus-border: 1px solid #ea8;
 
+  /* reply modal */
+  --reply-modal-field-input-border: 1px solid #aaa;
+  --reply-modal-field-input-border-focus: 1px solid #ea8;
+
   /* quotelink */
   --post-quotelink-text-color: navy;
   --post-quotelink-text-color-hover: red;
@@ -285,6 +289,10 @@
   --post-form-field-input-outline: none;
   --post-form-field-input-focus-border: 1px solid #98e;
 
+  /* reply modal */
+  --reply-modal-field-input-border: 1px solid #aaa;
+  --reply-modal-field-input-border-focus: 1px solid #98e;
+
   /* quotelink */
   --post-quotelink-text-color: #d00;
   --post-quotelink-text-color-hover: #d00;
@@ -690,15 +698,24 @@
   --post-form-toggle-font-weight: 700;
   --post-form-field-title-background-color: #282a2e;
   --post-form-field-title-color: #c5c8c6;
-  --post-form-field-border: 1px solid #111;
+  --post-form-field-border: 1px solid #000;
   --post-form-field-title-font-weight: 700;
   --post-form-field-title-padding: 0 5px;
   --post-form-field-title-font-size: 10pt;
-  --post-form-field-input-border: 1px solid #aaa;
+  --post-form-field-input-border: 1px solid #000;
+  --post-form-field-input-focus-border: 1px solid #515151;
+  --post-form-field-input-background-color: #282a2e;
+  --post-form-field-input-color: #c5c8c6;
   --post-form-field-font-family: arial, helvetica, sans-serif;
   --post-form-field-input-appearance: none;
   --post-form-field-input-outline: none;
-  --post-form-field-input-focus-border: 1px solid #111;
+
+  /* reply modal */
+  --reply-modal-field-input-border: 1px solid #515151;
+  --reply-modal-field-input-border-focus: 1px solid #757575;
+
+  /* reply modal */
+  --reply-modal-field-border-focus: 1px solid #757575;
 
   /* select */
   --select-border: 1px solid #575a60;
@@ -827,6 +844,10 @@
   --post-form-field-input-outline: none;
   --post-form-field-input-focus-border: 1px solid #ea8;
 
+  /* reply modal */
+  --reply-modal-field-input-border: 1px solid #aaa;
+  --reply-modal-field-input-border-focus: 1px solid #ea8;
+
   /* quotelink */
   --post-quotelink-text-color: #f60;
   --post-quotelink-text-color-hover: #f30;

src/views/not-found/not-found.module.css

@@ -1,8 +1,8 @@
 .content {
   margin: auto;
-    text-align: left;
+  text-align: left;
-    width: 57.69em;
+  width: 57.69em;
-    min-width: 750px;
+  min-width: 750px;
 }
 
 .boxOuter {

src/views/not-found/not-found.tsx

@@ -1,8 +1,9 @@
-import { useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import { HomeLogo } from '../home';
 import styles from './not-found.module.css';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
+import useTheme from '../../hooks/use-theme';
 
 const totalNotFoundImages = 2;
 
@@ -19,24 +20,42 @@ const NotFoundImage = () => {
 const NotFound = () => {
   const { subplebbitAddress } = useParams();
 
+  const [theme, setTheme] = useTheme();
+  const previousThemeRef = useRef(theme);
+
+  useEffect(() => {
+    if (theme !== 'yotsuba') {
+      previousThemeRef.current = theme;
+      setTheme('yotsuba');
+    }
+
+    return () => {
+      if (theme === 'yotsuba') {
+        setTheme(previousThemeRef.current);
+      }
+    };
+  }, [theme, setTheme]);
+
   return (
-    <div className={styles.content}>
+    <div className={styles.wrapper}>
-      <HomeLogo />
+      <div className={styles.content}>
-      <div className={styles.boxOuter}>
+        <HomeLogo />
-        <div className={styles.boxInner}>
+        <div className={styles.boxOuter}>
-          <div className={styles.boxBar}>
+          <div className={styles.boxInner}>
-            <h2>404 Not Found</h2>
+            <div className={styles.boxBar}>
-          </div>
+              <h2>404 Not Found</h2>
-          <div className={styles.boxContent}>
+            </div>
-            <NotFoundImage />
+            <div className={styles.boxContent}>
-            {subplebbitAddress && (
+              <NotFoundImage />
-              <>
+              {subplebbitAddress && (
-                <br />
+                <>
-                <div className={styles.backToBoard}>
+                  <br />
-                  [<Link to={`/p/${subplebbitAddress}`}>Back to p/{Plebbit.getShortAddress(subplebbitAddress)}</Link>]
+                  <div className={styles.backToBoard}>
-                </div>
+                    [<Link to={`/p/${subplebbitAddress}`}>Back to p/{Plebbit.getShortAddress(subplebbitAddress)}</Link>]
-              </>
+                  </div>
-            )}
+                </>
+              )}
+            </div>
           </div>
         </div>
       </div>