From 91be80f3e5135af244fd0a7a921301c8a786d75d Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Mon, 1 Jan 2024 22:26:33 +0100
Subject: [PATCH] feat(subplebbits): add settings route, header title

---
 src/app.tsx                                   | 14 ++++++----
 src/components/header/header.tsx              | 28 +++++++++++++------
 src/lib/utils/view-utils.ts                   |  4 +++
 .../subplebbit/subplebbit-settings/index.ts   |  1 +
 .../subplebbit-settings.module.css            |  0
 .../subplebbit-settings.tsx                   |  7 +++++
 src/views/subplebbits/subplebbits.module.css  |  2 +-
 src/views/subplebbits/subplebbits.tsx         |  4 +--
 8 files changed, 41 insertions(+), 19 deletions(-)
 create mode 100644 src/views/subplebbit/subplebbit-settings/index.ts
 create mode 100644 src/views/subplebbit/subplebbit-settings/subplebbit-settings.module.css
 create mode 100644 src/views/subplebbit/subplebbit-settings/subplebbit-settings.tsx

diff --git a/src/app.tsx b/src/app.tsx
index e8767012..14f1b7ef 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -13,6 +13,7 @@ import Profile from './views/profile';
 import Settings from './views/settings';
 import Submit from './views/submit';
 import Subplebbit from './views/subplebbit';
+import SubplebbitSettings from './views/subplebbit/subplebbit-settings';
 import Subplebbits from './views/subplebbits';
 import AccountBar from './components/account-bar/';
 import ChallengeModal from './components/challenge-modal';
