Added better display of bread crums and side bar menus for apps and objects

frontend/pages/[objectName]/[[recordId]]/[[view]].vue

@@ -12,6 +12,9 @@ const router = useRouter()
 const { api } = useApi()
 const { buildListViewConfig, buildDetailViewConfig, buildEditViewConfig } = useFields()
 
+// Use breadcrumbs composable
+const { setBreadcrumbs } = useBreadcrumbs()
+
 // Get object API name from route (case-insensitive)
 const objectApiName = computed(() => {
   const name = route.params.objectName as string
@@ -45,6 +48,59 @@ const {
   handleSave,
 } = useViewState(`/runtime/objects/${objectApiName.value}/records`)
 
+// Compute breadcrumbs based on the current route and object data
+const updateBreadcrumbs = () => {
+  if (!objectDefinition.value) {
+    return
+  }
+  
+  const crumbs: Array<{ name: string; path?: string; isLast?: boolean }> = []
+  
+  // Add app breadcrumb if object belongs to an app
+  if (objectDefinition.value?.app) {
+    crumbs.push({
+      name: objectDefinition.value.app.label || objectDefinition.value.app.name,
+      path: undefined, // No path for app grouping
+    })
+  }
+  
+  // Add object breadcrumb - always use plural
+  const objectLabel = objectDefinition.value?.pluralLabel || objectDefinition.value?.label || objectApiName.value
+  
+  crumbs.push({
+    name: objectLabel,
+    path: `/${objectApiName.value.toLowerCase()}`,
+  })
+  
+  // Add record name if viewing/editing a specific record
+  if (recordId.value && recordId.value !== 'new' && currentRecord.value) {
+    const nameField = objectDefinition.value?.nameField
+    let recordName = recordId.value // fallback to ID
+    
+    // Try to get the display name from the nameField
+    if (nameField && currentRecord.value[nameField]) {
+      recordName = currentRecord.value[nameField]
+    }
+    
+    crumbs.push({
+      name: recordName,
+      isLast: true,
+    })
+  } else if (recordId.value === 'new') {
+    crumbs.push({
+      name: 'New',
+      isLast: true,
+    })
+  }
+  
+  setBreadcrumbs(crumbs)
+}
+
+// Watch for changes that affect breadcrumbs
+watch([objectDefinition, currentRecord, recordId], () => {
+  updateBreadcrumbs()
+}, { deep: true })
+
 // View configs
 const listConfig = computed(() => {
   if (!objectDefinition.value) return null
@@ -162,6 +218,9 @@ onMounted(async () => {
   } else if (recordId.value && recordId.value !== 'new') {
     await fetchRecord(recordId.value)
   }
+  
+  // Update breadcrumbs after data is loaded
+  updateBreadcrumbs()
 })
 </script>