diff --git a/src/renderer/components/GlobalHeader.vue b/src/renderer/components/GlobalHeader.vue
index 7b5557fe..abc61891 100644
--- a/src/renderer/components/GlobalHeader.vue
+++ b/src/renderer/components/GlobalHeader.vue
@@ -18,25 +18,12 @@
         v-bind:key="account._id"
         role="menuitem"
       >
-        <el-icon><el-icon-menu /></el-icon>
-        <FailoverImg
-          v-else
-          :src="account.avatar"
-          class="avatar"
-          :title="account.username + '@' + account.domain"
-        />
-        <FailoverImg
-          :src="`${account.baseURL}/favicon.ico`"
-          :failoverSrc="`${account.baseURL}/favicon.png`"
-          class="instance-icon"
-        />
+        <el-icon v-if="account.avatar === undefined || account.avatar === null || account.avatar === ''"><el-icon-menu /></el-icon>
+        <FailoverImg v-else :src="account.avatar" class="avatar" :title="account.username + '@' + account.domain" />
+        <FailoverImg :src="`${account.baseURL}/favicon.ico`" :failoverSrc="`${account.baseURL}/favicon.png`" class="instance-icon" />
         <span slot="title">{{ account.domain }}</span>
       </el-menu-item>
-      <el-menu-item
-        index="/login"
-        :title="$t('global_header.add_new_account')"
-        role="menuitem"
-      >
+      <el-menu-item index="/login" :title="$t('global_header.add_new_account')" role="menuitem">
         <el-icon><el-icon-plus /></el-icon>
         <span slot="new">New</span>
       </el-menu-item>
@@ -57,17 +44,17 @@ export default {
   components: {
     FailoverImg,
     ElIconMenu,
-    ElIconPlus,
+    ElIconPlus
   },
   name: 'global-header',
   computed: {
     ...mapState('GlobalHeader', {
-      accounts: (state) => state.accounts,
-      hide: (state) => state.hide,
+      accounts: state => state.accounts,
+      hide: state => state.hide
     }),
     ...mapState({
-      themeColor: (state) => state.App.theme.global_header_color,
-    }),
+      themeColor: state => state.App.theme.global_header_color
+    })
   },
   created() {
     this.initialize()
@@ -79,14 +66,14 @@ export default {
     async initialize() {
       await this.$store
         .dispatch('GlobalHeader/initLoad')
-        .then((accounts) => {
-          this.$store.dispatch('GlobalHeader/startStreamings').catch((err) => {
+        .then(accounts => {
+          this.$store.dispatch('GlobalHeader/startStreamings').catch(err => {
             if (err instanceof StreamingError) {
               this.$message({
                 message: this.$t('message.start_all_streamings_error', {
-                  domain: err.domain,
+                  domain: err.domain
                 }),
-                type: 'error',
+                type: 'error'
               })
             }
           })
@@ -94,11 +81,11 @@ export default {
             this.$router.push({ path: `/${accounts[0]._id}/home` })
           }
         })
-        .catch((_) => {
+        .catch(_ => {
           return this.$router.push({ path: '/login' })
         })
-    },
-  },
+    }
+  }
 }
 </script>
 
diff --git a/src/renderer/components/Login/LoginForm.vue b/src/renderer/components/Login/LoginForm.vue
index aa53fd8e..2fda3b64 100644
--- a/src/renderer/components/Login/LoginForm.vue
+++ b/src/renderer/components/Login/LoginForm.vue
@@ -9,18 +9,10 @@
     :model="form"
   >
     <el-form-item :label="$t('login.domain_name_label')" prop="domainName">
-      <el-input
-        v-model="form.domainName"
-        placeholder="mastodon.social"
-        v-shortkey="['enter']"
-        @shortkey.native="handleKey"
-      ></el-input>
+      <el-input v-model="form.domainName" placeholder="mastodon.social" v-shortkey="['enter']" @shortkey="handleKey"></el-input>
     </el-form-item>
     <p class="proxy-info">
-      {{ $t('login.proxy_info')
-      }}<router-link to="/preferences/network">{{
-        $t('login.proxy_here')
-      }}</router-link>
+      {{ $t('login.proxy_info') }}<router-link to="/preferences/network">{{ $t('login.proxy_here') }}</router-link>
     </p>
     <!-- Dummy form to guard submitting with enter -->
     <el-form-item class="hidden">
@@ -30,13 +22,7 @@
       <el-button type="primary" class="login" @click="login" v-if="allowLogin">
         {{ $t('login.login') }}
       </el-button>
-      <el-button
-        type="primary"
-        v-else
-        @click="confirm('loginForm')"
-        v-loading="searching"
-        element-loading-background="rgba(0, 0, 0, 0.8)"
-      >
+      <el-button type="primary" v-else @click="confirm('loginForm')" v-loading="searching" element-loading-background="rgba(0, 0, 0, 0.8)">
         {{ $t('login.search') }}
       </el-button>
     </el-form-item>
@@ -52,20 +38,18 @@ export default {
   data() {
     return {
       form: {
-        domainName: '',
-      },
+        domainName: ''
+      }
     }
   },
   computed: {
     ...mapState({
-      selectedInstance: (state) => state.Login.selectedInstance,
-      searching: (state) => state.Login.searching,
-      sns: (state) => state.Login.sns,
+      selectedInstance: state => state.Login.selectedInstance,
+      searching: state => state.Login.searching,
+      sns: state => state.Login.sns
     }),
     allowLogin: function () {
-      return (
-        this.selectedInstance && this.form.domainName === this.selectedInstance
-      )
+      return this.selectedInstance && this.form.domainName === this.selectedInstance
     },
     rules: {
       get() {
@@ -74,17 +58,17 @@ export default {
             {
               type: 'string',
               required: true,
-              message: this.$t('validation.login.require_domain_name'),
+              message: this.$t('validation.login.require_domain_name')
             },
             {
               pattern: domainFormat,
               trigger: 'change',
-              message: this.$t('validation.login.domain_format'),
-            },
-          ],
+              message: this.$t('validation.login.domain_format')
+            }
+          ]
         }
-      },
-    },
+      }
+    }
   },
   methods: {
     login() {
@@ -92,51 +76,51 @@ export default {
         lock: true,
         text: this.$t('message.loading'),
         spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)',
+        background: 'rgba(0, 0, 0, 0.7)'
       })
       this.$store
         .dispatch('Login/fetchLogin')
-        .then((url) => {
+        .then(url => {
           loading.close()
           this.$store.dispatch('Login/pageBack')
           this.$router.push({
             path: '/authorize',
-            query: { url: url, sns: this.sns },
+            query: { url: url, sns: this.sns }
           })
         })
         .catch(() => {
           loading.close()
           this.$message({
             message: this.$t('message.authorize_url_error'),
-            type: 'error',
+            type: 'error'
           })
         })
     },
     confirm(formName) {
-      this.$refs[formName].validate((valid) => {
+      this.$refs[formName].validate(valid => {
         if (valid) {
           this.$store
             .dispatch('Login/confirmInstance', this.form.domainName)
             .then(() => {
               this.$message({
                 message: this.$t('message.domain_confirmed', {
-                  domain: this.form.domainName,
+                  domain: this.form.domainName
                 }),
-                type: 'success',
+                type: 'success'
               })
             })
             .catch(() => {
               this.$message({
                 message: this.$t('message.domain_doesnt_exist', {
-                  domain: this.form.domainName,
+                  domain: this.form.domainName
                 }),
-                type: 'error',
+                type: 'error'
               })
             })
         } else {
           this.$message({
             message: this.$t('validation.login.domain_format'),
-            type: 'error',
+            type: 'error'
           })
           return false
         }
@@ -148,8 +132,8 @@ export default {
       } else {
         this.login()
       }
-    },
-  },
+    }
+  }
 }
 </script>
 
diff --git a/src/renderer/components/Preferences/Account.vue b/src/renderer/components/Preferences/Account.vue
index 01b26ab4..675c77ae 100644
--- a/src/renderer/components/Preferences/Account.vue
+++ b/src/renderer/components/Preferences/Account.vue
@@ -12,36 +12,24 @@
           v-loading="accountLoading"
           :element-loading-background="backgroundColor"
         >
-          <el-table-column
-            prop="username"
-            :label="$t('preferences.account.username')"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="domain"
-            :label="$t('preferences.account.domain')"
-          >
-          </el-table-column>
+          <el-table-column prop="username" :label="$t('preferences.account.username')"> </el-table-column>
+          <el-table-column prop="domain" :label="$t('preferences.account.domain')"> </el-table-column>
           <el-table-column :label="$t('preferences.account.association')">
-            <template slot-scope="scope">
-              <el-button
-                @click.native.prevent="removeAccount(scope.$index, accounts)"
-                type="text"
-                class="action"
-              >
+            <template #default="scope">
+              <el-button @click.prevent="removeAccount(scope.$index, accounts)" type="text" class="action">
                 <el-icon><el-icon-close /></el-icon>
                 {{ $t('preferences.account.remove_association') }}
               </el-button>
             </template>
           </el-table-column>
           <el-table-column :label="$t('preferences.account.order')" width="60">
-            <template slot-scope="scope">
+            <template #default="scope">
               <div class="allow-up">
                 <el-button
                   class="arrow-up action"
                   type="text"
                   :icon="ElIconArrowUp"
-                  @click.native.prevent="forward(scope.$index, accounts)"
+                  @click.prevent="forward(scope.$index, accounts)"
                 ></el-button>
               </div>
               <div class="allow-down">
@@ -49,7 +37,7 @@
                   class="arrow-down action"
                   type="text"
                   :icon="ElIconArrowDown"
-                  @click.native.prevent="backward(scope.$index, accounts)"
+                  @click.prevent="backward(scope.$index, accounts)"
                 ></el-button>
               </div>
             </template>
@@ -60,22 +48,10 @@
         <el-popover placement="top" width="160" v-model="deletePopoverVisible">
           <p>{{ $t('preferences.account.confirm_message') }}</p>
           <div style="text-align: right; margin: 0">
-            <el-button
-              size="mini"
-              type="text"
-              @click="deletePopoverVisible = false"
-              >{{ $t('preferences.account.cancel') }}</el-button
-            >
-            <el-button
-              type="danger"
-              size="mini"
-              @click="removeAllAssociations"
-              >{{ $t('preferences.account.confirm') }}</el-button
-            >
+            <el-button size="mini" type="text" @click="deletePopoverVisible = false">{{ $t('preferences.account.cancel') }}</el-button>
+            <el-button type="danger" size="mini" @click="removeAllAssociations">{{ $t('preferences.account.confirm') }}</el-button>
           </div>
-          <el-button slot="reference" type="danger">{{
-            $t('preferences.account.remove_all_associations')
-          }}</el-button>
+          <el-button slot="reference" type="danger">{{ $t('preferences.account.remove_all_associations') }}</el-button>
         </el-popover>
       </el-form-item>
     </el-form>
@@ -83,11 +59,7 @@
 </template>
 
 <script>
-import {
-  Close as ElIconClose,
-  ArrowUp as ElIconArrowUp,
-  ArrowDown as ElIconArrowDown,
-} from '@element-plus/icons'
+import { Close as ElIconClose, ArrowUp as ElIconArrowUp, ArrowDown as ElIconArrowDown } from '@element-plus/icons'
 import { mapState } from 'vuex'
 
 export default {
@@ -96,21 +68,21 @@ export default {
       openRemoveDialog: false,
       deletePopoverVisible: false,
       ElIconArrowUp,
-      ElIconArrowDown,
+      ElIconArrowDown
     }
   },
   components: {
-    ElIconClose,
+    ElIconClose
   },
   name: 'account',
   computed: {
     ...mapState({
-      accounts: (state) => state.Preferences.Account.accounts,
-      accountLoading: (state) => state.Preferences.Account.accountLoading,
+      accounts: state => state.Preferences.Account.accounts,
+      accountLoading: state => state.Preferences.Account.accountLoading
     }),
     ...mapState({
-      backgroundColor: (state) => state.App.theme.background_color,
-    }),
+      backgroundColor: state => state.App.theme.background_color
+    })
   },
   created() {
     this.loadAccounts()
@@ -123,7 +95,7 @@ export default {
       } catch (err) {
         return this.$message({
           message: this.$t('message.account_load_error'),
-          type: 'error',
+          type: 'error'
         })
       } finally {
         this.$store.commit('Preferences/Account/updateAccountLoading', false)
@@ -138,31 +110,27 @@ export default {
         .catch(() => {
           this.$message({
             message: this.$t('message.account_remove_error'),
-            type: 'error',
+            type: 'error'
           })
         })
     },
     forward(index, accounts) {
-      this.$store
-        .dispatch('Preferences/Account/forwardAccount', accounts[index])
-        .then(() => {
-          this.loadAccounts()
-        })
+      this.$store.dispatch('Preferences/Account/forwardAccount', accounts[index]).then(() => {
+        this.loadAccounts()
+      })
     },
     backward(index, accounts) {
-      this.$store
-        .dispatch('Preferences/Account/backwardAccount', accounts[index])
-        .then(() => {
-          this.loadAccounts()
-        })
+      this.$store.dispatch('Preferences/Account/backwardAccount', accounts[index]).then(() => {
+        this.loadAccounts()
+      })
     },
     removeAllAssociations() {
       this.deletePopoverVisible = false
       this.$store.dispatch('Preferences/Account/removeAllAccounts').then(() => {
         this.$router.push('/login')
       })
-    },
-  },
+    }
+  }
 }
 </script>
 
