From 7eb6038f9291bfb88c989d53454796d7abc1b6ea Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 20 Feb 2021 11:05:46 +0900
Subject: :art:

---
 src/client/widgets/job-queue.vue | 32 ++++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/client/widgets/job-queue.vue b/src/client/widgets/job-queue.vue
index 11bb20979b..b7bfb6de27 100644
--- a/src/client/widgets/job-queue.vue
+++ b/src/client/widgets/job-queue.vue
@@ -5,19 +5,19 @@
 		<div class="values">
 			<div>
 				<div>Process</div>
-				<div>{{ number(inbox.activeSincePrevTick) }}</div>
+				<div :class="{ inc: inbox.activeSincePrevTick > prev.inbox.activeSincePrevTick, dec: inbox.activeSincePrevTick < prev.inbox.activeSincePrevTick }">{{ number(inbox.activeSincePrevTick) }}</div>
 			</div>
 			<div>
 				<div>Active</div>
-				<div>{{ number(inbox.active) }}</div>
+				<div :class="{ inc: inbox.active > prev.inbox.active, dec: inbox.active < prev.inbox.active }">{{ number(inbox.active) }}</div>
 			</div>
 			<div>
 				<div>Delayed</div>
-				<div>{{ number(inbox.delayed) }}</div>
+				<div :class="{ inc: inbox.delayed > prev.inbox.delayed, dec: inbox.delayed < prev.inbox.delayed }">{{ number(inbox.delayed) }}</div>
 			</div>
 			<div>
 				<div>Waiting</div>
-				<div>{{ number(inbox.waiting) }}</div>
+				<div :class="{ inc: inbox.waiting > prev.inbox.waiting, dec: inbox.waiting < prev.inbox.waiting }">{{ number(inbox.waiting) }}</div>
 			</div>
 		</div>
 	</div>
@@ -26,19 +26,19 @@
 		<div class="values">
 			<div>
 				<div>Process</div>
-				<div>{{ number(deliver.activeSincePrevTick) }}</div>
+				<div :class="{ inc: deliver.activeSincePrevTick > prev.deliver.activeSincePrevTick, dec: deliver.activeSincePrevTick < prev.deliver.activeSincePrevTick }">{{ number(deliver.activeSincePrevTick) }}</div>
 			</div>
 			<div>
 				<div>Active</div>
-				<div>{{ number(deliver.active) }}</div>
+				<div :class="{ inc: deliver.active > prev.deliver.active, dec: deliver.active < prev.deliver.active }">{{ number(deliver.active) }}</div>
 			</div>
 			<div>
 				<div>Delayed</div>
-				<div>{{ number(deliver.delayed) }}</div>
+				<div :class="{ inc: deliver.delayed > prev.deliver.delayed, dec: deliver.delayed < prev.deliver.delayed }">{{ number(deliver.delayed) }}</div>
 			</div>
 			<div>
 				<div>Waiting</div>
-				<div>{{ number(deliver.waiting) }}</div>
+				<div :class="{ inc: deliver.waiting > prev.deliver.waiting, dec: deliver.waiting < prev.deliver.waiting }">{{ number(deliver.waiting) }}</div>
 			</div>
 		</div>
 	</div>
