(user)(ui) revamp the account page

assets/style.scss

@@ -318,3 +318,8 @@ body:not(.reduced-colours) {
         border-left: 3px solid #{$value};
     }
 }
+
+.badge-lg {
+    --bs-badge-font-size: 0.95em;
+    //--bs-badge-font-weight: normal;
+}

components/Account.vue

@@ -33,6 +33,18 @@
                 </button>
             </p>
         </div>
+
+        <TabsNav
+            :tabs="['general', 'cards', 'socials', 'circles', 'backup']"
+            pills
+            showheaders
+            navclass="mb-3 border-bottom-0"
+        >
+            <template #general-header>
+                <Icon v="user" />
+                <T>user.headerLong</T>
+            </template>
+            <template #general>
                 <div class="card mb-3">
                     <div class="card-body d-flex flex-column flex-md-row">
                         <div class="mx-2 text-center">
@@ -160,12 +172,32 @@
 
                 <AdPlaceholder :phkey="['content-0', 'content-mobile-0']" />
 
-        <Loading :value="profiles">
+                <section class="mt-5">
-            <template #header>
+                    <a href="#" class="btn btn-outline-danger" @click.prevent="logout">
-                <h3 class="h4">
+                        <Icon v="sign-out" />
-                    <T>profile.list</T><T>quotation.colon</T>
+                        <T>user.logout</T>
-                </h3>
+                        @{{ $user().username }}
+                    </a>
+
+                    <a href="#" class="btn btn-outline-danger" @click.prevent="deleteAccount">
+                        <Icon v="trash-alt" />
+                        <T>user.deleteAccount</T>
+                        @{{ $user().username }}
+                    </a>
+
+                    <a v-if="impersonationActive" href="#" class="btn btn-outline-primary" @click.prevent="stopImpersonation">
+                        <Icon v="user-secret" />
+                        Stop impersonation
+                    </a>
+                </section>
             </template>
+
+            <template #cards-header>
+                <Icon v="id-card" />
+                <T>profile.list</T>
+            </template>
+            <template #cards>
+                <Loading :value="profiles">
                     <ul v-if="profiles !== undefined" class="list-group">
                         <li
                             v-for="locale in Object.keys($locales)"
@@ -178,12 +210,15 @@
                 </Loading>
 
                 <AdPlaceholder :phkey="['content-1', 'content-mobile-1']" />
+            </template>
 
+            <template #socials-header>
+                <Icon v="sign-in-alt"/>
+                <T>user.socialConnection.header</T>
+            </template>
+            <template #socials>
                 <Loading :value="socialConnections">
                     <template #header>
-                <h3 class="h4">
-                    <T>user.socialConnection.list</T><T>quotation.colon</T>
-                </h3>
                         <div class="form-check form-switch my-2">
                             <label>
                                 <input v-model="socialLookup" class="form-check-input" type="checkbox">
@@ -208,29 +243,25 @@
                         </li>
                     </ul>
                 </Loading>
+            </template>
 
+            <template #circles-header>
+                <Icon v="heart-circle" />
+                <T>profile.circles.header</T>
+            </template>
+            <template #circles>
+                <h5><T>profile.circles.yourMentions.header</T><T>quotation.colon</T></h5>
                 <CircleMentions />
+            </template>
 
+            <template #backup-header>
+                <Icon v="copy"/>
+                <T>profile.backup.headerShort</T>
+            </template>
+            <template #backup>
                 <CardsBackup v-if="!$user().bannedReason" />
-
+            </template>
-        <section class="mt-5">
+        </TabsNav>
-            <a href="#" class="badge bg-light text-dark border" @click.prevent="logout">
-                <Icon v="sign-out" />
-                <T>user.logout</T>
-                @{{ $user().username }}
-            </a>
-
-            <a href="#" class="badge bg-light text-dark border" @click.prevent="deleteAccount">
-                <Icon v="trash-alt" />
-                <T>user.deleteAccount</T>
-                @{{ $user().username }}
-            </a>
-
-            <a v-if="impersonationActive" href="#" class="badge bg-light text-dark border border-primary" @click.prevent="stopImpersonation">
-                <Icon v="user-secret" />
-                Stop impersonation
-            </a>
-        </section>
 
         <AdPlaceholder :phkey="['content-2', 'content-mobile-2']" />
 

