From 3d5246ef967c0406e49821b0ca10ac2a5184bc04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Qu=E1=BB=91c=20Kh=C3=A1nh?= <quocs@Quocs-Laptop.local>
Date: Sun, 9 Jun 2024 14:20:10 +0700
Subject: [PATCH] chore(mobile): biome fixes

---
 apps/mobile/app/(app)/(tabs)/_layout.tsx      | 20 +++--
 apps/mobile/app/(app)/(tabs)/explore.tsx      | 27 +++---
 apps/mobile/app/(app)/(tabs)/index.tsx        |  6 +-
 apps/mobile/app/(app)/_layout.tsx             | 16 ++--
 apps/mobile/app/(auth)/_layout.tsx            | 16 ++--
 apps/mobile/app/(auth)/login.tsx              |  8 +-
 apps/mobile/app/+html.tsx                     | 15 ++--
 apps/mobile/app/+not-found.tsx                | 12 +--
 apps/mobile/app/_layout.tsx                   | 55 +++++++-----
 apps/mobile/biome.json                        |  8 ++
 apps/mobile/components/Avatar.tsx             | 30 +++----
 apps/mobile/components/Badge.tsx              | 20 ++---
 apps/mobile/components/Button.tsx             | 24 +++---
 apps/mobile/components/Card.tsx               | 32 +++----
 apps/mobile/components/Checkbox.tsx           | 24 +++---
 apps/mobile/components/Dialog.tsx             | 43 +++++-----
 apps/mobile/components/DropDown.tsx           | 79 +++++++++---------
 apps/mobile/components/Input.tsx              | 21 ++---
 apps/mobile/components/ParallaxScrollView.tsx | 39 +++++----
 apps/mobile/components/Progress.tsx           | 18 ++--
 apps/mobile/components/RadioGroup.tsx         | 56 ++++++-------
 apps/mobile/components/Skeleton.tsx           | 18 ++--
 apps/mobile/components/Switch.tsx             | 22 ++---
 apps/mobile/components/Tabs.tsx               | 50 +++++------
 apps/mobile/components/Toast.tsx              | 83 ++++++++++---------
 .../components/__tests__/ThemedText-test.tsx  | 11 ++-
 apps/mobile/components/auth/auth-email.tsx    | 78 ++++++++++-------
 .../components/navigation/TabBarIcon.tsx      | 13 +--
 apps/mobile/constants/Colors.ts               | 26 ------
 apps/mobile/global.css                        | 14 ++--
 apps/mobile/hooks/useColorScheme.ts           |  2 +-
 apps/mobile/hooks/useColorScheme.web.ts       |  2 +-
 apps/mobile/hooks/useThemeColor.ts            | 22 -----
 apps/mobile/lib/cache.ts                      | 23 +++--
 apps/mobile/lib/client.ts                     | 18 ++--
 apps/mobile/lib/theme.ts                      |  2 +-
 apps/mobile/lib/utils.ts                      |  6 +-
 apps/mobile/package.json                      |  3 +-
 biome.json                                    |  2 +-
 39 files changed, 489 insertions(+), 475 deletions(-)
 create mode 100644 apps/mobile/biome.json
 delete mode 100644 apps/mobile/constants/Colors.ts
 delete mode 100644 apps/mobile/hooks/useThemeColor.ts

diff --git a/apps/mobile/app/(app)/(tabs)/_layout.tsx b/apps/mobile/app/(app)/(tabs)/_layout.tsx
index a5cbb77a..db31e18c 100644
--- a/apps/mobile/app/(app)/(tabs)/_layout.tsx
+++ b/apps/mobile/app/(app)/(tabs)/_layout.tsx
@@ -1,7 +1,6 @@
-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 (
@@ -9,13 +8,17 @@ export default function TabLayout() {
       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>
-  );
+  )
 }
diff --git a/apps/mobile/app/(app)/(tabs)/explore.tsx b/apps/mobile/app/(app)/(tabs)/explore.tsx
index 54875a39..99144fdc 100644
--- a/apps/mobile/app/(app)/(tabs)/explore.tsx
+++ b/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>
-  );
+  )
 }
diff --git a/apps/mobile/app/(app)/(tabs)/index.tsx b/apps/mobile/app/(app)/(tabs)/index.tsx
index 047cff7a..97140573 100644
--- a/apps/mobile/app/(app)/(tabs)/index.tsx
+++ b/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>
 }
diff --git a/apps/mobile/app/(app)/_layout.tsx b/apps/mobile/app/(app)/_layout.tsx
index 3e8e4381..be73b900 100644
--- a/apps/mobile/app/(app)/_layout.tsx
+++ b/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 />
+}
diff --git a/apps/mobile/app/(auth)/_layout.tsx b/apps/mobile/app/(auth)/_layout.tsx
index ef347b8b..79565437 100644
--- a/apps/mobile/app/(auth)/_layout.tsx
+++ b/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>
-  );
-};
+  )
+}
diff --git a/apps/mobile/app/(auth)/login.tsx b/apps/mobile/app/(auth)/login.tsx
index 7e2b489f..91795eb8 100644
--- a/apps/mobile/app/(auth)/login.tsx
+++ b/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>
diff --git a/apps/mobile/app/+html.tsx b/apps/mobile/app/+html.tsx
index 8b924561..5b09e88c 100644
--- a/apps/mobile/app/+html.tsx
+++ b/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;
   }
-}`;
+}`
diff --git a/apps/mobile/app/+not-found.tsx b/apps/mobile/app/+not-found.tsx
index 4819be7d..374b39af 100644
--- a/apps/mobile/app/+not-found.tsx
+++ b/apps/mobile/app/+not-found.tsx
@@ -1,7 +1,7 @@
-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 (
@@ -9,12 +9,12 @@ export default function NotFoundScreen() {
       <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,
   },
-});
+})
diff --git a/apps/mobile/app/_layout.tsx b/apps/mobile/app/_layout.tsx
index 2f4ab3f1..afcceff6 100644
--- a/apps/mobile/app/_layout.tsx
+++ b/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>
-  );
+  )
 }
diff --git a/apps/mobile/biome.json b/apps/mobile/biome.json
new file mode 100644
index 00000000..19b973b8
--- /dev/null
+++ b/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"]
+  }
+}
diff --git a/apps/mobile/components/Avatar.tsx b/apps/mobile/components/Avatar.tsx
index a000cb2b..6796600e 100644
--- a/apps/mobile/components/Avatar.tsx
+++ b/apps/mobile/components/Avatar.tsx
@@ -1,7 +1,7 @@
-import { forwardRef, useState } from 'react';
-import { Image, Text, View } from 'react-native';
+import { forwardRef, useState } from 'react'
+import { Image, Text, View } from 'react-native'
 
-import { cn } from '../lib/utils';
+import { cn } from '../lib/utils'
 
 const Avatar = forwardRef<
   React.ElementRef<typeof View>,
@@ -11,21 +11,21 @@ const Avatar = forwardRef<
     ref={ref}
     className={cn(
       'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
-      className
+      className,
     )}
     {...props}
   />
