fix(mobile): embed fonts and render project favicons reliably (#3823)

Co-authored-by: codex <codex@users.noreply.github.com>

Author: juliusmarminge

apps/mobile/app.config.ts

@@ -63,6 +63,16 @@ function resolveAppVariant(value: string | undefined): AppVariant {
 
 const variant = VARIANT_CONFIG[APP_VARIANT];
 
+const dmSansFonts = {
+  regular: "@expo-google-fonts/dm-sans/400Regular/DMSans_400Regular.ttf",
+  medium: "@expo-google-fonts/dm-sans/500Medium/DMSans_500Medium.ttf",
+  bold: "@expo-google-fonts/dm-sans/700Bold/DMSans_700Bold.ttf",
+} as const;
+
+// These aliases match the fonts' PostScript names on iOS. Register the same
+// names on Android so React Native and the native composer use one set of
+// family names without waiting for runtime font loading.
+
 const config: ExpoConfig = {
   name: variant.appName,
   slug: "t3-code",
@@ -121,7 +131,30 @@ const config: ExpoConfig = {
     favicon: "./assets/favicon.png",
   },
   plugins: [
-    "expo-font",
+    [
+      "expo-font",
+      {
+        ios: {
+          fonts: [dmSansFonts.regular, dmSansFonts.medium, dmSansFonts.bold],
+        },
+        android: {
+          fonts: [
+            {
+              fontFamily: "DMSans-Regular",
+              fontDefinitions: [{ path: dmSansFonts.regular, weight: 400 }],
+            },
+            {
+              fontFamily: "DMSans-Medium",
+              fontDefinitions: [{ path: dmSansFonts.medium, weight: 500 }],
+            },
+            {
+              fontFamily: "DMSans-Bold",
+              fontDefinitions: [{ path: dmSansFonts.bold, weight: 700 }],
+            },
+          ],
+        },
+      },
+    ],
     "expo-secure-store",
     "expo-sqlite",
     ["@clerk/expo", { theme: "./clerk-theme.json" }],

apps/mobile/global.css

@@ -51,6 +51,7 @@
       /* Inputs */
       --color-input: #ffffff;
       --color-input-border: rgba(0, 0, 0, 0.1);
+      --color-sidebar-search: rgba(118, 118, 128, 0.12);
       --color-placeholder: #a3a3a3;
 
       /* Icons */
@@ -144,6 +145,7 @@
       /* Inputs */
       --color-input: #141414;
       --color-input-border: rgba(255, 255, 255, 0.08);
+      --color-sidebar-search: rgba(118, 118, 128, 0.24);
       --color-placeholder: #8e8e93;
 
       /* Icons */
@@ -194,9 +196,10 @@
 
 /* ─── Typography ────────────────────────────────────────────────────── */
 @theme {
-  --font-sans: "DMSans_400Regular";
-  --font-medium: "DMSans_500Medium";
-  --font-bold: "DMSans_700Bold";
+  /* Keep these native family names aligned with app.config.ts. */
+  --font-sans: "DMSans-Regular";
+  --font-medium: "DMSans-Medium";
+  --font-bold: "DMSans-Bold";
 
   /* Keep this scale aligned with src/lib/typography.ts for native style props. */
   --text-3xs: 11px;
@@ -221,14 +224,14 @@
 
 /* ─── Custom utilities ──────────────────────────────────────────────── */
 @utility font-t3-medium {
-  font-family: "DMSans_500Medium";
+  font-family: var(--font-medium);
 }
 
 @utility font-t3-bold {
-  font-family: "DMSans_700Bold";
+  font-family: var(--font-bold);
 }
 
 @utility font-t3-extrabold {
-  font-family: "DMSans_700Bold";
+  font-family: var(--font-bold);
   font-weight: 800;
 }

apps/mobile/modules/t3-composer-editor/ios/T3ComposerEditorView.swift

@@ -300,7 +300,7 @@ public final class T3ComposerEditorView: ExpoView, UITextViewDelegate {
     skillText: "#a21caf",
     fileTint: "#737373"
   )
-  private var fontFamily = "DMSans_400Regular"
+  private var fontFamily = "DMSans-Regular"
   private var fontSize: CGFloat = 14
   private var lineHeight: CGFloat = 20
   private var contentInsetVertical: CGFloat = 0
@@ -608,7 +608,7 @@ public final class T3ComposerEditorView: ExpoView, UITextViewDelegate {
     iconImage: UIImage?,
     style: ComposerChipStyle
   ) -> UIImage {
-    let font = UIFont(name: "DMSans_500Medium", size: max(12, fontSize - 2))
+    let font = UIFont(name: "DMSans-Medium", size: max(12, fontSize - 2))
       ?? UIFont.systemFont(ofSize: max(12, fontSize - 2), weight: .medium)
     let fallbackIcon = UIImage(
       systemName: iconName,

apps/mobile/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "expo start --clear",
     "dev:client": "APP_VARIANT=development expo start --dev-client --scheme t3code-dev --clear",
-    "dev:client:preview": "eas env:exec preview 'EXPO_NO_DOTENV=1 APP_VARIANT=preview expo start --dev-client --scheme t3code-preview --clear'",
+    "dev:client:preview": "eas env:exec preview 'EXPO_NO_DOTENV=1 APP_VARIANT=preview expo start --dev-client --scheme t3code-preview --clear --lan'",
     "start": "expo start",
     "start:dev": "APP_VARIANT=development expo start",
     "start:preview": "APP_VARIANT=preview expo start",
@@ -80,6 +80,7 @@
     "expo-font": "~56.0.7",
     "expo-glass-effect": "~56.0.4",
     "expo-haptics": "~56.0.3",
+    "expo-image": "~56.0.11",
     "expo-image-picker": "~56.0.18",
     "expo-linking": "~56.0.14",
     "expo-network": "~56.0.5",

apps/mobile/src/App.tsx

@@ -1,19 +1,13 @@
-import {
-  DMSans_400Regular,
-  DMSans_500Medium,
-  DMSans_700Bold,
-  useFonts,
-} from "@expo-google-fonts/dm-sans";
 import * as Linking from "expo-linking";
 import * as SplashScreen from "expo-splash-screen";
+import { useEffect } from "react";
 import { StatusBar, useColorScheme } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { KeyboardProvider } from "react-native-keyboard-controller";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { createStaticNavigation, DarkTheme, DefaultTheme } from "@react-navigation/native";
 
 import { RegistryContext } from "@effect/atom-react";
-import { useEffect } from "react";
 import { CloudAuthProvider } from "./features/cloud/CloudAuthProvider";
 import { AppearancePreferencesProvider } from "./features/settings/appearance/AppearancePreferencesProvider";
 import { RootStack } from "./Stack";
@@ -29,17 +23,12 @@ const appLinking = {
 const Navigation = createStaticNavigation(RootStack);
 
 export default function App() {
-  const [fontsLoaded] = useFonts({
-    DMSans_400Regular,
-    DMSans_500Medium,
-    DMSans_700Bold,
-  });
   const colorScheme = useColorScheme();
   const statusBarBg = useThemeColor("--color-status-bar");
 
   useEffect(() => {
-    if (fontsLoaded) SplashScreen.hide();
-  }, [fontsLoaded]);
+    SplashScreen.hide();
+  }, []);
 
   return (
     <RegistryContext.Provider value={appAtomRegistry}>

apps/mobile/src/components/AppText.tsx

@@ -4,7 +4,6 @@ import {
   type TextInputProps as RNTextInputProps,
   type TextProps as RNTextProps,
 } from "react-native";
-import { useThemeColor } from "../lib/useThemeColor";
 
 import { cn } from "../lib/cn";
 
@@ -18,7 +17,7 @@ export function AppText({ className, ...props }: AppTextProps) {
   return <RNText className={cn("font-sans text-foreground", className)} {...props} />;
 }
 
-export type AppTextInputProps = RNTextInputProps & {
+export type AppTextInputProps = Omit<RNTextInputProps, "placeholderTextColor"> & {
   readonly className?: string;
   readonly ref?: React.Ref<RNTextInput>;
 };
@@ -27,22 +26,15 @@ export type AppTextInputProps = RNTextInputProps & {
  * Thin wrapper around RN TextInput with default input styling.
  * Uses Uniwind className — no manual style parsing.
  */
-export function AppTextInput({
-  className,
-  placeholderTextColor,
-  ref,
-  ...props
-}: AppTextInputProps) {
-  const placeholderColor = useThemeColor("--color-placeholder");
-
+export function AppTextInput({ className, ref, ...props }: AppTextInputProps) {
   return (
     <RNTextInput
       ref={ref}
       className={cn(
         "min-h-13.5 rounded-2xl border border-input-border bg-input px-3.5 py-3 font-sans text-base text-foreground",
         className,
       )}
-      placeholderTextColor={placeholderTextColor ?? placeholderColor}
+      placeholderTextColorClassName="accent-placeholder"
       {...props}
     />
   );

apps/mobile/src/components/BrandMark.tsx

@@ -22,14 +22,9 @@ export function BrandMark(props: { readonly compact?: boolean; readonly stageLab
       />
       <View className="gap-1">
         <View className="flex-row items-center gap-2">
-          <Text className="text-lg font-t3-bold text-foreground" style={{ letterSpacing: -0.4 }}>
-            T3 Code
-          </Text>
+          <Text className="text-lg font-t3-bold tracking-[-0.4px] text-foreground">T3 Code</Text>
           <View className="rounded-full bg-subtle px-2 py-1">
-            <Text
-              className="text-3xs font-t3-bold uppercase text-foreground-muted"
-              style={{ letterSpacing: 1.1 }}
-            >
+            <Text className="text-3xs font-t3-bold tracking-[1.1px] uppercase text-foreground-muted">
               {stageLabel}
             </Text>
           </View>

apps/mobile/src/components/ComposerAttachmentStrip.tsx

@@ -39,14 +39,14 @@ export function ComposerAttachmentStrip(props: ComposerAttachmentStripProps) {
       horizontal
       showsHorizontalScrollIndicator={false}
       keyboardShouldPersistTaps="always"
-      style={{ flexGrow: 0 }}
+      className="grow-0"
     >
-      <View style={{ flexDirection: "row", gap: 10 }}>
+      <View className="flex-row gap-2.5">
         {props.attachments.map((image) => (
           <View
             key={image.id}
+            className="relative"
             style={{
-              position: "relative",
               paddingTop: removeButtonGutter,
               paddingRight: removeButtonGutter,
             }}
@@ -66,16 +66,10 @@ export function ComposerAttachmentStrip(props: ComposerAttachmentStripProps) {
               />
             </Pressable>
             <Pressable
+              className="absolute h-[22px] w-[22px] items-center justify-center rounded-[11px] bg-black/55"
               style={{
-                position: "absolute",
                 top: removeButtonPlacement === "gutter" ? 0 : 4,
                 right: removeButtonPlacement === "gutter" ? 0 : 4,
-                width: 22,
-                height: 22,
-                borderRadius: 11,
-                backgroundColor: "rgba(0,0,0,0.55)",
-                alignItems: "center",
-                justifyContent: "center",
               }}
               hitSlop={6}
               onPress={() => props.onRemove(image.id)}

apps/mobile/src/components/ComposerToolbarTrigger.tsx

@@ -31,11 +31,9 @@ export function ComposerToolbarRow(props: {
 }) {
   return (
     <View
+      className="flex-row items-center gap-1.5"
       style={[
         {
-          alignItems: "center",
-          flexDirection: "row",
-          gap: 6,
           paddingBottom: props.paddingBottom ?? 8,
           paddingHorizontal: props.paddingHorizontal ?? 6,
           paddingTop: props.paddingTop ?? 8,
@@ -89,7 +87,7 @@ export function ComposerToolbarScroller(props: {
   }, []);
 
   return (
-    <View className="min-w-0 flex-1" style={{ position: "relative" }}>
+    <View className="relative min-w-0 flex-1">
       <ScrollView
         horizontal
         keyboardShouldPersistTaps="always"

apps/mobile/src/components/GlassSafeAreaView.tsx

@@ -39,22 +39,12 @@ export function GlassSafeAreaView({
         style={{ borderRadius: 0, backgroundColor: "transparent" }}
       >
         <View
-          style={{
-            flexDirection: "row",
-            alignItems: "center",
-            paddingHorizontal: 20,
-            paddingTop: headerPaddingTop,
-            paddingBottom: 16,
-            gap: 10,
-          }}
+          className="flex-row items-center gap-2.5 px-5 pb-4"
+          style={{ paddingTop: headerPaddingTop }}
         >
-          <View style={{ alignItems: "flex-start", justifyContent: "center" }}>{leftSlot}</View>
-          <View
-            style={{ flex: 1, alignItems: "center", justifyContent: "center", overflow: "hidden" }}
-          >
-            {centerSlot}
-          </View>
-          <View style={{ alignItems: "flex-end", justifyContent: "center" }}>{rightSlot}</View>
+          <View className="items-start justify-center">{leftSlot}</View>
+          <View className="flex-1 items-center justify-center overflow-hidden">{centerSlot}</View>
+          <View className="items-end justify-center">{rightSlot}</View>
         </View>
       </GlassSurface>
     </View>