components/CardsBackup.vue

@@ -1,8 +1,8 @@
 <template>
     <section>
-        <h3 class="h4">
+        <h5>
             <T>profile.backup.header</T>
-        </h3>
+        </h5>
         <ul class="list-inline">
             <li class="list-inline-item">
                 <a

components/CircleMentions.vue

@@ -1,10 +1,5 @@
 <template>
     <Loading :value="circleMentions">
-        <template #header>
-            <h3 class="h4">
-                <T>profile.circles.yourMentions.header</T><T>quotation.colon</T>
-            </h3>
-        </template>
         <p class="small text-muted">
             <T>profile.circles.yourMentions.description</T>
         </p>

components/ProfileOverview.vue

@@ -6,17 +6,17 @@
                 <Icon v="id-card" />
                 <T>profile.show</T>
             </LocaleLink>
-            <LocaleLink :locale="locale" link="/editor" class="badge bg-light text-dark border">
+            <LocaleLink :locale="locale" link="/editor" class="badge badge-lg bg-light text-dark border">
                 <Icon v="edit" />
                 <T>profile.edit</T>
             </LocaleLink>
             <Spinner v-if="deleting" />
-            <a v-else href="#" class="badge bg-light text-dark" :aria-label="$t('profile.delete')" @click.prevent="removeProfile(locale)">
+            <a v-else href="#" class="badge badge-lg bg-light text-dark" :aria-label="$t('profile.delete')" @click.prevent="removeProfile(locale)">
                 <Icon v="trash-alt" />
             </a>
         </span>
         <span v-else>
-            <LocaleLink :locale="locale" link="/editor" class="badge bg-light text-dark border">
+            <LocaleLink :locale="locale" link="/editor" class="badge badge-lg bg-light text-dark border">
                 <Icon v="plus-circle" />
                 <T>profile.init</T>
             </LocaleLink>

components/SocialConnection.vue

@@ -31,7 +31,7 @@
                         <Icon v="link" />
                     </button>
                 </form>
-                <button v-else class="badge bg-light text-dark border" @click="formShown = true">
+                <button v-else class="badge badge-lg bg-light text-dark border" @click="formShown = true">
                     <Icon v="link" />
                     <T>user.socialConnection.connect</T>
                 </button>
@@ -39,7 +39,7 @@
             <a
                 v-else
                 :href="providerOptions.redirectViaHome ? `${homeUrl}/api/user/social-redirect/${provider}/${$config.locale}` : `/api/connect/${provider}`"
-                class="badge bg-light text-dark border"
+                class="badge badge-lg bg-light text-dark border"
             >
                 <Icon v="link" />
                 <T>user.socialConnection.connect</T>
@@ -57,13 +57,13 @@
             <br class="d-md-none">
             <a
                 :href="(providerOptions.redirectViaHome ? `${homeUrl}/api/user/social-redirect/${provider}/${$config.locale}` : `/api/connect/${provider}`) + (providerOptions.instanceRequired ? `?instance=${connection.name.split('@').slice(-1)[0]}` : '')"
-                class="badge bg-light text-dark border"
+                class="badge badge-lg bg-light text-dark border"
             >
                 <Icon v="sync" />
                 <T>user.socialConnection.refresh</T>
             </a>
             <Spinner v-if="disconnecting" />
-            <a v-else href="#" class="badge bg-light text-dark" @click.prevent="disconnect">
+            <a v-else href="#" class="badge badge-lg bg-light text-dark" @click.prevent="disconnect">
                 <Icon v="unlink" />
                 <T>user.socialConnection.disconnect</T>
             </a>

locale/_base/translations.suml

@@ -600,6 +600,7 @@ user:
     deleteAccount: 'Delete account'
     deleteAccountConfirm: 'Are you sure you want to remove your account? This will be irreversible!'
     socialConnection:
