@ethora/chat-component-rn 26.8.1 → 26.8.3

package/lib/commonjs/components/Modals/UserProfileModal/UserProfileModal.js

@@ -3,34 +3,76 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.userInitials = exports.profileTabs = exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
 var _styledModalComponents = require("../styledModalComponents");
 var _icons = require("../../../assets/icons");
-var _ModalHeaderComponent = _interopRequireDefault(require("../ModalHeaderComponent"));
-var _ProfileImagePlaceholder = require("../../MainComponents/ProfileImagePlaceholder");
-var _Button = _interopRequireDefault(require("../../styled/Button"));
-var _DropdownMenu = _interopRequireDefault(require("../../DropdownMenu/DropdownMenu"));
-var _chatSettingsSlice = require("../../../roomStore/chatSettingsSlice");
-var _roomsSlice = require("../../../roomStore/roomsSlice");
-var _EditUserModal = _interopRequireDefault(require("./EditUserModal"));
-var _walletUsername = require("../../../helpers/walletUsername");
-var _xmppProvider = require("../../../context/xmppProvider");
-var _Select = _interopRequireDefault(require("../../MainComponents/Select"));
 var _hooks = require("../../../hooks/hooks");
-var _reactNative = require("react-native");
-var _rooms = require("../../../networking/api-requests/rooms.api");
-var _createRoomFromApi = require("../../../helpers/createRoomFromApi");
+var _useChatSettingState = require("../../../hooks/useChatSettingState");
+var _xmppProvider = require("../../../context/xmppProvider");
 var _ToastContext = require("../../../context/ToastContext");
+var _useT = require("../../../i18n/useT");
+var _useFileToken = require("../../../hooks/useFileToken");
+var _secureFileUrl = require("../../../helpers/secureFileUrl");
+var _getIconColor = require("../../../helpers/getIconColor");
+var _useTheme = require("../../../hooks/useTheme");
+var _typography = require("../../../helpers/typography");
+var _getElementFont = require("../../../helpers/getElementFont");
 var _LANGUAGE_OPTIONS = require("../../../helpers/constants/LANGUAGE_OPTIONS");
+var _MODAL_TYPES = require("../../../helpers/constants/MODAL_TYPES");
+var _chatSettingsSlice = require("../../../roomStore/chatSettingsSlice");
+var _roomsSlice = require("../../../roomStore/roomsSlice");
+var _HeaderRoomListMenu = require("../../Menu/HeaderRoomListMenu");
+var _useLogout = require("../../../hooks/useLogout");
+var _rooms = require("../../../networking/api-requests/rooms.api");
 var _user = require("../../../networking/api-requests/user.api");
