Settings refactor and redesign (#1669)

* new settings work

* Polishing work on settings refactor

* Run intl:extract

* List view -> Rows view

* Remove current preferred system theme indicator to make the themes fit on one line

* Remove extra margin on top of navstack

pages/settings.vue

@@ -1,65 +1,116 @@
 <template>
-  <div class="normal-page">
-    <div class="normal-page__sidebar">
-      <aside class="universal-card">
-        <h1>Settings</h1>
-        <NavStack>
-          <NavStackItem link="/settings" label="Appearance">
-            <PaintbrushIcon />
-          </NavStackItem>
-          <NavStackItem v-if="isStaging" link="/settings/language" label="Language">
-            <LanguagesIcon />
-          </NavStackItem>
-          <template v-if="auth.user">
-            <h3>User settings</h3>
-            <NavStackItem link="/settings/account" label="Account">
-              <UserIcon />
-            </NavStackItem>
-            <NavStackItem link="/settings/authorizations" label="Authorizations">
-              <UsersIcon />
-            </NavStackItem>
-            <NavStackItem link="/settings/sessions" :label="formatMessage(messages.sessionsTitle)">
-              <ShieldIcon />
-            </NavStackItem>
-          </template>
-          <template v-if="auth.user">
-            <h3>Developer Settings</h3>
-            <NavStackItem link="/settings/pats" :label="formatMessage(messages.patsTitle)">
-              <KeyIcon />
-            </NavStackItem>
-            <NavStackItem link="/settings/applications" label="Applications">
-              <ServerIcon />
-            </NavStackItem>
-          </template>
-        </NavStack>
-      </aside>
+  <div>
+    <div class="normal-page no-sidebar">
+      <h1>{{ formatMessage(commonMessages.settingsLabel) }}</h1>
     </div>
-    <div class="normal-page__content">
-      <NuxtPage :route="route" />
+    <div class="normal-page">
+      <div class="normal-page__sidebar">
+        <aside class="universal-card">
+          <NavStack>
+            <h3>Display</h3>
+            <NavStackItem link="/settings" :label="formatMessage(messages.appearanceTitle)">
+              <PaintBrushIcon />
+            </NavStackItem>
+            <NavStackItem
+              v-if="isStaging"
+              link="/settings/language"
+              :label="formatMessage(messages.languageTitle)"
+            >
+              <LanguagesIcon />
+            </NavStackItem>
+            <template v-if="auth.user">
+              <h3>Account</h3>
+              <NavStackItem link="/settings/profile" :label="formatMessage(messages.profileTitle)">
+                <UserIcon />
+              </NavStackItem>
+              <NavStackItem link="/settings/account" :label="formatMessage(messages.accountTitle)">
+                <ShieldIcon />
+              </NavStackItem>
+              <NavStackItem
+                link="/settings/authorizations"
+                :label="formatMessage(messages.authorizedAppsTitle)"
+              >
+                <GridIcon />
+              </NavStackItem>
+              <NavStackItem
+                link="/settings/sessions"
+                :label="formatMessage(messages.sessionsTitle)"
+              >
+                <MonitorSmartphoneIcon />
+              </NavStackItem>
+            </template>
+            <template v-if="auth.user">
+              <h3>Developer</h3>
+              <NavStackItem link="/settings/pats" :label="formatMessage(messages.patsTitle)">
+                <KeyIcon />
+              </NavStackItem>
+              <NavStackItem
+                link="/settings/applications"
+                :label="formatMessage(messages.applicationsTitle)"
+              >
+                <ServerIcon />
+              </NavStackItem>
+            </template>
+          </NavStack>
+        </aside>
+      </div>
+      <div class="normal-page__content">
+        <NuxtPage :route="route" />
+      </div>
     </div>
   </div>
 </template>
 <script setup>
-import { UsersIcon, ServerIcon } from 'omorphia'
+import {
+  UsersIcon,
+  ServerIcon,
+  GridIcon,
+  PaintBrushIcon,
+  UserIcon,
+  ShieldIcon,
+  KeyIcon,
+  LanguagesIcon,
+} from 'omorphia'
 import NavStack from '~/components/ui/NavStack.vue'
 import NavStackItem from '~/components/ui/NavStackItem.vue'
+import MonitorSmartphoneIcon from '~/assets/images/utils/monitor-smartphone.svg'
 
-import PaintbrushIcon from '~/assets/images/utils/paintbrush.svg'
-import UserIcon from '~/assets/images/utils/user.svg'
-import ShieldIcon from '~/assets/images/utils/shield.svg'
-import KeyIcon from '~/assets/images/utils/key.svg'
-import LanguagesIcon from '~/assets/images/utils/languages.svg'
+import { commonMessages } from '~/utils/common-messages.ts'
 
 const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
+  appearanceTitle: {
+    id: 'settings.appearance.title',
+    defaultMessage: 'Appearance',
+  },
+  languageTitle: {
+    id: 'settings.language.title',
+    defaultMessage: 'Language',
+  },
+  profileTitle: {
+    id: 'settings.profile.title',
+    defaultMessage: 'Public profile',
+  },
+  accountTitle: {
+    id: 'settings.account.title',
+    defaultMessage: 'Account and security',
+  },
+  authorizedAppsTitle: {
+    id: 'settings.authorized-apps.title',
+    defaultMessage: 'Authorized apps',
+  },
   sessionsTitle: {
     id: 'settings.sessions.title',
     defaultMessage: 'Sessions',
   },
   patsTitle: {
     id: 'settings.pats.title',
-    defaultMessage: 'PATs',
+    defaultMessage: 'Personal access tokens',
+  },
+  applicationsTitle: {
+    id: 'settings.applications.title',
+    defaultMessage: 'Your applications',
   },
 })