feat: add business brand assets and health checks

apps/mobile/components/TopChrome.tsx

@@ -8,6 +8,11 @@ import { Logo } from "@/components/Logo";
 import { fonts, radii, spacing } from "@/constants/theme";
 import { useAppTheme } from "@/contexts/ThemeContext";
 import { TOP_CHROME_ROW_HEIGHT } from "@/lib/top-chrome-insets";
+import {
+  BusinessBrandImage,
+  hasMobileBusinessBrandAsset,
+} from "@/components/businesses/BusinessBrandImage";
+import { api } from "@/lib/trpc";
 
 type TopChromeProps = {
   showMoreBack?: boolean;
@@ -16,6 +21,7 @@ type TopChromeProps = {
 /** Wordmark left, account switcher right — sits on TopChromeBar blur. */
 export function TopChrome({ showMoreBack = false }: TopChromeProps) {
   const { colors, isDark } = useAppTheme();
+  const defaultBusiness = api.businesses.getDefault.useQuery();
 
   function handleBack() {
     if (router.canGoBack()) {
@@ -34,13 +40,25 @@ export function TopChrome({ showMoreBack = false }: TopChromeProps) {
           onPress={handleBack}
           style={({ pressed }) => [
             styles.backButton,
-            { borderColor: colors.borderGlass, backgroundColor: colors.cardGlass },
+            {
+              borderColor: colors.borderGlass,
+              backgroundColor: colors.cardGlass,
+            },
             pressed && styles.pressed,
           ]}
         >
           <Ionicons name="chevron-back" size={18} color={colors.foreground} />
-          <Text style={[styles.backLabel, { color: colors.foreground }]}>More</Text>
+          <Text style={[styles.backLabel, { color: colors.foreground }]}>
+            More
+          </Text>
         </Pressable>
+      ) : defaultBusiness.data &&
+        hasMobileBusinessBrandAsset(defaultBusiness.data) ? (
+        <BusinessBrandImage
+          business={defaultBusiness.data}
+          kind="wordmark"
+          style={styles.businessWordmark}
+        />
       ) : (
         <Logo size="xs" onDark={isDark} />
       )}
@@ -66,6 +84,10 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderRadius: radii.pill,
   },
+  businessWordmark: {
+    width: 132,
+    height: 32,
+  },
   backLabel: {
     fontFamily: fonts.bodySemiBold,
     fontSize: 13,