New experiment: followed tag indicator

src/components/shortcuts-settings.jsx

···
 import tabMenuBarUrl from '../assets/tab-menu-bar.svg';
 
 import { api } from '../utils/api';
+import { fetchFollowedTags } from '../utils/followed-tags';
 import pmem from '../utils/pmem';
 import showToast from '../utils/show-toast';
 import states from '../utils/states';
···
     (async () => {
       if (currentType !== 'hashtag') return;
       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);
+        const tags = await fetchFollowedTags();
         setFollowedHashtags(tags);
       } catch (e) {
         console.error(e);

src/components/status.css

···
     transparent min(160px, 50%)
   );
 }
+.status-followed-tags {
+  background: linear-gradient(
+    160deg,
+    var(--hashtag-faded-color),
+    transparent min(160px, 50%)
+  );
+}
 .status-reply-to {
   background: linear-gradient(
     160deg,
···
     transparent min(160px, 50%)
   );
 }
-:is(.status-reblog, .status-group) .status-reply-to {
+:is(.status-reblog, .status-group, .status-followed-tags) .status-reply-to {
   background: linear-gradient(
     -20deg,
     var(--reply-to-faded-color),
···
   color: var(--group-color);
   margin-right: 4px;
   vertical-align: text-bottom;
+}
+.status-followed-tags {
+  .status-pre-meta {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    align-items: center;
+
+    .icon {
+      color: var(--hashtag-color);
+      margin-right: 4px;
+      vertical-align: text-bottom;
+    }
+    a {
+      color: var(--hashtag-text-color);
+      font-weight: bold;
+      font-size: 12px;
+      text-decoration-color: var(--hashtag-faded-color);
+      text-underline-offset: 2px;
+      text-decoration-thickness: 2px;
+      display: inline-block;
+      padding: 2px;
+      vertical-align: top;
+      text-transform: uppercase;
+      text-shadow: 0 1px var(--bg-color);
+
+      &:hover {
+        color: var(--text-color);
+        text-decoration-color: var(--hashtag-color);
+      }
+    }
+  }
+
+  .status-followed-tag-item {
+    color: var(--hashtag-text-color);
+    padding: 2px;
+    font-weight: bold;
+    font-size: 12px;
+    text-transform: uppercase;
+    margin-inline-end: 0.5em;
+  }
 }
 
 /* STATUS */

src/components/status.jsx

···
   statusID,
   status,
   instance: propInstance,
+  size = 'm',
+  contentTextWeight,
+  readOnly,
+  enableCommentHint,
   withinContext,
-  size = 'm',
   skeleton,
-  readOnly,
-  contentTextWeight,
   enableTranslate,
   forceTranslate: _forceTranslate,
   previewMode,
···
   onMediaClick,
   quoted,
   onStatusLinkClick = () => {},
-  enableCommentHint,
+  showFollowedTags,
 }) {
   if (skeleton) {
     return (
···
     uri,
     url,
     emojis,
+    tags,
     // Non-API props
     _deleted,
     _pinned,
···
         containerProps={{
           onMouseEnter: debugHover,
         }}
+        showFollowedTags
       />
     );
   }
···
         <Status
           status={statusID ? null : reblog}
           statusID={statusID ? reblog.id : null}
+          instance={instance}
+          size={size}
+          contentTextWeight={contentTextWeight}
+          readOnly={readOnly}
+          enableCommentHint
+        />
+      </div>
+    );
+  }
+
+  // Check followedTags
+  if (showFollowedTags && !!snapStates.statusFollowedTags[sKey]?.length) {
+    return (
+      <div
+        data-state-post-id={sKey}
+        class="status-followed-tags"
+        onMouseEnter={debugHover}
+      >
+        <div class="status-pre-meta">
+          <Icon icon="hashtag" size="l" />{' '}
+          {snapStates.statusFollowedTags[sKey].slice(0, 3).map((tag) => (
+            <Link
+              key={tag}
+              to={instance ? `/${instance}/t/${tag}` : `/t/${tag}`}
+              class="status-followed-tag-item"
+            >
+              {tag}
+            </Link>
+          ))}
+        </div>
+        <Status
+          status={statusID ? null : status}
+          statusID={statusID ? status.id : null}
           instance={instance}
           size={size}
           contentTextWeight={contentTextWeight}
···
 
 const unfurlMastodonLink = throttle(_unfurlMastodonLink);
 
-function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) {
+function FilteredStatus({
+  status,
+  filterInfo,
+  instance,
+  containerProps = {},
+  showFollowedTags,
+}) {
+  const snapStates = useSnapshot(states);
   const {
     id: statusID,
     account: { avatar, avatarStatic, bot, group },
···
   );
 
   const statusPeekRef = useTruncated();
-  const sKey =
+  const sKey = statusKey(status.id, instance);
+  const ssKey =
     statusKey(status.id, instance) +
     ' ' +
     (statusKey(reblog?.id, instance) || '');
···
   const url = instance
     ? `/${instance}/s/${actualStatusID}`
     : `/s/${actualStatusID}`;
+  const isFollowedTags =
+    showFollowedTags && !!snapStates.statusFollowedTags[sKey]?.length;
 
   return (
     <div
-      class={isReblog ? (group ? 'status-group' : 'status-reblog') : ''}
+      class={
+        isReblog
+          ? group
+            ? 'status-group'
+            : 'status-reblog'
+          : isFollowedTags
+          ? 'status-followed-tags'
+          : ''
+      }
       {...containerProps}
       title={statusPeekText}
       onContextMenu={(e) => {
···
       }}
       {...bindLongPressPeek()}
     >
-      <article data-state-post-id={sKey} class="status filtered" tabindex="-1">
+      <article data-state-post-id={ssKey} class="status filtered" tabindex="-1">
         <b
           class="status-filtered-badge clickable badge-meta"
           title={filterTitleStr}
···
             />{' '}
             {isReblog ? (
               'boosted'
+            ) : isFollowedTags ? (
+              <span>
+                {snapStates.statusFollowedTags[sKey].slice(0, 3).map((tag) => (
+                  <span key={tag} class="status-followed-tag-item">
+                    #{tag}
+                  </span>
+                ))}
+              </span>
             ) : (
               <RelativeTime datetime={createdAtDate} format="micro" />
             )}

src/components/timeline.jsx

···
   refresh,
   view,
   filterContext,
+  showFollowedTags,
 }) {
   const snapStates = useSnapshot(states);
   const [items, setItems] = useState([]);
···
                     filterContext={filterContext}
                     key={status.id + status?._pinned + view}
                     view={view}
+                    showFollowedTags={showFollowedTags}
                   />
                 ))}
                 {showMore &&
···
   // allowFilters,
   filterContext,
   view,
+  showFollowedTags,
 }) {
   const { id: statusID, reblog, items, type, _pinned } = status;
   if (_pinned) useItemID = false;
···
               !_differentAuthor &&
               !items[i - 1]._differentAuthor &&
               !items[i + 1]._differentAuthor)));
