New Mentions page

src/app.jsx

@@ -36,6 +36,7 @@ import Home from './pages/home';
 import List from './pages/list';
 import Lists from './pages/lists';
 import Login from './pages/login';
+import Mentions from './pages/mentions';
 import Notifications from './pages/notifications';
 import Public from './pages/public';
 import Search from './pages/search';
@@ -223,6 +224,7 @@ function App() {
         {isLoggedIn && (
           <Route path="/notifications" element={<Notifications />} />
         )}
+        {isLoggedIn && <Route path="/mentions" element={<Mentions />} />}
         {isLoggedIn && <Route path="/following" element={<Following />} />}
         {isLoggedIn && <Route path="/b" element={<Bookmarks />} />}
         {isLoggedIn && <Route path="/f" element={<Favourites />} />}

src/components/menu.jsx

@@ -103,6 +103,9 @@ function NavMenu(props) {
               <Icon icon="following" size="l" /> <span>Following</span>
             </MenuLink>
           )}
+          <MenuLink to="/mentions">
+            <Icon icon="at" size="l" /> <span>Mentions</span>
+          </MenuLink>
           <MenuLink to="/notifications">
             <Icon icon="notification" size="l" /> <span>Notifications</span>
             {snapStates.notificationsShowNew && (

src/components/shortcuts-settings.jsx

@@ -18,16 +18,17 @@ const SHORTCUTS_LIMIT = 9;
 
 const TYPES = [
   'following',
+  'mentions',
   'notifications',
   'list',
   'public',
+  'trending',
   // NOTE: Hide for now
   // 'search', // Search on Mastodon ain't great
   // 'account-statuses', // Need @acct search first
+  'hashtag',
   'bookmarks',
   'favourites',
-  'hashtag',
-  'trending',
 ];
 const TYPE_TEXT = {
   following: 'Home / Following',
@@ -40,6 +41,7 @@ const TYPE_TEXT = {
   favourites: 'Favourites',
   hashtag: 'Hashtag',
   trending: 'Trending',
+  mentions: 'Mentions',
 };
 const TYPE_PARAMS = {
   list: [
@@ -101,6 +103,12 @@ export const SHORTCUTS_META = {
     path: '/',
     icon: 'home',
   },
+  mentions: {
+    id: 'mentions',
+    title: 'Mentions',
+    path: '/mentions',
+    icon: 'at',
+  },
   notifications: {
     id: 'notifications',
     title: 'Notifications',

src/pages/mentions.jsx

@@ -0,0 +1,76 @@
+import { useRef } from 'preact/hooks';
+
+import Timeline from '../components/timeline';
+import { api } from '../utils/api';
+import { saveStatus } from '../utils/states';
+import useTitle from '../utils/useTitle';
+
+const LIMIT = 20;
+
+function Mentions() {
+  useTitle('Mentions', '/mentions');
+  const { masto, instance } = api();
+  const mentionsIterator = useRef();
+  const latestItem = useRef();
+
+  async function fetchMentions(firstLoad) {
+    if (firstLoad || !mentionsIterator.current) {
+      mentionsIterator.current = masto.v1.notifications.list({
+        limit: LIMIT,
+        types: ['mention'],
+      });
+    }
+    const results = await mentionsIterator.current.next();
+    let { value } = results;
+    if (value?.length) {
+      if (firstLoad) {
+        latestItem.current = value[0].id;
+        console.log('First load', latestItem.current);
+      }
+
+      value.forEach(({ status: item }) => {
+        saveStatus(item, instance);
+      });
+    }
+    return {
+      ...results,
+      value: value.map((item) => item.status),
+    };
+  }
+
+  async function checkForUpdates() {
+    try {
+      const results = await masto.v1.notifications
+        .list({
+          limit: 1,
+          types: ['mention'],
+          since_id: latestItem.current,
+        })
+        .next();
+      let { value } = results;
+      console.log('checkForUpdates', latestItem.current, value);
+      if (value?.length) {
+        latestItem.current = value[0].id;
+        return true;
+      }
+      return false;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  return (
+    <Timeline
+      title="Mentions"
+      id="mentions"
+      emptyText="No one mentioned you :("
+      errorText="Unable to load mentions."
+      instance={instance}
+      fetchItems={fetchMentions}
+      checkForUpdates={checkForUpdates}
+      useItemID
+    />
+  );
+}
+
+export default Mentions;

src/pages/notifications.jsx

@@ -167,7 +167,7 @@ function Notifications() {
             <div class="header-side">
               <Menu />
               <Link to="/" class="button plain">
-                <Icon icon="home" size="l" />
+                <Icon icon="home" size="l" alt="Home" />
               </Link>
             </div>
             <h1>Notifications</h1>