rough flattened nav

apps/tlon-mobile/src/hooks/useNotificationListener.ts

@@ -154,12 +154,6 @@ export default function useNotificationListener() {
         }
 
         const routeStack: RouteStack = [{ name: 'ChatList' }];
-        if (channel.groupId && !channelSwitcherEnabled) {
-          routeStack.push({
-            name: 'GroupChannels',
-            params: { groupId: channel.groupId },
-          });
-        }
         const screenName = screenNameFromChannelId(channelId);
         routeStack.push({
           name: screenName,

packages/app/features/channels/ChannelMembersScreen.tsx

@@ -8,7 +8,7 @@ type Props = NativeStackScreenProps<RootStackParamList, 'ChannelMembers'>;
 
 export function ChannelMembersScreen(props: Props) {
   const { channelId } = props.route.params;
-  const channelQuery = store.useChannelWithRelations({
+  const channelQuery = store.useChannel({
     id: channelId,
   });
 

packages/app/features/top/ChannelScreen.tsx

@@ -319,16 +319,6 @@ export default function ChannelScreen(props: Props) {
 
   const canUpload = useCanUpload();
 
-  const isFocused = useIsFocused();
-
-  const { data: pins } = store.usePins({
-    enabled: isFocused,
-  });
-
-  const pinnedItems = useMemo(() => {
-    return pins ?? [];
-  }, [pins]);
-
   const chatOptionsNavProps = useChatSettingsNavigation();
 
   const handleGoToUserProfile = useCallback(
@@ -350,8 +340,6 @@ export default function ChannelScreen(props: Props) {
 
   return (
     <ChatOptionsProvider
-      groupId={group?.id}
-      pinned={pinnedItems}
       useGroup={store.useGroup}
       onPressInvite={(group) => {
         setInviteSheetGroup(group);

packages/app/features/top/ChannelSearchScreen.tsx

@@ -1,5 +1,5 @@
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
-import { useChannelSearch, useChannelWithRelations } from '@tloncorp/shared';
+import { useChannel, useChannelSearch } from '@tloncorp/shared';
 import type * as db from '@tloncorp/shared/db';
 import { Button, SearchBar, SearchResults, XStack, YStack } from '@tloncorp/ui';
 import { useCallback, useState } from 'react';
@@ -13,7 +13,7 @@ type Props = NativeStackScreenProps<RootStackParamList, 'ChannelSearch'>;
 export default function ChannelSearchScreen(props: Props) {
   const channelId = props.route.params.channelId;
   const groupId = props.route.params.groupId;
-  const channelQuery = useChannelWithRelations({
+  const channelQuery = useChannel({
     id: channelId,
   });
 

packages/app/features/top/ChatListScreen.tsx

@@ -6,14 +6,11 @@ import {
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { createDevLogger } from '@tloncorp/shared';
 import * as db from '@tloncorp/shared/db';
-import * as logic from '@tloncorp/shared/logic';
 import * as store from '@tloncorp/shared/store';
 import {
   AddGroupSheet,
   ChatList,
   ChatOptionsProvider,
-  ChatOptionsSheet,
-  ChatOptionsSheetMethods,
   GroupPreviewAction,
   GroupPreviewSheet,
   InviteUsersSheet,
@@ -29,7 +26,6 @@ import { TLON_EMPLOYEE_GROUP } from '../../constants';
 import { useChatSettingsNavigation } from '../../hooks/useChatSettingsNavigation';
 import { useCurrentUserId } from '../../hooks/useCurrentUser';
 import { useGroupActions } from '../../hooks/useGroupActions';
-import { useFeatureFlag } from '../../lib/featureFlags';
 import type { RootStackParamList } from '../../navigation/types';
 import { screenNameFromChannelId } from '../../navigation/utils';
 import { identifyTlonEmployee } from '../../utils/posthog';
@@ -53,19 +49,6 @@ export function ChatListScreenView({
   const [addGroupOpen, setAddGroupOpen] = useState(false);
   const [screenTitle, setScreenTitle] = useState('Home');
   const [inviteSheetGroup, setInviteSheetGroup] = useState<db.Group | null>();
-  const chatOptionsSheetRef = useRef<ChatOptionsSheetMethods>(null);
-  const [longPressedChat, setLongPressedChat] = useState<db.Chat | null>(null);
-  const chatOptionsGroupId = useMemo(() => {
-    return longPressedChat?.type === 'group'
-      ? longPressedChat.group.id
-      : undefined;
-  }, [longPressedChat]);
-
-  const chatOptionsChannelId = useMemo(() => {
-    return longPressedChat?.type === 'channel'
-      ? longPressedChat.channel.id
-      : undefined;
-  }, [longPressedChat]);
 
   const [activeTab, setActiveTab] = useState<'all' | 'groups' | 'messages'>(
     'all'
@@ -77,10 +60,6 @@ export function ChatListScreenView({
 
   const [showSearchInput, setShowSearchInput] = useState(false);
   const isFocused = useIsFocused();
-  const { data: pins } = store.usePins({
-    enabled: isFocused,
-  });
-  const pinned = useMemo(() => pins ?? [], [pins]);
 
   const { data: chats } = store.useCurrentChats({
     enabled: isFocused,
@@ -172,44 +151,30 @@ export function ChatListScreenView({
     }
   }, []);
 
-  const [isChannelSwitcherEnabled] = useFeatureFlag('channelSwitcher');
-
   const onPressChat = useCallback(
-    (item: db.Chat) => {
-      if (item.type === 'group' && item.isPending) {
-        setSelectedGroupId(item.id);
-      } else if (item.type === 'group' && !isChannelSwitcherEnabled) {
-        navigation.navigate('GroupChannels', { groupId: item.group.id });
-      } else if (item.type === 'group') {
-        if (!item.group.channels?.length) {
-          throw new Error('cant open group with no channels');
+    async (item: db.Chat) => {
+      if (item.type === 'group') {
+        if (item.isPending) {
+          setSelectedGroupId(item.id);
+        } else {
+          const mostRecentChannel = item.group.channels?.[0];
+          if (!mostRecentChannel) {
+            throw new Error("Can't open group: no channels");
+          }
+          navigation.navigate('Channel', {
+            channelId: mostRecentChannel.id,
+          });
         }
-        navigation.navigate('Channel', {
-          channelId: item.group.channels[0].id,
-          groupId: item.group.id,
-        });
       } else {
         const screenName = screenNameFromChannelId(item.id);
         navigation.navigate(screenName, {
           channelId: item.id,
         });
       }
     },
-    [isChannelSwitcherEnabled, navigation]
+    [navigation]
   );
 
-  const onLongPressChat = useCallback((item: db.Chat) => {
-    if (item.isPending) {
-      return;
-    }
-    setLongPressedChat(item);
-    chatOptionsSheetRef.current?.open(
-      item.id,
-      item.type === 'channel' ? item.channel.type : 'group',
-      item.unreadCount
-    );
-  }, []);
-
   const handleGroupPreviewSheetOpenChange = useCallback((open: boolean) => {
     if (!open) {
       setSelectedGroupId(null);
@@ -298,9 +263,6 @@ export function ChatListScreenView({
       useGroup={store.useGroupPreview}
     >
       <ChatOptionsProvider
-        channelId={chatOptionsChannelId}
-        groupId={chatOptionsGroupId}
-        pinned={pinned}
         {...useChatSettingsNavigation()}
         onPressInvite={(group) => {
           setInviteSheetGroup(group);
@@ -329,7 +291,6 @@ export function ChatListScreenView({
               pinned={resolvedChats.pinned}
               unpinned={resolvedChats.unpinned}
               pending={resolvedChats.pending}
-              onLongPressItem={onLongPressChat}
               onPressItem={onPressChat}
               onSectionChange={handleSectionChange}
               showSearchInput={showSearchInput}
@@ -343,7 +304,6 @@ export function ChatListScreenView({
             open={splashVisible}
             onOpenChange={handleWelcomeOpenChange}
           />
-          <ChatOptionsSheet ref={chatOptionsSheetRef} />
           <GroupPreviewSheet
             open={!!selectedGroup}
             onOpenChange={handleGroupPreviewSheetOpenChange}

packages/app/features/top/GroupChannelsScreen.tsx

@@ -11,7 +11,7 @@ import {
   GroupChannelsScreenView,
   InviteUsersSheet,
 } from '@tloncorp/ui';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import { useChatSettingsNavigation } from '../../hooks/useChatSettingsNavigation';
 import { useGroupContext } from '../../hooks/useGroupContext';
@@ -30,11 +30,7 @@ export function GroupChannelsScreenContent({
   groupId: string;
 }) {
   const navigation = useNavigation<NavigationProp<RootStackParamList>>();
-
   const isFocused = useIsFocused();
-  const { data: pins } = store.usePins({
-    enabled: isFocused,
-  });
   const [inviteSheetGroup, setInviteSheetGroup] = useState<db.Group | null>(
     null
   );
@@ -43,10 +39,6 @@ export function GroupChannelsScreenContent({
     group?.id ?? ''
   );
 
-  const pinnedItems = useMemo(() => {
-    return pins ?? [];
-  }, [pins]);
-
   const handleChannelSelected = useCallback(
     (channel: db.Channel) => {
       navigation.navigate('Channel', {
@@ -79,9 +71,6 @@ export function GroupChannelsScreenContent({
 
   return (
     <ChatOptionsProvider
-      groupId={id}
-      pinned={pinnedItems}
-      useGroup={store.useGroup}
       onPressInvite={(group) => {
         setInviteSheetGroup(group);
       }}

packages/app/hooks/useChannelNavigation.ts

@@ -7,8 +7,7 @@ import { useCallback } from 'react';
 import { RootStackParamList } from '../navigation/types';
 
 export const useChannelNavigation = ({ channelId }: { channelId: string }) => {
-  // Model context
-  const channelQuery = store.useChannelWithRelations({
+  const channelQuery = store.useChannel({
     id: channelId,
   });
 

packages/app/hooks/useGroupActions.tsx

@@ -5,19 +5,19 @@ import { useCallback } from 'react';
 import { useGroupNavigation } from './useGroupNavigation';
 
 export const useGroupActions = () => {
-  const { goToHome, goToGroupChannels } = useGroupNavigation();
+  const { goToHome, goToGroup } = useGroupNavigation();
 
   const performGroupAction = useCallback(
     async (action: GroupPreviewAction, updatedGroup: db.Group) => {
       if (action === 'goTo') {
-        goToGroupChannels(updatedGroup.id);
+        goToGroup(updatedGroup.id);
       }
 
       if (action === 'joined') {
         goToHome();
       }
     },
-    [goToGroupChannels, goToHome]
+    [goToGroup, goToHome]
   );
 
   return {

packages/app/hooks/useGroupNavigation.ts

@@ -26,7 +26,7 @@ export const useGroupNavigation = () => {
     [navigation]
   );
 
-  const goToGroupChannels = useCallback(
+  const goToGroup = useCallback(
     async (groupId: string) => {
       resetToGroup(groupId);
     },
@@ -48,6 +48,6 @@ export const useGroupNavigation = () => {
     goToChannel,
     goToHome,
     goToContactHostedGroups,
-    goToGroupChannels,
+    goToGroup,
   };
 };

packages/app/navigation/utils.ts

@@ -3,6 +3,7 @@ import {
   NavigationProp,
   useNavigation,
 } from '@react-navigation/native';
+import * as db from '@tloncorp/shared/db';
 import * as logic from '@tloncorp/shared/logic';
 import * as store from '@tloncorp/shared/store';
 
@@ -83,14 +84,27 @@ export function useResetToDm() {
 export function useResetToGroup() {
   const reset = useTypedReset();
 
-  return function resetToGroup(groupId: string) {
+  return async function resetToGroup(groupId: string) {
+    const channelId = await getInitialGroupChannel(groupId);
     reset([
       { name: 'ChatList' },
-      { name: 'GroupChannels', params: { groupId } },
+      { name: 'Channel', params: { channelId, groupId } },
     ]);
   };
 }
 
+async function getInitialGroupChannel(groupId: string) {
+  const group = await db.getGroup({ id: groupId });
+  const channelId =
+    group?.channels?.sort(
+      (a, b) => (a.lastPostAt ?? 0) - (b.lastPostAt ?? 0)
+    )[0]?.id ?? group?.channels?.[0]?.id;
+  if (!channelId) {
+    throw new Error('unable to find default group channel');
+  }
+  return channelId;
+}
+
 export function screenNameFromChannelId(channelId: string) {
   return logic.isDmChannelId(channelId)
     ? 'DM'

packages/shared/src/db/keyValue.ts

@@ -30,26 +30,6 @@ export const BASE_VOLUME_SETTING_QUERY_KEY = ['volume', 'base'];
 export const SHOW_BENEFITS_SHEET_QUERY_KEY = ['showBenefitsSheet'];
 export const THEME_STORAGE_KEY = '@user_theme';
 
-export type ChannelSortPreference = 'recency' | 'arranged';
-export async function storeChannelSortPreference(
-  sortPreference: ChannelSortPreference
-) {
-  try {
-    await AsyncStorage.setItem('channelSortPreference', sortPreference);
-  } catch (error) {
-    logger.error('storeChannelSortPreference', error);
-  }
-}
-
-export async function getChannelSortPreference() {
-  try {
-    const value = await AsyncStorage.getItem('channelSortPreference');
-    return (value ?? 'recency') as ChannelSortPreference;
-  } catch (error) {
-    logger.error('getChannelSortPreference', error);
-  }
-}
-
 export async function getActivitySeenMarker() {
   const marker = await AsyncStorage.getItem('activitySeenMarker');
   return Number(marker) ?? 1;
@@ -312,3 +292,10 @@ export const themeSettings = createStorageItem<ThemeName | null>({
   key: THEME_STORAGE_KEY,
   defaultValue: null,
 });
+
+export type ChannelSortPreference = 'recency' | 'arranged';
+
+export const channelSortPreference = createStorageItem<ChannelSortPreference>({
+  key: 'channelSortPreference',
+  defaultValue: 'recency',
+});

packages/shared/src/db/queries.ts

@@ -1429,16 +1429,9 @@ export const getAllSingleDms = createReadQuery(
   []
 );
 
-export interface GetChannelWithRelations {
-  id: string;
-}
-
 export const getChannelWithRelations = createReadQuery(
   'getChannelWithRelations',
-  async (
-    { id }: GetChannelWithRelations,
-    ctx: QueryCtx
-  ): Promise<Channel | null> => {
+  async ({ id }: { id: string }, ctx: QueryCtx): Promise<Channel | null> => {
     const result = await ctx.db.query.channels.findFirst({
       where: eq($channels.id, id),
       with: {
@@ -2609,6 +2602,7 @@ export const getGroup = createReadQuery(
       .findFirst({
         where: (groups, { eq }) => eq(groups.id, id),
         with: {
+          unread: true,
           pin: true,
           channels: {
             where: (channels, { eq }) => eq(channels.currentUserIsMember, true),