-var _useChatSettingState = require("../../../hooks/useChatSettingState");
+var _createRoomFromApi = require("../../../helpers/createRoomFromApi");
+var _walletUsername = require("../../../helpers/walletUsername");
+var _ProfileHeader = require("../ProfileHeader/ProfileHeader");
+var _ProfileMenu = _interopRequireDefault(require("../ProfileHeader/ProfileMenu"));
+var _EditUserModal = _interopRequireDefault(require("./EditUserModal"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/** @format */
+
+const PREFIX = 'user-profile';
+/** Two uppercase letters for a person without a picture. */
+const userInitials = name => {
+  const words = (name || '').trim().split(/\s+/).filter(Boolean);
+  const letters = (words.length >= 2 ? [words[0][0], words[1][0]] : [words[0]?.[0], words[0]?.[1]]).filter(c => !!c && /[\p{L}\p{N}]/u.test(c));
+  return letters.join('').toUpperCase();
+};
+
+/**
+ * Which tabs a profile shows. Only the signed-in user has tabs at all:
+ * `GET /v2/files/` returns the JWT owner's files, so there is nothing to
+ * put under Media/Documents for anybody else, and the language picker is
+ * a personal setting.
+ */
+exports.userInitials = userInitials;
+const profileTabs = opts => {
+  if (!opts.isOwnProfile) {
+    return [];
+  }
+  const tabs = [];
+  if (opts.translatesEnabled) {
+    tabs.push('language');
+  }
+  if (opts.hasMedia) {
+    tabs.push('media');
+  }
+  if (opts.hasDocuments) {
+    tabs.push('documents');
+  }
+  return tabs;
+};
+exports.profileTabs = profileTabs;
 const UserProfileModal = ({
   handleCloseModal
 }) => {
+  const t = (0, _useT.useT)();
   const dispatch = (0, _hooks.useAppDispatch)();
   const {
     client
@@ -44,75 +86,101 @@ const UserProfileModal = ({
     selectedUser,
     langSource
   } = (0, _useChatSettingState.useChatSettingState)();
+  const fileToken = (0, _useFileToken.useFileToken)();
+  const theme = (0, _useTheme.useTheme)();
+  const styles = (0, _react.useMemo)(() => createStyles(theme), [theme]);
   const [isEditing, setIsEditing] = (0, _react.useState)(false);
-  const [documents, setDocuments] = (0, _react.useState)([]);
-  const [deleteDocumentId, setDeleteDocumentId] = (0, _react.useState)('');
-  const [showDelete, setShowDelete] = (0, _react.useState)(false);
-  const handleDeleteDocument = async () => {
-    try {
-      await (0, _user.deleteDocument)(deleteDocumentId);
-      setDocuments(documents.filter(doc => doc._id !== deleteDocumentId));
-      showToast({
-        id: Date.now().toString(),
-        title: 'Success',
-        message: 'Document deleted successfully',
-        type: 'success'
-      });
-      // handleGetDocs();
-    } catch (error) {
-      console.error('Error deleting document', error);
-      showToast({
-        id: Date.now().toString(),
-        title: 'Error',
-        message: 'Failed to delete document',
-        type: 'error'
-      });
-    } finally {
-      setShowDelete(false);
-    }
-  };
-  const handleGetDocs = async () => {
-    try {
-      const {
-        data
-      } = await (0, _user.getDocuments)(user?.defaultWallet?.walletAddress);
-      const items = data.results.filter(el => el.locations[0]);
-      setDocuments(items);
-    } catch (error) {
-      console.error('Error getting docs', error);
+  const [files, setFiles] = (0, _react.useState)([]);
+  const [loadingFiles, setLoadingFiles] = (0, _react.useState)(false);
+  const [activeTab, setActiveTab] = (0, _react.useState)(null);
+  const scrollY = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const scrollRef = (0, _react.useRef)(null);
+  const {
+    collapseDistance
+  } = (0, _ProfileHeader.useHeaderMetrics)();
+  const [viewportHeight, setViewportHeight] = (0, _react.useState)(0);
+  // `scrollY` is driven natively, so its value can't be read back with
+  // addListener; the Animated.event's JS `listener` still fires, which is
+  // enough to know which state the header is in.
+  const [isCollapsed, setIsCollapsed] = (0, _react.useState)(false);
+  const isOwnProfile = !selectedUser;
+  const profileUser = selectedUser ?? user;
+  const media = (0, _react.useMemo)(() => files.filter(_user.isMediaFile), [files]);
+  const documents = (0, _react.useMemo)(() => files.filter(file => !(0, _user.isMediaFile)(file)), [files]);
+  const tabs = (0, _react.useMemo)(() => profileTabs({
+    isOwnProfile,
+    translatesEnabled: !!config?.translates?.enabled,
+    hasMedia: media.length > 0,
+    hasDocuments: documents.length > 0
+  }), [isOwnProfile, config?.translates?.enabled, media.length, documents.length]);
+
+  // Keep the selected tab valid as the lists load in.
+  (0, _react.useEffect)(() => {
+    if (tabs.length === 0) {
+      setActiveTab(null);
+      return;
     }
-  };
+    setActiveTab(current => current && tabs.includes(current) ? current : tabs[0]);
+  }, [tabs]);
+
+  // One request per visit, and only for one's own profile — the endpoint
+  // is scoped to the JWT owner, so it would return *our* files while
+  // looking at somebody else's page.
   (0, _react.useEffect)(() => {
-    handleGetDocs();
-  }, []);
+    if (!isOwnProfile) {
+      setFiles([]);
+      return;
+    }
+    let cancelled = false;
+    setLoadingFiles(true);
+    (0, _user.getUserFiles)().then(rows => {
+      if (!cancelled) {
+        setFiles(rows);
+      }
+    }).catch(error => {
+      console.warn('Could not load user files:', error);
+      if (!cancelled) {
+        setFiles([]);
+      }
+    }).finally(() => {
+      if (!cancelled) {
+        setLoadingFiles(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [isOwnProfile, user?.token]);
   const handleBackClick = (0, _react.useCallback)(() => {
     dispatch((0, _chatSettingsSlice.setSelectedUser)(undefined));
     handleCloseModal();
-  }, []);
+  }, [dispatch, handleCloseModal]);
+
+  // Same teardown the room-list menu runs (XMPP, redux, persisted slices,
+  // AsyncStorage), including the host's confirm copy and callbacks.
+  const performLogout = (0, _useLogout.useLogout)();
   const handleLogout = (0, _react.useCallback)(() => {
-    dispatch((0, _chatSettingsSlice.logout)());
-    dispatch((0, _roomsSlice.setLogoutState)());
-  }, []);
-  const menuOptions = (0, _react.useMemo)(() => [{
-    label: 'Log Out',
-    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LeaveIcon, {}),
-    onClick: () => {
-      handleLogout();
-    },
-    styles: {
-      color: 'red'
+    (0, _HeaderRoomListMenu.runLogoutFlow)(config?.logout ?? {
+      enabled: true
+    }, performLogout).catch(() => {});
+  }, [config?.logout, performLogout]);
+  const handleShare = (0, _react.useCallback)(async () => {
+    const name = profileUser?.name || `${profileUser?.firstName ?? ''} ${profileUser?.lastName ?? ''}`.trim();
+    const id = profileUser?.userJID || profileUser?.defaultWallet?.walletAddress || profileUser?.id || '';
+    try {
+      await _reactNative.Share.share({
+        message: id ? `${name}\n${id}` : name
+      });
+    } catch (error) {
+      console.warn('Could not share the profile:', error);
     }
-  }], []);
-  const handleSelect = selected => {
-    dispatch((0, _chatSettingsSlice.setLangSource)(selected.id));
-  };
-  const EditClick = (0, _react.useCallback)(() => {
-    setIsEditing(true);
-  }, []);
+  }, [profileUser]);
   const handleRoomCreation = async (newChat, usersArrayLength) => {
     try {
       const normalizedChat = (0, _createRoomFromApi.createRoomFromApi)(newChat, config?.xmppSettings?.conference, usersArrayLength);
-      if (!normalizedChat || !client) return;
+      if (!normalizedChat || !client) {
+        return;
+      }
       dispatch((0, _roomsSlice.addRoomViaApi)({
         room: normalizedChat,
         xmpp: client
@@ -139,202 +207,400 @@ const UserProfileModal = ({
       type: 'info',
       duration: 3000
     });
-    let newRoomJid = '';
     if (config?.newArch) {
       const newRoom = await (0, _rooms.postPrivateRoom)(selectedUser?.userJID ?? (selectedUser?.id || ''));
       handleRoomCreation(newRoom, 2);
-      newRoomJid = newRoom.name;
     } else {
       const selectedUserUsername = (0, _walletUsername.walletToUsername)(selectedUser?.id || '');
       const myUsername = (0, _walletUsername.walletToUsername)(user.defaultWallet.walletAddress);
-      const combinedWalletAddress = [myUsername, selectedUserUsername].sort().join('.');
-      const roomJid = combinedWalletAddress.toLowerCase();
+      const roomJid = [myUsername, selectedUserUsername].sort().join('.').toLowerCase();
       const combinedUsersName = [user.firstName, selectedUser?.name?.split(' ')?.[0] || ''].sort().join(' and ');
-      newRoomJid = (await client?.createPrivateRoomStanza(combinedUsersName, `Private chat ${combinedUsersName}`, roomJid)) || '';
+      const newRoomJid = (await client?.createPrivateRoomStanza(combinedUsersName, `Private chat ${combinedUsersName}`, roomJid)) || '';
       if (newRoomJid) {
         await client?.inviteRoomRequestStanza(selectedUserUsername, newRoomJid);
         await client?.getRoomsStanza();
       }
     }
     dispatch((0, _chatSettingsSlice.setActiveModal)(undefined));
-  }, [selectedUser]);
-  const modalUser = selectedUser ?? user;
-  const findLanguage = () => {
-    if (!langSource) {
-      return null;
-    }
-    const language = _LANGUAGE_OPTIONS.LANGUAGE_OPTIONS.find(lang => lang.id === langSource);
-    return language || null;
-  };
-  const showDeleteModal = docId => {
-    setDeleteDocumentId(docId);
-    setShowDelete(true);
+  }, [selectedUser]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const openFile = file => {
+    dispatch((0, _chatSettingsSlice.setActiveFile)({
+      fileName: file.name,
+      fileURL: file.url,
+      mimetype: file.mimetype
+    }));
+    dispatch((0, _chatSettingsSlice.setActiveModal)(_MODAL_TYPES.MODAL_TYPES.FILE_PREVIEW));
   };
-  const DefaultBody = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalHeaderComponent.default, {
-      handleCloseModal: handleBackClick,
-      headerTitle: 'Profile',
-      rightMenu: !selectedUser && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-          onPress: EditClick,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.EditIcon, {
-            color: "#8C8C8C"
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownMenu.default, {
-          options: menuOptions,
-          position: "right",
-          menuIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.MoreIcon, {})
-        })]
+  const heroActions = (0, _react.useMemo)(() => isOwnProfile ? [{
+    key: 'account',
+    label: t('action.account'),
+    icon: color => /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ProfileIcon, {
+      color: color
+    }),
+    onPress: () => dispatch((0, _chatSettingsSlice.setActiveModal)(_MODAL_TYPES.MODAL_TYPES.SETTINGS))
+  }, {
+    key: 'share',
+    label: t('action.share'),
+    icon: color => /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ShareIcon, {
+      color: color
+    }),
+    onPress: handleShare
+  }, {
+    key: 'edit',
+    label: t('action.edit'),
+    icon: color => /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.EditIcon, {
+      color: color
+    }),
+    onPress: () => setIsEditing(true)
+  }, {
+    key: 'logout',
+    label: t('action.logOut'),
+    icon: color => /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LogoutIcon, {
+      color: color
+    }),
+    onPress: handleLogout
+  }] : [...(config?.hideMemberSendMessageAction ? [] : [{
+    key: 'message',
+    label: t('action.message'),
+    icon: color => /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ChatIcon, {
+      color: color
+    }),
+    onPress: handlePrivateMessage
+  }]), {
+    key: 'share',
+    label: t('action.share'),
+    icon: color => /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ShareIcon, {
+      color: color
+    }),
+    onPress: handleShare
+  }], [isOwnProfile, t, handleShare, handlePrivateMessage, handleLogout] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  // Collapsed, the hero's round buttons are gone — the "…" menu carries
+  // exactly the same actions so nothing becomes unreachable.
+  const menuItems = (0, _react.useMemo)(() => isCollapsed ? heroActions.map(action => ({
+    key: action.key,
+    label: action.label,
+    icon: action.icon(theme.text),
+    destructive: action.key === 'logout',
+    onPress: action.onPress
+  })) : [], [isCollapsed, heroActions, theme.text]);
+  if (isEditing) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.ModalContainerFullScreen, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditUserModal.default, {
+        setIsEditing: setIsEditing,
+        modalUser: profileUser,
+        config: config
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledModalComponents.CenterContainer, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileImagePlaceholder.ProfileImagePlaceholder, {
-        icon: modalUser?.profileImage ?? null,
-        name: modalUser?.name ?? modalUser?.firstName,
-        size: 120
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.UserInfo, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.UserName, {
-          children: modalUser?.name ? `${modalUser?.name}` : `${modalUser?.firstName} ${modalUser?.lastName}`
-        })
-      }), !selectedUser && config?.translates?.enabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.BorderedContainer, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
-          options: _LANGUAGE_OPTIONS.LANGUAGE_OPTIONS,
-          placeholder: 'Select your language',
-          onSelect: handleSelect,
-          accentColor: config?.colors?.primary,
-          selectedValue: findLanguage()
+    });
+  }
+  const displayName = profileUser?.name || `${profileUser?.firstName ?? ''} ${profileUser?.lastName ?? ''}`.trim() || t('modal.profile.title');
+  const heroImage = (0, _secureFileUrl.appendFileToken)(profileUser?.profileImage, fileToken) || null;
+  const heroColor = config?.colors?.avatar || (0, _getIconColor.getIconColor)(config);
+  const description = profileUser?.description;
+  const renderTabBody = () => {
+    if (activeTab === 'language') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        children: _LANGUAGE_OPTIONS.LANGUAGE_OPTIONS.map(option => {
+          const selected = langSource === option.id;
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+            testID: `${PREFIX}-language-${option.id}`,
+            activeOpacity: 0.7,
+            style: styles.languageRow,
+            onPress: () => dispatch((0, _chatSettingsSlice.setLangSource)(option.id)),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.languageLabel,
+              children: option.name
+            }), selected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.check, {
+                color: (0, _getIconColor.getIconColor)(config)
+              }],
+              children: "\u2713"
+            })]
+          }, option.id);
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledModalComponents.BorderedContainer, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.Label, {
-          children: "About"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.LabelData, {
-          children: modalUser?.description && modalUser?.description?.length > 4 ? modalUser.description : 'No description'
-        })]
-      }), selectedUser && !config?.disableMemberProfileActions && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [!config?.hideMemberSendMessageAction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.ActionButton, {
-          StartIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ChatIcon, {}),
-          onPress: handlePrivateMessage,
-          variant: "filled",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: {
-              color: '#ffffff'
-            },
-            children: "Message"
-          })
-        }), !config?.hideMemberCopyIdAction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.ActionButton, {
-          onPress: () => {}
-          // onPress={() => handleCopyClick(selectedUser.id)}
-          ,
-          variant: "filled",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: {
-              color: '#ffffff'
+      });
+    }
+    if (activeTab === 'media') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.mediaGrid,
+        children: media.map(file => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          testID: `${PREFIX}-media-${file.id}`,
+          activeOpacity: 0.8,
+          style: styles.mediaTile,
+          onPress: () => openFile(file),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+            source: {
+              uri: (0, _secureFileUrl.appendFileToken)(file.url, fileToken) || file.url
             },
-            children: "Copy User Id"
+            style: styles.mediaImage,
+            resizeMode: "cover"
           })
