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

* feat: hide image easily

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

Cherry-picks: dc8763215a

CHANGELOG.md

@@ -12,6 +12,15 @@
 
 -->
 
+## 13.x.x (unreleased)
+
+### General
+
+### Client
+- 画像を動画と同様に簡単に隠せるように
+
+### Server
+
 ## 13.13.2
 
 ### General

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;