feat(frontend): 画像を動画と同様に簡単に隠せるように (#11127)

* feat: hide image easily

* docs(changelog): add 画像を動画と同様に簡単に隠せるように

CHANGELOG.md

@@ -23,6 +23,7 @@
 - Fix: sparkle内にリンクを入れるとクリック不能になる問題の修正
 - deck UIのカラムのメニューからアンテナとリストの編集画面を開けるように
 - ドライブファイルのメニューで画像をクロップできるように
+- 画像を動画と同様に簡単に隠せるように
 
 ### Server
 - JSON.parse の回数を削減することで、ストリーミングのパフォーマンスを向上しました

packages/frontend/src/components/MkMediaImage.vue

@@ -33,6 +33,7 @@
 			<div v-if="image.isSensitive" :class="$style.indicator" style="color: var(--warn);">NSFW</div>
 		</div>
 		<button :class="$style.menu" class="_button" @click.stop="showMenu"><i class="ti ti-dots" style="vertical-align: middle;"></i></button>
+		<i class="ti ti-eye-off" :class="$style.hide" @click.stop="hide = true"></i>
 	</template>
 </div>
 </template>
@@ -113,6 +114,21 @@ function showMenu(ev: MouseEvent) {
 	align-items: center;
 }
 
+.hide {
+	display: block;
+	position: absolute;
+	border-radius: 6px;
+	background-color: var(--fg);
+	color: var(--accentLighten);
+	font-size: 14px;
+	opacity: .5;
+	padding: 3px 6px;
+	text-align: center;
+	cursor: pointer;
+	top: 12px;
+	right: 12px;
+}
+
 .hiddenTextWrapper {
 	display: table-cell;
 	text-align: center;