+        }, file.id))
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      children: documents.map(file => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+        testID: `${PREFIX}-document-${file.id}`,
+        activeOpacity: 0.7,
+        style: styles.documentRow,
+        onPress: () => openFile(file),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.IconDoc, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.documentText,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            numberOfLines: 1,
+            style: styles.documentName,
+            children: file.name
+          }), !!file.createdAt && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.documentDate,
+            children: new Date(file.createdAt).toLocaleDateString()
+          })]
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.BorderedContainer, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-          style: {
-            maxHeight: 400
-          },
-          showsVerticalScrollIndicator: true,
-          nestedScrollEnabled: true,
-          children: documents.map(doc => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: {
-              flexDirection: 'row',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-              gap: 24,
-              backgroundColor: '#F3F6FC',
-              marginBottom: 8,
-              paddingVertical: 8,
-              paddingHorizontal: 16,
-              borderRadius: 8
-            },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: {
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 24
-              },
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.IconDoc, {})
-              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.Label, {
-                  style: {
-                    paddingBottom: 4
-                  },
-                  children: doc.documentName
-                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.LabelData, {
-                  children: new Date(doc.createdAt).toLocaleDateString('en-GB', {
-                    day: '2-digit',
-                    month: 'short',
-                    year: 'numeric'
-                  }) + ' ' + new Date(doc.createdAt).toLocaleTimeString('en-GB', {
-                    hour: '2-digit',
-                    minute: '2-digit'
+      }, file.id))
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledModalComponents.ModalContainerFullScreen, {
+    style: styles.screen,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.ScrollView, {
+      ref: scrollRef,
+      style: styles.scroll,
+      contentContainerStyle: [styles.scrollContent, viewportHeight > 0 && {
+        minHeight: viewportHeight + collapseDistance
+      }],
+      onLayout: e => setViewportHeight(e.nativeEvent.layout.height),
+      showsVerticalScrollIndicator: false,
+      scrollEventThrottle: 16,
+      onScroll: _reactNative.Animated.event([{
+        nativeEvent: {
+          contentOffset: {
+            y: scrollY
+          }
+        }
+      }], {
+        useNativeDriver: true,
+        listener: e => {
+          const y = e?.nativeEvent?.contentOffset?.y ?? 0;
+          setIsCollapsed(y >= collapseDistance - 8);
+        }
+      }),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileHeader.ProfileHero, {
+        testIDPrefix: PREFIX,
+        title: displayName,
+        imageUri: heroImage,
+        fallbackColor: heroColor,
+        initials: userInitials(displayName),
+        scrollY: scrollY,
+        actions: heroActions,
+        titleStyle: (0, _typography.chatTextStyle)(config?.typography?.profile?.title),
+        titleAccessory: isOwnProfile ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+          testID: `${PREFIX}-logout`,
+          activeOpacity: 0.7,
+          style: styles.leaveButton,
+          onPress: handleLogout,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LeaveIcon, {
+            color: "#FFFFFF",
+            width: 18,
+            height: 18
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.leaveLabel,
+            children: t('action.leave')
+          })]
+        }) : undefined
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.body,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.card,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.cardLabel, (0, _getElementFont.getElementFont)(config, 'profileSectionLabel')],
+            children: t('modal.profile.about')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.cardValue,
+            children: description && description.length > 4 ? description : t('modal.profile.noDescription')
+          })]
+        }), tabs.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.card,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.tabsRow,
+            children: tabs.map(tab => {
+              const active = tab === activeTab;
+              const count = tab === 'media' ? media.length : tab === 'documents' ? documents.length : 0;
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+                testID: `${PREFIX}-tab-${tab}`,
+                activeOpacity: 0.7,
+                style: [styles.tab, active && {
+                  borderBottomColor: (0, _getIconColor.getIconColor)(config)
+                }],
+                onPress: () => setActiveTab(tab),
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: [styles.tabLabel, active && {
+                    color: (0, _getIconColor.getIconColor)(config)
+                  }],
+                  children: t(`modal.profile.${tab}`)
+                }), count > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                  style: [styles.tabBadge, {
+                    backgroundColor: (0, _getIconColor.getIconColor)(config)
+                  }],
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                    style: styles.tabBadgeText,
+                    children: count
                   })
                 })]
