diff --git a/src/pages/catchup.css b/src/pages/catchup.css index 58bfa82..4d312d4 100644 --- a/src/pages/catchup.css +++ b/src/pages/catchup.css @@ -179,6 +179,10 @@ color: var(--text-insignificant-color); position: relative; + &:active { + transform: scale(0.95); + } + select { /* appearance: none; background-color: var(--bg-faded-color); @@ -456,6 +460,7 @@ } .post-line { + font-size: 0.95em; border-radius: inherit; animation: appear-smooth 0.3s ease-in-out both; --pad: 16px; @@ -603,7 +608,6 @@ overflow: hidden; line-height: 1.3; opacity: 0.9; - font-size: 0.9em; text-wrap: balance; &:empty { @@ -653,7 +657,8 @@ } } - br:after { + br:after, + :not(br, span, a) + :is(p, div, blockquote, ul, ol, pre):before { font-size: 0.75em; content: ' ↵ '; opacity: 0.35; @@ -823,20 +828,23 @@ } .post-stats { - opacity: 0; display: inline-flex; gap: 2px; align-items: center; - transform: translateX(4px); - /* transition: all 0.25s ease-out; */ &:empty { display: none; } } - .post-line:hover .post-stats { - opacity: 1; - transform: translateX(0); + @media (hover: hover) { + .post-stats { + opacity: 0; + transform: translateX(4px); + } + .post-line:hover .post-stats { + opacity: 1; + transform: translateX(0); + } } + footer { diff --git a/src/pages/catchup.jsx b/src/pages/catchup.jsx index 6031d41..cfc1273 100644 --- a/src/pages/catchup.jsx +++ b/src/pages/catchup.jsx @@ -261,6 +261,7 @@ function Catchup() { const thePost = post.reblog || post; if ( + post.__FILTER !== 'filtered' && thePost.card?.url && thePost.card?.image && thePost.card?.type === 'link' @@ -467,6 +468,51 @@ function Catchup() { return (Date.now() - lastCatchupEndAt) / 1000 / 60 / 60; }, [lastCatchupEndAt, range]); + useEffect(() => { + const filterCategoryText = { + Filtered: 'filtered posts', + Groups: 'group posts', + Boosts: 'boosts', + Replies: 'replies', + 'Followed tags': 'followed-tag posts', + Original: 'original posts', + }; + const authorUsername = + selectedAuthor && authors[selectedAuthor] + ? authors[selectedAuthor].username + : ''; + const sortOrderIndex = sortOrder === 'asc' ? 0 : 1; + const sortByText = { + // asc, desc + createdAt: ['oldest', 'latest'], + repliesCount: ['fewest replies', 'most replies'], + favouritesCount: ['fewest likes', 'most likes'], + reblogsCount: ['fewest boosts', 'most boosts'], + }; + const groupByText = { + account: 'authors', + }; + let toast = showToast( + `Showing ${filterCategoryText[selectedFilterCategory] || 'all posts'}${ + authorUsername ? ` by @${authorUsername}` : '' + }, ${sortByText[sortBy][sortOrderIndex]} first${ + !!groupBy + ? `, grouped by ${groupBy === 'account' ? groupByText[groupBy] : ''}` + : '' + }`, + ); + return () => { + toast?.hideToast?.(); + }; + }, [ + selectedFilterCategory, + selectedAuthor, + sortBy, + sortOrder, + groupBy, + authors, + ]); + return (