unreads: reuse getFirstUnread hook

This hook was originally extracted from the Unread banner and then reused in the Scroller; now pulling it back in to the Banner

ui/src/chat/ChatUnreadAlerts.tsx

@@ -1,11 +1,9 @@
 import React, { useCallback } from 'react';
 import { format, isToday } from 'date-fns';
 import { useLocation, useNavigate } from 'react-router';
-import bigInt from 'big-integer';
 import XIcon from '@/components/icons/XIcon';
-import { ChatBrief } from '@/types/chat';
 import { pluralize } from '../logic/utils';
-import { useChatKeys, useChatState } from '../state/chat';
+import { useChatState, useGetFirstUnreadID } from '../state/chat';
 import { useChatInfo } from './useChatStore';
 
 interface ChatUnreadAlertsProps {
@@ -21,23 +19,13 @@ export default function ChatUnreadAlerts({ whom }: ChatUnreadAlertsProps) {
   const navigate = useNavigate();
   const location = useLocation();
   // TODO: how to handle replies?
-  const chatKeys = useChatKeys({ replying: false });
-  const goToFirstUnread = useCallback(
-    (b: ChatBrief) => {
-      const { 'read-id': lastRead } = b;
-      if (!lastRead) {
-        return;
-      }
-      // lastRead is formatted like: ~zod/123.456.789...
-      const lastReadBN = bigInt(lastRead.split('/')[1].replaceAll('.', ''));
-      const firstUnread = chatKeys.find((key) => key.gt(lastReadBN));
-      if (!firstUnread) {
-        return;
-      }
-      navigate(`${location.pathname}?msg=${firstUnread.toString()}`);
-    },
-    [chatKeys, location.pathname, navigate]
-  );
+  const firstUnreadID = useGetFirstUnreadID(whom);
+  const goToFirstUnread = useCallback(() => {
+    if (!firstUnreadID) {
+      return;
+    }
+    navigate(`${location.pathname}?msg=${firstUnreadID.toString()}`);
+  }, [firstUnreadID, location.pathname, navigate]);
 
   if (!chatInfo.unread || chatInfo.unread.seen) {
     return null;
@@ -62,7 +50,7 @@ export default function ChatUnreadAlerts({ whom }: ChatUnreadAlertsProps) {
       <div className="absolute top-2 left-1/2 z-20 flex w-full -translate-x-1/2 flex-wrap items-center justify-center gap-2">
         <button
           className="button whitespace-nowrap bg-blue-soft text-sm text-blue dark:bg-blue-900 lg:text-base"
-          onClick={() => goToFirstUnread(brief)}
+          onClick={goToFirstUnread}
         >
           <span className="whitespace-nowrap font-normal">
             {unreadMessage}&nbsp;&mdash;&nbsp;Click to View