Fix timeline design

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

@@ -21,7 +21,7 @@
     </DynamicScroller>
     <div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
       <el-button type="primary" @click="upper" circle>
-        <font-awesome-icon icon="arrow-up" />
+        <font-awesome-icon icon="angle-up" class="upper-icon" />
       </el-button>
     </div>
   </div>
@@ -215,5 +215,9 @@ export default {
     right: calc(20px + var(--current-sidebar-width));
     transition: all 0.5s;
   }
+
+  .upper-icon {
+    padding: 3px;
+  }
 }
 </style>

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

@@ -23,7 +23,7 @@
     </DynamicScroller>
     <div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
       <el-button type="primary" @click="upper" circle>
-        <font-awesome-icon icon="arrow-up" />
+        <font-awesome-icon icon="angle-up" class="upper-icon" />
       </el-button>
     </div>
   </div>
@@ -299,6 +299,10 @@ export default {
     right: calc(20px + var(--current-sidebar-width));
     transition: all 0.5s;
   }
+
+  .upper-icon {
+    padding: 3px;
+  }
 }
 </style>
 

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

@@ -22,7 +22,7 @@
     </DynamicScroller>
     <div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
       <el-button type="primary" :icon="ElIconArrowUp" @click="upper" circle>
-        <font-awesome-icon icon="arrow-up" />
+        <font-awesome-icon icon="angle-up" class="upper-icon" />
       </el-button>
     </div>
   </div>
@@ -210,5 +210,9 @@ export default {
     right: calc(20px + var(--current-sidebar-width));
     transition: all 0.5s;
   }
+
+  .upper-icon {
+    padding: 3px;
+  }
 }
 </style>

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

@@ -65,7 +65,6 @@ export default {
 
 <style lang="scss" scoped>
 #hashtag {
-  border-top: 1px solid var(--theme-border-color);
   height: calc(100% - 1px);
   overflow: hidden;
 

src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue

@@ -23,7 +23,7 @@
     </DynamicScroller>
     <div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
       <el-button type="primary" @click="upper" circle>
-        <font-awesome-icon icon="arrow-up" />
+        <font-awesome-icon icon="angle-up" class="upper-icon" />
       </el-button>
     </div>
   </div>
@@ -306,6 +306,10 @@ export default {
     right: calc(20px + var(--current-sidebar-width));
     transition: all 0.5s;
   }
+
+  .upper-icon {
+    padding: 3px;
+  }
 }
 </style>
 

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

@@ -31,7 +31,7 @@
 
     <div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
       <el-button type="primary" @click="upper" circle>
-        <font-awesome-icon icon="angle-up" class="icon" />
+        <font-awesome-icon icon="angle-up" class="upper-icon" />
       </el-button>
     </div>
   </div>
@@ -307,10 +307,6 @@ export default {
     bottom: 20px;
     right: 20px;
     transition: all 0.5s;
-
-    .icon {
-      padding: 3px;
-    }
   }
 
   .upper-with-side-bar {
@@ -319,6 +315,10 @@ export default {
     right: calc(20px + var(--current-sidebar-width));
     transition: all 0.5s;
   }
+
+  .upper-icon {
+    padding: 3px;
+  }
 }
 </style>
 

src/renderer/components/TimelineSpace/Contents/Lists/Index.vue

@@ -1,16 +1,8 @@
 <template>
   <div id="lists">
-    <div
-      class="new-list"
-      v-loading="creating"
-      :element-loading-background="loadingBackground"
-    >
+    <div class="new-list" v-loading="creating" :element-loading-background="loadingBackground">
       <el-form :inline="true">
-        <input
-          v-model="title"
-          :placeholder="$t('lists.index.new_list')"
-          class="list-title"
-        />
+        <input v-model="title" :placeholder="$t('lists.index.new_list')" class="list-title" />
         <el-button type="text" class="create" @click="createList">
           <font-awesome-icon icon="plus" />
         </el-button>
