feat(mobile): add global back button in app bar and remove per-view back buttons

Author: pmigueld

packages/mobile/src/App.vue

@@ -18,11 +18,23 @@ onMounted(async () => {
 })
 
 const hiddenNavRoutes = ['login', 'app-login', 'oidc-login', 'callback']
+const rootRoutes = ['home', 'tools', 'settings']
 
 const showBottomNav = computed(() => {
   return !hiddenNavRoutes.includes(route.name as string)
 })
 
+const showBackButton = computed(() => {
+  const name = route.name as string
+  if (rootRoutes.includes(name)) return false
+  if (name === 'callback') return false
+  return true
+})
+
+const onGlobalBack = () => {
+  router.back()
+}
+
 const activeTab = computed(() => {
   const name = route.name as string
   if (name === 'home') return 'home'
@@ -43,6 +55,15 @@ const activeTab = computed(() => {
     <LockScreen v-if="AppLockService.locked.value" />
 
     <v-app-bar flat color="surface" border="b" class="app-bar-safe">
+      <v-btn
+        v-if="showBackButton"
+        icon="mdi-arrow-left"
+        variant="text"
+        size="small"
+        class="ml-1"
+        aria-label="Go back"
+        @click="onGlobalBack"
+      />
       <v-app-bar-title class="text-subtitle-1 font-weight-bold">
         ID PASS DataCollect
       </v-app-bar-title>

packages/mobile/src/views/AppView.vue

@@ -69,10 +69,6 @@ onUnmounted(() => {
   }
 })
 
-const onBack = () => {
-  router.replace({ name: 'home' })
-}
-
 const onLogout = async () => {
   await handleAuthError(route.params.id as string)
 }
@@ -113,8 +109,7 @@ const stats = computed(() => [
 
 <template>
   <v-container v-if="tenantapp" fluid class="pa-4">
-    <div class="d-flex justify-space-between align-center mb-4">
-      <v-btn icon="mdi-arrow-left" variant="tonal" size="small" @click="onBack" aria-label="Back to Collection Programs" />
+    <div class="d-flex justify-end align-center mb-4">
       <div class="d-flex ga-2">
         <v-btn
           prepend-icon="mdi-sync"

packages/mobile/src/views/Claim169HubView.vue

@@ -4,18 +4,11 @@ import { usePlatform } from '@/platform'
 
 const router = useRouter()
 const { isNative } = usePlatform()
-
-const handleBack = () => {
-  router.back()
-}
 </script>
 
 <template>
   <div class="hub">
     <div class="hub-nav">
-      <button class="hub-back" type="button" @click="handleBack" aria-label="Back to Tools">
-        <v-icon size="22">mdi-arrow-left</v-icon>
-      </button>
       <span class="hub-nav-title">Claim-169</span>
     </div>
 

packages/mobile/src/views/Claim169IdentityView.vue

@@ -116,7 +116,6 @@ const credentialInfo = computed(() => {
   return fields
 })
 
-const handleBack = () => router.back()
 const handleScanAnother = () => router.push({ name: 'scan-claim169' })
 
 const saveToApp = async (app: TenantAppData) => {
@@ -174,7 +173,6 @@ const handleSaveToRecords = () => {
 <template>
   <v-container v-if="verifiedIdentity" fluid class="pa-4">
     <div class="d-flex align-center ga-3 mb-4">
-      <v-btn icon="mdi-arrow-left" variant="tonal" size="small" @click="handleBack" aria-label="Go back" />
       <span class="text-h6 font-weight-bold">Identity Details</span>
     </div>
 

packages/mobile/src/views/DetailView.vue

@@ -58,10 +58,6 @@ onMounted(async () => {
   }
 })
 
-const onBack = () => {
-  navigateToEntityList()
-}
-
 const formatEventType = (type: string) => {
   return type
     .split('-')
@@ -99,13 +95,10 @@ const getEntityName = () => {
 
 <template>
   <v-container v-if="tenantapp && storedEntityData" fluid class="pa-4">
-    <div class="d-flex justify-space-between align-center mb-4">
-      <div class="d-flex align-center ga-2">
-        <v-btn icon="mdi-arrow-left" variant="tonal" size="small" @click="onBack" aria-label="Back to submissions" />
-        <v-chip v-if="isOffline" size="x-small" color="warning" variant="tonal" prepend-icon="mdi-wifi-off">
-          Offline
-        </v-chip>
-      </div>
+    <div v-if="isOffline" class="d-flex justify-end align-center mb-4">
+      <v-chip size="x-small" color="warning" variant="tonal" prepend-icon="mdi-wifi-off">
+        Offline
+      </v-chip>
     </div>
 
     <v-card elevation="2" class="mb-4">

packages/mobile/src/views/EditView.vue

@@ -105,19 +105,14 @@ const onSubmit = async (submission: any) => {
   navigateToDetail()
 }
 
-const onBack = () => {
-  navigateToDetail()
-}
-
 const onFormError = (error: unknown) => {
   console.error('Form.io renderer error:', error)
 }
 </script>
 
 <template>
   <v-container v-if="storedEntityData" fluid class="pa-4">
-    <div class="d-flex justify-space-between align-center mb-4">
-      <v-btn icon="mdi-arrow-left" variant="tonal" size="small" @click="onBack" aria-label="Back" />
+    <div class="d-flex justify-end align-center mb-4">
       <div class="d-flex align-center ga-2">
         <v-chip size="small" color="info" variant="tonal">
           {{ entityForm?.displayTemplate || 'Edit' }}

packages/mobile/src/views/EntityView.vue

@@ -172,10 +172,6 @@ onMounted(async () => {
   }
 })
 
-const onBack = () => {
-  navigateToParent()
-}
-
 const statusConfig = (status: SubmissionStatus) => {
   switch (status) {
     case 'synced': return { label: 'Synced', color: 'success', icon: 'mdi-check-circle' }
@@ -207,8 +203,7 @@ const formatTimestamp = (timestamp: string) => {
 
 <template>
   <v-container v-if="tenantapp" fluid class="pa-4">
-    <div class="d-flex justify-space-between align-center mb-4">
-      <v-btn icon="mdi-arrow-left" variant="tonal" size="small" @click="onBack" aria-label="Back to forms" />
+    <div class="d-flex justify-end align-center mb-4">
       <div class="d-flex align-center ga-2">
         <v-chip size="small" color="info" variant="tonal">{{ entityForm?.displayTemplate || 'Form' }}</v-chip>
         <v-chip v-if="isOffline" size="x-small" color="warning" variant="tonal" prepend-icon="mdi-wifi-off">

packages/mobile/src/views/NewView.vue

@@ -94,15 +94,11 @@ const onSubmit = async (submission: FormSubmissionEvent) => {
   navigateToEntityList()
 }
 
-const onBack = () => {
-  navigateToEntityList()
-}
 </script>
 
 <template>
   <v-container v-if="tenantapp && formio" fluid class="pa-4">
-    <div class="d-flex justify-space-between align-center mb-4">
-      <v-btn icon="mdi-arrow-left" variant="tonal" size="small" @click="onBack" aria-label="Back to submissions" />
+    <div class="d-flex justify-end align-center mb-4">
       <div class="d-flex align-center ga-2">
         <v-chip size="small" color="info" variant="tonal">
           {{ entityForm?.displayTemplate || entityTypeLabel }}

packages/mobile/src/views/auth/AuthScreen.vue

@@ -124,10 +124,6 @@ const authenticate = async (provider: string) => {
   }
 }
 
-const onBack = () => {
-  router.push(`/`)
-}
-
 const getProviderName = (provider: string) => {
   const config = authProviders.value.find((c) => c.type === provider)
   return config?.type || provider.charAt(0).toUpperCase() + provider.slice(1)
@@ -147,15 +143,6 @@ const onLogin = async () => {
 </script>
 
 <template>
-  <div class="pa-3">
-    <v-btn
-      v-if="!isCallback"
-      icon="mdi-arrow-left"
-      variant="text"
-      @click="onBack"
-      aria-label="Back"
-    />
-  </div>
   <AuthContainer>
     <div class="py-4">
       <!-- Callback processing state -->