diff --git a/src/pages/account-statuses.jsx b/src/pages/account-statuses.jsx index 75ff6e31..05e7c60f 100644 --- a/src/pages/account-statuses.jsx +++ b/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,17 +273,21 @@ function AccountStatuses() { } catch (e) { console.error(e); } - try { - const featuredTags = await masto.v1.accounts - .$select(id) - .featuredTags.list(); - console.log({ featuredTags }); - setFeaturedTags(featuredTags); - } 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) + .featuredTags.list(); + console.log({ featuredTags }); + setFeaturedTags(featuredTags); + } catch (e) { + console.error(e); + } } })(); - }, [id]); + }, [id, mediaFirst]); const { displayName, acct, emojis } = account || {}; @@ -299,95 +306,126 @@ function AccountStatuses() { authenticated={authenticated} standalone /> -
- {filtered ? ( + {!mediaFirst && ( +
+ {filtered ? ( + + + + ) : ( + + )} - - - ) : ( - - )} - { - if (excludeReplies) { - showToast('Showing post with replies'); - } - }} - class={excludeReplies ? '' : 'is-active'} - > - + Replies - - { - if (!excludeBoosts) { - showToast('Showing posts without boosts'); - } - }} - class={!excludeBoosts ? '' : 'is-active'} - > - - Boosts - - { - if (!media) { - showToast('Showing posts with media'); - } - }} - class={media ? 'is-active' : ''} - > - Media - - {featuredTags.map((tag) => ( - { - if (tagged !== tag.name) { - showToast(`Showing posts tagged with #${tag.name}`); + if (excludeReplies) { + showToast('Showing post with replies'); } }} - class={tagged === tag.name ? 'is-active' : ''} + class={excludeReplies ? '' : 'is-active'} > - - # - {tag.name} - - { - // The count differs based on instance 😅 - } - {/* {tag.statusesCount} */} + + Replies - ))} - {searchEnabled && - (supportsInputMonth ? ( - - ) : ( - // Fallback to for year - { - const { value, validity } = e; - if (!validity.valid) return; - setSearchParams( - value - ? { - month: value, - } - : {}, - ); - }} - /> - ))} -
+ ))} +
+ )} ); }, [ @@ -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={[ diff --git a/src/pages/hashtag.jsx b/src/pages/hashtag.jsx index 6fe4e1d0..7cd31d25 100644 --- a/src/pages/hashtag.jsx +++ b/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,23 +236,27 @@ function Hashtags({ media: mediaView, columnMode, ...props }) { )} - Filters - { - if (media) { - searchParams.delete('media'); - } else { - searchParams.set('media', '1'); - } - setSearchParams(searchParams); - }} - > - {' '} - Media only - - + {!mediaFirst && ( + <> + Filters + { + if (media) { + searchParams.delete('media'); + } else { + searchParams.set('media', '1'); + } + setSearchParams(searchParams); + }} + > + {' '} + Media only + + + + )} {({ ref }) => (