refactor: update TABS to include hideInNav property and filter in BottomNav; enhance image popup styling and loading indicator

mobile/App.tsx

@@ -10,11 +10,12 @@ interface Tab {
   label: string;
   route: Route;
   page: React.ComponentType;
+  hideInNav?: boolean;
 }
 const TABS: Tab[] = [
   { label: "Home", route: "home", page: IndexPage },
-  { label: "Text", route: "text", page: TextPage },
-  { label: "Image", route: "image", page: ImagePage },
+  { label: "Text", route: "text", page: TextPage, hideInNav: true },
+  { label: "Image", route: "image", page: ImagePage, hideInNav: true },
 ];
 export { TABS, type Tab };
 
@@ -52,39 +53,3 @@ const styles = StyleSheet.create({
     backgroundColor: "#fff",
   },
 });
-
-
-function Screen() {
-  const { route } = useRouter();
-  return (
-    <>
-      {TABS.map((tab) => {
-        if (tab.route === route) {
-          const Page = tab.page;
-          return <Page key={tab.route} />;
-        }
-        return null;
-      })}
-      {!TABS.some((tab) => tab.route === route) && <NotFoundPage />}
-    </>
-  );
-}
-
-export default function App() {
-  return (
-    <RouterProvider>
-      <View style={styles.container}>
-        <StatusBar style="auto" />
-        <Screen />
-        <BottomNav />
-      </View>
-    </RouterProvider>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#fff",
-  },
-});

mobile/src/components/BottomNav.tsx

@@ -8,7 +8,7 @@ export function BottomNav() {
 
   return (
     <View style={styles.bar}>
-      {TABS.map((tab) => {
+      {TABS.filter((tab) => !tab.hideInNav).map((tab) => {
         const active = tab.route === route;
         return (
           <TouchableOpacity