-));
-Avatar.displayName = 'Avatar';
+))
+Avatar.displayName = 'Avatar'
 
 const AvatarImage = forwardRef<
   React.ElementRef<typeof Image>,
   React.ComponentPropsWithoutRef<typeof Image>
 >(({ className, ...props }, ref) => {
-  const [hasError, setHasError] = useState(false);
+  const [hasError, setHasError] = useState(false)
 
   if (hasError) {
-    return null;
+    return null
   }
   return (
     <Image
@@ -34,9 +34,9 @@ const AvatarImage = forwardRef<
       className={cn('aspect-square h-full w-full', className)}
       {...props}
     />
-  );
-});
-AvatarImage.displayName = 'AvatarImage';
+  )
+})
+AvatarImage.displayName = 'AvatarImage'
 
 const AvatarFallback = forwardRef<
   React.ElementRef<typeof View>,
@@ -46,7 +46,7 @@ const AvatarFallback = forwardRef<
     ref={ref}
     className={cn(
       'flex h-full w-full items-center justify-center rounded-full bg-muted',
-      className
+      className,
     )}
     {...props}
   >
@@ -54,7 +54,7 @@ const AvatarFallback = forwardRef<
       {children}
     </Text>
   </View>
-));
-AvatarFallback.displayName = 'AvatarFallback';
+))
+AvatarFallback.displayName = 'AvatarFallback'
 
-export { Avatar, AvatarImage, AvatarFallback };
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/apps/mobile/components/Badge.tsx b/apps/mobile/components/Badge.tsx
index 38cb0c26..7306e2ec 100644
--- a/apps/mobile/components/Badge.tsx
+++ b/apps/mobile/components/Badge.tsx
@@ -1,7 +1,7 @@
-import { type VariantProps, cva } from 'class-variance-authority';
-import { Text, View } from 'react-native';
+import { type VariantProps, cva } from 'class-variance-authority'
+import { Text, View } from 'react-native'
 
-import { cn } from '../lib/utils';
+import { cn } from '../lib/utils'
 
 const badgeVariants = cva(
   'flex flex-row items-center rounded-full px-2 py-1 text-xs font-semibold',
@@ -17,8 +17,8 @@ const badgeVariants = cva(
     defaultVariants: {
       variant: 'default',
     },
-  }
-);
+  },
+)
 
 const badgeTextVariants = cva('font-medium text-center text-xs', {
   variants: {
@@ -32,13 +32,13 @@ const badgeTextVariants = cva('font-medium text-center text-xs', {
   defaultVariants: {
     variant: 'default',
   },
-});
+})
 
 export interface BadgeProps
   extends React.ComponentPropsWithoutRef<typeof View>,
     VariantProps<typeof badgeVariants> {
-  label: string;
-  labelClasses?: string;
+  label: string
+  labelClasses?: string
 }
 function Badge({
   label,
@@ -53,7 +53,7 @@ function Badge({
         {label}
       </Text>
     </View>
-  );
+  )
 }
 
-export { Badge, badgeVariants };
+export { Badge, badgeVariants }
diff --git a/apps/mobile/components/Button.tsx b/apps/mobile/components/Button.tsx
index fd4a98eb..f3318110 100644
--- a/apps/mobile/components/Button.tsx
+++ b/apps/mobile/components/Button.tsx
@@ -1,7 +1,7 @@
-import { type VariantProps, cva } from 'class-variance-authority';
-import { Text, TouchableOpacity } from 'react-native';
+import { type VariantProps, cva } from 'class-variance-authority'
+import { Text, TouchableOpacity } from 'react-native'
 
-import { cn } from '../lib/utils';
+import { cn } from '../lib/utils'
 
 const buttonVariants = cva(
   'flex flex-row items-center justify-center rounded-md',
@@ -24,8 +24,8 @@ const buttonVariants = cva(
       variant: 'default',
       size: 'default',
     },
-  }
-);
+  },
+)
 
 const buttonTextVariants = cva('text-center font-medium font-sans', {
   variants: {
@@ -46,13 +46,13 @@ const buttonTextVariants = cva('text-center font-medium font-sans', {
     variant: 'default',
     size: 'default',
   },
-});
+})
 
 interface ButtonProps
   extends React.ComponentPropsWithoutRef<typeof TouchableOpacity>,
