chore(base): setup calls app for testing

src/ui/src/App.tsx

@@ -1,10 +1,12 @@
-import { Link, Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
 import { Frame } from './Frame';
 
 import { useEffect } from 'react';
 import { setTheme } from './utils/theme';
+import { Footer } from './components/Main/Footer';
+import { Header } from './components/Main/Header';
 
-const lightTheme = {
+export const lightTheme = {
   textColor: {
     primary: '#000',
     secondary: '#222',
@@ -15,7 +17,7 @@ const lightTheme = {
   },
 };
 
-const darkTheme = {
+export const darkTheme = {
   textColor: {
     primary: '#fff',
     secondary: '#ddd',
@@ -27,36 +29,22 @@ const darkTheme = {
 };
 
 function App() {
-  const toggleTheme = () => {
-    const rootElement = document.getElementById('root')!;
-    const currentTheme =
-      rootElement.style.getPropertyValue('--bg-primary') === lightTheme.backgroundColor.primary
-        ? darkTheme
-        : lightTheme;
-
-    setTheme(currentTheme);
-  };
-
   useEffect(() => {
-    setTheme(lightTheme);
+    localStorage.getItem('theme') === JSON.stringify(darkTheme)
+      ? setTheme(darkTheme)
+      : setTheme(lightTheme);
   }, []);
 
   return (
     <Frame>
-      <main className="flex flex-col gap-2 flex-1">
-        <header className="h-8 bg-slate-400 text-secondary px-6 flex gap-4">
-          (This is the header)
-        </header>
-
-        <Outlet />
+      <main className="flex flex-col flex-1 overflow-hidden">
+        <Header />
 
-        <button className="border p-4 rounded-lg m-8" onClick={toggleTheme}>
-          toggle theme
-        </button>
+        <section className="w-full overflow-auto h-full flex-1 flex flex-col">
+          <Outlet />
+        </section>
 
-        <footer className="h-8 bg-slate-400 text-secondary px-6 flex gap-4 items-center mt-auto">
-          <Link to="/home">Home</Link>
-        </footer>
+        <Footer />
       </main>
     </Frame>
   );

src/ui/src/Apps/Calls/Call/index.tsx

@@ -0,0 +1,16 @@
+import { useLocation, useNavigate, useParams } from 'react-router';
+import { Link } from 'react-router-dom';
+
+export const Call = () => {
+  const params = useParams<{ phoneNumber: string }>();
+
+  return (
+    <main className="p-8 flex flex-col gap-2">
+      <h1 className="text-2xl font-bold">Calling ... {params.phoneNumber ?? 'unknown'}</h1>
+
+      <Link to={-1 as any} relative="path">
+        <button className="px-4 py-2 border rounded-lg">end call</button>
+      </Link>
+    </main>
+  );
+};

src/ui/src/Apps/Calls/Contacts/Contact/index.tsx

@@ -0,0 +1,42 @@
+import { useParams } from 'react-router';
+import { contacts } from '..';
+import { Link } from 'react-router-dom';
+import { TopNavigation } from '../../../../components/Navigation/TopNavigation';
+
+export const ContactView = () => {
+  const { contactId } = useParams<{ contactId: string }>();
+
+  if (!contactId) {
+    return null;
+  }
+  const contact = contacts.find((contact) => contact.id === contactId);
+
+  if (!contact) {
+    return null;
+  }
+
+  return (
+    <main className="flex flex-col">
+      <TopNavigation
+        title={contact.name}
+        left={
+          <Link to=".." relative="path">
+            Back
+          </Link>
+        }
+      />
+
+      <section className="p-4 flex flex-col gap-2">
+        <div className="bg-secondary p-4">
+          <ul className="list-disc list-inside">
+            {contact.phoneNumbers.map((phoneNumber) => (
+              <Link key={phoneNumber} to={`/apps/calls/call/${phoneNumber}`}>
+                <li>{phoneNumber}</li>
+              </Link>
+            ))}
+          </ul>
+        </div>
+      </section>
+    </main>
+  );
+};

src/ui/src/Apps/Calls/Contacts/index.tsx

@@ -0,0 +1,77 @@
+/** Create 10 contacts with varying number of phone numbers, 1-3, where one is most common and 3 is least common.*/
+
+import { Link } from 'react-router-dom';
+import { TopNavigation } from '../../../components/Navigation/TopNavigation';
+
+export const contacts = [
+  {
+    id: '1',
+    name: 'Alice Doe',
+    phoneNumbers: ['+1234567890'],
+  },
+  {
+    id: '2',
+    name: 'Bob Doe',
+    phoneNumbers: ['+1234567891', '+1234567892'],
+  },
+  {
+    id: '3',
+    name: 'Charlie Doe',
+    phoneNumbers: ['+1234567893', '+1234567894', '+1234567895'],
+  },
+  {
+    id: '4',
+    name: 'David Doe',
+    phoneNumbers: ['+1234567896'],
+  },
+  {
+    id: '5',
+    name: 'Eve Doe',
+    phoneNumbers: ['+1234567897', '+1234567898'],
+  },
+  {
+    id: '6',
+    name: 'Frank Doe',
+    phoneNumbers: ['+1234567899'],
+  },
+  {
+    id: '7',
+    name: 'Grace Doe',
+    phoneNumbers: ['+1234567800', '+1234567801', '+1234567802'],
+  },
+  {
+    id: '8',
+    name: 'Harry Doe',
+    phoneNumbers: ['+1234567803'],
+  },
+  {
+    id: '9',
+    name: 'Isabel Doe',
+    phoneNumbers: ['+1234567804', '+1234567805'],
+  },
+  {
+    id: '10',
+    name: 'Jack Doe',
+    phoneNumbers: ['+1234567806'],
+  },
+];
+
+export const ContactsView = () => {
+  return (
+    <main className="flex flex-col">
+      <TopNavigation title="Contacts" />
+
+      <ul className="flex flex-col gap-2 p-4">
+        {contacts.map((contact) => (
+          <Link
+            key={contact.id}
+            className="bg-secondary p-4"
+            to={`/apps/calls/contacts/${contact.id}`}
+          >
+            <li className="text-xl font-bold rounded-lg bg-secondary">{contact.name}</li>
+          </Link>
+        ))}
+      </ul>
+    </main>
+  );
+};

src/ui/src/Apps/Calls/Keypad/index.tsx

@@ -0,0 +1,39 @@
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { TopNavigation } from '../../../components/Navigation/TopNavigation';
+
+export const KeypadView = () => {
+  const [search] = useSearchParams();
+  const navigate = useNavigate();
+
+  const handleCall = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    const number = formData.get('number') as string;
+
+    if (!number) {
+      return;
+    }
+    navigate(`../call/${number}`);
+  };
+
+  const phoneNumber = search.get('phoneNumber');
+
+  return (
+    <div className="flex flex-col gap-2">
+      <TopNavigation title="Keypad" />
+
+      <form onSubmit={handleCall} className="flex flex-col gap-2 p-4">
+        <input
+          name="number"
+          placeholder="Number .."
+          defaultValue={phoneNumber || undefined}
+          className="border px-4 py-2 w-full flex-1 rounded-lg bg-primary text-primary"
+        />
+
+        <button className="border-2 px-4 py-2 rounded-lg flex-4 bg-secondary hover:bg-cyan-200">
+          call number
+        </button>
+      </form>
+    </div>
+  );
+};

src/ui/src/Apps/Calls/Latest/index.tsx

@@ -0,0 +1,11 @@
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { TopNavigation } from '../../../components/Navigation/TopNavigation';
+
+export const LatestView = () => {
+  return (
+    <div className="flex flex-col gap-2">
+      <TopNavigation title="Latest" />
+      <span>Latest goes here</span>
+    </div>
+  );
+};

src/ui/src/Apps/Calls/index.tsx

@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+import { Outlet } from 'react-router';
+import { Link } from 'react-router-dom';
+import { useLatestPath } from '../../hooks/useLatestPath';
+
+export const CallsApp = () => {
+  useEffect(() => {
+    document.title = 'Calls';
+  }, []);
+
+  /**
+   * Save the last visited path under /apps/calls to localStorage, so we can
+   * redirect the user to the last visited path when they return to the app.
+   *
+   * This is a common pattern in mobile apps, where the user is redirected to
+   * the last visited screen when they return to the app.
+   */
+  useLatestPath('/apps/calls');
+
+  return (
+    <div className="flex flex-col gap-2 flex-1 h-full overflow-hidden">
+      <section className="flex-1 overflow-auto">
+        <Outlet />
+      </section>
+
+      <div className="flex gap-2 justify-between mt-auto border-t p-4">
+        <Link to="/apps/calls/latest" className="p-4 bg-secondary rounded-lg">
+          Latest
+        </Link>
+        <Link to="/apps/calls/contacts" className="p-4 bg-secondary rounded-lg">
+          Contacts
+        </Link>
+        <Link to="/apps/calls/keypad" className="p-4 bg-secondary rounded-lg">
+          Keypad
+        </Link>
+      </div>
+    </div>
+  );
+};

src/ui/src/Router.tsx

@@ -1,7 +1,12 @@
 import { createHashRouter, Link } from 'react-router-dom';
 import { HomeView } from './views/Home';
-import { ContactsApp } from './apps/contacts';
+import { ContactsView } from './Apps/Calls/Contacts';
 import App from './App';
+import { CallsApp } from './Apps/Calls';
+import { ContactView } from './Apps/Calls/Contacts/Contact';
+import { Call } from './Apps/Calls/Call';
+import { KeypadView } from './Apps/Calls/Keypad';
+import { LatestView } from './Apps/Calls/Latest';
 
 export const router = createHashRouter([
   {
@@ -16,8 +21,30 @@ export const router = createHashRouter([
         path: 'apps',
         children: [
           {
-            path: 'contacts',
-            element: <ContactsApp />,
+            path: 'calls',
+            element: <CallsApp />,
+            children: [
+              {
+                path: 'call/:phoneNumber',
+                element: <Call />,
+              },
+              {
+                path: 'keypad',
+                element: <KeypadView />,
+              },
+              {
+                path: 'contacts',
+                element: <ContactsView />,
+              },
+              {
+                path: 'contacts/:contactId',
+                element: <ContactView />,
+              },
+              {
+                path: 'latest',
+                element: <LatestView />,
+              },
+            ],
           },
         ],
       },

src/ui/src/components/Main/Footer/index.tsx

@@ -0,0 +1,25 @@
+import { Link } from 'react-router-dom';
+import { setTheme } from '../../../utils/theme';
+import { darkTheme, lightTheme } from '../../../App';
+
+export const Footer = () => {
+  const toggleTheme = () => {
+    const rootElement = document.getElementById('root')!;
+    const currentTheme =
+      rootElement.style.getPropertyValue('--bg-primary') === lightTheme.backgroundColor.primary
+        ? darkTheme
+        : lightTheme;
+
+    setTheme(currentTheme);
+  };
+
+  return (
+    <footer className="h-8 bg-secondary text-secondary px-6 flex gap-4 items-center mt-auto">
+      <Link to="/home">Home</Link>
+
+      <button onClick={toggleTheme} className="rounded-lg bg-primary px-2">
+        toggle theme
+      </button>
+    </footer>
+  );
+};

src/ui/src/components/Main/Header/index.tsx

@@ -0,0 +1,7 @@
+export const Header = () => {
+  return (
+    <header className="h-8 bg-slate-400 text-secondary px-6 flex gap-4">
+      (This is the header)
+    </header>
+  );
+};