From c383d90c5f711fcb83d02cbf99e9a10f6f50ac4f Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Fri, 19 Apr 2024 17:35:31 +0200
Subject: [PATCH 1/8] fix(home): remove feed render delay for subscriptions

---
 src/lib/utils/addresses-utils.ts | 15 +++++++++++++++
 src/views/home/home.tsx          | 17 ++++-------------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/lib/utils/addresses-utils.ts b/src/lib/utils/addresses-utils.ts
index 3fa7d031..7cfde7d5 100644
--- a/src/lib/utils/addresses-utils.ts
+++ b/src/lib/utils/addresses-utils.ts
@@ -25,6 +25,21 @@ export const useDefaultSubplebbitAddresses = () => {
   return useMemo(() => defaultSubplebbits.map((subplebbit: Subplebbit) => subplebbit.address), [defaultSubplebbits]);
 };
 
+export const useDefaultAndSubscriptionsSubplebbitAddresses = () => {
+  const subscriptions = useAccount()?.subscriptions ?? [];
+  const defaultSubplebbitAddresses = useDefaultSubplebbitAddresses();
+
+  return useMemo(() => {
+    const subplebbitAddresses = new Set(defaultSubplebbitAddresses);
+
+    subscriptions.forEach((address: string) => {
+      subplebbitAddresses.add(address);
+    });
+
+    return Array.from(subplebbitAddresses);
+  }, [subscriptions, defaultSubplebbitAddresses]);
+};
+
 export const useDefaultAndSubscriptionsSubplebbits = (): SubplebbitWithDisplay[] => {
   const account = useAccount();
   const { subplebbitAddress: subplebbitAddressParam } = useParams();
diff --git a/src/views/home/home.tsx b/src/views/home/home.tsx
index 1619bbd5..eca0c001 100644
--- a/src/views/home/home.tsx
+++ b/src/views/home/home.tsx
@@ -1,13 +1,13 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
-import { useAccount, useFeed } from '@plebbit/plebbit-react-hooks';
+import { useFeed } from '@plebbit/plebbit-react-hooks';
 import { useTranslation } from 'react-i18next';
 import styles from './home.module.css';
 import LoadingEllipsis from '../../components/loading-ellipsis';
 import Post from '../../components/post';
 import Sidebar from '../../components/sidebar';
-import { useDefaultSubplebbitAddresses } from '../../lib/utils/addresses-utils';
+import { useDefaultAndSubscriptionsSubplebbitAddresses } from '../../lib/utils/addresses-utils';
 import useFeedStateString from '../../hooks/use-feed-state-string';
 import useTimeFilter, { TimeFilterKey } from '../../hooks/use-time-filter';
 
@@ -15,16 +15,7 @@ const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
 
 const Home = () => {
   const { t } = useTranslation();
-  const account = useAccount();
-  const defaultSubplebbitAddresses = useDefaultSubplebbitAddresses();
-  const [subplebbitAddresses, setSubplebbitAddresses] = useState<string[] | undefined>(undefined);
-
-  useEffect(() => {
-    if (defaultSubplebbitAddresses && account?.subscriptions) {
-      setSubplebbitAddresses(defaultSubplebbitAddresses.concat(account.subscriptions));
-    }
-  }, [defaultSubplebbitAddresses, account?.subscriptions]);
-
+  const subplebbitAddresses = useDefaultAndSubscriptionsSubplebbitAddresses();
   const params = useParams<{ sortType?: string; timeFilterName?: string }>();
   const sortType = params?.sortType || 'hot';
   const timeFilterName = params.timeFilterName as TimeFilterKey;

From 028a6e5e0bf06c29fb022dc81c082baa5dbd498c Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Fri, 19 Apr 2024 17:46:52 +0200
Subject: [PATCH 2/8] refactor: move addresses hooks in use-default-subplebbits

---
 src/components/topbar/topbar.tsx      |  2 +-
 src/hooks/use-default-subplebbits.ts  | 77 +++++++++++++++++++++++-
 src/lib/utils/addresses-utils.ts      | 87 ---------------------------
 src/views/all/all.tsx                 |  2 +-
 src/views/home/home.tsx               |  2 +-
 src/views/submit-page/submit-page.tsx |  7 ++-
 src/views/subplebbits/subplebbits.tsx |  2 +-
 7 files changed, 84 insertions(+), 95 deletions(-)
 delete mode 100644 src/lib/utils/addresses-utils.ts

diff --git a/src/components/topbar/topbar.tsx b/src/components/topbar/topbar.tsx
index 90a9fa8e..4c4b1860 100644
--- a/src/components/topbar/topbar.tsx
+++ b/src/components/topbar/topbar.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useAccount } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import styles from './topbar.module.css';
-import { useDefaultSubplebbitAddresses } from '../../lib/utils/addresses-utils';
+import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
 import useTimeFilter, { TimeFilterKey } from '../../hooks/use-time-filter';
 import { isAllView, isHomeView, isSubplebbitView } from '../../lib/utils/view-utils';
 
diff --git a/src/hooks/use-default-subplebbits.ts b/src/hooks/use-default-subplebbits.ts
index 9bf9173f..1e64fac6 100644
--- a/src/hooks/use-default-subplebbits.ts
+++ b/src/hooks/use-default-subplebbits.ts
@@ -1,4 +1,7 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useAccount } from '@plebbit/plebbit-react-hooks';
+import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 
 interface Subplebbit {
   title?: string;
@@ -7,9 +10,13 @@ interface Subplebbit {
   features?: string[];
 }
 
+export interface SubplebbitWithDisplay extends Subplebbit {
+  displayAddress: string;
+}
+
 let cache: Subplebbit[] | null = null;
 
-const useDefaultSubplebbits = () => {
+export const useDefaultSubplebbits = () => {
   const [subplebbits, setSubplebbits] = useState<Subplebbit[]>([]);
 
   useEffect(() => {
@@ -33,4 +40,68 @@ const useDefaultSubplebbits = () => {
   return cache || subplebbits;
 };
 
-export default useDefaultSubplebbits;
+export const useDefaultSubplebbitAddresses = () => {
+  const defaultSubplebbits = useDefaultSubplebbits();
+  return useMemo(() => defaultSubplebbits.map((subplebbit: Subplebbit) => subplebbit.address), [defaultSubplebbits]);
+};
+
+export const useDefaultAndSubscriptionsSubplebbitAddresses = () => {
+  const subscriptions = useAccount()?.subscriptions ?? [];
+  const defaultSubplebbitAddresses = useDefaultSubplebbitAddresses();
+
+  return useMemo(() => {
+    const subplebbitAddresses = new Set(defaultSubplebbitAddresses);
+
+    subscriptions.forEach((address: string) => {
+      subplebbitAddresses.add(address);
+    });
+
+    return Array.from(subplebbitAddresses);
+  }, [subscriptions, defaultSubplebbitAddresses]);
+};
+
+export const useDefaultAndSubscriptionsSubplebbits = (): SubplebbitWithDisplay[] => {
+  const account = useAccount();
+  const { subplebbitAddress: subplebbitAddressParam } = useParams();
+  const defaultSubplebbits = useDefaultSubplebbits();
+
+  return useMemo(() => {
+    const subplebbitsObj: { [key: string]: SubplebbitWithDisplay } = {};
+
+    const addSubplebbit = (subplebbit: Subplebbit) => {
+      let displayAddress = subplebbit.address.includes('.') ? subplebbit.address : Plebbit.getShortAddress(subplebbit.address);
+
+      // Append title in parentheses only if the address doesn't contain '.'
+      if (!subplebbit.address.includes('.') && subplebbit.title) {
+        displayAddress += ` (${subplebbit.title})`;
+      }
+
+      if (displayAddress.length > 40) {
+        displayAddress = displayAddress.substring(0, 37) + '...';
+      }
+
+      subplebbitsObj[subplebbit.address] = { ...subplebbit, displayAddress };
+    };
+
+    // Add default subplebbits
+    defaultSubplebbits.forEach((subplebbit) => {
+      if (subplebbit.address) {
+        addSubplebbit(subplebbit);
+      }
+    });
+
+    // Add subscribed subplebbits
+    account?.subscriptions?.forEach((address: string) => {
+      if (!subplebbitsObj[address]) {
+        addSubplebbit({ address });
+      }
+    });
+
+    // Add the current subplebbit if not already in the list
+    if (subplebbitAddressParam && !subplebbitsObj[subplebbitAddressParam]) {
+      addSubplebbit({ address: subplebbitAddressParam });
+    }
+
+    return Object.values(subplebbitsObj);
+  }, [account?.subscriptions, defaultSubplebbits, subplebbitAddressParam]);
+};
diff --git a/src/lib/utils/addresses-utils.ts b/src/lib/utils/addresses-utils.ts
deleted file mode 100644
index 7cfde7d5..00000000
--- a/src/lib/utils/addresses-utils.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { useMemo } from 'react';
-import { useParams } from 'react-router-dom';
-import { useAccount } from '@plebbit/plebbit-react-hooks';
-import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
-import useDefaultSubplebbits from '../../hooks/use-default-subplebbits';
-
-interface Subplebbit {
-  title?: string;
-  address: string;
-  tags?: string[];
-  features?: string[];
-}
-
-export interface SubplebbitWithDisplay extends Subplebbit {
-  displayAddress: string;
-}
-
-export const getRandomSubplebbits = (addresses: string[], count: number) => {
-  let shuffled = addresses.sort(() => 0.5 - Math.random());
-  return shuffled.slice(0, count);
-};
-
-export const useDefaultSubplebbitAddresses = () => {
-  const defaultSubplebbits = useDefaultSubplebbits();
-  return useMemo(() => defaultSubplebbits.map((subplebbit: Subplebbit) => subplebbit.address), [defaultSubplebbits]);
-};
-
-export const useDefaultAndSubscriptionsSubplebbitAddresses = () => {
-  const subscriptions = useAccount()?.subscriptions ?? [];
-  const defaultSubplebbitAddresses = useDefaultSubplebbitAddresses();
-
-  return useMemo(() => {
-    const subplebbitAddresses = new Set(defaultSubplebbitAddresses);
-
-    subscriptions.forEach((address: string) => {
-      subplebbitAddresses.add(address);
-    });
-
-    return Array.from(subplebbitAddresses);
-  }, [subscriptions, defaultSubplebbitAddresses]);
-};
-
-export const useDefaultAndSubscriptionsSubplebbits = (): SubplebbitWithDisplay[] => {
-  const account = useAccount();
-  const { subplebbitAddress: subplebbitAddressParam } = useParams();
-  const defaultSubplebbits = useDefaultSubplebbits();
-
-  return useMemo(() => {
-    const subplebbitsObj: { [key: string]: SubplebbitWithDisplay } = {};
-
-    const addSubplebbit = (subplebbit: Subplebbit) => {
-      let displayAddress = subplebbit.address.includes('.') ? subplebbit.address : Plebbit.getShortAddress(subplebbit.address);
-
-      // Append title in parentheses only if the address doesn't contain '.'
-      if (!subplebbit.address.includes('.') && subplebbit.title) {
-        displayAddress += ` (${subplebbit.title})`;
-      }
-
-      if (displayAddress.length > 40) {
-        displayAddress = displayAddress.substring(0, 37) + '...';
-      }
-
-      subplebbitsObj[subplebbit.address] = { ...subplebbit, displayAddress };
-    };
-
-    // Add default subplebbits
-    defaultSubplebbits.forEach((subplebbit) => {
-      if (subplebbit.address) {
-        addSubplebbit(subplebbit);
-      }
-    });
-
-    // Add subscribed subplebbits
-    account?.subscriptions?.forEach((address: string) => {
-      if (!subplebbitsObj[address]) {
-        addSubplebbit({ address });
-      }
-    });
-
-    // Add the current subplebbit if not already in the list
-    if (subplebbitAddressParam && !subplebbitsObj[subplebbitAddressParam]) {
-      addSubplebbit({ address: subplebbitAddressParam });
-    }
-
-    return Object.values(subplebbitsObj);
-  }, [account?.subscriptions, defaultSubplebbits, subplebbitAddressParam]);
-};
diff --git a/src/views/all/all.tsx b/src/views/all/all.tsx
index 707535fe..e7e8a9c2 100644
--- a/src/views/all/all.tsx
+++ b/src/views/all/all.tsx
@@ -7,7 +7,7 @@ import styles from '../home/home.module.css';
 import LoadingEllipsis from '../../components/loading-ellipsis';
 import Post from '../../components/post';
 import Sidebar from '../../components/sidebar';
-import { useDefaultSubplebbitAddresses } from '../../lib/utils/addresses-utils';
+import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
 import useFeedStateString from '../../hooks/use-feed-state-string';
 import useTimeFilter, { TimeFilterKey } from '../../hooks/use-time-filter';
 import _ from 'lodash';
diff --git a/src/views/home/home.tsx b/src/views/home/home.tsx
index eca0c001..038472d0 100644
--- a/src/views/home/home.tsx
+++ b/src/views/home/home.tsx
@@ -7,7 +7,7 @@ import styles from './home.module.css';
 import LoadingEllipsis from '../../components/loading-ellipsis';
 import Post from '../../components/post';
 import Sidebar from '../../components/sidebar';
-import { useDefaultAndSubscriptionsSubplebbitAddresses } from '../../lib/utils/addresses-utils';
+import { useDefaultAndSubscriptionsSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
 import useFeedStateString from '../../hooks/use-feed-state-string';
 import useTimeFilter, { TimeFilterKey } from '../../hooks/use-time-filter';
 
diff --git a/src/views/submit-page/submit-page.tsx b/src/views/submit-page/submit-page.tsx
index b605d6d5..bc79cc93 100644
--- a/src/views/submit-page/submit-page.tsx
+++ b/src/views/submit-page/submit-page.tsx
@@ -4,7 +4,7 @@ import { PublishCommentOptions, useAccount, usePublishComment, useSubplebbit } f
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import { Trans, useTranslation } from 'react-i18next';
 import { create } from 'zustand';
-import { getRandomSubplebbits, useDefaultSubplebbitAddresses } from '../../lib/utils/addresses-utils';
+import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
 import { alertChallengeVerificationFailed } from '../../lib/utils/challenge-utils';
 import { getLinkMediaInfo } from '../../lib/utils/media-utils';
 import { isValidURL } from '../../lib/utils/url-utils';
@@ -157,6 +157,11 @@ const Submit = () => {
 
   const subsDescription = <div className={styles.subsDescription}>{subscriptions?.length > 5 ? t('submit_subscriptions') : t('submit_subscriptions_notice')}</div>;
 
+  const getRandomSubplebbits = (addresses: string[], count: number) => {
+    let shuffled = addresses.sort(() => 0.5 - Math.random());
+    return shuffled.slice(0, count);
+  };
+
   const [randomSubplebbits, setRandomSubplebbits] = useState<string[]>([]);
   useEffect(() => {
     // Generate random subplebbits only once when the component mounts
diff --git a/src/views/subplebbits/subplebbits.tsx b/src/views/subplebbits/subplebbits.tsx
index 2d3af546..d6c3132f 100644
--- a/src/views/subplebbits/subplebbits.tsx
+++ b/src/views/subplebbits/subplebbits.tsx
@@ -14,7 +14,7 @@ import {
   isSubplebbitsVotePassingView,
   isSubplebbitsVoteRejectingView,
 } from '../../lib/utils/view-utils';
-import { useDefaultSubplebbitAddresses } from '../../lib/utils/addresses-utils';
+import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
 import Markdown from '../../components/markdown';
 import Label from '../../components/post/label';
 import Sidebar from '../../components/sidebar';

From 25ff98e09543195e9f5f5a30026d3ffc187a5871 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sat, 20 Apr 2024 22:12:31 +0200
Subject: [PATCH 3/8] feat(settings): add plebbit options route

---
 src/app.tsx                                   |  1 +
 src/components/header/header.module.css       |  2 +-
 src/components/header/header.tsx              | 30 ++++++++-
 src/lib/utils/view-utils.ts                   |  4 ++
 src/views/settings/plebbit-options/index.ts   |  1 +
 .../plebbit-options.module.css                | 29 ++++++++
 .../plebbit-options/plebbit-options.tsx       | 67 +++++++++++++++++++
 src/views/settings/settings.tsx               | 34 ++++++----
 8 files changed, 153 insertions(+), 15 deletions(-)
 create mode 100644 src/views/settings/plebbit-options/index.ts
 create mode 100644 src/views/settings/plebbit-options/plebbit-options.module.css
 create mode 100644 src/views/settings/plebbit-options/plebbit-options.tsx

diff --git a/src/app.tsx b/src/app.tsx
index b08be450..c7cf68b9 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -113,6 +113,7 @@ const App = () => {
 
             <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 />} />
 
diff --git a/src/components/header/header.module.css b/src/components/header/header.module.css
index ad85da1a..bd2daa5c 100644
--- a/src/components/header/header.module.css
+++ b/src/components/header/header.module.css
@@ -131,7 +131,7 @@
 .tabMenu li .choice {
   color: var(--text-primary);
   background-color: var(--background-secondary);
-  border-bottom: 0px solid var(--border-primary);
+  border-bottom: 1px solid var(--border-primary);
 }
 
 .tabs {
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index 2aecd3b7..d6c970a4 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -34,6 +34,7 @@ import {
   isSubplebbitsVoteView,
   isSubplebbitsOwnerView,
   isProfileUpvotedView,
+  isSettingsPlebbitOptionsView,
 } from '../../lib/utils/view-utils';
 import useTheme from '../../hooks/use-theme';
 import { TimeFilterKey } from '../../hooks/use-time-filter';
@@ -243,6 +244,26 @@ const SubplebbitsHeaderTabs = () => {
   );
 };
 
+const SettingsHeaderTabs = () => {
+  const { t } = useTranslation();
+  const isInSettingsPlebbitOptionsView = isSettingsPlebbitOptionsView(useLocation().pathname);
+
+  return (
+    <>
+      <li>
+        <Link to={'/settings'} className={isInSettingsPlebbitOptionsView ? styles.choice : styles.selected}>
+          {t('general')}
+        </Link>
+      </li>
+      <li>
+        <Link to={'/settings/plebbit-options'} className={isInSettingsPlebbitOptionsView ? styles.selected : styles.choice}>
+          {t('plebbit_options')}
+        </Link>
+      </li>
+    </>
+  );
+};
+
 const HeaderTabs = () => {
   const { t } = useTranslation();
   const params = useParams();
@@ -260,6 +281,8 @@ const HeaderTabs = () => {
   const isInSubplebbitSubmitView = isSubplebbitSubmitView(location.pathname, params);
   const isInSubplebbitsView = isSubplebbitsView(location.pathname);
   const isInCreateSubplebbitView = isCreateSubplebbitView(location.pathname);
+  const isInSettingsView = isSettingsView(location.pathname);
+  const isInSettingsPlebbitOptionsView = isSettingsPlebbitOptionsView(location.pathname);
 
   if (isInPostView) {
     return <CommentsButton />;
@@ -273,6 +296,8 @@ const HeaderTabs = () => {
     return <InboxHeaderTabs />;
   } else if (isInSubplebbitsView && !isInCreateSubplebbitView) {
     return <SubplebbitsHeaderTabs />;
+  } else if (isInSettingsView || isInSettingsPlebbitOptionsView) {
+    return <SettingsHeaderTabs />;
   }
   return null;
 };
@@ -288,6 +313,7 @@ const HeaderTitle = ({ title, shortAddress }: { title: string; shortAddress: str
   const isInPostView = isPostView(location.pathname, params);
   const isInProfileView = isProfileView(location.pathname);
   const isInSettingsView = isSettingsView(location.pathname);
+  const isInSettingsPlebbitOptionsView = isSettingsPlebbitOptionsView(location.pathname);
   const isInSubmitView = isSubmitView(location.pathname);
   const isInSubplebbitView = isSubplebbitView(location.pathname, params);
   const isInSubplebbitSubmitView = isSubplebbitSubmitView(location.pathname, params);
@@ -317,7 +343,7 @@ const HeaderTitle = ({ title, shortAddress }: { title: string; shortAddress: str
     );
   } else if (isInSubmitView) {
     return submitTitle;
-  } else if (isInSettingsView) {
+  } else if (isInSettingsView || isInSettingsPlebbitOptionsView) {
     return t('preferences');
   } else if (isInProfileView) {
     return profileTitle;
@@ -360,7 +386,7 @@ const Header = () => {
   const isInSubplebbitSettingsView = isSubplebbitSettingsView(location.pathname, params);
   const isInNotFoundView = useNotFoundStore((state) => state.isNotFound);
 
-  const hasFewTabs = isInPostView || isInSubmitView || isInSubplebbitSubmitView || isInSubplebbitSettingsView || isInSettingsView || isInInboxView;
+  const hasFewTabs = isInPostView || isInSubmitView || isInSubplebbitSubmitView || isInSubplebbitSettingsView || isInSettingsView || isInInboxView || isInSettingsView;
   const hasStickyHeader =
     isInHomeView ||
     isInNotFoundView ||
diff --git a/src/lib/utils/view-utils.ts b/src/lib/utils/view-utils.ts
index 12c56139..e31bbb2a 100644
--- a/src/lib/utils/view-utils.ts
+++ b/src/lib/utils/view-utils.ts
@@ -126,6 +126,10 @@ export const isSettingsView = (pathname: string): boolean => {
   return pathname === '/settings';
 };
 
+export const isSettingsPlebbitOptionsView = (pathname: string): boolean => {
+  return pathname === '/settings/plebbit-options';
+};
+
 export const isSubmitView = (pathname: string): boolean => {
   return pathname === '/submit';
 };
diff --git a/src/views/settings/plebbit-options/index.ts b/src/views/settings/plebbit-options/index.ts
new file mode 100644
index 00000000..705f8559
--- /dev/null
+++ b/src/views/settings/plebbit-options/index.ts
@@ -0,0 +1 @@
+export { default } from './plebbit-options';
diff --git a/src/views/settings/plebbit-options/plebbit-options.module.css b/src/views/settings/plebbit-options/plebbit-options.module.css
new file mode 100644
index 00000000..1b3843fe
--- /dev/null
+++ b/src/views/settings/plebbit-options/plebbit-options.module.css
@@ -0,0 +1,29 @@
+.content {
+  margin: 7px 5px 40px 5px;
+  font-size: 12px;
+  color: var(--text);
+  width: 100%;
+}
+
+.category {
+  display: flex;
+  align-items: flex-start;
+}
+
+.categoryTitle {
+  flex: 0 0 169px;
+  height: 100%;
+  padding: 10px;
+  font-weight: bold;
+  text-align: right;
+  text-transform: lowercase;
+}
+
+.categorySettings {
+  flex-grow: 1;
+  padding: 10px 0;
+}
+
+.settingTitle {
+  font-style: italic;
+}
\ No newline at end of file
diff --git a/src/views/settings/plebbit-options/plebbit-options.tsx b/src/views/settings/plebbit-options/plebbit-options.tsx
new file mode 100644
index 00000000..60f28b11
--- /dev/null
+++ b/src/views/settings/plebbit-options/plebbit-options.tsx
@@ -0,0 +1,67 @@
+import styles from './plebbit-options.module.css';
+import { useTranslation } from 'react-i18next';
+
+const PlebbitRPCSettings = () => {
+  const { t } = useTranslation();
+
+  return <div className={styles.plebbitRPCSettings}></div>;
+};
+
+const IPFSGatewaysSettings = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.ipfsGatewaysSettings}>
+      <textarea className={styles.input} />
+      <div></div>
+      <span className={styles.settingTitle}>profile pics gateway</span>
+    </div>
+  );
+};
+
+const PubsubProvidersSettings = () => {
+  const { t } = useTranslation();
+
+  return <div className={styles.pubsubProvidersSettings}>test</div>;
+};
+
+const BlockchainProvidersSettings = () => {
+  const { t } = useTranslation();
+
+  return <div className={styles.blockchainProvidersSettings}>test</div>;
+};
+
+const PlebbitOptions = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.content}>
+      <div className={styles.category}>
+        <span className={styles.categoryTitle}>plebbit rpc</span>
+        <span className={styles.categorySettings}>
+          <PlebbitRPCSettings />
+        </span>
+      </div>
+      <div className={styles.category}>
+        <span className={styles.categoryTitle}>ipfs gateways</span>
+        <span className={styles.categorySettings}>
+          <IPFSGatewaysSettings />
+        </span>
+      </div>
+      <div className={styles.category}>
+        <span className={styles.categoryTitle}>pubsub providers</span>
+        <span className={styles.categorySettings}>
+          <PubsubProvidersSettings />
+        </span>
+      </div>
+      <div className={styles.category}>
+        <span className={styles.categoryTitle}>blockchain providers</span>
+        <span className={styles.categorySettings}>
+          <BlockchainProvidersSettings />
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default PlebbitOptions;
diff --git a/src/views/settings/settings.tsx b/src/views/settings/settings.tsx
index 966e2482..4c6aebe7 100644
--- a/src/views/settings/settings.tsx
+++ b/src/views/settings/settings.tsx
@@ -1,10 +1,13 @@
 import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
 import { setAccount, useAccount } from '@plebbit/plebbit-react-hooks';
+import { isSettingsPlebbitOptionsView } from '../../lib/utils/view-utils';
 import styles from './settings.module.css';
 import AccountSettings from './account-settings';
 import AddressSettings from './address-settings';
 import AvatarSettings from './avatar-settings';
+import PlebbitOptions from './plebbit-options';
 import WalletSettings from './wallet-settings';
 import useTheme from '../../hooks/use-theme';
 import packageJson from '../../../package.json';
@@ -144,20 +147,11 @@ const DisplayNameSetting = () => {
   );
 };
 
-const Settings = () => {
+const GeneralSettings = () => {
   const { t } = useTranslation();
 
-  useEffect(() => {
-    window.scrollTo(0, 0);
-  }, []);
-
-  const documentTitle = `${_.startCase(t('preferences'))} - Seedit`;
-  useEffect(() => {
-    document.title = documentTitle;
-  }, [documentTitle]);
-
   return (
-    <div className={styles.content}>
+    <>
       <div className={styles.category}>
         <span className={styles.categoryTitle}>{t('version')}</span>
         <span className={styles.categorySettings}>
@@ -227,8 +221,24 @@ const Settings = () => {
           <AccountSettings />
         </span>
       </div>
-    </div>
+    </>
   );
 };
 
+const Settings = () => {
+  const { t } = useTranslation();
+  const isInSettingsPlebbitOptionsView = isSettingsPlebbitOptionsView(useLocation().pathname);
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  const documentTitle = `${_.startCase(t('preferences'))} - Seedit`;
+  useEffect(() => {
+    document.title = documentTitle;
+  }, [documentTitle]);
+
+  return <div className={styles.content}>{isInSettingsPlebbitOptionsView ? <PlebbitOptions /> : <GeneralSettings />}</div>;
+};
+
 export default Settings;

From 3a03f8291c1b3eaeb5af85ce49194379d8d5241e Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sat, 20 Apr 2024 22:16:53 +0200
Subject: [PATCH 4/8] chore(translations): plebbit options, general

---
 public/translations/ar/default.json  | 4 +++-
 public/translations/bn/default.json  | 4 +++-
 public/translations/cs/default.json  | 4 +++-
 public/translations/da/default.json  | 4 +++-
 public/translations/de/default.json  | 4 +++-
 public/translations/el/default.json  | 4 +++-
 public/translations/en/default.json  | 4 +++-
 public/translations/es/default.json  | 4 +++-
 public/translations/fa/default.json  | 4 +++-
 public/translations/fi/default.json  | 4 +++-
 public/translations/fil/default.json | 4 +++-
 public/translations/fr/default.json  | 4 +++-
 public/translations/he/default.json  | 4 +++-
 public/translations/hi/default.json  | 4 +++-
 public/translations/hu/default.json  | 4 +++-
 public/translations/id/default.json  | 4 +++-
 public/translations/it/default.json  | 4 +++-
 public/translations/ja/default.json  | 4 +++-
 public/translations/ko/default.json  | 4 +++-
 public/translations/mr/default.json  | 4 +++-
 public/translations/nl/default.json  | 4 +++-
 public/translations/no/default.json  | 4 +++-
 public/translations/pl/default.json  | 4 +++-
 public/translations/pt/default.json  | 4 +++-
 public/translations/ro/default.json  | 4 +++-
 public/translations/ru/default.json  | 4 +++-
 public/translations/sq/default.json  | 4 +++-
 public/translations/sv/default.json  | 4 +++-
 public/translations/te/default.json  | 4 +++-
 public/translations/th/default.json  | 4 +++-
 public/translations/tr/default.json  | 4 +++-
 public/translations/uk/default.json  | 4 +++-
 public/translations/ur/default.json  | 4 +++-
 public/translations/vi/default.json  | 4 +++-
 public/translations/zh/default.json  | 4 +++-
 35 files changed, 105 insertions(+), 35 deletions(-)

diff --git a/public/translations/ar/default.json b/public/translations/ar/default.json
index cb8d44a1..9aa81b5f 100644
--- a/public/translations/ar/default.json
+++ b/public/translations/ar/default.json
@@ -300,5 +300,7 @@
   "undelete": "إلغاء الحذف",
   "loading_comments": "تحميل التعليقات",
   "you_blocked_community": "لقد حظرت هذه المجتمعة",
-  "show": "اظهر"
+  "show": "اظهر",
+  "plebbit_options": "خيارات plebbit",
+  "general": "عام"
 }
\ No newline at end of file
diff --git a/public/translations/bn/default.json b/public/translations/bn/default.json
index 8319722d..27e36ea8 100644
--- a/public/translations/bn/default.json
+++ b/public/translations/bn/default.json
@@ -300,5 +300,7 @@
   "undelete": "মুছে ফেলা প্রত্যাহার",
   "loading_comments": "মন্তব্য লোড হচ্ছে",
   "you_blocked_community": "আপনি এই সম্প্রদায়টি ব্লক করেছেন",
-  "show": "দেখান"
+  "show": "দেখান",
+  "plebbit_options": "প্লেবিট বিকল্প",
+  "general": "সাধারণ"
 }
\ No newline at end of file
diff --git a/public/translations/cs/default.json b/public/translations/cs/default.json
index 219bdebb..9b3d45d9 100644
--- a/public/translations/cs/default.json
+++ b/public/translations/cs/default.json
@@ -300,5 +300,7 @@
   "undelete": "Obnovit smazání",
   "loading_comments": "Načítání komentářů",
   "you_blocked_community": "Zablokovali jste tuto komunitu",
-  "show": "ukázat"
+  "show": "ukázat",
+  "plebbit_options": "plebbit možnosti",
+  "general": "obecné"
 }
\ No newline at end of file
diff --git a/public/translations/da/default.json b/public/translations/da/default.json
index 19a4943c..3b9a9f2d 100644
--- a/public/translations/da/default.json
+++ b/public/translations/da/default.json
@@ -300,5 +300,7 @@
   "undelete": "Gendan sletning",
   "loading_comments": "Indlæser kommentarer",
   "you_blocked_community": "Du har blokeret dette fællesskab",
-  "show": "vise"
+  "show": "vise",
+  "plebbit_options": "plebbit indstillinger",
+  "general": "almindelig"
 }
\ No newline at end of file
diff --git a/public/translations/de/default.json b/public/translations/de/default.json
index 8f2645f8..b615cc2a 100644
--- a/public/translations/de/default.json
+++ b/public/translations/de/default.json
@@ -300,5 +300,7 @@
   "undelete": "Wiederherstellen",
   "loading_comments": "Lade Kommentare",
   "you_blocked_community": "Du hast diese Gemeinschaft blockiert",
-  "show": "zeigen"
+  "show": "zeigen",
+  "plebbit_options": "plebbit optionen",
+  "general": "allgemein"
 }
\ No newline at end of file
diff --git a/public/translations/el/default.json b/public/translations/el/default.json
index d2600da2..4a3df98d 100644
--- a/public/translations/el/default.json
+++ b/public/translations/el/default.json
@@ -300,5 +300,7 @@
   "undelete": "Ανάκτηση διαγραφής",
   "loading_comments": "Φόρτωση σχολίων",
   "you_blocked_community": "Έχετε αποκλείσει αυτή την κοινότητα",
-  "show": "εμφάνιση"
+  "show": "εμφάνιση",
+  "plebbit_options": "επιλογές plebbit",
+  "general": "γενικός"
 }
\ No newline at end of file
diff --git a/public/translations/en/default.json b/public/translations/en/default.json
index 447346c1..d876acd4 100644
--- a/public/translations/en/default.json
+++ b/public/translations/en/default.json
@@ -300,5 +300,7 @@
   "undelete": "Undelete",
   "loading_comments": "Loading comments",
   "you_blocked_community": "You blocked this community",
-  "show": "show"
+  "show": "show",
+  "plebbit_options": "plebbit options",
+  "general": "general"
 }
\ No newline at end of file
diff --git a/public/translations/es/default.json b/public/translations/es/default.json
index 0cc32f3f..e3de8195 100644
--- a/public/translations/es/default.json
+++ b/public/translations/es/default.json
@@ -300,5 +300,7 @@
   "undelete": "Recuperar",
   "loading_comments": "Cargando comentarios",
   "you_blocked_community": "Has bloqueado esta comunidad",
-  "show": "mostrar"
+  "show": "mostrar",
+  "plebbit_options": "opciones plebbit",
+  "general": "general"
 }
\ No newline at end of file
diff --git a/public/translations/fa/default.json b/public/translations/fa/default.json
index 9fea160b..b0a7da2e 100644
--- a/public/translations/fa/default.json
+++ b/public/translations/fa/default.json
@@ -300,5 +300,7 @@
   "undelete": "بازیابی",
   "loading_comments": "بارگذاری نظرات",
   "you_blocked_community": "شما این انجمن را مسدود کرده‌اید",
-  "show": "نمایش"
+  "show": "نمایش",
+  "plebbit_options": "گزینه های plebbit",
+  "general": "عمومی"
 }
\ No newline at end of file
diff --git a/public/translations/fi/default.json b/public/translations/fi/default.json
index 07b5d713..6929250d 100644
--- a/public/translations/fi/default.json
+++ b/public/translations/fi/default.json
@@ -300,5 +300,7 @@
   "undelete": "Palauta",
   "loading_comments": "Ladataan kommentteja",
   "you_blocked_community": "Olet estänyt tämän yhteisön",
-  "show": "näyttää"
+  "show": "näyttää",
+  "plebbit_options": "plebbit-vaihtoehdot",
+  "general": "yleinen"
 }
\ No newline at end of file
diff --git a/public/translations/fil/default.json b/public/translations/fil/default.json
index 505ccb71..bdff3af7 100644
--- a/public/translations/fil/default.json
+++ b/public/translations/fil/default.json
@@ -300,5 +300,7 @@
   "undelete": "I-undelete",
   "loading_comments": "Naglo-load ng mga komento",
   "you_blocked_community": "I-block mo ang komunidad na ito",
-  "show": "ipakita"
+  "show": "ipakita",
+  "plebbit_options": "mga pagpipilian ng plebbit",
+  "general": "pangkalahatan"
 }
\ No newline at end of file
diff --git a/public/translations/fr/default.json b/public/translations/fr/default.json
index e7a9226b..deb955c6 100644
--- a/public/translations/fr/default.json
+++ b/public/translations/fr/default.json
@@ -300,5 +300,7 @@
   "undelete": "Récupérer",
   "loading_comments": "Chargement des commentaires",
   "you_blocked_community": "Vous avez bloqué cette communauté",
-  "show": "montrer"
+  "show": "montrer",
+  "plebbit_options": "options plebbit",
+  "general": "général"
 }
