Add a stories toggle to Preferences

_locales/en/messages.json

@@ -7169,6 +7169,14 @@
     "message": "Sending reaction...",
     "description": "Toast message"
   },
+  "Stories__settings-toggle--title": {
+    "message": "Share & View Stories",
+    "description": "Select box title for the stories on/off toggle"
+  },
+  "Stories__settings-toggle--description": {
+    "message": "You will no longer be able to share or view Stories when this option is turned off.",
+    "description": "Select box description for the stories on/off toggle"
+  },
   "StoryViewer__pause": {
     "message": "Pause",
     "description": "Aria label for pausing a story"

ts/components/Preferences.stories.tsx

@@ -1,16 +1,17 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+import type { Meta, Story } from '@storybook/react';
 import React from 'react';
-import { action } from '@storybook/addon-actions';
 
 import enMessages from '../../_locales/en/messages.json';
-import type { PropsType } from './Preferences';
+import type { PropsDataType, PropsType } from './Preferences';
 import { Preferences } from './Preferences';
 import { setupI18n } from '../util/setupI18n';
 import { DEFAULT_CONVERSATION_COLOR } from '../types/Colors';
 import { PhoneNumberSharingMode } from '../util/phoneNumberSharingMode';
 import { PhoneNumberDiscoverability } from '../util/phoneNumberDiscoverability';
+import { objectMap } from '../util/objectMap';
 
 const i18n = setupI18n('en', enMessages);
 
@@ -42,7 +43,7 @@ const availableSpeakers = [
   },
 ];
 
