add board admins list modal

src/components/modals/AdminListModal.jsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useState, useRef } from 'react';
+import Modal from 'react-modal';
+import Draggable from 'react-draggable';
+import { StyledModal } from '../styled/modals/ReplyModal.styled';
+import useGeneralStore from '../../hooks/stores/useGeneralStore';
+import { BoardForm } from '../styled/views/Board.styled'
+import { Link } from 'react-router-dom';
+
+
+
+const AdminListModal = ({ isOpen, closeModal, roles }) => {
+  const {
+    selectedAddress,
+    selectedStyle,
+    selectedTitle,
+  } = useGeneralStore(state => state);
+
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 480);
+  const nodeRef = useRef(null);
+  const rolesList = roles 
+    ? Object.entries(roles).map(([address, { role }]) => ({ address, role })) 
+    : [];
+
+  useEffect(() => {
+    const handleResize = () => setIsMobile(window.innerWidth <= 480);
+    window.addEventListener('resize', handleResize);
+
+    // Cleanup function
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [setIsMobile]);
+  
+
+  return (
+    <StyledModal
+    isOpen={isOpen}
+    onRequestClose={closeModal}
+    contentLabel="Reply Modal"
+    shouldCloseOnEsc={true}
+    shouldCloseOnOverlayClick={isMobile}
+    selectedStyle={selectedStyle}
+    overlayClassName="overlay"
+    style={isMobile ? ({ overlay: { backgroundColor: "rgba(0,0,0,.25)" }}) : ({ overlay: { backgroundColor: "rgba(0,0,0,0)" }})
+    }
+  >
+      <Draggable handle=".modal-header" nodeRef={nodeRef} disabled={isMobile}>
+        <div className="modal-content" ref={nodeRef} 
+        style={{
+          maxWidth: '300px',
+          maxHeight: '250px',
+        }}>
+          <div className="modal-header">
+            Admins for {selectedTitle ?? selectedAddress}
+            <button className="icon" onClick={() => closeModal()} title="close" />
+          </div>
+          <div className='list' style={{
+            padding: '10px',
+            maxHeight: '200px',
+            maxWidth: '300px',
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            wordWrap: 'break-word',
+            wordBreak: 'break-all',
+          }}>
+            <BoardForm selectedStyle={selectedStyle} style={{all: 'unset'}}>
+            {rolesList.map(({ address, role }, index) => (
+              <p key={index}>
+                  • <Link to={() => {}} className="quote-link">u/{address}</Link>: {role}
+              </p>
+            ))}
+            </BoardForm>
+          </div>
+        </div>
+      </Draggable>
+    </StyledModal>
+  );
+};
+
+Modal.setAppElement('#root');
+
+export default AdminListModal;

src/components/views/Board.jsx

@@ -14,6 +14,7 @@ import { PostMenuCatalog } from '../styled/views/Catalog.styled';
 import EditModal from '../modals/EditModal';
 import EditLabel from '../EditLabel';
 import ImageBanner from '../ImageBanner';
+import AdminListModal from '../modals/AdminListModal';
 import ModerationModal from '../modals/ModerationModal';
 import OfflineIndicator from '../OfflineIndicator';
 import PendingLabel from '../PendingLabel';
@@ -100,6 +101,7 @@ const Board = () => {
   const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress});
   const stateString = useStateString(subplebbit);
 
+  const [isAdminListOpen, setIsAdminListOpen] = useState(false);
   const [isReplyOpen, setIsReplyOpen] = useState(false);
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
   const [originalCommentContent, setOriginalCommentContent] = useState(null);
