From ae53b4e5d385a5aa773f92d58ad202368b76b1f3 Mon Sep 17 00:00:00 2001
From: Kainoa Kanter <kainoa@t1c.dev>
Date: Thu, 6 Apr 2023 22:28:44 -0700
Subject: [PATCH] refactor

---
 packages/client/src/components/MkNote.vue     |  2 +-
 .../client/src/components/MkNoteDetailed.vue  | 11 +---------
 .../global/MkMisskeyFlavoredMarkdown.vue      |  9 --------
 packages/client/src/components/mfm.ts         | 21 ++++++++++---------
 packages/client/src/style.scss                |  8 +++++++
 5 files changed, 21 insertions(+), 30 deletions(-)

diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index a0c4edda7..79dcef6e4 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/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>
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 6da148888..4be07a41f 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/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;
diff --git a/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue b/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
index 36c3ea7b5..19e1d88e1 100644
--- a/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
+++ b/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%;
 }
diff --git a/packages/client/src/components/mfm.ts b/packages/client/src/components/mfm.ts
index 6a8f81e40..e7f27854f 100644
--- a/packages/client/src/components/mfm.ts
+++ b/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),
 									);
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 7a8a78f00..c1a1820bc 100644
--- a/packages/client/src/style.scss
+++ b/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 {