From 0ee17395aed1dbdb70e5cadaf536795e07dc9b61 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 3 Apr 2023 13:17:22 +0800
Subject: [PATCH] Auto-scroll to filter & add clear filter "button"
---
src/app.css | 2 +-
src/pages/account-statuses.jsx | 31 ++++++++++++++++++++++++++++---
2 files changed, 29 insertions(+), 4 deletions(-)
diff --git a/src/app.css b/src/app.css
index 229ee341..efdcae6b 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1663,7 +1663,7 @@ ul.link-list li a .icon {
background-color: transparent;
}
}
-.filter-bar > a {
+.filter-bar > a:not(.filter-clear) {
padding: 8px 16px;
border-radius: 999px;
background-color: var(--bg-color);
diff --git a/src/pages/account-statuses.jsx b/src/pages/account-statuses.jsx
index 0efe78be..3db25f7d 100644
--- a/src/pages/account-statuses.jsx
+++ b/src/pages/account-statuses.jsx
@@ -21,7 +21,6 @@ function AccountStatuses() {
const excludeReplies = !searchParams.get('replies');
const tagged = searchParams.get('tagged');
const media = !!searchParams.get('media');
- console.log({ excludeReplies });
const { masto, instance, authenticated } = api({ instance: params.instance });
const accountStatusesIterator = useRef();
async function fetchAccountStatuses(firstLoad) {
@@ -100,8 +99,10 @@ function AccountStatuses() {
const { displayName, acct, emojis } = account || {};
+ const filterBarRef = useRef();
const TimelineStart = useMemo(() => {
const cachedAccount = snapStates.accounts[`${id}@${instance}`];
+ const filtered = !excludeReplies || tagged || media;
return (
<>
<AccountInfo
@@ -111,8 +112,18 @@ function AccountStatuses() {
authenticated={authenticated}
standalone
/>
- <div class="filter-bar">
- <Icon icon="filter" class="insignificant" size="l" />
+ <div class="filter-bar" ref={filterBarRef}>
+ {filtered ? (
+ <Link
+ to={`/${instance}/a/${id}`}
+ class="insignificant filter-clear"
+ title="Clear filters"
+ >
+ <Icon icon="x" size="l" />
+ </Link>
+ ) : (
+ <Icon icon="filter" class="insignificant" size="l" />
+ )}
<Link
to={`/${instance}/a/${id}${excludeReplies ? '?replies=1' : ''}`}
class={excludeReplies ? '' : 'is-active'}
@@ -157,6 +168,20 @@ function AccountStatuses() {
media,
]);
+ useEffect(() => {
+ // Focus on .is-active
+ const active = filterBarRef.current?.querySelector('.is-active');
+ if (active) {
+ console.log('active', active, active.offsetLeft);
+ filterBarRef.current.scrollTo({
+ behavior: 'smooth',
+ left:
+ active.offsetLeft -
+ (filterBarRef.current.offsetWidth - active.offsetWidth) / 2,
+ });
+ }
+ }, [featuredTags, tagged, media, excludeReplies]);
+
return (
<Timeline
key={id}