feat(board): add p/all and p/subscriptions

src/app.tsx

@@ -37,7 +37,7 @@ const BoardLayout = () => {
       <BoardBanner />
       <MobileBoardButtons />
       <PostForm key={key} />
-      <SubplebbitStats />
+      {subplebbitAddress && isValidSubplebbitAddress && <SubplebbitStats />}
       <DesktopBoardButtons />
       <Outlet />
     </div>
@@ -71,6 +71,12 @@ const App = () => {
             <Route path='/p/:subplebbitAddress' element={<Board />} />
             <Route path='/p/:subplebbitAddress/settings' element={<Board />} />
 
+            <Route path='/p/subscriptions' element={<Board />} />
+            <Route path='/p/subscriptions/settings' element={<Board />} />
+
+            <Route path='/p/all' element={<Board />} />
+            <Route path='/p/all/settings' element={<Board />} />
+
             <Route path='/p/:subplebbitAddress/catalog' element={<Catalog />} />
             <Route path='/p/:subplebbitAddress/catalog/settings' element={<Catalog />} />
 

src/lib/utils/view-utils.ts

@@ -4,8 +4,13 @@ export type ParamsType = {
   subplebbitAddress?: string;
 };
 
-export const isHomeView = (pathname: string): boolean => {
-  return pathname === '/';
+export const isAllView = (pathname: string): boolean => {
+  return pathname === '/p/all';
+};
+
+export const isCatalogView = (pathname: string, params: ParamsType): boolean => {
+  const decodedPathname = decodeURIComponent(pathname);
+  return params.subplebbitAddress ? decodedPathname.startsWith(`/p/${params.subplebbitAddress}/catalog`) : false;
 };
 
 export const isDescriptionView = (pathname: string, params: ParamsType): boolean => {
@@ -13,9 +18,12 @@ export const isDescriptionView = (pathname: string, params: ParamsType): boolean
   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 isHomeView = (pathname: string): boolean => {
+  return pathname === '/';
+};
+
+export const isPendingPostView = (pathname: string, params: ParamsType): boolean => {
+  return pathname === `/profile/${params.accountCommentIndex}`;
 };
 
 export const isPostPageView = (pathname: string, params: ParamsType): boolean => {
@@ -26,22 +34,22 @@ export const isPostPageView = (pathname: string, params: ParamsType): boolean =>
   return params.subplebbitAddress && params.commentCid ? decodedPathname.startsWith(`/p/${params.subplebbitAddress}/c/${params.commentCid}`) : false;
 };
 
-export const isCatalogView = (pathname: string, params: ParamsType): boolean => {
+export const isRulesView = (pathname: string, params: ParamsType): boolean => {
   const decodedPathname = decodeURIComponent(pathname);
-  return params.subplebbitAddress ? decodedPathname.startsWith(`/p/${params.subplebbitAddress}/catalog`) : false;
+  return params.subplebbitAddress ? decodedPathname.startsWith(`/p/${params.subplebbitAddress}/rules`) : false;
 };
 
-export const isPendingPostView = (pathname: string, params: ParamsType): boolean => {
-  return pathname === `/profile/${params.accountCommentIndex}`;
+export const isSubscriptionsView = (pathname: string): boolean => {
+  return pathname === '/p/subscriptions';
 };
 
 export const isNotFoundView = (pathname: string, params: ParamsType): boolean => {
   return (
-    !isHomeView(pathname) &&
-    !isDescriptionView(pathname, params) &&
-    !isRulesView(pathname, params) &&
-    !isPostPageView(pathname, params) &&
     !isCatalogView(pathname, params) &&
-    !isPendingPostView(pathname, params)
+    !isDescriptionView(pathname, params) &&
+    !isHomeView(pathname) &&
+    !isPendingPostView(pathname, params) &&
+    !isPostPageView(pathname, params) &&
+    !isRulesView(pathname, params)
   );
 };

src/views/board/board.tsx

@@ -1,9 +1,11 @@
 import { useEffect, useMemo, useRef } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
-import { useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { useAccount, useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
 import { useTranslation } from 'react-i18next';
 import styles from './board.module.css';
+import { isAllView, isSubscriptionsView } from '../../lib/utils/view-utils';
+import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
 import useFeedStateString from '../../hooks/use-feed-state-string';
 import useReplyModal from '../../hooks/use-reply-modal';
 import LoadingEllipsis from '../../components/loading-ellipsis';
@@ -19,12 +21,30 @@ const Board = () => {
   const { t } = useTranslation();
   const location = useLocation();
   const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
-  const subplebbitAddresses = useMemo(() => [subplebbitAddress], [subplebbitAddress]) as string[];
+
+  const isInAllView = isAllView(location.pathname);
+  const defaultSubplebbitAddresses = useDefaultSubplebbitAddresses();
+
+  const account = useAccount();
+  const subscriptions = account?.subscriptions;
+  const isInSubscriptionsView = isSubscriptionsView(location.pathname);
+
+  const subplebbitAddresses = useMemo(() => {
+    if (isInAllView) {
+      return defaultSubplebbitAddresses;
+    }
+    if (isInSubscriptionsView) {
+      return subscriptions || [];
+    }
+    return [subplebbitAddress];
+  }, [isInAllView, isInSubscriptionsView, subplebbitAddress, defaultSubplebbitAddresses, subscriptions]);
+
   const sortType = 'active';
   const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses, sortType });
 
   const subplebbit = useSubplebbit({ subplebbitAddress });
-  const { createdAt, description, rules, shortAddress, state, suggested, title } = subplebbit || {};
+  const { createdAt, description, rules, shortAddress, state, suggested } = subplebbit || {};
+  const title = isInAllView ? t('all') : isInSubscriptionsView ? t('subscriptions') : subplebbit?.title;
 
   const { activeCid, closeModal, openReplyModal, showReplyModal, scrollY } = useReplyModal();
 
@@ -69,16 +89,17 @@ const Board = () => {
       {feed.length > 0 && (
         <>
           {rules && rules.length > 0 && <SubplebbitRules subplebbitAddress={subplebbitAddress} createdAt={createdAt} rules={rules} />}
-          {description && description.length > 0 && (
-            <SubplebbitDescription
-              avatarUrl={suggested?.avatarUrl}
-              subplebbitAddress={subplebbitAddress}
-              createdAt={createdAt}
-              description={description}
-              shortAddress={shortAddress}
-              title={title}
-            />
-          )}
+          {(description && description.length > 0) ||
+            (isInAllView && (
+              <SubplebbitDescription
+                avatarUrl={suggested?.avatarUrl}
+                subplebbitAddress={subplebbitAddress}
+                createdAt={createdAt}
+                description={description}
+                shortAddress={shortAddress}
+                title={title}
+              />
+            ))}
         </>
       )}
       <Virtuoso

src/views/home/home.tsx

@@ -115,6 +115,15 @@ const Boards = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebbits
       </div>
       <div className={styles.boardsBoxContent}>
         <div className={styles.column}>
+          <h3>Multiboards</h3>
+          <div className={styles.list}>
+            <div className={styles.subplebbit}>
+              <Link to='/p/all'>All</Link>
+            </div>
+            <div className={styles.subplebbit}>
+              <Link to='/p/subscriptions'>Subscriptions</Link>
+            </div>
+          </div>
           <h3>Plebbit</h3>
           <div className={styles.list}>
             {plebbitSubs.map((sub) => (