+      const isStart = i === 0;
       const isEnd = i === items.length - 1;
       return (
         <li
           key={`timeline-${statusID}`}
           class={`timeline-item-container timeline-item-container-type-${type} timeline-item-container-${
-            i === 0 ? 'start' : isEnd ? 'end' : 'middle'
+            isStart ? 'start' : isEnd ? 'end' : 'middle'
           } ${_differentAuthor ? 'timeline-item-diff-author' : ''}`}
         >
           <Link class="status-link timeline-item" to={url}>
···
                 statusID={statusID}
                 instance={instance}
                 enableCommentHint={isEnd}
+                showFollowedTags={showFollowedTags}
                 // allowFilters={allowFilters}
               />
             ) : (
···
                 status={item}
                 instance={instance}
                 enableCommentHint={isEnd}
+                showFollowedTags={showFollowedTags}
                 // allowFilters={allowFilters}
               />
             )}
···
             statusID={statusID}
             instance={instance}
             enableCommentHint
+            showFollowedTags={showFollowedTags}
             // allowFilters={allowFilters}
           />
         ) : (
···
             status={status}
             instance={instance}
             enableCommentHint
+            showFollowedTags={showFollowedTags}
             // allowFilters={allowFilters}
           />
         )}

src/index.css

···
   --reply-to-text-color: #b36200;
   --favourite-color: var(--red-color);
   --reply-to-faded-color: #ffa60020;
+  --hashtag-color: LightSeaGreen;
+  --hashtag-faded-color: color-mix(
+    in srgb,
+    var(--hashtag-color) 15%,
+    transparent
+  );
+  --hashtag-text-color: color-mix(
+    in lch,
+    var(--hashtag-color) 40%,
+    var(--text-color) 60%
+  );
   --outline-color: rgba(128, 128, 128, 0.2);
   --outline-hover-color: rgba(128, 128, 128, 0.7);
   --divider-color: rgba(0, 0, 0, 0.1);

src/pages/followed-hashtags.jsx

···
 import Loader from '../components/loader';
 import NavMenu from '../components/nav-menu';
 import { api } from '../utils/api';
+import { fetchFollowedTags } from '../utils/followed-tags';
 import useTitle from '../utils/useTitle';
