Posts timeline for trending links

Timeline logic changed slightly, so might be buggy.

public/sw.js

···
 );
 registerRoute(apiExtendedRoute);
 
+const apiIntermediateRoute = new RegExpRoute(
+  // Matches:
+  // - trends/*
+  // - timelines/link
+  /^https?:\/\/[^\/]+\/api\/v\d+\/(trends|timelines\/link)/,
+  new StaleWhileRevalidate({
+    cacheName: 'api-intermediate',
+    plugins: [
+      new ExpirationPlugin({
+        maxAgeSeconds: 10 * 60, // 10 minutes
+      }),
+      new CacheableResponsePlugin({
+        statuses: [0, 200],
+      }),
+    ],
+  }),
+);
+registerRoute(apiIntermediateRoute);
+
 const apiRoute = new RegExpRoute(
   // Matches:
   // - statuses/:id/context - some contexts are really huge

src/components/links-bar.css

···
       filter: brightness(0.8);
     }
 
+    figure {
+      transition: 1s ease-out;
+      transition-property: opacity, mix-blend-mode;
+    }
+
+    &.inactive:not(:active, :hover) {
+      figure {
+        transition-duration: 0.3s;
+        opacity: 0.5;
+        mix-blend-mode: luminosity;
+      }
+    }
+
+    &.active {
+      border-color: var(--accent-color, var(--link-light-color));
+      height: 100%;
+      max-height: 100%;
+
+      + button[disabled] {
+        display: none;
+      }
+    }
+
     article {
       width: 100%;
       display: flex;

src/components/timeline.jsx

···
   filterContext,
   showFollowedTags,
   showReplyParent,
+  clearWhenRefresh,
 }) {
   const snapStates = useSnapshot(states);
   const [items, setItems] = useState([]);
···
   const mediaFirst = useMemo(() => isMediaFirstInstance(), []);
 
   const allowGrouping = view !== 'media';
+  const loadItemsTS = useRef(0); // Ensures only one loadItems at a time
   const loadItems = useDebouncedCallback(
     (firstLoad) => {
       setShowNew(false);
-      if (uiState === 'loading') return;
+      // if (uiState === 'loading') return;
       setUIState('loading');
       (async () => {
         try {
+          const ts = (loadItemsTS.current = Date.now());
           let { done, value } = await fetchItems(firstLoad);
+          if (ts !== loadItemsTS.current) return;
           if (Array.isArray(value)) {
             // Avoid grouping for pinned posts
             const [pinnedPosts, otherPosts] = value.reduce(
···
         }
       })();
     },
-    1500,
+    1_000,
     {
       leading: true,
-      trailing: false,
+      // trailing: false,
     },
   );
 
···
     scrollableRef.current?.scrollTo({ top: 0 });
     loadItems(true);
   }, []);
+  const firstLoad = useRef(true);
   useEffect(() => {
+    if (firstLoad.current) {
+      firstLoad.current = false;
+      return;
+    }
+    if (clearWhenRefresh && items?.length) {
+      loadItems.cancel?.();
+      setItems([]);
+    }
     loadItems(true);
-  }, [refresh]);
+  }, [clearWhenRefresh, refresh]);
 
   // useEffect(() => {
   //   if (reachStart) {

src/data/features.json

···
   "@mastodon/edit-media-attributes": ">=4.1",
   "@mastodon/list-exclusive": ">=4.2",
   "@mastodon/filtered-notifications": "~4.3 || >=4.3",
-  "@mastodon/fetch-multiple-statuses": "~4.3 || >=4.3"
+  "@mastodon/fetch-multiple-statuses": "~4.3 || >=4.3",
+  "@mastodon/trending-link-posts": "~4.3 || >=4.3"
 }

src/pages/trending.css

···
+#trending-page {
+  .timeline-header-block {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    padding: 16px;
+
+    &.blended {
+      background-image: linear-gradient(
+        to bottom,
+        var(--bg-faded-color),
+        transparent
+      );
+    }
+
+    @media (min-width: 40em) {
+      padding: 0 16px;
+    }
+
+    &.loading {
+      color: var(--text-insignificant-color);
+    }
+
+    p {
+      margin: 0;
+      padding: 0;
+      flex-grow: 1;
+      min-width: 0;
+    }
+
+    .link-text {
+      color: var(--text-insignificant-color);
+      display: block;
+      font-weight: normal;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: 0.9em;
+    }
+  }
+
+  .timeline {
+    transition: opacity 0.3s ease-in-out;
+  }
+  .timeline.loading {
+    pointer-events: none;
+    opacity: 0.2;
+  }
+
+  .timeline-link-mentions {
+    .status .card {
+      display: none;
+    }
+  }
+}

src/pages/trending.jsx

