External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

style(views): rename various UI elements for better accuracy, add steps on how to create a board to related button

Browse Source
This commit is contained in:
plebeius.eth
2023-10-01 18:28:00 +02:00
parent 8e6ad3d55d
commit 8ca19c9cda
12 changed files with 829 additions and 704 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/modals/ReplyModal.jsx
+1 -1
View File
@@ -294,7 +294,7 @@ const ReplyModal = ({ isOpen, closeModal }) => {
)}
</div>
<div>
<input id='name' type='text' placeholder='Embed link' ref={linkRef} />
<input id='name' type='text' placeholder='Link' ref={linkRef} />
</div>
<div className='textarea-wrapper'>
<span className='fixed-text'>{`c/${selectedShortCid}`}</span>
src/components/views/All.jsx
+3 -3
View File
@@ -607,7 +607,7 @@ const All = () => {
window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true)
: alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
);
}}
>
@@ -639,7 +639,7 @@ const All = () => {
style={{ cursor: 'pointer' }}
onClick={() =>
alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
)
}
>
@@ -3318,7 +3318,7 @@ const All = () => {
window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true)
: alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
);
}}
>
src/components/views/AllCatalog.jsx
+3 -3
View File
@@ -849,7 +849,7 @@ const AllCatalog = () => {
window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true)
: alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
);
}}
>
@@ -881,7 +881,7 @@ const AllCatalog = () => {
style={{ cursor: 'pointer' }}
onClick={() =>
alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
)
}
>
@@ -1037,7 +1037,7 @@ const AllCatalog = () => {
window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true)
: alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
);
}}
>
src/components/views/Board.jsx
+4 -4
View File
@@ -765,7 +765,7 @@ const Board = () => {
window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true)
: alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
);
}}
>
@@ -800,7 +800,7 @@ const Board = () => {
window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true)
: alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
);
}}
>
@@ -884,7 +884,7 @@ const Board = () => {
</td>
</tr>
<tr data-type='File'>
<td>Embed File</td>
<td>Link</td>
<td>
<input name='embed' type='text' tabIndex={7} placeholder='Paste link' ref={linkRef} />
<button
@@ -4370,7 +4370,7 @@ const Board = () => {
window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true)
: alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
);
}}
>
src/components/views/Catalog.jsx
+4 -4
View File
@@ -1534,7 +1534,7 @@ const Catalog = () => {
window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true)
: alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
);
}}
>
@@ -1567,7 +1567,7 @@ const Catalog = () => {
style={{ cursor: 'pointer' }}
onClick={() =>
alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
)
}
>
@@ -1653,7 +1653,7 @@ const Catalog = () => {
</td>
</tr>
<tr data-type='File'>
<td>Embed File</td>
<td>Link</td>
<td>
<input name='embed' type='text' tabIndex={7} placeholder='Paste link' ref={linkRef} />
<button
@@ -1828,7 +1828,7 @@ const Catalog = () => {
window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true)
: alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
);
}}
>
src/components/views/Description.jsx
+3 -3
View File
@@ -196,7 +196,7 @@ const Description = () => {
window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true)
: alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
);
}}
>
@@ -229,7 +229,7 @@ const Description = () => {
style={{ cursor: 'pointer' }}
onClick={() =>
alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
)
}
>
@@ -719,7 +719,7 @@ const Description = () => {
window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true)
: alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
);
}}
>
src/components/views/Pending.jsx
+427 -287
View File
@@ -23,16 +23,9 @@ import packageJson from '../../../package.json';
const { version } = packageJson;
const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
const Pending = () => {
const {
defaultSubplebbits,
isSettingsOpen, setIsSettingsOpen,
selectedAddress, setSelectedAddress,
selectedStyle,
setSelectedTitle,
showPostFormLink
} = useGeneralStore(state => state);
const { defaultSubplebbits, isSettingsOpen, setIsSettingsOpen, selectedAddress, setSelectedAddress, selectedStyle, setSelectedTitle, showPostFormLink } =
useGeneralStore((state) => state);
const { index } = useParams();
@@ -45,17 +38,17 @@ const Pending = () => {
const subplebbitAddress = comment?.subplebbitAddress;
const subplebbit = useSubplebbit({subplebbitAddress})
const subplebbit = useSubplebbit({ subplebbitAddress });
const selectedTitle = subplebbit?.title;
const handleThumbnailClick = (index, isMobile = false) => {
if (isMobile) {
setIsMobileThumbnailClicked(prevState => ({
setIsMobileThumbnailClicked((prevState) => ({
...prevState,
[index]: !prevState[index],
}));
} else {
setIsThumbnailClicked(prevState => ({
setIsThumbnailClicked((prevState) => ({
...prevState,
[index]: !prevState[index],
}));
@@ -66,17 +59,17 @@ const Pending = () => {
setSelectedAddress(comment?.subplebbitAddress);
}, [comment, setSelectedAddress]);
const stateString = useStateString(comment)
const stateString = useStateString(comment);
const errorString = useMemo(() => {
if (comment?.state === 'failed') {
let errorString = 'Failed fetching pending thread. Pending index: ' + index;
if (comment.error) {
errorString += `: ${comment.error.toString().slice(0, 300)}`
errorString += `: ${comment.error.toString().slice(0, 300)}`;
}
return errorString
return errorString;
}
}, [comment?.state, comment?.error, index])
}, [comment?.state, comment?.error, index]);
useEffect(() => {
if (errorString) {
@@ -88,7 +81,7 @@ const Pending = () => {
const navigate = useNavigate();
const [commentMediaInfo, setCommentMediaInfo] = useState(null);
const fallbackImgUrl = "assets/filedeleted-res.gif";
const fallbackImgUrl = 'assets/filedeleted-res.gif';
// mobile navbar board select functionality
const handleSelectChange = (event) => {
@@ -116,118 +109,150 @@ const Pending = () => {
}
}, [comment]);
return (
<>
<Helmet>
<title>{`plebchan - Pending Thread #${parseInt(index) + 1}`}</title>
</Helmet>
<Container>
<CreateBoardModal
selectedStyle={selectedStyle}
isOpen={isCreateBoardOpen}
closeModal={() => setIsCreateBoardOpen(false)} />
<SettingsModal
selectedStyle={selectedStyle}
isOpen={isSettingsOpen}
closeModal={() => setIsSettingsOpen(false)} />
<CreateBoardModal selectedStyle={selectedStyle} isOpen={isCreateBoardOpen} closeModal={() => setIsCreateBoardOpen(false)} />
<SettingsModal selectedStyle={selectedStyle} isOpen={isSettingsOpen} closeModal={() => setIsSettingsOpen(false)} />
<NavBar selectedStyle={selectedStyle}>
<>
<span className="boardList">
<span className='boardList'>
[
<Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link>
<Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>
All
</Link>
 / 
<Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link>
<Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>
Subscriptions
</Link>
]&nbsp;[
{defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}>
{index === 0 ? null : "\u00a0"}
<Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
<span className='boardList' key={`span-${subplebbit.address}`}>
{index === 0 ? null : '\u00a0'}
<Link
to={`/p/${subplebbit.address}`}
key={`a-${subplebbit.address}`}
onClick={() => {
setSelectedTitle(subplebbit.title);
setSelectedAddress(subplebbit.address);
}}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
{index !== defaultSubplebbits.length - 1 ? " /" : null}
>
{subplebbit.title ? subplebbit.title : subplebbit.address}
</Link>
{index !== defaultSubplebbits.length - 1 ? ' /' : null}
</span>
))}
]
</span>
<span className="nav">
<span className='nav'>
[
<span id="button-span" style={{cursor: 'pointer'}} onClick={
() => {
window.electron && window.electron.isElectron ? (
setIsCreateBoardOpen(true)
) : (
alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n'
)
)
}
}>Create Board</span>
]
[
<Link to={`/profile/c/${index}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
]
[
<Link to="/">Home</Link>
]
<span
id='button-span'
style={{ cursor: 'pointer' }}
onClick={() => {
window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true)
: alert(
'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
);
}}
>
Create Board
</span>
<div id="board-nav-mobile" style={{ top: visible ? 0 : '-23px' }}>
<div className="nav-container">
<div className="board-select">
] [
<Link to={`/profile/c/${index}/settings`} onClick={() => setIsSettingsOpen(true)}>
Settings
</Link>
] [<Link to='/'>Home</Link>]
</span>
<div id='board-nav-mobile' style={{ top: visible ? 0 : '-23px' }}>
<div className='nav-container'>
<div className='board-select'>
<strong>Board</strong>
&nbsp;
<select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
<option value="all">All</option>
<option value="subscriptions">Subscriptions</option>
{!defaultSubplebbits.some(subplebbit => subplebbit.address === selectedAddress) && (
<option value={selectedAddress}>{selectedAddress}</option>
)}
{defaultSubplebbits.map(subplebbit => (
<option key={`option-${subplebbit.address}`} value={subplebbit.address}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
<select id='board-select-mobile' value={selectedAddress} onChange={handleSelectChange}>
<option value='all'>All</option>
<option value='subscriptions'>Subscriptions</option>
{!defaultSubplebbits.some((subplebbit) => subplebbit.address === selectedAddress) && <option value={selectedAddress}>{selectedAddress}</option>}
{defaultSubplebbits.map((subplebbit) => (
<option key={`option-${subplebbit.address}`} value={subplebbit.address}>
{subplebbit.title ? subplebbit.title : subplebbit.address}
</option>
))}
</select> 
<span id="button-span" style={{cursor: 'pointer'}} onClick={
() => alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n'
</select>
 
<span
id='button-span'
style={{ cursor: 'pointer' }}
onClick={() =>
alert(
'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
)
}>Create Board</span>
}
>
Create Board
</span>
</div>
<div className="page-jump">
<Link to={`/p/${selectedAddress}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
<div className='page-jump'>
<Link to={`/p/${selectedAddress}/settings`} onClick={() => setIsSettingsOpen(true)}>
Settings
</Link>
&nbsp;
<Link to="/" onClick={() => {handleStyleChange({target: {value: "Yotsuba"}}); window.scrollTo(0, 0);}}>Home</Link>
<Link
to='/'
onClick={() => {
handleStyleChange({ target: { value: 'Yotsuba' } });
window.scrollTo(0, 0);
}}
>
Home
</Link>
</div>
</div>
</div>
<div id="separator-mobile">&nbsp;</div>
<div id="separator-mobile">&nbsp;</div>
<div id='separator-mobile'>&nbsp;</div>
<div id='separator-mobile'>&nbsp;</div>
</>
</NavBar>
<Header selectedStyle={selectedStyle}>
<>
<div className="banner">
<div className='banner'>
<ImageBanner />
</div>
<>
<div className="board-title">{selectedTitle ?? null}</div>
<div className="board-address">{selectedAddress ? ("p/" + selectedAddress) : null}</div>
<div className='board-title'>{selectedTitle ?? null}</div>
<div className='board-address'>{selectedAddress ? 'p/' + selectedAddress : null}</div>
</>
</>
</Header>
<Break selectedStyle={selectedStyle} />
<PostForm selectedStyle={selectedStyle} name="post" action="" method="post" enctype="multipart/form-data">
<ReplyFormLink id="post-form-link" showReplyFormLink={showPostFormLink} selectedStyle={selectedStyle} >
<div id="return-button-mobile">
<span className="btn-wrap">
<Link to={`/p/${selectedAddress}`} onClick={()=> {window.scrollTo(0, 0)}}>Return</Link>
<PostForm selectedStyle={selectedStyle} name='post' action='' method='post' enctype='multipart/form-data'>
<ReplyFormLink id='post-form-link' showReplyFormLink={showPostFormLink} selectedStyle={selectedStyle}>
<div id='return-button-mobile'>
<span className='btn-wrap'>
<Link
to={`/p/${selectedAddress}`}
onClick={() => {
window.scrollTo(0, 0);
}}
>
Return
</Link>
</span>
</div>
<div id="catalog-button-mobile">
<span className="btn-wrap">
<Link to={`/p/${selectedAddress}/catalog`} onClick={()=> {window.scrollTo(0, 0)}}>Catalog</Link>
<div id='catalog-button-mobile'>
<span className='btn-wrap'>
<Link
to={`/p/${selectedAddress}/catalog`}
onClick={() => {
window.scrollTo(0, 0);
}}
>
Catalog
</Link>
</span>
</div>
<div>&nbsp;</div>
@@ -236,350 +261,462 @@ const Pending = () => {
<BoardStats subplebbitAddress={subplebbitAddress} />
<TopBar selectedStyle={selectedStyle}>
<hr />
<span className="style-changer">
Style:
 
<select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
<option value="Yotsuba">Yotsuba</option>
<option value="Yotsuba-B">Yotsuba B</option>
<option value="Futaba">Futaba</option>
<option value="Burichan">Burichan</option>
<option value="Tomorrow">Tomorrow</option>
<option value="Photon">Photon</option>
<span className='style-changer'>
Style:  
<select id='style-selector' onChange={handleStyleChange} value={selectedStyle}>
<option value='Yotsuba'>Yotsuba</option>
<option value='Yotsuba-B'>Yotsuba B</option>
<option value='Futaba'>Futaba</option>
<option value='Burichan'>Burichan</option>
<option value='Tomorrow'>Tomorrow</option>
<option value='Photon'>Photon</option>
</select>
</span>
<span className="return-button" id="return-button-desktop">
<span className='return-button' id='return-button-desktop'>
[
<Link to={`/p/${selectedAddress}`} onClick={()=> {window.scrollTo(0, 0)}}>Return</Link>
<Link
to={`/p/${selectedAddress}`}
onClick={() => {
window.scrollTo(0, 0);
}}
>
Return
</Link>
]
</span>
<span className="return-button catalog-button" id="catalog-button-desktop">
<span className='return-button catalog-button' id='catalog-button-desktop'>
[
<Link to={`/p/${selectedAddress}/catalog`} onClick={()=> {window.scrollTo(0, 0)}}>Catalog</Link>
<Link
to={`/p/${selectedAddress}/catalog`}
onClick={() => {
window.scrollTo(0, 0);
}}
>
Catalog
</Link>
]
</span>
<span className={stateString ? "reply-stat ellipsis" : ""}>{stateString}</span>
<span className={stateString ? 'reply-stat ellipsis' : ''}>{stateString}</span>
<hr />
</TopBar>
<Tooltip id="tooltip" className="tooltip" />
<Tooltip id='tooltip' className='tooltip' />
<BoardForm selectedStyle={selectedStyle}>
{comment !== undefined ? (
<>
<div className="thread">
<div className="op-container">
<div className="post op">
<div className="post-info">
<div className='thread'>
<div className='op-container'>
<div className='post op'>
<div className='post-info'>
{commentMediaInfo?.url ? (
<div key={`f-${index}`} className="file" style={{marginBottom: "5px"}}>
<div key={`ft-${index}`} className="file-text">
<div key={`f-${index}`} className='file' style={{ marginBottom: '5px' }}>
<div key={`ft-${index}`} className='file-text'>
Link:&nbsp;
<a key={`fa-${index}`} href={commentMediaInfo.url} target="_blank"
rel="noopener noreferrer">{
commentMediaInfo?.url.length > 30 ?
commentMediaInfo?.url.slice(0, 30) + "(...)" :
commentMediaInfo?.url
}</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type})
<a key={`fa-${index}`} href={commentMediaInfo.url} target='_blank' rel='noopener noreferrer'>
{commentMediaInfo?.url.length > 30 ? commentMediaInfo?.url.slice(0, 30) + '(...)' : commentMediaInfo?.url}
</a>
&nbsp;({commentMediaInfo?.type === 'iframe' ? 'video' : commentMediaInfo?.type})
{isThumbnailClicked[index] ? (
<span>
-[
<span className='reply-link'
<span
className='reply-link'
style={{ textDecoration: 'underline', cursor: 'pointer' }}
onClick={() => {handleThumbnailClick(index)}}>Close</span>
onClick={() => {
handleThumbnailClick(index);
}}
>
Close
</span>
]
</span>
) : null}
</div>
{commentMediaInfo?.type === 'iframe' && (
<div key={`enlarge-${index}`}
className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}>
<span key={`fta-${index}`} className="file-thumb">
<div key={`enlarge-${index}`} className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}>
<span key={`fta-${index}`} className='file-thumb'>
{(isThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
<iframe
className='enlarged'
key={`fti-${index}`}
src={commentMediaInfo.embedUrl}
width={commentMediaInfo.thumbnail ? "560" : "250"}
height="315"
style={{border: "none"}}
title="Embedded content"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen />
width={commentMediaInfo.thumbnail ? '560' : '250'}
height='315'
style={{ border: 'none' }}
title='Embedded content'
allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
allowFullScreen
/>
) : (
<img
key={`fti-${index}`}
src={commentMediaInfo.thumbnail}
alt="thumbnail"
onClick={() => {handleThumbnailClick(index)}}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
alt='thumbnail'
onClick={() => {
handleThumbnailClick(index);
}}
style={{ cursor: 'pointer' }}
onError={(e) => (e.target.src = fallbackImgUrl)}
/>
)}
</span>
</div>
)}
{commentMediaInfo?.type === "webpage" ? (
<div key={`enlarge-${index}`} className="img-container">
<span key={`fta-${index}`} className="file-thumb">
{commentMediaInfo?.type === 'webpage' ? (
<div key={`enlarge-${index}`} className='img-container'>
<span key={`fta-${index}`} className='file-thumb'>
{comment.thumbnailUrl ? (
<img key={`fti-${index}`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
<img
key={`fti-${index}`}
src={commentMediaInfo.thumbnail}
alt={commentMediaInfo.type}
onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
style={{ cursor: 'pointer' }}
onError={(e) => (e.target.src = fallbackImgUrl)}
/>
) : null}
</span>
</div>
) : null}
{commentMediaInfo?.type === "image" ? (
<div key={`enlarge-${index}`} className="img-container">
<span key={`fta-${index}`} className="file-thumb">
<img key={`fti-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
{commentMediaInfo?.type === 'image' ? (
<div key={`enlarge-${index}`} className='img-container'>
<span key={`fta-${index}`} className='file-thumb'>
<img
key={`fti-${index}`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
style={{ cursor: 'pointer' }}
onError={(e) => (e.target.src = fallbackImgUrl)}
/>
</span>
</div>
) : null}
{commentMediaInfo?.type === "video" ? (
{commentMediaInfo?.type === 'video' ? (
<div key={`enlarge-${index}`} className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}>
<span key={`fta-${index}`} className="file-thumb">
<span key={`fta-${index}`} className='file-thumb'>
{isThumbnailClicked[index] ? (
<video
className='enlarged'
key={`fti-${index}`}
src={commentMediaInfo.url}
controls
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl}
style={{ cursor: 'pointer' }}
onError={(e) => (e.target.src = fallbackImgUrl)}
/>
) : (
<video
key={`fti-${index}`}
src={commentMediaInfo.url}
alt="thumbnail"
onClick={() => {handleThumbnailClick(index)}}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl}
alt='thumbnail'
onClick={() => {
handleThumbnailClick(index);
}}
style={{ cursor: 'pointer' }}
onError={(e) => (e.target.src = fallbackImgUrl)}
/>
)}
</span>
</div>
) : null}
{commentMediaInfo?.type === "audio" ? (
<span key={`fta-${index}`} className="file-thumb">
<audio controls key={`fti-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
{commentMediaInfo?.type === 'audio' ? (
<span key={`fta-${index}`} className='file-thumb'>
<audio
controls
key={`fti-${index}`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
onError={(e) => (e.target.src = fallbackImgUrl)}
/>
</span>
) : null}
</div>
) : null}
<span className="name-block">
<span className='name-block'>
{comment.title ? (
comment.title.length > 75 ?
comment.title.length > 75 ? (
<>
<span key={`q-${"pending"}`} className="title"
data-tooltip-id="tooltip"
data-tooltip-content={comment.title}
data-tooltip-place="top">
{comment.title.slice(0, 75) + " (...)"}
<span key={`q-${'pending'}`} className='title' data-tooltip-id='tooltip' data-tooltip-content={comment.title} data-tooltip-place='top'>
{comment.title.slice(0, 75) + ' (...)'}
</span>
</>
: <span key={`q-${"pending"}`} className="title">
) : (
<span key={`q-${'pending'}`} className='title'>
{comment.title}
</span>)
: null}
</span>
)
) : null}
&nbsp;
{comment.author?.displayName
? comment.author?.displayName.length > 20
? <>
<span key={`n-${"pending"}`} className="name"
data-tooltip-id="tooltip"
{comment.author?.displayName ? (
comment.author?.displayName.length > 20 ? (
<>
<span
key={`n-${'pending'}`}
className='name'
data-tooltip-id='tooltip'
data-tooltip-content={comment.author?.displayName}
data-tooltip-place="top">
{comment.author?.displayName.slice(0, 20) + " (...)"}
data-tooltip-place='top'
>
{comment.author?.displayName.slice(0, 20) + ' (...)'}
</span>
</>
: <span key={`n-${"pending"}`} className="name">
{comment.author?.displayName}</span>
: <span key={`n-${"pending"}`} className="name">
Anonymous</span>}
) : (
<span key={`n-${'pending'}`} className='name'>
{comment.author?.displayName}
</span>
)
) : (
<span key={`n-${'pending'}`} className='name'>
Anonymous
</span>
)}
&nbsp; &nbsp;
<span className='poster-address'>(u/{account?.author?.shortAddress})</span>
&nbsp;
&nbsp;
<span className="poster-address">
(u/{account?.author?.shortAddress})
<span className='date-time' data-utc='data'>
{getDate(comment?.timestamp)}
</span>
&nbsp;
<span className="date-time" data-utc="data">{getDate(comment?.timestamp)}</span>
&nbsp;
<span className="post-number">
<Link to="" title="Link to this post">c/</Link>
<span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span>
</span>&nbsp;&nbsp;
<button key={`pmb-${"pending"}`} className="post-menu-button" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>▶</button>
<span className='post-number'>
<Link to='' title='Link to this post'>
c/
</Link>
<span key='pending' style={{ color: 'red', fontWeight: '700' }}>
Pending
</span>
<blockquote key={`blockquote-${"pending"}`}>
<Post content={comment.content} comment={comment} handleQuoteClick={handleQuoteClick} key={`post-${"pending"}`} />
</span>
&nbsp;&nbsp;
<button key={`pmb-${'pending'}`} className='post-menu-button' title='Post menu' style={{ all: 'unset', cursor: 'pointer' }}>
▶
</button>
</span>
<blockquote key={`blockquote-${'pending'}`}>
<Post content={comment.content} comment={comment} handleQuoteClick={handleQuoteClick} key={`post-${'pending'}`} />
</blockquote>
</div>
</div>
</div>
</div>
<div className="thread-mobile" key="thread-mobile">
<div className='thread-mobile' key='thread-mobile'>
<hr />
<div className="op-container" key="op-container">
<div key={`mob-po-${"pending"}`} className="post op">
<div key={`mob-pi-${"pending"}`} className="post-info-mobile">
<button style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pb-${"pending"}`} className="post-menu-button-mobile" onClick={() => {}}>...</button>
<span className="name-block-mobile">
{comment.author?.displayName
? comment.author?.displayName.length > 15
? <>
<span key={`mob-n-${"pending"}`} className="name-mobile"
data-tooltip-id="tooltip"
<div className='op-container' key='op-container'>
<div key={`mob-po-${'pending'}`} className='post op'>
<div key={`mob-pi-${'pending'}`} className='post-info-mobile'>
<button style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pb-${'pending'}`} className='post-menu-button-mobile' onClick={() => {}}>
...
</button>
<span className='name-block-mobile'>
{comment.author?.displayName ? (
comment.author?.displayName.length > 15 ? (
<>
<span
key={`mob-n-${'pending'}`}
className='name-mobile'
data-tooltip-id='tooltip'
data-tooltip-content={comment.author?.displayName}
data-tooltip-place="top">
{comment.author?.displayName.slice(0, 15) + " (...)"}
data-tooltip-place='top'
>
{comment.author?.displayName.slice(0, 15) + ' (...)'}
</span>
</>
: <span key={`mob-n-${"pending"}`} className="name-mobile">
{comment.author?.displayName}</span>
: <span key={`mob-n-${"pending"}`} className="name-mobile">
Anonymous</span>}
) : (
<span key={`mob-n-${'pending'}`} className='name-mobile'>
{comment.author?.displayName}
</span>
)
) : (
<span key={`mob-n-${'pending'}`} className='name-mobile'>
Anonymous
</span>
)}
&nbsp;
<span key={`mob-pa-${"pending"}`} className="poster-address-mobile">
<span key={`mob-pa-${'pending'}`} className='poster-address-mobile'>
(u/{account?.author?.shortAddress})&nbsp;
</span>
<br key={`mob-br1-${"pending"}`} />
<br key={`mob-br1-${'pending'}`} />
{comment.title ? (
comment.title.length > 30 ?
comment.title.length > 30 ? (
<>
<span key={`mob-t-${"pending"}`} className="subject-mobile"
data-tooltip-id="tooltip"
<span
key={`mob-t-${'pending'}`}
className='subject-mobile'
data-tooltip-id='tooltip'
data-tooltip-content={comment.title}
data-tooltip-place="top">
{comment.title.slice(0, 30) + " (...)"}
data-tooltip-place='top'
>
{comment.title.slice(0, 30) + ' (...)'}
</span>
</>
: <span key={`mob-t-${"pending"}`} className="subject-mobile">
) : (
<span key={`mob-t-${'pending'}`} className='subject-mobile'>
{comment.title}
</span>) : null}
</span>
<span key={`mob-dt-${"pending"}`} className="date-time-mobile">
)
) : null}
</span>
<span key={`mob-dt-${'pending'}`} className='date-time-mobile'>
{getDate(comment?.timestamp)}
&nbsp;
<button id="reply-button" style={{ all: 'unset' }} key={`mob-no-${"pending"}`}>c/</button>
<button id='reply-button' style={{ all: 'unset' }} key={`mob-no-${'pending'}`}>
c/
</button>
&nbsp;
<span key="pending-mob" style={{color: 'red', fontWeight: '700'}}>Pending</span>
<span key='pending-mob' style={{ color: 'red', fontWeight: '700' }}>
Pending
</span>
</span>
</div>
{comment.link ? (
<div key={`mob-f-${index}`} className="file-mobile">
<div key={`mob-f-${index}`} className='file-mobile'>
{commentMediaInfo?.type === 'iframe' && (
<div key={`enlarge-mob-${index}`} className="img-container">
<span key={`mob-fta-${index}`} className="file-thumb-mobile">
<div key={`enlarge-mob-${index}`} className='img-container'>
<span key={`mob-fta-${index}`} className='file-thumb-mobile'>
{(isMobileThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
<div style={{width: "92vw"}}>
<div style={{ width: '92vw' }}>
<iframe
key={`mob-fti-${index}`}
src={commentMediaInfo.embedUrl}
style={{border: "none", height: "250px"}}
title="Embedded content"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen />
style={{ border: 'none', height: '250px' }}
title='Embedded content'
allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
allowFullScreen
/>
</div>
) : (
<img
key={`mob-fti-${index}`}
src={commentMediaInfo.thumbnail}
alt="thumbnail"
onClick={() => {handleThumbnailClick(index, true)}}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
alt='thumbnail'
onClick={() => {
handleThumbnailClick(index, true);
}}
style={{ cursor: 'pointer' }}
onError={(e) => (e.target.src = fallbackImgUrl)}
/>
)}
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
{commentMediaInfo?.type === 'video' || commentMediaInfo?.type === 'iframe' ? (
isMobileThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}}
onClick={() => {handleThumbnailClick(index, true)}}
>Close</span>
<div style={{ textAlign: 'center', marginTop: '15px', marginBottom: '15px' }}>
<span
className='button-mobile'
style={{ float: 'none', cursor: 'pointer' }}
onClick={() => {
handleThumbnailClick(index, true);
}}
>
Close
</span>
</div>
) : (
<div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
)) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
<div key={`mob-fi-${index}`} className='file-info-mobile'>
video
</div>
)
) : (
<div key={`mob-fi-${index}`} className='file-info-mobile'>
video
</div>
)}
</span>
</div>
)}
{commentMediaInfo?.url ? (
commentMediaInfo.type === "webpage" ? (
<div key={`enlarge-mob-${index}`} className="img-container">
<span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
commentMediaInfo.type === 'webpage' ? (
<div key={`enlarge-mob-${index}`} className='img-container'>
<span key={`mob-ft${comment.cid}`} className='file-thumb-mobile'>
{comment.thumbnailUrl ? (
<img key={`mob-img-${index}`}
src={commentMediaInfo.thumbnail} alt="thumbnail"
<img
key={`mob-img-${index}`}
src={commentMediaInfo.thumbnail}
alt='thumbnail'
onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
style={{ cursor: 'pointer' }}
onError={(e) => (e.target.src = fallbackImgUrl)}
/>
) : null}
<div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
<div key={`mob-fi-${index}`} className='file-info-mobile'>
{commentMediaInfo?.type}
</div>
</span>
</div>
) : commentMediaInfo.type === "image" ? (
<div key={`enlarge-mob-${index}`} className="img-container">
<span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
<img key={`mob-img-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
) : commentMediaInfo.type === 'image' ? (
<div key={`enlarge-mob-${index}`} className='img-container'>
<span key={`mob-ft${comment.cid}`} className='file-thumb-mobile'>
<img
key={`mob-img-${index}`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
style={{ cursor: 'pointer' }}
onError={(e) => (e.target.src = fallbackImgUrl)}
/>
<div key={`mob-fi-${index}`} className='file-info-mobile'>
{commentMediaInfo?.type}
</div>
</span>
</div>
) : commentMediaInfo.type === "video" ? (
<span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
) : commentMediaInfo.type === 'video' ? (
<span key={`mob-ft${comment.cid}`} className='file-thumb-mobile'>
{isMobileThumbnailClicked[index] ? (
<video key={`fti-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
<video
key={`fti-${index}`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
controls
style={{ cursor: 'pointer' }}
onError={(e) => e.target.src = fallbackImgUrl} />
onError={(e) => (e.target.src = fallbackImgUrl)}
/>
) : (
<video
key={`fti-${index}`}
src={commentMediaInfo.url}
alt="thumbnail"
onClick={() => {handleThumbnailClick(index, true)}}
style={{cursor: "pointer"}}
id="video-thumbnail-mobile"
onError={(e) => e.target.src = fallbackImgUrl}
alt='thumbnail'
onClick={() => {
handleThumbnailClick(index, true);
}}
style={{ cursor: 'pointer' }}
id='video-thumbnail-mobile'
onError={(e) => (e.target.src = fallbackImgUrl)}
/>
)}
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
{commentMediaInfo?.type === 'video' || commentMediaInfo?.type === 'iframe' ? (
isMobileThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}}
onClick={() => {handleThumbnailClick(index, true)}}
>Close</span>
<div style={{ textAlign: 'center', marginTop: '15px', marginBottom: '15px' }}>
<span
className='button-mobile'
style={{ float: 'none', cursor: 'pointer' }}
onClick={() => {
handleThumbnailClick(index, true);
}}
>
Close
</span>
</div>
) : (
<div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
)) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
<div key={`mob-fi-${index}`} className='file-info-mobile'>
video
</div>
)
) : (
<div key={`mob-fi-${index}`} className='file-info-mobile'>
video
</div>
)}
</span>
) : commentMediaInfo.type === "audio" ? (
<span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
<audio key={`mob-img-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
) : commentMediaInfo.type === 'audio' ? (
<span key={`mob-ft${comment.cid}`} className='file-thumb-mobile'>
<audio key={`mob-img-${index}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => (e.target.src = fallbackImgUrl)} />
<div key={`mob-fi-${index}`} className='file-info-mobile'>
{commentMediaInfo?.type}
</div>
</span>
) : null
) : null}
</div>
) : null}
<blockquote key={`mob-bq-${"pending"}`} className="post-message-mobile">
<blockquote key={`mob-bq-${'pending'}`} className='post-message-mobile'>
{comment.content ? (
<>
<Post content={comment.content} handleQuoteClick={handleQuoteClick} comment={comment} key={`post-mobile-${"pending"}`} />
<Post content={comment.content} handleQuoteClick={handleQuoteClick} comment={comment} key={`post-mobile-${'pending'}`} />
</>
) : null}
</blockquote>
@@ -587,7 +724,7 @@ const Pending = () => {
</div>
</div>
<BottomBar selectedStyle={selectedStyle}>
<div id="bottombar-desktop">
<div id='bottombar-desktop'>
<hr />
</div>
</BottomBar>
@@ -596,17 +733,20 @@ const Pending = () => {
<PostLoader />
)}
</BoardForm>
<div style={{
textAlign: "center",
fontSize: "11px",
marginTop: "2em",
marginBottom: "2em",
}}>
plebchan v{version}{commitRef}. GPL-2.0
<div
style={{
textAlign: 'center',
fontSize: '11px',
marginTop: '2em',
marginBottom: '2em',
}}
>
plebchan v{version}
{commitRef}. GPL-2.0
</div>
</Container>
</>
);
}
};
export default Pending;
src/components/views/Rules.jsx
+3 -3
View File
@@ -206,7 +206,7 @@ const Rules = () => {
window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true)
: alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
);
}}
>
@@ -239,7 +239,7 @@ const Rules = () => {
style={{ cursor: 'pointer' }}
onClick={() =>
alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
)
}
>
@@ -655,7 +655,7 @@ const Rules = () => {
window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true)
: alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
);
}}
>
src/components/views/Subscriptions.jsx
+3 -3
View File
@@ -606,7 +606,7 @@ const Subscriptions = () => {
window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true)
: alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
);
}}
>
@@ -638,7 +638,7 @@ const Subscriptions = () => {
style={{ cursor: 'pointer' }}
onClick={() =>
alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
)
}
>
@@ -3322,7 +3322,7 @@ const Subscriptions = () => {
window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true)
: alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
);
}}
>
src/components/views/SubscriptionsCatalog.jsx
+3 -3
View File
@@ -849,7 +849,7 @@ const SubscriptionsCatalog = () => {
window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true)
: alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
);
}}
>
@@ -881,7 +881,7 @@ const SubscriptionsCatalog = () => {
style={{ cursor: 'pointer' }}
onClick={() =>
alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
)
}
>
@@ -1040,7 +1040,7 @@ const SubscriptionsCatalog = () => {
window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true)
: alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
);
}}
>
src/components/views/Thread.jsx
+4 -4
View File
@@ -700,7 +700,7 @@ const Thread = () => {
window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true)
: alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
);
}}
>
@@ -733,7 +733,7 @@ const Thread = () => {
style={{ cursor: 'pointer' }}
onClick={() =>
alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
)
}
>
@@ -860,7 +860,7 @@ const Thread = () => {
</td>
</tr>
<tr data-type='File'>
<td>Embed File</td>
<td>Link</td>
<td>
<input name='embed' type='text' tabIndex={7} placeholder='Paste link' ref={linkRef} />
<button
@@ -3159,7 +3159,7 @@ const Thread = () => {
window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true)
: alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
);
}}
>
yarn.lock
-15
View File
@@ -2817,21 +2817,6 @@
dependencies:
debug "4.3.3"
"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#0024401c390929e47b44331a8dadd61ba212b871":
version "0.0.1"
resolved "https://github.com/plebbit/plebbit-react-hooks.git#0024401c390929e47b44331a8dadd61ba212b871"
dependencies:
"@plebbit/plebbit-js" "https://github.com/plebbit/plebbit-js.git#6985b2a4194328752c6d76e80470c8079c562869"
"@plebbit/plebbit-logger" "https://github.com/plebbit/plebbit-logger.git"
assert "2.0.0"
ethers "5.6.9"
localforage "1.10.0"
lodash.isequal "4.5.0"
memoizee "0.4.15"
quick-lru "5.1.1"
uuid "8.3.2"
zustand "4.0.0"
"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#b6477148191a501aa0b0c11acfc4761aca0dcc1e":
version "0.0.1"
resolved "https://github.com/plebbit/plebbit-react-hooks.git#b6477148191a501aa0b0c11acfc4761aca0dcc1e"