feat(client): データセーバーモードの追加 (#10478)

* change nsfw settings

* Update CHANGELOG.md

* (fix) eliminate warning message when manually hide

* Apply suggestions from code review

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>

* (change) translation key

* revert nsfw settings (partial)

* (add) data saver setting

* Integrate MkMediaBlurhash and MkImgWithBlurhash

* Update CHANGELOG.md

* 🎨

* リモートのファイルでsizeが0の場合は表示しない, refを作らない

* fix

* かっこ

---------

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>
Co-authored-by: tamaina <tamaina@hotmail.co.jp>

packages/frontend/src/components/MkImgWithBlurhash.vue

@@ -1,7 +1,7 @@
 <template>
 <div :class="[$style.root, { [$style.cover]: cover }]" :title="title">
-	<canvas v-if="!loaded" ref="canvas" :class="$style.canvas" :width="size" :height="size" :title="title"/>
-	<img v-if="src" :class="$style.img" :src="src" :title="title" :alt="alt" @load="onLoad"/>
+	<canvas v-if="!loaded || forceBlurhash" ref="canvas" :class="$style.canvas" :width="size" :height="size" :title="title"/>
+	<img v-if="src && !forceBlurhash" :class="$style.img" :src="src" :title="title" :alt="alt" @load="onLoad"/>
 </div>
 </template>
 
@@ -12,16 +12,18 @@ import { decode } from 'blurhash';
 const props = withDefaults(defineProps<{
 	src?: string | null;
 	hash?: string;
-	alt?: string;
+	alt?: string | null;
 	title?: string | null;
 	size?: number;
 	cover?: boolean;
+	forceBlurhash?: boolean;
 }>(), {
 	src: null,
 	alt: '',
 	title: null,
 	size: 64,
 	cover: true,
+	forceBlurhash: false,
 });
 
 const canvas = $shallowRef<HTMLCanvasElement>();