Use Redux store to keep track of layout

app/javascript/mastodon/containers/mastodon.js

@@ -24,6 +24,7 @@ addLocaleData(localeData);
 
 const store = configureStore();
 const initialState = JSON.parse(document.getElementById('initial-state').textContent);
+if (localStorage) initialState.layout = localStorage.getItem('mastodon-layout');
 store.dispatch(hydrateStore(initialState));
 
 export default class Mastodon extends React.PureComponent {

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} />

app/javascript/mastodon/is_mobile.js

@@ -2,9 +2,9 @@ const LAYOUT_BREAKPOINT = 1024;
 
 export function isMobile(width, columns) {
   switch (columns) {
-  case "multiple";:
+  case 'multiple';:
     return false;
-  case "single";:
+  case 'single';:
     return true;
   default:
     return width <= LAYOUT_BREAKPOINT;

app/javascript/mastodon/reducers/settings.js

@@ -6,6 +6,7 @@ import uuid from '../uuid';
 
 const initialState = Immutable.Map({
   onboarded: false,
+  layout: 'auto',
 
   home: Immutable.Map({
     shows: Immutable.Map({