···
 import '../components/links-bar.css';
+import './trending.css';
 
 import { MenuItem } from '@szhsin/react-menu';
 import { getBlurHashAverageColor } from 'fast-blurhash';
-import { useMemo, useRef, useState } from 'preact/hooks';
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import punycode from 'punycode/';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useSnapshot } from 'valtio';
 
 import Icon from '../components/icon';
 import Link from '../components/link';
+import Loader from '../components/loader';
 import Menu2 from '../components/menu2';
 import RelativeTime from '../components/relative-time';
 import Timeline from '../components/timeline';
···
 import useTitle from '../utils/useTitle';
 
 const LIMIT = 20;
+const TREND_CACHE_TIME = 10 * 60 * 1000; // 10 minutes
 
 const fetchLinks = pmem(
   (masto) => {
     return masto.v1.trends.links.list().next();
   },
   {
-    // News last much longer
-    maxAge: 10 * 60 * 1000, // 10 minutes
+    maxAge: TREND_CACHE_TIME,
+  },
+);
+
+const fetchHashtags = pmem(
+  (masto) => {
+    return masto.v1.trends.tags.list().next();
+  },
+  {
+    maxAge: TREND_CACHE_TIME,
   },
 );
 
-function fetchTrends(masto) {
+function fetchTrendsStatuses(masto) {
   if (supports('@pixelfed/trending')) {
     return masto.pixelfed.v2.discover.posts.trending.list({
       range: 'daily',
···
   return masto.v1.trends.statuses.list({
     limit: LIMIT,
   });
+}
+
+function fetchLinkList(masto, params) {
+  return masto.v1.timelines.link.list(params);
 }
 
 function Trending({ columnMode, ...props }) {
···
   const [links, setLinks] = useState([]);
   const trendIterator = useRef();
 
-  async function fetchTrend(firstLoad) {
+  async function fetchTrends(firstLoad) {
+    console.log('fetchTrend', firstLoad);
     if (firstLoad || !trendIterator.current) {
-      trendIterator.current = fetchTrends(masto);
+      trendIterator.current = fetchTrendsStatuses(masto);
 
       // Get hashtags
       if (supports('@mastodon/trending-hashtags')) {
         try {
-          const iterator = masto.v1.trends.tags.list();
-          const { value: tags } = await iterator.next();
+          // const iterator = masto.v1.trends.tags.list();
+          const { value: tags } = await fetchHashtags(masto);
           console.log('tags', tags);
           if (tags?.length) {
             setHashtags(tags);
···
     };
   }
 
+  // Link mentions
+  // https://github.com/mastodon/mastodon/pull/30381
+  const [currentLinkMentionsLoading, setCurrentLinkMentionsLoading] =
+    useState(false);
+  const currentLinkMentionsIterator = useRef();
+  const [currentLink, setCurrentLink] = useState(null);
+  const hasCurrentLink = !!currentLink;
+  const currentLinkRef = useRef();
+  const supportsTrendingLinkPosts = supports('@mastodon/trending-hashtags');
+
+  useEffect(() => {
+    if (currentLink && currentLinkRef.current) {
+      currentLinkRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'center',
+      });
+    }
+  }, [currentLink]);
+
+  const prevCurrentLink = useRef();
+  async function fetchLinkMentions(firstLoad) {
+    if (firstLoad || !currentLinkMentionsIterator.current) {
+      setCurrentLinkMentionsLoading(true);
+      currentLinkMentionsIterator.current = fetchLinkList(masto, {
+        url: currentLink,
+      });
+    }
+    prevCurrentLink.current = currentLink;
+    const results = await currentLinkMentionsIterator.current.next();
+    let { value } = results;
+    if (value?.length) {
+      value = filteredItems(value, 'public');
+      value.forEach((item) => {
+        saveStatus(item, instance);
+      });
+    }
+    if (prevCurrentLink.current === currentLink) {
+      setCurrentLinkMentionsLoading(false);
+    }
+    return {
+      ...results,
+      value,
+    };
+  }
+
   async function checkForUpdates() {
     try {
       const results = await masto.v1.trends.statuses
···
               }
 
               return (
-                <a
-                  key={url}
-                  href={url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  style={
-                    accentColor
-                      ? {
-                          '--accent-color': `rgb(${accentColor.join(',')})`,
-                          '--accent-alpha-color': `rgba(${accentColor.join(
-                            ',',
-                          )}, 0.4)`,
-                        }
-                      : {}
-                  }
-                >
-                  <article>
-                    <figure>
-                      <img
-                        src={image}
-                        alt={imageDescription}
-                        width={width}
-                        height={height}
-                        loading="lazy"
-                      />
-                    </figure>
-                    <div class="article-body">
-                      <header>
-                        <div class="article-meta">
-                          <span class="domain">{domain}</span>{' '}
-                          {!!publishedAt && <>&middot; </>}
-                          {!!publishedAt && (
-                            <>
-                              <RelativeTime
-                                datetime={publishedAt}
-                                format="micro"
-                              />
-                            </>
+                <div key={url}>
+                  <a
+                    ref={currentLink === url ? currentLinkRef : null}
+                    href={url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class={
+                      hasCurrentLink
+                        ? currentLink === url
+                          ? 'active'
+                          : 'inactive'
+                        : ''
+                    }
+                    style={
+                      accentColor
+                        ? {
+                            '--accent-color': `rgb(${accentColor.join(',')})`,
+                            '--accent-alpha-color': `rgba(${accentColor.join(
+                              ',',
+                            )}, 0.4)`,
+                          }
+                        : {}
+                    }
+                  >
+                    <article>
+                      <figure>
+                        <img
+                          src={image}
+                          alt={imageDescription}
+                          width={width}
+                          height={height}
+                          loading="lazy"
+                        />
+                      </figure>
+                      <div class="article-body">
+                        <header>
+                          <div class="article-meta">
+                            <span class="domain">{domain}</span>{' '}
+                            {!!publishedAt && <>&middot; </>}
+                            {!!publishedAt && (
+                              <>
+                                <RelativeTime
+                                  datetime={publishedAt}
+                                  format="micro"
+                                />
+                              </>
+                            )}
+                          </div>
+                          {!!title && (
+                            <h1
+                              class="title"
+                              lang={language}
+                              dir="auto"
+                              title={title}
+                            >
+                              {title}
+                            </h1>
                           )}
-                        </div>
-                        {!!title && (
-                          <h1
-                            class="title"
+                        </header>
+                        {!!description && (
+                          <p
+                            class="description"
                             lang={language}
                             dir="auto"
-                            title={title}
+                            title={description}
                           >
-                            {title}
-                          </h1>
+                            {description}
+                          </p>
                         )}
-                      </header>
-                      {!!description && (
-                        <p
-                          class="description"
-                          lang={language}
-                          dir="auto"
-                          title={description}
-                        >
-                          {description}
-                        </p>
-                      )}
-                    </div>
-                  </article>
-                </a>
+                      </div>
+                    </article>
+                  </a>
+                  {supportsTrendingLinkPosts && (
+                    <button
+                      type="button"
+                      class="small plain4 block"
+                      onClick={() => {
+                        setCurrentLink(url);
+                      }}
+                      disabled={url === currentLink}
+                    >
+                      <Icon icon="comment2" /> <span>Mentions</span>{' '}
+                      <Icon icon="chevron-down" />
+                    </button>
+                  )}
+                </div>
               );
             })}
           </div>
         )}
+        {supportsTrendingLinkPosts && !!links.length && (
+          <div
+            class={`timeline-header-block ${hasCurrentLink ? 'blended' : ''}`}
+          >
+            {hasCurrentLink ? (
+              <>
+                <div style={{ width: 50, flexShrink: 0, textAlign: 'center' }}>
+                  {currentLinkMentionsLoading ? (
+                    <Loader abrupt />
+                  ) : (
+                    <button
+                      type="button"
+                      class="light"
+                      onClick={() => {
+                        setCurrentLink(null);
+                      }}
+                    >
+                      <Icon icon="x" />
+                    </button>
+                  )}
+                </div>
+                <p>
+                  Showing posts mentioning{' '}
+                  <span class="link-text">
+                    {currentLink
+                      .replace(/^https?:\/\/(www\.)?/i, '')
+                      .replace(/\/$/, '')}
+                  </span>
+                </p>
+              </>
+            ) : (
+              <p class="insignificant">Trending posts</p>
+            )}
+          </div>
+        )}
       </>
     );
-  }, [hashtags, links]);
+  }, [hashtags, links, currentLink, currentLinkMentionsLoading]);
 
   return (
     <Timeline
···
       instance={instance}
       emptyText="No trending posts."
       errorText="Unable to load posts"
-      fetchItems={fetchTrend}
-      checkForUpdates={checkForUpdates}
+      fetchItems={hasCurrentLink ? fetchLinkMentions : fetchTrends}
+      checkForUpdates={hasCurrentLink ? undefined : checkForUpdates}
       checkForUpdatesInterval={5 * 60 * 1000} // 5 minutes
       useItemID
       headerStart={<></>}
···
       // allowFilters
       filterContext="public"
       timelineStart={TimelineStart}
+      refresh={currentLink}
+      clearWhenRefresh
+      view={hasCurrentLink ? 'link-mentions' : undefined}
       headerEnd={
         <Menu2
           portal