@@ -73,9 +74,9 @@ function App() {
             <Route path='/profile/comments/:sortType?/:timeFilterName?' element={<Profile />} />
             <Route path='/profile/submitted/:sortType?/:timeFilterName?' element={<Profile />} />
 
-            <Route path='u/:authorAddress/c/:commentCid?/:sortType?/:timeFilterName?' element={<Author />} />
-            <Route path='u/:authorAddress/c/:commentCid?/comments/:sortType?/:timeFilterName?' element={<Author />} />
-            <Route path='u/:authorAddress/c/:commentCid?/submitted/:sortType?/:timeFilterName?' element={<Author />} />
+            <Route path='/u/:authorAddress/c/:commentCid?/:sortType?/:timeFilterName?' element={<Author />} />
+            <Route path='/u/:authorAddress/c/:commentCid?/comments/:sortType?/:timeFilterName?' element={<Author />} />
+            <Route path='/u/:authorAddress/c/:commentCid?/submitted/:sortType?/:timeFilterName?' element={<Author />} />
           </Route>
           <Route element={pagesLayout}>
             <Route path='/submit' element={<Submit />} />
@@ -87,6 +88,7 @@ function App() {
             <Route path='/p/:subplebbitAddress/about' element={<About />} />
 
             <Route path='/settings' element={<Settings />} />
+            <Route path='/p/:subplebbitAddress/settings' element={<SubplebbitSettings />} />
 
             <Route path='/profile/:accountCommentIndex' element={<PendingPost />} />
             <Route path='/profile/about' element={<About />} />
@@ -94,9 +96,9 @@ function App() {
             <Route path='/u/:authorAddress/c/:commentCid/about' element={<About />} />
 
             <Route path='/inbox' element={<Inbox />} />
-            <Route path='inbox/unread' element={<Inbox />} />
-            <Route path='inbox/commentreplies' element={<Inbox />} />
-            <Route path='inbox/postreplies' element={<Inbox />} />
+            <Route path='/inbox/unread' element={<Inbox />} />
+            <Route path='/inbox/commentreplies' element={<Inbox />} />
+            <Route path='/inbox/postreplies' element={<Inbox />} />
 
             <Route path='/communities' element={<Subplebbits />} />
             <Route path='/communities/mine' element={<Subplebbits />} />
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index 6cb051ec..f57cc3e9 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -13,15 +13,16 @@ import {
   isDownvotedView,
   isHomeView,
   isInboxView,
-  isPostView,
-  isSettingsView,
-  isSubplebbitView,
-  isSubmitView,
-  isSubplebbitSubmitView,
   isPendingView,
+  isPostView,
   isProfileView,
   isProfileCommentsView,
   isProfileSubmittedView,
+  isSettingsView,
+  isSubmitView,
+  isSubplebbitView,
+  isSubplebbitSettingsView,
+  isSubplebbitSubmitView,
   isSubplebbitsView,
   isUpvotedView,
 } from '../../lib/utils/view-utils';
@@ -229,12 +230,13 @@ const HeaderTabs = () => {
   const isPostPage = isPostView(location.pathname, params);
   const isProfilePage = isProfileView(location.pathname);
   const isSubplebbitPage = isSubplebbitView(location.pathname, params);
+  const isSubplebbitSettingsPage = isSubplebbitSettingsView(location.pathname, params);
   const isSubplebbitSubmitPage = isSubplebbitSubmitView(location.pathname, params);
   const isSubplebbitsPage = isSubplebbitsView(location.pathname);
 
   if (isPostPage) {
     return <CommentsButton />;
-  } else if (isHomePage || (isSubplebbitPage && !isSubplebbitSubmitPage) || isAllPage) {
+  } else if (isHomePage || (isSubplebbitPage && !isSubplebbitSubmitPage && !isSubplebbitSettingsPage) || isAllPage) {
     return <SortItems />;
   } else if ((isProfilePage || isAuthorPage) && !isPendingPage) {
     return <AuthorHeaderTabs />;
@@ -261,6 +263,7 @@ const HeaderTitle = ({ title, shortAddress }: { title: string; shortAddress: str
   const isSubmitPage = isSubmitView(location.pathname);
   const isSubplebbitPage = isSubplebbitView(location.pathname, params);
   const isSubplebbitSubmitPage = isSubplebbitSubmitView(location.pathname, params);
+  const isSubplebbitSettingsPage = isSubplebbitSettingsView(location.pathname, params);
   const isSubplebbitsPage = isSubplebbitsView(location.pathname);
 
   const subplebbitTitle = <Link to={`/p/${params.subplebbitAddress}`}>{title || shortAddress}</Link>;
@@ -274,8 +277,14 @@ const HeaderTitle = ({ title, shortAddress }: { title: string; shortAddress: str
         {subplebbitTitle}: {submitTitle}
       </>
     );
-  } else if (isPostPage || isSubplebbitPage) {
+  } else if (isPostPage || (isSubplebbitPage && !isSubplebbitSettingsPage)) {
     return subplebbitTitle;
+  } else if (isSubplebbitSettingsPage) {
+    return (
+      <>
+        {subplebbitTitle}: {t('settings')}
+      </>
+    );
   } else if (isSubmitPage) {
     return submitTitle;
   } else if (isSettingsPage) {
@@ -311,16 +320,17 @@ const Header = () => {
   const isSubplebbitPage = isSubplebbitView(location.pathname, params);
   const isSubmitPage = isSubmitView(location.pathname);
   const isSubplebbitSubmitPage = isSubplebbitSubmitView(location.pathname, params);
+  const isSubplebbitSettingsPage = isSubplebbitSettingsView(location.pathname, params);
 
   const account = useAccount();
   const authorComment = useComment({ commentCid: params?.commentCid });
   const author = isProfilePage ? account?.author : isAuthorPage ? authorComment?.author : null;
   const { imageUrl } = useAuthorAvatar({ author });
 
-  const hasFewTabs = isPostPage || isSubmitPage || isSubplebbitSubmitPage || isSettingsPage || isInboxPage;
+  const hasFewTabs = isPostPage || isSubmitPage || isSubplebbitSubmitPage || isSubplebbitSettingsPage || isSettingsPage || isInboxPage;
   const hasStickyHeader =
     isHomePage ||
-    (isSubplebbitPage && !isSubplebbitSubmitPage && !isPostPage && !isAboutPage) ||
+    (isSubplebbitPage && !isSubplebbitSubmitPage && !isSubplebbitSettingsPage && !isPostPage && !isAboutPage) ||
     (isProfilePage && !isAboutPage) ||
     isAllPage ||
     (isAuthorPage && !isAboutPage);
diff --git a/src/lib/utils/view-utils.ts b/src/lib/utils/view-utils.ts
index 30af1a22..b0d320a2 100644
--- a/src/lib/utils/view-utils.ts
+++ b/src/lib/utils/view-utils.ts
@@ -102,6 +102,10 @@ export const isSubplebbitView = (pathname: string, params: ParamsType): boolean
   return params.subplebbitAddress ? pathname.startsWith(`/p/${params.subplebbitAddress}`) : false;
 };
 
+export const isSubplebbitSettingsView = (pathname: string, params: ParamsType): boolean => {
+  return params.subplebbitAddress ? pathname === `/p/${params.subplebbitAddress}/settings` : false;
+};
+
 export const isSubplebbitSubmitView = (pathname: string, params: ParamsType): boolean => {
   return params.subplebbitAddress ? pathname === `/p/${params.subplebbitAddress}/submit` : false;
 };
diff --git a/src/views/subplebbit/subplebbit-settings/index.ts b/src/views/subplebbit/subplebbit-settings/index.ts
new file mode 100644
index 00000000..ed8a6555
--- /dev/null
+++ b/src/views/subplebbit/subplebbit-settings/index.ts
@@ -0,0 +1 @@
+export { default } from './subplebbit-settings';
diff --git a/src/views/subplebbit/subplebbit-settings/subplebbit-settings.module.css b/src/views/subplebbit/subplebbit-settings/subplebbit-settings.module.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/views/subplebbit/subplebbit-settings/subplebbit-settings.tsx b/src/views/subplebbit/subplebbit-settings/subplebbit-settings.tsx
new file mode 100644
index 00000000..aa0ce7f5
--- /dev/null
+++ b/src/views/subplebbit/subplebbit-settings/subplebbit-settings.tsx
@@ -0,0 +1,7 @@
+import styles from './subplebbit-settings.module.css';
+
+const SubplebbitSettings = () => {
+  return <div className={styles.content}>community settings</div>;
+};
+
+export default SubplebbitSettings;
diff --git a/src/views/subplebbits/subplebbits.module.css b/src/views/subplebbits/subplebbits.module.css
index aa7490ea..711eb640 100644
--- a/src/views/subplebbits/subplebbits.module.css
+++ b/src/views/subplebbits/subplebbits.module.css
@@ -106,7 +106,7 @@
   display: inline-flex;
   height: 13px;
   width: 13px;
-  margin: 2px 5px -2px 2px;
+  margin: 3px 5px -2px 2px;
 }
 
 .online {
diff --git a/src/views/subplebbits/subplebbits.tsx b/src/views/subplebbits/subplebbits.tsx
index 31d0f976..fdcc30d3 100644
--- a/src/views/subplebbits/subplebbits.tsx
+++ b/src/views/subplebbits/subplebbits.tsx
@@ -116,9 +116,7 @@ const Subplebbit = ({ subplebbit }: SubplebbitProps) => {
               <>
                 {t('members_count', { count: allActiveUserCount })}, {t('community_for', { date: getFormattedTimeDuration(createdAt) })}
                 <div className={styles.subplebbitPreferences}>
-                  <Link to={`/p/${address}/settings`} onClick={(e) => e.preventDefault()}>
-                    {t('preferences')}
-                  </Link>
+                  <Link to={`/p/${address}/settings`}>settings</Link>
                 </div>
               </>
             ) : (