rename about to sidebar, redirect away from /sidebar on desktop

src/app.tsx

@@ -4,10 +4,10 @@ import useTheme from './hooks/use-theme';
 import useTimeFilter from './hooks/use-time-filter';
 import styles from './app.module.css';
 import All from './views/all';
-import About from './views/about';
 import Author from './views/author';
 import Home from './views/home';
 import Inbox from './views/inbox';
+import SidebarView from './views/sidebar';
 import NotFound from './views/not-found';
 import PendingPost from './views/pending-post';
 import PostPage from './views/post-page';
@@ -102,24 +102,24 @@ const App = () => {
           </Route>
           <Route element={pagesLayout}>
             <Route path='/submit' element={<SubmitPage />} />
-            <Route path='/about' element={<About />} />
+            <Route path='/sidebar' element={<SidebarView />} />
 
-            <Route path='/p/all/about' element={<About />} />
+            <Route path='/p/all/sidebar' element={<SidebarView />} />
 
             <Route path='/p/:subplebbitAddress/c/:commentCid' element={<PostPage />} />
             <Route path='/p/:subplebbitAddress/c/:commentCid?context=3' element={<PostPage />} />
-            <Route path='/p/:subplebbitAddress/c/:commentCid/about' element={<About />} />
+            <Route path='/p/:subplebbitAddress/c/:commentCid/sidebar' element={<SidebarView />} />
 
             <Route path='/p/:subplebbitAddress/submit' element={<SubmitPage />} />
-            <Route path='/p/:subplebbitAddress/about' element={<About />} />
+            <Route path='/p/:subplebbitAddress/sidebar' element={<SidebarView />} />
 
             <Route path='/settings' element={<Settings />} />
             <Route path='/p/:subplebbitAddress/settings' element={<SubplebbitSettings />} />
             <Route path='/settings/plebbit-options' element={<Settings />} />
 
-            <Route path='/profile/about' element={<About />} />
+            <Route path='/profile/sidebar' element={<SidebarView />} />
 
-            <Route path='/u/:authorAddress/c/:commentCid/about' element={<About />} />
+            <Route path='/u/:authorAddress/c/:commentCid/sidebar' element={<SidebarView />} />
 
             <Route path='/inbox' element={<Inbox />} />
             <Route path='/inbox/unread' element={<Inbox />} />

src/components/header/header.tsx

@@ -6,7 +6,7 @@ import { useAccount, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import { sortTypes } from '../../app';
 import {
   getAboutLink,
-  isAboutView,
+  isSidebarView,
   isAllView,
   isAllAboutView,
   isAuthorView,
@@ -43,15 +43,15 @@ import useWindowWidth from '../../hooks/use-window-width';
 import styles from './header.module.css';
 import SubscribeButton from '../subscribe-button';
 
-const AboutButton = () => {
+const SidebarButton = () => {
   const params = useParams();
   const location = useLocation();
   const aboutLink = getAboutLink(location.pathname, params);
-  const isInAboutView = isAboutView(location.pathname);
+  const isInSidebarView = isSidebarView(location.pathname);
   const isInSubplebbitSubmitView = isSubplebbitSubmitView(location.pathname, params);
 
   return (
-    <li className={`${styles.about} ${isInAboutView ? styles.selected : styles.choice}`}>
+    <li className={`${styles.about} ${isInSidebarView ? styles.selected : styles.choice}`}>
       <Link to={aboutLink} className={isInSubplebbitSubmitView ? styles.singleAboutButton : ''}>
         ▶︎
       </Link>
@@ -64,10 +64,10 @@ const CommentsButton = () => {
   const params = useParams();
   const location = useLocation();
   const isPost = isPostView(location.pathname, params);
-  const isAbout = isAboutView(location.pathname);
+  const isSidebar = isSidebarView(location.pathname);
 
   return (
-    <li className={isPost && !isAbout ? styles.selected : styles.choice}>
+    <li className={isPost && !isSidebar ? styles.selected : styles.choice}>
       <Link to={`/p/${params.subplebbitAddress}/c/${params.commentCid}`}>{t('comments')}</Link>
     </li>
   );
@@ -84,7 +84,7 @@ const SortItems = () => {
   const timeFilterName = params.timeFilterName;
 
   useEffect(() => {
-    if (location.pathname.endsWith('/about')) {
+    if (location.pathname.endsWith('/sidebar')) {
       setSelectedSortType('');
     } else if (params.sortType) {
       setSelectedSortType(params.sortType);
@@ -112,7 +112,7 @@ const AuthorHeaderTabs = () => {
   const { t } = useTranslation();
   const location = useLocation();
   const params = useParams();
-  const isInAboutView = isAboutView(location.pathname);
+  const isInSidebarView = isSidebarView(location.pathname);
   const isInAuthorView = isAuthorView(location.pathname);
   const isInAuthorCommentsView = isAuthorCommentsView(location.pathname, params);
   const isInAuthorSubmittedView = isAuthorSubmittedView(location.pathname, params);
@@ -126,7 +126,7 @@ const AuthorHeaderTabs = () => {
   const authorRoute = `/u/${params.authorAddress}/c/${params.commentCid}`;
   const overviewSelectedClass =
     (isInProfileView || isInAuthorView) &&
-    !isInAboutView &&
+    !isInSidebarView &&
     !isInProfileUpvotedView &&
     !isInProfileDownvotedView &&
     !isInProfileCommentsView &&
@@ -341,7 +341,7 @@ const Header = () => {
   const { suggested, title, shortAddress } = subplebbit || {};
 
   const isMobile = useWindowWidth() < 640;
-  const isInAboutView = isAboutView(location.pathname);
+  const isInSidebarView = isSidebarView(location.pathname);
   const isInAllAboutView = isAllAboutView(location.pathname);
   const isInAllView = isAllView(location.pathname);
   const isInAuthorView = isAuthorView(location.pathname);
@@ -360,10 +360,10 @@ const Header = () => {
   const hasStickyHeader =
     isInHomeView ||
     isInNotFoundView ||
-    (isInSubplebbitView && !isInSubplebbitSubmitView && !isInSubplebbitSettingsView && !isInPostView && !isInAboutView) ||
-    (isInProfileView && !isInAboutView) ||
+    (isInSubplebbitView && !isInSubplebbitSubmitView && !isInSubplebbitSettingsView && !isInPostView && !isInSidebarView) ||
+    (isInProfileView && !isInSidebarView) ||
     (isInAllView && !isInAllAboutView) ||
-    (isInAuthorView && !isInAboutView);
+    (isInAuthorView && !isInSidebarView);
   const logoSrc = isInSubplebbitView ? suggested?.avatarUrl : 'assets/logo/seedit.png';
   const logoIsAvatar = isInSubplebbitView && suggested?.avatarUrl;
   const logoLink = isInSubplebbitView ? `/p/${params.subplebbitAddress}` : isInProfileView ? '/profile' : '/';
@@ -398,14 +398,14 @@ const Header = () => {
         {!isMobile && (
           <ul className={styles.tabMenu}>
             <HeaderTabs />
-            {(isInSubplebbitView || isInSubplebbitSubmitView || isInPostView || isInProfileView || isInAuthorView) && <AboutButton />}
+            {(isInSubplebbitView || isInSubplebbitSubmitView || isInPostView || isInProfileView || isInAuthorView) && <SidebarButton />}
           </ul>
         )}
       </div>
       {isMobile && (
         <ul className={styles.tabMenu}>
           <HeaderTabs />
-          {(isInHomeView || isInAllView || isInAboutView || isInSubplebbitView || isInSubplebbitSubmitView || isInPostView) && <AboutButton />}
+          {(isInHomeView || isInAllView || isInSidebarView || isInSubplebbitView || isInSubplebbitSubmitView || isInPostView) && <SidebarButton />}
         </ul>
       )}
     </div>

src/components/sidebar/sidebar.tsx

@@ -5,7 +5,16 @@ import { Comment, useAccount, useBlock, Role, Subplebbit, useSubplebbitStats, us
 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, isHomeAboutView, isHomeView, isPendingView, isPostView, isSubplebbitSettingsView, isSubplebbitsView } from '../../lib/utils/view-utils';
+import {
+  isSidebarView,
+  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';
@@ -145,7 +154,7 @@ const Sidebar = ({ comment, isSubCreatedButNotYetPublished, settings, subplebbit
 
   const location = useLocation();
   const params = useParams();
-  const isInAboutView = isAboutView(location.pathname);
+  const isInSidebarView = isSidebarView(location.pathname);
   const isInAllView = isAllView(location.pathname);
   const isInHomeAboutView = isHomeAboutView(location.pathname);
   const isInHomeView = isHomeView(location.pathname, params);
@@ -196,7 +205,7 @@ const Sidebar = ({ comment, isSubCreatedButNotYetPublished, settings, subplebbit
   };
 
   return (
-    <div className={`${isInAboutView ? styles.about : styles.sidebar}`}>
+    <div className={`${isInSidebarView ? styles.about : styles.sidebar}`}>
       <SearchBar />
       {isInPostView && <PostInfo address={address} cid={cid} downvoteCount={downvoteCount} timestamp={timestamp} upvoteCount={upvoteCount} />}
       <Link to={submitRoute}>

src/hooks/use-is-mobile.ts

@@ -0,0 +1,8 @@
+import useWindowWidth from './use-window-width';
+
+const useIsMobile = () => {
+  const windowWidth = useWindowWidth();
+  return windowWidth < 640;
+};
+
+export default useIsMobile;

src/lib/utils/view-utils.ts

@@ -17,22 +17,22 @@ export const getAboutLink = (pathname: string, params: ParamsType): string => {
   const decodedPathname = decodeURIComponent(pathname);
 
   if (decodedPathname.startsWith(`/p/${params.subplebbitAddress}/c/${params.commentCid}`)) {
-    return `/p/${params.subplebbitAddress}/c/${params.commentCid}/about`;
+    return `/p/${params.subplebbitAddress}/c/${params.commentCid}/sidebar`;
   } else if (decodedPathname.startsWith(`/p/${params.subplebbitAddress}`)) {
-    return `/p/${params.subplebbitAddress}/about`;
+    return `/p/${params.subplebbitAddress}/sidebar`;
   } else if (decodedPathname.startsWith('/profile')) {
-    return '/profile/about';
+    return '/profile/sidebar';
   } else if (decodedPathname.startsWith('/u/')) {
-    return `/u/${params.authorAddress}/c/${params.commentCid}/about`;
+    return `/u/${params.authorAddress}/c/${params.commentCid}/sidebar`;
   } else if (decodedPathname.startsWith('/p/all')) {
-    return '/p/all/about';
+    return '/p/all/sidebar';
   } else {
-    return '/about';
+    return '/sidebar';
   }
 };
 
-export const isAboutView = (pathname: string): boolean => {
-  return pathname.endsWith('/about');
+export const isSidebarView = (pathname: string): boolean => {
+  return pathname.endsWith('/sidebar');
 };
 
 export const isAllView = (pathname: string): boolean => {
@@ -40,7 +40,7 @@ export const isAllView = (pathname: string): boolean => {
 };
 
 export const isAllAboutView = (pathname: string): boolean => {
-  return pathname === '/p/all/about';
+  return pathname === '/p/all/sidebar';
 };
 
 export const isAuthorView = (pathname: string): boolean => {
@@ -64,7 +64,7 @@ export const isHomeView = (pathname: string, params: ParamsType): boolean => {
 };
 
 export const isHomeAboutView = (pathname: string): boolean => {
-  return pathname === '/about';
+  return pathname === '/sidebar';
 };
 
 export const isInboxView = (pathname: string): boolean => {

src/views/about/about.tsx

@@ -1,20 +0,0 @@
-import { useLocation, useParams } from 'react-router-dom';
-import Sidebar from '../../components/sidebar';
-import AuthorSidebar from '../../components/author-sidebar';
-import styles from './about.module.css';
-import { useComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
-import { isAuthorView, isProfileView } from '../../lib/utils/view-utils';
-
-const About = () => {
-  const location = useLocation();
-  const isAuthor = isAuthorView(location.pathname);
-  const isProfile = isProfileView(location.pathname);
-
-  const { commentCid, subplebbitAddress } = useParams();
-  const subplebbit = useSubplebbit({ subplebbitAddress });
-  const comment = useComment({ commentCid });
-
-  return <div className={styles.content}>{isProfile || isAuthor ? <AuthorSidebar /> : <Sidebar comment={comment} subplebbit={subplebbit} />}</div>;
-};
-
-export default About;

src/views/about/index.ts

@@ -1 +0,0 @@
-export { default } from './about';

src/views/sidebar/index.ts

@@ -0,0 +1 @@
+export { default } from './sidebar';

src/views/sidebar/sidebar.tsx

@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import Sidebar from '../../components/sidebar';
+import AuthorSidebar from '../../components/author-sidebar';
+import styles from './sidebar.module.css';
+import { useComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { isAuthorView, isProfileView } from '../../lib/utils/view-utils';
+import useIsMobile from '../../hooks/use-is-mobile';
+
+const SidebarView = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const isMobile = useIsMobile();
+  const { commentCid, subplebbitAddress } = useParams();
+
+  useEffect(() => {
+    if (!isMobile && location.pathname.endsWith('/sidebar')) {
+      const newPath = location.pathname.replace(/\/sidebar$/, '');
+      navigate(newPath || '/');
+    }
+  }, [isMobile, location.pathname, navigate]);
+
+  const isAuthor = isAuthorView(location.pathname);
+  const isProfile = isProfileView(location.pathname);
+
+  const subplebbit = useSubplebbit({ subplebbitAddress });
+  const comment = useComment({ commentCid });
+
+  return <div className={styles.content}>{isMobile && (isProfile || isAuthor ? <AuthorSidebar /> : <Sidebar comment={comment} subplebbit={subplebbit} />)}</div>;
+};
+
+export default SidebarView;