Apply changes to breadcrumbs setting live

src/components/structures/LeftPanel.js

@@ -45,11 +45,22 @@ const LeftPanel = React.createClass({
     getInitialState: function() {
         return {
             searchFilter: '',
+            breadcrumbs: false,
         };
     },
 
     componentWillMount: function() {
         this.focusedElement = null;
+
+        this._settingWatchRef = SettingsStore.watchSetting(
+            "feature_room_breadcrumbs", null,
+            this._onBreadcrumbsChanged);
+
+        this.setState({breadcrumbs: SettingsStore.isFeatureEnabled("feature_room_breadcrumbs")});
+    },
+
+    componentWillUnmount: function() {
+        SettingsStore.unwatchSetting(this._settingWatchRef);
     },
 
     shouldComponentUpdate: function(nextProps, nextState) {
@@ -73,6 +84,16 @@ const LeftPanel = React.createClass({
         return false;
     },
 
+    _onBreadcrumbsChanged: function(settingName, roomId, level, valueAtLevel, value) {
+        // Features are only possible at a single level, so we can get away with using valueAtLevel.
+        // The SettingsStore runs on the same tick as the update, so `value` will be wrong.
+        this.setState({breadcrumbs: valueAtLevel});
+
+        // For some reason the setState doesn't trigger a render of the component, so force one.
+        // Probably has to do with the change happening outside of a change detector cycle.
+        this.forceUpdate();
+    },
+
     _onFocus: function(ev) {
         this.focusedElement = ev.target;
     },
@@ -220,7 +241,7 @@ const LeftPanel = React.createClass({
             collapsed={this.props.collapsed} />);
 
         let breadcrumbs;
-        if (SettingsStore.isFeatureEnabled("feature_room_breadcrumbs")) {
+        if (this.state.breadcrumbs) {
             breadcrumbs = (<RoomBreadcrumbs collapsed={this.props.collapsed} />);
         }
 

src/i18n/strings/en_EN.json

@@ -288,7 +288,7 @@
     "Failed to join room": "Failed to join room",
     "Message Pinning": "Message Pinning",
     "Custom user status messages": "Custom user status messages",
-    "Show recent room avatars above the room list (refresh to apply changes)": "Show recent room avatars above the room list (refresh to apply changes)",
+    "Show recent room avatars above the room list": "Show recent room avatars above the room list",
     "Group & filter rooms by custom tags (refresh to apply changes)": "Group & filter rooms by custom tags (refresh to apply changes)",
     "Render simple counters in room header": "Render simple counters in room header",
     "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",

src/settings/Settings.js

@@ -102,7 +102,7 @@ export const SETTINGS = {
     },
     "feature_room_breadcrumbs": {
         isFeature: true,
-        displayName: _td("Show recent room avatars above the room list (refresh to apply changes)"),
+        displayName: _td("Show recent room avatars above the room list"),
         supportedLevels: LEVELS_FEATURE,
         default: false,
     },

src/settings/handlers/DeviceSettingsHandler.js

@@ -127,6 +127,6 @@ export default class DeviceSettingsHandler extends SettingsHandler {
 
     _writeFeature(featureName, enabled) {
         localStorage.setItem("mx_labs_feature_" + featureName, enabled);
-        this._watchers.notifyUpdate(featureName, null, enabled);
+        this._watchers.notifyUpdate(featureName, null, SettingLevel.DEVICE, enabled);
     }
 }