From f83364ce88289a75fdacae26521747fc1f5a57c4 Mon Sep 17 00:00:00 2001
From: marihachi <marihachi0620@gmail.com>
Date: Thu, 15 Apr 2021 12:10:16 +0900
Subject: [PATCH 01/15] apply hotfix of MFM parser (#7446)

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e6f3b71b7..d50389051 100644
--- a/package.json
+++ b/package.json
@@ -181,7 +181,7 @@
 		"markdown-it": "12.0.4",
 		"markdown-it-anchor": "7.1.0",
 		"matter-js": "0.16.1",
-		"mfm-js": "0.14.0",
+		"mfm-js": "0.14.1",
 		"mocha": "8.3.2",
 		"moji": "0.5.1",
 		"ms": "2.1.3",

From 67c8562122715229ff795ff237c271516e516bc9 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 15 Apr 2021 12:37:32 +0900
Subject: [PATCH 02/15] Update yarn.lock

---
 yarn.lock | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index fb3c82ad9..8d82c2a77 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6613,10 +6613,10 @@ methods@^1.1.2:
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
 
-mfm-js@0.14.0:
-  version "0.14.0"
-  resolved "https://registry.yarnpkg.com/mfm-js/-/mfm-js-0.14.0.tgz#0952ed6f0dd8553866bde7e646c3d5d3d23aeae9"
-  integrity sha512-snCiszquj6DIOARdgJfI8b6o9PbojAmJe1thrsBkUTxG+XG27rCOmjEL1kc1705XraJo0aVCLR9vE6YmjHiUQg==
+mfm-js@0.14.1:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/mfm-js/-/mfm-js-0.14.1.tgz#bd149a5c82bcac1b940cf65400922f0ebfab87ec"
+  integrity sha512-MWCvyd1a3/oLLlKKo19UIfVyBOGg2eM0lK5WZmTKZmz+LGLcFlglxe+kLTkhkJdpGCGKk28tWURQz/xSYNbT1g==
   dependencies:
     twemoji-parser "13.0.x"
 

From b9266cc36d95a0c1cfbcbed4a3e4ee01e35dd5c1 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 15 Apr 2021 12:37:58 +0900
Subject: [PATCH 03/15] fix #7444

---
 src/client/components/mfm.ts | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/client/components/mfm.ts b/src/client/components/mfm.ts
index b8e948a18..3b08c83c7 100644
--- a/src/client/components/mfm.ts
+++ b/src/client/components/mfm.ts
@@ -58,10 +58,13 @@ export default defineComponent({
 					const text = token.props.text.replace(/(\r\n|\n|\r)/g, '\n');
 
 					if (!this.plain) {
-						const x = text.split('\n')
-							.map(t => t == '' ? [h('br')] : [t, h('br')]);
-						x[x.length - 1].pop();
-						return x;
+						const res = [];
+						for (const t of text.split('\n')) {
+							res.push(h('br'));
+							res.push(t);
+						}
+						res.shift();
+						return res;
 					} else {
 						return [text.replace(/\n/g, ' ')];
 					}

From 03196dc7c9dc7138a0125858b0f2efc8b70e95bf Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 15 Apr 2021 17:36:09 +0900
Subject: [PATCH 04/15] refactor

---
 src/client/pages/timeline.vue | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/client/pages/timeline.vue b/src/client/pages/timeline.vue
index 751137c94..1d92dbba8 100644
--- a/src/client/pages/timeline.vue
+++ b/src/client/pages/timeline.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="cmuxhskf _root" v-hotkey.global="keymap">
-	<div class="new" v-if="queue > 0" :style="{ width: width + 'px' }"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
+	<div class="new" v-if="queue > 0"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
 
 	<div class="_magnet"></div>
 	<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
@@ -64,7 +64,6 @@ export default defineComponent({
 			channel: null,
 			menuOpened: false,
 			queue: 0,
-			width: 0,
 			[symbols.PAGE_INFO]: computed(() => ({
 				title: this.$ts.timeline,
 				icon: this.src === 'local' ? faComments : this.src === 'social' ? faShareAlt : this.src === 'global' ? faGlobe : faHome,
@@ -126,10 +125,6 @@ export default defineComponent({
 		}
 	},
 
-	mounted() {
-		this.width = this.$el.offsetWidth;
-	},
-
 	methods: {
 		before() {
 			Progress.start();
@@ -140,7 +135,6 @@ export default defineComponent({
 		},
 
 		queueUpdated(q) {
-			if (this.$el.offsetWidth !== 0) this.width = this.$el.offsetWidth;
 			this.queue = q;
 		},
 
@@ -223,8 +217,10 @@ export default defineComponent({
 <style lang="scss" scoped>
 .cmuxhskf {
 	> .new {
-		position: fixed;
+		position: sticky;
+		top: calc(var(--stickyTop, 0px) + 16px);
 		z-index: 1000;
+		width: 100%;
 
 		> button {
 			display: block;

From 736d4a004e14e47a75b478a2b8609e29bdd583ab Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 15 Apr 2021 18:02:55 +0900
Subject: [PATCH 05/15] :art:

---
 src/client/pages/mfm-cheat-sheet.vue | 239 ++++++++++++++-------------
 1 file changed, 128 insertions(+), 111 deletions(-)

diff --git a/src/client/pages/mfm-cheat-sheet.vue b/src/client/pages/mfm-cheat-sheet.vue
index b30c3414e..1fe7b1822 100644
--- a/src/client/pages/mfm-cheat-sheet.vue
+++ b/src/client/pages/mfm-cheat-sheet.vue
@@ -1,265 +1,261 @@
 <template>
 <div class="mwysmxbg">
-	<div class="_section">
-		<div class="_content">
-			<p>{{ $ts._mfm.intro }}</p>
-		</div>
-	</div>
-	<div class="_section">
-		<div class="_title">{{ $ts._mfm.mention }}</div>
-		<div class="_content">
+	<div class="_isolated">{{ $ts._mfm.intro }}</div>
+	<div class="section _block">
+		<div class="title">{{ $ts._mfm.mention }}</div>
+		<div class="content">
 			<p>{{ $ts._mfm.mentionDescription }}</p>
-			<div class="preview _panel">
+			<div class="preview">
 				<Mfm :text="preview_mention"/>
 				<MkTextarea v-model:value="preview_mention"><span>MFM</span></MkTextarea>
 			</div>
 		</div>
 	</div>
-	<div class="_section">
-		<div class="_title">{{ $ts._mfm.hashtag }}</div>
-		<div class="_content">
+	<div class="section _block">
+		<div class="title">{{ $ts._mfm.hashtag }}</div>
+		<div class="content">
 			<p>{{ $ts._mfm.hashtagDescription }}</p>
-			<div class="preview _panel">
+			<div class="preview">
 				<Mfm :text="preview_hashtag"/>
 				<MkTextarea v-model:value="preview_hashtag"><span>MFM</span></MkTextarea>
 			</div>
 		</div>
 	</div>
-	<div class="_section">
-		<div class="_title">{{ $ts._mfm.url }}</div>
-		<div class="_content">
+	<div class="section _block">
+		<div class="title">{{ $ts._mfm.url }}</div>
+		<div class="content">
 			<p>{{ $ts._mfm.urlDescription }}</p>
-			<div class="preview _panel">
+			<div class="preview">
 				<Mfm :text="preview_url"/>
 				<MkTextarea v-model:value="preview_url"><span>MFM</span></MkTextarea>
 			</div>
 		</div>
 	</div>
-	<div class="_section">
-		<div class="_title">{{ $ts._mfm.link }}</div>
-		<div class="_content">
+	<div class="section _block">
+		<div class="title">{{ $ts._mfm.link }}</div>
+		<div class="content">
 			<p>{{ $ts._mfm.linkDescription }}</p>
-			<div class="preview _panel">
+			<div class="preview">
 				<Mfm :text="preview_link"/>
 				<MkTextarea v-model:value="preview_link"><span>MFM</span></MkTextarea>
 			</div>
 		</div>
 	</div>
-	<div class="_section">
-		<div class="_title">{{ $ts._mfm.emoji }}</div>
-		<div class="_content">
+	<div class="section _block">
+		<div class="title">{{ $ts._mfm.emoji }}</div>
+		<div class="content">
 			<p>{{ $ts._mfm.emojiDescription }}</p>
-			<div class="preview _panel">
+			<div class="preview">
 				<Mfm :text="preview_emoji"/>
 				<MkTextarea v-model:value="preview_emoji"><span>MFM</span></MkTextarea>
 			</div>
 		</div>
 	</div>
-	<div class="_section">
-		<div class="_title">{{ $ts._mfm.bold }}</div>
-		<div class="_content">
+	<div class="section _block">
+		<div class="title">{{ $ts._mfm.bold }}</div>
+		<div class="content">
 			<p>{{ $ts._mfm.boldDescription }}</p>
-			<div class="preview _panel">
+			<div class="preview">
 				<Mfm :text="preview_bold"/>
 				<MkTextarea v-model:value="preview_bold"><span>MFM</span></MkTextarea>
 			</div>
 		</div>
 	</div>
-	<div class="_section">
-		<div class="_title">{{ $ts._mfm.small }}</div>
-		<div class="_content">
+	<div class="section _block">
+		<div class="title">{{ $ts._mfm.small }}</div>
+		<div class="content">
 			<p>{{ $ts._mfm.smallDescription }}</p>
-			<div class="preview _panel">
+			<div class="preview">
 				<Mfm :text="preview_small"/>
 				<MkTextarea v-model:value="preview_small"><span>MFM</span></MkTextarea>
 			</div>
 		</div>
 	</div>
-	<div class="_section">
-		<div class="_title">{{ $ts._mfm.quote }}</div>
-		<div class="_content">
+	<div class="section _block">
+		<div class="title">{{ $ts._mfm.quote }}</div>
+		<div class="content">
 			<p>{{ $ts._mfm.quoteDescription }}</p>
-			<div class="preview _panel">
+			<div class="preview">
 				<Mfm :text="preview_quote"/>
 				<MkTextarea v-model:value="preview_quote"><span>MFM</span></MkTextarea>
 			</div>
 		</div>
 	</div>
-	<div class="_section">
-		<div class="_title">{{ $ts._mfm.center }}</div>
-		<div class="_content">
+	<div class="section _block">
+		<div class="title">{{ $ts._mfm.center }}</div>
+		<div class="content">
 			<p>{{ $ts._mfm.centerDescription }}</p>
-			<div class="preview _panel">
+			<div class="preview">
 				<Mfm :text="preview_center"/>
 				<MkTextarea v-model:value="preview_center"><span>MFM</span></MkTextarea>
 			</div>
 		</div>
 	</div>
-	<div class="_section">
-		<div class="_title">{{ $ts._mfm.inlineCode }}</div>
-		<div class="_content">
+	<div class="section _block">
+		<div class="title">{{ $ts._mfm.inlineCode }}</div>
+		<div class="content">
 			<p>{{ $ts._mfm.inlineCodeDescription }}</p>
-			<div class="preview _panel">
+			<div class="preview">
 				<Mfm :text="preview_inlineCode"/>
 				<MkTextarea v-model:value="preview_inlineCode"><span>MFM</span></MkTextarea>
 			</div>
 		</div>
 	</div>
-	<div class="_section">
-		<div class="_title">{{ $ts._mfm.blockCode }}</div>
-		<div class="_content">
+	<div class="section _block">
+		<div class="title">{{ $ts._mfm.blockCode }}</div>
+		<div class="content">
 			<p>{{ $ts._mfm.blockCodeDescription }}</p>
-			<div class="preview _panel">
+			<div class="preview">
 				<Mfm :text="preview_blockCode"/>
 				<MkTextarea v-model:value="preview_blockCode"><span>MFM</span></MkTextarea>
 			</div>
 		</div>
 	</div>
-	<div class="_section">
-		<div class="_title">{{ $ts._mfm.inlineMath }}</div>
-		<div class="_content">
+	<div class="section _block">
+		<div class="title">{{ $ts._mfm.inlineMath }}</div>
+		<div class="content">
 			<p>{{ $ts._mfm.inlineMathDescription }}</p>
-			<div class="preview _panel">
+			<div class="preview">
 				<Mfm :text="preview_inlineMath"/>
 				<MkTextarea v-model:value="preview_inlineMath"><span>MFM</span></MkTextarea>
 			</div>
 		</div>
 	</div>
-	<div class="_section">
-		<div class="_title">{{ $ts._mfm.search }}</div>
-		<div class="_content">
+	<div class="section _block">
+		<div class="title">{{ $ts._mfm.search }}</div>
+		<div class="content">
 			<p>{{ $ts._mfm.searchDescription }}</p>
-			<div class="preview _panel">
+			<div class="preview">
 				<Mfm :text="preview_search"/>
 				<MkTextarea v-model:value="preview_search"><span>MFM</span></MkTextarea>
 			</div>
 		</div>
 	</div>
-	<div class="_section">
-		<div class="_title">{{ $ts._mfm.flip }}</div>
-		<div class="_content">
+	<div class="section _block">
+		<div class="title">{{ $ts._mfm.flip }}</div>
+		<div class="content">
 			<p>{{ $ts._mfm.flipDescription }}</p>
-			<div class="preview _panel">
+			<div class="preview">
 				<Mfm :text="preview_flip"/>
 				<MkTextarea v-model:value="preview_flip"><span>MFM</span></MkTextarea>
 			</div>
 		</div>
 	</div>
-	<div class="_section">
-		<div class="_title">{{ $ts._mfm.font }}</div>
-		<div class="_content">
+	<div class="section _block">
+		<div class="title">{{ $ts._mfm.font }}</div>
+		<div class="content">
 			<p>{{ $ts._mfm.fontDescription }}</p>
-			<div class="preview _panel">
+			<div class="preview">
 				<Mfm :text="preview_font"/>
 				<MkTextarea v-model:value="preview_font"><span>MFM</span></MkTextarea>
 			</div>
 		</div>
 	</div>
-	<div class="_section">
-		<div class="_title">{{ $ts._mfm.x2 }}</div>
-		<div class="_content">
+	<div class="section _block">
+		<div class="title">{{ $ts._mfm.x2 }}</div>
+		<div class="content">
 			<p>{{ $ts._mfm.x2Description }}</p>
-			<div class="preview _panel">
+			<div class="preview">
 				<Mfm :text="preview_x2"/>
 				<MkTextarea v-model:value="preview_x2"><span>MFM</span></MkTextarea>
 			</div>
 		</div>
 	</div>
-	<div class="_section">
-		<div class="_title">{{ $ts._mfm.x3 }}</div>
-		<div class="_content">
+	<div class="section _block">
+		<div class="title">{{ $ts._mfm.x3 }}</div>
+		<div class="content">
 			<p>{{ $ts._mfm.x3Description }}</p>
-			<div class="preview _panel">
+			<div class="preview">
 				<Mfm :text="preview_x3"/>
 				<MkTextarea v-model:value="preview_x3"><span>MFM</span></MkTextarea>
 			</div>
 		</div>
 	</div>
-	<div class="_section">
-		<div class="_title">{{ $ts._mfm.x4 }}</div>
-		<div class="_content">
+	<div class="section _block">
+		<div class="title">{{ $ts._mfm.x4 }}</div>
+		<div class="content">
 			<p>{{ $ts._mfm.x4Description }}</p>
-			<div class="preview _panel">
+			<div class="preview">
 				<Mfm :text="preview_x4"/>
 				<MkTextarea v-model:value="preview_x4"><span>MFM</span></MkTextarea>
 			</div>
 		</div>
 	</div>
-	<div class="_section">
-		<div class="_title">{{ $ts._mfm.blur }}</div>
-		<div class="_content">
+	<div class="section _block">
+		<div class="title">{{ $ts._mfm.blur }}</div>
+		<div class="content">
 			<p>{{ $ts._mfm.blurDescription }}</p>
-			<div class="preview _panel">
+			<div class="preview">
 				<Mfm :text="preview_blur"/>
 				<MkTextarea v-model:value="preview_blur"><span>MFM</span></MkTextarea>
 			</div>
 		</div>
 	</div>
-	<div class="_section">
-		<div class="_title">{{ $ts._mfm.jelly }}</div>
-		<div class="_content">
+	<div class="section _block">
+		<div class="title">{{ $ts._mfm.jelly }}</div>
+		<div class="content">
 			<p>{{ $ts._mfm.jellyDescription }}</p>
-			<div class="preview _panel">
+			<div class="preview">
 				<Mfm :text="preview_jelly"/>
 				<MkTextarea v-model:value="preview_jelly"><span>MFM</span></MkTextarea>
 			</div>
 		</div>
 	</div>
-	<div class="_section">
-		<div class="_title">{{ $ts._mfm.tada }}</div>
-		<div class="_content">
+	<div class="section _block">
+		<div class="title">{{ $ts._mfm.tada }}</div>
+		<div class="content">
 			<p>{{ $ts._mfm.tadaDescription }}</p>
-			<div class="preview _panel">
+			<div class="preview">
 				<Mfm :text="preview_tada"/>
 				<MkTextarea v-model:value="preview_tada"><span>MFM</span></MkTextarea>
 			</div>
 		</div>
 	</div>
-	<div class="_section">
-		<div class="_title">{{ $ts._mfm.jump }}</div>
-		<div class="_content">
+	<div class="section _block">
+		<div class="title">{{ $ts._mfm.jump }}</div>
+		<div class="content">
 			<p>{{ $ts._mfm.jumpDescription }}</p>
-			<div class="preview _panel">
+			<div class="preview">
 				<Mfm :text="preview_jump"/>
 				<MkTextarea v-model:value="preview_jump"><span>MFM</span></MkTextarea>
 			</div>
 		</div>
 	</div>
-	<div class="_section">
-		<div class="_title">{{ $ts._mfm.bounce }}</div>
-		<div class="_content">
+	<div class="section _block">
+		<div class="title">{{ $ts._mfm.bounce }}</div>
+		<div class="content">
 			<p>{{ $ts._mfm.bounceDescription }}</p>
-			<div class="preview _panel">
+			<div class="preview">
 				<Mfm :text="preview_bounce"/>
 				<MkTextarea v-model:value="preview_bounce"><span>MFM</span></MkTextarea>
 			</div>
 		</div>
 	</div>
-	<div class="_section">
-		<div class="_title">{{ $ts._mfm.spin }}</div>
-		<div class="_content">
+	<div class="section _block">
+		<div class="title">{{ $ts._mfm.spin }}</div>
+		<div class="content">
 			<p>{{ $ts._mfm.spinDescription }}</p>
-			<div class="preview _panel">
+			<div class="preview">
 				<Mfm :text="preview_spin"/>
 				<MkTextarea v-model:value="preview_spin"><span>MFM</span></MkTextarea>
 			</div>
 		</div>
 	</div>
-	<div class="_section">
-		<div class="_title">{{ $ts._mfm.shake }}</div>
-		<div class="_content">
+	<div class="section _block">
+		<div class="title">{{ $ts._mfm.shake }}</div>
+		<div class="content">
 			<p>{{ $ts._mfm.shakeDescription }}</p>
-			<div class="preview _panel">
+			<div class="preview">
 				<Mfm :text="preview_shake"/>
 				<MkTextarea v-model:value="preview_shake"><span>MFM</span></MkTextarea>
 			</div>
 		</div>
 	</div>
-	<div class="_section">
-		<div class="_title">{{ $ts._mfm.twitch }}</div>
-		<div class="_content">
+	<div class="section _block">
+		<div class="title">{{ $ts._mfm.twitch }}</div>
+		<div class="content">
 			<p>{{ $ts._mfm.twitchDescription }}</p>
-			<div class="preview _panel">
+			<div class="preview">
 				<Mfm :text="preview_twitch"/>
 				<MkTextarea v-model:value="preview_twitch"><span>MFM</span></MkTextarea>
 			</div>
@@ -318,8 +314,29 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .mwysmxbg {
-	.preview {
-		padding: 16px;
+	> .section {
+		> .title {
+			position: sticky;
+			z-index: 1;
+			top: var(--stickyTop, 0px);
+			padding: 16px;
+			font-weight: bold;
+			-webkit-backdrop-filter: blur(10px);
+			backdrop-filter: blur(10px);
+			background-color: var(--X16);
+		}
+
+		> .content {
+			> p {
+				margin: 0;
+				padding: 16px;
+			}
+
+			> .preview {
+				border-top: solid 0.5px var(--divider);
+				padding: 16px;
+			}
+		}
 	}
 }
 </style>

From 23310f36a8e1ae8e8f233b131de95ae28979a85f Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 15 Apr 2021 20:25:32 +0900
Subject: [PATCH 06/15] update mfm-js

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index d50389051..383407b23 100644
--- a/package.json
+++ b/package.json
@@ -181,7 +181,7 @@
 		"markdown-it": "12.0.4",
 		"markdown-it-anchor": "7.1.0",
 		"matter-js": "0.16.1",
-		"mfm-js": "0.14.1",
+		"mfm-js": "0.15.0",
 		"mocha": "8.3.2",
 		"moji": "0.5.1",
 		"ms": "2.1.3",
diff --git a/yarn.lock b/yarn.lock
index 8d82c2a77..05d6e9eb3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6613,10 +6613,10 @@ methods@^1.1.2:
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
 
-mfm-js@0.14.1:
-  version "0.14.1"
-  resolved "https://registry.yarnpkg.com/mfm-js/-/mfm-js-0.14.1.tgz#bd149a5c82bcac1b940cf65400922f0ebfab87ec"
-  integrity sha512-MWCvyd1a3/oLLlKKo19UIfVyBOGg2eM0lK5WZmTKZmz+LGLcFlglxe+kLTkhkJdpGCGKk28tWURQz/xSYNbT1g==
+mfm-js@0.15.0:
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/mfm-js/-/mfm-js-0.15.0.tgz#b7dea4225a992ac4fd873ad6b2cad069f171dc24"
+  integrity sha512-JW7AAQzXejo60JGwx+wzodkp45XKYBEq4bYlMDcxjmi2e+P0IOhAcpz2HPBbzxnO/4X3WPuklU8B16RUZpFFdg==
   dependencies:
     twemoji-parser "13.0.x"
 

From 08ec306c10690d4358e477fc32ac32619bcb5589 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 15 Apr 2021 20:26:02 +0900
Subject: [PATCH 07/15] better list rendering

---
 src/client/components/date-separated-list.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/client/components/date-separated-list.vue b/src/client/components/date-separated-list.vue
index 433655d6e..833cdfc89 100644
--- a/src/client/components/date-separated-list.vue
+++ b/src/client/components/date-separated-list.vue
@@ -24,11 +24,9 @@ export default defineComponent({
 	methods: {
 		focus() {
 			this.$slots.default[0].elm.focus();
-		}
-	},
+		},
 
-	render() {
-		const getDateText = (time: string) => {
+		getDateText(time: string) {
 			const date = new Date(time).getDate();
 			const month = new Date(time).getMonth() + 1;
 			return this.$t('monthAndDay', {
@@ -36,9 +34,13 @@ export default defineComponent({
 				day: date.toString()
 			});
 		}
+	},
 
+	render() {
 		const noGap = [...document.querySelectorAll('._noGap_')].some(el => el.contains(this.$parent.$el));
 
+		if (this.items.length === 0) return;
+
 		return h(this.$store.state.animation ? TransitionGroup : 'div', this.$store.state.animation ? {
 			class: 'sqadhkmv' + (noGap ? ' _block' : ''),
 			name: 'list',
@@ -72,10 +74,10 @@ export default defineComponent({
 							class: 'icon',
 							icon: faAngleUp,
 						}),
-						getDateText(item.createdAt)
+						this.getDateText(item.createdAt)
 					]),
 					h('span', [
-						getDateText(this.items[i + 1].createdAt),
+						this.getDateText(this.items[i + 1].createdAt),
 						h(FontAwesomeIcon, {
 							class: 'icon',
 							icon: faAngleDown,

From e5501e748fc79716d09d0ba4cba2bcb706423787 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 15 Apr 2021 20:55:54 +0900
Subject: [PATCH 08/15] fix style

---
 src/client/components/notifications.vue |  5 ++---
 src/client/pages/page.vue               |  6 ++----
 src/client/pages/timeline.vue           |  5 ++---
 src/client/style.scss                   | 10 ++++++----
 4 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/client/components/notifications.vue b/src/client/components/notifications.vue
index baafa86f4..0891108d8 100644
--- a/src/client/components/notifications.vue
+++ b/src/client/components/notifications.vue
@@ -1,7 +1,6 @@
 <template>
-<div class="mfcuwfyp _noGap_">
-	<div class="_magnet"></div>
-	<XList class="notifications" :items="items" v-slot="{ item: notification }">
+<div class="mfcuwfyp _noGap_ _magnetParent">
+	<XList class="notifications _magnetChild" :items="items" v-slot="{ item: notification }">
 		<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :note="notification.note" @update:note="noteUpdated(notification.note, $event)" :key="notification.id"/>
 		<XNotification v-else :notification="notification" :with-time="true" :full="true" class="_panel notification" :key="notification.id"/>
 	</XList>
diff --git a/src/client/pages/page.vue b/src/client/pages/page.vue
index 57bbeba6b..6ff09e2b6 100644
--- a/src/client/pages/page.vue
+++ b/src/client/pages/page.vue
@@ -1,8 +1,6 @@
 <template>
-<div class="xcukqgmh _root" v-if="page" :key="page.id" v-size="{ max: [450] }">
-	<div class="_magnet"></div>
-
-	<div class="_block main">
+<div class="xcukqgmh _root _magnetParent" v-if="page" :key="page.id" v-size="{ max: [450] }">
+	<div class="_block _magnetChild main">
 		<!--
 		<div class="header">
 			<h1>{{ page.title }}</h1>
diff --git a/src/client/pages/timeline.vue b/src/client/pages/timeline.vue
index 1d92dbba8..0e0116465 100644
--- a/src/client/pages/timeline.vue
+++ b/src/client/pages/timeline.vue
@@ -1,11 +1,10 @@
 <template>
-<div class="cmuxhskf _root" v-hotkey.global="keymap">
+<div class="cmuxhskf _root _magnetParent" v-hotkey.global="keymap">
 	<div class="new" v-if="queue > 0"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
 
-	<div class="_magnet"></div>
 	<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
 	<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
-	<div class="tabs _block">
+	<div class="tabs _block _magnetChild">
 		<div class="left">
 			<button class="_button tab" @click="() => { src = 'home'; saveSrc(); }" :class="{ active: src === 'home' }" v-tooltip="$ts._timelines.home"><Fa :icon="faHome"/></button>
 			<button class="_button tab" @click="() => { src = 'local'; saveSrc(); }" :class="{ active: src === 'local' }" v-tooltip="$ts._timelines.local" v-if="isLocalTimelineAvailable"><Fa :icon="faComments"/></button>
diff --git a/src/client/style.scss b/src/client/style.scss
index e9c28f182..63433109f 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -366,10 +366,6 @@ hr {
 		border-radius: var(--radius);
 	}
 
-	._magnet {
-		margin-bottom: calc(var(--margin) * -1);
-	}	
-
 	@media (max-width: 500px) {
 		._root {
 			--root-margin: 0;
@@ -377,6 +373,12 @@ hr {
 	}
 }
 
+._magnetParent {
+	._magnetChild:not(* + ._magnetChild) {
+		margin-top: 0;
+	}
+}
+
 ._narrow_ ._card {
 	> ._title {
 		padding: 16px;

From 28c37e1fe47bb867701c8c290bb62017028f5406 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 15 Apr 2021 23:27:28 +0900
Subject: [PATCH 09/15] =?UTF-8?q?=E3=82=BF=E3=82=A4=E3=83=88=E3=83=AB?=
 =?UTF-8?q?=E3=83=90=E3=83=BC=E9=9D=9E=E8=A1=A8=E7=A4=BA=E3=82=AA=E3=83=97?=
 =?UTF-8?q?=E3=82=B7=E3=83=A7=E3=83=B3=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/pages/settings/general.vue | 6 ------
 src/client/store.ts                   | 4 ----
 src/client/ui/default.vue             | 2 +-
 src/client/ui/universal.vue           | 9 +++------
 4 files changed, 4 insertions(+), 17 deletions(-)

diff --git a/src/client/pages/settings/general.vue b/src/client/pages/settings/general.vue
index 7e80e2249..2963ddf43 100644
--- a/src/client/pages/settings/general.vue
+++ b/src/client/pages/settings/general.vue
@@ -1,6 +1,5 @@
 <template>
 <FormBase>
-	<FormSwitch v-model:value="titlebar">{{ $ts.showTitlebar }}</FormSwitch>
 	<FormSwitch v-model:value="showFixedPostForm">{{ $ts.showFixedPostForm }}</FormSwitch>
 
 	<FormSelect v-model:value="lang">
@@ -137,7 +136,6 @@ export default defineComponent({
 		useOsNativeEmojis: defaultStore.makeGetterSetter('useOsNativeEmojis'),
 		disableShowingAnimatedImages: defaultStore.makeGetterSetter('disableShowingAnimatedImages'),
 		loadRawImages: defaultStore.makeGetterSetter('loadRawImages'),
-		titlebar: defaultStore.makeGetterSetter('titlebar'),
 		imageNewTab: defaultStore.makeGetterSetter('imageNewTab'),
 		nsfw: defaultStore.makeGetterSetter('nsfw'),
 		disablePagesScript: defaultStore.makeGetterSetter('disablePagesScript'),
@@ -182,10 +180,6 @@ export default defineComponent({
 			this.reloadAsk();
 		},
 
-		titlebar() {
-			this.reloadAsk();
-		},
-
 		instanceTicker() {
 			this.reloadAsk();
 		},
diff --git a/src/client/store.ts b/src/client/store.ts
index cdc244537..0d34a0236 100644
--- a/src/client/store.ts
+++ b/src/client/store.ts
@@ -184,10 +184,6 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: 'full' as 'full' | 'icon'
 	},
-	titlebar: {
-		where: 'device',
-		default: true
-	},
 	reportError: {
 		where: 'device',
 		default: false
diff --git a/src/client/ui/default.vue b/src/client/ui/default.vue
index ec59bf003..1745f1f3d 100644
--- a/src/client/ui/default.vue
+++ b/src/client/ui/default.vue
@@ -6,7 +6,7 @@
 		</div>
 
 		<main class="main _panel" @contextmenu.stop="onContextmenu">
-			<header v-if="$store.state.titlebar" class="header" @click="onHeaderClick">
+			<header class="header" @click="onHeaderClick">
 				<XHeader :info="pageInfo"/>
 			</header>
 			<div class="content" :class="{ _flat_: !fullView }">
diff --git a/src/client/ui/universal.vue b/src/client/ui/universal.vue
index 3e2ee2881..6df09937d 100644
--- a/src/client/ui/universal.vue
+++ b/src/client/ui/universal.vue
@@ -2,8 +2,8 @@
 <div class="mk-app" :class="{ wallpaper }">
 	<XSidebar ref="nav" class="sidebar"/>
 
-	<div class="contents" ref="contents" :class="{ withHeader: $store.state.titlebar }" @contextmenu.stop="onContextmenu">
-		<header v-if="$store.state.titlebar" class="header" ref="header" @click="onHeaderClick">
+	<div class="contents" ref="contents" @contextmenu.stop="onContextmenu">
+		<header class="header" ref="header" @click="onHeaderClick">
 			<XHeader :info="pageInfo"/>
 		</header>
 		<main ref="main">
@@ -260,10 +260,7 @@ export default defineComponent({
 		width: 100%;
 		min-width: 0;
 		--stickyTop: #{$header-height};
-
-		&.withHeader {
-			padding-top: $header-height;
-		}
+		padding-top: $header-height;
 
 		> .header {
 			position: fixed;

From 1c8b8d1c965a73d4cbb4f31708e435217f159511 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 15 Apr 2021 23:27:33 +0900
Subject: [PATCH 10/15] fix theme

---
 src/client/themes/d-dark.json5 | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/client/themes/d-dark.json5 b/src/client/themes/d-dark.json5
index 337eaa639..fba7fe758 100644
--- a/src/client/themes/d-dark.json5
+++ b/src/client/themes/d-dark.json5
@@ -16,8 +16,6 @@
 		panelShadow: '" 0 8px 24px rgb(0 0 0 / 25%)',
 		panelHeaderBg: '@panel',
 		panelHeaderDivider: '@divider',
-		infoFg: '@accent',
-		infoBg: 'rgb(0, 0, 0)',
 		header: ':alpha<0.7<@panel',
 		navBg: '#363636',
 		renote: '@accent',

From ff129b301d8cf567e7e360abd47d93db5ffb0ba0 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 15 Apr 2021 23:34:12 +0900
Subject: [PATCH 11/15] Tweak style

---
 src/client/pages/messaging/messaging-room.message.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/client/pages/messaging/messaging-room.message.vue b/src/client/pages/messaging/messaging-room.message.vue
index 3755bc2b5..8c275d5e3 100644
--- a/src/client/pages/messaging/messaging-room.message.vue
+++ b/src/client/pages/messaging/messaging-room.message.vue
@@ -85,6 +85,8 @@ export default defineComponent({
 	display: flex;
 
 	> .avatar {
+		position: sticky;
+		top: calc(var(--stickyTop, 0px) + 16px);
 		display: block;
 		width: 54px;
 		height: 54px;
@@ -274,6 +276,11 @@ export default defineComponent({
 				background: $me-balloon-color;
 				text-align: left;
 
+				::selection {
+					color: var(--accent);
+					background-color: #fff;
+				} 
+
 				&.noText {
 					background: transparent;
 				}

From 2001a25b338c075bea74a215c63e165b6281f128 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 15 Apr 2021 23:38:34 +0900
Subject: [PATCH 12/15] Improve usability

---
 locales/ja-JP.yml               | 1 +
 src/client/pages/user/index.vue | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 33d7e760a..561e1ed2f 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -717,6 +717,7 @@ unlikeConfirm: "いいね解除しますか？"
 fullView: "フルビュー"
 quitFullView: "フルビュー解除"
 addDescription: "説明を追加"
+userPagePinTip: "個々のノートのメニューから「ピン留め」を選択することで、ここにノートを表示しておくことができます。"
 
 _email:
   _follow:
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index 52b272596..e8d54402e 100644
--- a/src/client/pages/user/index.vue
+++ b/src/client/pages/user/index.vue
@@ -198,6 +198,7 @@
 					<div v-if="user.pinnedNotes.length > 0">
 						<XNote v-for="note in user.pinnedNotes" class="note _block" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/>
 					</div>
+					<MkInfo v-else-if="$i && $i.id === user.id">{{ $ts.userPagePinTip }}</MkInfo>
 					<XPhotos :user="user" :key="user.id"/>
 					<XActivity :user="user" :key="user.id"/>
 				</div>
@@ -229,6 +230,7 @@ import MkContainer from '@client/components/ui/container.vue';
 import MkFolder from '@client/components/ui/folder.vue';
 import MkRemoteCaution from '@client/components/remote-caution.vue';
 import MkTab from '@client/components/tab.vue';
+import MkInfo from '@client/components/ui/info.vue';
 import Progress from '@client/scripts/loading';
 import parseAcct from '@/misc/acct/parse';
 import { getScrollPosition } from '@client/scripts/scroll';
@@ -247,6 +249,7 @@ export default defineComponent({
 		MkRemoteCaution,
 		MkFolder,
 		MkTab,
+		MkInfo,
 		XFollowList: defineAsyncComponent(() => import('./follow-list.vue')),
 		XClips: defineAsyncComponent(() => import('./clips.vue')),
 		XPages: defineAsyncComponent(() => import('./pages.vue')),

From 0ddba0a75fdf7183afc945f966c00ecf0d45344b Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 15 Apr 2021 23:49:05 +0900
Subject: [PATCH 13/15] fix bug

---
 src/client/widgets/job-queue.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/widgets/job-queue.vue b/src/client/widgets/job-queue.vue
index 0b560ca56..007fd412c 100644
--- a/src/client/widgets/job-queue.vue
+++ b/src/client/widgets/job-queue.vue
@@ -22,7 +22,7 @@
 		</div>
 	</div>
 	<div class="deliver">
-		<div class="label">Deliver queue<Fa :icon="faExclamationTriangle" v-if="inbox.waiting > 0" class="icon"/></div>
+		<div class="label">Deliver queue<Fa :icon="faExclamationTriangle" v-if="deliver.waiting > 0" class="icon"/></div>
 		<div class="values">
 			<div>
 				<div>Process</div>

From 6b60d81ddae1dd2b7929986bff0662fecc8a170d Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 16 Apr 2021 00:13:20 +0900
Subject: [PATCH 14/15] Improve usability

---
 locales/ja-JP.yml                   |  1 +
 src/client/components/post-form.vue | 48 ++++++++++++++++++++++++++++-
 2 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 561e1ed2f..741a5a619 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -718,6 +718,7 @@ fullView: "フルビュー"
 quitFullView: "フルビュー解除"
 addDescription: "説明を追加"
 userPagePinTip: "個々のノートのメニューから「ピン留め」を選択することで、ここにノートを表示しておくことができます。"
+notSpecifiedMentionWarning: "宛先に含まれていないメンションがあります"
 
 _email:
   _follow:
diff --git a/src/client/components/post-form.vue b/src/client/components/post-form.vue
index ce79f34d6..4c6a9ebc9 100644
--- a/src/client/components/post-form.vue
+++ b/src/client/components/post-form.vue
@@ -34,6 +34,7 @@
 				<button @click="addVisibleUser" class="_buttonPrimary"><Fa :icon="faPlus" fixed-width/></button>
 			</div>
 		</div>
+		<MkInfo warn v-if="hasNotSpecifiedMentions" class="hasNotSpecifiedMentions">{{ $ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ $ts.add }}</button></MkInfo>
 		<input v-show="useCw" ref="cw" class="cw" v-model="cw" :placeholder="$ts.annotation" @keydown="onKeydown">
 		<textarea v-model="text" class="text" :class="{ withCw: useCw }" ref="text" :disabled="posting" :placeholder="placeholder" @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd" />
 		<XPostFormAttaches class="attaches" :files="files" @updated="updateFiles" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
@@ -71,12 +72,14 @@ import { selectFile } from '@client/scripts/select-file';
 import { notePostInterruptors, postFormActions } from '@client/store';
 import { isMobile } from '@client/scripts/is-mobile';
 import { throttle } from 'throttle-debounce';
+import MkInfo from '@client/components/ui/info.vue';
 
 export default defineComponent({
 	components: {
 		XNotePreview,
 		XPostFormAttaches: defineAsyncComponent(() => import('./post-form-attaches.vue')),
-		XPollEditor: defineAsyncComponent(() => import('./poll-editor.vue'))
+		XPollEditor: defineAsyncComponent(() => import('./poll-editor.vue')),
+		MkInfo,
 	},
 
 	inject: ['modal'],
@@ -143,6 +146,7 @@ export default defineComponent({
 			autocomplete: null,
 			draghover: false,
 			quoteId: null,
+			hasNotSpecifiedMentions: false,
 			recentHashtags: JSON.parse(localStorage.getItem('hashtags') || '[]'),
 			imeText: '',
 			typing: throttle(3000, () => {
@@ -214,6 +218,18 @@ export default defineComponent({
 		}
 	},
 
+	watch: {
+		text() {
+			this.checkMissingMention();
+		},
+		visibleUsers: {
+			handler() {
+				this.checkMissingMention();
+			},
+			deep: true
+		}
+	},
+
 	mounted() {
 		if (this.initialText) {
 			this.text = this.initialText;
@@ -338,6 +354,32 @@ export default defineComponent({
 			this.$watch('localOnly', () => this.saveDraft());
 		},
 
+		checkMissingMention() {
+			if (this.visibility === 'specified') {
+				const ast = mfm.parse(this.text);
+
+				for (const x of extractMentions(ast)) {
+					if (!this.visibleUsers.some(u => (u.username === x.username) && (u.host == x.host))) {
+						this.hasNotSpecifiedMentions = true;
+						return;
+					}
+				}
+				this.hasNotSpecifiedMentions = false;
+			}
+		},
+
+		addMissingMention() {
+			const ast = mfm.parse(this.text);
+
+			for (const x of extractMentions(ast)) {
+				if (!this.visibleUsers.some(u => (u.username === x.username) && (u.host == x.host))) {
+					os.api('users/show', { username: x.username, host: x.host }).then(user => {
+						this.visibleUsers.push(user);
+					});
+				}
+			}
+		},
+
 		togglePoll() {
 			if (this.poll) {
 				this.poll = null;
@@ -741,6 +783,10 @@ export default defineComponent({
 			}
 		}
 
+		> .hasNotSpecifiedMentions {
+			margin: 0 20px 16px 20px;
+		}
+
 		> .cw,
 		> .text {
 			display: block;

From 98488956bc16fb3c083f7501fbdd1d95b9cbfd8d Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 16 Apr 2021 00:21:46 +0900
Subject: [PATCH 15/15] 12.76.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 383407b23..825341d04 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "misskey",
 	"author": "syuilo <syuilotan@yahoo.co.jp>",
-	"version": "12.76.0",
+	"version": "12.76.1",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",