@ethora/chat-component-rn 26.8.3 → 26.8.5

package/src/components/Modals/Modal/SwipeBackLayer.tsx

@@ -0,0 +1,170 @@
+import React, { ReactNode, useCallback, useEffect, useRef } from 'react';
+import {
+  BackHandler,
+  Keyboard,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from 'react-native';
+import Animated, {
+  interpolate,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import {
+  COMPLETE_DISTANCE,
+  COMPLETE_VELOCITY,
+  EDGE_WIDTH,
+  LIST_DIM,
+  POP,
+  PUSH,
+} from '../../MainComponents/RoomStack';
+
+interface SwipeBackLayerProps {
+  /** Called once the screen has left (swipe, back button, hardware back). */
+  onClose: () => void;
+  /** Receives the animated close, to hand to the screen's own back button. */
+  children: (close: () => void) => ReactNode;
+}
+
+/**
+ * Full-screen modal layer with the same navigation feel as RoomStack: it
+ * slides in from the right, and a swipe from the left edge drags it back
+ * out over whatever is underneath (the room or the list).
+ */
+export const SwipeBackLayer: React.FC<SwipeBackLayerProps> = ({
+  onClose,
+  children,
+}) => {
+  const { width: windowWidth } = useWindowDimensions();
+  const width = useSharedValue(windowWidth);
+  const x = useSharedValue(windowWidth);
+  const closing = useSharedValue(false);
+
+  useEffect(() => {
+    x.value = withTiming(0, PUSH);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  const finish = useCallback(() => onCloseRef.current(), []);
+
+  const close = useCallback(() => {
+    if (closing.value) {
+      return;
+    }
+    closing.value = true;
+    Keyboard.dismiss();
+    x.value = withTiming(width.value, POP, finished => {
+      if (finished) {
+        runOnJS(finish)();
+      }
+    });
+  }, [finish]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    const sub = BackHandler.addEventListener('hardwareBackPress', () => {
+      close();
+      return true;
+    });
+    return () => sub.remove();
+  }, [close]);
+
+  const dismissKeyboard = useCallback(() => Keyboard.dismiss(), []);
+
+  const swipeBack = Gesture.Pan()
+    .hitSlop({ left: 0, width: EDGE_WIDTH })
+    .activeOffsetX(12)
+    .failOffsetY([-16, 16])
+    .onStart(() => {
+      runOnJS(dismissKeyboard)();
+    })
+    .onUpdate(e => {
+      if (closing.value) {
+        return;
+      }
+      x.value = Math.min(Math.max(e.translationX, 0), width.value);
+    })
+    .onEnd(e => {
+      if (closing.value) {
+        return;
+      }
+      const complete =
+        x.value > width.value * COMPLETE_DISTANCE ||
+        e.velocityX > COMPLETE_VELOCITY;
+      if (complete) {
+        closing.value = true;
+        x.value = withTiming(width.value, POP, finished => {
+          if (finished) {
+            runOnJS(finish)();
+          }
+        });
+      } else {
+        x.value = withTiming(0, POP);
+      }
+    });
+
+  const screenStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: x.value }],
+  }));
+  const dimStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(x.value, [0, width.value], [LIST_DIM, 0]),
+  }));
+
+  return (
+    <View
+      pointerEvents="box-none"
+      style={styles.host}
+      onLayout={e => {
+        const next = e.nativeEvent.layout.width;
+        if (next > 0) {
+          width.value = next;
+        }
+      }}
+    >
+      <Animated.View
+        pointerEvents="none"
+        style={[styles.fill, styles.dim, dimStyle]}
+      />
+      <GestureDetector gesture={swipeBack}>
+        <Animated.View style={[styles.fill, styles.screen, screenStyle]}>
+          {children(close)}
+        </Animated.View>
+      </GestureDetector>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  host: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    zIndex: 1000,
+    overflow: 'hidden',
+  },
+  fill: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  },
+  dim: {
+    backgroundColor: '#000',
+  },
+  // Same box the shared ModalBackground gives its content.
+  screen: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: -4, height: 0 },
+    shadowOpacity: 0.18,
+    shadowRadius: 12,
+  },
+});

