feat(mobile): add lite tab bar

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

@@ -2,9 +2,11 @@ import { Button } from '@/components/ui/button'
 import { Text } from '@/components/ui/text'
 import { useColorScheme } from '@/hooks/useColorScheme'
 import { theme } from '@/lib/theme'
+import { cn } from '@/lib/utils'
 import { useUser } from '@clerk/clerk-expo'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
+import * as Haptics from 'expo-haptics'
 import { Link, Tabs } from 'expo-router'
 import {
   // BarChartBigIcon,
@@ -15,11 +17,13 @@ import {
 } from 'lucide-react-native'
 import { usePostHog } from 'posthog-react-native'
 import { useEffect } from 'react'
+import { View, useWindowDimensions } from 'react-native'
 
 export default function TabLayout() {
   const { colorScheme } = useColorScheme()
   const { i18n } = useLingui()
   const { user } = useUser()
+  const { width } = useWindowDimensions()
 
   const posthog = usePostHog()
 
@@ -37,11 +41,21 @@ export default function TabLayout() {
     <Tabs
       screenOptions={{
         headerShadowVisible: false,
-        tabBarActiveTintColor: theme[colorScheme ?? 'light'].primary,
+        tabBarActiveTintColor: theme[colorScheme ?? 'light'].background,
         tabBarShowLabel: false,
         tabBarStyle: {
-          borderTopWidth: 0,
+          position: 'absolute',
+          borderWidth: 1,
+          borderTopWidth: 1,
           backgroundColor: theme[colorScheme ?? 'light'].background,
+          borderColor: theme[colorScheme ?? 'light'].border,
+          borderTopColor: theme[colorScheme ?? 'light'].border,
+          bottom: 36,
+          marginHorizontal: (width - (8 * 5 + 48 * 4 + 16)) / 2,
+          paddingVertical: 0,
+          paddingBottom: 0,
+          height: 64,
+          borderRadius: 16,
         },
         headerTitleStyle: {
           fontFamily: 'Inter Medium',
@@ -58,7 +72,16 @@ export default function TabLayout() {
         options={{
           headerShown: false,
           tabBarShowLabel: false,
-          tabBarIcon: ({ color }) => <WalletIcon color={color} />,
+          tabBarIcon: ({ color, focused }) => (
+            <View
+              className={cn(
+                'h-[48px] w-[48px] items-center justify-center rounded-xl',
+                focused && 'bg-primary',
+              )}
+            >
+              <WalletIcon color={color} className="size-6" />
+            </View>
+          ),
         }}
       />
       <Tabs.Screen
@@ -72,7 +95,16 @@ export default function TabLayout() {
             marginLeft: 5,
           },
           tabBarShowLabel: false,
-          tabBarIcon: ({ color }) => <LandPlotIcon color={color} />,
+          tabBarIcon: ({ color, focused }) => (
+            <View
+              className={cn(
+                'h-[48px] w-[48px] items-center justify-center rounded-xl',
+                focused && 'bg-primary',
+              )}
+            >
+              <LandPlotIcon color={color} className="size-6" />
+            </View>
+          ),
           headerRight: () => (
             <Link href="/budget/new-budget" asChild>
               <Button size="sm" variant="secondary" className="mr-6 h-10">
@@ -97,7 +129,40 @@ export default function TabLayout() {
         options={{
           headerTitle: t(i18n)`Settings`,
           tabBarShowLabel: false,
-          tabBarIcon: ({ color }) => <CogIcon color={color} />,
+          tabBarIcon: ({ color, focused }) => (
+            <View
+              className={cn(
+                'h-[48px] w-[48px] items-center justify-center rounded-xl',
+                focused && 'bg-primary',
+              )}
+            >
+              <CogIcon color={color} className="size-6" />
+            </View>
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="dummy"
+        options={{
+          tabBarShowLabel: false,
+          tabBarButton: () => (
+            <View className="items-center justify-center px-2">
+              <Link
+                href="/transaction/new-record"
+                asChild
+                onPress={Haptics.selectionAsync}
+              >
+                <Button
+                  size="icon"
+                  className={cn(
+                    'h-[48px] w-[48px] items-center justify-center rounded-xl border border-border bg-muted active:bg-muted/75',
+                  )}
+                >
+                  <PlusIcon className="size-6 text-foreground" />
+                </Button>
+              </Link>
+            </View>
+          ),
         }}
       />
     </Tabs>

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

@@ -1,7 +1,7 @@
 import { BudgetItem } from '@/components/budget/budget-item'
 import { BudgetStatistic } from '@/components/budget/budget-statistic'
 import { BurndownChart } from '@/components/budget/burndown-chart'
-import { Toolbar } from '@/components/common/toolbar'
+// import { Toolbar } from '@/components/common/toolbar'
 import { Skeleton } from '@/components/ui/skeleton'
 import { Text } from '@/components/ui/text'
 import { useColorScheme } from '@/hooks/useColorScheme'
@@ -205,7 +205,7 @@ export default function BudgetsScreen() {
         onScroll={onScroll}
         showsVerticalScrollIndicator={false}
         ListHeaderComponent={<Animated.View style={dummyHeaderStyle} />}
-        contentContainerStyle={{ paddingBottom: bottom + 32 }}
+        contentContainerStyle={{ paddingBottom: bottom + 80 }}
         refreshing={isRefetching}
         onRefresh={refetch}
         sections={sections}
@@ -234,7 +234,7 @@ export default function BudgetsScreen() {
         className="absolute right-0 bottom-0 left-0 h-36"
         pointerEvents="none"
       />
-      <Toolbar />
+      {/* <Toolbar /> */}
     </View>
   )
 }

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

@@ -0,0 +1,4 @@
+// Dump screen for create transaction tab button
+export default function DummyScreen() {
+  return null
+}

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

@@ -1,6 +1,6 @@
 import { AmountFormat } from '@/components/common/amount-format'
 import { ListSkeleton } from '@/components/common/list-skeleton'
-import { Toolbar } from '@/components/common/toolbar'
+// import { Toolbar } from '@/components/common/toolbar'
 import { HomeHeader } from '@/components/home/header'
 import { HomeFilter } from '@/components/home/select-filter'
 import { TimeRangeControl } from '@/components/home/time-range-control'
@@ -127,7 +127,7 @@ export default function HomeScreen() {
           ) : null
         }
         className="flex-1 bg-card"
-        contentContainerStyle={{ paddingBottom: bottom + 32 }}
+        contentContainerStyle={{ paddingBottom: bottom + 80 }}
         // refreshing={isRefetching}
         // onRefresh={handleRefresh}
         sections={transactionsGroupByDate}
@@ -168,9 +168,9 @@ export default function HomeScreen() {
       {!transactions.length && !isLoading && (
         <>
           {filter === HomeFilter.All ? (
-            <View className="absolute right-6 bottom-20 z-50 flex-row gap-3">
+            <View className="pointer-events-none absolute right-28 bottom-32 z-50 items-end gap-2">
               <Text>{t(i18n)`Add your first transaction here`}</Text>
-              <HandyArrow className="mt-4 text-muted-foreground" />
+              <HandyArrow className="-right-8 text-muted-foreground" />
             </View>
           ) : null}
         </>
@@ -183,7 +183,7 @@ export default function HomeScreen() {
         className="absolute right-0 bottom-0 left-0 h-36"
         pointerEvents="none"
       />
-      <Toolbar />
+      {/* <Toolbar /> */}
     </View>
   )
 }

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

@@ -52,10 +52,12 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 export default function SettingsScreen() {
   const { signOut } = useAuth()
   const { i18n } = useLingui()
+  const { bottom } = useSafeAreaInsets()
   const { language } = useLocale()
   const { colorScheme } = useColorScheme()
   const { cancelAllScheduledNotifications } = useScheduleNotification()
@@ -87,7 +89,8 @@ export default function SettingsScreen() {
   return (
     <View className="bg-card">
       <ScrollView
-        contentContainerClassName="py-4 pb-14 gap-4"
+        contentContainerClassName="py-4 gap-4"
+        contentContainerStyle={{ paddingBottom: bottom + 80 }}
         className="bg-card"
       >
         <ProfileCard />

apps/mobile/app/(app)/budget/new-budget.tsx

@@ -7,9 +7,8 @@ import { PortalHost, useModalPortalRoot } from '@rn-primitives/portal'
 import { useRouter } from 'expo-router'
 import { View } from 'react-native'
 
-const budgetId = createId()
-
 export default function CreateBudgetScreen() {
+  const budgetId = createId()
   const router = useRouter()
   const { mutateAsync } = useCreateBudget()
   const { sideOffset, ...rootProps } = useModalPortalRoot()

apps/mobile/lib/theme.ts

@@ -5,12 +5,14 @@ export const theme = {
     foreground: 'hsl(240, 6%, 10%)',
     muted: 'hsl(210, 40%, 96.1%)',
     mutedForeground: 'hsl(240, 4%, 46%)',
+    border: 'hsl(249, 6%, 90%)',
   },
   dark: {
     primary: 'hsl(0, 0%, 98%)',
     background: 'hsl(240, 10%, 3.9%)',
     foreground: 'hsl(213, 31%, 91%)',
     muted: 'hsl(240, 3.7%, 15.9%)',
     mutedForeground: 'hsl(240, 5%, 64.9%)',
+    border: 'hsl(240, 3.7%, 15.9%)',
   },
 }

apps/mobile/stores/budget/hooks.tsx

@@ -259,17 +259,18 @@ export function useBudgetPeriodStats(
   const { transactions, totalExpense, totalIncome } = useTransactionList({
     from: new Date(periodConfig?.startDate!),
     to: new Date(periodConfig?.endDate!),
-    budgetId: periodConfig.budgetId,
+    budgetId: periodConfig?.budgetId,
   })
 
   const totalBudgetUsage = new Decimal(totalExpense)
     .plus(totalIncome)
-    .abs()
     .mul(exchangeToBudgetCurrency?.rate ?? 1)
 
-  const remainingAmount = budgetAmount.sub(totalBudgetUsage)
+  const remainingAmount = budgetAmount.add(totalBudgetUsage)
 
-  const usagePercentage = totalBudgetUsage
+  const usagePercentage = (
+    totalBudgetUsage.gt(0) ? new Decimal(0) : totalBudgetUsage.abs()
+  )
     .div(budgetAmount!)
     .mul(100)
     .toNumber()