-              })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-              onPress: () => showDeleteModal(doc._id),
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DeleteIcon, {})
-            })]
-          }, doc._id))
-        })
-      })]
-    })]
-  }), [modalUser, documents]);
-  const EditingBody = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditUserModal.default, {
-    setIsEditing: setIsEditing,
-    modalUser: modalUser,
-    config: config
-  }), [modalUser]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.ModalContainerFullScreen, {
-      children: !isEditing ? DefaultBody : EditingBody
-    }), showDelete && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.ModalBackground, {
-      style: {
-        position: 'absolute',
-        zIndex: 9999
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledModalComponents.ModalContainer, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.CloseButton, {
-          onPress: () => setShowDelete(false),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: {
-              fontSize: 24
-            },
-            children: "\xD7"
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.ModalTitle, {
-          children: "Delete this document?"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledModalComponents.GroupContainer, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-            onPress: () => setShowDelete(false),
-            text: 'Cancel',
-            style: {
-              width: '100%'
-            },
-            unstyled: true,
-            variant: "filled",
-            color: "white"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-            onPress: handleDeleteDocument,
-            text: 'Delete',
-            style: {
-              width: '100%',
-              borderWidth: 1,
-              borderColor: 'red'
-            },
-            color: "red",
-            unstyled: true,
-            variant: "outlined"
-          })]
+              }, tab);
+            })
+          }), renderTabBody()]
+        }), isOwnProfile && loadingFiles && files.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+          testID: `${PREFIX}-files-loading`
         })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileHeader.ProfileTopBar, {
+      testIDPrefix: PREFIX,
+      title: displayName,
+      imageUri: heroImage,
+      fallbackColor: heroColor,
+      initials: userInitials(displayName),
+      scrollY: scrollY,
+      onBack: handleBackClick,
+      titleStyle: (0, _typography.chatTextStyle)(config?.typography?.profile?.screenTitle),
+      menu: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileMenu.default, {
+        testIDPrefix: PREFIX,
+        items: menuItems
       })
     })]
   });
 };