\ No newline at end of file
diff --git a/public/translations/he/default.json b/public/translations/he/default.json
index 70f56825..d8ae3824 100644
--- a/public/translations/he/default.json
+++ b/public/translations/he/default.json
@@ -300,5 +300,7 @@
   "undelete": "שחזור מחיקה",
   "loading_comments": "טוען תגובות",
   "you_blocked_community": "חסמת את הקהילה הזו",
-  "show": "תצוגה"
+  "show": "תצוגה",
+  "plebbit_options": "אפשרויות plebbit",
+  "general": "כללי"
 }
\ No newline at end of file
diff --git a/public/translations/hi/default.json b/public/translations/hi/default.json
index d086ca9c..cf9bab4a 100644
--- a/public/translations/hi/default.json
+++ b/public/translations/hi/default.json
@@ -300,5 +300,7 @@
   "undelete": "डिलीट को वापस लाओ",
   "loading_comments": "टिप्पणियाँ लोड हो रही हैं",
   "you_blocked_community": "आपने इस समुदाय को ब्लॉक कर दिया है",
-  "show": "दिखाएँ"
+  "show": "दिखाएँ",
+  "plebbit_options": "plebbit विकल्प",
+  "general": "सामान्य"
 }
\ No newline at end of file
diff --git a/public/translations/hu/default.json b/public/translations/hu/default.json
index 7b7a9102..45799f52 100644
--- a/public/translations/hu/default.json
+++ b/public/translations/hu/default.json
@@ -300,5 +300,7 @@
   "undelete": "Visszaállítás",
   "loading_comments": "Megjegyzések betöltése",
   "you_blocked_community": "Blokkoltad ezt a közösséget",