@@ -40,14 +32,14 @@ export default {
   data() {
     return {
       title: '',
-      creating: false,
+      creating: false
     }
   },
   computed: {
     ...mapState({
-      lists: (state) => state.TimelineSpace.Contents.Lists.Index.lists,
-      loadingBackground: (state) => state.App.theme.wrapper_mask_color,
-    }),
+      lists: state => state.TimelineSpace.Contents.Lists.Index.lists,
+      loadingBackground: state => state.App.theme.wrapper_mask_color
+    })
   },
   created() {
     this.$store.commit('TimelineSpace/changeLoading', true)
@@ -60,29 +52,22 @@ export default {
       return this.$route.params.id
     },
     fetch() {
-      return this.$store
-        .dispatch('TimelineSpace/Contents/Lists/Index/fetchLists')
-        .catch(() => {
+      return this.$store.dispatch('TimelineSpace/Contents/Lists/Index/fetchLists').catch(() => {
         this.$message({
           message: this.$t('message.lists_fetch_error'),
-            type: 'error',
+          type: 'error'
         })
       })
     },
     async createList() {
       this.creating = true
       try {
-        await this.$store.dispatch(
-          'TimelineSpace/Contents/Lists/Index/createList',
-          this.title
-        )
-        await this.$store.dispatch(
-          'TimelineSpace/Contents/Lists/Index/fetchLists'
-        )
+        await this.$store.dispatch('TimelineSpace/Contents/Lists/Index/createList', this.title)
+        await this.$store.dispatch('TimelineSpace/Contents/Lists/Index/fetchLists')
       } catch (err) {
         this.$message({
           message: this.$t('message.list_create_error'),
-          type: 'error',
+          type: 'error'
         })
       } finally {
         this.creating = false
@@ -93,24 +78,17 @@ export default {
       return this.$router.push(`/${this.id()}/lists/${list.id}/edit`)
     },
     del(list) {
-      this.$confirm(
-        this.$t('lists.index.delete.confirm.message'),
-        this.$t('lists.index.delete.confirm.title'),
-        {
+      this.$confirm(this.$t('lists.index.delete.confirm.message'), this.$t('lists.index.delete.confirm.title'), {
         confirmButtonText: this.$t('lists.index.delete.confirm.ok'),
         cancelButtonText: this.$t('lists.index.delete.confirm.cancel'),
-          type: 'warning',
-        }
-      )
+        type: 'warning'
+      })
         .then(() => {
-          this.$store.dispatch(
-            'TimelineSpace/Contents/Lists/Index/deleteList',
-            list
-          )
+          this.$store.dispatch('TimelineSpace/Contents/Lists/Index/deleteList', list)
         })
         .catch(() => {})
-    },
-  },
+    }
+  }
 }
 </script>
 
@@ -145,7 +123,7 @@ export default {
   .list {
     padding: 4px 24px;
     display: flex;
-    flex-dirrection: row;
+    flex-direction: row;
     align-items: baseline;
     justify-content: space-between;
     border-bottom: 1px solid var(--theme-border-color);

src/renderer/components/TimelineSpace/Contents/Lists/Show.vue

@@ -23,7 +23,7 @@
     </DynamicScroller>
     <div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
       <el-button type="primary" @click="upper" circle>
-        <font-awesome-icon icon="arrow-up" />
+        <font-awesome-icon icon="angle-up" class="upper-icon" />
       </el-button>
     </div>
   </div>
@@ -306,6 +306,10 @@ export default {
     right: calc(20px + var(--current-sidebar-width));
     transition: all 0.5s;
   }
+
+  .upper-icon {
+    padding: 3px;
+  }
 }
 </style>
 

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

@@ -23,7 +23,7 @@
     </DynamicScroller>
     <div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
       <el-button type="primary" @click="upper" circle>
-        <font-awesome-icon icon="arrow-up" />
+        <font-awesome-icon icon="angle-up" class="upper-icon" />
       </el-button>
     </div>
   </div>
@@ -61,7 +61,7 @@ export default {
       openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
       backgroundColor: state => state.App.theme.background_color,
       startReload: state => state.TimelineSpace.HeaderMenu.reload,
-      unreadNotification: state => state.TimelineSpace.unreadNotification
+      unreadNotification: state => state.TimelineSpace.timelineSetting.unreadNotification
     }),
     ...mapGetters('TimelineSpace/Modals', ['modalOpened']),
     shortcutEnabled: function () {
@@ -77,6 +77,7 @@ export default {
     }
   },
   async mounted() {
+    console.log(this.unreadNotification)
     this.$store.commit('TimelineSpace/SideMenu/changeUnreadLocalTimeline', false)
     document.getElementById('scroller').addEventListener('scroll', this.onScroll)
     if (!this.unreadNotification.local) {
@@ -296,6 +297,10 @@ export default {
     right: calc(20px + var(--current-sidebar-width));
     transition: all 0.5s;
   }
+
+  .upper-icon {
+    padding: 3px;
+  }
 }
 </style>
 

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

@@ -29,7 +29,7 @@
     </DynamicScroller>
     <div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
       <el-button type="primary" @click="upper" circle>
-        <font-awesome-icon icon="arrow-up" />
+        <font-awesome-icon icon="angle-up" class="upper-icon" />
       </el-button>
     </div>
   </div>
@@ -300,6 +300,10 @@ export default {
     right: calc(20px + var(--current-sidebar-width));
     transition: all 0.5s;
   }
+
+  .upper-icon {
+    padding: 3px;
+  }
 }
 </style>
 

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

@@ -28,7 +28,7 @@
     </DynamicScroller>
     <div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
       <el-button type="primary" @click="upper" circle>
-        <font-awesome-icon icon="arrow-up" />
+        <font-awesome-icon icon="angle-up" class="upper-icon" />
       </el-button>
     </div>
   </div>
@@ -297,6 +297,10 @@ export default {
     right: calc(20px + var(--current-sidebar-width));
     transition: all 0.5s;
   }
+
+  .upper-icon {
+    padding: 3px;
+  }
 }
 </style>
 

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

