refactor

packages/client/src/components/MkNote.vue

@@ -104,7 +104,7 @@
 			</MkA>
 		</template>
 		<template #reason>
-			<b>{{ muted.matched.join(", ") }}</b>
+			<b class="_blur_text">{{ muted.matched.join(", ") }}</b>
 		</template>
 	</I18n>
 </div>

packages/client/src/components/MkNoteDetailed.vue

@@ -110,7 +110,7 @@
 			</MkA>
 		</template>
 		<template #reason>
-			<b class="_mfm_blur_">{{ muted.matched.join(", ") }}</b>
+			<b class="_blur_text">{{ muted.matched.join(", ") }}</b>
 		</template>
 	</I18n>
 </div>
@@ -354,15 +354,6 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-._mfm_blur_ {
-	filter: blur(6px);
-	transition: filter 0.3s;
-
-	&:hover {
-		filter: blur(0px);
-	}
-}
-
 .lxwezrsl {
 	font-size: 1.05em;
 	position: relative;

packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue

@@ -22,15 +22,6 @@ const props = withDefaults(defineProps<{
 </script>
 
 <style lang="scss">
-._mfm_blur_ {
-	filter: blur(6px);
-	transition: filter 0.3s;
-
-	&:hover {
-		filter: blur(0px);
-	}
-}
-
 .mfm-x2 {
 	--mfm-zoom-size: 200%;
 }

packages/client/src/components/mfm.ts

@@ -14,6 +14,7 @@ import MkA from "@/components/global/MkA.vue";
 import { host } from "@/config";
 import { MFM_TAGS } from "@/scripts/mfm-tags";
 import { reducedMotion } from "@/scripts/reduced-motion";
+import { defaultStore } from "@/store";
 
 export default defineComponent({
 	props: {
@@ -103,7 +104,7 @@ export default defineComponent({
 								case "tada": {
 									const speed = validTime(token.props.args.speed) || "1s";
 									style = `font-size: 150%;${
-										this.$store.state.animatedMfm
+										defaultStore.state.animatedMfm
 											? `animation: tada ${speed} linear infinite both;`
 											: ""
 									}`;
@@ -112,7 +113,7 @@ export default defineComponent({
 								case "jelly": {
 									const speed = validTime(token.props.args.speed) || "1s";
 									style =
-										this.$store.state.animatedMfm && !reducedMotion()
+										defaultStore.state.animatedMfm && !reducedMotion()
 											? `animation: mfm-rubberBand ${speed} linear infinite both;`
 											: "";
 									break;
@@ -120,7 +121,7 @@ export default defineComponent({
 								case "twitch": {
 									const speed = validTime(token.props.args.speed) || "0.5s";
 									style =
-										this.$store.state.animatedMfm && !reducedMotion()
+										defaultStore.state.animatedMfm && !reducedMotion()
 											? `animation: mfm-twitch ${speed} ease infinite;`
 											: "";
 									break;
@@ -128,7 +129,7 @@ export default defineComponent({
 								case "shake": {
 									const speed = validTime(token.props.args.speed) || "0.5s";
 									style =
-										this.$store.state.animatedMfm && !reducedMotion()
+										defaultStore.state.animatedMfm && !reducedMotion()
 											? `animation: mfm-shake ${speed} ease infinite;`
 											: "";
 									break;
@@ -146,7 +147,7 @@ export default defineComponent({
 										: "mfm-spin";
 									const speed = validTime(token.props.args.speed) || "1.5s";
 									style =
-										this.$store.state.animatedMfm && !reducedMotion()
+										defaultStore.state.animatedMfm && !reducedMotion()
 											? `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};`
 											: "";
 									break;
@@ -154,7 +155,7 @@ export default defineComponent({
 								case "jump": {
 									const speed = validTime(token.props.args.speed) || "0.75s";
 									style =
-										this.$store.state.animatedMfm && !reducedMotion()
+										defaultStore.state.animatedMfm && !reducedMotion()
 											? `animation: mfm-jump ${speed} linear infinite;`
 											: "";
 									break;
@@ -162,7 +163,7 @@ export default defineComponent({
 								case "bounce": {
 									const speed = validTime(token.props.args.speed) || "0.75s";
 									style =
-										this.$store.state.animatedMfm && !reducedMotion()
+										defaultStore.state.animatedMfm && !reducedMotion()
 											? `animation: mfm-bounce ${speed} linear infinite; transform-origin: center bottom;`
 											: "";
 									break;
@@ -170,13 +171,13 @@ export default defineComponent({
 								case "rainbow": {
 									const speed = validTime(token.props.args.speed) || "1s";
 									style =
-										this.$store.state.animatedMfm && !reducedMotion()
+										defaultStore.state.animatedMfm && !reducedMotion()
 											? `animation: mfm-rainbow ${speed} linear infinite;`
 											: "";
 									break;
 								}
 								case "sparkle": {
-									if (!(this.$store.state.animatedMfm || reducedMotion())) {
+									if (!(defaultStore.state.animatedMfm || reducedMotion())) {
 										return genEl(token.children);
 									}
 									return h(MkSparkle, {}, genEl(token.children));
@@ -239,7 +240,7 @@ export default defineComponent({
 									return h(
 										"span",
 										{
-											class: "_mfm_blur_",
+											class: "_blur_text",
 										},
 										genEl(token.children),
 									);

packages/client/src/style.scss

@@ -689,6 +689,14 @@ hr {
 	display: inline-flex;
 }
 
+._blur_text {
+	filter: blur(6px);
+	transition: filter 0.3s;
+
+	&:hover {
+		filter: blur(0px);
+	}
+}
 
 @media(prefers-reduced-motion: no-preference) {
 	@keyframes scaleIn {