desktop: move action menus to popovers

packages/app/features/top/ActivityScreen.tsx

@@ -56,7 +56,7 @@ export function ActivityScreen(props: Props) {
 
   const handleGoToGroup = useCallback(
     (group: db.Group) => {
-      store.markGroupRead(group);
+      store.markGroupRead(group.id);
       props.navigation.navigate('GroupSettings', {
         screen: 'GroupMembers',
         params: { groupId: group.id },

packages/app/features/top/ChannelScreen.tsx

@@ -103,7 +103,7 @@ export default function ChannelScreen(props: Props) {
 
   const [channelNavOpen, setChannelNavOpen] = React.useState(false);
   const [inviteSheetGroup, setInviteSheetGroup] =
-    React.useState<db.Group | null>();
+    React.useState<string | null>();
 
   // for the unread channel divider, we care about the unread state when you enter but don't want it to update over
   // time
@@ -333,7 +333,10 @@ export default function ChannelScreen(props: Props) {
 
   const handleMarkRead = useCallback(async () => {
     if (channel && !channel.isPendingChannel) {
-      store.markChannelRead(channel);
+      store.markChannelRead({
+        id: channel.id,
+        groupId: channel.groupId ?? undefined,
+      });
     }
   }, [channel?.type, channel?.id, channel?.groupId]);
 
@@ -431,7 +434,7 @@ export default function ChannelScreen(props: Props) {
             open={inviteSheetGroup !== null}
             onOpenChange={handleInviteSheetOpenChange}
             onInviteComplete={() => setInviteSheetGroup(null)}
-            group={inviteSheetGroup ?? undefined}
+            groupId={inviteSheetGroup ?? undefined}
           />
         </>
       )}

packages/app/features/top/ChatListScreen.tsx

@@ -54,7 +54,7 @@ export function ChatListScreenView({
   const navigation = useNavigation<NavigationProp<RootStackParamList>>();
   const [personalInviteOpen, setPersonalInviteOpen] = useState(false);
   const [screenTitle, setScreenTitle] = useState('Home');
-  const [inviteSheetGroup, setInviteSheetGroup] = useState<db.Group | null>();
+  const [inviteSheetGroup, setInviteSheetGroup] = useState<string | null>();
   const personalInvite = db.personalInviteLink.useValue();
   const viewedPersonalInvite = db.hasViewedPersonalInvite.useValue();
   const { isOpen, setIsOpen } = useGlobalSearch();
@@ -291,10 +291,17 @@ export function ChatListScreenView({
                     type="Search"
                     onPress={handleSearchInputToggled}
                   />
-                  <ScreenHeader.IconButton
-                    type="Add"
-                    onPress={handlePressAddChat}
-                  />
+                  {isWindowNarrow ? (
+                    <ScreenHeader.IconButton
+                      type="Add"
+                      onPress={handlePressAddChat}
+                    />
+                  ) : (
+                    <CreateChatSheet
+                      ref={createChatSheetRef}
+                      trigger={<ScreenHeader.IconButton type="Add" />}
+                    />
+                  )}
                 </>
               }
             />
@@ -328,7 +335,7 @@ export function ChatListScreenView({
               open={inviteSheetGroup !== null}
               onOpenChange={handleInviteSheetOpenChange}
               onInviteComplete={() => setInviteSheetGroup(null)}
-              group={inviteSheetGroup ?? undefined}
+              groupId={inviteSheetGroup ?? undefined}
             />
           </View>
         </NavigationProvider>
@@ -347,7 +354,9 @@ export function ChatListScreenView({
         />
       </ChatOptionsProvider>
 
-      <CreateChatSheet ref={createChatSheetRef} />
+      {isWindowNarrow && (
+        <CreateChatSheet ref={createChatSheetRef} />
+      )}
       <PersonalInviteSheet
         open={personalInviteOpen}
         onOpenChange={() => setPersonalInviteOpen(false)}