From 9bbc352758df8fe903c9eff9e82d3ebdf837ca0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Qu=E1=BB=91c=20Kh=C3=A1nh?= <khanh@quocs.com>
Date: Mon, 10 Jun 2024 03:04:39 +0700
Subject: [PATCH] feat(mobile): app layout

---
 apps/mobile/app/(app)/(tabs)/_layout.tsx  | 53 +++++++++++++++--------
 apps/mobile/app/(app)/(tabs)/budgets.tsx  | 11 +++++
 apps/mobile/app/(app)/(tabs)/explore.tsx  | 37 ----------------
 apps/mobile/app/(app)/(tabs)/index.tsx    | 16 ++++++-
 apps/mobile/app/(app)/(tabs)/scanner.tsx  | 11 +++++
 apps/mobile/app/(app)/(tabs)/settings.tsx | 53 +++++++++++++++++++++++
 apps/mobile/app/(app)/_layout.tsx         | 11 ++++-
 apps/mobile/app/(app)/new-record.tsx      |  5 +++
 apps/mobile/components/Badge.tsx          |  8 ++--
 apps/mobile/components/Button.tsx         |  4 +-
 apps/mobile/components/IconButton.tsx     | 19 +++++---
 apps/mobile/components/Input.tsx          |  7 +++
 apps/mobile/components/common/toolbar.tsx | 20 +++++++++
 apps/mobile/components/home/header.tsx    | 36 +++++++++++++++
 apps/mobile/lib/theme.ts                  |  2 +
 15 files changed, 223 insertions(+), 70 deletions(-)
 create mode 100644 apps/mobile/app/(app)/(tabs)/budgets.tsx
 delete mode 100644 apps/mobile/app/(app)/(tabs)/explore.tsx
 create mode 100644 apps/mobile/app/(app)/(tabs)/scanner.tsx
 create mode 100644 apps/mobile/app/(app)/(tabs)/settings.tsx
 create mode 100644 apps/mobile/app/(app)/new-record.tsx
 create mode 100644 apps/mobile/components/common/toolbar.tsx
 create mode 100644 apps/mobile/components/home/header.tsx

diff --git a/apps/mobile/app/(app)/(tabs)/_layout.tsx b/apps/mobile/app/(app)/(tabs)/_layout.tsx
index db31e18c..2f79449b 100644
--- a/apps/mobile/app/(app)/(tabs)/_layout.tsx
+++ b/apps/mobile/app/(app)/(tabs)/_layout.tsx
@@ -1,37 +1,56 @@
+import { useColorScheme } from '@/hooks/useColorScheme'
+import { theme } from '@/lib/theme'
 import { Tabs } from 'expo-router'
