Add Followed Hashtags

src/app.css

@@ -1217,6 +1217,42 @@ meter.donut:is(.danger, .explode):after {
   color: var(--text-insignificant-color);
 }
 
+/* LINK LISTS? */
+
+ul.link-list {
+  list-style: none;
+  padding: 16px;
+  margin: 0;
+}
+ul.link-list li {
+  padding: 0;
+  margin: 0;
+}
+ul.link-list li a {
+  display: block;
+  background-color: var(--bg-faded-color);
+  border-radius: 8px;
+  line-height: 1.25;
+  padding: 12px;
+  text-decoration: none;
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 500;
+}
+ul.link-list li a * {
+  vertical-align: middle;
+}
+
+@media (min-width: 40em) {
+  ul.link-list li a {
+    background-color: var(--bg-color);
+  }
+}
+
+/* OTHERS */
+
 @media (min-width: 40em) {
   html,
   body {

src/app.jsx

@@ -30,6 +30,7 @@ import NotFound from './pages/404';
 import AccountStatuses from './pages/account-statuses';
 import Bookmarks from './pages/bookmarks';
 import Favourites from './pages/favourites';
+import FollowedHashtags from './pages/followed-hashtags';
 import Following from './pages/following';
 import Hashtags from './pages/hashtags';
 import Home from './pages/home';
@@ -215,6 +216,7 @@ function App() {
             <Route path=":id" element={<List />} />
           </Route>
         )}
+        {isLoggedIn && <Route path="/ft" element={<FollowedHashtags />} />}
         <Route path="/:instance?/t/:hashtag" element={<Hashtags />} />
         <Route path="/:instance?/a/:id" element={<AccountStatuses />} />
         <Route path="/:instance?/p">

src/components/icon.jsx

@@ -51,6 +51,7 @@ const ICONS = {
   menu: 'mingcute:rows-4-line',
   list: 'mingcute:list-check-line',
   search: 'mingcute:search-2-line',
+  hashtag: 'mingcute:hashtag-line',
 };
 
 const modules = import.meta.glob('/node_modules/@iconify-icons/mingcute/*.js');

src/components/menu.jsx

@@ -28,15 +28,18 @@ function NavMenu(props) {
         <Icon icon="notification" size="l" /> <span>Notifications</span>
       </MenuLink>
       <MenuDivider />
+      <MenuLink to="/l">
+        <Icon icon="list" size="l" /> <span>Lists</span>
+      </MenuLink>
+      <MenuLink to="/ft">
+        <Icon icon="hashtag" size="l" /> <span>Followed Hashtags</span>
+      </MenuLink>
       <MenuLink to="/b">
         <Icon icon="bookmark" size="l" /> <span>Bookmarks</span>
       </MenuLink>
       <MenuLink to="/f">
         <Icon icon="heart" size="l" /> <span>Favourites</span>
       </MenuLink>
-      <MenuLink to="/l">
-        <Icon icon="list" size="l" /> <span>Lists</span>
-      </MenuLink>
       <MenuDivider />
       {/* <MenuLink to={`/search`}>
         <Icon icon="search" size="l" /> <span>Search</span>

src/pages/followed-hashtags.jsx

@@ -0,0 +1,74 @@
+import { useEffect, useState } from 'preact/hooks';
+
+import Icon from '../components/icon';
+import Link from '../components/link';
+import Loader from '../components/loader';
+import Menu from '../components/menu';
+import { api } from '../utils/api';
+
+function FollowedHashtags() {
+  const { masto, instance } = api();
+  const [uiState, setUiState] = useState('default');
+
+  const [followedHashtags, setFollowedHashtags] = useState([]);
+  useEffect(() => {
+    setUiState('loading');
+    (async () => {
+      try {
+        const tags = await masto.v1.followedTags.list();
+        console.log(tags);
+        setFollowedHashtags(tags);
+        setUiState('default');
+      } catch (e) {
+        console.error(e);
+        setUiState('error');
+      }
+    })();
+  }, []);
+
+  return (
+    <div id="followed-hashtags-page" class="deck-container">
+      <div class="timeline-deck deck">
+        <header>
+          <div class="header-grid">
+            <div class="header-side">
+              <Menu />
+              <Link to="/" class="button plain">
+                <Icon icon="home" size="l" />
+              </Link>
+            </div>
+            <h1>Followed Hashtags</h1>
+            <div class="header-side" />
+          </div>
+        </header>
+        <main>
+          {followedHashtags.length > 0 ? (
+            <ul class="link-list">
+              {followedHashtags.map((tag) => (
+                <li>
+                  <Link
+                    to={
+                      instance ? `/${instance}/t/${tag.name}` : `/t/${tag.name}`
+                    }
+                  >
+                    <Icon icon="hashtag" /> <span>{tag.name}</span>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          ) : uiState === 'loading' ? (
+            <p class="ui-state">
+              <Loader />
+            </p>
+          ) : uiState === 'error' ? (
+            <p class="ui-state">Unable to load followed hashtags.</p>
+          ) : (
+            <p class="ui-state">No hashtags followed yet.</p>
+          )}
+        </main>
+      </div>
+    </div>
+  );
+}
+
+export default FollowedHashtags;

src/pages/lists.css

@@ -1,25 +0,0 @@
-#lists-page ul {
-  list-style: none;
-  padding: 16px;
-  margin: 0;
-}
-#lists-page ul li {
-  padding: 0;
-  margin: 0;
-}
-#lists-page ul li a {
-  display: block;
-  background-color: var(--bg-faded-color);
-  border-radius: 8px;
-  line-height: 1.25;
-  padding: 12px;
-  text-decoration: none;
-  line-height: 1.4;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-weight: 500;
-}
-#lists-page ul li a * {
-  vertical-align: middle;
-}

src/pages/lists.jsx

@@ -1,5 +1,3 @@
-import './lists.css';
-
 import { useEffect, useState } from 'preact/hooks';
 
 import Icon from '../components/icon';
@@ -45,7 +43,7 @@ function Lists() {
         </header>
         <main>
           {lists.length > 0 ? (
-            <ul>
+            <ul class="link-list">
               {lists.map((list) => (
                 <li>
                   <Link to={`/l/${list.id}`}>