enhance(frontend): MkNoteDetailedの公開範囲表示を改善 (#17374)

* enhance(frontend): 노트 상세 페이지에서 공개 범위를 자세히 표시하도록 개선됨

* Update Changelog

* fix

---------

Co-authored-by: NoriDev <m1nthing2322@gmail.com>

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ### General
 - Enhance: チャンネルの作成の可否をロールポリシーで制御できるように
+- Enhance: ノートの詳細表示での公開範囲の表示を改善  
+  (Cherry-picked from https://github.com/kokonect-link/cherrypick/commit/ecc75563f4e428b66adccc379bf317b5b21ed8e6)
 - Fix: `.devcontainer/compose.yml`のvolumeのマウントパスを修正
 
 ### Client

packages/frontend/src/components/MkNoteDetailed.vue

@@ -135,6 +135,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkA :to="notePage(appearNote)">
 						<MkTime :time="appearNote.createdAt" mode="detail" colored/>
 					</MkA>
+					<span style="margin-left: 0.5em;">
+						<span style="border: 1px solid var(--MI_THEME-divider); margin-right: 0.5em;"></span>
+						<i v-if="appearNote.visibility === 'public'" class="ti ti-world"></i>
+						<i v-else-if="appearNote.visibility === 'home'" class="ti ti-home"></i>
+						<i v-else-if="appearNote.visibility === 'followers'" class="ti ti-lock"></i>
+						<i v-else-if="appearNote.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
+						<span style="margin-left: 0.3em;">{{ i18n.ts._visibility[appearNote.visibility] }}</span>
+					</span>
 				</div>
 				<MkReactionsViewer
 					v-if="appearNote.reactionAcceptance !== 'likeOnly'"