feat(mobile): enhance Tabbar component with placeholder support

- Added a placeholder mechanism in the Tabbar component to handle cases where no tab screens are available, improving user experience by preventing empty tab displays.
- Utilized `useMemo` to create a default placeholder tab screen, ensuring efficient rendering.
- Updated the rendering logic to conditionally display either the actual tab screens or the placeholder.

These changes optimize the Tabbar functionality and enhance the overall navigation experience within the mobile application.

Signed-off-by: Innei <tukon479@gmail.com>

apps/mobile/src/components/layouts/tabbar/Tabbar.tsx

@@ -1,6 +1,6 @@
 import { useAtom, useAtomValue } from "jotai"
 import type { FC } from "react"
-import { memo, useContext, useEffect } from "react"
+import { memo, useContext, useEffect, useMemo } from "react"
 import type { StyleProp, TextStyle } from "react-native"
 import { Platform, Pressable, StyleSheet, Text, View } from "react-native"
 import Animated, {
@@ -14,6 +14,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context"
 import { SetBottomTabBarHeightContext } from "@/src/components/layouts/tabbar/contexts/BottomTabBarHeightContext"
 import { gentleSpringPreset, quickSpringPreset, softSpringPreset } from "@/src/constants/spring"
 import { BottomTabContext } from "@/src/lib/navigation/bottom-tab/BottomTabContext"
+import type { TabScreenProps } from "@/src/lib/navigation/bottom-tab/TabScreen"
 import type { TabbarIconProps } from "@/src/lib/navigation/bottom-tab/types"
 import { PlayerTabBar } from "@/src/modules/player/PlayerTabBar"
 import { accentColor } from "@/src/theme/colors"
@@ -43,9 +44,16 @@ export const Tabbar: FC<{
       !tabBarVisible ? quickSpringPreset : softSpringPreset,
     )
   }, [tabBarVisible, translateY])
-  if (tabScreens.length === 0) return null
+
+  const placeholderTabScreens = useMemo<TabScreenProps[]>(() => {
+    return [{ tabScreenIndex: 0, title: "", renderIcon: () => <View className="size-5" /> }]
+  }, [])
+
+  const renderTabScreens = tabScreens.length > 0 ? tabScreens : placeholderTabScreens
+
   return (
     <Animated.View
+      pointerEvents={tabScreens.length > 0 ? "auto" : "none"}
       accessibilityRole="tablist"
       className="absolute inset-x-0 bottom-0 z-10"
       style={{
@@ -57,9 +65,10 @@ export const Tabbar: FC<{
       }}
     >
       <TabBarBackground />
+
       <PlayerTabBar />
-      <Grid columns={tabScreens.length} gap={10} className="mt-[7]">
-        {tabScreens.map((route, index) => {
+      <Grid columns={renderTabScreens.length} gap={10} className="mt-[7]">
+        {renderTabScreens.map((route, index) => {
           const focused = index === selectedIndex
 
           const inactiveTintColor = "#999"

apps/mobile/src/components/ui/grid/index.tsx

@@ -20,6 +20,9 @@ export const Grid = ({
   style,
   className,
 }: GridProps & PropsWithChildren) => {
+  if (columns < 1) {
+    throw new Error("Columns must be greater than 0")
+  }
   const rowsChildren = useMemo(() => {
     const childrenArray = React.Children.toArray(children)
     const rows = []