-
-import { TabBarIcon } from '@/components/navigation/TabBarIcon'
+import { CogIcon, LandPlotIcon, ScanTextIcon, WalletIcon } from 'lucide-react-native'
 
 export default function TabLayout() {
+  const colorScheme = useColorScheme()
   return (
     <Tabs
       screenOptions={{
-        // tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
-        headerShown: false,
+        headerShadowVisible: false,
+        tabBarActiveTintColor: theme[colorScheme ?? 'light'].primary,
+        tabBarShowLabel: false,
+        tabBarStyle: {
+          borderTopWidth: 0,
+        },
+        headerTitleStyle: {
+          fontFamily: 'Be Vietnam Pro',
+          fontSize: 16,
+          color: theme[colorScheme ?? 'light'].primary,
+        },
       }}
     >
       <Tabs.Screen
         name="index"
         options={{
+          headerShown: false,
+          tabBarShowLabel: false,
+          tabBarIcon: ({ color }) => <WalletIcon color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="budgets"
+        options={{
+          headerTitle: 'Budgets',
+          tabBarShowLabel: false,
+          tabBarIcon: ({ color }) => <LandPlotIcon color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="scanner"
+        options={{
+          headerTitle: 'Scanner',
           tabBarShowLabel: false,
-          tabBarIcon: ({ color, focused }) => (
-            <TabBarIcon
-              name={focused ? 'home' : 'home-outline'}
-              color={color}
-            />
-          ),
+          tabBarIcon: ({ color }) => <ScanTextIcon color={color} />,
         }}
       />
       <Tabs.Screen
-        name="explore"
+        name="settings"
         options={{
+          headerTitle: 'Settings',
           tabBarShowLabel: false,
-          tabBarIcon: ({ color, focused }) => (
-            <TabBarIcon
-              name={focused ? 'code-slash' : 'code-slash-outline'}
-              color={color}
-            />
-          ),
+          tabBarIcon: ({ color }) => <CogIcon color={color} />,
         }}
       />
     </Tabs>
diff --git a/apps/mobile/app/(app)/(tabs)/budgets.tsx b/apps/mobile/app/(app)/(tabs)/budgets.tsx
new file mode 100644
index 00000000..3d154f0a
--- /dev/null
+++ b/apps/mobile/app/(app)/(tabs)/budgets.tsx
@@ -0,0 +1,11 @@
+import { Toolbar } from '@/components/common/toolbar'
+import { Text, View } from 'react-native'
+
+export default function BudgetsScreen() {
+  return (
+    <View className="flex-1 bg-card">
+      <Text className="font-sans">Budgets Screen</Text>
+      <Toolbar />
+    </View>
+  )
+}
diff --git a/apps/mobile/app/(app)/(tabs)/explore.tsx b/apps/mobile/app/(app)/(tabs)/explore.tsx
deleted file mode 100644
index 79e9d449..00000000
--- a/apps/mobile/app/(app)/(tabs)/explore.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/Avatar'
-import { Button } from '@/components/Button'
-import { useMeQuery } from '@/queries/auth'
-import { useAuth } from '@clerk/clerk-expo'
-import { ScrollView, Text, View } from 'react-native'
-
-export default function TabTwoScreen() {
-  const { signOut } = useAuth()
-  const { data } = useMeQuery()
-
-  return (
-    <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
-            source={{
-              uri: 'https://avatars.githubusercontent.com/u/16166195?s=96&v=4',
-            }}
-          />
-          <AvatarFallback>CG</AvatarFallback>
-        </Avatar>
-        <Avatar className="h-14 w-14">
-          <AvatarImage
-            source={{
-              uri: 'https://avatars.githubusercontent.com/u/9253690?s=96&v=4',
-            }}
-          />
-          <AvatarFallback>SS</AvatarFallback>
-        </Avatar>
-      </View>
-      <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 97140573..cd13b46d 100644
--- a/apps/mobile/app/(app)/(tabs)/index.tsx
+++ b/apps/mobile/app/(app)/(tabs)/index.tsx
@@ -1,5 +1,17 @@
-import { Text } from 'react-native'
+import { Toolbar } from '@/components/common/toolbar'
+import { HomeHeader } from '@/components/home/header'
+import { ScrollView, Text, View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 export default function HomeScreen() {
-  return <Text className="font-sans">Home Screen</Text>
+  const { top } = useSafeAreaInsets()
+  return (
+    <View className="flex-1 bg-card" style={{ paddingTop: top }}>
+      <HomeHeader />
+      <ScrollView>
+        <Text className="font-sans">Home Screen</Text>
+      </ScrollView>
+      <Toolbar />
+    </View>
+  )
 }
diff --git a/apps/mobile/app/(app)/(tabs)/scanner.tsx b/apps/mobile/app/(app)/(tabs)/scanner.tsx
new file mode 100644
index 00000000..10b1cf72
--- /dev/null
+++ b/apps/mobile/app/(app)/(tabs)/scanner.tsx
@@ -0,0 +1,11 @@
+import { Toolbar } from '@/components/common/toolbar'
+import { Text, View } from 'react-native'
+
+export default function ScannerScreen() {
+  return (
+    <View className="flex-1 bg-card">
+      <Text className="font-sans">Scanner Screen</Text>
+      <Toolbar />
+    </View>
+  )
+}
diff --git a/apps/mobile/app/(app)/(tabs)/settings.tsx b/apps/mobile/app/(app)/(tabs)/settings.tsx
new file mode 100644
index 00000000..98a75f4a
--- /dev/null
+++ b/apps/mobile/app/(app)/(tabs)/settings.tsx
@@ -0,0 +1,53 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/Avatar'
+import { Badge } from '@/components/Badge'
+import { Button } from '@/components/Button'
+import { IconButton } from '@/components/IconButton'
+import { useAuth, useUser } from '@clerk/clerk-expo'
+import { LogOutIcon, PencilIcon } from 'lucide-react-native'
+import { ScrollView, Text, View } from 'react-native'
+
+export default function SettingsScreen() {
+  const { signOut } = useAuth()
+  const { user } = useUser()
+
+  return (
+    <ScrollView contentContainerClassName="py-4" className="bg-card">
+      <View className="bg-muted rounded-lg mx-6 px-4 py-3 justify-end h-40">
+        <View className="flex flex-row items-center gap-2 justify-between">
+          <View className="flex flex-row items-center gap-3">
+            <Avatar className="w-12 h-12">
+              <AvatarImage
+                source={{
+                  uri: user?.imageUrl,
+                }}
+              />
+              <AvatarFallback>QK</AvatarFallback>
+            </Avatar>
+            <View>
+              <Badge
+                variant="secondary"
+                label="Free"
+                className="self-start rounded-md mb-1"
+              />
+              <Text className="font-medium">
+                {user?.fullName ?? user?.primaryEmailAddress?.emailAddress}
+              </Text>
+            </View>
+          </View>
+          <IconButton icon={PencilIcon} size="sm" variant="ghost" />
+        </View>
+      </View>
+      <Text className='font-sans mx-6 text-muted-foreground mt-6'>
+        Others
+      </Text>
+      <Button
+        label="Sign out"
+        variant="ghost"
+        onPress={() => signOut()}
+        labelClasses="text-red-500 font-regular"
+        leftIcon={LogOutIcon}
+        className="justify-start gap-6 px-6"
+      />
+    </ScrollView>
+  )
+}
diff --git a/apps/mobile/app/(app)/_layout.tsx b/apps/mobile/app/(app)/_layout.tsx
index 4d6655ff..bbf34db8 100644
--- a/apps/mobile/app/(app)/_layout.tsx
+++ b/apps/mobile/app/(app)/_layout.tsx
@@ -15,5 +15,14 @@ export default function AuthenticatedLayout() {
     return <Redirect href={'/login'} />
   }
 
-  return <Stack />
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Screen
+        name="new-record"
+        options={{
+          presentation: 'modal',
+        }}
+      />
+    </Stack>
+  )
 }
diff --git a/apps/mobile/app/(app)/new-record.tsx b/apps/mobile/app/(app)/new-record.tsx
new file mode 100644
index 00000000..af7b647e
--- /dev/null
+++ b/apps/mobile/app/(app)/new-record.tsx
@@ -0,0 +1,5 @@
+import { Text } from 'react-native'
+
+export default function NewRecordScreen() {
+  return <Text className="font-sans m-4 mx-auto">New Record</Text>
+}
diff --git a/apps/mobile/components/Badge.tsx b/apps/mobile/components/Badge.tsx
index 7306e2ec..c56a6769 100644
--- a/apps/mobile/components/Badge.tsx
+++ b/apps/mobile/components/Badge.tsx
@@ -4,12 +4,12 @@ import { Text, View } from 'react-native'
 import { cn } from '../lib/utils'
 
 const badgeVariants = cva(
-  'flex flex-row items-center rounded-full px-2 py-1 text-xs font-semibold',
+  'flex flex-row items-center rounded-full px-2 py-0.5 text-xs font-semibold',
   {
     variants: {
       variant: {
         default: 'bg-primary',
-        secondary: 'bg-secondary',
+        secondary: 'bg-secondary border border-border',
         destructive: 'bg-destructive',
         success: 'bg-green-500 dark:bg-green-700',
       },
@@ -24,7 +24,7 @@ const badgeTextVariants = cva('font-medium text-center text-xs', {
   variants: {
     variant: {
       default: 'text-primary-foreground',
-      secondary: 'text-secondary-foreground',
+      secondary: 'text-muted-foreground',
       destructive: 'text-destructive-foreground',
       success: 'text-green-100',
     },
@@ -36,7 +36,7 @@ const badgeTextVariants = cva('font-medium text-center text-xs', {
 
 export interface BadgeProps
   extends React.ComponentPropsWithoutRef<typeof View>,
-    VariantProps<typeof badgeVariants> {
+  VariantProps<typeof badgeVariants> {
   label: string
   labelClasses?: string
 }
diff --git a/apps/mobile/components/Button.tsx b/apps/mobile/components/Button.tsx
index 612f30c5..25b1df62 100644
--- a/apps/mobile/components/Button.tsx
+++ b/apps/mobile/components/Button.tsx
@@ -13,7 +13,7 @@ const buttonVariants = cva(
         secondary: 'bg-secondary',
         outline: 'border-border border',
         destructive: 'bg-destructive',
-        ghost: 'bg-slate-700',
+        ghost: 'bg-transparent',
         link: 'text-primary underline-offset-4',
       },
       size: {
@@ -36,7 +36,7 @@ const buttonTextVariants = cva('text-center font-medium font-sans', {
       secondary: 'text-secondary-foreground',
       outline: 'text-primary',
       destructive: 'text-destructive-foreground',
-      ghost: 'text-primary-foreground',
+      ghost: 'text-primary',
       link: 'text-primary-foreground underline',
     },
     size: {
diff --git a/apps/mobile/components/IconButton.tsx b/apps/mobile/components/IconButton.tsx
index 1ac2a223..d25e69ff 100644
--- a/apps/mobile/components/IconButton.tsx
+++ b/apps/mobile/components/IconButton.tsx
@@ -1,6 +1,7 @@
 import { type VariantProps, cva } from 'class-variance-authority'
 import { TouchableOpacity } from 'react-native'
 
+import { forwardRef } from 'react'
 import type { SvgProps } from 'react-native-svg'
 import { cn } from '../lib/utils'
 
@@ -17,9 +18,10 @@ const buttonVariants = cva(
         link: 'text-primary underline-offset-4',
       },
       size: {
-        default: 'h-12 w-12',
+        default: 'h-10 w-10',
+        lg: 'h-12 w-12',
         sm: 'h-8 w-8',
-        lg: 'h-14 w-14',
+        xl: 'h-14 w-14',
       },
     },
     defaultVariants: {
@@ -40,9 +42,10 @@ const iconVariants = cva('text-center font-medium font-sans', {
       link: 'text-primary-foreground underline',
     },
     size: {
-      default: 'text-base',
+      default: 'w-5 h-5',
       sm: 'w-5 h-5',
-      lg: 'text-xl',
+      lg: 'w-6 h-6',
+      xl: 'w-6 h-6',
     },
   },
   defaultVariants: {
@@ -57,7 +60,8 @@ export interface IconButtonProps
   icon: React.ComponentType<SvgProps>
   iconClasses?: string
 }
-function IconButton({
+
+const IconButton = forwardRef(function ({
   icon: Icon,
   iconClasses,
   className,
@@ -65,9 +69,10 @@ function IconButton({
   size,
   disabled,
   ...props
-}: IconButtonProps) {
+}: IconButtonProps, ref: React.ForwardedRef<TouchableOpacity>) {
   return (
     <TouchableOpacity
+      ref={ref}
       activeOpacity={0.8}
       className={cn(buttonVariants({ variant, size, className }), {
         'opacity-50': disabled,
@@ -80,6 +85,6 @@ function IconButton({
       />
     </TouchableOpacity>
   )
-}
+})
 
 export { IconButton, buttonVariants, iconVariants }
diff --git a/apps/mobile/components/Input.tsx b/apps/mobile/components/Input.tsx
index 43139f26..a9a226c7 100644
--- a/apps/mobile/components/Input.tsx
+++ b/apps/mobile/components/Input.tsx
@@ -17,10 +17,17 @@ const Input = forwardRef<React.ElementRef<typeof TextInput>, InputProps>(
     <View className={cn('flex flex-col gap-1.5', className)}>
       {label && <Text className={cn('text-base', labelClasses)}>{label}</Text>}
       <View>
+        {leftSection && (
+          <View className="absolute left-2 top-1/2 transform -translate-y-1/2">
+            {leftSection}
+          </View>
+        )}
         <TextInput
           className={cn(
             inputClasses,
             'border border-border placeholder-input py-2.5 px-4 rounded-lg font-sans',
+            leftSection && 'pl-10',
+            rightSection && 'pr-10',
           )}
           {...props}
         />
diff --git a/apps/mobile/components/common/toolbar.tsx b/apps/mobile/components/common/toolbar.tsx
new file mode 100644
index 00000000..90223c8f
--- /dev/null
+++ b/apps/mobile/components/common/toolbar.tsx
@@ -0,0 +1,20 @@
+import { Link } from 'expo-router'
+import { PlusIcon, Sparkles } from 'lucide-react-native'
+import { View } from 'react-native'
+import { IconButton } from '../IconButton'
+import { Input } from '../Input'
+
+export function Toolbar() {
+  return (
+    <View className="gap-3 items-center absolute flex-row bottom-4 left-6 right-6">
+      <Input
+        placeholder="Ask AI anything..."
+        leftSection={<Sparkles className="w-5 h-5 text-muted-foreground" />}
+        className="flex-1"
+      />
+      <Link href="/new-record" asChild>
+        <IconButton icon={PlusIcon} className="w-10 h-10" iconClasses='size-6' />
+      </Link>
+    </View>
+  )
+}
diff --git a/apps/mobile/components/home/header.tsx b/apps/mobile/components/home/header.tsx
new file mode 100644
index 00000000..5f979c8d
--- /dev/null
+++ b/apps/mobile/components/home/header.tsx
@@ -0,0 +1,36 @@
+import { useUser } from "@clerk/clerk-expo";
+import { ArrowDownUp, Bell } from "lucide-react-native";
+import { Text, TouchableOpacity, View } from "react-native";
+import { Avatar, AvatarFallback, AvatarImage } from "../Avatar";
+import { IconButton } from "../IconButton";
+
+export function HomeHeader() {
+  const { user } = useUser()
+
+  return (
+    <View className="flex bg-card px-6 py-3 flex-row items-center justify-between">
+      <View className="flex flex-row items-center gap-3">
+        <Avatar>
+          <AvatarImage
+            source={{
+              uri: user?.imageUrl,
+            }}
+          />
+          <AvatarFallback>QK</AvatarFallback>
+        </Avatar>
+        <View>
+          <Text className="font-medium text-muted-foreground text-sm font-sans">
+            {user?.fullName ?? user?.primaryEmailAddress?.emailAddress}
+          </Text>
+          <TouchableOpacity activeOpacity={0.8} className="gap-2 items-center flex-row">
+            <Text className="text-primary font-sans font-medium">
+              All Accounts
+            </Text>
+            <ArrowDownUp className="w-4 h-4 text-muted-foreground" />
+          </TouchableOpacity>
+        </View>
+      </View>
+      <IconButton icon={Bell} variant="secondary" />
+    </View>
+  )
+}
\ No newline at end of file
diff --git a/apps/mobile/lib/theme.ts b/apps/mobile/lib/theme.ts
index df932e8f..4174f1c9 100644
--- a/apps/mobile/lib/theme.ts
+++ b/apps/mobile/lib/theme.ts
@@ -1,9 +1,11 @@
 export const theme = {
   light: {
+    primary: 'hsl(240 6% 10%)',
     background: 'hsl(0, 0%, 100%)',
     foreground: 'hsl(222.2, 47.4%, 11.2%)',
   },
   dark: {
+    primary: 'hsl(0 0% 100%)',
     background: 'hsl(224, 71% 4%)',
     foreground: 'hsl(213, 31% 91%)',
   },