@@ -23,7 +23,7 @@
     </DynamicScroller>
     <div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
       <el-button type="primary" @click="upper" circle>
-        <font-awesome-icon icon="arrow-up" />
+        <font-awesome-icon icon="angle-up" class="upper-icon" />
       </el-button>
     </div>
   </div>
@@ -299,6 +299,10 @@ export default {
     right: calc(20px + var(--current-sidebar-width));
     transition: all 0.5s;
   }
+
+  .upper-icon {
+    padding: 3px;
+  }
 }
 </style>
 

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

@@ -2,7 +2,7 @@
   <div id="search">
     <div class="search-header">
       <el-form :inline="true">
-        <el-select v-model="target" :placeholder="$t('search.search')" class="search-target">
+        <el-select :model-value="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 />
@@ -18,6 +18,7 @@
 </template>
 
 <script>
+import { ref } from 'vue'
 import SearchAccount from './Search/Account'
 import SearchTag from './Search/Tag'
 import SearchToots from './Search/Toots'
@@ -27,14 +28,9 @@ export default {
   components: { SearchAccount, SearchTag, SearchToots },
   data() {
     return {
-      target: 'account',
-      query: ''
-    }
-  },
-  computed: {
-    searchTargets: {
-      get() {
-        return [
+      target: ref('account'),
+      query: '',
+      searchTargets: [
         {
           target: 'account',
           label: this.$t('search.account')
@@ -49,7 +45,6 @@ export default {
         }
       ]
     }
-    }
   },
   methods: {
     search() {
@@ -88,22 +83,21 @@ export default {
 
 <style lang="scss" scoped>
 #search {
-  border-top: 1px solid var(--theme-border-color);
-
   .search-header {
     background-color: var(--theme-selected-background-color);
     padding: 8px 12px;
 
-    .search-target /deep/ {
+    .search-target {
       float: left;
       width: 20%;
+    }
 
-      .el-input__inner {
+    .search-target :deep(.el-input__inner) {
       background-color: var(--theme-background-color);
       border: none;
       border-radius: 4px 0 0 4px;
       color: var(--theme-primary-color);
-      }
+      box-shadow: none;
     }
 
     .search-keyword {

src/renderer/components/organisms/Toot.vue

@@ -992,7 +992,7 @@ export default {
 
 <style lang="scss">
 .status-menu-popper {
-  padding: 2px 0;
+  padding: 2px 0 !important;
   border-color: #909399;
 
   .menu-list {