closes #186 Change format of username

package.json

@@ -92,6 +92,7 @@
     "mastodon-api": "^1.3.0",
     "moment": "^2.21.0",
     "nedb": "^1.8.0",
+    "object-assign-deep": "^0.4.0",
     "simplayer": "0.0.8",
     "vue": "^2.3.3",
     "vue-awesome": "^2.3.5",

src/main/preferences.js

@@ -1,13 +1,14 @@
-import empty from 'is-empty'
 import storage from 'electron-json-storage'
+import objectAssignDeep from 'object-assign-deep'
 
 const Base = {
   general: {
     sound: {
       fav_rb: true,
       toot: true
     },
-    theme: 'white'
+    theme: 'white',
+    displayNameStyle: 0
   }
 }
 
@@ -20,8 +21,7 @@ export default class Preferences {
   async load () {
     try {
       const preferences = await this.get()
-      if (empty(preferences)) return Base
-      return preferences
+      return objectAssignDeep({}, Base, preferences)
     } catch (err) {
       return Base
     }

src/renderer/components/Preferences/General.vue

@@ -1,14 +1,36 @@
 <template>
 <div id="general" v-loading="loading">
   <h2>General</h2>
-  <div class="theme">
-    <h3>Theme color</h3>
-    <el-radio v-model="theme" label="white">White</el-radio>
-    <el-radio v-model="theme" label="dark">Dark</el-radio>
+  <div class="appearance">
+    <h3>Appearance</h3>
+    <table class="theme">
+      <tbody>
+        <tr>
+          <td class="title">Theme color:</td>
+          <td class="status">
+            <el-radio v-model="theme" label="white">White</el-radio>
+            <el-radio v-model="theme" label="dark">Dark</el-radio>
+          </td>
+        </tr>
+        <tr>
+          <td class="title">Display name style:</td>
+          <td class="status">
+            <el-select v-model="displayNameStyle" placeholder="style">
+              <el-option
+                v-for="style in nameStyles"
+                :key="style.value"
+                :label="style.name"
+                :value="style.value">
+              </el-option>
+            </el-select>
+          </td>
+        </tr>
+      </tbody>
+    </table>
   </div>
   <div class="sounds">
     <h3>Sounds</h3>
-    <table class="sounds">
+    <table>
       <tbody>
         <tr>
           <td class="title">Favourite, Reblog action sound:</td>
@@ -39,6 +61,24 @@ import { mapState } from 'vuex'
 
 export default {
   name: 'general',
+  data () {
+    return {
+      nameStyles: [
+        {
+          name: 'DisplayName and username',
+          value: 0
+        },
+        {
+          name: 'DisplayName',
+          value: 1
+        },
+        {
+          name: 'username',
+          value: 2
+        }
+      ]
+    }
+  },
   computed: {
     ...mapState({
       loading: state => state.Preferences.General.loading
@@ -51,6 +91,14 @@ export default {
         this.$store.dispatch('Preferences/General/updateTheme', value)
       }
     },
+    displayNameStyle: {
+      get () {
+        return this.$store.state.Preferences.General.general.displayNameStyle
+      },
+      set (value) {
+        this.$store.dispatch('Preferences/General/updateDisplayNameStyle', value)
+      }
+    },
     sound_fav_rb: {
       get () {
         return this.$store.state.Preferences.General.general.sound.fav_rb
@@ -86,15 +134,39 @@ export default {
 
 <style lang="scss" scoped>
 #general {
-  .theme {
+  .appearance {
     color: var(--theme-secondary-color);
+    width: 100%;
+    box-sizing: border-box;
+
+    table {
+      width: 100%;
+    }
+
+    td {
+      padding: 16px 0;
+    }
+
+    .title {
+      text-align: right;
+      width: 50%;
+    }
+
+    .status {
+      width: 50%;
+      text-align: center;
+    }
   }
 
   .sounds {
     color: var(--theme-secondary-color);
     width: 100%;
     box-sizing: border-box;
 
+    table {
+      width: 100%;
+    }
+
     td {
       padding: 16px 0;
     }

src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue

@@ -6,7 +6,8 @@
     <div class="detail" v-on:dblclick="openDetail(message)">
       <div class="toot-header">
         <div class="user" @click="openUser(originalMessage(message).account)">
-          {{ username(originalMessage(message).account) }}
+          <span class="display-name">{{ username(originalMessage(message).account) }}</span>
+          <span class="acct">{{ accountName(originalMessage(message).account) }}</span>
         </div>
         <div class="timestamp">
           {{ parseDatetime(message.created_at) }}
@@ -64,10 +65,16 @@
 <script>
 import moment from 'moment'
 import { shell } from 'electron'
+import { mapState } from 'vuex'
 
 export default {
   name: 'toot',
   props: ['message'],
+  computed: {
+    ...mapState({
+      displayNameStyle: state => state.App.displayNameStyle
+    })
+  },
   methods: {
     originalMessage (message) {
       if (message.reblog !== null) {
@@ -77,10 +84,31 @@ export default {
       }
     },
     username (account) {
-      if (account.display_name !== '') {
-        return account.display_name
-      } else {
-        return account.username
+      switch (this.displayNameStyle) {
+        case 0:
+          if (account.display_name !== '') {
+            return account.display_name
+          } else {
+            return account.username
+          }
+        case 1:
+          if (account.display_name !== '') {
+            return account.display_name
+          } else {
+            return account.username
+          }
+        case 2:
+          return `@${account.username}`
+      }
+    },
+    accountName (account) {
+      switch (this.displayNameStyle) {
+        case 0:
+          return `@${account.username}`
+        case 1:
+          return ''
+        case 2:
+          return ''
       }
     },
     parseDatetime (datetime) {
@@ -200,14 +228,22 @@ function findLink (target) {
     .toot-header {
       .user {
         float: left;
-        font-weight: 800;
-        color: var(--theme-primary-color);
         font-size: 14px;
         cursor: pointer;
         white-space: nowrap;
         max-width: 100%;
         overflow: hidden;
         text-overflow: ellipsis;
+
+        .display-name {
+          font-weight: 800;
+          color: var(--theme-primary-color);
+        }
+
+        .acct {
+          font-weight: normal;
+          color: var(--theme-secondary-color);
+        }
       }
 
       .timestamp {

src/renderer/store/App.js

@@ -5,7 +5,11 @@ import { LightTheme, DarkTheme } from '../utils/theme'
 const App = {
   namespaced: true,
   state: {
-    theme: LightTheme
+    theme: LightTheme,
+    // 0: display name and username
+    // 1: display name
+    // 2: username
+    displayNameStyle: 0
   },
   mutations: {
     updateTheme (state, themeName) {
@@ -20,6 +24,9 @@ const App = {
           state.theme = LightTheme
           break
       }
+    },
+    updateDisplayNameStyle (state, value) {
+      state.displayNameStyle = value
     }
   },
   actions: {
@@ -39,6 +46,7 @@ const App = {
       ipcRenderer.once('response-get-preferences', (event, conf) => {
         ipcRenderer.removeAllListeners('error-get-preferences')
         commit('updateTheme', conf.general.theme)
+        commit('updateDisplayNameStyle', conf.general.displayNameStyle)
       })
     }
   }

src/renderer/store/GlobalHeader.js

@@ -32,8 +32,8 @@ const GlobalHeader = {
     },
     watchShortcutEvents ({ commit }) {
       ipcRenderer.on('change-account', (event, account) => {
-        router.push(`/${account._id}/home`)
         commit('changeDefaultActive', account.index.toString())
+        router.push(`/${account._id}/home`)
       })
     },
     async removeShortcutEvents () {

src/renderer/store/Preferences/General.js

@@ -8,7 +8,8 @@ const General = {
         fav_rb: true,
         toot: true
       },
-      theme: 'white'
+      theme: 'white',
+      displayNameStyle: 0
     },
     loading: false
   },
@@ -58,6 +59,23 @@ const General = {
         commit('changeLoading', false)
       })
     },
+    updateDisplayNameStyle ({ dispatch, commit, state }, value) {
+      const newGeneral = Object.assign({}, state.general, {
+        displayNameStyle: value
+      })
+      const config = {
+        general: newGeneral
+      }
+      ipcRenderer.send('save-preferences', config)
+      ipcRenderer.once('error-save-preferences', (event, err) => {
+        ipcRenderer.removeAllListeners('response-save-preferences')
+      })
+      ipcRenderer.once('response-save-preferences', (event, conf) => {
+        ipcRenderer.removeAllListeners('error-save-preferences')
+        dispatch('App/loadPreferences', null, { root: true })
+        commit('updateGeneral', conf.general)
+      })
+    },
     updateSound ({ commit, state }, sound) {
       commit('changeLoading', true)
       const newSound = Object.assign({}, state.general.sound, sound)