-  "show": "mutat"
+  "show": "mutat",
+  "plebbit_options": "plebbit lehetőségek",
+  "general": "általános"
 }
\ No newline at end of file
diff --git a/public/translations/id/default.json b/public/translations/id/default.json
index 98513015..c178cd7a 100644
--- a/public/translations/id/default.json
+++ b/public/translations/id/default.json
@@ -300,5 +300,7 @@
   "undelete": "Batalkan penghapusan",
   "loading_comments": "Memuat komentar",
   "you_blocked_community": "Anda telah memblokir komunitas ini",
-  "show": "menunjukkan"
+  "show": "menunjukkan",
+  "plebbit_options": "opsi plebbit",
+  "general": "umum"
 }
\ No newline at end of file
diff --git a/public/translations/it/default.json b/public/translations/it/default.json
index a7e215b5..960fe8fc 100644
--- a/public/translations/it/default.json
+++ b/public/translations/it/default.json
@@ -300,5 +300,7 @@
   "undelete": "Annulla eliminazione",
   "loading_comments": "Caricamento commenti",
   "you_blocked_community": "Hai bloccato questa comunità",
-  "show": "mostra"
+  "show": "mostra",
+  "plebbit_options": "opzioni plebbit",
+  "general": "generali"
 }
\ No newline at end of file
diff --git a/public/translations/ja/default.json b/public/translations/ja/default.json
index 5de0216b..aabdeb53 100644
--- a/public/translations/ja/default.json
+++ b/public/translations/ja/default.json
@@ -300,5 +300,7 @@
   "undelete": "削除を取り消す",
   "loading_comments": "コメントを読み込み中",
   "you_blocked_community": "このコミュニティをブロックしました",
