From 7bafb3ab2e85d3877b172422b6f1fb300aee539a Mon Sep 17 00:00:00 2001
From: dakkar <dakkar@thenautilus.net>
Date: Fri, 28 Jun 2024 11:10:21 +0100
Subject: rename our components - fixes #534

---
 packages/frontend/src/components/MkFormula.vue     |  33 -
 packages/frontend/src/components/MkMediaList.vue   |   2 +-
 packages/frontend/src/components/MkMfmWindow.vue   | 516 ---------------
 packages/frontend/src/components/MkModPlayer.vue   | 696 ---------------------
 packages/frontend/src/components/MkPostForm.vue    |   2 +-
 packages/frontend/src/components/SkFormula.vue     |  33 +
 packages/frontend/src/components/SkMfmWindow.vue   | 516 +++++++++++++++
 packages/frontend/src/components/SkModPlayer.vue   | 696 +++++++++++++++++++++
 .../components/global/MkMisskeyFlavoredMarkdown.ts |   6 +-
 9 files changed, 1250 insertions(+), 1250 deletions(-)
 delete mode 100644 packages/frontend/src/components/MkFormula.vue
 delete mode 100644 packages/frontend/src/components/MkMfmWindow.vue
 delete mode 100644 packages/frontend/src/components/MkModPlayer.vue
 create mode 100644 packages/frontend/src/components/SkFormula.vue
 create mode 100644 packages/frontend/src/components/SkMfmWindow.vue
 create mode 100644 packages/frontend/src/components/SkModPlayer.vue

(limited to 'packages/frontend/src/components')

diff --git a/packages/frontend/src/components/MkFormula.vue b/packages/frontend/src/components/MkFormula.vue
deleted file mode 100644
index 039cef8da8..0000000000
--- a/packages/frontend/src/components/MkFormula.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<!--
-SPDX-FileCopyrightText: dakkar, MoshiBar, and other Sharkey contributors
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-	<div v-if="block" :class="$style.block" v-html="renderedFormula"></div>
-	<span v-else v-html="renderedFormula"></span>
-</template>
-
-<script lang="ts" setup>
-	import { computed } from 'vue';
-	import katex from 'katex';
-	import 'katex/dist/katex.min.css';
-
-	const props = defineProps<{
-		formula: string;
-		block: boolean;
-	}>();
-
-	const renderedFormula = computed(() =>
-		katex.renderToString(props.formula, {
-			throwOnError: false,
-			trust: false,
-			displayMode: props.block,
-		} as any));
-</script>
-
-<style lang="scss" module>
-	.block {
-		text-align: center;
-	}
-</style>
diff --git a/packages/frontend/src/components/MkMediaList.vue b/packages/frontend/src/components/MkMediaList.vue
index 3bf44aea8e..112a84f1fd 100644
--- a/packages/frontend/src/components/MkMediaList.vue
+++ b/packages/frontend/src/components/MkMediaList.vue
@@ -37,7 +37,7 @@ import 'photoswipe/style.css';
 import XBanner from '@/components/MkMediaBanner.vue';
 import XImage from '@/components/MkMediaImage.vue';
 import XVideo from '@/components/MkMediaVideo.vue';
-import XModPlayer from '@/components/MkModPlayer.vue';
+import XModPlayer from '@/components/SkModPlayer.vue';
 import * as os from '@/os.js';
 import { FILE_TYPE_BROWSERSAFE, FILE_EXT_TRACKER_MODULES, FILE_TYPE_TRACKER_MODULES } from '@/const.js';
 import { defaultStore } from '@/store.js';
