fix(modqueue): enforce role-gated access with not-allowed view

src/views/not-allowed/index.ts

@@ -0,0 +1 @@
+export { default } from './not-allowed';

src/views/not-allowed/not-allowed.tsx

@@ -0,0 +1,30 @@
+import { Link } from 'react-router-dom';
+import { HomeLogo } from '../home';
+import NotFoundImage from '../../components/not-found-image';
+import styles from '../not-found/not-found.module.css';
+
+const NotAllowed = () => {
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.content}>
+        <HomeLogo />
+        <div className={styles.boxOuter}>
+          <div className={styles.boxInner}>
+            <div className={styles.boxBar}>
+              <h2>Not Allowed</h2>
+            </div>
+            <div className={styles.boxContent}>
+              <NotFoundImage />
+              <br />
+              <div className={styles.backToBoard}>
+                [<Link to='/'>Back to home</Link>]
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NotAllowed;

src/views/not-found/not-found.tsx

@@ -1,17 +1,10 @@
-import { useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { useSubplebbitField } from '../../hooks/use-stable-subplebbit';
 import { useDirectories } from '../../hooks/use-directories';
 import { getSubplebbitAddress } from '../../lib/utils/route-utils';
 import { HomeLogo } from '../home';
+import NotFoundImage from '../../components/not-found-image';
 import styles from './not-found.module.css';
-import { NOT_FOUND_IMAGES } from '../../generated/asset-manifest';
-
-const NotFoundImage = () => {
-  const [imagePath] = useState(() => NOT_FOUND_IMAGES[Math.floor(Math.random() * NOT_FOUND_IMAGES.length)]);
-
-  return <img src={imagePath} alt='' />;
-};
 
 const NotFound = () => {
   const location = useLocation();
@@ -31,7 +24,7 @@ const NotFound = () => {
         <div className={styles.boxOuter}>
           <div className={styles.boxInner}>
             <div className={styles.boxBar}>
-              <h2>404 Not Found</h2>
+              <h2>Not Found</h2>
             </div>
             <div className={styles.boxContent}>
               <NotFoundImage />