tabs for settings

src/components/settings/settings.js

@@ -1,4 +1,5 @@
 /* eslint-env browser */
+import TabSwitcher from '../tab_switcher/tab_switcher.jsx'
 import StyleSwitcher from '../style_switcher/style_switcher.vue'
 import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue'
 import { filter, trim } from 'lodash'
@@ -29,6 +30,7 @@ const settings = {
     }
   },
   components: {
+    TabSwitcher,
     StyleSwitcher,
     InterfaceLanguageSwitcher
   },

src/components/settings/settings.vue

@@ -4,14 +4,11 @@
     {{$t('settings.settings')}}
   </div>
   <div class="panel-body">
+    <tab-switcher>
+      <div :title="$t('settings.general')" >
         <div class="setting-item">
-      <h2>{{$t('settings.theme')}}</h2>
+          <h2>{{ $t('settings.interfaceLanguage') }}</h2>
-      <style-switcher></style-switcher>
+          <interface-language-switcher />
-    </div>
-    <div class="setting-item">
-      <h2>{{$t('settings.filtering')}}</h2>
-      <p>{{$t('settings.filtering_explanation')}}</p>
-      <textarea id="muteWords" v-model="muteWordsString"></textarea>
         </div>
         <div class="setting-item">
           <h2>{{$t('nav.timeline')}}</h2>
@@ -84,10 +81,22 @@
             </li>
           </ul>
         </div>
-    <div class="setting-item">
-      <h2>{{ $t('settings.interfaceLanguage') }}</h2>
-      <interface-language-switcher />
       </div>
+
+      <div :title="$t('settings.theme')" >
+        <div class="setting-item">
+          <style-switcher></style-switcher>
+        </div>
+      </div>
+
+      <div :title="$t('settings.filtering')" >
+        <div class="setting-item">
+          <p>{{$t('settings.filtering_explanation')}}</p>
+          <textarea id="muteWords" v-model="muteWordsString"></textarea>
+        </div>
+      </div>
+
+    </tab-switcher>
   </div>
 </div>
 </template>
@@ -103,6 +112,10 @@
   margin: 1em 1em 1.4em;
   padding-bottom: 1.4em;
 
+  &:last-child {
+    border-bottom: none;
+  }
+
 
   textarea {
     width: 100%;

src/i18n/messages.js

@@ -277,6 +277,7 @@ const en = {
     no_retweet_hint: 'Post is marked as followers-only or direct and cannot be repeated'
   },
   settings: {
+    general: 'General',
     user_settings: 'User Settings',
     name_bio: 'Name & Bio',
     name: 'Name',
@@ -1625,6 +1626,7 @@ const ru = {
     no_retweet_hint: 'Пост помечен как "только для подписчиков" или "личное" и поэтому не может быть повторён'
   },
   settings: {
+    general: 'Общие',
     user_settings: 'Настройки пользователя',
     name_bio: 'Имя и описание',
     name: 'Имя',