refactor: fix table and clean up auth code

packages/react-native-opentui/index.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { ViewProps, TextProps, PressableProps } from "react-native";
+import type { ViewProps, TextProps, PressableProps, ScrollViewProps } from "react-native";
 
 export function View({ children, style }: ViewProps) {
   const bg = style &&
@@ -20,8 +20,26 @@ export function View({ children, style }: ViewProps) {
     ? style.flex
     : undefined
     : undefined;
+  const flexShrink = style &&
+    'flexShrink' in style
+    ? typeof style.flexShrink == 'number'
+    ? style.flexShrink
+    : undefined
+    : undefined;
+  const overflow = style &&
+    'overflow' in style
+    ? typeof style.overflow == 'string'
+    ? style.overflow
+    : undefined
+    : undefined;
 
-  return <box backgroundColor={bg} flexDirection={flexDirection} flexGrow={flex}>{children}</box>
+  return <box
+    backgroundColor={bg}
+    flexDirection={flexDirection}
+    flexGrow={flex}
+    overflow={overflow}
+    flexShrink={flexShrink}
+  >{children}</box>
 }
 
 export function Pressable({ children: childrenRaw, style, onPress }: PressableProps) {
@@ -69,6 +87,10 @@ export function Text({ style, children }: TextProps) {
 
 }
 
+export function ScrollView({ children }: ScrollViewProps) {
+  return <scrollbox >{children}</scrollbox>
+}
+
 export const Platform = {
   OS: "tui",
 };

packages/ui/src/table.tsx

@@ -1,5 +1,5 @@
 import { createContext, use, useState, type ReactNode } from "react";
-import { View, Text } from "react-native";
+import { View, Text, ScrollView } from "react-native";
 import { useKeyboard } from "./useKeyboard";
 
 const HEADER_COLOR = '#7158e2';
@@ -94,15 +94,15 @@ export function Body() {
       <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)))
+        {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>
-        );
-      })}
+          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>
   )
 

packages/ui/src/transactions.tsx

@@ -2,7 +2,7 @@ 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";
+import { View, Text, ScrollView } from "react-native";
 import { RouterContext } from ".";
 
 
@@ -28,13 +28,15 @@ export function Transactions() {
   const [items] = useQuery(queries.allTransactions(auth));
 
   return (
-    <Table.Provider
-      data={items}
-      columns={COLUMNS} >
-        <Table.Body />
-        {/* Spacer */}
-        <View style={{ flex: 1 }} />
-      <Selected />
+    <Table.Provider data={items} columns={COLUMNS}>
+      <View style={{ flex: 1 }}>
+        <View style={{ flexShrink: 0}}>
+          <Table.Body />
+        </View>
+      </View>
+      <View style={{ flexShrink: 0 }}>
+        <Selected />
+      </View>
     </Table.Provider>
   )
 }