testing something

mobile/App.tsx

@@ -2,14 +2,20 @@ import { StatusBar } from "expo-status-bar";
 import { StyleSheet, View } from "react-native";
 import { BottomNav } from "./src/components/BottomNav";
 import { NotFoundPage } from "./src/pages/NotFound";
+import { ImagePage } from "./src/pages/image";
 import { IndexPage } from "./src/pages/index";
+import { TextPage } from "./src/pages/text";
 import { Route, RouterProvider, useRouter } from "./src/router";
 interface Tab {
   label: string;
   route: Route;
   page: React.ComponentType;
 }
-const TABS: Tab[] = [{ label: "Home", route: "home", page: IndexPage }];
+const TABS: Tab[] = [
+  { label: "Home", route: "home", page: IndexPage },
+  { label: "Text", route: "text", page: TextPage },
+  { label: "Image", route: "image", page: ImagePage },
+];
 export { TABS, type Tab };
 
 function Screen() {
@@ -46,3 +52,39 @@ 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/pages/image.tsx

@@ -0,0 +1,145 @@
+import * as ImagePicker from "expo-image-picker";
+import { useState } from "react";
+import { ActivityIndicator, Button, Image, StyleSheet, Text, TextInput, View } from "react-native";
+
+const BASE_URL =
+  "https://shsf-api.reversed.dev/api/exec/15/1c44d8b5-4065-4a54-b259-748561021329";
+
+export function ImagePage() {
+  const [caption, setCaption] = useState("");
+  const [uploading, setUploading] = useState(false);
+  const [previewUri, setPreviewUri] = useState<string | null>(null);
+
+  const handleTakePhoto = async () => {
+    const { granted } = await ImagePicker.requestCameraPermissionsAsync();
+    if (!granted) {
+      alert("Camera permission is required to take photos.");
+      return;
+    }
+
+    const result = await ImagePicker.launchCameraAsync({
+      mediaTypes: "images",
+      quality: 1,
+      base64: true,
+    });
+
+    if (result.canceled) return;
+
+    const asset = result.assets[0];
+    setPreviewUri(asset.uri);
+    setUploading(true);
+
+    try {
+      const res = await fetch(`${BASE_URL}/push_image`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ image_b64: asset.base64, caption }),
+      });
+      const data = await res.json();
+      if (data.status !== "success") throw new Error(data.message ?? "Upload failed");
+    } catch (error) {
+      console.error("Upload error:", error);
+      alert("Failed to upload image.");
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const handleDismiss = () => {
+    fetch(`${BASE_URL}/push_dismiss_image`, { method: "POST" })
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.status !== "success") alert("Failed to dismiss image.");
+      })
+      .catch((error) => {
+        console.error("Error dismissing image:", error);
+        alert("Error dismissing image.");
+      });
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Image Popup</Text>
+      <Text style={styles.subtitle}>Show a photo on the TV with an optional caption.</Text>
+
+      <View style={styles.field}>
+        <Text style={styles.label}>Caption (optional)</Text>
+        <TextInput
+          style={styles.input}
+          placeholder="Add a caption..."
+          value={caption}
+          onChangeText={setCaption}
+        />
+      </View>
+
+      {previewUri && (
+        <Image source={{ uri: previewUri }} style={styles.preview} />
+      )}
+
+      {uploading ? (
+        <ActivityIndicator size="large" style={{ marginTop: 8 }} />
+      ) : (
+        <View style={styles.actions}>
+          <View style={styles.actionBtn}>
+            <Button title="Take Photo & Show" onPress={handleTakePhoto} />
+          </View>
+          <View style={styles.actionBtn}>
+            <Button title="Dismiss" onPress={handleDismiss} color="#e55" />
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 24,
+    backgroundColor: "#f9f9f9",
+    gap: 20,
+  },
+  title: {
+    fontSize: 26,
+    fontWeight: "700",
+    color: "#111",
+    marginTop: 8,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: "#888",
+    marginTop: -12,
+  },
+  field: {
+    gap: 6,
+  },
+  label: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: "#555",
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: "#ddd",
+    borderRadius: 10,
+    padding: 12,
+    fontSize: 16,
+    backgroundColor: "#fff",
+  },
+  preview: {
+    width: "100%",
+    height: 200,
+    borderRadius: 10,
+    resizeMode: "cover",
+  },
+  actions: {
+    flexDirection: "row",
+    gap: 12,
+    marginTop: 4,
+  },
+  actionBtn: {
+    flex: 1,
+  },
+});

