✌️

src/client/app/desktop/views/pages/deck/deck.column.vue

@@ -1,7 +1,8 @@
 <template>
 <div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, isActive, isStacked }">
-	<header :class="{ indicate }" @click="toggleActive">
+	<header :class="{ indicate: count > 0 }" @click="toggleActive">
 		<slot name="header"></slot>
+		<span class="count" v-if="count > 0">({{ count }})</span>
 		<button ref="menu" @click.stop="showMenu">%fa:caret-down%</button>
 	</header>
 	<div ref="body" v-show="isActive">
@@ -46,16 +47,24 @@ export default Vue.extend({
 
 	data() {
 		return {
-			indicate: false,
+			count: 0,
 			isActive: this._isActive
 		};
 	},
 
+	watch: {
+		isActive(v) {
+			if (v && this.isScrollTop()) {
+				this.$emit('top');
+			}
+		}
+	},
+
 	provide() {
 		return {
 			column: this,
 			isScrollTop: this.isScrollTop,
-			indicate: v => this.indicate = v
+			count: v => this.count = v
 		};
 	},
 
@@ -75,7 +84,7 @@ export default Vue.extend({
 		},
 
 		isScrollTop() {
-			return this.$refs.body.scrollTop == 0;
+			return this.isActive && this.$refs.body.scrollTop == 0;
 		},
 
 		onScroll() {
@@ -205,6 +214,10 @@ root(isDark)
 			[data-fa]
 				margin-right 8px
 
+		> .count
+			margin-left 4px
+			opacity 0.5
+
 		> button
 			position absolute
 			top 0

src/client/app/desktop/views/pages/deck/deck.notes.vue

@@ -28,8 +28,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { url } from '../../../config';
-import getNoteSummary from '../../../../../renderers/get-note-summary';
 
 import XNote from './deck.note.vue';
 
@@ -40,7 +38,7 @@ export default Vue.extend({
 		XNote
 	},
 
-	inject: ['column', 'isScrollTop', 'indicate'],
+	inject: ['column', 'isScrollTop', 'count'],
 
 	props: {
 		more: {
@@ -55,7 +53,6 @@ export default Vue.extend({
 			requestInitPromise: null as () => Promise<any[]>,
 			notes: [],
 			queue: [],
-			unreadCount: 0,
 			fetching: true,
 			moreFetching: false
 		};
@@ -73,6 +70,12 @@ export default Vue.extend({
 		}
 	},
 
+	watch: {
+		queue(q) {
+			this.count(q.length);
+		}
+	},
+
 	created() {
 		this.column.$on('top', this.onTop);
 		this.column.$on('bottom', this.onBottom);
@@ -141,7 +144,6 @@ export default Vue.extend({
 				}
 			} else {
 				this.queue.push(note);
-				this.indicate(true);
 			}
 		},
 
@@ -156,7 +158,6 @@ export default Vue.extend({
 		releaseQueue() {
 			this.queue.forEach(n => this.prepend(n, true));
 			this.queue = [];
-			this.indicate(false);
 		},
 
 		async loadMore() {