feat: add mobile about page to home, p/all

src/app.tsx

@@ -80,6 +80,9 @@ function App() {
           </Route>
           <Route element={pagesLayout}>
             <Route path='/submit' element={<Submit />} />
+            <Route path='/about' element={<About />} />
+
+            <Route path='/p/all/about' element={<About />} />
 
             <Route path='/p/:subplebbitAddress/c/:commentCid' element={<Post />} />
             <Route path='/p/:subplebbitAddress/c/:commentCid/about' element={<About />} />

src/components/header/header.tsx

@@ -7,10 +7,12 @@ import {
   getAboutLink,
   isAboutView,
   isAllView,
+  isAllAboutView,
   isAuthorView,
   isAuthorCommentsView,
   isAuthorSubmittedView,
   isProfileDownvotedView,
+  isHomeAboutView,
   isHomeView,
   isInboxView,
   isPendingView,
@@ -235,6 +237,7 @@ const HeaderTabs = () => {
   const location = useLocation();
   const isInAllView = isAllView(location.pathname);
   const isInAuthorView = isAuthorView(location.pathname);
+  const isInHomeAboutView = isHomeAboutView(location.pathname);
   const isInHomeView = isHomeView(location.pathname, params);
   const isInInboxView = isInboxView(location.pathname);
   const isInPendingView = isPendingView(location.pathname, params);
@@ -247,7 +250,7 @@ const HeaderTabs = () => {
 
   if (isInPostView) {
     return <CommentsButton />;
-  } else if (isInHomeView || (isInSubplebbitView && !isInSubplebbitSubmitView && !isInSubplebbitSettingsView) || isInAllView) {
+  } else if (isInHomeView || isInHomeAboutView || (isInSubplebbitView && !isInSubplebbitSubmitView && !isInSubplebbitSettingsView) || isInAllView) {
     return <SortItems />;
   } else if ((isInProfileView || isInAuthorView) && !isInPendingView) {
     return <AuthorHeaderTabs />;
@@ -321,6 +324,7 @@ const Header = () => {
 
   const isMobile = window.innerWidth < 768;
   const isInAboutView = isAboutView(location.pathname);
+  const isInAllAboutView = isAllAboutView(location.pathname);
   const isInAllView = isAllView(location.pathname);
   const isInAuthorView = isAuthorView(location.pathname);
   const isInHomeView = isHomeView(location.pathname, params);
@@ -343,7 +347,7 @@ const Header = () => {
     isInHomeView ||
     (isInSubplebbitView && !isInSubplebbitSubmitView && !isInSubplebbitSettingsView && !isInPostView && !isInAboutView) ||
     (isInProfileView && !isInAboutView) ||
-    isInAllView ||
+    (isInAllView && !isInAllAboutView) ||
     (isInAuthorView && !isInAboutView);
   const logoSrc = isInSubplebbitView ? suggested?.avatarUrl : isInProfileView ? imageUrl : 'assets/logo/seedit.png';
   const logoIsAvatar = (isInSubplebbitView && suggested?.avatarUrl) || (isInProfileView && imageUrl);
@@ -385,7 +389,7 @@ const Header = () => {
         <div className={`${styles.tabs} ${hasFewTabs ? styles.fewTabs : ''}`}>
           <ul className={styles.tabMenu}>
             <HeaderTabs />
-            {(isInSubplebbitView || isInSubplebbitSubmitView || isInPostView) && <AboutButton />}
+            {(isInHomeView || isInAllView || isInAboutView || isInSubplebbitView || isInSubplebbitSubmitView || isInPostView) && <AboutButton />}
           </ul>
         </div>
       )}

src/components/sidebar/sidebar.tsx

@@ -5,7 +5,7 @@ import { useAccount, useBlock, Role, useSubplebbitStats, useAccountComment } fro
 import styles from './sidebar.module.css';
 import { getFormattedDate, getFormattedTimeDuration, getFormattedTimeAgo } from '../../lib/utils/time-utils';
 import { findSubplebbitCreator } from '../../lib/utils/user-utils';
-import { isAboutView, isAllView, isHomeView, isPendingView, isPostView, isSubplebbitSettingsView, isSubplebbitsView } from '../../lib/utils/view-utils';
+import { isAboutView, isAllView, isHomeAboutView, isHomeView, isPendingView, isPostView, isSubplebbitSettingsView, isSubplebbitsView } from '../../lib/utils/view-utils';
 import Markdown from '../markdown';
 import SearchBar from '../search-bar';
 import SubscribeButton from '../subscribe-button';
@@ -109,6 +109,7 @@ const Sidebar = ({ address, cid, createdAt, description, downvoteCount = 0, role
   const params = useParams();
   const isInAboutView = isAboutView(location.pathname);
   const isInAllView = isAllView(location.pathname);
+  const isInHomeAboutView = isHomeAboutView(location.pathname);
   const isInHomeView = isHomeView(location.pathname, params);
   const isInPendingView = isPendingView(location.pathname, params);
   const isInPostView = isPostView(location.pathname, params);
@@ -158,7 +159,7 @@ const Sidebar = ({ address, cid, createdAt, description, downvoteCount = 0, role
           <div className={styles.nub} />
         </div>
       </Link>
-      {!isInHomeView && !isInAllView && !isInPendingView && !isInSubplebbitsView && (
+      {!isInHomeView && !isInHomeAboutView && !isInAllView && !isInPendingView && !isInSubplebbitsView && (
         <div className={styles.titleBox}>
           <Link className={styles.title} to={`/p/${address}`}>
             {address}

src/lib/utils/view-utils.ts

@@ -21,6 +21,8 @@ export const getAboutLink = (pathname: string, params: ParamsType): string => {
     return '/profile/about';
   } else if (pathname.startsWith('/u/')) {
     return `/u/${params.authorAddress}/c/${params.commentCid}/about`;
+  } else if (pathname.startsWith('/p/all')) {
+    return '/p/all/about';
   } else {
     return '/about';
   }
@@ -34,6 +36,10 @@ export const isAllView = (pathname: string): boolean => {
   return pathname.startsWith('/p/all');
 };
 
+export const isAllAboutView = (pathname: string): boolean => {
+  return pathname === '/p/all/about';
+};
+
 export const isAuthorView = (pathname: string): boolean => {
   return pathname.startsWith('/u/');
 };
@@ -54,6 +60,10 @@ export const isHomeView = (pathname: string, params: ParamsType): boolean => {
   return pathname === '/' || sortTypes.includes(pathname) || (timeFilterNames.includes(params.timeFilterName as TimeFilterKey) && !pathname.startsWith('/p/all'));
 };
 
+export const isHomeAboutView = (pathname: string): boolean => {
+  return pathname === '/about';
+};
+
 export const isInboxView = (pathname: string): boolean => {
   return pathname.startsWith('/inbox');
 };