More media-first adjustments

src/pages/account-statuses.jsx

@@ -21,6 +21,7 @@ import pmem from '../utils/pmem';
 import showToast from '../utils/show-toast';
 import states from '../utils/states';
 import { saveStatus } from '../utils/states';
+import { isMediaFirstInstance } from '../utils/store-utils';
 import useTitle from '../utils/useTitle';
 
 const LIMIT = 20;
@@ -68,6 +69,8 @@ function AccountStatuses() {
     searchOffsetRef.current = 0;
   }, allSearchParams);
 
+  const mediaFirst = useMemo(() => isMediaFirstInstance(), []);
+
   const sameCurrentInstance = useMemo(
     () => instance === currentInstance,
     [instance, currentInstance],
@@ -186,7 +189,7 @@ function AccountStatuses() {
           limit: LIMIT,
           exclude_replies: excludeReplies,
           exclude_reblogs: excludeBoosts,
-          only_media: media,
+          only_media: media || undefined,
           tagged,
         });
     }
@@ -270,6 +273,9 @@ function AccountStatuses() {
       } catch (e) {
         console.error(e);
       }
+      // No need, because the whole filter bar is hidden
+      // TODO: Revisit this
+      if (!mediaFirst) {
         try {
           const featuredTags = await masto.v1.accounts
             .$select(id)
@@ -279,8 +285,9 @@ function AccountStatuses() {
         } catch (e) {
           console.error(e);
         }
+      }
     })();
-  }, [id]);
+  }, [id, mediaFirst]);
 
   const { displayName, acct, emojis } = account || {};
 
@@ -299,6 +306,7 @@ function AccountStatuses() {
           authenticated={authenticated}
           standalone
         />
+        {!mediaFirst && (
           <div
             class="filter-bar"
             ref={filterBarRef}
@@ -430,6 +438,7 @@ function AccountStatuses() {
                 />
               ))}
           </div>
+        )}
       </>
     );
   }, [
@@ -492,7 +501,7 @@ function AccountStatuses() {
       errorText="Unable to load posts"
       fetchItems={fetchAccountStatuses}
       useItemID
-      view={media ? 'media' : undefined}
+      view={media || mediaFirst ? 'media' : undefined}
       boostsCarousel={snapStates.settings.boostsCarousel}
       timelineStart={TimelineStart}
       refresh={[

src/pages/hashtag.jsx

@@ -5,7 +5,7 @@ import {
   MenuHeader,
   MenuItem,
 } from '@szhsin/react-menu';
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 
 import Icon from '../components/icon';
@@ -18,6 +18,7 @@ import { filteredItems } from '../utils/filters';
 import showToast from '../utils/show-toast';
 import states from '../utils/states';
 import { saveStatus } from '../utils/states';
+import { isMediaFirstInstance } from '../utils/store-utils';
 import useTitle from '../utils/useTitle';
 
 const LIMIT = 20;
@@ -55,6 +56,8 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
   useTitle(title, `/:instance?/t/:hashtag`);
   const latestItem = useRef();
 
+  const mediaFirst = useMemo(() => isMediaFirstInstance(), []);
+
   // const hashtagsIterator = useRef();
   const maxID = useRef(undefined);
   async function fetchHashtags(firstLoad) {
@@ -85,7 +88,7 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
       // value = filteredItems(value, 'public');
       value.forEach((item) => {
         saveStatus(item, instance, {
-          skipThreading: media, // If media view, no need to form threads
+          skipThreading: media || mediaFirst, // If media view, no need to form threads
         });
       });
 
@@ -156,7 +159,7 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
       fetchItems={fetchHashtags}
       checkForUpdates={checkForUpdates}
       useItemID
-      view={media ? 'media' : undefined}
+      view={media || mediaFirst ? 'media' : undefined}
       refresh={media}
       // allowFilters
       filterContext="public"
@@ -233,6 +236,8 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
               <MenuDivider />
             </>
           )}
+          {!mediaFirst && (
+            <>
               <MenuHeader className="plain">Filters</MenuHeader>
               <MenuItem
                 type="checkbox"
@@ -250,6 +255,8 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
                 <span class="menu-grow">Media only</span>
               </MenuItem>
               <MenuDivider />
+            </>
+          )}
           <FocusableItem className="menu-field" disabled={reachLimit}>
             {({ ref }) => (
               <form