-  "show": "表示"
+  "show": "表示",
+  "plebbit_options": "plebbitのオプション",
+  "general": "一般的な"
 }
\ No newline at end of file
diff --git a/public/translations/ko/default.json b/public/translations/ko/default.json
index c22f3ac2..83b273b8 100644
--- a/public/translations/ko/default.json
+++ b/public/translations/ko/default.json
@@ -300,5 +300,7 @@
   "undelete": "삭제 취소",
   "loading_comments": "댓글 로드 중",
   "you_blocked_community": "이 커뮤니티를 차단했습니다",
-  "show": "보여주다"
+  "show": "보여주다",
+  "plebbit_options": "plebbit 옵션",
+  "general": "일반"
 }
\ No newline at end of file
diff --git a/public/translations/mr/default.json b/public/translations/mr/default.json
index 6d00702f..5fe49b3b 100644
--- a/public/translations/mr/default.json
+++ b/public/translations/mr/default.json
@@ -300,5 +300,7 @@
   "undelete": "डिलीट करा",
   "loading_comments": "टिप्पणी लोड होत आहे",
   "you_blocked_community": "तुम्ही ह्या समुदायाला ब्लॉक केलं आहे",
-  "show": "दाखवा"
+  "show": "दाखवा",
+  "plebbit_options": "प्लेबिट पर्याय",
+  "general": "सामान्य"
 }