-  VariantProps<typeof buttonVariants> {
-  label: string;
-  labelClasses?: string;
+    VariantProps<typeof buttonVariants> {
+  label: string
+  labelClasses?: string
 }
 function Button({
   label,
@@ -69,13 +69,13 @@ function Button({
     >
       <Text
         className={cn(
-          buttonTextVariants({ variant, size, className: labelClasses })
+          buttonTextVariants({ variant, size, className: labelClasses }),
         )}
       >
         {label}
       </Text>
     </TouchableOpacity>
-  );
+  )
 }
 
-export { Button, buttonVariants, buttonTextVariants };
+export { Button, buttonVariants, buttonTextVariants }
diff --git a/apps/mobile/components/Card.tsx b/apps/mobile/components/Card.tsx
index 12799ae2..d3e3fead 100644
--- a/apps/mobile/components/Card.tsx
+++ b/apps/mobile/components/Card.tsx
@@ -1,6 +1,6 @@
-import { Text, View } from 'react-native';
+import { Text, View } from 'react-native'
 
-import { cn } from '../lib/utils';
+import { cn } from '../lib/utils'
 
 function Card({
   className,
@@ -11,14 +11,14 @@ function Card({
       className={cn('rounded-xl border border-border', className)}
       {...props}
     />
-  );
+  )
 }
 
 function CardHeader({
   className,
   ...props
 }: React.ComponentPropsWithoutRef<typeof View>) {
-  return <View className={cn('p-4', className)} {...props} />;
+  return <View className={cn('p-4', className)} {...props} />
 }
 
 function CardTitle({
@@ -29,11 +29,11 @@ function CardTitle({
     <Text
       className={cn(
         'text-2xl font-semibold tracking-tight text-primary',
-        className
+        className,
       )}
       {...props}
     />
-  );
+  )
 }
 
 function CardDescription({
@@ -45,14 +45,14 @@ function CardDescription({
       className={cn('text-sm text-muted-foreground', className)}
       {...props}
     />
-  );
+  )
 }
 
 function CardContent({
   className,
   ...props
 }: React.ComponentPropsWithoutRef<typeof View>) {
-  return <View className={cn('p-4 pt-0', className)} {...props} />;
+  return <View className={cn('p-4 pt-0', className)} {...props} />
 }
 
 // TODO: style
@@ -65,15 +65,15 @@ function CardFooter({
       className={cn(className, 'flex flex-row items-center p-4 pt-0')}
       {...props}
     />
-  );
+  )
 }
 
 interface SimpleCardProps {
-  className?: string;
-  title?: string;
-  description?: string;
-  content?: string;
-  footer?: string;
+  className?: string
+  title?: string
+  description?: string
+  content?: string
+  footer?: string
 }
 function SimpleCard({
   className,
@@ -105,7 +105,7 @@ function SimpleCard({
         </CardFooter>
       )}
     </Card>
-  );
+  )
 }
 
 export {
@@ -116,4 +116,4 @@ export {
   CardContent,
   CardFooter,
   SimpleCard,
-};
+}
diff --git a/apps/mobile/components/Checkbox.tsx b/apps/mobile/components/Checkbox.tsx
index a90ea7ba..da159c88 100644
--- a/apps/mobile/components/Checkbox.tsx
+++ b/apps/mobile/components/Checkbox.tsx
@@ -1,13 +1,13 @@
-import { useState } from 'react';
-import { Text, TouchableOpacity, View } from 'react-native';
+import { useState } from 'react'
+import { Text, TouchableOpacity, View } from 'react-native'
 
-import { cn } from '../lib/utils';
+import { cn } from '../lib/utils'
 
 // TODO: make controlled (optional)
 interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof View> {
-  label?: string;
-  labelClasses?: string;
-  checkboxClasses?: string;
+  label?: string
+  labelClasses?: string
+  checkboxClasses?: string
 }
 function Checkbox({
   label,
@@ -16,11 +16,11 @@ function Checkbox({
   className,
   ...props
 }: CheckboxProps) {
-  const [isChecked, setChecked] = useState(false);
+  const [isChecked, setChecked] = useState(false)
 
   const toggleCheckbox = () => {
-    setChecked(prev => !prev);
-  };
+    setChecked((prev) => !prev)
+  }
 
   return (
     <View
@@ -34,7 +34,7 @@ function Checkbox({
             {
               'bg-foreground': isChecked,
             },
-            checkboxClasses
+            checkboxClasses,
           )}
         >
           {isChecked && <Text className="text-background text-xs">✓</Text>}
@@ -44,7 +44,7 @@ function Checkbox({
         <Text className={cn('text-primary', labelClasses)}>{label}</Text>
       )}
     </View>
-  );
+  )
 }
 
-export { Checkbox };
+export { Checkbox }
diff --git a/apps/mobile/components/Dialog.tsx b/apps/mobile/components/Dialog.tsx
index baec0d60..e109dd38 100644
--- a/apps/mobile/components/Dialog.tsx
+++ b/apps/mobile/components/Dialog.tsx
@@ -1,43 +1,44 @@
-import { cloneElement, createContext, useContext, useState } from 'react';
-import { Modal, TouchableOpacity, View } from 'react-native';
+import { cloneElement, createContext, useContext, useState } from 'react'
+import { Modal, TouchableOpacity, View } from 'react-native'
 
-import { cn } from '../lib/utils';
+import { cn } from '../lib/utils'
 
 interface DialogContextType {
-  open: boolean;
-  setOpen: (open: boolean) => void;
+  open: boolean
+  setOpen: (open: boolean) => void
 }
 
-const DialogContext = createContext<DialogContextType | undefined>(undefined);
+const DialogContext = createContext<DialogContextType | undefined>(undefined)
 
 function Dialog({ children }: { children: React.ReactNode }) {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(false)
 
   return (
     <DialogContext.Provider value={{ open, setOpen }}>
       {children}
     </DialogContext.Provider>
-  );
+  )
 }
 
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
 function DialogTrigger({ children }: any) {
-  const { setOpen } = useDialog();
+  const { setOpen } = useDialog()
 
-  return cloneElement(children, { onPress: () => setOpen(true) });
+  return cloneElement(children, { onPress: () => setOpen(true) })
 }
 
 function DialogContent({
   className,
   children,
 }: {
-  className?: string;
-  children: React.ReactNode;
+  className?: string
+  children: React.ReactNode
 }) {
-  const { open, setOpen } = useDialog();
+  const { open, setOpen } = useDialog()
 
   return (
     <Modal
-      transparent
+      transparent={true}
       animationType="fade"
       visible={open}
       onRequestClose={() => setOpen(false)}
@@ -50,7 +51,7 @@ function DialogContent({
           <TouchableOpacity
             className={cn(
               'border border-border bg-background rounded-lg p-6 shadow-lg',
-              className
+              className,
             )}
             activeOpacity={1}
           >
@@ -59,15 +60,15 @@ function DialogContent({
         </View>
       </TouchableOpacity>
     </Modal>
-  );
+  )
 }
 
 const useDialog = () => {
-  const context = useContext(DialogContext);
+  const context = useContext(DialogContext)
   if (!context) {
-    throw new Error('useDialog must be used within a DialogProvider');
+    throw new Error('useDialog must be used within a DialogProvider')
   }
-  return context;
-};
+  return context
+}
 
-export { Dialog, DialogTrigger, DialogContent, useDialog };
+export { Dialog, DialogTrigger, DialogContent, useDialog }
diff --git a/apps/mobile/components/DropDown.tsx b/apps/mobile/components/DropDown.tsx
index e11b5073..000c5e3d 100644
--- a/apps/mobile/components/DropDown.tsx
+++ b/apps/mobile/components/DropDown.tsx
@@ -1,94 +1,91 @@
-import React, {
-  cloneElement,
-  createContext,
-  useContext,
-  useState,
-} from 'react';
-import { Text, View } from 'react-native';
+import type React from 'react'
+import { cloneElement, createContext, useContext, useState } from 'react'
+import { Text, View } from 'react-native'
 
-import { cn } from '../lib/utils';
+import { cn } from '../lib/utils'
 
 interface DropDownContextType {
-  open: boolean;
-  setOpen: (open: boolean) => void;
+  open: boolean
+  setOpen: (open: boolean) => void
 }
 
 const DropDownContext = createContext<DropDownContextType | undefined>(
-  undefined
-);
+  undefined,
+)
 
 const DropDown = ({ children }: { children: React.ReactNode }) => {
-  const [open, setOpen] = useState<boolean>(false);
+  const [open, setOpen] = useState<boolean>(false)
   return (
     <DropDownContext.Provider value={{ open, setOpen }}>
       <View className="relative">{children}</View>
     </DropDownContext.Provider>
-  );
-};
+  )
+}
 
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
 const DropDownTrigger = ({ children }: any) => {
-  const { open, setOpen } = useDropdown();
+  const { open, setOpen } = useDropdown()
   return cloneElement(children, {
     onPress: () => setOpen(!open),
-  });
-};
+  })
+}
 
 type DropDownContentTypes = {
-  className?: string;
-  children: React.ReactNode;
-};
+  className?: string
+  children: React.ReactNode
+}
 
 const DropDownContent = ({ className, children }: DropDownContentTypes) => {
-  const { open } = useDropdown();
+  const { open } = useDropdown()
   return (
     <>
       {open && (
         <View
           className={cn(
             'min-w-[8rem] w-full absolute flex gap-3 overflow-hidden rounded-md border border-border bg-background text-popover-foreground shadow-md mt-3 p-3 top-12 mx-auto justify-center z-50',
-            className
+            className,
           )}
         >
           {children}
         </View>
       )}
     </>
-  );
-};
+  )
+}
 
 type DropDownLabelProps = {
-  labelTitle: string;
-};
+  labelTitle: string
+}
 
 const DropDownLabel = ({ labelTitle }: DropDownLabelProps) => {
   return (
     <Text className="text-xl font-semibold text-primary">{labelTitle}</Text>
-  );
-};
+  )
+}
 
 type DropDownItemProps = {
-  children: React.ReactNode;
-  className?: string;
-};
+  children: React.ReactNode
+  className?: string
+}
 
 const DropDownItem = ({ children, className }: DropDownItemProps) => {
   return (
     <View className={cn('p-2 border border-border rounded-md', className)}>
       {children}
     </View>
-  );
-};
+  )
+}
 
 const DropDownItemSeparator = () => {
-  return <View className="h-[1px] bg-border flex-1" />;
-};
+  return <View className="h-[1px] bg-border flex-1" />
+}
 const useDropdown = () => {
-  const context = useContext(DropDownContext);
+  const context = useContext(DropDownContext)
   if (!context) {
-    throw new Error('useDropdown must be used within a DropdownProvider');
+    throw new Error('useDropdown must be used within a DropdownProvider')
   }
-  return context;
-};
+  return context
+}
 export {
   DropDown,
   DropDownTrigger,
@@ -97,4 +94,4 @@ export {
   DropDownItemSeparator,
   DropDownItem,
   useDropdown,
-};
+}
diff --git a/apps/mobile/components/Input.tsx b/apps/mobile/components/Input.tsx
index 0255b2a5..fcc1cdab 100644
--- a/apps/mobile/components/Input.tsx
+++ b/apps/mobile/components/Input.tsx
@@ -1,27 +1,28 @@
-import { forwardRef } from 'react';
-import { Text, TextInput, View } from 'react-native';
+import { forwardRef } from 'react'
+import { Text, TextInput, View } from 'react-native'
 
