From 6dd6e0e77ce167993a6b9b1010658c3926ed72c1 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 27 Oct 2023 14:15:03 +0800
Subject: [PATCH 001/110] Refactor some components/callbacks

---
 src/components/timeline.jsx | 280 ++++++++++++++---------------
 src/pages/status.jsx        | 345 +++++++++++++++++++-----------------
 2 files changed, 315 insertions(+), 310 deletions(-)

diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx
index a687ab43..c893ec84 100644
--- a/src/components/timeline.jsx
+++ b/src/components/timeline.jsx
@@ -347,151 +347,15 @@ function Timeline({
         {!!items.length ? (
           <>
             <ul class="timeline">
-              {items.map((status) => {
-                const { id: statusID, reblog, items, type, _pinned } = status;
-                const actualStatusID = reblog?.id || statusID;
-                const url = instance
-                  ? `/${instance}/s/${actualStatusID}`
-                  : `/s/${actualStatusID}`;
-                let title = '';
-                if (type === 'boosts') {
-                  title = `${items.length} Boosts`;
-                } else if (type === 'pinned') {
-                  title = 'Pinned posts';
-                }
-                const isCarousel = type === 'boosts' || type === 'pinned';
-                if (items) {
-                  if (isCarousel) {
-                    // Here, we don't hide filtered posts, but we sort them last
-                    items.sort((a, b) => {
-                      if (a._filtered && !b._filtered) {
-                        return 1;
-                      }
-                      if (!a._filtered && b._filtered) {
-                        return -1;
-                      }
-                      return 0;
-                    });
-                    return (
-                      <li
-                        key={`timeline-${statusID}`}
-                        class="timeline-item-carousel"
-                      >
-                        <StatusCarousel
-                          title={title}
-                          class={`${type}-carousel`}
-                        >
-                          {items.map((item) => {
-                            const { id: statusID, reblog } = item;
-                            const actualStatusID = reblog?.id || statusID;
-                            const url = instance
-                              ? `/${instance}/s/${actualStatusID}`
-                              : `/s/${actualStatusID}`;
-                            return (
-                              <li key={statusID}>
-                                <Link
-                                  class="status-carousel-link timeline-item-alt"
-                                  to={url}
-                                >
-                                  {useItemID ? (
-                                    <Status
-                                      statusID={statusID}
-                                      instance={instance}
-                                      size="s"
-                                      contentTextWeight
-                                      allowFilters={allowFilters}
-                                    />
-                                  ) : (
-                                    <Status
-                                      status={item}
-                                      instance={instance}
-                                      size="s"
-                                      contentTextWeight
-                                      allowFilters={allowFilters}
-                                    />
-                                  )}
-                                </Link>
-                              </li>
-                            );
-                          })}
-                        </StatusCarousel>
-                      </li>
-                    );
-                  }
-                  const manyItems = items.length > 3;
-                  return items.map((item, i) => {
-                    const { id: statusID, _differentAuthor } = item;
-                    const url = instance
-                      ? `/${instance}/s/${statusID}`
-                      : `/s/${statusID}`;
-                    const isMiddle = i > 0 && i < items.length - 1;
-                    const isSpoiler = item.sensitive && !!item.spoilerText;
-                    const showCompact =
-                      (!_differentAuthor && isSpoiler && i > 0) ||
-                      (manyItems &&
-                        isMiddle &&
-                        (type === 'thread' ||
-                          (type === 'conversation' &&
-                            !_differentAuthor &&
-                            !items[i - 1]._differentAuthor &&
-                            !items[i + 1]._differentAuthor)));
-                    return (
-                      <li
-                        key={`timeline-${statusID}`}
-                        class={`timeline-item-container timeline-item-container-type-${type} timeline-item-container-${
-                          i === 0
-                            ? 'start'
-                            : i === items.length - 1
-                            ? 'end'
-                            : 'middle'
-                        } ${
-                          _differentAuthor ? 'timeline-item-diff-author' : ''
-                        }`}
-                      >
-                        <Link class="status-link timeline-item" to={url}>
-                          {showCompact ? (
-                            <TimelineStatusCompact
-                              status={item}
-                              instance={instance}
-                            />
-                          ) : useItemID ? (
-                            <Status
-                              statusID={statusID}
-                              instance={instance}
-                              allowFilters={allowFilters}
-                            />
-                          ) : (
-                            <Status
-                              status={item}
-                              instance={instance}
-                              allowFilters={allowFilters}
-                            />
-                          )}
-                        </Link>
-                      </li>
-                    );
-                  });
-                }
-                return (
-                  <li key={`timeline-${statusID + _pinned}`}>
-                    <Link class="status-link timeline-item" to={url}>
-                      {useItemID ? (
-                        <Status
-                          statusID={statusID}
-                          instance={instance}
-                          allowFilters={allowFilters}
-                        />
-                      ) : (
-                        <Status
-                          status={status}
-                          instance={instance}
-                          allowFilters={allowFilters}
-                        />
-                      )}
-                    </Link>
-                  </li>
-                );
-              })}
+              {items.map((status) => (
+                <TimelineItem
+                  status={status}
+                  instance={instance}
+                  useItemID={useItemID}
+                  allowFilters={allowFilters}
+                  key={status.id + status?._pinned}
+                />
+              ))}
               {showMore && uiState === 'loading' && (
                 <>
                   <li
@@ -562,6 +426,132 @@ function Timeline({
   );
 }
 
+function TimelineItem({ status, instance, useItemID, allowFilters }) {
+  const { id: statusID, reblog, items, type, _pinned } = status;
+  const actualStatusID = reblog?.id || statusID;
+  const url = instance
+    ? `/${instance}/s/${actualStatusID}`
+    : `/s/${actualStatusID}`;
+  let title = '';
+  if (type === 'boosts') {
+    title = `${items.length} Boosts`;
+  } else if (type === 'pinned') {
+    title = 'Pinned posts';
+  }
+  const isCarousel = type === 'boosts' || type === 'pinned';
+  if (items) {
+    if (isCarousel) {
+      // Here, we don't hide filtered posts, but we sort them last
+      items.sort((a, b) => {
+        if (a._filtered && !b._filtered) {
+          return 1;
+        }
+        if (!a._filtered && b._filtered) {
+          return -1;
+        }
+        return 0;
+      });
+      return (
+        <li key={`timeline-${statusID}`} class="timeline-item-carousel">
+          <StatusCarousel title={title} class={`${type}-carousel`}>
+            {items.map((item) => {
+              const { id: statusID, reblog } = item;
+              const actualStatusID = reblog?.id || statusID;
+              const url = instance
+                ? `/${instance}/s/${actualStatusID}`
+                : `/s/${actualStatusID}`;
+              return (
+                <li key={statusID}>
+                  <Link class="status-carousel-link timeline-item-alt" to={url}>
+                    {useItemID ? (
+                      <Status
+                        statusID={statusID}
+                        instance={instance}
+                        size="s"
+                        contentTextWeight
+                        allowFilters={allowFilters}
+                      />
+                    ) : (
+                      <Status
+                        status={item}
+                        instance={instance}
+                        size="s"
+                        contentTextWeight
+                        allowFilters={allowFilters}
+                      />
+                    )}
+                  </Link>
+                </li>
+              );
+            })}
+          </StatusCarousel>
+        </li>
+      );
+    }
+    const manyItems = items.length > 3;
+    return items.map((item, i) => {
+      const { id: statusID, _differentAuthor } = item;
+      const url = instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`;
+      const isMiddle = i > 0 && i < items.length - 1;
+      const isSpoiler = item.sensitive && !!item.spoilerText;
+      const showCompact =
+        (!_differentAuthor && isSpoiler && i > 0) ||
+        (manyItems &&
+          isMiddle &&
+          (type === 'thread' ||
+            (type === 'conversation' &&
+              !_differentAuthor &&
+              !items[i - 1]._differentAuthor &&
+              !items[i + 1]._differentAuthor)));
+      return (
+        <li
+          key={`timeline-${statusID}`}
+          class={`timeline-item-container timeline-item-container-type-${type} timeline-item-container-${
+            i === 0 ? 'start' : i === items.length - 1 ? 'end' : 'middle'
+          } ${_differentAuthor ? 'timeline-item-diff-author' : ''}`}
+        >
+          <Link class="status-link timeline-item" to={url}>
+            {showCompact ? (
+              <TimelineStatusCompact status={item} instance={instance} />
+            ) : useItemID ? (
+              <Status
+                statusID={statusID}
+                instance={instance}
+                allowFilters={allowFilters}
+              />
+            ) : (
+              <Status
+                status={item}
+                instance={instance}
+                allowFilters={allowFilters}
+              />
+            )}
+          </Link>
+        </li>
+      );
+    });
+  }
+  return (
+    <li key={`timeline-${statusID + _pinned}`}>
+      <Link class="status-link timeline-item" to={url}>
+        {useItemID ? (
+          <Status
+            statusID={statusID}
+            instance={instance}
+            allowFilters={allowFilters}
+          />
+        ) : (
+          <Status
+            status={status}
+            instance={instance}
+            allowFilters={allowFilters}
+          />
+        )}
+      </Link>
+    </li>
+  );
+}
+
 function StatusCarousel({ title, class: className, children }) {
   const carouselRef = useRef();
   const { reachStart, reachEnd, init } = useScroll({
diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index 5c074126..da64e59c 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -657,139 +657,142 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
     resetScrollPosition(status.id);
   }, []);
 
-  const renderStatus = (status) => {
-    const {
-      id: statusID,
-      ancestor,
-      isThread,
-      descendant,
-      thread,
-      replies,
-      repliesCount,
-      weight,
-    } = status;
-    const isHero = statusID === id;
-    // const StatusParent = useCallback(
-    //   (props) =>
-    //     isThread || thread || ancestor ? (
-    //       <Link
-    //         class="status-link"
-    //         to={
-    //           instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`
-    //         }
-    //         onClick={() => {
-    //           resetScrollPosition(statusID);
-    //         }}
-    //         {...props}
-    //       />
-    //     ) : (
-    //       <div class="status-focus" tabIndex={0} {...props} />
-    //     ),
-    //   [isThread, thread],
-    // );
-    return (
-      <li
-        key={statusID}
-        ref={isHero ? heroStatusRef : null}
-        class={`${ancestor ? 'ancestor' : ''} ${
-          descendant ? 'descendant' : ''
-        } ${thread ? 'thread' : ''} ${isHero ? 'hero' : ''}`}
-      >
-        {isHero ? (
-          <>
-            <InView
-              threshold={0.1}
-              onChange={onView}
-              class="status-focus"
-              tabIndex={0}
+  const renderStatus = useCallback(
+    (status) => {
+      const {
+        id: statusID,
+        ancestor,
+        isThread,
+        descendant,
+        thread,
+        replies,
+        repliesCount,
+        weight,
+      } = status;
+      const isHero = statusID === id;
+      // const StatusParent = useCallback(
+      //   (props) =>
+      //     isThread || thread || ancestor ? (
+      //       <Link
+      //         class="status-link"
+      //         to={
+      //           instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`
+      //         }
+      //         onClick={() => {
+      //           resetScrollPosition(statusID);
+      //         }}
+      //         {...props}
+      //       />
+      //     ) : (
+      //       <div class="status-focus" tabIndex={0} {...props} />
+      //     ),
+      //   [isThread, thread],
+      // );
+      return (
+        <li
+          key={statusID}
+          ref={isHero ? heroStatusRef : null}
+          class={`${ancestor ? 'ancestor' : ''} ${
+            descendant ? 'descendant' : ''
+          } ${thread ? 'thread' : ''} ${isHero ? 'hero' : ''}`}
+        >
+          {isHero ? (
+            <>
+              <InView
+                threshold={0.1}
+                onChange={onView}
+                class="status-focus"
+                tabIndex={0}
+              >
+                <Status
+                  statusID={statusID}
+                  instance={instance}
+                  withinContext
+                  size="l"
+                  enableTranslate
+                  forceTranslate={translate}
+                />
+              </InView>
+              {uiState !== 'loading' && !authenticated ? (
+                <div class="post-status-banner">
+                  <p>
+                    You're not logged in. Interactions (reply, boost, etc) are
+                    not possible.
+                  </p>
+                  <Link to="/login" class="button">
+                    Log in
+                  </Link>
+                </div>
+              ) : (
+                !sameInstance && (
+                  <div class="post-status-banner">
+                    <p>
+                      This post is from another instance (<b>{instance}</b>).
+                      Interactions (reply, boost, etc) are not possible.
+                    </p>
+                    <button
+                      type="button"
+                      disabled={uiState === 'loading'}
+                      onClick={() => {
+                        setUIState('loading');
+                        (async () => {
+                          try {
+                            const results = await currentMasto.v2.search.fetch({
+                              q: heroStatus.url,
+                              type: 'statuses',
+                              resolve: true,
+                              limit: 1,
+                            });
+                            if (results.statuses.length) {
+                              const status = results.statuses[0];
+                              location.hash = currentInstance
+                                ? `/${currentInstance}/s/${status.id}`
+                                : `/s/${status.id}`;
+                            } else {
+                              throw new Error('No results');
+                            }
+                          } catch (e) {
+                            setUIState('default');
+                            alert('Error: ' + e);
+                            console.error(e);
+                          }
+                        })();
+                      }}
+                    >
+                      <Icon icon="transfer" /> Switch to my instance to enable
+                      interactions
+                    </button>
+                  </div>
+                )
+              )}
+            </>
+          ) : (
+            // <StatusParent>
+            <Link
+              class="status-link"
+              to={instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`}
+              onClick={() => {
+                resetScrollPosition(statusID);
+              }}
             >
               <Status
                 statusID={statusID}
                 instance={instance}
                 withinContext
-                size="l"
+                size={thread || ancestor ? 'm' : 's'}
                 enableTranslate
-                forceTranslate={translate}
+                onMediaClick={handleMediaClick}
+                onStatusLinkClick={handleStatusLinkClick}
               />
-            </InView>
-            {uiState !== 'loading' && !authenticated ? (
-              <div class="post-status-banner">
-                <p>
-                  You're not logged in. Interactions (reply, boost, etc) are not
-                  possible.
-                </p>
-                <Link to="/login" class="button">
-                  Log in
-                </Link>
-              </div>
-            ) : (
-              !sameInstance && (
-                <div class="post-status-banner">
-                  <p>
-                    This post is from another instance (<b>{instance}</b>).
-                    Interactions (reply, boost, etc) are not possible.
-                  </p>
-                  <button
-                    type="button"
-                    disabled={uiState === 'loading'}
-                    onClick={() => {
-                      setUIState('loading');
-                      (async () => {
-                        try {
-                          const results = await currentMasto.v2.search.fetch({
-                            q: heroStatus.url,
-                            type: 'statuses',
-                            resolve: true,
-                            limit: 1,
-                          });
-                          if (results.statuses.length) {
-                            const status = results.statuses[0];
-                            location.hash = currentInstance
-                              ? `/${currentInstance}/s/${status.id}`
-                              : `/s/${status.id}`;
-                          } else {
-                            throw new Error('No results');
-                          }
-                        } catch (e) {
-                          setUIState('default');
-                          alert('Error: ' + e);
-                          console.error(e);
-                        }
-                      })();
-                    }}
-                  >
-                    <Icon icon="transfer" /> Switch to my instance to enable
-                    interactions
-                  </button>
+              {ancestor && isThread && repliesCount > 1 && (
+                <div class="replies-link">
+                  <Icon icon="comment" />{' '}
+                  <span title={repliesCount}>
+                    {shortenNumber(repliesCount)}
+                  </span>
                 </div>
-              )
-            )}
-          </>
-        ) : (
-          // <StatusParent>
-          <Link
-            class="status-link"
-            to={instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`}
-            onClick={() => {
-              resetScrollPosition(statusID);
-            }}
-          >
-            <Status
-              statusID={statusID}
-              instance={instance}
-              withinContext
-              size={thread || ancestor ? 'm' : 's'}
-              enableTranslate
-              onMediaClick={handleMediaClick}
-              onStatusLinkClick={handleStatusLinkClick}
-            />
-            {ancestor && isThread && repliesCount > 1 && (
-              <div class="replies-link">
-                <Icon icon="comment" />{' '}
-                <span title={repliesCount}>{shortenNumber(repliesCount)}</span>
-              </div>
-            )}{' '}
-            {/* {replies?.length > LIMIT && (
+              )}{' '}
+              {/* {replies?.length > LIMIT && (
                         <div class="replies-link">
                           <Icon icon="comment" />{' '}
                           <span title={replies.length}>
@@ -797,48 +800,60 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
                           </span>
                         </div>
                       )} */}
-            {/* </StatusParent> */}
-          </Link>
-        )}
-        {descendant && replies?.length > 0 && (
-          <SubComments
-            instance={instance}
-            replies={replies}
-            hasParentThread={thread}
-            level={1}
-            accWeight={weight}
-            openAll={totalDescendants.current < SUBCOMMENTS_OPEN_ALL_LIMIT}
-          />
-        )}
-        {uiState === 'loading' &&
-          isHero &&
-          !!heroStatus?.repliesCount &&
-          !hasDescendants && (
-            <div class="status-loading">
-              <Loader />
-            </div>
+              {/* </StatusParent> */}
+            </Link>
           )}
-        {uiState === 'error' &&
-          isHero &&
-          !!heroStatus?.repliesCount &&
-          !hasDescendants && (
-            <div class="status-error">
-              Unable to load replies.
-              <br />
-              <button
-                type="button"
-                class="plain"
-                onClick={() => {
-                  states.reloadStatusPage++;
-                }}
-              >
-                Try again
-              </button>
-            </div>
+          {descendant && replies?.length > 0 && (
+            <SubComments
+              instance={instance}
+              replies={replies}
+              hasParentThread={thread}
+              level={1}
+              accWeight={weight}
+              openAll={totalDescendants.current < SUBCOMMENTS_OPEN_ALL_LIMIT}
+            />
           )}
-      </li>
-    );
-  };
+          {uiState === 'loading' &&
+            isHero &&
+            !!heroStatus?.repliesCount &&
+            !hasDescendants && (
+              <div class="status-loading">
+                <Loader />
+              </div>
+            )}
+          {uiState === 'error' &&
+            isHero &&
+            !!heroStatus?.repliesCount &&
+            !hasDescendants && (
+              <div class="status-error">
+                Unable to load replies.
+                <br />
+                <button
+                  type="button"
+                  class="plain"
+                  onClick={() => {
+                    states.reloadStatusPage++;
+                  }}
+                >
+                  Try again
+                </button>
+              </div>
+            )}
+        </li>
+      );
+    },
+    [
+      id,
+      instance,
+      uiState,
+      authenticated,
+      sameInstance,
+      translate,
+      handleMediaClick,
+      handleStatusLinkClick,
+      hasDescendants,
+    ],
+  );
 
   return (
     <div

From 372e86415b0b7b34a7cf4f0c9530a78c988af981 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 27 Oct 2023 14:16:38 +0800
Subject: [PATCH 002/110] Test fix scroll position when opening media on the
 side

---
 src/pages/status.jsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index da64e59c..13be215a 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -167,6 +167,7 @@ function StatusPage(params) {
 function StatusThread({ id, closeLink = '/', instance: propInstance }) {
   const [searchParams, setSearchParams] = useSearchParams();
   const mediaParam = searchParams.get('media');
+  const mediaStatusID = searchParams.get('mediaStatusID');
   const showMedia = parseInt(mediaParam, 10) > 0;
   const firstLoad = useRef(!states.prevLocation && history.length === 1);
   const [viewMode, setViewMode] = useState(
@@ -657,6 +658,23 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
     resetScrollPosition(status.id);
   }, []);
 
+  useEffect(() => {
+    let timer;
+    if (mediaStatusID && showMedia) {
+      timer = setTimeout(() => {
+        const status = scrollableRef.current?.querySelector(
+          `.status-link[href*="/${mediaStatusID}"]`,
+        );
+        if (status) {
+          status.scrollIntoView(scrollIntoViewOptions);
+        }
+      }, 400); // After CSS transition
+    }
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [mediaStatusID, showMedia]);
+
   const renderStatus = useCallback(
     (status) => {
       const {

From 4efc922b7b4fba783c54d3226956255009118474 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 27 Oct 2023 18:51:10 +0800
Subject: [PATCH 003/110] Remove dup key

---
 src/utils/states.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/utils/states.js b/src/utils/states.js
index 580d02aa..45023621 100644
--- a/src/utils/states.js
+++ b/src/utils/states.js
@@ -22,7 +22,6 @@ const states = proxy({
   notificationsNew: [],
   notificationsShowNew: false,
   notificationsLastFetchTime: null,
-  accounts: {},
   reloadStatusPage: 0,
   reloadGenericAccounts: {
     id: null,

From 087e282677310a61f039966b820dec947fcf7573 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 27 Oct 2023 23:03:07 +0800
Subject: [PATCH 004/110] Show/hide the switch-view button based on viewport
 width

---
 src/app.css          | 5 ++++-
 src/pages/status.jsx | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/app.css b/src/app.css
index e0d41fa0..73507eda 100644
--- a/src/app.css
+++ b/src/app.css
@@ -928,10 +928,13 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 .deck-backdrop .deck .status {
   max-width: var(--main-width);
 }
-.deck-backdrop .deck .menu-switch-view {
+.deck-backdrop .deck :is(.button-switch-view, menu-switch-view) {
   display: none;
 }
 @media (min-width: 40em) {
+  .deck-backdrop .deck .button-switch-view {
+    display: inline-block;
+  }
   .deck-backdrop .deck .menu-switch-view {
     display: flex;
   }
diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index 13be215a..3b625c03 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -1003,7 +1003,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
           <div class="header-side">
             <button
               type="button"
-              class="plain4"
+              class="plain4 button-switch-view"
               style={{
                 display: viewMode === 'full' ? '' : 'none',
               }}

From a1021e1aeeeee3b72926146358b3c82898923629 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 28 Oct 2023 11:07:35 +0800
Subject: [PATCH 005/110] Add __STATES_STATS__ for debugging

---
 src/app.jsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/app.jsx b/src/app.jsx
index a673a34e..c7393a0b 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -55,6 +55,20 @@ import { getCurrentAccount } from './utils/store-utils';
 import './utils/toast-alert';
 
 window.__STATES__ = states;
+window.__STATES_STATS__ = () => {
+  const keys = [
+    'statuses',
+    'accounts',
+    'spoilers',
+    'unfurledLinks',
+    'statusQuotes',
+  ];
+  const counts = {};
+  keys.forEach((key) => {
+    counts[key] = Object.keys(states[key]).length;
+  });
+  console.warn('STATE stats', counts);
+};
 
 // Preload icons
 // There's probably a better way to do this

From 0599c0d2c9e099146ec2690be991b88a192c64dc Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 28 Oct 2023 13:01:31 +0800
Subject: [PATCH 006/110] Fix typo

---
 src/app.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app.css b/src/app.css
index 73507eda..2b819a34 100644
--- a/src/app.css
+++ b/src/app.css
@@ -928,7 +928,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 .deck-backdrop .deck .status {
   max-width: var(--main-width);
 }
-.deck-backdrop .deck :is(.button-switch-view, menu-switch-view) {
+.deck-backdrop .deck :is(.button-switch-view, .menu-switch-view) {
   display: none;
 }
 @media (min-width: 40em) {

From 173728536adecf37636c070453147a15ca5f214c Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 28 Oct 2023 16:21:32 +0800
Subject: [PATCH 007/110] Extract out the fancy selector string

---
 src/pages/status.jsx | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index 3b625c03..a0c55958 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -60,6 +60,12 @@ const scrollIntoViewOptions = {
   behavior: 'smooth',
 };
 
+// Select all statuses except those inside collapsed details/summary
+// Hat-tip to @AmeliaBR@front-end.social
+// https://front-end.social/@AmeliaBR/109784776146144471
+const STATUSES_SELECTOR =
+  '.status-link:not(details:not([open]) > summary ~ *, details:not([open]) > summary ~ * *), .status-focus:not(details:not([open]) > summary ~ *, details:not([open]) > summary ~ * *)';
+
 function StatusPage(params) {
   const { id } = params;
   const { masto, instance } = api({ instance: params.instance });
@@ -555,12 +561,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
     );
     const activeStatusRect = activeStatus?.getBoundingClientRect();
     const allStatusLinks = Array.from(
-      // Select all statuses except those inside collapsed details/summary
-      // Hat-tip to @AmeliaBR@front-end.social
-      // https://front-end.social/@AmeliaBR/109784776146144471
-      scrollableRef.current.querySelectorAll(
-        '.status-link:not(details:not([open]) > summary ~ *, details:not([open]) > summary ~ * *), .status-focus:not(details:not([open]) > summary ~ *, details:not([open]) > summary ~ * *)',
-      ),
+      scrollableRef.current.querySelectorAll(STATUSES_SELECTOR),
     );
     console.log({ allStatusLinks });
     if (
@@ -593,9 +594,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
     );
     const activeStatusRect = activeStatus?.getBoundingClientRect();
     const allStatusLinks = Array.from(
-      scrollableRef.current.querySelectorAll(
-        '.status-link:not(details:not([open]) > summary ~ *, details:not([open]) > summary ~ * *), .status-focus:not(details:not([open]) > summary ~ *, details:not([open]) > summary ~ * *)',
-      ),
+      scrollableRef.current.querySelectorAll(STATUSES_SELECTOR),
     );
     if (
       activeStatus &&

From 25ff0d7835bab3e059b91e37b5dae2ced4b10d5e Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 29 Oct 2023 10:14:35 +0800
Subject: [PATCH 008/110] Fix toggle show control firing unnecessarily

---
 src/components/media-modal.jsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/media-modal.jsx b/src/components/media-modal.jsx
index 3c920cc2..72b6cebc 100644
--- a/src/components/media-modal.jsx
+++ b/src/components/media-modal.jsx
@@ -142,7 +142,11 @@ function MediaModal({
               key={media.id}
               ref={i === currentIndex ? carouselFocusItem : null}
               onClick={(e) => {
-                if (e.target !== e.currentTarget) {
+                // console.log(e);
+                // if (e.target !== e.currentTarget) {
+                //   setShowControls(!showControls);
+                // }
+                if (!e.target.classList.contains('media')) {
                   setShowControls(!showControls);
                 }
               }}

From 8180cc357e40b683d07e78dc5eefb77c5a9d9219 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 29 Oct 2023 11:47:20 +0800
Subject: [PATCH 009/110] Fix loadAcounts firing twice

---
 src/components/generic-accounts.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/generic-accounts.jsx b/src/components/generic-accounts.jsx
index 11070c0c..0f38e472 100644
--- a/src/components/generic-accounts.jsx
+++ b/src/components/generic-accounts.jsx
@@ -1,6 +1,6 @@
 import './generic-accounts.css';
 
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'preact/hooks';
 import { InView } from 'react-intersection-observer';
 import { useSnapshot } from 'valtio';
 
@@ -56,15 +56,18 @@ export default function GenericAccounts({ onClose = () => {} }) {
     })();
   };
 
+  const firstLoad = useRef(true);
   useEffect(() => {
     if (staticAccounts?.length > 0) {
       setAccounts(staticAccounts);
     } else {
       loadAccounts(true);
+      firstLoad.current = false;
     }
   }, [staticAccounts, fetchAccounts]);
 
   useEffect(() => {
+    if (firstLoad.current) return;
     // reloadGenericAccounts contains value like {id: 'mute', counter: 1}
     // We only need to reload if the id matches
     if (snapStates.reloadGenericAccounts?.id === id) {

From 35f7cae01f57ef84e74e31b7ffbd742d06b69066 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 29 Oct 2023 21:21:09 +0800
Subject: [PATCH 010/110] Fix moved account styles

---
 src/components/account-info.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/account-info.css b/src/components/account-info.css
index cfc49e91..9b898219 100644
--- a/src/components/account-info.css
+++ b/src/components/account-info.css
@@ -18,7 +18,7 @@
   position: absolute;
   top: 8px;
   inset-inline: 8px;
-  z-index: 2;
+  z-index: 3;
   border: 1px solid var(--outline-color);
   box-shadow: 0 8px 16px var(--drop-shadow-color);
   border-radius: calc(16px - 8px);
@@ -47,7 +47,7 @@
 
   ~ * {
     /* pointer-events: none; */
-    filter: grayscale(0.75) brightness(0.75);
+    filter: grayscale(0.75) opacity(0.75);
   }
 }
 

From b40bbb32c2b4c12615b4d6d9679fcc0299fa2b7a Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 29 Oct 2023 21:41:03 +0800
Subject: [PATCH 011/110] Alrighty, this is media-view layout

---
 src/app.css                           |  72 +++++++++++++++
 src/cloak-mode.css                    |   1 +
 src/components/icon.jsx               |   1 +
 src/components/media-post.css         |  87 ++++++++++++++++++
 src/components/media-post.jsx         | 126 ++++++++++++++++++++++++++
 src/components/media.jsx              |  24 +++--
 src/components/shortcuts-settings.jsx |  11 ++-
 src/components/status.css             |  16 ++--
 src/components/timeline.jsx           | 108 ++++++++++++++++------
 src/pages/account-statuses.jsx        |   1 +
 src/pages/hashtag.jsx                 |  46 ++++++++--
 11 files changed, 440 insertions(+), 53 deletions(-)
 create mode 100644 src/components/media-post.css
 create mode 100644 src/components/media-post.jsx

diff --git a/src/app.css b/src/app.css
index 2b819a34..338286fc 100644
--- a/src/app.css
+++ b/src/app.css
@@ -209,6 +209,60 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 .timeline {
   margin: 0 auto;
   padding: 0;
+
+  &.timeline-media {
+    --grid-gap: 8px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-auto-rows: fit-content;
+    gap: var(--grid-gap);
+    padding: var(--grid-gap);
+
+    &:not(#columns &) {
+      background-color: var(--bg-faded-color);
+    }
+
+    @media (min-width: 40em) {
+      &:not(#columns &) {
+        --grid-gap: 16px;
+        grid-template-columns: 1fr 1fr 1fr;
+
+        @media (min-width: 40em) {
+          width: 95vw;
+          max-width: calc(320px * 3.3);
+          transform: translateX(calc(-50% + var(--main-width) / 2));
+        }
+      }
+
+      #columns & {
+        padding-inline: 0;
+      }
+    }
+
+    li {
+      padding: 0 !important;
+      margin: 0 !important;
+      border: 0 !important;
+      overflow: visible !important;
+      background-color: transparent !important;
+      box-shadow: none !important;
+    }
+
+    @supports (grid-template-rows: masonry) {
+      grid-template-rows: masonry;
+      masonry-auto-flow: pack;
+
+      .media-post a {
+        aspect-ratio: revert !important;
+
+        video,
+        img,
+        audio {
+          min-height: 88px; /* for extreme dimensions */
+        }
+      }
+    }
+  }
 }
 .timeline.grow {
   /* min-height: 100vh;
@@ -1678,6 +1732,24 @@ body > .szh-menu-container {
   opacity: 1;
 }
 
+.szh-menu
+  .szh-menu__item--type-checkbox:not(.szh-menu__item--disabled):not(
+    .szh-menu__item--hover
+  ) {
+  .icon {
+    opacity: 0.15;
+  }
+
+  &.szh-menu__item--checked {
+    color: var(--link-color);
+
+    .icon {
+      opacity: 1;
+      color: inherit;
+    }
+  }
+}
+
 .szh-menu .menu-wrap {
   display: flex;
   flex-wrap: wrap;
diff --git a/src/cloak-mode.css b/src/cloak-mode.css
index d703b7a9..f96f4999 100644
--- a/src/cloak-mode.css
+++ b/src/cloak-mode.css
@@ -25,6 +25,7 @@ body.cloak,
   }
 
   .status :is(img, video, audio),
+  .media-post .media,
   .avatar,
   .emoji,
   .header-banner {
diff --git a/src/components/icon.jsx b/src/components/icon.jsx
index 42e33f2a..cd2b5357 100644
--- a/src/components/icon.jsx
+++ b/src/components/icon.jsx
@@ -102,6 +102,7 @@ export const ICONS = {
   keyboard: () => import('@iconify-icons/mingcute/keyboard-line'),
   cloud: () => import('@iconify-icons/mingcute/cloud-line'),
   month: () => import('@iconify-icons/mingcute/calendar-month-line'),
+  media: () => import('@iconify-icons/mingcute/photo-album-line'),
 };
 
 function Icon({
diff --git a/src/components/media-post.css b/src/components/media-post.css
new file mode 100644
index 00000000..b7d32854
--- /dev/null
+++ b/src/components/media-post.css
@@ -0,0 +1,87 @@
+.media-post {
+  --item-radius: 16px;
+  position: relative;
+  animation: appear-smooth 1s ease-out;
+
+  &:is(.filtered, .has-spoiler) :is(img, video) {
+    filter: blur(32px);
+    image-rendering: crisp-edges;
+    image-rendering: pixelated;
+    animation: none !important;
+  }
+
+  &.filtered[data-filtered-text]:before,
+  &.has-spoiler[data-spoiler-text]:before {
+    pointer-events: none;
+    content: attr(data-spoiler-text);
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    background-color: var(--bg-blur-color);
+    margin: 8px;
+    padding: 4px 6px;
+    border-radius: calc(var(--item-radius) / 2);
+    font-size: 90%;
+    border: var(--hairline-width) dashed var(--bg-color);
+
+    > * {
+      pointer-events: none;
+    }
+  }
+
+  .media {
+    border-radius: var(--item-radius);
+    overflow: hidden;
+    position: relative;
+    display: block;
+    aspect-ratio: 1 !important;
+
+    &:before {
+      position: absolute;
+      inset: 0;
+      content: '';
+      border: 1px solid var(--outline-color);
+      border-radius: inherit;
+    }
+
+    &:not(.media-audio) {
+      background-color: var(--average-color, var(--media-bg-color));
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        --drop-shadow: var(--drop-shadow-color);
+        box-shadow: 0 8px 16px -4px var(--drop-shadow),
+          0 4px 8px var(--drop-shadow);
+
+        @media (prefers-color-scheme: dark) {
+          --drop-shadow: var(--link-color);
+        }
+      }
+    }
+
+    &:active:not(:has(button:active)) {
+      box-shadow: none;
+      filter: brightness(0.8);
+      transform: scale(0.99);
+    }
+
+    video,
+    img,
+    audio {
+      border-radius: 16px;
+      /* object-fit: scale-down; */
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+      vertical-align: top;
+    }
+
+    &:is(:hover, :focus) img {
+      /* Less delay here to make it feel more responsive */
+      animation: position-object 5s ease-in-out 0.3s 5;
+      animation-duration: var(--anim-duration, 5s);
+    }
+  }
+}
diff --git a/src/components/media-post.jsx b/src/components/media-post.jsx
new file mode 100644
index 00000000..c208896c
--- /dev/null
+++ b/src/components/media-post.jsx
@@ -0,0 +1,126 @@
+import './media-post.css';
+
+import { memo } from 'preact/compat';
+import { useSnapshot } from 'valtio';
+
+import states, { statusKey } from '../utils/states';
+
+import Media from './media';
+
+function MediaPost({
+  class: className,
+  statusID,
+  status,
+  instance,
+  parent,
+  allowFilters,
+  onMediaClick,
+}) {
+  let sKey = statusKey(statusID, instance);
+  const snapStates = useSnapshot(states);
+  if (!status) {
+    status = snapStates.statuses[sKey] || snapStates.statuses[statusID];
+    sKey = statusKey(status?.id, instance);
+  }
+  if (!status) {
+    return null;
+  }
+
+  const {
+    account: {
+      acct,
+      avatar,
+      avatarStatic,
+      id: accountId,
+      url: accountURL,
+      displayName,
+      username,
+      emojis: accountEmojis,
+      bot,
+      group,
+    },
+    id,
+    repliesCount,
+    reblogged,
+    reblogsCount,
+    favourited,
+    favouritesCount,
+    bookmarked,
+    poll,
+    muted,
+    sensitive,
+    spoilerText,
+    visibility, // public, unlisted, private, direct
+    language,
+    editedAt,
+    filtered,
+    card,
+    createdAt,
+    inReplyToId,
+    inReplyToAccountId,
+    content,
+    mentions,
+    mediaAttachments,
+    reblog,
+    uri,
+    url,
+    emojis,
+    // Non-API props
+    _deleted,
+    _pinned,
+    _filtered,
+  } = status;
+
+  if (!mediaAttachments?.length) {
+    return null;
+  }
+
+  const debugHover = (e) => {
+    if (e.shiftKey) {
+      console.log({
+        ...status,
+      });
+    }
+  };
+
+  console.debug('RENDER Media post', id, status?.account.displayName);
+
+  // const readingExpandSpoilers = useMemo(() => {
+  //   const prefs = store.account.get('preferences') || {};
+  //   return !!prefs['reading:expand:spoilers'];
+  // }, []);
+  const hasSpoiler = spoilerText || sensitive;
+
+  const Parent = parent || 'div';
+
+  return mediaAttachments.map((media, i) => {
+    const mediaKey = `${sKey}-${media.id}`;
+    return (
+      <Parent
+        onMouseEnter={debugHover}
+        key={mediaKey}
+        data-spoiler-text={
+          spoilerText || (sensitive ? 'Sensitive media' : undefined)
+        }
+        data-filtered-text={_filtered ? 'Filtered' : undefined}
+        class={`
+          media-post
+          ${allowFilters && _filtered ? 'filtered' : ''}
+          ${hasSpoiler ? 'has-spoiler' : ''}
+        `}
+      >
+        <Media
+          class={className}
+          media={media}
+          lang={language}
+          to={`/${instance}/s/${id}?media-only=${i + 1}`}
+          onClick={
+            onMediaClick ? (e) => onMediaClick(e, i, media, status) : undefined
+          }
+        />
+      </Parent>
+    );
+  });
+}
+
+export default memo(MediaPost);
diff --git a/src/components/media.jsx b/src/components/media.jsx
index 590caa40..f0390458 100644
--- a/src/components/media.jsx
+++ b/src/components/media.jsx
@@ -62,6 +62,7 @@ export const isMediaCaptionLong = mem((caption) =>
 );
 
 function Media({
+  class: className = '',
   media,
   to,
   lang,
@@ -170,6 +171,9 @@ function Media({
   const maxAspectHeight =
     window.innerHeight * (orientation === 'portrait' ? 0.45 : 0.33);
   const maxHeight = orientation === 'portrait' ? 0 : 160;
+  const averageColorStyle = {
+    '--average-color': rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
+  };
   const mediaStyles =
     width && height
       ? {
@@ -180,8 +184,11 @@ function Media({
             (width / height) * Math.max(maxHeight, maxAspectHeight)
           }px`,
           aspectRatio: `${width} / ${height}`,
+          ...averageColorStyle,
         }
-      : {};
+      : {
+          ...averageColorStyle,
+        };
 
   const longDesc = isMediaCaptionLong(description);
   const showInlineDesc =
@@ -233,7 +240,7 @@ function Media({
       <Figure>
         <Parent
           ref={parentRef}
-          class={`media media-image`}
+          class={`media media-image ${className}`}
           onClick={onClick}
           data-orientation={orientation}
           data-has-alt={!showInlineDesc}
@@ -244,6 +251,7 @@ function Media({
                   backgroundSize: imageSmallerThanParent
                     ? `${width}px ${height}px`
                     : undefined,
+                  ...averageColorStyle,
                 }
               : mediaStyles
           }
@@ -341,11 +349,13 @@ function Media({
     return (
       <Figure>
         <Parent
-          class={`media media-${isGIF ? 'gif' : 'video'} ${
+          class={`media ${className} media-${isGIF ? 'gif' : 'video'} ${
             autoGIFAnimate ? 'media-contain' : ''
           }`}
           data-orientation={orientation}
-          data-formatted-duration={formattedDuration}
+          data-formatted-duration={
+            !showOriginal ? formattedDuration : undefined
+          }
           data-label={isGIF && !showOriginal && !autoGIFAnimate ? 'GIF' : ''}
           data-has-alt={!showInlineDesc}
           // style={{
@@ -448,8 +458,10 @@ function Media({
     return (
       <Figure>
         <Parent
-          class="media media-audio"
-          data-formatted-duration={formattedDuration}
+          class={`media media-audio ${className}`}
+          data-formatted-duration={
+            !showOriginal ? formattedDuration : undefined
+          }
           data-has-alt={!showInlineDesc}
           onClick={onClick}
           style={!showOriginal && mediaStyles}
diff --git a/src/components/shortcuts-settings.jsx b/src/components/shortcuts-settings.jsx
index 11b0b895..2a1ee799 100644
--- a/src/components/shortcuts-settings.jsx
+++ b/src/components/shortcuts-settings.jsx
@@ -104,6 +104,11 @@ const TYPE_PARAMS = {
       placeholder: 'e.g. PixelArt (Max 5, space-separated)',
       pattern: '[^#]+',
     },
+    {
+      text: 'Media only',
+      name: 'media',
+      type: 'checkbox',
+    },
     {
       text: 'Instance',
       name: 'instance',
@@ -186,8 +191,10 @@ export const SHORTCUTS_META = {
     id: 'hashtag',
     title: ({ hashtag }) => hashtag,
     subtitle: ({ instance }) => instance || api().instance,
-    path: ({ hashtag, instance }) =>
-      `${instance ? `/${instance}` : ''}/t/${hashtag.split(/\s+/).join('+')}`,
+    path: ({ hashtag, instance, media }) =>
+      `${instance ? `/${instance}` : ''}/t/${hashtag.split(/\s+/).join('+')}${
+        media ? '?media=1' : ''
+      }`,
     icon: 'hashtag',
   },
 };
diff --git a/src/components/status.css b/src/components/status.css
index 77f55d9a..36b3fdce 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -846,7 +846,7 @@
   object-fit: cover;
   vertical-align: middle;
 }
-.status .media {
+.media {
   cursor: pointer;
 
   &[data-has-alt] {
@@ -885,7 +885,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
   position: relative;
   background-clip: padding-box;
 }
-.status :is(.media-video, .media-audio) .media-play {
+:is(.media-video, .media-audio) .media-play {
   pointer-events: none;
   width: 44px;
   height: 44px;
@@ -902,10 +902,10 @@ body:has(#modal-container .carousel) .status .media img:hover {
   border-radius: 70px;
   transition: transform 0.2s ease-in-out;
 }
-.status :is(.media-video, .media-audio):hover:not(:active) .media-play {
+:is(.media-video, .media-audio):hover:not(:active) .media-play {
   transform: translate(-50%, -50%) scale(1.1);
 }
-.status :is(.media-video, .media-audio)[data-formatted-duration]:after {
+:is(.media-video, .media-audio)[data-formatted-duration]:after {
   font-size: 12px;
   pointer-events: none;
   content: attr(data-formatted-duration);
@@ -918,10 +918,10 @@ body:has(#modal-container .carousel) .status .media img:hover {
   border-radius: 4px;
   padding: 0 4px;
 }
-.status .media-audio[data-formatted-duration]:after {
+.media-audio[data-formatted-duration]:after {
   content: '♬ ' attr(data-formatted-duration);
 }
-.status .media-gif[data-label]:not(:hover):after {
+.media-gif[data-label]:not(:hover):after {
   font-size: 12px;
   font-weight: bold;
   pointer-events: none;
@@ -953,12 +953,12 @@ body:has(#modal-container .carousel) .status .media img:hover {
 .status .media-audio audio {
   width: 100%;
 } */
-.status .media-audio {
+.media-audio {
   width: 100%;
   height: 100%;
   background-image: radial-gradient(
       circle at center center,
-      var(--bg-color),
+      transparent,
       var(--bg-faded-color)
     ),
     repeating-radial-gradient(
diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx
index c893ec84..ecbe6938 100644
--- a/src/components/timeline.jsx
+++ b/src/components/timeline.jsx
@@ -13,6 +13,8 @@ import useScroll from '../utils/useScroll';
 
 import Icon from './icon';
 import Link from './link';
+import Media from './media';
+import MediaPost from './media-post';
 import NavMenu from './nav-menu';
 import Status from './status';
 
@@ -39,6 +41,7 @@ function Timeline({
   timelineStart,
   allowFilters,
   refresh,
+  view,
 }) {
   const snapStates = useSnapshot(states);
   const [items, setItems] = useState([]);
@@ -50,6 +53,7 @@ function Timeline({
 
   console.debug('RENDER Timeline', id, refresh);
 
+  const allowGrouping = view !== 'media';
   const loadItems = useDebouncedCallback(
     (firstLoad) => {
       setShowNew(false);
@@ -59,10 +63,12 @@ function Timeline({
         try {
           let { done, value } = await fetchItems(firstLoad);
           if (Array.isArray(value)) {
-            if (boostsCarousel) {
-              value = groupBoosts(value);
+            if (allowGrouping) {
+              if (boostsCarousel) {
+                value = groupBoosts(value);
+              }
+              value = groupContext(value);
             }
-            value = groupContext(value);
             console.log(value);
             if (firstLoad) {
               setItems(value);
@@ -210,6 +216,14 @@ function Timeline({
     }
   }, [nearReachEnd, showMore]);
 
+  const prevView = useRef(view);
+  useEffect(() => {
+    if (prevView.current !== view) {
+      prevView.current = view;
+      setItems([]);
+    }
+  }, [view]);
+
   const loadOrCheckUpdates = useCallback(
     async ({ disableIdleCheck = false } = {}) => {
       console.log('✨ Load or check updates', {
@@ -346,7 +360,7 @@ function Timeline({
         )}
         {!!items.length ? (
           <>
-            <ul class="timeline">
+            <ul class={`timeline ${view ? `timeline-${view}` : ''}`}>
               {items.map((status) => (
                 <TimelineItem
                   status={status}
@@ -354,26 +368,29 @@ function Timeline({
                   useItemID={useItemID}
                   allowFilters={allowFilters}
                   key={status.id + status?._pinned}
+                  view={view}
                 />
               ))}
-              {showMore && uiState === 'loading' && (
-                <>
-                  <li
-                    style={{
-                      height: '20vh',
-                    }}
-                  >
-                    <Status skeleton />
-                  </li>
-                  <li
-                    style={{
-                      height: '25vh',
-                    }}
-                  >
-                    <Status skeleton />
-                  </li>
-                </>
-              )}
+              {showMore &&
+                uiState === 'loading' &&
+                (view === 'media' ? null : (
+                  <>
+                    <li
+                      style={{
+                        height: '20vh',
+                      }}
+                    >
+                      <Status skeleton />
+                    </li>
+                    <li
+                      style={{
+                        height: '25vh',
+                      }}
+                    >
+                      <Status skeleton />
+                    </li>
+                  </>
+                ))}
             </ul>
             {uiState === 'default' &&
               (showMore ? (
@@ -399,11 +416,19 @@ function Timeline({
           </>
         ) : uiState === 'loading' ? (
           <ul class="timeline">
-            {Array.from({ length: 5 }).map((_, i) => (
-              <li key={i}>
-                <Status skeleton />
-              </li>
-            ))}
+            {Array.from({ length: 5 }).map((_, i) =>
+              view === 'media' ? (
+                <div
+                  style={{
+                    height: '50vh',
+                  }}
+                />
+              ) : (
+                <li key={i}>
+                  <Status skeleton />
+                </li>
+              ),
+            )}
           </ul>
         ) : (
           uiState !== 'error' && <p class="ui-state">{emptyText}</p>
@@ -426,7 +451,7 @@ function Timeline({
   );
 }
 
-function TimelineItem({ status, instance, useItemID, allowFilters }) {
+function TimelineItem({ status, instance, useItemID, allowFilters, view }) {
   const { id: statusID, reblog, items, type, _pinned } = status;
   const actualStatusID = reblog?.id || statusID;
   const url = instance
@@ -531,8 +556,33 @@ function TimelineItem({ status, instance, useItemID, allowFilters }) {
       );
     });
   }
+
+  const itemKey = `timeline-${statusID + _pinned}`;
+
+  if (view === 'media') {
+    return useItemID ? (
+      <MediaPost
+        class="timeline-item"
+        parent="li"
+        key={itemKey}
+        statusID={statusID}
+        instance={instance}
+        allowFilters={allowFilters}
+      />
+    ) : (
+      <MediaPost
+        class="timeline-item"
+        parent="li"
+        key={itemKey}
+        status={status}
+        instance={instance}
+        allowFilters={allowFilters}
+      />
+    );
+  }
+
   return (
-    <li key={`timeline-${statusID + _pinned}`}>
+    <li key={itemKey}>
       <Link class="status-link timeline-item" to={url}>
         {useItemID ? (
           <Status
diff --git a/src/pages/account-statuses.jsx b/src/pages/account-statuses.jsx
index 3cd1c0a6..a45aedd1 100644
--- a/src/pages/account-statuses.jsx
+++ b/src/pages/account-statuses.jsx
@@ -414,6 +414,7 @@ function AccountStatuses() {
       errorText="Unable to load posts"
       fetchItems={fetchAccountStatuses}
       useItemID
+      view={media ? 'media' : undefined}
       boostsCarousel={snapStates.settings.boostsCarousel}
       timelineStart={TimelineStart}
       refresh={[
diff --git a/src/pages/hashtag.jsx b/src/pages/hashtag.jsx
index 1efb6aa2..ade10c9e 100644
--- a/src/pages/hashtag.jsx
+++ b/src/pages/hashtag.jsx
@@ -2,10 +2,11 @@ import {
   FocusableItem,
   MenuDivider,
   MenuGroup,
+  MenuHeader,
   MenuItem,
 } from '@szhsin/react-menu';
 import { useEffect, useRef, useState } from 'preact/hooks';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 
 import Icon from '../components/icon';
 import Menu2 from '../components/menu2';
@@ -25,13 +26,16 @@ const LIMIT = 20;
 const TAGS_LIMIT_PER_MODE = 4;
 const TOTAL_TAGS_LIMIT = TAGS_LIMIT_PER_MODE + 1;
 
-function Hashtags({ columnMode, ...props }) {
+function Hashtags({ media: mediaView, columnMode, ...props }) {
   // const navigate = useNavigate();
   let { hashtag, ...params } = columnMode ? {} : useParams();
   if (props.hashtag) hashtag = props.hashtag;
   let hashtags = hashtag.trim().split(/[\s+]+/);
   hashtags.sort();
   hashtag = hashtags[0];
+  const [searchParams, setSearchParams] = useSearchParams();
+  const media = mediaView || !!searchParams.get('media');
+  const linkParams = media ? '?media=1' : '';
 
   const { masto, instance, authenticated } = api({
     instance: props?.instance || params.instance,
@@ -60,6 +64,7 @@ function Hashtags({ columnMode, ...props }) {
         limit: LIMIT,
         any: hashtags.slice(1),
         maxId: firstLoad ? undefined : maxID.current,
+        onlyMedia: media,
       })
       .next();
     const { value } = results;
@@ -69,7 +74,9 @@ function Hashtags({ columnMode, ...props }) {
       }
 
       value.forEach((item) => {
-        saveStatus(item, instance);
+        saveStatus(item, instance, {
+          skipThreading: media, // If media view, no need to form threads
+        });
       });
 
       maxID.current = value[value.length - 1].id;
@@ -136,6 +143,8 @@ function Hashtags({ columnMode, ...props }) {
       fetchItems={fetchHashtags}
       checkForUpdates={checkForUpdates}
       useItemID
+      view={media ? 'media' : undefined}
+      refresh={media}
       headerEnd={
         <Menu2
           portal
@@ -209,6 +218,23 @@ function Hashtags({ columnMode, ...props }) {
               <MenuDivider />
             </>
           )}
+          <MenuHeader className="plain">Filters</MenuHeader>
+          <MenuItem
+            type="checkbox"
+            checked={!!media}
+            onClick={() => {
+              if (media) {
+                searchParams.delete('media');
+              } else {
+                searchParams.set('media', '1');
+              }
+              setSearchParams(searchParams);
+            }}
+          >
+            <Icon icon="check-circle" />{' '}
+            <span class="menu-grow">Media only</span>
+          </MenuItem>
+          <MenuDivider />
           <FocusableItem className="menu-field" disabled={reachLimit}>
             {({ ref }) => (
               <form
@@ -231,7 +257,7 @@ function Hashtags({ columnMode, ...props }) {
                     // );
                     location.hash = instance
                       ? `/${instance}/t/${hashtags.join('+')}`
-                      : `/t/${hashtags.join('+')}`;
+                      : `/t/${hashtags.join('+')}${linkParams}`;
                   }
                 }}
               >
@@ -267,8 +293,8 @@ function Hashtags({ columnMode, ...props }) {
                   //     : `/t/${hashtags.join('+')}`,
                   // );
                   location.hash = instance
-                    ? `/${instance}/t/${hashtags.join('+')}`
-                    : `/t/${hashtags.join('+')}`;
+                    ? `/${instance}/t/${hashtags.join('+')}${linkParams}`
+                    : `/t/${hashtags.join('+')}${linkParams}`;
                 }}
               >
                 <Icon icon="x" alt="Remove hashtag" class="danger-icon" />
@@ -287,6 +313,7 @@ function Hashtags({ columnMode, ...props }) {
                 type: 'hashtag',
                 hashtag: hashtags.join(' '),
                 instance,
+                media: media ? 'on' : undefined,
               };
               // Check if already exists
               const exists = states.shortcuts.some(
@@ -300,7 +327,8 @@ function Hashtags({ columnMode, ...props }) {
                       .split(/[\s+]+/)
                       .sort()
                       .join(' ') &&
-                  (s.instance ? s.instance === shortcut.instance : true),
+                  (s.instance ? s.instance === shortcut.instance : true) &&
+                  (s.media ? !!s.media === !!shortcut.media : true),
               );
               if (exists) {
                 alert('This shortcut already exists');
@@ -324,7 +352,9 @@ function Hashtags({ columnMode, ...props }) {
               if (newInstance) {
                 newInstance = newInstance.toLowerCase().trim();
                 // navigate(`/${newInstance}/t/${hashtags.join('+')}`);
-                location.hash = `/${newInstance}/t/${hashtags.join('+')}`;
+                location.hash = `/${newInstance}/t/${hashtags.join(
+                  '+',
+                )}${linkParams}`;
               }
             }}
           >

From 77312f3fb2831456072f46f26aa94be8a1c859af Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 29 Oct 2023 21:43:03 +0800
Subject: [PATCH 012/110] Use current instance for links on account info

---
 src/components/account-info.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/account-info.jsx b/src/components/account-info.jsx
index 3e56205b..af098fd3 100644
--- a/src/components/account-info.jsx
+++ b/src/components/account-info.jsx
@@ -126,7 +126,7 @@ function AccountInfo({
   const { masto } = api({
     instance,
   });
-  const { masto: currentMasto } = api();
+  const { masto: currentMasto, instance: currentInstance } = api();
   const [uiState, setUIState] = useState('default');
   const isString = typeof account === 'string';
   const [info, setInfo] = useState(isString ? null : account);
@@ -137,8 +137,8 @@ function AccountInfo({
   );
 
   const sameCurrentInstance = useMemo(
-    () => instance === api().instance,
-    [instance],
+    () => instance === currentInstance,
+    [instance, currentInstance],
   );
 
   useEffect(() => {
@@ -534,7 +534,7 @@ function AccountInfo({
                 class="note"
                 dir="auto"
                 onClick={handleContentLinks({
-                  instance,
+                  instance: currentInstance,
                 })}
                 dangerouslySetInnerHTML={{
                   __html: enhanceContent(note, { emojis }),

From ab29c8c89e9da320eb319addd1459407bca3162d Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 29 Oct 2023 22:06:46 +0800
Subject: [PATCH 013/110] Pushing my CSS skills to the limit

---
 src/app.css | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/app.css b/src/app.css
index 338286fc..f4aefc1e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -2084,13 +2084,18 @@ ul.link-list li a .icon {
 #columns .header-grid input {
   pointer-events: none;
 }
-#columns
-  .header-grid
-  .header-side:first-of-type
-  :is(button, .button)
-  ~ :is(button, .button),
-#columns .deck-container:not(:first-of-type) .header-grid .header-side > * {
-  display: none;
+#columns {
+  /* Any buttons except nav menu button on first header-side, on 1st column */
+  .deck-container:first-of-type
+    .header-grid
+    .header-side:first-of-type
+    > *:not(.nav-menu-button),
+  /* Any buttons on last header-side, on 1st column */
+  .deck-container:first-of-type .header-grid .header-side:last-of-type > *,
+  /* Any buttons on any header-side, on columns after 1st */
+  .deck-container:not(:first-of-type) .header-grid .header-side > * {
+    display: none;
+  }
 }
 @media (min-width: 40em) {
   #columns {

From b28d2d590fb39095e0af78767160540670e4ab14 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 29 Oct 2023 23:09:56 +0800
Subject: [PATCH 014/110] Fix media audio squashed

---
 src/components/status.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/status.css b/src/components/status.css
index 36b3fdce..39e5e195 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -956,6 +956,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
 .media-audio {
   width: 100%;
   height: 100%;
+  min-height: 88px;
   background-image: radial-gradient(
       circle at center center,
       transparent,

From 146e5d1a7e75fe964346cc203cdfa3e44f325603 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 29 Oct 2023 23:27:01 +0800
Subject: [PATCH 015/110] Filter out invalid notifications

---
 src/utils/group-notifications.jsx | 37 +++++++++++++++++++++++++++++--
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/utils/group-notifications.jsx b/src/utils/group-notifications.jsx
index 83326ccb..132fd32a 100644
--- a/src/utils/group-notifications.jsx
+++ b/src/utils/group-notifications.jsx
@@ -1,4 +1,37 @@
+// This is like very lame "type-checking" lol
+const notificationTypeKeys = {
+  mention: ['account', 'status'],
+  status: ['account', 'status'],
+  reblog: ['account', 'status'],
+  follow: ['account'],
+  follow_request: ['account'],
+  favourite: ['account', 'status'],
+  poll: ['status'],
+  update: ['status'],
+};
+function fixNotifications(notifications) {
+  return notifications.filter((notification) => {
+    const { type, id, createdAt } = notification;
+    if (!type) {
+      console.warn('Notification missing type', notification);
+      return false;
+    }
+    if (!id || !createdAt) {
+      console.warn('Notification missing id or createdAt', notification);
+      // Continue processing this despite missing id or createdAt
+    }
+    const keys = notificationTypeKeys[type];
+    if (keys?.length) {
+      return keys.every((key) => !!notification[key]);
+    }
+    return true; // skip other types
+  });
+}
+
 function groupNotifications(notifications) {
+  // Filter out invalid notifications
+  notifications = fixNotifications(notifications);
+
   // Create new flat list of notifications
   // Combine sibling notifications based on type and status id
   // Concat all notification.account into an array of _accounts
@@ -7,7 +40,7 @@ function groupNotifications(notifications) {
   for (let i = 0, j = 0; i < notifications.length; i++) {
     const notification = notifications[i];
     const { id, status, account, type, createdAt } = notification;
-    const date = new Date(createdAt).toLocaleDateString();
+    const date = createdAt ? new Date(createdAt).toLocaleDateString() : '';
     let virtualType = type;
     if (type === 'favourite' || type === 'reblog') {
       virtualType = 'favourite+reblog';
@@ -50,7 +83,7 @@ function groupNotifications(notifications) {
   for (let i = 0, j = 0; i < cleanNotifications.length; i++) {
     const notification = cleanNotifications[i];
     const { id, account, _accounts, type, createdAt } = notification;
-    const date = new Date(createdAt).toLocaleDateString();
+    const date = createdAt ? new Date(createdAt).toLocaleDateString() : '';
     if (type === 'favourite+reblog' && account && _accounts.length === 1) {
       const key = `${account?.id}-${type}-${date}`;
       const mappedNotification = notificationsMap2[key];

From 3092a8bba15b2e52bb502d178d06ebc258f6e47d Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 30 Oct 2023 09:22:19 +0800
Subject: [PATCH 016/110] Show hashtag usage total counts

---
 src/app.css                | 15 ++++++++++++++
 src/components/compose.css |  9 +++++++++
 src/components/compose.jsx | 13 +++++++++++-
 src/pages/search.jsx       | 41 +++++++++++++++++++++++++-------------
 src/pages/trending.jsx     |  3 ++-
 5 files changed, 65 insertions(+), 16 deletions(-)

diff --git a/src/app.css b/src/app.css
index f4aefc1e..e915fcb2 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1992,6 +1992,21 @@ ul.link-list li a {
   display: flex;
   align-items: center;
   gap: 8px;
+
+  .count {
+    font-size: 80%;
+    display: inline-block;
+    color: var(--text-insignificant-color);
+    min-width: 16px;
+    min-height: 16px;
+    padding: 4px;
+    background-color: var(--bg-color);
+    border-radius: 4px;
+
+    @media (min-width: 40em) {
+      background-color: var(--bg-faded-color);
+    }
+  }
 }
 ul.link-list li:first-child a {
   border-top-left-radius: var(--radius);
diff --git a/src/components/compose.css b/src/components/compose.css
index 5531f85e..edadbe1b 100644
--- a/src/components/compose.css
+++ b/src/components/compose.css
@@ -269,6 +269,15 @@
   gap: 8px;
   align-items: center;
   font-size: 90%;
+
+  .grow {
+    flex-grow: 1;
+  }
+
+  .count {
+    font-size: 80%;
+    opacity: 0.5;
+  }
 }
 #compose-container .text-expander-menu li b img {
   /* The shortcode emojis */
diff --git a/src/components/compose.jsx b/src/components/compose.jsx
index b3c213d5..5b64608e 100644
--- a/src/components/compose.jsx
+++ b/src/components/compose.jsx
@@ -17,6 +17,7 @@ import db from '../utils/db';
 import emojifyText from '../utils/emojify-text';
 import localeMatch from '../utils/locale-match';
 import openCompose from '../utils/open-compose';
+import shortenNumber from '../utils/shorten-number';
 import states, { saveStatus } from '../utils/states';
 import store from '../utils/store';
 import {
@@ -1306,6 +1307,7 @@ const Textarea = forwardRef((props, ref) => {
                   username,
                   acct,
                   emojis,
+                  history,
                 } = result;
                 const displayNameWithEmoji = emojifyText(displayName, emojis);
                 // const item = menuItem.cloneNode();
@@ -1324,9 +1326,18 @@ const Textarea = forwardRef((props, ref) => {
                     </li>
                   `;
                 } else {
+                  const total = history?.reduce?.(
+                    (acc, cur) => acc + +cur.uses,
+                    0,
+                  );
                   html += `
                     <li role="option" data-value="${encodeHTML(name)}">
-                      <span>#<b>${encodeHTML(name)}</b></span>
+                      <span class="grow">#<b>${encodeHTML(name)}</b></span>
+                      ${
+                        total
+                          ? `<span class="count">${shortenNumber(total)}</span>`
+                          : ''
+                      }
                     </li>
                   `;
                 }
diff --git a/src/pages/search.jsx b/src/pages/search.jsx
index 25a9739a..ff223520 100644
--- a/src/pages/search.jsx
+++ b/src/pages/search.jsx
@@ -13,6 +13,7 @@ import NavMenu from '../components/nav-menu';
 import SearchForm from '../components/search-form';
 import Status from '../components/status';
 import { api } from '../utils/api';
+import shortenNumber from '../utils/shorten-number';
 import useTitle from '../utils/useTitle';
 
 const SHORT_LIMIT = 5;
@@ -244,20 +245,32 @@ function Search(props) {
                   {hashtagResults.length > 0 ? (
                     <>
                       <ul class="link-list hashtag-list">
-                        {hashtagResults.map((hashtag) => (
-                          <li key={hashtag.name}>
-                            <Link
-                              to={
-                                instance
-                                  ? `/${instance}/t/${hashtag.name}`
-                                  : `/t/${hashtag.name}`
-                              }
-                            >
-                              <Icon icon="hashtag" />
-                              <span>{hashtag.name}</span>
-                            </Link>
-                          </li>
-                        ))}
+                        {hashtagResults.map((hashtag) => {
+                          const { name, history } = hashtag;
+                          const total = history.reduce(
+                            (acc, cur) => acc + +cur.uses,
+                            0,
+                          );
+                          return (
+                            <li key={hashtag.name}>
+                              <Link
+                                to={
+                                  instance
+                                    ? `/${instance}/t/${hashtag.name}`
+                                    : `/t/${hashtag.name}`
+                                }
+                              >
+                                <Icon icon="hashtag" />
+                                <span>{hashtag.name}</span>
+                                {!!total && (
+                                  <span class="count">
+                                    {shortenNumber(total)}
+                                  </span>
+                                )}
+                              </Link>
+                            </li>
+                          );
+                        })}
                       </ul>
                       {type !== 'hashtags' && (
                         <div class="ui-state">
diff --git a/src/pages/trending.jsx b/src/pages/trending.jsx
index dffd8310..f0f44739 100644
--- a/src/pages/trending.jsx
+++ b/src/pages/trending.jsx
@@ -15,6 +15,7 @@ import { api } from '../utils/api';
 import { oklab2rgb, rgb2oklab } from '../utils/color-utils';
 import { filteredItems } from '../utils/filters';
 import pmem from '../utils/pmem';
+import shortenNumber from '../utils/shorten-number';
 import states from '../utils/states';
 import { saveStatus } from '../utils/states';
 import useTitle from '../utils/useTitle';
@@ -131,7 +132,7 @@ function Trending({ columnMode, ...props }) {
                     <span class="more-insignificant">#</span>
                     {name}
                   </span>
-                  <span class="filter-count">{total.toLocaleString()}</span>
+                  <span class="filter-count">{shortenNumber(total)}</span>
                 </Link>
               );
             })}

From 3760b528607e44b43aecde5f71c3f12797d5be9c Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 30 Oct 2023 09:24:36 +0800
Subject: [PATCH 017/110] This autoAnimate is SO GOOD

---
 src/pages/search.jsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/pages/search.jsx b/src/pages/search.jsx
index ff223520..7c4587cb 100644
--- a/src/pages/search.jsx
+++ b/src/pages/search.jsx
@@ -1,5 +1,6 @@
 import './search.css';
 
+import { useAutoAnimate } from '@formkit/auto-animate/preact';
 import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { InView } from 'react-intersection-observer';
@@ -145,6 +146,8 @@ function Search(props) {
     },
   );
 
+  const [filterBarParent] = useAutoAnimate();
+
   return (
     <div id="search-page" class="deck-container" ref={scrollableRef}>
       <div class="timeline-deck deck">
@@ -159,7 +162,10 @@ function Search(props) {
         </header>
         <main>
           {!!q && (
-            <div class={`filter-bar ${uiState === 'loading' ? 'loading' : ''}`}>
+            <div
+              ref={filterBarParent}
+              class={`filter-bar ${uiState === 'loading' ? 'loading' : ''}`}
+            >
               {!!type && (
                 <Link to={`/search${q ? `?q=${encodeURIComponent(q)}` : ''}`}>
                   ‹ All

From 85f966bfc9c8a045452782114cb5a04667ec0705 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 30 Oct 2023 09:38:41 +0800
Subject: [PATCH 018/110] Remove this fit-content fix

It makes content jumpy
---
 src/app.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/app.css b/src/app.css
index e915fcb2..c1be7277 100644
--- a/src/app.css
+++ b/src/app.css
@@ -329,10 +329,6 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   box-shadow: inset 0 -3px var(--comment-line-color),
     inset 0 3px var(--comment-line-color);
   overscroll-behavior-x: contain;
-
-  .status-link {
-    width: fit-content;
-  }
 }
 .timeline.contextual .replies[data-comments-level='4'] {
   overflow-x: auto;

From 5fae5d8cf53716971b6c358b82eff76b1ba2d57a Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 30 Oct 2023 16:45:19 +0800
Subject: [PATCH 019/110] Adjustments to media post

---
 src/components/media-post.css | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/media-post.css b/src/components/media-post.css
index b7d32854..750e0e1b 100644
--- a/src/components/media-post.css
+++ b/src/components/media-post.css
@@ -24,6 +24,18 @@
     border-radius: calc(var(--item-radius) / 2);
     font-size: 90%;
     border: var(--hairline-width) dashed var(--bg-color);
+    word-break: break-word;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    opacity: 0.8;
+    mix-blend-mode: luminosity;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    -webkit-box-orient: vertical;
+    box-orient: vertical;
+    display: -webkit-box;
+    display: box;
+    overflow: hidden;
 
     > * {
       pointer-events: none;
@@ -78,9 +90,9 @@
       vertical-align: top;
     }
 
-    &:is(:hover, :focus) img {
+    :not(.filtered, .has-spoiler) &:is(:hover, :focus) img {
       /* Less delay here to make it feel more responsive */
-      animation: position-object 5s ease-in-out 0.3s 5;
+      animation: position-object 5s ease-in-out 0.1s 5;
       animation-duration: var(--anim-duration, 5s);
     }
   }

From 290243df0adc2f7dbc25db2bbadef78cc542ec86 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 30 Oct 2023 18:04:17 +0800
Subject: [PATCH 020/110] Make document titles better

---
 src/pages/account-statuses.jsx | 23 ++++++++++++++++++++---
 src/pages/hashtag.jsx          |  5 ++++-
 src/pages/mentions.jsx         |  2 +-
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/pages/account-statuses.jsx b/src/pages/account-statuses.jsx
index a45aedd1..4829375d 100644
--- a/src/pages/account-statuses.jsx
+++ b/src/pages/account-statuses.jsx
@@ -195,9 +195,26 @@ function AccountStatuses() {
 
   const [featuredTags, setFeaturedTags] = useState([]);
   useTitle(
-    `${account?.displayName ? account.displayName + ' ' : ''}@${
-      account?.acct ? account.acct : 'Account posts'
-    }`,
+    account?.acct
+      ? `${account?.displayName ? account.displayName + ' ' : ''}@${
+          account.acct
+        }${
+          !excludeReplies
+            ? ' (+ Replies)'
+            : excludeBoosts
+            ? ' (- Boosts)'
+            : tagged
+            ? ` (#${tagged})`
+            : media
+            ? ' (Media)'
+            : month
+            ? ` (${new Date(month).toLocaleString('default', {
+                month: 'long',
+                year: 'numeric',
+              })})`
+            : ''
+        }`
+      : 'Account posts',
     '/:instance?/a/:id',
   );
   useEffect(() => {
diff --git a/src/pages/hashtag.jsx b/src/pages/hashtag.jsx
index ade10c9e..e05a3f85 100644
--- a/src/pages/hashtag.jsx
+++ b/src/pages/hashtag.jsx
@@ -42,7 +42,10 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
   });
   const { authenticated: currentAuthenticated } = api();
   const hashtagTitle = hashtags.map((t) => `#${t}`).join(' ');
-  const title = instance ? `${hashtagTitle} on ${instance}` : hashtagTitle;
+  const hashtagPostTitle = media ? ` (Media only)` : '';
+  const title = instance
+    ? `${hashtagTitle}${hashtagPostTitle} on ${instance}`
+    : `${hashtagTitle}${hashtagPostTitle}`;
   useTitle(title, `/:instance?/t/:hashtag`);
   const latestItem = useRef();
 
diff --git a/src/pages/mentions.jsx b/src/pages/mentions.jsx
index 6403d188..da6e5ae0 100644
--- a/src/pages/mentions.jsx
+++ b/src/pages/mentions.jsx
@@ -11,11 +11,11 @@ const LIMIT = 20;
 const emptySearchParams = new URLSearchParams();
 
 function Mentions({ columnMode, ...props }) {
-  useTitle('Mentions', '/mentions');
   const { masto, instance } = api();
   const [searchParams] = columnMode ? [emptySearchParams] : useSearchParams();
   const [stateType, setStateType] = useState(null);
   const type = props?.type || searchParams.get('type') || stateType;
+  useTitle(`Mentions${type === 'private' ? ' (Private)' : ''}`, '/mentions');
 
   const mentionsIterator = useRef();
   const latestItem = useRef();

From 75bca8ed3a47ad2eaa4d5306a5f5d3efeca37756 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 30 Oct 2023 19:31:42 +0800
Subject: [PATCH 021/110] Upgrade dependencies

---
 package-lock.json | 46 +++++++++++++++++++++++-----------------------
 package.json      |  4 ++--
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cedc7f81..f0547e11 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,7 @@
         "idb-keyval": "~6.2.1",
         "just-debounce-it": "~3.2.0",
         "lz-string": "~1.5.0",
-        "masto": "~6.3.3",
+        "masto": "~6.4.0",
         "moize": "~6.1.6",
         "p-retry": "~6.1.0",
         "p-throttle": "~5.1.0",
@@ -50,7 +50,7 @@
         "vite": "~4.5.0",
         "vite-plugin-generate-file": "~0.0.4",
         "vite-plugin-html-config": "~1.0.11",
-        "vite-plugin-pwa": "~0.16.5",
+        "vite-plugin-pwa": "~0.16.6",
         "vite-plugin-remove-console": "~2.1.1",
         "workbox-cacheable-response": "~7.0.0",
         "workbox-expiration": "~7.0.0",
@@ -4264,9 +4264,9 @@
       }
     },
     "node_modules/events-to-async": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/events-to-async/-/events-to-async-2.0.0.tgz",
-      "integrity": "sha512-NiZEr4g51nI4/lz/6NdwMqK/TLIctlnp9TQ3wCJjlRp47VgrthUZE4nrk2UhfZ8VzoQ/Xyth+G6MKioLCt0FVA=="
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/events-to-async/-/events-to-async-2.0.1.tgz",
+      "integrity": "sha512-RtnLYrMbXp4JkZIoZu+3VTqV21bNVBlJBZ4NmtwvMNqSE3qouhxv2gvLE4JJDaQc54ioPkrX74V6x+hp/hqjkQ=="
     },
     "node_modules/fast-blurhash": {
       "version": "1.1.2",
@@ -5257,12 +5257,12 @@
       }
     },
     "node_modules/masto": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/masto/-/masto-6.3.3.tgz",
-      "integrity": "sha512-hmDsiscImeZfpkS+5oEWk3w5mkbxERFKN/UpuaoKZpVWWoGWCNnO7iPfQHygs/phP7PQqS6pVHlE5ylqSylf6A==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/masto/-/masto-6.4.0.tgz",
+      "integrity": "sha512-G4ANhXQGpfaAkeeRMYWxShSWqkCxrZvtvsHihQJSIcViy6ynUgxYd8wI0i6n1YokIGs7VoS7IPN+/JjMtyj1VA==",
       "dependencies": {
         "change-case": "^4.1.2",
-        "events-to-async": "^2.0.0",
+        "events-to-async": "^2.0.1",
         "isomorphic-ws": "^5.0.0",
         "ts-custom-error": "^3.3.1",
         "ws": "^8.13.0"
@@ -7394,9 +7394,9 @@
       }
     },
     "node_modules/vite-plugin-pwa": {
-      "version": "0.16.5",
-      "resolved": "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.16.5.tgz",
-      "integrity": "sha512-Ahol4dwhMP2UHPQXkllSlXbihOaDFnvBIDPmAxoSZ1EObBUJGP4CMRyCyAVkIHjd6/H+//vH0DM2ON+XxHr81g==",
+      "version": "0.16.6",
+      "resolved": "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.16.6.tgz",
+      "integrity": "sha512-bQPDOWvhPMwydMoWqohXvIzvrq4X8iuCF+q95qEiaM4yC0ybViGKWMnWcpWp0vcnoLk7QvxHDlK65KUZvqB3Sg==",
       "dev": true,
       "dependencies": {
         "debug": "^4.3.4",
@@ -7412,7 +7412,7 @@
         "url": "https://github.com/sponsors/antfu"
       },
       "peerDependencies": {
-        "vite": "^3.1.0 || ^4.0.0",
+        "vite": "^3.1.0 || ^4.0.0 || ^5.0.0-0",
         "workbox-build": "^7.0.0",
         "workbox-window": "^7.0.0"
       }
@@ -10453,9 +10453,9 @@
       "dev": true
     },
     "events-to-async": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/events-to-async/-/events-to-async-2.0.0.tgz",
-      "integrity": "sha512-NiZEr4g51nI4/lz/6NdwMqK/TLIctlnp9TQ3wCJjlRp47VgrthUZE4nrk2UhfZ8VzoQ/Xyth+G6MKioLCt0FVA=="
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/events-to-async/-/events-to-async-2.0.1.tgz",
+      "integrity": "sha512-RtnLYrMbXp4JkZIoZu+3VTqV21bNVBlJBZ4NmtwvMNqSE3qouhxv2gvLE4JJDaQc54ioPkrX74V6x+hp/hqjkQ=="
     },
     "fast-blurhash": {
       "version": "1.1.2",
@@ -11188,12 +11188,12 @@
       }
     },
     "masto": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/masto/-/masto-6.3.3.tgz",
-      "integrity": "sha512-hmDsiscImeZfpkS+5oEWk3w5mkbxERFKN/UpuaoKZpVWWoGWCNnO7iPfQHygs/phP7PQqS6pVHlE5ylqSylf6A==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/masto/-/masto-6.4.0.tgz",
+      "integrity": "sha512-G4ANhXQGpfaAkeeRMYWxShSWqkCxrZvtvsHihQJSIcViy6ynUgxYd8wI0i6n1YokIGs7VoS7IPN+/JjMtyj1VA==",
       "requires": {
         "change-case": "^4.1.2",
-        "events-to-async": "^2.0.0",
+        "events-to-async": "^2.0.1",
         "isomorphic-ws": "^5.0.0",
         "ts-custom-error": "^3.3.1",
         "ws": "^8.13.0"
@@ -12507,9 +12507,9 @@
       "requires": {}
     },
     "vite-plugin-pwa": {
-      "version": "0.16.5",
-      "resolved": "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.16.5.tgz",
-      "integrity": "sha512-Ahol4dwhMP2UHPQXkllSlXbihOaDFnvBIDPmAxoSZ1EObBUJGP4CMRyCyAVkIHjd6/H+//vH0DM2ON+XxHr81g==",
+      "version": "0.16.6",
+      "resolved": "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.16.6.tgz",
+      "integrity": "sha512-bQPDOWvhPMwydMoWqohXvIzvrq4X8iuCF+q95qEiaM4yC0ybViGKWMnWcpWp0vcnoLk7QvxHDlK65KUZvqB3Sg==",
       "dev": true,
       "requires": {
         "debug": "^4.3.4",
diff --git a/package.json b/package.json
index 40c6aa0d..8906965a 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "idb-keyval": "~6.2.1",
     "just-debounce-it": "~3.2.0",
     "lz-string": "~1.5.0",
-    "masto": "~6.3.3",
+    "masto": "~6.4.0",
     "moize": "~6.1.6",
     "p-retry": "~6.1.0",
     "p-throttle": "~5.1.0",
@@ -52,7 +52,7 @@
     "vite": "~4.5.0",
     "vite-plugin-generate-file": "~0.0.4",
     "vite-plugin-html-config": "~1.0.11",
-    "vite-plugin-pwa": "~0.16.5",
+    "vite-plugin-pwa": "~0.16.6",
     "vite-plugin-remove-console": "~2.1.1",
     "workbox-cacheable-response": "~7.0.0",
     "workbox-expiration": "~7.0.0",

From 5f64553d17bf25ce1584674fd12f274033ec3752 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 30 Oct 2023 19:54:20 +0800
Subject: [PATCH 022/110] Single column media posts for very small viewport

---
 src/app.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/app.css b/src/app.css
index c1be7277..02137727 100644
--- a/src/app.css
+++ b/src/app.css
@@ -213,7 +213,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   &.timeline-media {
     --grid-gap: 8px;
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr;
     grid-auto-rows: fit-content;
     gap: var(--grid-gap);
     padding: var(--grid-gap);
@@ -222,6 +222,10 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
       background-color: var(--bg-faded-color);
     }
 
+    @media (min-width: 320px) {
+      grid-template-columns: 1fr 1fr;
+    }
+
     @media (min-width: 40em) {
       &:not(#columns &) {
         --grid-gap: 16px;

From 99f81c49c41d50766fd8338e0bca464511ae0b68 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 30 Oct 2023 20:45:30 +0800
Subject: [PATCH 023/110] Revert "Debounce checks, less noisy"

This reverts commit 9c4252315a508f33f2b4e4c36b21066937f852f0.
---
 src/components/background-service.jsx | 96 ++++++++++++---------------
 src/components/timeline.jsx           |  8 +--
 2 files changed, 45 insertions(+), 59 deletions(-)

diff --git a/src/components/background-service.jsx b/src/components/background-service.jsx
index e7d7dcfc..927a1748 100644
--- a/src/components/background-service.jsx
+++ b/src/components/background-service.jsx
@@ -1,6 +1,5 @@
 import { memo } from 'preact/compat';
 import { useEffect, useRef, useState } from 'preact/hooks';
-import { useDebouncedCallback } from 'use-debounce';
 
 import { api } from '../utils/api';
 import states, { saveStatus } from '../utils/states';
@@ -12,62 +11,55 @@ export default memo(function BackgroundService({ isLoggedIn }) {
   // - WebSocket to receive notifications when page is visible
   const [visible, setVisible] = useState(true);
   usePageVisibility(setVisible);
-  const subRef = useRef();
-  const debouncedStartNotifications = useDebouncedCallback(() => {
-    const { masto, streaming, instance } = api();
-    (async () => {
-      // 1. Get the latest notification
-      if (states.notificationsLast) {
-        const notificationsIterator = masto.v1.notifications.list({
-          limit: 1,
-          since_id: states.notificationsLast.id,
-        });
-        const { value: notifications } = await notificationsIterator.next();
-        if (notifications?.length) {
-          let lastReadId;
-          try {
-            const markers = await masto.v1.markers.fetch({
-              timeline: 'notifications',
-            });
-            lastReadId = markers?.notifications?.lastReadId;
-          } catch (e) {}
-          if (lastReadId) {
-            states.notificationsShowNew = notifications[0].id !== lastReadId;
-          } else {
+  useEffect(() => {
+    let sub;
+    if (isLoggedIn && visible) {
+      const { masto, streaming, instance } = api();
+      (async () => {
+        // 1. Get the latest notification
+        if (states.notificationsLast) {
+          const notificationsIterator = masto.v1.notifications.list({
+            limit: 1,
+            since_id: states.notificationsLast.id,
+          });
+          const { value: notifications } = await notificationsIterator.next();
+          if (notifications?.length) {
+            let lastReadId;
+            try {
+              const markers = await masto.v1.markers.fetch({
+                timeline: 'notifications',
+              });
+              lastReadId = markers?.notifications?.lastReadId;
+            } catch (e) {}
+            if (lastReadId) {
+              states.notificationsShowNew = notifications[0].id !== lastReadId;
+            } else {
+              states.notificationsShowNew = true;
+            }
+          }
+        }
+
+        // 2. Start streaming
+        if (streaming) {
+          sub = streaming.user.notification.subscribe();
+          console.log('🎏 Streaming notification', sub);
+          for await (const entry of sub) {
+            if (!sub) break;
+            console.log('🔔🔔 Notification entry', entry);
+            if (entry.event === 'notification') {
+              console.log('🔔🔔 Notification', entry);
+              saveStatus(entry.payload, instance, {
+                skipThreading: true,
+              });
+            }
             states.notificationsShowNew = true;
           }
         }
-      }
-
-      // 2. Start streaming
-      if (streaming) {
-        let sub = (subRef.current = streaming.user.notification.subscribe());
-        console.log('🎏 Streaming notification', sub);
-        for await (const entry of sub) {
-          if (!sub) break;
-          console.log('🔔🔔 Notification entry', entry);
-          if (entry.event === 'notification') {
-            console.log('🔔🔔 Notification', entry);
-            saveStatus(entry.payload, instance, {
-              skipThreading: true,
-            });
-          }
-          states.notificationsShowNew = true;
-        }
-      }
-    })();
-  }, 3000);
-  useEffect(() => {
-    // let sub;
-    if (isLoggedIn && visible) {
-      debouncedStartNotifications();
+      })();
     }
     return () => {
-      // sub?.unsubscribe?.();
-      // sub = null;
-      debouncedStartNotifications?.cancel?.();
-      subRef.current?.unsubscribe?.();
-      subRef.current = null;
+      sub?.unsubscribe?.();
+      sub = null;
     };
   }, [visible, isLoggedIn]);
 
diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx
index ecbe6938..9d05210c 100644
--- a/src/components/timeline.jsx
+++ b/src/components/timeline.jsx
@@ -252,10 +252,6 @@ function Timeline({
     },
     [id, loadItems, checkForUpdates, snapStates.settings.autoRefresh],
   );
-  const debouncedLoadOrCheckUpdates = useDebouncedCallback(
-    loadOrCheckUpdates,
-    3000,
-  );
 
   const lastHiddenTime = useRef();
   usePageVisibility(
@@ -263,14 +259,12 @@ function Timeline({
       if (visible) {
         const timeDiff = Date.now() - lastHiddenTime.current;
         if (!lastHiddenTime.current || timeDiff > 1000 * 60) {
-          // 1 minute
-          debouncedLoadOrCheckUpdates({
+          loadOrCheckUpdates({
             disableIdleCheck: true,
           });
         }
       } else {
         lastHiddenTime.current = Date.now();
-        debouncedLoadOrCheckUpdates.cancel();
       }
       setVisible(visible);
     },

From 3c790ebff41f0999507dda1a19bff64b1fcb34f9 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 30 Oct 2023 23:50:15 +0800
Subject: [PATCH 024/110] Better segmentation of languages with <hr>

---
 src/components/compose.jsx | 65 +++++++++++++++++++++++---------------
 1 file changed, 39 insertions(+), 26 deletions(-)

diff --git a/src/components/compose.jsx b/src/components/compose.jsx
index 5b64608e..e504c1bb 100644
--- a/src/components/compose.jsx
+++ b/src/components/compose.jsx
@@ -522,6 +522,34 @@ function Compose({
 
   const [showEmoji2Picker, setShowEmoji2Picker] = useState(false);
 
+  const [topSupportedLanguages, restSupportedLanguages] = useMemo(() => {
+    const topLanguages = [];
+    const restLanguages = [];
+    const { contentTranslationHideLanguages = [] } = states.settings;
+    supportedLanguages.forEach((l) => {
+      const [code] = l;
+      if (
+        code === language ||
+        code === prevLanguage.current ||
+        code === DEFAULT_LANG ||
+        contentTranslationHideLanguages.includes(code)
+      ) {
+        topLanguages.push(l);
+      } else {
+        restLanguages.push(l);
+      }
+    });
+    topLanguages.sort(([codeA, commonA], [codeB, commonB]) => {
+      if (codeA === language) return -1;
+      if (codeB === language) return 1;
+      return commonA.localeCompare(commonB);
+    });
+    restLanguages.sort(([codeA, commonA], [codeB, commonB]) =>
+      commonA.localeCompare(commonB),
+    );
+    return [topLanguages, restLanguages];
+  }, [language]);
+
   return (
     <div id="compose-container-outer">
       <div id="compose-container" class={standalone ? 'standalone' : ''}>
@@ -1126,32 +1154,17 @@ function Compose({
                 }}
                 disabled={uiState === 'loading'}
               >
-                {supportedLanguages
-                  .sort(([codeA, commonA], [codeB, commonB]) => {
-                    const { contentTranslationHideLanguages = [] } =
-                      states.settings;
-                    // Sort codes that same as language, prevLanguage, DEFAULT_LANGUAGE and all the ones in states.settings.contentTranslationHideLanguages, to the top
-                    if (
-                      codeA === language ||
-                      codeA === prevLanguage ||
-                      codeA === DEFAULT_LANG ||
-                      contentTranslationHideLanguages?.includes(codeA)
-                    )
-                      return -1;
-                    if (
-                      codeB === language ||
-                      codeB === prevLanguage ||
-                      codeB === DEFAULT_LANG ||
-                      contentTranslationHideLanguages?.includes(codeB)
-                    )
-                      return 1;
-                    return commonA.localeCompare(commonB);
-                  })
-                  .map(([code, common, native]) => (
-                    <option value={code}>
-                      {common} ({native})
-                    </option>
-                  ))}
+                {topSupportedLanguages.map(([code, common, native]) => (
+                  <option value={code} key={code}>
+                    {common} ({native})
+                  </option>
+                ))}
+                <hr />
+                {restSupportedLanguages.map(([code, common, native]) => (
+                  <option value={code} key={code}>
+                    {common} ({native})
+                  </option>
+                ))}
               </select>
             </label>{' '}
             <button

From d5b257b13054727c8e6f16e48ed6f93eee59fdf9 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 30 Oct 2023 23:53:43 +0800
Subject: [PATCH 025/110] Change the update check logic on Notifications page

---
 src/pages/notifications.jsx | 71 +++++++++++++++++++++++++------------
 1 file changed, 48 insertions(+), 23 deletions(-)

diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx
index 824e7b7d..67cb9919 100644
--- a/src/pages/notifications.jsx
+++ b/src/pages/notifications.jsx
@@ -6,6 +6,7 @@ import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { InView } from 'react-intersection-observer';
 import { useSearchParams } from 'react-router-dom';
 import { useSnapshot } from 'valtio';
+import { subscribeKey } from 'valtio/utils';
 
 import AccountBlock from '../components/account-block';
 import FollowRequestButtons from '../components/follow-request-buttons';
@@ -23,6 +24,7 @@ import { getRegistration } from '../utils/push-notifications';
 import shortenNumber from '../utils/shorten-number';
 import states, { saveStatus } from '../utils/states';
 import { getCurrentInstance } from '../utils/store-utils';
+import usePageVisibility from '../utils/usePageVisibility';
 import useScroll from '../utils/useScroll';
 import useTitle from '../utils/useTitle';
 
@@ -173,30 +175,53 @@ function Notifications({ columnMode }) {
   //   }
   // }, [nearReachEnd, showMore]);
 
-  const loadUpdates = useCallback(() => {
-    console.log('✨ Load updates', {
-      autoRefresh: snapStates.settings.autoRefresh,
-      scrollTop: scrollableRef.current?.scrollTop === 0,
-      inBackground: inBackground(),
-      notificationsShowNew: snapStates.notificationsShowNew,
-      uiState,
-    });
-    if (
-      snapStates.settings.autoRefresh &&
-      scrollableRef.current?.scrollTop === 0 &&
-      window.__IDLE__ &&
-      !inBackground() &&
-      snapStates.notificationsShowNew &&
-      uiState !== 'loading'
-    ) {
-      loadNotifications(true);
+  const loadUpdates = useCallback(
+    ({ disableIdleCheck = false } = {}) => {
+      console.log('✨ Load updates', {
+        autoRefresh: snapStates.settings.autoRefresh,
+        scrollTop: scrollableRef.current?.scrollTop === 0,
+        inBackground: inBackground(),
+        disableIdleCheck,
+        notificationsShowNew: snapStates.notificationsShowNew,
+        uiState,
+      });
+      if (
+        snapStates.settings.autoRefresh &&
+        scrollableRef.current?.scrollTop === 0 &&
+        (disableIdleCheck || window.__IDLE__) &&
+        !inBackground() &&
+        snapStates.notificationsShowNew &&
+        uiState !== 'loading'
+      ) {
+        loadNotifications(true);
+      }
+    },
+    [snapStates.notificationsShowNew, snapStates.settings.autoRefresh, uiState],
+  );
+  // useEffect(loadUpdates, [snapStates.notificationsShowNew]);
+
+  const lastHiddenTime = useRef();
+  usePageVisibility((visible) => {
+    let unsub;
+    if (visible) {
+      const timeDiff = Date.now() - lastHiddenTime.current;
+      if (!lastHiddenTime.current || timeDiff > 1000 * 60) {
+        loadUpdates({
+          disableIdleCheck: true,
+        });
+      } else {
+        lastHiddenTime.current = Date.now();
+      }
+      unsub = subscribeKey(states, 'notificationsShowNew', (v) => {
+        if (v) {
+          loadUpdates();
+        }
+      });
     }
-  }, [
-    snapStates.notificationsShowNew,
-    snapStates.settings.autoRefresh,
-    uiState,
-  ]);
-  useEffect(loadUpdates, [snapStates.notificationsShowNew]);
+    return () => {
+      unsub?.();
+    };
+  });
 
   const todayDate = new Date();
   const yesterdayDate = new Date(todayDate - 24 * 60 * 60 * 1000);

From 39d97a51c5c20da6c9a18630f61e9240143717e0 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 31 Oct 2023 00:38:59 +0800
Subject: [PATCH 026/110] Make idle state switch faster

---
 src/app.jsx | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/app.jsx b/src/app.jsx
index c7393a0b..23c3f752 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -84,7 +84,7 @@ setTimeout(() => {
 }, 5000);
 
 (() => {
-  window.__IDLE__ = false;
+  window.__IDLE__ = true;
   const nonIdleEvents = [
     'mousemove',
     'mousedown',
@@ -95,13 +95,14 @@ setTimeout(() => {
     'pointermove',
     'wheel',
   ];
-  const IDLE_TIME = 5_000; // 5 seconds
-  const setIdle = debounce(() => {
+  const setIdle = () => {
     window.__IDLE__ = true;
-  }, IDLE_TIME);
+  };
+  const IDLE_TIME = 3_000; // 3 seconds
+  const debouncedSetIdle = debounce(setIdle, IDLE_TIME);
   const onNonIdle = () => {
     window.__IDLE__ = false;
-    setIdle();
+    debouncedSetIdle();
   };
   nonIdleEvents.forEach((event) => {
     window.addEventListener(event, onNonIdle, {
@@ -109,6 +110,21 @@ setTimeout(() => {
       capture: true,
     });
   });
+  window.addEventListener('blur', setIdle, {
+    passive: true,
+  });
+  // When cursor leaves the window, set idle
+  document.documentElement.addEventListener(
+    'mouseleave',
+    (e) => {
+      if (!e.relatedTarget && !e.toElement) {
+        setIdle();
+      }
+    },
+    {
+      passive: true,
+    },
+  );
   // document.addEventListener(
   //   'visibilitychange',
   //   () => {

From 33b989fffcb7786f0794b2898a712848f18d6d60 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 31 Oct 2023 00:42:24 +0800
Subject: [PATCH 027/110] Loosen the scrollTop check

---
 src/components/timeline.jsx | 2 +-
 src/pages/notifications.jsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx
index 9d05210c..9da2b43e 100644
--- a/src/components/timeline.jsx
+++ b/src/components/timeline.jsx
@@ -235,7 +235,7 @@ function Timeline({
       });
       if (
         snapStates.settings.autoRefresh &&
-        scrollableRef.current.scrollTop === 0 &&
+        scrollableRef.current.scrollTop < 16 &&
         (disableIdleCheck || window.__IDLE__) &&
         !inBackground()
       ) {
diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx
index 67cb9919..f7b18f51 100644
--- a/src/pages/notifications.jsx
+++ b/src/pages/notifications.jsx
@@ -179,7 +179,7 @@ function Notifications({ columnMode }) {
     ({ disableIdleCheck = false } = {}) => {
       console.log('✨ Load updates', {
         autoRefresh: snapStates.settings.autoRefresh,
-        scrollTop: scrollableRef.current?.scrollTop === 0,
+        scrollTop: scrollableRef.current?.scrollTop,
         inBackground: inBackground(),
         disableIdleCheck,
         notificationsShowNew: snapStates.notificationsShowNew,
@@ -187,7 +187,7 @@ function Notifications({ columnMode }) {
       });
       if (
         snapStates.settings.autoRefresh &&
-        scrollableRef.current?.scrollTop === 0 &&
+        scrollableRef.current?.scrollTop < 16 &&
         (disableIdleCheck || window.__IDLE__) &&
         !inBackground() &&
         snapStates.notificationsShowNew &&

From c67192bb81b0c1dc55db350149b9855b04137513 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 31 Oct 2023 08:47:19 +0800
Subject: [PATCH 028/110] Show toast when picking month for account statuses

---
 src/pages/account-statuses.jsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/pages/account-statuses.jsx b/src/pages/account-statuses.jsx
index 4829375d..476dd0f7 100644
--- a/src/pages/account-statuses.jsx
+++ b/src/pages/account-statuses.jsx
@@ -345,6 +345,15 @@ function AccountStatuses() {
                           }
                         : {},
                     );
+                    showToast(
+                      `Showing posts in ${new Date(value).toLocaleString(
+                        'default',
+                        {
+                          month: 'long',
+                          year: 'numeric',
+                        },
+                      )}`,
+                    );
                   }}
                 />
               </label>

From 1f78bb9c0904c95af5aa8a791c63b5ec7d8608e7 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 31 Oct 2023 15:41:39 +0800
Subject: [PATCH 029/110] Fix check updates don't use media param

---
 src/pages/hashtag.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/hashtag.jsx b/src/pages/hashtag.jsx
index e05a3f85..b17a0b0b 100644
--- a/src/pages/hashtag.jsx
+++ b/src/pages/hashtag.jsx
@@ -98,6 +98,7 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
           limit: 1,
           any: hashtags.slice(1),
           since_id: latestItem.current,
+          onlyMedia: media,
         })
         .next();
       const { value } = results;

From afb80d3dc6de7404336a5254264394a43ba12438 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 31 Oct 2023 15:41:56 +0800
Subject: [PATCH 030/110] Hide "new notifications" button early

---
 src/pages/notifications.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx
index f7b18f51..8cf6e357 100644
--- a/src/pages/notifications.jsx
+++ b/src/pages/notifications.jsx
@@ -54,6 +54,8 @@ function Notifications({ columnMode }) {
 
   const notificationsIterator = useRef();
   async function fetchNotifications(firstLoad) {
+    states.notificationsShowNew = false; // Hide "new notifications" button early
+
     if (firstLoad || !notificationsIterator.current) {
       // Reset iterator
       notificationsIterator.current = masto.v1.notifications.list({
@@ -90,7 +92,6 @@ function Notifications({ columnMode }) {
       }
     }
 
-    states.notificationsShowNew = false;
     states.notificationsLastFetchTime = Date.now();
     return allNotifications;
   }

From b17977a5c79d3320ddb8c925de9e0e20d1fdb31c Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 31 Oct 2023 15:43:56 +0800
Subject: [PATCH 031/110] First production-stage scroll-driven animation

---
 src/components/account-info.css | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/components/account-info.css b/src/components/account-info.css
index 9b898219..1c48b628 100644
--- a/src/components/account-info.css
+++ b/src/components/account-info.css
@@ -424,6 +424,16 @@
   display: none;
 }
 
+@keyframes bye-banner {
+  20% {
+    transform: translateY(0);
+    filter: blur(0) opacity(1);
+  }
+  100% {
+    transform: translateY(8px);
+    filter: blur(16px) opacity(0.75);
+  }
+}
 .sheet .account-container {
   border-radius: 16px 16px 0 0;
   overflow-x: hidden;
@@ -455,6 +465,11 @@
     margin-top: calc(-1 * var(--banner-overlap));
   }
 
+  .header-banner:not(.header-is-avatar):not(:hover):not(:active) {
+    animation: bye-banner 1s linear both;
+    animation-timeline: scroll();
+  }
+
   main {
     margin-top: -8px;
     padding-top: 1px;

From 3f6402349ce7cd1e3d0f433ff9a029563e5bc284 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 31 Oct 2023 20:21:37 +0800
Subject: [PATCH 032/110] Rearrange code

---
 src/app.css | 35 ++++++++++++++++-------------------
 1 file changed, 16 insertions(+), 19 deletions(-)

diff --git a/src/app.css b/src/app.css
index 02137727..a2b98c47 100644
--- a/src/app.css
+++ b/src/app.css
@@ -56,6 +56,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   overscroll-behavior: contain;
   scroll-behavior: smooth;
   background-color: var(--bg-color);
+  flex-grow: 1;
   /* This `transform` fixes carousel blocking vertical scrolling for pointer devices on iPad */
   transform: translateZ(0);
 }
@@ -79,6 +80,21 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   scroll-padding-top: 3em;
 }
 
+:is(#home-page, #welcome, #columns, #loader-root) ~ .deck-container {
+  z-index: 10;
+  position: fixed;
+  inset: 0;
+}
+:is(#home-page, #welcome, #columns, #loader-root):has(~ .deck-container) {
+  display: block;
+  position: absolute;
+  user-select: none;
+  pointer-events: none;
+  opacity: 0;
+  /* This causes scrollTop to be reset to 0 when the page is hidden */
+  /* content-visibility: hidden; */
+}
+
 .deck {
   min-height: 100vh;
   min-height: 100dvh;
@@ -1918,25 +1934,6 @@ meter.donut[hidden] {
   }
 }
 
-.deck-container {
-  width: 100%;
-  flex-grow: 1;
-}
-:is(#home-page, #welcome, #columns, #loader-root) ~ .deck-container {
-  z-index: 10;
-  position: fixed;
-  inset: 0;
-}
-:is(#home-page, #welcome, #columns, #loader-root):has(~ .deck-container) {
-  display: block;
-  position: absolute;
-  user-select: none;
-  pointer-events: none;
-  opacity: 0;
-  /* This causes scrollTop to be reset to 0 when the page is hidden */
-  /* content-visibility: hidden; */
-}
-
 /* 404 */
 
 #not-found-page {

From 5cb0621f34e24c159882db5d694466ddb815cd59 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 31 Oct 2023 20:21:49 +0800
Subject: [PATCH 033/110] Remove unused useSnapshot

---
 src/app.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app.jsx b/src/app.jsx
index 23c3f752..b30b9fba 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -10,7 +10,7 @@ import {
 } from 'preact/hooks';
 import { matchPath, Route, Routes, useLocation } from 'react-router-dom';
 import 'swiped-events';
-import { subscribe, useSnapshot } from 'valtio';
+import { subscribe } from 'valtio';
 
 import BackgroundService from './components/background-service';
 import ComposeButton from './components/compose-button';

From f5808b6f3bbeb400ccb5a85d46009b7828b392c8 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 31 Oct 2023 20:50:27 +0800
Subject: [PATCH 034/110] Add keyboard shortcut to toggle cloak mode

---
 src/components/background-service.jsx      | 11 +++++++++++
 src/components/keyboard-shortcuts-help.jsx |  8 ++++++++
 2 files changed, 19 insertions(+)

diff --git a/src/components/background-service.jsx b/src/components/background-service.jsx
index 927a1748..96a6bb28 100644
--- a/src/components/background-service.jsx
+++ b/src/components/background-service.jsx
@@ -1,7 +1,9 @@
 import { memo } from 'preact/compat';
 import { useEffect, useRef, useState } from 'preact/hooks';
+import { useHotkeys } from 'react-hotkeys-hook';
 
 import { api } from '../utils/api';
+import showToast from '../utils/show-toast';
 import states, { saveStatus } from '../utils/states';
 import useInterval from '../utils/useInterval';
 import usePageVisibility from '../utils/usePageVisibility';
@@ -92,5 +94,14 @@ export default memo(function BackgroundService({ isLoggedIn }) {
     }
   });
 
+  // Global keyboard shortcuts "service"
+  useHotkeys('shift+alt+k', () => {
+    const currentCloakMode = states.settings.cloakMode;
+    states.settings.cloakMode = !currentCloakMode;
+    showToast({
+      text: `Cloak mode ${currentCloakMode ? 'disabled' : 'enabled'}`,
+    });
+  });
+
   return null;
 });
diff --git a/src/components/keyboard-shortcuts-help.jsx b/src/components/keyboard-shortcuts-help.jsx
index 08683cb4..52bca713 100644
--- a/src/components/keyboard-shortcuts-help.jsx
+++ b/src/components/keyboard-shortcuts-help.jsx
@@ -154,6 +154,14 @@ export default memo(function KeyboardShortcutsHelp() {
                   action: 'Bookmark',
                   keys: <kbd>d</kbd>,
                 },
+                {
+                  action: 'Toggle Cloak mode',
+                  keys: (
+                    <>
+                      <kbd>Shift</kbd> + <kbd>Alt</kbd> + <kbd>k</kbd>
+                    </>
+                  ),
+                },
               ].map(({ action, keys }) => (
                 <tr key={action}>
                   <th>{action}</th>

From f3dcd9f4ee324638c28f5523f2eae50a5744886a Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 31 Oct 2023 20:55:34 +0800
Subject: [PATCH 035/110] Position nav bar to top if there's hover

---
 src/components/shortcuts.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/shortcuts.css b/src/components/shortcuts.css
index a0e88160..59bee8f7 100644
--- a/src/components/shortcuts.css
+++ b/src/components/shortcuts.css
@@ -152,7 +152,7 @@ shortcuts .tab-bar[hidden] {
   }
 }
 
-@media (min-width: 40em) {
+@media (min-width: 40em) and (hover: hover) {
   #app[data-shortcuts-view-mode='tab-menu-bar'] .timeline-deck {
     margin-top: 44px;
   }

From bc0197a5f13452366e40ec5ee7558df85872d209 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 31 Oct 2023 22:22:57 +0800
Subject: [PATCH 036/110] Add a little Fragment here

---
 src/components/notification.jsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/notification.jsx b/src/components/notification.jsx
index 198c542e..823d9f43 100644
--- a/src/components/notification.jsx
+++ b/src/components/notification.jsx
@@ -1,3 +1,4 @@
+import { Fragment } from 'preact';
 import { memo } from 'preact/compat';
 
 import shortenNumber from '../utils/shorten-number';
@@ -221,9 +222,10 @@ function Notification({ notification, instance, isStatic }) {
         )}
         {_accounts?.length > 1 && (
           <p class="avatars-stack">
-            {_accounts.slice(0, AVATARS_LIMIT).map((account, i) => (
-              <>
+            {_accounts.slice(0, AVATARS_LIMIT).map((account) => (
+              <Fragment key={account.id}>
                 <a
+                  key={account.id}
                   href={account.url}
                   rel="noopener noreferrer"
                   class="account-avatar-stack"
@@ -261,7 +263,7 @@ function Notification({ notification, instance, isStatic }) {
                     </div>
                   )}
                 </a>{' '}
-              </>
+              </Fragment>
             ))}
             <button
               type="button"

From 22abc2fb31758a0582af1436ed82f2be77f5ec77 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 31 Oct 2023 22:25:08 +0800
Subject: [PATCH 037/110] Need @supports check before doing scroll-driven
 animation

---
 src/components/account-info.css | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/account-info.css b/src/components/account-info.css
index 1c48b628..e979302a 100644
--- a/src/components/account-info.css
+++ b/src/components/account-info.css
@@ -465,9 +465,11 @@
     margin-top: calc(-1 * var(--banner-overlap));
   }
 
-  .header-banner:not(.header-is-avatar):not(:hover):not(:active) {
-    animation: bye-banner 1s linear both;
-    animation-timeline: scroll();
+  @supports (animation-timeline: scroll()) {
+    .header-banner:not(.header-is-avatar):not(:hover):not(:active) {
+      animation: bye-banner 1s linear both;
+      animation-timeline: scroll();
+    }
   }
 
   main {

From 6ec70731513794b400d77e3d58e3097d504f2904 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 1 Nov 2023 10:00:05 +0800
Subject: [PATCH 038/110] Fix bypass shortcuts limit

---
 src/components/shortcuts-settings.jsx | 2 +-
 src/pages/hashtag.jsx                 | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/shortcuts-settings.jsx b/src/components/shortcuts-settings.jsx
index 2a1ee799..1d551c6c 100644
--- a/src/components/shortcuts-settings.jsx
+++ b/src/components/shortcuts-settings.jsx
@@ -22,7 +22,7 @@ import Icon from './icon';
 import MenuConfirm from './menu-confirm';
 import Modal from './modal';
 
-const SHORTCUTS_LIMIT = 9;
+export const SHORTCUTS_LIMIT = 9;
 
 const TYPES = [
   'following',
diff --git a/src/pages/hashtag.jsx b/src/pages/hashtag.jsx
index b17a0b0b..1a7fd0cb 100644
--- a/src/pages/hashtag.jsx
+++ b/src/pages/hashtag.jsx
@@ -11,6 +11,7 @@ import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import Icon from '../components/icon';
 import Menu2 from '../components/menu2';
 import MenuConfirm from '../components/menu-confirm';
+import { SHORTCUTS_LIMIT } from '../components/shortcuts-settings';
 import Timeline from '../components/timeline';
 import { api } from '../utils/api';
 import showToast from '../utils/show-toast';
@@ -313,6 +314,12 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
           <MenuItem
             disabled={!currentAuthenticated}
             onClick={() => {
+              if (states.shortcuts.length >= SHORTCUTS_LIMIT) {
+                alert(
+                  `Max ${SHORTCUTS_LIMIT} shortcuts reached. Unable to add shortcut.`,
+                );
+                return;
+              }
               const shortcut = {
                 type: 'hashtag',
                 hashtag: hashtags.join(' '),

From 478271348ea85efd60b2d0bde59fed38441af601 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 1 Nov 2023 10:00:28 +0800
Subject: [PATCH 039/110] Make selected view mode more glowy

---
 src/components/shortcuts-settings.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/shortcuts-settings.css b/src/components/shortcuts-settings.css
index 086c7911..1c9aa7b1 100644
--- a/src/components/shortcuts-settings.css
+++ b/src/components/shortcuts-settings.css
@@ -86,7 +86,8 @@
   transition: all 0.2s ease-out;
 }
 #shortcuts-settings-container .shortcuts-view-mode label.checked {
-  box-shadow: inset 0 0 0 3px var(--link-color);
+  box-shadow: inset 0 0 0 3px var(--link-color),
+    inset 0 0 32px var(--link-faded-color);
 }
 #shortcuts-settings-container
   .shortcuts-view-mode

From e6ef2f90648471fa5f06d02cf6b8ded741796a23 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 1 Nov 2023 14:10:56 +0800
Subject: [PATCH 040/110] Better range for header banner

---
 src/components/account-info.css | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/account-info.css b/src/components/account-info.css
index e979302a..000138fb 100644
--- a/src/components/account-info.css
+++ b/src/components/account-info.css
@@ -426,12 +426,10 @@
 
 @keyframes bye-banner {
   20% {
-    transform: translateY(0);
     filter: blur(0) opacity(1);
   }
   100% {
-    transform: translateY(8px);
-    filter: blur(16px) opacity(0.75);
+    filter: blur(16px) opacity(0.2);
   }
 }
 .sheet .account-container {
@@ -468,7 +466,8 @@
   @supports (animation-timeline: scroll()) {
     .header-banner:not(.header-is-avatar):not(:hover):not(:active) {
       animation: bye-banner 1s linear both;
-      animation-timeline: scroll();
+      animation-timeline: view();
+      animation-range: contain 100% cover 100%;
     }
   }
 

From 0cc956b8c0f1ea51b0ebbf1d9eec28d08c476982 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 1 Nov 2023 17:02:52 +0800
Subject: [PATCH 041/110] Fix initial authenticated: false bug

---
 src/utils/api.js | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/utils/api.js b/src/utils/api.js
index debc4422..8c27b3c2 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -221,10 +221,37 @@ export function api({ instance, accessToken, accountID, account } = {}) {
     }
   }
 
+  const currentAccount = getCurrentAccount();
+
   // If only instance is provided, get the masto instance for that instance
   if (instance) {
+    if (currentAccountApi?.instance === instance) {
+      return {
+        masto: currentAccountApi.masto,
+        streaming: currentAccountApi.streaming,
+        client: currentAccountApi,
+        authenticated: true,
+        instance,
+      };
+    }
+
+    if (currentAccount?.instanceURL === instance) {
+      const { accessToken } = currentAccount;
+      currentAccountApi =
+        accountApis[instance]?.[accessToken] ||
+        initClient({ instance, accessToken });
+      return {
+        masto: currentAccountApi.masto,
+        streaming: currentAccountApi.streaming,
+        client: currentAccountApi,
+        authenticated: true,
+        instance,
+      };
+    }
+
     const client = apis[instance] || initClient({ instance });
     const { masto, streaming, accessToken } = client;
+    console.log('XX', instance, accessToken);
     return {
       masto,
       streaming,
@@ -244,7 +271,6 @@ export function api({ instance, accessToken, accountID, account } = {}) {
       instance: currentAccountApi.instance,
     };
   }
-  const currentAccount = getCurrentAccount();
   if (currentAccount) {
     const { accessToken, instanceURL: instance } = currentAccount;
     currentAccountApi =
@@ -263,6 +289,7 @@ export function api({ instance, accessToken, accountID, account } = {}) {
   const client =
     apis[DEFAULT_INSTANCE] || initClient({ instance: DEFAULT_INSTANCE });
   const { masto, streaming } = client;
+  console.log('XX', { DEFAULT_INSTANCE });
   return {
     masto,
     streaming,

From ecb1be57766a8b34b16750304b36fca7faf22789 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 1 Nov 2023 18:02:54 +0800
Subject: [PATCH 042/110] Reduce extraneous fetch calls

---
 src/pages/account-statuses.jsx | 42 ++++++++++++++++++++++++++--------
 1 file changed, 32 insertions(+), 10 deletions(-)

diff --git a/src/pages/account-statuses.jsx b/src/pages/account-statuses.jsx
index 476dd0f7..eb530854 100644
--- a/src/pages/account-statuses.jsx
+++ b/src/pages/account-statuses.jsx
@@ -1,5 +1,11 @@
 import { MenuItem } from '@szhsin/react-menu';
-import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'preact/hooks';
 import { useParams, useSearchParams } from 'react-router-dom';
 import { useSnapshot } from 'valtio';
 
@@ -217,10 +223,19 @@ function AccountStatuses() {
       : 'Account posts',
     '/:instance?/a/:id',
   );
+
+  const fetchAccountPromiseRef = useRef();
+  const fetchAccount = useCallback(() => {
+    const fetchPromise =
+      fetchAccountPromiseRef.current || masto.v1.accounts.$select(id).fetch();
+    fetchAccountPromiseRef.current = fetchPromise;
+    return fetchPromise;
+  }, [id, masto]);
+
   useEffect(() => {
     (async () => {
       try {
-        const acc = await masto.v1.accounts.$select(id).fetch();
+        const acc = await fetchAccount();
         console.log(acc);
         setAccount(acc);
       } catch (e) {
@@ -240,20 +255,27 @@ function AccountStatuses() {
 
   const { displayName, acct, emojis } = account || {};
 
+  const accountInfoMemo = useMemo(() => {
+    const cachedAccount = snapStates.accounts[`${id}@${instance}`];
+    return (
+      <AccountInfo
+        instance={instance}
+        account={cachedAccount || id}
+        fetchAccount={fetchAccount}
+        authenticated={authenticated}
+        standalone
+      />
+    );
+  }, [id, instance, authenticated, fetchAccount]);
+
   const filterBarRef = useRef();
   const TimelineStart = useMemo(() => {
-    const cachedAccount = snapStates.accounts[`${id}@${instance}`];
     const filtered =
       !excludeReplies || excludeBoosts || tagged || media || !!month;
+
     return (
       <>
-        <AccountInfo
-          instance={instance}
-          account={cachedAccount || id}
-          fetchAccount={() => masto.v1.accounts.$select(id).fetch()}
-          authenticated={authenticated}
-          standalone
-        />
+        {accountInfoMemo}
         <div class="filter-bar" ref={filterBarRef}>
           {filtered ? (
             <Link

From caeeffaa72671fed17d364d7f51cb409415e28eb Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 1 Nov 2023 18:12:22 +0800
Subject: [PATCH 043/110] Extra check if container if not clickable

---
 src/components/timeline.jsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx
index 9da2b43e..a51a1bf1 100644
--- a/src/components/timeline.jsx
+++ b/src/components/timeline.jsx
@@ -226,23 +226,28 @@ function Timeline({
 
   const loadOrCheckUpdates = useCallback(
     async ({ disableIdleCheck = false } = {}) => {
-      console.log('✨ Load or check updates', {
+      const noPointers = scrollableRef.current
+        ? getComputedStyle(scrollableRef.current).pointerEvents === 'none'
+        : false;
+      console.log('✨ Load or check updates', id, {
         autoRefresh: snapStates.settings.autoRefresh,
         scrollTop: scrollableRef.current.scrollTop,
         disableIdleCheck,
         idle: window.__IDLE__,
         inBackground: inBackground(),
+        noPointers,
       });
       if (
         snapStates.settings.autoRefresh &&
         scrollableRef.current.scrollTop < 16 &&
         (disableIdleCheck || window.__IDLE__) &&
-        !inBackground()
+        !inBackground() &&
+        !noPointers
       ) {
-        console.log('✨ Load updates', snapStates.settings.autoRefresh);
+        console.log('✨ Load updates', id, snapStates.settings.autoRefresh);
         loadItems(true);
       } else {
-        console.log('✨ Check updates', snapStates.settings.autoRefresh);
+        console.log('✨ Check updates', id, snapStates.settings.autoRefresh);
         const hasUpdate = await checkForUpdates();
         if (hasUpdate) {
           console.log('✨ Has new updates', id);

From 33f807de73ad401fd0b438f1f3f0379cab484f6e Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 1 Nov 2023 19:11:54 +0800
Subject: [PATCH 044/110] More reliable back button

Uses new Navigation API
---
 src/pages/status.jsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index a0c55958..66a8aaf2 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -66,6 +66,8 @@ const scrollIntoViewOptions = {
 const STATUSES_SELECTOR =
   '.status-link:not(details:not([open]) > summary ~ *, details:not([open]) > summary ~ * *), .status-focus:not(details:not([open]) > summary ~ *, details:not([open]) > summary ~ * *)';
 
+const STATUS_URL_REGEX = /\/s\//i;
+
 function StatusPage(params) {
   const { id } = params;
   const { masto, instance } = api({ instance: params.instance });
@@ -872,6 +874,17 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
     ],
   );
 
+  const prevLocationIsStatusPage = useMemo(() => {
+    // Navigation API
+    if (navigation?.entries) {
+      const prevEntry = navigation.entries()[navigation.currentEntry.index - 1];
+      if (prevEntry?.url) {
+        return STATUS_URL_REGEX.test(prevEntry.url);
+      }
+    }
+    return STATUS_URL_REGEX.test(states.prevLocation?.pathname);
+  }, [sKey]);
+
   return (
     <div
       tabIndex="-1"
@@ -908,7 +921,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
           </div> */}
         <div class="header-grid header-grid-2">
           <h1>
-            {!!/\/s\//i.test(snapStates.prevLocation?.pathname) && (
+            {prevLocationIsStatusPage && (
               <button
                 type="button"
                 class="plain deck-back"

From 7119a787114b32eb59bd0395d8a27a02640f5c53 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 1 Nov 2023 21:31:43 +0800
Subject: [PATCH 045/110] Fallback to polling if streaming fails

---
 src/components/background-service.jsx | 89 +++++++++++++++++----------
 1 file changed, 57 insertions(+), 32 deletions(-)

diff --git a/src/components/background-service.jsx b/src/components/background-service.jsx
index 96a6bb28..0a9665c2 100644
--- a/src/components/background-service.jsx
+++ b/src/components/background-service.jsx
@@ -13,55 +13,80 @@ export default memo(function BackgroundService({ isLoggedIn }) {
   // - WebSocket to receive notifications when page is visible
   const [visible, setVisible] = useState(true);
   usePageVisibility(setVisible);
+  const checkLatestNotification = async (masto, instance, skipCheckMarkers) => {
+    if (states.notificationsLast) {
+      const notificationsIterator = masto.v1.notifications.list({
+        limit: 1,
+        sinceId: states.notificationsLast.id,
+      });
+      const { value: notifications } = await notificationsIterator.next();
+      if (notifications?.length) {
+        if (skipCheckMarkers) {
+          states.notificationsShowNew = true;
+        } else {
+          let lastReadId;
+          try {
+            const markers = await masto.v1.markers.fetch({
+              timeline: 'notifications',
+            });
+            lastReadId = markers?.notifications?.lastReadId;
+          } catch (e) {}
+          if (lastReadId) {
+            states.notificationsShowNew = notifications[0].id !== lastReadId;
+          } else {
+            states.notificationsShowNew = true;
+          }
+        }
+      }
+    }
+  };
+
   useEffect(() => {
     let sub;
+    let pollNotifications;
     if (isLoggedIn && visible) {
       const { masto, streaming, instance } = api();
       (async () => {
         // 1. Get the latest notification
-        if (states.notificationsLast) {
-          const notificationsIterator = masto.v1.notifications.list({
-            limit: 1,
-            since_id: states.notificationsLast.id,
-          });
-          const { value: notifications } = await notificationsIterator.next();
-          if (notifications?.length) {
-            let lastReadId;
-            try {
-              const markers = await masto.v1.markers.fetch({
-                timeline: 'notifications',
-              });
-              lastReadId = markers?.notifications?.lastReadId;
-            } catch (e) {}
-            if (lastReadId) {
-              states.notificationsShowNew = notifications[0].id !== lastReadId;
-            } else {
+        await checkLatestNotification(masto, instance);
+
+        let hasStreaming = false;
+        // 2. Start streaming
+        if (streaming) {
+          try {
+            hasStreaming = true;
+            sub = streaming.user.notification.subscribe();
+            console.log('🎏 Streaming notification', sub);
+            for await (const entry of sub) {
+              if (!sub) break;
+              console.log('🔔🔔 Notification entry', entry);
+              if (entry.event === 'notification') {
+                console.log('🔔🔔 Notification', entry);
+                saveStatus(entry.payload, instance, {
+                  skipThreading: true,
+                });
+              }
               states.notificationsShowNew = true;
             }
+          } catch (e) {
+            hasStreaming = false;
+            console.error(e);
           }
         }
 
-        // 2. Start streaming
-        if (streaming) {
-          sub = streaming.user.notification.subscribe();
-          console.log('🎏 Streaming notification', sub);
-          for await (const entry of sub) {
-            if (!sub) break;
-            console.log('🔔🔔 Notification entry', entry);
-            if (entry.event === 'notification') {
-              console.log('🔔🔔 Notification', entry);
-              saveStatus(entry.payload, instance, {
-                skipThreading: true,
-              });
-            }
-            states.notificationsShowNew = true;
-          }
+        if (!hasStreaming) {
+          console.log('🎏 Streaming failed, fallback to polling');
+          // Fallback to polling every minute
+          pollNotifications = setInterval(() => {
+            checkLatestNotification(masto, instance, true);
+          }, 1000 * 60);
         }
       })();
     }
     return () => {
       sub?.unsubscribe?.();
       sub = null;
+      clearInterval(pollNotifications);
     };
   }, [visible, isLoggedIn]);
 

From 616b9fcf0264eb90c9715ad61b922f4714b50e30 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 1 Nov 2023 21:56:06 +0800
Subject: [PATCH 046/110] Skip if meta/ctrl/shift/alt/middle-click

---
 src/components/status.jsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/status.jsx b/src/components/status.jsx
index 565901f6..38a79005 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -1091,6 +1091,15 @@ function Status({
               <Link
                 to={instance ? `/${instance}/s/${id}` : `/s/${id}`}
                 onClick={(e) => {
+                  if (
+                    e.metaKey ||
+                    e.ctrlKey ||
+                    e.shiftKey ||
+                    e.altKey ||
+                    e.which === 2
+                  ) {
+                    return;
+                  }
                   e.preventDefault();
                   e.stopPropagation();
                   onStatusLinkClick?.(e, status);

From 3361ffc366bf4c691c25777fe0e01ca4364c9548 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 1 Nov 2023 21:56:37 +0800
Subject: [PATCH 047/110] Further make use of Navigation API

history.length is seriously not reliable
---
 src/pages/status.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index 66a8aaf2..cd75cac6 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -177,7 +177,10 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
   const mediaParam = searchParams.get('media');
   const mediaStatusID = searchParams.get('mediaStatusID');
   const showMedia = parseInt(mediaParam, 10) > 0;
-  const firstLoad = useRef(!states.prevLocation && history.length === 1);
+  const firstLoad = useRef(
+    !states.prevLocation &&
+      (history.length === 1 || navigation?.entries?.()?.length === 1),
+  );
   const [viewMode, setViewMode] = useState(
     searchParams.get('view') || firstLoad.current ? 'full' : null,
   );

From 0c3449aba45433ba74151a4e7d79a3da3ed9c082 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 1 Nov 2023 22:26:21 +0800
Subject: [PATCH 048/110] Rearrange/code this part again

- Streaming wasn't UNSUBscribed due to the forever-stuck loop
- Make streaming start later
---
 src/components/background-service.jsx | 58 +++++++++++++++------------
 1 file changed, 33 insertions(+), 25 deletions(-)

diff --git a/src/components/background-service.jsx b/src/components/background-service.jsx
index 0a9665c2..8d5c1aa5 100644
--- a/src/components/background-service.jsx
+++ b/src/components/background-service.jsx
@@ -8,6 +8,9 @@ import states, { saveStatus } from '../utils/states';
 import useInterval from '../utils/useInterval';
 import usePageVisibility from '../utils/usePageVisibility';
 
+const STREAMING_TIMEOUT = 1000 * 3; // 3 seconds
+const POLL_INTERVAL = 1000 * 60; // 1 minute
+
 export default memo(function BackgroundService({ isLoggedIn }) {
   // Notifications service
   // - WebSocket to receive notifications when page is visible
@@ -53,39 +56,44 @@ export default memo(function BackgroundService({ isLoggedIn }) {
         let hasStreaming = false;
         // 2. Start streaming
         if (streaming) {
-          try {
-            hasStreaming = true;
-            sub = streaming.user.notification.subscribe();
-            console.log('🎏 Streaming notification', sub);
-            for await (const entry of sub) {
-              if (!sub) break;
-              console.log('🔔🔔 Notification entry', entry);
-              if (entry.event === 'notification') {
-                console.log('🔔🔔 Notification', entry);
-                saveStatus(entry.payload, instance, {
-                  skipThreading: true,
-                });
+          pollNotifications = setTimeout(() => {
+            (async () => {
+              try {
+                hasStreaming = true;
+                sub = streaming.user.notification.subscribe();
+                console.log('🎏 Streaming notification', sub);
+                for await (const entry of sub) {
+                  if (!sub) break;
+                  if (!visible) break;
+                  console.log('🔔🔔 Notification entry', entry);
+                  if (entry.event === 'notification') {
+                    console.log('🔔🔔 Notification', entry);
+                    saveStatus(entry.payload, instance, {
+                      skipThreading: true,
+                    });
+                  }
+                  states.notificationsShowNew = true;
+                }
+              } catch (e) {
+                hasStreaming = false;
+                console.error(e);
               }
-              states.notificationsShowNew = true;
-            }
-          } catch (e) {
-            hasStreaming = false;
-            console.error(e);
-          }
-        }
 
-        if (!hasStreaming) {
-          console.log('🎏 Streaming failed, fallback to polling');
-          // Fallback to polling every minute
-          pollNotifications = setInterval(() => {
-            checkLatestNotification(masto, instance, true);
-          }, 1000 * 60);
+              if (!hasStreaming) {
+                console.log('🎏 Streaming failed, fallback to polling');
+                pollNotifications = setInterval(() => {
+                  checkLatestNotification(masto, instance, true);
+                }, POLL_INTERVAL);
+              }
+            })();
+          }, STREAMING_TIMEOUT);
         }
       })();
     }
     return () => {
       sub?.unsubscribe?.();
       sub = null;
+      clearTimeout(pollNotifications);
       clearInterval(pollNotifications);
     };
   }, [visible, isLoggedIn]);

From ff7db6212dcd6c24ab6ec44ce2600ae8562b455f Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 1 Nov 2023 22:56:10 +0800
Subject: [PATCH 049/110] Bye to shine effect

It was fun.
---
 src/components/account-info.css | 37 ---------------------------------
 1 file changed, 37 deletions(-)

diff --git a/src/components/account-info.css b/src/components/account-info.css
index 000138fb..e78ec433 100644
--- a/src/components/account-info.css
+++ b/src/components/account-info.css
@@ -628,43 +628,6 @@
   }
 }
 
-@keyframes shine {
-  0% {
-    left: -100%;
-  }
-  100% {
-    left: 100%;
-  }
-}
-.timeline-start .account-container {
-  position: relative;
-  overflow: hidden;
-}
-.timeline-start .account-container:before {
-  content: '';
-  position: absolute;
-  z-index: 2;
-  width: 100%;
-  height: 100%;
-  background-image: linear-gradient(
-    100deg,
-    rgba(255, 255, 255, 0) 30%,
-    rgba(255, 255, 255, 0.25),
-    rgba(255, 255, 255, 0) 70%
-  );
-  top: 0;
-  left: -100%;
-  pointer-events: none;
-}
-@media (prefers-color-scheme: dark) {
-  .timeline-start .account-container:before {
-    opacity: 0.25;
-  }
-}
-.timeline-start .account-container:hover:before {
-  animation: shine 1s ease-in-out 1s;
-}
-
 #list-add-remove-container .list-add-remove {
   display: flex;
   flex-direction: column;

From d35d0cbe18b7541dcb51bdf76c3648d153362de0 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 1 Nov 2023 22:56:30 +0800
Subject: [PATCH 050/110] Fix active filter scrolling to wrong position on
 larger viewport

---
 src/pages/account-statuses.jsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/pages/account-statuses.jsx b/src/pages/account-statuses.jsx
index eb530854..dc57b67d 100644
--- a/src/pages/account-statuses.jsx
+++ b/src/pages/account-statuses.jsx
@@ -276,7 +276,13 @@ function AccountStatuses() {
     return (
       <>
         {accountInfoMemo}
-        <div class="filter-bar" ref={filterBarRef}>
+        <div
+          class="filter-bar"
+          ref={filterBarRef}
+          style={{
+            position: 'relative',
+          }}
+        >
           {filtered ? (
             <Link
               to={`/${instance}/a/${id}`}

From d9dab6b5eec956a3a4cb07bc6026bb7460eff2b6 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 1 Nov 2023 23:14:13 +0800
Subject: [PATCH 051/110] Ok need to check if navigation is undefined

---
 src/pages/status.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index cd75cac6..91f9ba18 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -179,7 +179,8 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
   const showMedia = parseInt(mediaParam, 10) > 0;
   const firstLoad = useRef(
     !states.prevLocation &&
-      (history.length === 1 || navigation?.entries?.()?.length === 1),
+      (history.length === 1 ||
+        ('navigation' in window && navigation?.entries?.()?.length === 1)),
   );
   const [viewMode, setViewMode] = useState(
     searchParams.get('view') || firstLoad.current ? 'full' : null,
@@ -879,7 +880,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
 
   const prevLocationIsStatusPage = useMemo(() => {
     // Navigation API
-    if (navigation?.entries) {
+    if ('navigation' in window && navigation?.entries) {
       const prevEntry = navigation.entries()[navigation.currentEntry.index - 1];
       if (prevEntry?.url) {
         return STATUS_URL_REGEX.test(prevEntry.url);

From 706f3f0cc86dc37c6a464d9a80411c0d60968e49 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 1 Nov 2023 23:41:30 +0800
Subject: [PATCH 052/110] Subtle peekaboo header for the scroll-driven

---
 src/app.css | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/app.css b/src/app.css
index a2b98c47..273d92dc 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1954,9 +1954,26 @@ meter.donut[hidden] {
 
 /* ACCOUNT STATUSES */
 
+@keyframes peekaboo-header {
+  from {
+    opacity: 0;
+    transform: translateY(10%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .header-account {
   font-size: 90% !important;
   cursor: pointer;
+
+  @supports (animation-timeline: scroll()) {
+    animation: peekaboo-header 1s linear both;
+    animation-timeline: scroll();
+    animation-range: 0 150px;
+  }
 }
 .header-account div {
   font-weight: normal;

From 030728bc93e825502121f53490a987d369e24f4e Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 2 Nov 2023 00:14:01 +0800
Subject: [PATCH 053/110] Fix .header-account used wrongly

Obviously confused by my own code
---
 src/app.css                    | 21 ++++++++++++---------
 src/cloak-mode.css             |  2 +-
 src/pages/account-statuses.jsx |  2 +-
 src/pages/hashtag.jsx          |  2 +-
 src/pages/public.jsx           |  2 +-
 src/pages/trending.jsx         |  2 +-
 6 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/app.css b/src/app.css
index 273d92dc..f8d021d5 100644
--- a/src/app.css
+++ b/src/app.css
@@ -126,6 +126,16 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   user-select: none;
   transition: transform 0.5s ease-in-out;
   user-select: none;
+
+  .header-double-lines {
+    font-size: 90% !important;
+    cursor: pointer;
+
+    div {
+      font-weight: normal;
+      color: var(--text-insignificant-color);
+    }
+  }
 }
 .deck > header[hidden] {
   display: block;
@@ -1965,20 +1975,13 @@ meter.donut[hidden] {
   }
 }
 
-.header-account {
-  font-size: 90% !important;
-  cursor: pointer;
-
-  @supports (animation-timeline: scroll()) {
+@supports (animation-timeline: scroll()) {
+  .header-account {
     animation: peekaboo-header 1s linear both;
     animation-timeline: scroll();
     animation-range: 0 150px;
   }
 }
-.header-account div {
-  font-weight: normal;
-  color: var(--text-insignificant-color);
-}
 
 /* LINK LISTS? */
 
diff --git a/src/cloak-mode.css b/src/cloak-mode.css
index f96f4999..1c6d780b 100644
--- a/src/cloak-mode.css
+++ b/src/cloak-mode.css
@@ -11,7 +11,7 @@ body.cloak,
   .status .content-compact,
   .account-container :is(header, main > *:not(.actions)),
   .account-container :is(header, main > *:not(.actions)) *,
-  .header-account,
+  .header-double-lines,
   .account-block {
     text-decoration-thickness: 1.1em;
     text-decoration-line: line-through;
diff --git a/src/pages/account-statuses.jsx b/src/pages/account-statuses.jsx
index dc57b67d..29384fb3 100644
--- a/src/pages/account-statuses.jsx
+++ b/src/pages/account-statuses.jsx
@@ -446,7 +446,7 @@ function AccountStatuses() {
       title={`${account?.acct ? '@' + account.acct : 'Posts'}`}
       titleComponent={
         <h1
-          class="header-account"
+          class="header-double-lines header-account"
           // onClick={() => {
           //   states.showAccount = {
           //     account,
diff --git a/src/pages/hashtag.jsx b/src/pages/hashtag.jsx
index 1a7fd0cb..d5f71113 100644
--- a/src/pages/hashtag.jsx
+++ b/src/pages/hashtag.jsx
@@ -135,7 +135,7 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
       title={title}
       titleComponent={
         !!instance && (
-          <h1 class="header-account">
+          <h1 class="header-double-lines">
             <b>{hashtagTitle}</b>
             <div>{instance}</div>
           </h1>
diff --git a/src/pages/public.jsx b/src/pages/public.jsx
index 2fac5b3f..c8aabf09 100644
--- a/src/pages/public.jsx
+++ b/src/pages/public.jsx
@@ -77,7 +77,7 @@ function Public({ local, columnMode, ...props }) {
       key={instance + isLocal}
       title={title}
       titleComponent={
-        <h1 class="header-account">
+        <h1 class="header-double-lines">
           <b>{isLocal ? 'Local timeline' : 'Federated timeline'}</b>
           <div>{instance}</div>
         </h1>
diff --git a/src/pages/trending.jsx b/src/pages/trending.jsx
index f0f44739..2d9b9d1a 100644
--- a/src/pages/trending.jsx
+++ b/src/pages/trending.jsx
@@ -242,7 +242,7 @@ function Trending({ columnMode, ...props }) {
       key={instance}
       title={title}
       titleComponent={
-        <h1 class="header-account">
+        <h1 class="header-double-lines">
           <b>Trending</b>
           <div>{instance}</div>
         </h1>

From bf7acb6eabf523deac7910984b3022619627a228 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 2 Nov 2023 08:00:00 +0800
Subject: [PATCH 054/110] Add more conditions for binding longpress

Should be same condition as contextmenu
---
 src/components/status.jsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/status.jsx b/src/components/status.jsx
index 38a79005..72519660 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -795,13 +795,16 @@ function Status({
   const contextMenuRef = useRef();
   const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
   const [contextMenuProps, setContextMenuProps] = useState({});
+
+  const showContextMenu = !isSizeLarge && !previewMode && !_deleted && !quoted;
+
   const isIOS =
     window.ontouchstart !== undefined &&
     /iPad|iPhone|iPod/.test(navigator.userAgent);
   // Only iOS/iPadOS browsers don't support contextmenu
   // Some comments report iPadOS might support contextmenu if a mouse is connected
   const bindLongPressContext = useLongPress(
-    isIOS
+    isIOS && showContextMenu
       ? (e) => {
           if (e.pointerType === 'mouse') return;
           // There's 'pen' too, but not sure if contextmenu event would trigger from a pen
@@ -829,8 +832,6 @@ function Status({
     },
   );
 
-  const showContextMenu = size !== 'l' && !previewMode && !_deleted && !quoted;
-
   const hotkeysEnabled = !readOnly && !previewMode;
   const rRef = useHotkeys('r', replyStatus, {
     enabled: hotkeysEnabled,

From a9c3c6fdb466f48fcd40d76d23695caae28cec1d Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 2 Nov 2023 09:36:30 +0800
Subject: [PATCH 055/110] Scroll-driven avatar shrinking

---
 src/components/account-info.css | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/components/account-info.css b/src/components/account-info.css
index e78ec433..544350a0 100644
--- a/src/components/account-info.css
+++ b/src/components/account-info.css
@@ -432,11 +432,22 @@
     filter: blur(16px) opacity(0.2);
   }
 }
+@keyframes shrink-avatar {
+  0% {
+    width: 64px;
+    height: 64px;
+  }
+  100% {
+    width: 2.5em;
+    height: 2.5em;
+  }
+}
 .sheet .account-container {
   border-radius: 16px 16px 0 0;
   overflow-x: hidden;
   max-height: 75vh;
   overscroll-behavior: none;
+  scroll-timeline: --account-scroll;
 
   header {
     padding-bottom: 16px;
@@ -469,6 +480,12 @@
       animation-timeline: view();
       animation-range: contain 100% cover 100%;
     }
+
+    header .avatar {
+      animation: shrink-avatar 1s linear both;
+      animation-timeline: --account-scroll;
+      animation-range: 0 150px;
+    }
   }
 
   main {

From 38ee094405cefcfacb621a8be9d2588a45cbb3c7 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 2 Nov 2023 10:49:52 +0800
Subject: [PATCH 056/110] Make edited modal lighter

---
 src/components/status.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/status.jsx b/src/components/status.jsx
index 72519660..e085b9bf 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -1586,6 +1586,7 @@ function Status({
       </div>
       {!!showEdited && (
         <Modal
+          class="light"
           onClick={(e) => {
             if (e.target === e.currentTarget) {
               setShowEdited(false);

From 93e19f549d0f0ee23930a12c775b6524b00f7cf5 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 2 Nov 2023 10:50:01 +0800
Subject: [PATCH 057/110] No need scroll back

---
 src/components/status.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/status.jsx b/src/components/status.jsx
index e085b9bf..d5457eaf 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -1590,7 +1590,7 @@ function Status({
           onClick={(e) => {
             if (e.target === e.currentTarget) {
               setShowEdited(false);
-              statusRef.current?.focus();
+              // statusRef.current?.focus();
             }
           }}
         >

From 0c2d79c159678964eb4004b791220b0647887d6a Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 2 Nov 2023 10:50:21 +0800
Subject: [PATCH 058/110] Make edited timestamp tab-able

---
 src/components/status.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/status.jsx b/src/components/status.jsx
index d5457eaf..12085657 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -1467,6 +1467,7 @@ function Status({
                       {' '}
                       &bull; <Icon icon="pencil" alt="Edited" />{' '}
                       <time
+                        tabIndex="0"
                         class="edited"
                         datetime={editedAtDate.toISOString()}
                         onClick={() => {

From 48b505b382c89ea0ca84c25ed0254e28d1ef1732 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 2 Nov 2023 12:59:52 +0800
Subject: [PATCH 059/110] Fix old columns mode setting wrongly applied

Deprecate it more now
---
 src/components/nav-menu.jsx           |  5 +++--
 src/components/shortcuts-settings.jsx | 27 ---------------------------
 src/components/shortcuts.jsx          |  4 ++--
 src/pages/home.jsx                    |  5 +++--
 src/utils/states.js                   |  8 +++-----
 5 files changed, 11 insertions(+), 38 deletions(-)

diff --git a/src/components/nav-menu.jsx b/src/components/nav-menu.jsx
index 2e22d532..96b9ce46 100644
--- a/src/components/nav-menu.jsx
+++ b/src/components/nav-menu.jsx
@@ -35,8 +35,9 @@ function NavMenu(props) {
   // User may choose pin or not to pin Following
   // If user doesn't pin Following, we show it in the menu
   const showFollowing =
-    (snapStates.settings.shortcutsColumnsMode ||
-      snapStates.settings.shortcutsViewMode === 'multi-column') &&
+    (snapStates.settings.shortcutsViewMode === 'multi-column' ||
+      (!snapStates.settings.shortcutsViewMode &&
+        snapStates.settings.shortcutsColumnsMode)) &&
     !snapStates.shortcuts.find((pin) => pin.type === 'following');
 
   const bindLongPress = useLongPress(
diff --git a/src/components/shortcuts-settings.jsx b/src/components/shortcuts-settings.jsx
index 1d551c6c..b3ce27f5 100644
--- a/src/components/shortcuts-settings.jsx
+++ b/src/components/shortcuts-settings.jsx
@@ -300,33 +300,6 @@ function ShortcutsSettings({ onClose }) {
             );
           })}
         </div>
-        {/* <select
-              value={snapStates.settings.shortcutsViewMode || 'float-button'}
-              onChange={(e) => {
-                states.settings.shortcutsViewMode = e.target.value;
-              }}
-            >
-              <option value="float-button">Floating button</option>
-              <option value="multi-column">Multi-column</option>
-              <option value="tab-menu-bar">Tab/Menu bar </option>
-            </select> */}
-        {/* <p>
-          <details>
-            <summary class="insignificant">
-              Experimental Multi-column mode
-            </summary>
-            <label>
-              <input
-                type="checkbox"
-                checked={snapStates.settings.shortcutsColumnsMode}
-                onChange={(e) => {
-                  states.settings.shortcutsColumnsMode = e.target.checked;
-                }}
-              />{' '}
-              Show shortcuts in multiple columns instead of the floating button.
-            </label>
-          </details>
-        </p> */}
         {shortcuts.length > 0 ? (
           <ol class="shortcuts-list" ref={shortcutsListParent}>
             {shortcuts.filter(Boolean).map((shortcut, i) => {
diff --git a/src/components/shortcuts.jsx b/src/components/shortcuts.jsx
index b45a2354..08bbcb94 100644
--- a/src/components/shortcuts.jsx
+++ b/src/components/shortcuts.jsx
@@ -25,8 +25,8 @@ function Shortcuts() {
     return null;
   }
   if (
-    settings.shortcutsColumnsMode ||
-    settings.shortcutsViewMode === 'multi-column'
+    settings.shortcutsViewMode === 'multi-column' ||
+    (!settings.shortcutsViewMode && settings.shortcutsColumnsMode)
   ) {
     return null;
   }
diff --git a/src/pages/home.jsx b/src/pages/home.jsx
index 35176112..fe4503cd 100644
--- a/src/pages/home.jsx
+++ b/src/pages/home.jsx
@@ -35,8 +35,9 @@ function Home() {
 
   return (
     <>
-      {(snapStates.settings.shortcutsColumnsMode ||
-        snapStates.settings.shortcutsViewMode === 'multi-column') &&
+      {(snapStates.settings.shortcutsViewMode === 'multi-column' ||
+        (!snapStates.settings.shortcutsViewMode &&
+          snapStates.settings.shortcutsColumnsMode)) &&
       !!snapStates.shortcuts?.length ? (
         <Columns />
       ) : (
diff --git a/src/utils/states.js b/src/utils/states.js
index 45023621..2f295715 100644
--- a/src/utils/states.js
+++ b/src/utils/states.js
@@ -71,8 +71,9 @@ export function initStates() {
     store.account.get('settings-autoRefresh') ?? false;
   states.settings.shortcutsViewMode =
     store.account.get('settings-shortcutsViewMode') ?? null;
-  states.settings.shortcutsColumnsMode =
-    store.account.get('settings-shortcutsColumnsMode') ?? false;
+  if (store.account.get('settings-shortcutsColumnsMode')) {
+    states.settings.shortcutsColumnsMode = true;
+  }
   states.settings.boostsCarousel =
     store.account.get('settings-boostsCarousel') ?? true;
   states.settings.contentTranslation =
@@ -99,9 +100,6 @@ subscribe(states, (changes) => {
     if (path.join('.') === 'settings.boostsCarousel') {
       store.account.set('settings-boostsCarousel', !!value);
     }
-    if (path.join('.') === 'settings.shortcutsColumnsMode') {
-      store.account.set('settings-shortcutsColumnsMode', !!value);
-    }
     if (path.join('.') === 'settings.shortcutsViewMode') {
       store.account.set('settings-shortcutsViewMode', value);
     }

From fd7caca0393055cf436fd168ae400d8680c76b8e Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 2 Nov 2023 13:00:07 +0800
Subject: [PATCH 060/110] text-wrap: pretty attempt again

---
 src/components/account-info.css      | 1 +
 src/components/media-alt-modal.jsx   | 1 +
 src/components/status.css            | 3 +++
 src/components/translation-block.css | 1 +
 src/pages/notifications.css          | 4 +++-
 5 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/account-info.css b/src/components/account-info.css
index 544350a0..2d7c328e 100644
--- a/src/components/account-info.css
+++ b/src/components/account-info.css
@@ -254,6 +254,7 @@
 .account-container .note {
   font-size: 95%;
   line-height: 1.4;
+  text-wrap: pretty;
 }
 .account-container .note:not(:has(p)):not(:empty) {
   /* Some notes don't have <p> tags, so we need to add some padding */
diff --git a/src/components/media-alt-modal.jsx b/src/components/media-alt-modal.jsx
index a45a9c83..58908013 100644
--- a/src/components/media-alt-modal.jsx
+++ b/src/components/media-alt-modal.jsx
@@ -57,6 +57,7 @@ export default function MediaAltModal({ alt, lang, onClose }) {
         <p
           style={{
             whiteSpace: 'pre-wrap',
+            textWrap: 'pretty',
           }}
         >
           {alt}
diff --git a/src/components/status.css b/src/components/status.css
index 39e5e195..eb54ac6c 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -603,6 +603,7 @@
   margin-block: min(0.75em, 12px);
   white-space: pre-wrap;
   tab-size: 2;
+  text-wrap: pretty;
 }
 .status .content p:first-child {
   margin-block-start: 0;
@@ -726,6 +727,7 @@
       white-space: pre-line;
       flex-basis: 15em;
       flex-grow: 1;
+      text-wrap: pretty;
     }
   }
 
@@ -1203,6 +1205,7 @@ a:focus-visible .card img {
   box-orient: vertical;
   -webkit-line-clamp: 2;
   line-clamp: 2;
+  text-wrap: balance;
 }
 .card .meta {
   font-size: smaller;
diff --git a/src/components/translation-block.css b/src/components/translation-block.css
index 375a3afe..a1c83b9c 100644
--- a/src/components/translation-block.css
+++ b/src/components/translation-block.css
@@ -83,6 +83,7 @@
 .status-translation-block .translated-block output {
   display: block;
   margin-top: 0.75em;
+  text-wrap: pretty;
 }
 .status-translation-block
   .translated-block
diff --git a/src/pages/notifications.css b/src/pages/notifications.css
index 337812bc..a12becd3 100644
--- a/src/pages/notifications.css
+++ b/src/pages/notifications.css
@@ -162,9 +162,10 @@
   flex-grow: 1;
   min-width: 0;
 }
-.notification-content p:first-child {
+.notification-content > p:first-child {
   margin-top: 0;
   margin-bottom: 8px;
+  text-wrap: pretty;
 }
 
 .notification-group-statuses {
@@ -407,6 +408,7 @@
   margin-block: min(0.75em, 12px);
   white-space: pre-wrap;
   tab-size: 2;
+  text-wrap: pretty;
 }
 .announcements .announcement-reactions:not(:hidden) {
   display: flex;

From ab5a1150842030bdea08dfa8043ec9b9c0cd3c77 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 2 Nov 2023 13:38:39 +0800
Subject: [PATCH 061/110] Replace semver with compare-versions

Also, semver wasn't even in package.json, it worked because a lot of deps use it
---
 package-lock.json     | 11 +++++++++++
 package.json          |  1 +
 src/utils/supports.js |  2 +-
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index f0547e11..80bb36af 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "@justinribeiro/lite-youtube": "~1.5.0",
         "@szhsin/react-menu": "~4.1.0",
         "@uidotdev/usehooks": "~2.4.1",
+        "compare-versions": "~6.1.0",
         "dayjs": "~1.11.10",
         "dayjs-twitter": "~0.5.0",
         "fast-blurhash": "~1.1.2",
@@ -3870,6 +3871,11 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/compare-versions": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-6.1.0.tgz",
+      "integrity": "sha512-LNZQXhqUvqUTotpZ00qLSaify3b4VFD588aRr8MKFw4CMUr98ytzCW5wDH5qx/DEY5kCDXcbcRuCqL0szEf2tg=="
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -10185,6 +10191,11 @@
       "integrity": "sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==",
       "dev": true
     },
+    "compare-versions": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-6.1.0.tgz",
+      "integrity": "sha512-LNZQXhqUvqUTotpZ00qLSaify3b4VFD588aRr8MKFw4CMUr98ytzCW5wDH5qx/DEY5kCDXcbcRuCqL0szEf2tg=="
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
diff --git a/package.json b/package.json
index 8906965a..0d26897a 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@justinribeiro/lite-youtube": "~1.5.0",
     "@szhsin/react-menu": "~4.1.0",
     "@uidotdev/usehooks": "~2.4.1",
+    "compare-versions": "~6.1.0",
     "dayjs": "~1.11.10",
     "dayjs-twitter": "~0.5.0",
     "fast-blurhash": "~1.1.2",
diff --git a/src/utils/supports.js b/src/utils/supports.js
index 5f7e8163..02b1a496 100644
--- a/src/utils/supports.js
+++ b/src/utils/supports.js
@@ -1,4 +1,4 @@
-import { satisfies } from 'semver';
+import { satisfies } from 'compare-versions';
 
 import features from '../data/features.json';
 

From 6b3602c6ae43b118af4ef814e6df948aa2efd3c6 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 2 Nov 2023 13:44:32 +0800
Subject: [PATCH 062/110] Remove debugging console logs

---
 src/utils/api.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/utils/api.js b/src/utils/api.js
index 8c27b3c2..2d101915 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -251,7 +251,6 @@ export function api({ instance, accessToken, accountID, account } = {}) {
 
     const client = apis[instance] || initClient({ instance });
     const { masto, streaming, accessToken } = client;
-    console.log('XX', instance, accessToken);
     return {
       masto,
       streaming,
@@ -289,7 +288,6 @@ export function api({ instance, accessToken, accountID, account } = {}) {
   const client =
     apis[DEFAULT_INSTANCE] || initClient({ instance: DEFAULT_INSTANCE });
   const { masto, streaming } = client;
-  console.log('XX', { DEFAULT_INSTANCE });
   return {
     masto,
     streaming,

From 490d776a705424d84b77a4f66b011a5488244179 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 2 Nov 2023 17:38:22 +0800
Subject: [PATCH 063/110] Remove unused variable

---
 src/components/account-info.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/account-info.css b/src/components/account-info.css
index 2d7c328e..9c1c74f8 100644
--- a/src/components/account-info.css
+++ b/src/components/account-info.css
@@ -455,7 +455,6 @@
     position: sticky;
     top: 0;
     z-index: 2;
-    /* --bg-color: red; */
     background-image: linear-gradient(
       to bottom,
       transparent 30%,

From 131b91e2c17bf2a3bea465acbd198eafe770ec74 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 2 Nov 2023 17:38:38 +0800
Subject: [PATCH 064/110] Clamp 3 lines

---
 src/components/account-block.jsx | 2 +-
 src/components/account-info.css  | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/account-block.jsx b/src/components/account-block.jsx
index 0b7e9cea..13c680be 100644
--- a/src/components/account-block.jsx
+++ b/src/components/account-block.jsx
@@ -82,7 +82,7 @@ function AccountBlock({
       }}
     >
       <Avatar url={avatar} size={avatarSize} squircle={bot} />
-      <span>
+      <span class="account-block-content">
         {!hideDisplayName && (
           <>
             {displayName ? (
diff --git a/src/components/account-info.css b/src/components/account-info.css
index 9c1c74f8..5477f261 100644
--- a/src/components/account-info.css
+++ b/src/components/account-info.css
@@ -462,6 +462,14 @@
       var(--bg-color) calc(100% - 8px),
       transparent
     );
+
+    .account-block-content {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      line-clamp: 3;
+      -webkit-line-clamp: 3;
+    }
   }
 
   .faux-header-bg {

From 05ab42684b98f6d5fd20dd7c424f228654b3e54b Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 2 Nov 2023 17:39:42 +0800
Subject: [PATCH 065/110] Another scroll-driven initiative

---
 src/components/account-info.css | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/components/account-info.css b/src/components/account-info.css
index 5477f261..c33e68cf 100644
--- a/src/components/account-info.css
+++ b/src/components/account-info.css
@@ -433,6 +433,16 @@
     filter: blur(16px) opacity(0.2);
   }
 }
+@keyframes surface-header {
+  0% {
+    border-bottom-color: transparent;
+    box-shadow: none;
+  }
+  100% {
+    border-bottom-color: var(--outline-color);
+    box-shadow: 0 8px 16px -8px var(--drop-shadow-color);
+  }
+}
 @keyframes shrink-avatar {
   0% {
     width: 64px;
@@ -489,6 +499,18 @@
       animation-range: contain 100% cover 100%;
     }
 
+    header {
+      background-image: linear-gradient(
+        to bottom,
+        transparent 30%,
+        var(--bg-color) var(--banner-overlap)
+      );
+      border-bottom: 1px solid transparent;
+      animation: surface-header 1s linear both;
+      animation-timeline: --account-scroll;
+      animation-range: 0 150px;
+    }
+
     header .avatar {
       animation: shrink-avatar 1s linear both;
       animation-timeline: --account-scroll;

From 7f327e5980219e794d8a552c332248f11359440f Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 2 Nov 2023 19:44:53 +0800
Subject: [PATCH 066/110] Fix same key bug

---
 src/pages/account-statuses.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/account-statuses.jsx b/src/pages/account-statuses.jsx
index 29384fb3..61de5c09 100644
--- a/src/pages/account-statuses.jsx
+++ b/src/pages/account-statuses.jsx
@@ -159,8 +159,8 @@ function AccountStatuses() {
         .next();
       if (pinnedStatuses?.length && !tagged && !media) {
         pinnedStatuses.forEach((status) => {
-          status._pinned = true;
           saveStatus(status, instance);
+          status._pinned = true;
         });
         if (pinnedStatuses.length >= 3) {
           const pinnedStatusesIds = pinnedStatuses.map((status) => status.id);

From 89f82707d68f0684704f3b4b7e7fbaca8e1b5026 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 2 Nov 2023 20:13:00 +0800
Subject: [PATCH 067/110] Let's try this out

Sometimes the logic gets confusing
---
 src/pages/notifications.jsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx
index 8cf6e357..5ce177ff 100644
--- a/src/pages/notifications.jsx
+++ b/src/pages/notifications.jsx
@@ -54,8 +54,6 @@ function Notifications({ columnMode }) {
 
   const notificationsIterator = useRef();
   async function fetchNotifications(firstLoad) {
-    states.notificationsShowNew = false; // Hide "new notifications" button early
-
     if (firstLoad || !notificationsIterator.current) {
       // Reset iterator
       notificationsIterator.current = masto.v1.notifications.list({
@@ -176,6 +174,8 @@ function Notifications({ columnMode }) {
   //   }
   // }, [nearReachEnd, showMore]);
 
+  const [showNew, setShowNew] = useState(false);
+
   const loadUpdates = useCallback(
     ({ disableIdleCheck = false } = {}) => {
       console.log('✨ Load updates', {
@@ -195,6 +195,8 @@ function Notifications({ columnMode }) {
         uiState !== 'loading'
       ) {
         loadNotifications(true);
+      } else {
+        setShowNew(snapStates.notificationsShowNew);
       }
     },
     [snapStates.notificationsShowNew, snapStates.settings.autoRefresh, uiState],
@@ -291,7 +293,7 @@ function Notifications({ columnMode }) {
               {/* <Loader hidden={uiState !== 'loading'} /> */}
             </div>
           </div>
-          {snapStates.notificationsShowNew && uiState !== 'loading' && (
+          {showNew && uiState !== 'loading' && (
             <button
               class="updates-button shiny-pill"
               type="button"

From fa9e0059c00ee33ef2f2be3b1b9b12da7d8a82bb Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 2 Nov 2023 20:24:52 +0800
Subject: [PATCH 068/110] Hmm, need a flow chart for this srsly

---
 src/pages/notifications.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx
index 5ce177ff..94222dd2 100644
--- a/src/pages/notifications.jsx
+++ b/src/pages/notifications.jsx
@@ -90,6 +90,7 @@ function Notifications({ columnMode }) {
       }
     }
 
+    states.notificationsShowNew = false;
     states.notificationsLastFetchTime = Date.now();
     return allNotifications;
   }

From bd798865d808f0184bdd917dc9ce6762df56223f Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 3 Nov 2023 00:41:28 +0800
Subject: [PATCH 069/110] Fix .media class can clash with carousel's .media

---
 src/components/status.css | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/status.css b/src/components/status.css
index eb54ac6c..162f9d28 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -848,7 +848,7 @@
   object-fit: cover;
   vertical-align: middle;
 }
-.media {
+:is(.status, .media-post) .media {
   cursor: pointer;
 
   &[data-has-alt] {
@@ -887,7 +887,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
   position: relative;
   background-clip: padding-box;
 }
-:is(.media-video, .media-audio) .media-play {
+:is(.status, .media-post) :is(.media-video, .media-audio) .media-play {
   pointer-events: none;
   width: 44px;
   height: 44px;
@@ -904,10 +904,13 @@ body:has(#modal-container .carousel) .status .media img:hover {
   border-radius: 70px;
   transition: transform 0.2s ease-in-out;
 }
-:is(.media-video, .media-audio):hover:not(:active) .media-play {
+:is(.status, .media-post)
+  :is(.media-video, .media-audio):hover:not(:active)
+  .media-play {
   transform: translate(-50%, -50%) scale(1.1);
 }
-:is(.media-video, .media-audio)[data-formatted-duration]:after {
+:is(.status, .media-post)
+  :is(.media-video, .media-audio)[data-formatted-duration]:after {
   font-size: 12px;
   pointer-events: none;
   content: attr(data-formatted-duration);
@@ -920,10 +923,10 @@ body:has(#modal-container .carousel) .status .media img:hover {
   border-radius: 4px;
   padding: 0 4px;
 }
-.media-audio[data-formatted-duration]:after {
+:is(.status, .media-post) .media-audio[data-formatted-duration]:after {
   content: '♬ ' attr(data-formatted-duration);
 }
-.media-gif[data-label]:not(:hover):after {
+:is(.status, .media-post) .media-gif[data-label]:not(:hover):after {
   font-size: 12px;
   font-weight: bold;
   pointer-events: none;
@@ -955,7 +958,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
 .status .media-audio audio {
   width: 100%;
 } */
-.media-audio {
+:is(.status, .media-post) .media-audio {
   width: 100%;
   height: 100%;
   min-height: 88px;

From e1434e15d9302425979939f31760ca08c8ecc026 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 3 Nov 2023 11:26:20 +0800
Subject: [PATCH 070/110] Fix wrong attr() being used lolol

---
 src/components/media-post.css | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/media-post.css b/src/components/media-post.css
index 750e0e1b..48d0ce67 100644
--- a/src/components/media-post.css
+++ b/src/components/media-post.css
@@ -10,10 +10,16 @@
     animation: none !important;
   }
 
+  &.filtered[data-filtered-text]:before {
+    content: attr(data-filtered-text);
+  }
+  &.has-spoiler[data-spoiler-text]:before {
+    content: attr(data-spoiler-text);
+  }
+
   &.filtered[data-filtered-text]:before,
   &.has-spoiler[data-spoiler-text]:before {
     pointer-events: none;
-    content: attr(data-spoiler-text);
     position: absolute;
     top: 0;
     left: 0;

From 1cdc4ebbe8fb4fd3064ca8565b1e6b1cc72cc502 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 3 Nov 2023 11:27:16 +0800
Subject: [PATCH 071/110] Apply "public" filters for hashtag timeline

---
 src/pages/hashtag.jsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/pages/hashtag.jsx b/src/pages/hashtag.jsx
index d5f71113..977a83c6 100644
--- a/src/pages/hashtag.jsx
+++ b/src/pages/hashtag.jsx
@@ -14,6 +14,7 @@ import MenuConfirm from '../components/menu-confirm';
 import { SHORTCUTS_LIMIT } from '../components/shortcuts-settings';
 import Timeline from '../components/timeline';
 import { api } from '../utils/api';
+import { filteredItems } from '../utils/filters';
 import showToast from '../utils/show-toast';
 import states from '../utils/states';
 import { saveStatus } from '../utils/states';
@@ -71,12 +72,13 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
         onlyMedia: media,
       })
       .next();
-    const { value } = results;
+    let { value } = results;
     if (value?.length) {
       if (firstLoad) {
         latestItem.current = value[0].id;
       }
 
+      value = filteredItems(value, 'public');
       value.forEach((item) => {
         saveStatus(item, instance, {
           skipThreading: media, // If media view, no need to form threads
@@ -102,7 +104,8 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
           onlyMedia: media,
         })
         .next();
-      const { value } = results;
+      let { value } = results;
+      value = filteredItems(value, 'public');
       if (value?.length) {
         return true;
       }
@@ -150,6 +153,7 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
       useItemID
       view={media ? 'media' : undefined}
       refresh={media}
+      allowFilters
       headerEnd={
         <Menu2
           portal

From 0bc1b598c3795f9d888d3c1e632faa3ef3c8c81f Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 3 Nov 2023 21:45:31 +0800
Subject: [PATCH 072/110] Breaking: rewrote filters implementation

---
 src/components/media-post.jsx |  31 ++-
 src/components/status.jsx     |  33 ++--
 src/components/timeline.jsx   | 360 ++++++++++++++++++----------------
 src/pages/following.jsx       |   5 +-
 src/pages/hashtag.jsx         |   5 +-
 src/pages/list.jsx            |   5 +-
 src/pages/notifications.jsx   |   1 +
 src/pages/public.jsx          |   5 +-
 src/pages/trending.jsx        |   5 +-
 src/utils/filter-context.js   |   4 +
 src/utils/filters.jsx         |  34 +++-
 src/utils/mem.js              |   4 +-
 src/utils/states.js           |   2 +-
 13 files changed, 287 insertions(+), 207 deletions(-)
 create mode 100644 src/utils/filter-context.js

diff --git a/src/components/media-post.jsx b/src/components/media-post.jsx
index c208896c..6a5a30aa 100644
--- a/src/components/media-post.jsx
+++ b/src/components/media-post.jsx
@@ -1,9 +1,13 @@
 import './media-post.css';
 
 import { memo } from 'preact/compat';
+import { useContext, useMemo } from 'preact/hooks';
 import { useSnapshot } from 'valtio';
 
+import FilterContext from '../utils/filter-context';
+import { isFiltered } from '../utils/filters';
 import states, { statusKey } from '../utils/states';
+import store from '../utils/store';
 
 import Media from './media';
 
@@ -13,7 +17,7 @@ function MediaPost({
   status,
   instance,
   parent,
-  allowFilters,
+  // allowFilters,
   onMediaClick,
 }) {
   let sKey = statusKey(statusID, instance);
@@ -68,7 +72,7 @@ function MediaPost({
     // Non-API props
     _deleted,
     _pinned,
-    _filtered,
+    // _filtered,
   } = status;
 
   if (!mediaAttachments?.length) {
@@ -83,6 +87,20 @@ function MediaPost({
     }
   };
 
+  const currentAccount = useMemo(() => {
+    return store.session.get('currentAccount');
+  }, []);
+  const isSelf = useMemo(() => {
+    return currentAccount && currentAccount === accountId;
+  }, [accountId, currentAccount]);
+
+  const filterContext = useContext(FilterContext);
+  const filterInfo = !isSelf && isFiltered(filtered, filterContext);
+
+  if (filterInfo?.action === 'hide') {
+    return null;
+  }
+
   console.debug('RENDER Media post', id, status?.account.displayName);
 
   // const readingExpandSpoilers = useMemo(() => {
@@ -95,6 +113,7 @@ function MediaPost({
 
   return mediaAttachments.map((media, i) => {
     const mediaKey = `${sKey}-${media.id}`;
+    const filterTitleStr = filterInfo?.titlesStr;
     return (
       <Parent
         onMouseEnter={debugHover}
@@ -102,10 +121,14 @@ function MediaPost({
         data-spoiler-text={
           spoilerText || (sensitive ? 'Sensitive media' : undefined)
         }
-        data-filtered-text={_filtered ? 'Filtered' : undefined}
+        data-filtered-text={
+          filterInfo
+            ? `Filtered${filterTitleStr ? `: ${filterTitleStr}` : ''}`
+            : undefined
+        }
         class={`
           media-post
-          ${allowFilters && _filtered ? 'filtered' : ''}
+          ${filterInfo ? 'filtered' : ''}
           ${hasSpoiler ? 'has-spoiler' : ''}
         `}
       >
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 12085657..105d3804 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -13,6 +13,7 @@ import pThrottle from 'p-throttle';
 import { memo } from 'preact/compat';
 import {
   useCallback,
+  useContext,
   useEffect,
   useMemo,
   useRef,
@@ -34,6 +35,8 @@ import Poll from '../components/poll';
 import { api } from '../utils/api';
 import emojifyText from '../utils/emojify-text';
 import enhanceContent from '../utils/enhance-content';
+import FilterContext from '../utils/filter-context';
+import { isFiltered } from '../utils/filters';
 import getTranslateTargetLanguage from '../utils/get-translate-target-language';
 import getHTMLText from '../utils/getHTMLText';
 import handleContentLinks from '../utils/handle-content-links';
@@ -90,7 +93,7 @@ function Status({
   enableTranslate,
   forceTranslate: _forceTranslate,
   previewMode,
-  allowFilters,
+  // allowFilters,
   onMediaClick,
   quoted,
   onStatusLinkClick = () => {},
@@ -166,9 +169,24 @@ function Status({
     // Non-API props
     _deleted,
     _pinned,
-    _filtered,
+    // _filtered,
   } = status;
 
+  const currentAccount = useMemo(() => {
+    return store.session.get('currentAccount');
+  }, []);
+  const isSelf = useMemo(() => {
+    return currentAccount && currentAccount === accountId;
+  }, [accountId, currentAccount]);
+
+  const filterContext = useContext(FilterContext);
+  const filterInfo =
+    !isSelf && !readOnly && !previewMode && isFiltered(filtered, filterContext);
+
+  if (filterInfo?.action === 'hide') {
+    return null;
+  }
+
   console.debug('RENDER Status', id, status?.account.displayName, quoted);
 
   const debugHover = (e) => {
@@ -179,11 +197,11 @@ function Status({
     }
   };
 
-  if (allowFilters && size !== 'l' && _filtered) {
+  if (/*allowFilters && */ size !== 'l' && filterInfo) {
     return (
       <FilteredStatus
         status={status}
-        filterInfo={_filtered}
+        filterInfo={filterInfo}
         instance={instance}
         containerProps={{
           onMouseEnter: debugHover,
@@ -195,13 +213,6 @@ function Status({
   const createdAtDate = new Date(createdAt);
   const editedAtDate = new Date(editedAt);
 
-  const currentAccount = useMemo(() => {
-    return store.session.get('currentAccount');
-  }, []);
-  const isSelf = useMemo(() => {
-    return currentAccount && currentAccount === accountId;
-  }, [accountId, currentAccount]);
-
   let inReplyToAccountRef = mentions?.find(
     (mention) => mention.id === inReplyToAccountId,
   );
diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx
index a51a1bf1..fa24d15b 100644
--- a/src/components/timeline.jsx
+++ b/src/components/timeline.jsx
@@ -4,6 +4,8 @@ import { InView } from 'react-intersection-observer';
 import { useDebouncedCallback } from 'use-debounce';
 import { useSnapshot } from 'valtio';
 
+import FilterContext from '../utils/filter-context';
+import { isFiltered } from '../utils/filters';
 import states, { statusKey } from '../utils/states';
 import statusPeek from '../utils/status-peek';
 import { groupBoosts, groupContext } from '../utils/timeline-utils';
@@ -13,7 +15,6 @@ import useScroll from '../utils/useScroll';
 
 import Icon from './icon';
 import Link from './link';
-import Media from './media';
 import MediaPost from './media-post';
 import NavMenu from './nav-menu';
 import Status from './status';
@@ -39,9 +40,10 @@ function Timeline({
   headerStart,
   headerEnd,
   timelineStart,
-  allowFilters,
+  // allowFilters,
   refresh,
   view,
+  filterContext,
 }) {
   const snapStates = useSnapshot(states);
   const [items, setItems] = useState([]);
@@ -285,172 +287,182 @@ function Timeline({
   const hiddenUI = scrollDirection === 'end' && !nearReachStart;
 
   return (
-    <div
-      id={`${id}-page`}
-      class="deck-container"
-      ref={(node) => {
-        scrollableRef.current = node;
-        jRef.current = node;
-        kRef.current = node;
-        oRef.current = node;
-      }}
-      tabIndex="-1"
-    >
-      <div class="timeline-deck deck">
-        <header
-          hidden={hiddenUI}
-          onClick={(e) => {
-            if (!e.target.closest('a, button')) {
-              scrollableRef.current?.scrollTo({
-                top: 0,
-                behavior: 'smooth',
-              });
-            }
-          }}
-          onDblClick={(e) => {
-            if (!e.target.closest('a, button')) {
-              loadItems(true);
-            }
-          }}
-          class={uiState === 'loading' ? 'loading' : ''}
-        >
-          <div class="header-grid">
-            <div class="header-side">
-              <NavMenu />
-              {headerStart !== null && headerStart !== undefined ? (
-                headerStart
-              ) : (
-                <Link to="/" class="button plain home-button">
-                  <Icon icon="home" size="l" />
-                </Link>
-              )}
-            </div>
-            {title && (titleComponent ? titleComponent : <h1>{title}</h1>)}
-            <div class="header-side">
-              {/* <Loader hidden={uiState !== 'loading'} /> */}
-              {!!headerEnd && headerEnd}
-            </div>
-          </div>
-          {items.length > 0 &&
-            uiState !== 'loading' &&
-            !hiddenUI &&
-            showNew && (
-              <button
-                class="updates-button shiny-pill"
-                type="button"
-                onClick={() => {
-                  loadItems(true);
-                  scrollableRef.current?.scrollTo({
-                    top: 0,
-                    behavior: 'smooth',
-                  });
-                }}
-              >
-                <Icon icon="arrow-up" /> New posts
-              </button>
-            )}
-        </header>
-        {!!timelineStart && (
-          <div
-            class={`timeline-start ${uiState === 'loading' ? 'loading' : ''}`}
+    <FilterContext.Provider value={filterContext}>
+      <div
+        id={`${id}-page`}
+        class="deck-container"
+        ref={(node) => {
+          scrollableRef.current = node;
+          jRef.current = node;
+          kRef.current = node;
+          oRef.current = node;
+        }}
+        tabIndex="-1"
+      >
+        <div class="timeline-deck deck">
+          <header
+            hidden={hiddenUI}
+            onClick={(e) => {
+              if (!e.target.closest('a, button')) {
+                scrollableRef.current?.scrollTo({
+                  top: 0,
+                  behavior: 'smooth',
+                });
+              }
+            }}
+            onDblClick={(e) => {
+              if (!e.target.closest('a, button')) {
+                loadItems(true);
+              }
+            }}
+            class={uiState === 'loading' ? 'loading' : ''}
           >
-            {timelineStart}
-          </div>
-        )}
-        {!!items.length ? (
-          <>
-            <ul class={`timeline ${view ? `timeline-${view}` : ''}`}>
-              {items.map((status) => (
-                <TimelineItem
-                  status={status}
-                  instance={instance}
-                  useItemID={useItemID}
-                  allowFilters={allowFilters}
-                  key={status.id + status?._pinned}
-                  view={view}
-                />
-              ))}
-              {showMore &&
-                uiState === 'loading' &&
-                (view === 'media' ? null : (
-                  <>
-                    <li
-                      style={{
-                        height: '20vh',
-                      }}
-                    >
-                      <Status skeleton />
-                    </li>
-                    <li
-                      style={{
-                        height: '25vh',
-                      }}
-                    >
-                      <Status skeleton />
-                    </li>
-                  </>
-                ))}
-            </ul>
-            {uiState === 'default' &&
-              (showMore ? (
-                <InView
-                  onChange={(inView) => {
-                    if (inView) {
-                      loadItems();
-                    }
+            <div class="header-grid">
+              <div class="header-side">
+                <NavMenu />
+                {headerStart !== null && headerStart !== undefined ? (
+                  headerStart
+                ) : (
+                  <Link to="/" class="button plain home-button">
+                    <Icon icon="home" size="l" />
+                  </Link>
+                )}
+              </div>
+              {title && (titleComponent ? titleComponent : <h1>{title}</h1>)}
+              <div class="header-side">
+                {/* <Loader hidden={uiState !== 'loading'} /> */}
+                {!!headerEnd && headerEnd}
+              </div>
+            </div>
+            {items.length > 0 &&
+              uiState !== 'loading' &&
+              !hiddenUI &&
+              showNew && (
+                <button
+                  class="updates-button shiny-pill"
+                  type="button"
+                  onClick={() => {
+                    loadItems(true);
+                    scrollableRef.current?.scrollTo({
+                      top: 0,
+                      behavior: 'smooth',
+                    });
                   }}
                 >
-                  <button
-                    type="button"
-                    class="plain block"
-                    onClick={() => loadItems()}
-                    style={{ marginBlockEnd: '6em' }}
-                  >
-                    Show more&hellip;
-                  </button>
-                </InView>
-              ) : (
-                <p class="ui-state insignificant">The end.</p>
-              ))}
-          </>
-        ) : uiState === 'loading' ? (
-          <ul class="timeline">
-            {Array.from({ length: 5 }).map((_, i) =>
-              view === 'media' ? (
-                <div
-                  style={{
-                    height: '50vh',
-                  }}
-                />
-              ) : (
-                <li key={i}>
-                  <Status skeleton />
-                </li>
-              ),
-            )}
-          </ul>
-        ) : (
-          uiState !== 'error' && <p class="ui-state">{emptyText}</p>
-        )}
-        {uiState === 'error' && (
-          <p class="ui-state">
-            {errorText}
-            <br />
-            <br />
-            <button
-              class="button plain"
-              onClick={() => loadItems(!items.length)}
+                  <Icon icon="arrow-up" /> New posts
+                </button>
+              )}
+          </header>
+          {!!timelineStart && (
+            <div
+              class={`timeline-start ${uiState === 'loading' ? 'loading' : ''}`}
             >
-              Try again
-            </button>
-          </p>
-        )}
+              {timelineStart}
+            </div>
+          )}
+          {!!items.length ? (
+            <>
+              <ul class={`timeline ${view ? `timeline-${view}` : ''}`}>
+                {items.map((status) => (
+                  <TimelineItem
+                    status={status}
+                    instance={instance}
+                    useItemID={useItemID}
+                    // allowFilters={allowFilters}
+                    filterContext={filterContext}
+                    key={status.id + status?._pinned}
+                    view={view}
+                  />
+                ))}
+                {showMore &&
+                  uiState === 'loading' &&
+                  (view === 'media' ? null : (
+                    <>
+                      <li
+                        style={{
+                          height: '20vh',
+                        }}
+                      >
+                        <Status skeleton />
+                      </li>
+                      <li
+                        style={{
+                          height: '25vh',
+                        }}
+                      >
+                        <Status skeleton />
+                      </li>
+                    </>
+                  ))}
+              </ul>
+              {uiState === 'default' &&
+                (showMore ? (
+                  <InView
+                    onChange={(inView) => {
+                      if (inView) {
+                        loadItems();
+                      }
+                    }}
+                  >
+                    <button
+                      type="button"
+                      class="plain block"
+                      onClick={() => loadItems()}
+                      style={{ marginBlockEnd: '6em' }}
+                    >
+                      Show more&hellip;
+                    </button>
+                  </InView>
+                ) : (
+                  <p class="ui-state insignificant">The end.</p>
+                ))}
+            </>
+          ) : uiState === 'loading' ? (
+            <ul class="timeline">
+              {Array.from({ length: 5 }).map((_, i) =>
+                view === 'media' ? (
+                  <div
+                    style={{
+                      height: '50vh',
+                    }}
+                  />
+                ) : (
+                  <li key={i}>
+                    <Status skeleton />
+                  </li>
+                ),
+              )}
+            </ul>
+          ) : (
+            uiState !== 'error' && <p class="ui-state">{emptyText}</p>
+          )}
+          {uiState === 'error' && (
+            <p class="ui-state">
+              {errorText}
+              <br />
+              <br />
+              <button
+                class="button plain"
+                onClick={() => loadItems(!items.length)}
+              >
+                Try again
+              </button>
+            </p>
+          )}
+        </div>
       </div>
-    </div>
+    </FilterContext.Provider>
   );
 }
 
-function TimelineItem({ status, instance, useItemID, allowFilters, view }) {
+function TimelineItem({
+  status,
+  instance,
+  useItemID,
+  // allowFilters,
+  filterContext,
+  view,
+}) {
   const { id: statusID, reblog, items, type, _pinned } = status;
   const actualStatusID = reblog?.id || statusID;
   const url = instance
@@ -467,10 +479,18 @@ function TimelineItem({ status, instance, useItemID, allowFilters, view }) {
     if (isCarousel) {
       // Here, we don't hide filtered posts, but we sort them last
       items.sort((a, b) => {
-        if (a._filtered && !b._filtered) {
+        // if (a._filtered && !b._filtered) {
+        //   return 1;
+        // }
+        // if (!a._filtered && b._filtered) {
+        //   return -1;
+        // }
+        const aFiltered = isFiltered(a.filtered, filterContext);
+        const bFiltered = isFiltered(b.filtered, filterContext);
+        if (aFiltered && !bFiltered) {
           return 1;
         }
-        if (!a._filtered && b._filtered) {
+        if (!aFiltered && bFiltered) {
           return -1;
         }
         return 0;
@@ -493,7 +513,7 @@ function TimelineItem({ status, instance, useItemID, allowFilters, view }) {
                         instance={instance}
                         size="s"
                         contentTextWeight
-                        allowFilters={allowFilters}
+                        // allowFilters={allowFilters}
                       />
                     ) : (
                       <Status
@@ -501,7 +521,7 @@ function TimelineItem({ status, instance, useItemID, allowFilters, view }) {
                         instance={instance}
                         size="s"
                         contentTextWeight
-                        allowFilters={allowFilters}
+                        // allowFilters={allowFilters}
                       />
                     )}
                   </Link>
@@ -541,13 +561,13 @@ function TimelineItem({ status, instance, useItemID, allowFilters, view }) {
               <Status
                 statusID={statusID}
                 instance={instance}
-                allowFilters={allowFilters}
+                // allowFilters={allowFilters}
               />
             ) : (
               <Status
                 status={item}
                 instance={instance}
-                allowFilters={allowFilters}
+                // allowFilters={allowFilters}
               />
             )}
           </Link>
@@ -566,7 +586,7 @@ function TimelineItem({ status, instance, useItemID, allowFilters, view }) {
         key={itemKey}
         statusID={statusID}
         instance={instance}
-        allowFilters={allowFilters}
+        // allowFilters={allowFilters}
       />
     ) : (
       <MediaPost
@@ -575,7 +595,7 @@ function TimelineItem({ status, instance, useItemID, allowFilters, view }) {
         key={itemKey}
         status={status}
         instance={instance}
-        allowFilters={allowFilters}
+        // allowFilters={allowFilters}
       />
     );
   }
@@ -587,13 +607,13 @@ function TimelineItem({ status, instance, useItemID, allowFilters, view }) {
           <Status
             statusID={statusID}
             instance={instance}
-            allowFilters={allowFilters}
+            // allowFilters={allowFilters}
           />
         ) : (
           <Status
             status={status}
             instance={instance}
-            allowFilters={allowFilters}
+            // allowFilters={allowFilters}
           />
         )}
       </Link>
diff --git a/src/pages/following.jsx b/src/pages/following.jsx
index 3d081f32..c0505fec 100644
--- a/src/pages/following.jsx
+++ b/src/pages/following.jsx
@@ -32,7 +32,7 @@ function Following({ title, path, id, ...props }) {
         console.log('First load', latestItem.current);
       }
 
-      value = filteredItems(value, 'home');
+      // value = filteredItems(value, 'home');
       value.forEach((item) => {
         saveStatus(item, instance);
       });
@@ -115,7 +115,8 @@ function Following({ title, path, id, ...props }) {
       useItemID
       boostsCarousel={snapStates.settings.boostsCarousel}
       {...props}
-      allowFilters
+      // allowFilters
+      filterContext="home"
     />
   );
 }
diff --git a/src/pages/hashtag.jsx b/src/pages/hashtag.jsx
index 977a83c6..552c93b3 100644
--- a/src/pages/hashtag.jsx
+++ b/src/pages/hashtag.jsx
@@ -78,7 +78,7 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
         latestItem.current = value[0].id;
       }
 
-      value = filteredItems(value, 'public');
+      // value = filteredItems(value, 'public');
       value.forEach((item) => {
         saveStatus(item, instance, {
           skipThreading: media, // If media view, no need to form threads
@@ -153,7 +153,8 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
       useItemID
       view={media ? 'media' : undefined}
       refresh={media}
-      allowFilters
+      // allowFilters
+      filterContext="public"
       headerEnd={
         <Menu2
           portal
diff --git a/src/pages/list.jsx b/src/pages/list.jsx
index d6f9a93c..1bc6b845 100644
--- a/src/pages/list.jsx
+++ b/src/pages/list.jsx
@@ -43,7 +43,7 @@ function List(props) {
         latestItem.current = value[0].id;
       }
 
-      value = filteredItems(value, 'home');
+      // value = filteredItems(value, 'home');
       value.forEach((item) => {
         saveStatus(item, instance);
       });
@@ -102,7 +102,8 @@ function List(props) {
         checkForUpdates={checkForUpdates}
         useItemID
         boostsCarousel={snapStates.settings.boostsCarousel}
-        allowFilters
+        // allowFilters
+        filterContext="home"
         // refresh={reloadCount}
         headerStart={
           <Link to="/l" class="button plain">
diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx
index 94222dd2..b2b9a17a 100644
--- a/src/pages/notifications.jsx
+++ b/src/pages/notifications.jsx
@@ -195,6 +195,7 @@ function Notifications({ columnMode }) {
         snapStates.notificationsShowNew &&
         uiState !== 'loading'
       ) {
+        setShowNew(false);
         loadNotifications(true);
       } else {
         setShowNew(snapStates.notificationsShowNew);
diff --git a/src/pages/public.jsx b/src/pages/public.jsx
index c8aabf09..52437f38 100644
--- a/src/pages/public.jsx
+++ b/src/pages/public.jsx
@@ -41,7 +41,7 @@ function Public({ local, columnMode, ...props }) {
         latestItem.current = value[0].id;
       }
 
-      value = filteredItems(value, 'public');
+      // value = filteredItems(value, 'public');
       value.forEach((item) => {
         saveStatus(item, instance);
       });
@@ -91,7 +91,8 @@ function Public({ local, columnMode, ...props }) {
       useItemID
       headerStart={<></>}
       boostsCarousel={snapStates.settings.boostsCarousel}
-      allowFilters
+      // allowFilters
+      filterContext="public"
       headerEnd={
         <Menu2
           portal
diff --git a/src/pages/trending.jsx b/src/pages/trending.jsx
index 2d9b9d1a..97a9c3e4 100644
--- a/src/pages/trending.jsx
+++ b/src/pages/trending.jsx
@@ -85,7 +85,7 @@ function Trending({ columnMode, ...props }) {
         latestItem.current = value[0].id;
       }
 
-      value = filteredItems(value, 'public'); // Might not work here
+      // value = filteredItems(value, 'public'); // Might not work here
       value.forEach((item) => {
         saveStatus(item, instance);
       });
@@ -257,7 +257,8 @@ function Trending({ columnMode, ...props }) {
       useItemID
       headerStart={<></>}
       boostsCarousel={snapStates.settings.boostsCarousel}
-      allowFilters
+      // allowFilters
+      filterContext="public"
       timelineStart={TimelineStart}
       headerEnd={
         <Menu2
diff --git a/src/utils/filter-context.js b/src/utils/filter-context.js
new file mode 100644
index 00000000..f896690a
--- /dev/null
+++ b/src/utils/filter-context.js
@@ -0,0 +1,4 @@
+import { createContext } from 'preact';
+
+const FilterContext = createContext();
+export default FilterContext;
diff --git a/src/utils/filters.jsx b/src/utils/filters.jsx
index 18f6877f..5d51bc0b 100644
--- a/src/utils/filters.jsx
+++ b/src/utils/filters.jsx
@@ -1,10 +1,8 @@
+import mem from './mem';
 import store from './store';
 
-export function filteredItem(item, filterContext, currentAccountID) {
-  const { filtered } = item;
-  if (!filtered?.length) return true;
-  const isSelf = currentAccountID && item.account?.id === currentAccountID;
-  if (isSelf) return true;
+function _isFiltered(filtered, filterContext) {
+  if (!filtered?.length) return false;
   const appliedFilters = filtered.filter((f) => {
     const { filter } = f;
     const hasContext = filter.context.includes(filterContext);
@@ -12,19 +10,35 @@ export function filteredItem(item, filterContext, currentAccountID) {
     if (!filter.expiresAt) return hasContext;
     return new Date(filter.expiresAt) > new Date();
   });
-  if (!appliedFilters.length) return true;
+  if (!appliedFilters.length) return false;
   const isHidden = appliedFilters.some((f) => f.filter.filterAction === 'hide');
-  console.log({ isHidden, filtered, appliedFilters, item });
-  if (isHidden) return false;
+  if (isHidden)
+    return {
+      action: 'hide',
+    };
   const isWarn = appliedFilters.some((f) => f.filter.filterAction === 'warn');
   if (isWarn) {
     const filterTitles = appliedFilters.map((f) => f.filter.title);
-    item._filtered = {
+    return {
+      action: 'warn',
       titles: filterTitles,
       titlesStr: filterTitles.join(' • '),
     };
   }
-  return isWarn;
+  return false;
+}
+export const isFiltered = mem(_isFiltered);
+
+export function filteredItem(item, filterContext, currentAccountID) {
+  const { filtered } = item;
+  if (!filtered?.length) return true;
+  const isSelf = currentAccountID && item.account?.id === currentAccountID;
+  if (isSelf) return true;
+  const filterState = isFiltered(filtered, filterContext);
+  if (!filterState) return true;
+  if (filterState.action === 'hide') return false;
+  // item._filtered = filterState;
+  return true;
 }
 export function filteredItems(items, filterContext) {
   if (!items?.length) return [];
diff --git a/src/utils/mem.js b/src/utils/mem.js
index 773a4929..2295b970 100644
--- a/src/utils/mem.js
+++ b/src/utils/mem.js
@@ -1,5 +1,7 @@
 import moize from 'moize';
 
+window._moize = moize;
+
 export default function mem(fn, opts = {}) {
-  return moize(fn, { ...opts, maxSize: 100 });
+  return moize(fn, { ...opts, maxSize: 100, isDeepEqual: true });
 }
diff --git a/src/utils/states.js b/src/utils/states.js
index 2f295715..314af7fb 100644
--- a/src/utils/states.js
+++ b/src/utils/states.js
@@ -168,7 +168,7 @@ export function saveStatus(status, instance, opts) {
   if (!override && oldStatus) return;
   const key = statusKey(status.id, instance);
   if (oldStatus?._pinned) status._pinned = oldStatus._pinned;
-  if (oldStatus?._filtered) status._filtered = oldStatus._filtered;
+  // if (oldStatus?._filtered) status._filtered = oldStatus._filtered;
   states.statuses[key] = status;
   if (status.reblog) {
     const key = statusKey(status.reblog.id, instance);

From 1f039a4d73186fb1c7423c08ca18be1f15021b65 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 3 Nov 2023 21:53:00 +0800
Subject: [PATCH 073/110] Upgrade dependencies

---
 package-lock.json | 136 +++++++++++++++++++++++++++++++++-------------
 package.json      |   6 +-
 2 files changed, 102 insertions(+), 40 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 80bb36af..92f2498b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,11 +23,11 @@
         "idb-keyval": "~6.2.1",
         "just-debounce-it": "~3.2.0",
         "lz-string": "~1.5.0",
-        "masto": "~6.4.0",
+        "masto": "~6.4.2",
         "moize": "~6.1.6",
         "p-retry": "~6.1.0",
         "p-throttle": "~5.1.0",
-        "preact": "~10.18.1",
+        "preact": "~10.18.2",
         "react-hotkeys-hook": "~4.4.1",
         "react-intersection-observer": "~9.5.2",
         "react-quick-pinch-zoom": "~5.0.0",
@@ -46,7 +46,7 @@
         "@trivago/prettier-plugin-sort-imports": "~4.2.1",
         "postcss": "~8.4.31",
         "postcss-dark-theme-class": "~1.0.0",
-        "postcss-preset-env": "~9.2.0",
+        "postcss-preset-env": "~9.3.0",
         "twitter-text": "~3.1.0",
         "vite": "~4.5.0",
         "vite-plugin-generate-file": "~0.0.4",
@@ -1989,9 +1989,9 @@
       }
     },
     "node_modules/@csstools/postcss-cascade-layers": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-4.0.0.tgz",
-      "integrity": "sha512-dVPVVqQG0FixjM9CG/+8eHTsCAxRKqmNh6H69IpruolPlnEF1611f2AoLK8TijTSAsqBSclKd4WHs1KUb/LdJw==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-4.0.1.tgz",
+      "integrity": "sha512-UYFuFL9GgVnftg9v7tBvVEBRLaBeAD66euD+yYy5fYCUld9ZIWTJNCE30hm6STMEdt6FL5xzeVw1lAZ1tpvUEg==",
       "dev": true,
       "funding": [
         {
@@ -2300,6 +2300,50 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/@csstools/postcss-logical-overflow": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-overflow/-/postcss-logical-overflow-1.0.0.tgz",
+      "integrity": "sha512-cIrZ8f7bGGvr+W53nEuMspcwaeaI2YTmz6LZ4yiAO5z14/PQgOOv+Pn+qjvPOPoadeY2BmpaoTzZKvdAQuM17w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-logical-overscroll-behavior": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-overscroll-behavior/-/postcss-logical-overscroll-behavior-1.0.0.tgz",
+      "integrity": "sha512-e89S2LWjnxf0SB2wNUAbqDyFb/Fow/tlOe1XqOLbNx4rf3LrQokM9qldVx7sarnddml3ORE5LDUmlKpPOOeJTA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
     "node_modules/@csstools/postcss-logical-resize": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-resize/-/postcss-logical-resize-2.0.0.tgz",
@@ -4003,9 +4047,9 @@
       }
     },
     "node_modules/cssdb": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.8.0.tgz",
-      "integrity": "sha512-SkeezZOQr5AHt9MgJgSFNyiuJwg1p8AwoVln6JwaQJsyxduRW9QJ+HP/gAQzbsz8SIqINtYvpJKjxTRI67zxLg==",
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.9.0.tgz",
+      "integrity": "sha512-WPMT9seTQq6fPAa1yN4zjgZZeoTriSN2LqW9C+otjar12DQIWA4LuSfFrvFJiKp4oD0xIk1vumDLw8K9ur4NBw==",
       "dev": true,
       "funding": [
         {
@@ -5263,9 +5307,9 @@
       }
     },
     "node_modules/masto": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/masto/-/masto-6.4.0.tgz",
-      "integrity": "sha512-G4ANhXQGpfaAkeeRMYWxShSWqkCxrZvtvsHihQJSIcViy6ynUgxYd8wI0i6n1YokIGs7VoS7IPN+/JjMtyj1VA==",
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/masto/-/masto-6.4.2.tgz",
+      "integrity": "sha512-aIxhsTkl0pc755Sf9NMuglY0VM9HuU/tec60e4oLsyyzAkE7ELwufh6anErO84n8g3eWu/u0LGucTujIiDaAhg==",
       "dependencies": {
         "change-case": "^4.1.2",
         "events-to-async": "^2.0.1",
@@ -6093,9 +6137,9 @@
       }
     },
     "node_modules/postcss-preset-env": {
-      "version": "9.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-9.2.0.tgz",
-      "integrity": "sha512-Lnr4C5gb7t5Cc8akQMJzNdJkqw7s7s7BHUaQSgsuf+CTY9Lsz5lqQTft5yNZr59JyCLz0aFNSAqSLm/xRtcTpg==",
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-9.3.0.tgz",
+      "integrity": "sha512-ycw6doPrqV6QxDCtgiyGDef61bEfiSc59HGM4gOw/wxQxmKnhuEery61oOC/5ViENz/ycpRsuhTexs1kUBTvVw==",
       "dev": true,
       "funding": [
         {
@@ -6108,7 +6152,7 @@
         }
       ],
       "dependencies": {
-        "@csstools/postcss-cascade-layers": "^4.0.0",
+        "@csstools/postcss-cascade-layers": "^4.0.1",
         "@csstools/postcss-color-function": "^3.0.7",
         "@csstools/postcss-color-mix-function": "^2.0.7",
         "@csstools/postcss-exponential-functions": "^1.0.1",
@@ -6120,6 +6164,8 @@
         "@csstools/postcss-initial": "^1.0.0",
         "@csstools/postcss-is-pseudo-class": "^4.0.3",
         "@csstools/postcss-logical-float-and-clear": "^2.0.0",
+        "@csstools/postcss-logical-overflow": "^1.0.0",
+        "@csstools/postcss-logical-overscroll-behavior": "^1.0.0",
         "@csstools/postcss-logical-resize": "^2.0.0",
         "@csstools/postcss-logical-viewport-units": "^2.0.3",
         "@csstools/postcss-media-minmax": "^1.1.0",
@@ -6139,7 +6185,7 @@
         "css-blank-pseudo": "^6.0.0",
         "css-has-pseudo": "^6.0.0",
         "css-prefers-color-scheme": "^9.0.0",
-        "cssdb": "^7.8.0",
+        "cssdb": "^7.9.0",
         "postcss-attribute-case-insensitive": "^6.0.2",
         "postcss-clamp": "^4.1.0",
         "postcss-color-functional-notation": "^6.0.2",
@@ -6247,9 +6293,9 @@
       "dev": true
     },
     "node_modules/preact": {
-      "version": "10.18.1",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.18.1.tgz",
-      "integrity": "sha512-mKUD7RRkQQM6s7Rkmi7IFkoEHjuFqRQUaXamO61E6Nn7vqF/bo7EZCmSyrUnp2UWHw0O7XjZ2eeXis+m7tf4lg==",
+      "version": "10.18.2",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.18.2.tgz",
+      "integrity": "sha512-X/K43vocUHDg0XhWVmTTMbec4LT/iBMh+csCEqJk+pJqegaXsvjdqN80ZZ3L+93azWCnWCZ+WGwYb8SplxeNjA==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/preact"
@@ -9119,9 +9165,9 @@
       "requires": {}
     },
     "@csstools/postcss-cascade-layers": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-4.0.0.tgz",
-      "integrity": "sha512-dVPVVqQG0FixjM9CG/+8eHTsCAxRKqmNh6H69IpruolPlnEF1611f2AoLK8TijTSAsqBSclKd4WHs1KUb/LdJw==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-4.0.1.tgz",
+      "integrity": "sha512-UYFuFL9GgVnftg9v7tBvVEBRLaBeAD66euD+yYy5fYCUld9ZIWTJNCE30hm6STMEdt6FL5xzeVw1lAZ1tpvUEg==",
       "dev": true,
       "requires": {
         "@csstools/selector-specificity": "^3.0.0",
@@ -9240,6 +9286,20 @@
       "dev": true,
       "requires": {}
     },
+    "@csstools/postcss-logical-overflow": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-overflow/-/postcss-logical-overflow-1.0.0.tgz",
+      "integrity": "sha512-cIrZ8f7bGGvr+W53nEuMspcwaeaI2YTmz6LZ4yiAO5z14/PQgOOv+Pn+qjvPOPoadeY2BmpaoTzZKvdAQuM17w==",
+      "dev": true,
+      "requires": {}
+    },
+    "@csstools/postcss-logical-overscroll-behavior": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-overscroll-behavior/-/postcss-logical-overscroll-behavior-1.0.0.tgz",
+      "integrity": "sha512-e89S2LWjnxf0SB2wNUAbqDyFb/Fow/tlOe1XqOLbNx4rf3LrQokM9qldVx7sarnddml3ORE5LDUmlKpPOOeJTA==",
+      "dev": true,
+      "requires": {}
+    },
     "@csstools/postcss-logical-resize": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-resize/-/postcss-logical-resize-2.0.0.tgz",
@@ -10267,9 +10327,9 @@
       "requires": {}
     },
     "cssdb": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.8.0.tgz",
-      "integrity": "sha512-SkeezZOQr5AHt9MgJgSFNyiuJwg1p8AwoVln6JwaQJsyxduRW9QJ+HP/gAQzbsz8SIqINtYvpJKjxTRI67zxLg==",
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.9.0.tgz",
+      "integrity": "sha512-WPMT9seTQq6fPAa1yN4zjgZZeoTriSN2LqW9C+otjar12DQIWA4LuSfFrvFJiKp4oD0xIk1vumDLw8K9ur4NBw==",
       "dev": true
     },
     "cssesc": {
@@ -11199,9 +11259,9 @@
       }
     },
     "masto": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/masto/-/masto-6.4.0.tgz",
-      "integrity": "sha512-G4ANhXQGpfaAkeeRMYWxShSWqkCxrZvtvsHihQJSIcViy6ynUgxYd8wI0i6n1YokIGs7VoS7IPN+/JjMtyj1VA==",
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/masto/-/masto-6.4.2.tgz",
+      "integrity": "sha512-aIxhsTkl0pc755Sf9NMuglY0VM9HuU/tec60e4oLsyyzAkE7ELwufh6anErO84n8g3eWu/u0LGucTujIiDaAhg==",
       "requires": {
         "change-case": "^4.1.2",
         "events-to-async": "^2.0.1",
@@ -11631,12 +11691,12 @@
       }
     },
     "postcss-preset-env": {
-      "version": "9.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-9.2.0.tgz",
-      "integrity": "sha512-Lnr4C5gb7t5Cc8akQMJzNdJkqw7s7s7BHUaQSgsuf+CTY9Lsz5lqQTft5yNZr59JyCLz0aFNSAqSLm/xRtcTpg==",
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-9.3.0.tgz",
+      "integrity": "sha512-ycw6doPrqV6QxDCtgiyGDef61bEfiSc59HGM4gOw/wxQxmKnhuEery61oOC/5ViENz/ycpRsuhTexs1kUBTvVw==",
       "dev": true,
       "requires": {
-        "@csstools/postcss-cascade-layers": "^4.0.0",
+        "@csstools/postcss-cascade-layers": "^4.0.1",
         "@csstools/postcss-color-function": "^3.0.7",
         "@csstools/postcss-color-mix-function": "^2.0.7",
         "@csstools/postcss-exponential-functions": "^1.0.1",
@@ -11648,6 +11708,8 @@
         "@csstools/postcss-initial": "^1.0.0",
         "@csstools/postcss-is-pseudo-class": "^4.0.3",
         "@csstools/postcss-logical-float-and-clear": "^2.0.0",
+        "@csstools/postcss-logical-overflow": "^1.0.0",
+        "@csstools/postcss-logical-overscroll-behavior": "^1.0.0",
         "@csstools/postcss-logical-resize": "^2.0.0",
         "@csstools/postcss-logical-viewport-units": "^2.0.3",
         "@csstools/postcss-media-minmax": "^1.1.0",
@@ -11667,7 +11729,7 @@
         "css-blank-pseudo": "^6.0.0",
         "css-has-pseudo": "^6.0.0",
         "css-prefers-color-scheme": "^9.0.0",
-        "cssdb": "^7.8.0",
+        "cssdb": "^7.9.0",
         "postcss-attribute-case-insensitive": "^6.0.2",
         "postcss-clamp": "^4.1.0",
         "postcss-color-functional-notation": "^6.0.2",
@@ -11738,9 +11800,9 @@
       "dev": true
     },
     "preact": {
-      "version": "10.18.1",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.18.1.tgz",
-      "integrity": "sha512-mKUD7RRkQQM6s7Rkmi7IFkoEHjuFqRQUaXamO61E6Nn7vqF/bo7EZCmSyrUnp2UWHw0O7XjZ2eeXis+m7tf4lg=="
+      "version": "10.18.2",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.18.2.tgz",
+      "integrity": "sha512-X/K43vocUHDg0XhWVmTTMbec4LT/iBMh+csCEqJk+pJqegaXsvjdqN80ZZ3L+93azWCnWCZ+WGwYb8SplxeNjA=="
     },
     "prettier": {
       "version": "2.8.0",
diff --git a/package.json b/package.json
index 0d26897a..4a16dc92 100644
--- a/package.json
+++ b/package.json
@@ -25,11 +25,11 @@
     "idb-keyval": "~6.2.1",
     "just-debounce-it": "~3.2.0",
     "lz-string": "~1.5.0",
-    "masto": "~6.4.0",
+    "masto": "~6.4.2",
     "moize": "~6.1.6",
     "p-retry": "~6.1.0",
     "p-throttle": "~5.1.0",
-    "preact": "~10.18.1",
+    "preact": "~10.18.2",
     "react-hotkeys-hook": "~4.4.1",
     "react-intersection-observer": "~9.5.2",
     "react-quick-pinch-zoom": "~5.0.0",
@@ -48,7 +48,7 @@
     "@trivago/prettier-plugin-sort-imports": "~4.2.1",
     "postcss": "~8.4.31",
     "postcss-dark-theme-class": "~1.0.0",
-    "postcss-preset-env": "~9.2.0",
+    "postcss-preset-env": "~9.3.0",
     "twitter-text": "~3.1.0",
     "vite": "~4.5.0",
     "vite-plugin-generate-file": "~0.0.4",

From dc1452ab30270621a8b9f1aecdba9681d250d9cb Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 3 Nov 2023 22:08:44 +0800
Subject: [PATCH 074/110] Experiment quick open Shortcuts Settings

---
 src/components/columns.jsx   | 19 ++++++++++++++++++-
 src/components/shortcuts.jsx | 12 +++++++++++-
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/components/columns.jsx b/src/components/columns.jsx
index 0f1f0237..1c8c64a3 100644
--- a/src/components/columns.jsx
+++ b/src/components/columns.jsx
@@ -49,7 +49,24 @@ function Columns() {
     }
   });
 
-  return <div id="columns">{components}</div>;
+  return (
+    <div
+      id="columns"
+      onContextMenu={(e) => {
+        // If right-click on header, but not links or buttons
+        if (
+          e.target.closest('.deck > header') &&
+          !e.target.closest('a') &&
+          !e.target.closest('button')
+        ) {
+          e.preventDefault();
+          states.showShortcutsSettings = true;
+        }
+      }}
+    >
+      {components}
+    </div>
+  );
 }
 
 export default Columns;
diff --git a/src/components/shortcuts.jsx b/src/components/shortcuts.jsx
index 08bbcb94..e21f9bef 100644
--- a/src/components/shortcuts.jsx
+++ b/src/components/shortcuts.jsx
@@ -90,7 +90,13 @@ function Shortcuts() {
   return (
     <div id="shortcuts">
       {snapStates.settings.shortcutsViewMode === 'tab-menu-bar' ? (
-        <nav class="tab-bar">
+        <nav
+          class="tab-bar"
+          onContextMenu={(e) => {
+            e.preventDefault();
+            states.showShortcutsSettings = true;
+          }}
+        >
           <ul>
             {formattedShortcuts.map(
               ({ id, path, title, subtitle, icon }, i) => {
@@ -146,6 +152,10 @@ function Shortcuts() {
               type="button"
               id="shortcuts-button"
               class="plain"
+              onContextMenu={(e) => {
+                e.preventDefault();
+                states.showShortcutsSettings = true;
+              }}
               onTransitionStart={(e) => {
                 // Close menu if the button disappears
                 try {

From f726f47fcbc3c75f4dfb3ba4fb71368b82f82312 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 4 Nov 2023 01:09:25 +0800
Subject: [PATCH 075/110] Slight adjustments

---
 src/components/media-post.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/media-post.css b/src/components/media-post.css
index 48d0ce67..941d6d72 100644
--- a/src/components/media-post.css
+++ b/src/components/media-post.css
@@ -33,7 +33,6 @@
     word-break: break-word;
     word-wrap: break-word;
     overflow-wrap: break-word;
-    opacity: 0.8;
     mix-blend-mode: luminosity;
     -webkit-line-clamp: 3;
     line-clamp: 3;
@@ -70,6 +69,8 @@
     @media (hover: hover) {
       &:hover {
         --drop-shadow: var(--drop-shadow-color);
+        position: relative;
+        z-index: 1;
         box-shadow: 0 8px 16px -4px var(--drop-shadow),
           0 4px 8px var(--drop-shadow);
 

From e0cf2e22fd4e0263973904a05bb9c086f7253c30 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 4 Nov 2023 01:11:29 +0800
Subject: [PATCH 076/110] Make fetches on-demand

Also, cache them
---
 src/components/shortcuts-settings.jsx | 117 ++++++++++++++++----------
 1 file changed, 72 insertions(+), 45 deletions(-)

diff --git a/src/components/shortcuts-settings.jsx b/src/components/shortcuts-settings.jsx
index b3ce27f5..9d5bb516 100644
--- a/src/components/shortcuts-settings.jsx
+++ b/src/components/shortcuts-settings.jsx
@@ -118,6 +118,14 @@ const TYPE_PARAMS = {
     },
   ],
 };
+const fetchListTitle = pmem(async ({ id }) => {
+  const list = await api().masto.v1.lists.$select(id).fetch();
+  return list.title;
+});
+const fetchAccountTitle = pmem(async ({ id }) => {
+  const account = await api().masto.v1.accounts.$select(id).fetch();
+  return account.username || account.acct || account.displayName;
+});
 export const SHORTCUTS_META = {
   following: {
     id: 'home',
@@ -139,10 +147,7 @@ export const SHORTCUTS_META = {
   },
   list: {
     id: 'list',
-    title: pmem(async ({ id }) => {
-      const list = await api().masto.v1.lists.$select(id).fetch();
-      return list.title;
-    }),
+    title: fetchListTitle,
     path: ({ id }) => `/l/${id}`,
     icon: 'list',
   },
@@ -168,10 +173,7 @@ export const SHORTCUTS_META = {
   },
   'account-statuses': {
     id: 'account-statuses',
-    title: pmem(async ({ id }) => {
-      const account = await api().masto.v1.accounts.$select(id).fetch();
-      return account.username || account.acct || account.displayName;
-    }),
+    title: fetchAccountTitle,
     path: ({ id }) => `/a/${id}`,
     icon: 'user',
   },
@@ -201,43 +203,12 @@ export const SHORTCUTS_META = {
 
 function ShortcutsSettings({ onClose }) {
   const snapStates = useSnapshot(states);
-  const { masto } = api();
   const { shortcuts } = snapStates;
-
-  const [lists, setLists] = useState([]);
-  const [followedHashtags, setFollowedHashtags] = useState([]);
   const [showForm, setShowForm] = useState(false);
   const [showImportExport, setShowImportExport] = useState(false);
 
   const [shortcutsListParent] = useAutoAnimate();
 
-  useEffect(() => {
-    (async () => {
-      try {
-        const lists = await masto.v1.lists.list();
-        lists.sort((a, b) => a.title.localeCompare(b.title));
-        setLists(lists);
-      } catch (e) {
-        console.error(e);
-      }
-    })();
-
-    (async () => {
-      try {
-        const iterator = masto.v1.followedTags.list();
-        const tags = [];
-        do {
-          const { value, done } = await iterator.next();
-          if (done || value?.length === 0) break;
-          tags.push(...value);
-        } while (true);
-        setFollowedHashtags(tags);
-      } catch (e) {
-        console.error(e);
-      }
-    })();
-  }, []);
-
   return (
     <div id="shortcuts-settings-container" class="sheet" tabindex="-1">
       {!!onClose && (
@@ -454,8 +425,6 @@ function ShortcutsSettings({ onClose }) {
           <ShortcutForm
             shortcut={showForm.shortcut}
             shortcutIndex={showForm.shortcutIndex}
-            lists={lists}
-            followedHashtags={followedHashtags}
             onSubmit={({ result, mode }) => {
               console.log('onSubmit', result);
               if (mode === 'edit') {
@@ -487,9 +456,27 @@ function ShortcutsSettings({ onClose }) {
   );
 }
 
+const FETCH_MAX_AGE = 1000 * 60; // 1 minute
+const fetchLists = pmem(
+  () => {
+    const { masto } = api();
+    return masto.v1.lists.list();
+  },
+  {
+    maxAge: FETCH_MAX_AGE,
+  },
+);
+const fetchFollowedHashtags = pmem(
+  () => {
+    const { masto } = api();
+    return masto.v1.followedTags.list();
+  },
+  {
+    maxAge: FETCH_MAX_AGE,
+  },
+);
+
 function ShortcutForm({
-  lists,
-  followedHashtags,
   onSubmit,
   disabled,
   shortcut,
@@ -500,6 +487,41 @@ function ShortcutForm({
   const editMode = !!shortcut;
   const [currentType, setCurrentType] = useState(shortcut?.type || null);
 
+  const [uiState, setUIState] = useState('default');
+  const [lists, setLists] = useState([]);
+  const [followedHashtags, setFollowedHashtags] = useState([]);
+  useEffect(() => {
+    (async () => {
+      if (currentType !== 'list') return;
+      try {
+        setUIState('loading');
+        const lists = await fetchLists();
+        lists.sort((a, b) => a.title.localeCompare(b.title));
+        setLists(lists);
+        setUIState('default');
+      } catch (e) {
+        console.error(e);
+        setUIState('error');
+      }
+    })();
+
+    (async () => {
+      if (currentType !== 'hashtag') return;
+      try {
+        const iterator = fetchFollowedHashtags();
+        const tags = [];
+        do {
+          const { value, done } = await iterator.next();
+          if (done || value?.length === 0) break;
+          tags.push(...value);
+        } while (true);
+        setFollowedHashtags(tags);
+      } catch (e) {
+        console.error(e);
+      }
+    })();
+  }, [currentType]);
+
   const formRef = useRef();
   useEffect(() => {
     if (editMode && currentType && TYPE_PARAMS[currentType]) {
@@ -588,7 +610,8 @@ function ShortcutForm({
                       <select
                         name="id"
                         required={!notRequired}
-                        disabled={disabled}
+                        disabled={disabled || uiState === 'loading'}
+                        defaultValue={editMode ? shortcut.id : undefined}
                       >
                         {lists.map((list) => (
                           <option value={list.id}>{list.title}</option>
@@ -633,7 +656,11 @@ function ShortcutForm({
             },
           )}
           <footer>
-            <button type="submit" class="block" disabled={disabled}>
+            <button
+              type="submit"
+              class="block"
+              disabled={disabled || uiState === 'loading'}
+            >
               {editMode ? 'Save' : 'Add'}
             </button>
             {editMode && (

From 8e341ff7ed381c1f9fc98f1e75810541fb7df96b Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 4 Nov 2023 01:12:28 +0800
Subject: [PATCH 077/110] Maybe this logic work better

---
 src/pages/notifications.jsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx
index b2b9a17a..0a25b729 100644
--- a/src/pages/notifications.jsx
+++ b/src/pages/notifications.jsx
@@ -179,21 +179,22 @@ function Notifications({ columnMode }) {
 
   const loadUpdates = useCallback(
     ({ disableIdleCheck = false } = {}) => {
+      if (uiState === 'loading') {
+        return;
+      }
       console.log('✨ Load updates', {
         autoRefresh: snapStates.settings.autoRefresh,
         scrollTop: scrollableRef.current?.scrollTop,
         inBackground: inBackground(),
         disableIdleCheck,
         notificationsShowNew: snapStates.notificationsShowNew,
-        uiState,
       });
       if (
         snapStates.settings.autoRefresh &&
         scrollableRef.current?.scrollTop < 16 &&
         (disableIdleCheck || window.__IDLE__) &&
         !inBackground() &&
-        snapStates.notificationsShowNew &&
-        uiState !== 'loading'
+        snapStates.notificationsShowNew
       ) {
         setShowNew(false);
         loadNotifications(true);

From a53be08b3af203159f7642ec268ef5576d4e8931 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 4 Nov 2023 09:55:52 +0800
Subject: [PATCH 078/110] Reduce hero height

---
 src/pages/welcome.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/welcome.css b/src/pages/welcome.css
index adb8fd45..18f7ed2e 100644
--- a/src/pages/welcome.css
+++ b/src/pages/welcome.css
@@ -16,7 +16,7 @@
   padding-block: 60px;
   height: 100vh;
   height: 100svh;
-  max-height: 1024px;
+  max-height: 800px;
   display: flex;
   flex-direction: column;
 }

From 21007e0a4db7895599476660fdedf7a00ff18a47 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 4 Nov 2023 09:56:06 +0800
Subject: [PATCH 079/110] Make Try Again button more noticeable

---
 src/components/timeline.jsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx
index fa24d15b..df524c13 100644
--- a/src/components/timeline.jsx
+++ b/src/components/timeline.jsx
@@ -441,10 +441,7 @@ function Timeline({
               {errorText}
               <br />
               <br />
-              <button
-                class="button plain"
-                onClick={() => loadItems(!items.length)}
-              >
+              <button type="button" onClick={() => loadItems(!items.length)}>
                 Try again
               </button>
             </p>

From 44ffd69941cd8942f9e20c2759129db0ac4cc8ea Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 4 Nov 2023 11:46:32 +0800
Subject: [PATCH 080/110] Make textarea wider for small viewport

---
 src/components/compose.css | 58 ++++++++++++++++++++++----------------
 1 file changed, 34 insertions(+), 24 deletions(-)

diff --git a/src/components/compose.css b/src/components/compose.css
index edadbe1b..ef6356c0 100644
--- a/src/components/compose.css
+++ b/src/components/compose.css
@@ -40,28 +40,6 @@
   border-radius: 9999px;
 }
 
-#compose-container textarea {
-  width: 100%;
-  max-width: 100%;
-  height: 5em;
-  min-height: 5em;
-  max-height: 50vh;
-  resize: vertical;
-  line-height: 1.4;
-  border-color: transparent;
-}
-#compose-container textarea:hover {
-  border-color: var(--divider-color);
-}
-
-@media (min-width: 40em) {
-  #compose-container textarea {
-    /* font-size: 150%;
-    font-size: calc(100% + 50% / var(--text-weight)); */
-    max-height: 65vh;
-  }
-}
-
 @keyframes appear-up {
   0% {
     opacity: 0;
@@ -129,19 +107,51 @@
 }
 
 #compose-container form {
-  border-radius: 16px;
-  padding: 4px 12px;
+  --form-padding-inline: 12px;
+  --form-padding-block: 8px;
+  /* border-radius: 16px; */
+  padding: var(--form-padding-block) var(--form-padding-inline);
   background-color: var(--bg-blur-color);
   /* background-image: linear-gradient(var(--bg-color) 85%, transparent); */
   position: relative;
   z-index: 2;
   --drop-shadow: 0 3px 6px -3px var(--drop-shadow-color);
   box-shadow: var(--drop-shadow);
+
+  @media (min-width: 40em) {
+    border-radius: 16px;
+  }
 }
 #compose-container .status-preview ~ form {
   box-shadow: var(--drop-shadow), 0 -3px 6px -3px var(--drop-shadow-color);
 }
 
+#compose-container textarea {
+  width: 100%;
+  max-width: 100%;
+  height: 5em;
+  min-height: 5em;
+  max-height: 50vh;
+  resize: vertical;
+  line-height: 1.4;
+  border-color: transparent;
+
+  @media (width < 30em) {
+    margin-inline: calc(-1 * var(--form-padding-inline));
+    width: 100vw !important;
+    max-width: 100vw;
+    border-radius: 0;
+    border: 0;
+  }
+
+  @media (min-width: 40em) {
+    max-height: 65vh;
+  }
+}
+#compose-container textarea:hover {
+  border-color: var(--divider-color);
+}
+
 #compose-container .toolbar {
   display: flex;
   justify-content: space-between;

From 674e1fd1ffce7b0711fd9b96d486fb6f44659b4e Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 4 Nov 2023 12:02:41 +0800
Subject: [PATCH 081/110] Fix textarea styles leaked to other textareas

---
 src/components/compose.css | 20 +++++++++++---------
 src/components/compose.jsx |  1 +
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/compose.css b/src/components/compose.css
index ef6356c0..4870063c 100644
--- a/src/components/compose.css
+++ b/src/components/compose.css
@@ -136,16 +136,18 @@
   line-height: 1.4;
   border-color: transparent;
 
-  @media (width < 30em) {
-    margin-inline: calc(-1 * var(--form-padding-inline));
-    width: 100vw !important;
-    max-width: 100vw;
-    border-radius: 0;
-    border: 0;
-  }
+  &.compose-field {
+    @media (width < 30em) {
+      margin-inline: calc(-1 * var(--form-padding-inline));
+      width: 100vw !important;
+      max-width: 100vw;
+      border-radius: 0;
+      border: 0;
+    }
 
-  @media (min-width: 40em) {
-    max-height: 65vh;
+    @media (min-width: 40em) {
+      max-height: 65vh;
+    }
   }
 }
 #compose-container textarea:hover {
diff --git a/src/components/compose.jsx b/src/components/compose.jsx
index e504c1bb..f5d8a64a 100644
--- a/src/components/compose.jsx
+++ b/src/components/compose.jsx
@@ -1417,6 +1417,7 @@ const Textarea = forwardRef((props, ref) => {
   return (
     <text-expander ref={textExpanderRef} keys="@ # :">
       <textarea
+        class="compose-field"
         autoCapitalize="sentences"
         autoComplete="on"
         autoCorrect="on"

From e42d6607561669d4675c4f30216b6e706bd46e9e Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 4 Nov 2023 15:23:43 +0800
Subject: [PATCH 082/110] Remove luminosity, makes the alt text hard to read

---
 src/components/status.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/status.css b/src/components/status.css
index 162f9d28..0fd1890b 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -1084,7 +1084,6 @@ body:has(#modal-container .carousel) .status .media img:hover {
   font-size: 90%;
   z-index: 1;
   text-shadow: 0 var(--hairline-width) var(--bg-color);
-  mix-blend-mode: luminosity;
   white-space: pre-line;
 
   &:is(:hover, :focus) {

From 8c8ff72e53fb3a44251cec09cf1de8d3d82d903d Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 4 Nov 2023 15:23:56 +0800
Subject: [PATCH 083/110] s/See/View

---
 src/components/media-modal.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/media-modal.jsx b/src/components/media-modal.jsx
index 72b6cebc..279fc159 100644
--- a/src/components/media-modal.jsx
+++ b/src/components/media-modal.jsx
@@ -252,7 +252,7 @@ function MediaModal({
             //   }
             // }}
           >
-            <span class="button-label">See post </span>&raquo;
+            <span class="button-label">View post </span>&raquo;
           </Link>
         </span>
       </div>

From 7ad615163786695c13d62f4ee31c01f9c4a930ce Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 4 Nov 2023 15:35:28 +0800
Subject: [PATCH 084/110] Port domain format from Trending

---
 src/components/status.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/status.jsx b/src/components/status.jsx
index 105d3804..211beff6 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -1714,7 +1714,9 @@ function Card({ card, instance }) {
   if (snapStates.unfurledLinks[url]) return null;
 
   if (hasText && (image || (type === 'photo' && blurhash))) {
-    const domain = new URL(url).hostname.replace(/^www\./, '');
+    const domain = new URL(url).hostname
+      .replace(/^www\./, '')
+      .replace(/\/$/, '');
     let blurhashImage;
     if (!image) {
       const w = 44;

From 5f50df17214fbc29295fb82d83b0bc5f01f1b76b Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 4 Nov 2023 15:36:13 +0800
Subject: [PATCH 085/110] Replace provider/author fallback with published date

---
 src/components/status.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/status.jsx b/src/components/status.jsx
index 211beff6..44eadf81 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -1762,7 +1762,10 @@ function Card({ card, instance }) {
             {title}
           </p>
           <p class="meta" dir="auto">
-            {description || providerName || authorName}
+            {description ||
+              (!!publishedAt && (
+                <RelativeTime datetime={publishedAt} format="micro" />
+              ))}
           </p>
         </div>
       </a>

From 5038e1988d4d22d949a3a2ed1b476ce7ecc34268 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 4 Nov 2023 15:36:51 +0800
Subject: [PATCH 086/110] Show 'View post' if 1 media in modal

---
 src/app.css                    | 3 +++
 src/components/media-modal.jsx | 4 +++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/app.css b/src/app.css
index f8d021d5..5a058011 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1301,6 +1301,9 @@ button.carousel-dot:is(.active, [disabled].active) .icon {
 body:has(.status-deck) .media-post-link {
   display: none;
 }
+.media-modal-count-1 .button-label {
+  display: inline;
+}
 
 /* ✨ New */
 body:has(.media-modal-container + .status-deck) .media-post-link {
diff --git a/src/components/media-modal.jsx b/src/components/media-modal.jsx
index 279fc159..74cf21cf 100644
--- a/src/components/media-modal.jsx
+++ b/src/components/media-modal.jsx
@@ -103,7 +103,9 @@ function MediaModal({
   }, []);
 
   return (
-    <div class="media-modal-container">
+    <div
+      class={`media-modal-container media-modal-count-${mediaAttachments?.length}`}
+    >
       <div
         ref={carouselRef}
         tabIndex="0"

From fbfb5e544141822376182a851730064d60b7f5a1 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 4 Nov 2023 17:51:36 +0800
Subject: [PATCH 087/110] Add menu to quick switch to current logged-in
 instance

---
 src/pages/account-statuses.jsx | 28 ++++++++++++++++++++++++++--
 src/pages/hashtag.jsx          | 20 +++++++++++++++++++-
 src/pages/public.jsx           | 15 +++++++++++++++
 src/pages/trending.jsx         | 13 +++++++++++++
 4 files changed, 73 insertions(+), 3 deletions(-)

diff --git a/src/pages/account-statuses.jsx b/src/pages/account-statuses.jsx
index 61de5c09..f7c61465 100644
--- a/src/pages/account-statuses.jsx
+++ b/src/pages/account-statuses.jsx
@@ -57,6 +57,7 @@ function AccountStatuses() {
   const tagged = searchParams.get('tagged');
   const media = !!searchParams.get('media');
   const { masto, instance, authenticated } = api({ instance: params.instance });
+  const { masto: currentMasto, instance: currentInstance } = api();
   const accountStatusesIterator = useRef();
 
   const allSearchParams = [month, excludeReplies, excludeBoosts, tagged, media];
@@ -67,8 +68,8 @@ function AccountStatuses() {
   }, allSearchParams);
 
   const sameCurrentInstance = useMemo(
-    () => instance === api().instance,
-    [instance],
+    () => instance === currentInstance,
+    [instance, currentInstance],
   );
   const [searchEnabled, setSearchEnabled] = useState(false);
   useEffect(() => {
@@ -516,6 +517,29 @@ function AccountStatuses() {
               Switch to account's instance (<b>{accountInstance}</b>)
             </small>
           </MenuItem>
+          {!sameCurrentInstance && (
+            <MenuItem
+              onClick={() => {
+                (async () => {
+                  try {
+                    const acc = await currentMasto.v1.accounts.lookup({
+                      acct: account.acct + '@' + instance,
+                    });
+                    const { id } = acc;
+                    location.hash = `/${currentInstance}/a/${id}`;
+                  } catch (e) {
+                    console.error(e);
+                    alert('Unable to fetch account info');
+                  }
+                })();
+              }}
+            >
+              <Icon icon="transfer" />{' '}
+              <small class="menu-double-lines">
+                Switch to my instance (<b>{currentInstance}</b>)
+              </small>
+            </MenuItem>
+          )}
         </Menu2>
       }
     />
diff --git a/src/pages/hashtag.jsx b/src/pages/hashtag.jsx
index 552c93b3..4f5bfbdc 100644
--- a/src/pages/hashtag.jsx
+++ b/src/pages/hashtag.jsx
@@ -42,7 +42,11 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
   const { masto, instance, authenticated } = api({
     instance: props?.instance || params.instance,
   });
-  const { authenticated: currentAuthenticated } = api();
+  const {
+    masto: currentMasto,
+    instance: currentInstance,
+    authenticated: currentAuthenticated,
+  } = api();
   const hashtagTitle = hashtags.map((t) => `#${t}`).join(' ');
   const hashtagPostTitle = media ? ` (Media only)` : '';
   const title = instance
@@ -376,6 +380,20 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
           >
             <Icon icon="bus" /> <span>Go to another instance…</span>
           </MenuItem>
+          {currentInstance !== instance && (
+            <MenuItem
+              onClick={() => {
+                location.hash = `/${currentInstance}/t/${hashtags.join(
+                  '+',
+                )}${linkParams}`;
+              }}
+            >
+              <Icon icon="bus" />{' '}
+              <small class="menu-double-lines">
+                Go to my instance (<b>{currentInstance}</b>)
+              </small>
+            </MenuItem>
+          )}
         </Menu2>
       }
     />
diff --git a/src/pages/public.jsx b/src/pages/public.jsx
index 52437f38..089d084a 100644
--- a/src/pages/public.jsx
+++ b/src/pages/public.jsx
@@ -21,6 +21,7 @@ function Public({ local, columnMode, ...props }) {
   const { masto, instance } = api({
     instance: props?.instance || params.instance,
   });
+  const { masto: currentMasto, instance: currentInstance } = api();
   const title = `${isLocal ? 'Local' : 'Federated'} timeline (${instance})`;
   useTitle(title, isLocal ? `/:instance?/p/l` : `/:instance?/p`);
   // const navigate = useNavigate();
@@ -138,6 +139,20 @@ function Public({ local, columnMode, ...props }) {
           >
             <Icon icon="bus" /> <span>Go to another instance…</span>
           </MenuItem>
+          {currentInstance !== instance && (
+            <MenuItem
+              onClick={() => {
+                location.hash = isLocal
+                  ? `/${currentInstance}/p/l`
+                  : `/${currentInstance}/p`;
+              }}
+            >
+              <Icon icon="bus" />{' '}
+              <small class="menu-double-lines">
+                Go to my instance (<b>{currentInstance}</b>)
+              </small>
+            </MenuItem>
+          )}
         </Menu2>
       }
     />
diff --git a/src/pages/trending.jsx b/src/pages/trending.jsx
index 97a9c3e4..c1126aa1 100644
--- a/src/pages/trending.jsx
+++ b/src/pages/trending.jsx
@@ -38,6 +38,7 @@ function Trending({ columnMode, ...props }) {
   const { masto, instance } = api({
     instance: props?.instance || params.instance,
   });
+  const { masto: currentMasto, instance: currentInstance } = api();
   const title = `Trending (${instance})`;
   useTitle(title, `/:instance?/trending`);
   // const navigate = useNavigate();
@@ -291,6 +292,18 @@ function Trending({ columnMode, ...props }) {
           >
             <Icon icon="bus" /> <span>Go to another instance…</span>
           </MenuItem>
+          {currentInstance !== instance && (
+            <MenuItem
+              onClick={() => {
+                location.hash = `/${currentInstance}/trending`;
+              }}
+            >
+              <Icon icon="bus" />{' '}
+              <small class="menu-double-lines">
+                Go to my instance (<b>{currentInstance}</b>)
+              </small>
+            </MenuItem>
+          )}
         </Menu2>
       }
     />

From f8674963b3cd36b77f0486574f72ec2feaef1628 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 4 Nov 2023 18:02:03 +0800
Subject: [PATCH 088/110] Prevent the extra call if posts = 0

---
 src/components/account-info.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/account-info.jsx b/src/components/account-info.jsx
index af098fd3..ceea422a 100644
--- a/src/components/account-info.jsx
+++ b/src/components/account-info.jsx
@@ -304,12 +304,13 @@ function AccountInfo({
     ({ relationship, currentID }) => {
       if (!relationship.following) {
         renderFamiliarFollowers(currentID);
-        if (!standalone) {
+        if (!standalone && statusesCount > 0) {
+          // Only render posting stats if not standalone and has posts
           renderPostingStats();
         }
       }
     },
-    [standalone, id],
+    [standalone, id, statusesCount],
   );
 
   return (

From 660cbebbc4ab74f209b7271e826d3109ac404aba Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 4 Nov 2023 19:05:14 +0800
Subject: [PATCH 089/110] Move iOS check outside

---
 src/components/status.jsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/status.jsx b/src/components/status.jsx
index 44eadf81..ba4d51b5 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -81,6 +81,10 @@ const visibilityText = {
   direct: 'Private mention',
 };
 
+const isIOS =
+  window.ontouchstart !== undefined &&
+  /iPad|iPhone|iPod/.test(navigator.userAgent);
+
 function Status({
   statusID,
   status,
@@ -809,9 +813,6 @@ function Status({
 
   const showContextMenu = !isSizeLarge && !previewMode && !_deleted && !quoted;
 
-  const isIOS =
-    window.ontouchstart !== undefined &&
-    /iPad|iPhone|iPod/.test(navigator.userAgent);
   // Only iOS/iPadOS browsers don't support contextmenu
   // Some comments report iPadOS might support contextmenu if a mouse is connected
   const bindLongPressContext = useLongPress(

From 9f31cc8e07cd4d8dace045692ab0f25bd236468b Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 4 Nov 2023 19:18:12 +0800
Subject: [PATCH 090/110] Some sort of "garbage collection"

---
 src/app.jsx                   | 23 +++++++++++++++++++++++
 src/components/media-post.jsx |  1 +
 src/components/status.jsx     |  1 +
 3 files changed, 25 insertions(+)

diff --git a/src/app.jsx b/src/app.jsx
index b30b9fba..09affaa1 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -68,8 +68,31 @@ window.__STATES_STATS__ = () => {
     counts[key] = Object.keys(states[key]).length;
   });
   console.warn('STATE stats', counts);
+
+  const { statuses } = states;
+  const unmountedPosts = [];
+  for (const key in statuses) {
+    const $post = document.querySelector(`[data-state-post-id="${key}"]`);
+    if (!$post) {
+      unmountedPosts.push(key);
+    }
+  }
+  console.warn('Unmounted posts', unmountedPosts.length, unmountedPosts);
 };
 
+// Experimental "garbage collection" for states
+// Every 5 minutes
+// Only posts for now
+setInterval(() => {
+  const { statuses } = states;
+  for (const key in statuses) {
+    const $post = document.querySelector(`[data-state-post-id="${key}"]`);
+    if (!$post) {
+      delete states.statuses[key];
+    }
+  }
+}, 5 * 60 * 1000);
+
 // Preload icons
 // There's probably a better way to do this
 // Related: https://github.com/vitejs/vite/issues/10600
diff --git a/src/components/media-post.jsx b/src/components/media-post.jsx
index 6a5a30aa..fdc1040c 100644
--- a/src/components/media-post.jsx
+++ b/src/components/media-post.jsx
@@ -116,6 +116,7 @@ function MediaPost({
     const filterTitleStr = filterInfo?.titlesStr;
     return (
       <Parent
+        data-state-post-id={sKey}
         onMouseEnter={debugHover}
         key={mediaKey}
         data-spoiler-text={
diff --git a/src/components/status.jsx b/src/components/status.jsx
index ba4d51b5..94f543ab 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -973,6 +973,7 @@ function Status({
 
   return (
     <article
+      data-state-post-id={sKey}
       ref={(node) => {
         statusRef.current = node;
         // Use parent node if it's in focus

From 2c6d18bcfcb43a670651f8254e35719e1d8822ed Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 4 Nov 2023 19:19:42 +0800
Subject: [PATCH 091/110] Reduce to 50

---
 src/utils/mem.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/mem.js b/src/utils/mem.js
index 2295b970..620ab6df 100644
--- a/src/utils/mem.js
+++ b/src/utils/mem.js
@@ -3,5 +3,5 @@ import moize from 'moize';
 window._moize = moize;
 
 export default function mem(fn, opts = {}) {
-  return moize(fn, { ...opts, maxSize: 100, isDeepEqual: true });
+  return moize(fn, { ...opts, maxSize: 50, isDeepEqual: true });
 }

From e5d50252991e4076a2a8d441a2355e59ad9868fe Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 5 Nov 2023 08:21:43 +0800
Subject: [PATCH 092/110] Quick fix disappearing posts bug

---
 src/app.jsx               |  2 +-
 src/components/status.jsx | 18 +++++++++++++++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/app.jsx b/src/app.jsx
index 09affaa1..ecbd05d8 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -86,7 +86,7 @@ window.__STATES_STATS__ = () => {
 setInterval(() => {
   const { statuses } = states;
   for (const key in statuses) {
-    const $post = document.querySelector(`[data-state-post-id="${key}"]`);
+    const $post = document.querySelector(`[data-state-post-id~="${key}"]`);
     if (!$post) {
       delete states.statuses[key];
     }
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 94f543ab..20f94705 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -253,7 +253,11 @@ function Status({
 
     if (group) {
       return (
-        <div class="status-group" onMouseEnter={debugHover}>
+        <div
+          data-state-post-id={sKey}
+          class="status-group"
+          onMouseEnter={debugHover}
+        >
           <div class="status-pre-meta">
             <Icon icon="group" size="l" alt="Group" />{' '}
             <NameText account={status.account} instance={instance} showAvatar />
@@ -270,7 +274,11 @@ function Status({
     }
 
     return (
-      <div class="status-reblog" onMouseEnter={debugHover}>
+      <div
+        data-state-post-id={sKey}
+        class="status-reblog"
+        onMouseEnter={debugHover}
+      >
         <div class="status-pre-meta">
           <Icon icon="rocket" size="l" />{' '}
           <NameText account={status.account} instance={instance} showAvatar />{' '}
@@ -2278,6 +2286,10 @@ function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) {
   );
 
   const statusPeekRef = useTruncated();
+  const sKey =
+    statusKey(status.id, instance) +
+    ' ' +
+    (statusKey(reblog?.id, instance) || '');
 
   return (
     <div
@@ -2290,7 +2302,7 @@ function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) {
       }}
       {...bindLongPressPeek()}
     >
-      <article class="status filtered" tabindex="-1">
+      <article data-state-post-id={sKey} class="status filtered" tabindex="-1">
         <b
           class="status-filtered-badge clickable badge-meta"
           title={filterTitleStr}

From 87d0b86ecb3620ac81c9c92080895a556f764a6b Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 5 Nov 2023 08:26:51 +0800
Subject: [PATCH 093/110] Only run when idle

---
 src/app.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app.jsx b/src/app.jsx
index ecbd05d8..83146c54 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -84,6 +84,7 @@ window.__STATES_STATS__ = () => {
 // Every 5 minutes
 // Only posts for now
 setInterval(() => {
+  if (!window.__IDLE__) return;
   const { statuses } = states;
   for (const key in statuses) {
     const $post = document.querySelector(`[data-state-post-id~="${key}"]`);

From 42df8e62c595fd78921984d003ce5b946c6a1db2 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 5 Nov 2023 09:09:55 +0800
Subject: [PATCH 094/110] Experiment using touch-action

---
 src/app.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app.css b/src/app.css
index 5a058011..49295de2 100644
--- a/src/app.css
+++ b/src/app.css
@@ -359,6 +359,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   box-shadow: inset 0 -3px var(--comment-line-color),
     inset 0 3px var(--comment-line-color);
   overscroll-behavior-x: contain;
+  touch-action: pan-x;
 }
 .timeline.contextual .replies[data-comments-level='4'] {
   overflow-x: auto;

From d0890e3633d483a623744ce595c94258986d7436 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 5 Nov 2023 09:10:12 +0800
Subject: [PATCH 095/110] Bunch these avatars too

---
 src/app.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/app.css b/src/app.css
index 49295de2..9f31a602 100644
--- a/src/app.css
+++ b/src/app.css
@@ -569,6 +569,10 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 }
 .timeline.contextual > li .replies > .replies-summary .avatars {
   margin-right: 8px;
+
+  > *:not(:first-child) {
+    margin: 0 0 0 -4px;
+  }
 }
 .timeline.contextual > li .replies > .replies-summary:active,
 .timeline.contextual > li .replies[open] > .replies-summary {

From 986187141eb25ba3f2e591d8f7713a2c6bbb45ff Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 5 Nov 2023 09:10:36 +0800
Subject: [PATCH 096/110] Make text inside replies button bolder

---
 src/app.css          | 6 +++++-
 src/pages/status.jsx | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/app.css b/src/app.css
index 9f31a602..a196c571 100644
--- a/src/app.css
+++ b/src/app.css
@@ -552,7 +552,6 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   border-radius: 8px;
   cursor: pointer;
   text-transform: uppercase;
-  font-weight: 500;
   font-size: 12px;
   color: var(--text-insignificant-color);
   user-select: none;
@@ -560,6 +559,11 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   position: relative;
   list-style: none;
   white-space: nowrap;
+
+  b {
+    font-weight: 500;
+    color: var(--text-color);
+  }
 }
 .timeline.contextual > li .replies > .replies-summary::-webkit-details-marker {
   display: none;
diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index 91f9ba18..e8de6597 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -1280,11 +1280,11 @@ function SubComments({
             />
           ))}
         </span>
-        <span>
+        <b>
           <span title={replies.length}>{shortenNumber(replies.length)}</span>{' '}
           repl
           {replies.length === 1 ? 'y' : 'ies'}
-        </span>
+        </b>
         {!sameCount && totalComments > 1 && (
           <>
             {' '}

From b461823d60e2b39b1d253b620bd5d65e4238ff96 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 5 Nov 2023 10:12:52 +0800
Subject: [PATCH 097/110] Garbage collect status quotes & unfurled links too

Make this less destructive by setting to 15min interval
Ignore whatever errors inside
---
 src/app.jsx | 27 +++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/app.jsx b/src/app.jsx
index 83146c54..31e97296 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -49,7 +49,7 @@ import {
 } from './utils/api';
 import { getAccessToken } from './utils/auth';
 import focusDeck from './utils/focus-deck';
-import states, { initStates } from './utils/states';
+import states, { initStates, statusKey } from './utils/states';
 import store from './utils/store';
 import { getCurrentAccount } from './utils/store-utils';
 import './utils/toast-alert';
@@ -81,18 +81,29 @@ window.__STATES_STATS__ = () => {
 };
 
 // Experimental "garbage collection" for states
-// Every 5 minutes
+// Every 15 minutes
 // Only posts for now
 setInterval(() => {
   if (!window.__IDLE__) return;
-  const { statuses } = states;
+  const { statuses, unfurledLinks } = states;
   for (const key in statuses) {
-    const $post = document.querySelector(`[data-state-post-id~="${key}"]`);
-    if (!$post) {
-      delete states.statuses[key];
-    }
+    try {
+      const $post = document.querySelector(`[data-state-post-id~="${key}"]`);
+      if (!$post) {
+        delete states.statuses[key];
+        delete states.statusQuotes[key];
+        for (const link in unfurledLinks) {
+          const unfurled = unfurledLinks[link];
+          const sKey = statusKey(unfurled.id, unfurled.instance);
+          if (sKey === key) {
+            delete states.unfurledLinks[link];
+            break;
+          }
+        }
+      }
+    } catch (e) {}
   }
-}, 5 * 60 * 1000);
+}, 15 * 60 * 1000);
 
 // Preload icons
 // There's probably a better way to do this

From 5a4f1fb6865795409f1ff92c634d23f60406dee5 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 5 Nov 2023 14:29:18 +0800
Subject: [PATCH 098/110] Fix 'account moved' banner wrongly placed

---
 src/components/account-info.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/account-info.css b/src/components/account-info.css
index c33e68cf..e5c00324 100644
--- a/src/components/account-info.css
+++ b/src/components/account-info.css
@@ -409,6 +409,7 @@
 
 .timeline-start .account-container {
   border-bottom: 1px solid var(--outline-color);
+  position: relative;
 }
 .timeline-start .account-container header {
   padding: 16px 16px 1px;

From 7c8d310ed9cca30acb6402c421922ff13682eb1d Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 5 Nov 2023 14:31:20 +0800
Subject: [PATCH 099/110] Some debugging if this actually runs

---
 src/app.jsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/app.jsx b/src/app.jsx
index 31e97296..26b5d1a5 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -86,6 +86,7 @@ window.__STATES_STATS__ = () => {
 setInterval(() => {
   if (!window.__IDLE__) return;
   const { statuses, unfurledLinks } = states;
+  let keysCount = 0;
   for (const key in statuses) {
     try {
       const $post = document.querySelector(`[data-state-post-id~="${key}"]`);
@@ -100,9 +101,13 @@ setInterval(() => {
             break;
           }
         }
+        keysCount++;
       }
     } catch (e) {}
   }
+  if (keysCount) {
+    console.info(`GC: Removed ${keysCount} keys`);
+  }
 }, 15 * 60 * 1000);
 
 // Preload icons

From 83bdc82049b47e41ba7d26c34b244b6bab75b1a3 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 5 Nov 2023 16:13:00 +0800
Subject: [PATCH 100/110] Add more unfurling

- Fix regex
- Handle trunks.social and Phanpy links too
---
 src/components/status.jsx         | 20 +++++++++++++++++---
 src/utils/isMastodonLinkMaybe.jsx |  6 ++++--
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/status.jsx b/src/components/status.jsx
index 20f94705..4da9ef05 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -2158,10 +2158,24 @@ function _unfurlMastodonLink(instance, url) {
 
   let remoteInstanceFetch;
   let theURL = url;
-  if (/\/\/elk\.[^\/]+\/[^.]+\.[^.]+/i.test(theURL)) {
-    // E.g. https://elk.zone/domain.com/@stest/123 -> https://domain.com/@stest/123
+
+  // https://elk.zone/domain.com/@stest/123 -> https://domain.com/@stest/123
+  if (/\/\/elk\.[^\/]+\/[^\/]+\.[^\/]+/i.test(theURL)) {
     theURL = theURL.replace(/elk\.[^\/]+\//i, '');
   }
+
+  // https://trunks.social/status/domain.com/@stest/123 -> https://domain.com/@stest/123
+  if (/\/\/trunks\.[^\/]+\/status\/[^\/]+\.[^\/]+/i.test(theURL)) {
+    theURL = theURL.replace(/trunks\.[^\/]+\/status\//i, '');
+  }
+
+  // https://phanpy.social/#/domain.com/s/123 -> https://domain.com/statuses/123
+  if (/\/#\/[^\/]+\.[^\/]+\/s\/.+/i.test(theURL)) {
+    const urlAfterHash = theURL.split('/#/')[1];
+    const finalURL = urlAfterHash.replace(/\/s\//i, '/@fakeUsername/');
+    theURL = `https://${finalURL}`;
+  }
+
   const urlObj = new URL(theURL);
   const domain = urlObj.hostname;
   const path = urlObj.pathname;
@@ -2189,7 +2203,7 @@ function _unfurlMastodonLink(instance, url) {
   const { masto } = api({ instance });
   const mastoSearchFetch = masto.v2.search
     .fetch({
-      q: url,
+      q: theURL,
       type: 'statuses',
       resolve: true,
       limit: 1,
diff --git a/src/utils/isMastodonLinkMaybe.jsx b/src/utils/isMastodonLinkMaybe.jsx
index 7e029d2a..8fcfb306 100644
--- a/src/utils/isMastodonLinkMaybe.jsx
+++ b/src/utils/isMastodonLinkMaybe.jsx
@@ -1,9 +1,11 @@
 export default function isMastodonLinkMaybe(url) {
-  const { pathname } = new URL(url);
+  const { pathname, hash } = new URL(url);
   return (
     /^\/.*\/\d+$/i.test(pathname) ||
     /^\/@[^/]+\/(statuses|posts)\/\w+\/?$/i.test(pathname) || // GoToSocial, Takahe
     /^\/notes\/[a-z0-9]+$/i.test(pathname) || // Misskey, Calckey
-    /^\/(notice|objects)\/[a-z0-9-]+$/i.test(pathname) // Pleroma
+    /^\/notes\/[a-z0-9]+$/i.test(pathname) || // Misskey, Calckey
+    /^\/(notice|objects)\/[a-z0-9-]+$/i.test(pathname) || // Pleroma
+    /#\/[^\/]+\.[^\/]+\/s\/.+/i.test(hash) // Phanpy 🫣
   );
 }

From 305710fa8c06ec1f092618caea40600f3c84d35f Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 5 Nov 2023 17:40:58 +0800
Subject: [PATCH 101/110] Fix collapsed peek status with wrong url

---
 src/components/status.jsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/status.jsx b/src/components/status.jsx
index 4da9ef05..67c94cea 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -268,6 +268,7 @@ function Status({
             instance={instance}
             size={size}
             contentTextWeight={contentTextWeight}
+            readOnly={readOnly}
           />
         </div>
       );
@@ -290,6 +291,7 @@ function Status({
           instance={instance}
           size={size}
           contentTextWeight={contentTextWeight}
+          readOnly={readOnly}
         />
       </div>
     );
@@ -2276,6 +2278,7 @@ const unfurlMastodonLink = throttle(_unfurlMastodonLink);
 
 function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) {
   const {
+    id: statusID,
     account: { avatar, avatarStatic, bot, group },
     createdAt,
     visibility,
@@ -2305,6 +2308,11 @@ function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) {
     ' ' +
     (statusKey(reblog?.id, instance) || '');
 
+  const actualStatusID = reblog?.id || statusID;
+  const url = instance
+    ? `/${instance}/s/${actualStatusID}`
+    : `/s/${actualStatusID}`;
+
   return (
     <div
       class={isReblog ? (group ? 'status-group' : 'status-reblog') : ''}
@@ -2380,7 +2388,7 @@ function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) {
               <Link
                 ref={statusPeekRef}
                 class="status-link"
-                to={`/${instance}/s/${status.id}`}
+                to={url}
                 onClick={() => {
                   setShowPeek(false);
                 }}

From 678fc100c8d3715e2029d0a9baa0523902fcc126 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 5 Nov 2023 17:41:29 +0800
Subject: [PATCH 102/110] Allow shifts to open composer in new window

---
 src/components/compose-button.jsx |  1 -
 src/components/compose.jsx        |  1 -
 src/components/status.jsx         | 12 ++++++++++--
 src/utils/open-compose.js         |  2 ++
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/compose-button.jsx b/src/components/compose-button.jsx
index ceb452c4..3587c2f6 100644
--- a/src/components/compose-button.jsx
+++ b/src/components/compose-button.jsx
@@ -11,7 +11,6 @@ export default function ComposeButton() {
       const newWin = openCompose();
 
       if (!newWin) {
-        alert('Looks like your browser is blocking popups.');
         states.showCompose = true;
       }
     } else {
diff --git a/src/components/compose.jsx b/src/components/compose.jsx
index f5d8a64a..18480db7 100644
--- a/src/components/compose.jsx
+++ b/src/components/compose.jsx
@@ -607,7 +607,6 @@ function Compose({
                   });
 
                   if (!newWin) {
-                    alert('Looks like your browser is blocking popups.');
                     return;
                   }
 
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 67c94cea..a5ef587c 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -44,6 +44,7 @@ import htmlContentLength from '../utils/html-content-length';
 import isMastodonLinkMaybe from '../utils/isMastodonLinkMaybe';
 import localeMatch from '../utils/locale-match';
 import niceDateTime from '../utils/nice-date-time';
+import openCompose from '../utils/open-compose';
 import pmem from '../utils/pmem';
 import safeBoundingBoxPadding from '../utils/safe-bounding-box-padding';
 import shortenNumber from '../utils/shorten-number';
@@ -373,10 +374,17 @@ function Status({
     canBoost = true;
   }
 
-  const replyStatus = () => {
+  const replyStatus = (e) => {
     if (!sameInstance || !authenticated) {
       return alert(unauthInteractionErrorMessage);
     }
+    // syntheticEvent comes from MenuItem
+    if (e?.shiftKey || e?.syntheticEvent?.shiftKey) {
+      const newWin = openCompose({
+        replyToStatus: status,
+      });
+      if (newWin) return;
+    }
     states.showCompose = {
       replyToStatus: status,
     };
@@ -855,7 +863,7 @@ function Status({
   );
 
   const hotkeysEnabled = !readOnly && !previewMode;
-  const rRef = useHotkeys('r', replyStatus, {
+  const rRef = useHotkeys('r, shift+r', replyStatus, {
     enabled: hotkeysEnabled,
   });
   const fRef = useHotkeys(
diff --git a/src/utils/open-compose.js b/src/utils/open-compose.js
index da677112..b8192876 100644
--- a/src/utils/open-compose.js
+++ b/src/utils/open-compose.js
@@ -18,6 +18,8 @@ export default function openCompose(opts) {
     // }
 
     newWin.__COMPOSE__ = opts;
+  } else {
+    alert('Looks like your browser is blocking popups.');
   }
 
   return newWin;

From 540b9a15a4e9a42ceff9712bed7567ff4ff712a4 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 5 Nov 2023 17:57:49 +0800
Subject: [PATCH 103/110] Fix noob mistake

And also make announcements and follow requests fetch more non-blocking
---
 src/pages/notifications.jsx | 29 +++++++++++++++++------------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx
index 0a25b729..6c48ec2a 100644
--- a/src/pages/notifications.jsx
+++ b/src/pages/notifications.jsx
@@ -134,20 +134,25 @@ function Notifications({ columnMode }) {
     (async () => {
       try {
         const fetchNotificationsPromise = fetchNotifications(firstLoad);
-        const fetchFollowRequestsPromise = fetchFollowRequests();
-        const fetchAnnouncementsPromise = fetchAnnouncements();
 
         if (firstLoad) {
-          const announcements = await fetchAnnouncementsPromise;
-          announcements.sort((a, b) => {
-            // Sort by updatedAt first, then createdAt
-            const aDate = new Date(a.updatedAt || a.createdAt);
-            const bDate = new Date(b.updatedAt || b.createdAt);
-            return bDate - aDate;
-          });
-          setAnnouncements(announcements);
-          const requests = await fetchFollowRequestsPromise;
-          setFollowRequests(requests);
+          fetchAnnouncements()
+            .then((announcements) => {
+              announcements.sort((a, b) => {
+                // Sort by updatedAt first, then createdAt
+                const aDate = new Date(a.updatedAt || a.createdAt);
+                const bDate = new Date(b.updatedAt || b.createdAt);
+                return bDate - aDate;
+              });
+              setAnnouncements(announcements);
+            })
+            .catch(() => {});
+
+          fetchFollowRequests()
+            .then((requests) => {
+              setFollowRequests(requests);
+            })
+            .catch(() => {});
         }
 
         const { done } = await fetchNotificationsPromise;

From 8d41ff6884e870146a89815803ec3493cb1f5fbc Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 5 Nov 2023 20:09:57 +0800
Subject: [PATCH 104/110] Fix alpha avatars

---
 src/components/avatar.css | 43 +++++++++++++++++++++++----------------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/components/avatar.css b/src/components/avatar.css
index 743793b0..41325817 100644
--- a/src/components/avatar.css
+++ b/src/components/avatar.css
@@ -8,24 +8,31 @@
   box-shadow: 0 0 0 1px var(--bg-blur-color);
   flex-shrink: 0;
   vertical-align: middle;
-}
-.avatar.has-alpha {
-  border-radius: 0;
-}
-.avatar:not(.has-alpha).squircle {
-  border-radius: 25%;
-}
 
-.avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  background-color: var(--img-bg-color);
-  contain: none;
-}
+  &.has-alpha {
+    border-radius: 0;
+    background-color: transparent;
+    box-shadow: none;
 
-.avatar[data-loaded],
-.avatar[data-loaded] img {
-  box-shadow: none;
-  background-color: transparent;
+    img {
+      background-color: transparent;
+    }
+  }
+  &:not(.has-alpha).squircle {
+    border-radius: 25%;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    background-color: var(--img-bg-color);
+    contain: none;
+  }
+
+  &[data-loaded],
+  &[data-loaded] img {
+    box-shadow: none;
+    background-color: transparent;
+  }
 }

From f73a942b61a96578606129fa592d50a7d9e974bd Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 6 Nov 2023 00:49:45 +0800
Subject: [PATCH 105/110] Auto-update self account info

And fix isSelf not working in some cases
---
 src/components/account-info.jsx | 36 ++++++++++++++++++++++++++++-----
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/components/account-info.jsx b/src/components/account-info.jsx
index ceea422a..f3b2ecaa 100644
--- a/src/components/account-info.jsx
+++ b/src/components/account-info.jsx
@@ -131,11 +131,6 @@ function AccountInfo({
   const isString = typeof account === 'string';
   const [info, setInfo] = useState(isString ? null : account);
 
-  const isSelf = useMemo(
-    () => account.id === store.session.get('currentAccount'),
-    [account?.id],
-  );
-
   const sameCurrentInstance = useMemo(
     () => instance === currentInstance,
     [instance, currentInstance],
@@ -198,6 +193,37 @@ function AccountInfo({
     }
   }
 
+  const isSelf = useMemo(
+    () => id === store.session.get('currentAccount'),
+    [id],
+  );
+
+  useEffect(() => {
+    const infoHasEssentials = !!(
+      info?.id &&
+      info?.username &&
+      info?.acct &&
+      info?.avatar &&
+      info?.avatarStatic &&
+      info?.displayName &&
+      info?.url
+    );
+    if (isSelf && instance && infoHasEssentials) {
+      const accounts = store.local.getJSON('accounts');
+      let updated = false;
+      accounts.forEach((account) => {
+        if (account.info.id === info.id && account.instanceURL === instance) {
+          account.info = info;
+          updated = true;
+        }
+      });
+      if (updated) {
+        console.log('Updated account info', info);
+        store.local.setJSON('accounts', accounts);
+      }
+    }
+  }, [isSelf, info, instance]);
+
   const accountInstance = useMemo(() => {
     if (!url) return null;
     const domain = new URL(url).hostname;

From 6e3494488a9c840da3c3f21f86ca52ba31b4cdc2 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 6 Nov 2023 09:44:46 +0800
Subject: [PATCH 106/110] Reduce interval to 15s

---
 src/components/background-service.jsx | 2 +-
 src/components/timeline.jsx           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/background-service.jsx b/src/components/background-service.jsx
index 8d5c1aa5..6c4b63d1 100644
--- a/src/components/background-service.jsx
+++ b/src/components/background-service.jsx
@@ -9,7 +9,7 @@ import useInterval from '../utils/useInterval';
 import usePageVisibility from '../utils/usePageVisibility';
 
 const STREAMING_TIMEOUT = 1000 * 3; // 3 seconds
-const POLL_INTERVAL = 1000 * 60; // 1 minute
+const POLL_INTERVAL = 15_000; // 15 seconds
 
 export default memo(function BackgroundService({ isLoggedIn }) {
   // Notifications service
diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx
index df524c13..6aab086b 100644
--- a/src/components/timeline.jsx
+++ b/src/components/timeline.jsx
@@ -36,7 +36,7 @@ function Timeline({
   boostsCarousel,
   fetchItems = () => {},
   checkForUpdates = () => {},
-  checkForUpdatesInterval = 60_000, // 1 minute
+  checkForUpdatesInterval = 15_000, // 15 seconds
   headerStart,
   headerEnd,
   timelineStart,

From 90df455d6e0701efb9e4674ee936c25ac4266adf Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 6 Nov 2023 16:47:35 +0800
Subject: [PATCH 107/110] Prevent GC posts from notifications

---
 src/app.jsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/app.jsx b/src/app.jsx
index 26b5d1a5..44d937ad 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -85,12 +85,16 @@ window.__STATES_STATS__ = () => {
 // Only posts for now
 setInterval(() => {
   if (!window.__IDLE__) return;
-  const { statuses, unfurledLinks } = states;
+  const { statuses, unfurledLinks, notifications } = states;
   let keysCount = 0;
+  const { instance } = api();
   for (const key in statuses) {
     try {
       const $post = document.querySelector(`[data-state-post-id~="${key}"]`);
-      if (!$post) {
+      const postInNotifications = notifications.some(
+        (n) => key === statusKey(n.status?.id, instance),
+      );
+      if (!$post && !postInNotifications) {
         delete states.statuses[key];
         delete states.statusQuotes[key];
         for (const link in unfurledLinks) {

From 180466160b0dfdd5d62ca77f38c082c9e0dcfed0 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 6 Nov 2023 17:17:56 +0800
Subject: [PATCH 108/110] Slight relayout for Welcome page

---
 src/pages/welcome.css | 287 ++++++++++++++++++++++++------------------
 src/pages/welcome.jsx |  52 ++++----
 2 files changed, 194 insertions(+), 145 deletions(-)

diff --git a/src/pages/welcome.css b/src/pages/welcome.css
index 18f7ed2e..1060d4b0 100644
--- a/src/pages/welcome.css
+++ b/src/pages/welcome.css
@@ -1,40 +1,3 @@
-#welcome {
-  text-align: center;
-  background-image: radial-gradient(
-      circle at center,
-      var(--bg-color),
-      transparent 16em
-    ),
-    radial-gradient(circle at center, var(--bg-color), transparent 8em);
-  background-repeat: no-repeat;
-  background-attachment: fixed;
-  padding: 16px;
-  cursor: default;
-}
-
-#welcome .hero-container {
-  padding-block: 60px;
-  height: 100vh;
-  height: 100svh;
-  max-height: 800px;
-  display: flex;
-  flex-direction: column;
-}
-
-#welcome h1 {
-  margin: 0;
-  padding: 0;
-  font-size: 5em;
-  line-height: 1;
-  letter-spacing: -1px;
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  mix-blend-mode: multiply;
-}
 @keyframes shine2 {
   0% {
     left: -100%;
@@ -46,92 +9,176 @@
     left: 100%;
   }
 }
-#welcome h1:before {
-  content: '';
-  position: absolute;
-  z-index: 2;
-  width: 100%;
-  height: 100%;
-  background-image: linear-gradient(
-    100deg,
-    rgba(255, 255, 255, 0) 30%,
-    rgba(255, 255, 255, 0.4),
-    rgba(255, 255, 255, 0) 70%
-  );
-  top: 0;
-  left: -100%;
-  pointer-events: none;
-  animation: shine2 5s ease-in-out 1s infinite;
-}
-@media (prefers-color-scheme: dark) {
-  #welcome {
+
+#welcome {
+  text-align: center;
+  background-image: radial-gradient(
+      circle at center,
+      var(--bg-color),
+      transparent 16em
+    ),
+    radial-gradient(circle at center, var(--bg-color), transparent 8em);
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  cursor: default;
+
+  @media (prefers-color-scheme: dark) {
     background-image: none;
   }
-  #welcome h1 {
-    mix-blend-mode: normal;
-  }
-  #welcome h1:before {
-    content: none;
-  }
-}
-#welcome img {
-  vertical-align: top;
-  transition: transform 0.3s ease-out;
-}
-#welcome h1 img {
-  filter: drop-shadow(-1px -1px var(--bg-blur-color))
-    drop-shadow(0 -1px 1px #fff)
-    drop-shadow(0 16px 32px var(--drop-shadow-color));
-}
-@media (prefers-color-scheme: dark) {
-  #welcome h1 img {
-    filter: none;
-  }
-}
 
-#welcome h1:hover img {
-  transform: scale(1.05);
-}
-#welcome .desc {
-  font-size: 1.4em;
-  text-wrap: balance;
-  opacity: 0.7;
-}
-#welcome .hero-container > p {
-  margin-top: 0;
-}
+  .hero-container {
+    padding: 16px;
+    height: 100vh;
+    height: 100svh;
+    max-height: 800px;
+    display: flex;
+    flex-direction: column;
 
-#why-container .sections {
-  padding-inline: 16px;
-}
-#why-container .sections section {
-  text-align: start;
-  max-width: 480px;
-  background-color: var(--bg-color);
-  border-radius: 16px;
-  overflow: hidden;
-  box-shadow: 17px 20px 40px var(--drop-shadow-color);
-  margin-bottom: 48px;
-}
-#why-container .sections section h4 {
-  margin: 0;
-  padding: 30px 30px 0;
-  font-size: 1.4em;
-  font-weight: 600;
-}
-#why-container .sections section p {
-  margin-inline: 30px;
-  margin-bottom: 30px;
-  opacity: 0.7;
-  text-wrap: balance;
-}
-#why-container .sections section img {
-  width: 100%;
-  height: auto;
-  border-bottom: 1px solid var(--outline-color);
-}
-@media (prefers-color-scheme: dark) {
-  #why-container .sections section img {
-    filter: invert(0.85) hue-rotate(180deg);
+    a {
+      color: inherit;
+
+      &:hover {
+        color: var(--link-text-color);
+      }
+    }
+  }
+
+  h1 {
+    margin: 0;
+    padding: 0;
+    font-size: 5em;
+    line-height: 1;
+    letter-spacing: -1px;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    mix-blend-mode: multiply;
+
+    @media (prefers-color-scheme: dark) {
+      mix-blend-mode: normal;
+    }
+
+    &:before {
+      content: '';
+      position: absolute;
+      z-index: 2;
+      width: 100%;
+      height: 100%;
+      background-image: linear-gradient(
+        100deg,
+        rgba(255, 255, 255, 0) 30%,
+        rgba(255, 255, 255, 0.4),
+        rgba(255, 255, 255, 0) 70%
+      );
+      top: 0;
+      left: -100%;
+      pointer-events: none;
+      animation: shine2 5s ease-in-out 1s infinite;
+
+      @media (prefers-color-scheme: dark) {
+        content: none;
+      }
+    }
+
+    img {
+      filter: drop-shadow(-1px -1px var(--bg-blur-color))
+        drop-shadow(0 -1px 1px #fff)
+        drop-shadow(0 16px 32px var(--drop-shadow-color));
+
+      @media (prefers-color-scheme: dark) {
+        filter: none;
+      }
+    }
+
+    &:hover img {
+      transform: scale(1.05);
+    }
+  }
+
+  img {
+    vertical-align: top;
+    transition: transform 0.3s ease-out;
+  }
+
+  .desc {
+    font-size: 1.4em;
+    text-wrap: balance;
+    opacity: 0.7;
+  }
+
+  .hero-container > p {
+    margin-top: 0;
+  }
+
+  #why-container {
+    padding: 0 16px;
+  }
+
+  .sections {
+    padding-inline: 16px;
+
+    section {
+      text-align: start;
+      max-width: 480px;
+      background-color: var(--bg-color);
+      border-radius: 16px;
+      overflow: hidden;
+      box-shadow: 17px 20px 40px var(--drop-shadow-color);
+      margin-bottom: 48px;
+
+      h4 {
+        margin: 0;
+        padding: 30px 30px 0;
+        font-size: 1.4em;
+        font-weight: 600;
+      }
+
+      p {
+        margin-inline: 30px;
+        margin-bottom: 30px;
+        opacity: 0.7;
+        text-wrap: balance;
+      }
+
+      img {
+        width: 100%;
+        height: auto;
+        border-bottom: 1px solid var(--outline-color);
+
+        @media (prefers-color-scheme: dark) {
+          filter: invert(0.85) hue-rotate(180deg);
+        }
+      }
+    }
+  }
+
+  @media (width > 40em) {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr auto;
+    height: 100vh;
+    height: 100svh;
+
+    .hero-container {
+      height: auto;
+    }
+
+    #why-container {
+      padding: 32px;
+      overflow: auto;
+      mask-image: linear-gradient(to top, transparent 16px, black 64px);
+    }
+
+    footer {
+      grid-row: 2;
+      grid-column: 1 / span 2;
+    }
+  }
+
+  & ~ :is(#compose-button, #shortcuts) {
+    display: none;
   }
 }
diff --git a/src/pages/welcome.jsx b/src/pages/welcome.jsx
index e0abe16e..58882dcb 100644
--- a/src/pages/welcome.jsx
+++ b/src/pages/welcome.jsx
@@ -98,31 +98,33 @@ function Welcome() {
           </section>
         </div>
       </div>
-      <hr />
-      <p>
-        <a href="https://github.com/cheeaun/phanpy" target="_blank">
-          Built
-        </a>{' '}
-        by{' '}
-        <a
-          href="https://mastodon.social/@cheeaun"
-          target="_blank"
-          onClick={(e) => {
-            e.preventDefault();
-            states.showAccount = 'cheeaun@mastodon.social';
-          }}
-        >
-          @cheeaun
-        </a>
-        .{' '}
-        <a
-          href="https://github.com/cheeaun/phanpy/blob/main/PRIVACY.MD"
-          target="_blank"
-        >
-          Privacy Policy
-        </a>
-        .
-      </p>
+      <footer>
+        <hr />
+        <p>
+          <a href="https://github.com/cheeaun/phanpy" target="_blank">
+            Built
+          </a>{' '}
+          by{' '}
+          <a
+            href="https://mastodon.social/@cheeaun"
+            target="_blank"
+            onClick={(e) => {
+              e.preventDefault();
+              states.showAccount = 'cheeaun@mastodon.social';
+            }}
+          >
+            @cheeaun
+          </a>
+          .{' '}
+          <a
+            href="https://github.com/cheeaun/phanpy/blob/main/PRIVACY.MD"
+            target="_blank"
+          >
+            Privacy Policy
+          </a>
+          .
+        </p>
+      </footer>
     </main>
   );
 }

From 8f34d98f472ae5e44ccec77a717501d79d17b0a9 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 6 Nov 2023 19:47:49 +0800
Subject: [PATCH 109/110] Fix disappearing filter/spoiler text when hover

---
 src/components/media-post.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/media-post.css b/src/components/media-post.css
index 941d6d72..d8c12673 100644
--- a/src/components/media-post.css
+++ b/src/components/media-post.css
@@ -41,6 +41,7 @@
     display: -webkit-box;
     display: box;
     overflow: hidden;
+    z-index: 2;
 
     > * {
       pointer-events: none;

From ea660f9146af2eeeb91c2d557c62ee0f9d58031d Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 6 Nov 2023 20:15:13 +0800
Subject: [PATCH 110/110] New keyboard shortcuts

---
 src/components/keyboard-shortcuts-help.jsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/keyboard-shortcuts-help.jsx b/src/components/keyboard-shortcuts-help.jsx
index 52bca713..df4e437b 100644
--- a/src/components/keyboard-shortcuts-help.jsx
+++ b/src/components/keyboard-shortcuts-help.jsx
@@ -117,6 +117,15 @@ export default memo(function KeyboardShortcutsHelp() {
                   action: 'Compose new post',
                   keys: <kbd>c</kbd>,
                 },
+                {
+                  action: 'Compose new post (new window)',
+                  className: 'insignificant',
+                  keys: (
+                    <>
+                      <kbd>Shift</kbd> + <kbd>c</kbd>
+                    </>
+                  ),
+                },
                 {
                   action: 'Send post',
                   keys: (
@@ -134,6 +143,15 @@ export default memo(function KeyboardShortcutsHelp() {
                   action: 'Reply',
                   keys: <kbd>r</kbd>,
                 },
+                {
+                  action: 'Reply (new window)',
+                  className: 'insignificant',
+                  keys: (
+                    <>
+                      <kbd>Shift</kbd> + <kbd>r</kbd>
+                    </>
+                  ),
+                },
                 {
                   action: 'Like (favourite)',
                   keys: (
@@ -162,9 +180,9 @@ export default memo(function KeyboardShortcutsHelp() {
                     </>
                   ),
                 },
-              ].map(({ action, keys }) => (
+              ].map(({ action, className, keys }) => (
                 <tr key={action}>
-                  <th>{action}</th>
+                  <th class={className}>{action}</th>
                   <td>{keys}</td>
                 </tr>
               ))}