package/src/components/Modals/ProfileHeader/ProfileHeader.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import {
   Animated,
   Image,
+  Platform,
   StyleProp,
   StyleSheet,
   Text,
@@ -39,7 +40,13 @@ const COLLAPSE_RAMP = 48;
  */
 const BLUR_INTENSITY = 92;
 /** Darkening applied on top of the blur (and used alone without it). */
-const FROST_DIM = 'rgba(0,0,0,0.28)';
+const FROST_DIM = 'rgba(0,0,0,0.5)';
+/**
+ * Blur of the picture itself when expo-blur is not in the binary: RN's own
+ * `Image.blurRadius`, so the collapsed header is still frosted rather than
+ * just dimmed. Android caps the radius at 25.
+ */
+const IMAGE_BLUR_RADIUS = Platform.OS === 'android' ? 25 : 40;
 /** Height of the readability gradient under the name and buttons. */
 const SCRIM_HEIGHT = 220;
 /** Bands the gradient is built from — enough that no step is visible. */
@@ -249,12 +256,25 @@ export const ProfileHero: React.FC<
           ]}
         >
           {onPhoto ? (
-            <Image
-              testID={`${testIDPrefix}-hero-image`}
-              source={{ uri: imageUri as string }}
-              style={StyleSheet.absoluteFill}
-              resizeMode="cover"
-            />
+            <>
+              <Image
+                testID={`${testIDPrefix}-hero-image`}
+                source={{ uri: imageUri as string }}
+                style={StyleSheet.absoluteFill}
+                resizeMode="cover"
+              />
+              {/* Without expo-blur the frost is a blurred copy of the same
+                * picture, inside the same transform so the two line up as
+                * one fades into the other. */}
+              {!BlurView && (
+                <Animated.Image
+                  source={{ uri: imageUri as string }}
+                  style={[StyleSheet.absoluteFill, { opacity: collapsed }]}
+                  resizeMode="cover"
+                  blurRadius={IMAGE_BLUR_RADIUS}
+                />
+              )}
+            </>
           ) : (
             <View style={styles.initialsWrap}>
               <Text
@@ -395,6 +415,7 @@ export const ProfileTopBar: React.FC<
               source={{ uri: imageUri as string }}
               style={StyleSheet.absoluteFill}
               resizeMode="cover"
+              blurRadius={BlurView ? 0 : IMAGE_BLUR_RADIUS}
             />
             <FrostLayer />
           </>
@@ -499,7 +520,7 @@ const styles = StyleSheet.create({
     backgroundColor: FROST_DIM,
   },
   frostFallback: {
-    backgroundColor: 'rgba(0,0,0,0.35)',
+    backgroundColor: FROST_DIM,
   },
   // Only over a photo: keeps white text readable without tinting the flat
   // fallback colour.

package/src/components/Modals/UserProfileModal/UserProfileModal.tsx

@@ -39,7 +39,6 @@ import {
   setActiveFile,
   setActiveModal,
   setLangSource,
-  setSelectedUser,
 } from '../../../roomStore/chatSettingsSlice';
 import { addRoomViaApi, setCurrentRoom } from '../../../roomStore/roomsSlice';
 import { runLogoutFlow } from '../../Menu/HeaderRoomListMenu';
@@ -183,10 +182,10 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
     };
   }, [isOwnProfile, user?.token]);
 
+  // The modal host clears `selectedUser` once the page has slid away.
   const handleBackClick = useCallback(() => {
-    dispatch(setSelectedUser(undefined));
     handleCloseModal();
-  }, [dispatch, handleCloseModal]);
+  }, [handleCloseModal]);
 
   // Same teardown the room-list menu runs (XMPP, redux, persisted slices,
   // AsyncStorage), including the host's confirm copy and callbacks.
@@ -473,6 +472,10 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
         ]}
         onLayout={(e) => setViewportHeight(e.nativeEvent.layout.height)}
         showsVerticalScrollIndicator={false}
