Store/Settings: Handle `uiScale`'s side effects in the module

src/renderer/components/theme-settings/theme-settings.js

@@ -145,14 +145,6 @@ export default Vue.extend({
       localStorage.setItem('expandSideBar', value)
     },
 
-    handleUiScale: function (value) {
-      // FIXME: No electron safeguard
-      const { webFrame } = require('electron')
-      const zoomFactor = value / 100
-      webFrame.setZoomFactor(zoomFactor)
-      this.updateUiScale(parseInt(value))
-    },
-
     handleRestartPrompt: function (value) {
       this.disableSmoothScrollingToggleValue = value
       this.showRestartPrompt = true

src/renderer/components/theme-settings/theme-settings.vue

@@ -30,7 +30,7 @@
         :max-value="maxUiScale"
         :step="uiScaleStep"
         value-extension="%"
-        @change="handleUiScale"
+        @change="updateUiScale(parseInt($event))"
       />
     </ft-flex-box>
     <br>

src/renderer/store/modules/settings.js

@@ -159,7 +159,6 @@ const defaultSideEffectsTriggerId = settingId =>
 
 const state = {
   currentTheme: 'lightRed',
-  uiScale: 100,
   backendFallback: true,
   checkForUpdates: true,
   checkForBlogPosts: true,
@@ -214,12 +213,15 @@ const state = {
 }
 
 const stateWithSideEffects = {
-  /*
-  setting: {
-    defaultValue: any,
-    sideEffectsHandler: (store, settingValue) => void
+  uiScale: {
+    defaultValue: 100,
+    sideEffectsHandler: ({ state: { usingElectron } }, value) => {
+      if (usingElectron) {
+        const { webFrame } = require('electron')
+        webFrame.setZoomFactor(value / 100)
+      }
+    }
   }
-  */
 }
 
 const customState = {