From 159f543ac1285159f5642a12bf6d05620c57c2b6 Mon Sep 17 00:00:00 2001
From: limes <git@limes.pink>
Date: Sat, 29 Aug 2026 21:45:13 +0200
Subject: [PATCH] feat: improve miieditor discoverability

---
 src/pages/account/index.vue | 71 +++++++++++++++++++++++--------------
 1 file changed, 44 insertions(+), 27 deletions(-)

diff --git a/src/pages/account/index.vue b/src/pages/account/index.vue
index 737689e..4c8d91b 100644
--- a/src/pages/account/index.vue
+++ b/src/pages/account/index.vue
@@ -164,15 +164,27 @@ customSeoMeta({ subsection: 'account' });
   >
     <div class="account-sidebar">
       <div class="user">
-        <a
-          href="/account/miieditor"
-          class="mii"
-        >
-          <img
-            :src="profile.mii?.imageUrl"
-            alt="Mii image"
+        <div class="mii-wrapper">
+          <a
+            href="/account/miieditor"
+            class="mii"
           >
-        </a>
+            <img
+              :src="profile.mii?.imageUrl"
+              alt="Mii image"
+            >
+          </a>
+          <a
+            class="edit-button"
+            href="/account/miieditor"
+          >
+            <Icon
+              name="ph:pencil"
+              size="20"
+            />
+          </a>
+        </div>
+
         <p class="miiname">
           {{ profile.mii?.name }}
         </p>
@@ -640,36 +652,41 @@ customSeoMeta({ subsection: 'account' });
 	border-color: #5aff15;
 }
 
+.account-sidebar .user .mii-wrapper {
+	position: relative;
+}
+
 .account-sidebar .user a.mii {
 	position: relative;
 	display: block;
 	width: 128px;
 	height: 128px;
 	overflow: hidden;
-	border-radius: 100%;
+	border-radius: 9999px;
 	background: var(--bg-shade-3);
 }
-.account-sidebar .user a.mii::after {
-	content: "";
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background:
-		no-repeat center/50% url("@/public/assets/images/edit.svg"),
-		rgba(55, 60, 101, 0.7);
-	opacity: 0;
-	transition: opacity 150ms;
-}
-.account-sidebar .user a.mii:hover::after {
-	opacity: 1;
+.account-sidebar .user a.mii:hover,
+.account-sidebar .user .mii-wrapper a.edit-button:hover,
+.account-sidebar .user:has(a.edit-button:hover) a.mii,
+.account-sidebar .user:has(a.mii:hover) a.edit-button {
+	background: var(--bg-shade-4);
 }
 
-.account-sidebar .user .mii {
-	width: 100%;
-	height: 100%;
+.account-sidebar .user .mii-wrapper a.edit-button {
+	color: inherit;
+	position: absolute;
+	right: 2px;
+	bottom: 2px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: var(--bg-shade-3);
+	width: 32px;
+	height: 32px;
+	border: 2px solid var(--bg-shade-1);
+	border-radius: 9999px;
 }
+
 .account-sidebar .buttons {
 	display: grid;
 	grid-auto-flow: row;