@@ -610,6 +612,21 @@ const Board = () => {
         <title>{((selectedTitle ? selectedTitle : selectedAddress) + " - plebchan")}</title>
       </Helmet>
       <Container>
+        <AdminListModal
+        selectedStyle={selectedStyle}
+        isOpen={isAdminListOpen}
+        closeModal={() => setIsAdminListOpen(false)}
+        roles={subplebbit.roles} />
+        <EditModal
+        selectedStyle={selectedStyle}
+        isOpen={isEditModalOpen}
+        closeModal={() => setIsEditModalOpen(false)}
+        originalCommentContent={originalCommentContent} />
+        <ModerationModal 
+        selectedStyle={selectedStyle}
+        isOpen={isModerationOpen}
+        closeModal={() => {setIsModerationOpen(false); setDeletePost(false)}}
+        deletePost={deletePost} />
         <ReplyModal 
         selectedStyle={selectedStyle}
         isOpen={isReplyOpen}
@@ -618,16 +635,6 @@ const Board = () => {
         selectedStyle={selectedStyle}
         isOpen={isSettingsOpen}
         closeModal={() => setIsSettingsOpen(false)} />
-        <ModerationModal 
-        selectedStyle={selectedStyle}
-        isOpen={isModerationOpen}
-        closeModal={() => {setIsModerationOpen(false); setDeletePost(false)}}
-        deletePost={deletePost} />
-        <EditModal
-        selectedStyle={selectedStyle}
-        isOpen={isEditModalOpen}
-        closeModal={() => setIsEditModalOpen(false)}
-        originalCommentContent={originalCommentContent} />
         <NavBar selectedStyle={selectedStyle}>
           <>
             <span className="boardList">
@@ -822,7 +829,10 @@ const Board = () => {
                               <span className="name-block">
                                 <span className="title">Rules</span>
                                 &nbsp;
-                                <span className="name capcode">## Board Admins</span>
+                                <span className="name capcode" 
+                                style={{cursor: 'pointer'}}
+                                onClick={() => {setIsAdminListOpen(!isAdminListOpen)}}
+                                >## Board Admins</span>
                                 &nbsp;
                                 <span className="date-time">{getDate(subplebbit.createdAt)}</span>
                                 &nbsp;
@@ -894,7 +904,10 @@ const Board = () => {
                               <button className="post-menu-button-mobile"
                               style={{ all: 'unset', cursor: 'pointer' }}>...</button>
                               <span className="name-block-mobile">
-                                <span className="name-mobile capcode">## Board Admins</span>
+                                <span className="name-mobile capcode"
+                                style={{cursor: 'pointer'}}
+                                onClick={() => {setIsAdminListOpen(!isAdminListOpen)}}
+                                >## Board Admins</span>
                                 &nbsp;
                                 <span className="thread-icons-mobile"
                                 style={{float: "right", marginRight: "18px"}}>
@@ -961,7 +974,10 @@ const Board = () => {
                               <span className="name-block">
                                 <span className="title">Welcome to {subplebbit.title || subplebbit.address}</span>
                                 &nbsp;
-                                <span className="name capcode">## Board Admins</span>
+                                <span className="name capcode"
+                                style={{cursor: 'pointer'}}
+                                onClick={() => {setIsAdminListOpen(!isAdminListOpen)}}
+                                >## Board Admins</span>
                                 &nbsp;
                                 <span className="date-time">{getDate(subplebbit.createdAt)}</span>
                                 &nbsp;
@@ -1031,7 +1047,10 @@ const Board = () => {
                               <button className="post-menu-button-mobile"
                               style={{ all: 'unset', cursor: 'pointer' }}>...</button>
                               <span className="name-block-mobile">
-                                <span className="name-mobile capcode">## Board Admins</span>
+                                <span className="name-mobile capcode"
+                                style={{cursor: 'pointer'}}
+                                onClick={() => {setIsAdminListOpen(!isAdminListOpen)}}
+                                >## Board Admins</span>
                                 &nbsp;
                                 <span className="thread-icons-mobile"
                                 style={{float: "right", marginRight: "18px"}}>

src/components/views/Description.jsx

@@ -9,6 +9,7 @@ import { Container, NavBar, Header, Break, PostMenu, PostForm } from '../styled/
 import { TopBar, BoardForm, Footer, ReplyFormLink} from '../styled/views/Thread.styled';
 import { PostMenuCatalog } from '../styled/views/Catalog.styled';
 import ImageBanner from '../ImageBanner';
+import AdminListModal from '../modals/AdminListModal';
 import OfflineIndicator from '../OfflineIndicator';
 import SettingsModal from '../modals/SettingsModal';
 import getDate from '../../utils/getDate';
@@ -35,6 +36,7 @@ const Description = () => {
   const postMenuRef = useRef(null);
   const postMenuCatalogRef = useRef(null);
 
+  const [isAdminListOpen, setIsAdminListOpen] = useState(false);
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
   const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
@@ -123,6 +125,11 @@ const Description = () => {
           </title>
         </Helmet>
       <Container>
+        <AdminListModal
+        selectedStyle={selectedStyle}
+        isOpen={isAdminListOpen}
+        closeModal={() => setIsAdminListOpen(false)}
+        roles={subplebbit.roles} />
         <SettingsModal
         selectedStyle={selectedStyle}
         isOpen={isSettingsOpen}
@@ -295,7 +302,10 @@ const Description = () => {
                     <span className="name-block">
                       <span className="title">Welcome to {subplebbit.title || subplebbit.address}</span>
                       &nbsp;
-                      <span className="name capcode">## Board Admins</span>
+                      <span className="name capcode"
+                      style={{cursor: 'pointer'}}
+                      onClick={() => {setIsAdminListOpen(!isAdminListOpen)}}
+                      >## Board Admins</span>
                       &nbsp;
                       <span className="date-time">{getDate(subplebbit.createdAt)}</span>
                       &nbsp;
@@ -362,7 +372,10 @@ const Description = () => {
                     <button className="post-menu-button-mobile"
                     style={{ all: 'unset', cursor: 'pointer' }}>...</button>
                     <span className="name-block-mobile">
-                      <span className="name-mobile capcode">## Board Admins</span>
+                      <span className="name-mobile capcode"
+                      style={{cursor: 'pointer'}}
+                      onClick={() => {setIsAdminListOpen(!isAdminListOpen)}}
+                      >## Board Admins</span>
                       &nbsp;
                       <span className="thread-icons-mobile"
                       style={{float: "right", marginRight: "18px"}}>

src/components/views/Rules.jsx

@@ -9,6 +9,7 @@ import { Container, NavBar, Header, Break, PostMenu, PostForm } from '../styled/
 import { TopBar, BoardForm, Footer, ReplyFormLink} from '../styled/views/Thread.styled';
 import { PostMenuCatalog } from '../styled/views/Catalog.styled';
 import ImageBanner from '../ImageBanner';
+import AdminListModal from '../modals/AdminListModal';
 import OfflineIndicator from '../OfflineIndicator';
 import SettingsModal from '../modals/SettingsModal';
 import getDate from '../../utils/getDate';
@@ -34,6 +35,7 @@ const Rules = () => {
   const postMenuRef = useRef(null);
   const postMenuCatalogRef = useRef(null);
 
+  const [isAdminListOpen, setIsAdminListOpen] = useState(false);
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
   const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
@@ -122,6 +124,11 @@ const Rules = () => {
           </title>
         </Helmet>
       <Container>
+        <AdminListModal
+        selectedStyle={selectedStyle}
+        isOpen={isAdminListOpen}
+        closeModal={() => setIsAdminListOpen(false)}
+        roles={subplebbit.roles} />
         <SettingsModal
         selectedStyle={selectedStyle}
         isOpen={isSettingsOpen}
@@ -270,7 +277,10 @@ const Rules = () => {
                     <span className="name-block">
                       <span className="title">Rules</span>
                       &nbsp;
-                      <span className="name capcode">## Board Admins</span>
+                      <span className="name capcode"
+                      style={{cursor: 'pointer'}}
+                      onClick={() => {setIsAdminListOpen(!isAdminListOpen)}}
+                      >## Board Admins</span>
                       &nbsp;
                       <span className="date-time">{getDate(subplebbit.createdAt)}</span>
                       &nbsp;
@@ -342,7 +352,10 @@ const Rules = () => {
                     <button className="post-menu-button-mobile"
                     style={{ all: 'unset', cursor: 'pointer' }}>...</button>
                     <span className="name-block-mobile">
-                      <span className="name-mobile capcode">## Board Admins</span>
+                      <span className="name-mobile capcode"
+                      style={{cursor: 'pointer'}}
+                      onClick={() => {setIsAdminListOpen(!isAdminListOpen)}}
+                      >## Board Admins</span>
                       &nbsp;
                       <span className="thread-icons-mobile"
                       style={{float: "right", marginRight: "18px"}}>