diff --git a/public/translations/ar/default.json b/public/translations/ar/default.json index 7a53b264..9e1e58b1 100644 --- a/public/translations/ar/default.json +++ b/public/translations/ar/default.json @@ -72,5 +72,8 @@ "interests": "اهتمامات", "random": "عشوائي", "international": "دولية", - "projects": "مشاريع" + "projects": "مشاريع", + "challenge_counter": "{{index}} من {{total}}", + "embed": "تضمين", + "remove": "إزالة" } \ No newline at end of file diff --git a/public/translations/bn/default.json b/public/translations/bn/default.json index ab94bcbc..ebee908b 100644 --- a/public/translations/bn/default.json +++ b/public/translations/bn/default.json @@ -72,5 +72,8 @@ "interests": "আগ্রহসমূহ", "random": "এলোমেলো", "international": "আন্তর্জাতিক", - "projects": "প্রকল্পসমূহ" + "projects": "প্রকল্পসমূহ", + "challenge_counter": "{{index}} থেকে {{total}}", + "embed": "এম্বেড", + "remove": "অপসারণ" } \ No newline at end of file diff --git a/public/translations/cs/default.json b/public/translations/cs/default.json index ff5945af..bed95533 100644 --- a/public/translations/cs/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/da/default.json b/public/translations/da/default.json index 34d267b5..31a43329 100644 --- a/public/translations/da/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/de/default.json b/public/translations/de/default.json index 5f548b59..1d8b555b 100644 --- a/public/translations/de/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/el/default.json b/public/translations/el/default.json index d77b3dc0..efb58bcb 100644 --- a/public/translations/el/default.json +++ b/public/translations/el/default.json @@ -72,5 +72,8 @@ "interests": "ενδιαφέροντα", "random": "τυχαίος", "international": "διεθνείς", - "projects": "έργα" + "projects": "έργα", + "challenge_counter": "{{index}} από {{total}}", + "embed": "ενσωμάτωση", + "remove": "αφαίρεση" } \ No newline at end of file diff --git a/public/translations/en/default.json b/public/translations/en/default.json index c7ac71ba..cfe60bbf 100644 --- a/public/translations/en/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/es/default.json b/public/translations/es/default.json index 6fb3afa9..9a434c2d 100644 --- a/public/translations/es/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/fa/default.json b/public/translations/fa/default.json index 868c0f79..03448fd9 100644 --- a/public/translations/fa/default.json +++ b/public/translations/fa/default.json @@ -72,5 +72,8 @@ "interests": "علایق", "random": "تصادفی", "international": "بینالمللی", - "projects": "پروژهها" + "projects": "پروژهها", + "challenge_counter": "{{index}} از {{total}}", + "embed": "جاسازی", + "remove": "حذف" } \ No newline at end of file diff --git a/public/translations/fi/default.json b/public/translations/fi/default.json index 8f0c9bc6..c7428224 100644 --- a/public/translations/fi/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/fil/default.json b/public/translations/fil/default.json index 01bbb983..b52d12fe 100644 --- a/public/translations/fil/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/fr/default.json b/public/translations/fr/default.json index 2d1ee80a..31f76089 100644 --- a/public/translations/fr/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/he/default.json b/public/translations/he/default.json index c5298a88..bfc65cfa 100644 --- a/public/translations/he/default.json +++ b/public/translations/he/default.json @@ -72,5 +72,8 @@ "interests": "עניינים", "random": "אקראי", "international": "בינלאומיים", - "projects": "פרויקטים" + "projects": "פרויקטים", + "challenge_counter": "{{index}} מתוך {{total}}", + "embed": "הטמע", + "remove": "הסר" } \ No newline at end of file diff --git a/public/translations/hi/default.json b/public/translations/hi/default.json index 4ae7c70c..12c9727d 100644 --- a/public/translations/hi/default.json +++ b/public/translations/hi/default.json @@ -72,5 +72,8 @@ "interests": "रुचियाँ", "random": "यादृच्छिक", "international": "अंतरराष्ट्रीय", - "projects": "परियोजनाएं" + "projects": "परियोजनाएं", + "challenge_counter": "{{index}} में से {{total}}", + "embed": "एम्बेड", + "remove": "हटाएं" } \ No newline at end of file diff --git a/public/translations/hu/default.json b/public/translations/hu/default.json index 6d8bc944..3d4dfc2c 100644 --- a/public/translations/hu/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/id/default.json b/public/translations/id/default.json index bf5a314d..86bc00f3 100644 --- a/public/translations/id/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/it/default.json b/public/translations/it/default.json index 82d1ab86..413e714b 100644 --- a/public/translations/it/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/ja/default.json b/public/translations/ja/default.json index e941e377..20f031b5 100644 --- a/public/translations/ja/default.json +++ b/public/translations/ja/default.json @@ -72,5 +72,8 @@ "interests": "興味", "random": "ランダム", "international": "国際的な", - "projects": "プロジェクト" + "projects": "プロジェクト", + "challenge_counter": "{{index}} / {{total}}", + "embed": "埋め込み", + "remove": "削除" } \ No newline at end of file diff --git a/public/translations/ko/default.json b/public/translations/ko/default.json index d97bee07..e2830237 100644 --- a/public/translations/ko/default.json +++ b/public/translations/ko/default.json @@ -72,5 +72,8 @@ "interests": "관심사", "random": "랜덤", "international": "국제적인", - "projects": "프로젝트" + "projects": "프로젝트", + "challenge_counter": "{{index}} 중 {{total}}", + "embed": "임베드", + "remove": "제거" } \ No newline at end of file diff --git a/public/translations/mr/default.json b/public/translations/mr/default.json index fdf80ef7..7d5a181a 100644 --- a/public/translations/mr/default.json +++ b/public/translations/mr/default.json @@ -72,5 +72,8 @@ "interests": "आवडी", "random": "यादृच्छ", "international": "आंतरराष्ट्रीय", - "projects": "प्रकल्प" + "projects": "प्रकल्प", + "challenge_counter": "{{index}} पैकी {{total}}", + "embed": "एम्बेड", + "remove": "काढा" } \ No newline at end of file diff --git a/public/translations/nl/default.json b/public/translations/nl/default.json index 5271ad27..bcec2048 100644 --- a/public/translations/nl/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/no/default.json b/public/translations/no/default.json index aa238531..e71387c1 100644 --- a/public/translations/no/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/pl/default.json b/public/translations/pl/default.json index 93125ac4..b14ce7dc 100644 --- a/public/translations/pl/default.json +++ b/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ń" } \ No newline at end of file diff --git a/public/translations/pt/default.json b/public/translations/pt/default.json index 8a7c9f00..805873fe 100644 --- a/public/translations/pt/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/ro/default.json b/public/translations/ro/default.json index f55be867..48b8f2a5 100644 --- a/public/translations/ro/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/ru/default.json b/public/translations/ru/default.json index c5a3e800..26de8087 100644 --- a/public/translations/ru/default.json +++ b/public/translations/ru/default.json @@ -72,5 +72,8 @@ "interests": "интересы", "random": "случайный", "international": "международные", - "projects": "проекты" + "projects": "проекты", + "challenge_counter": "{{index}} из {{total}}", + "embed": "встроить", + "remove": "удалить" } \ No newline at end of file diff --git a/public/translations/sq/default.json b/public/translations/sq/default.json index 1cc1ed01..af007ab9 100644 --- a/public/translations/sq/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/sv/default.json b/public/translations/sv/default.json index 35cb5552..f54c76e6 100644 --- a/public/translations/sv/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/te/default.json b/public/translations/te/default.json index 7925028d..3ada3f40 100644 --- a/public/translations/te/default.json +++ b/public/translations/te/default.json @@ -72,5 +72,8 @@ "interests": "ఆసక్తులు", "random": "యాదృచ్ఛిక", "international": "అంతర్జాతీయ", - "projects": "ప్రాజెక్టులు" + "projects": "ప్రాజెక్టులు", + "challenge_counter": "{{index}} లో {{total}}", + "embed": "ఎంబెడ్", + "remove": "తొలగించు" } \ No newline at end of file diff --git a/public/translations/th/default.json b/public/translations/th/default.json index 7ed717cf..f24fe1f5 100644 --- a/public/translations/th/default.json +++ b/public/translations/th/default.json @@ -72,5 +72,8 @@ "interests": "ความสนใจ", "random": "สุ่ม", "international": "นานาชาติ", - "projects": "โครงการ" + "projects": "โครงการ", + "challenge_counter": "{{index}} จาก {{total}}", + "embed": "ฝัง", + "remove": "ลบ" } \ No newline at end of file diff --git a/public/translations/tr/default.json b/public/translations/tr/default.json index 6e0b557a..feeaf0f9 100644 --- a/public/translations/tr/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/uk/default.json b/public/translations/uk/default.json index 27d0e1ad..3bfdfa37 100644 --- a/public/translations/uk/default.json +++ b/public/translations/uk/default.json @@ -72,5 +72,8 @@ "interests": "інтереси", "random": "випадковий", "international": "міжнародні", - "projects": "проекти" + "projects": "проекти", + "challenge_counter": "{{index}} з {{total}}", + "embed": "вбудувати", + "remove": "видалити" } \ No newline at end of file diff --git a/public/translations/ur/default.json b/public/translations/ur/default.json index a830d99b..54f8afe9 100644 --- a/public/translations/ur/default.json +++ b/public/translations/ur/default.json @@ -72,5 +72,8 @@ "interests": "دلچسپیاں", "random": "بے ترتیب", "international": "بین الاقوامی", - "projects": "منصوبے" + "projects": "منصوبے", + "challenge_counter": "{{index}} میں سے {{total}}", + "embed": "ایمبیڈ", + "remove": "ہٹائیں" } \ No newline at end of file diff --git a/public/translations/vi/default.json b/public/translations/vi/default.json index da3a6a0e..07195945 100644 --- a/public/translations/vi/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/zh/default.json b/public/translations/zh/default.json index 8a6a207c..145855da 100644 --- a/public/translations/zh/default.json +++ b/public/translations/zh/default.json @@ -72,5 +72,8 @@ "interests": "兴趣", "random": "随机", "international": "国际的", - "projects": "项目" + "projects": "项目", + "challenge_counter": "{{index}} / {{total}}", + "embed": "嵌入", + "remove": "移除" } \ No newline at end of file diff --git a/src/app.tsx b/src/app.tsx index 872a9576..41ebdb41 100644 --- a/src/app.tsx +++ b/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 = ( <> diff --git a/src/components/markdown/markdown.module.css b/src/components/markdown/markdown.module.css index b894ce63..8c12a714 100644 --- a/src/components/markdown/markdown.module.css +++ b/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); +} \ No newline at end of file diff --git a/src/components/markdown/markdown.tsx b/src/components/markdown/markdown.tsx index ec4ef6ec..31542885 100644 --- a/src/components/markdown/markdown.tsx +++ b/src/components/markdown/markdown.tsx @@ -1,9 +1,12 @@ -import React, { useMemo } from 'react'; -import styles from './markdown.module.css'; +import React, { useMemo, useState } from 'react'; 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 ( { ), + a: ({ href, children }) => { + if (href) { + const linkMediaInfo = getLinkMediaInfo(href); + if (getHasThumbnail(linkMediaInfo, href)) { + return ( + <> + + {children} + {' '} + [ + setShowMedia(!showMedia)}> + {showMedia ? t('remove') : t('embed')} + + ] + {showMedia && ( + <> + + + > + )} + > + ); + } else { + return ( + + {children} + + ); + } + } + }, }} /> diff --git a/src/components/post-form/post-form.module.css b/src/components/post-form/post-form.module.css index b90ea32e..71e01e1a 100644 --- a/src/components/post-form/post-form.module.css +++ b/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; } diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx index 2a58b31f..b008f362 100644 --- a/src/components/post-form/post-form.tsx +++ b/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(null); + const urlRef = useRef(null); + const subjectRef = useRef(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(null); - const urlRef = useRef(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 = () => { { 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 }); }} /> @@ -234,7 +249,7 @@ const PostForm = () => { ] ) : ( - + setShowForm(false)} /> )} @@ -249,7 +264,7 @@ const PostForm = () => { setShowForm(showForm ? false : true)}> {showForm ? t('close_post_form') : isInPostPage ? t('post_a_reply') : t('start_new_thread')} - {showForm && } + {showForm && setShowForm(false)} />} > )} diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css index 60adcd93..84459b42 100644 --- a/src/components/post/post.module.css +++ b/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); } diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index 7762c7fa..fa52a35b 100644 --- a/src/components/post/post.tsx +++ b/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/ {!cid ? ( - {state === 'failed' ? 'Failed' : 'Pending'} + {state === 'failed' || stateString === 'Failed' ? 'Failed' : 'Pending'} ) : ( openReplyModal && openReplyModal(cid)}> {shortCid} @@ -186,7 +187,7 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps) }} /> )} - {!cid && state === 'pending' && ( + {!cid && state === 'pending' && stateString !== 'Failed' && ( <> {loadingString} @@ -194,7 +195,7 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps) )} )} - {!isDescription && !isRules && (replies.length > 5 || (pinned && replies.length > 0)) && !isInPostPage && ( + {!isDescription && !isRules && !isPendingPostPage && (replies.length > 5 || (pinned && replies.length > 0)) && !isInPostPage && ( @@ -212,6 +213,7 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps) )} {!(pinned && !isInPostPage) && + !isPendingPostPage && !isDescription && !isRules && replies && @@ -272,7 +274,7 @@ const ReplyDesktop = ({ reply, roles, openReplyModal }: PostProps) => { c/ {!cid ? ( - {state === 'failed' ? 'Failed' : 'Pending'} + {state === 'failed' || stateString === 'Failed' ? 'Failed' : 'Pending'} ) : ( openReplyModal && openReplyModal(cid)}> {shortCid} @@ -342,13 +344,13 @@ const ReplyDesktop = ({ reply, roles, openReplyModal }: PostProps) => { {isReplyingToReply && ( <> - {`c/${Plebbit.getShortCid(parentCid)}`} + {`c/${parentCid && Plebbit.getShortCid(parentCid)}`} > )} - {!cid && state === 'pending' && ( + {!cid && state === 'pending' && stateString !== 'Failed' && ( <> {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/ {!cid ? ( - {state === 'failed' ? 'Failed' : 'Pending'} + {state === 'failed' || stateString === 'Failed' ? 'Failed' : 'Pending'} ) : ( openReplyModal && openReplyModal(cid)}> {shortCid} @@ -466,7 +469,7 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps) }} /> )} - {!cid && state === 'pending' && ( + {!cid && state === 'pending' && stateString !== 'Failed' && ( <> {loadingString} @@ -475,7 +478,7 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps) )} - {!isInPostPage && ( + {!isInPostPage && !isPendingPostPage && ( {replyCount > 0 && `${replyCount} Replies`} @@ -488,6 +491,7 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps) )} {!(pinned && !isInPostPage) && + !isPendingPostPage && !isDescription && !isRules && replies && @@ -549,7 +553,7 @@ const ReplyMobile = ({ reply, roles, openReplyModal }: PostProps) => { {!cid ? ( - {state === 'failed' ? 'Failed' : 'Pending'} + {state === 'failed' || stateString === 'Failed' ? 'Failed' : 'Pending'} ) : ( openReplyModal && openReplyModal(cid)}> {shortCid} @@ -572,13 +576,13 @@ const ReplyMobile = ({ reply, roles, openReplyModal }: PostProps) => { {isReplyingToReply && ( <> - {`c/${Plebbit.getShortCid(parentCid)}`} + {`c/${parentCid && Plebbit.getShortCid(parentCid)}`} > )} - {!cid && state === 'pending' && ( + {!cid && state === 'pending' && stateString !== 'Failed' && ( <> {loadingString} diff --git a/src/components/reply-modal/reply-modal.module.css b/src/components/reply-modal/reply-modal.module.css index 00c02f7a..1d05b91d 100644 --- a/src/components/reply-modal/reply-modal.module.css +++ b/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; diff --git a/src/components/reply-modal/reply-modal.tsx b/src/components/reply-modal/reply-modal.tsx index d992e893..fae5fedb 100644 --- a/src/components/reply-modal/reply-modal.tsx +++ b/src/components/reply-modal/reply-modal.tsx @@ -88,6 +88,9 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => { setContent.link(e.target.value)} /> + + + { 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 /> diff --git a/src/hooks/use-reply-modal.ts b/src/hooks/use-reply-modal.ts index 90def82c..11fc3045 100644 --- a/src/hooks/use-reply-modal.ts +++ b/src/hooks/use-reply-modal.ts @@ -21,11 +21,7 @@ const useReplyModal = () => { setScrollY(currentScrollY); } if (activeCid && activeCid !== cid) { - closeModal(); - setTimeout(() => { - setActiveCid(cid); - setShowReplyModal(true); - }, 0); // minimal timeout to allow for state reset + return; } else if (!activeCid) { setActiveCid(cid); setShowReplyModal(true); diff --git a/src/themes.css b/src/themes.css index ad157561..6cceff9e 100644 --- a/src/themes.css +++ b/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; diff --git a/src/views/not-found/not-found.module.css b/src/views/not-found/not-found.module.css index df9c1f1a..8702f52c 100644 --- a/src/views/not-found/not-found.module.css +++ b/src/views/not-found/not-found.module.css @@ -1,8 +1,8 @@ .content { margin: auto; - text-align: left; - width: 57.69em; - min-width: 750px; + text-align: left; + width: 57.69em; + min-width: 750px; } .boxOuter { diff --git a/src/views/not-found/not-found.tsx b/src/views/not-found/not-found.tsx index 0e2be030..35b00a6f 100644 --- a/src/views/not-found/not-found.tsx +++ b/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 ( - - - - - - 404 Not Found - - - - {subplebbitAddress && ( - <> - - - [Back to p/{Plebbit.getShortAddress(subplebbitAddress)}] - - > - )} + + + + + + + 404 Not Found + + + + {subplebbitAddress && ( + <> + + + [Back to p/{Plebbit.getShortAddress(subplebbitAddress)}] + + > + )} +