+        // Magnet: a header released part-way settles fully open or fully
+        // collapsed; past the collapsed point the content scrolls freely.
+        snapToOffsets={[0, collapseDistance]}
+        snapToEnd={false}
         scrollEventThrottle={16}
         onScroll={Animated.event(
           [{ nativeEvent: { contentOffset: { y: scrollY } } }],

package/src/components/Modals/UserSettingsModal/UserSettingsModal.tsx

@@ -1,23 +1,37 @@
 /** @format */
 
 import React, { useCallback, useMemo } from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { useDispatch } from 'react-redux';
+import {
+  StyleSheet,
+  Switch,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
 import { ModalContainerFullScreen } from '../styledModalComponents';
 import ModalHeaderComponent from '../ModalHeaderComponent';
 import { ArowDownIcon } from '../../../assets/icons';
-import { setActiveModal } from '../../../roomStore/chatSettingsSlice';
+import {
+  setActiveModal,
+  setPushEnabled,
+  setThemePreference,
+} from '../../../roomStore/chatSettingsSlice';
+import type { RootState } from '../../../roomStore';
 import { MODAL_TYPES } from '../../../helpers/constants/MODAL_TYPES';
 import { useChatSettingState } from '../../../hooks/useChatSettingState';
 import { chatTextStyle } from '../../../helpers/typography';
+import { savePreferences } from '../../../helpers/preferencesStorage';
 import { useT } from '../../../i18n/useT';
 import { useTheme } from '../../../hooks/useTheme';
-import type { ChatTheme } from '../../../theme/theme';
+import type { ChatTheme, ThemePreference } from '../../../theme/theme';
 
 interface UserSettingsModalProps {
   handleCloseModal: any;
 }
 
+const APPEARANCES: ThemePreference[] = ['light', 'dark', 'system'];
+
 const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
   handleCloseModal,
 }) => {
@@ -27,6 +41,28 @@ const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
   const theme = useTheme();
   const styles = useMemo(() => createStyles(theme), [theme]);
 
+  const themePreference = useSelector(
+    (s: RootState) => s.chatSettingStore.themePreference
+  );
+  const pushEnabled = useSelector(
+    (s: RootState) => s.chatSettingStore.pushEnabled
+  );
+
+  // What the picker shows before the user ever touched it: the host's
+  // config.dark, so the selected segment matches what is on screen.
+  const appearance: ThemePreference =
+    themePreference ??
+    (config?.dark === 'system' ? 'system' : config?.dark ? 'dark' : 'light');
+
+  const appearanceLabels: Record<ThemePreference, string> = useMemo(
+    () => ({
+      light: t('settings.appearance.light'),
+      dark: t('settings.appearance.dark'),
+      system: t('settings.appearance.system'),
+    }),
+    [t]
+  );
+
   const options = useMemo(
     () => [
       { label: t('settings.manageData.title'), key: MODAL_TYPES.MANAGE_DATA },
@@ -42,6 +78,31 @@ const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
     [dispatch]
   );
 
+  const handleAppearance = useCallback(
+    (pref: ThemePreference) => {
+      dispatch(setThemePreference(pref));
+      savePreferences({ theme: pref });
+    },
+    [dispatch]
+  );
+
+  // The SDK acts on the flag itself (pushRegistration releases / restores
+  // the device-token registrations); the host is told so it can mirror
+  // the choice on any native push side it owns.
+  const onPushNotificationsToggle = config?.eventHandlers?.onPushNotificationsToggle;
+  const handlePush = useCallback(
+    (enabled: boolean) => {
+      dispatch(setPushEnabled(enabled));
+      savePreferences({ pushEnabled: enabled });
+      if (onPushNotificationsToggle) {
+        Promise.resolve(onPushNotificationsToggle(enabled)).catch((err) =>
+          console.warn('[settings] onPushNotificationsToggle failed', err)
+        );
+      }
+    },
+    [dispatch, onPushNotificationsToggle]
+  );
+
   return (
     <ModalContainerFullScreen style={styles.screen}>
       <ModalHeaderComponent
@@ -53,6 +114,51 @@ const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
         * hairline dividers — the rows are separate destinations, and the
         * design gives each its own surface. */}
       <View style={styles.body}>
+        {!config?.settings?.hideAppearance ? (
+          <View style={[styles.card, styles.stackCard]} testID="settings-appearance">
+            <Text style={styles.label}>{t('settings.appearance.title')}</Text>
+            <View style={styles.segmented} accessibilityRole="radiogroup">
+              {APPEARANCES.map((pref) => {
+                const selected = pref === appearance;
+                return (
+                  <TouchableOpacity
+                    key={pref}
+                    testID={`settings-appearance-${pref}`}
+                    accessibilityRole="radio"
+                    accessibilityState={{ selected }}
+                    activeOpacity={0.7}
+                    style={[styles.segment, selected && styles.segmentSelected]}
+                    onPress={() => handleAppearance(pref)}
+                  >
+                    <Text
+                      style={[styles.segmentLabel, selected && styles.segmentLabelSelected]}
+                    >
+                      {appearanceLabels[pref]}
+                    </Text>
+                  </TouchableOpacity>
+                );
+              })}
+            </View>
+          </View>
+        ) : null}
+
+        {!config?.settings?.hidePushToggle ? (
+          <View style={styles.card} testID="settings-notifications">
+            <View style={styles.switchText}>
+              <Text style={styles.label}>{t('settings.notifications.push')}</Text>
+              <Text style={styles.hint}>{t('settings.notifications.pushHint')}</Text>
+            </View>
+            <Switch
+              testID="settings-push-switch"
+              value={pushEnabled !== false}
+              onValueChange={handlePush}
+              trackColor={{ true: theme.primary, false: theme.surfaceSecondary }}
+              thumbColor={theme.surface}
+              ios_backgroundColor={theme.surfaceSecondary}
+            />
+          </View>
+        ) : null}
+
         {options.map((option) => (
           <TouchableOpacity
             key={option.key}
@@ -98,11 +204,58 @@ const createStyles = (theme: ChatTheme) => StyleSheet.create({
     shadowRadius: 12,
     elevation: 3,
   },
+  // Label above the control instead of beside it: three segments do not
+  // fit next to a label on narrow phones.
+  stackCard: {
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    gap: 14,
+  },
   label: {
     fontSize: 17,
     fontWeight: '500',
     color: theme.text,
   },
+  hint: {
+    marginTop: 4,
+    fontSize: 13,
+    lineHeight: 18,
+    color: theme.textSecondary,
+  },
+  switchText: {
+    flex: 1,
+    paddingRight: 16,
+  },
+  segmented: {
+    flexDirection: 'row',
+    backgroundColor: theme.surfaceSecondary,
+    borderRadius: 12,
+    padding: 3,
+    gap: 3,
+  },
+  segment: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 9,
+    borderRadius: 9,
+  },
+  segmentSelected: {
+    backgroundColor: theme.surface,
+    shadowColor: theme.shadow,
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.08,
+    shadowRadius: 3,
+    elevation: 2,
+  },
+  segmentLabel: {
+    fontSize: 15,
+    fontWeight: '500',
+    color: theme.textSecondary,
+  },
+  segmentLabelSelected: {
+    color: theme.text,
+  },
   chevron: {
     transform: [{ rotate: '-90deg' }],
   },

package/src/helpers/keyboardLayout.ts

@@ -6,6 +6,9 @@ type KeyboardLayoutArgs = {
 };
 
 export const ANDROID_INPUT_DOCK_GAP = 12;
+// Bottom padding the dock keeps while the iOS keyboard is open, so the
+// composer is glued to the keyboard without touching its edge.
+export const IOS_KEYBOARD_DOCK_GAP = 4;
 
 export const getKeyboardVerticalOffset = ({
   platform,
@@ -14,6 +17,29 @@ export const getKeyboardVerticalOffset = ({
 }: KeyboardLayoutArgs): number =>
   configuredOffset + (platform === 'ios' ? bottomInset : 0);
 
+// Offset for the KeyboardAvoidingView strategy. Unlike KeyboardStickyView
+// (where a positive `opened` offset pushes the dock DOWN into the keyboard),
+// a positive value here ADDS bottom padding above the keyboard — so the
+// safe-area inset must not be added: the avoiding view already ends exactly
+// at the keyboard's top edge.
+export const getKeyboardAvoidingOffset = ({
+  configuredOffset = 0,
+}: Pick<KeyboardLayoutArgs, 'configuredOffset'>): number => configuredOffset;
+
+// Dock bottom padding while the keyboard is open (KeyboardAvoidingView
+// strategy). On iOS the safe-area padding collapses to a small gap; Android
+// keeps its fixed gap.
+export const getInputDockKeyboardPadding = ({
+  platform,
+  inputDockPaddingBottom,
+}: {
+  platform: string;
+  inputDockPaddingBottom: number;
+}): number =>
+  platform === 'ios'
+    ? Math.min(inputDockPaddingBottom, IOS_KEYBOARD_DOCK_GAP)
+    : inputDockPaddingBottom;
+
 type InputDockPaddingArgs = Omit<KeyboardLayoutArgs, 'configuredOffset'> & {
   // Explicit `inputDockPaddingBottom` config value, verbatim on both
   // platforms when provided (0 allowed). Takes priority over every other

package/src/helpers/preferencesStorage.ts

@@ -0,0 +1,40 @@
+/** @format */
+
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import type { ThemePreference } from '../theme/theme';
+
+const KEY = '@ethora/preferences';
+
+/** Small, unencrypted, per-device user preferences set from Settings. */
+export interface StoredPreferences {
+  theme?: ThemePreference;
+  pushEnabled?: boolean;
+}
+
+export const loadPreferences = async (): Promise<StoredPreferences> => {
+  try {
+    const raw = await AsyncStorage.getItem(KEY);
+    return raw ? (JSON.parse(raw) as StoredPreferences) : {};
+  } catch {
+    return {};
+  }
+};
+
+export const savePreferences = async (
+  patch: StoredPreferences
+): Promise<void> => {
+  try {
+    const current = await loadPreferences();
+    await AsyncStorage.setItem(KEY, JSON.stringify({ ...current, ...patch }));
+  } catch (error) {
+    console.warn('[preferences] save failed', error);
+  }
+};
+
+export const clearPreferences = async (): Promise<void> => {
+  try {
+    await AsyncStorage.removeItem(KEY);
+  } catch {
+    /* ignore */
+  }
+};

package/src/i18n/strings.ts

@@ -239,6 +239,13 @@ const en: UiStringTable = {
   'settings.blockedUsers.label': 'Blocked Users',
   'settings.blockedUsers.description': 'Users you have blocked cannot send you messages or see when you are online.',
   'settings.blockedUsers.emptyState': "You haven't blocked anyone yet.",
+  'settings.appearance.title': 'Appearance',
+  'settings.appearance.light': 'Light',
+  'settings.appearance.dark': 'Dark',
+  'settings.appearance.system': 'System',
+  'settings.notifications.title': 'Notifications',
+  'settings.notifications.push': 'Push notifications',
+  'settings.notifications.pushHint': 'New messages and calls wake this device even when the app is closed.',
   'settings.visibility.title': 'Visibility',
   'settings.visibility.profileLabel': 'Profile Visibility',
   'settings.visibility.open': 'Open (default)',
@@ -490,6 +497,13 @@ const fr: UiStringTable = {
   'settings.blockedUsers.label': 'Utilisateurs bloqués',
   'settings.blockedUsers.description': "Les utilisateurs que vous avez bloqués ne peuvent pas vous envoyer de messages ni voir quand vous êtes en ligne.",
   'settings.blockedUsers.emptyState': "Vous n'avez encore bloqué personne.",
+  'settings.appearance.title': 'Apparence',
+  'settings.appearance.light': 'Clair',
+  'settings.appearance.dark': 'Sombre',
+  'settings.appearance.system': 'Système',
+  'settings.notifications.title': 'Notifications',
+  'settings.notifications.push': 'Notifications push',
+  'settings.notifications.pushHint': 'Les nouveaux messages et appels réveillent cet appareil même quand l\'application est fermée.',
   'settings.visibility.title': 'Visibilité',
   'settings.visibility.profileLabel': 'Visibilité du profil',
   'settings.visibility.open': 'Ouvert (par défaut)',
@@ -741,6 +755,13 @@ const es: UiStringTable = {
   'settings.blockedUsers.label': 'Usuarios bloqueados',
   'settings.blockedUsers.description': 'Los usuarios que hayas bloqueado no podrán enviarte mensajes ni ver cuándo estás en línea.',
   'settings.blockedUsers.emptyState': 'Todavía no has bloqueado a nadie.',
+  'settings.appearance.title': 'Apariencia',
+  'settings.appearance.light': 'Claro',
+  'settings.appearance.dark': 'Oscuro',
+  'settings.appearance.system': 'Sistema',
+  'settings.notifications.title': 'Notificaciones',
+  'settings.notifications.push': 'Notificaciones push',
+  'settings.notifications.pushHint': 'Los mensajes y llamadas nuevos despiertan este dispositivo incluso con la aplicación cerrada.',
   'settings.visibility.title': 'Visibilidad',
   'settings.visibility.profileLabel': 'Visibilidad del perfil',
   'settings.visibility.open': 'Abierto (predeterminado)',
@@ -992,6 +1013,13 @@ const pt: UiStringTable = {
   'settings.blockedUsers.label': 'Utilizadores bloqueados',
   'settings.blockedUsers.description': 'Os utilizadores que bloqueou não lhe podem enviar mensagens nem ver quando está online.',
   'settings.blockedUsers.emptyState': 'Ainda não bloqueou ninguém.',
+  'settings.appearance.title': 'Aparência',
+  'settings.appearance.light': 'Claro',
+  'settings.appearance.dark': 'Escuro',
+  'settings.appearance.system': 'Sistema',
+  'settings.notifications.title': 'Notificações',
+  'settings.notifications.push': 'Notificações push',
+  'settings.notifications.pushHint': 'Novas mensagens e chamadas acordam este dispositivo mesmo com o aplicativo fechado.',
   'settings.visibility.title': 'Visibilidade',
   'settings.visibility.profileLabel': 'Visibilidade do perfil',
   'settings.visibility.open': 'Aberto (predefinição)',
@@ -1243,6 +1271,13 @@ const ht: UiStringTable = {
   'settings.blockedUsers.label': 'Itilizatè bloke',
   'settings.blockedUsers.description': 'Itilizatè ou bloke yo pa ka voye mesaj ba ou ni wè lè ou an liy.',
   'settings.blockedUsers.emptyState': 'Ou poko bloke pèsonn.',
+  'settings.appearance.title': 'Aparans',
+  'settings.appearance.light': 'Klè',
+  'settings.appearance.dark': 'Fonse',
+  'settings.appearance.system': 'Sistèm',
+  'settings.notifications.title': 'Notifikasyon',
+  'settings.notifications.push': 'Notifikasyon push',
+  'settings.notifications.pushHint': 'Nouvo mesaj ak apèl reveye aparèy sa a menm lè aplikasyon an fèmen.',
   'settings.visibility.title': 'Vizibilite',
   'settings.visibility.profileLabel': 'Vizibilite pwofil la',
   'settings.visibility.open': 'Louvri (default)',
@@ -1494,6 +1529,13 @@ const zh: UiStringTable = {
   'settings.blockedUsers.label': '已屏蔽用户',
   'settings.blockedUsers.description': '被您屏蔽的用户无法向您发送消息，也无法看到您何时在线。',
   'settings.blockedUsers.emptyState': '您还没有屏蔽任何人。',
+  'settings.appearance.title': '外观',
+  'settings.appearance.light': '浅色',
+  'settings.appearance.dark': '深色',
+  'settings.appearance.system': '跟随系统',
+  'settings.notifications.title': '通知',
+  'settings.notifications.push': '推送通知',
+  'settings.notifications.pushHint': '即使应用已关闭，新消息和来电也会唤醒此设备。',
   'settings.visibility.title': '可见性',
   'settings.visibility.profileLabel': '资料可见性',
   'settings.visibility.open': '公开（默认）',

package/src/main.ts

@@ -121,3 +121,5 @@ export {
   useTheme,
 } from './theme';
 export type { ChatTheme, ChatThemeColors, ChatThemeOverrides } from './theme';
+export type { ThemePreference } from './theme/theme';
+export { setThemePreference, setPushEnabled } from './roomStore/chatSettingsSlice';