feat(sidebar): add moderation tools and community settings link

src/components/sidebar/sidebar.module.css

@@ -177,6 +177,31 @@ a {
   padding-left: 40px;
 }
 
+.moderationTool {
+  margin: 5px 0;
+  text-transform: lowercase;
+}
+
+.selectedTool {
+  font-weight: bold;
+}
+
+.moderationTool a {
+  text-decoration: none;
+  color: var(--text-primary);
+  cursor: pointer;
+}
+
+.communitySettingsTool::before {
+  background-image: url('/public/assets/community_settings.png');
+  background-size: 16px 16px;
+  height: 16px;
+  width: 16px;
+  content: '';
+  float: left;
+  margin-right: 5px;
+}
+
 .postInfo {
   padding: 5px;
   border: 1px solid var(--border-primary);

src/components/sidebar/sidebar.tsx

@@ -1,11 +1,11 @@
 import { Link, useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { getShortAddress } from '@plebbit/plebbit-js';
-import { useBlock, Role, useSubplebbitStats, useAccountComment } from '@plebbit/plebbit-react-hooks';
+import { useAccount, useBlock, Role, useSubplebbitStats, useAccountComment } from '@plebbit/plebbit-react-hooks';
 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, isSubplebbitsView } from '../../lib/utils/view-utils';
+import { isAboutView, isAllView, isHomeView, isPendingView, isPostView, isSubplebbitSettingsView, isSubplebbitsView } from '../../lib/utils/view-utils';
 import SearchBar from '../search-bar';
 import SubscribeButton from '../subscribe-button';
 
@@ -73,6 +73,26 @@ const PostInfo = ({ address, cid, downvoteCount = 0, timestamp = 0, upvoteCount
   );
 };
 
+const ModerationTools = ({ address }: sidebarProps) => {
+  const { t } = useTranslation();
+  const location = useLocation();
+  const params = useParams();
+  const isInSubplebbitSettingsView = isSubplebbitSettingsView(location.pathname, params);
+
+  return (
+    <div className={styles.list}>
+      <div className={styles.listTitle}>moderation tools</div>
+      <ul className={`${styles.listContent} ${styles.modsList}`}>
+        <li className={`${styles.moderationTool} ${isInSubplebbitSettingsView ? styles.selectedTool : ''}`}>
+          <Link className={styles.communitySettingsTool} to={`/p/${address}/settings`}>
+            {t('community_settings')}
+          </Link>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
 const Sidebar = ({ address, cid, createdAt, description, downvoteCount = 0, roles, rules, timestamp = 0, title, updatedAt, upvoteCount = 0 }: sidebarProps) => {
   const { t } = useTranslation();
   const { allActiveUserCount, hourActiveUserCount } = useSubplebbitStats({ subplebbitAddress: address });
@@ -114,6 +134,9 @@ const Sidebar = ({ address, cid, createdAt, description, downvoteCount = 0, role
     alert('Not available in this version. You can create a community with the CLI: https://github.com/plebbit/plebbit-cli');
   };
 
+  const account = useAccount();
+  const isModerator = roles?.[account.author?.address]?.role;
+
   return (
     <div className={`${isInAboutView ? styles.about : styles.sidebar}`}>
       <SearchBar />
@@ -163,13 +186,11 @@ const Sidebar = ({ address, cid, createdAt, description, downvoteCount = 0, role
               <span className={styles.blockSub} onClick={blockConfirm}>
                 {blocked ? t('unblock_community') : t('block_community')}
               </span>
-              <span className={styles.communitySettings}>
-                <Link to={`/p/${address}/settings`}>{t('settings')}</Link>
-              </span>
             </div>
           </div>
         </div>
       )}
+      {isModerator && <ModerationTools address={address} />}
       {roles && <ModeratorsList roles={roles} />}
     </div>
   );

src/views/subplebbit/subplebbit-settings/subplebbit-settings.module.css

@@ -1,5 +1,20 @@
+@media (max-width: 768px) {
+  .content {
+    padding: 7px 0px 0px 0px;
+  }
+
+  .sidebar {
+    display: none;
+  }
+}
+
+@media (min-width: 768px) {
+  .content {
+    padding: 7px 5px 0px 5px;
+  }
+}
+
 .content {
-  padding: 7px 5px 50px 5px;
   color: var(--text);
 }
 

src/views/subplebbit/subplebbit-settings/subplebbit-settings.tsx

@@ -5,6 +5,7 @@ import { RolesCollection } from '../../../lib/utils/user-utils';
 import { useTranslation } from 'react-i18next';
 import stringify from 'json-stringify-pretty-compact';
 import styles from './subplebbit-settings.module.css';
+import Sidebar from '../../../components/sidebar';
 
 const isElectron = window.electron && window.electron.isElectron;
 
@@ -200,7 +201,7 @@ const SubplebbitSettings = () => {
   const subplebbit = useSubplebbit({ subplebbitAddress });
   const userRole = subplebbit?.roles?.[account.author?.address]?.role;
   const isAdmin = userRole === 'admin' || userRole === 'owner';
-  const { address, description, rules, suggested, roles, title } = subplebbit || {};
+  const { address, createdAt, description, rules, suggested, roles, title, updatedAt } = subplebbit || {};
 
   const [text, setText] = useState('');
   let usePublishSubplebbitEditOptions;
@@ -263,6 +264,9 @@ const SubplebbitSettings = () => {
 
   return (
     <div className={styles.content}>
+      <div className={styles.sidebar}>
+        <Sidebar address={subplebbitAddress} createdAt={createdAt} description={description} roles={roles} rules={rules} title={title} updatedAt={updatedAt} />
+      </div>
       {!isAdmin && <div className={styles.infobar}>only the admins and the owner of a community can edit its settings</div>}
       {!isElectron && isAdmin && <div className={styles.infobar}>you must be using the desktop app to edit community settings</div>}
       <Title title={title} />

src/views/subplebbit/subplebbit.module.css

@@ -2,6 +2,7 @@
   padding-left: 5px;
 }
 
+/* position virtuoso window content relatively to sidebar */
 div[data-viewport-type="window"] {
   position: relative !important;
 }

src/views/subplebbits/subplebbits.tsx

@@ -51,7 +51,6 @@ const Tabs = () => {
 const Infobar = () => {
   const account = useAccount();
   const { accountSubplebbits } = useAccountSubplebbits();
-  console.log(accountSubplebbits);
   const subscriptions = account?.subscriptions || [];
   const { t } = useTranslation();
   const location = useLocation();