ops: sync staging to dev

apps/tlon-web/src/chat/ChatInput/ChatInput.tsx

@@ -70,7 +70,6 @@ import {
 } from '@/state/chat';
 import { useGroupFlag } from '@/state/groups';
 import { useFileStore, useUploader } from '@/state/storage';
-import { useUnreadsStore } from '@/state/unreads';
 
 interface ChatInputProps {
   whom: string;
@@ -392,9 +391,6 @@ export default function ChatInput({
       onUpdate.current.flush();
       setDraft(inlinesToJSON(['']));
       setTimeout(() => {
-        const key = replying ? getThreadKey(whom, replying) : getKey(whom);
-        useUnreadsStore.getState().read(key);
-        useUnreadsStore.getState().bump(key);
         clearAttachments();
       }, 0);
     },

apps/tlon-web/src/chat/ChatMessage/ChatMessage.tsx

@@ -2,6 +2,8 @@
 import { Editor } from '@tiptap/react';
 import {
   ActivitySummary,
+  getChannelSource,
+  getDmSource,
   getKey,
   getThreadKey,
 } from '@tloncorp/shared/dist/urbit/activity';
@@ -12,7 +14,7 @@ import {
   constructStory,
 } from '@tloncorp/shared/dist/urbit/channel';
 import { daToUnix } from '@urbit/api';
-import { formatUd, unixToDa } from '@urbit/aura';
+import { formatUd } from '@urbit/aura';
 import { BigInteger } from 'big-integer';
 import bigInt from 'big-integer';
 import cn from 'classnames';
@@ -43,12 +45,14 @@ import { useMarkChannelRead } from '@/logic/channel';
 import { JSONToInlines, diaryMixedToJSON } from '@/logic/tiptap';
 import useLongPress from '@/logic/useLongPress';
 import { useIsMobile } from '@/logic/useMedia';
+import { useStickyUnread } from '@/logic/useStickyUnread';
 import {
   useIsDmOrMultiDm,
   whomIsDm,
   whomIsFlag,
   whomIsMultiDm,
 } from '@/logic/utils';
+import { useSourceActivity, useThreadActivity } from '@/state/activity';
 import {
   useEditPostMutation,
   useIsEdited,
@@ -60,7 +64,7 @@ import {
   useMessageToggler,
   useTrackedMessageStatus,
 } from '@/state/chat';
-import { Unread, useUnread, useUnreadsStore } from '@/state/unreads';
+import { useRouteGroup } from '@/state/groups';
 
 import ReactionDetails from '../ChatReactions/ReactionDetails';
 import {
@@ -87,11 +91,11 @@ export interface ChatMessageProps {
 }
 
 function getUnreadDisplay(
-  unread: Unread | undefined,
+  unread: ActivitySummary,
   id: string,
-  thread: Unread | undefined
+  thread: ActivitySummary
 ): 'none' | 'top' | 'thread' | 'top-with-thread' {
-  const isTop = unread?.lastUnread?.id === id && unread.status !== 'read';
+  const isTop = unread.unread?.id === id;
 
   // if this message is the oldest unread in the main chat,
   // and has an unread thread, show the divider and thread indicator
@@ -101,7 +105,7 @@ function getUnreadDisplay(
 
   // if we have a thread, only mark it as explicitly unread
   // if it's not nested under main chat unreads
-  if (thread && thread.status !== 'read') {
+  if (thread && thread.count > 0) {
     return 'thread';
   }
 
@@ -166,6 +170,7 @@ const ChatMessage = React.memo<
         idShip: string;
         idTime: string;
       }>();
+      const groupFlag = useRouteGroup();
       const isThread = !!idShip && !!idTime;
       const threadOpId = isThread ? `${idShip}/${idTime}` : '';
       const isThreadOp = threadOpId === seal.id && hideReplies;
@@ -176,20 +181,28 @@ const ChatMessage = React.memo<
       const unreadId = !isChannel ? seal.id : formatUd(bigInt(seal.id));
       const chatInfo = useChatInfo(whom);
       const unreadsKey = getKey(whom);
-      const unread = useUnread(unreadsKey);
-      const threadUr = useUnread(getThreadKey(whom, unreadId));
+      const { activity: summary } = useSourceActivity(unreadsKey);
+      const unread = useStickyUnread(summary);
+      const nest = `chat/${whom}`;
+      const source = isChannel
+        ? getChannelSource(groupFlag, nest)
+        : getDmSource(whom);
+      const { activity: threadSum } = useThreadActivity(
+        source,
+        getThreadKey(whom, unreadId)
+      );
       const unreadDisplay = useMemo(
         () =>
           getUnreadDisplay(
             unread,
             !isChannel ? unreadId : `${essay.author}/${unreadId}`,
-            threadUr
+            threadSum
           ),
-        [unread, threadUr, unreadId]
+        [unread, threadSum, unreadId]
       );
       const topUnread =
         unreadDisplay === 'top' || unreadDisplay === 'top-with-thread';
-      const threadNotify = threadUr?.notify;
+      const threadNotify = threadSum.notify;
       const threadUnread =
         unreadDisplay === 'thread' ||
         unreadDisplay === 'top-with-thread' ||
@@ -211,41 +224,18 @@ const ChatMessage = React.memo<
       });
 
       useEffect(() => {
-        if (!inView || !unread) {
+        const mainUnread =
+          unreadDisplay === 'top' || unreadDisplay === 'top-with-thread';
+        if (!inView || !mainUnread) {
           return;
         }
 
-        const unseen = unread.status === 'unread';
-        const { seen: markSeen, delayedRead } = useUnreadsStore.getState();
-        /* once the unseen marker comes into view we need to mark it
-            as seen and start a timer to mark it read so it goes away.
-            we ensure that the brief matches and hasn't changed before
-            doing so. we don't want to accidentally clear unreads when
-            the state has changed
-        */
-        if (
-          inView &&
-          (unreadDisplay === 'top' || unreadDisplay === 'top-with-thread') &&
-          unseen
-        ) {
-          markSeen(unreadsKey);
-          delayedRead(unreadsKey, () => {
-            if (isDMOrMultiDM) {
-              markDmRead();
-            } else {
-              markReadChannel();
-            }
-          });
+        if (isDMOrMultiDM) {
+          markDmRead();
+        } else {
+          markReadChannel();
         }
-      }, [
-        inView,
-        unread,
-        unreadsKey,
-        unreadDisplay,
-        isDMOrMultiDM,
-        markReadChannel,
-        markDmRead,
-      ]);
+      }, [inView, unreadDisplay, isDMOrMultiDM, markReadChannel, markDmRead]);
 
       const cacheId = {
         author: window.our,
@@ -420,8 +410,12 @@ const ChatMessage = React.memo<
           id="chat-message-target"
           {...handlers}
         >
-          {unread && topUnread ? (
-            <DateDivider date={unix} unreadCount={unread.count} ref={viewRef} />
+          {unread.unread && topUnread ? (
+            <DateDivider
+              date={unix}
+              unreadCount={unread.unread.count}
+              ref={viewRef}
+            />
           ) : null}
           {newDay && unreadDisplay === 'none' ? (
             <DateDivider date={unix} />
@@ -542,10 +536,7 @@ const ChatMessage = React.memo<
 
                         <span
                           className={cn(
-                            threadUnread &&
-                              threadUr?.status !== 'unread' &&
-                              'mr-2',
-                            threadUnread && threadUr?.status === 'unread'
+                            threadUnread
                               ? threadNotify
                                 ? 'text-blue'
                                 : ''
@@ -554,7 +545,7 @@ const ChatMessage = React.memo<
                         >
                           {replyCount} {replyCount > 1 ? 'replies' : 'reply'}{' '}
                         </span>
-                        {threadUnread && threadUr?.status === 'unread' ? (
+                        {threadUnread ? (
                           <UnreadIndicator
                             count={0}
                             notify={threadNotify}

apps/tlon-web/src/chat/ChatMessage/DeletedChatMessage.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable react/no-unused-prop-types */
 import { getKey } from '@tloncorp/shared/dist/urbit/activity';
 import { daToUnix } from '@urbit/api';
-import { formatUd } from '@urbit/aura';
 import { BigInteger } from 'big-integer';
 import cn from 'classnames';
 import { format } from 'date-fns';
@@ -10,7 +9,8 @@ import { useInView } from 'react-intersection-observer';
 
 import DateDivider from '@/chat/ChatMessage/DateDivider';
 import { useMarkChannelRead } from '@/logic/channel';
-import { useUnread, useUnreadsStore } from '@/state/unreads';
+import { useStickyUnread } from '@/logic/useStickyUnread';
+import { useSourceActivity } from '@/state/activity';
 
 export interface DeletedChatMessageProps {
   whom: string;
@@ -52,9 +52,11 @@ const DeletedChatMessage = React.memo<
       const container = useRef<HTMLDivElement>(null);
       const unix = new Date(daToUnix(time));
       const unreadsKey = getKey(whom);
-      const unread = useUnread(unreadsKey);
+      const { activity } = useSourceActivity(unreadsKey);
+      const summary = useStickyUnread(activity);
+      const { unread } = summary;
       const isUnread = useMemo(
-        () => unread && unread.lastUnread?.time === time.toString(),
+        () => unread && unread.time === time.toString(),
         [unread, time]
       );
       const { markRead: markReadChannel } = useMarkChannelRead(`chat/${whom}`);
@@ -64,23 +66,12 @@ const DeletedChatMessage = React.memo<
       });
 
       useEffect(() => {
-        if (!inView || !unread) {
+        if (!inView || !isUnread) {
           return;
         }
 
-        const unseen = unread.status === 'unread';
-        const { seen: markSeen, delayedRead } = useUnreadsStore.getState();
-        /* once the unseen marker comes into view we need to mark it
-            as seen and start a timer to mark it read so it goes away.
-            we ensure that the brief matches and hasn't changed before
-            doing so. we don't want to accidentally clear unreads when
-            the state has changed
-        */
-        if (inView && isUnread && unseen) {
-          markSeen(unreadsKey);
-          delayedRead(unreadsKey, markReadChannel);
-        }
-      }, [inView, unread, unreadsKey, isUnread, markReadChannel]);
+        markReadChannel();
+      }, [inView, isUnread, markReadChannel]);
 
       return (
         <div

apps/tlon-web/src/chat/ChatThread/ChatThread.tsx

@@ -1,6 +1,5 @@
-import { getThreadKey } from '@tloncorp/shared/dist/urbit/activity';
 import { ReplyTuple } from '@tloncorp/shared/dist/urbit/channel';
-import { formatUd, unixToDa } from '@urbit/aura';
+import { formatUd } from '@urbit/aura';
 import bigInt from 'big-integer';
 import cn from 'classnames';
 import _ from 'lodash';
@@ -22,11 +21,7 @@ import EllipsisIcon from '@/components/icons/EllipsisIcon';
 import X16Icon from '@/components/icons/X16Icon';
 import keyMap from '@/keyMap';
 import { useDragAndDrop } from '@/logic/DragAndDropContext';
-import {
-  useChannelCompatibility,
-  useChannelFlag,
-  useMarkChannelRead,
-} from '@/logic/channel';
+import { useChannelCompatibility, useChannelFlag } from '@/logic/channel';
 import { useBottomPadding } from '@/logic/position';
 import { useIsScrolling } from '@/logic/scroll';
 import { firstInlineSummary } from '@/logic/tiptap';
@@ -44,10 +39,9 @@ import {
   useRouteGroup,
   useVessel,
 } from '@/state/groups/groups';
-import { unreadStoreLogger, useUnread, useUnreadsStore } from '@/state/unreads';
 
 import ChatScrollerPlaceholder from '../ChatScroller/ChatScrollerPlaceholder';
-import { chatStoreLogger, useChatStore } from '../useChatStore';
+import { useChatStore } from '../useChatStore';
 
 export default function ChatThread() {
   const { name, chShip, ship, chName, idTime } = useParams<{
@@ -87,8 +81,6 @@ export default function ChatThread() {
     }),
     [id, idTime]
   );
-  const chatUnreadsKey = getThreadKey(flag, time);
-  const { markRead } = useMarkChannelRead(nest, msgKey);
   const replies = note?.seal.replies || null;
   const idTimeIsNumber = !Number.isNaN(Number(idTime));
   if (note && replies !== null && idTimeIsNumber) {
@@ -132,8 +124,6 @@ export default function ChatThread() {
     _.intersection(perms.writers, vessel.sects).length !== 0;
   const { compatible, text } = useChannelCompatibility(`chat/${flag}`);
   const { paddingBottom } = useBottomPadding();
-  const readTimeout = useUnread(chatUnreadsKey)?.readTimeout;
-  const path = location.pathname;
   const activeTab = useActiveTab();
 
   const returnURL = useCallback(
@@ -154,10 +144,8 @@ export default function ChatThread() {
 
   const onAtBottom = useCallback(() => {
     const { bottom } = useChatStore.getState();
-    const { delayedRead } = useUnreadsStore.getState();
     bottom(true);
-    delayedRead(chatUnreadsKey, markRead);
-  }, [chatUnreadsKey, markRead]);
+  }, []);
 
   const onEscape = useCallback(
     (e: KeyboardEvent) => {
@@ -169,19 +157,6 @@ export default function ChatThread() {
   );
   useEventListener('keydown', onEscape, threadRef);
 
-  // read the messages once navigated away
-  useEffect(() => {
-    return () => {
-      const winPath = window.location.pathname.replace('/apps/groups', '');
-      if (winPath !== path && readTimeout) {
-        unreadStoreLogger.log(winPath, path);
-        unreadStoreLogger.log('marking read from dismount', chatUnreadsKey);
-        useUnreadsStore.getState().read(chatUnreadsKey);
-        markRead();
-      }
-    };
-  }, [path, readTimeout, chatUnreadsKey, markRead]);
-
   useEffect(() => {
     if (!idTimeIsNumber) {
       navigate(returnURLWithoutMsg());