Use Redux store to keep track of layout

app/javascript/mastodon/features/ui/index.js

@@ -74,21 +74,17 @@ class WrappedRoute extends React.Component {
 
 }
 
-function columnClass(columns) {
-  switch (columns) {
-    case "auto": return "auto-columns";
-    case "single": return "single-column";
-    case "multiple": return "multi-columns";
-    default: return "auto-columns";
-  }
-}
+const mapStateToProps = state => ({
+  layout: state.getIn(['settings', 'layout']),
+});
 
-@connect()
+@connect(mapStateToProps)
 export default class UI extends React.PureComponent {
 
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
     children: PropTypes.node,
+    layout: PropTypes.string,
   };
 
   state = {
@@ -184,15 +180,24 @@ export default class UI extends React.PureComponent {
   }
 
   render () {
-    const { width, draggingOver } = this.state;
+    const { width, draggingOver, layout } = this.state;
     const { children } = this.props;
 
-    const columns = "auto";
+    const columnsClass = layout => {
+      switch (layout) {
+      case 'single':
+        return 'single-column';
+      case 'multiple':
+        return 'multiple-columns';
+      default:
+        return 'auto-columns';
+      }
+    }
 
     return (
-      <div className={'ui ' + columnClass(columns)} ref={this.setRef}>
+      <div className={'ui ' + columnsClass(layout)} ref={this.setRef}>
         <TabsBar />
-        <ColumnsAreaContainer singleColumn={isMobile(width, columns)}>
+        <ColumnsAreaContainer singleColumn={isMobile(width, layout)}>
           <WrappedSwitch>
             <Redirect from='/' to='/getting-started' exact />
             <WrappedRoute path='/getting-started' component={GettingStarted} content={children} />