\ No newline at end of file
diff --git a/public/translations/nl/default.json b/public/translations/nl/default.json
index 778a6786..4fc7cebb 100644
--- a/public/translations/nl/default.json
+++ b/public/translations/nl/default.json
@@ -300,5 +300,7 @@
   "undelete": "Herstellen",
   "loading_comments": "Reacties laden",
   "you_blocked_community": "U hebt deze gemeenschap geblokkeerd",
-  "show": "tonen"
+  "show": "tonen",
+  "plebbit_options": "plebbit-opties",
+  "general": "algemeen"
 }
\ No newline at end of file
diff --git a/public/translations/no/default.json b/public/translations/no/default.json
index 13406736..76c293d8 100644
--- a/public/translations/no/default.json
+++ b/public/translations/no/default.json
@@ -300,5 +300,7 @@
   "undelete": "Gjenopprette",
   "loading_comments": "Laster inn kommentarer",
   "you_blocked_community": "Du har blokkert dette fellesskapet",
-  "show": "vise"
+  "show": "vise",
+  "plebbit_options": "plebbit alternativer",
+  "general": "generell"
 }
\ No newline at end of file
diff --git a/public/translations/pl/default.json b/public/translations/pl/default.json
index 624ab992..677168e4 100644
--- a/public/translations/pl/default.json
+++ b/public/translations/pl/default.json
@@ -300,5 +300,7 @@
   "undelete": "Przywróć",
   "loading_comments": "Ładowanie komentarzy",
   "you_blocked_community": "Zablokowałeś tę społeczność",