mobile/src/pages/index.tsx

@@ -1,118 +1,26 @@
-import * as ImagePicker from "expo-image-picker";
-import { useState } from "react";
-import { ActivityIndicator, Button, Image, StyleSheet, Text, TextInput, View } from "react-native";
-
-const BASE_URL =
-  "https://shsf-api.reversed.dev/api/exec/15/1c44d8b5-4065-4a54-b259-748561021329";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { useRouter } from "../router";
 
 export function IndexPage() {
-  const [text, setText] = useState("");
-  const [uploading, setUploading] = useState(false);
-  const [previewUri, setPreviewUri] = useState<string | null>(null);
-
-  const handleSend = () => {
-    if (text.trim() === "") {
-      alert("Please enter some text before sending.");
-      return;
-    }
-
-    fetch(`${BASE_URL}/push_text`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ text }),
-    })
-      .then((r) => r.json())
-      .then((data) => {
-        if (data.status === "success") {
-          alert("Text sent successfully!");
-        } else {
-          alert("Failed to send text.");
-        }
-      })
-      .catch((error) => {
-        console.error("Error sending text:", error);
-        alert("Error sending text.");
-      });
-  };
-
-  const handlePullText = () => {
-    fetch(`${BASE_URL}/pull_text`)
-      .then((r) => r.json())
-      .then((data) => {
-        alert(data.text ?? "No text received.");
-      })
-      .catch((error) => {
-        console.error("Error pulling text:", error);
-        alert("Error pulling text.");
-      });
-  };
-
-  const handleTakePhoto = async () => {
-    const { granted } = await ImagePicker.requestCameraPermissionsAsync();
-    if (!granted) {
-      alert("Camera permission is required to take photos.");
-      return;
-    }
-
-    const result = await ImagePicker.launchCameraAsync({
-      mediaTypes: "images",
-      quality: 0.8,
-      base64: true,
-    });
-
-    if (result.canceled) return;
-
-    const asset = result.assets[0];
-    setPreviewUri(asset.uri);
-    setUploading(true);
-
-    try {
-      // Send base64 image to server — server uploads to Minio and saves the URL
-      const res = await fetch(`${BASE_URL}/push_image`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ image_b64: asset.base64 }),
-      });
-      const data = await res.json();
-      if (data.status !== "success") throw new Error(data.message ?? "Upload failed");
-
-      alert("Image uploaded and sent to TV!");
-    } catch (error) {
-      console.error("Upload error:", error);
-      alert("Failed to upload image.");
-    } finally {
-      setUploading(false);
-    }
-  };
+  const { navigate } = useRouter();
 
   return (
     <View style={styles.container}>
       <Text style={styles.title}>TV Control</Text>
+      <Text style={styles.subtitle}>Choose what to send to the TV.</Text>
 
-      <View style={styles.section}>
-        <Text style={styles.sectionLabel}>Text</Text>
-        <TextInput
-          style={styles.input}
-          placeholder="Type something..."
-          value={text}
-          onChangeText={setText}
-        />
-        <View style={styles.row}>
-          <Button title="Send Text" onPress={handleSend} />
-          <Button title="Pull Text" onPress={handlePullText} />
-        </View>
-      </View>
+      <View style={styles.cards}>
+        <TouchableOpacity style={styles.card} onPress={() => navigate("text")} activeOpacity={0.8}>
+          <Text style={styles.cardIcon}>💬</Text>
+          <Text style={styles.cardTitle}>Text Popup</Text>
+          <Text style={styles.cardDesc}>Display a message on the TV screen.</Text>
+        </TouchableOpacity>
 
-      <View style={styles.section}>
-        <Text style={styles.sectionLabel}>Image</Text>
-        {previewUri && (
-          <Image source={{ uri: previewUri }} style={styles.preview} />
-        )}
-        {uploading ? (
-          <ActivityIndicator size="large" style={{ marginTop: 12 }} />
-        ) : (
-          <Button title="Take Photo & Send to TV" onPress={handleTakePhoto} />
-        )}
+        <TouchableOpacity style={styles.card} onPress={() => navigate("image")} activeOpacity={0.8}>
+          <Text style={styles.cardIcon}>📷</Text>
+          <Text style={styles.cardTitle}>Image Popup</Text>
+          <Text style={styles.cardDesc}>Take a photo and show it on the TV.</Text>
+        </TouchableOpacity>
       </View>
     </View>
   );
