Fix settings design

src/renderer/components/Settings.vue

@@ -5,7 +5,7 @@
         <el-col :span="23">
           <h1>{{ $t('settings.title') }}</h1>
         </el-col>
-        <el-col :span="1">
+        <el-col :span="1" class="close-area">
           <el-button type="text" @click="close" class="close-button" role="button">
             <font-awesome-icon icon="xmark" />
           </el-button>
@@ -83,8 +83,13 @@ export default {
     user-select: none;
   }
 
-  .close-button {
-    font-size: 28px;
+  .close-area {
+    display: flex;
+    align-items: center;
+
+    .close-button {
+      font-size: 28px;
+    }
   }
 
   .menu {
@@ -95,13 +100,12 @@ export default {
       border-right: solid 1px var(--theme-border-color);
     }
 
-    .setting-menu /deep/ {
+    .setting-menu {
       height: 100%;
       user-select: none;
-
-      .icon {
-        margin-right: 9px;
-      }
+    }
+    .setting-menu :deep(.icon) {
+      margin-right: 9px;
     }
   }
 }

src/renderer/components/Settings/Filters.vue

@@ -3,7 +3,7 @@
     <h2>{{ $t('settings.filters.title') }}</h2>
     <div class="new-filter">
       <el-button type="primary" :disabled="sns === 'misskey'">
-        <router-link tag="span" :to="`/${id()}/settings/filters/new`">
+        <router-link :to="`/${id()}/settings/filters/new`">
           {{ $t('settings.filters.new.title') }}
         </router-link>
       </el-button>
@@ -85,9 +85,14 @@ export default {
   .new-filter {
     display: flex;
     justify-content: flex-end;
+
+    a {
+      color: var(--theme-primary-color);
+      text-decoration: none;
+    }
   }
 
-  .el-table /deep/ {
+  .el-table :deep() {
     tr,
     th,
     td,

src/renderer/components/Settings/General.vue

@@ -1,39 +1,18 @@
 <template>
   <div id="general">
     <h2>{{ $t('settings.general.title') }}</h2>
-    <el-form
-      class="toot section"
-      label-width="250px"
-      label-position="right"
-      size="default"
-    >
+    <el-form class="toot section" label-width="250px" label-position="right" size="default">
       <h3>{{ $t('settings.general.toot.title') }}</h3>
-      <el-form-item
-        for="visibility"
-        :label="$t('settings.general.toot.visibility.description')"
-      >
-        <el-select
-          id="visibility"
-          v-model="tootVisibility"
-          placeholder="visibility"
-        >
-          <el-option
-            v-for="v in visibilities"
-            :key="v.value"
-            :label="$t(v.name)"
-            :value="v.value"
-          >
-          </el-option>
+      <el-form-item for="visibility" :label="$t('settings.general.toot.visibility.description')">
+        <el-select id="visibility" :model-value="tootVisibility" placeholder="visibility" @change="changeVisibility">
+          <el-option v-for="v in visibilities" :key="v.value" :label="$t(v.name)" :value="v.value"> </el-option>
         </el-select>
         <p class="notice">
           {{ $t('settings.general.toot.visibility.notice') }}
         </p>
       </el-form-item>
-      <el-form-item
-        for="sensitive"
-        :label="$t('settings.general.toot.sensitive.description')"
-      >
-        <el-switch id="sensitive" v-model="tootSensitive"></el-switch>
+      <el-form-item for="sensitive" :label="$t('settings.general.toot.sensitive.description')">
+        <el-switch id="sensitive" :model-value="tootSensitive" @change="changeSensitive"></el-switch>
       </el-form-item>
     </el-form>
   </div>
@@ -46,11 +25,7 @@ export default {
   name: 'General',
   data() {
     return {
-      visibilities: [
-        Visibility.Public,
-        Visibility.Unlisted,
-        Visibility.Private,
-      ],
+      visibilities: [Visibility.Public, Visibility.Unlisted, Visibility.Private]
     }
   },
   computed: {
@@ -60,7 +35,7 @@ export default {
       },
       set(value) {
         this.$store.dispatch('Settings/General/setVisibility', value)
-      },
+      }
     },
     tootSensitive: {
       get() {
@@ -68,12 +43,20 @@ export default {
       },
       set(value) {
         this.$store.dispatch('Settings/General/setSensitive', value)
-      },
-    },
+      }
+    }
   },
   created() {
     this.$store.dispatch('Settings/General/fetchSettings')
   },
+  methods: {
+    changeVisibility(value) {
+      this.tootVisibility = value
+    },
+    changeSensitive(value) {
+      this.tootSensitive = value
+    }
+  }
 }
 </script>
 

src/renderer/components/TimelineSpace/Contents/Search.vue

@@ -2,7 +2,7 @@
   <div id="search">
     <div class="search-header">
       <el-form :inline="true">
-        <el-select :model-value="target" :placeholder="$t('search.search')" class="search-target" size="large">
+        <el-select v-model="target" :placeholder="$t('search.search')" class="search-target" size="large">
           <el-option v-for="item in searchTargets" :key="item.target" :label="item.label" :value="item.target"> </el-option>
         </el-select>
         <input v-model="query" :placeholder="$t('search.keyword')" class="search-keyword" v-on:keyup.enter="search" autofocus />

src/renderer/store/Settings/Timeline.ts

@@ -1,4 +1,5 @@
 import { Module, MutationTree, ActionTree } from 'vuex'
+import { toRaw } from 'vue'
 import { RootState } from '@/store'
 import { MyWindow } from '~/src/types/global'
 import { Setting, UnreadNotification, Timeline as TimelineSetting, UseMarker } from '~src/types/setting'
@@ -32,7 +33,7 @@ const actions: ActionTree<TimelineState, RootState> = {
   },
   changeUnreadNotification: async ({ dispatch, state, rootState }, timeline: { key: boolean }): Promise<boolean> => {
     const unread: UnreadNotification = Object.assign({}, state.setting.unreadNotification, timeline)
-    const tl: TimelineSetting = Object.assign({}, state.setting, {
+    const tl: TimelineSetting = Object.assign({}, toRaw(state.setting), {
       unreadNotification: unread
     })
     const setting: Setting = {
@@ -45,7 +46,7 @@ const actions: ActionTree<TimelineState, RootState> = {
   },
   changeUseMarker: async ({ dispatch, state, rootState }, timeline: { key: boolean }) => {
     const marker: UseMarker = Object.assign({}, state.setting.useMarker, timeline)
-    const tl: TimelineSetting = Object.assign({}, state.setting, {
+    const tl: TimelineSetting = Object.assign({}, toRaw(state.setting), {
       useMarker: marker
     })
     const setting: Setting = {