-  "show": "pokazać"
+  "show": "pokazać",
+  "plebbit_options": "opcje plebbit",
+  "general": "ogólny"
 }
\ No newline at end of file
diff --git a/public/translations/pt/default.json b/public/translations/pt/default.json
index 21cfa3a6..d6e47665 100644
--- a/public/translations/pt/default.json
+++ b/public/translations/pt/default.json
@@ -300,5 +300,7 @@
   "undelete": "Recuperar",
   "loading_comments": "Carregando comentários",
   "you_blocked_community": "Você bloqueou esta comunidade",
-  "show": "mostrar"
+  "show": "mostrar",
+  "plebbit_options": "opções plebbit",
+  "general": "geral"
 }
\ No newline at end of file
diff --git a/public/translations/ro/default.json b/public/translations/ro/default.json
index ebf4c5f2..eece302f 100644
--- a/public/translations/ro/default.json
+++ b/public/translations/ro/default.json
@@ -300,5 +300,7 @@
   "undelete": "Recuperare",
   "loading_comments": "Se încarcă comentariile",
   "you_blocked_community": "Ați blocat această comunitate",
-  "show": "arată"
+  "show": "arată",
+  "plebbit_options": "opțiuni plebbit",
+  "general": "general"
 }
\ No newline at end of file
diff --git a/public/translations/ru/default.json b/public/translations/ru/default.json
index 70f65bb4..17f962cf 100644
--- a/public/translations/ru/default.json
+++ b/public/translations/ru/default.json
@@ -300,5 +300,7 @@
   "undelete": "Восстановить",
   "loading_comments": "Загрузка комментариев",
   "you_blocked_community": "Вы заблокировали это сообщество",
-  "show": "показать"
+  "show": "показать",
+  "plebbit_options": "опции plebbit",
+  "general": "общий"
 }
\ No newline at end of file
diff --git a/public/translations/sq/default.json b/public/translations/sq/default.json
index 2eae99b3..a754c303 100644
--- a/public/translations/sq/default.json
+++ b/public/translations/sq/default.json
@@ -300,5 +300,7 @@
   "undelete": "Rikuperimi",
   "loading_comments": "Duke u ngarkuar komentet",
   "you_blocked_community": "Ju keni bllokuar këtë komunitet",
-  "show": "shfaq"
+  "show": "shfaq",
+  "plebbit_options": "opsione plebbit",
+  "general": "i përgjithshëm"
 }
\ No newline at end of file
diff --git a/public/translations/sv/default.json b/public/translations/sv/default.json
index 9ac2558f..e61967cf 100644
--- a/public/translations/sv/default.json
+++ b/public/translations/sv/default.json
@@ -300,5 +300,7 @@
   "undelete": "Ångra radering",
   "loading_comments": "Laddar kommentarer",
   "you_blocked_community": "Du har blockerat den här gemenskapen",
-  "show": "visa"
+  "show": "visa",
+  "plebbit_options": "plebbit-alternativ",
+  "general": "allmän"
 }
\ No newline at end of file
diff --git a/public/translations/te/default.json b/public/translations/te/default.json
index e9f9f5fe..761955a5 100644
--- a/public/translations/te/default.json
+++ b/public/translations/te/default.json
@@ -300,5 +300,7 @@
   "undelete": "తొలగించడం రద్దు చేయండి",
   "loading_comments": "వ్యాఖ్యలను లోడ్ అవుతోంది",
   "you_blocked_community": "ఈ సముదాయాన్ని మీరు నిరోధించారు",
-  "show": "చూపించు"
+  "show": "చూపించు",
+  "plebbit_options": "plebbit ఎంపికలు",
+  "general": "సాధారణ"
 }
\ No newline at end of file
diff --git a/public/translations/th/default.json b/public/translations/th/default.json
index 6f14d0ab..07fff626 100644
--- a/public/translations/th/default.json
+++ b/public/translations/th/default.json
@@ -300,5 +300,7 @@
   "undelete": "ยกเลิกการลบ",
   "loading_comments": "กำลังโหลดความคิดเห็น",
   "you_blocked_community": "คุณบล็อกชุมชนนี้แล้ว",
-  "show": "แสดง"
+  "show": "แสดง",
+  "plebbit_options": "ตัวเลือก plebbit",
+  "general": "ทั่วไป"
 }
\ No newline at end of file
diff --git a/public/translations/tr/default.json b/public/translations/tr/default.json
index 74fb8252..2e2fd8ec 100644
--- a/public/translations/tr/default.json
+++ b/public/translations/tr/default.json
@@ -300,5 +300,7 @@
   "undelete": "Silme işlemini geri al",
   "loading_comments": "Yorumlar yükleniyor",
   "you_blocked_community": "Bu topluluğu engellediniz",
-  "show": "göstermek"
+  "show": "göstermek",
+  "plebbit_options": "plebbit seçenekleri",
+  "general": "genel"
 }
\ No newline at end of file
diff --git a/public/translations/uk/default.json b/public/translations/uk/default.json
index 1ab04f44..6c3729f1 100644
--- a/public/translations/uk/default.json
+++ b/public/translations/uk/default.json
@@ -300,5 +300,7 @@
   "undelete": "Скасувати видалення",
   "loading_comments": "Завантаження коментарів",
   "you_blocked_community": "Ви заблокували цю спільноту",
