feat: Rename Menu

Renamed Dropdown menu
Cleaned up some styles

design-system/Menu/Menu.tsx → design-system/dropdown-menu/dropdown-menu.tsx

@@ -8,20 +8,28 @@ import { Platform, StyleProp, ViewStyle } from "react-native";
 import { Pressable } from "../Pressable";
 import { useAppTheme } from "@/theme/useAppTheme";
 import { Haptics } from "@/utils/haptics";
-import { getInlinedItem } from "./Menu.utils";
+import { getInlinedItem } from "./dropdown-menu.utils";
 
-export type IMenuAction = Omit<RNMenuAction, "titleColor" | "imageColor"> & {
+export type IDropdownMenuAction = Omit<
+  RNMenuAction,
+  "titleColor" | "imageColor"
+> & {
   color?: string;
 };
 
-type MenuProps = {
-  actions: IMenuAction[];
+type IDropdownMenuProps = {
+  actions: IDropdownMenuAction[];
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
   onPress?: (actionId: string) => void;
 };
 
-export const Menu = ({ children, actions, style, onPress }: MenuProps) => {
+export const DropdownMenu = ({
+  children,
+  actions,
+  style,
+  onPress,
+}: IDropdownMenuProps) => {
   const { theme } = useAppTheme();
 
   const themedActions: RNMenuAction[] = useMemo(() => {

features/conversation-list/conversation-list.screen-header.tsx

@@ -13,43 +13,86 @@ import { Text } from "@/design-system/Text";
 import { usePreferredName } from "@/hooks/usePreferredName";
 import { translate } from "@/i18n";
 import { useHeader } from "@/navigation/use-header";
-import { useAppTheme } from "@/theme/useAppTheme";
+import { ThemedStyle, useAppTheme } from "@/theme/useAppTheme";
 import { shortDisplayName } from "@/utils/str";
 import { useAccountsProfiles } from "@/utils/useAccountsProfiles";
 import { useNavigation } from "@react-navigation/native";
-import React from "react";
-import { Alert, Platform } from "react-native";
-import { Menu } from "@/design-system/Menu/Menu";
+import React, { useCallback } from "react";
+import { Alert, ViewStyle } from "react-native";
+import { DropdownMenu } from "@/design-system/dropdown-menu/dropdown-menu";
+
+const $dropDownMenu: ThemedStyle<ViewStyle> = (theme) => ({
+  paddingVertical: theme.spacing.sm,
+  paddingRight: theme.spacing.sm,
+});
+
+const $iconContainer: ThemedStyle<ViewStyle> = (theme) => ({
+  width: theme.spacing.container.small,
+  height: theme.spacing.container.small,
+});
+
+const $rowContainer: ThemedStyle<ViewStyle> = (theme) => ({
+  alignItems: "center",
+  columnGap: theme.spacing.xxxs,
+});
+
+const $rightContainer: ThemedStyle<ViewStyle> = (theme) => ({
+  alignItems: "center",
+  columnGap: theme.spacing.xxs,
+});
+
+const $newConversationContainer: ViewStyle = {
+  marginBottom: 4, // The square.and.pencil icon is not centered with the qrcode if we don't have this margin
+};
+
+const $titleContainer: ViewStyle = {
+  alignItems: "center",
+};
+
+const $avatarContainer: ThemedStyle<ViewStyle> = (theme) => ({
+  padding: theme.spacing.xxs,
+});
 
 export function useHeaderWrapper() {
-  const { theme } = useAppTheme();
+  const { theme, themed } = useAppTheme();
   const navigation = useNavigation();
   const currentAccount = useCurrentAccount();
   const preferredName = usePreferredName(currentAccount!);
   const accounts = useAccountsList();
   const accountsProfiles = useAccountsProfiles();
   const setCurrentAccount = useAccountsStore((s) => s.setCurrentAccount);
 
+  const onDropdownPress = useCallback(
+    (actionId: string) => {
+      if (actionId === "all-chats") {
+        Alert.alert("Coming soon");
+      } else if (actionId === "new-account") {
+        navigation.navigate("NewAccountNavigator");
+      } else if (actionId === "app-settings") {
+        Alert.alert("Coming soon");
+      }
+
+      // Pressed on an account
+      else {
+        setCurrentAccount(actionId, false);
+      }
+    },
+    [navigation, setCurrentAccount]
+  );
+
   useHeader(
     {
       safeAreaEdges: ["top"],
       RightActionComponent: (
-        <HStack
-          style={{
-            alignItems: "center",
-            columnGap: theme.spacing.xxs,
-          }}
-        >
+        <HStack style={themed($rightContainer)}>
           <HeaderAction
             icon="qrcode"
             onPress={() => {
               navigation.navigate("ShareProfile");
             }}
           />
           <HeaderAction
-            style={{
-              marginBottom: 4, // The square.and.pencil icon is not centered with the qrcode if we don't have this margin
-            }}
+            style={$newConversationContainer}
             icon="square.and.pencil"
             onPress={() => {
               navigation.navigate("NewConversation");
@@ -58,12 +101,7 @@ export function useHeaderWrapper() {
         </HStack>
       ),
       titleComponent: (
-        <HStack
-          // {...debugBorder()}
-          style={{
-            alignItems: "center",
-          }}
-        >
+        <HStack style={$titleContainer}>
           <Pressable
             onPress={() => {
               navigation.navigate("Profile", {
@@ -72,33 +110,13 @@ export function useHeaderWrapper() {
             }}
             hitSlop={theme.spacing.sm}
           >
-            <Center
-              style={{
-                padding: theme.spacing.xxs,
-              }}
-            >
+            <Center style={themed($avatarContainer)}>
               <Avatar size={theme.avatarSize.sm} />
             </Center>
           </Pressable>
-          <Menu
-            style={{
-              paddingVertical: theme.spacing.sm, // TMP solution for the hitSlop not working
-              paddingRight: theme.spacing.sm, // TMP solution for the hitSlop not working
-            }}
-            onPress={(actionId: string) => {
-              if (actionId === "all-chats") {
-                Alert.alert("Coming soon");
-              } else if (actionId === "new-account") {
-                navigation.navigate("NewAccountNavigator");
-              } else if (actionId === "app-settings") {
-                Alert.alert("Coming soon");
-              }
-
-              // Pressed on an account
-              else {
-                setCurrentAccount(actionId, false);
-              }
-            }}
+          <DropdownMenu
+            style={themed($dropDownMenu)}
+            onPress={onDropdownPress}
             actions={[
               ...accountsProfiles.map((profilePreferedName, index) => {
                 return {
@@ -121,29 +139,17 @@ export function useHeaderWrapper() {
               },
             ]}
           >
-            <HStack
-              // {...debugBorder()}
-              style={{
-                alignItems: "center",
-                columnGap: theme.spacing.xxxs,
-                // paddingVertical: theme.spacing.sm,
-              }}
-            >
+            <HStack style={themed($rowContainer)}>
               <Text>{shortDisplayName(preferredName)}</Text>
-              <Center
-                style={{
-                  width: theme.spacing.container.small,
-                  height: theme.spacing.container.small,
-                }}
-              >
+              <Center style={themed($iconContainer)}>
                 <Icon
                   color={theme.colors.text.secondary}
                   icon="chevron.down"
                   size={theme.iconSize.xs}
                 />
               </Center>
             </HStack>
-          </Menu>
+          </DropdownMenu>
         </HStack>
       ),
     },

features/conversation/conversation-composer/conversation-composer-add-attachment-button.tsx

@@ -1,5 +1,5 @@
 import { Center } from "@/design-system/Center";
-import { Menu } from "@/design-system/Menu/Menu";
+import { DropdownMenu } from "@/design-system/dropdown-menu/dropdown-menu";
 import { useConversationComposerStore } from "@/features/conversation/conversation-composer/conversation-composer.store-context";
 import { getCurrentAccount } from "@data/store/accountsStore";
 import { Icon } from "@design-system/Icon/Icon";
@@ -96,24 +96,27 @@ export function AddAttachmentButton() {
     handleAttachmentSelected(asset);
   }, [handleAttachmentSelected]);
 
+  const onDropdownMenuPress = useCallback(
+    (actionId: string) => {
+      switch (actionId) {
+        case "camera":
+          openCamera();
+          break;
+        case "mediaLibrary":
+          pickMedia();
+          break;
+      }
+    },
+    [openCamera, pickMedia]
+  );
+
   return (
-    <Menu
+    <DropdownMenu
       style={{
         margin: theme.spacing.xxxs,
         alignSelf: "flex-end",
       }}
-      onPress={(actionId) => {
-        switch (actionId) {
-          case "camera":
-            openCamera();
-            break;
-          case "mediaLibrary":
-            pickMedia();
-            break;
-          default:
-            break;
-        }
-      }}
+      onPress={onDropdownMenuPress}
       actions={[
         {
           id: "mediaLibrary",
@@ -147,6 +150,6 @@ export function AddAttachmentButton() {
           size={20} // Value from figma
         />
       </Center>
-    </Menu>
+    </DropdownMenu>
   );
 }