Make the menu a menulist, remove non-mvp screens (#106)

Author: dgca

packages/mobile-app/app/(tabs)/_layout.tsx

@@ -8,7 +8,7 @@ export default function Layout() {
         name="index"
         options={{
           headerShown: false,
-          title: "Home",
+          title: "Account",
           tabBarIcon: ({ focused, color, size }) => (
             <Ionicons
               name={focused ? "wallet" : "wallet-outline"}

packages/mobile-app/app/_layout.tsx

@@ -35,13 +35,18 @@ const queryClient = new QueryClient({
 
 function DatabaseLoader({ children }: { children?: React.ReactNode }) {
   const facade = useFacade();
-  const [status, setStatus] = useState<string>("loading");
+  const [status, setStatus] = useState<"loading" | "loaded">("loading");
   const { mutateAsync: loadDatabases } = facade.loadDatabases.useMutation();
 
   useEffect(() => {
     const fn = async () => {
       const result = await loadDatabases(undefined);
-      setStatus(result);
+
+      if (result !== "loaded") {
+        throw new Error("Failed to load databases");
+      }
+
+      setStatus("loaded");
     };
     fn();
   }, [loadDatabases]);
@@ -53,11 +58,9 @@ function DatabaseLoader({ children }: { children?: React.ReactNode }) {
         <Text>Loading databases...</Text>
       </SafeAreaView>
     );
-  } else if (status === "loaded") {
-    return children;
-  } else {
-    throw new Error(`Unknown status ${status}`);
   }
+
+  return children;
 }
 
 export default function Layout() {
@@ -82,6 +85,13 @@ export default function Layout() {
                     name="(tabs)"
                     options={{
                       headerShown: false,
+                      title: "Account",
+                    }}
+                  />
+                  <Stack.Screen
+                    name="menu"
+                    options={{
+                      title: "Menu",
                     }}
                   />
                   <Stack.Screen

packages/mobile-app/app/menu/_layout.tsx

@@ -0,0 +1,56 @@
+import { Stack } from "expo-router";
+
+export default function MenuLayout() {
+  return (
+    <Stack>
+      <Stack.Screen
+        name="index"
+        options={{
+          headerShown: false,
+        }}
+      />
+      <Stack.Screen
+        name="security/index"
+        options={{
+          title: "Security",
+        }}
+      />
+      <Stack.Screen
+        name="notifications/index"
+        options={{
+          title: "Notifications",
+        }}
+      />
+      <Stack.Screen
+        name="language/index"
+        options={{
+          title: "Language",
+        }}
+      />
+      <Stack.Screen
+        name="theme/index"
+        options={{
+          title: "Theme",
+        }}
+      />
+      <Stack.Screen
+        name="network/index"
+        options={{
+          title: "Network",
+        }}
+      />
+      <Stack.Screen
+        name="debug/index"
+        options={{
+          title: "Debug",
+        }}
+      />
+      <Stack.Screen
+        name="about/index"
+        options={{
+          title: "About",
+        }}
+      />
+    </Stack>
+  );
+}

packages/mobile-app/app/menu/index.tsx

@@ -1,33 +1,54 @@
 import { StatusBar } from "expo-status-bar";
-import { Button, StyleSheet, View } from "react-native";
+import { StyleSheet } from "react-native";
+import {
+  Icon,
+  IconElement,
+  Layout,
+  Menu,
+  MenuItem,
+} from "@ui-kitten/components";
 import { useRouter } from "expo-router";
-import { LinkButton } from "../../components/LinkButton";
 
-export default function Menu() {
+const ForwardIcon = (props: any): IconElement => (
+  <Icon {...props} name="arrow-ios-forward" />
+);
+
+const menuItems = [
+  { title: "Security", href: "menu/security" },
+  { title: "Notifications", href: "menu/notifications" },
+  { title: "Network", href: "menu/network" },
+  { title: "Debug", href: "menu/debug" },
+  { title: "About the app", href: "menu/about" },
+];
+
+export default function MenuScreen() {
   const router = useRouter();
 
-  return (
-    <View style={styles.container}>
-      <Button title="Close" onPress={() => router.dismiss()} />
-      <LinkButton title="Security" href="/menu/security/" />
-      <LinkButton title="Notifications" href="/menu/notifications/" />
-      <LinkButton title="Language" href="/menu/language/" />
-      <LinkButton title="Theme" href="/menu/theme/" />
-      <LinkButton title="Network" href="/menu/network" />
-      <LinkButton title="Learn" href="/menu/learn/" />
-      <LinkButton title="Debug" href="/menu/debug/" />
-      <LinkButton title="About the app" href="/menu/about/" />
+  const handleSelect = (index: number) => {
+    router.push(menuItems[index].href);
+  };
 
+  return (
+    <Layout style={styles.container} level="1">
+      <Menu style={styles.menu} onSelect={(index) => handleSelect(index.row)}>
+        {menuItems.map((item, index) => (
+          <MenuItem
+            key={index}
+            title={item.title}
+            accessoryRight={ForwardIcon}
+          />
+        ))}
+      </Menu>
       <StatusBar style="auto" />
-    </View>
+    </Layout>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center",
+  },
+  menu: {
+    flex: 1,
   },
 });