-
-const LIMIT = 200;
 
 function FollowedHashtags() {
   const { masto, instance } = api();
···
     setUIState('loading');
     (async () => {
       try {
-        const iterator = masto.v1.followedTags.list({
-          limit: LIMIT,
-        });
-        const tags = [];
-        do {
-          const { value, done } = await iterator.next();
-          if (done || value?.length === 0) break;
-          tags.push(...value);
-        } while (true);
-        tags.sort((a, b) => a.name.localeCompare(b.name));
-        console.log(tags);
+        const tags = await fetchFollowedTags();
         setFollowedHashtags(tags);
         setUIState('default');
       } catch (e) {

src/pages/following.jsx

···
 import { filteredItems } from '../utils/filters';
 import states from '../utils/states';
 import { getStatus, saveStatus } from '../utils/states';
-import { dedupeBoosts } from '../utils/timeline-utils';
+import {
+  assignFollowedTags,
+  clearFollowedTagsState,
+  dedupeBoosts,
+} from '../utils/timeline-utils';
 import useTitle from '../utils/useTitle';
 
 const LIMIT = 20;
···
         saveStatus(item, instance);
       });
       value = dedupeBoosts(value, instance);
+      if (firstLoad) clearFollowedTagsState();
+      assignFollowedTags(value, instance);
 
       // ENFORCE sort by datetime (Latest first)
       value.sort((a, b) => {
···
       {...props}
       // allowFilters
       filterContext="home"
+      showFollowedTags
     />
   );
 }

src/utils/followed-tags.js

···
+import { api } from '../utils/api';
+import store from '../utils/store';
+
+const LIMIT = 200;
+const MAX_FETCH = 10;
+
+export async function fetchFollowedTags() {
+  const { masto } = api();
+  const iterator = masto.v1.followedTags.list({
+    limit: LIMIT,
+  });
+  const tags = [];
+  let fetchCount = 0;
+  do {
+    const { value, done } = await iterator.next();
+    if (done || value?.length === 0) break;
+    tags.push(...value);
+    fetchCount++;
+  } while (fetchCount < MAX_FETCH);
+  tags.sort((a, b) => a.name.localeCompare(b.name));
+  console.log(tags);
+
+  if (tags.length) {
+    setTimeout(() => {
+      // Save to local storage, with saved timestamp
+      store.account.set('followedTags', {
+        tags,
+        updatedAt: Date.now(),
+      });
+    }, 1);
+  }
+
+  return tags;
+}
+
+const MAX_AGE = 24 * 60 * 60 * 1000; // 1 day
+export async function getFollowedTags() {
+  try {
+    const { tags, updatedAt } = store.account.get('followedTags') || {};
+    if (!tags?.length) return await fetchFollowedTags();
+    if (Date.now() - updatedAt > MAX_AGE) {
+      // Stale-while-revalidate
+      fetchFollowedTags();
+      return tags;
+    }
+    return tags;
+  } catch (e) {
+    return [];
+  }
+}
+
+const fauxDiv = document.createElement('div');
+export const extractTagsFromStatus = (content) => {
+  if (!content) return [];
+  if (content.indexOf('#') === -1) return [];
+  fauxDiv.innerHTML = content;
+  const hashtagLinks = fauxDiv.querySelectorAll('a.hashtag');
+  if (!hashtagLinks.length) return [];
+  return Array.from(hashtagLinks).map((a) =>
+    a.innerText.trim().replace(/^[^#]*#+/, ''),
+  );
+};

src/utils/states.js

···
   scrollPositions: {},
   unfurledLinks: {},
   statusQuotes: {},
+  statusFollowedTags: {},
   accounts: {},
   routeNotification: null,
   // Modals

src/utils/timeline-utils.jsx

···
+import { extractTagsFromStatus, getFollowedTags } from './followed-tags';
+import states, { statusKey } from './states';
 import store from './store';
 
 export function groupBoosts(values) {
···
 
   return newItems;
 }
+
+export async function assignFollowedTags(items, instance) {
+  const followedTags = await getFollowedTags(); // [{name: 'tag'}, {...}]
+  if (!followedTags.length) return;
+  const { statusFollowedTags } = states;
+  items.forEach((item) => {
+    if (item.reblog) return;
+    const { id, content, tags = [] } = item;
+    const sKey = statusKey(id, instance);
+    if (statusFollowedTags[sKey]?.length) return;
+    const extractedTags = extractTagsFromStatus(content);
+    if (!extractedTags.length && !tags.length) return;
+    const itemFollowedTags = followedTags.reduce((acc, tag) => {
+      if (
+        extractedTags.some((t) => t.toLowerCase() === tag.name.toLowerCase()) ||
+        tags.some((t) => t.name.toLowerCase() === tag.name.toLowerCase())
+      ) {
+        acc.push(tag.name);
+      }
+      return acc;
+    }, []);
+    if (itemFollowedTags.length) {
+      statusFollowedTags[sKey] = itemFollowedTags;
+    }
+  });
+}
+
+export function clearFollowedTagsState() {
+  states.statusFollowedTags = {};
+}