-import { cn } from '../lib/utils';
+import { cn } from '../lib/utils'
 
 export interface InputProps
   extends React.ComponentPropsWithoutRef<typeof TextInput> {
-  label?: string;
-  labelClasses?: string;
-  inputClasses?: string;
+  label?: string
+  labelClasses?: string
+  inputClasses?: string
 }
 const Input = forwardRef<React.ElementRef<typeof TextInput>, InputProps>(
+  // biome-ignore lint/correctness/noUnusedVariables: <explanation>
   ({ className, label, labelClasses, inputClasses, ...props }, ref) => (
     <View className={cn('flex flex-col gap-1.5', className)}>
       {label && <Text className={cn('text-base', labelClasses)}>{label}</Text>}
       <TextInput
         className={cn(
           inputClasses,
-          'border border-input py-2.5 px-4 rounded-lg font-sans'
+          'border border-input py-2.5 px-4 rounded-lg font-sans',
         )}
         {...props}
       />
     </View>
-  )
-);
+  ),
+)
 
-export { Input };
+export { Input }
diff --git a/apps/mobile/components/ParallaxScrollView.tsx b/apps/mobile/components/ParallaxScrollView.tsx
index c1e2243d..3000fbf6 100644
--- a/apps/mobile/components/ParallaxScrollView.tsx
+++ b/apps/mobile/components/ParallaxScrollView.tsx
@@ -1,27 +1,27 @@
-import type { PropsWithChildren, ReactElement } from 'react';
-import { StyleSheet, useColorScheme, View } from 'react-native';
+import type { PropsWithChildren, ReactElement } from 'react'
+import { StyleSheet, View, useColorScheme } from 'react-native'
 import Animated, {
   interpolate,
   useAnimatedRef,
   useAnimatedStyle,
   useScrollViewOffset,
-} from 'react-native-reanimated';
+} from 'react-native-reanimated'
 
-const HEADER_HEIGHT = 250;
+const HEADER_HEIGHT = 250
 
 type Props = PropsWithChildren<{
-  headerImage: ReactElement;
-  headerBackgroundColor: { dark: string; light: string };
-}>;
+  headerImage: ReactElement
+  headerBackgroundColor: { dark: string; light: string }
+}>
 
 export default function ParallaxScrollView({
   children,
   headerImage,
   headerBackgroundColor,
 }: Props) {
-  const colorScheme = useColorScheme() ?? 'light';
-  const scrollRef = useAnimatedRef<Animated.ScrollView>();
-  const scrollOffset = useScrollViewOffset(scrollRef);
+  const colorScheme = useColorScheme() ?? 'light'
+  const scrollRef = useAnimatedRef<Animated.ScrollView>()
+  const scrollOffset = useScrollViewOffset(scrollRef)
 
   const headerAnimatedStyle = useAnimatedStyle(() => {
     return {
@@ -30,15 +30,19 @@ export default function ParallaxScrollView({
           translateY: interpolate(
             scrollOffset.value,
             [-HEADER_HEIGHT, 0, HEADER_HEIGHT],
-            [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75]
+            [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75],
           ),
         },
         {
-          scale: interpolate(scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], [2, 1, 1]),
+          scale: interpolate(
+            scrollOffset.value,
+            [-HEADER_HEIGHT, 0, HEADER_HEIGHT],
+            [2, 1, 1],
+          ),
         },
       ],
-    };
-  });
+    }
+  })
 
   return (
     <View style={styles.container}>
@@ -48,13 +52,14 @@ export default function ParallaxScrollView({
             styles.header,
             { backgroundColor: headerBackgroundColor[colorScheme] },
             headerAnimatedStyle,
-          ]}>
+          ]}
+        >
           {headerImage}
         </Animated.View>
         <View style={styles.content}>{children}</View>
       </Animated.ScrollView>
     </View>
-  );
+  )
 }
 
 const styles = StyleSheet.create({
@@ -71,4 +76,4 @@ const styles = StyleSheet.create({
     gap: 16,
     overflow: 'hidden',
   },
-});
+})
diff --git a/apps/mobile/components/Progress.tsx b/apps/mobile/components/Progress.tsx
index 8a8fbbdb..731f8507 100644
--- a/apps/mobile/components/Progress.tsx
+++ b/apps/mobile/components/Progress.tsx
@@ -1,7 +1,7 @@
-import { useEffect, useRef } from 'react';
-import { Animated, View as RnView, type View } from 'react-native';
+import { useEffect, useRef } from 'react'
+import { Animated, View as RnView, type View } from 'react-native'
 
-import { cn } from '../lib/utils';
+import { cn } from '../lib/utils'
 
 function Progress({
   className,
@@ -9,21 +9,21 @@ function Progress({
 }: { className?: string; value: number } & React.ComponentPropsWithoutRef<
   typeof View
 >) {
-  const widthAnim = useRef(new Animated.Value(0)).current;
+  const widthAnim = useRef(new Animated.Value(0)).current
 
   useEffect(() => {
     Animated.timing(widthAnim, {
       toValue: props.value,
       duration: 1000,
       useNativeDriver: false,
-    }).start();
-  }, [widthAnim, props.value]);
+    }).start()
+  }, [widthAnim, props.value])
 
   return (
     <RnView
       className={cn(
         'h-4 w-full overflow-hidden rounded-full bg-secondary',
-        className
+        className,
       )}
     >
       <Animated.View
@@ -36,7 +36,7 @@ function Progress({
         }}
       />
     </RnView>
-  );
+  )
 }
 
-export { Progress };
+export { Progress }
diff --git a/apps/mobile/components/RadioGroup.tsx b/apps/mobile/components/RadioGroup.tsx
index 3b910598..9c6eb7a4 100644
--- a/apps/mobile/components/RadioGroup.tsx
+++ b/apps/mobile/components/RadioGroup.tsx
@@ -1,37 +1,37 @@
-import { Circle, CircleDot } from 'lucide-react-native';
-import { createContext, useContext, useState } from 'react';
-import { Text, TouchableOpacity, useColorScheme } from 'react-native';
+import { Circle, CircleDot } from 'lucide-react-native'
+import { createContext, useContext, useState } from 'react'
+import { Text, TouchableOpacity, useColorScheme } from 'react-native'
 
