New "Private" tab in Mentions

This is still very clunky

src/app.css

@@ -1900,6 +1900,9 @@ ul.link-list li a .icon {
   );
   align-items: center;
 }
+.filter-bar.centered {
+  justify-content: center;
+}
 @media (min-width: 40em) {
   .filter-bar {
     background-color: transparent;

src/pages/mentions.jsx

@@ -1,5 +1,7 @@
-import { useRef } from 'preact/hooks';
+import { useMemo, useRef } from 'preact/hooks';
+import { useSearchParams } from 'react-router-dom';
 
+import Link from '../components/link';
 import Timeline from '../components/timeline';
 import { api } from '../utils/api';
 import { saveStatus } from '../utils/states';
@@ -7,9 +9,12 @@ import useTitle from '../utils/useTitle';
 
 const LIMIT = 20;
 
-function Mentions() {
+function Mentions(props) {
   useTitle('Mentions', '/mentions');
   const { masto, instance } = api();
+  const [searchParams] = useSearchParams();
+  const type = props?.type || searchParams.get('type');
+
   const mentionsIterator = useRef();
   const latestItem = useRef();
 
@@ -34,11 +39,68 @@ function Mentions() {
     }
     return {
       ...results,
-      value: value.map((item) => item.status),
+      value: value?.map((item) => item.status),
     };
   }
 
+  const conversationsIterator = useRef();
+  const latestConversationItem = useRef();
+  async function fetchConversations(firstLoad) {
+    if (firstLoad || !conversationsIterator.current) {
+      conversationsIterator.current = masto.v1.conversations.list({
+        limit: LIMIT,
+      });
+    }
+    const results = await conversationsIterator.current.next();
+    let { value } = results;
+    if (value?.length) {
+      if (firstLoad) {
+        latestConversationItem.current = value[0].lastStatus.id;
+        console.log('First load', latestConversationItem.current);
+      }
+
+      value.forEach(({ lastStatus: item }) => {
+        saveStatus(item, instance);
+      });
+    }
+    console.log('results', results);
+    return {
+      ...results,
+      value: value?.map((item) => item.lastStatus),
+    };
+  }
+
+  function fetchItems(...args) {
+    if (type === 'private') {
+      return fetchConversations(...args);
+    }
+    return fetchMentions(...args);
+  }
+
   async function checkForUpdates() {
+    if (type === 'private') {
+      try {
+        const results = await masto.v1.conversations
+          .list({
+            limit: 1,
+            since_id: latestConversationItem.current,
+          })
+          .next();
+        let { value } = results;
+        console.log(
+          'checkForUpdates PRIVATE',
+          latestConversationItem.current,
+          value,
+        );
+        if (value?.length) {
+          latestConversationItem.current = value[0].lastStatus.id;
+          return true;
+        }
+        return false;
+      } catch (e) {
+        return false;
+      }
+    } else {
       try {
         const results = await masto.v1.notifications
           .list({
@@ -48,7 +110,7 @@ function Mentions() {
           })
           .next();
         let { value } = results;
-      console.log('checkForUpdates', latestItem.current, value);
+        console.log('checkForUpdates ALL', latestItem.current, value);
         if (value?.length) {
           latestItem.current = value[0].id;
           return true;
@@ -58,6 +120,23 @@ function Mentions() {
         return false;
       }
     }
+  }
+
+  const TimelineStart = useMemo(() => {
+    return (
+      <div class="filter-bar centered">
+        <Link to="/mentions" class={!type ? 'is-active' : ''}>
+          All
+        </Link>
+        <Link
+          to="/mentions?type=private"
+          class={type === 'private' ? 'is-active' : ''}
+        >
+          Private
+        </Link>
+      </div>
+    );
+  }, [type]);
 
   return (
     <Timeline
@@ -66,9 +145,11 @@ function Mentions() {
       emptyText="No one mentioned you :("
       errorText="Unable to load mentions."
       instance={instance}
-      fetchItems={fetchMentions}
+      fetchItems={fetchItems}
       checkForUpdates={checkForUpdates}
       useItemID
+      timelineStart={TimelineStart}
+      refresh={type}
     />
   );
 }