Merge pull request #3698 from tloncorp/hm/recursive-unreads

activity: recursive unreads

apps/tlon-web/src/channels/ChannelActions.tsx

@@ -1,7 +1,7 @@
 import { GroupChannel } from '@tloncorp/shared/dist/urbit/groups';
+import { getPrettyAppName } from '@tloncorp/shared/src/logic/utils';
 import cn from 'classnames';
 import React, { PropsWithChildren, useCallback, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router';
 
 import ActionMenu, { Action } from '@/components/ActionMenu';
 import useActiveTab, { useNavWithinTab } from '@/components/Sidebar/util';
@@ -13,32 +13,25 @@ import { useIsChannelHost } from '@/logic/channel';
 import { Status } from '@/logic/status';
 import { useIsMobile } from '@/logic/useMedia';
 import { getFlagParts, nestToFlag } from '@/logic/utils';
+import { useMarkReadMutation } from '@/state/activity';
+import { useLeaveMutation } from '@/state/channel/channel';
 import { useDeleteChannelMutation, useRouteGroup } from '@/state/groups';
 
 import ChannelHostConnection from './ChannelHostConnection';
 
 export type ChannelActionsProps = PropsWithChildren<{
   nest: string;
-  prettyAppName: string;
   channel: GroupChannel | undefined;
   isAdmin: boolean | undefined;
-  leave: ({ nest }: { nest: string }) => Promise<void>;
   className?: string;
 }>;
 
 const ChannelActions = React.memo(
-  ({
-    nest,
-    prettyAppName,
-    channel,
-    isAdmin,
-    leave,
-    className,
-    children,
-  }: ChannelActionsProps) => {
+  ({ nest, channel, isAdmin, className, children }: ChannelActionsProps) => {
     const { navigate } = useNavWithinTab();
     const isMobile = useIsMobile();
     const [_app, flag] = nestToFlag(nest);
+    const prettyAppName = getPrettyAppName(_app);
     const groupFlag = useRouteGroup();
     const { ship, name } = getFlagParts(groupFlag);
     const [isOpen, setIsOpen] = useState(false);
@@ -47,7 +40,9 @@ const ChannelActions = React.memo(
     const [deleteStatus, setDeleteStatus] = useState<Status>('initial');
     const [showNotifications, setShowNotifications] = useState(false);
     const isChannelHost = useIsChannelHost(flag);
+    const { mutate: markRead } = useMarkReadMutation(true);
     const { mutate: deleteChannelMutate } = useDeleteChannelMutation();
+    const { mutate: leave } = useLeaveMutation();
     const hasChildren = !!children;
     const activeTab = useActiveTab();
 
@@ -129,6 +124,14 @@ const ChannelActions = React.memo(
       });
     }
 
+    actions.push({
+      key: 'mark-read',
+      type: 'prominent',
+      onClick: () =>
+        markRead({ source: { channel: { nest, group: groupFlag } } }),
+      content: 'Mark as Read',
+    });
+
     actions.push({
       key: 'notifications',
       onClick: () => {

apps/tlon-web/src/channels/ChannelHeader.tsx

@@ -14,15 +14,11 @@ import ChannelTitleButton from './ChannelTitleButton';
 export type ChannelHeaderProps = PropsWithChildren<{
   groupFlag: string;
   nest: string;
-  prettyAppName: string;
-  leave: ({ nest }: { nest: string }) => Promise<void>;
 }>;
 
 export default function ChannelHeader({
   groupFlag,
   nest,
-  prettyAppName,
-  leave,
   children,
 }: ChannelHeaderProps) {
   const isMobile = useIsMobile();
@@ -31,10 +27,8 @@ export default function ChannelHeader({
 
   const actionProps: ChannelActionsProps = {
     nest,
-    prettyAppName,
     channel,
     isAdmin,
-    leave,
   };
 
   if (isMobile) {

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

@@ -55,7 +55,6 @@ const ChatChannel = React.memo(({ title }: ViewProps) => {
   const inDmSearch = useMatch(
     `/dm/groups/${groupFlag}/channels/${nest}/search/*`
   );
-  const { mutateAsync: leaveChat } = useLeaveMutation();
   const { mutate: sendMessage } = useAddPostMutation(nest);
   const dropZoneId = `chat-input-dropzone-${chFlag}`;
   const { isDragging, isOver } = useDragAndDrop(dropZoneId);
@@ -120,12 +119,7 @@ const ChatChannel = React.memo(({ title }: ViewProps) => {
             <Route
               path="*"
               element={
-                <ChannelHeader
-                  groupFlag={groupFlag}
-                  nest={nest}
-                  prettyAppName="Chat"
-                  leave={leaveChat}
-                >
+                <ChannelHeader groupFlag={groupFlag} nest={nest}>
                   <Link
                     to="search/"
                     className={cn(

apps/tlon-web/src/diary/DiaryChannel.tsx

@@ -46,7 +46,7 @@ function DiaryChannel({ title }: ViewProps) {
     hasNextPage,
     fetchNextPage,
   } = useInfinitePosts(nest);
-  const { markRead, isLoading: isMarking } = useMarkChannelRead(nest);
+  const { markRead } = useMarkChannelRead(nest);
   const loadOlderNotes = useCallback(
     (atBottom: boolean) => {
       if (atBottom && hasNextPage) {
@@ -130,11 +130,9 @@ function DiaryChannel({ title }: ViewProps) {
     };
   }, [newNote, location, navigate]);
 
-  useDismissChannelNotifications({
-    nest,
-    markRead,
-    isMarking,
-  });
+  useEffect(() => {
+    markRead();
+  }, []);
 
   const sortedNotes = notes
     .filter(([k, v]) => v !== null)

apps/tlon-web/src/diary/DiaryHeader.tsx

@@ -40,7 +40,6 @@ export default function DiaryHeader({
   const isMobile = useIsMobile();
   const { compatible } = useChannelCompatibility(nest);
   const settings = useDiarySettings();
-  const { mutateAsync: leaveDiary } = useLeaveMutation();
   const { mutate } = usePutEntryMutation({
     bucket: 'diary',
     key: 'settings',
@@ -110,12 +109,7 @@ export default function DiaryHeader({
   ];
 
   return (
-    <ChannelHeader
-      groupFlag={groupFlag}
-      nest={nest}
-      prettyAppName="Notebook"
-      leave={(ch) => leaveDiary({ nest: `diary/${ch}` })}
-    >
+    <ChannelHeader groupFlag={groupFlag} nest={nest}>
       <div className="flex h-12 items-center justify-end space-x-2 sm:h-auto">
         <ActionMenu open={isOpen} onOpenChange={setIsOpen} actions={actions}>
           <button>

apps/tlon-web/src/dms/DMOptions.tsx

@@ -80,8 +80,12 @@ export default function DmOptions({
   const { mutateAsync: addPin } = useAddPinMutation();
   const { mutateAsync: delPin } = useDeletePinMutation();
   const { mutate: archiveDm } = useArchiveDm();
-  const { markRead: markReadChannel } = useMarkChannelRead(key);
-  const { markDmRead } = useMarkDmReadMutation(whom);
+  const { markRead: markReadChannel } = useMarkChannelRead(
+    key,
+    undefined,
+    true
+  );
+  const { markDmRead } = useMarkDmReadMutation(whom, undefined, true);
   const { mutate: multiDmRsvp } = useMutliDmRsvpMutation();
   const { mutate: dmRsvp } = useDmRsvpMutation();
 

apps/tlon-web/src/groups/GroupActions.tsx

@@ -19,6 +19,7 @@ import {
   preSig,
   useCopy,
 } from '@/logic/utils';
+import { useMarkReadMutation } from '@/state/activity';
 import {
   useAmAdmin,
   useGang,
@@ -123,6 +124,7 @@ const GroupActions = React.memo(
     const privacy = group ? getPrivacyFromGroup(group) : undefined;
     const isAdmin = useAmAdmin(flag);
     const isMobile = useIsMobile();
+    const { mutate: markRead } = useMarkReadMutation(true);
     const { mutate: cancelJoinMutation } = useGroupCancelMutation();
     const { isOpen, setIsOpen, isPinned, copyItemText, onCopy, onPinClick } =
       useGroupActions({ flag, open, onOpenChange });
@@ -180,6 +182,15 @@ const GroupActions = React.memo(
       });
     }
 
+    actions.push({
+      key: 'mark-read',
+      type: 'prominent',
+      onClick: () => {
+        markRead({ source: { group: flag } });
+      },
+      content: 'Mark as Read',
+    });
+
     if (isAdmin) {
       actions.push({
         key: 'settings',

apps/tlon-web/src/groups/GroupSidebar/ChannelList.test.tsx

@@ -14,6 +14,7 @@ fakeGroup.channels[fakeNest] = createChannel('Fake Channel');
 const fakeVessel = fakeGroup.fleet['~hastuc-dibtux'];
 
 vi.mock('@/state/groups', () => ({
+  useAmAdmin: () => true,
   useGroup: () => fakeGroup,
   useRouteGroup: () => fakeFlag,
   useGroupFlag: () => fakeFlag,

apps/tlon-web/src/groups/GroupSidebar/ChannelList.tsx

@@ -9,13 +9,15 @@ import React, {
 } from 'react';
 import { StateSnapshot, Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 
+import ChannelActions from '@/channels/ChannelActions';
 import ChannelIcon from '@/channels/ChannelIcon';
 import ActionMenu, { Action } from '@/components/ActionMenu';
 import Divider from '@/components/Divider';
 import LoadingSpinner from '@/components/LoadingSpinner/LoadingSpinner';
 import GroupListPlaceholder from '@/components/Sidebar/GroupListPlaceholder';
 import SidebarItem from '@/components/Sidebar/SidebarItem';
 import UnreadIndicator from '@/components/Sidebar/UnreadIndicator';
+import EllipsisIcon from '@/components/icons/EllipsisIcon';
 import FilterIconMobileNav from '@/components/icons/FilterIconMobileNav';
 import SortIcon from '@/components/icons/SortIcon';
 import { DEFAULT_SORT } from '@/constants';
@@ -30,6 +32,7 @@ import {
 import useFilteredSections from '@/logic/useFilteredSections';
 import { useIsMobile } from '@/logic/useMedia';
 import {
+  useAmAdmin,
   useGroup,
   useGroupConnection,
   useGroupFlag,
@@ -134,6 +137,7 @@ const ChannelList = React.memo(({ paddingTop }: { paddingTop?: number }) => {
   const filteredSections = useFilteredSections(flag, true);
   const isMobile = useIsMobile();
   const vessel = useVessel(flag, window.our);
+  const isAdmin = useAmAdmin(flag);
   const isChannelJoined = useCheckChannelJoined();
   const { isChannelUnread, getUnread } = useCheckChannelUnread();
   const virtuosoRef = useRef<VirtuosoHandle>(null);
@@ -226,6 +230,9 @@ const ChannelList = React.memo(({ paddingTop }: { paddingTop?: number }) => {
         ) : (
           <ChannelIcon nest={nest} className="h-6 w-6" />
         );
+      const unread = getUnread(nest);
+      const isUnread = unread?.combined.status === 'unread';
+      const hasNotify = unread?.combined.notify;
 
       return (
         <SidebarItem
@@ -234,12 +241,26 @@ const ChannelList = React.memo(({ paddingTop }: { paddingTop?: number }) => {
           icon={icon}
           to={channelHref(flag, nest)}
           actions={
-            isChannelUnread(nest) ? (
-              <UnreadIndicator
-                count={getUnread(nest)?.combined.count || 0}
-                notify={getUnread(nest)?.combined.notify}
-              />
-            ) : null
+            <ChannelActions nest={nest} channel={channel} isAdmin={isAdmin}>
+              <div className={cn('relative h-6 w-6 text-gray-600')}>
+                {isUnread ? (
+                  <UnreadIndicator
+                    count={unread?.combined.count || 0}
+                    notify={unread?.combined.notify}
+                    className="group-focus-within:opacity-0 group-hover:opacity-0"
+                  />
+                ) : null}
+                <button
+                  className={cn(
+                    'default-focus absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg p-0.5 transition-opacity opacity-0 focus-within:opacity-100 hover:opacity-100 group-focus-within:opacity-100 group-hover:opacity-100',
+                    isUnread && hasNotify && 'text-blue'
+                  )}
+                  aria-label="Open Message Options"
+                >
+                  <EllipsisIcon className="h-6 w-6 text-inherit" />
+                </button>
+              </div>
+            </ChannelActions>
           }
         >
           {channel.meta.title || nest}

apps/tlon-web/src/heap/HeapHeader.tsx

@@ -58,7 +58,6 @@ const HeapHeader = React.memo(
       bucket: 'heaps',
       key: 'heapSettings',
     });
-    const { mutateAsync: leave } = useLeaveMutation();
 
     const setDisplayMode = (setting: DisplayMode) => {
       const newSettings = setChannelSetting<HeapSetting>(
@@ -118,12 +117,7 @@ const HeapHeader = React.memo(
     ];
 
     return (
-      <ChannelHeader
-        groupFlag={groupFlag}
-        nest={nest}
-        prettyAppName="Gallery"
-        leave={leave}
-      >
+      <ChannelHeader groupFlag={groupFlag} nest={nest}>
         {isMobile ? (
           <div className="flex h-12 items-center justify-end space-x-2 sm:h-auto">
             <ActionMenu

apps/tlon-web/src/logic/channel.ts

@@ -404,9 +404,13 @@ export function linkUrlFromContent(content: Story) {
   return undefined;
 }
 
-export function useMarkChannelRead(nest: string, thread?: MessageKey) {
+export function useMarkChannelRead(
+  nest: string,
+  thread?: MessageKey,
+  recursive = false
+) {
   const group = useRouteGroup();
-  const { mutateAsync, ...rest } = useMarkReadMutation();
+  const { mutateAsync, ...rest } = useMarkReadMutation(recursive);
   const markRead = useCallback(() => {
     const source: Source = thread
       ? {

apps/tlon-web/src/logic/useDismissChannelNotifications.ts

@@ -1,61 +1,19 @@
 import { useEffect } from 'react';
 
-import { useIsChannelUnread } from '@/logic/channel';
-import { useNotifications } from '@/notifications/useNotifications';
-import { useRouteGroup } from '@/state/groups';
-import { useSawRopeMutation } from '@/state/hark';
-
-import { nestToFlag } from './utils';
-
 interface UseDismissChannelProps {
   nest: string;
-  markRead: (flag: string) => Promise<void> | void;
+  markRead: () => Promise<void>;
   isMarking: boolean;
 }
 
 export default function useDismissChannelNotifications({
-  nest,
   markRead,
   isMarking,
 }: UseDismissChannelProps) {
-  const flag = useRouteGroup();
-  const [, chFlag] = nestToFlag(nest);
-  const unread = useIsChannelUnread(nest);
-  const { notifications } = useNotifications(flag);
-  const { mutate: sawRopeMutation } = useSawRopeMutation();
-
-  /**
-   * TODO: Confirm expected behavior for navigating to a Channel with Unreads.
-   *
-   * Does clicking on an Unread Channel automatically scrollback to the
-   * last read message? Should it only be dismissed when reaching the end of
-   * new messages?
-   */
-  // dismiss unread notifications while viewing channel
   useEffect(() => {
-    if (nest && unread && !isMarking) {
+    if (!isMarking) {
       // dismiss unread
-      markRead(chFlag);
-      // iterate bins, saw each rope
-      notifications.forEach((n) => {
-        n.skeins.forEach((b) => {
-          if (
-            b.unread &&
-            b.top?.rope.channel &&
-            b.top.rope.channel.includes(chFlag)
-          ) {
-            sawRopeMutation({ rope: b.top.rope });
-          }
-        });
-      });
+      markRead();
     }
-  }, [
-    nest,
-    chFlag,
-    markRead,
-    unread,
-    notifications,
-    sawRopeMutation,
-    isMarking,
-  ]);
+  }, [markRead, isMarking]);
 }