feat: pages

apps/expo/app/[...route].tsx

@@ -0,0 +1,30 @@
+import { useLocalSearchParams } from "expo-router";
+import { Text } from "react-native";
+import { App } from "@money/ui";
+import { useEffect, useState } from "react";
+
+export default function Page() {
+  const { route: initalRoute } = useLocalSearchParams<{ route: string[] }>();
+  const [route, setRoute] = useState(initalRoute[0]!);
+
+  // detect back/forward
+  useEffect(() => {
+    const handler = () => {
+      const newRoute = window.location.pathname.slice(1);
+      // call your app’s page change logic
+      setRoute(newRoute);
+    };
+
+    window.addEventListener("popstate", handler);
+    return () => window.removeEventListener("popstate", handler);
+  }, []);
+
+  return (
+    <App
+      page={route as any}
+      onPageChange={(page) => {
+        window.history.pushState({}, "", "/" + page);
+      }}
+    />
+  );
+}

apps/expo/app/_layout.tsx

@@ -44,8 +44,7 @@ export default function RootLayout() {
     <ZeroProvider {...zeroProps}>
       <Stack>
         <Stack.Protected guard={!isPending && !!session}>
-          <Stack.Screen name="index" options={{ headerShown: false }} />
+          <Stack.Screen name="[...route]" options={{ headerShown: false }} />
-          <Stack.Screen name="settings" options={{ headerShown: false }} />
         </Stack.Protected>
         <Stack.Protected guard={!isPending && !session}>
           <Stack.Screen name="auth" />

apps/expo/app/index.web.tsx

@@ -1,98 +0,0 @@
-import { authClient } from '@/lib/auth-client';
-import { Button, Image, Platform, Pressable, ScrollView, Text, View } from 'react-native';
-import { useQuery, useZero } from "@rocicorp/zero/react";
-import { queries, type Mutators, type Schema } from '@money/shared';
-import { useEffect, useState } from 'react';
-import { Link } from 'expo-router';
-import Header from '@/components/Header';
-
-export default function HomeScreen() {
-  const { data: session } = authClient.useSession();
-
-  const z = useZero<Schema, Mutators>();
-  const [transactions] = useQuery(queries.allTransactions(session));
-  const [balances] = useQuery(queries.getBalances(session));
-
-  const [idx, setIdx] = useState(0);
-  const [accountIdx, setAccountIdx] = useState(0);
-
-  const account = balances.at(accountIdx)!;
-
-  const filteredTransactions = transactions
-    .filter(t => t.account_id == account.plaid_id)
-
-  useEffect(() => {
-    if (Platform.OS != 'web') return;
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "j") {
-        setIdx((prevIdx) => {
-          if (prevIdx + 1 == filteredTransactions.length) return prevIdx;
-          return prevIdx + 1
-        });
-      } else if (event.key === "k") {
-        setIdx((prevIdx) => prevIdx == 0 ? 0 : prevIdx - 1);
-      } else if (event.key == 'g') {
-        setIdx(0);
-      } else if (event.key == "G") {
-        setIdx(transactions.length - 1);
-      } else if (event.key == 'R') {
-        z.mutate.link.updateTransactions();
-        z.mutate.link.updateBalences();
-      } else if (event.key == 'h') {
-        setAccountIdx((prevIdx) => prevIdx == 0 ? 0 : prevIdx - 1);
-      } else if (event.key == 'l') {
-        setAccountIdx((prevIdx) => {
-          if (prevIdx + 1 == balances.length) return prevIdx;
-          return prevIdx + 1
-        });
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [filteredTransactions, balances]);
-
-  function lpad(n: number): string {
-    const LEN = 9;
-    const nstr = n.toFixed(2).toLocaleString();
-    return Array.from({ length: LEN - nstr.length }).join(" ") + nstr;
-  }
-
-  function uuu(t: typeof filteredTransactions[number]): string | undefined {
-    if (!t.json) return;
-    const j = JSON.parse(t.json);
-    return j.counterparties.filter((c: any) => !!c.logo_url).at(0)?.logo_url || j.personal_finance_category_icon_url;
-  }
-
-  return (
-    <View>
-      <Header />
-      <View style={{ flexDirection: "row" }}>
-        <View style={{ backgroundColor: '' }}>
-          {balances.map((bal, i) => <View key={bal.id} style={{ backgroundColor: i == accountIdx ? 'black' : undefined}}>
-            <Text style={{ fontFamily: 'mono', color: i == accountIdx ? 'white' : undefined  }}>{bal.name}: {bal.current} ({bal.avaliable})</Text>
-          </View>)}
-        </View>
-
-        <View>
-          {filteredTransactions.map((t, i) => <Pressable onHoverIn={() => {
-            setIdx(i);
-          }} style={{ backgroundColor: i == idx ? 'black' : undefined, cursor: 'default' as 'auto' }} key={t.id}>
-            <Text style={{ fontFamily: 'mono', color: i == idx ? 'white' : undefined }}>
-              {new Date(t.datetime!).toDateString()}
-              <Text style={{ color: t.amount > 0 ? 'red' : 'green' }}> {lpad(t.amount)}</Text>
-              <Image style={{ width: 15, height: 15, marginHorizontal: 10 }} source={{ uri: uuu(t) || "" }} />
-              {t.name.substring(0, 50)}
-            </Text>
-          </Pressable>)}
-        </View>
-        <ScrollView>
-          <Text style={{ fontFamily: 'mono' }}>{JSON.stringify(JSON.parse(filteredTransactions.at(idx)?.json || "null"), null, 4)}</Text>
-        </ScrollView>
-      </View>
-    </View>
-  );
-}

apps/expo/app/settings.tsx

@@ -1,14 +0,0 @@
-import { SafeAreaView } from 'react-native-safe-area-context';
-import Header from '@/components/Header';
-
-import { Settings } from "@money/ui";
-
-export default function HomeScreen() {
-  return (
-    <SafeAreaView>
-      <Header />
-      <Settings />
-    </SafeAreaView>
-  );
-}
-

apps/tui/src/index.tsx

@@ -1,6 +1,6 @@
 import { RGBA, TextAttributes, createCliRenderer } from "@opentui/core";
 import { createRoot } from "@opentui/react";
-import { Settings } from "@money/ui";
+import { App } from "@money/ui";
 import { ZeroProvider } from "@rocicorp/zero/react";
 import { schema } from '@money/shared';
 
@@ -11,7 +11,7 @@ const auth = undefined;
 function Main() {
   return (
     <ZeroProvider {...{ userID, auth, server, schema }}>
-      <Settings />
+      <App />
     </ZeroProvider>
   );
 }

packages/react-native-opentui/index.tsx

@@ -14,8 +14,14 @@ export function View({ children, style }: ViewProps) {
     ? style.flexDirection
     : undefined
     : undefined;
+  const flex = style &&
+    'flex' in style
+    ? typeof style.flex == 'number'
+    ? style.flex
+    : undefined
+    : undefined;
 
-  return <box backgroundColor={bg} flexDirection={flexDirection}>{children}</box>
+  return <box backgroundColor={bg} flexDirection={flexDirection} flexGrow={flex}>{children}</box>
 
 }
 

packages/ui/src/index.tsx

@@ -1,29 +1,31 @@
-import { Table, type Column } from "./table";
+import { useState } from "react";
-import { useQuery } from "@rocicorp/zero/react";
+import { Transactions } from "./transactions";
-import { queries } from '@money/shared';
+import { Text } from "react-native";
+import { Settings } from "./settings";
+import { useKeyboard } from "./useKeyboard";
 
-
+type Page = "transactions" | "settings";
-export type Account = {
+type AppProps = {
-  name: string;
+  page?: Page;
-  createdAt: number;
+  onPageChange?: (page: Page) => void;
 }
 
-const COLUMNS: Column[] = [
+export function App({ page, onPageChange }: AppProps) {
-  { name: 'createdAt', label: 'Created At', render: (n) => new Date(n).toDateString() },
+  const [curr, setPage] = useState<Page>(page || "transactions");
-  { name: 'amount', label: 'Amount' },
-  { name: 'name', label: 'Name' },
-];
 
+  useKeyboard((key) => {
+    if (key.name == "1") {
+      setPage("transactions");
+      if (onPageChange)
+      onPageChange("transactions");
+    } else if (key.name == "2") {
+      setPage("settings");
+      if (onPageChange)
+      onPageChange("settings");
+    }
+  });
 
-export function Settings() {
+  return curr == "transactions" ? <Transactions /> : <Settings />;
-  const [items] = useQuery(queries.allTransactions(null));
-
-  return (
-    <Table
-      data={items}
-      columns={COLUMNS}
-    />
-  )
 }
 
 

packages/ui/src/settings.tsx

@@ -0,0 +1,5 @@
+import { Text } from "react-native";
+
+export function Settings() {
+  return <Text>Settings</Text>;
+}

packages/ui/src/table.tsx

@@ -4,8 +4,8 @@ import { useKeyboard } from "./useKeyboard";
 
 const HEADER_COLOR = '#7158e2';
 const TABLE_COLORS = [
-  '#3c3c3c',
+  '#ddd',
-  '#4b4b4b'
+  '#eee'
 ];
 const SELECTED_COLOR = '#f7b730';
 
@@ -14,16 +14,28 @@ const EXTRA = 5;
 
 export type ValidRecord = Record<string, string | number | null>;
 
-const TableContext = createContext<{ data: unknown[], columns: Column[], columnMap: Map<string, number> }>({
+interface TableState {
+  data: unknown[];
+  columns: Column[];
+  columnMap: Map<string, number>;
+  idx: number;
+  selectedFrom: number | undefined;
+};
+
+
+const INITAL_STATE = {
   data: [],
   columns: [],
   columnMap: new Map(),
-}); 
+  idx: 0,
+  selectedFrom: undefined,
+} satisfies TableState;
+
+export const Context = createContext<TableState>(INITAL_STATE); 
 
 export type Column = { name: string, label: string, render?: (i: number | string) => string };
 
 
-
 function renderCell(row: ValidRecord, column: Column): string {
   const cell = row[column.name];
   if (cell == undefined) return 'n/a';
@@ -33,11 +45,12 @@ function renderCell(row: ValidRecord, column: Column): string {
 }
 
 
-export interface TableProps<T> {
+export interface ProviderProps<T> {
   data: T[];
   columns: Column[];
+  children: ReactNode;
 };
-export function Table<T extends ValidRecord>({ data, columns }: TableProps<T>) {
+export function Provider<T extends ValidRecord>({ data, columns, children }: ProviderProps<T>) {
   const [idx, setIdx] = useState(0);
   const [selectedFrom, setSelectedFrom] = useState<number>();
 
@@ -68,38 +81,46 @@ export function Table<T extends ValidRecord>({ data, columns }: TableProps<T>) {
 
 
   return (
-    <TableContext.Provider value={{ data, columns, columnMap }}>
+    <Context.Provider value={{ data, columns, columnMap, idx, selectedFrom }}>
-      <View>
+      {children}
-        <View style={{ backgroundColor: HEADER_COLOR, flexDirection: 'row' }}>
+    </Context.Provider>
-          {columns.map(column => <Text key={column.name} style={{ fontFamily: 'mono', color: 'white' }}>{rpad(column.label, columnMap.get(column.name)! - column.label.length + EXTRA)}</Text>)}
-        </View>
-        {data.map((row, index) => {
-          const isSelected = index == idx || (selectedFrom != undefined && ((selectedFrom <= index && index <= idx) || (idx <= index && index <= selectedFrom)))
-
-          return (
-            <View key={index} style={{ backgroundColor: isSelected ? SELECTED_COLOR : TABLE_COLORS[index % 2] }}>
-              <TableRow key={index} row={row} index={index} isSelected={isSelected} />
-            </View>
-          );
-        })}
-      </View>
-    </TableContext.Provider>
   );
 }
 
+export function Body() {
+  const { columns, data, columnMap, idx, selectedFrom } = use(Context);
+  return (
+    <View>
+      <View style={{ backgroundColor: HEADER_COLOR, flexDirection: 'row' }}>
+        {columns.map(column => <Text key={column.name} style={{ fontFamily: 'mono', color: 'white' }}>{rpad(column.label, columnMap.get(column.name)! - column.label.length + EXTRA)}</Text>)}
+      </View>
+      {data.map((row, index) => {
+        const isSelected = index == idx || (selectedFrom != undefined && ((selectedFrom <= index && index <= idx) || (idx <= index && index <= selectedFrom)))
+
+        return (
+          <View key={index} style={{ backgroundColor: isSelected ? SELECTED_COLOR : TABLE_COLORS[index % 2] }}>
+            <TableRow key={index} row={row as ValidRecord} index={index} isSelected={isSelected} />
+          </View>
+        );
+      })}
+    </View>
+  )
+
+}
+
 interface RowProps<T> {
   row: T;
   index: number;
   isSelected: boolean;
 }
 function TableRow<T extends ValidRecord>({ row, isSelected }: RowProps<T>) {
-  const { data, columns, columnMap } = use(TableContext);
+  const { data, columns, columnMap } = use(Context);
 
 
   return <View style={{ flexDirection: 'row' }}>
     {columns.map(column => {
       const rendered = renderCell(row, column);
-      return <Text key={column.name} style={{ fontFamily: 'mono', color: isSelected ? 'black' : 'white' }}>{rpad(rendered, columnMap.get(column.name)! - rendered.length + EXTRA)}</Text>;
+      return <Text key={column.name} style={{ fontFamily: 'mono', color: isSelected ? 'black' : 'black' }}>{rpad(rendered, columnMap.get(column.name)! - rendered.length + EXTRA)}</Text>;
     })}
   </View>
 }

packages/ui/src/transactions.tsx

@@ -0,0 +1,63 @@
+import * as Table from "./table";
+import { useQuery } from "@rocicorp/zero/react";
+import { queries, type Transaction } from '@money/shared';
+import { use } from "react";
+import { View, Text } from "react-native";
+
+
+const FORMAT = new Intl.NumberFormat("en-US", {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+
+export type Account = {
+  name: string;
+  createdAt: number;
+}
+
+const COLUMNS: Table.Column[] = [
+  { name: 'createdAt', label: 'Date', render: (n) => new Date(n).toDateString() },
+  { name: 'amount', label: 'Amount' },
+  { name: 'name', label: 'Name' },
+];
+
+
+export function Transactions() {
+  const [items] = useQuery(queries.allTransactions(null));
+
+  return (
+    <Table.Provider
+      data={items}
+      columns={COLUMNS} >
+        <Table.Body />
+        {/* Spacer */}
+        <View style={{ flex: 1 }} />
+      <Selected />
+    </Table.Provider>
+  )
+}
+
+function Selected() {
+  const { data, idx, selectedFrom } = use(Table.Context);
+
+  if (selectedFrom == undefined)
+  return (
+    <View style={{ backgroundColor: '#ddd' }}>
+      <Text style={{ fontFamily: 'mono' }}>No items selected</Text>
+    </View>
+  );
+
+  const from = Math.min(idx, selectedFrom);
+  const to = Math.max(idx, selectedFrom);
+  const selected = data.slice(from, to + 1) as Transaction[];
+  const count = selected.length;
+  const sum = selected.reduce((prev, curr) => prev + curr.amount, 0);
+
+  return (
+    <View style={{ backgroundColor: '#9f9' }}>
+      <Text style={{ fontFamily: 'mono' }}>{count} transaction{count == 1 ? "" : "s"} selected | ${FORMAT.format(sum)}</Text>
+    </View>
+  );
+}
+
+