diff --git a/src/renderer/components/Settings/Filters.vue b/src/renderer/components/Settings/Filters.vue
index 27f1018f..551df5eb 100644
--- a/src/renderer/components/Settings/Filters.vue
+++ b/src/renderer/components/Settings/Filters.vue
@@ -8,50 +8,38 @@
         </router-link>
       </el-button>
     </div>
-    <template>
-      <el-table
-        :data="filters"
-        tooltip-effect="dark"
-        empty-text="No filters"
-        style="width: 100%"
-        v-loading="filtersLoading"
-        :element-loading-background="backgroundColor"
-      >
-        <el-table-column prop="phrase" label="Keyword" width="180">
-        </el-table-column>
-        <el-table-column label="Context">
-          <template slot-scope="scope">
-            <span>{{ filters[scope.$index].context.join(',') }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="expires_at" label="Expires" width="180">
-        </el-table-column>
-        <el-table-column width="80">
-          <template slot-scope="scope">
-            <el-button type="text">
-              <router-link
-                tag="span"
-                :to="`/${id()}/settings/filters/${
-                  filters[scope.$index].id
-                }/edit`"
-              >
-                {{ $t('settings.filters.edit.title') }}
-              </router-link>
-            </el-button>
-          </template>
-        </el-table-column>
-        <el-table-column width="80">
-          <template slot-scope="scope">
-            <el-button
-              type="text"
-              @click="deleteFilter(filters[scope.$index].id)"
-            >
-              {{ $t('settings.filters.delete.title') }}
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </template>
+    <el-table
+      :data="filters"
+      tooltip-effect="dark"
+      empty-text="No filters"
+      style="width: 100%"
+      v-loading="filtersLoading"
+      :element-loading-background="backgroundColor"
+    >
+      <el-table-column prop="phrase" label="Keyword" width="180"> </el-table-column>
+      <el-table-column label="Context">
+        <template #default="scope">
+          <span>{{ filters[scope.$index].context.join(',') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="expires_at" label="Expires" width="180"> </el-table-column>
+      <el-table-column width="80">
+        <template #default="scope">
+          <el-button type="text">
+            <router-link tag="span" :to="`/${id()}/settings/filters/${filters[scope.$index].id}/edit`">
+              {{ $t('settings.filters.edit.title') }}
+            </router-link>
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column width="80">
+        <template #default="scope">
+          <el-button type="text" @click="deleteFilter(filters[scope.$index].id)">
+            {{ $t('settings.filters.delete.title') }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
   </div>
 </template>
 
@@ -62,15 +50,15 @@ export default {
   name: 'Filters',
   computed: {
     ...mapState('Settings/Filters', {
-      filters: (state) => state.filters,
-      filtersLoading: (state) => state.filtersLoading,
+      filters: state => state.filters,
+      filtersLoading: state => state.filtersLoading
     }),
     ...mapState({
-      backgroundColor: (state) => state.App.theme.background_color,
+      backgroundColor: state => state.App.theme.background_color
     }),
     ...mapState('TimelineSpace', {
-      sns: (state) => state.sns,
-    }),
+      sns: state => state.sns
+    })
   },
   async created() {
     await this.$store.dispatch('Settings/Filters/fetchFilters')
@@ -83,12 +71,12 @@ export default {
       this.$confirm(this.$t('settings.filters.delete.confirm'), 'Warning', {
         confirmButtonText: this.$t('settings.filters.delete.confirm_ok'),
         cancelButtonText: this.$t('settings.filters.delete.confirm_cancel'),
-        type: 'warning',
+        type: 'warning'
       }).then(() => {
         return this.$store.dispatch('Settings/Filters/deleteFilter', id)
       })
-    },
-  },
+    }
+  }
 }
 </script>
 
diff --git a/src/renderer/components/Settings/Filters/form.vue b/src/renderer/components/Settings/Filters/form.vue
index ab9cc5a8..c29c48df 100644
--- a/src/renderer/components/Settings/Filters/form.vue
+++ b/src/renderer/components/Settings/Filters/form.vue
@@ -1,56 +1,31 @@
 <template>
-  <el-form
-    ref="form"
-    class="section"
-    label-width="200px"
-    label-position="right"
-    size="medium"
-  >
+  <el-form ref="form" class="section" label-width="200px" label-position="right" size="medium">
     <el-form-item :label="$t('settings.filters.form.phrase')">
       <el-input v-model="filterPhrase"></el-input>
     </el-form-item>
     <el-form-item :label="$t('settings.filters.form.expire')">
       <el-select v-model="filterExpire" value-key="value">
-        <el-option
-          v-for="exp in expires"
-          :key="exp.value"
-          :label="exp.label"
-          :value="exp"
-        >
-        </el-option>
+        <el-option v-for="exp in expires" :key="exp.value" :label="exp.label" :value="exp"> </el-option>
       </el-select>
     </el-form-item>
     <el-form-item :label="$t('settings.filters.form.context')">
-      <template>
-        <el-checkbox-group v-model="filterContext">
-          <el-checkbox label="home"></el-checkbox>
-          <el-checkbox label="notifications"></el-checkbox>
-          <el-checkbox label="public"></el-checkbox>
-          <el-checkbox label="thread"></el-checkbox>
-          <el-checkbox
-            label="account"
-            :disabled="accountDisabled()"
-          ></el-checkbox>
-        </el-checkbox-group>
-      </template>
+      <el-checkbox-group v-model="filterContext">
+        <el-checkbox label="home"></el-checkbox>
+        <el-checkbox label="notifications"></el-checkbox>
+        <el-checkbox label="public"></el-checkbox>
+        <el-checkbox label="thread"></el-checkbox>
+        <el-checkbox label="account" :disabled="accountDisabled()"></el-checkbox>
+      </el-checkbox-group>
     </el-form-item>
     <el-form-item>
-      <el-checkbox v-model="filterIrreversible">{{
-        $t('settings.filters.form.irreversible')
-      }}</el-checkbox>
+      <el-checkbox v-model="filterIrreversible">{{ $t('settings.filters.form.irreversible') }}</el-checkbox>
     </el-form-item>
     <el-form-item>
-      <el-checkbox v-model="filterWholeWord">{{
-        $t('settings.filters.form.whole_word')
-      }}</el-checkbox>
+      <el-checkbox v-model="filterWholeWord">{{ $t('settings.filters.form.whole_word') }}</el-checkbox>
     </el-form-item>
     <el-form-item>
-      <el-button type="primary" @click="onSubmit" v-loading="loading">{{
-        $t('settings.filters.form.submit')
-      }}</el-button>
-      <el-button @click="cancel">{{
-        $t('settings.filters.form.cancel')
-      }}</el-button>
+      <el-button type="primary" @click="onSubmit" v-loading="loading">{{ $t('settings.filters.form.submit') }}</el-button>
+      <el-button @click="cancel">{{ $t('settings.filters.form.cancel') }}</el-button>
     </el-form-item>
   </el-form>
 </template>
@@ -61,48 +36,48 @@ export default {
   props: {
     loading: {
       type: Boolean,
-      default: false,
+      default: false
     },
     value: {
-      type: Object,
+      type: Object
     },
     sns: {
       type: String,
-      default: 'mastodon',
-    },
+      default: 'mastodon'
+    }
   },
   data() {
     return {
       expires: [
         {
           label: this.$t('settings.filters.expires.never'),
-          value: null,
+          value: null
         },
         {
           label: this.$t('settings.filters.expires.30_minutes'),
-          value: 60 * 30,
+          value: 60 * 30
         },
         {
           label: this.$t('settings.filters.expires.1_hour'),
-          value: 3600,
+          value: 3600
         },
         {
           label: this.$t('settings.filters.expires.6_hours'),
-          value: 3600 * 6,
+          value: 3600 * 6
         },
         {
           label: this.$t('settings.filters.expires.12_hours'),
-          value: 3600 * 12,
+          value: 3600 * 12
         },
         {
           label: this.$t('settings.filters.expires.1_day'),
-          value: 3600 * 24,
+          value: 3600 * 24
         },
         {
           label: this.$t('settings.filters.expires.1_week'),
-          value: 3600 * 24 * 7,
-        },
-      ],
+          value: 3600 * 24 * 7
+        }
+      ]
     }
   },
   computed: {
@@ -112,7 +87,7 @@ export default {
       },
       set(value) {
         this.$emit('input', value)
-      },
+      }
     },
     filterPhrase: {
       get() {
@@ -120,9 +95,9 @@ export default {
       },
       set(value) {
         this.filter = Object.assign({}, this.filter, {
-          phrase: value,
+          phrase: value
         })
-      },
+      }
     },
     filterExpire: {
       get() {
@@ -130,9 +105,9 @@ export default {
       },
       set(value) {
         this.filter = Object.assign({}, this.filter, {
-          expires_at: value,
+          expires_at: value
         })
-      },
+      }
     },
     filterContext: {
       get() {
@@ -140,9 +115,9 @@ export default {
       },
       set(value) {
         this.filter = Object.assign({}, this.filter, {
-          context: value,
+          context: value
         })
-      },
+      }
     },
     filterIrreversible: {
       get() {
@@ -150,9 +125,9 @@ export default {
       },
       set(value) {
         this.filter = Object.assign({}, this.filter, {
-          irreversible: value,
+          irreversible: value
         })
-      },
+      }
     },
     filterWholeWord: {
       get() {
@@ -160,10 +135,10 @@ export default {
       },
       set(value) {
         this.filter = Object.assign({}, this.filter, {
-          whole_word: value,
+          whole_word: value
         })
-      },
-    },
+      }
+    }
   },
   methods: {
     cancel() {
@@ -174,8 +149,8 @@ export default {
     },
     accountDisabled() {
       return this.sns === 'pleroma'
-    },
-  },
+    }
+  }
 }
 </script>
 
diff --git a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts.vue b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts.vue
index 4d6d4934..c049b74d 100644
--- a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts.vue
+++ b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts.vue
@@ -1,9 +1,8 @@
 <template>
   <div id="timeline">
-    <template v-for="message in pinnedToots">
+    <template v-for="message in pinnedToots" :key="message.id">
       <toot
         :message="message"
-        :key="message.id"
         :focused="message.uri + message.id === focusedId"
         :pinned="true"
         :overlaid="modalOpened"
@@ -17,21 +16,9 @@
       >
       </toot>
     </template>
-    <DynamicScroller
-      :items="timeline"
-      :min-item-size="60"
-      class="scroller"
-      :buffer="buffer"
-      page-mode
-    >
+    <DynamicScroller :items="timeline" :min-item-size="60" class="scroller" :buffer="buffer" page-mode>
       <template v-slot="{ item, index, active }">
-        <DynamicScrollerItem
-          :item="item"
-          :active="active"
-          :size-dependencies="[item.uri]"
-          :data-index="index"
-          :watchData="true"
-        >
+        <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index" :watchData="true">
           <toot
             :message="item"
             :key="item.id"
@@ -49,11 +36,7 @@
         </DynamicScrollerItem>
       </template>
     </DynamicScroller>
-    <div
-      class="loading-card"
-      v-loading="lazyLoading"
-      :element-loading-background="backgroundColor"
-    ></div>
+    <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
   </div>
 </template>
 
@@ -68,33 +51,26 @@ export default {
   components: { Toot },
   data() {
     return {
-      focusedId: null,
+      focusedId: null
     }
   },
   computed: {
-    ...mapState(
-      'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts',
-      {
-        timeline: (state) => state.timeline,
-        pinnedToots: (state) => state.pinnedToots,
-        lazyLoading: (state) => state.lazyLoading,
-      }
-    ),
-    ...mapState('App', {
-      backgroundColor: (state) => state.theme.background_color,
+    ...mapState('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts', {
+      timeline: state => state.timeline,
+      pinnedToots: state => state.pinnedToots,
+      lazyLoading: state => state.lazyLoading
     }),
-    ...mapGetters('TimelineSpace/Modals', ['modalOpened']),
+    ...mapState('App', {
+      backgroundColor: state => state.theme.background_color
+    }),
+    ...mapGetters('TimelineSpace/Modals', ['modalOpened'])
   },
   created() {
     this.load()
   },
   mounted() {
-    this.$store.dispatch(
-      'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/clearTimeline'
-    )
-    document
-      .getElementById('sidebar_scrollable')
-      .addEventListener('scroll', this.onScroll)
+    this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/clearTimeline')
+    document.getElementById('sidebar_scrollable').addEventListener('scroll', this.onScroll)
     Event.$on('focus-sidebar', () => {
       this.focusedId = 0
       this.$nextTick(function () {
@@ -107,99 +83,66 @@ export default {
     Event.$off('focus-sidebar')
   },
   destroyed() {
-    if (
-      document.getElementById('sidebar_scrollable') !== undefined &&
-      document.getElementById('sidebar_scrollable') !== null
-    ) {
-      document
-        .getElementById('sidebar_scrollable')
-        .removeEventListener('scroll', this.onScroll)
+    if (document.getElementById('sidebar_scrollable') !== undefined && document.getElementById('sidebar_scrollable') !== null) {
+      document.getElementById('sidebar_scrollable').removeEventListener('scroll', this.onScroll)
     }
   },
   watch: {
     account: function (_newAccount, _oldAccount) {
-      this.$store.dispatch(
-        'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/clearTimeline'
-      )
+      this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/clearTimeline')
       this.load()
-    },
+    }
   },
   methods: {
     load() {
-      this.$store
-        .dispatch(
-          'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/fetchTimeline',
-          this.account
-        )
-        .catch(() => {
-          this.$message({
-            message: this.$t('message.timeline_fetch_error'),
-            type: 'error',
-          })
+      this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/fetchTimeline', this.account).catch(() => {
+        this.$message({
+          message: this.$t('message.timeline_fetch_error'),
+          type: 'error'
         })
+      })
     },
     onScroll(event) {
       // for lazyLoading
       if (
-        event.target.clientHeight + event.target.scrollTop >=
-          document.getElementById('account_profile').clientHeight - 10 &&
+        event.target.clientHeight + event.target.scrollTop >= document.getElementById('account_profile').clientHeight - 10 &&
         !this.lazyloading
       ) {
         this.$store
-          .dispatch(
-            'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/lazyFetchTimeline',
-            {
-              account: this.account,
-              status: this.timeline[this.timeline.length - 1],
-            }
-          )
-          .catch((err) => {
+          .dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/lazyFetchTimeline', {
+            account: this.account,
+            status: this.timeline[this.timeline.length - 1]
+          })
+          .catch(err => {
             console.error(err)
             this.$message({
               message: this.$t('message.timeline_fetch_error'),
-              type: 'error',
+              type: 'error'
             })
           })
       }
     },
     updatePinnedToot(message) {
-      this.$store.commit(
-        'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/updatePinnedToot',
-        message
-      )
+      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/updatePinnedToot', message)
     },
     updateToot(message) {
-      this.$store.commit(
-        'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/updateToot',
-        message
-      )
+      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/updateToot', message)
     },
     deleteToot(message) {
-      this.$store.commit(
-        'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/deleteToot',
-        message
-      )
+      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/deleteToot', message)
     },
     focusNext() {
-      const currentIndex = this.timeline.findIndex(
-        (toot) => this.focusedId === toot.uri + toot.id
-      )
+      const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
       if (currentIndex === -1) {
         this.focusedId = this.timeline[0].uri + this.timeline[0].id
       } else if (currentIndex < this.timeline.length - 1) {
-        this.focusedId =
-          this.timeline[currentIndex + 1].uri +
-          this.timeline[currentIndex + 1].id
+        this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
       }
     },
     focusPrev() {
-      const currentIndex = this.timeline.findIndex(
-        (toot) => this.focusedId === toot.uri + toot.id
-      )
+      const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
       if (currentIndex > 0) {
-        this.focusedId =
-          this.timeline[currentIndex - 1].uri +
-          this.timeline[currentIndex - 1].id
+        this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
       }
     },
     focusToot(message) {
@@ -208,8 +151,8 @@ export default {
     focusTimeline() {
       this.focusedId = 0
       Event.$emit('focus-timeline')
-    },
-  },
+    }
+  }
 }
 </script>
 
diff --git a/src/renderer/components/TimelineSpace/Modals/AddListMember.vue b/src/renderer/components/TimelineSpace/Modals/AddListMember.vue
index 2871c73e..ed4539a6 100644
--- a/src/renderer/components/TimelineSpace/Modals/AddListMember.vue
+++ b/src/renderer/components/TimelineSpace/Modals/AddListMember.vue
@@ -1,20 +1,8 @@
 <template>
-  <el-dialog
-    :title="$t('modals.add_list_member.title')"
-    :visible.sync="addListMemberModal"
-    width="400px"
-    class="add-member"
-  >
+  <el-dialog :title="$t('modals.add_list_member.title')" v-model="addListMemberModal" width="400px" class="add-member">
     <div class="search-account" :element-loading-background="loadingBackground">
       <el-form :inline="true">
-        <input
-          v-model="name"
-          placeholder="Account name"
-          class="account-name"
-          v-shortkey="['enter']"
-          @shortkey="search"
-          autofocus
-        />
+        <input v-model="name" placeholder="Account name" class="account-name" v-shortkey="['enter']" @shortkey="search" autofocus />
         <el-button type="text" class="search" @click="search">
           <font-awesome-icon icon="magnifying-glass" />
         </el-button>
@@ -50,26 +38,23 @@ export default {
   name: 'add-list-member',
   data() {
     return {
-      name: '',
+      name: ''
     }
   },
   computed: {
     ...mapState({
-      loadingBackground: (state) => state.App.theme.wrapper_mask_color,
-      accounts: (state) => state.TimelineSpace.Modals.AddListMember.accounts,
-      listId: (state) => state.TimelineSpace.Modals.AddListMember.targetListId,
+      loadingBackground: state => state.App.theme.wrapper_mask_color,
+      accounts: state => state.TimelineSpace.Modals.AddListMember.accounts,
+      listId: state => state.TimelineSpace.Modals.AddListMember.targetListId
     }),
     addListMemberModal: {
       get() {
         return this.$store.state.TimelineSpace.Modals.AddListMember.modalOpen
       },
       set(value) {
-        this.$store.dispatch(
-          'TimelineSpace/Modals/AddListMember/changeModal',
-          value
-        )
-      },
-    },
+        this.$store.dispatch('TimelineSpace/Modals/AddListMember/changeModal', value)
+      }
+    }
   },
   methods: {
     username(account) {
@@ -80,29 +65,23 @@ export default {
       }
     },
     search() {
-      this.$store.dispatch(
-        'TimelineSpace/Modals/AddListMember/search',
-        this.name
-      )
+      this.$store.dispatch('TimelineSpace/Modals/AddListMember/search', this.name)
     },
     add(user) {
       this.$store
         .dispatch('TimelineSpace/Modals/AddListMember/add', user)
         .then(() => {
           this.addListMemberModal = false
-          this.$store.dispatch(
-            'TimelineSpace/Contents/Lists/Edit/fetchMembers',
-            this.listId
-          )
+          this.$store.dispatch('TimelineSpace/Contents/Lists/Edit/fetchMembers', this.listId)
         })
         .catch(() => {
           this.$message({
             message: this.$t('message.add_user_error'),
-            type: 'error',
+            type: 'error'
           })
         })
-    },
-  },
+    }
+  }
 }
 </script>
 
diff --git a/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue b/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue
index ebf49fd9..41a548f1 100644
--- a/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue
+++ b/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue
@@ -1,42 +1,18 @@
 <template>
   <transition name="image-viewer">
-    <div
-      id="image"
-      v-show="modalOpen"
-      @click="close"
-      :aria-hidden="!modalOpen"
-      aria-modal="true"
-      role="dialog"
-    >
-      <div
-        class="image-wrapper"
-        v-shortkey="modalOpen ? { close: ['esc'] } : {}"
-        @shortkey="closeHandle"
-      >
+    <div id="image" v-show="modalOpen" @click="close" :aria-hidden="!modalOpen" aria-modal="true" role="dialog">
+      <div class="image-wrapper" v-shortkey="modalOpen ? { close: ['esc'] } : {}" @shortkey="closeHandle">
         <div class="image-header">
-          <el-button
-            type="text"
-            :icon="ElIconClose"
-            @click="close"
-            class="close-button"
-          ></el-button>
+          <el-button type="text" :icon="ElIconClose" @click="close" class="close-button"></el-button>
         </div>
         <div class="image-content" role="presentation">
           <span class="button-area"
-            ><el-button
-              type="text"
-              v-show="showLeft"
-              v-shortkey="['arrowleft']"
-              @shortkey.native="decrementIndex()"
+            ><el-button type="text" v-show="showLeft" v-shortkey="['arrowleft']" @shortkey="decrementIndex()"
               ><el-icon><el-icon-arrow-left /></el-icon></el-button
           ></span>
           <Media :src="imageURL" :type="imageType"></Media>
           <span class="button-area"
-            ><el-button
-              type="text"
-              v-show="showRight"
-              v-shortkey="['arrowright']"
-              @shortkey.native="incrementIndex()"
+            ><el-button type="text" v-show="showRight" v-shortkey="['arrowright']" @shortkey="incrementIndex()"
               ><el-icon><el-icon-arrow-right /></el-icon></el-button
           ></span>
         </div>
@@ -46,29 +22,25 @@
 </template>
 
 <script>
-import {
-  ArrowLeft as ElIconArrowLeft,
-  ArrowRight as ElIconArrowRight,
-  Close as ElIconClose,
-} from '@element-plus/icons'
+import { ArrowLeft as ElIconArrowLeft, ArrowRight as ElIconArrowRight, Close as ElIconClose } from '@element-plus/icons'
 import Media from './Media'
 import { mapState } from 'vuex'
 
 export default {
   data() {
     return {
-      ElIconClose,
+      ElIconClose
     }
   },
   components: {
     Media,
     ElIconArrowLeft,
-    ElIconArrowRight,
+    ElIconArrowRight
   },
   name: 'image-viewer',
   computed: {
     ...mapState({
-      modalOpen: (state) => state.TimelineSpace.Modals.ImageViewer.modalOpen,
+      modalOpen: state => state.TimelineSpace.Modals.ImageViewer.modalOpen
     }),
     imageURL() {
       return this.$store.getters['TimelineSpace/Modals/ImageViewer/imageURL']
@@ -81,19 +53,17 @@ export default {
     },
     showRight() {
       return this.$store.getters['TimelineSpace/Modals/ImageViewer/showRight']
-    },
+    }
   },
   methods: {
     close() {
       this.$store.dispatch('TimelineSpace/Modals/ImageViewer/closeModal')
     },
     decrementIndex() {
-      if (this.showLeft)
-        this.$store.dispatch('TimelineSpace/Modals/ImageViewer/decrementIndex')
+      if (this.showLeft) this.$store.dispatch('TimelineSpace/Modals/ImageViewer/decrementIndex')
     },
     incrementIndex() {
-      if (this.showRight)
-        this.$store.dispatch('TimelineSpace/Modals/ImageViewer/incrementIndex')
+      if (this.showRight) this.$store.dispatch('TimelineSpace/Modals/ImageViewer/incrementIndex')
     },
     closeHandle(event) {
       switch (event.srcKey) {
@@ -101,8 +71,8 @@ export default {
           this.close()
           break
       }
-    },
-  },
+    }
+  }
 }
 </script>
 
diff --git a/src/renderer/components/TimelineSpace/Modals/Jump.vue b/src/renderer/components/TimelineSpace/Modals/Jump.vue
index 8c4abede..e3116887 100644
--- a/src/renderer/components/TimelineSpace/Modals/Jump.vue
+++ b/src/renderer/components/TimelineSpace/Modals/Jump.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :visible.sync="jumpModal" width="440px" class="jump-modal">
+  <el-dialog v-model="jumpModal" width="440px" class="jump-modal">
     <el-form class="jump-form" v-on:submit.prevent="jump">
       <div class="channel">
         <input
@@ -7,21 +7,13 @@
           v-model="channel"
           :placeholder="$t('modals.jump.jump_to')"
           ref="channel"
-          v-shortkey="
-            shortcutEnabled
-              ? { next: ['arrowdown'], prev: ['arrowup'], select: ['enter'] }
-              : {}
-          "
+          v-shortkey="shortcutEnabled ? { next: ['arrowdown'], prev: ['arrowup'], select: ['enter'] } : {}"
           @shortkey="handleKey"
         />
         <ul class="channel-list">
           <li
             v-for="c in filterdChannel"
-            :class="
-              c.name === selectedChannel.name
-                ? 'channel-list-item selected'
-                : 'channel-list-item'
-            "
+            :class="c.name === selectedChannel.name ? 'channel-list-item selected' : 'channel-list-item'"
             @click="jump(c)"
             @mouseover="changeSelected(c)"
           >
@@ -44,11 +36,8 @@ export default {
   name: 'jump',
   computed: {
     ...mapState('TimelineSpace/Modals/Jump', {
-      channelList: (state) =>
-        state.defaultChannelList
-          .concat(state.tagChannelList)
-          .concat(state.listChannelList),
-      selectedChannel: (state) => state.selectedChannel,
+      channelList: state => state.defaultChannelList.concat(state.tagChannelList).concat(state.listChannelList),
+      selectedChannel: state => state.selectedChannel
     }),
     channel: {
       get() {
@@ -56,7 +45,7 @@ export default {
       },
       set(value) {
         this.$store.commit('TimelineSpace/Modals/Jump/updateChannel', value)
-      },
+      }
     },
     filterdChannel() {
       return this.filterChannelForm()
@@ -67,18 +56,15 @@ export default {
       },
       set(value) {
         this.$store.commit('TimelineSpace/Modals/Jump/changeModal', value)
-      },
+      }
     },
     shortcutEnabled: function () {
       return this.jumpModal
-    },
+    }
   },
   watch: {
     channel: function (_newChannel, _oldChannel) {
-      this.$store.commit(
-        'TimelineSpace/Modals/Jump/changeSelected',
-        this.filterChannelForm()[0]
-      )
+      this.$store.commit('TimelineSpace/Modals/Jump/changeSelected', this.filterChannelForm()[0])
     },
     jumpModal: function (newModal, oldModal) {
       if (!oldModal && newModal) {
@@ -90,36 +76,30 @@ export default {
       } else {
         this.channel = ''
       }
-    },
+    }
   },
   methods: {
     filterChannelForm() {
-      return this.channelList.filter((c) => {
+      return this.channelList.filter(c => {
         return c.name.toLowerCase().indexOf(this.channel.toLowerCase()) !== -1
       })
     },
     nextChannel() {
       const filterd = this.filterChannelForm()
-      const i = filterd.findIndex((e) => {
+      const i = filterd.findIndex(e => {
         return e.name === this.selectedChannel.name
       })
       if (i !== undefined && i < filterd.length - 1) {
-        this.$store.commit(
-          'TimelineSpace/Modals/Jump/changeSelected',
-          filterd[i + 1]
-        )
+        this.$store.commit('TimelineSpace/Modals/Jump/changeSelected', filterd[i + 1])
       }
     },
     prevChannel() {
       const filterd = this.filterChannelForm()
-      const i = filterd.findIndex((e) => {
+      const i = filterd.findIndex(e => {
         return e.name === this.selectedChannel.name
       })
       if (i !== undefined && i > 0) {
-        this.$store.commit(
-          'TimelineSpace/Modals/Jump/changeSelected',
-          filterd[i - 1]
-        )
+        this.$store.commit('TimelineSpace/Modals/Jump/changeSelected', filterd[i - 1])
       }
     },
     changeSelected(channel) {
@@ -147,8 +127,8 @@ export default {
         default:
           return true
       }
-    },
-  },
+    }
+  }
 }
 </script>
 
diff --git a/src/renderer/components/TimelineSpace/Modals/ListMembership.vue b/src/renderer/components/TimelineSpace/Modals/ListMembership.vue
index 8c7b6f1b..3dc9b246 100644
--- a/src/renderer/components/TimelineSpace/Modals/ListMembership.vue
+++ b/src/renderer/components/TimelineSpace/Modals/ListMembership.vue
@@ -1,10 +1,5 @@
 <template>
-  <el-dialog
-    :title="$t('modals.list_membership.title')"
-    :visible.sync="listMembershipModal"
-    width="400px"
-    class="list-membership-modal"
-  >
+  <el-dialog :title="$t('modals.list_membership.title')" v-model="listMembershipModal" width="400px" class="list-membership-modal">
     <el-checkbox-group v-model="belongToLists" v-loading="loading">
       <table class="lists">
         <tbody>
@@ -26,76 +21,63 @@ export default {
   name: 'list-membership',
   data() {
     return {
-      loading: false,
+      loading: false
     }
   },
   computed: {
     ...mapState({
-      account: (state) => state.TimelineSpace.Modals.ListMembership.account,
-      lists: (state) => state.TimelineSpace.Modals.ListMembership.lists,
+      account: state => state.TimelineSpace.Modals.ListMembership.account,
+      lists: state => state.TimelineSpace.Modals.ListMembership.lists
     }),
     listMembershipModal: {
       get() {
         return this.$store.state.TimelineSpace.Modals.ListMembership.modalOpen
       },
       set(value) {
-        this.$store.dispatch(
-          'TimelineSpace/Modals/ListMembership/changeModal',
-          value
-        )
-      },
+        this.$store.dispatch('TimelineSpace/Modals/ListMembership/changeModal', value)
+      }
     },
     belongToLists: {
       get() {
-        return this.$store.state.TimelineSpace.Modals.ListMembership.belongToLists.map(
-          (l) => l.id
-        )
+        return this.$store.state.TimelineSpace.Modals.ListMembership.belongToLists.map(l => l.id)
       },
       set(value) {
         this.loading = true
         return this.$store
-          .dispatch(
-            'TimelineSpace/Modals/ListMembership/changeBelongToLists',
-            value
-          )
+          .dispatch('TimelineSpace/Modals/ListMembership/changeBelongToLists', value)
           .catch(() => {
             this.$message({
               message: this.$t('message.update_list_memberships_error'),
-              type: 'error',
+              type: 'error'
             })
           })
           .finally(() => (this.loading = false))
-      },
-    },
+      }
+    }
   },
   watch: {
     listMembershipModal: function (newState, oldState) {
       if (!oldState && newState) {
         this.init()
       }
-    },
+    }
   },
   methods: {
     async init() {
       this.loading = true
       try {
-        await this.$store.dispatch(
-          'TimelineSpace/Modals/ListMembership/fetchListMembership',
-          this.account
-        )
-        await this.$store.dispatch(
-          'TimelineSpace/Modals/ListMembership/fetchLists'
-        )
+        await this.$store.dispatch('TimelineSpace/Modals/ListMembership/fetchListMembership', this.account)
+        await this.$store.dispatch('TimelineSpace/Modals/ListMembership/fetchLists')
       } catch (err) {
         this.$message({
           message: this.$t('message.lists_fetch_error'),
-          type: 'error',
+          type: 'error'
         })
       } finally {
         this.loading = false
       }
-    },
-  },
+    }
+  }
 }
 </script>
 
diff --git a/src/renderer/components/TimelineSpace/Modals/MuteConfirm.vue b/src/renderer/components/TimelineSpace/Modals/MuteConfirm.vue
index 1b011467..c7ee1c73 100644
--- a/src/renderer/components/TimelineSpace/Modals/MuteConfirm.vue
+++ b/src/renderer/components/TimelineSpace/Modals/MuteConfirm.vue
@@ -1,22 +1,13 @@
 <template>
-  <el-dialog
-    :title="$t('modals.mute_confirm.title')"
-    :visible.sync="muteConfirmModal"
-    width="400px"
-    custom-class="mute-confirm"
-  >
+  <el-dialog :title="$t('modals.mute_confirm.title')" v-model="muteConfirmModal" width="400px" custom-class="mute-confirm">
     <el-form class="description">
       <el-form-item for="notify" :label="$t('modals.mute_confirm.body')">
         <el-switch id="notify" v-model="notify"></el-switch>
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
-      <el-button @click="closeModal">{{
-        $t('modals.mute_confirm.cancel')
-      }}</el-button>
-      <el-button type="primary" @click="submit">{{
-        $t('modals.mute_confirm.ok')
-      }}</el-button>
+      <el-button @click="closeModal">{{ $t('modals.mute_confirm.cancel') }}</el-button>
+      <el-button type="primary" @click="submit">{{ $t('modals.mute_confirm.ok') }}</el-button>
     </span>
   </el-dialog>
 </template>
@@ -28,24 +19,21 @@ export default {
   name: 'MuteConfirm',
   data() {
     return {
-      notify: true,
+      notify: true
     }
   },
   computed: {
     ...mapState('TimelineSpace/Modals/MuteConfirm', {
-      account: (state) => state.account,
+      account: state => state.account
     }),
     muteConfirmModal: {
       get() {
         return this.$store.state.TimelineSpace.Modals.MuteConfirm.modalOpen
       },
       set(value) {
-        this.$store.dispatch(
-          'TimelineSpace/Modals/MuteConfirm/changeModal',
-          value
-        )
-      },
-    },
+        this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/changeModal', value)
+      }
+    }
   },
   methods: {
     closeModal() {
@@ -53,12 +41,9 @@ export default {
     },
     async submit() {
       this.closeModal()
-      await this.$store.dispatch(
-        'TimelineSpace/Modals/MuteConfirm/submit',
-        this.notify
-      )
-    },
-  },
+      await this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/submit', this.notify)
+    }
+  }
 }
 </script>
 
diff --git a/src/renderer/components/TimelineSpace/Modals/NewToot.vue b/src/renderer/components/TimelineSpace/Modals/NewToot.vue
index b8905408..59d79afd 100644
--- a/src/renderer/components/TimelineSpace/Modals/NewToot.vue
+++ b/src/renderer/components/TimelineSpace/Modals/NewToot.vue
@@ -1,7 +1,7 @@
 <template>
   <el-dialog
     :title="$t('modals.new_toot.title')"
-    :visible.sync="newTootModal"
+    v-model="newTootModal"
     v-if="newTootModal"
     :before-close="closeConfirm"
     width="600px"
@@ -9,21 +9,10 @@
     ref="dialog"
   >
     <el-form v-on:submit.prevent="toot" role="form">
-      <Quote
-        :message="quoteToMessage"
-        :displayNameStyle="displayNameStyle"
-        v-if="quoteToMessage !== null"
-        ref="quote"
-      ></Quote>
+      <Quote :message="quoteToMessage" :displayNameStyle="displayNameStyle" v-if="quoteToMessage !== null" ref="quote"></Quote>
       <div class="spoiler" v-if="showContentWarning" ref="spoiler">
         <div class="el-input">
-          <input
-            type="text"
-            class="el-input__inner"
-            :placeholder="$t('modals.new_toot.cw')"
-            v-model="spoiler"
-            v-shortkey.avoid
-          />
+          <input type="text" class="el-input__inner" :placeholder="$t('modals.new_toot.cw')" v-model="spoiler" v-shortkey.avoid />
         </div>
       </div>
       <Status
@@ -47,18 +36,9 @@
       ref="poll"
     ></Poll>
     <div class="preview" ref="preview">
-      <div
-        class="image-wrapper"
-        v-for="media in attachedMedias"
-        v-bind:key="media.id"
-      >
+      <div class="image-wrapper" v-for="media in attachedMedias" v-bind:key="media.id">
         <img :src="media.preview_url" class="preview-image" />
-        <el-button
-          type="text"
-          @click="removeAttachment(media)"
-          class="remove-image"
-          ><font-awesome-icon icon="circle-xmark"
-        /></el-button>
+        <el-button type="text" @click="removeAttachment(media)" class="remove-image"><font-awesome-icon icon="circle-xmark" /></el-button>
         <textarea
           maxlength="420"
           class="image-description"
@@ -75,40 +55,19 @@
     </div>
     <div slot="footer" class="dialog-footer">
       <div class="upload-image">
-        <el-button
-          size="default"
-          type="text"
-          @click="selectImage"
-          :title="$t('modals.new_toot.footer.add_image')"
-        >
+        <el-button size="default" type="text" @click="selectImage" :title="$t('modals.new_toot.footer.add_image')">
           <font-awesome-icon icon="camera" />
         </el-button>
-        <input
-          name="image"
-          type="file"
-          class="image-input"
-          ref="image"
-          @change="onChangeImage"
-          :key="attachedMediaId"
-        />
+        <input name="image" type="file" class="image-input" ref="image" @change="onChangeImage" :key="attachedMediaId" />
       </div>
       <div class="poll">
-        <el-button
-          size="default"
-          type="text"
-          @click="togglePollForm"
-          :title="$t('modals.new_toot.footer.poll')"
-        >
+        <el-button size="default" type="text" @click="togglePollForm" :title="$t('modals.new_toot.footer.poll')">
           <font-awesome-icon icon="square-poll-horizontal" />
         </el-button>
       </div>
       <div class="privacy">
         <el-dropdown trigger="click" @command="changeVisibility">
-          <el-button
-            size="default"
-            type="text"
-            :title="$t('modals.new_toot.footer.change_visibility')"
-          >
+          <el-button size="default" type="text" :title="$t('modals.new_toot.footer.change_visibility')">
             <font-awesome-icon :icon="visibilityIcon" />
           </el-button>
           <el-dropdown-menu slot="dropdown">
@@ -125,11 +84,7 @@
               {{ $t(visibilityList.Private.name) }}
             </el-dropdown-item>
             <el-dropdown-item :command="visibilityList.Direct.value">
-              <font-awesome-icon
-                icon="envelope"
-                class="privacy-icon"
-                size="sm"
-              />
+              <font-awesome-icon icon="envelope" class="privacy-icon" size="sm" />
               {{ $t(visibilityList.Direct.name) }}
             </el-dropdown-item>
           </el-dropdown-menu>
@@ -172,27 +127,13 @@
         </el-button>
       </div>
       <div class="info">
-        <img
-          src="../../../assets/images/loading-spinner-wide.svg"
-          v-show="loading"
-          class="loading"
-        />
+        <img src="../../../assets/images/loading-spinner-wide.svg" v-show="loading" class="loading" />
         <span class="text-count">{{ tootMax - status.length }}</span>
 
-        <el-button
-          class="toot-action"
-          size="small"
-          @click="closeConfirm(close)"
-          >{{ $t('modals.new_toot.cancel') }}</el-button
-        >
-        <el-button
-          class="toot-action"
-          size="small"
-          type="primary"
-          @click="toot"
-          :loading="blockSubmit"
-          >{{ $t('modals.new_toot.toot') }}</el-button
-        >
+        <el-button class="toot-action" size="small" @click="closeConfirm(close)">{{ $t('modals.new_toot.cancel') }}</el-button>
+        <el-button class="toot-action" size="small" type="primary" @click="toot" :loading="blockSubmit">{{
+          $t('modals.new_toot.toot')
+        }}</el-button>
       </div>
       <div class="clearfix"></div>
     </div>
@@ -206,13 +147,7 @@ import Visibility from '~/src/constants/visibility'
 import Status from './NewToot/Status'
 import Poll from './NewToot/Poll'
 import Quote from './NewToot/Quote'
-import {
-  NewTootTootLength,
-  NewTootAttachLength,
-  NewTootModalOpen,
-  NewTootBlockSubmit,
-  NewTootPollInvalid,
-} from '@/errors/validations'
+import { NewTootTootLength, NewTootAttachLength, NewTootModalOpen, NewTootBlockSubmit, NewTootPollInvalid } from '@/errors/validations'
 import { Event } from '~/src/renderer/components/event'
 
 export default {
@@ -220,7 +155,7 @@ export default {
   components: {
     Status,
     Poll,
-    Quote,
+    Quote
   },
   data() {
     return {
@@ -232,30 +167,30 @@ export default {
       polls: [],
       pollExpire: {
         label: this.$t('modals.new_toot.poll.expires.1_day'),
-        value: 3600 * 24,
+        value: 3600 * 24
       },
-      statusHeight: 240,
+      statusHeight: 240
     }
   },
   computed: {
     ...mapState('TimelineSpace/Modals/NewToot', {
-      replyToId: (state) => {
+      replyToId: state => {
         if (state.replyToMessage !== null) {
           return state.replyToMessage.id
         } else {
           return null
         }
       },
-      quoteToMessage: (state) => state.quoteToMessage,
-      attachedMedias: (state) => state.attachedMedias,
-      attachedMediaId: (state) => state.attachedMediaId,
-      mediaDescriptions: (state) => state.mediaDescriptions,
-      blockSubmit: (state) => state.blockSubmit,
-      visibility: (state) => state.visibility,
-      sensitive: (state) => state.sensitive,
-      initialStatus: (state) => state.initialStatus,
-      initialSpoiler: (state) => state.initialSpoiler,
-      visibilityIcon: (state) => {
+      quoteToMessage: state => state.quoteToMessage,
+      attachedMedias: state => state.attachedMedias,
+      attachedMediaId: state => state.attachedMediaId,
+      mediaDescriptions: state => state.mediaDescriptions,
+      blockSubmit: state => state.blockSubmit,
+      visibility: state => state.visibility,
+      sensitive: state => state.sensitive,
+      initialStatus: state => state.initialStatus,
+      initialSpoiler: state => state.initialSpoiler,
+      visibilityIcon: state => {
         switch (state.visibility) {
           case Visibility.Public.value:
             return 'globe'
@@ -269,13 +204,13 @@ export default {
             return 'globe'
         }
       },
-      loading: (state) => state.loading,
+      loading: state => state.loading
     }),
     ...mapState('TimelineSpace', {
-      tootMax: (state) => state.tootMax,
+      tootMax: state => state.tootMax
     }),
     ...mapState('App', {
-      displayNameStyle: (state) => state.displayNameStyle,
+      displayNameStyle: state => state.displayNameStyle
     }),
     ...mapGetters('TimelineSpace/Modals/NewToot', ['hashtagInserting']),
     newTootModal: {
@@ -288,19 +223,16 @@ export default {
         } else {
           this.$store.dispatch('TimelineSpace/Modals/NewToot/closeModal')
         }
-      },
+      }
     },
     pinedHashtag: {
       get() {
         return this.$store.state.TimelineSpace.Modals.NewToot.pinedHashtag
       },
       set(value) {
-        this.$store.commit(
-          'TimelineSpace/Modals/NewToot/changePinedHashtag',
-          value
-        )
-      },
-    },
+        this.$store.commit('TimelineSpace/Modals/NewToot/changePinedHashtag', value)
+      }
+    }
   },
   created() {
     this.$store.dispatch('TimelineSpace/Modals/NewToot/setupLoading')
@@ -319,14 +251,12 @@ export default {
         this.status = this.initialStatus
         this.spoiler = this.initialSpoiler
       }
-    },
+    }
   },
   methods: {
     close() {
       this.filteredAccount = []
-      const spoilerHeight = this.$refs.spoiler
-        ? this.$refs.spoiler.offsetHeight
-        : 0
+      const spoilerHeight = this.$refs.spoiler ? this.$refs.spoiler.offsetHeight : 0
       this.showContentWarning = false
       this.spoiler = ''
       this.statusHeight = this.statusHeight + spoilerHeight
@@ -335,16 +265,12 @@ export default {
       this.polls = []
       this.pollExpire = {
         label: this.$t('modals.new_toot.poll.expires.1_day'),
-        value: 3600 * 24,
+        value: 3600 * 24
       }
       this.statusHeight = this.statusHeight + pollHeight
-      const quoteHeight = this.$refs.quote
-        ? this.$refs.quote.$el.offsetHeight
-        : 0
+      const quoteHeight = this.$refs.quote ? this.$refs.quote.$el.offsetHeight : 0
       this.statusHeight = this.statusHeight + quoteHeight
-      const attachmentHeight = this.$refs.preview
-        ? this.$refs.preview.offsetHeight
-        : 0
+      const attachmentHeight = this.$refs.preview ? this.$refs.preview.offsetHeight : 0
       this.statusHeight = this.statusHeight + attachmentHeight
       this.$store.dispatch('TimelineSpace/Modals/NewToot/resetMediaCount')
       this.$store.dispatch('TimelineSpace/Modals/NewToot/closeModal')
@@ -354,18 +280,12 @@ export default {
         status: this.status,
         spoiler: this.spoiler,
         polls: this.polls,
-        pollExpireSeconds: this.pollExpire.value,
+        pollExpireSeconds: this.pollExpire.value
       }
 
       try {
-        const status = await this.$store.dispatch(
-          'TimelineSpace/Modals/NewToot/postToot',
-          form
-        )
-        this.$store.dispatch(
-          'TimelineSpace/Modals/NewToot/updateHashtags',
-          status.tags
-        )
+        const status = await this.$store.dispatch('TimelineSpace/Modals/NewToot/postToot', form)
+        this.$store.dispatch('TimelineSpace/Modals/NewToot/updateHashtags', status.tags)
         this.close()
       } catch (err) {
         console.error(err)
@@ -373,29 +293,26 @@ export default {
           this.$message({
             message: this.$t('validation.new_toot.toot_length', {
               min: 1,
-              max: this.tootMax,
+              max: this.tootMax
             }),
-            type: 'error',
+            type: 'error'
           })
         } else if (err instanceof NewTootAttachLength) {
           this.$message({
             message: this.$t('validation.new_toot.attach_length', { max: 4 }),
-            type: 'error',
+            type: 'error'
           })
         } else if (err instanceof NewTootPollInvalid) {
           this.$message({
             message: this.$t('validation.new_toot.poll_invalid'),
-            type: 'error',
+            type: 'error'
           })
-        } else if (
-          err instanceof NewTootModalOpen ||
-          err instanceof NewTootBlockSubmit
-        ) {
+        } else if (err instanceof NewTootModalOpen || err instanceof NewTootBlockSubmit) {
           // Nothing
         } else {
           this.$message({
             message: this.$t('message.toot_error'),
-            type: 'error',
+            type: 'error'
           })
         }
       }
@@ -404,26 +321,21 @@ export default {
       this.$refs.image.click()
     },
     onChangeImage(e) {
-      if (
-        e.target.files.item(0) === null ||
-        e.target.files.item(0) === undefined
-      ) {
+      if (e.target.files.item(0) === null || e.target.files.item(0) === undefined) {
         return
       }
       const file = e.target.files.item(0)
       if (!file.type.includes('image') && !file.type.includes('video')) {
         this.$message({
           message: this.$t('validation.new_toot.attach_image'),
-          type: 'error',
+          type: 'error'
         })
         return
       }
       this.updateImage(file)
     },
     onPaste(e) {
-      const mimeTypes = window.clipboard
-        .availableFormats()
-        .filter((type) => type.startsWith('image'))
+      const mimeTypes = window.clipboard.availableFormats().filter(type => type.startsWith('image'))
       if (mimeTypes.length === 0) {
         return
       }
@@ -443,42 +355,33 @@ export default {
       this.$store
         .dispatch('TimelineSpace/Modals/NewToot/uploadImage', file)
         .then(() => {
-          this.statusHeight =
-            this.statusHeight - this.$refs.preview.offsetHeight
+          this.statusHeight = this.statusHeight - this.$refs.preview.offsetHeight
         })
-        .catch((err) => {
+        .catch(err => {
           if (err instanceof NewTootAttachLength) {
             this.$message({
               message: this.$t('validation.new_toot.attach_length', { max: 4 }),
-              type: 'error',
+              type: 'error'
             })
           } else {
             this.$message({
               message: this.$t('message.attach_error'),
-              type: 'error',
+              type: 'error'
             })
           }
         })
     },
     removeAttachment(media) {
       const previousHeight = this.$refs.preview.offsetHeight
-      this.$store
-        .dispatch('TimelineSpace/Modals/NewToot/removeMedia', media)
-        .then(() => {
-          this.statusHeight = this.statusHeight + previousHeight
-        })
+      this.$store.dispatch('TimelineSpace/Modals/NewToot/removeMedia', media).then(() => {
+        this.statusHeight = this.statusHeight + previousHeight
+      })
     },
     changeVisibility(level) {
-      this.$store.commit(
-        'TimelineSpace/Modals/NewToot/changeVisibilityValue',
-        level
-      )
+      this.$store.commit('TimelineSpace/Modals/NewToot/changeVisibilityValue', level)
     },
     changeSensitive() {
-      this.$store.commit(
-        'TimelineSpace/Modals/NewToot/changeSensitive',
-        !this.sensitive
-      )
+      this.$store.commit('TimelineSpace/Modals/NewToot/changeSensitive', !this.sensitive)
     },
     closeConfirm(done) {
       if (this.status.length === 0) {
@@ -486,24 +389,19 @@ export default {
       } else {
         this.$confirm(this.$t('modals.new_toot.close_confirm'), {
           confirmButtonText: this.$t('modals.new_toot.close_confirm_ok'),
-          cancelButtonText: this.$t('modals.new_toot.close_confirm_cancel'),
+          cancelButtonText: this.$t('modals.new_toot.close_confirm_cancel')
         })
-          .then((_) => {
+          .then(_ => {
             done()
           })
-          .catch((_) => {})
+          .catch(_ => {})
       }
     },
     updateDescription(id, value) {
-      this.$store.commit(
-        'TimelineSpace/Modals/NewToot/updateMediaDescription',
-        { id: id, description: value }
-      )
+      this.$store.commit('TimelineSpace/Modals/NewToot/updateMediaDescription', { id: id, description: value })
     },
     async togglePollForm() {
-      const previousHeight = this.$refs.poll
-        ? this.$refs.poll.$el.offsetHeight
-        : 0
+      const previousHeight = this.$refs.poll ? this.$refs.poll.$el.offsetHeight : 0
       const toggle = () => {
         this.openPoll = !this.openPoll
         if (this.openPoll) {
@@ -535,9 +433,7 @@ export default {
       this.pollExpire = obj
     },
     async toggleContentWarning() {
-      const previousHeight = this.$refs.spoiler
-        ? this.$refs.spoiler.offsetHeight
-        : 0
+      const previousHeight = this.$refs.spoiler ? this.$refs.spoiler.offsetHeight : 0
       await (this.showContentWarning = !this.showContentWarning)
       if (this.showContentWarning) {
         this.statusHeight = this.statusHeight - this.$refs.spoiler.offsetHeight
@@ -548,8 +444,7 @@ export default {
     handleResize(event) {
       // Ignore when the modal height already reach window height.
       const vHeight = this.$refs.dialog.$el.firstChild.style.marginTop
-      const marginTop =
-        (document.documentElement.clientHeight / 100) * parseInt(vHeight)
+      const marginTop = (document.documentElement.clientHeight / 100) * parseInt(vHeight)
       const limitHeight = document.documentElement.clientHeight - marginTop - 80
       if (this.$refs.dialog.$el.firstChild.offsetHeight >= limitHeight) {
         return
@@ -557,25 +452,13 @@ export default {
       // When emoji picker is opened, resize event has to be stopped.
       const style = this.$refs.dialog.$el.firstChild.style
       if (style.overflow === '' || style.overflow === 'hidden') {
-        const pollHeight = this.$refs.poll
-          ? this.$refs.poll.$el.offsetHeight
-          : 0
-        const spoilerHeight = this.$refs.spoiler
-          ? this.$refs.spoiler.offsetHeight
-          : 0
-        const quoteHeight = this.$refs.quote
-          ? this.$refs.quote.$el.offsetHeight
-          : 0
+        const pollHeight = this.$refs.poll ? this.$refs.poll.$el.offsetHeight : 0
+        const spoilerHeight = this.$refs.spoiler ? this.$refs.spoiler.offsetHeight : 0
+        const quoteHeight = this.$refs.quote ? this.$refs.quote.$el.offsetHeight : 0
         const headerHeight = 54
         const footerHeight = 63
         this.statusHeight =
-          event.height -
-          footerHeight -
-          headerHeight -
-          this.$refs.preview.offsetHeight -
-          pollHeight -
-          spoilerHeight -
-          quoteHeight
+          event.height - footerHeight - headerHeight - this.$refs.preview.offsetHeight - pollHeight - spoilerHeight - quoteHeight
       }
     },
     innerElementOpened(open) {
@@ -584,8 +467,8 @@ export default {
       } else {
         this.$refs.dialog.$el.firstChild.style.overflow = 'hidden'
       }
-    },
-  },
+    }
+  }
 }
 </script>
 
@@ -661,12 +544,7 @@ export default {
           border: 0;
           border-bottom-left-radius: 8px;
           border-bottom-right-radius: 8px;
-          background: linear-gradient(
-            0deg,
-            rgba(0, 0, 0, 0.8) 0,
-            rgba(0, 0, 0, 0.35) 80%,
-            transparent
-          );
+          background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0, rgba(0, 0, 0, 0.35) 80%, transparent);
           font-size: var(--font-base-size);
           color: #fff;
           opacity: 1;
diff --git a/src/renderer/components/TimelineSpace/Modals/Report.vue b/src/renderer/components/TimelineSpace/Modals/Report.vue
index a8cd4e51..4a986eae 100644
--- a/src/renderer/components/TimelineSpace/Modals/Report.vue
+++ b/src/renderer/components/TimelineSpace/Modals/Report.vue
@@ -1,22 +1,9 @@
 <template>
-  <el-dialog
-    :title="$t('modals.report.title')"
-    :visible.sync="reportModal"
-    width="400px"
-    custom-class="report"
-  >
-    <el-input
-      type="textarea"
-      v-model="comment"
-      :placeholder="$t('modals.report.comment')"
-    ></el-input>
+  <el-dialog :title="$t('modals.report.title')" v-model="reportModal" width="400px" custom-class="report">
+    <el-input type="textarea" v-model="comment" :placeholder="$t('modals.report.comment')"></el-input>
     <span slot="footer" class="dialog-footer">
-      <el-button @click="closeModal">{{
-        $t('modals.report.cancel')
-      }}</el-button>
-      <el-button type="primary" @click="submit">{{
-        $t('modals.report.ok')
-      }}</el-button>
+      <el-button @click="closeModal">{{ $t('modals.report.cancel') }}</el-button>
+      <el-button type="primary" @click="submit">{{ $t('modals.report.ok') }}</el-button>
     </span>
   </el-dialog>
 </template>
@@ -28,12 +15,12 @@ export default {
   name: 'Report',
   data() {
     return {
-      comment: '',
+      comment: ''
     }
   },
   computed: {
     ...mapState('TimelineSpace/Modals/Report', {
-      toot: (state) => state.message,
+      toot: state => state.message
     }),
     reportModal: {
       get() {
@@ -41,8 +28,8 @@ export default {
       },
       set(value) {
         this.$store.commit('TimelineSpace/Modals/Report/changeModalOpen', value)
-      },
-    },
+      }
+    }
   },
   methods: {
     closeModal() {
@@ -53,10 +40,10 @@ export default {
       await this.$store.dispatch('TimelineSpace/Modals/Report/submit', {
         account_id: this.toot.account.id,
         status_id: this.toot.id,
-        comment: this.comment,
+        comment: this.comment
       })
-    },
-  },
+    }
+  }
 }
 </script>
 
diff --git a/src/renderer/components/TimelineSpace/Modals/Shortcut.vue b/src/renderer/components/TimelineSpace/Modals/Shortcut.vue
index fb3150c7..39c9f28a 100644
--- a/src/renderer/components/TimelineSpace/Modals/Shortcut.vue
+++ b/src/renderer/components/TimelineSpace/Modals/Shortcut.vue
@@ -1,10 +1,5 @@
 <template>
-  <el-dialog
-    :title="$t('modals.shortcut.title')"
-    :visible.sync="shortcutModal"
-    width="500px"
-    class="shortcut-modal"
-  >
+  <el-dialog :title="$t('modals.shortcut.title')" v-model="shortcutModal" width="500px" class="shortcut-modal">
     <table class="shortcuts">
       <tbody>
         <tr>
@@ -94,9 +89,9 @@ export default {
       },
       set(value) {
         this.$store.commit('TimelineSpace/Modals/Shortcut/changeModal', value)
-      },
-    },
-  },
+      }
+    }
+  }
 }
 </script>
 
diff --git a/src/renderer/components/TimelineSpace/SideMenu.vue b/src/renderer/components/TimelineSpace/SideMenu.vue
index 4302d60f..f738daec 100644
--- a/src/renderer/components/TimelineSpace/SideMenu.vue
+++ b/src/renderer/components/TimelineSpace/SideMenu.vue
@@ -1,9 +1,6 @@
 <template>
   <div id="side_menu">
-    <div
-      :class="collapse ? 'profile-wrapper narrow-menu' : 'profile-wrapper'"
-      style="-webkit-app-region: drag"
-    >
+    <div :class="collapse ? 'profile-wrapper narrow-menu' : 'profile-wrapper'" style="-webkit-app-region: drag">
       <div :class="collapse ? 'profile-narrow' : 'profile-wide'">
         <div class="account">
           <div class="avatar" v-if="collapse">
@@ -13,45 +10,23 @@
             @{{ account.username }}
             <span class="domain-name">{{ account.domain }}</span>
           </div>
-          <el-dropdown
-            trigger="click"
-            @command="handleProfile"
-            :title="$t('side_menu.profile')"
-          >
+          <el-dropdown trigger="click" @command="handleProfile" :title="$t('side_menu.profile')">
             <span class="el-dropdown-link">
               <el-icon class="el-icon--right"><el-icon-arrow-down /></el-icon>
             </span>
             <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item command="show">{{
-                $t('side_menu.show_profile')
-              }}</el-dropdown-item>
-              <el-dropdown-item command="edit">{{
-                $t('side_menu.edit_profile')
-              }}</el-dropdown-item>
-              <el-dropdown-item command="settings">{{
-                $t('side_menu.settings')
-              }}</el-dropdown-item>
+              <el-dropdown-item command="show">{{ $t('side_menu.show_profile') }}</el-dropdown-item>
+              <el-dropdown-item command="edit">{{ $t('side_menu.edit_profile') }}</el-dropdown-item>
+              <el-dropdown-item command="settings">{{ $t('side_menu.settings') }}</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
         </div>
       </div>
       <div class="collapse">
-        <el-button
-          type="text"
-          class="release-collapse"
-          @click="releaseCollapse"
-          v-if="collapse"
-          :title="$t('side_menu.expand')"
-        >
+        <el-button type="text" class="release-collapse" @click="releaseCollapse" v-if="collapse" :title="$t('side_menu.expand')">
           <font-awesome-icon :icon="['fa', 'angles-right']" />
         </el-button>
-        <el-button
-          type="text"
-          class="do-collapse"
-          @click="doCollapse"
-          v-else
-          :title="$t('side_menu.collapse')"
-        >
+        <el-button type="text" class="do-collapse" @click="doCollapse" v-else :title="$t('side_menu.collapse')">
           <font-awesome-icon :icon="['fa', 'angles-left']" />
         </el-button>
       </div>
@@ -63,19 +38,10 @@
       :collapse="collapse"
       active-text-color="#ffffff"
       :router="true"
-      :class="
-        collapse
-          ? 'el-menu-vertical timeline-menu narrow-menu'
-          : 'el-menu-vertical timeline-menu'
-      "
+      :class="collapse ? 'el-menu-vertical timeline-menu narrow-menu' : 'el-menu-vertical timeline-menu'"
       role="menu"
     >
-      <el-menu-item
-        :index="`/${id()}/home`"
-        role="menuitem"
-        :title="$t('side_menu.home')"
-        class="menu-item"
-      >
+      <el-menu-item :index="`/${id()}/home`" role="menuitem" :title="$t('side_menu.home')" class="menu-item">
         <div class="menu-item-icon">
           <font-awesome-icon icon="home" />
         </div>
@@ -202,12 +168,7 @@
           <el-badge is-dot :hidden="!unreadPublicTimeline"> </el-badge>
         </div>
       </el-menu-item>
-      <el-menu-item
-        :index="`/${id()}/search`"
-        role="menuitem"
-        :title="$t('side_menu.search')"
-        class="menu-item"
-      >
+      <el-menu-item :index="`/${id()}/search`" role="menuitem" :title="$t('side_menu.search')" class="menu-item">
         <div class="menu-item-icon">
           <font-awesome-icon icon="magnifying-glass" />
         </div>
@@ -215,12 +176,7 @@
           <span>{{ $t('side_menu.search') }}</span>
         </div>
       </el-menu-item>
-      <el-menu-item
-        :index="`/${id()}/hashtag`"
-        role="menuitem"
-        :title="$t('side_menu.hashtag')"
-        class="menu-item"
-      >
+      <el-menu-item :index="`/${id()}/hashtag`" role="menuitem" :title="$t('side_menu.hashtag')" class="menu-item">
         <div class="menu-item-icon">
           <font-awesome-icon icon="hashtag" />
         </div>
@@ -228,29 +184,25 @@
           <span>{{ $t('side_menu.hashtag') }}</span>
         </div>
       </el-menu-item>
-      <template v-for="tag in tags" v-if="enabledTimelines.tag">
-        <el-menu-item
-          :index="`/${id()}/hashtag/${tag.tagName}`"
-          :class="collapse ? '' : 'sub-menu'"
-          :key="tag.tagName"
-          role="menuitem"
-          :title="tag.tagName"
-          class="menu-item"
-        >
-          <div class="menu-item-icon">
-            <font-awesome-icon icon="hashtag" size="sm" />
-          </div>
-          <div>
-            <span>{{ tag.tagName }}</span>
-          </div>
-        </el-menu-item>
+      <template v-if="enabledTemplates.tag">
+        <template v-for="tag in tags" :key="tag.tagName">
+          <el-menu-item
+            :index="`/${id()}/hashtag/${tag.tagName}`"
+            :class="collapse ? '' : 'sub-menu'"
+            role="menuitem"
+            :title="tag.tagName"
+            class="menu-item"
+          >
+            <div class="menu-item-icon">
+              <font-awesome-icon icon="hashtag" size="sm" />
+            </div>
+            <div>
+              <span>{{ tag.tagName }}</span>
+            </div>
+          </el-menu-item>
+        </template>
       </template>
-      <el-menu-item
-        :index="`/${id()}/lists`"
-        role="menuitem"
-        :title="$t('side_menu.lists')"
-        class="menu-item"
-      >
+      <el-menu-item :index="`/${id()}/lists`" role="menuitem" :title="$t('side_menu.lists')" class="menu-item">
         <div class="menu-item-icon">
           <font-awesome-icon icon="list-ul" />
         </div>
@@ -258,38 +210,29 @@
           <span>{{ $t('side_menu.lists') }}</span>
         </div>
       </el-menu-item>
-      <template v-for="list in lists" v-if="enabledTimelines.list">
-        <el-menu-item
-          :index="`/${id()}/lists/${list.id}`"
-          :class="collapse ? '' : 'sub-menu'"
-          :key="list.id"
-          role="menuitem"
-          :title="list.title"
-          class="menu-item"
-        >
-          <div class="menu-item-icon">
-            <font-awesome-icon icon="list-ul" size="sm" />
-          </div>
-          <div>
-            <span>{{ list.title }}</span>
-          </div>
-        </el-menu-item>
+      <template v-if="enabledTimelines.list">
+        <template v-for="list in lists" :key="list.id">
+          <el-menu-item
+            :index="`/${id()}/lists/${list.id}`"
+            :class="collapse ? '' : 'sub-menu'"
+            role="menuitem"
+            :title="list.title"
+            class="menu-item"
+          >
+            <div class="menu-item-icon">
+              <font-awesome-icon icon="list-ul" size="sm" />
+            </div>
+            <div>
+              <span>{{ list.title }}</span>
+            </div>
+          </el-menu-item>
+        </template>
       </template>
     </el-menu>
-    <el-button
-      v-if="hideGlobalHeader"
-      class="global-header-control"
-      type="text"
-      @click="changeGlobalHeader(false)"
-    >
+    <el-button v-if="hideGlobalHeader" class="global-header-control" type="text" @click="changeGlobalHeader(false)">
       <font-awesome-icon icon="angles-right" />
     </el-button>
-    <el-button
-      v-else
-      class="global-header-control"
-      type="text"
-      @click="changeGlobalHeader(true)"
-    >
+    <el-button v-else class="global-header-control" type="text" @click="changeGlobalHeader(true)">
       <font-awesome-icon icon="angles-left" />
     </el-button>
   </div>
@@ -301,29 +244,28 @@ import { mapState } from 'vuex'
 
 export default {
   components: {
-    ElIconArrowDown,
+    ElIconArrowDown
   },
   name: 'side-menu',
   computed: {
     ...mapState('TimelineSpace/SideMenu', {
-      unreadHomeTimeline: (state) => state.unreadHomeTimeline,
-      unreadNotifications: (state) => state.unreadNotifications,
-      unreadMentions: (state) => state.unreadMentions,
-      unreadLocalTimeline: (state) => state.unreadLocalTimeline,
-      unreadDirectMessagesTimeline: (state) =>
-        state.unreadDirectMessagesTimeline,
-      unreadPublicTimeline: (state) => state.unreadPublicTimeline,
-      unreadFollowRequests: (state) => state.unreadFollowRequests,
-      lists: (state) => state.lists,
-      tags: (state) => state.tags,
-      collapse: (state) => state.collapse,
-      enabledTimelines: (state) => state.enabledTimelines,
+      unreadHomeTimeline: state => state.unreadHomeTimeline,
+      unreadNotifications: state => state.unreadNotifications,
+      unreadMentions: state => state.unreadMentions,
+      unreadLocalTimeline: state => state.unreadLocalTimeline,
+      unreadDirectMessagesTimeline: state => state.unreadDirectMessagesTimeline,
+      unreadPublicTimeline: state => state.unreadPublicTimeline,
+      unreadFollowRequests: state => state.unreadFollowRequests,
+      lists: state => state.lists,
+      tags: state => state.tags,
+      collapse: state => state.collapse,
+      enabledTimelines: state => state.enabledTimelines
     }),
     ...mapState({
-      account: (state) => state.TimelineSpace.account,
-      themeColor: (state) => state.App.theme.side_menu_color,
-      hideGlobalHeader: (state) => state.GlobalHeader.hide,
-    }),
+      account: state => state.TimelineSpace.account,
+      themeColor: state => state.App.theme.side_menu_color,
+      hideGlobalHeader: state => state.GlobalHeader.hide
+    })
   },
   created() {
     this.$store.dispatch('TimelineSpace/SideMenu/readCollapse')
@@ -339,25 +281,12 @@ export default {
     handleProfile(command) {
       switch (command) {
         case 'show':
-          this.$store
-            .dispatch(
-              'TimelineSpace/Contents/SideBar/AccountProfile/fetchAccount',
-              this.account.accountId
-            )
-            .then((account) => {
-              this.$store.dispatch(
-                'TimelineSpace/Contents/SideBar/AccountProfile/changeAccount',
-                account
-              )
-              this.$store.commit(
-                'TimelineSpace/Contents/SideBar/changeOpenSideBar',
-                true
-              )
-            })
+          this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/fetchAccount', this.account.accountId).then(account => {
+            this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/changeAccount', account)
+            this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
+          })
 
-          this.$store.dispatch(
-            'TimelineSpace/Contents/SideBar/openAccountComponent'
-          )
+          this.$store.dispatch('TimelineSpace/Contents/SideBar/openAccountComponent')
           break
         case 'edit':
           window.shell.openExternal(this.account.baseURL + '/settings/profile')
@@ -377,8 +306,8 @@ export default {
     },
     async changeGlobalHeader(value) {
       await this.$store.dispatch('GlobalHeader/switchHide', value)
-    },
-  },
+    }
+  }
 }
 </script>