-const createProps = (): PropsType => ({
+const getDefaultArgs = (): PropsDataType => ({
   availableCameras: [
     {
       deviceId:
@@ -73,6 +74,7 @@ const createProps = (): PropsType => ({
   hasCallNotifications: true,
   hasCallRingtoneNotification: false,
   hasCountMutedConversations: false,
+  hasCustomTitleBar: true,
   hasHideMenuBar: false,
   hasIncomingCallNotifications: true,
   hasLinkPreviews: true,
@@ -85,38 +87,9 @@ const createProps = (): PropsType => ({
   hasReadReceipts: true,
   hasRelayCalls: false,
   hasSpellCheck: true,
+  hasStoriesEnabled: true,
   hasTypingIndicators: true,
-  lastSyncTime: Date.now(),
-  notificationContent: 'name',
-  selectedCamera:
-    'dfbe6effe70b0611ba0fdc2a9ea3f39f6cb110e6687948f7e5f016c111b7329c',
-  selectedMicrophone: availableMicrophones[0],
-  selectedSpeaker: availableSpeakers[1],
-  themeSetting: 'system',
-  universalExpireTimer: 3600,
-  whoCanFindMe: PhoneNumberDiscoverability.Discoverable,
-  whoCanSeeMe: PhoneNumberSharingMode.Everybody,
-  zoomFactor: 1,
-
-  addCustomColor: action('addCustomColor'),
-  closeSettings: action('closeSettings'),
-  doDeleteAllData: action('doDeleteAllData'),
-  doneRendering: action('doneRendering'),
-  editCustomColor: action('editCustomColor'),
-  getConversationsWithCustomColor: () => Promise.resolve([]),
   initialSpellCheckSetting: true,
-  makeSyncRequest: () => {
-    action('makeSyncRequest');
-    return Promise.resolve();
-  },
-  removeCustomColor: action('removeCustomColor'),
-  removeCustomColorOnConversations: action('removeCustomColorOnConversations'),
-  resetAllChatColors: action('resetAllChatColors'),
-  resetDefaultChatColor: action('resetDefaultChatColor'),
-  setGlobalDefaultConversationColor: action(
-    'setGlobalDefaultConversationColor'
-  ),
-
   isAudioNotificationsSupported: true,
   isAutoDownloadUpdatesSupported: true,
   isAutoLaunchSupported: true,
@@ -125,62 +98,95 @@ const createProps = (): PropsType => ({
   isPhoneNumberSharingSupported: false,
   isSyncSupported: true,
   isSystemTraySupported: true,
+  lastSyncTime: Date.now(),
+  notificationContent: 'name',
+  selectedCamera:
+    'dfbe6effe70b0611ba0fdc2a9ea3f39f6cb110e6687948f7e5f016c111b7329c',
+  selectedMicrophone: availableMicrophones[0],
+  selectedSpeaker: availableSpeakers[1],
+  shouldShowStoriesSettings: true,
+  themeSetting: 'system',
+  universalExpireTimer: 3600,
+  whoCanFindMe: PhoneNumberDiscoverability.Discoverable,
+  whoCanSeeMe: PhoneNumberSharingMode.Everybody,
+  zoomFactor: 1,
+});
 
-  onAudioNotificationsChange: action('onAudioNotificationsChange'),
+const defaultArgTypes: Record<string, { defaultValue: unknown }> = {};
-  onAutoDownloadUpdateChange: action('onAutoDownloadUpdateChange'),
+objectMap(getDefaultArgs(), (key, defaultValue) => {
-  onAutoLaunchChange: action('onAutoLaunchChange'),
+  defaultArgTypes[key] = { defaultValue };
-  onCallNotificationsChange: action('onCallNotificationsChange'),
-  onCallRingtoneNotificationChange: action('onCallRingtoneNotificationChange'),
-  onCountMutedConversationsChange: action('onCountMutedConversationsChange'),
-  onHideMenuBarChange: action('onHideMenuBarChange'),
-  onIncomingCallNotificationsChange: action(
-    'onIncomingCallNotificationsChange'
-  ),
-  onLastSyncTimeChange: action('onLastSyncTimeChange'),
-  onMediaCameraPermissionsChange: action('onMediaCameraPermissionsChange'),
-  onMediaPermissionsChange: action('onMediaPermissionsChange'),
-  onMinimizeToAndStartInSystemTrayChange: action(
-    'onMinimizeToAndStartInSystemTrayChange'
-  ),
-  onMinimizeToSystemTrayChange: action('onMinimizeToSystemTrayChange'),
-  onNotificationAttentionChange: action('onNotificationAttentionChange'),
-  onNotificationContentChange: action('onNotificationContentChange'),
-  onNotificationsChange: action('onNotificationsChange'),
-  onRelayCallsChange: action('onRelayCallsChange'),
-  onSelectedCameraChange: action('onSelectedCameraChange'),
-  onSelectedMicrophoneChange: action('onSelectedMicrophoneChange'),
-  onSelectedSpeakerChange: action('onSelectedSpeakerChange'),
-  onSpellCheckChange: action('onSpellCheckChange'),
-  onThemeChange: action('onThemeChange'),
-  onUniversalExpireTimerChange: action('onUniversalExpireTimerChange'),
-  onZoomFactorChange: action('onZoomFactorChange'),
-
-  i18n,
-
-  executeMenuRole: action('executeMenuRole'),
-  hasCustomTitleBar: true,
 });
 
 export default {
   title: 'Components/Preferences',
+  component: Preferences,
+  argTypes: {
+    // ...defaultArgTypes,
+
+    i18n: {
+      defaultValue: i18n,
+    },
+
+    addCustomColor: { action: true },
+    closeSettings: { action: true },
+    doDeleteAllData: { action: true },
+    doneRendering: { action: true },
+    editCustomColor: { action: true },
+    executeMenuRole: { action: true },
+    getConversationsWithCustomColor: { action: true },
+    makeSyncRequest: { action: true },
+    onAudioNotificationsChange: { action: true },
+    onAutoDownloadUpdateChange: { action: true },
+    onAutoLaunchChange: { action: true },
+    onCallNotificationsChange: { action: true },
+    onCallRingtoneNotificationChange: { action: true },
+    onCountMutedConversationsChange: { action: true },
+    onHasStoriesEnabledChanged: { action: true },
+    onHideMenuBarChange: { action: true },
+    onIncomingCallNotificationsChange: { action: true },
+    onLastSyncTimeChange: { action: true },
+    onMediaCameraPermissionsChange: { action: true },
+    onMediaPermissionsChange: { action: true },
+    onMinimizeToAndStartInSystemTrayChange: { action: true },
+    onMinimizeToSystemTrayChange: { action: true },
+    onNotificationAttentionChange: { action: true },
+    onNotificationContentChange: { action: true },
+    onNotificationsChange: { action: true },
+    onRelayCallsChange: { action: true },
+    onSelectedCameraChange: { action: true },
+    onSelectedMicrophoneChange: { action: true },
+    onSelectedSpeakerChange: { action: true },
+    onSpellCheckChange: { action: true },
+    onThemeChange: { action: true },
+    onUniversalExpireTimerChange: { action: true },
+    onZoomFactorChange: { action: true },
+    removeCustomColor: { action: true },
+    removeCustomColorOnConversations: { action: true },
+    resetAllChatColors: { action: true },
+    resetDefaultChatColor: { action: true },
+    setGlobalDefaultConversationColor: { action: true },
+  },
+} as Meta;
+
+const Template: Story<PropsType> = args => <Preferences {...args} />;
+
+export const _Preferences = Template.bind({});
+_Preferences.args = getDefaultArgs();
+
+export const Blocked1 = Template.bind({});
+Blocked1.args = {
+  blockedCount: 1,
 };
 
-export const _Preferences = (): JSX.Element => (
+export const BlockedMany = Template.bind({});
-  <Preferences {...createProps()} />
+BlockedMany.args = {
-);
+  blockedCount: 55,
-
+};
-export const Blocked1 = (): JSX.Element => (
-  <Preferences {...createProps()} blockedCount={1} />
-);
-
-export const BlockedMany = (): JSX.Element => (
-  <Preferences {...createProps()} blockedCount={55} />
-);
-
-export const CustomUniversalExpireTimer = (): JSX.Element => (
-  <Preferences {...createProps()} universalExpireTimer={9000} />
-);
 
+export const CustomUniversalExpireTimer = Template.bind({});
+CustomUniversalExpireTimer.args = {
+  universalExpireTimer: 9000,
+};
 CustomUniversalExpireTimer.story = {
   name: 'Custom universalExpireTimer',
 };

ts/components/Preferences.tsx

@@ -44,7 +44,7 @@ import { useTheme } from '../hooks/useTheme';
 type CheckboxChangeHandlerType = (value: boolean) => unknown;
 type SelectChangeHandlerType<T = string | number> = (value: T) => unknown;
 
-export type PropsType = {
+export type PropsDataType = {
   // Settings
   blockedCount: number;
   customColors: Record<string, CustomColorType>;
@@ -68,6 +68,7 @@ export type PropsType = {
   hasReadReceipts: boolean;
   hasRelayCalls?: boolean;
   hasSpellCheck: boolean;
+  hasStoriesEnabled: boolean;
   hasTypingIndicators: boolean;
   lastSyncTime?: number;
   notificationContent: NotificationSettingType;
@@ -80,16 +81,37 @@ export type PropsType = {
   whoCanSeeMe: PhoneNumberSharingMode;
   zoomFactor: ZoomFactorType;
 
+  // Other props
+  hasCustomTitleBar: boolean;
+  initialSpellCheckSetting: boolean;
+  shouldShowStoriesSettings: boolean;
+
+  // Limited support features
+  isAudioNotificationsSupported: boolean;
+  isAutoDownloadUpdatesSupported: boolean;
+  isAutoLaunchSupported: boolean;
+  isHideMenuBarSupported: boolean;
+  isNotificationAttentionSupported: boolean;
+  isPhoneNumberSharingSupported: boolean;
+  isSyncSupported: boolean;
+  isSystemTraySupported: boolean;
+
+  availableCameras: Array<
+    Pick<MediaDeviceInfo, 'deviceId' | 'groupId' | 'kind' | 'label'>
+  >;
+} & Omit<MediaDeviceSettings, 'availableCameras'>;
+
+type PropsFunctionType = {
   // Other props
   addCustomColor: (color: CustomColorType) => unknown;
   closeSettings: () => unknown;
   doDeleteAllData: () => unknown;
   doneRendering: () => unknown;
   editCustomColor: (colorId: string, color: CustomColorType) => unknown;
+  executeMenuRole: ExecuteMenuRoleType;
   getConversationsWithCustomColor: (
     colorId: string
   ) => Promise<Array<ConversationType>>;
-  initialSpellCheckSetting: boolean;
   makeSyncRequest: () => unknown;
   removeCustomColor: (colorId: string) => unknown;
   removeCustomColorOnConversations: (colorId: string) => unknown;
@@ -102,18 +124,6 @@ export type PropsType = {
       value: CustomColorType;
     }
   ) => unknown;
-  hasCustomTitleBar: boolean;
-  executeMenuRole: ExecuteMenuRoleType;
-
-  // Limited support features
-  isAudioNotificationsSupported: boolean;
-  isAutoDownloadUpdatesSupported: boolean;
-  isAutoLaunchSupported: boolean;
-  isHideMenuBarSupported: boolean;
-  isNotificationAttentionSupported: boolean;
-  isPhoneNumberSharingSupported: boolean;
-  isSyncSupported: boolean;
-  isSystemTraySupported: boolean;
 
   // Change handlers
   onAudioNotificationsChange: CheckboxChangeHandlerType;
@@ -122,6 +132,7 @@ export type PropsType = {
   onCallNotificationsChange: CheckboxChangeHandlerType;
   onCallRingtoneNotificationChange: CheckboxChangeHandlerType;
   onCountMutedConversationsChange: CheckboxChangeHandlerType;
+  onHasStoriesEnabledChanged: SelectChangeHandlerType<boolean>;
   onHideMenuBarChange: CheckboxChangeHandlerType;
   onIncomingCallNotificationsChange: CheckboxChangeHandlerType;
   onLastSyncTimeChange: (time: number) => unknown;
@@ -141,13 +152,11 @@ export type PropsType = {
   onUniversalExpireTimerChange: SelectChangeHandlerType<number>;
   onZoomFactorChange: SelectChangeHandlerType<ZoomFactorType>;
 
-  availableCameras: Array<
-    Pick<MediaDeviceInfo, 'deviceId' | 'groupId' | 'kind' | 'label'>
-  >;
-
   // Localization
   i18n: LocalizerType;
-} & Omit<MediaDeviceSettings, 'availableCameras'>;
+};
+
+export type PropsType = PropsDataType & PropsFunctionType;
 
 enum Page {
   // Accessible through left nav
@@ -218,6 +227,7 @@ export const Preferences = ({
   hasReadReceipts,
   hasRelayCalls,
   hasSpellCheck,
+  hasStoriesEnabled,
   hasTypingIndicators,
   i18n,
   initialSpellCheckSetting,
@@ -239,6 +249,7 @@ export const Preferences = ({
   onCallNotificationsChange,
   onCallRingtoneNotificationChange,
   onCountMutedConversationsChange,
+  onHasStoriesEnabledChanged,
   onHideMenuBarChange,
   onIncomingCallNotificationsChange,
   onLastSyncTimeChange,
@@ -265,12 +276,14 @@ export const Preferences = ({
   selectedMicrophone,
   selectedSpeaker,
   setGlobalDefaultConversationColor,
+  shouldShowStoriesSettings,
   themeSetting,
   universalExpireTimer = 0,
   whoCanFindMe,
   whoCanSeeMe,
   zoomFactor,
 }: PropsType): JSX.Element => {
+  const storiesId = useUniqueId();
   const themeSelectId = useUniqueId();
   const zoomSelectId = useUniqueId();
 
@@ -947,6 +960,39 @@ export const Preferences = ({
             }
           />
         </SettingsRow>
+        {shouldShowStoriesSettings && (
+          <SettingsRow title={i18n('Stories__title')}>
+            <Control
+              left={
+                <label htmlFor={storiesId}>
+                  <div>{i18n('Stories__settings-toggle--title')}</div>
+                  <div className="Preferences__description">
+                    {i18n('Stories__settings-toggle--description')}
+                  </div>
+                </label>
+              }
+              right={
+                <Select
+                  id={storiesId}
+                  onChange={value => {
+                    onHasStoriesEnabledChanged(value === 'true');
+                  }}
+                  options={[
+                    {
+                      text: i18n('on'),
+                      value: 'true',
+                    },
+                    {
+                      text: i18n('off'),
+                      value: 'false',
+                    },
+                  ]}
+                  value={String(hasStoriesEnabled)}
+                />
+              }
+            />
+          </SettingsRow>
+        )}
         <SettingsRow>
           <Control
             left={

ts/main/settingsChannel.ts

@@ -61,6 +61,7 @@ export class SettingsChannel extends EventEmitter {
     this.installCallback('isPrimary');
     this.installCallback('syncRequest');
     this.installCallback('isPhoneNumberSharingEnabled');
+    this.installCallback('shouldShowStoriesSettings');
 
     // Getters only. These are set by the primary device
     this.installSetting('blockedCount', { setter: false });
@@ -103,6 +104,7 @@ export class SettingsChannel extends EventEmitter {
     this.installSetting('lastSyncTime');
     this.installSetting('universalExpireTimer');
 
+    this.installSetting('hasStoriesEnabled');
     this.installSetting('zoomFactor');
 
     installPermissionsHandler({ session, userConfig });

ts/state/selectors/items.ts

@@ -64,10 +64,12 @@ export const getUsernamesEnabled = createSelector(
 );
 
 export const getStoriesEnabled = createSelector(
+  getItems,
   getRemoteConfig,
-  (remoteConfig: ConfigMapType): boolean =>
+  (state: ItemsStateType, remoteConfig: ConfigMapType): boolean =>
-    isRemoteConfigFlagEnabled(remoteConfig, 'desktop.internalUser') ||
+    state.hasStoriesEnabled !== false &&
-    isRemoteConfigFlagEnabled(remoteConfig, 'desktop.stories')
+    (isRemoteConfigFlagEnabled(remoteConfig, 'desktop.internalUser') ||
+      isRemoteConfigFlagEnabled(remoteConfig, 'desktop.stories'))
 );
 
 export const getDefaultConversationColor = createSelector(

ts/types/Storage.d.ts

@@ -65,6 +65,7 @@ export type StorageAccessType = {
   customColors: CustomColorsItemType;
   device_name: string;
   hasRegisterSupportForUnauthenticatedDelivery: boolean;
+  hasStoriesEnabled: boolean;
   identityKeyMap: IdentityKeyMap;
   lastHeartbeat: number;
   lastStartup: number;

ts/util/createIPCEvents.tsx

@@ -4,6 +4,7 @@
 import { webFrame } from 'electron';
 import type { AudioDevice } from 'ringrtc';
 import * as React from 'react';
+import * as RemoteConfig from '../RemoteConfig';
 
 import type { ZoomFactorType } from '../types/Storage.d';
 import type {
@@ -47,6 +48,7 @@ export type IPCEventsValuesType = {
   callRingtoneNotification: boolean;
   callSystemNotification: boolean;
   countMutedConversations: boolean;
+  hasStoriesEnabled: boolean;
   hideMenuBar: boolean | undefined;
   incomingCallNotification: boolean;
   lastSyncTime: number | undefined;
@@ -111,6 +113,7 @@ export type IPCEventsCallbacksType = {
     color: ConversationColorType,
     customColor?: { id: string; value: CustomColorType }
   ) => void;
+  shouldShowStoriesSettings: () => boolean;
   getDefaultConversationColor: () => DefaultConversationColorType;
   persistZoomFactor: (factor: number) => Promise<void>;
 };
@@ -175,6 +178,10 @@ export function createIPCEvents(
       webFrame.setZoomFactor(zoomFactor);
     },
 
+    getHasStoriesEnabled: () => window.storage.get('hasStoriesEnabled', true),
+    setHasStoriesEnabled: (value: boolean) =>
+      window.storage.put('hasStoriesEnabled', value),
+
     getPreferredAudioInputDevice: () =>
       window.storage.get('preferred-audio-input-device'),
     setPreferredAudioInputDevice: device =>
@@ -331,6 +338,9 @@ export function createIPCEvents(
 
     isPhoneNumberSharingEnabled: () => isPhoneNumberSharingEnabled(),
     isPrimary: () => window.textsecure.storage.user.getDeviceId() === 1,
+    shouldShowStoriesSettings: () =>
+      RemoteConfig.isEnabled('desktop.internalUser') ||
+      RemoteConfig.isEnabled('desktop.stories'),
     syncRequest: () =>
       new Promise<void>((resolve, reject) => {
         const FIVE_MINUTES = 5 * durations.MINUTE;

ts/windows/preload.ts

@@ -39,23 +39,26 @@ installSetting('typingIndicatorSetting', {
   setter: false,
 });
 
+installCallback('isPhoneNumberSharingEnabled');
+installCallback('isPrimary');
+installCallback('shouldShowStoriesSettings');
+installCallback('syncRequest');
+
 installSetting('alwaysRelayCalls');
 installSetting('audioNotification');
 installSetting('autoDownloadUpdate');
 installSetting('autoLaunch');
-installSetting('countMutedConversations');
 installSetting('callRingtoneNotification');
 installSetting('callSystemNotification');
+installSetting('countMutedConversations');
 installSetting('deviceName');
+installSetting('hasStoriesEnabled');
 installSetting('hideMenuBar');
 installSetting('incomingCallNotification');
-installCallback('isPhoneNumberSharingEnabled');
+installSetting('lastSyncTime');
-installCallback('isPrimary');
-installCallback('syncRequest');
 installSetting('notificationDrawAttention');
 installSetting('notificationSetting');
 installSetting('spellCheck');
-installSetting('lastSyncTime');
 installSetting('systemTraySetting');
 installSetting('themeSetting');
 installSetting('universalExpireTimer');

ts/windows/settings/preload.ts

@@ -50,6 +50,7 @@ const settingSystemTraySetting = createSetting('systemTraySetting');
 
 const settingLastSyncTime = createSetting('lastSyncTime');
 
+const settingHasStoriesEnabled = createSetting('hasStoriesEnabled');
 const settingZoomFactor = createSetting('zoomFactor');
 
 // Getters only.
@@ -84,6 +85,9 @@ const ipcGetCustomColors = createCallback('getCustomColors');
 const ipcIsSyncNotSupported = createCallback('isPrimary');
 const ipcMakeSyncRequest = createCallback('syncRequest');
 const ipcPNP = createCallback('isPhoneNumberSharingEnabled');
+const ipcShouldShowStoriesSettings = createCallback(
+  'shouldShowStoriesSettings'
+);
 
 // ChatColorPicker redux hookups
 // The redux actions update over IPC through a preferences re-render
@@ -146,6 +150,7 @@ const renderPreferences = async () => {
     hasReadReceipts,
     hasRelayCalls,
     hasSpellCheck,
+    hasStoriesEnabled,
     hasTypingIndicators,
     isPhoneNumberSharingSupported,
     lastSyncTime,
@@ -162,8 +167,9 @@ const renderPreferences = async () => {
 
     availableIODevices,
     customColors,
-    isSyncNotSupported,
     defaultConversationColor,
+    isSyncNotSupported,
+    shouldShowStoriesSettings,
   } = await awaitObject({
     blockedCount: settingBlockedCount.getValue(),
     deviceName: settingDeviceName.getValue(),
@@ -182,6 +188,7 @@ const renderPreferences = async () => {
     hasReadReceipts: settingReadReceipts.getValue(),
     hasRelayCalls: settingRelayCalls.getValue(),
     hasSpellCheck: settingSpellCheck.getValue(),
+    hasStoriesEnabled: settingHasStoriesEnabled.getValue(),
     hasTypingIndicators: settingTypingIndicators.getValue(),
     isPhoneNumberSharingSupported: ipcPNP(),
     lastSyncTime: settingLastSyncTime.getValue(),
@@ -199,8 +206,9 @@ const renderPreferences = async () => {
     // Callbacks
     availableIODevices: ipcGetAvailableIODevices(),
     customColors: ipcGetCustomColors(),
-    isSyncNotSupported: ipcIsSyncNotSupported(),
     defaultConversationColor: ipcGetDefaultConversationColor(),
+    isSyncNotSupported: ipcIsSyncNotSupported(),
+    shouldShowStoriesSettings: ipcShouldShowStoriesSettings(),
   });
 
   const { availableCameras, availableMicrophones, availableSpeakers } =
@@ -236,6 +244,7 @@ const renderPreferences = async () => {
     hasReadReceipts,
     hasRelayCalls,
     hasSpellCheck,
+    hasStoriesEnabled,
     hasTypingIndicators,
     lastSyncTime,
     notificationContent,
@@ -263,6 +272,7 @@ const renderPreferences = async () => {
     resetAllChatColors: ipcResetAllChatColors,
     resetDefaultChatColor: ipcResetDefaultChatColor,
     setGlobalDefaultConversationColor: ipcSetGlobalDefaultConversationColor,
+    shouldShowStoriesSettings,
 
     // Limited support features
     isAudioNotificationsSupported: Settings.isAudioNotificationSupported(),
@@ -287,6 +297,7 @@ const renderPreferences = async () => {
     onCountMutedConversationsChange: reRender(
       settingCountMutedConversations.setValue
     ),
+    onHasStoriesEnabledChanged: reRender(settingHasStoriesEnabled.setValue),
     onHideMenuBarChange: reRender(settingHideMenuBar.setValue),
     onIncomingCallNotificationsChange: reRender(
       settingIncomingCallNotification.setValue