feat(mobile): add blob attachment and two-line transaction item

get6pm · Sep 21, 2024 · 83d975a · 83d975a
1 parent bfa4c9b
commit 83d975a
Show file tree

Hide file tree

Showing 37 changed files with 544 additions and 285 deletions.
diff --git a/apps/mobile/app/(app)/(tabs)/index.tsx b/apps/mobile/app/(app)/(tabs)/index.tsx
@@ -135,11 +135,12 @@ export default function HomeScreen() {
           <TransactionItem transaction={transaction} />
         )}
         renderSectionHeader={({ section: { title, sum } }) => (
-          <View className="mx-6 flex-row justify-between border-muted-foreground/20 border-b bg-background py-2 pt-4 align-center">
-            <Text className="text-muted-foreground">{title}</Text>
+          <View className="mx-6 flex-row justify-between border-border border-b-[0.5px] bg-background py-2 pt-4 align-center">
+            <Text className="text-foreground">{title}</Text>
             <AmountFormat
               amount={sum}
-              className="font-semiBold text-md text-muted-foreground"
+              className="text-muted-foreground"
+              size="sm"
               displayNegativeSign
               displayPositiveSign
               convertToDefaultCurrency

diff --git a/apps/mobile/app/(app)/(tabs)/settings.tsx b/apps/mobile/app/(app)/(tabs)/settings.tsx
@@ -102,7 +102,7 @@ export default function SettingsScreen() {
                 <Text className="!text-lg font-semiBold text-foreground">
                   {t(i18n)`Get 6pm Pro`}
                 </Text>
-                <Text className="!text-sm text-muted-foreground">
+                <Text className="!text-sm font-regular text-muted-foreground">
                   {t(i18n)`Unlocks full AI power and more!`}
                 </Text>
               </View>
@@ -315,7 +315,7 @@ export default function SettingsScreen() {
               className="!px-6 justify-start gap-6"
             >
               <LogOutIcon className="h-5 w-5 text-red-500" />
-              <Text className="font-normal text-red-500 group-active:text-red-500">
+              <Text className="font-regular text-red-500 group-active:text-red-500">
                 {t(i18n)`Sign out`}
               </Text>
             </Button>

diff --git a/apps/mobile/app/(app)/_layout.tsx b/apps/mobile/app/(app)/_layout.tsx
@@ -161,6 +161,13 @@ export default function AuthenticatedLayout() {
             headerTitle: t(i18n)`New budget`,
           }}
         />
+        <Stack.Screen
+          name="blob-viewer"
+          options={{
+            presentation: 'modal',
+            headerTitle: '',
+          }}
+        />
       </Stack>
     </View>
   )

diff --git a/apps/mobile/app/(app)/blob-viewer.tsx b/apps/mobile/app/(app)/blob-viewer.tsx
@@ -0,0 +1,18 @@
+import { useLocalSearchParams } from 'expo-router'
+import { Image, View } from 'react-native'
+
+export default function BlobViewerScreen() {
+  const { blobObjectUrl } = useLocalSearchParams()
+  if (!blobObjectUrl) {
+    return null
+  }
+  return (
+    <View className="flex-1 bg-background">
+      <Image
+        source={{ uri: blobObjectUrl as string }}
+        className="h-full w-full"
+        resizeMode="contain"
+      />
+    </View>
+  )
+}
diff --git a/apps/mobile/app/(app)/budget/[budgetId]/index.tsx b/apps/mobile/app/(app)/budget/[budgetId]/index.tsx
@@ -251,11 +251,12 @@ export default function BudgetDetailScreen() {
           <TransactionItem transaction={transaction} />
         )}
         renderSectionHeader={({ section: { title, sum } }) => (
-          <View className="mx-6 flex-row justify-between border-muted-foreground/20 border-b bg-background py-2 pt-4 align-center">
-            <Text className="text-muted-foreground">{title}</Text>
+          <View className="mx-6 flex-row justify-between border-border border-b-[0.5px] bg-background py-2 pt-4 align-center">
+            <Text className="text-foreground">{title}</Text>
             <AmountFormat
               amount={sum}
-              className="font-semiBold text-md text-muted-foreground"
+              className="text-muted-foreground"
+              size="sm"
               displayNegativeSign
               displayPositiveSign
               convertToDefaultCurrency

diff --git a/apps/mobile/app/(app)/transaction/[transactionId].tsx b/apps/mobile/app/(app)/transaction/[transactionId].tsx
@@ -109,6 +109,7 @@ export default function EditRecordScreen() {
         onSubmit={handleUpdate}
         onCancel={router.back}
         onDelete={handleDelete}
+        blobAttachments={transaction?.blobAttachments}
       />
       <PortalHost name="transaction-form" />
     </View>

diff --git a/apps/mobile/app/(app)/transaction/new-record.tsx b/apps/mobile/app/(app)/transaction/new-record.tsx
@@ -20,18 +20,25 @@ import { useLingui } from '@lingui/react'
 import { createId } from '@paralleldrive/cuid2'
 import { PortalHost, useModalPortalRoot } from '@rn-primitives/portal'
 import * as Haptics from 'expo-haptics'
-import { useLocalSearchParams, useNavigation, useRouter } from 'expo-router'
+import {
+  Link,
+  useLocalSearchParams,
+  useNavigation,
+  useRouter,
+} from 'expo-router'
 import { CameraIcon, KeyboardIcon, Trash2Icon } from 'lucide-react-native'
 import { useEffect, useRef, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import {
   ActivityIndicator,
   Alert,
   Dimensions,
+  Image,
   Keyboard,
   ScrollView,
   View,
 } from 'react-native'
+import { z } from 'zod'
 
 const DEFAULT_CATEGORY_CONFIG = {
   type: 'EXPENSE',
@@ -54,7 +61,13 @@ export default function NewRecordScreen() {
   const { expenseCategories } = useCategoryList()
 
   const params = useLocalSearchParams()
-  const parsedParams = zUpdateTransaction.parse(params)
+  const { blobObjectUrl, blobObjectId, ...parsedParams } = zUpdateTransaction
+    .extend({
+      blobObjectId: z.string().nullable().optional(),
+      blobObjectUrl: z.string().nullable().optional(),
+    })
+    .parse(params)
+
   const defaultValues: TransactionFormValues = {
     date: new Date(),
     amount: 0,
@@ -80,30 +93,45 @@ export default function NewRecordScreen() {
   // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
     navigation.setOptions({
-      headerTitle: () => (
-        <Tabs
-          value={page.toString()}
-          onValueChange={(value) => {
-            setPage(Number(value))
-            Keyboard.dismiss()
-            ref.current?.scrollTo({
-              y: 0,
-              x: value === '0' ? 0 : width,
-              animated: true,
-            })
-          }}
-          className="w-[160px]"
-        >
-          <TabsList className="bg-secondary">
-            <TabsTrigger value="0">
-              <KeyboardIcon className="!text-primary size-6" />
-            </TabsTrigger>
-            <TabsTrigger value="1">
-              <CameraIcon className="!text-primary size-6" />
-            </TabsTrigger>
-          </TabsList>
-        </Tabs>
-      ),
+      headerTitle: () =>
+        blobObjectUrl ? (
+          <Link
+            href={{
+              pathname: '/blob-viewer',
+              params: {
+                blobObjectUrl,
+              },
+            }}
+          >
+            <Image
+              source={{ uri: blobObjectUrl }}
+              className="size-12 rounded-md border-4 border-secondary bg-muted"
+            />
+          </Link>
+        ) : (
+          <Tabs
+            value={page.toString()}
+            onValueChange={(value) => {
+              setPage(Number(value))
+              Keyboard.dismiss()
+              ref.current?.scrollTo({
+                y: 0,
+                x: value === '0' ? 0 : width,
+                animated: true,
+              })
+            }}
+            className="w-[160px]"
+          >
+            <TabsList className="bg-secondary">
+              <TabsTrigger value="0">
+                <KeyboardIcon className="!text-primary size-6" />
+              </TabsTrigger>
+              <TabsTrigger value="1">
+                <CameraIcon className="!text-primary size-6" />
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+        ),
       headerRight: () =>
         parsedParams?.id ? (
           <Button
@@ -114,11 +142,11 @@ export default function NewRecordScreen() {
               router.back()
             }}
           >
-            <Trash2Icon className="size-6 text-destructive" />
+            <Trash2Icon className="size-6 text-foreground" />
           </Button>
         ) : null,
     })
-  }, [page])
+  }, [page, blobObjectUrl])
 
   const handleCreateTransaction = async (values: TransactionFormValues) => {
     try {
@@ -134,6 +162,7 @@ export default function NewRecordScreen() {
         data: {
           ...values,
           amount: values.categoryId ? values.amount : -Math.abs(values.amount),
+          blobAttachmentIds: blobObjectId ? [blobObjectId] : undefined,
         },
       })
     } catch (error) {

diff --git a/apps/mobile/components/budget/budget-item.tsx b/apps/mobile/components/budget/budget-item.tsx
@@ -51,10 +51,10 @@ export const BudgetItem: FC<BudgetItemProps> = ({ budget }) => {
     >
       <Pressable className="mx-6 mt-1 mb-3 justify-between gap-4 rounded-lg border border-border p-4">
         <View className="flex-row items-center justify-between gap-6">
-          <View className="flex-1 gap-2">
+          <View className="flex-1 gap-3">
             <Text
               numberOfLines={1}
-              className="line-clamp-1 flex-1 font-semiBold text-lg"
+              className="line-clamp-1 flex-1 font-semiBold text-xl"
             >
               {budget.name}
             </Text>

diff --git a/apps/mobile/components/common/bottom-sheet.tsx b/apps/mobile/components/common/bottom-sheet.tsx
@@ -2,11 +2,13 @@ import { useColorPalette } from '@/hooks/use-color-palette'
 import {
   BottomSheetBackdrop,
   type BottomSheetBackdropProps,
+  type BottomSheetBackgroundProps,
   BottomSheetModal,
   type BottomSheetModalProps,
 } from '@gorhom/bottom-sheet'
 import type { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types'
 import { forwardRef, useCallback } from 'react'
+import { View } from 'react-native'
 import { FullWindowOverlay } from 'react-native-screens'
 
 export const BottomSheet = forwardRef<
@@ -34,12 +36,20 @@ export const BottomSheet = forwardRef<
     [],
   )
 
+  const backgroundComponent = useCallback(
+    (props: BottomSheetBackgroundProps) => (
+      <View className="overflow-hidden rounded-xl bg-background" {...props} />
+    ),
+    [],
+  )
+
   return (
     <BottomSheetModal
       ref={ref}
-      backgroundStyle={{ backgroundColor: getColor('--background') }}
+      handleIndicatorStyle={{ backgroundColor: getColor('--foreground') }}
       backdropComponent={backdropComponent}
       containerComponent={containerComponent}
+      backgroundComponent={backgroundComponent}
       keyboardBehavior="extend"
       enablePanDownToClose
       enableDismissOnClose

diff --git a/apps/mobile/components/common/burndown-chart/burndown-chart.tsx b/apps/mobile/components/common/burndown-chart/burndown-chart.tsx
@@ -29,7 +29,7 @@ type BurndownChartProps = {
 }
 
 export function BurndownChart({
-  totalBudget,
+  // totalBudget,
   averagePerDay,
   data = [],
   anchorDay = new Date().getDate(),
@@ -113,7 +113,7 @@ export function BurndownChart({
             axisSide: 'right',
             labelPosition: 'inset',
             labelColor: getColor('--foreground', { alpha: 0.5 }),
-            tickValues: [0, totalBudget / 2, totalBudget],
+            // tickValues: [0, totalBudget / 2, totalBudget],
             lineWidth: 0,
           },
         ]}

diff --git a/apps/mobile/components/common/currency-sheet.tsx b/apps/mobile/components/common/currency-sheet.tsx
@@ -39,7 +39,7 @@ export function CurrencySheetList({ onSelect, value }: CurrencySheetListProps) {
           <BottomSheetTextInput
             placeholder={t(i18n)`Search currency...`}
             placeholderClassName="text-muted-foreground font-regular"
-            className="mb-3 web:flex h-11 web:w-full rounded-md border border-input bg-background px-3 web:py-2 pl-11 font-regular native:text-base text-foreground text-sm native:leading-[1.25] web:ring-offset-background file:border-0 file:bg-transparent file:font-medium placeholder:text-muted-foreground web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2 lg:text-sm"
+            className="mb-3 web:flex h-11 web:w-full rounded-md border border-input bg-background px-3 web:py-2 pl-11 font-regular font-regular native:text-base text-foreground text-sm native:leading-[1.25] web:ring-offset-background file:border-0 file:bg-transparent file:font-medium placeholder:text-muted-foreground web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2 lg:text-sm"
             value={searchValue}
             onChangeText={setSearchValue}
           />

diff --git a/apps/mobile/components/form-fields/currency-field.tsx b/apps/mobile/components/form-fields/currency-field.tsx
@@ -30,7 +30,7 @@ export function CurrencyField({
           className,
         )}
       >
-        <Text className="font-medium text-foreground text-sm">{value}</Text>
+        <Text className="font-regular text-foreground text-sm">{value}</Text>
       </Button>
       <BottomSheet ref={sheetRef} index={0} snapPoints={['50%', '87%']}>
         <CurrencySheetList

diff --git a/apps/mobile/components/home/category-chart.tsx b/apps/mobile/components/home/category-chart.tsx
@@ -137,8 +137,8 @@ export function CategoryChart({
                   style={{ opacity }}
                 />
               )}
-              <Text>{item.name}</Text>
-              <Text className={'font-normal'}>{item.percentage}%</Text>
+              <Text className="font-regular">{item.name}</Text>
+              <Text className="font-regular">{item.percentage}%</Text>
             </Button>
           )
         }}

diff --git a/apps/mobile/components/home/header.tsx b/apps/mobile/components/home/header.tsx
@@ -1,7 +1,8 @@
 import { useUser } from '@clerk/clerk-expo'
 import { useRouter } from 'expo-router'
-import { Text, TouchableOpacity, View } from 'react-native'
+import { TouchableOpacity, View } from 'react-native'
 import { UserAvatar } from '../common/user-avatar'
+import { Text } from '../ui/text'
 import { type HomeFilter, SelectFilter } from './select-filter'
 import { SelectWalletAccount } from './select-wallet-account'
 
@@ -31,7 +32,7 @@ export function HomeHeader({
           <UserAvatar user={user!} />
         </TouchableOpacity>
         <View className="flex-1">
-          <Text className="line-clamp-1 font-medium text-muted-foreground text-sm">
+          <Text className="line-clamp-1 font-medium text-muted-foreground">
             {user?.fullName ?? user?.primaryEmailAddress?.emailAddress}
           </Text>
           <SelectWalletAccount

diff --git a/apps/mobile/components/home/select-wallet-account.tsx b/apps/mobile/components/home/select-wallet-account.tsx
@@ -62,7 +62,7 @@ export function SelectWalletAccount({
         className="!border-none !border-transparent !py-0 !h-6 flex-row items-center gap-2 self-start px-0"
       >
         <SelectValue
-          className="font-medium text-foreground"
+          className="font-medium text-base text-foreground"
           placeholder={t(i18n)`All Accounts`}
         >
           {value}

diff --git a/apps/mobile/components/home/wallet-statistics.tsx b/apps/mobile/components/home/wallet-statistics.tsx
@@ -128,7 +128,7 @@ export function WalletStatistics({
           className="!border-0 h-auto native:h-auto flex-col items-center gap-3"
         >
           <View className="self-center">
-            <Text className="w-fit self-center text-center text-muted-foreground leading-tight">
+            <Text className="w-fit self-center text-center text-foreground leading-tight">
               {options.find((option) => option.value === view)?.label}
             </Text>
           </View>