ui: move account settings link under profile

components/settings/SettingsItem.vue

@@ -8,6 +8,7 @@ const props = defineProps<{
   command?: boolean
   disabled?: boolean
   external?: true
+  large?: true
 }>()
 
 const router = useRouter()
@@ -55,7 +56,10 @@ useCommand({
           :class="$slots.description ? 'w-12 h-12' : ''"
         >
           <slot name="icon">
-            <div v-if="icon" :class="icon" md:text-size-inherit text-xl />
+            <div
+              v-if="icon"
+              :class="[icon, large ? 'text-xl mr-1' : 'text-xl md:text-size-inherit']"
+            />
           </slot>
         </div>
         <div space-y-1>

locales/en-US.json

@@ -196,7 +196,10 @@
     "about": {
       "label": "About"
     },
-    "account_settings": "Account settings",
+    "account_settings": {
+      "description": "Edit your account settings in Mastodon UI",
+      "label": "Account settings"
+    },
     "feature_flags": {
       "github_cards": "GitHub Cards",
       "title": "Experimental Features",

locales/zh-CN.json

@@ -187,7 +187,9 @@
     "about": {
       "label": "关于"
     },
-    "account_settings": "账号设置",
+    "account_settings": {
+      "label": "账号设置"
+    },
     "feature_flags": {
       "github_cards": "GitHub 卡片",
       "title": "实验功能",

pages/settings.vue

@@ -46,14 +46,6 @@ const isRootPath = computedEager(() => route.name === 'settings')
               :text="$t('settings.notifications_settings')"
               to="/settings/notifications"
             />
-            <SettingsItem
-              v-if="isHydrated && currentUser"
-              command
-              icon="i-ri:settings-line"
-              :text="$t('settings.account_settings')"
-              :to="`https://${currentUser!.server}/auth/edit`"
-              external target="_blank"
-            />
             <SettingsItem
               command
               icon="i-ri-globe-line"

pages/settings/profile/index.vue

@@ -19,18 +19,27 @@ useHeadFixed({
     </template>
 
     <SettingsItem
-      command
+      command large
       icon="i-ri:user-settings-line"
       :text="$t('settings.profile.appearance.label')"
       :description="$t('settings.profile.appearance.description')"
       to="/settings/profile/appearance"
     />
     <SettingsItem
-      command
+      command large
       icon="i-ri:hashtag"
       :text="$t('settings.profile.featured_tags.label')"
       :description="$t('settings.profile.featured_tags.description')"
       to="/settings/profile/featured-tags"
     />
+    <SettingsItem
+      v-if="isHydrated && currentUser"
+      command large
+      icon="i-ri:settings-line"
+      :text="$t('settings.account_settings.label')"
+      :description="$t('settings.account_settings.description')"
+      :to="`https://${currentUser!.server}/auth/edit`"
+      external target="_blank"
+    />
   </MainContent>
 </template>