chore(mobile): biome fixes

apps/mobile/app/(app)/(tabs)/_layout.tsx

@@ -1,21 +1,24 @@
-import { Tabs } from 'expo-router';
-import React from 'react';
+import { Tabs } from 'expo-router'
 
-import { TabBarIcon } from '@/components/navigation/TabBarIcon';
+import { TabBarIcon } from '@/components/navigation/TabBarIcon'
 
 export default function TabLayout() {
   return (
     <Tabs
       screenOptions={{
         // tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
         headerShown: false,
-      }}>
+      }}
+    >
       <Tabs.Screen
         name="index"
         options={{
           tabBarShowLabel: false,
           tabBarIcon: ({ color, focused }) => (
-            <TabBarIcon name={focused ? 'home' : 'home-outline'} color={color} />
+            <TabBarIcon
+              name={focused ? 'home' : 'home-outline'}
+              color={color}
+            />
           ),
         }}
       />
@@ -24,10 +27,13 @@ export default function TabLayout() {
         options={{
           tabBarShowLabel: false,
           tabBarIcon: ({ color, focused }) => (
-            <TabBarIcon name={focused ? 'code-slash' : 'code-slash-outline'} color={color} />
+            <TabBarIcon
+              name={focused ? 'code-slash' : 'code-slash-outline'}
+              color={color}
+            />
           ),
         }}
       />
     </Tabs>
-  );
+  )
 }

apps/mobile/app/(app)/(tabs)/explore.tsx

@@ -1,27 +1,26 @@
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/Avatar';
-import { Button } from '@/components/Button';
-import { useAuth } from '@clerk/clerk-expo';
-import { ScrollView, Text, View } from 'react-native';
-import { getHonoClient } from '@/lib/client';
-import { useQuery } from '@tanstack/react-query';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/Avatar'
+import { Button } from '@/components/Button'
+import { getHonoClient } from '@/lib/client'
+import { useAuth } from '@clerk/clerk-expo'
+import { useQuery } from '@tanstack/react-query'
+import { ScrollView, Text, View } from 'react-native'
 
 export default function TabTwoScreen() {
-  const { signOut } = useAuth();
+  const { signOut } = useAuth()
   const { data } = useQuery({
     queryKey: ['me'],
     queryFn: async () => {
       const hc = await getHonoClient()
       const res = await hc.v1.auth.me.$get()
-      if (res.ok) {
-        return await res.json()
-      } else {
+      if (!res.ok) {
         throw new Error(await res.text())
       }
+      return await res.json()
     },
   })
 
   return (
-    <ScrollView contentContainerClassName='flex-1 p-4'>
+    <ScrollView contentContainerClassName="flex-1 p-4">
       <View className="flex justify-center flex-1 items-center flex-row gap-4">
         <Avatar className="h-14 w-14">
           <AvatarImage
@@ -40,8 +39,10 @@ export default function TabTwoScreen() {
           <AvatarFallback>SS</AvatarFallback>
         </Avatar>
       </View>
-      <Text className="font-sans">{data?.email ? `Logged as ${data.email}` : 'loading...'}</Text>
+      <Text className="font-sans">
+        {data?.email ? `Logged as ${data.email}` : 'loading...'}
+      </Text>
       <Button label="Sign Out" onPress={() => signOut()} />
     </ScrollView>
-  );
+  )
 }

apps/mobile/app/(app)/(tabs)/index.tsx

@@ -1,7 +1,5 @@
-import { Text } from 'react-native';
+import { Text } from 'react-native'
 
 export default function HomeScreen() {
-  return (
-    <Text className="font-sans">Home Screen</Text>
-  );
+  return <Text className="font-sans">Home Screen</Text>
 }

apps/mobile/app/(app)/_layout.tsx

@@ -1,17 +1,17 @@
-import { Redirect, Stack } from 'expo-router';
-import { useAuth } from '@clerk/clerk-expo';
-import { Text } from 'react-native';
+import { useAuth } from '@clerk/clerk-expo'
+import { Redirect, Stack } from 'expo-router'
+import { Text } from 'react-native'
 
 export default function AuthenticatedLayout() {
-  const { isLoaded, isSignedIn } = useAuth();
+  const { isLoaded, isSignedIn } = useAuth()
 
   if (!isLoaded) {
-    return <Text>Loading...</Text>;
+    return <Text>Loading...</Text>
   }
 
   if (!isSignedIn) {
-    return <Redirect href={"/login"} />;
+    return <Redirect href={'/login'} />
   }
 
-  return <Stack />;
-};
+  return <Stack />
+}

