feat: add link to account settings on instance (#772)

Co-authored-by: 三咲智子 <sxzz@sxzz.moe>

components/settings/SettingsItem.vue

@@ -6,6 +6,7 @@ const props = defineProps<{
   icon?: string
   to?: string | Record<string, string>
   command?: boolean
+  external?: true
 }>()
 
 const router = useRouter()
@@ -33,6 +34,7 @@ useCommand({
 <template>
   <NuxtLink
     :to="to"
+    :external="external"
     exact-active-class="text-primary"
     block w-full group focus:outline-none
     @click="to ? $scrollToTop() : undefined"
@@ -70,7 +72,7 @@ useCommand({
           {{ content }}
         </slot>
       </p>
-      <div v-if="to" i-ri:arrow-right-s-line text-xl text-secondary-light class="rtl-flip" />
+      <div v-if="to" :class="!external ? 'i-ri:arrow-right-s-line' : 'i-ri:external-link-line'" text-xl text-secondary-light class="rtl-flip" />
     </div>
   </NuxtLink>
 </template>

locales/en-US.json

@@ -235,6 +235,7 @@
     "about": {
       "label": "About"
     },
+    "account_settings": "Account settings",
     "feature_flags": {
       "github_cards": "GitHub Cards",
       "title": "Experimental Features",

pages/settings.vue

@@ -39,6 +39,14 @@ const isRootPath = computedEager(() => route.name === 'settings')
               :text="$t('settings.interface.label')"
               to="/settings/interface"
             />
+            <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"