@planningcenter/chat-react-native 3.32.1-rc.0 → 3.33.0-rc.0

package/build/screens/avatar_picker/color_picker.js

@@ -0,0 +1,53 @@
+import { PlatformPressable } from '@react-navigation/elements';
+import React, { useCallback } from 'react';
+import { FlatList, StyleSheet, useWindowDimensions } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { COLOR_KEYS, getAvatarGradientProps, } from '../../components/display/utils/avatar_gradient_colors';
+import { useTheme } from '../../hooks';
+import { GRID_COLUMNS } from './constants';
+export function ColorPicker({ selectedColor, onColorSelect }) {
+    const styles = useStyles();
+    const renderItem = useCallback(({ item }) => {
+        const gradientProps = getAvatarGradientProps(item);
+        const isSelected = item === selectedColor;
+        return (<PlatformPressable onPress={() => onColorSelect(item)} style={[styles.swatchOuter, isSelected && styles.swatchSelected]} accessibilityRole="button" accessibilityLabel={`${item.replace(/-/g, ' ')} color`} accessibilityState={{ selected: isSelected }}>
+          <LinearGradient {...gradientProps} style={styles.swatch}/>
+        </PlatformPressable>);
+    }, [selectedColor, onColorSelect, styles.swatch, styles.swatchOuter, styles.swatchSelected]);
+    return (<FlatList data={COLOR_KEYS} numColumns={GRID_COLUMNS} keyExtractor={item => item} renderItem={renderItem} contentContainerStyle={styles.grid} columnWrapperStyle={styles.row} scrollEnabled={false}/>);
+}
+const PADDING = 16;
+const GAP = 8;
+const useStyles = () => {
+    const { colors } = useTheme();
+    const { width: screenWidth } = useWindowDimensions();
+    const swatchSize = Math.floor((screenWidth - PADDING * 2 - (GRID_COLUMNS - 1) * GAP) / GRID_COLUMNS);
+    const innerSize = swatchSize - 6;
+    return StyleSheet.create({
+        grid: {
+            paddingHorizontal: PADDING,
+            paddingVertical: 12,
+        },
+        row: {
+            gap: GAP,
+            marginBottom: GAP,
+        },
+        swatchOuter: {
+            width: swatchSize,
+            height: swatchSize,
+            borderRadius: swatchSize / 2,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        swatchSelected: {
+            borderWidth: 3,
+            borderColor: colors.interaction,
+        },
+        swatch: {
+            width: innerSize,
+            height: innerSize,
+            borderRadius: innerSize / 2,
+        },
+    });
+};
+//# sourceMappingURL=color_picker.js.map

package/build/screens/avatar_picker/color_picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color_picker.js","sourceRoot":"","sources":["../../../src/screens/avatar_picker/color_picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PlatformPressable } from '@react-navigation/elements'\nimport React, { useCallback } from 'react'\nimport { FlatList, StyleSheet, useWindowDimensions } from 'react-native'\nimport LinearGradient from 'react-native-linear-gradient'\nimport {\n  COLOR_KEYS,\n  type CustomAvatarColorKey,\n  getAvatarGradientProps,\n} from '../../components/display/utils/avatar_gradient_colors'\nimport { useTheme } from '../../hooks'\nimport { GRID_COLUMNS } from './constants'\n\ninterface ColorPickerProps {\n  selectedColor: string\n  onColorSelect: (color: CustomAvatarColorKey) => void\n}\n\nexport function ColorPicker({ selectedColor, onColorSelect }: ColorPickerProps) {\n  const styles = useStyles()\n\n  const renderItem = useCallback(\n    ({ item }: { item: CustomAvatarColorKey }) => {\n      const gradientProps = getAvatarGradientProps(item)\n      const isSelected = item === selectedColor\n\n      return (\n        <PlatformPressable\n          onPress={() => onColorSelect(item)}\n          style={[styles.swatchOuter, isSelected && styles.swatchSelected]}\n          accessibilityRole=\"button\"\n          accessibilityLabel={`${item.replace(/-/g, ' ')} color`}\n          accessibilityState={{ selected: isSelected }}\n        >\n          <LinearGradient {...gradientProps} style={styles.swatch} />\n        </PlatformPressable>\n      )\n    },\n    [selectedColor, onColorSelect, styles.swatch, styles.swatchOuter, styles.swatchSelected]\n  )\n\n  return (\n    <FlatList\n      data={COLOR_KEYS}\n      numColumns={GRID_COLUMNS}\n      keyExtractor={item => item}\n      renderItem={renderItem}\n      contentContainerStyle={styles.grid}\n      columnWrapperStyle={styles.row}\n      scrollEnabled={false}\n    />\n  )\n}\n\nconst PADDING = 16\nconst GAP = 8\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n  const { width: screenWidth } = useWindowDimensions()\n  const swatchSize = Math.floor(\n    (screenWidth - PADDING * 2 - (GRID_COLUMNS - 1) * GAP) / GRID_COLUMNS\n  )\n  const innerSize = swatchSize - 6\n\n  return StyleSheet.create({\n    grid: {\n      paddingHorizontal: PADDING,\n      paddingVertical: 12,\n    },\n    row: {\n      gap: GAP,\n      marginBottom: GAP,\n    },\n    swatchOuter: {\n      width: swatchSize,\n      height: swatchSize,\n      borderRadius: swatchSize / 2,\n      alignItems: 'center',\n      justifyContent: 'center',\n    },\n    swatchSelected: {\n      borderWidth: 3,\n      borderColor: colors.interaction,\n    },\n    swatch: {\n      width: innerSize,\n      height: innerSize,\n      borderRadius: innerSize / 2,\n    },\n  })\n}\n"]}

package/build/screens/avatar_picker/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const AVATAR_ICON_KEYS: string[];
+export declare const GRID_COLUMNS = 6;
+//# sourceMappingURL=constants.d.ts.map

package/build/screens/avatar_picker/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/screens/avatar_picker/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,EAAE,MAAM,EAkDpC,CAAA;AAED,eAAO,MAAM,YAAY,IAAI,CAAA"}

package/build/screens/avatar_picker/constants.js

@@ -0,0 +1,53 @@
+export const AVATAR_ICON_KEYS = [
+    // Church
+    'book-bible',
+    'church',
+    'cross',
+    'dove',
+    'hands-heart',
+    'person-rays',
+    'praying-hands',
+    'podium',
+    'droplet',
+    'person-drowning',
+    'lighthouse',
+    // Services
+    'guitar',
+    'guitar-electric',
+    'violin',
+    'calendar-heart',
+    'hand-heart',
+    'hand-wave',
+    'baby',
+    'children',
+    'mug-hot',
+    'video-camera',
+    'music',
+    'piano-keyboard',
+    'drum',
+    'user-graduate',
+    'comments-question',
+    'presentation',
+    'microphone-stand',
+    'id-badge',
+    'book-user',
+    'hand-holding-heart',
+    'guitars',
+    'amp-guitar',
+    'school-flag',
+    'shield-check',
+    'projector',
+    // Groups
+    'people',
+    'people-group',
+    'person-dress',
+    'person',
+    'seedling',
+    'comments-alt',
+    'globe',
+    'book-open-reader',
+    'running',
+    'leaf',
+];
+export const GRID_COLUMNS = 6;
+//# sourceMappingURL=constants.js.map

package/build/screens/avatar_picker/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/screens/avatar_picker/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAa;IACxC,SAAS;IACT,YAAY;IACZ,QAAQ;IACR,OAAO;IACP,MAAM;IACN,aAAa;IACb,aAAa;IACb,eAAe;IACf,QAAQ;IACR,SAAS;IACT,iBAAiB;IACjB,YAAY;IACZ,WAAW;IACX,QAAQ;IACR,iBAAiB;IACjB,QAAQ;IACR,gBAAgB;IAChB,YAAY;IACZ,WAAW;IACX,MAAM;IACN,UAAU;IACV,SAAS;IACT,cAAc;IACd,OAAO;IACP,gBAAgB;IAChB,MAAM;IACN,eAAe;IACf,mBAAmB;IACnB,cAAc;IACd,kBAAkB;IAClB,UAAU;IACV,WAAW;IACX,oBAAoB;IACpB,SAAS;IACT,YAAY;IACZ,aAAa;IACb,cAAc;IACd,WAAW;IACX,SAAS;IACT,QAAQ;IACR,cAAc;IACd,cAAc;IACd,QAAQ;IACR,UAAU;IACV,cAAc;IACd,OAAO;IACP,kBAAkB;IAClB,SAAS;IACT,MAAM;CACP,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,CAAA","sourcesContent":["export const AVATAR_ICON_KEYS: string[] = [\n  // Church\n  'book-bible',\n  'church',\n  'cross',\n  'dove',\n  'hands-heart',\n  'person-rays',\n  'praying-hands',\n  'podium',\n  'droplet',\n  'person-drowning',\n  'lighthouse',\n  // Services\n  'guitar',\n  'guitar-electric',\n  'violin',\n  'calendar-heart',\n  'hand-heart',\n  'hand-wave',\n  'baby',\n  'children',\n  'mug-hot',\n  'video-camera',\n  'music',\n  'piano-keyboard',\n  'drum',\n  'user-graduate',\n  'comments-question',\n  'presentation',\n  'microphone-stand',\n  'id-badge',\n  'book-user',\n  'hand-holding-heart',\n  'guitars',\n  'amp-guitar',\n  'school-flag',\n  'shield-check',\n  'projector',\n  // Groups\n  'people',\n  'people-group',\n  'person-dress',\n  'person',\n  'seedling',\n  'comments-alt',\n  'globe',\n  'book-open-reader',\n  'running',\n  'leaf',\n]\n\nexport const GRID_COLUMNS = 6\n"]}

package/build/screens/avatar_picker/emoji_tab.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface EmojiTabProps {
+    onEmojiSelect: (emoji: string) => void;
+}
+export declare function EmojiTab({ onEmojiSelect }: EmojiTabProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=emoji_tab.d.ts.map

package/build/screens/avatar_picker/emoji_tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji_tab.d.ts","sourceRoot":"","sources":["../../../src/screens/avatar_picker/emoji_tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAK1C,UAAU,aAAa;IACrB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACvC;AAED,wBAAgB,QAAQ,CAAC,EAAE,aAAa,EAAE,EAAE,aAAa,qBAuDxD"}

package/build/screens/avatar_picker/emoji_tab.js

@@ -0,0 +1,55 @@
+import React, { useCallback } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { EmojiKeyboard } from 'rn-emoji-keyboard';
+import { useTheme } from '../../hooks';
+export function EmojiTab({ onEmojiSelect }) {
+    const styles = useStyles();
+    const { colors } = useTheme();
+    const handleEmojiSelected = useCallback((emojiObject) => {
+        onEmojiSelect(emojiObject.emoji);
+    }, [onEmojiSelect]);
+    const emojiTheme = {
+        container: colors.fillColorNeutral100Inverted,
+        header: colors.textColorDefaultSecondary,
+        knob: colors.fillColorNeutral040,
+        skinTonesContainer: colors.fillColorNeutral060,
+        category: {
+            icon: colors.textColorDefaultSecondary,
+            iconActive: colors.interaction,
+            container: colors.fillColorNeutral100Inverted,
+            containerActive: colors.fillColorNeutral080,
+        },
+        search: {
+            background: colors.fillColorNeutral080,
+            text: colors.textColorDefaultPrimary,
+            placeholder: colors.textColorDefaultSecondary,
+            icon: colors.textColorDefaultSecondary,
+        },
+        emoji: {
+            selected: colors.fillColorNeutral080,
+        },
+    };
+    return (<View style={styles.container}>
+      <EmojiKeyboard categoryPosition="top" onEmojiSelected={handleEmojiSelected} enableSearchBar enableRecentlyUsed theme={emojiTheme} styles={{
+            container: { borderRadius: 0 },
+            category: {
+                container: {
+                    borderRadius: 0,
+                    marginTop: -6,
+                    borderBottomWidth: 1,
+                    borderBottomColor: colors.borderColorDefaultDim,
+                },
+            },
+        }}/>
+    </View>);
+}
+const useStyles = () => {
+    const { colors } = useTheme();
+    return StyleSheet.create({
+        container: {
+            flex: 1,
+            backgroundColor: colors.fillColorNeutral100Inverted,
+        },
+    });
+};
+//# sourceMappingURL=emoji_tab.js.map

package/build/screens/avatar_picker/emoji_tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji_tab.js","sourceRoot":"","sources":["../../../src/screens/avatar_picker/emoji_tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAkB,MAAM,mBAAmB,CAAA;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAMtC,MAAM,UAAU,QAAQ,CAAC,EAAE,aAAa,EAAiB;IACvD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,WAAsB,EAAE,EAAE;QACzB,aAAa,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;IAClC,CAAC,EACD,CAAC,aAAa,CAAC,CAChB,CAAA;IAED,MAAM,UAAU,GAAG;QACjB,SAAS,EAAE,MAAM,CAAC,2BAA2B;QAC7C,MAAM,EAAE,MAAM,CAAC,yBAAyB;QACxC,IAAI,EAAE,MAAM,CAAC,mBAAmB;QAChC,kBAAkB,EAAE,MAAM,CAAC,mBAAmB;QAC9C,QAAQ,EAAE;YACR,IAAI,EAAE,MAAM,CAAC,yBAAyB;YACtC,UAAU,EAAE,MAAM,CAAC,WAAW;YAC9B,SAAS,EAAE,MAAM,CAAC,2BAA2B;YAC7C,eAAe,EAAE,MAAM,CAAC,mBAAmB;SAC5C;QACD,MAAM,EAAE;YACN,UAAU,EAAE,MAAM,CAAC,mBAAmB;YACtC,IAAI,EAAE,MAAM,CAAC,uBAAuB;YACpC,WAAW,EAAE,MAAM,CAAC,yBAAyB;YAC7C,IAAI,EAAE,MAAM,CAAC,yBAAyB;SACvC;QACD,KAAK,EAAE;YACL,QAAQ,EAAE,MAAM,CAAC,mBAAmB;SACrC;KACF,CAAA;IAED,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;MAAA,CAAC,aAAa,CACZ,gBAAgB,CAAC,KAAK,CACtB,eAAe,CAAC,CAAC,mBAAmB,CAAC,CACrC,eAAe,CACf,kBAAkB,CAClB,KAAK,CAAC,CAAC,UAAU,CAAC,CAClB,MAAM,CAAC,CAAC;YACN,SAAS,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE;YAC9B,QAAQ,EAAE;gBACR,SAAS,EAAE;oBACT,YAAY,EAAE,CAAC;oBACf,SAAS,EAAE,CAAC,CAAC;oBACb,iBAAiB,EAAE,CAAC;oBACpB,iBAAiB,EAAE,MAAM,CAAC,qBAAqB;iBAChD;aACF;SACF,CAAC,EAEN;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,IAAI,EAAE,CAAC;YACP,eAAe,EAAE,MAAM,CAAC,2BAA2B;SACpD;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React, { useCallback } from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { EmojiKeyboard, type EmojiType } from 'rn-emoji-keyboard'\nimport { useTheme } from '../../hooks'\n\ninterface EmojiTabProps {\n  onEmojiSelect: (emoji: string) => void\n}\n\nexport function EmojiTab({ onEmojiSelect }: EmojiTabProps) {\n  const styles = useStyles()\n  const { colors } = useTheme()\n\n  const handleEmojiSelected = useCallback(\n    (emojiObject: EmojiType) => {\n      onEmojiSelect(emojiObject.emoji)\n    },\n    [onEmojiSelect]\n  )\n\n  const emojiTheme = {\n    container: colors.fillColorNeutral100Inverted,\n    header: colors.textColorDefaultSecondary,\n    knob: colors.fillColorNeutral040,\n    skinTonesContainer: colors.fillColorNeutral060,\n    category: {\n      icon: colors.textColorDefaultSecondary,\n      iconActive: colors.interaction,\n      container: colors.fillColorNeutral100Inverted,\n      containerActive: colors.fillColorNeutral080,\n    },\n    search: {\n      background: colors.fillColorNeutral080,\n      text: colors.textColorDefaultPrimary,\n      placeholder: colors.textColorDefaultSecondary,\n      icon: colors.textColorDefaultSecondary,\n    },\n    emoji: {\n      selected: colors.fillColorNeutral080,\n    },\n  }\n\n  return (\n    <View style={styles.container}>\n      <EmojiKeyboard\n        categoryPosition=\"top\"\n        onEmojiSelected={handleEmojiSelected}\n        enableSearchBar\n        enableRecentlyUsed\n        theme={emojiTheme}\n        styles={{\n          container: { borderRadius: 0 },\n          category: {\n            container: {\n              borderRadius: 0,\n              marginTop: -6,\n              borderBottomWidth: 1,\n              borderBottomColor: colors.borderColorDefaultDim,\n            },\n          },\n        }}\n      />\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    container: {\n      flex: 1,\n      backgroundColor: colors.fillColorNeutral100Inverted,\n    },\n  })\n}\n"]}

package/build/screens/avatar_picker/icon_grid.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface IconGridProps {
+    selectedIconKey: string | null;
+    onIconSelect: (iconKey: string) => void;
+}
+export declare function IconGrid({ selectedIconKey, onIconSelect }: IconGridProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=icon_grid.d.ts.map

package/build/screens/avatar_picker/icon_grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon_grid.d.ts","sourceRoot":"","sources":["../../../src/screens/avatar_picker/icon_grid.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAK1C,UAAU,aAAa;IACrB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC;AAED,wBAAgB,QAAQ,CAAC,EAAE,eAAe,EAAE,YAAY,EAAE,EAAE,aAAa,qBAiCxE"}

package/build/screens/avatar_picker/icon_grid.js

@@ -0,0 +1,48 @@
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
+import { PlatformPressable } from '@react-navigation/elements';
+import React, { useCallback } from 'react';
+import { FlatList, StyleSheet, useWindowDimensions } from 'react-native';
+import { useTheme } from '../../hooks';
+import { AVATAR_ICON_KEYS, GRID_COLUMNS } from './constants';
+export function IconGrid({ selectedIconKey, onIconSelect }) {
+    const styles = useStyles();
+    const renderItem = useCallback(({ item }) => {
+        const isSelected = item === selectedIconKey;
+        return (<PlatformPressable onPress={() => onIconSelect(item)} style={[styles.cell, isSelected && styles.cellSelected]} accessibilityRole="button" accessibilityLabel={`${item.replace(/-/g, ' ')} icon`} accessibilityState={{ selected: isSelected }}>
+          <FontAwesomeIcon icon={['fas', item]} size={20} color="white"/>
+        </PlatformPressable>);
+    }, [selectedIconKey, onIconSelect, styles.cell, styles.cellSelected]);
+    return (<FlatList data={AVATAR_ICON_KEYS} numColumns={GRID_COLUMNS} keyExtractor={item => item} renderItem={renderItem} contentContainerStyle={styles.grid} columnWrapperStyle={styles.row} style={styles.list}/>);
+}
+const PADDING = 16;
+const GAP = 8;
+const useStyles = () => {
+    const { colors } = useTheme();
+    const { width: screenWidth } = useWindowDimensions();
+    const cellSize = Math.floor((screenWidth - PADDING * 2 - (GRID_COLUMNS - 1) * GAP) / GRID_COLUMNS);
+    return StyleSheet.create({
+        list: {
+            flex: 1,
+        },
+        grid: {
+            padding: PADDING,
+        },
+        row: {
+            gap: GAP,
+            marginBottom: GAP,
+        },
+        cell: {
+            width: cellSize,
+            height: cellSize,
+            borderRadius: cellSize / 2,
+            backgroundColor: colors.fillColorNeutral040,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        cellSelected: {
+            borderWidth: 3,
+            borderColor: colors.interaction,
+        },
+    });
+};
+//# sourceMappingURL=icon_grid.js.map

package/build/screens/avatar_picker/icon_grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon_grid.js","sourceRoot":"","sources":["../../../src/screens/avatar_picker/icon_grid.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAA;AACvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAO5D,MAAM,UAAU,QAAQ,CAAC,EAAE,eAAe,EAAE,YAAY,EAAiB;IACvE,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,EAAE,IAAI,EAAoB,EAAE,EAAE;QAC7B,MAAM,UAAU,GAAG,IAAI,KAAK,eAAe,CAAA;QAE3C,OAAO,CACL,CAAC,iBAAiB,CAChB,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAClC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,UAAU,IAAI,MAAM,CAAC,YAAY,CAAC,CAAC,CACxD,iBAAiB,CAAC,QAAQ,CAC1B,kBAAkB,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC,CACtD,kBAAkB,CAAC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,CAE7C;UAAA,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,IAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,EAC3E;QAAA,EAAE,iBAAiB,CAAC,CACrB,CAAA;IACH,CAAC,EACD,CAAC,eAAe,EAAE,YAAY,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,YAAY,CAAC,CAClE,CAAA;IAED,OAAO,CACL,CAAC,QAAQ,CACP,IAAI,CAAC,CAAC,gBAAgB,CAAC,CACvB,UAAU,CAAC,CAAC,YAAY,CAAC,CACzB,YAAY,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAC3B,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,qBAAqB,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CACnC,kBAAkB,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAC/B,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EACnB,CACH,CAAA;AACH,CAAC;AAED,MAAM,OAAO,GAAG,EAAE,CAAA;AAClB,MAAM,GAAG,GAAG,CAAC,CAAA;AAEb,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,mBAAmB,EAAE,CAAA;IACpD,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,WAAW,GAAG,OAAO,GAAG,CAAC,GAAG,CAAC,YAAY,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,YAAY,CAAC,CAAA;IAElG,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,IAAI,EAAE;YACJ,IAAI,EAAE,CAAC;SACR;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,OAAO;SACjB;QACD,GAAG,EAAE;YACH,GAAG,EAAE,GAAG;YACR,YAAY,EAAE,GAAG;SAClB;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,QAAQ;YACf,MAAM,EAAE,QAAQ;YAChB,YAAY,EAAE,QAAQ,GAAG,CAAC;YAC1B,eAAe,EAAE,MAAM,CAAC,mBAAmB;YAC3C,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;SACzB;QACD,YAAY,EAAE;YACZ,WAAW,EAAE,CAAC;YACd,WAAW,EAAE,MAAM,CAAC,WAAW;SAChC;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import type { IconName } from '@fortawesome/fontawesome-svg-core'\nimport { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'\nimport { PlatformPressable } from '@react-navigation/elements'\nimport React, { useCallback } from 'react'\nimport { FlatList, StyleSheet, useWindowDimensions } from 'react-native'\nimport { useTheme } from '../../hooks'\nimport { AVATAR_ICON_KEYS, GRID_COLUMNS } from './constants'\n\ninterface IconGridProps {\n  selectedIconKey: string | null\n  onIconSelect: (iconKey: string) => void\n}\n\nexport function IconGrid({ selectedIconKey, onIconSelect }: IconGridProps) {\n  const styles = useStyles()\n\n  const renderItem = useCallback(\n    ({ item }: { item: string }) => {\n      const isSelected = item === selectedIconKey\n\n      return (\n        <PlatformPressable\n          onPress={() => onIconSelect(item)}\n          style={[styles.cell, isSelected && styles.cellSelected]}\n          accessibilityRole=\"button\"\n          accessibilityLabel={`${item.replace(/-/g, ' ')} icon`}\n          accessibilityState={{ selected: isSelected }}\n        >\n          <FontAwesomeIcon icon={['fas', item as IconName]} size={20} color=\"white\" />\n        </PlatformPressable>\n      )\n    },\n    [selectedIconKey, onIconSelect, styles.cell, styles.cellSelected]\n  )\n\n  return (\n    <FlatList\n      data={AVATAR_ICON_KEYS}\n      numColumns={GRID_COLUMNS}\n      keyExtractor={item => item}\n      renderItem={renderItem}\n      contentContainerStyle={styles.grid}\n      columnWrapperStyle={styles.row}\n      style={styles.list}\n    />\n  )\n}\n\nconst PADDING = 16\nconst GAP = 8\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n  const { width: screenWidth } = useWindowDimensions()\n  const cellSize = Math.floor((screenWidth - PADDING * 2 - (GRID_COLUMNS - 1) * GAP) / GRID_COLUMNS)\n\n  return StyleSheet.create({\n    list: {\n      flex: 1,\n    },\n    grid: {\n      padding: PADDING,\n    },\n    row: {\n      gap: GAP,\n      marginBottom: GAP,\n    },\n    cell: {\n      width: cellSize,\n      height: cellSize,\n      borderRadius: cellSize / 2,\n      backgroundColor: colors.fillColorNeutral040,\n      alignItems: 'center',\n      justifyContent: 'center',\n    },\n    cellSelected: {\n      borderWidth: 3,\n      borderColor: colors.interaction,\n    },\n  })\n}\n"]}

package/build/screens/avatar_picker/upload_tab.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ImagePickerAsset } from '../../utils/native_adapters/image_picker';
+interface UploadTabProps {
+    imagePreviewUri: string | null;
+    onImageSelect: (asset: ImagePickerAsset) => void;
+}
+export declare function UploadTab({ imagePreviewUri, onImageSelect }: UploadTabProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=upload_tab.d.ts.map

package/build/screens/avatar_picker/upload_tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload_tab.d.ts","sourceRoot":"","sources":["../../../src/screens/avatar_picker/upload_tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAK1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAA;AAIhF,UAAU,cAAc;IACtB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAA;CACjD;AAED,wBAAgB,SAAS,CAAC,EAAE,eAAe,EAAE,aAAa,EAAE,EAAE,cAAc,qBAkC3E"}

package/build/screens/avatar_picker/upload_tab.js

@@ -0,0 +1,39 @@
+import React, { useCallback } from 'react';
+import { Alert, StyleSheet, View } from 'react-native';
+import { Button } from '../../components';
+import { useTheme } from '../../hooks';
+import { ImagePicker } from '../../utils/native_adapters';
+const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
+export function UploadTab({ imagePreviewUri, onImageSelect }) {
+    const styles = useStyles();
+    const pickImage = useCallback(async () => {
+        const result = await ImagePicker.openImageLibraryAsync({
+            mediaTypes: ['images'],
+            allowsEditing: true,
+            allowsMultipleSelection: false,
+        });
+        if (result.canceled || !result.assets?.[0])
+            return;
+        const asset = result.assets[0];
+        if (asset.fileSize && asset.fileSize > MAX_FILE_SIZE) {
+            Alert.alert('Image too large', 'Please choose an image under 10MB.');
+            return;
+        }
+        onImageSelect(asset);
+    }, [onImageSelect]);
+    return (<View style={styles.container}>
+      <Button title={imagePreviewUri ? 'Change photo' : 'Choose photo'} iconNameLeft="general.image" onPress={pickImage} variant="outline" appearance="interaction" size="md"/>
+    </View>);
+}
+const useStyles = () => {
+    const { colors } = useTheme();
+    return StyleSheet.create({
+        container: {
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: colors.fillColorNeutral100Inverted,
+        },
+    });
+};
+//# sourceMappingURL=upload_tab.js.map

package/build/screens/avatar_picker/upload_tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload_tab.js","sourceRoot":"","sources":["../../../src/screens/avatar_picker/upload_tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAGzD,MAAM,aAAa,GAAG,EAAE,GAAG,IAAI,GAAG,IAAI,CAAA,CAAC,OAAO;AAO9C,MAAM,UAAU,SAAS,CAAC,EAAE,eAAe,EAAE,aAAa,EAAkB;IAC1E,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,MAAM,SAAS,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACvC,MAAM,MAAM,GAAG,MAAM,WAAW,CAAC,qBAAqB,CAAC;YACrD,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,aAAa,EAAE,IAAI;YACnB,uBAAuB,EAAE,KAAK;SAC/B,CAAC,CAAA;QAEF,IAAI,MAAM,CAAC,QAAQ,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;YAAE,OAAM;QAElD,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;QAE9B,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,GAAG,aAAa,EAAE,CAAC;YACrD,KAAK,CAAC,KAAK,CAAC,iBAAiB,EAAE,oCAAoC,CAAC,CAAA;YACpE,OAAM;QACR,CAAC;QAED,aAAa,CAAC,KAAK,CAAC,CAAA;IACtB,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;IAEnB,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;MAAA,CAAC,MAAM,CACL,KAAK,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CACzD,YAAY,CAAC,eAAe,CAC5B,OAAO,CAAC,CAAC,SAAS,CAAC,CACnB,OAAO,CAAC,SAAS,CACjB,UAAU,CAAC,aAAa,CACxB,IAAI,CAAC,IAAI,EAEb;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,IAAI,EAAE,CAAC;YACP,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,eAAe,EAAE,MAAM,CAAC,2BAA2B;SACpD;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React, { useCallback } from 'react'\nimport { Alert, StyleSheet, View } from 'react-native'\nimport { Button } from '../../components'\nimport { useTheme } from '../../hooks'\nimport { ImagePicker } from '../../utils/native_adapters'\nimport type { ImagePickerAsset } from '../../utils/native_adapters/image_picker'\n\nconst MAX_FILE_SIZE = 10 * 1024 * 1024 // 10MB\n\ninterface UploadTabProps {\n  imagePreviewUri: string | null\n  onImageSelect: (asset: ImagePickerAsset) => void\n}\n\nexport function UploadTab({ imagePreviewUri, onImageSelect }: UploadTabProps) {\n  const styles = useStyles()\n\n  const pickImage = useCallback(async () => {\n    const result = await ImagePicker.openImageLibraryAsync({\n      mediaTypes: ['images'],\n      allowsEditing: true,\n      allowsMultipleSelection: false,\n    })\n\n    if (result.canceled || !result.assets?.[0]) return\n\n    const asset = result.assets[0]\n\n    if (asset.fileSize && asset.fileSize > MAX_FILE_SIZE) {\n      Alert.alert('Image too large', 'Please choose an image under 10MB.')\n      return\n    }\n\n    onImageSelect(asset)\n  }, [onImageSelect])\n\n  return (\n    <View style={styles.container}>\n      <Button\n        title={imagePreviewUri ? 'Change photo' : 'Choose photo'}\n        iconNameLeft=\"general.image\"\n        onPress={pickImage}\n        variant=\"outline\"\n        appearance=\"interaction\"\n        size=\"md\"\n      />\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    container: {\n      flex: 1,\n      alignItems: 'center',\n      justifyContent: 'center',\n      backgroundColor: colors.fillColorNeutral100Inverted,\n    },\n  })\n}\n"]}

package/build/screens/conversation_details_screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversation_details_screen.d.ts","sourceRoot":"","sources":["../../src/screens/conversation_details_screen.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAgB,iBAAiB,EAAiB,MAAM,0BAA0B,CAAA;AACzF,OAAO,KAQN,MAAM,OAAO,CAAA;AA0Ed,MAAM,MAAM,8BAA8B,GAAG,iBAAiB,CAAC;IAC7D,eAAe,EAAE,MAAM,CAAA;CACxB,CAAC,CAAA;AAEF,wBAAgB,yBAAyB,CAAC,EAAE,KAAK,EAAE,EAAE,8BAA8B,qBA2VlF"}
+{"version":3,"file":"conversation_details_screen.d.ts","sourceRoot":"","sources":["../../src/screens/conversation_details_screen.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAgB,iBAAiB,EAAiB,MAAM,0BAA0B,CAAA;AACzF,OAAO,KAQN,MAAM,OAAO,CAAA;AA4Ed,MAAM,MAAM,8BAA8B,GAAG,iBAAiB,CAAC;IAC7D,eAAe,EAAE,MAAM,CAAA;CACxB,CAAC,CAAA;AAEF,wBAAgB,yBAAyB,CAAC,EAAE,KAAK,EAAE,EAAE,8BAA8B,qBA+WlF"}

package/build/screens/conversation_details_screen.js

@@ -2,7 +2,8 @@ import { HeaderTitle as ElementsHeaderTitle, PlatformPressable, } from '@react-n
 import { StackActions, useNavigation } from '@react-navigation/native';
 import React, { useCallback, useEffect, useRef, useState, } from 'react';
 import { Alert, FlatList, Platform, Pressable, StyleSheet, TextInput, View, } from 'react-native';
-import { Badge, ChildNotice, Heading, Icon, Person, Switch, Text, TextButton, } from '../components';
+import { Badge, Button, ChildNotice, Heading, Icon, Person, Switch, Text, TextButton, } from '../components';
+import { ConversationAvatar } from '../components/display/conversation_avatar';
 import { HeaderTextButton } from '../components/display/platform_modal_header_buttons';
 import { useSuspensePaginator, useTheme } from '../hooks';
 import { useConversation, useConversationDelete, useConversationDisableReplies, useConversationMute, useConversationUpdate, } from '../hooks/use_conversation';
@@ -34,6 +35,7 @@ export function ConversationDetailsScreen({ route }) {
     const { mutate: deleteConversation } = useConversationDelete(route.params);
     const { featureEnabled } = useFeatures();
     const granularNotificationsEnabled = featureEnabled(availableFeatures.granular_notifications_ui);
+    const customAvatarsEnabled = featureEnabled(availableFeatures.custom_conversation_avatars);
     const showGenderFilter = featureEnabled(availableFeatures.gender_specific_conversations) && !!conversation.genderOption;
     const genderLabel = conversation.genderOption ? genderDisplayLabel(conversation.genderOption) : '';
     const { muted, setMuted } = useConversationMute({ conversation_id });
@@ -123,6 +125,20 @@ export function ConversationDetailsScreen({ route }) {
         });
     }, [HeaderRight, HeaderTitle, navigation]);
     const listData = [
+        {
+            type: canUpdate && customAvatarsEnabled ? SectionTypes.view : SectionTypes.hidden,
+            data: {
+                children: (<AvatarCard conversation={conversation} onPress={() => navigation.navigate('AvatarPicker', { conversation_id })}/>),
+            },
+            sectionOuterStyle: styles.sectionOuterAvatarCard,
+            sectionInnerStyle: styles.sectionInnerAvatarCard,
+        },
+        {
+            type: SectionTypes.header,
+            data: { title: 'Basic info' },
+            showBottomBorder: true,
+            sectionInnerStyle: styles.sectionInnerHeaderWithBottomBorder,
+        },
         {
             type: SectionTypes.view,
             data: {
@@ -315,6 +331,13 @@ function NavigableSettingRow({ title, subtitle, onPress }) {
       </View>
     </PlatformPressable>);
 }
+function AvatarCard({ conversation, onPress, }) {
+    const styles = useStyles();
+    return (<View style={styles.avatarCard}>
+      <ConversationAvatar conversation={conversation} size="2xl"/>
+      <Button title="Update avatar" iconNameLeft="general.pencil" onPress={onPress} variant="outline" appearance="interaction" size="sm"/>
+    </View>);
+}
 function TeamsGroup({ teams }) {
     const styles = useStyles();
     if (teams.length === 0)
@@ -437,6 +460,19 @@ const useStyles = ({ isStart, isEnd } = {}) => {
         navigableSettingChevron: {
             color: colors.iconColorDefaultDisabled,
         },
+        avatarCard: {
+            alignItems: 'center',
+            gap: 16,
+        },
+        sectionOuterAvatarCard: {
+            paddingLeft: 0,
+        },
+        sectionInnerAvatarCard: {
+            paddingTop: 24,
+            paddingBottom: 24,
+            paddingHorizontal: 16,
+            alignItems: 'center',
+        },
         teamGroup: {
             flexDirection: 'row',
             gap: 4,