-  "show": "показати"
+  "show": "показати",
+  "plebbit_options": "плебіт варіанти",
+  "general": "загальний"
 }
\ No newline at end of file
diff --git a/public/translations/ur/default.json b/public/translations/ur/default.json
index 70aad673..a6e5ef65 100644
--- a/public/translations/ur/default.json
+++ b/public/translations/ur/default.json
@@ -300,5 +300,7 @@
   "undelete": "حذف کو واپس لائیں",
   "loading_comments": "تبصرے لوڈ ہو رہے ہیں",
   "you_blocked_community": "آپ نے یہ سماج بلاک کر دی ہے",
-  "show": "دکھائیں"
+  "show": "دکھائیں",
+  "plebbit_options": "پلیبٹ اختیارات",
+  "general": "عام"
 }
\ No newline at end of file
diff --git a/public/translations/vi/default.json b/public/translations/vi/default.json
index 97c1ec01..5b6f29c1 100644
--- a/public/translations/vi/default.json
+++ b/public/translations/vi/default.json
@@ -300,5 +300,7 @@
   "undelete": "Khôi phục",
   "loading_comments": "Đang tải bình luận",
   "you_blocked_community": "Bạn đã chặn cộng đồng này",
-  "show": "hiển thị"
+  "show": "hiển thị",
+  "plebbit_options": "tùy chọn plebbit",
+  "general": "chung"
 }
\ No newline at end of file
diff --git a/public/translations/zh/default.json b/public/translations/zh/default.json
index f38d1368..9567ac8f 100644
--- a/public/translations/zh/default.json
+++ b/public/translations/zh/default.json
@@ -300,5 +300,7 @@
   "undelete": "取消删除",
   "loading_comments": "正在加载评论",
   "you_blocked_community": "您已封锁了此社区",
-  "show": "显示"
+  "show": "显示",
+  "plebbit_options": "plebbit选项",
+  "general": "一般"
 }
\ No newline at end of file

From 5ab14bff0a20757bcb55deb019aa6aebe0dfade8 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Mon, 22 Apr 2024 22:19:23 +0200
Subject: [PATCH 5/8] feat(settings): add plebbit options

---
 .../plebbit-options.module.css                |  48 +++++++
 .../plebbit-options/plebbit-options.tsx       | 119 +++++++++++++++---
 yarn.lock                                     |   2 +-
 3 files changed, 148 insertions(+), 21 deletions(-)