@@ -79,10 +79,15 @@ export default defineComponent({
 				waiting: 0,
 				delayed: 0,
 			},
+			prev: {},
 			faExclamationTriangle,
 		};
 	},
 	created() {
+		for (const domain of ['inbox', 'deliver']) {
+			this.prev[domain] = JSON.parse(JSON.stringify(this[domain]));
+		}
+	
 		this.connection.on('stats', this.onStats);
 		this.connection.on('statsLog', this.onStatsLog);
 
@@ -99,6 +104,7 @@ export default defineComponent({
 	methods: {
 		onStats(stats) {
 			for (const domain of ['inbox', 'deliver']) {
+				this.prev[domain] = JSON.parse(JSON.stringify(this[domain]));
 				this[domain].activeSincePrevTick = stats[domain].activeSincePrevTick;
 				this[domain].active = stats[domain].active;
 				this[domain].waiting = stats[domain].waiting;
@@ -152,6 +158,16 @@ export default defineComponent({
 				> div:first-child {
 					opacity: 0.7;
 				}
+
+				> div:last-child {
+					&.inc {
+						color: var(--warn);
+					}
+
+					&.dec {
+						color: var(--success);
+					}
+				}
 			}
 		}
 	}
-- 
cgit v1.2.3-freya


From 53c7077d1d78b535ab04a55ec5c508c1bab83034 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 20 Feb 2021 11:15:08 +0900
Subject: ChatUIで選択したタイムラインを記憶するように
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/ui/chat/index.vue   | 4 +++-
 src/client/ui/chat/store.ts    | 4 ++++
 src/client/ui/chat/widgets.vue | 3 ++-
 3 files changed, 9 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/client/ui/chat/index.vue b/src/client/ui/chat/index.vue
index 44f47447a7..1d455927a0 100644
--- a/src/client/ui/chat/index.vue
+++ b/src/client/ui/chat/index.vue
@@ -150,6 +150,7 @@ import { router } from '@/router';
 import { sidebarDef } from '@/sidebar';
 import { search } from '@/scripts/search';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
+import { store } from './store';
 
 export default defineComponent({
 	components: {
@@ -189,7 +190,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			tl: 'home',
+			tl: store.state.tl,
 			lists: null,
 			antennas: null,
 			followedChannels: null,
@@ -236,6 +237,7 @@ export default defineComponent({
 					this.currentChannel = channel;
 				});
 			}
+			store.set('tl', this.tl);
 		}, { immediate: true });
 	},
 
diff --git a/src/client/ui/chat/store.ts b/src/client/ui/chat/store.ts
index a869debd61..389d56afb6 100644
--- a/src/client/ui/chat/store.ts
+++ b/src/client/ui/chat/store.ts
@@ -10,4 +10,8 @@ export const store = markRaw(new Storage('chatUi', {
 			data: Record<string, any>;
 		}[]
 	},
+	tl: {
+		where: 'deviceAccount',
+		default: 'home'
+	},
 }));
diff --git a/src/client/ui/chat/widgets.vue b/src/client/ui/chat/widgets.vue
index 6becaa22e3..6b12f9dac9 100644
--- a/src/client/ui/chat/widgets.vue
+++ b/src/client/ui/chat/widgets.vue
@@ -10,7 +10,7 @@
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
 import XWidgets from '@/components/widgets.vue';
-import { store } from './store.ts';
+import { store } from './store';
 
 export default defineComponent({
 	components: {
@@ -34,6 +34,7 @@ export default defineComponent({
 		},
 
 		updateWidget({ id, data }) {
+			// TODO: throttleしたい
 			store.set('widgets', store.state.widgets.map(w => w.id === id ? {
 				...w,
 				data: data
-- 
cgit v1.2.3-freya


From 65fbca47f9831a2850c5c10e1f93520cc6f19203 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 20 Feb 2021 15:57:30 +0900
Subject: Improve widget performance

---
 src/client/widgets/define.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/client/widgets/define.ts b/src/client/widgets/define.ts
index b5498204b3..08a346d97c 100644
--- a/src/client/widgets/define.ts
+++ b/src/client/widgets/define.ts
@@ -1,4 +1,5 @@
 import { defineComponent } from 'vue';
+import { throttle } from 'throttle-debounce';
 import { Form } from '@/scripts/form';
 import * as os from '@/os';
 
@@ -21,7 +22,10 @@ export default function <T extends Form>(data: {
 
 		data() {
 			return {
-				props: this.widget ? JSON.parse(JSON.stringify(this.widget.data)) : {}
+				props: this.widget ? JSON.parse(JSON.stringify(this.widget.data)) : {},
+				save: throttle(3000, () => {
+					this.$emit('updateProps', this.props);
+				}),
 			};
 		},
 
@@ -66,10 +70,6 @@ export default function <T extends Form>(data: {
 
 				this.save();
 			},
-
-			save() {
-				this.$emit('updateProps', this.props);
-			}
 		}
 	});
 }
-- 
cgit v1.2.3-freya


From 8668bc2609e82f64984b8a347a207668e3e4765b Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 20 Feb 2021 16:16:19 +0900
Subject: 右クリックでリアクションピッカーを開くオプション
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                       | 1 +
 src/client/components/note-detailed.vue | 8 +++++++-
 src/client/components/note.vue          | 8 +++++++-
 src/client/components/ui/modal.vue      | 1 +
 src/client/pages/settings/general.vue   | 2 ++
 src/client/store.ts                     | 4 ++++
 src/client/ui/chat/note.vue             | 8 +++++++-
 7 files changed, 29 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 51a82a32b9..a927d108bb 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -705,6 +705,7 @@ apply: "適用"
 receiveAnnouncementFromInstance: "インスタンスからのお知らせを受け取る"
 emailNotification: "メール通知"
 inChannelSearch: "チャンネル内検索"
+useReactionPickerForContextMenu: "右クリックでリアクションピッカーを開く"
 
 _email:
   _follow:
diff --git a/src/client/components/note-detailed.vue b/src/client/components/note-detailed.vue
index 1108bd2c27..434dd56ba3 100644
--- a/src/client/components/note-detailed.vue
+++ b/src/client/components/note-detailed.vue
@@ -756,7 +756,13 @@ export default defineComponent({
 			};
 			if (isLink(e.target)) return;
 			if (window.getSelection().toString() !== '') return;
-			os.contextMenu(this.getMenu(), e).then(this.focus);
+
+			if (this.$store.state.useReactionPickerForContextMenu) {
+				e.preventDefault();
+				this.react();
+			} else {
+				os.contextMenu(this.getMenu(), e).then(this.focus);
+			}
 		},
 
 		menu(viaKeyboard = false) {
diff --git a/src/client/components/note.vue b/src/client/components/note.vue
index d532289857..24c374869d 100644
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -731,7 +731,13 @@ export default defineComponent({
 			};
 			if (isLink(e.target)) return;
 			if (window.getSelection().toString() !== '') return;
-			os.contextMenu(this.getMenu(), e).then(this.focus);
+
+			if (this.$store.state.useReactionPickerForContextMenu) {
+				e.preventDefault();
+				this.react();
+			} else {
+				os.contextMenu(this.getMenu(), e).then(this.focus);
+			}
 		},
 
 		menu(viaKeyboard = false) {
diff --git a/src/client/components/ui/modal.vue b/src/client/components/ui/modal.vue
index 69a83e002c..405fa4aaa5 100644
--- a/src/client/components/ui/modal.vue
+++ b/src/client/components/ui/modal.vue
@@ -70,6 +70,7 @@ export default defineComponent({
 			// TODO: ResizeObserver無くしたい
 			new ResizeObserver((entries, observer) => {
 				const rect = this.src.getBoundingClientRect();
+				
 				const width = popover.offsetWidth;
 				const height = popover.offsetHeight;
 
diff --git a/src/client/pages/settings/general.vue b/src/client/pages/settings/general.vue
index 0e741d474c..90ff3e2c20 100644
--- a/src/client/pages/settings/general.vue
+++ b/src/client/pages/settings/general.vue
@@ -19,6 +19,7 @@
 		<template #label>{{ $ts.behavior }}</template>
 		<FormSwitch v-model:value="imageNewTab">{{ $ts.openImageInNewTab }}</FormSwitch>
 		<FormSwitch v-model:value="enableInfiniteScroll">{{ $ts.enableInfiniteScroll }}</FormSwitch>
+		<FormSwitch v-model:value="useReactionPickerForContextMenu">{{ $ts.useReactionPickerForContextMenu }}</FormSwitch>
 		<FormSwitch v-model:value="disablePagesScript">{{ $ts.disablePagesScript }}</FormSwitch>
 	</FormGroup>
 
@@ -144,6 +145,7 @@ export default defineComponent({
 		chatOpenBehavior: ColdDeviceStorage.makeGetterSetter('chatOpenBehavior'),
 		instanceTicker: defaultStore.makeGetterSetter('instanceTicker'),
 		enableInfiniteScroll: defaultStore.makeGetterSetter('enableInfiniteScroll'),
+		useReactionPickerForContextMenu: defaultStore.makeGetterSetter('useReactionPickerForContextMenu'),
 	},
 
 	watch: {
diff --git a/src/client/store.ts b/src/client/store.ts
index bf042d8ab4..528e563fdd 100644
--- a/src/client/store.ts
+++ b/src/client/store.ts
@@ -144,6 +144,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: true
 	},
+	useReactionPickerForContextMenu: {
+		where: 'device',
+		default: true
+	},
 	showGapBetweenNotesInTimeline: {
 		where: 'device',
 		default: true
diff --git a/src/client/ui/chat/note.vue b/src/client/ui/chat/note.vue
index f4c9f063dc..4e4a303c36 100644
--- a/src/client/ui/chat/note.vue
+++ b/src/client/ui/chat/note.vue
@@ -741,7 +741,13 @@ export default defineComponent({
 			};
 			if (isLink(e.target)) return;
 			if (window.getSelection().toString() !== '') return;
-			os.contextMenu(this.getMenu(), e).then(this.focus);
+			
+			if (this.$store.state.useReactionPickerForContextMenu) {
+				e.preventDefault();
+				this.react();
+			} else {
+				os.contextMenu(this.getMenu(), e).then(this.focus);
+			}
 		},
 
 		menu(viaKeyboard = false) {
-- 
cgit v1.2.3-freya


From c39f69e5dd9ca9459f80dbcc6c7faadd8bc6e11e Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 20 Feb 2021 16:20:52 +0900
Subject: Chat UIでのチャンネル表示数調整
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/ui/chat/index.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/client/ui/chat/index.vue b/src/client/ui/chat/index.vue
index 1d455927a0..dd3c82d8ba 100644
--- a/src/client/ui/chat/index.vue
+++ b/src/client/ui/chat/index.vue
@@ -223,11 +223,12 @@ export default defineComponent({
 			this.antennas = antennas;
 		});
 
-		os.api('channels/followed').then(channels => {
+		os.api('channels/followed', { limit: 20 }).then(channels => {
 			this.followedChannels = channels;
 		});
 
-		os.api('channels/featured').then(channels => {
+		// TODO: pagination
+		os.api('channels/featured', { limit: 20 }).then(channels => {
 			this.featuredChannels = channels;
 		});
 
-- 
cgit v1.2.3-freya


From 5f1a6b6f64b9b8e0ac475b3d883ba408ab1bf583 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 20 Feb 2021 16:29:13 +0900
Subject: Improve usability

---
 src/client/pages/settings/email-address.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/pages/settings/email-address.vue b/src/client/pages/settings/email-address.vue
index 4aed9bf4c7..8ca0f119c5 100644
--- a/src/client/pages/settings/email-address.vue
+++ b/src/client/pages/settings/email-address.vue
@@ -60,7 +60,7 @@ export default defineComponent({
 				}
 			}).then(({ canceled, result: password }) => {
 				if (canceled) return;
-				os.api('i/update-email', {
+				os.apiWithDialog('i/update-email', {
 					password: password,
 					email: this.emailAddress,
 				});
-- 
cgit v1.2.3-freya


From 25d37302a8bfda954c7ede1e9d355db587c82228 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 20 Feb 2021 20:20:05 +0900
Subject: チャンネルで入力中ユーザーを表示するように、Chat
 UIでタイムラインでは投稿フォームを上に表示するように
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                                  |  1 +
 src/client/components/post-form.vue                |  8 +++
 src/client/ui/chat/date-separated-list.vue         |  2 +-
 src/client/ui/chat/index.vue                       | 23 +------
 src/client/ui/chat/note.vue                        |  2 +-
 src/client/ui/chat/post-form.vue                   |  8 +++
 src/client/ui/chat/timeline.vue                    | 76 ++++++++++++++++++----
 src/server/api/stream/channels/channel.ts          | 39 ++++++++++-
 .../api/stream/channels/games/reversi-game.ts      |  2 +-
 src/server/api/stream/index.ts                     | 17 +++--
 src/services/stream.ts                             |  6 ++
 11 files changed, 143 insertions(+), 41 deletions(-)

(limited to 'src')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index a927d108bb..e7057e3f89 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -706,6 +706,7 @@ receiveAnnouncementFromInstance: "インスタンスからのお知らせを受
 emailNotification: "メール通知"
 inChannelSearch: "チャンネル内検索"
 useReactionPickerForContextMenu: "右クリックでリアクションピッカーを開く"
+typingUsers: "{users}が入力中"
 
 _email:
   _follow:
diff --git a/src/client/components/post-form.vue b/src/client/components/post-form.vue
index fa9aeff8af..7849095ba8 100644
--- a/src/client/components/post-form.vue
+++ b/src/client/components/post-form.vue
@@ -70,6 +70,7 @@ import * as os from '@/os';
 import { selectFile } from '@/scripts/select-file';
 import { notePostInterruptors, postFormActions } from '@/store';
 import { isMobile } from '@/scripts/is-mobile';
+import { throttle } from 'throttle-debounce';
 
 export default defineComponent({
 	components: {
@@ -144,6 +145,11 @@ export default defineComponent({
 			quoteId: null,
 			recentHashtags: JSON.parse(localStorage.getItem('hashtags') || '[]'),
 			imeText: '',
+			typing: throttle(3000, () => {
+				if (this.channel) {
+					os.stream.send('typingOnChannel', { channel: this.channel.id });
+				}
+			}),
 			postFormActions,
 			faReply, faQuoteRight, faPaperPlane, faTimes, faUpload, faPollH, faGlobe, faHome, faUnlock, faEnvelope, faEyeSlash, faLaughSquint, faPlus, faPhotoVideo, faAt, faBiohazard, faPlug
 		};
@@ -434,10 +440,12 @@ export default defineComponent({
 		onKeydown(e: KeyboardEvent) {
 			if ((e.which === 10 || e.which === 13) && (e.ctrlKey || e.metaKey) && this.canPost) this.post();
 			if (e.which === 27) this.$emit('esc');
+			this.typing();
 		},
 
 		onCompositionUpdate(e: CompositionEvent) {
 			this.imeText = e.data;
+			this.typing();
 		},
 
 		onCompositionEnd(e: CompositionEvent) {
diff --git a/src/client/ui/chat/date-separated-list.vue b/src/client/ui/chat/date-separated-list.vue
index b209330656..65deb9e1c2 100644
--- a/src/client/ui/chat/date-separated-list.vue
+++ b/src/client/ui/chat/date-separated-list.vue
@@ -32,7 +32,7 @@ export default defineComponent({
 			});
 		}
 
-		return h(TransitionGroup, {
+		return h(this.reversed ? 'div' : TransitionGroup, {
 			class: 'hmjzthxl',
 			name: this.reversed ? 'list-reversed' : 'list',
 			tag: 'div',
diff --git a/src/client/ui/chat/index.vue b/src/client/ui/chat/index.vue
index dd3c82d8ba..0ee32833a8 100644
--- a/src/client/ui/chat/index.vue
+++ b/src/client/ui/chat/index.vue
@@ -114,14 +114,9 @@
 				</button>
 			</div>
 		</header>
-		<div class="body">
-			<XTimeline v-if="tl.startsWith('channel:')" src="channel" :key="tl" :channel="tl.replace('channel:', '')"/>
-			<XTimeline v-else :src="tl" :key="tl"/>
-		</div>
-		<footer class="footer">
-			<XPostForm v-if="tl.startsWith('channel:')" :key="tl" :channel="tl.replace('channel:', '')"/>
-			<XPostForm v-else/>
-		</footer>
+
+		<XTimeline class="body" v-if="tl.startsWith('channel:')" src="channel" :key="tl" :channel="tl.replace('channel:', '')"/>
+		<XTimeline class="body" v-else :src="tl" :key="tl"/>
 	</main>
 
 	<XSide class="side" ref="side" @open="sideViewOpening = true" @close="sideViewOpening = false"/>
@@ -143,7 +138,6 @@ import XWidgets from './widgets.vue';
 import XCommon from '../_common_/common.vue';
 import XSide from './side.vue';
 import XTimeline from './timeline.vue';
-import XPostForm from './post-form.vue';
 import XHeaderClock from './header-clock.vue';
 import * as os from '@/os';
 import { router } from '@/router';
@@ -159,7 +153,6 @@ export default defineComponent({
 		XWidgets,
 		XSide, // NOTE: dynamic importするとAsyncComponentWrapperが間に入るせいでref取得できなくて面倒になる
 		XTimeline,
-		XPostForm,
 		XHeaderClock,
 	},
 
@@ -584,16 +577,6 @@ export default defineComponent({
 				}
 			}
 		}
-
-		> .footer {
-			padding: 0 16px 16px 16px;
-		}
-
-		> .body {
-			flex: 1;
-			min-width: 0;
-			overflow: auto;
-		}
 	}
 
 	> .side {
diff --git a/src/client/ui/chat/note.vue b/src/client/ui/chat/note.vue
index 4e4a303c36..315f5c91e3 100644
--- a/src/client/ui/chat/note.vue
+++ b/src/client/ui/chat/note.vue
@@ -1010,7 +1010,7 @@ export default defineComponent({
 			flex-shrink: 0;
 			display: block;
 			position: sticky;
-			top: 12px;
+			top: 0;
 			margin: 0 14px 0 0;
 			width: 46px;
 			height: 46px;
diff --git a/src/client/ui/chat/post-form.vue b/src/client/ui/chat/post-form.vue
index 38fe48cc62..b0a31b097d 100644
--- a/src/client/ui/chat/post-form.vue
+++ b/src/client/ui/chat/post-form.vue
@@ -65,6 +65,7 @@ import * as os from '@/os';
 import { selectFile } from '@/scripts/select-file';
 import { notePostInterruptors, postFormActions } from '@/store';
 import { isMobile } from '@/scripts/is-mobile';
+import { throttle } from 'throttle-debounce';
 
 export default defineComponent({
 	components: {
@@ -131,6 +132,11 @@ export default defineComponent({
 			quoteId: null,
 			recentHashtags: JSON.parse(localStorage.getItem('hashtags') || '[]'),
 			imeText: '',
+			typing: throttle(3000, () => {
+				if (this.channel) {
+					os.stream.send('typingOnChannel', { channel: this.channel });
+				}
+			}),
 			postFormActions,
 			faReply, faQuoteRight, faPaperPlane, faTimes, faUpload, faPollH, faGlobe, faHome, faUnlock, faEnvelope, faEyeSlash, faLaughSquint, faPlus, faPhotoVideo, faAt, faBiohazard, faPlug
 		};
@@ -421,10 +427,12 @@ export default defineComponent({
 		onKeydown(e: KeyboardEvent) {
 			if ((e.which === 10 || e.which === 13) && (e.ctrlKey || e.metaKey) && this.canPost) this.post();
 			if (e.which === 27) this.$emit('esc');
+			this.typing();
 		},
 
 		onCompositionUpdate(e: CompositionEvent) {
 			this.imeText = e.data;
+			this.typing();
 		},
 
 		onCompositionEnd(e: CompositionEvent) {
diff --git a/src/client/ui/chat/timeline.vue b/src/client/ui/chat/timeline.vue
index f96a48a776..12cb7af7d2 100644
--- a/src/client/ui/chat/timeline.vue
+++ b/src/client/ui/chat/timeline.vue
@@ -1,8 +1,22 @@
 <template>
-<div class="dbiokgaf">
+<div class="dbiokgaf top" v-if="['home', 'local', 'social', 'global'].includes(src)">
+	<XPostForm/>
+</div>
+<div class="dbiokgaf tl" ref="body">
 	<div class="new" v-if="queue > 0" :style="{ width: width + 'px', [pagination.reversed ? 'bottom' : 'top']: pagination.reversed ? bottom + 'px' : top + 'px' }"><button class="_buttonPrimary" @click="goTop()">{{ $ts.newNoteRecived }}</button></div>
 	<XNotes class="tl" ref="tl" :pagination="pagination" @queue="queueUpdated" v-follow="pagination.reversed"/>
 </div>
+<div class="dbiokgaf bottom" v-if="src === 'channel'">
+	<div class="typers" v-if="typers.length > 0">
+		<I18n :src="$ts.typingUsers" text-tag="span" class="users">
+			<template #users>
+				<b v-for="user in typers" :key="user.id" class="user">{{ user.username }}</b>
+			</template>
+		</I18n>
+		<MkEllipsis/>
+	</div>
+	<XPostForm :channel="channel"/>
+</div>
 </template>
 
 <script lang="ts">
@@ -12,10 +26,12 @@ import * as os from '@/os';
 import * as sound from '@/scripts/sound';
 import { scrollToBottom, getScrollPosition, getScrollContainer } from '@/scripts/scroll';
 import follow from '@/directives/follow-append';
+import XPostForm from './post-form.vue';
 
 export default defineComponent({
 	components: {
-		XNotes
+		XNotes,
+		XPostForm,
 	},
 
 	directives: {
@@ -69,6 +85,7 @@ export default defineComponent({
 			width: 0,
 			top: 0,
 			bottom: 0,
+			typers: [],
 		};
 	},
 
@@ -166,6 +183,9 @@ export default defineComponent({
 				channelId: this.channel
 			});
 			this.connection.on('note', prepend);
+			this.connection.on('typers', typers => {
+				this.typers = this.$i ? typers.filter(u => u.id !== this.$i.id) : typers;
+			});
 		}
 
 		this.pagination = {
@@ -190,21 +210,21 @@ export default defineComponent({
 
 	methods: {
 		focus() {
-			this.$refs.tl.focus();
+			this.$refs.body.focus();
 		},
 
 		goTop() {
-			const container = getScrollContainer(this.$el);
+			const container = getScrollContainer(this.$refs.body);
 			container.scrollTop = 0;
 		},
 
 		queueUpdated(q) {
-			if (this.$el.offsetWidth !== 0) {
-				const rect = this.$el.getBoundingClientRect();
-				const scrollTop = getScrollPosition(this.$el);
-				this.width = this.$el.offsetWidth;
+			if (this.$refs.body.offsetWidth !== 0) {
+				const rect = this.$refs.body.getBoundingClientRect();
+				const scrollTop = getScrollPosition(this.$refs.body);
+				this.width = this.$refs.body.offsetWidth;
 				this.top = rect.top + scrollTop;
-				this.bottom = this.$el.offsetHeight;
+				this.bottom = this.$refs.body.offsetHeight;
 			}
 			this.queue = q;
 		},
@@ -213,11 +233,41 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.dbiokgaf {
-	padding: 16px 0;
+.dbiokgaf.top {
+	padding: 16px 16px 0 16px;
+}
+
+.dbiokgaf.bottom {
+	padding: 0 16px 16px 16px;
+	position: relative;
 
-	// TODO: これはノート追加アニメーションによるスクロール発生を抑えるために必要だが、position stickyが効かなくなるので、両者を両立させる良い方法を考える
-	overflow: hidden;
+	> .typers {
+		position: absolute;
+		bottom: 100%;
+		padding: 0 8px 0 8px;
+		font-size: 0.9em;
+		background: var(--panel);
+		border-radius: 0 8px 0 0;
+		color: var(--fgTransparentWeak);
+
+		> .users {
+			> .user + .user:before {
+				content: ", ";
+				font-weight: normal;
+			}
+
+			> .user:last-of-type:after {
+				content: " ";
+			}
+		}
+	}
+}
+
+.dbiokgaf.tl {
+	padding: 16px 0;
+	flex: 1;
+	min-width: 0;
+	overflow: auto;
 
 	> .new {
 		position: fixed;
diff --git a/src/server/api/stream/channels/channel.ts b/src/server/api/stream/channels/channel.ts
index c24b3db937..aa570d1ef4 100644
--- a/src/server/api/stream/channels/channel.ts
+++ b/src/server/api/stream/channels/channel.ts
@@ -1,14 +1,17 @@
 import autobind from 'autobind-decorator';
 import Channel from '../channel';
-import { Notes } from '../../../../models';
+import { Notes, Users } from '../../../../models';
 import { isMutedUserRelated } from '../../../../misc/is-muted-user-related';
 import { PackedNote } from '../../../../models/repositories/note';
+import { User } from '../../../../models/entities/user';
 
 export default class extends Channel {
 	public readonly chName = 'channel';
 	public static shouldShare = false;
 	public static requireCredential = false;
 	private channelId: string;
+	private typers: Record<User['id'], Date> = {};
+	private emitTypersIntervalId: ReturnType<typeof setInterval>;
 
 	@autobind
 	public async init(params: any) {
@@ -16,6 +19,8 @@ export default class extends Channel {
 
 		// Subscribe stream
 		this.subscriber.on('notesStream', this.onNote);
+		this.subscriber.on(`channelStream:${this.channelId}`, this.onEvent);
+		this.emitTypersIntervalId = setInterval(this.emitTypers, 5000);
 	}
 
 	@autobind
@@ -41,9 +46,41 @@ export default class extends Channel {
 		this.send('note', note);
 	}
 
+	@autobind
+	private onEvent(data: any) {
+		if (data.type === 'typing') {
+			const id = data.body;
+			const begin = this.typers[id] == null;
+			this.typers[id] = new Date();
+			if (begin) {
+				this.emitTypers();
+			}
+		}
+	}
+
+	@autobind
+	private async emitTypers() {
+		const now = new Date();
+
+		// Remove not typing users
+		for (const [userId, date] of Object.entries(this.typers)) {
+			if (now.getTime() - date.getTime() > 5000) delete this.typers[userId];
+		}
+
+		const users = await Users.packMany(Object.keys(this.typers), null, { detail: false });
+
+		this.send({
+			type: 'typers',
+			body: users,
+		});
+	}
+
 	@autobind
 	public dispose() {
 		// Unsubscribe events
 		this.subscriber.off('notesStream', this.onNote);
+		this.subscriber.off(`channelStream:${this.channelId}`, this.onEvent);
+
+		clearInterval(this.emitTypersIntervalId);
 	}
 }
diff --git a/src/server/api/stream/channels/games/reversi-game.ts b/src/server/api/stream/channels/games/reversi-game.ts
index ea62ab1e88..e1c2116ac6 100644
--- a/src/server/api/stream/channels/games/reversi-game.ts
+++ b/src/server/api/stream/channels/games/reversi-game.ts
@@ -15,7 +15,7 @@ export default class extends Channel {
 
 	private gameId: ReversiGame['id'] | null = null;
 	private watchers: Record<User['id'], Date> = {};
-	private emitWatchersIntervalId: any;
+	private emitWatchersIntervalId: ReturnType<typeof setInterval>;
 
 	@autobind
 	public async init(params: any) {
diff --git a/src/server/api/stream/index.ts b/src/server/api/stream/index.ts
index 5b975d07db..b04bed0c06 100644
--- a/src/server/api/stream/index.ts
+++ b/src/server/api/stream/index.ts
@@ -12,6 +12,7 @@ import { Users, Followings, Mutings, UserProfiles, ChannelFollowings } from '../
 import { ApiError } from '../error';
 import { AccessToken } from '../../../models/entities/access-token';
 import { UserProfile } from '../../../models/entities/user-profile';
+import { publishChannelStream } from '../../../services/stream';
 
 /**
  * Main stream connection
@@ -27,10 +28,10 @@ export default class Connection {
 	public subscriber: EventEmitter;
 	private channels: Channel[] = [];
 	private subscribingNotes: any = {};
-	private followingClock: NodeJS.Timer;
-	private mutingClock: NodeJS.Timer;
-	private followingChannelsClock: NodeJS.Timer;
-	private userProfileClock: NodeJS.Timer;
+	private followingClock: ReturnType<typeof setInterval>;
+	private mutingClock: ReturnType<typeof setInterval>;
+	private followingChannelsClock: ReturnType<typeof setInterval>;
+	private userProfileClock: ReturnType<typeof setInterval>;
 
 	constructor(
 		wsConnection: websocket.connection,
@@ -93,6 +94,7 @@ export default class Connection {
 			case 'disconnect': this.onChannelDisconnectRequested(body); break;
 			case 'channel': this.onChannelMessageRequested(body); break;
 			case 'ch': this.onChannelMessageRequested(body); break; // alias
+			case 'typingOnChannel': this.typingOnChannel(body.channel); break;
 		}
 	}
 
@@ -258,6 +260,13 @@ export default class Connection {
 		}
 	}
 
+	@autobind
+	private typingOnChannel(channel: ChannelModel['id']) {
+		if (this.user) {
+			publishChannelStream(channel, 'typing', this.user.id);
+		}
+	}
+
 	@autobind
 	private async updateFollowing() {
 		const followings = await Followings.find({
diff --git a/src/services/stream.ts b/src/services/stream.ts
index ec43c6ff2c..d833d700fe 100644
--- a/src/services/stream.ts
+++ b/src/services/stream.ts
@@ -6,6 +6,7 @@ import { ReversiGame } from '../models/entities/games/reversi/game';
 import { UserGroup } from '../models/entities/user-group';
 import config from '../config';
 import { Antenna } from '../models/entities/antenna';
+import { Channel } from '../models/entities/channel';
 
 class Publisher {
 	private publish = (channel: string, type: string | null, value?: any): void => {
@@ -38,6 +39,10 @@ class Publisher {
 		});
 	}
 
+	public publishChannelStream = (channelId: Channel['id'], type: string, value?: any): void => {
+		this.publish(`channelStream:${channelId}`, type, typeof value === 'undefined' ? null : value);
+	}
+
 	public publishUserListStream = (listId: UserList['id'], type: string, value?: any): void => {
 		this.publish(`userListStream:${listId}`, type, typeof value === 'undefined' ? null : value);
 	}
@@ -84,6 +89,7 @@ export const publishMainStream = publisher.publishMainStream;
 export const publishDriveStream = publisher.publishDriveStream;
 export const publishNoteStream = publisher.publishNoteStream;
 export const publishNotesStream = publisher.publishNotesStream;
+export const publishChannelStream = publisher.publishChannelStream;
 export const publishUserListStream = publisher.publishUserListStream;
 export const publishAntennaStream = publisher.publishAntennaStream;
 export const publishMessagingStream = publisher.publishMessagingStream;
-- 
cgit v1.2.3-freya


From 9860489f88e04722202d0596e1a7304edb4cb82b Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 20 Feb 2021 21:02:59 +0900
Subject: Fix style

---
 src/client/components/notes.vue | 11 ++++++-----
 src/client/ui/chat/notes.vue    | 11 ++++++-----
 src/client/ui/chat/timeline.vue |  4 ++--
 3 files changed, 14 insertions(+), 12 deletions(-)

(limited to 'src')

diff --git a/src/client/components/notes.vue b/src/client/components/notes.vue
index bd6d5bb4f5..ebb87622af 100644
--- a/src/client/components/notes.vue
+++ b/src/client/components/notes.vue
@@ -8,10 +8,10 @@
 	<MkError v-if="error" @retry="init()"/>
 
 	<div v-show="more && reversed" style="margin-bottom: var(--margin);">
-		<button class="_buttonPrimary" @click="fetchMoreFeature" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+		<MkButton class="_buttonPrimary" style="margin: 0 auto;" @click="fetchMoreFeature" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 			<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
 			<template v-if="moreFetching"><MkLoading inline/></template>
-		</button>
+		</MkButton>
 	</div>
 
 	<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed">
@@ -19,10 +19,10 @@
 	</XList>
 
 	<div v-show="more && !reversed" style="margin-top: var(--margin);">
-		<button class="_buttonPrimary" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+		<MkButton class="_buttonPrimary" style="margin: 0 auto;" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 			<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
 			<template v-if="moreFetching"><MkLoading inline/></template>
-		</button>
+		</MkButton>
 	</div>
 </div>
 </template>
@@ -32,10 +32,11 @@ import { defineComponent } from 'vue';
 import paging from '@/scripts/paging';
 import XNote from './note.vue';
 import XList from './date-separated-list.vue';
+import MkButton from '@/components/ui/button.vue';
 
 export default defineComponent({
 	components: {
-		XNote, XList,
+		XNote, XList, MkButton,
 	},
 
 	mixins: [
diff --git a/src/client/ui/chat/notes.vue b/src/client/ui/chat/notes.vue
index 1fa2870cee..774b8e4aa3 100644
--- a/src/client/ui/chat/notes.vue
+++ b/src/client/ui/chat/notes.vue
@@ -8,10 +8,10 @@
 	<MkError v-if="error" @retry="init()"/>
 
 	<div v-show="more && reversed" style="margin-bottom: var(--margin);">
-		<button class="_buttonPrimary" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+		<MkButton class="_buttonPrimary" style="margin: 0 auto;" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 			<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
 			<template v-if="moreFetching"><MkLoading inline/></template>
-		</button>
+		</MkButton>
 	</div>
 
 	<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed">
@@ -19,10 +19,10 @@
 	</XList>
 
 	<div v-show="more && !reversed" style="margin-top: var(--margin);">
-		<button class="_buttonPrimary" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+		<MkButton class="_buttonPrimary" style="margin: 0 auto;" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 			<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
 			<template v-if="moreFetching"><MkLoading inline/></template>
-		</button>
+		</MkButton>
 	</div>
 </div>
 </template>
@@ -32,10 +32,11 @@ import { defineComponent } from 'vue';
 import paging from '@/scripts/paging';
 import XNote from './note.vue';
 import XList from './date-separated-list.vue';
+import MkButton from '@/components/ui/button.vue';
 
 export default defineComponent({
 	components: {
-		XNote, XList,
+		XNote, XList, MkButton,
 	},
 
 	mixins: [
diff --git a/src/client/ui/chat/timeline.vue b/src/client/ui/chat/timeline.vue
index 12cb7af7d2..2a74584e65 100644
--- a/src/client/ui/chat/timeline.vue
+++ b/src/client/ui/chat/timeline.vue
@@ -221,9 +221,8 @@ export default defineComponent({
 		queueUpdated(q) {
 			if (this.$refs.body.offsetWidth !== 0) {
 				const rect = this.$refs.body.getBoundingClientRect();
-				const scrollTop = getScrollPosition(this.$refs.body);
 				this.width = this.$refs.body.offsetWidth;
-				this.top = rect.top + scrollTop;
+				this.top = rect.top;
 				this.bottom = this.$refs.body.offsetHeight;
 			}
 			this.queue = q;
@@ -264,6 +263,7 @@ export default defineComponent({
 }
 
 .dbiokgaf.tl {
+	position: relative;
 	padding: 16px 0;
 	flex: 1;
 	min-width: 0;
-- 
cgit v1.2.3-freya


From 0d1158335f61e51feff5da41ad24e858ca2c5156 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 20 Feb 2021 21:06:26 +0900
Subject: Chat UIでサウンドがならない問題を修正
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/ui/chat/timeline.vue | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/client/ui/chat/timeline.vue b/src/client/ui/chat/timeline.vue
index 2a74584e65..2f0e571ef0 100644
--- a/src/client/ui/chat/timeline.vue
+++ b/src/client/ui/chat/timeline.vue
@@ -61,11 +61,6 @@ export default defineComponent({
 			type: String,
 			required: false
 		},
-		sound: {
-			type: Boolean,
-			required: false,
-			default: false,
-		}
 	},
 
 	emits: ['note', 'queue', 'before', 'after'],
@@ -95,9 +90,7 @@ export default defineComponent({
 
 			this.$emit('note');
 
-			if (this.sound) {
-				sound.play(note.userId === this.$i.id ? 'noteMy' : 'note');
-			}
+			sound.play(note.userId === this.$i.id ? 'noteMy' : 'note');
 		};
 
 		const onUserAdded = () => {
-- 
cgit v1.2.3-freya


From de98718923129db45c24d81e6e19bebbb1cfe7cb Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 20 Feb 2021 21:48:28 +0900
Subject: Clean up

---
 src/client/ui/chat/notes.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/ui/chat/notes.vue b/src/client/ui/chat/notes.vue
index 774b8e4aa3..fb9f8fe260 100644
--- a/src/client/ui/chat/notes.vue
+++ b/src/client/ui/chat/notes.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="" :ref="mounted">
+<div class="">
 	<div class="_fullinfo" v-if="empty">
 		<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
 		<div>{{ $ts.noNotes }}</div>
-- 
cgit v1.2.3-freya


From b0757129d536bd613955cb847d986a1149cfa86d Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 20 Feb 2021 21:50:58 +0900
Subject: Tweak UI

---
 src/client/ui/chat/index.vue | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'src')

diff --git a/src/client/ui/chat/index.vue b/src/client/ui/chat/index.vue
index 0ee32833a8..bd0fd324fa 100644
--- a/src/client/ui/chat/index.vue
+++ b/src/client/ui/chat/index.vue
@@ -466,6 +466,9 @@ export default defineComponent({
 						display: block;
 						padding: 6px 8px;
 						border-radius: 4px;
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
 
 						&:hover {
 							text-decoration: none;
-- 
cgit v1.2.3-freya


From f3aef8df756668847461a40110b44955090cb987 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 20 Feb 2021 22:28:53 +0900
Subject: タイムラインを特定の日付にジャンプする機能
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                             |  3 +++
 src/client/ui/chat/index.vue                  | 23 +++++++++++++++++++----
 src/client/ui/chat/timeline.vue               | 17 ++++++++++++++++-
 src/server/api/endpoints/channels/timeline.ts |  2 +-
 4 files changed, 39 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index e7057e3f89..e5700fe059 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -707,6 +707,9 @@ emailNotification: "メール通知"
 inChannelSearch: "チャンネル内検索"
 useReactionPickerForContextMenu: "右クリックでリアクションピッカーを開く"
 typingUsers: "{users}が入力中"
+jumpToSpecifiedDate: "特定の日付にジャンプ"
+showingPastTimeline: "過去のタイムラインを表示しています"
+clear: "クリア"
 
 _email:
   _follow:
diff --git a/src/client/ui/chat/index.vue b/src/client/ui/chat/index.vue
index bd0fd324fa..26c81a1aa9 100644
--- a/src/client/ui/chat/index.vue
+++ b/src/client/ui/chat/index.vue
@@ -99,6 +99,9 @@
 			<div class="right">
 				<div class="instance">{{ instanceName }}</div>
 				<XHeaderClock class="clock"/>
+				<button class="_button button timetravel" @click="timetravel" v-tooltip="$ts.jumpToSpecifiedDate">
+					<Fa :icon="faCalendarAlt"/>
+				</button>
 				<button class="_button button search" v-if="tl.startsWith('channel:') && currentChannel" @click="inChannelSearch" v-tooltip="$ts.inChannelSearch">
 					<Fa :icon="faSearch"/>
 				</button>
@@ -115,8 +118,8 @@
 			</div>
 		</header>
 
-		<XTimeline class="body" v-if="tl.startsWith('channel:')" src="channel" :key="tl" :channel="tl.replace('channel:', '')"/>
-		<XTimeline class="body" v-else :src="tl" :key="tl"/>
+		<XTimeline class="body" ref="tl" v-if="tl.startsWith('channel:')" src="channel" :key="tl" :channel="tl.replace('channel:', '')"/>
+		<XTimeline class="body" ref="tl" v-else :src="tl" :key="tl"/>
 	</main>
 
 	<XSide class="side" ref="side" @open="sideViewOpening = true" @close="sideViewOpening = false"/>
@@ -131,7 +134,7 @@
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
 import { faLayerGroup, faBars, faHome, faCircle, faWindowMaximize, faColumns, faPencilAlt, faShareAlt, faSatelliteDish, faListUl, faSatellite, faCog, faSearch, faPlus, faStar, faAt, faLink, faEllipsisH, faGlobe } from '@fortawesome/free-solid-svg-icons';
-import { faBell, faStar as farStar, faEnvelope, faComments } from '@fortawesome/free-regular-svg-icons';
+import { faBell, faStar as farStar, faEnvelope, faComments, faCalendarAlt } from '@fortawesome/free-regular-svg-icons';
 import { instanceName, url } from '@/config';
 import XSidebar from '@/components/sidebar.vue';
 import XWidgets from './widgets.vue';
@@ -192,7 +195,7 @@ export default defineComponent({
 			menuDef: sidebarDef,
 			sideViewOpening: false,
 			instanceName,
-			faLayerGroup, faBars, faBell, faHome, faCircle, faPencilAlt, faShareAlt, faSatelliteDish, faListUl, faSatellite, faCog, faSearch, faPlus, faStar, farStar, faAt, faLink, faEllipsisH, faGlobe, faComments, faEnvelope,
+			faLayerGroup, faBars, faBell, faHome, faCircle, faPencilAlt, faShareAlt, faSatelliteDish, faListUl, faSatellite, faCog, faSearch, faPlus, faStar, farStar, faAt, faLink, faEllipsisH, faGlobe, faComments, faEnvelope, faCalendarAlt,
 		};
 	},
 
@@ -244,6 +247,18 @@ export default defineComponent({
 			os.post();
 		},
 
+		async timetravel() {
+			const { canceled, result: date } = await os.dialog({
+				title: this.$ts.date,
+				input: {
+					type: 'date'
+				}
+			});
+			if (canceled) return;
+
+			this.$refs.tl.timetravel(new Date(date));
+		},
+
 		search() {
 			search();
 		},
diff --git a/src/client/ui/chat/timeline.vue b/src/client/ui/chat/timeline.vue
index 2f0e571ef0..232e749c1c 100644
--- a/src/client/ui/chat/timeline.vue
+++ b/src/client/ui/chat/timeline.vue
@@ -1,4 +1,7 @@
 <template>
+<div class="dbiokgaf info" v-if="date">
+	<MkInfo>{{ $ts.showingPastTimeline }} <button class="_textButton clear" @click="timetravel()">{{ $ts.clear }}</button></MkInfo>
+</div>
 <div class="dbiokgaf top" v-if="['home', 'local', 'social', 'global'].includes(src)">
 	<XPostForm/>
 </div>
@@ -27,11 +30,13 @@ import * as sound from '@/scripts/sound';
 import { scrollToBottom, getScrollPosition, getScrollContainer } from '@/scripts/scroll';
 import follow from '@/directives/follow-append';
 import XPostForm from './post-form.vue';
+import MkInfo from '@/components/ui/info.vue';
 
 export default defineComponent({
 	components: {
 		XNotes,
 		XPostForm,
+		MkInfo,
 	},
 
 	directives: {
@@ -81,6 +86,7 @@ export default defineComponent({
 			top: 0,
 			bottom: 0,
 			typers: [],
+			date: null
 		};
 	},
 
@@ -186,7 +192,7 @@ export default defineComponent({
 			reversed,
 			limit: 10,
 			params: init => ({
-				untilDate: init ? undefined : (this.date ? this.date.getTime() : undefined),
+				untilDate: this.date?.getTime(),
 				...this.baseQuery, ...this.query
 			})
 		};
@@ -220,11 +226,20 @@ export default defineComponent({
 			}
 			this.queue = q;
 		},
+
+		timetravel(date?: Date) {
+			this.date = date;
+			this.$refs.tl.reload();
+		}
 	}
 });
 </script>
 
 <style lang="scss" scoped>
+.dbiokgaf.info{
+	padding: 16px 16px 0 16px;
+}
+
 .dbiokgaf.top {
 	padding: 16px 16px 0 16px;
 }
diff --git a/src/server/api/endpoints/channels/timeline.ts b/src/server/api/endpoints/channels/timeline.ts
index 3ae28fc67a..acb34f124d 100644
--- a/src/server/api/endpoints/channels/timeline.ts
+++ b/src/server/api/endpoints/channels/timeline.ts
@@ -85,7 +85,7 @@ export default define(meta, async (ps, user) => {
 	}
 
 	//#region Construct query
-	const query = makePaginationQuery(Notes.createQueryBuilder('note'), ps.sinceId, ps.untilId)
+	const query = makePaginationQuery(Notes.createQueryBuilder('note'), ps.sinceId, ps.untilId, ps.sinceDate, ps.untilDate)
 		.andWhere('note.channelId = :channelId', { channelId: channel.id })
 		.leftJoinAndSelect('note.user', 'user')
 		.leftJoinAndSelect('note.channel', 'channel');
-- 
cgit v1.2.3-freya


From 78a963fe334caae564424c6458a8565da957c8be Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 21 Feb 2021 12:26:49 +0900
Subject: Messagingの入力中インジケータを実装
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/pages/messaging/messaging-room.form.vue | 10 +++++
 src/client/pages/messaging/messaging-room.vue      | 32 +++++++++++++++
 src/server/api/stream/channels/messaging.ts        | 47 ++++++++++++++++++++--
 src/server/api/stream/index.ts                     | 19 ++++++++-
 4 files changed, 104 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/client/pages/messaging/messaging-room.form.vue b/src/client/pages/messaging/messaging-room.form.vue
index e561cb3db5..258300dc52 100644
--- a/src/client/pages/messaging/messaging-room.form.vue
+++ b/src/client/pages/messaging/messaging-room.form.vue
@@ -7,6 +7,7 @@
 		v-model="text"
 		ref="text"
 		@keypress="onKeypress"
+		@compositionupdate="onCompositionUpdate"
 		@paste="onPaste"
 		:placeholder="$ts.inputMessageHere"
 	></textarea>
@@ -29,6 +30,7 @@ import { formatTimeString } from '../../../misc/format-time-string';
 import { selectFile } from '@/scripts/select-file';
 import * as os from '@/os';
 import { Autocomplete } from '@/scripts/autocomplete';
+import { throttle } from 'throttle-debounce';
 
 export default defineComponent({
 	props: {
@@ -46,6 +48,9 @@ export default defineComponent({
 			text: null,
 			file: null,
 			sending: false,
+			typing: throttle(3000, () => {
+				os.stream.send('typingOnMessaging', this.user ? { partner: this.user.id } : { group: this.group.id });
+			}),
 			faPaperPlane, faPhotoVideo, faLaughSquint
 		};
 	},
@@ -147,11 +152,16 @@ export default defineComponent({
 		},
 
 		onKeypress(e) {
+			this.typing();
 			if ((e.which == 10 || e.which == 13) && (e.ctrlKey || e.metaKey) && this.canSend) {
 				this.send();
 			}
 		},
 
+		onCompositionUpdate() {
+			this.typing();
+		},
+
 		chooseFile(e) {
 			selectFile(e.currentTarget || e.target, this.$ts.selectFile, false).then(file => {
 				this.file = file;
diff --git a/src/client/pages/messaging/messaging-room.vue b/src/client/pages/messaging/messaging-room.vue
index 7fdd0a201b..3921a081d1 100644
--- a/src/client/pages/messaging/messaging-room.vue
+++ b/src/client/pages/messaging/messaging-room.vue
@@ -16,6 +16,14 @@
 			</XList>
 		</div>
 		<footer>
+			<div class="typers" v-if="typers.length > 0">
+				<I18n :src="$ts.typingUsers" text-tag="span" class="users">
+					<template #users>
+						<b v-for="user in typers" :key="user.id" class="user">{{ user.username }}</b>
+					</template>
+				</I18n>
+				<MkEllipsis/>
+			</div>
 			<transition name="fade">
 				<div class="new-message" v-show="showIndicator">
 					<button class="_buttonPrimary" @click="onIndicatorClick"><i><Fa :icon="faArrowCircleDown"/></i>{{ $ts.newMessageExists }}</button>
@@ -86,6 +94,7 @@ const Component = defineComponent({
 			connection: null,
 			showIndicator: false,
 			timer: null,
+			typers: [],
 			ilObserver: new IntersectionObserver(
 				(entries) => entries.some((entry) => entry.isIntersecting)
 					&& !this.fetching
@@ -142,6 +151,9 @@ const Component = defineComponent({
 			this.connection.on('message', this.onMessage);
 			this.connection.on('read', this.onRead);
 			this.connection.on('deleted', this.onDeleted);
+			this.connection.on('typers', typers => {
+				this.typers = typers.filter(u => u.id !== this.$i.id);
+			});
 
 			document.addEventListener('visibilitychange', this.onVisibilitychange);
 
@@ -397,6 +409,7 @@ export default Component;
 
 	> footer {
 		width: 100%;
+		position: relative;
 
 		> .new-message {
 			position: absolute;
@@ -422,6 +435,25 @@ export default Component;
 				}
 			}
 		}
+
+		> .typers {
+			position: absolute;
+			bottom: 100%;
+			padding: 0 8px 0 8px;
+			font-size: 0.9em;
+			color: var(--fgTransparentWeak);
+
+			> .users {
+				> .user + .user:before {
+					content: ", ";
+					font-weight: normal;
+				}
+
+				> .user:last-of-type:after {
+					content: " ";
+				}
+			}
+		}
 	}
 }
 
diff --git a/src/server/api/stream/channels/messaging.ts b/src/server/api/stream/channels/messaging.ts
index 8456871e6a..7279da3ece 100644
--- a/src/server/api/stream/channels/messaging.ts
+++ b/src/server/api/stream/channels/messaging.ts
@@ -12,6 +12,9 @@ export default class extends Channel {
 	private otherpartyId: string | null;
 	private otherparty?: User;
 	private groupId: string | null;
+	private subCh: string;
+	private typers: Record<User['id'], Date> = {};
+	private emitTypersIntervalId: ReturnType<typeof setInterval>;
 
 	@autobind
 	public async init(params: any) {
@@ -31,14 +34,28 @@ export default class extends Channel {
 			}
 		}
 
-		const subCh = this.otherpartyId
+		this.emitTypersIntervalId = setInterval(this.emitTypers, 5000);
+
+		this.subCh = this.otherpartyId
 			? `messagingStream:${this.user!.id}-${this.otherpartyId}`
 			: `messagingStream:${this.groupId}`;
 
 		// Subscribe messaging stream
-		this.subscriber.on(subCh, data => {
+		this.subscriber.on(this.subCh, this.onEvent);
+	}
+
+	@autobind
+	private onEvent(data: any) {
+		if (data.type === 'typing') {
+			const id = data.body;
+			const begin = this.typers[id] == null;
+			this.typers[id] = new Date();
+			if (begin) {
+				this.emitTypers();
+			}
+		} else {
 			this.send(data);
-		});
+		}
 	}
 
 	@autobind
@@ -60,4 +77,28 @@ export default class extends Channel {
 				break;
 		}
 	}
+
+	@autobind
+	private async emitTypers() {
+		const now = new Date();
+
+		// Remove not typing users
+		for (const [userId, date] of Object.entries(this.typers)) {
+			if (now.getTime() - date.getTime() > 5000) delete this.typers[userId];
+		}
+
+		const users = await Users.packMany(Object.keys(this.typers), null, { detail: false });
+
+		this.send({
+			type: 'typers',
+			body: users,
+		});
+	}
+
+	@autobind
+	public dispose() {
+		this.subscriber.off(this.subCh, this.onEvent);
+	
+		clearInterval(this.emitTypersIntervalId);
+	}
 }
diff --git a/src/server/api/stream/index.ts b/src/server/api/stream/index.ts
index b04bed0c06..c56a0a157b 100644
--- a/src/server/api/stream/index.ts
+++ b/src/server/api/stream/index.ts
@@ -12,7 +12,8 @@ import { Users, Followings, Mutings, UserProfiles, ChannelFollowings } from '../
 import { ApiError } from '../error';
 import { AccessToken } from '../../../models/entities/access-token';
 import { UserProfile } from '../../../models/entities/user-profile';
-import { publishChannelStream } from '../../../services/stream';
+import { publishChannelStream, publishGroupMessagingStream, publishMessagingStream } from '../../../services/stream';
+import { UserGroup } from '../../../models/entities/user-group';
 
 /**
  * Main stream connection
@@ -94,7 +95,12 @@ export default class Connection {
 			case 'disconnect': this.onChannelDisconnectRequested(body); break;
 			case 'channel': this.onChannelMessageRequested(body); break;
 			case 'ch': this.onChannelMessageRequested(body); break; // alias
+
+			// 個々のチャンネルではなくルートレベルでこれらのメッセージを受け取る理由は、
+			// クライアントの事情を考慮したとき、入力フォームはノートチャンネルやメッセージのメインコンポーネントとは別
+			// なこともあるため、それらのコンポーネントがそれぞれ各チャンネルに接続するようにするのは面倒なため。
 			case 'typingOnChannel': this.typingOnChannel(body.channel); break;
+			case 'typingOnMessaging': this.typingOnMessaging(body); break;
 		}
 	}
 
@@ -267,6 +273,17 @@ export default class Connection {
 		}
 	}
 
+	@autobind
+	private typingOnMessaging(param: { partner?: User['id']; group?: UserGroup['id']; }) {
+		if (this.user) {
+			if (param.partner) {
+				publishMessagingStream(param.partner, this.user.id, 'typing', this.user.id);
+			} else if (param.group) {
+				publishGroupMessagingStream(param.group, 'typing', this.user.id);
+			}
+		}
+	}
+
 	@autobind
 	private async updateFollowing() {
 		const followings = await Followings.find({
-- 
cgit v1.2.3-freya


From d8fb729aee7ea30082f3df475e5a29f21925c2c7 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 21 Feb 2021 13:34:00 +0900
Subject: デザインの調整など
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/components/notes.vue     |  4 ++--
 src/client/init.ts                  |  3 +++
 src/client/ui/chat/header-clock.vue | 24 +++++++++++++++++++++---
 src/client/ui/chat/note.vue         |  1 +
 src/client/ui/chat/notes.vue        |  4 ++--
 src/server/web/boot.js              |  4 ++++
 6 files changed, 33 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/client/components/notes.vue b/src/client/components/notes.vue
index ebb87622af..332f00e5db 100644
--- a/src/client/components/notes.vue
+++ b/src/client/components/notes.vue
@@ -8,7 +8,7 @@
 	<MkError v-if="error" @retry="init()"/>
 
 	<div v-show="more && reversed" style="margin-bottom: var(--margin);">
-		<MkButton class="_buttonPrimary" style="margin: 0 auto;" @click="fetchMoreFeature" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+		<MkButton style="margin: 0 auto;" @click="fetchMoreFeature" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 			<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
 			<template v-if="moreFetching"><MkLoading inline/></template>
 		</MkButton>
@@ -19,7 +19,7 @@
 	</XList>
 
 	<div v-show="more && !reversed" style="margin-top: var(--margin);">
-		<MkButton class="_buttonPrimary" style="margin: 0 auto;" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+		<MkButton style="margin: 0 auto;" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 			<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
 			<template v-if="moreFetching"><MkLoading inline/></template>
 		</MkButton>
diff --git a/src/client/init.ts b/src/client/init.ts
index c60b25359b..ce12849770 100644
--- a/src/client/init.ts
+++ b/src/client/init.ts
@@ -63,6 +63,9 @@ import { reloadChannel } from '@/scripts/unison-reload';
 
 console.info(`Misskey v${version}`);
 
+// boot.jsのやつを解除
+window.onerror = null;
+
 if (_DEV_) {
 	console.warn('Development mode!!!');
 
diff --git a/src/client/ui/chat/header-clock.vue b/src/client/ui/chat/header-clock.vue
index 65573d460b..3488289c21 100644
--- a/src/client/ui/chat/header-clock.vue
+++ b/src/client/ui/chat/header-clock.vue
@@ -1,12 +1,15 @@
 <template>
-<div class="_monospace">
-	<span>
+<div class="acemodlh _monospace">
+	<div>
+		<span v-text="y"></span>/<span v-text="m"></span>/<span v-text="d"></span>
+	</div>
+	<div>
 		<span v-text="hh"></span>
 		<span :style="{ visibility: showColon ? 'visible' : 'hidden' }">:</span>
 		<span v-text="mm"></span>
 		<span :style="{ visibility: showColon ? 'visible' : 'hidden' }">:</span>
 		<span v-text="ss"></span>
-	</span>
+	</div>
 </div>
 </template>
 
@@ -18,6 +21,9 @@ export default defineComponent({
 	data() {
 		return {
 			clock: null,
+			y: null,
+			m: null,
+			d: null,
 			hh: null,
 			mm: null,
 			ss: null,
@@ -34,6 +40,9 @@ export default defineComponent({
 	methods: {
 		tick() {
 			const now = new Date();
+			this.y = now.getFullYear().toString();
+			this.m = (now.getMonth() + 1).toString().padStart(2, '0');
+			this.d = now.getDate().toString().padStart(2, '0');
 			this.hh = now.getHours().toString().padStart(2, '0');
 			this.mm = now.getMinutes().toString().padStart(2, '0');
 			this.ss = now.getSeconds().toString().padStart(2, '0');
@@ -42,3 +51,12 @@ export default defineComponent({
 	}
 });
 </script>
+
+<style lang="scss" scoped>
+.acemodlh {
+	opacity: 0.7;
+	font-size: 0.85em;
+	line-height: 1em;
+	text-align: center;
+}
+</style>
diff --git a/src/client/ui/chat/note.vue b/src/client/ui/chat/note.vue
index 315f5c91e3..9312b99d27 100644
--- a/src/client/ui/chat/note.vue
+++ b/src/client/ui/chat/note.vue
@@ -1091,6 +1091,7 @@ export default defineComponent({
 
 					> .poll {
 						font-size: 80%;
+						max-width: 500px;
 					}
 
 					> .renote {
diff --git a/src/client/ui/chat/notes.vue b/src/client/ui/chat/notes.vue
index fb9f8fe260..3a169cc20a 100644
--- a/src/client/ui/chat/notes.vue
+++ b/src/client/ui/chat/notes.vue
@@ -8,7 +8,7 @@
 	<MkError v-if="error" @retry="init()"/>
 
 	<div v-show="more && reversed" style="margin-bottom: var(--margin);">
-		<MkButton class="_buttonPrimary" style="margin: 0 auto;" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+		<MkButton style="margin: 0 auto;" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 			<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
 			<template v-if="moreFetching"><MkLoading inline/></template>
 		</MkButton>
@@ -19,7 +19,7 @@
 	</XList>
 
 	<div v-show="more && !reversed" style="margin-top: var(--margin);">
-		<MkButton class="_buttonPrimary" style="margin: 0 auto;" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+		<MkButton style="margin: 0 auto;" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 			<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
 			<template v-if="moreFetching"><MkLoading inline/></template>
 		</MkButton>
diff --git a/src/server/web/boot.js b/src/server/web/boot.js
index 2bd306ea94..993b770ab1 100644
--- a/src/server/web/boot.js
+++ b/src/server/web/boot.js
@@ -11,6 +11,10 @@
 
 'use strict';
 
+window.onerror = (e) => {
+	document.documentElement.innerHTML = '問題が発生しました。';
+};
+
 // ブロックの中に入れないと、定義した変数がブラウザのグローバルスコープに登録されてしまい邪魔なので
 (async () => {
 	const v = localStorage.getItem('v') || VERSION;
-- 
cgit v1.2.3-freya


From 3fa1d2bfc0aff0c94fd299f79e5e072161697bf3 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 21 Feb 2021 13:38:03 +0900
Subject: fix for lint

---
 src/client/scripts/paging.ts                | 2 --
 src/server/api/stream/channels/messaging.ts | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/client/scripts/paging.ts b/src/client/scripts/paging.ts
index a8f122412c..6e3da94124 100644
--- a/src/client/scripts/paging.ts
+++ b/src/client/scripts/paging.ts
@@ -192,8 +192,6 @@ export default (opts) => ({
 						this.items = this.items.slice(-opts.displayLimit);
 						this.more = true;
 					}
-				} else {
-					
 				}
 				this.items.push(item);
 				// TODO
diff --git a/src/server/api/stream/channels/messaging.ts b/src/server/api/stream/channels/messaging.ts
index 7279da3ece..4c41dc820b 100644
--- a/src/server/api/stream/channels/messaging.ts
+++ b/src/server/api/stream/channels/messaging.ts
@@ -98,7 +98,7 @@ export default class extends Channel {
 	@autobind
 	public dispose() {
 		this.subscriber.off(this.subCh, this.onEvent);
-	
+
 		clearInterval(this.emitTypersIntervalId);
 	}
 }
-- 
cgit v1.2.3-freya