fix(moderation): clarify moderator composer state

src/components/bbcode-editor-toolbar/bbcode-editor-toolbar.module.css

@@ -61,5 +61,6 @@
   padding: 3px 4px;
   border: 1px inset;
   background: var(--post-form-field-input-background-color, revert);
+  font-weight: normal;
   overflow-wrap: anywhere;
 }

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

@@ -766,9 +766,14 @@ describe('PostForm', () => {
     expect(linkButton).toBeTruthy();
     expect(sizeSelect).toBeTruthy();
     expect(table?.querySelector('select[aria-label="Text color"]')).toBeNull();
-    expect(rows.some((row) => row.querySelector('td')?.textContent === 'mods only')).toBe(true);
+    expect(rows.some((row) => row.querySelector('td')?.textContent === 'format')).toBe(true);
     expect(rows.some((row) => row.querySelector('td')?.textContent === 'comment')).toBe(true);
+    expect(container.textContent).toContain('warning: posting as moderator');
+    const moderatorWarning = Array.from(container.querySelectorAll('div')).find((element) => element.textContent === 'warning: posting as moderator');
+    expect(moderatorWarning?.className).toContain('error');
+    expect(moderatorWarning?.className).toContain('formError');
     expect(table?.textContent).not.toContain('Mod editor');
+    expect(table?.textContent).not.toContain('mods only');
     expect(table?.querySelector('button[aria-label="Quote"]')).toBeNull();
 
     await dispatchInput(textarea as HTMLTextAreaElement, 'hello world');
@@ -822,6 +827,7 @@ describe('PostForm', () => {
 
     expect(container.querySelector('button[aria-label="Bold"]')).toBeNull();
     expect(container.textContent).not.toContain('mods only');
+    expect(container.textContent).not.toContain('warning: posting as moderator');
   });
 
   it('shows the pasted file-link filename next to the upload button', async () => {

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

@@ -261,7 +261,7 @@ const PostFormFields = ({
     )}
     {showBbcodeToolbar ? (
       <tr>
-        <td>mods only</td>
+        <td>format</td>
         <td>
           <BbcodeEditorToolbar
             textareaRef={textRef}
@@ -718,6 +718,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
           />
         </tbody>
       </table>
+      {showBbcodeToolbar ? <div className={`${styles.error} ${styles.formError}`}>warning: posting as moderator</div> : null}
       {formError && <div className={`${styles.error} ${styles.formError}`}>{formError}</div>}
       {publishPostError && <div className={`${styles.error} ${styles.formError}`}>{publishPostError}</div>}
       {publishReplyError && <div className={`${styles.error} ${styles.formError}`}>{publishReplyError}</div>}

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

@@ -637,6 +637,9 @@ describe('ReplyModal', () => {
     expect(container.querySelector('select[aria-label="Text color"]')).toBeNull();
     expect(container.textContent).not.toContain('mods only');
     expect(container.textContent).not.toContain('Mod editor');
+    expect(container.textContent).toContain('warning: posting as moderator');
+    const moderatorWarning = Array.from(container.querySelectorAll('div')).find((element) => element.textContent === 'warning: posting as moderator');
+    expect(moderatorWarning?.className).toContain('error');
     expect(container.querySelector('button[aria-label="Quote"]')).toBeNull();
 
     const selectionStart = textarea?.value.indexOf('selected text') ?? 0;
@@ -653,6 +656,7 @@ describe('ReplyModal', () => {
 
     expect(container.querySelector('button[aria-label="Red text"]')).toBeNull();
     expect(container.textContent).not.toContain('mods only');
+    expect(container.textContent).not.toContain('warning: posting as moderator');
   });
 
   it('updates account state, applies upload completions, and closes once publishing succeeds', async () => {

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

@@ -542,6 +542,7 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threa
             {t('post')}
           </button>
         </div>
+        {showBbcodeToolbar ? <div className={styles.error}>warning: posting as moderator</div> : null}
         {lengthError ? (
           <div className={styles.error}>{lengthError}</div>
         ) : error ? (