+        header: 'Login methods'
         list: 'Social media connections'
         connect: 'Connect'
         refresh: 'Refresh'
@@ -814,6 +815,7 @@ profile:
         pronouns: 'Include pronouns'
     backup:
         header: 'Cards backup'
+        headerShort: 'Cards backup'
         export:
             action: 'Generate backup'
             success: 'A backup file is being generated, download should begin shortly'

locale/de/translations.suml

@@ -760,6 +760,7 @@ profile:
         pronouns: 'Pronomen einfügen'
     backup:
         header: 'Visitenkartensicherung'
+        headerShort: 'Ensicherung'
         export:
             action: 'Sicherung erstellen'
             success: 'Eine Sicherungsdatei wurde erstellt, der Download sollte in Kürze beginnen'

locale/en/translations.suml

@@ -776,6 +776,7 @@ user:
     deleteAccount: 'Delete account'
     deleteAccountConfirm: 'Are you sure you want to remove your account? This will be irreversible!'
     socialConnection:
+        header: 'Login methods'
         list: 'Social media connections'
         connect: 'Connect'
         refresh: 'Refresh'
@@ -1003,6 +1004,7 @@ profile:
         pronouns: 'Include pronouns'
     backup:
         header: 'Cards backup'
+        headerShort: 'Backup'
         export:
             action: 'Generate backup'
             success: 'A backup file is being generated, download should begin shortly'

locale/eo/translations.suml

@@ -466,6 +466,7 @@ user:
     headerLong: 'Via konto'
     tokenExpired: 'Token has expired. Please refresh the website and try again.'
     login:
+        methods: 'Login methods'
         help: 'To log in or create an account you can either use the social media buttons or enter your email in the field below and then confirm the code you will have received in your mailbox.'
         placeholder: 'Email (or username, if you''re already registered)'
         action: 'Ensaluti'

locale/es/translations.suml

@@ -748,6 +748,7 @@ profile:
         relationship: 'Relación (p. ej. "pareja", "mejor amigx")'
     backup:
         header: 'Copia de seguridad de tarjetas'
+        headerShort: 'Copia'
         export:
             action: 'Generar copia de seguridad'
             success: 'Se está generando un archivo de copia de seguridad; la descarga debería comenzar en breve'

locale/pl/translations.suml

@@ -1457,6 +1457,7 @@ user:
     deleteAccount: 'Usuń konto'
     deleteAccountConfirm: 'Czy na pewno chcesz usunąć swoje konto? Ta operacja jest nieodwracalna!'
     socialConnection:
+        header: 'Metody logowania'
         list: 'Połączenia z social mediami'
         connect: 'Połącz'
         refresh: 'Odśwież'
@@ -1665,6 +1666,7 @@ profile:
         pronouns: 'Zamieść zaimki bezpośrednio w linku'
     backup:
         header: 'Kopia zapasowa wizytówek'
+        headerShort: 'Kopia zapasowa'
         export:
             action: 'Ściągnij kopię'
             success: 'Plik kopii zapasowej jest generowany, zaraz zacznie się ściąganie pliku'

locale/pt/translations.suml

@@ -734,6 +734,7 @@ profile:
         local: 'Linkar para esta versão de linguagem'
     backup:
         header: 'Backup de cartões'
+        headerShort: 'Backup'
         import:
             action: 'Recuperar backup'
             success: 'Seu backup foi restaurado com sucesso! A página será atualizada.'

locale/ro/translations.suml

@@ -943,6 +943,7 @@ profile:
         altExample: 'Un exemplu cum ar putea fi structurat un text alternativ'
     backup:
         header: 'Back-up'
+        headerShort: 'Back-up'
         export:
             action: 'Generează back-up'
             success: 'Un fișier de back-up este în curs de generare, descărcarea ar trebui să înceapă în curând'

locale/tok/translations.suml

@@ -340,6 +340,7 @@ profile:
         atAlternative: 'o kepeken nimi /u/'
     backup:
         header: 'awen lipu'
+        headerShort: 'awen lipu'
         export:
             action: 'o awen e lipu sina'
     flagsCustomForm: