refs #2128 Move spellchecker preference item to language section

spec/renderer/integration/store/Preferences/General.spec.ts

@@ -19,8 +19,7 @@ const state = (): GeneralState => {
         hideAllAttachments: false
       },
       other: {
-        launch: false,
-        spellcheck: true
+        launch: false
       }
     },
     loading: false

spec/renderer/integration/store/Preferences/Language.spec.ts

@@ -9,7 +9,10 @@ import { MyWindow } from '~/src/types/global'
 const state = (): LanguageState => {
   return {
     language: {
-      language: DefaultLanguage.en.key
+      language: DefaultLanguage.en.key,
+      spellchecker: {
+        enabled: true
+      }
     }
   }
 }
@@ -42,7 +45,10 @@ describe('Preferences/Language', () => {
       ipcMain.handle('get-preferences', () => {
         return {
           language: {
-            language: DefaultLanguage.ja.key
+            language: DefaultLanguage.ja.key,
+            spellchecker: {
+              enabled: true
+            }
           }
         }
       })

spec/renderer/unit/store/Preferences/General.spec.ts

@@ -15,8 +15,7 @@ describe('Preferences/General', () => {
           hideAllAttachments: false
         },
         other: {
-          launch: false,
-          spellcheck: true
+          launch: false
         }
       },
       loading: false

spec/renderer/unit/store/Preferences/Language.spec.ts

@@ -6,7 +6,10 @@ describe('Preferences/Language', () => {
   beforeEach(() => {
     state = {
       language: {
-        language: DefaultLanguage.en.key
+        language: DefaultLanguage.en.key,
+        spellchecker: {
+          enabled: true
+        }
       }
     }
   })

src/config/locales/en/translation.json

@@ -135,17 +135,7 @@
       },
       "other": {
         "title": "Other options",
-        "launch": "Launch app on login",
-        "spellcheck": {
-          "description": "Enable spellchecker",
-          "notice": "Requires relaunch",
-          "confirm": {
-            "title": "Confirm",
-            "message": "You have to restart this application. Continue?",
-            "ok": "Restart Now",
-            "cancel": "Cancel"
-          }
-        }
+        "launch": "Launch app on login"
       }
     },
     "appearance": {
@@ -239,13 +229,20 @@
     },
     "language": {
       "title": "Language",
-      "language_description": "Choose the language you would like to use with Whalebird.",
       "notice": "Requires relaunch",
       "confirm": {
         "title": "Confirm",
         "message": "You have to restart this application. Continue?",
         "ok": "Restart Now",
         "cancel": "Cancel"
+      },
+      "language": {
+        "title": "Language",
+        "description": "Choose the language you would like to use with Whalebird."
+      },
+      "spellchecker": {
+        "title": "Spellcheck",
+        "enabled": "Enable spellchecker"
       }
     }
   },

src/main/index.ts

@@ -205,7 +205,7 @@ const getSpellChecker = async (): Promise<boolean> => {
   try {
     const preferences = new Preferences(preferencesDBPath)
     const conf = await preferences.load()
-    return conf.general.other.spellcheck
+    return conf.language.spellchecker.enabled
   } catch (err) {
     return true
   }
@@ -1021,6 +1021,18 @@ ipcMain.handle('change-language', async (_: IpcMainInvokeEvent, value: string) =
   return conf.language.language
 })
 
+ipcMain.handle('toggle-spellchecker', async (_: IpcMainInvokeEvent, value: boolean) => {
+  const preferences = new Preferences(preferencesDBPath)
+  const conf = await preferences.update({
+    language: {
+      spellchecker: {
+        enabled: value
+      }
+    }
+  })
+  return conf.language.spellchecker.enabled
+})
+
 // hashtag
 ipcMain.handle('save-hashtag', async (_: IpcMainInvokeEvent, tag: string) => {
   const hashtags = new Hashtags(hashtagsDB)

src/main/preferences.ts

@@ -27,8 +27,7 @@ const timeline: Timeline = {
 }
 
 const other: Other = {
-  launch: false,
-  spellcheck: true
+  launch: false
 }
 
 const general: General = {
@@ -55,7 +54,10 @@ const notify: Notify = {
 }
 
 const language: LanguageSet = {
-  language: Language.en.key
+  language: Language.en.key,
+  spellchecker: {
+    enabled: true
+  }
 }
 
 const notification: Notification = {

src/renderer/components/Preferences/General.vue

@@ -29,10 +29,6 @@
       <el-form-item for="launch" :label="$t('preferences.general.other.launch')">
         <el-switch id="launch" v-model="other_launch" active-color="#13ce66"> </el-switch>
       </el-form-item>
-      <el-form-item for="spellcheck" :label="$t('preferences.general.other.spellcheck.description')">
-        <el-switch id="spellcheck" v-model="other_spellcheck" active-color="#13ce66"> </el-switch>
-        <p class="notice">{{ $t('preferences.general.other.spellcheck.notice') }}</p>
-      </el-form-item>
     </el-form>
   </div>
 </template>
@@ -109,20 +105,6 @@ export default {
           launch: value
         })
       }
-    },
-    other_spellcheck: {
-      get() {
-        return this.$store.state.Preferences.General.general.other.spellcheck
-      },
-      set(value) {
-        this.$store
-          .dispatch('Preferences/General/updateOther', {
-            spellcheck: value
-          })
-          .then(() => {
-            this.confirm()
-          })
-      }
     }
   },
   created() {
@@ -132,23 +114,6 @@ export default {
         type: 'error'
       })
     })
-  },
-  methods: {
-    confirm() {
-      this.$confirm(
-        this.$t('preferences.general.other.spellcheck.confirm.message'),
-        this.$t('preferences.general.other.spellcheck.confirm.title'),
-        {
-          confirmButtonText: this.$t('preferences.general.other.spellcheck.confirm.ok'),
-          cancelButtonText: this.$t('preferences.general.other.spellcheck.confirm.cancel'),
-          type: 'warning'
-        }
-      )
-        .then(() => {
-          this.$store.dispatch('Preferences/General/relaunch')
-        })
-        .catch(() => {})
-    }
   }
 }
 </script>

src/renderer/components/Preferences/Language.vue

@@ -2,13 +2,21 @@
   <div id="language">
     <h2>{{ $t('preferences.language.title') }}</h2>
     <el-form class="display-language section" label-position="top" size="small">
-      <el-form-item for="language" :label="$t('preferences.language.language_description')">
+      <h3>{{ $t('preferences.language.language.title') }}</h3>
+      <el-form-item for="language" :label="$t('preferences.language.language.description')">
         <el-select id="language" v-model="displayLanguage" placeholder="style">
           <el-option v-for="lang in languages" :key="lang.key" :label="lang.name" :value="lang.key"> </el-option>
         </el-select>
         <p class="notice">{{ $t('preferences.language.notice') }}</p>
       </el-form-item>
     </el-form>
+    <el-form class="spellchecker section" label-position="left" size="small">
+      <h3>{{ $t('preferences.language.spellchecker.title') }}</h3>
+      <el-form-item for="spellcheck" :label="$t('preferences.language.spellchecker.enabled')">
+        <el-switch id="spellcheck" v-model="spellcheck" active-color="#13ce66"> </el-switch>
+        <p class="notice">{{ $t('preferences.language.notice') }}</p>
+      </el-form-item>
+    </el-form>
   </div>
 </template>
 
@@ -50,6 +58,16 @@ export default {
           this.confirm()
         })
       }
+    },
+    spellcheck: {
+      get() {
+        return this.$store.state.Preferences.Language.language.spellchecker.enabled
+      },
+      set(value) {
+        this.$store.dispatch('Preferences/Language/toggleSpellchecker', value).then(() => {
+          this.confirm()
+        })
+      }
     }
   },
   created() {
@@ -73,6 +91,10 @@ export default {
 
 <style lang="scss" scoped>
 #language {
+  .description {
+    margin: 24px 0 20px;
+  }
+
   .section /deep/ {
     margin-bottom: 40px;
 
@@ -81,6 +103,15 @@ export default {
     }
   }
 
+  .selection {
+    margin: 12px 0;
+
+    .title {
+      margin-left: 12px;
+      font-weight: 800;
+    }
+  }
+
   .notice {
     color: #c0c4cc;
     font-size: 12px;

src/renderer/store/Preferences/General.ts

@@ -24,8 +24,7 @@ const state = (): GeneralState => ({
       hideAllAttachments: false
     },
     other: {
-      launch: false,
-      spellcheck: true
+      launch: false
     }
   },
   loading: false

src/renderer/store/Preferences/Language.ts

@@ -13,13 +13,17 @@ export type LanguageState = {
 
 const state: LanguageState = {
   language: {
-    language: Language.en.key
+    language: Language.en.key,
+    spellchecker: {
+      enabled: true
+    }
   }
 }
 
 export const MUTATION_TYPES = {
   UPDATE_LANGUAGE: 'updateLanguage',
-  CHANGE_LANGUAGE: 'changeLanguage'
+  CHANGE_LANGUAGE: 'changeLanguage',
+  TOGGLE_SPELLCHECKER: 'toggleSpellchecker'
 }
 
 const mutations: MutationTree<LanguageState> = {
@@ -28,6 +32,9 @@ const mutations: MutationTree<LanguageState> = {
   },
   [MUTATION_TYPES.CHANGE_LANGUAGE]: (state, key: string) => {
     state.language.language = key
+  },
+  [MUTATION_TYPES.TOGGLE_SPELLCHECKER]: (state, enabled: boolean) => {
+    state.language.spellchecker.enabled = enabled
   }
 }
 
@@ -42,6 +49,11 @@ const actions: ActionTree<LanguageState, RootState> = {
     commit(MUTATION_TYPES.CHANGE_LANGUAGE, value)
     return value
   },
+  toggleSpellchecker: async ({ commit }, enabled: boolean) => {
+    const value: boolean = await win.ipcRenderer.invoke('toggle-spellchecker', enabled)
+    commit(MUTATION_TYPES.TOGGLE_SPELLCHECKER, value)
+    return value
+  },
   relaunch: () => {
     win.ipcRenderer.send('relaunch')
   }

src/types/language.ts

@@ -1,3 +1,6 @@
 export type Language = {
   language: string
+  spellchecker: {
+    enabled: boolean
+  }
 }

src/types/preference.ts

@@ -7,7 +7,6 @@ import { Proxy } from '~/src/types/proxy'
 
 export type Other = {
   launch: boolean
-  spellcheck: boolean
 }
 
 export type General = {