From 24dac68475ccda40944a482b0ac3cf73ca6c539f Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 1 Jun 2026 11:21:23 +0900
Subject: [PATCH] Update MkWorldAvatarManager.vue

---
 .../src/components/MkWorldAvatarManager.vue    | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/components/MkWorldAvatarManager.vue b/packages/frontend/src/components/MkWorldAvatarManager.vue
index a173e94ab1..7e2098db9f 100644
--- a/packages/frontend/src/components/MkWorldAvatarManager.vue
+++ b/packages/frontend/src/components/MkWorldAvatarManager.vue
@@ -8,12 +8,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div class="_gaps">
 		<MkPagination v-slot="{items}" :paginator="paginator">
 			<div class="_gaps_s">
-				<div v-for="avatar in items" :key="avatar.id">
-					<div>{{ avatar.name }}</div>
-					<div>{{ avatar.active }}</div>
-					<MkButton small rounded iconOnly @click="editWorldAvatar($event, avatar)"><i class="ti ti-pencil"></i></MkButton>
-					<MkButton small rounded iconOnly @click="makeActive($event, avatar)"><i class="ti ti-check"></i></MkButton>
-				</div>
+				<MkFolder v-for="avatar in items" :key="avatar.id">
+					<template #label>{{ avatar.name }}</template>
+					<template #suffix>
+						<span v-if="avatar.active" style="color: var(--MI_THEME-accent);">{{ i18n.ts.inUse }}</span>
+					</template>
+
+					<div class="_buttons">
+						<MkButton small rounded @click="editWorldAvatar($event, avatar)"><i class="ti ti-pencil"></i> {{ i18n.ts.edit }}</MkButton>
+						<MkButton v-if="!avatar.active" small rounded primary @click="makeActive($event, avatar)"><i class="ti ti-check"></i> {{ i18n.ts.makeActive }}</MkButton>
+					</div>
+				</MkFolder>
 			</div>
 		</MkPagination>
 		<MkButton iconOnly rounded style="margin: 0 auto;" @click="createWorldAvatar"><i class="ti ti-plus"></i></MkButton>
@@ -31,6 +36,7 @@ import { prefer } from '@/preferences.js';
 import * as os from '@/os.js';
 import { Paginator } from '@/utility/paginator.js';
 import MkPagination from '@/components/MkPagination.vue';
+import MkFolder from '@/components/MkFolder.vue';
 
 const paginator = markRaw(new Paginator('world/avatars/list', {
 	limit: 10,