feat: add breadcrumbs to account settings page

packages/web-runtime/src/components/Account/AppTokens.vue

@@ -1,11 +1,10 @@
 <template>
   <div v-if="authStore.userContextReady" id="preferences-panel-app-tokens">
     <div class="flex items-center mb-4">
-      <h1 class="m-0 text-lg" v-text="$gettext('App Tokens')" />
       <oc-button
         v-if="!authAppServiceDisabled"
         size="small"
-        class="create-app-token-btn ml-4"
+        class="create-app-token-btn"
         @click="openCreateAppTokenModal"
       >
         <oc-icon name="add" size="small" />

packages/web-runtime/src/pages/account/accountCalendar.vue

@@ -2,7 +2,6 @@
   <div id="account-calendar">
     <app-loading-spinner v-if="isCalDavLoading" />
     <template v-else>
-      <h1 class="text-lg mt-1" v-text="$gettext('Calendar')" />
       <span v-if="!isCalDavAvailable" class="flex flex-row items-center">
         <oc-icon name="information" size="small" fill-type="line" class="mr-1" />
 

packages/web-runtime/src/pages/account/accountExtensions.vue

@@ -1,6 +1,5 @@
 <template>
   <div id="account-extensions">
-    <h1 class="text-lg mt-1" v-text="$gettext('Extensions')" />
     <no-content-message
       v-if="!extensionPointsWithUserPreferences.length"
       id="account-extensions-empty"

packages/web-runtime/src/pages/account/accountGDPR.vue

@@ -1,6 +1,5 @@
 <template>
   <div id="account-gdpr">
-    <h1 class="text-lg mt-1" v-text="$gettext('GDPR')" />
     <account-table
       :fields="[
         $gettext('GDPR action name'),

packages/web-runtime/src/pages/account/accountInformation.vue

@@ -1,7 +1,6 @@
 <template>
   <div id="account-information">
     <div class="flex justify-between items-center w-full">
-      <h1 class="mt-2 text-lg" v-text="$gettext('Account Information')" />
       <oc-button
         v-if="accountEditLink"
         type="a"

packages/web-runtime/src/pages/account/accountLayout.vue

@@ -4,8 +4,11 @@
     class="flex justify-center p-4 overflow-auto app-content border w-full bg-role-surface rounded-l-xl transition-all duration-350 ease-[cubic-bezier(0.34,0.11,0,1.12)]"
   >
     <div class="w-full lg:w-3/4 xl:w-1/2">
-      <mobile-nav class="py-2" />
-      <router-view />
+      <mobile-nav class="px-4 pb-4" />
+      <app-bar v-if="!isMobile" :breadcrumbs="breadcrumbs" :has-view-options="false" />
+      <div class="px-4">
+        <router-view />
+      </div>
     </div>
   </main>
 </template>
@@ -15,14 +18,17 @@ import {
   useCapabilityStore,
   useExtensionRegistry,
   MobileNav,
-  AccountExtension
+  AccountExtension,
+  AppBar
 } from '@opencloud-eu/web-pkg'
 import { storeToRefs } from 'pinia'
 import { isLocationAccountActive } from '../../router'
 import { computed, onMounted, onUnmounted, ref, unref } from 'vue'
 import { preferencesPanelExtensionPoint } from '../../extensionPoints'
 import { useGettext } from 'vue3-gettext'
 import { useRoute } from 'vue-router'
+import { v4 as uuidV4 } from 'uuid'
+import { useIsMobile } from '@opencloud-eu/design-system/composables'
 
 const extensionRegistry = useExtensionRegistry()
 const capabilityStore = useCapabilityStore()
@@ -31,6 +37,7 @@ const { supportRadicale } = storeToRefs(capabilityStore)
 const { $gettext } = useGettext()
 const preferencesPanelExtensions = ref<AccountExtension[]>([])
 const route = useRoute()
+const { isMobile } = useIsMobile()
 
 const isAccountInformationActive = useActiveLocation(isLocationAccountActive, 'account-information')
 const isAccountPreferencesActive = useActiveLocation(isLocationAccountActive, 'account-preferences')
@@ -91,7 +98,11 @@ const navItems = computed(() => {
     active: route.path === '/account/extension' && route.query?.['extension-id'] === ext.id
   }))
 
-  return [...baseItems, ...extensionItems].map((navItem) => {
+  return [...baseItems, ...extensionItems]
+})
+
+const navItemExtensions = computed(() => {
+  return unref(navItems).map((navItem) => {
     return {
       id: 'com.github.opencloud-eu.web.account.navItems',
       type: 'sidebarNav',
@@ -101,7 +112,24 @@ const navItems = computed(() => {
   })
 })
 
-extensionRegistry.registerExtensions(navItems)
+const breadcrumbs = computed(() => {
+  const activeNavItem = unref(navItems).find((navItem) => navItem.active)
+
+  if (!activeNavItem) {
+    return []
+  }
+
+  return [
+    {
+      id: uuidV4(),
+      text: activeNavItem.name,
+      to: activeNavItem.route,
+      isStaticNav: true
+    }
+  ]
+})
+
+extensionRegistry.registerExtensions(navItemExtensions)
 
 onMounted(() => {
   preferencesPanelExtensions.value = extensionRegistry.requestExtensions(

packages/web-runtime/src/pages/account/accountPreferences.vue

@@ -1,6 +1,5 @@
 <template>
   <div id="account-preferences">
-    <h1 class="text-lg mt-1" v-text="$gettext('Preferences')" />
     <app-loading-spinner v-if="isLoading" />
     <template v-else>
       <account-table

packages/web-runtime/tests/unit/pages/account/__snapshots__/accountInformation.spec.ts.snap

@@ -86,7 +86,6 @@ exports[`account information page > header section > edit url button > should be
 exports[`account information page > public link context > should render a limited view 1`] = `
 "<div id="account-information">
   <div class="flex justify-between items-center w-full">
-    <h1 class="mt-2 text-lg">Account Information</h1>
     <!--v-if-->
   </div>
   <div class="account-table account-page-info mt-6">

tests/e2e/support/objects/account/actions.ts

@@ -12,7 +12,7 @@ const downloadExportButton = '[data-testid="download-export-btn"]'
 const languageInput = '[data-testid="language"] .vs__search'
 const languageValueDropDown = `.vs__dropdown-menu :text-is("%s")`
 const languageValue = '[data-testid="language"] .vs__selected'
-const accountPageTitle = '//main[@id="account"]//h1[1]'
+const accountPageTitle = '//main[@id="account"]//nav[@id="files-breadcrumb"]'
 const confirmButton = '.oc-modal-body-actions-confirm'
 const topbarProfileAvatarImg = '.oc-topbar-personal-avatar .avatarImg'
 const accountProfileAvatarImg = '.account-table .oc-avatar .avatarImg'
@@ -133,7 +133,7 @@ export const changeLanguage = async (args: {
 
 export const getTitle = (args: { page: Page }): Promise<string> => {
   const { page } = args
-  return page.locator(accountPageTitle).textContent()
+  return page.locator(accountPageTitle).innerText()
 }
 
 export const uploadProfileImage = async (path: string, page: Page): Promise<void> => {