-import { cn } from '../lib/utils';
-import { theme } from '../lib/theme';
+import { theme } from '../lib/theme'
+import { cn } from '../lib/utils'
 
 interface RadioGroupContextType {
-  value: string;
-  setValue: (value: string) => void;
+  value: string
+  setValue: (value: string) => void
 }
 const RadioGroupContext = createContext<RadioGroupContextType | undefined>(
-  undefined
-);
+  undefined,
+)
 
 interface RadioGroupProps {
-  defaultValue: string;
-  children: React.ReactNode;
+  defaultValue: string
+  children: React.ReactNode
 }
 function RadioGroup({ defaultValue, children }: RadioGroupProps) {
-  const [value, setValue] = useState<string>(defaultValue);
+  const [value, setValue] = useState<string>(defaultValue)
 
   return (
     <RadioGroupContext.Provider value={{ value, setValue }}>
       {children}
     </RadioGroupContext.Provider>
-  );
+  )
 }
 
 interface RadioGroupItemProps
   extends React.ComponentPropsWithoutRef<typeof TouchableOpacity> {
-  value: string;
-  label?: string;
-  labelClasses?: string;
+  value: string
+  label?: string
+  labelClasses?: string
 }
 function RadioGroupItem({
   value,
@@ -40,14 +40,14 @@ function RadioGroupItem({
   labelClasses,
   ...props
 }: RadioGroupItemProps) {
-  const context = useContext(RadioGroupContext);
+  const context = useContext(RadioGroupContext)
   if (!context) {
-    throw new Error('RadioGroupItem must be used within a RadioGroup');
+    throw new Error('RadioGroupItem must be used within a RadioGroup')
   }
-  const { value: selectedValue, setValue } = context;
+  const { value: selectedValue, setValue } = context
 
-  const colorScheme = useColorScheme();
-  const currentTheme = colorScheme === 'dark' ? theme.dark : theme.light;
+  const colorScheme = useColorScheme()
+  const currentTheme = colorScheme === 'dark' ? theme.dark : theme.light
 
   return (
     <TouchableOpacity
@@ -64,19 +64,19 @@ function RadioGroupItem({
         <Text className={cn('text-primary', labelClasses)}>{label}</Text>
       )}
     </TouchableOpacity>
-  );
+  )
 }
 
 interface RadioGroupLabelProps
   extends React.ComponentPropsWithoutRef<typeof TouchableOpacity> {
-  value: string;
+  value: string
 }
 function RadioGroupLabel({ value, className, ...props }: RadioGroupLabelProps) {
-  const context = useContext(RadioGroupContext);
+  const context = useContext(RadioGroupContext)
   if (!context) {
-    throw new Error('RadioGroupLabel must be used within a RadioGroup');
+    throw new Error('RadioGroupLabel must be used within a RadioGroup')
   }
-  const { setValue } = context;
+  const { setValue } = context
 
   return (
     <TouchableOpacity
@@ -84,7 +84,7 @@ function RadioGroupLabel({ value, className, ...props }: RadioGroupLabelProps) {
       onPress={() => setValue(value)}
       {...props}
     />
-  );
+  )
 }
 
-export { RadioGroup, RadioGroupItem, RadioGroupLabel };
+export { RadioGroup, RadioGroupItem, RadioGroupLabel }
diff --git a/apps/mobile/components/Skeleton.tsx b/apps/mobile/components/Skeleton.tsx
index 63fc6da3..f497658a 100644
--- a/apps/mobile/components/Skeleton.tsx
+++ b/apps/mobile/components/Skeleton.tsx
@@ -1,13 +1,13 @@
-import { useEffect, useRef } from 'react';
-import { Animated, type View } from 'react-native';
+import { useEffect, useRef } from 'react'
+import { Animated, type View } from 'react-native'
 
-import { cn } from '../lib/utils';
+import { cn } from '../lib/utils'
 
 function Skeleton({
   className,
   ...props
 }: { className?: string } & React.ComponentPropsWithoutRef<typeof View>) {
-  const fadeAnim = useRef(new Animated.Value(0.5)).current;
+  const fadeAnim = useRef(new Animated.Value(0.5)).current
 
   useEffect(() => {
     Animated.loop(
@@ -22,9 +22,9 @@ function Skeleton({
           duration: 1000,
           useNativeDriver: true,
         }),
-      ])
-    ).start();
-  }, [fadeAnim]);
+      ]),
+    ).start()
+  }, [fadeAnim])
 
   return (
     <Animated.View
@@ -32,7 +32,7 @@ function Skeleton({
       style={[{ opacity: fadeAnim }]}
       {...props}
     />
-  );
+  )
 }
 
-export { Skeleton };
+export { Skeleton }
diff --git a/apps/mobile/components/Switch.tsx b/apps/mobile/components/Switch.tsx
index 3dbab20d..7a1192f7 100644
--- a/apps/mobile/components/Switch.tsx
+++ b/apps/mobile/components/Switch.tsx
@@ -1,29 +1,29 @@
-import { Switch as NativeSwitch, useColorScheme } from 'react-native';
+import { Switch as NativeSwitch, useColorScheme } from 'react-native'
 
-import { theme } from '../lib/theme';
+import { theme } from '../lib/theme'
 
 function Switch({
   ...props
 }: React.ComponentPropsWithoutRef<typeof NativeSwitch>) {
-  const colorScheme = useColorScheme();
-  const currentTheme = colorScheme === 'dark' ? theme.dark : theme.light;
+  const colorScheme = useColorScheme()
+  const currentTheme = colorScheme === 'dark' ? theme.dark : theme.light
 
   const trackColor = props.trackColor || {
     false: currentTheme.background,
     true: currentTheme.foreground,
-  };
-  const thumbColor = props.thumbColor || currentTheme.background;
-  const ios_backgroundColor =
-    props.ios_backgroundColor || currentTheme.background;
+  }
+  const thumbColor = props.thumbColor || currentTheme.background
+  const iosBackgroundColor =
+    props.ios_backgroundColor || currentTheme.background
 
   return (
     <NativeSwitch
       trackColor={trackColor}
       thumbColor={thumbColor}
-      ios_backgroundColor={ios_backgroundColor}
+      ios_backgroundColor={iosBackgroundColor}
       {...props}
     />
-  );
+  )
 }
 
-export { Switch };
+export { Switch }
diff --git a/apps/mobile/components/Tabs.tsx b/apps/mobile/components/Tabs.tsx
index e5476034..7d2b1a9f 100644
--- a/apps/mobile/components/Tabs.tsx
+++ b/apps/mobile/components/Tabs.tsx
@@ -1,29 +1,30 @@
-import { createContext, useContext, useState } from 'react';
-import { Text, TouchableOpacity, View } from 'react-native';
+import { createContext, useContext, useState } from 'react'
+import { Text, TouchableOpacity, View } from 'react-native'
 
