revamp user details

next-ui/src/components.d.ts

@@ -10,9 +10,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     AnnouncementCard: typeof import('./components/announcement/Card.vue')['default']
     ApikeyDeletionWarning: typeof import('./components/apikey/DeletionWarning.vue')['default']
-    ApikeyDetails: typeof import('@/fragments/fragment/apikey/Details.vue')['default']
     ApikeyForceSyncWarning: typeof import('./components/apikey/ForceSyncWarning.vue')['default']
-    ApikeyTable: typeof import('@/fragments/fragment/apikey/Table.vue')['default']
     AppFooter: typeof import('./components/AppFooter.vue')['default']
     DialogConfirm: typeof import('./components/dialog/Confirm.vue')['default']
     DialogConfirmEdit: typeof import('./components/dialog/ConfirmEdit.vue')['default']

next-ui/src/components/user/Details.vue

@@ -1,37 +1,40 @@
 <template>
-  <v-container class="pa-0">
-    <v-row align="center">
-      <v-col cols="auto">
-        <v-avatar
-          color="primary"
-          size="x-large"
-          ><span class="text-h5 text-uppercase">{{ user.email.charAt(0) }}</span></v-avatar
-        >
-      </v-col>
-      <v-col>
-        {{ user.email }}
-      </v-col>
-    </v-row>
-    <v-row>
-      <v-col>
-        <div class="d-flex ga-1 flex-wrap">
-          <v-chip
-            v-for="role in user.roles"
-            :key="role"
-            :text="$formatMessage(userRolesMessages[role as UserRoles])"
-            size="small"
-            rounded
-          />
-        </div>
-      </v-col>
-    </v-row>
-  </v-container>
+  <v-card :title="user.email">
+    <template #prepend>
+      <v-avatar
+        color="primary"
+        size="x-large"
+        ><span class="text-h5 text-uppercase">{{ user.email.charAt(0) }}</span></v-avatar
+      >
+    </template>
+
+    <template #text>
+      <div class="d-flex ga-2 flex-wrap">
+        <v-chip
+          v-for="role in user.roles"
+          :key="role"
+          :text="$formatMessage(userRolesMessages[role as UserRoles])"
+          size="small"
+          rounded
+        />
+      </div>
+    </template>
+
+    <template
+      #actions
+      v-if="slots.actions"
+    >
+      <slot name="actions"></slot>
+    </template>
+  </v-card>
 </template>
 
 <script setup lang="ts">
 import type { components } from '@/generated/openapi/komga'
 import { UserRoles, userRolesMessages } from '@/types/UserRoles'
 
+const slots = useSlots()
+
 const { user } = defineProps<{
   user: components['schemas']['UserDto']
 }>()

next-ui/src/pages/account/details.vue

@@ -11,19 +11,21 @@
     />
 
     <template v-else-if="currentUser">
-      <UserDetails :user="currentUser" />
-      <v-btn
-        :text="
-          $formatMessage({
-            description: 'User details screen: change password button',
-            defaultMessage: 'Change password',
-            id: 'sGsWvI',
-          })
-        "
-        class="mt-8"
-        @click="changePassword()"
-        @mouseenter="dialogConfirmEdit.activator = $event.currentTarget"
-      />
+      <UserDetails :user="currentUser">
+        <template #actions>
+          <v-btn
+            :text="
+              $formatMessage({
+                description: 'User details screen: change password button',
+                defaultMessage: 'Change password',
+                id: 'sGsWvI',
+              })
+            "
+            @click="changePassword()"
+            @mouseenter="dialogConfirmEdit.activator = $event.currentTarget"
+          />
+        </template>
+      </UserDetails>
     </template>
   </v-container>
 </template>
@@ -37,8 +39,10 @@ import UserFormChangePassword from '@/components/user/form/ChangePassword.vue'
 import type { ErrorCause } from '@/api/komga-client'
 import { useMessagesStore } from '@/stores/messages'
 import { useIntl } from 'vue-intl'
+import { useDisplay } from 'vuetify'
 
 const intl = useIntl()
+const display = useDisplay()
 
 const { data: currentUser, error } = useCurrentUser()
 const { mutateAsync: mutateUserPassword } = useUpdateUserPassword()
@@ -52,6 +56,7 @@ function changePassword() {
     subtitle: currentUser.value?.email,
     maxWidth: 400,
     closeOnSave: false,
+    fullscreen: display.xs.value,
   }
   dialogConfirmEdit.value.slot = {
     component: markRaw(UserFormChangePassword),