Resolve #5995

locales/ja-JP.yml

@@ -422,6 +422,7 @@ useObjectStorage: "オブジェクトストレージを使用"
 serverLogs: "サーバーログ"
 deleteAll: "全て削除"
 showFixedPostForm: "タイムライン上部に投稿フォームを表示する"
+newNoteRecived: "新しいノートがあります"
 
 _ago:
   unknown: "謎"

src/client/components/timeline.vue

 <template>
-<x-notes ref="tl" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)"/>
+<x-notes ref="tl" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)" @queue="$emit('queue', $event)"/>
 </template>
 
 <script lang="ts">

src/client/pages/index.home.vue

@@ -14,10 +14,12 @@
 		</button>
 	</portal>
 
+	<div class="new" v-if="queue > 0" :style="{ width: width + 'px' }"><button class="_buttonPrimary" @click="top()">{{ $t('newNoteRecived') }}</button></div>
+
 	<x-tutorial class="tutorial" v-if="$store.state.settings.tutorial != -1"/>
 
 	<x-post-form class="post-form _panel" fixed v-if="$store.state.device.showFixedPostForm"/>
-	<x-timeline ref="tl" :key="src === 'list' ? `list:${list.id}` : src === 'antenna' ? `antenna:${antenna.id}` : src" :src="src" :list="list" :antenna="antenna" @before="before()" @after="after()"/>
+	<x-timeline ref="tl" :key="src === 'list' ? `list:${list.id}` : src === 'antenna' ? `antenna:${antenna.id}` : src" :src="src" :list="list" :antenna="antenna" @before="before()" @after="after()" @queue="queueUpdated"/>
 </div>
 </template>
 
@@ -56,6 +58,8 @@ export default Vue.extend({
 			list: null,
 			antenna: null,
 			menuOpened: false,
+			queue: 0,
+			width: 0,
 			faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faComments, faListUl, faSatellite, faCircle
 		};
 	},
@@ -103,6 +107,15 @@ export default Vue.extend({
 			Progress.done();
 		},
 
+		queueUpdated(q) {
+			this.width = this.$el.offsetWidth;
+			this.queue = q;
+		},
+
+		top() {
+			window.scroll({ top: 0, behavior: 'instant' });
+		},
+
 		async choose(ev) {
 			this.menuOpened = true;
 			const [antennas, lists] = await Promise.all([
@@ -172,6 +185,18 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 .mk-home {
+	> .new {
+		position: fixed;
+		z-index: 1000;
+
+		> button {
+			display: block;
+			margin: 0 auto;
+			padding: 8px 12px;
+			border-radius: 32px;
+		}
+	}
+
 	> .tutorial {
 		margin-bottom: var(--margin);
 	}

src/client/scripts/paging.ts

@@ -31,6 +31,10 @@ export default (opts) => ({
 	watch: {
 		pagination() {
 			this.init();
+		},
+
+		queue() {
+			this.$emit('queue', this.queue.length);
 		}
 	},