added settings to catalog and thread

src/components/Thread.jsx

@@ -6,6 +6,7 @@ import { ReplyFormLink, TopBar, BottomBar } from './styles/Thread.styled';
 import { useComment, useAccountsActions } from '@plebbit/plebbit-react-hooks';
 import ImageBanner from './ImageBanner';
 import CaptchaModal from './CaptchaModal';
+import SettingsModal from './SettingsModal';
 import { Tooltip } from 'react-tooltip';
 import onError from '../utils/onError';
 import onSuccess from '../utils/onSuccess';
@@ -36,6 +37,7 @@ const Thread = ({ setBodyStyle }) => {
   const [commentContent, setCommentContent] = useState('');
   const { publishComment } = useAccountsActions();
   const [isCaptchaOpen, setIsCaptchaOpen] = useState(false);
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const [captchaImage, setCaptchaImage] = useState('');
   const navigate = useNavigate();
   const location = useLocation();
@@ -87,7 +89,7 @@ const Thread = ({ setBodyStyle }) => {
     return () => window.removeEventListener('scroll', handleScroll);
   }, [prevScrollPos, visible]);
   
-  // post route handling
+  // nested routes handling
   useEffect(() => {
     const path = location.pathname;
     if (path.endsWith('/post')) {
@@ -97,6 +99,13 @@ const Thread = ({ setBodyStyle }) => {
       setShowPostFormLink(true);
       setShowPostForm(false);
     }
+
+    if (path.endsWith('/settings')) {
+      setIsSettingsOpen(true);
+    } else {
+      setIsSettingsOpen(false);
+    }
+    
   }, [location.pathname]);
 
   // automatic dark mode without interefering with user's selected style
@@ -266,6 +275,14 @@ const Thread = ({ setBodyStyle }) => {
     setIsCaptchaOpen(false);
   };
 
+  const handleSettingsClose = () => {
+    setIsSettingsOpen(false);
+  }
+
+  const handleSettingsOpen = () => {
+    setIsSettingsOpen(true);
+  }
+
 
   const handleStyleChange = (event) => {
     switch (event.target.value) {
@@ -362,6 +379,10 @@ const Thread = ({ setBodyStyle }) => {
       isOpen={isCaptchaOpen} 
       closeModal={handleCaptchaClose} 
       captchaImage={captchaImage} />
+      <SettingsModal
+      selectedStyle={selectedStyle}
+      isOpen={isSettingsOpen}
+      closeModal={handleSettingsClose} />
       <NavBar selectedStyle={selectedStyle}>
         <>
           {defaultSubplebbits.map(subplebbit => (
@@ -376,7 +397,7 @@ const Thread = ({ setBodyStyle }) => {
           ))}
           <span className="nav">
             [
-            <Link to="" onClick={handleVoidClick}>Settings</Link>
+            <Link to={`/${selectedAddress}/thread/${selectedThread}/settings`} onClick={handleSettingsOpen}>Settings</Link>
             ]
             [
             <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
@@ -395,7 +416,7 @@ const Thread = ({ setBodyStyle }) => {
               </select>
             </div>
             <div className="page-jump">
-              <Link to="" onClick={handleVoidClick}>Settings</Link>
+              <Link to={`/${selectedAddress}/thread/${selectedThread}/settings`} onClick={handleSettingsOpen}>Settings</Link>
               &nbsp;
               <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
                 )}>Home</Link>