-import { cn } from '../lib/utils';
+import { cn } from '../lib/utils'
 
 interface TabsContextProps {
-  activeTab: string;
-  setActiveTab: (id: string) => void;
+  activeTab: string
+  setActiveTab: (id: string) => void
 }
 const TabsContext = createContext<TabsContextProps>({
   activeTab: '',
+  // biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
   setActiveTab: () => {},
-});
+})
 
 interface TabsProps {
-  defaultValue: string;
-  children: React.ReactNode;
+  defaultValue: string
+  children: React.ReactNode
 }
 function Tabs({ defaultValue, children }: TabsProps) {
-  const [activeTab, setActiveTab] = useState(defaultValue);
+  const [activeTab, setActiveTab] = useState(defaultValue)
 
   return (
     <TabsContext.Provider value={{ activeTab, setActiveTab }}>
       {children}
     </TabsContext.Provider>
-  );
+  )
 }
 
 function TabsList({
@@ -35,14 +36,14 @@ function TabsList({
       className={cn('flex flex-row justify-center', className)}
       {...props}
     />
-  );
+  )
 }
 
 interface TabsTriggerProps
   extends React.ComponentPropsWithoutRef<typeof TouchableOpacity> {
-  value: string;
-  title: string;
-  textClasses?: string;
+  value: string
+  title: string
+  textClasses?: string
 }
 function TabsTrigger({
   value,
@@ -51,7 +52,7 @@ function TabsTrigger({
   textClasses,
   ...props
 }: TabsTriggerProps) {
-  const { activeTab, setActiveTab } = useContext(TabsContext);
+  const { activeTab, setActiveTab } = useContext(TabsContext)
 
   return (
     <TouchableOpacity
@@ -66,33 +67,34 @@ function TabsTrigger({
         className={cn(
           'font-medium text-center text-muted-foreground',
           { 'text-background': activeTab === value },
-          textClasses
+          textClasses,
         )}
       >
         {title}
       </Text>
     </TouchableOpacity>
-  );
+  )
 }
 
 interface TabsContentProps extends React.ComponentPropsWithoutRef<typeof View> {
-  value: string;
+  value: string
 }
 function TabsContent({ value, className, ...props }: TabsContentProps) {
-  const { activeTab } = useContext(TabsContext);
+  const { activeTab } = useContext(TabsContext)
 
-  if (value === activeTab)
+  if (value === activeTab) {
     return (
       <View
         className={cn(
           'border border-border mt-2 px-4 py-4 rounded-xl',
-          className
+          className,
         )}
         {...props}
       />
-    );
+    )
+  }
 
-  return null;
+  return null
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/apps/mobile/components/Toast.tsx b/apps/mobile/components/Toast.tsx
index d3e19aa5..3636bc77 100644
--- a/apps/mobile/components/Toast.tsx
+++ b/apps/mobile/components/Toast.tsx
@@ -1,22 +1,22 @@
-import { createContext, useContext, useEffect, useRef, useState } from 'react';
-import { Animated, Text, View } from 'react-native';
+import { createContext, useContext, useEffect, useRef, useState } from 'react'
+import { Animated, Text, View } from 'react-native'
 
-import { cn } from '../lib/utils';
+import { cn } from '../lib/utils'
 
 const toastVariants = {
   default: 'bg-foreground',
   destructive: 'bg-destructive',
   success: 'bg-green-500',
   info: 'bg-blue-500',
-};
+}
 
 interface ToastProps {
-  id: number;
-  message: string;
-  onHide: (id: number) => void;
-  variant?: keyof typeof toastVariants;
-  duration?: number;
-  showProgress?: boolean;
+  id: number
+  message: string
+  onHide: (id: number) => void
+  variant?: keyof typeof toastVariants
+  duration?: number
+  showProgress?: boolean
 }
 function Toast({
   id,
@@ -26,9 +26,10 @@ function Toast({
   duration = 3000,
   showProgress = true,
 }: ToastProps) {
-  const opacity = useRef(new Animated.Value(0)).current;
-  const progress = useRef(new Animated.Value(0)).current;
+  const opacity = useRef(new Animated.Value(0)).current
+  const progress = useRef(new Animated.Value(0)).current
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
     Animated.sequence([
       Animated.timing(opacity, {
@@ -46,8 +47,8 @@ function Toast({
         duration: 500,
         useNativeDriver: true,
       }),
-    ]).start(() => onHide(id));
-  }, [duration]);
+    ]).start(() => onHide(id))
+  }, [duration])
 
   return (
     <Animated.View
@@ -82,18 +83,18 @@ function Toast({
         </View>
       )}
     </Animated.View>
-  );
+  )
 }
 
-type ToastVariant = keyof typeof toastVariants;
+type ToastVariant = keyof typeof toastVariants
 
 interface ToastMessage {
-  id: number;
-  text: string;
-  variant: ToastVariant;
-  duration?: number;
-  position?: string;
-  showProgress?: boolean;
+  id: number
+  text: string
+  variant: ToastVariant
+  duration?: number
+  position?: string
+  showProgress?: boolean
 }
 interface ToastContextProps {
   toast: (
@@ -101,30 +102,30 @@ interface ToastContextProps {
     variant?: keyof typeof toastVariants,
     duration?: number,
     position?: 'top' | 'bottom',
-    showProgress?: boolean
-  ) => void;
-  removeToast: (id: number) => void;
+    showProgress?: boolean,
+  ) => void
+  removeToast: (id: number) => void
 }
-const ToastContext = createContext<ToastContextProps | undefined>(undefined);
+const ToastContext = createContext<ToastContextProps | undefined>(undefined)
 
 // TODO: refactor to pass position to Toast instead of ToastProvider
 function ToastProvider({
   children,
   position = 'top',
 }: {
-  children: React.ReactNode;
-  position?: 'top' | 'bottom';
+  children: React.ReactNode
+  position?: 'top' | 'bottom'
 }) {
-  const [messages, setMessages] = useState<ToastMessage[]>([]);
+  const [messages, setMessages] = useState<ToastMessage[]>([])
 
   const toast: ToastContextProps['toast'] = (
     message: string,
     variant: ToastVariant = 'default',
     duration: number = 3000,
     position: 'top' | 'bottom' = 'top',
-    showProgress: boolean = true
+    showProgress: boolean = true,
   ) => {
-    setMessages(prev => [
+    setMessages((prev) => [
       ...prev,
       {
         id: Date.now(),
@@ -134,12 +135,12 @@ function ToastProvider({
         position,
         showProgress,
       },
-    ]);
-  };
+    ])
+  }
 
   const removeToast = (id: number) => {
-    setMessages(prev => prev.filter(message => message.id !== id));
-  };
+    setMessages((prev) => prev.filter((message) => message.id !== id))
+  }
 
   return (
     <ToastContext.Provider value={{ toast, removeToast }}>
@@ -150,7 +151,7 @@ function ToastProvider({
           'bottom-0': position === 'bottom',
         })}
       >
-        {messages.map(message => (
+        {messages.map((message) => (
           <Toast
             key={message.id}
             id={message.id}
@@ -163,15 +164,15 @@ function ToastProvider({
         ))}
       </View>
     </ToastContext.Provider>
-  );
+  )
 }
 
 function useToast() {
-  const context = useContext(ToastContext);
+  const context = useContext(ToastContext)
   if (!context) {
-    throw new Error('useToast must be used within ToastProvider');
+    throw new Error('useToast must be used within ToastProvider')
   }
-  return context;
+  return context
 }
 
-export { ToastProvider, ToastVariant, Toast, toastVariants, useToast };
+export { ToastProvider, ToastVariant, Toast, toastVariants, useToast }
diff --git a/apps/mobile/components/__tests__/ThemedText-test.tsx b/apps/mobile/components/__tests__/ThemedText-test.tsx
index 1ac32250..2d2107a8 100644
--- a/apps/mobile/components/__tests__/ThemedText-test.tsx
+++ b/apps/mobile/components/__tests__/ThemedText-test.tsx
@@ -1,10 +1,9 @@
-import * as React from 'react';
-import renderer from 'react-test-renderer';
+import renderer from 'react-test-renderer'
 
-import { ThemedText } from '../ThemedText';
+import { ThemedText } from '../ThemedText'
 
 it(`renders correctly`, () => {
-  const tree = renderer.create(<ThemedText>Snapshot test!</ThemedText>).toJSON();
+  const tree = renderer.create(<ThemedText>Snapshot test!</ThemedText>).toJSON()
 
-  expect(tree).toMatchSnapshot();
-});
+  expect(tree).toMatchSnapshot()
+})
diff --git a/apps/mobile/components/auth/auth-email.tsx b/apps/mobile/components/auth/auth-email.tsx
index 391331be..32a9b706 100644
--- a/apps/mobile/components/auth/auth-email.tsx
+++ b/apps/mobile/components/auth/auth-email.tsx
@@ -1,18 +1,26 @@
-import { useSignIn, useSignUp } from "@clerk/clerk-expo"
-import { Input } from "../Input"
-import { Button } from "../Button"
-import { useState } from "react";
-import type { EmailCodeFactor } from '@clerk/types';
-import { getHonoClient } from "@/lib/client";
+import { getHonoClient } from '@/lib/client'
+import { useSignIn, useSignUp } from '@clerk/clerk-expo'
+import type { EmailCodeFactor } from '@clerk/types'
+import { useState } from 'react'
+import { Button } from '../Button'
+import { Input } from '../Input'
 
 export function AuthEmail() {
-  const [emailAddress, setEmailAddress] = useState("");
-  const [code, setCode] = useState("");
-  const [verifying, setVerifying] = useState(false);
-  const [mode, setMode] = useState<"signUp" | "signIn">("signUp");
+  const [emailAddress, setEmailAddress] = useState('')
+  const [code, setCode] = useState('')
+  const [verifying, setVerifying] = useState(false)
+  const [mode, setMode] = useState<'signUp' | 'signIn'>('signUp')
 
-  const { isLoaded: isSignUpLoaded, signUp, setActive: setActiveSignUp } = useSignUp()
-  const { isLoaded: isSignInLoaded, signIn, setActive: setActiveSignIn } = useSignIn()
+  const {
+    isLoaded: isSignUpLoaded,
+    signUp,
+    setActive: setActiveSignUp,
+  } = useSignUp()
+  const {
+    isLoaded: isSignInLoaded,
+    signIn,
+    setActive: setActiveSignIn,
+  } = useSignIn()
 
   if (!isSignUpLoaded || !isSignInLoaded) {
     return null
@@ -24,7 +32,8 @@ export function AuthEmail() {
         emailAddress,
       })
       await signUp.prepareEmailAddressVerification()
-      setVerifying(true);
+      setVerifying(true)
+      // biome-ignore lint/suspicious/noExplicitAny: <explanation>
     } catch (err: any) {
       if (err?.errors?.[0]?.code === 'form_identifier_exists') {
         // If the email address already exists, try to sign in instead
@@ -34,18 +43,24 @@ export function AuthEmail() {
             identifier: emailAddress,
           })
 
-          const emailCodeFactor = supportedFirstFactors.find(i => i.strategy === 'email_code')
+          const emailCodeFactor = supportedFirstFactors.find(
+            (i) => i.strategy === 'email_code',
+          )
           if (emailCodeFactor) {
             await signIn.prepareFirstFactor({
               strategy: 'email_code',
-              emailAddressId: (emailCodeFactor as EmailCodeFactor).emailAddressId,
+              emailAddressId: (emailCodeFactor as EmailCodeFactor)
+                .emailAddressId,
             })
-            setVerifying(true);
+            setVerifying(true)
           }
-        } catch (err: any) {
-          console.log('error', JSON.stringify(err, null, 2))
+          // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+        } catch (e: any) {
+          // biome-ignore lint/suspicious/noConsoleLog: <explanation>
+          console.log('error', JSON.stringify(e, null, 2))
         }
       } else {
+        // biome-ignore lint/suspicious/noConsoleLog: <explanation>
         console.log('error', JSON.stringify(err, null, 2))
       }
     }