@@ -121,44 +29,48 @@ export function IndexPage() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: "#f9f9f9",
     padding: 24,
-    gap: 24,
+    backgroundColor: "#f9f9f9",
+    gap: 20,
   },
   title: {
-    fontSize: 28,
+    fontSize: 30,
     fontWeight: "700",
-    marginBottom: 8,
+    color: "#111",
+    marginTop: 8,
   },
-  section: {
-    width: "100%",
-    gap: 8,
+  subtitle: {
+    fontSize: 15,
+    color: "#888",
+    marginTop: -12,
   },
-  sectionLabel: {
-    fontSize: 14,
-    fontWeight: "600",
-    color: "#555",
-    textTransform: "uppercase",
-    letterSpacing: 0.5,
+  cards: {
+    gap: 16,
+    marginTop: 8,
   },
-  input: {
-    borderWidth: 1,
-    borderColor: "#ddd",
-    borderRadius: 8,
-    padding: 10,
-    fontSize: 16,
+  card: {
     backgroundColor: "#fff",
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: "#e8e8e8",
+    padding: 20,
+    gap: 6,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.06,
+    shadowRadius: 4,
+    elevation: 2,
   },
-  row: {
-    flexDirection: "row",
-    gap: 8,
+  cardIcon: {
+    fontSize: 28,
   },
-  preview: {
-    width: "100%",
-    height: 200,
-    borderRadius: 8,
-    resizeMode: "cover",
+  cardTitle: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: "#111",
   },
-});
+  cardDesc: {
+    fontSize: 14,
+    color: "#888",
+  },
+});

mobile/src/pages/text.tsx

@@ -0,0 +1,117 @@
+import { useState } from "react";
+import { Button, StyleSheet, Text, TextInput, View } from "react-native";
+
+const BASE_URL =
+  "https://shsf-api.reversed.dev/api/exec/15/1c44d8b5-4065-4a54-b259-748561021329";
+
+export function TextPage() {
+  const [title, setTitle] = useState("");
+
+  const handleShow = () => {
+    if (title.trim() === "") {
+      alert("Please enter some text before sending.");
+      return;
+    }
+
+    fetch(`${BASE_URL}/push_text`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ title }),
+    })
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.status !== "success") alert("Failed to send text.");
+      })
+      .catch((error) => {
+        console.error("Error sending text:", error);
+        alert("Error sending text.");
+      });
+  };
+
+  const handleDismiss = () => {
+    fetch(`${BASE_URL}/push_dismiss_text`, { method: "POST" })
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.status !== "success") alert("Failed to dismiss text.");
+      })
+      .catch((error) => {
+        console.error("Error dismissing text:", error);
+        alert("Error dismissing text.");
+      });
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Text Popup</Text>
+      <Text style={styles.subtitle}>Display a text message on the TV.</Text>
+
+      <View style={styles.field}>
+        <Text style={styles.label}>Message</Text>
+        <TextInput
+          style={styles.input}
+          placeholder="Type something..."
+          value={title}
+          onChangeText={setTitle}
+          multiline
+        />
+      </View>
+
+      <View style={styles.actions}>
+        <View style={styles.actionBtn}>
+          <Button title="Show on TV" onPress={handleShow} />
+        </View>
+        <View style={styles.actionBtn}>
+          <Button title="Dismiss" onPress={handleDismiss} color="#e55" />
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 24,
+    backgroundColor: "#f9f9f9",
+    gap: 20,
+  },
+  title: {
+    fontSize: 26,
+    fontWeight: "700",
+    color: "#111",
+    marginTop: 8,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: "#888",
+    marginTop: -12,
+  },
+  field: {
+    gap: 6,
+  },
+  label: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: "#555",
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: "#ddd",
+    borderRadius: 10,
+    padding: 12,
+    fontSize: 16,
+    backgroundColor: "#fff",
+    minHeight: 80,
+    textAlignVertical: "top",
+  },
+  actions: {
+    flexDirection: "row",
+    gap: 12,
+    marginTop: 4,
+  },
+  actionBtn: {
+    flex: 1,
+  },
+});

mobile/src/router.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useState } from "react";
 
-export type Route = "home" | "mystery";
+export type Route = "home" | "text" | "image";
 
 interface RouterContextValue {
   route: Route;