feat(new-phone): somewhat working navigation system

Author: itschip

apps/new-phone-react/package.json

@@ -17,6 +17,7 @@
     "@tanstack/react-query-devtools": "^5.62.8",
     "jotai": "^2.10.4",
     "jotai-devtools": "^0.10.1",
+    "lucide-react": "^0.294.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.0.2"

apps/new-phone-react/src/apps/Launcher.tsx

@@ -1,9 +1,29 @@
-import { AppGrid } from "@native/launcher/components/AppGrid"
+import { AppGrid } from '@native/launcher/components/AppGrid';
+import { Battery, Camera, MessageCircle, Phone, SignalMedium, Wifi } from 'lucide-react';
 
 export const Launcher = () => {
-    return (
-        <div className="h-full w-full bg-gray-500 rounded-xl">
-            <AppGrid />
+  return (
+    <div className="h-full w-full bg-gray-100 rounded-xl relative">
+      <header className="px-4 py-2 flex justify-between">
+        <div>
+          <p>9.41</p>
         </div>
-    )
-}
+        <div className="flex items-center space-x-2">
+          <SignalMedium size={24} />
+          <Wifi size={20} />
+          <Battery />
+        </div>
+      </header>
+
+      <AppGrid />
+
+      <div className="absolute bottom-5 left-0 right-0 flex justify-center">
+        <div className="bg-white shadow-md rounded-full p-4 flex space-x-6">
+          <MessageCircle />
+          <Camera />
+          <Phone />
+        </div>
+      </div>
+    </div>
+  );
+};

apps/new-phone-react/src/apps/dialer/app.routes.ts

@@ -1,8 +1,8 @@
-import { AppRoute } from '@navigation/navigator';
+import { AppNavigation } from '@navigation/navigator';
 import { Dialer } from './screens/Dialer';
 
 export default {
-    name: 'Phone',
-    path: '/phone',
-    Component: Dialer,
-} satisfies AppRoute;
+  name: 'Phone',
+  path: '/phone',
+  Component: Dialer,
+} satisfies AppNavigation;

apps/new-phone-react/src/apps/messages/app.routes.ts

@@ -1,8 +1,15 @@
-import { AppRoute } from '@navigation/navigator';
+import { MessagesLayout } from './screens/Layout';
+import { AppNavigation } from '@navigation/navigator';
 import { Messages } from './screens/Messages';
 
 export default {
-    name: 'Messages',
-    path: '/messages',
-    Component: Messages,
-} satisfies AppRoute;
+  name: 'Messaegs',
+  path: '/messages',
+  Component: MessagesLayout,
+  children: [
+    {
+      index: true,
+      Component: Messages,
+    },
+  ],
+} satisfies AppNavigation;

apps/new-phone-react/src/apps/messages/screens/Layout.tsx

@@ -0,0 +1,12 @@
+import { Outlet } from 'react-router';
+
+export function MessagesLayout() {
+  return (
+    <main className="bg-neutral-900 h-full w-full">
+      <header>
+        <p>Messages</p>
+      </header>
+      <Outlet />
+    </main>
+  );
+}

apps/new-phone-react/src/apps/messages/screens/Messages.tsx

@@ -1,7 +1,7 @@
 export const Messages = () => {
-    return (
-        <div>
-            <h1>Messages</h1>
-        </div>
-    )
-}
+  return (
+    <div className="px-4">
+      <input className="bg-neutral-800 border border-neutral-700 rounded-full py-2 w-full indent-4 text-white outline-none focus:ring-2 active:ring-2 ring-neutral-500" />
+    </div>
+  );
+};

apps/new-phone-react/src/native/components/PhoneFrame.tsx

@@ -3,7 +3,7 @@ import { Outlet } from 'react-router';
 export const PhoneFrame = () => {
   return (
     <div className="bg-red-200 min-h-screen min-w-screen">
-      <div className="bg-white fixed bottom-5 right-5 w-[450px] h-[900px] rounded-xl shadow-lg">
+      <div className="bg-white fixed bottom-5 right-5 w-[400px] h-[800px] rounded-xl shadow-lg">
         <Outlet />
       </div>
     </div>

apps/new-phone-react/src/navigation/navigator.ts

@@ -1,27 +1,28 @@
-import { Launcher } from "@apps/Launcher";
-import { PhoneFrame } from "@native/components/PhoneFrame";
-import {  createHashRouter } from "react-router";
+import { Launcher } from '@apps/Launcher';
+import { PhoneFrame } from '@native/components/PhoneFrame';
+import { createHashRouter, RouteObject } from 'react-router';
 
-export interface AppRoute {
-    name: string;
-    path: string;
-    Component: React.ComponentType;
-}
+export type AppNavigation = RouteObject & {
+  name: string;
+};
 
-export const createRouter = (navigators: AppRoute[]) => {
-    return createHashRouter([{
-        path: "/",
-        Component: PhoneFrame,
-        children: [
-            {
-                index: true,
-                Component: Launcher,
-            },
-            ...navigators.map(({ path, Component }) => ({
-                path,
-                Component,
-            })),
-        ]
-    }])
+// not sure why we have this right now, but we might add some stuff in here later????
+function createRoutes(navigators: RouteObject[]): RouteObject[] {
+  return navigators;
 }
 
+export function createRouter(navigators: RouteObject[]) {
+  return createHashRouter([
+    {
+      path: '/',
+      Component: PhoneFrame,
+      children: [
+        {
+          index: true,
+          Component: Launcher,
+        },
+        ...createRoutes(navigators),
+      ],
+    },
+  ]);
+}

apps/new-phone-react/src/system/hooks/useApps.ts

@@ -1,23 +1,25 @@
-import { useNavigators, useSetNavigator } from "@navigation/navigator.state";
+import { useNavigators, useSetNavigator } from '@navigation/navigator.state';
 
 export const useInitApps = () => {
-    const setNavigator = useSetNavigator();
+  const setNavigator = useSetNavigator();
 
-    const modules = import.meta.glob('/src/apps/*/app.routes.ts', { eager: true });
-    const apps = Object.values(modules).map((mod) => mod.default).filter((app) => app);
+  const modules = import.meta.glob('/src/apps/*/app.routes.ts', { eager: true });
+  const apps = Object.values(modules)
+    .map((mod) => mod.default)
+    .filter((app) => app);
 
-    for (const app of apps) {
-        if (!app) {
-            continue;
-        }
-
-        setNavigator(app);
+  for (const app of apps) {
+    if (!app) {
+      continue;
     }
 
-    return apps;
+    setNavigator(app);
+  }
+
+  return apps;
 };
 
 export const useApps = () => {
-    const navigator = useNavigators();
-    return navigator;
-}
+  const navigator = useNavigators();
+  return navigator;
+};

package.json

@@ -43,6 +43,5 @@
     "hooks": {
       "pre-commit": "npx run format:staged"
     }
-  },
-  "dependencies": {}
+  }
 }