@@ -54,31 +69,38 @@ export function AuthEmail() {
   const onVerify = async () => {
     try {
       if (mode === 'signUp') {
-        const signUpAttempt = await signUp.attemptEmailAddressVerification({ code })
+        const signUpAttempt = await signUp.attemptEmailAddressVerification({
+          code,
+        })
         if (signUpAttempt.status === 'complete') {
-          await setActiveSignUp({ session: signUpAttempt.createdSessionId });
-          console.log('signed up')
+          await setActiveSignUp({ session: signUpAttempt.createdSessionId })
+          // signed up
           // create user
           const hc = await getHonoClient()
           await hc.v1.users.$post({
             json: {
               email: emailAddress,
-              name: "***"
-            }
+              name: '***',
+            },
           })
         } else {
-          console.error(signUpAttempt);
+          console.error(signUpAttempt)
         }
       } else {
-        const signInAttempt = await signIn.attemptFirstFactor({ strategy: 'email_code', code })
+        const signInAttempt = await signIn.attemptFirstFactor({
+          strategy: 'email_code',
+          code,
+        })
         if (signInAttempt.status === 'complete') {
-          await setActiveSignIn({ session: signInAttempt.createdSessionId });
-          console.log('signed in')
+          await setActiveSignIn({ session: signInAttempt.createdSessionId })
+          // signed in
         } else {
-          console.error(signInAttempt);
+          console.error(signInAttempt)
         }
       }
+      // biome-ignore lint/suspicious/noExplicitAny: <explanation>
     } catch (err: any) {
+      // biome-ignore lint/suspicious/noConsoleLog: <explanation>
       console.log('error', JSON.stringify(err, null, 2))
     }
   }
diff --git a/apps/mobile/components/navigation/TabBarIcon.tsx b/apps/mobile/components/navigation/TabBarIcon.tsx
index b7302c3f..f06993bf 100644
--- a/apps/mobile/components/navigation/TabBarIcon.tsx
+++ b/apps/mobile/components/navigation/TabBarIcon.tsx
@@ -1,9 +1,12 @@
 // You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
 
-import Ionicons from '@expo/vector-icons/Ionicons';
-import { type IconProps } from '@expo/vector-icons/build/createIconSet';
-import { type ComponentProps } from 'react';
+import Ionicons from '@expo/vector-icons/Ionicons'
+import type { IconProps } from '@expo/vector-icons/build/createIconSet'
+import type { ComponentProps } from 'react'
 
