feat(directories): implement features.noSpoilers and features.noSpoilerReplies for board-specific spoiler checkbox

src/components/post-form/post-form.tsx

@@ -9,7 +9,7 @@ import { getHasThumbnail, getLinkMediaInfo } from '../../lib/utils/media-utils';
 import { formatMarkdown } from '../../lib/utils/post-utils';
 import { isValidURL } from '../../lib/utils/url-utils';
 import { isAllView, isCatalogView, isModQueueView, isModView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
-import { useDirectories } from '../../hooks/use-directories';
+import { useDirectories, useDirectoryByAddress } from '../../hooks/use-directories';
 import { useResolvedSubplebbitAddress } from '../../hooks/use-resolved-subplebbit-address';
 import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
 import useIsSubplebbitOffline from '../../hooks/use-is-subplebbit-offline';
@@ -58,6 +58,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
   const resolvedAddress = useResolvedSubplebbitAddress();
   const subplebbitAddress = resolvedAddress || accountComment?.subplebbitAddress;
   const { setPublishPostOptions, postIndex, publishPost, publishPostOptions, resetPublishPostOptions } = usePublishPost({ subplebbitAddress });
+  const effectiveBoardAddress = subplebbitAddress || publishPostOptions.subplebbitAddress;
 
   const textRef = useRef<HTMLTextAreaElement>(null);
   const urlRef = useRef<HTMLInputElement>(null);
@@ -69,6 +70,9 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
   const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams());
   const subscriptions = account?.subscriptions || [];
   const directories = useDirectories();
+  const directoryEntry = useDirectoryByAddress(effectiveBoardAddress);
+  const showSpoilerForPost = directoryEntry?.features?.noSpoilers !== true;
+  const showSpoilerForReply = directoryEntry?.features?.noSpoilerReplies !== true;
 
   const { accountSubplebbits } = useAccountSubplebbits();
   const accountSubplebbitAddresses = Object.keys(accountSubplebbits);
@@ -294,20 +298,22 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
             <span>{isUploading ? t('uploading') : uploadedFileName || t('no_file_chosen')}</span>
           </td>
         </tr>
-        <tr className={styles.spoilerButton}>
-          <td>{t('options')}</td>
-          <td>
-            [
-            <label>
-              <input
-                type='checkbox'
-                onChange={(e) => (isInPostView ? setPublishReplyOptions({ spoiler: e.target.checked }) : setPublishPostOptions({ spoiler: e.target.checked }))}
-              />
-              {capitalize(t('spoiler'))}?
-            </label>
-            ]
-          </td>
-        </tr>
+        {((isInPostView && showSpoilerForReply) || (!isInPostView && showSpoilerForPost)) && (
+          <tr className={styles.spoilerButton}>
+            <td>{t('options')}</td>
+            <td>
+              [
+              <label>
+                <input
+                  type='checkbox'
+                  onChange={(e) => (isInPostView ? setPublishReplyOptions({ spoiler: e.target.checked }) : setPublishPostOptions({ spoiler: e.target.checked }))}
+                />
+                {capitalize(t('spoiler'))}?
+              </label>
+              ]
+            </td>
+          </tr>
+        )}
         {(isInAllView || isInSubscriptionsView || isInModView) && (
           <tr>
             <td>{t('board')}</td>

src/components/reply-modal/reply-modal.tsx

@@ -9,6 +9,7 @@ import { isValidURL } from '../../lib/utils/url-utils';
 import { isAllView, isSubscriptionsView } from '../../lib/utils/view-utils';
 import useSelectedTextStore from '../../stores/use-selected-text-store';
 import useReplyModalStore from '../../stores/use-reply-modal-store';
+import { useDirectoryByAddress } from '../../hooks/use-directories';
 import usePublishReply from '../../hooks/use-publish-reply';
 import useIsMobile from '../../hooks/use-is-mobile';
 import { useFileUpload } from '../../hooks/use-file-upload';
@@ -30,6 +31,8 @@ interface ReplyModalProps {
 
 const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threadNumber, postCid, scrollY, subplebbitAddress }: ReplyModalProps) => {
   const { t } = useTranslation();
+  const directoryEntry = useDirectoryByAddress(subplebbitAddress);
+  const showSpoilerForReply = directoryEntry?.features?.noSpoilerReplies !== true;
   const { setPublishReplyOptions, publishReply, resetPublishReplyOptions, replyIndex } = usePublishReply({
     cid: parentCid,
     subplebbitAddress,
@@ -343,14 +346,16 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threa
               {isUploading ? t('uploading') : uploadedFileName || t('no_file_chosen')}
             </span>
           </span>
-          <span className={styles.spoilerButton}>
-            [
-            <label>
-              <input type='checkbox' onChange={(e) => setPublishReplyOptions({ spoiler: e.target.checked })} />
-              {capitalize(t('spoiler'))}?
-            </label>
-            ]
-          </span>
+          {showSpoilerForReply && (
+            <span className={styles.spoilerButton}>
+              [
+              <label>
+                <input type='checkbox' onChange={(e) => setPublishReplyOptions({ spoiler: e.target.checked })} />
+                {capitalize(t('spoiler'))}?
+              </label>
+              ]
+            </span>
+          )}
           <button className={styles.publishButton} onClick={onPublishReply}>
             {t('post')}
           </button>