(ui): Added timeline visuals and search button

o4a-ui/app/(tabs)/_layout.tsx

@@ -4,6 +4,7 @@ import { Tabs } from "expo-router";
 import { icons } from "../../constants";
 
 import TabIcon from "../../components/navigation/tab-icon";
+import { Text } from "react-native";
 
 const TabLayout = () => {
   return (
@@ -13,18 +14,31 @@ const TabLayout = () => {
         tabBarInactiveTintColor: "#9da0a6",
         tabBarActiveTintColor: "#3ffeb9",
         tabBarStyle: {
+          elevation: 0,
+          shadowOpacity: 0,
+          shadowColor: "transparent",
           backgroundColor: "#1e1e1e",
           borderTopColor: "#292e3a",
           borderTopWidth: 1,
           height: 84,
         },
       }}
     >
+      {/* For the nutrition screen I want an input field above the tab icons */}
       <Tabs.Screen
         name="nutrition"
         options={{
           title: "Nutrition",
           headerShown: false,
+          tabBarStyle: {
+            elevation: 0,
+            shadowOpacity: 0,
+            shadowColor: "transparent",
+            backgroundColor: "#1e1e1e",
+            borderTopColor: "#292e3a",
+            borderTopWidth: 0,
+            height: 84,
+          },
           tabBarIcon: ({ color, focused }) => (
             <TabIcon
               icon={icons.meal}

o4a-ui/app/(tabs)/nutrition.tsx

@@ -1,23 +1,53 @@
 import React, { FC } from "react";
-import { Image, ScrollView, Text, TouchableOpacity, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
+import { Image, ScrollView, Text, TouchableOpacity, View } from "react-native";
+
+import { icons } from "@/constants";
 
 import WeekDays from "../../components/week-days";
 import DailyNutritionSummary from "../../components/daily-nutrition-summary";
 import Meals from "../../components/data-display/meals";
 
+const DUMMY_MEALS = [
+  {
+    name: "oats",
+  },
+  {
+    name: "Scrambled eggs",
+  },
+];
+
 const Nutrition: FC = () => {
   return (
     <SafeAreaView className="bg-primary h-full">
       <ScrollView>
         <View className="px-4 pt-2">
-          {/* Render today's calorie and macros component */}
           <WeekDays containerStyle="mb-5" />
+          {/* Render today's calorie and macros component */}
           <DailyNutritionSummary kcalEaten={1330} kcalGoal={2000} />
           {/* Overview of logged meals */}
-          <Meals />
+          <Meals meals={DUMMY_MEALS} />
         </View>
       </ScrollView>
+      {/* Button to navigate to food search screen */}
+      <View className="border-t border-black-200 px-4 pt-2">
+        <TouchableOpacity className="flex-row items-center justify-between bg-black-200 p-4 rounded-lg">
+          <View className="flex-row items-center gap-2">
+            <Image
+              source={icons.search}
+              className="w-4 h-4"
+              tintColor="#9da0a6"
+            />
+            <Text className="text-gray">Search Food</Text>
+          </View>
+          {/* should be pushed to the right edge */}
+          <Image
+            source={icons.barcode}
+            className="w-4 h-4"
+            tintColor="#9da0a6"
+          />
+        </TouchableOpacity>
+      </View>
     </SafeAreaView>
   );
 };

o4a-ui/app/(tabs)/profile.tsx

@@ -1,7 +1,20 @@
-import { SafeAreaView } from "react-native";
+import React from "react";
+import { Image, SafeAreaView, Text, View } from "react-native";
+
+import { images } from "../../constants";
 
 const Profile = () => {
-  return <SafeAreaView></SafeAreaView>;
+  return (
+    <SafeAreaView className="bg-primary h-full">
+      <View className="w-full flex justify-center items-center mt-20">
+        <Image
+          source={images.dummyAvatar}
+          className="w-32 h-32 rounded-full mb-5"
+        />
+        <Text className="text-white text-2xl font-rmedium">Kakarot</Text>
+      </View>
+    </SafeAreaView>
+  );
 };
 
 export default Profile;

o4a-ui/components/data-display/meals.tsx

@@ -2,31 +2,56 @@ import React, { FC } from "react";
 import { Image, Text, TouchableOpacity, View } from "react-native";
 
 import { icons } from "../../constants";
+import { Meal } from "@/constants/models";
 
-const Meals = () => {
+const Meals: FC<{ meals?: Meal[] }> = ({ meals }) => {
   return (
     <>
       <Text className="text-white font-rmedium mb-2">Meals</Text>
-      <View className="bg-black-200 rounded-xl p-2">
-        <View className="flex-row items-center gap-4">
-          <Image source={icons.bowl} tintColor="#fefefe" className="w-6 h-6" />
-          <View className="flex-1">
-            {/* should be have space between */}
-            <View className="flex-row items-center  mb-1">
-              <Text className="text-white font-rmedium flex-1">Breakfast</Text>
-              <View className="flex-row items-center gap-1">
-                <Image
-                  source={icons.clock}
-                  tintColor="#9da0a6"
-                  className="w-3 h-3"
-                />
-                <Text className="text-gray text-xs font-rlight">07:00</Text>
+      {meals?.map((meal, index) => (
+        <View key={index} className="bg-black-200 rounded-xl p-2 mb-4 relative">
+          <View className="flex-row items-center">
+            {/* Time on the left */}
+            <Text className="text-gray text-xs font-rmedium px-2">07:00</Text>
+            <View className="flex-1">
+              {/* Space between meal name and right-side content */}
+              <View className="flex-row justify-between items-center mb-1">
+                <Text className="text-white font-rmedium flex-1">
+                  {meal.name || "Overnight Oats"} {/* Example meal name */}
+                </Text>
+                <View className="flex-row items-center gap-1">
+                  <Text className="text-gray text-xs">450 / 600 kcal</Text>
+                </View>
+              </View>
+              <Text className="text-gray text-xs mb-1">
+                {meal.ingredients || "Rolled Oats, Banana"}
+              </Text>
+              <View className="flex-row gap-5">
+                <Text className="text-gray text-xs">Carbs</Text>
+                <Text className="text-gray text-xs">Protein</Text>
+                <Text className="text-gray text-xs">Fats</Text>
               </View>
             </View>
-            <Text className="text-gray text-xs mb-1">450 / 600 kcal</Text>
-            <Text className="text-gray text-xs">Rolled Oats, Banana</Text>
           </View>
+          {/* Vertical Line on the left */}
+          {index < meals.length - 1 && (
+            <View
+              className="absolute bg-secondary left-6"
+              style={{ width: 1, height: 15, top: "130%" }}
+            />
+          )}
         </View>
+      ))}
+      {/* Vertical line extending from last meal to the button */}
+      <View className="relative flex-row items-start">
+        {/* Vertical line extending from the last meal to the button */}
+        <View
+          className="absolute bg-secondary left-6"
+          style={{ width: 1, height: 20, top: -15 }}
+        />
+        <TouchableOpacity className="bg-secondary h-8 w-8 p-2 rounded-full items-center justify-center ml-2">
+          <Image source={icons.add} />
+        </TouchableOpacity>
       </View>
     </>
   );

o4a-ui/components/week-days.tsx

@@ -17,12 +17,12 @@ const WeekDays: FC<{ containerStyle?: string }> = ({ containerStyle }) => {
           className={`w-12 p-2 rounded-full items-center justify-center ${date.toDateString() === currentDate.toDateString() ? "bg-secondary" : ""}`}
         >
           <Text
-            className={`mb-5 ${date.toDateString() === currentDate.toDateString() ? "text-white" : "text-gray"}`}
+            className={`mb-2 ${date.toDateString() === currentDate.toDateString() ? "text-white" : "text-gray"}`}
           >
             {["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"][index]}
           </Text>
           <Text
-            className={`text-white font-bold p-2 ${date.toDateString() === currentDate.toDateString() ? "bg-white text-primary rounded-full" : ""}`}
+            className={`flex items-center justify-center text-white font-bold w-8 h-8 p-2 ${date.toDateString() === currentDate.toDateString() ? "bg-white text-primary rounded-full" : ""}`}
           >
             {date.getDate()}
           </Text>

o4a-ui/constants/icons.ts

@@ -7,6 +7,9 @@ import fire from "../assets/icons/fire.png";
 import bowl from "../assets/icons/bowl.png";
 import edit from "../assets/icons/edit.png";
 import clock from "../assets/icons/clock.png";
+import add from "../assets/icons/add.png";
+import search from "../assets/icons/search.png";
+import barcode from "../assets/icons/barcode.png";
 
 export default {
   journal,
@@ -18,4 +21,7 @@ export default {
   bowl,
   edit,
   clock,
+  add,
+  search,
+  barcode,
 };

o4a-ui/constants/images.ts

@@ -0,0 +1,5 @@
+import dummyAvatar from "../assets/images/dummy-avatar.jpg";
+
+export default {
+  dummyAvatar,
+};

o4a-ui/constants/index.ts

@@ -1,3 +1,4 @@
 import icons from "./icons";
+import images from "./images";
 
-export { icons };
+export { icons, images };

o4a-ui/constants/models.ts

@@ -0,0 +1,3 @@
+export type Meal = {
+  name: string;
+};

o4a-ui/tailwind.config.js

@@ -7,7 +7,7 @@ module.exports = {
         primary: "#1e1e1e",
         secondary: {
           DEFAULT: "#2dae77",
-          200: "##3ffeb9",
+          200: "#3ffeb9",
           400: "#dbfbed",
         },
         black: {