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}