-export function TabBarIcon({ style, ...rest }: IconProps<ComponentProps<typeof Ionicons>['name']>) {
-  return <Ionicons size={28} style={[{ marginBottom: -3 }, style]} {...rest} />;
+export function TabBarIcon({
+  style,
+  ...rest
+}: IconProps<ComponentProps<typeof Ionicons>['name']>) {
+  return <Ionicons size={28} style={[{ marginBottom: -3 }, style]} {...rest} />
 }
diff --git a/apps/mobile/constants/Colors.ts b/apps/mobile/constants/Colors.ts
deleted file mode 100644
index 14e67844..00000000
--- a/apps/mobile/constants/Colors.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Below are the colors that are used in the app. The colors are defined in the light and dark mode.
- * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
- */
-
-const tintColorLight = '#0a7ea4';
-const tintColorDark = '#fff';
-
-export const Colors = {
-  light: {
-    text: '#11181C',
-    background: '#fff',
-    tint: tintColorLight,
-    icon: '#687076',
-    tabIconDefault: '#687076',
-    tabIconSelected: tintColorLight,
-  },
-  dark: {
-    text: '#ECEDEE',
-    background: '#151718',
-    tint: tintColorDark,
-    icon: '#9BA1A6',
-    tabIconDefault: '#9BA1A6',
-    tabIconSelected: tintColorDark,
-  },
-};
diff --git a/apps/mobile/global.css b/apps/mobile/global.css
index 74139351..23bf03e8 100644
--- a/apps/mobile/global.css
+++ b/apps/mobile/global.css
@@ -8,19 +8,19 @@
         --foreground: 222.2 47.4% 11.2%;
 
         --muted: 210 40% 96.1%;
-        --muted-foreground: 215.4 16.3% 46.9%;
+        --muted-foreground: 240 4% 46%;
 
         --popover: 0 0% 100%;
         --popover-foreground: 222.2 47.4% 11.2%;
 
-        --border: 214.3 31.8% 91.4%;
-        --input: 214.3 31.8% 91.4%;
+        --border: 249 6% 90%;
+        --input: 240 5% 65%;
 
         --card: 0 0% 100%;
         --card-foreground: 222.2 47.4% 11.2%;
 
-        --primary: 222.2 47.4% 11.2%;
-        --primary-foreground: 210 40% 98%;
+        --primary: 0 0% 0%;
+        --primary-foreground: 0 0% 100%;
 
         --secondary: 210 40% 96.1%;
         --secondary-foreground: 222.2 47.4% 11.2%;
@@ -55,8 +55,8 @@
         --card: 224 71% 4%;
         --card-foreground: 213 31% 91%;
 
-        --primary: 210 40% 98%;
-        --primary-foreground: 222.2 47.4% 1.2%;
+        --primary: 0 0% 100%;
+        --primary-foreground: 0 0% 0%;
 
         --secondary: 222.2 47.4% 11.2%;
         --secondary-foreground: 210 40% 98%;
diff --git a/apps/mobile/hooks/useColorScheme.ts b/apps/mobile/hooks/useColorScheme.ts
index 17e3c63e..b370337a 100644
--- a/apps/mobile/hooks/useColorScheme.ts
+++ b/apps/mobile/hooks/useColorScheme.ts
@@ -1 +1 @@
-export { useColorScheme } from 'react-native';
+export { useColorScheme } from 'react-native'
diff --git a/apps/mobile/hooks/useColorScheme.web.ts b/apps/mobile/hooks/useColorScheme.web.ts
index 6dcd80d3..bc612c17 100644
--- a/apps/mobile/hooks/useColorScheme.web.ts
+++ b/apps/mobile/hooks/useColorScheme.web.ts
@@ -4,5 +4,5 @@
 // to render different styles on the client and server, these aren't directly supported in React Native
 // but can be achieved using a styling library like Nativewind.
 export function useColorScheme() {
-  return 'light';
+  return 'light'
 }
diff --git a/apps/mobile/hooks/useThemeColor.ts b/apps/mobile/hooks/useThemeColor.ts
deleted file mode 100644
index ae43b47b..00000000
--- a/apps/mobile/hooks/useThemeColor.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Learn more about light and dark modes:
- * https://docs.expo.dev/guides/color-schemes/
- */
-
-import { useColorScheme } from 'react-native';
-
-import { Colors } from '@/constants/Colors';
-
-export function useThemeColor(
-  props: { light?: string; dark?: string },
-  colorName: keyof typeof Colors.light & keyof typeof Colors.dark
-) {
-  const theme = useColorScheme() ?? 'light';
-  const colorFromProps = props[theme];
-
-  if (colorFromProps) {
-    return colorFromProps;
-  } else {
-    return Colors[theme][colorName];
-  }
-}
diff --git a/apps/mobile/lib/cache.ts b/apps/mobile/lib/cache.ts
index 3cf1a77e..c5395187 100644
--- a/apps/mobile/lib/cache.ts
+++ b/apps/mobile/lib/cache.ts
@@ -1,25 +1,24 @@
-import * as SecureStore from "expo-secure-store";
-import { Platform } from "react-native";
-import { TokenCache } from "@clerk/clerk-expo/dist/cache";
+import type { TokenCache } from '@clerk/clerk-expo/dist/cache'
+import * as SecureStore from 'expo-secure-store'
+import { Platform } from 'react-native'
 
 const createTokenCache = (): TokenCache => {
   return {
     getToken: async (key: string) => {
       try {
-        return await SecureStore.getItemAsync(key);
+        return await SecureStore.getItemAsync(key)
       } catch (error) {
-        console.error("secure store get item error: ", error);
-        await SecureStore.deleteItemAsync(key);
-        return null;
+        console.error('secure store get item error: ', error)
+        await SecureStore.deleteItemAsync(key)
+        return null
       }
     },
     saveToken: (key: string, token: string) => {
-      return SecureStore.setItemAsync(key, token);
+      return SecureStore.setItemAsync(key, token)
     },
-  };
-};
+  }
+}
 
 // SecureStore is not supported on the web
 // https://github.com/expo/expo/issues/7744#issuecomment-611093485
-export const tokenCache =
-  Platform.OS !== "web" ? createTokenCache() : undefined;
+export const tokenCache = Platform.OS !== 'web' ? createTokenCache() : undefined
diff --git a/apps/mobile/lib/client.ts b/apps/mobile/lib/client.ts
index 08a46e9e..350753b7 100644
--- a/apps/mobile/lib/client.ts
+++ b/apps/mobile/lib/client.ts
@@ -1,17 +1,21 @@
-import { AppType } from "@6pm/api";
-import { getClerkInstance } from "@clerk/clerk-expo"
-import { QueryClient } from "@tanstack/react-query";
-import { tokenCache } from "./cache";
-import { hc } from "hono/client";
+import type { AppType } from '@6pm/api'
+import { getClerkInstance } from '@clerk/clerk-expo'
+import { QueryClient } from '@tanstack/react-query'
+import { hc } from 'hono/client'
+import { tokenCache } from './cache'
 
-export const clerk = getClerkInstance({ publishableKey: process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY, tokenCache });
+export const clerk = getClerkInstance({
+  publishableKey: process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY,
+  tokenCache,
+})
 
 export const getHonoClient = async () => {
   const token = await clerk.session?.getToken()
   return hc<AppType>(process.env.EXPO_PUBLIC_API_URL!, {
     headers: {
+      // biome-ignore lint/style/useNamingConvention: <explanation>
       Authorization: `Bearer ${token}`,
-    }
+    },
   })
 }
 
diff --git a/apps/mobile/lib/theme.ts b/apps/mobile/lib/theme.ts
index d46cb676..df932e8f 100644
--- a/apps/mobile/lib/theme.ts
+++ b/apps/mobile/lib/theme.ts
@@ -7,4 +7,4 @@ export const theme = {
     background: 'hsl(224, 71% 4%)',
     foreground: 'hsl(213, 31% 91%)',
   },
-};
+}
diff --git a/apps/mobile/lib/utils.ts b/apps/mobile/lib/utils.ts
index 9ad0df42..d32b0fe6 100644
--- a/apps/mobile/lib/utils.ts
+++ b/apps/mobile/lib/utils.ts
@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
+  return twMerge(clsx(inputs))
 }
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
index 6b72f854..dafd2a85 100644
--- a/apps/mobile/package.json
+++ b/apps/mobile/package.json
@@ -9,7 +9,8 @@
     "ios": "expo start --ios",
     "web": "expo start --web",
     "test": "jest --watchAll",
-    "lint": "expo lint"
+    "lint": "expo lint",
+    "check": "biome check"
   },
   "jest": {
     "preset": "jest-expo"
diff --git a/biome.json b/biome.json
index 4468ab82..b87731df 100644
--- a/biome.json
+++ b/biome.json
@@ -108,7 +108,7 @@
         "noArguments": "error",
         "noCommaOperator": "error",
         "noDefaultExport": "off",
-        "noImplicitBoolean": "error",
+        "noImplicitBoolean": "off",
         "noNegationElse": "off",
         "noParameterAssign": "error",
         "noRestrictedGlobals": {