External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

style(board): show rules under description

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-09-15 21:27:32 +02:00
parent 3e8053b9bf
commit b363c27108
8 changed files with 57 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/board-buttons/board-buttons.tsx
+4 -5
View File
@@ -293,19 +293,18 @@ const PostPageStats = () => {
const params = useParams();
const location = useLocation();
const isInDescriptionView = isDescriptionView(location.pathname, params);
const isInRulesView = isRulesView(location.pathname, params);
const comment = useComment({ commentCid: params?.commentCid });
const { closed, pinned, replyCount } = comment || {};
const linkCount = useCountLinksInReplies(comment);
const displayReplyCount = replyCount !== undefined ? replyCount.toString() : '?';
const replyCountTooltip = replyCount !== undefined ? _.capitalize(t('replies')) : t('loading');
const displayReplyCount = replyCount !== undefined ? replyCount.toString() : isInDescriptionView ? 1 : '?';
const replyCountTooltip = replyCount !== undefined || isInDescriptionView ? _.capitalize(t('replies')) : t('loading');
return (
<span>
{(pinned || isInDescriptionView || isInRulesView) && `${_.capitalize(t('sticky'))} / `}
{(closed || isInDescriptionView || isInRulesView) && `${_.capitalize(t('closed'))} / `}
{(pinned || isInDescriptionView) && `${_.capitalize(t('sticky'))} / `}
{(closed || isInDescriptionView) && `${_.capitalize(t('closed'))} / `}
<Tooltip children={displayReplyCount} content={replyCountTooltip} /> / <Tooltip children={linkCount?.toString()} content={_.capitalize(t('links'))} />
</span>
);
src/components/post-desktop/post-desktop.tsx
+21 -5
View File
@@ -1,7 +1,7 @@
import { useState } from 'react';
import { Trans, useTranslation } from 'react-i18next';
import { Link, useLocation, useParams } from 'react-router-dom';
import { Comment, useAccount, useAuthorAvatar, useComment, useEditedComment } from '@plebbit/plebbit-react-hooks';
import { Comment, useAccount, useAuthorAvatar, useComment, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
import styles from '../../views/post/post.module.css';
import { getCommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail, getMediaDimensions } from '../../lib/utils/media-utils';
@@ -30,6 +30,8 @@ import Tooltip from '../tooltip';
import { PostProps } from '../../views/post/post';
import { create } from 'zustand';
import _ from 'lodash';
import SubplebbitRules from '../subplebbit-rules';
import subplebbitRules from '../subplebbit-rules';
interface ShowOmittedRepliesState {
showOmittedReplies: Record<string, boolean>;
@@ -274,7 +276,7 @@ const PostMedia = ({ post }: PostProps) => {
};
const PostMessage = ({ post }: PostProps) => {
const { cid, content, deleted, edit, original, parentCid, postCid, reason, removed, state } = post || {};
const { cid, content, deleted, edit, isRules, original, parentCid, postCid, reason, removed, state } = post || {};
// TODO: commentAuthor is not yet available outside of editedComment, wait for API to be updated
// const banned = !!post?.commentAuthor?.banExpiresAt;
const { t } = useTranslation();
@@ -297,7 +299,7 @@ const PostMessage = ({ post }: PostProps) => {
);
return (
<blockquote className={styles.postMessage}>
<blockquote className={`${styles.postMessage} ${isRules && styles.rulesMessage}`}>
{isReply && !(removed || deleted) && state !== 'failed' && isReplyingToReply && <ReplyQuotePreview isQuotelinkReply={true} quotelinkReply={quotelinkReply} />}
{removed ? (
reason ? (
@@ -433,6 +435,17 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
const stateString = useStateString(post);
const subplebbit = useSubplebbit({ subplebbitAddress });
const subplebbitRulesReply = {
isRules: true,
subplebbitAddress,
timestamp: subplebbit?.createdAt,
author: { displayName: `## ${t('board_mods')}` },
content: `${subplebbit?.rules?.map((rule: string, index: number) => `${index + 1}. ${rule}`).join('\n')}`,
replyCount: 0,
};
return (
<div className={styles.postDesktop}>
{showReplies ? (
@@ -477,8 +490,6 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
{!isHidden &&
!(pinned && !isInPostPageView && !showOmittedReplies[cid]) &&
!isInPendingPostView &&
!isDescription &&
!isRules &&
replies &&
showReplies &&
(showAllReplies || showOmittedReplies[cid] ? replies : replies.slice(-5)).map((reply, index) => (
@@ -486,6 +497,11 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
<Reply openReplyModal={openReplyModal} reply={reply} roles={roles} postReplyCount={replyCount} />
</div>
))}
{isDescription && subplebbit?.rules && subplebbit?.rules.length > 0 && (
<div className={styles.replyContainer}>
<Reply reply={subplebbitRulesReply} />
</div>
)}
</div>
{!isInPendingPostView &&
(stateString && stateString !== 'Failed' && state !== 'succeeded' ? (
src/components/post-mobile/post-mobile.tsx
+19 -5
View File
@@ -1,7 +1,7 @@
import { useState } from 'react';
import { Trans, useTranslation } from 'react-i18next';
import { Link, useLocation, useParams } from 'react-router-dom';
import { Comment, useAccount, useAuthorAvatar, useComment, useEditedComment } from '@plebbit/plebbit-react-hooks';
import { Comment, useAccount, useAuthorAvatar, useComment, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
import styles from '../../views/post/post.module.css';
import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
@@ -200,7 +200,7 @@ const ReplyBacklinks = ({ post }: PostProps) => {
const PostMessageMobile = ({ post }: PostProps) => {
const { t } = useTranslation();
const { cid, content, deleted, edit, original, parentCid, postCid, reason, removed, state } = post || {};
const { cid, content, deleted, edit, isRules, original, parentCid, postCid, reason, removed, state } = post || {};
// TODO: commentAuthor is not available outside of editedComment, update when available
// const banned = !!post?.commentAuthor?.banExpiresAt;
const [showOriginal, setShowOriginal] = useState(false);
@@ -223,7 +223,7 @@ const PostMessageMobile = ({ post }: PostProps) => {
);
return (
<blockquote className={`${styles.postMessage} ${!isReply && styles.clampLines}`}>
<blockquote className={`${styles.postMessage} ${!isReply && styles.clampLines} ${isRules && styles.rulesMessage}`}>
{isReply && !(removed || deleted) && state !== 'failed' && isReplyingToReply && <ReplyQuotePreview isQuotelinkReply={true} quotelinkReply={quotelinkReply} />}
{removed ? (
reason ? (
@@ -353,6 +353,17 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies =
const stateString = useStateString(post);
const subplebbit = useSubplebbit({ subplebbitAddress });
const showRules = isDescription && subplebbit?.rules && subplebbit?.rules.length > 0;
const subplebbitRulesReply = {
isRules: true,
subplebbitAddress,
timestamp: subplebbit?.createdAt,
author: { displayName: `## ${t('board_mods')}` },
content: `${subplebbit?.rules?.map((rule: string, index: number) => `${index + 1}. ${rule}`).join('\n')}`,
replyCount: 0,
};
return (
<>
{hidden && !isInPostPageView ? (
@@ -394,8 +405,6 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies =
</div>
{!(pinned && !isInPostView) &&
!isInPendingPostView &&
!isDescription &&
!isRules &&
replies &&
showReplies &&
(showAllReplies ? replies : replies.slice(-5)).map((reply, index) => (
@@ -403,6 +412,11 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies =
<Reply openReplyModal={openReplyModal} postReplyCount={replyCount} reply={reply} roles={roles} />
</div>
))}
{showRules && (
<div className={styles.replyContainer}>
<Reply reply={subplebbitRulesReply} />
</div>
)}
</div>
{!isInPendingPostView &&
(stateString && stateString !== 'Failed' && state !== 'succeeded' ? (
src/components/subplebbit-description/subplebbit-description.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ const SubplebbitDescription = ({ avatarUrl, createdAt, description, shortAddress
author: { displayName: `## ${t('board_mods')}` },
content: isInAllView ? multisubMetadata?.description : description,
link: avatarUrl,
replyCount: 0,
replyCount: 1,
title: t('welcome_to_board', {
board: isInAllView ? multisubMetadata?.title : title || `p/${shortAddress}`,
interpolation: { escapeValue: false },
src/hooks/use-catalog-feed-rows.ts
+2 -1
View File
@@ -77,7 +77,8 @@ const useCatalogFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolea
});
}
if (rules && rules.length > 0) {
// rules are shown in description thread if both are set
if (rules && rules.length > 0 && !description) {
_feed.unshift({
isRules: true,
subplebbitAddress: address,
src/hooks/use-replies.ts
+5
View File
@@ -53,6 +53,11 @@ const useReplies = (comment: Comment) => {
});
}, [flattenedReplies, accountRepliesNotYetPublished]);
// if the comment is a fake comment for description or rules, return an empty array
if (comment?.isDescription || comment?.isRules) {
return [];
}
return repliesAndNotYetPublishedReplies;
};
src/views/board/board.tsx
+1 -1
View File
@@ -192,7 +192,7 @@ const Board = () => {
)}
{feed.length !== 0 ? (
<>
{rules && rules.length > 0 && <SubplebbitRules subplebbitAddress={subplebbitAddress} createdAt={createdAt} rules={rules} />}
{rules && !description && rules.length > 0 && <SubplebbitRules subplebbitAddress={subplebbitAddress} createdAt={createdAt} rules={rules} />}
<Virtuoso
increaseViewportBy={{ bottom: 1200, top: 1200 }}
totalCount={combinedFeed.length}
src/views/post/post.module.css
+4
View File
@@ -163,6 +163,10 @@
overflow: hidden;
}
.rulesMessage {
font-weight: 700 !important;
}
.postDesktop .abbr {
color: var(--post-mobile-abbr-text-color);
font-size: var(--post-mobile-abbr-font-size);