Merge branch 'develop'

6 files changed, 146 insertions, 132 deletions

diff --git a/src/client/pages/messaging/messaging-room.message.vue b/src/client/pages/messaging/messaging-room.message.vue
index 3755bc2b5c..8c275d5e33 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;
 				}
diff --git a/src/client/pages/mfm-cheat-sheet.vue b/src/client/pages/mfm-cheat-sheet.vue
index b30c3414e2..1fe7b18222 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>
diff --git a/src/client/pages/page.vue b/src/client/pages/page.vue
index 57bbeba6b2..6ff09e2b68 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/settings/general.vue b/src/client/pages/settings/general.vue
index 7e80e2249f..2963ddf432 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/pages/timeline.vue b/src/client/pages/timeline.vue
index 751137c942..0e0116465c 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="new" v-if="queue > 0" :style="{ width: width + 'px' }"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
+<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>
@@ -64,7 +63,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 +124,6 @@ export default defineComponent({
 		}
 	},
 
-	mounted() {
-		this.width = this.$el.offsetWidth;
-	},
-
 	methods: {
 		before() {
 			Progress.start();
@@ -140,7 +134,6 @@ export default defineComponent({
 		},
 
 		queueUpdated(q) {
-			if (this.$el.offsetWidth !== 0) this.width = this.$el.offsetWidth;
 			this.queue = q;
 		},
 
@@ -223,8 +216,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;
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index 52b2725964..e8d54402ec 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')),