diff --git a/packages/frontend/src/components/MkMfmWindow.vue b/packages/frontend/src/components/MkMfmWindow.vue
deleted file mode 100644
index c599531ec5..0000000000
--- a/packages/frontend/src/components/MkMfmWindow.vue
+++ /dev/null
@@ -1,516 +0,0 @@
-<!--
-SPDX-FileCopyrightText: marie and other Sharkey contributors
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<MkWindow
-	ref="window"
-	:initialWidth="600"
-	:initialHeight="800"
-	:canResize="true"
-	@closed="emit('closed')"
->
-	<template #header>
-		MFM Cheatsheet
-	</template>
-	<MkStickyContainer>
-		<MkSpacer :contentMax="800">
-			<div class="mfm-cheat-sheet">
-				<div>{{ i18n.ts._mfm.intro }}</div>
-				<br/>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.mention }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.mentionDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_mention"/>
-							<MkTextarea v-model="preview_mention"><template #label>MFM</template></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.hashtag }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.hashtagDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_hashtag"/>
-							<MkTextarea v-model="preview_hashtag"><template #label>MFM</template></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.link }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.linkDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_link"/>
-							<MkTextarea v-model="preview_link"><template #label>MFM</template></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.emoji }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.emojiDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_emoji"/>
-							<MkTextarea v-model="preview_emoji"><template #label>MFM</template></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.bold }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.boldDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_bold"/>
-							<MkTextarea v-model="preview_bold"><template #label>MFM</template></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.small }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.smallDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_small"/>
-							<MkTextarea v-model="preview_small"><template #label>MFM</template></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.quote }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.quoteDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_quote"/>
-							<MkTextarea v-model="preview_quote"><template #label>MFM</template></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.center }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.centerDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_center"/>
-							<MkTextarea v-model="preview_center"><template #label>MFM</template></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.inlineCode }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.inlineCodeDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_inlineCode"/>
-							<MkTextarea v-model="preview_inlineCode"><template #label>MFM</template></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.blockCode }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.blockCodeDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_blockCode"/>
-							<MkTextarea v-model="preview_blockCode"><template #label>MFM</template></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.inlineMath }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.inlineMathDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_inlineMath"/>
-							<MkTextarea v-model="preview_inlineMath"><template #label>MFM</template></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.blockMath }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.blockMathDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_blockMath"/>
-							<MkTextarea v-model="preview_blockMath"><template #label>MFM</template></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.search }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.searchDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_search"/>
-							<MkTextarea v-model="preview_search"><template #label>MFM</template></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.flip }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.flipDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_flip"/>
-							<MkTextarea v-model="preview_flip"><template #label>MFM</template></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.font }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.fontDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_font"/>
-							<MkTextarea v-model="preview_font"><template #label>MFM</template></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.x2 }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.x2Description }}</p>
-						<div class="preview">
-							<Mfm :text="preview_x2"/>
-							<MkTextarea v-model="preview_x2"><template #label>MFM</template></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.x3 }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.x3Description }}</p>
-						<div class="preview">
-							<Mfm :text="preview_x3"/>
-							<MkTextarea v-model="preview_x3"><template #label>MFM</template></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.x4 }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.x4Description }}</p>
-						<div class="preview">
-							<Mfm :text="preview_x4"/>
-							<MkTextarea v-model="preview_x4"><template #label>MFM</template></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.blur }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.blurDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_blur"/>
-							<MkTextarea v-model="preview_blur"><template #label>MFM</template></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.jelly }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.jellyDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_jelly"/>
-							<MkTextarea v-model="preview_jelly"><template #label>MFM</template></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.tada }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.tadaDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_tada"/>
-							<MkTextarea v-model="preview_tada"><template #label>MFM</template></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.jump }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.jumpDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_jump"/>
-							<MkTextarea v-model="preview_jump"><template #label>MFM</template></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.bounce }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.bounceDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_bounce"/>
-							<MkTextarea v-model="preview_bounce"><template #label>MFM</template></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.spin }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.spinDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_spin"/>
-							<MkTextarea v-model="preview_spin"><template #label>MFM</template></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.shake }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.shakeDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_shake"/>
-							<MkTextarea v-model="preview_shake"><template #label>MFM</template></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.twitch }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.twitchDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_twitch"/>
-							<MkTextarea v-model="preview_twitch"><template #label>MFM</template></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.rainbow }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.rainbowDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_rainbow"/>
-							<MkTextarea v-model="preview_rainbow"><template #label>MFM</template></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.sparkle }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.sparkleDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_sparkle"/>
-							<MkTextarea v-model="preview_sparkle"><span>MFM</span></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.rotate }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.rotateDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_rotate"/>
-							<MkTextarea v-model="preview_rotate"><span>MFM</span></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.crop }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.cropDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_crop" />
-							<MkTextarea v-model="preview_crop"><span>MFM</span></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.position }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.positionDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_position"/>
-							<MkTextarea v-model="preview_position"><span>MFM</span></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block" style="overflow: hidden">
-					<div class="title">{{ i18n.ts._mfm.followMouse }}</div>
-					<MkInfo warn>{{ i18n.ts._mfm.uncommonFeature }}</MkInfo>
-					<br/>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.followMouseDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_followmouse"/>
-							<MkTextarea v-model="preview_followmouse"><span>MFM</span></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.scale }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.scaleDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_scale"/>
-							<MkTextarea v-model="preview_scale"><span>MFM</span></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.fade }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.fadeDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_fade" />
-							<MkTextarea v-model="preview_fade"><span>MFM</span></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.foreground }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.foregroundDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_fg"/>
-							<MkTextarea v-model="preview_fg"><span>MFM</span></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.background }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.backgroundDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_bg"/>
-							<MkTextarea v-model="preview_bg"><span>MFM</span></MkTextarea>
-						</div>
-					</div>
-				</div>
-				<div class="section _block">
-					<div class="title">{{ i18n.ts._mfm.plain }}</div>
-					<div class="content">
-						<p>{{ i18n.ts._mfm.plainDescription }}</p>
-						<div class="preview">
-							<Mfm :text="preview_plain"/>
-							<MkTextarea v-model="preview_plain"><span>MFM</span></MkTextarea>
-						</div>
-					</div>
-				</div>
-			</div>
-		</MkSpacer>
-	</MkStickyContainer>
-</MkWindow>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import MkInfo from './MkInfo.vue';
-import MkWindow from '@/components/MkWindow.vue';
-import MkTextarea from '@/components/MkTextarea.vue';
-import { i18n } from '@/i18n.js';
-
-const emit = defineEmits<{
-	(ev: 'closed'): void;
-}>();
-
-const preview_mention = ref('@example');
-const preview_hashtag = ref('#test');
-const preview_link = ref(`[${i18n.ts._mfm.dummy}](https://joinsharkey.org)`);
-const preview_emoji = ref(':heart:');
-const preview_bold = ref(`**${i18n.ts._mfm.dummy}**`);
-const preview_small = ref(
-	`<small>${i18n.ts._mfm.dummy}</small>`,
-);
-const preview_center = ref(
-	`<center>${i18n.ts._mfm.dummy}</center>`,
-);
-const preview_inlineCode = ref('`<: "Hello, world!"`');
-const preview_blockCode = ref(
-	'```\n~ (#i, 100) {\n\t<: ? ((i % 15) = 0) "FizzBuzz"\n\t\t.? ((i % 3) = 0) "Fizz"\n\t\t.? ((i % 5) = 0) "Buzz"\n\t\t. i\n}\n```',
-);
-const preview_inlineMath = ref(
-	'\\(x= \\frac{-b\' \\pm \\sqrt{(b\')^2-ac}}{a}\\)',
-);
-const preview_blockMath = ref('\\[x= \\frac{-b\' \\pm \\sqrt{(b\')^2-ac}}{a}\\]');
-const preview_quote = ref(`> ${i18n.ts._mfm.dummy}`);
-const preview_search = ref(
-	`${i18n.ts._mfm.dummy} [search]\n${i18n.ts._mfm.dummy} [検索]`,
-);
-const preview_jelly = ref(
-	'$[jelly 🍮] $[jelly.speed=3s 🍮] $[jelly.delay=3s 🍮] $[jelly.loop=3 🍮]',
-);
-const preview_tada = ref(
-	'$[tada 🍮] $[tada.speed=3s 🍮] $[tada.delay=3s 🍮] $[tada.loop=3 🍮]',
-);
-const preview_jump = ref(
-	'$[jump 🍮] $[jump.speed=3s 🍮] $[jump.delay=3s 🍮] $[jump.loop=3 🍮]',
-);
-const preview_bounce = ref(
-	'$[bounce 🍮] $[bounce.speed=3s 🍮] $[bounce.delay=3s 🍮] $[bounce.loop=3 🍮]',
-);
-const preview_shake = ref(
-	'$[shake 🍮] $[shake.speed=3s 🍮] $[shake.delay=3s 🍮] $[shake.loop=3 🍮]',
-);
-const preview_twitch = ref(
-	'$[twitch 🍮] $[twitch.speed=3s 🍮] $[twitch.delay=3s 🍮] $[twitch.loop=3 🍮]',
-);
-const preview_spin = ref(
-	'$[spin 🍮] $[spin.left 🍮] $[spin.alternate 🍮]\n$[spin.x 🍮] $[spin.x,left 🍮] $[spin.x,alternate 🍮]\n$[spin.y 🍮] $[spin.y,left 🍮] $[spin.y,alternate 🍮]\n\n$[spin.speed=3s 🍮] $[spin.delay=3s 🍮] $[spin.loop=3 🍮]',
-);
-const preview_flip = ref(
-	`$[flip ${i18n.ts._mfm.dummy}]\n$[flip.v ${i18n.ts._mfm.dummy}]\n$[flip.h,v ${i18n.ts._mfm.dummy}]`,
-);
-const preview_font = ref(
-	`$[font.serif ${i18n.ts._mfm.dummy}]\n$[font.monospace ${i18n.ts._mfm.dummy}]`,
-);
-const preview_x2 = ref('$[x2 🍮]');
-const preview_x3 = ref('$[x3 🍮]');
-const preview_x4 = ref('$[x4 🍮]');
-const preview_blur = ref(`$[blur ${i18n.ts._mfm.dummy}]`);
-const preview_rainbow = ref(
-	'$[rainbow 🍮] $[rainbow.speed=3s 🍮] $[rainbow.delay=3s 🍮] $[rainbow.loop=3 🍮]',
-);
-const preview_sparkle = ref('$[sparkle 🍮]');
-const preview_rotate = ref(
-	'$[rotate 🍮]\n$[rotate.deg=45 🍮]\n$[rotate.x,deg=45 Hello, world!]',
-);
-const preview_position = ref('$[position.y=-1 🍮]\n$[position.x=-1 🍮]');
-const preview_crop = ref(
-	"$[crop.top=50 🍮] $[crop.right=50 🍮] $[crop.bottom=50 🍮] $[crop.left=50 🍮]",
-);
-const preview_followmouse = ref('$[followmouse.x 🍮]\n$[followmouse.x,y,rotateByVelocity,speed=0.4 🍮]');
-const preview_scale = ref(
-	'$[scale.x=1.3 🍮]\n$[scale.x=1.5,y=3 🍮]\n$[scale.y=0.3 🍮]',
-);
-const preview_fg = ref('$[fg.color=eb6f92 Text color]');
-const preview_bg = ref('$[bg.color=31748f Background color]');
-const preview_plain = ref(
-	'<plain>**bold** @mention #hashtag `code` $[x2 🍮]</plain>',
-);
-const preview_fade = ref(`$[fade 🍮] $[fade.out 🍮] $[fade.speed=3s 🍮] $[fade.delay=3s 🍮]`);
-</script>
-
-<style lang="scss" scoped>
-.mfm-cheat-sheet {
-	> .section {
-		> .title {
-			position: sticky;
-			z-index: 1;
-			top: var(--stickyTop, 0px);
-			padding: 16px;
-			font-weight: bold;
-			-webkit-backdrop-filter: var(--blur, blur(10px));
-			backdrop-filter: var(--blur, blur(10px));
-			background-color: var(--X16);
-		}
-
-		> .content {
-			> p {
-				margin: 0;
-				padding: 16px;
-				padding-top: 0;
-			}
-
-			> .preview {
-				border-top: solid 0.5px var(--divider);
-				padding: 16px;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/frontend/src/components/MkModPlayer.vue b/packages/frontend/src/components/MkModPlayer.vue
deleted file mode 100644
index 58a96cfb63..0000000000
--- a/packages/frontend/src/components/MkModPlayer.vue
+++ /dev/null
@@ -1,696 +0,0 @@
-<!--
-SPDX-FileCopyrightText: marie and other Sharkey contributors
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<div v-if="hide" class="mod-player-disabled" @click="toggleVisible()">
-	<div>
-		<b><i class="ph-eye ph-bold ph-lg"></i> {{ i18n.ts.sensitive }}</b>
-		<span>{{ i18n.ts.clickToShow }}</span>
-	</div>
-</div>
-
-<div v-else class="mod-player-enabled">
-	<div class="pattern-display" @click="togglePattern()" @scroll="scrollHandler" @scrollend="scrollEndHandle">
-		<div v-if="patternHide" class="pattern-hide">
-			<b><i class="ph-eye ph-bold ph-lg"></i> Pattern Hidden</b>
-			<span>{{ i18n.ts.clickToShow }}</span>
-		</div>
-		<span class="patternShadowTop"></span>
-		<span class="patternShadowBottom"></span>
-		<canvas ref="displayCanvas" class="pattern-canvas"></canvas>
-	</div>
-	<div class="controls">
-		<input v-if="patternScrollSliderShow" ref="patternScrollSlider" v-model="patternScrollSliderPos" class="pattern-slider" type="range" min="0" max="100" step="0.01" style=""/>
-		<button class="play" @click="playPause()">
-			<i v-if="playing" class="ph-pause ph-bold ph-lg"></i>
-			<i v-else class="ph-play ph-bold ph-lg"></i>
-		</button>
-		<button class="stop" @click="stop()">
-			<i class="ph-stop ph-bold ph-lg"></i>
-		</button>
-		<input ref="progress" v-model="position" class="progress" type="range" min="0" max="1" step="0.1" @mousedown="initSeek()" @mouseup="performSeek()"/>
-		<input v-model="player.context.gain.value" type="range" min="0" max="1" step="0.1"/>
-		<a class="download" :title="i18n.ts.download" :href="module.url" target="_blank">
-			<i class="ph-download ph-bold ph-lg"></i>
-		</a>
-	</div>
-	<i class="hide ph-eye-slash ph-bold ph-lg" @click="toggleVisible()"></i>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { ref, nextTick, computed, watch, onDeactivated, onMounted } from 'vue';
-import * as Misskey from 'misskey-js';
-import { i18n } from '@/i18n.js';
-import { defaultStore } from '@/store.js';
-import { ChiptuneJsPlayer, ChiptuneJsConfig } from '@/scripts/chiptune2.js';
-import { isTouchUsing } from '@/scripts/touch.js';
-
-const colours = {
-	background: '#000000',
-	foreground: {
-		default: '#ffffff',
-		quarter: '#ffff00',
-		instr: '#80e0ff',
-		volume: '#80ff80',
-		fx: '#ff80e0',
-		operant: '#ffe080',
-	},
-};
-
-const CHAR_WIDTH = 6;
-const CHAR_HEIGHT = 12;
-const ROW_OFFSET_Y = 10;
-const MAX_TIME_SPENT = 50;
-const MAX_TIME_PER_ROW = 15;
-
-const props = defineProps<{
-	module: Misskey.entities.DriveFile
-}>();
-
-const isSensitive = computed(() => { return props.module.isSensitive; });
-const url = computed(() => { return props.module.url; });
-let hide = ref((defaultStore.state.nsfw === 'force') ? true : isSensitive.value && (defaultStore.state.nsfw !== 'ignore'));
-let patternHide = ref(false);
-let playing = ref(false);
-let displayCanvas = ref<HTMLCanvasElement>();
-let progress = ref<HTMLProgressElement>();
-let position = ref(0);
-let patternScrollSlider = ref<HTMLProgressElement>();
-let patternScrollSliderShow = ref(false);
-let patternScrollSliderPos = ref(0);
-const player = ref(new ChiptuneJsPlayer(new ChiptuneJsConfig()));
-
-const maxRowNumbers = 0xFF;
-const rowBuffer = 26;
-let buffer = null;
-let isSeeking = false;
-let firstFrame = true;
-let lastPattern = -1;
-let lastDrawnRow = -1;
-let numberRowCanvas = new OffscreenCanvas(2 * CHAR_WIDTH + 1, maxRowNumbers * CHAR_HEIGHT + 1);
-let alreadyHiddenOnce = false;
-let alreadyDrawn = [false];
-let patternTime = { 'current': 0, 'max': 0, 'initial': 0 };
-
-function bakeNumberRow() {
-	let ctx = numberRowCanvas.getContext('2d', { alpha: false }) as OffscreenCanvasRenderingContext2D;
-	ctx.font = '10px monospace';
-
-	for (let i = 0; i < maxRowNumbers; i++) {
-		let rowText = i.toString(16);
-		if (rowText.length === 1) rowText = '0' + rowText;
-
-		ctx.fillStyle = colours.foreground.default;
-		if (i % 4 === 0) ctx.fillStyle = colours.foreground.quarter;
-
-		ctx.fillText(rowText, 0, 10 + i * 12);
-	}
-}
-
-onMounted(() => {
-	player.value.load(url.value).then((result) => {
-		buffer = result;
-		try {
-			player.value.play(buffer);
-			progress.value!.max = player.value.duration();
-			bakeNumberRow();
-			display();
-		} catch (err) {
-			console.warn(err);
-		}
-		player.value.stop();
-	}).catch((error) => {
-		console.error(error);
-	});
-});
-
-function playPause() {
-	player.value.addHandler('onRowChange', () => {
-		progress.value!.max = player.value.duration();
-		if (!isSeeking) {
-			position.value = player.value.position() % player.value.duration();
-		}
-		display();
-	});
-
-	player.value.addHandler('onEnded', () => {
-		stop();
-	});
-
-	if (player.value.currentPlayingNode === null) {
-		player.value.play(buffer);
-		player.value.seek(position.value);
-		playing.value = true;
-	} else {
-		player.value.togglePause();
-		playing.value = !player.value.currentPlayingNode.paused;
-	}
-}
-
-function stop(noDisplayUpdate = false) {
-	player.value.stop();
-	playing.value = false;
-	if (!noDisplayUpdate) {
-		try {
-			player.value.play(buffer);
-			display(true);
-		} catch (err) {
-			console.warn(err);
-		}
-	}
-	player.value.stop();
-	position.value = 0;
-	player.value.handlers = [];
-}
-
-function initSeek() {
-	isSeeking = true;
-}
-
-function performSeek() {
-	const noNode = !player.value.currentPlayingNode;
-	if (noNode) {
-		player.value.play(buffer);
-	}
-	player.value.seek(position.value);
-	display();
-	if (noNode) {
-		player.value.stop();
-	}
-	isSeeking = false;
-}
-
-function toggleVisible() {
-	hide.value = !hide.value;
-	if (!hide.value) {
-		lastPattern = -1;
-		lastDrawnRow = -1;
-	}
-	nextTick(() => { stop(hide.value); });
-}
-
-function togglePattern() {
-	patternHide.value = !patternHide.value;
-	handleScrollBarEnable();
-
-	if (player.value.getRow() === 0 && player.value.getPattern() === 0) {
-		try {
-			player.value.play(buffer);
-			display(true);
-		} catch (err) {
-			console.warn(err);
-		}
-		player.value.stop();
-	} else {
-		display(true);
-	}
-}
-
-function drawPattern() {
-	if (!displayCanvas.value) return;
-	const canvas = displayCanvas.value;
-
-	const startTime = performance.now();
-	const pattern = player.value.getPattern();
-	const nbRows = player.value.getPatternNumRows(pattern);
-	const row = player.value.getRow();
-	const halfbuf = rowBuffer / 2;
-	const minRow = row - halfbuf;
-	const maxRow = row + halfbuf;
-
-	let rowDif = 0;
-
-	let nbChannels = 0;
-	if (player.value.currentPlayingNode) {
-		nbChannels = player.value.currentPlayingNode.nbChannels;
-	}
-	if (pattern === lastPattern) {
-		rowDif = row - lastDrawnRow;
-	} else {
-		if (patternTime.initial !== 0 && !alreadyHiddenOnce) {
-			const trackerTime = player.value.currentPlayingNode.getProcessTime();
-
-			if (patternTime.initial + trackerTime.max > MAX_TIME_SPENT && trackerTime.max + patternTime.max > MAX_TIME_PER_ROW) {
-				alreadyHiddenOnce = true;
-				togglePattern();
-				return;
-			}
-		}
-
-		patternTime = { 'current': 0, 'max': 0, 'initial': 0 };
-		alreadyDrawn = [];
-		if (canvas.width !== (12 + 84 * nbChannels + 2)) canvas.width = 12 + 84 * nbChannels + 2;
-		if (canvas.height !== (12 * nbRows)) canvas.height = 12 * nbRows;
-	}
-
-	const ctx = canvas.getContext('2d', { alpha: false, desynchronized: true }) as CanvasRenderingContext2D;
-	if (ctx.font !== '10px monospace') ctx.font = '10px monospace';
-	ctx.imageSmoothingEnabled = false;
-	if (pattern !== lastPattern) {
-		ctx.fillStyle = colours.background;
-		ctx.fillRect(0, 0, canvas.width, canvas.height);
-		ctx.drawImage( numberRowCanvas, 0, 0 );
-	}
-
-	ctx.fillStyle = colours.foreground.default;
-	for (let rowOffset = minRow + rowDif; rowOffset < maxRow + rowDif; rowOffset++) {
-		const rowToDraw = rowOffset - rowDif;
-
-		if (alreadyDrawn[rowToDraw] === true) continue;
-
-		if (rowToDraw >= 0 && rowToDraw < nbRows) {
-			const baseOffset = 2 * CHAR_WIDTH;
-			const baseRowOffset = ROW_OFFSET_Y + rowToDraw * CHAR_HEIGHT;
-			let done = drawRow(ctx, rowToDraw, nbChannels, pattern, baseOffset, baseRowOffset);
-
-			alreadyDrawn[rowToDraw] = done;
-		}
-	}
-
-	lastDrawnRow = row;
-	lastPattern = pattern;
-
-	patternTime.current = performance.now() - startTime;
-	if (patternTime.initial !== 0 && patternTime.current > patternTime.max) patternTime.max = patternTime.current;
-	else if (patternTime.initial === 0) patternTime.initial = patternTime.current;
-}
-
-function drawPetternPreview() {
-	if (!displayCanvas.value) return;
-	const canvas = displayCanvas.value;
-
-	const pattern = player.value.getPattern();
-	const nbRows = player.value.getPatternNumRows(pattern);
-	const row = player.value.getRow();
-	const halfbuf = rowBuffer / 2;
-	alreadyDrawn = [];
-
-	let nbChannels = 0;
-	if (player.value.currentPlayingNode) {
-		nbChannels = player.value.currentPlayingNode.nbChannels;
-	}
-	if (canvas.width !== (12 + 84 * nbChannels + 2)) canvas.width = 12 + 84 * nbChannels + 2;
-	if (canvas.height !== (12 * rowBuffer)) canvas.height = 12 * rowBuffer;
-
-	const ctx = canvas.getContext('2d', { alpha: false }) as CanvasRenderingContext2D;
-	ctx.font = '10px monospace';
-	ctx.imageSmoothingEnabled = false;
-	ctx.fillStyle = colours.background;
-	ctx.fillRect(0, 0, canvas.width, canvas.height);
-	ctx.drawImage( numberRowCanvas, 0, (halfbuf - row) * CHAR_HEIGHT );
-
-	for (let rowOffset = 0; rowOffset < rowBuffer; rowOffset++) {
-		const rowToDraw = rowOffset + row - halfbuf;
-
-		if (rowToDraw >= 0 && rowToDraw < nbRows) {
-			const baseOffset = 2 * CHAR_WIDTH;
-			const baseRowOffset = ROW_OFFSET_Y + rowOffset * CHAR_HEIGHT;
-			drawRow(ctx, rowToDraw, nbChannels, pattern, baseOffset, baseRowOffset);
-		} else if (rowToDraw >= 0) {
-			const baseRowOffset = ROW_OFFSET_Y + rowOffset * CHAR_HEIGHT;
-			ctx.fillStyle = colours.background;
-			ctx.fillRect(0, baseRowOffset - CHAR_HEIGHT, CHAR_WIDTH * 2, baseRowOffset);
-		}
-	}
-
-	lastPattern = -1;
-	lastDrawnRow = -1;
-}
-
-function drawRow(ctx: CanvasRenderingContext2D, row: number, channels: number, pattern: number, drawX = (2 * CHAR_WIDTH), drawY = ROW_OFFSET_Y) {
-	if (!player.value.currentPlayingNode) return false;
-	if (alreadyDrawn[row]) return true;
-	const spacer = 11;
-	const space = ' ';
-	let seperators = '';
-	let note = '';
-	let instr = '';
-	let volume = '';
-	let fx = '';
-	let op = '';
-	for (let channel = 0; channel < channels; channel++) {
-		const part = player.value.getPatternRowChannel(pattern, row, channel);
-
-		seperators += '|' + space.repeat( spacer + 2 );
-		note += part.substring(0, 3) + space.repeat( spacer );
-		instr += part.substring(4, 6) + space.repeat( spacer + 1 );
-		volume += part.substring(6, 9) + space.repeat( spacer );
-		fx += part.substring(10, 11) + space.repeat( spacer + 2 );
-		op += part.substring(11, 13) + space.repeat( spacer + 1 );
-	}
-
-	ctx.fillStyle = colours.foreground.default;
-	ctx.fillText(seperators, drawX, drawY);
-
-	ctx.fillStyle = colours.foreground.default;
-	ctx.fillText(note, drawX + CHAR_WIDTH, drawY);
-
-	ctx.fillStyle = colours.foreground.instr;
-	ctx.fillText(instr, drawX + CHAR_WIDTH * 5, drawY);
-
-	ctx.fillStyle = colours.foreground.volume;
-	ctx.fillText(volume, drawX + CHAR_WIDTH * 7, drawY);
-
-	ctx.fillStyle = colours.foreground.fx;
-	ctx.fillText(fx, drawX + CHAR_WIDTH * 11, drawY);
-
-	ctx.fillStyle = colours.foreground.operant;
-	ctx.fillText(op, drawX + CHAR_WIDTH * 12, drawY);
-
-	return true;
-}
-
-function display(skipOptimizationChecks = false) {
-	if (!displayCanvas.value || !displayCanvas.value.parentElement) {
-		stop();
-		return;
-	}
-
-	if (patternHide.value && !skipOptimizationChecks) return;
-
-	if (firstFrame) {
-		// Changing it to false should enable pattern display by default.
-		patternHide.value = true;
-		handleScrollBarEnable();
-		firstFrame = false;
-	}
-
-	const row = player.value.getRow();
-	const pattern = player.value.getPattern();
-
-	if ( row === lastDrawnRow && pattern === lastPattern && !skipOptimizationChecks) return;
-
-	// Size vs speed
-	if (patternHide.value) drawPetternPreview();
-	else drawPattern();
-
-	displayCanvas.value.style.top = !patternHide.value ? 'calc( 50% - ' + (row * CHAR_HEIGHT) + 'px )' : '0%';
-}
-
-let suppressScrollSliderWatcher = false;
-
-function scrollHandler() {
-	suppressScrollSliderWatcher = true;
-
-	if (!patternScrollSlider.value) return;
-	if (!displayCanvas.value) return;
-	if (!displayCanvas.value.parentElement) return;
-
-	patternScrollSliderPos.value = (displayCanvas.value.parentElement.scrollLeft) / (displayCanvas.value.width - displayCanvas.value.parentElement.offsetWidth) * 100;
-	patternScrollSlider.value.style.opacity = '1';
-}
-
-function scrollEndHandle() {
-	suppressScrollSliderWatcher = false;
-
-	if (!patternScrollSlider.value) return;
-	patternScrollSlider.value.style.opacity = '';
-}
-
-function handleScrollBarEnable() {
-	patternScrollSliderShow.value = (!patternHide.value && !isTouchUsing);
-	if (patternScrollSliderShow.value !== true) return;
-
-	if (!displayCanvas.value) return;
-	if (!displayCanvas.value.parentElement) return;
-	if (firstFrame) {
-		patternScrollSliderShow.value = (12 + 84 * player.value.getPatternNumRows(player.value.getPattern()) + 2 > displayCanvas.value.parentElement.offsetWidth);
-	} else {
-		patternScrollSliderShow.value = (displayCanvas.value.width > displayCanvas.value.parentElement.offsetWidth);
-	}
-}
-
-watch(patternScrollSliderPos, () => {
-	if (suppressScrollSliderWatcher) return;
-	if (!displayCanvas.value) return;
-	if (!displayCanvas.value.parentElement) return;
-
-	displayCanvas.value.parentElement.scrollLeft = (displayCanvas.value.width - displayCanvas.value.parentElement.offsetWidth) * patternScrollSliderPos.value / 100;
-});
-
-onDeactivated(() => {
-	stop();
-});
-
-</script>
-
-<style lang="scss" scoped>
-
-.hide {
-	border-radius: var(--radius-sm) !important;
-	background-color: black !important;
-	color: var(--accentLighten) !important;
-	font-size: 12px !important;
-}
-
-.mod-player-enabled {
-	position: relative;
-	overflow: hidden;
-	display: flex;
-	flex-direction: column;
-
-	> i {
-		display: block;
-		position: absolute;
-		border-radius: var(--radius-sm);
-		background-color: var(--fg);
-		color: var(--accentLighten);
-		font-size: 14px;
-		opacity: .5;
-		padding: 3px 6px;
-		text-align: center;
-		cursor: pointer;
-		top: 12px;
-		right: 12px;
-		z-index: 4;
-	}
-
-	> .pattern-display {
-		width: 100%;
-		height: 100%;
-		overflow-x: scroll;
-		overflow-y: hidden;
-		background-color: black;
-		text-align: center;
-		max-height: 312px; /* magic_number = CHAR_HEIGHT * rowBuffer, needs to be in px */
-
-		scrollbar-width: none;
-
-		&::-webkit-scrollbar {
-			display: none;
-		}
-
-		.pattern-canvas {
-			position: relative;
-			background-color: black;
-			image-rendering: pixelated;
-			pointer-events: none;
-			z-index: 0;
-		}
-
-		.patternShadowTop {
-			background: #00000080;
-			width: 100%;
-			height: calc( 50% - 14px );
-			translate: 0 -100%;
-			top: calc( 50% - 14px );
-			position: absolute;
-			pointer-events: none;
-			z-index: 2;
-		}
-
-		.patternShadowBottom {
-			background: #00000080;
-			width: 100%;
-			height: calc( 50% - 12px );
-			top: calc( 50% - 1px );
-			position: absolute;
-			pointer-events: none;
-			z-index: 2;
-		}
-
-		.pattern-hide {
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
-			align-items: center;
-			background: rgba(64, 64, 64, 0.3);
-			backdrop-filter: var(--modalBgFilter);
-			color: #fff;
-			font-size: 12px;
-
-			position: absolute;
-			z-index: 4;
-			width: 100%;
-			height: 100%;
-
-			> span {
-				display: block;
-			}
-		}
-	}
-
-	> .controls {
-		display: flex;
-		width: 100%;
-		background-color: var(--bg);
-		z-index: 5;
-
-		> * {
-			padding: 4px 8px;
-		}
-
-		> button, a {
-			border: none;
-			background-color: transparent;
-			color: var(--accent);
-			cursor: pointer;
-
-			&:hover {
-				background-color: var(--fg);
-			}
-		}
-
-		> input[type=range] {
-			height: 21px;
-			-webkit-appearance: none;
-			width: 90px;
-			padding: 0;
-			margin: 4px 8px;
-			overflow-x: hidden;
-
-			&.pattern-slider {
-				position: absolute;
-				width: calc( 100% - 8px * 2 );
-				top: calc( 100% - 21px * 3 );
-				opacity: 0%;
-				transition: opacity 0.2s;
-
-				&:hover {
-					opacity: 100%;
-				}
-			}
-
-			&:focus {
-				outline: none;
-
-				&::-webkit-slider-runnable-track {
-					background: var(--bg);
-				}
-
-				&::-ms-fill-lower, &::-ms-fill-upper {
-					background: var(--bg);
-				}
-			}
-
-			&::-webkit-slider-runnable-track {
-				width: 100%;
-				height: 100%;
-				cursor: pointer;
-				border-radius: 0;
-				animate: 0.2s;
-				background: var(--bg);
-				border: 1px solid var(--fg);
-				overflow-x: hidden;
-			}
-
-			&::-webkit-slider-thumb {
-				border: none;
-				height: 100%;
-				width: 14px;
-				border-radius: 0;
-				background: var(--accentLighten);
-				cursor: pointer;
-				-webkit-appearance: none;
-				box-shadow: calc(-100vw - 14px) 0 0 100vw var(--accent);
-				clip-path: polygon(1px 0, 100% 0, 100% 100%, 1px 100%, 1px calc(50% + 10.5px), -100vw calc(50% + 10.5px), -100vw calc(50% - 10.5px), 0 calc(50% - 10.5px));
-				z-index: 1;
-			}
-
-			&::-moz-range-track {
-				width: 100%;
-				height: 100%;
-				cursor: pointer;
-				border-radius: 0;
-				animate: 0.2s;
-				background: var(--bg);
-				border: 1px solid var(--fg);
-			}
-
-			&::-moz-range-progress {
-				cursor: pointer;
-				height: 100%;
-				background: var(--accent);
-			}
-
-			&::-moz-range-thumb {
-				border: none;
-				height: 100%;
-				border-radius: 0;
-				width: 14px;
-				background: var(--accentLighten);
-				cursor: pointer;
-			}
-
-			&::-ms-track {
-				width: 100%;
-				height: 100%;
-				cursor: pointer;
-				border-radius: 0;
-				animate: 0.2s;
-				background: transparent;
-				border-color: transparent;
-				color: transparent;
-			}
-
-			&::-ms-fill-lower {
-				background: var(--accent);
-				border: 1px solid var(--fg);
-				border-radius: 0;
-			}
-
-			&::-ms-fill-upper {
-				background: var(--bg);
-				border: 1px solid var(--fg);
-				border-radius: 0;
-			}
-
-			&::-ms-thumb {
-				margin-top: 1px;
-				border: none;
-				height: 100%;
-				width: 14px;
-				border-radius: 0;
-				background: var(--accentLighten);
-				cursor: pointer;
-			}
-
-			&.progress {
-				flex-grow: 1;
-				min-width: 0;
-			}
-		}
-	}
-}
-
-.mod-player-disabled {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	background: #111;
-	color: #fff;
-
-	> div {
-		display: table-cell;
-		text-align: center;
-		font-size: 12px;
-
-		> b {
-			display: block;
-		}
-	}
-}
-</style>
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index cfaaeecc34..cf472650fe 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -372,7 +372,7 @@ function watchForDraft() {
 }
 
 function MFMWindow() {
-	os.popup(defineAsyncComponent(() => import('@/components/MkMfmWindow.vue')), {}, {}, 'closed');
+	os.popup(defineAsyncComponent(() => import('@/components/SkMfmWindow.vue')), {}, {}, 'closed');
 }
 
 function checkMissingMention() {
diff --git a/packages/frontend/src/components/SkFormula.vue b/packages/frontend/src/components/SkFormula.vue
new file mode 100644
index 0000000000..039cef8da8
--- /dev/null
+++ b/packages/frontend/src/components/SkFormula.vue
@@ -0,0 +1,33 @@
+<!--
+SPDX-FileCopyrightText: dakkar, MoshiBar, and other Sharkey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+	<div v-if="block" :class="$style.block" v-html="renderedFormula"></div>
+	<span v-else v-html="renderedFormula"></span>
+</template>
+
+<script lang="ts" setup>
+	import { computed } from 'vue';
+	import katex from 'katex';
+	import 'katex/dist/katex.min.css';
+
+	const props = defineProps<{
+		formula: string;
+		block: boolean;
+	}>();
+
+	const renderedFormula = computed(() =>
+		katex.renderToString(props.formula, {
+			throwOnError: false,
+			trust: false,
+			displayMode: props.block,
+		} as any));
+</script>
+
+<style lang="scss" module>
+	.block {
+		text-align: center;
+	}
+</style>
diff --git a/packages/frontend/src/components/SkMfmWindow.vue b/packages/frontend/src/components/SkMfmWindow.vue
new file mode 100644
index 0000000000..c599531ec5
--- /dev/null
+++ b/packages/frontend/src/components/SkMfmWindow.vue
@@ -0,0 +1,516 @@
+<!--
+SPDX-FileCopyrightText: marie and other Sharkey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkWindow
+	ref="window"
+	:initialWidth="600"
+	:initialHeight="800"
+	:canResize="true"
+	@closed="emit('closed')"
+>
+	<template #header>
+		MFM Cheatsheet
+	</template>
+	<MkStickyContainer>
+		<MkSpacer :contentMax="800">
+			<div class="mfm-cheat-sheet">
+				<div>{{ i18n.ts._mfm.intro }}</div>
+				<br/>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.mention }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.mentionDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_mention"/>
+							<MkTextarea v-model="preview_mention"><template #label>MFM</template></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.hashtag }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.hashtagDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_hashtag"/>
+							<MkTextarea v-model="preview_hashtag"><template #label>MFM</template></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.link }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.linkDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_link"/>
+							<MkTextarea v-model="preview_link"><template #label>MFM</template></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.emoji }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.emojiDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_emoji"/>
+							<MkTextarea v-model="preview_emoji"><template #label>MFM</template></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.bold }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.boldDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_bold"/>
+							<MkTextarea v-model="preview_bold"><template #label>MFM</template></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.small }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.smallDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_small"/>
+							<MkTextarea v-model="preview_small"><template #label>MFM</template></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.quote }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.quoteDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_quote"/>
+							<MkTextarea v-model="preview_quote"><template #label>MFM</template></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.center }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.centerDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_center"/>
+							<MkTextarea v-model="preview_center"><template #label>MFM</template></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.inlineCode }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.inlineCodeDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_inlineCode"/>
+							<MkTextarea v-model="preview_inlineCode"><template #label>MFM</template></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.blockCode }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.blockCodeDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_blockCode"/>
+							<MkTextarea v-model="preview_blockCode"><template #label>MFM</template></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.inlineMath }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.inlineMathDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_inlineMath"/>
+							<MkTextarea v-model="preview_inlineMath"><template #label>MFM</template></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.blockMath }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.blockMathDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_blockMath"/>
+							<MkTextarea v-model="preview_blockMath"><template #label>MFM</template></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.search }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.searchDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_search"/>
+							<MkTextarea v-model="preview_search"><template #label>MFM</template></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.flip }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.flipDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_flip"/>
+							<MkTextarea v-model="preview_flip"><template #label>MFM</template></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.font }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.fontDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_font"/>
+							<MkTextarea v-model="preview_font"><template #label>MFM</template></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.x2 }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.x2Description }}</p>
+						<div class="preview">
+							<Mfm :text="preview_x2"/>
+							<MkTextarea v-model="preview_x2"><template #label>MFM</template></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.x3 }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.x3Description }}</p>
+						<div class="preview">
+							<Mfm :text="preview_x3"/>
+							<MkTextarea v-model="preview_x3"><template #label>MFM</template></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.x4 }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.x4Description }}</p>
+						<div class="preview">
+							<Mfm :text="preview_x4"/>
+							<MkTextarea v-model="preview_x4"><template #label>MFM</template></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.blur }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.blurDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_blur"/>
+							<MkTextarea v-model="preview_blur"><template #label>MFM</template></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.jelly }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.jellyDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_jelly"/>
+							<MkTextarea v-model="preview_jelly"><template #label>MFM</template></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.tada }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.tadaDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_tada"/>
+							<MkTextarea v-model="preview_tada"><template #label>MFM</template></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.jump }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.jumpDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_jump"/>
+							<MkTextarea v-model="preview_jump"><template #label>MFM</template></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.bounce }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.bounceDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_bounce"/>
+							<MkTextarea v-model="preview_bounce"><template #label>MFM</template></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.spin }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.spinDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_spin"/>
+							<MkTextarea v-model="preview_spin"><template #label>MFM</template></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.shake }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.shakeDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_shake"/>
+							<MkTextarea v-model="preview_shake"><template #label>MFM</template></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.twitch }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.twitchDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_twitch"/>
+							<MkTextarea v-model="preview_twitch"><template #label>MFM</template></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.rainbow }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.rainbowDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_rainbow"/>
+							<MkTextarea v-model="preview_rainbow"><template #label>MFM</template></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.sparkle }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.sparkleDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_sparkle"/>
+							<MkTextarea v-model="preview_sparkle"><span>MFM</span></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.rotate }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.rotateDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_rotate"/>
+							<MkTextarea v-model="preview_rotate"><span>MFM</span></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.crop }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.cropDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_crop" />
+							<MkTextarea v-model="preview_crop"><span>MFM</span></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.position }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.positionDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_position"/>
+							<MkTextarea v-model="preview_position"><span>MFM</span></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block" style="overflow: hidden">
+					<div class="title">{{ i18n.ts._mfm.followMouse }}</div>
+					<MkInfo warn>{{ i18n.ts._mfm.uncommonFeature }}</MkInfo>
+					<br/>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.followMouseDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_followmouse"/>
+							<MkTextarea v-model="preview_followmouse"><span>MFM</span></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.scale }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.scaleDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_scale"/>
+							<MkTextarea v-model="preview_scale"><span>MFM</span></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.fade }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.fadeDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_fade" />
+							<MkTextarea v-model="preview_fade"><span>MFM</span></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.foreground }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.foregroundDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_fg"/>
+							<MkTextarea v-model="preview_fg"><span>MFM</span></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.background }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.backgroundDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_bg"/>
+							<MkTextarea v-model="preview_bg"><span>MFM</span></MkTextarea>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.plain }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.plainDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_plain"/>
+							<MkTextarea v-model="preview_plain"><span>MFM</span></MkTextarea>
+						</div>
+					</div>
+				</div>
+			</div>
+		</MkSpacer>
+	</MkStickyContainer>
+</MkWindow>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import MkInfo from './MkInfo.vue';
+import MkWindow from '@/components/MkWindow.vue';
+import MkTextarea from '@/components/MkTextarea.vue';
+import { i18n } from '@/i18n.js';
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+
+const preview_mention = ref('@example');
+const preview_hashtag = ref('#test');
+const preview_link = ref(`[${i18n.ts._mfm.dummy}](https://joinsharkey.org)`);
+const preview_emoji = ref(':heart:');
+const preview_bold = ref(`**${i18n.ts._mfm.dummy}**`);
+const preview_small = ref(
+	`<small>${i18n.ts._mfm.dummy}</small>`,
+);
+const preview_center = ref(
+	`<center>${i18n.ts._mfm.dummy}</center>`,
+);
+const preview_inlineCode = ref('`<: "Hello, world!"`');
+const preview_blockCode = ref(
+	'```\n~ (#i, 100) {\n\t<: ? ((i % 15) = 0) "FizzBuzz"\n\t\t.? ((i % 3) = 0) "Fizz"\n\t\t.? ((i % 5) = 0) "Buzz"\n\t\t. i\n}\n```',
+);
+const preview_inlineMath = ref(
+	'\\(x= \\frac{-b\' \\pm \\sqrt{(b\')^2-ac}}{a}\\)',
+);
+const preview_blockMath = ref('\\[x= \\frac{-b\' \\pm \\sqrt{(b\')^2-ac}}{a}\\]');
+const preview_quote = ref(`> ${i18n.ts._mfm.dummy}`);
+const preview_search = ref(
+	`${i18n.ts._mfm.dummy} [search]\n${i18n.ts._mfm.dummy} [検索]`,
+);
+const preview_jelly = ref(
+	'$[jelly 🍮] $[jelly.speed=3s 🍮] $[jelly.delay=3s 🍮] $[jelly.loop=3 🍮]',
+);
+const preview_tada = ref(
+	'$[tada 🍮] $[tada.speed=3s 🍮] $[tada.delay=3s 🍮] $[tada.loop=3 🍮]',
+);
+const preview_jump = ref(
+	'$[jump 🍮] $[jump.speed=3s 🍮] $[jump.delay=3s 🍮] $[jump.loop=3 🍮]',
+);
+const preview_bounce = ref(
+	'$[bounce 🍮] $[bounce.speed=3s 🍮] $[bounce.delay=3s 🍮] $[bounce.loop=3 🍮]',
+);
+const preview_shake = ref(
+	'$[shake 🍮] $[shake.speed=3s 🍮] $[shake.delay=3s 🍮] $[shake.loop=3 🍮]',
+);
+const preview_twitch = ref(
+	'$[twitch 🍮] $[twitch.speed=3s 🍮] $[twitch.delay=3s 🍮] $[twitch.loop=3 🍮]',
+);
+const preview_spin = ref(
+	'$[spin 🍮] $[spin.left 🍮] $[spin.alternate 🍮]\n$[spin.x 🍮] $[spin.x,left 🍮] $[spin.x,alternate 🍮]\n$[spin.y 🍮] $[spin.y,left 🍮] $[spin.y,alternate 🍮]\n\n$[spin.speed=3s 🍮] $[spin.delay=3s 🍮] $[spin.loop=3 🍮]',
+);
+const preview_flip = ref(
+	`$[flip ${i18n.ts._mfm.dummy}]\n$[flip.v ${i18n.ts._mfm.dummy}]\n$[flip.h,v ${i18n.ts._mfm.dummy}]`,
+);
+const preview_font = ref(
+	`$[font.serif ${i18n.ts._mfm.dummy}]\n$[font.monospace ${i18n.ts._mfm.dummy}]`,
+);
+const preview_x2 = ref('$[x2 🍮]');
+const preview_x3 = ref('$[x3 🍮]');
+const preview_x4 = ref('$[x4 🍮]');
+const preview_blur = ref(`$[blur ${i18n.ts._mfm.dummy}]`);
+const preview_rainbow = ref(
+	'$[rainbow 🍮] $[rainbow.speed=3s 🍮] $[rainbow.delay=3s 🍮] $[rainbow.loop=3 🍮]',
+);
+const preview_sparkle = ref('$[sparkle 🍮]');
+const preview_rotate = ref(
+	'$[rotate 🍮]\n$[rotate.deg=45 🍮]\n$[rotate.x,deg=45 Hello, world!]',
+);
+const preview_position = ref('$[position.y=-1 🍮]\n$[position.x=-1 🍮]');
+const preview_crop = ref(
+	"$[crop.top=50 🍮] $[crop.right=50 🍮] $[crop.bottom=50 🍮] $[crop.left=50 🍮]",
+);
+const preview_followmouse = ref('$[followmouse.x 🍮]\n$[followmouse.x,y,rotateByVelocity,speed=0.4 🍮]');
+const preview_scale = ref(
+	'$[scale.x=1.3 🍮]\n$[scale.x=1.5,y=3 🍮]\n$[scale.y=0.3 🍮]',
+);
+const preview_fg = ref('$[fg.color=eb6f92 Text color]');
+const preview_bg = ref('$[bg.color=31748f Background color]');
+const preview_plain = ref(
+	'<plain>**bold** @mention #hashtag `code` $[x2 🍮]</plain>',
+);
+const preview_fade = ref(`$[fade 🍮] $[fade.out 🍮] $[fade.speed=3s 🍮] $[fade.delay=3s 🍮]`);
+</script>
+
+<style lang="scss" scoped>
+.mfm-cheat-sheet {
+	> .section {
+		> .title {
+			position: sticky;
+			z-index: 1;
+			top: var(--stickyTop, 0px);
+			padding: 16px;
+			font-weight: bold;
+			-webkit-backdrop-filter: var(--blur, blur(10px));
+			backdrop-filter: var(--blur, blur(10px));
+			background-color: var(--X16);
+		}
+
+		> .content {
+			> p {
+				margin: 0;
+				padding: 16px;
+				padding-top: 0;
+			}
+
+			> .preview {
+				border-top: solid 0.5px var(--divider);
+				padding: 16px;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
new file mode 100644
index 0000000000..58a96cfb63
--- /dev/null
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -0,0 +1,696 @@
+<!--
+SPDX-FileCopyrightText: marie and other Sharkey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div v-if="hide" class="mod-player-disabled" @click="toggleVisible()">
+	<div>
+		<b><i class="ph-eye ph-bold ph-lg"></i> {{ i18n.ts.sensitive }}</b>
+		<span>{{ i18n.ts.clickToShow }}</span>
+	</div>
+</div>
+
+<div v-else class="mod-player-enabled">
+	<div class="pattern-display" @click="togglePattern()" @scroll="scrollHandler" @scrollend="scrollEndHandle">
+		<div v-if="patternHide" class="pattern-hide">
+			<b><i class="ph-eye ph-bold ph-lg"></i> Pattern Hidden</b>
+			<span>{{ i18n.ts.clickToShow }}</span>
+		</div>
+		<span class="patternShadowTop"></span>
+		<span class="patternShadowBottom"></span>
+		<canvas ref="displayCanvas" class="pattern-canvas"></canvas>
+	</div>
+	<div class="controls">
+		<input v-if="patternScrollSliderShow" ref="patternScrollSlider" v-model="patternScrollSliderPos" class="pattern-slider" type="range" min="0" max="100" step="0.01" style=""/>
+		<button class="play" @click="playPause()">
+			<i v-if="playing" class="ph-pause ph-bold ph-lg"></i>
+			<i v-else class="ph-play ph-bold ph-lg"></i>
+		</button>
+		<button class="stop" @click="stop()">
+			<i class="ph-stop ph-bold ph-lg"></i>
+		</button>
+		<input ref="progress" v-model="position" class="progress" type="range" min="0" max="1" step="0.1" @mousedown="initSeek()" @mouseup="performSeek()"/>
+		<input v-model="player.context.gain.value" type="range" min="0" max="1" step="0.1"/>
+		<a class="download" :title="i18n.ts.download" :href="module.url" target="_blank">
+			<i class="ph-download ph-bold ph-lg"></i>
+		</a>
+	</div>
+	<i class="hide ph-eye-slash ph-bold ph-lg" @click="toggleVisible()"></i>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, nextTick, computed, watch, onDeactivated, onMounted } from 'vue';
+import * as Misskey from 'misskey-js';
+import { i18n } from '@/i18n.js';
+import { defaultStore } from '@/store.js';
+import { ChiptuneJsPlayer, ChiptuneJsConfig } from '@/scripts/chiptune2.js';
+import { isTouchUsing } from '@/scripts/touch.js';
+
+const colours = {
+	background: '#000000',
+	foreground: {
+		default: '#ffffff',
+		quarter: '#ffff00',
+		instr: '#80e0ff',
+		volume: '#80ff80',
+		fx: '#ff80e0',
+		operant: '#ffe080',
+	},
+};
+
+const CHAR_WIDTH = 6;
+const CHAR_HEIGHT = 12;
+const ROW_OFFSET_Y = 10;
+const MAX_TIME_SPENT = 50;
+const MAX_TIME_PER_ROW = 15;
+
+const props = defineProps<{
+	module: Misskey.entities.DriveFile
+}>();
+
+const isSensitive = computed(() => { return props.module.isSensitive; });
+const url = computed(() => { return props.module.url; });
+let hide = ref((defaultStore.state.nsfw === 'force') ? true : isSensitive.value && (defaultStore.state.nsfw !== 'ignore'));
+let patternHide = ref(false);
+let playing = ref(false);
+let displayCanvas = ref<HTMLCanvasElement>();
+let progress = ref<HTMLProgressElement>();
+let position = ref(0);
+let patternScrollSlider = ref<HTMLProgressElement>();
+let patternScrollSliderShow = ref(false);
+let patternScrollSliderPos = ref(0);
+const player = ref(new ChiptuneJsPlayer(new ChiptuneJsConfig()));
+
+const maxRowNumbers = 0xFF;
+const rowBuffer = 26;
+let buffer = null;
+let isSeeking = false;
+let firstFrame = true;
+let lastPattern = -1;
+let lastDrawnRow = -1;
+let numberRowCanvas = new OffscreenCanvas(2 * CHAR_WIDTH + 1, maxRowNumbers * CHAR_HEIGHT + 1);
+let alreadyHiddenOnce = false;
+let alreadyDrawn = [false];
+let patternTime = { 'current': 0, 'max': 0, 'initial': 0 };
+
+function bakeNumberRow() {
+	let ctx = numberRowCanvas.getContext('2d', { alpha: false }) as OffscreenCanvasRenderingContext2D;
+	ctx.font = '10px monospace';
+
+	for (let i = 0; i < maxRowNumbers; i++) {
+		let rowText = i.toString(16);
+		if (rowText.length === 1) rowText = '0' + rowText;
+
+		ctx.fillStyle = colours.foreground.default;
+		if (i % 4 === 0) ctx.fillStyle = colours.foreground.quarter;
+
+		ctx.fillText(rowText, 0, 10 + i * 12);
+	}
+}
+
+onMounted(() => {
+	player.value.load(url.value).then((result) => {
+		buffer = result;
+		try {
+			player.value.play(buffer);
+			progress.value!.max = player.value.duration();
+			bakeNumberRow();
+			display();
+		} catch (err) {
+			console.warn(err);
+		}
+		player.value.stop();
+	}).catch((error) => {
+		console.error(error);
+	});
+});
+
+function playPause() {
+	player.value.addHandler('onRowChange', () => {
+		progress.value!.max = player.value.duration();
+		if (!isSeeking) {
+			position.value = player.value.position() % player.value.duration();
+		}
+		display();
+	});
+
+	player.value.addHandler('onEnded', () => {
+		stop();
+	});
+
+	if (player.value.currentPlayingNode === null) {
+		player.value.play(buffer);
+		player.value.seek(position.value);
+		playing.value = true;
+	} else {
+		player.value.togglePause();
+		playing.value = !player.value.currentPlayingNode.paused;
+	}
+}
+
+function stop(noDisplayUpdate = false) {
+	player.value.stop();
+	playing.value = false;
+	if (!noDisplayUpdate) {
+		try {
+			player.value.play(buffer);
+			display(true);
+		} catch (err) {
+			console.warn(err);
+		}
+	}
+	player.value.stop();
+	position.value = 0;
+	player.value.handlers = [];
+}
+
+function initSeek() {
+	isSeeking = true;
+}
+
+function performSeek() {
+	const noNode = !player.value.currentPlayingNode;
+	if (noNode) {
+		player.value.play(buffer);
+	}
+	player.value.seek(position.value);
+	display();
+	if (noNode) {
+		player.value.stop();
+	}
+	isSeeking = false;
+}
+
+function toggleVisible() {
+	hide.value = !hide.value;
+	if (!hide.value) {
+		lastPattern = -1;
+		lastDrawnRow = -1;
+	}
+	nextTick(() => { stop(hide.value); });
+}
+
+function togglePattern() {
+	patternHide.value = !patternHide.value;
+	handleScrollBarEnable();
+
+	if (player.value.getRow() === 0 && player.value.getPattern() === 0) {
+		try {
+			player.value.play(buffer);
+			display(true);
+		} catch (err) {
+			console.warn(err);
+		}
+		player.value.stop();
+	} else {
+		display(true);
+	}
+}
+
+function drawPattern() {
+	if (!displayCanvas.value) return;
+	const canvas = displayCanvas.value;
+
+	const startTime = performance.now();
+	const pattern = player.value.getPattern();
+	const nbRows = player.value.getPatternNumRows(pattern);
+	const row = player.value.getRow();
+	const halfbuf = rowBuffer / 2;
+	const minRow = row - halfbuf;
+	const maxRow = row + halfbuf;
+
+	let rowDif = 0;
+
+	let nbChannels = 0;
+	if (player.value.currentPlayingNode) {
+		nbChannels = player.value.currentPlayingNode.nbChannels;
+	}
+	if (pattern === lastPattern) {
+		rowDif = row - lastDrawnRow;
+	} else {
+		if (patternTime.initial !== 0 && !alreadyHiddenOnce) {
+			const trackerTime = player.value.currentPlayingNode.getProcessTime();
+
+			if (patternTime.initial + trackerTime.max > MAX_TIME_SPENT && trackerTime.max + patternTime.max > MAX_TIME_PER_ROW) {
+				alreadyHiddenOnce = true;
+				togglePattern();
+				return;
+			}
+		}
+
+		patternTime = { 'current': 0, 'max': 0, 'initial': 0 };
+		alreadyDrawn = [];
+		if (canvas.width !== (12 + 84 * nbChannels + 2)) canvas.width = 12 + 84 * nbChannels + 2;
+		if (canvas.height !== (12 * nbRows)) canvas.height = 12 * nbRows;
+	}
+
+	const ctx = canvas.getContext('2d', { alpha: false, desynchronized: true }) as CanvasRenderingContext2D;
+	if (ctx.font !== '10px monospace') ctx.font = '10px monospace';
+	ctx.imageSmoothingEnabled = false;
+	if (pattern !== lastPattern) {
+		ctx.fillStyle = colours.background;
+		ctx.fillRect(0, 0, canvas.width, canvas.height);
+		ctx.drawImage( numberRowCanvas, 0, 0 );
+	}
+
+	ctx.fillStyle = colours.foreground.default;
+	for (let rowOffset = minRow + rowDif; rowOffset < maxRow + rowDif; rowOffset++) {
+		const rowToDraw = rowOffset - rowDif;
+
+		if (alreadyDrawn[rowToDraw] === true) continue;
+
+		if (rowToDraw >= 0 && rowToDraw < nbRows) {
+			const baseOffset = 2 * CHAR_WIDTH;
+			const baseRowOffset = ROW_OFFSET_Y + rowToDraw * CHAR_HEIGHT;
+			let done = drawRow(ctx, rowToDraw, nbChannels, pattern, baseOffset, baseRowOffset);
+
+			alreadyDrawn[rowToDraw] = done;
+		}
+	}
+
+	lastDrawnRow = row;
+	lastPattern = pattern;
+
+	patternTime.current = performance.now() - startTime;
+	if (patternTime.initial !== 0 && patternTime.current > patternTime.max) patternTime.max = patternTime.current;
+	else if (patternTime.initial === 0) patternTime.initial = patternTime.current;
+}
+
+function drawPetternPreview() {
+	if (!displayCanvas.value) return;
+	const canvas = displayCanvas.value;
+
+	const pattern = player.value.getPattern();
+	const nbRows = player.value.getPatternNumRows(pattern);
+	const row = player.value.getRow();
+	const halfbuf = rowBuffer / 2;
+	alreadyDrawn = [];
+
+	let nbChannels = 0;
+	if (player.value.currentPlayingNode) {
+		nbChannels = player.value.currentPlayingNode.nbChannels;
+	}
+	if (canvas.width !== (12 + 84 * nbChannels + 2)) canvas.width = 12 + 84 * nbChannels + 2;
+	if (canvas.height !== (12 * rowBuffer)) canvas.height = 12 * rowBuffer;
+
+	const ctx = canvas.getContext('2d', { alpha: false }) as CanvasRenderingContext2D;
+	ctx.font = '10px monospace';
+	ctx.imageSmoothingEnabled = false;
+	ctx.fillStyle = colours.background;
+	ctx.fillRect(0, 0, canvas.width, canvas.height);
+	ctx.drawImage( numberRowCanvas, 0, (halfbuf - row) * CHAR_HEIGHT );
+
+	for (let rowOffset = 0; rowOffset < rowBuffer; rowOffset++) {
+		const rowToDraw = rowOffset + row - halfbuf;
+
+		if (rowToDraw >= 0 && rowToDraw < nbRows) {
+			const baseOffset = 2 * CHAR_WIDTH;
+			const baseRowOffset = ROW_OFFSET_Y + rowOffset * CHAR_HEIGHT;
+			drawRow(ctx, rowToDraw, nbChannels, pattern, baseOffset, baseRowOffset);
+		} else if (rowToDraw >= 0) {
+			const baseRowOffset = ROW_OFFSET_Y + rowOffset * CHAR_HEIGHT;
+			ctx.fillStyle = colours.background;
+			ctx.fillRect(0, baseRowOffset - CHAR_HEIGHT, CHAR_WIDTH * 2, baseRowOffset);
+		}
+	}
+
+	lastPattern = -1;
+	lastDrawnRow = -1;
+}
+
+function drawRow(ctx: CanvasRenderingContext2D, row: number, channels: number, pattern: number, drawX = (2 * CHAR_WIDTH), drawY = ROW_OFFSET_Y) {
+	if (!player.value.currentPlayingNode) return false;
+	if (alreadyDrawn[row]) return true;
+	const spacer = 11;
+	const space = ' ';
+	let seperators = '';
+	let note = '';
+	let instr = '';
+	let volume = '';
+	let fx = '';
+	let op = '';
+	for (let channel = 0; channel < channels; channel++) {
+		const part = player.value.getPatternRowChannel(pattern, row, channel);
+
+		seperators += '|' + space.repeat( spacer + 2 );
+		note += part.substring(0, 3) + space.repeat( spacer );
+		instr += part.substring(4, 6) + space.repeat( spacer + 1 );
+		volume += part.substring(6, 9) + space.repeat( spacer );
+		fx += part.substring(10, 11) + space.repeat( spacer + 2 );
+		op += part.substring(11, 13) + space.repeat( spacer + 1 );
+	}
+
+	ctx.fillStyle = colours.foreground.default;
+	ctx.fillText(seperators, drawX, drawY);
+
+	ctx.fillStyle = colours.foreground.default;
+	ctx.fillText(note, drawX + CHAR_WIDTH, drawY);
+
+	ctx.fillStyle = colours.foreground.instr;
+	ctx.fillText(instr, drawX + CHAR_WIDTH * 5, drawY);
+
+	ctx.fillStyle = colours.foreground.volume;
+	ctx.fillText(volume, drawX + CHAR_WIDTH * 7, drawY);
+
+	ctx.fillStyle = colours.foreground.fx;
+	ctx.fillText(fx, drawX + CHAR_WIDTH * 11, drawY);
+
+	ctx.fillStyle = colours.foreground.operant;
+	ctx.fillText(op, drawX + CHAR_WIDTH * 12, drawY);
+
+	return true;
+}
+
+function display(skipOptimizationChecks = false) {
+	if (!displayCanvas.value || !displayCanvas.value.parentElement) {
+		stop();
+		return;
+	}
+
+	if (patternHide.value && !skipOptimizationChecks) return;
+
+	if (firstFrame) {
+		// Changing it to false should enable pattern display by default.
+		patternHide.value = true;
+		handleScrollBarEnable();
+		firstFrame = false;
+	}
+
+	const row = player.value.getRow();
+	const pattern = player.value.getPattern();
+
+	if ( row === lastDrawnRow && pattern === lastPattern && !skipOptimizationChecks) return;
+
+	// Size vs speed
+	if (patternHide.value) drawPetternPreview();
+	else drawPattern();
+
+	displayCanvas.value.style.top = !patternHide.value ? 'calc( 50% - ' + (row * CHAR_HEIGHT) + 'px )' : '0%';
+}
+
+let suppressScrollSliderWatcher = false;
+
+function scrollHandler() {
+	suppressScrollSliderWatcher = true;
+
+	if (!patternScrollSlider.value) return;
+	if (!displayCanvas.value) return;
+	if (!displayCanvas.value.parentElement) return;
+
+	patternScrollSliderPos.value = (displayCanvas.value.parentElement.scrollLeft) / (displayCanvas.value.width - displayCanvas.value.parentElement.offsetWidth) * 100;
+	patternScrollSlider.value.style.opacity = '1';
+}
+
+function scrollEndHandle() {
+	suppressScrollSliderWatcher = false;
+
+	if (!patternScrollSlider.value) return;
+	patternScrollSlider.value.style.opacity = '';
+}
+
+function handleScrollBarEnable() {
+	patternScrollSliderShow.value = (!patternHide.value && !isTouchUsing);
+	if (patternScrollSliderShow.value !== true) return;
+
+	if (!displayCanvas.value) return;
+	if (!displayCanvas.value.parentElement) return;
+	if (firstFrame) {
+		patternScrollSliderShow.value = (12 + 84 * player.value.getPatternNumRows(player.value.getPattern()) + 2 > displayCanvas.value.parentElement.offsetWidth);
+	} else {
+		patternScrollSliderShow.value = (displayCanvas.value.width > displayCanvas.value.parentElement.offsetWidth);
+	}
+}
+
+watch(patternScrollSliderPos, () => {
+	if (suppressScrollSliderWatcher) return;
+	if (!displayCanvas.value) return;
+	if (!displayCanvas.value.parentElement) return;
+
+	displayCanvas.value.parentElement.scrollLeft = (displayCanvas.value.width - displayCanvas.value.parentElement.offsetWidth) * patternScrollSliderPos.value / 100;
+});
+
+onDeactivated(() => {
+	stop();
+});
+
+</script>
+
+<style lang="scss" scoped>
+
+.hide {
+	border-radius: var(--radius-sm) !important;
+	background-color: black !important;
+	color: var(--accentLighten) !important;
+	font-size: 12px !important;
+}
+
+.mod-player-enabled {
+	position: relative;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+
+	> i {
+		display: block;
+		position: absolute;
+		border-radius: var(--radius-sm);
+		background-color: var(--fg);
+		color: var(--accentLighten);
+		font-size: 14px;
+		opacity: .5;
+		padding: 3px 6px;
+		text-align: center;
+		cursor: pointer;
+		top: 12px;
+		right: 12px;
+		z-index: 4;
+	}
+
+	> .pattern-display {
+		width: 100%;
+		height: 100%;
+		overflow-x: scroll;
+		overflow-y: hidden;
+		background-color: black;
+		text-align: center;
+		max-height: 312px; /* magic_number = CHAR_HEIGHT * rowBuffer, needs to be in px */
+
+		scrollbar-width: none;
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
+
+		.pattern-canvas {
+			position: relative;
+			background-color: black;
+			image-rendering: pixelated;
+			pointer-events: none;
+			z-index: 0;
+		}
+
+		.patternShadowTop {
+			background: #00000080;
+			width: 100%;
+			height: calc( 50% - 14px );
+			translate: 0 -100%;
+			top: calc( 50% - 14px );
+			position: absolute;
+			pointer-events: none;
+			z-index: 2;
+		}
+
+		.patternShadowBottom {
+			background: #00000080;
+			width: 100%;
+			height: calc( 50% - 12px );
+			top: calc( 50% - 1px );
+			position: absolute;
+			pointer-events: none;
+			z-index: 2;
+		}
+
+		.pattern-hide {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			background: rgba(64, 64, 64, 0.3);
+			backdrop-filter: var(--modalBgFilter);
+			color: #fff;
+			font-size: 12px;
+
+			position: absolute;
+			z-index: 4;
+			width: 100%;
+			height: 100%;
+
+			> span {
+				display: block;
+			}
+		}
+	}
+
+	> .controls {
+		display: flex;
+		width: 100%;
+		background-color: var(--bg);
+		z-index: 5;
+
+		> * {
+			padding: 4px 8px;
+		}
+
+		> button, a {
+			border: none;
+			background-color: transparent;
+			color: var(--accent);
+			cursor: pointer;
+
+			&:hover {
+				background-color: var(--fg);
+			}
+		}
+
+		> input[type=range] {
+			height: 21px;
+			-webkit-appearance: none;
+			width: 90px;
+			padding: 0;
+			margin: 4px 8px;
+			overflow-x: hidden;
+
+			&.pattern-slider {
+				position: absolute;
+				width: calc( 100% - 8px * 2 );
+				top: calc( 100% - 21px * 3 );
+				opacity: 0%;
+				transition: opacity 0.2s;
+
+				&:hover {
+					opacity: 100%;
+				}
+			}
+
+			&:focus {
+				outline: none;
+
+				&::-webkit-slider-runnable-track {
+					background: var(--bg);
+				}
+
+				&::-ms-fill-lower, &::-ms-fill-upper {
+					background: var(--bg);
+				}
+			}
+
+			&::-webkit-slider-runnable-track {
+				width: 100%;
+				height: 100%;
+				cursor: pointer;
+				border-radius: 0;
+				animate: 0.2s;
+				background: var(--bg);
+				border: 1px solid var(--fg);
+				overflow-x: hidden;
+			}
+
+			&::-webkit-slider-thumb {
+				border: none;
+				height: 100%;
+				width: 14px;
+				border-radius: 0;
+				background: var(--accentLighten);
+				cursor: pointer;
+				-webkit-appearance: none;
+				box-shadow: calc(-100vw - 14px) 0 0 100vw var(--accent);
+				clip-path: polygon(1px 0, 100% 0, 100% 100%, 1px 100%, 1px calc(50% + 10.5px), -100vw calc(50% + 10.5px), -100vw calc(50% - 10.5px), 0 calc(50% - 10.5px));
+				z-index: 1;
+			}
+
+			&::-moz-range-track {
+				width: 100%;
+				height: 100%;
+				cursor: pointer;
+				border-radius: 0;
+				animate: 0.2s;
+				background: var(--bg);
+				border: 1px solid var(--fg);
+			}
+
+			&::-moz-range-progress {
+				cursor: pointer;
+				height: 100%;
+				background: var(--accent);
+			}
+
+			&::-moz-range-thumb {
+				border: none;
+				height: 100%;
+				border-radius: 0;
+				width: 14px;
+				background: var(--accentLighten);
+				cursor: pointer;
+			}
+
+			&::-ms-track {
+				width: 100%;
+				height: 100%;
+				cursor: pointer;
+				border-radius: 0;
+				animate: 0.2s;
+				background: transparent;
+				border-color: transparent;
+				color: transparent;
+			}
+
+			&::-ms-fill-lower {
+				background: var(--accent);
+				border: 1px solid var(--fg);
+				border-radius: 0;
+			}
+
+			&::-ms-fill-upper {
+				background: var(--bg);
+				border: 1px solid var(--fg);
+				border-radius: 0;
+			}
+
+			&::-ms-thumb {
+				margin-top: 1px;
+				border: none;
+				height: 100%;
+				width: 14px;
+				border-radius: 0;
+				background: var(--accentLighten);
+				cursor: pointer;
+			}
+
+			&.progress {
+				flex-grow: 1;
+				min-width: 0;
+			}
+		}
+	}
+}
+
+.mod-player-disabled {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background: #111;
+	color: #fff;
+
+	> div {
+		display: table-cell;
+		text-align: center;
+		font-size: 12px;
+
+		> b {
+			display: block;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
index 1bc33585f2..5b922804f6 100644
--- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
+++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
@@ -80,7 +80,7 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
 
 	const isBlock = props.isBlock ?? false;
 
-	const MkFormula = defineAsyncComponent(() => import('@/components/MkFormula.vue'));
+	const SkFormula = defineAsyncComponent(() => import('@/components/SkFormula.vue'));
 
 	/**
 	 * Gen Vue Elements from MFM AST
@@ -499,14 +499,14 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
 			}
 
 			case 'mathInline': {
-				return [h('bdi', h(MkFormula, {
+				return [h('bdi', h(SkFormula, {
 					formula: token.props.formula,
 					block: false,
 				}))];
 			}
 
 			case 'mathBlock': {
-				return [h('bdi', { class: 'block' }, h(MkFormula, {
+				return [h('bdi', { class: 'block' }, h(SkFormula, {
 					formula: token.props.formula,
 					block: true,
 				}))];
-- 
cgit v1.2.3-freya