feat(app): add description and rules views

src/app.tsx

@@ -55,6 +55,8 @@ const App = () => {
         <Route element={boardLayout}>
           <Route path='/p/:subplebbitAddress' element={<Subplebbit />} />
           <Route path='/p/:subplebbitAddress/c/:commentCid' element={<PostPage />} />
+          <Route path='/p/:subplebbitAddress/description' element={<PostPage />} />
+          <Route path='/p/:subplebbitAddress/rules' element={<PostPage />} />
         </Route>
         <Route path='/settings' element={<Settings />} />
       </Routes>

src/components/board-stats/board-stats.tsx

@@ -1,8 +1,9 @@
 import { useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 import { useComment, useSubplebbit, useSubplebbitStats } from '@plebbit/plebbit-react-hooks';
 import styles from './board-stats.module.css';
 import { Trans, useTranslation } from 'react-i18next';
+import { isDescriptionView, isRulesView } from '../../lib/utils/view-utils';
 
 const BoardStats = () => {
   const { t } = useTranslation();
@@ -11,9 +12,14 @@ const BoardStats = () => {
   const subplebbit = useSubplebbit({ subplebbitAddress });
   const { address, createdAt } = subplebbit || {};
 
+  const location = useLocation();
+  const params = useParams();
+  const isInDescriptionView = isDescriptionView(location.pathname, params);
+  const isInRulesView = isRulesView(location.pathname, params);
+
   const comment = useComment({ commentCid });
   const { deleted, locked, removed } = comment || {};
-  const hideStats = deleted || locked || removed;
+  const hideStats = deleted || locked || removed || isInDescriptionView || isInRulesView;
 
   const stats = useSubplebbitStats({ subplebbitAddress: address });
   const [showStats, setShowStats] = useState(true);

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

@@ -2,19 +2,25 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useParams } from 'react-router-dom';
 import { useComment } from '@plebbit/plebbit-react-hooks';
-import { isPostPageView } from '../../lib/utils/view-utils';
+import { isDescriptionView, isPostPageView, isRulesView } from '../../lib/utils/view-utils';
 import styles from './post-form.module.css';
 
 const PostForm = () => {
   const { t } = useTranslation();
-  const { subplebbitAddress, commentCid } = useParams<{ subplebbitAddress: string; commentCid: string }>();
+
+  const location = useLocation();
+  const params = useParams();
+  const isInPostPage = isPostPageView(location.pathname, params);
+  const isInDescriptionView = isDescriptionView(location.pathname, params);
+  const isInRulesView = isRulesView(location.pathname, params);
+
+  const { subplebbitAddress, commentCid } = params || {};
 
   const comment = useComment({ commentCid });
   const { deleted, locked, removed } = comment || {};
-  const isThreadClosed = deleted || locked || removed;
+  const isThreadClosed = deleted || locked || removed || isInDescriptionView || isInRulesView;
 
   const [showForm, setShowForm] = useState(false);
-  const isInPostPage = isPostPageView(useLocation().pathname, useParams());
 
   return (
     <>

src/lib/utils/view-utils.ts

@@ -7,8 +7,20 @@ export const isHomeView = (pathname: string): boolean => {
   return pathname === '/';
 };
 
+export const isDescriptionView = (pathname: string, params: ParamsType): boolean => {
+  const decodedPathname = decodeURIComponent(pathname);
+  return params.subplebbitAddress ? decodedPathname.startsWith(`/p/${params.subplebbitAddress}/description`) : false;
+};
+
+export const isRulesView = (pathname: string, params: ParamsType): boolean => {
+  const decodedPathname = decodeURIComponent(pathname);
+  return params.subplebbitAddress ? decodedPathname.startsWith(`/p/${params.subplebbitAddress}/rules`) : false;
+};
+
 export const isPostPageView = (pathname: string, params: ParamsType): boolean => {
-  // some subs might use emojis in their address, so we need to decode the pathname
+  if (isDescriptionView(pathname, params) || isRulesView(pathname, params)) {
+    return true;
+  }
   const decodedPathname = decodeURIComponent(pathname);
   return params.subplebbitAddress && params.commentCid ? decodedPathname.startsWith(`/p/${params.subplebbitAddress}/c/${params.commentCid}`) : false;
 };

src/views/post-page/post-page.tsx

@@ -1,12 +1,21 @@
 import { useEffect } from 'react';
-import { useComment } from '@plebbit/plebbit-react-hooks';
-import { useParams } from 'react-router-dom';
+import { useComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { useLocation, useParams } from 'react-router-dom';
 import Post from '../../components/post/post';
 import styles from './post-page.module.css';
+import { DescriptionPost, RulesPost } from '../subplebbit/subplebbit';
+import { isDescriptionView, isRulesView } from '../../lib/utils/view-utils';
 
 const PostPage = () => {
   const params = useParams();
-  const { commentCid } = params;
+  const { commentCid, subplebbitAddress } = params;
+
+  const subplebbit = useSubplebbit({ subplebbitAddress });
+  const { createdAt, description, rules, suggested, title } = subplebbit;
+
+  const location = useLocation();
+  const isInDescriptionView = isDescriptionView(location.pathname, params);
+  const isInRulesView = isRulesView(location.pathname, params);
 
   const post = useComment({ commentCid });
 
@@ -16,7 +25,13 @@ const PostPage = () => {
 
   return (
     <div className={styles.content}>
-      <Post post={post} showAllReplies={true} />
+      {isInDescriptionView ? (
+        <DescriptionPost avatarUrl={suggested?.avatarUrl} createdAt={createdAt} description={description} subplebbitAddress={subplebbitAddress} title={title} />
+      ) : isInRulesView ? (
+        <RulesPost createdAt={createdAt} rules={rules} subplebbitAddress={subplebbitAddress} />
+      ) : (
+        <Post post={post} showAllReplies={true} />
+      )}
     </div>
   );
 };

src/views/subplebbit/subplebbit.tsx

@@ -10,6 +10,52 @@ import Post from '../../components/post';
 
 const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
 
+interface DescriptionPostProps {
+  subplebbitAddress: string | undefined;
+  createdAt: number;
+  description: string;
+  avatarUrl?: string;
+  title: string;
+}
+
+export const DescriptionPost = ({ subplebbitAddress, createdAt, description, avatarUrl, title }: DescriptionPostProps) => {
+  const post = {
+    isDescription: true,
+    subplebbitAddress,
+    timestamp: createdAt,
+    author: { displayName: '## Board Mods' },
+    content: description,
+    link: avatarUrl,
+    title: 'Welcome to ' + title,
+    pinned: true,
+    locked: true,
+  };
+
+  return <Post post={post} />;
+};
+
+interface RulesPostProps {
+  subplebbitAddress: string | undefined;
+  createdAt: number;
+  rules: string[];
+}
+
+export const RulesPost = ({ subplebbitAddress, createdAt, rules }: RulesPostProps) => {
+  const content = rules.map((rule, index) => `${index + 1}. ${rule}`).join('\n');
+  const post = {
+    isRules: true,
+    subplebbitAddress,
+    timestamp: createdAt,
+    author: { displayName: '## Board Mods' },
+    content,
+    title: 'Rules',
+    pinned: true,
+    locked: true,
+  };
+
+  return <Post post={post} />;
+};
+
 const Subplebbit = () => {
   const { t } = useTranslation();
   const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
@@ -20,35 +66,6 @@ const Subplebbit = () => {
   const subplebbit = useSubplebbit({ subplebbitAddress });
   const { createdAt, description, rules, shortAddress, state, suggested, title } = subplebbit || {};
 
-  const descriptionPost = useMemo(
-    () => ({
-      isDescription: true,
-      subplebbitAddress,
-      timestamp: createdAt,
-      author: { displayName: '## Board Mods' },
-      content: description,
-      link: suggested?.avatarUrl,
-      title: 'Welcome to ' + (title || `p/${shortAddress}`) + '!',
-      pinned: true,
-      locked: true,
-    }),
-    [subplebbitAddress, createdAt, description, suggested?.avatarUrl, title, shortAddress],
-  );
-
-  const rulesPost = useMemo(
-    () => ({
-      isRules: true,
-      subplebbitAddress,
-      timestamp: createdAt,
-      author: { displayName: '## Board Mods' },
-      content: rules && rules.map((rule: string, index: number) => `${index + 1}. ${rule}`).join('\n'),
-      title: 'Rules',
-      pinned: true,
-      locked: true,
-    }),
-    [subplebbitAddress, createdAt, rules],
-  );
-
   const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading');
   const loadingString = <div className={styles.stateString}>{state === 'failed' ? state : <LoadingEllipsis string={loadingStateString} />}</div>;
 
@@ -87,8 +104,10 @@ const Subplebbit = () => {
     <div className={styles.content}>
       {createdAt && (
         <>
-          {rules && rules.length > 0 && <Post post={rulesPost} />}
-          {description && description.length > 0 && <Post post={descriptionPost} />}
+          {rules && rules.length > 0 && <RulesPost subplebbitAddress={subplebbitAddress} createdAt={createdAt} rules={rules} />}
+          {description && description.length > 0 && (
+            <DescriptionPost avatarUrl={suggested?.avatarUrl} subplebbitAddress={subplebbitAddress} createdAt={createdAt} description={description} title={title} />
+          )}
         </>
       )}
       <Virtuoso