🐛 Fix layout and item size buttons

src/components/Settings/ItemSizeSelector.vue

@@ -37,8 +37,10 @@ export default {
       input: '',
     };
   },
-  props: {
-    iconSize: String,
+  computed: {
+    iconSize() {
+      return this.$store.getters.iconSize;
+    },
   },
   components: {
     IconSmall,

src/components/Settings/LayoutSelector.vue

@@ -5,19 +5,19 @@
       <IconDeafault
         @click="updateDisplayLayout('auto')"
         v-tooltip="tooltip($t('settings.layout-auto'))"
-        :class="`layout-icon ${displayLayout === 'auto' ? 'selected' : ''}`"
+        :class="`layout-icon ${layout === 'auto' ? 'selected' : ''}`"
         tabindex="-2"
       />
       <IconHorizontal
         @click="updateDisplayLayout('horizontal')"
         v-tooltip="tooltip($t('settings.layout-horizontal'))"
-        :class="`layout-icon ${displayLayout === 'horizontal' ? 'selected' : ''}`"
+        :class="`layout-icon ${layout === 'horizontal' ? 'selected' : ''}`"
         tabindex="-2"
       />
       <IconVertical
         @click="updateDisplayLayout('vertical')"
         v-tooltip="tooltip($t('settings.layout-vertical'))"
-        :class="`layout-icon ${displayLayout === 'vertical' ? 'selected' : ''}`"
+        :class="`layout-icon ${layout === 'vertical' ? 'selected' : ''}`"
         tabindex="-2"
       />
     </div>
@@ -40,6 +40,11 @@ export default {
     IconHorizontal,
     IconVertical,
   },
+  computed: {
+    layout() {
+      return this.$store.getters.layout;
+    },
+  },
   methods: {
     updateDisplayLayout(layout) {
       this.$store.commit(StoreKeys.SET_ITEM_LAYOUT, layout);

src/components/Settings/SettingsContainer.vue

@@ -7,7 +7,7 @@
     <div class="options-outer">
       <div :class="`options-container ${!settingsVisible ? 'hide' : ''}`">
         <ThemeSelector />
-        <LayoutSelector :displayLayout="displayLayout" />
+        <LayoutSelector :displayLayout="$store.getters.layout" />
         <ItemSizeSelector :iconSize="iconSize" />
         <ConfigLauncher />
         <AuthButtons  v-if="userState !== 0" :userType="userState" />

src/store.js

@@ -145,10 +145,18 @@ const store = new Vuex.Store({
       return foundSection;
     },
     layout(state) {
-      return state.config.appConfig.layout || 'auto';
+      const pageId = state.currentConfigInfo.confId;
+      const layoutStoreKey = pageId
+        ? `${localStorageKeys.LAYOUT_ORIENTATION}-${pageId}` : localStorageKeys.LAYOUT_ORIENTATION;
+      const appConfigLayout = state.config.appConfig.layout;
+      return localStorage.getItem(layoutStoreKey) || appConfigLayout || 'auto';
     },
     iconSize(state) {
-      return state.config.appConfig.iconSize || 'medium';
+      const pageId = state.currentConfigInfo.confId;
+      const sizeStoreKey = pageId
+        ? `${localStorageKeys.ICON_SIZE}-${pageId}` : localStorageKeys.ICON_SIZE;
+      const appConfigSize = state.config.appConfig.iconSize;
+      return localStorage.getItem(sizeStoreKey) || appConfigSize || 'medium';
     },
   },
   mutations: {
@@ -310,11 +318,23 @@ const store = new Vuex.Store({
       InfoHandler('Color palette updated', InfoKeys.VISUAL);
     },
     [SET_ITEM_LAYOUT](state, layout) {
-      state.config.appConfig.layout = layout;
+      const newConfig = { ...state.config };
+      newConfig.appConfig.layout = layout;
+      state.config = newConfig;
+      const pageId = state.currentConfigInfo.confId;
+      const layoutStoreKey = pageId
+        ? `${localStorageKeys.LAYOUT_ORIENTATION}-${pageId}` : localStorageKeys.LAYOUT_ORIENTATION;
+      localStorage.setItem(layoutStoreKey, layout);
       InfoHandler('Layout updated', InfoKeys.VISUAL);
     },
     [SET_ITEM_SIZE](state, iconSize) {
-      state.config.appConfig.iconSize = iconSize;
+      const newConfig = { ...state.config };
+      newConfig.appConfig.iconSize = iconSize;
+      state.config = newConfig;
+      const pageId = state.currentConfigInfo.confId;
+      const sizeStoreKey = pageId
+        ? `${localStorageKeys.ICON_SIZE}-${pageId}` : localStorageKeys.ICON_SIZE;
+      localStorage.setItem(sizeStoreKey, iconSize);
       InfoHandler('Item size updated', InfoKeys.VISUAL);
     },
     [UPDATE_CUSTOM_CSS](state, customCss) {

src/views/Home.vue

@@ -19,14 +19,7 @@
       </router-link>
     </div>
     <!-- Main content, section for each group of items -->
-    <div v-if="checkTheresData(sections) || isEditMode"
-      :class="`item-group-container `
-        + `orientation-${layout} `
-        + `item-size-${itemSizeBound} `
-        + (isEditMode ? 'edit-mode ' : '')
-        + (singleSectionView ? 'single-section-view ' : '')
-        + (this.colCount ? `col-count-${this.colCount} ` : '')"
-      >
+    <div v-if="checkTheresData(sections) || isEditMode" :class="computedClass">
       <template v-for="(section, index) in filteredSections">
         <Section
           :key="index"
@@ -70,7 +63,7 @@ import ExportConfigMenu from '@/components/InteractiveEditor/ExportConfigMenu.vu
 import AddNewSection from '@/components/InteractiveEditor/AddNewSectionLauncher.vue';
 import NotificationThing from '@/components/Settings/LocalConfigWarning.vue';
 import StoreKeys from '@/utils/StoreMutations';
-import { localStorageKeys, modalNames } from '@/utils/defaults';
+import { modalNames } from '@/utils/defaults';
 import ErrorHandler from '@/utils/ErrorHandler';
 import BackIcon from '@/assets/interface-icons/back-arrow.svg';
 
@@ -120,19 +113,13 @@ export default {
     iconSize() {
       return this.$store.getters.iconSize;
     },
-  },
-  watch: {
-    layoutOrientation(layout) {
-      if (layout) {
-        localStorage.setItem(localStorageKeys.LAYOUT_ORIENTATION, layout);
-        this.layout = layout;
-      }
-    },
-    iconSize(size) {
-      if (size) {
-        localStorage.setItem(localStorageKeys.ICON_SIZE, size);
-        this.itemSizeBound = size;
-      }
+    computedClass() {
+      let classes = 'item-group-container '
+      + ` orientation-${this.$store.getters.layout} item-size-${this.itemSizeBound}`;
+      if (this.isEditMode) classes += ' edit-mode';
+      if (this.singleSectionView) classes += ' single-section-view';
+      if (this.colCount) classes += ` col-count-${this.colCount}`;
+      return classes;
     },
   },
   methods: {