Merge branch 'develop' into db/channel-polish

tloncorp · Jul 5, 2024 · 16c3c2a · 16c3c2a
2 parents a3b50eb + 609d276
commit 16c3c2a
Show file tree

Hide file tree

Showing 36 changed files with 874 additions and 396 deletions.
diff --git a/apps/tlon-mobile/app.config.ts b/apps/tlon-mobile/app.config.ts
@@ -52,6 +52,8 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
     runtimeVersion: '4.0.1',
   },
   plugins: [
+    '@react-native-firebase/app',
+    '@react-native-firebase/crashlytics',
     [
       'expo-image-picker',
       {

diff --git a/apps/tlon-mobile/firebase.json b/apps/tlon-mobile/firebase.json
@@ -0,0 +1,5 @@
+{
+  "react-native": {
+    "crashlytics_debug_enabled": false
+  }
+}
diff --git a/apps/tlon-mobile/ios/Podfile b/apps/tlon-mobile/ios/Podfile
@@ -42,8 +42,8 @@ def shared(podfile_properties)
   use_expo_modules!
   $config = use_native_modules!
 
-  use_frameworks! :linkage => podfile_properties['ios.useFrameworks'].to_sym if podfile_properties['ios.useFrameworks']
-  use_frameworks! :linkage => ENV['USE_FRAMEWORKS'].to_sym if ENV['USE_FRAMEWORKS']
+  use_frameworks! :linkage => :static
+  $RNFirebaseAsStaticFramework = true
 
   # Flags change depending on the env values.
   flags = get_default_flags()

diff --git a/apps/tlon-mobile/ios/Podfile.lock b/apps/tlon-mobile/ios/Podfile.lock
@@ -1808,8 +1808,8 @@ SPEC CHECKSUMS:
   RNCAsyncStorage: 618d03a5f52fbccb3d7010076bc54712844c18ef
   RNCClipboard: 090462274cc05b02628bd158baf6d73c3abe8441
   RNDeviceInfo: db5c64a060e66e5db3102d041ebe3ef307a85120
-  RNFBApp: 614f1621b49db54ebd258df8c45427370d8d84a2
-  RNFBCrashlytics: c39e903af97cb426f36a10d3268fb0623a1ccddf
+  RNFBApp: 91311b27bc9a33e23b76a62825afd1635501018a
+  RNFBCrashlytics: c3219ef7a0c779f2428236215781c38e7892f6f9
   RNGestureHandler: 28bdf9a766c081e603120f79e925b72817c751c6
   RNReanimated: fb34efce9255966f5d71bd0fc65e14042c4b88a9
   RNScreens: 2b73f5eb2ac5d94fbd61fa4be0bfebd345716825
@@ -1824,6 +1824,6 @@ SPEC CHECKSUMS:
   UMAppLoader: 5df85360d65cabaef544be5424ac64672e648482
   Yoga: 1b901a6d6eeba4e8a2e8f308f708691cdb5db312
 
-PODFILE CHECKSUM: 2ba4689327c6a97c2a40ef1fe4918cbab90120c7
+PODFILE CHECKSUM: 0cb7a78e5777e69c86c1bf4bb5135fd660376dbe
 
 COCOAPODS: 1.15.2
diff --git a/apps/tlon-web/src/channels/ChannelActions.tsx b/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: () => {

diff --git a/apps/tlon-web/src/channels/ChannelHeader.tsx b/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) {

diff --git a/apps/tlon-web/src/chat/ChatChannel.tsx b/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(

diff --git a/apps/tlon-web/src/diary/DiaryChannel.tsx b/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)

diff --git a/apps/tlon-web/src/diary/DiaryHeader.tsx b/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>

diff --git a/apps/tlon-web/src/dms/DMOptions.tsx b/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();
 

diff --git a/apps/tlon-web/src/groups/GroupActions.tsx b/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',

diff --git a/apps/tlon-web/src/groups/GroupSidebar/ChannelList.test.tsx b/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,

diff --git a/apps/tlon-web/src/groups/GroupSidebar/ChannelList.tsx b/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}

diff --git a/apps/tlon-web/src/heap/HeapHeader.tsx b/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

diff --git a/apps/tlon-web/src/logic/channel.ts b/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
       ? {