From 2370dff307d5c0ff2b149d41538d7d5271fe4b8b Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Sat, 7 Mar 2026 01:47:19 +0900
Subject: [PATCH] improve ui

---
 src/components/NavMenu.vue        | 16 ++++++++++++----
 src/views/Layout/MainLayout.vue   |  3 +--
 src/views/MyAvatars/MyAvatars.vue | 14 +++++++++++++-
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/components/NavMenu.vue b/src/components/NavMenu.vue
index 8503db3c..8289af05 100644
--- a/src/components/NavMenu.vue
+++ b/src/components/NavMenu.vue
@@ -1,6 +1,6 @@
 <template>
     <Sidebar side="left" variant="sidebar" collapsible="icon">
-        <SidebarContent class="pt-2">
+        <SidebarContent class="pt-2" style="container-type: inline-size">
             <SidebarGroup>
                 <SidebarGroupContent>
                     <SidebarMenu v-if="navLayoutReady">
@@ -22,10 +22,12 @@
                                     <span v-show="!isCollapsed">{{
                                         item.titleIsCustom ? item.title : t(item.title || '')
                                     }}</span>
-                                    <template v-if="item.action === 'direct-access' && !isCollapsed">
-                                        <Kbd class="ml-auto">{{ isMac ? '⌘' : 'Ctrl' }}</Kbd>
+                                    <span
+                                        v-if="item.action === 'direct-access' && !isCollapsed"
+                                        class="nav-shortcut-hint ml-auto inline-flex items-center gap-0.5">
+                                        <Kbd>{{ isMac ? '⌘' : 'Ctrl' }}</Kbd>
                                         <Kbd>D</Kbd>
-                                    </template>
+                                    </span>
                                 </SidebarMenuButton>
                             </SidebarMenuItem>
 
@@ -783,4 +785,10 @@
         border-radius: 50%;
         transform: translateY(-50%);
     }
+
+    @container (max-width: 250px) {
+        .nav-shortcut-hint {
+            display: none;
+        }
+    }
 </style>
diff --git a/src/views/Layout/MainLayout.vue b/src/views/Layout/MainLayout.vue
index 46323e1b..7e075a9e 100644
--- a/src/views/Layout/MainLayout.vue
+++ b/src/views/Layout/MainLayout.vue
@@ -120,8 +120,7 @@
     const router = useRouter();
 
     const appearanceSettingsStore = useAppearanceSettingsStore();
-    const { navWidth, isNavCollapsed, showStatusBar } =
-        storeToRefs(appearanceSettingsStore);
+    const { navWidth, isNavCollapsed, showStatusBar } = storeToRefs(appearanceSettingsStore);
 
     const sidebarOpen = computed(() => !isNavCollapsed.value);
 
diff --git a/src/views/MyAvatars/MyAvatars.vue b/src/views/MyAvatars/MyAvatars.vue
index f148f9bf..f8c07ee3 100644
--- a/src/views/MyAvatars/MyAvatars.vue
+++ b/src/views/MyAvatars/MyAvatars.vue
@@ -5,6 +5,7 @@
             :table-style="tableHeightStyle"
             :page-sizes="pageSizes"
             :total-items="filteredAvatars.length"
+            :loading="isLoading"
             :on-page-size-change="handlePageSizeChange"
             :on-row-click="handleRowClick"
             :row-class="getRowClass"
@@ -347,7 +348,18 @@
         if (currentUser.value.currentAvatar === avatarId) {
             return;
         }
-        selectAvatarWithoutConfirmation(avatarId);
+        const avatar = avatars.value.find((a) => a.id === avatarId);
+        const avatarName = avatar?.name || avatarId;
+        modalStore
+            .confirm({
+                title: t('confirm.title'),
+                description: `${t('confirm.select_avatar')}\n${avatarName}`
+            })
+            .then(({ ok }) => {
+                if (ok) {
+                    selectAvatarWithoutConfirmation(avatarId);
+                }
+            });
     }
 
     /**