refactor settingsmodal to render it globally

src/app.tsx

@@ -22,6 +22,7 @@ import ReplyModal from './components/reply-modal';
 import PostForm from './components/post-form';
 import SubplebbitStats from './components/subplebbit-stats';
 import TopBar from './components/topbar';
+import SettingsModal from './components/settings-modal';
 
 const BoardLayout = () => {
   const { accountCommentIndex, subplebbitAddress } = useParams();
@@ -91,6 +92,9 @@ const GlobalLayout = () => {
 
   const { activeCid, threadCid, subplebbitAddress, closeModal, showReplyModal, scrollY } = useReplyModalStore();
 
+  const location = useLocation();
+  const isInSettingsView = location.pathname.endsWith('/settings');
+
   return (
     <>
       <ChallengeModal />
@@ -104,6 +108,7 @@ const GlobalLayout = () => {
           subplebbitAddress={subplebbitAddress}
         />
       )}
+      {isInSettingsView && <SettingsModal />}
       <Outlet />
     </>
   );

src/views/board/board.tsx

@@ -14,10 +14,9 @@ import useInterfaceSettingsStore from '../../stores/use-interface-settings-store
 import useFeedResetStore from '../../stores/use-feed-reset-store';
 import useSortingStore from '../../stores/use-sorting-store';
 import LoadingEllipsis from '../../components/loading-ellipsis';
-import { Post } from '../post';
-import SettingsModal from '../../components/settings-modal';
 import SubplebbitDescription from '../../components/subplebbit-description';
 import SubplebbitRules from '../../components/subplebbit-rules';
+import { Post } from '../post';
 
 const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
 
@@ -267,7 +266,6 @@ const Board = () => {
     <>
       {shouldShowSnow() && <hr />}
       <div className={`${styles.content} ${shouldShowSnow() ? styles.garland : ''}`}>
-        {location.pathname.endsWith('/settings') && <SettingsModal />}
         {((description && description.length > 0) || isInAllView) && (
           <SubplebbitDescription
             avatarUrl={suggested?.avatarUrl}

src/views/catalog/catalog.tsx

@@ -16,7 +16,6 @@ import useInterfaceSettingsStore from '../../stores/use-interface-settings-store
 import useSortingStore from '../../stores/use-sorting-store';
 import CatalogRow from '../../components/catalog-row';
 import LoadingEllipsis from '../../components/loading-ellipsis';
-import SettingsModal from '../../components/settings-modal';
 import styles from './catalog.module.css';
 
 const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
@@ -289,7 +288,6 @@ const Catalog = () => {
 
   return (
     <div className={styles.content}>
-      {location.pathname.endsWith('/settings') && <SettingsModal />}
       <hr />
       <div className={styles.catalog}>
         {combinedFeed.length !== 0 ? (

src/views/pending-post/pending-post.tsx

@@ -1,9 +1,7 @@
 import { useEffect } from 'react';
-import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { useAccountComment, useAccountComments } from '@plebbit/plebbit-react-hooks';
-import { isSettingsView } from '../../lib/utils/view-utils';
 import { Post } from '../post';
-import SettingsModal from '../../components/settings-modal';
 
 const PendingPost = () => {
   const { accountComments } = useAccountComments();
@@ -11,9 +9,6 @@ const PendingPost = () => {
   const commentIndex = accountCommentIndex ? parseInt(accountCommentIndex) : undefined;
   const post = useAccountComment({ commentIndex });
   const navigate = useNavigate();
-  const location = useLocation();
-  const params = useParams();
-  const isInSettingsView = isSettingsView(location.pathname, params);
 
   useEffect(() => window.scrollTo(0, 0), []);
 
@@ -36,12 +31,7 @@ const PendingPost = () => {
     }
   }, [post, navigate]);
 
-  return (
-    <>
-      {isInSettingsView && <SettingsModal />}
-      <Post post={post} />
-    </>
-  );
+  return <Post post={post} />;
 };
 
 export default PendingPost;

src/views/post/post.tsx

@@ -2,11 +2,10 @@ import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Comment, Role, useComment, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import { useLocation, useParams } from 'react-router-dom';
-import { isAllView, isDescriptionView, isRulesView, isSettingsView } from '../../lib/utils/view-utils';
+import { isAllView, isDescriptionView, isRulesView } from '../../lib/utils/view-utils';
 import useIsMobile from '../../hooks/use-is-mobile';
 import PostDesktop from '../../components/post-desktop';
 import PostMobile from '../../components/post-mobile';
-import SettingsModal from '../../components/settings-modal';
 import SubplebbitDescription from '../../components/subplebbit-description';
 import SubplebbitRules from '../../components/subplebbit-rules';
 import styles from './post.module.css';
@@ -54,7 +53,6 @@ const PostPage = () => {
   const location = useLocation();
   const { commentCid, subplebbitAddress } = params;
   const isInAllView = isAllView(location.pathname);
-  const isInSettigsView = isSettingsView(location.pathname, params);
   const isInDescriptionView = isDescriptionView(location.pathname, params);
   const isInRulesView = isRulesView(location.pathname, params);
 
@@ -87,7 +85,6 @@ const PostPage = () => {
 
   return (
     <div className={styles.content}>
-      {isInSettigsView && <SettingsModal />}
       {/* TODO: remove this replyCount error once api supports scrolling replies pages */}
       {replyCount > 60 && <span className={styles.error}>Error: this thread has too many replies, some of them cannot be displayed right now.</span>}
       {error && <span className={styles.error}>Error: {error?.message || error?.toString?.()}</span>}