change subscriptions route

src/App.js

@@ -162,9 +162,12 @@ export default function App() {
         <Route path={`/profile/c/:index`} element={<Pending setBodyStyle={setBodyStyle} /> }>
           <Route path='settings' element={<Pending />} />
         </Route>
-        <Route path={`/profile/p/subscriptions`} element={<Subscriptions setBodyStyle={setBodyStyle} /> }>
+        <Route path={`/p/subscriptions`} element={<Subscriptions setBodyStyle={setBodyStyle} /> }>
           <Route path='settings' element={<Subscriptions />} />
         </Route>
+        <Route path={`p/subscriptions/catalog`} element={<SubscriptionsCatalog setBodyStyle={setBodyStyle} /> }>
+          <Route path='settings' element={<SubscriptionsCatalog />} />
+        </Route>
         <Route path='*' element={<NotFound setBodyStyle={setBodyStyle} />} />
       </Routes>
       <Toast />

src/components/views/Board.jsx

@@ -321,7 +321,7 @@ const Board = () => {
     const selected = event.target.value;
 
     if (selected === 'subscriptions') {
-      navigate(`/profile/p/subscriptions`);
+      navigate(`/p/subscriptions`);
       return;
     }
 
@@ -363,7 +363,7 @@ const Board = () => {
           <>
             <span className="boardList">
               [
-                <Link to={`/profile/p/subscriptions`}>Subscriptions</Link>
+                <Link to={`/p/subscriptions`}>Subscriptions</Link>
               ]&nbsp;[
               {defaultSubplebbits.map((subplebbit, index) => (
                 <span className="boardList" key={`span-${subplebbit.address}`}>

src/components/views/Catalog.jsx

@@ -235,7 +235,7 @@ const Catalog = () => {
     const selected = event.target.value;
 
     if (selected === 'subscriptions') {
-      navigate(`/profile/p/subscriptions`);
+      navigate(`/p/subscriptions`);
       return;
     }
 
@@ -272,7 +272,7 @@ const Catalog = () => {
           <>
           <span className="boardList">
             [
-              <Link to={`/profile/p/subscriptions`}>Subscriptions</Link>
+              <Link to={`/p/subscriptions`}>Subscriptions</Link>
             ]&nbsp;[
             {defaultSubplebbits.map((subplebbit, index) => (
               <span className="boardList" key={`span-${subplebbit.address}`}>

src/components/views/Home.jsx

@@ -98,7 +98,7 @@ const Home = () => {
                   <h3 style={{textDecoration: 'underline', display: 'inline'}}>
                     You have subscribed to {account?.subscriptions?.length} board{account?.subscriptions?.length > 1 ? "s" : null}
                   </h3>&nbsp;
-                  <Link to="/profile/p/subscriptions" id="view-all">[view all]</Link>
+                  <Link to="/p/subscriptions" id="view-all">[view all]</Link>
                   <br />
                   {account?.subscriptions?.map((subscription, index) => (
                     <>

src/components/views/Subscriptions.jsx

@@ -171,7 +171,7 @@ const Subscriptions = () => {
         <>
             <span className="boardList">
               [
-                <Link to={`/profile/p/subscriptions`}>Subscriptions</Link>
+                <Link to={`/p/subscriptions`}>Subscriptions</Link>
               ]&nbsp;[
             {defaultSubplebbits.map((subplebbit, index) => (
               <span className="boardList" key={`span-${subplebbit.address}`}>
@@ -196,7 +196,7 @@ const Subscriptions = () => {
               }>Create Board</button>
               ]
               [
-              <Link to={`/profile/p/subscriptions/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
+              <Link to={`/p/subscriptions/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
               ]
               [
               <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
@@ -221,7 +221,7 @@ const Subscriptions = () => {
                 }>Create Board</button>
               </div>
               <div className="page-jump">
-                <Link to={`/profile/p/subscriptions/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
+                <Link to={`/p/subscriptions/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
                 &nbsp;
                 <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
                   )}>Home</Link>
@@ -263,6 +263,16 @@ const Subscriptions = () => {
               <option value="Photon">Photon</option>
             </select>
           </span>
+          <div id="catalog-button-desktop">
+            [
+            <Link to={`/p/subscriptions/catalog`}>Catalog</Link>
+            ]
+          </div>
+          <div id="catalog-button-mobile">
+            <span className="btn-wrap">
+              <Link to={`/p/subscriptions/catalog`}>Catalog</Link>
+            </span>
+          </div>
         </TopBar>
         <Tooltip id="tooltip" className="tooltip" />
         <BoardForm selectedStyle={selectedStyle}>
@@ -1033,7 +1043,7 @@ const Subscriptions = () => {
                 }>Create Board</button>
                 ]
                 [
-                <Link to={`/profile/p/subscriptions/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
+                <Link to={`/p/subscriptions/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
                 ]
                 [
                 <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}

src/components/views/Thread.jsx

@@ -253,7 +253,7 @@ const Thread = () => {
     const selected = event.target.value;
 
     if (selected === 'subscriptions') {
-      navigate(`/profile/p/subscriptions`);
+      navigate(`/p/subscriptions`);
       return;
     }
 
@@ -288,7 +288,7 @@ const Thread = () => {
           <>
           <span className="boardList">
             [
-              <Link to={`/profile/p/subscriptions`}>Subscriptions</Link>
+              <Link to={`/p/subscriptions`}>Subscriptions</Link>
             ]&nbsp;[
             {defaultSubplebbits.map((subplebbit, index) => (
               <span className="boardList" key={`span-${subplebbit.address}`}>