Add NSFW/SFW board filter to /all/ board page on mobile (#1071)

* feat(board-buttons): add NSFW/SFW filter to /all/ board page on mobile

* refactor(board-buttons): extract MobileAllFeedFilter padding to CSS class

src/app.tsx

@@ -25,7 +25,7 @@ import {
   isValidModRoute,
 } from './lib/utils/route-utils';
 import styles from './app.module.css';
-import { DesktopBoardButtons, MobileBoardButtons } from './components/board-buttons';
+import { DesktopBoardButtons, MobileAllFeedFilter, MobileBoardButtons } from './components/board-buttons';
 import Board from './views/board';
 import Blotter from './views/blotter';
 import Catalog from './views/catalog';
@@ -153,6 +153,7 @@ const BoardLayout = () => {
             <>
               <MobileBoardButtons />
               <PostForm key={key} />
+              {isInAllView && <MobileAllFeedFilter />}
             </>
           ))
         : (subplebbitAddress || isInAllView || isInModView || isInSubscriptionsView || pendingPost?.subplebbitAddress || isOnModQueueRoute) && (

src/components/board-buttons/board-buttons.module.css

@@ -50,6 +50,10 @@
   padding: 10px 0;
 }
 
+.mobileAllFeedFilterPadding {
+  padding-bottom: 15px;
+}
+
 .desktopBoardButtons {
   text-transform: capitalize;
 }

src/components/board-buttons/board-buttons.tsx

@@ -364,6 +364,15 @@ const AllFeedFilter = () => {
   );
 };
 
+export const MobileAllFeedFilter = () => (
+  <div className={styles.mobileBoardButtons}>
+    <hr />
+    <div className={`${styles.options} ${styles.mobileAllFeedFilterPadding}`}>
+      <AllFeedFilter />
+    </div>
+  </div>
+);
+
 export const MobileBoardButtons = () => {
   const { t } = useTranslation();
   const params = useParams();

src/components/board-buttons/index.ts

@@ -1 +1 @@
-export { MobileBoardButtons, DesktopBoardButtons } from './board-buttons';
+export { MobileAllFeedFilter, MobileBoardButtons, DesktopBoardButtons } from './board-buttons';