diff --git a/src/views/settings/plebbit-options/plebbit-options.module.css b/src/views/settings/plebbit-options/plebbit-options.module.css
index 1b3843fe..892e90d2 100644
--- a/src/views/settings/plebbit-options/plebbit-options.module.css
+++ b/src/views/settings/plebbit-options/plebbit-options.module.css
@@ -26,4 +26,52 @@
 
 .settingTitle {
   font-style: italic;
+}
+
+.content input[type="text"], .content textarea {
+  padding: 2px;
+  box-shadow: var(--box-shadow-input);
+}
+
+.content input[type="text"], .content textarea {
+  width: 210px;
+}
+
+.content textarea {
+  height: 80px;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.content button {
+  vertical-align: top;
+  margin-left: 5px;
+  cursor: pointer;
+}
+
+.ipfsGatewaysSettings textarea {
+  margin-bottom: 5px;
+}
+
+.blockchainProvidersSettings input[type="text"] {
+  margin-bottom: 5px;
+}
+
+.plebbitRpcSettingsInfo {
+  padding: 5px 20px 0 0;
+  word-break: break-word;
+}
+
+.plebbitRpcSettingsInfo ol {
+  padding-bottom: 5px;
+  padding-left: 40px;
+}
+
+@media (max-width: 640px) {
+  .categoryTitle {
+    flex: 0 0 65px;
+  }
+
+  .categorySettings input {
+    width: 35vw;
+  }
 }
\ No newline at end of file
diff --git a/src/views/settings/plebbit-options/plebbit-options.tsx b/src/views/settings/plebbit-options/plebbit-options.tsx
index 60f28b11..069fbd57 100644
--- a/src/views/settings/plebbit-options/plebbit-options.tsx
+++ b/src/views/settings/plebbit-options/plebbit-options.tsx
@@ -1,63 +1,142 @@
+import { useState } from 'react';
+import { useAccount } from '@plebbit/plebbit-react-hooks';
 import styles from './plebbit-options.module.css';
 import { useTranslation } from 'react-i18next';
 
-const PlebbitRPCSettings = () => {
+const isElectron = window.isElectron === true;
+
+const IPFSGatewaysSettings = ({ ipfsGatewayUrls, mediaIpfsGatewayUrl }: { ipfsGatewayUrls: any; mediaIpfsGatewayUrl: any }) => {
   const { t } = useTranslation();
+  const ipfsGatewayUrlsDefaultValue = ipfsGatewayUrls?.join('\n');
 
-  return <div className={styles.plebbitRPCSettings}></div>;
+  return (
+    <div className={styles.ipfsGatewaysSettings}>
+      <div className={styles.ipfsGatewaysSetting}>
+        <textarea defaultValue={ipfsGatewayUrlsDefaultValue} />
+        <button>{t('save')}</button>
+      </div>
+      <span className={styles.settingTitle}>nft profile pics gateway</span>
+      <div>
+        <input type='text' defaultValue={mediaIpfsGatewayUrl} />
+      </div>
+    </div>
+  );
 };
 
-const IPFSGatewaysSettings = () => {
+const PubsubProvidersSettings = ({ pubsubHttpClientsOptions }: { pubsubHttpClientsOptions: any }) => {
   const { t } = useTranslation();
+  const pubsubProvidersDefaultValue = pubsubHttpClientsOptions?.join('\n');
 
   return (
-    <div className={styles.ipfsGatewaysSettings}>
-      <textarea className={styles.input} />
-      <div></div>
-      <span className={styles.settingTitle}>profile pics gateway</span>
+    <div className={styles.pubsubProvidersSettings}>
+      <textarea defaultValue={pubsubProvidersDefaultValue} />
+      <button>{t('save')}</button>
     </div>
   );
 };
 
-const PubsubProvidersSettings = () => {
+const BlockchainProvidersSettings = ({ chainProviders }: { chainProviders: any }) => {
   const { t } = useTranslation();
+  const ethRpcDefaultValue = chainProviders?.['eth']?.urls.join(', ');
+  const solRpcDefaultValue = chainProviders?.['sol']?.urls.join(', ');
+  const maticRpcDefaultValue = chainProviders?.['matic']?.urls.join(', ');
 
-  return <div className={styles.pubsubProvidersSettings}>test</div>;
+  return (
+    <div className={styles.blockchainProvidersSettings}>
+      <span className={styles.settingTitle}>ethereum rpc, for .eth addresses</span>
+      <div>
+        <input type='text' defaultValue={ethRpcDefaultValue} />
+        <button>{t('save')}</button>
+      </div>
+      <span className={styles.settingTitle}>solana rpc, for .sol addresses</span>
+      <div>
+        <input type='text' defaultValue={solRpcDefaultValue} />
+      </div>
+      <span className={styles.settingTitle}>polygon rpc, for nft profile pics</span>
+      <div>
+        <input type='text' defaultValue={maticRpcDefaultValue} />
+      </div>
+    </div>
+  );
 };
 
-const BlockchainProvidersSettings = () => {
+const PlebbitRPCSettings = ({ isElectron }: { isElectron: boolean }) => {
   const { t } = useTranslation();
+  const [showInfo, setShowInfo] = useState(false);
 
-  return <div className={styles.blockchainProvidersSettings}>test</div>;
+  return (
+    <div className={styles.plebbitRPCSettings}>
+      <div>
+        <input type='text' placeholder='' disabled={!isElectron} />
+        <button onClick={() => setShowInfo(!showInfo)}>{showInfo ? 'X' : '?'}</button>
+        <button disabled={!isElectron}>{t('save')}</button>
+      </div>
+      {showInfo && (
+        <div className={styles.plebbitRpcSettingsInfo}>
+          connect to a plebbit full node locally, or remotely if SSL is setup
+          <br />
+          <ol>
+            <li>get secret auth key from the node</li>
+            <li>get IP address and port used by the node</li>
+            <li>
+              save node rpc: <code>{`ws://<IP>:<port>/<secretAuthKey>`}</code>
+            </li>
+          </ol>
+        </div>
+      )}
+    </div>
+  );
 };
 
-const PlebbitOptions = () => {
+const NodeDataPathSettings = ({ isElectron }: { isElectron: boolean }) => {
   const { t } = useTranslation();
+  const path = '~/Application Support/seedit';
+
+  return (
+    <div className={styles.nodeDataPathSettings}>
+      <div>
+        <input type='text' placeholder={isElectron ? path : ''} disabled={!isElectron} />
+        <button disabled={!isElectron}>{t('save')}</button>
+      </div>
+    </div>
+  );
+};
+
+const PlebbitOptions = () => {
+  // const { t } = useTranslation();
+  const { plebbitOptions, mediaIpfsGatewayUrl } = useAccount() || {};
+  const { ipfsGatewayUrls, pubsubHttpClientsOptions, chainProviders } = plebbitOptions || {};
 
   return (
     <div className={styles.content}>
       <div className={styles.category}>
-        <span className={styles.categoryTitle}>plebbit rpc</span>
+        <span className={styles.categoryTitle}>ipfs gateways</span>
+        <span className={styles.categorySettings}>
+          <IPFSGatewaysSettings ipfsGatewayUrls={ipfsGatewayUrls} mediaIpfsGatewayUrl={mediaIpfsGatewayUrl} />
+        </span>
+      </div>
+      <div className={styles.category}>
+        <span className={styles.categoryTitle}>pubsub providers</span>
         <span className={styles.categorySettings}>
-          <PlebbitRPCSettings />
+          <PubsubProvidersSettings pubsubHttpClientsOptions={pubsubHttpClientsOptions} />
         </span>
       </div>
       <div className={styles.category}>
-        <span className={styles.categoryTitle}>ipfs gateways</span>
+        <span className={styles.categoryTitle}>blockchain providers</span>
         <span className={styles.categorySettings}>
-          <IPFSGatewaysSettings />
+          <BlockchainProvidersSettings chainProviders={chainProviders} />
         </span>
       </div>
       <div className={styles.category}>
-        <span className={styles.categoryTitle}>pubsub providers</span>
+        <span className={styles.categoryTitle}>node rpc</span>
         <span className={styles.categorySettings}>
-          <PubsubProvidersSettings />
+          <PlebbitRPCSettings isElectron={isElectron} />
         </span>
       </div>
       <div className={styles.category}>
-        <span className={styles.categoryTitle}>blockchain providers</span>
+        <span className={styles.categoryTitle}>node data path</span>
         <span className={styles.categorySettings}>
-          <BlockchainProvidersSettings />
+          <NodeDataPathSettings isElectron={isElectron} />
         </span>
       </div>
     </div>
diff --git a/yarn.lock b/yarn.lock
index ba6e1b0b..42549521 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14745,7 +14745,7 @@ react-scripts@5.0.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
-react-virtuoso@^4.7.8:
+react-virtuoso@4.7.8:
   version "4.7.8"
   resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-4.7.8.tgz#d64f950b726a3fbcba647b0dc3c0d892ea80b1d4"
   integrity sha512-P0BHOsLrmfnXv1bY9Nja07nvFciRGNgM7lTRHMcVDteTDb9tLtHzajBapKGUZ5zdyUOEVWvuW6ufQxzdGN2AKw==

From 5f02bc00a13dbfd5707adc161a505029593b79cf Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Tue, 23 Apr 2024 22:10:33 +0200
Subject: [PATCH 6/8] style(post): trim displayName before shorting it to
 remove white spaces

---
 src/components/post/post.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx
index 1b6098ab..2dd3c0c0 100644
--- a/src/components/post/post.tsx
+++ b/src/components/post/post.tsx
@@ -34,7 +34,7 @@ const PostAuthor = ({ authorAddress, authorRole, cid, displayName, index, shortA
   const isAuthorModerator = authorRole === 'moderator';
   const moderatorClass = `${isAuthorOwner ? styles.owner : isAuthorAdmin ? styles.admin : isAuthorModerator ? styles.moderator : ''}`;
   const authorRoleInitial = (isAuthorOwner && 'O') || (isAuthorAdmin && 'A') || (isAuthorModerator && 'M') || '';
-  const shortDisplayName = displayName?.length > 20 ? displayName?.slice(0, 20) + '...' : displayName;
+  const shortDisplayName = displayName?.trim().length > 20 ? displayName?.trim().slice(0, 20).trim() + '...' : displayName?.trim();
 
   return (
     <>

From 8e05a6ca520b58657bdce245c70db5e7a2075e5b Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Tue, 23 Apr 2024 22:10:50 +0200
Subject: [PATCH 7/8] chore(package.json): upgrade plebbit-react-hooks

---
 package.json |  2 +-
 yarn.lock    | 16 ++++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 69f57f0a..160c3621 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
   "dependencies": {
     "@capacitor/app": "1.1.1",
     "@floating-ui/react": "0.26.1",
-    "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#176d361ce4dfecc4fdc3c3675a9777099d47d8ce",
+    "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#6d0d38ad52ce77715cb05be6cec55d691f5f013d",
     "@testing-library/jest-dom": "5.14.1",
     "@testing-library/react": "13.0.0",
     "@testing-library/user-event": "13.2.1",
diff --git a/yarn.lock b/yarn.lock
index 42549521..ad164732 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3479,6 +3479,22 @@
     uuid "8.3.2"
     zustand "4.0.0"
 
+"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#6d0d38ad52ce77715cb05be6cec55d691f5f013d":
+  version "0.0.1"
+  resolved "https://github.com/plebbit/plebbit-react-hooks.git#6d0d38ad52ce77715cb05be6cec55d691f5f013d"
+  dependencies:
+    "@plebbit/plebbit-js" "https://github.com/plebbit/plebbit-js.git#347579798478c27eea4808b923ab6f21799fce89"
+    "@plebbit/plebbit-logger" "https://github.com/plebbit/plebbit-logger.git"
+    assert "2.0.0"
+    ethers "5.6.9"
+    localforage "1.10.0"
+    lodash.isequal "4.5.0"
+    memoizee "0.4.15"
+    quick-lru "5.1.1"
+    uint8arrays "3.1.1"
+    uuid "8.3.2"
+    zustand "4.0.0"
+
 "@plebbit/proper-lockfile@github:plebbit/node-proper-lockfile#7fd6332117340c1d3d98dd0afee2d31cc06f72b8":
   version "4.1.2"
   resolved "https://codeload.github.com/plebbit/node-proper-lockfile/tar.gz/7fd6332117340c1d3d98dd0afee2d31cc06f72b8"

From 18a63df59de35fc3fb3bee4dea6174ba6bb8c2c6 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Fri, 26 Apr 2024 16:07:54 +0200
Subject: [PATCH 8/8] fix(embed): detect uppercase extension in link

---
 src/lib/utils/media-utils.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/utils/media-utils.ts b/src/lib/utils/media-utils.ts
index 4b8df255..7822d706 100644
--- a/src/lib/utils/media-utils.ts
+++ b/src/lib/utils/media-utils.ts
@@ -55,7 +55,8 @@ export const getLinkMediaInfo = memoize(
     let mime: string | undefined;
 
     try {
-      mime = extName(url.pathname.slice(url.pathname.lastIndexOf('/') + 1))[0]?.mime;
+      const fileName = url.pathname.slice(url.pathname.lastIndexOf('/') + 1).toLowerCase();
+      mime = extName(fileName)[0]?.mime;
       if (mime) {
         if (mime.startsWith('image')) {
           type = mime === 'image/gif' ? 'gif' : 'image';