apps/mobile/app/(auth)/_layout.tsx

@@ -1,19 +1,17 @@
-import { Redirect, Stack } from 'expo-router';
-import { useAuth } from '@clerk/clerk-expo';
-import { SafeAreaView } from 'react-native';
+import { useAuth } from '@clerk/clerk-expo'
+import { Redirect, Stack } from 'expo-router'
+import { SafeAreaView } from 'react-native'
 
 export default function UnAuthenticatedLayout() {
-  const { isSignedIn, userId } = useAuth();
-
-  console.log("UnAuthenticatedLayout", isSignedIn, userId)
+  const { isSignedIn } = useAuth()
 
   if (isSignedIn) {
-    return <Redirect href={"/"} />;
+    return <Redirect href={'/'} />
   }
 
   return (
     <SafeAreaView className="flex-1">
       <Stack screenOptions={{ headerShown: false }} />
     </SafeAreaView>
-  );
-};
+  )
+}

apps/mobile/app/(auth)/login.tsx

@@ -1,10 +1,12 @@
-import { AuthEmail } from "@/components/auth/auth-email";
-import { ScrollView, Text } from "react-native";
+import { AuthEmail } from '@/components/auth/auth-email'
+import { ScrollView, Text } from 'react-native'
 
 export default function LoginScreen() {
   return (
     <ScrollView className="bg-card p-6" contentContainerClassName="gap-4">
-      <Text className="text-3xl font-semibold font-sans">Manage your expense seamlessly</Text>
+      <Text className="text-3xl font-semibold font-sans">
+        Manage your expense seamlessly
+      </Text>
       <Text className="text-muted-foreground font-sans">
         Let <Text className="text-primary">6pm</Text> a good time to spend
       </Text>

apps/mobile/app/+html.tsx

@@ -1,5 +1,5 @@
-import { ScrollViewStyleReset } from 'expo-router/html';
-import { type PropsWithChildren } from 'react';
+import { ScrollViewStyleReset } from 'expo-router/html'
+import type { PropsWithChildren } from 'react'
 
 /**
  * This file is web-only and used to configure the root HTML for every web page during static rendering.
@@ -11,7 +11,10 @@ export default function Root({ children }: PropsWithChildren) {
       <head>
         <meta charSet="utf-8" />
         <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, shrink-to-fit=no"
+        />
 
         {/*
           Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
@@ -20,12 +23,14 @@ export default function Root({ children }: PropsWithChildren) {
         <ScrollViewStyleReset />
 
         {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
+        {/* biome-ignore lint/style/useNamingConvention: <explanation> */}
+        {/* biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation> */}
         <style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
         {/* Add any additional <head> elements that you want globally available on web... */}
       </head>
       <body>{children}</body>
     </html>
-  );
+  )
 }
 
 const responsiveBackground = `
@@ -36,4 +41,4 @@ body {
   body {
     background-color: #000;
   }
-}`;
+}`

apps/mobile/app/+not-found.tsx

@@ -1,20 +1,20 @@
-import { Link, Stack } from 'expo-router';
-import { StyleSheet, Text, View } from 'react-native';
+import { Link, Stack } from 'expo-router'
+import { StyleSheet, Text, View } from 'react-native'
 
-import { Button } from '@/components/Button';
+import { Button } from '@/components/Button'
 
 export default function NotFoundScreen() {
   return (
     <>
       <Stack.Screen options={{ title: 'Oops!' }} />
       <View className="flex-1 items-center justify-center p-4">
         <Text>This screen doesn't exist.</Text>
-        <Link href="/" style={styles.link} asChild>
+        <Link href="/" style={styles.link} asChild={true}>
           <Button label="Go to home screen!" />
         </Link>
       </View>
     </>
-  );
+  )
 }
 
 const styles = StyleSheet.create({
@@ -28,4 +28,4 @@ const styles = StyleSheet.create({
     marginTop: 15,
     paddingVertical: 15,
   },
-});
+})

apps/mobile/app/_layout.tsx

@@ -1,51 +1,58 @@
+import '../global.css'
+
+import { tokenCache } from '@/lib/cache'
+import { ClerkProvider } from '@clerk/clerk-expo'
 import {
-  useFonts,
   BeVietnamPro_300Light,
   BeVietnamPro_400Regular,
   BeVietnamPro_500Medium,
   BeVietnamPro_600SemiBold,
   BeVietnamPro_700Bold,
-} from '@expo-google-fonts/be-vietnam-pro';
-import { Slot } from 'expo-router';
-import * as SplashScreen from 'expo-splash-screen';
-import { useEffect } from 'react';
-import { ClerkProvider } from '@clerk/clerk-expo';
-import { tokenCache } from '@/lib/cache';
+  useFonts,
+} from '@expo-google-fonts/be-vietnam-pro'
+import { Slot } from 'expo-router'
+import * as SplashScreen from 'expo-splash-screen'
+import { useEffect } from 'react'
 
-import 'react-native-reanimated';
-import { useColorScheme } from '@/hooks/useColorScheme';
-import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
-import "../global.css"
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { QueryClientProvider } from '@tanstack/react-query';
-import { queryClient } from '@/lib/client';
+import 'react-native-reanimated'
+import { useColorScheme } from '@/hooks/useColorScheme'
+import { queryClient } from '@/lib/client'
+import {
+  DarkTheme,
+  DefaultTheme,
+  ThemeProvider,
+} from '@react-navigation/native'
+import { QueryClientProvider } from '@tanstack/react-query'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
-SplashScreen.preventAutoHideAsync();
+SplashScreen.preventAutoHideAsync()
 
+// biome-ignore lint/style/useNamingConvention: <explanation>
 export const unstable_settings = {
   initialRouteName: '(app)',
-};
+}
 
 export default function RootLayout() {
-  const colorScheme = useColorScheme();
+  const colorScheme = useColorScheme()
   const [fontsLoaded] = useFonts({
     BeVietnamPro_300Light,
     BeVietnamPro_400Regular,
     BeVietnamPro_500Medium,
     BeVietnamPro_600SemiBold,
     BeVietnamPro_700Bold,
+    // biome-ignore lint/style/useNamingConvention: <explanation>
     SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
-  });
+  })
 
   useEffect(() => {
     if (fontsLoaded) {
-      SplashScreen.hideAsync();
+      SplashScreen.hideAsync()
     }
-  }, [fontsLoaded]);
+  }, [fontsLoaded])
 
   if (!fontsLoaded) {
-    return null;
+    return null
   }
 
   return (
@@ -54,12 +61,14 @@ export default function RootLayout() {
         publishableKey={process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY!}
         tokenCache={tokenCache}
       >
-        <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+        <ThemeProvider
+          value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}
+        >
           <SafeAreaProvider>
             <Slot />
           </SafeAreaProvider>
         </ThemeProvider>
       </ClerkProvider>
     </QueryClientProvider>
-  );
+  )
 }

apps/mobile/biome.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.8.0/schema.json",
+  "extends": ["../../biome.json"],
+  "files": {
+    "include": ["**/*.ts", "**/*.tsx"],
+    "ignore": ["**/*.d.ts"]
+  }
+}