+const createStyles = theme => _reactNative.StyleSheet.create({
+  screen: {
+    position: 'relative',
+    backgroundColor: theme.listBackground
+  },
+  scroll: {
+    width: '100%',
+    flex: 1
+  },
+  scrollContent: {
+    paddingBottom: 32
+  },
+  body: {
+    padding: 12,
+    gap: 12
+  },
+  card: {
+    backgroundColor: theme.surface,
+    borderRadius: 14,
+    padding: 16,
+    shadowColor: theme.shadow,
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 1
+  },
+  cardLabel: {
+    color: theme.textSecondary,
+    fontSize: 14
+  },
+  cardValue: {
+    color: theme.text,
+    fontSize: 16,
+    marginTop: 4
+  },
+  leaveButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 7,
+    borderRadius: 18,
+    backgroundColor: 'rgba(0,0,0,0.35)'
+  },
+  leaveLabel: {
+    color: '#FFFFFF',
+    fontSize: 14,
+    fontWeight: '500'
+  },
+  tabsRow: {
+    flexDirection: 'row',
+    gap: 20,
+    borderBottomWidth: _reactNative.StyleSheet.hairlineWidth,
+    borderBottomColor: theme.border,
+    marginBottom: 12
+  },
+  tab: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    paddingBottom: 10,
+    borderBottomWidth: 2,
+    borderBottomColor: 'transparent'
+  },
+  tabLabel: {
+    fontSize: 15,
+    fontWeight: '500',
+    color: theme.textSecondary
+  },
+  tabBadge: {
+    minWidth: 20,
+    paddingHorizontal: 5,
+    paddingVertical: 1,
+    borderRadius: 10,
+    alignItems: 'center'
+  },
+  tabBadgeText: {
+    color: theme.textOnPrimary,
+    fontSize: 11,
+    fontWeight: '600'
+  },
+  languageRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 12
+  },
+  languageLabel: {
+    fontSize: 16,
+    color: theme.text
+  },
+  check: {
+    fontSize: 16,
+    fontWeight: '700'
+  },
+  mediaGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 6
+  },
+  mediaTile: {
+    width: '31.8%',
+    aspectRatio: 1,
+    borderRadius: 10,
+    overflow: 'hidden',
+    backgroundColor: theme.surfaceSecondary
+  },
+  mediaImage: {
+    width: '100%',
+    height: '100%'
+  },
+  documentRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 14,
+    paddingVertical: 12
+  },
+  documentText: {
+    flex: 1
+  },
+  documentName: {
+    fontSize: 16,
+    color: theme.text
+  },
+  documentDate: {
+    fontSize: 13,
+    color: theme.textSecondary,
+    marginTop: 2
+  }
+});
 var _default = exports.default = UserProfileModal;
 //# sourceMappingURL=UserProfileModal.js.map