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,31 +39,105 @@ function Mentions() {
     }
     return {
       ...results,
-      value: value.map((item) => item.status),
+      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;
+  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({
+            limit: 1,
+            types: ['mention'],
+            since_id: latestItem.current,
+          })
+          .next();
+        let { value } = results;
+        console.log('checkForUpdates ALL', latestItem.current, value);
+        if (value?.length) {
+          latestItem.current = value[0].id;
+          return true;
+        }
+        return false;
+      } catch (e) {
+        return false;
       }
-      return false;
-    } catch (e) {
-      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
       title="Mentions"
@@ -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}
     />
   );
 }