refactor: move to bun

feat: add plaid sync
feat: add scoped shortcuts
2025-12-26 13:53:42 -05:00 · 2025-12-15 12:53:35 -05:00 · 2025-12-12 18:44:18 -05:00 · 2025-12-06 23:02:28 -05:00 · 2025-12-05 17:05:23 -05:00
40 changed files with 4775 additions and 16413 deletions
--- a/apps/api/package.json
+++ b/apps/api/package.json
@@ -8,7 +8,7 @@
  },
  "dependencies": {
    "@hono/node-server": "^1.19.5",
-    "@money/shared": "workspace:*",
+    "@money/shared": "*",
    "better-auth": "^1.3.27",
    "hono": "^4.9.12",
    "plaid": "^39.0.0",
--- a/apps/api/src/plaid/sync.ts
+++ b/apps/api/src/plaid/sync.ts
@@ -0,0 +1,3 @@
+async function sync() {}
+
+sync();
--- a/apps/api/src/plaid/tx.ts
+++ b/apps/api/src/plaid/tx.ts
@@ -0,0 +1,23 @@
+import type { transaction } from "@money/shared/db";
+import type { Transaction } from "plaid";
+import { type InferInsertModel } from "drizzle-orm";
+import { randomUUID } from "crypto";
+
+export function transactionFromPlaid(
+  userId: string,
+  tx: Transaction,
+): InferInsertModel<typeof transaction> {
+  return {
+    id: randomUUID(),
+    user_id: userId,
+    plaid_id: tx.transaction_id,
+    account_id: tx.account_id,
+    name: tx.name,
+    amount: tx.amount as any,
+    datetime: tx.datetime ? new Date(tx.datetime) : new Date(tx.date),
+    authorized_datetime: tx.authorized_datetime
+      ? new Date(tx.authorized_datetime)
+      : undefined,
+    json: JSON.stringify(tx),
+  };
+}
--- a/apps/api/src/zero.ts
+++ b/apps/api/src/zero.ts
@@ -26,6 +26,8 @@ import {
  PlaidApi,
  PlaidEnvironments,
  Products,
+  SandboxItemFireWebhookRequestWebhookCodeEnum,
+  WebhookType,
 } from "plaid";
 import { randomUUID } from "crypto";
 import { db } from "./db";
@@ -35,8 +37,16 @@ import {
  plaidLink,
  transaction,
 } from "@money/shared/db";
-import { and, eq, inArray, sql, type InferInsertModel } from "drizzle-orm";
+import {
+  and,
+  eq,
+  inArray,
+  sql,
+  type InferInsertModel,
+  type InferSelectModel,
+} from "drizzle-orm";
 import { plaidClient } from "./plaid";
+import { transactionFromPlaid } from "./plaid/tx";

 const processor = new PushProcessor(
  new ZQLDatabase(
@@ -128,9 +138,9 @@ const createMutators = (authData: AuthData | null) => {
          throw Error("Plaid error");
        }
      },
-
-      async updateTransactions() {
+      async webhook() {
        isLoggedIn(authData);
+
        const accounts = await db.query.plaidAccessTokens.findMany({
          where: eq(plaidAccessTokens.userId, authData.user.id),
        });
@@ -139,51 +149,20 @@ const createMutators = (authData: AuthData | null) => {
          return;
        }

-        for (const account of accounts) {
-          const { data } = await plaidClient.transactionsGet({
-            access_token: account.token,
-            start_date: "2025-10-01",
-            end_date: new Date().toISOString().split("T")[0],
-          });
+        const account = accounts.at(0)!;

-          const transactions = data.transactions.map(
-            (tx) =>
-              ({
-                id: randomUUID(),
-                user_id: authData.user.id,
-                plaid_id: tx.transaction_id,
-                account_id: tx.account_id,
-                name: tx.name,
-                amount: tx.amount as any,
-                datetime: tx.datetime
-                  ? new Date(tx.datetime)
-                  : new Date(tx.date),
-                authorized_datetime: tx.authorized_datetime
-                  ? new Date(tx.authorized_datetime)
-                  : undefined,
-                json: JSON.stringify(tx),
-              }) satisfies InferInsertModel<typeof transaction>,
-          );
+        const { data } = await plaidClient.sandboxItemFireWebhook({
+          access_token: account.token,
+          webhook_type: WebhookType.Transactions,
+          webhook_code:
+            SandboxItemFireWebhookRequestWebhookCodeEnum.DefaultUpdate,
+        });

-          await db
-            .insert(transaction)
-            .values(transactions)
-            .onConflictDoNothing({
-              target: transaction.plaid_id,
-            });
-
-          const txReplacingPendingIds = data.transactions
-            .filter((t) => t.pending_transaction_id)
-            .map((t) => t.pending_transaction_id!);
-
-          await db
-            .delete(transaction)
-            .where(inArray(transaction.plaid_id, txReplacingPendingIds));
-        }
+        console.log(data);
      },
-
-      async updateBalences() {
+      async sync() {
        isLoggedIn(authData);
+
        const accounts = await db.query.plaidAccessTokens.findMany({
          where: eq(plaidAccessTokens.userId, authData.user.id),
        });
@@ -192,32 +171,150 @@ const createMutators = (authData: AuthData | null) => {
          return;
        }

-        for (const account of accounts) {
-          const { data } = await plaidClient.accountsBalanceGet({
-            access_token: account.token,
-          });
-          await db
-            .insert(balance)
-            .values(
-              data.accounts.map((bal) => ({
-                id: randomUUID(),
-                user_id: authData.user.id,
-                plaid_id: bal.account_id,
-                avaliable: bal.balances.available as any,
-                current: bal.balances.current as any,
-                name: bal.name,
-                tokenId: account.id,
-              })),
-            )
-            .onConflictDoUpdate({
-              target: balance.plaid_id,
-              set: {
-                current: sql.raw(`excluded.${balance.current.name}`),
-                avaliable: sql.raw(`excluded.${balance.avaliable.name}`),
-              },
-            });
-        }
+        const account = accounts.at(0)!;
+
+        const { data } = await plaidClient.transactionsSync({
+          access_token: account.token,
+          cursor: account.syncCursor || undefined,
+        });
+
+        const added = data.added.map((tx) =>
+          transactionFromPlaid(authData.user.id, tx),
+        );
+
+        const updated = data.modified.map((tx) =>
+          transactionFromPlaid(authData.user.id, tx),
+        );
+
+        console.log("added", added.length);
+        console.log("updated", updated.length);
+        console.log("removed", data.removed.length);
+        console.log("next cursor", data.next_cursor);
+
+        await db.transaction(async (tx) => {
+          if (added.length) {
+            await tx.insert(transaction).values(added);
+          }
+
+          if (updated.length) {
+            await tx
+              .insert(transaction)
+              .values(updated)
+              .onConflictDoUpdate({
+                target: transaction.plaid_id,
+                set: {
+                  name: sql.raw(`excluded.${transaction.name.name}`),
+                  amount: sql.raw(`excluded.${transaction.amount.name}`),
+                  json: sql.raw(`excluded.${transaction.json.name}`),
+                },
+              });
+          }
+
+          if (data.removed.length) {
+            await tx.delete(transaction).where(
+              inArray(
+                transaction.id,
+                data.removed.map((tx) => tx.transaction_id),
+              ),
+            );
+          }
+
+          await tx
+            .update(plaidAccessTokens)
+            .set({ syncCursor: data.next_cursor })
+            .where(eq(plaidAccessTokens.id, account.id));
+        });
      },
+
+      // async updateTransactions() {
+      //   isLoggedIn(authData);
+      //   const accounts = await db.query.plaidAccessTokens.findMany({
+      //     where: eq(plaidAccessTokens.userId, authData.user.id),
+      //   });
+      //   if (accounts.length == 0) {
+      //     console.error("No accounts");
+      //     return;
+      //   }
+      //
+      //   for (const account of accounts) {
+      //     const { data } = await plaidClient.transactionsGet({
+      //       access_token: account.token,
+      //       start_date: "2025-10-01",
+      //       end_date: new Date().toISOString().split("T")[0],
+      //     });
+      //
+      //     const transactions = data.transactions.map(
+      //       (tx) =>
+      //         ({
+      //           id: randomUUID(),
+      //           user_id: authData.user.id,
+      //           plaid_id: tx.transaction_id,
+      //           account_id: tx.account_id,
+      //           name: tx.name,
+      //           amount: tx.amount as any,
+      //           datetime: tx.datetime
+      //             ? new Date(tx.datetime)
+      //             : new Date(tx.date),
+      //           authorized_datetime: tx.authorized_datetime
+      //             ? new Date(tx.authorized_datetime)
+      //             : undefined,
+      //           json: JSON.stringify(tx),
+      //         }) satisfies InferInsertModel<typeof transaction>,
+      //     );
+      //
+      //     await db
+      //       .insert(transaction)
+      //       .values(transactions)
+      //       .onConflictDoNothing({
+      //         target: transaction.plaid_id,
+      //       });
+      //
+      //     const txReplacingPendingIds = data.transactions
+      //       .filter((t) => t.pending_transaction_id)
+      //       .map((t) => t.pending_transaction_id!);
+      //
+      //     await db
+      //       .delete(transaction)
+      //       .where(inArray(transaction.plaid_id, txReplacingPendingIds));
+      //   }
+      // },
+      //
+      // async updateBalences() {
+      //   isLoggedIn(authData);
+      //   const accounts = await db.query.plaidAccessTokens.findMany({
+      //     where: eq(plaidAccessTokens.userId, authData.user.id),
+      //   });
+      //   if (accounts.length == 0) {
+      //     console.error("No accounts");
+      //     return;
+      //   }
+      //
+      //   for (const account of accounts) {
+      //     const { data } = await plaidClient.accountsBalanceGet({
+      //       access_token: account.token,
+      //     });
+      //     await db
+      //       .insert(balance)
+      //       .values(
+      //         data.accounts.map((bal) => ({
+      //           id: randomUUID(),
+      //           user_id: authData.user.id,
+      //           plaid_id: bal.account_id,
+      //           avaliable: bal.balances.available as any,
+      //           current: bal.balances.current as any,
+      //           name: bal.name,
+      //           tokenId: account.id,
+      //         })),
+      //       )
+      //       .onConflictDoUpdate({
+      //         target: balance.plaid_id,
+      //         set: {
+      //           current: sql.raw(`excluded.${balance.current.name}`),
+      //           avaliable: sql.raw(`excluded.${balance.avaliable.name}`),
+      //         },
+      //       });
+      //   }
+      // },
    },
  } as const satisfies Mutators;
 };
--- a/apps/expo/app.json
+++ b/apps/expo/app.json
@@ -38,7 +38,8 @@
          }
        }
      ],
-      "expo-sqlite"
+      "expo-sqlite",
+      "expo-secure-store"
    ],
    "experiments": {
      "typedRoutes": true,
--- a/apps/expo/app/[...route].tsx
+++ b/apps/expo/app/[...route].tsx
@@ -13,7 +13,7 @@ export default function Page() {

  useEffect(() => {
    const handler = () => {
-      const newRoute = window.location.pathname.slice(1);
+      const newRoute = window.location.pathname.slice(1) + "/";
      setRoute(newRoute);
    };

--- a/apps/expo/package.json
+++ b/apps/expo/package.json
@@ -10,14 +10,14 @@
    "web": "expo start --web",
    "build": "expo export --platform web",
    "lint": "expo lint",
-    "db:migrate": "dotenv -- pnpm run --dir=shared db:migrate",
-    "db:gen": "dotenv -- pnpm run --dir=shared generate:zero"
+    "db:migrate": "dotenv -- bun run --dir=shared db:migrate",
+    "db:gen": "dotenv -- bun run --dir=shared generate:zero"
  },
  "dependencies": {
    "@better-auth/expo": "^1.3.27",
    "@expo/vector-icons": "^15.0.2",
-    "@money/shared": "workspace:*",
-    "@money/ui": "workspace:*",
+    "@money/shared": "*",
+    "@money/ui": "*",
    "@react-navigation/bottom-tabs": "^7.4.0",
    "@react-navigation/elements": "^2.6.3",
    "@react-navigation/native": "^7.1.8",
@@ -31,7 +31,9 @@
    "expo-haptics": "~15.0.7",
    "expo-image": "~3.0.9",
    "expo-linking": "~8.0.8",
+    "expo-network": "~8.0.8",
    "expo-router": "~6.0.11",
+    "expo-secure-store": "~15.0.8",
    "expo-splash-screen": "~31.0.10",
    "expo-sqlite": "~16.0.8",
    "expo-status-bar": "~3.0.8",
--- a/apps/tui/src/index.tsx
+++ b/apps/tui/src/index.tsx
@@ -1,8 +1,8 @@
 import { createCliRenderer } from "@opentui/core";
-import { createRoot, useKeyboard } from "@opentui/react";
+import { createRoot, useKeyboard, useRenderer } from "@opentui/react";
 import { App, type Route } from "@money/ui";
 import { ZeroProvider } from "@rocicorp/zero/react";
-import { schema } from "@money/shared";
+import { schema, createMutators } from "@money/shared";
 import { useState } from "react";
 import { AuthClientLayer, getAuth } from "./auth";
 import { Effect } from "effect";
@@ -13,24 +13,14 @@ import { config } from "./config";

 function Main({ auth }: { auth: AuthData }) {
  const [route, setRoute] = useState<Route>("/");
+  const renderer = useRenderer();

  useKeyboard((key) => {
    if (key.name == "c" && key.ctrl) process.exit(0);
+    if (key.name == "i" && key.meta) renderer.console.toggle();
  });

-  return (
-    <ZeroProvider
-      {...{
-        userID: auth.user.id,
-        auth: auth.session.token,
-        server: config.zeroUrl,
-        schema,
-        kvStore,
-      }}
-    >
-      <App auth={auth} route={route} setRoute={setRoute} />
-    </ZeroProvider>
-  );
+  return <App auth={auth} route={route} setRoute={setRoute} />;
 }

 const auth = await Effect.runPromise(
@@ -40,4 +30,17 @@ const auth = await Effect.runPromise(
  ),
 );
 const renderer = await createCliRenderer({ exitOnCtrlC: false });
-createRoot(renderer).render(<Main auth={auth} />);
+createRoot(renderer).render(
+  <ZeroProvider
+    {...{
+      userID: auth.user.id,
+      auth: auth.session.token,
+      server: config.zeroUrl,
+      schema,
+      mutators: createMutators(auth),
+      kvStore,
+    }}
+  >
+    <Main auth={auth} />
+  </ZeroProvider>,
+);
--- a/bun.lock
+++ b/bun.lock
--- a/package.json
+++ b/package.json
@@ -3,16 +3,14 @@
  "private": true,
  "scripts": {
    "dev": "process-compose up -p 0",
-    "tui": "bun run --hot apps/tui/src/index.tsx"
+    "tui": "bun --filter=@money/tui run build && bun --filter=@money/tui run start",
+    "db:gen": "bun --filter=@money/shared db:gen",
+    "db:push": "bun --filter=@money/shared db:push"
  },
-  "pnpm": {
-    "onlyBuiltDependencies": [
-      "@rocicorp/zero-sqlite3"
-    ],
-    "ignoredBuiltDependencies": [
-      "esbuild",
-      "protobufjs",
-      "unrs-resolver"
-    ]
-  }
+  "workspaces": ["apps/*", "packages/*"],
+  "trustedDependencies": [
+    "@rocicorp/zero-sqlite3",
+    "protobufjs",
+    "unrs-resolver"
+  ]
 }
--- a/packages/react-native-opentui/index.tsx
+++ b/packages/react-native-opentui/index.tsx
@@ -8,9 +8,10 @@ import type {
  StyleProp,
  ViewStyle,
  LinkingImpl,
+  TextInputProps,
 } from "react-native";
 import { useTerminalDimensions } from "@opentui/react";
-import { RGBA } from "@opentui/core";
+import { BorderSides, RGBA } from "@opentui/core";
 import { platform } from "node:os";
 import { exec } from "node:child_process";

@@ -65,6 +66,27 @@ export function View({ children, style }: ViewProps) {
      : undefined;

  const padding = attr(style, "padding", "number");
+  const paddingTop = attr(style, "paddingTop", "number");
+  const paddingLeft = attr(style, "paddingLeft", "number");
+  const paddingBottom = attr(style, "paddingBottom", "number");
+  const paddingRight = attr(style, "paddingRight", "number");
+  const gap = attr(style, "gap", "number");
+
+  const borderBottomWidth = attr(style, "borderBottomWidth", "number");
+  const borderTopWidth = attr(style, "borderTopWidth", "number");
+  const borderLeftWidth = attr(style, "borderLeftWidth", "number");
+  const borderRightWidth = attr(style, "borderRightWidth", "number");
+
+  const borderBottomColor = attr(style, "borderBottomColor", "string");
+  const borderTopColor = attr(style, "borderTopColor", "string");
+  const borderLeftColor = attr(style, "borderLeftColor", "string");
+  const borderRightColor = attr(style, "borderRightColor", "string");
+
+  const borderColor = attr(style, "borderColor", "string");
+
+  const top = attr(style, "top", "number");
+
+  const width = attr(style, "width", "number");

  const props = {
    overflow: attr(style, "overflow", "string"),
@@ -74,17 +96,48 @@ export function View({ children, style }: ViewProps) {
    justifyContent: attr(style, "justifyContent", "string"),
    flexShrink: attr(style, "flexShrink", "number"),
    flexDirection: attr(style, "flexDirection", "string"),
+    zIndex: attr(style, "zIndex", "number"),
+    left: attr(style, "left", "number"),
+    right: attr(style, "right", "number"),
+    bottom: attr(style, "bottom", "number"),
    flexGrow:
      attr(style, "flex", "number") || attr(style, "flexGrow", "number"),
  };

+  const border = (() => {
+    const sides: BorderSides[] = [];
+    if (borderBottomWidth) sides.push("bottom");
+    if (borderTopWidth) sides.push("top");
+    if (borderLeftWidth) sides.push("left");
+    if (borderRightWidth) sides.push("right");
+    if (!sides.length) return undefined;
+    return sides;
+  })();
+
  return (
    <box
      backgroundColor={bg}
-      paddingTop={padding && Math.round(padding / RATIO_HEIGHT)}
-      paddingBottom={padding && Math.round(padding / RATIO_HEIGHT)}
-      paddingLeft={padding && Math.round(padding / RATIO_WIDTH)}
-      paddingRight={padding && Math.round(padding / RATIO_WIDTH)}
+      paddingTop={
+        (paddingTop && Math.round(paddingTop / RATIO_HEIGHT)) ||
+        (padding && Math.round(padding / RATIO_HEIGHT))
+      }
+      paddingBottom={
+        (paddingBottom && Math.round(paddingBottom / RATIO_HEIGHT)) ||
+        (padding && Math.round(padding / RATIO_HEIGHT))
+      }
+      paddingLeft={
+        (paddingLeft && Math.round(paddingLeft / RATIO_WIDTH)) ||
+        (padding && Math.round(padding / RATIO_WIDTH))
+      }
+      paddingRight={
+        (paddingRight && Math.round(paddingRight / RATIO_WIDTH)) ||
+        (padding && Math.round(padding / RATIO_WIDTH))
+      }
+      gap={gap && Math.round(gap / RATIO_HEIGHT)}
+      border={border}
+      borderColor={borderColor}
+      width={width && Math.round(width / RATIO_WIDTH)}
+      top={top && Math.round(top / RATIO_HEIGHT)}
      {...props}
    >
      {children}
@@ -221,6 +274,33 @@ export function Modal({ children, visible }: ModalProps) {
  );
 }

+export function TextInput({
+  defaultValue,
+  onChangeText,
+  onKeyPress,
+}: TextInputProps) {
+  return (
+    <input
+      minWidth={20}
+      minHeight={1}
+      backgroundColor="white"
+      textColor="black"
+      focused={true}
+      cursorColor={"black"}
+      onInput={onChangeText}
+      onKeyDown={(key) =>
+        // @ts-ignore
+        onKeyPress({
+          nativeEvent: {
+            key: key.name == "return" ? "Enter" : key.name,
+          },
+        })
+      }
+      placeholder={defaultValue}
+    />
+  );
+}
+
 export const Platform = {
  OS: "tui",
 };
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -13,6 +13,6 @@
  },
  "scripts": {
    "db:gen": "drizzle-zero generate -s ./src/db/schema/public.ts -o ./src/zero-schema.gen.ts -f && sed -i 's/enableLegacyQueries: true,/enableLegacyQueries: false,/g' src/zero-schema.gen.ts && sed -i 's/enableLegacyMutators: true,/enableLegacyMutators: false,/g' src/zero-schema.gen.ts",
-    "db:migrate": "drizzle-kit push"
+    "db:push": "drizzle-kit push"
  }
 }
--- a/packages/shared/src/db/schema/public.ts
+++ b/packages/shared/src/db/schema/public.ts
@@ -1,3 +1,4 @@
+import { relations } from "drizzle-orm";
 import {
  boolean,
  decimal,
@@ -6,6 +7,7 @@ import {
  timestamp,
  pgEnum,
  uniqueIndex,
+  numeric,
 } from "drizzle-orm/pg-core";

 export const users = pgTable(
@@ -63,5 +65,41 @@ export const plaidAccessTokens = pgTable("plaidAccessToken", {
  logoUrl: text("logoUrl").notNull(),
  userId: text("user_id").notNull(),
  token: text("token").notNull(),
+  syncCursor: text("sync_cursor"),
  createdAt: timestamp("created_at").notNull().defaultNow(),
 });
+
+export const budget = pgTable("budget", {
+  id: text("id").primaryKey(),
+  orgId: text("org_id").notNull(),
+  label: text("label").notNull(),
+  createdBy: text("created_by").notNull(),
+  createdAt: timestamp("created_at").notNull().defaultNow(),
+  updatedAt: timestamp("updated_at").notNull().defaultNow(),
+});
+
+export const category = pgTable("category", {
+  id: text("id").primaryKey(),
+  budgetId: text("budget_id").notNull(),
+  amount: decimal("amount").notNull(),
+  every: text("every", { enum: ["year", "month", "week"] }).notNull(),
+  order: numeric("order").notNull(),
+  label: text("label").notNull(),
+  color: text("color").notNull(),
+  createdBy: text("created_by").notNull(),
+  createdAt: timestamp("created_at").notNull().defaultNow(),
+  updatedAt: timestamp("updated_at").notNull().defaultNow(),
+  removedBy: text("removed_by"),
+  removedAt: timestamp("removed_at"),
+});
+
+export const budgetRelations = relations(budget, ({ many }) => ({
+  categories: many(category),
+}));
+
+export const categoryRelations = relations(category, ({ one }) => ({
+  budget: one(budget, {
+    fields: [category.budgetId],
+    references: [budget.id],
+  }),
+}));
--- a/packages/shared/src/mutators.ts
+++ b/packages/shared/src/mutators.ts
@@ -1,6 +1,6 @@
 import type { Transaction } from "@rocicorp/zero";
-import type { AuthData } from "./auth";
-import { type Schema } from "./zero-schema.gen";
+import { authDataSchema, type AuthData } from "./auth";
+import { type Category, type Schema } from "./zero-schema.gen";
 import { isLoggedIn } from "./zql";

 type Tx = Transaction<Schema>;
@@ -10,8 +10,10 @@ export function createMutators(authData: AuthData | null) {
    link: {
      async create() {},
      async get(tx: Tx, { link_token }: { link_token: string }) {},
-      async updateTransactions() {},
-      async updateBalences() {},
+      async webhook() {},
+      async sync() {},
+      // async updateTransactions() {},
+      // async updateBalences() {},
      async deleteAccounts(tx: Tx, { accountIds }: { accountIds: string[] }) {
        isLoggedIn(authData);
        for (const id of accountIds) {
@@ -39,6 +41,114 @@ export function createMutators(authData: AuthData | null) {
        }
      },
    },
+    budget: {
+      async create(
+        tx: Tx,
+        { id, categoryId }: { id: string; categoryId: string },
+      ) {
+        isLoggedIn(authData);
+        await tx.mutate.budget.insert({
+          id,
+          orgId: authData.user.id,
+          label: "New Budget",
+          createdBy: authData.user.id,
+        });
+        await tx.mutate.category.insert({
+          id: categoryId,
+          budgetId: id,
+          amount: 0,
+          every: "week",
+          order: 1000,
+          label: "My category",
+          color: "#f06",
+          createdBy: authData.user.id,
+        });
+      },
+      async delete(tx: Tx, { id }: { id: string }) {
+        isLoggedIn(authData);
+        await tx.mutate.budget.delete({
+          id,
+        });
+      },
+      async createCategory(
+        tx: Tx,
+        {
+          id,
+          budgetId,
+          order,
+        }: { id: string; budgetId: string; order: number },
+      ) {
+        isLoggedIn(authData);
+
+        if (order != undefined) {
+          const after = await tx.query.category
+            .where("budgetId", "=", budgetId)
+            .where("order", ">", order);
+
+          after.forEach((item) => {
+            tx.mutate.category.update({
+              id: item.id,
+              order: item.order + 1,
+            });
+          });
+        }
+
+        tx.mutate.category.insert({
+          id,
+          budgetId,
+          amount: 0,
+          every: "week",
+          order: order + 1,
+          label: "My category",
+          color: "#f06",
+          createdBy: authData.user.id,
+        });
+      },
+      async deleteCategory(tx: Tx, { id }: { id: string }) {
+        isLoggedIn(authData);
+        const item = await tx.query.category.where("id", "=", id).one();
+        if (!item) throw Error("Item does not exist");
+        tx.mutate.category.update({
+          id,
+          removedAt: new Date().getTime(),
+          removedBy: authData.user.id,
+        });
+        const after = await tx.query.category
+          .where("budgetId", "=", item.budgetId)
+          .where("order", ">", item.order)
+          .run();
+        for (const item of after) {
+          tx.mutate.category.update({ id: item.id, order: item.order - 1 });
+        }
+        // after.forEach((item) => {
+        // });
+      },
+      async updateCategory(
+        tx: Tx,
+        {
+          id,
+          label,
+          order,
+          amount,
+          every,
+        }: {
+          id: string;
+          label?: string;
+          order?: number;
+          amount?: number;
+          every?: Category["every"];
+        },
+      ) {
+        isLoggedIn(authData);
+        tx.mutate.category.update({
+          id,
+          label,
+          order,
+          amount,
+          every,
+        });
+      },
+    },
  } as const;
 }

--- a/packages/shared/src/queries.ts
+++ b/packages/shared/src/queries.ts
@@ -60,4 +60,24 @@ export const queries = {
        .orderBy("createdAt", "desc");
    },
  ),
+  getBudgets: syncedQueryWithContext(
+    "getBudgets",
+    z.tuple([]),
+    (authData: AuthData | null) => {
+      isLoggedIn(authData);
+      return builder.budget
+        .related("categories", (q) =>
+          q.where("removedAt", "IS", null).orderBy("order", "asc"),
+        )
+        .limit(10);
+    },
+  ),
+  getBudgetCategories: syncedQueryWithContext(
+    "getBudgetCategories",
+    z.tuple([]),
+    (authData: AuthData | null) => {
+      isLoggedIn(authData);
+      return builder.category.orderBy("order", "desc");
+    },
+  ),
 };
--- a/packages/shared/src/zero-schema.gen.ts
+++ b/packages/shared/src/zero-schema.gen.ts
@@ -112,6 +112,190 @@ export const schema = {
      },
      primaryKey: ["id"],
    },
+    budget: {
+      name: "budget",
+      columns: {
+        id: {
+          type: "string",
+          optional: false,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "budget",
+            "id"
+          >,
+        },
+        orgId: {
+          type: "string",
+          optional: false,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "budget",
+            "orgId"
+          >,
+          serverName: "org_id",
+        },
+        label: {
+          type: "string",
+          optional: false,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "budget",
+            "label"
+          >,
+        },
+        createdBy: {
+          type: "string",
+          optional: false,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "budget",
+            "createdBy"
+          >,
+          serverName: "created_by",
+        },
+        createdAt: {
+          type: "number",
+          optional: true,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "budget",
+            "createdAt"
+          >,
+          serverName: "created_at",
+        },
+        updatedAt: {
+          type: "number",
+          optional: true,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "budget",
+            "updatedAt"
+          >,
+          serverName: "updated_at",
+        },
+      },
+      primaryKey: ["id"],
+    },
+    category: {
+      name: "category",
+      columns: {
+        id: {
+          type: "string",
+          optional: false,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "category",
+            "id"
+          >,
+        },
+        budgetId: {
+          type: "string",
+          optional: false,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "category",
+            "budgetId"
+          >,
+          serverName: "budget_id",
+        },
+        amount: {
+          type: "number",
+          optional: false,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "category",
+            "amount"
+          >,
+        },
+        every: {
+          type: "string",
+          optional: false,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "category",
+            "every"
+          >,
+        },
+        order: {
+          type: "number",
+          optional: false,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "category",
+            "order"
+          >,
+        },
+        label: {
+          type: "string",
+          optional: false,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "category",
+            "label"
+          >,
+        },
+        color: {
+          type: "string",
+          optional: false,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "category",
+            "color"
+          >,
+        },
+        createdBy: {
+          type: "string",
+          optional: false,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "category",
+            "createdBy"
+          >,
+          serverName: "created_by",
+        },
+        createdAt: {
+          type: "number",
+          optional: true,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "category",
+            "createdAt"
+          >,
+          serverName: "created_at",
+        },
+        updatedAt: {
+          type: "number",
+          optional: true,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "category",
+            "updatedAt"
+          >,
+          serverName: "updated_at",
+        },
+        removedBy: {
+          type: "string",
+          optional: true,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "category",
+            "removedBy"
+          >,
+          serverName: "removed_by",
+        },
+        removedAt: {
+          type: "number",
+          optional: true,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "category",
+            "removedAt"
+          >,
+          serverName: "removed_at",
+        },
+      },
+      primaryKey: ["id"],
+    },
    plaidAccessTokens: {
      name: "plaidAccessTokens",
      columns: {
@@ -161,6 +345,16 @@ export const schema = {
            "token"
          >,
        },
+        syncCursor: {
+          type: "string",
+          optional: true,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "plaidAccessTokens",
+            "syncCursor"
+          >,
+          serverName: "sync_cursor",
+        },
        createdAt: {
          type: "number",
          optional: true,
@@ -418,7 +612,28 @@ export const schema = {
      serverName: "user",
    },
  },
-  relationships: {},
+  relationships: {
+    budget: {
+      categories: [
+        {
+          sourceField: ["id"],
+          destField: ["budgetId"],
+          destSchema: "category",
+          cardinality: "many",
+        },
+      ],
+    },
+    category: {
+      budget: [
+        {
+          sourceField: ["budgetId"],
+          destField: ["id"],
+          destSchema: "budget",
+          cardinality: "one",
+        },
+      ],
+    },
+  },
  enableLegacyQueries: false,
  enableLegacyMutators: false,
 } as const;
@@ -433,6 +648,16 @@ export type Schema = typeof schema;
 * This type is auto-generated from your Drizzle schema definition.
 */
 export type Balance = Row<Schema["tables"]["balance"]>;
+/**
+ * Represents a row from the "budget" table.
+ * This type is auto-generated from your Drizzle schema definition.
+ */
+export type Budget = Row<Schema["tables"]["budget"]>;
+/**
+ * Represents a row from the "category" table.
+ * This type is auto-generated from your Drizzle schema definition.
+ */
+export type Category = Row<Schema["tables"]["category"]>;
 /**
 * Represents a row from the "plaidAccessTokens" table.
 * This type is auto-generated from your Drizzle schema definition.
--- a/packages/ui/components/Button.tsx
+++ b/packages/ui/components/Button.tsx
@@ -1,12 +1,14 @@
-import { useKeyboard } from "../src/useKeyboard";
-import type { ReactNode } from "react";
+import { useEffect, type ReactNode } from "react";
 import { Text, Pressable } from "react-native";
+import { useShortcut, type Key } from "../lib/shortcuts";
+
+type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };

 export interface ButtonProps {
  children: ReactNode;
  onPress?: () => void;
  variant?: "default" | "secondary" | "destructive";
-  shortcut?: string;
+  shortcut?: Key;
 }

 const STYLES: Record<
@@ -21,10 +23,9 @@ const STYLES: Record<
 export function Button({ children, variant, onPress, shortcut }: ButtonProps) {
  const { backgroundColor, color } = STYLES[variant || "default"];

-  useKeyboard((key) => {
-    if (!shortcut || !onPress) return;
-    if (key.name == shortcut) onPress();
-  });
+  if (shortcut && onPress) {
+    useShortcut(shortcut, onPress);
+  }

  return (
    <Pressable onPress={onPress} style={{ backgroundColor }}>
--- a/packages/ui/components/Dialog.tsx
+++ b/packages/ui/components/Dialog.tsx
@@ -1,6 +1,6 @@
-import { createContext, type ReactNode } from "react";
+import { createContext, use, type ReactNode } from "react";
 import { Modal, View, Text } from "react-native";
-import { useKeyboard } from "../src/useKeyboard";
+import { useShortcut } from "../lib/shortcuts";

 export interface DialogState {
  close?: () => void;
@@ -15,19 +15,13 @@ interface ProviderProps {
  close?: () => void;
 }
 export function Provider({ children, visible, close }: ProviderProps) {
-  useKeyboard((key) => {
-    if (key.name == "escape") {
-      if (close) close();
-    }
-  }, []);
-
  return (
    <Context.Provider value={{ close }}>
      <Modal transparent visible={visible}>
        {/* <Pressable onPress={() => close && close()} style={{ justifyContent: 'center', alignItems: 'center', flex: 1, backgroundColor: 'rgba(0,0,0,0.2)',  }}> */}
        <View
          style={{
-            justifyContent: "center",
+            // justifyContent: "center",
            alignItems: "center",
            flex: 1,
            backgroundColor: "rgba(0,0,0,0.2)",
@@ -44,10 +38,11 @@ interface ContentProps {
  children: ReactNode;
 }
 export function Content({ children }: ContentProps) {
+  const { close } = use(Context);
+  useShortcut("escape", () => close?.(), "dialog");
+
  return (
-    <View
-      style={{ backgroundColor: "white", padding: 12, alignItems: "center" }}
-    >
+    <View style={{ backgroundColor: "white", alignItems: "center", top: 120 }}>
      {children}
    </View>
  );
--- a/packages/ui/components/Table.tsx
+++ b/packages/ui/components/Table.tsx
@@ -1,11 +1,15 @@
-import { createContext, use, useState, type ReactNode } from "react";
+import { createContext, use, useEffect, useState, type ReactNode } from "react";
 import { View, Text } from "react-native";
-import { useKeyboard } from "../src/useKeyboard";
-import type { KeyEvent } from "@opentui/core";
+import { useShortcut } from "../lib/shortcuts/hooks";
+import type { Key } from "../lib/shortcuts";

 const HEADER_COLOR = "#7158e2";
-const TABLE_COLORS = ["#ddd", "#eee"];
-const SELECTED_COLOR = "#f7b730";
+
+const COLORS = {
+  focused: "#ddd",
+  selected: "#eaebf6",
+  focused_selected: "#d5d7ef",
+};

 const EXTRA = 5;

@@ -16,7 +20,7 @@ interface TableState {
  columns: Column[];
  columnMap: Map<string, number>;
  idx: number;
-  selectedFrom: number | undefined;
+  selectedIdx: Set<number>;
 }

 const INITAL_STATE = {
@@ -24,7 +28,7 @@ const INITAL_STATE = {
  columns: [],
  columnMap: new Map(),
  idx: 0,
-  selectedFrom: undefined,
+  selectedIdx: new Set(),
 } satisfies TableState;

 export const Context = createContext<TableState>(INITAL_STATE);
@@ -43,48 +47,64 @@ function renderCell(row: ValidRecord, column: Column): string {
  return cell.toString();
 }

+interface TableShortcut<T> {
+  key: Key;
+  handler: (params: { selected: T[]; index: number }) => void;
+}
+
 export interface ProviderProps<T> {
  data: T[];
  columns: Column[];
  children: ReactNode;
-  onKey?: (event: KeyEvent, selected: T[]) => void;
+  shortcuts?: TableShortcut<T>[];
 }
 export function Provider<T extends ValidRecord>({
  data,
  columns,
  children,
-  onKey,
+  shortcuts,
 }: ProviderProps<T>) {
  const [idx, setIdx] = useState(0);
-  const [selectedFrom, setSelectedFrom] = useState<number>();
+  const [selectedIdx, setSelectedIdx] = useState(new Set<number>());

-  useKeyboard(
-    (key) => {
-      if (key.name == "j" || key.name == "down") {
-        if (key.shift && selectedFrom == undefined) {
-          setSelectedFrom(idx);
-        }
-        setIdx((prev) => Math.min(prev + 1, data.length - 1));
-      } else if (key.name == "k" || key.name == "up") {
-        if (key.shift && selectedFrom == undefined) {
-          setSelectedFrom(idx);
-        }
-        setIdx((prev) => Math.max(prev - 1, 0));
-      } else if (key.name == "g" && key.shift) {
-        setIdx(data.length - 1);
-      } else if (key.name == "v") {
-        setSelectedFrom(idx);
-      } else if (key.name == "escape") {
-        setSelectedFrom(undefined);
-      } else {
-        const from = selectedFrom ? Math.min(idx, selectedFrom) : idx;
-        const to = selectedFrom ? Math.max(idx, selectedFrom) : idx;
-        const selected = data.slice(from, to + 1);
-        if (onKey) onKey(key, selected);
-      }
-    },
-    [data, idx, selectedFrom],
-  );
+  useShortcut("j", () => {
+    setIdx((prev) => Math.min(prev + 1, data.length - 1));
+  });
+  useShortcut("down", () => {
+    setIdx((prev) => Math.min(prev + 1, data.length - 1));
+  });
+  useShortcut("k", () => {
+    setIdx((prev) => Math.max(prev - 1, 0));
+  });
+  useShortcut("up", () => {
+    setIdx((prev) => Math.max(prev - 1, 0));
+  });
+
+  useShortcut("escape", () => {
+    setSelectedIdx(new Set());
+  });
+  useShortcut("x", () => {
+    setSelectedIdx((last) => {
+      const newSelected = new Set(last);
+      newSelected.add(idx);
+      return newSelected;
+    });
+  });
+
+  useEffect(() => {
+    setIdx((prev) => Math.max(Math.min(prev, data.length - 1), 0));
+  }, [data]);
+
+  if (shortcuts) {
+    for (const shortcut of shortcuts) {
+      useShortcut(shortcut.key, () => {
+        const selected = data.filter(
+          (_, index) => idx == index || selectedIdx.has(index),
+        );
+        shortcut.handler({ selected, index: idx });
+      });
+    }
+  }

  const columnMap = new Map(
    columns.map((col) => {
@@ -99,14 +119,14 @@ export function Provider<T extends ValidRecord>({
  );

  return (
-    <Context.Provider value={{ data, columns, columnMap, idx, selectedFrom }}>
+    <Context.Provider value={{ data, columns, columnMap, idx, selectedIdx }}>
      {children}
    </Context.Provider>
  );
 }

 export function Body() {
-  const { columns, data, columnMap, idx, selectedFrom } = use(Context);
+  const { columns, data, columnMap, idx, selectedIdx } = use(Context);
  return (
    <View>
      <View style={{ backgroundColor: HEADER_COLOR, flexDirection: "row" }}>
@@ -123,19 +143,21 @@ export function Body() {
        ))}
      </View>
      {data.map((row, index) => {
-        const isSelected =
-          index == idx ||
-          (selectedFrom != undefined &&
-            ((selectedFrom <= index && index <= idx) ||
-              (idx <= index && index <= selectedFrom)));
+        const isSelected = selectedIdx.has(index);
+        const isFocused = index == idx;

        return (
          <View
            key={index}
            style={{
-              backgroundColor: isSelected
-                ? SELECTED_COLOR
-                : TABLE_COLORS[index % 2],
+              backgroundColor:
+                isSelected && isFocused
+                  ? COLORS.focused_selected
+                  : isFocused
+                    ? COLORS.focused
+                    : isSelected
+                      ? COLORS.selected
+                      : undefined,
            }}
          >
            <TableRow
--- a/packages/ui/lib/shortcuts/Debug.tsx
+++ b/packages/ui/lib/shortcuts/Debug.tsx
@@ -0,0 +1,41 @@
+import { useSyncExternalStore } from "react";
+import { View, Text } from "react-native";
+import { keysStore, type ScopeKeys } from "./store";
+
+export function ShortcutDebug() {
+  const entries = useSyncExternalStore(
+    keysStore.subscribe,
+    keysStore.getSnapshot,
+  );
+
+  return (
+    <View
+      style={{
+        position: "absolute",
+        zIndex: 100,
+        bottom: 0,
+        right: 0,
+        backgroundColor: "black",
+        padding: 10,
+      }}
+    >
+      <Text style={{ color: "red", fontFamily: "mono" }}>Scopes:</Text>
+      {entries.map(([scope, keys]) => (
+        <ScopeView key={scope} scope={scope} keys={keys} />
+      ))}
+    </View>
+  );
+}
+
+function ScopeView({ scope, keys }: { scope: string; keys: ScopeKeys }) {
+  return (
+    <Text style={{ color: "red", fontFamily: "mono", textAlign: "right" }}>
+      {scope}:
+      {keys
+        .entries()
+        .map(([key, _]) => key)
+        .toArray()
+        .join(",")}
+    </Text>
+  );
+}
--- a/packages/ui/lib/shortcuts/Provider.tsx
+++ b/packages/ui/lib/shortcuts/Provider.tsx
@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+import { useKeyboard } from "@opentui/react";
+import { keysStore } from "./store";
+
+export function ShortcutProvider({ children }: { children: ReactNode }) {
+  useKeyboard((e) => {
+    const fn = keysStore.getHandler(e.name);
+    fn?.();
+  });
+
+  return children;
+}
--- a/packages/ui/lib/shortcuts/Provider.web.tsx
+++ b/packages/ui/lib/shortcuts/Provider.web.tsx
@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+import { keysStore } from "./store";
+import type { KeyName } from "./types";
+
+const KEY_MAP: { [k: string]: KeyName } = {
+  Escape: "escape",
+  ArrowUp: "up",
+  ArrowDown: "down",
+  ArrowLeft: "left",
+  ArrowRight: "right",
+};
+
+if (typeof window !== "undefined") {
+  window.addEventListener("keydown", (e) => {
+    const key = Object.hasOwn(KEY_MAP, e.key) ? KEY_MAP[e.key]! : e.key;
+    const fn = keysStore.getHandler(key);
+    // console.log(e.key);
+    if (!fn) return;
+    e.preventDefault();
+    fn();
+  });
+}
+
+export function ShortcutProvider({ children }: { children: ReactNode }) {
+  return children;
+}
--- a/packages/ui/lib/shortcuts/hooks.ts
+++ b/packages/ui/lib/shortcuts/hooks.ts
@@ -0,0 +1,22 @@
+import { useEffect, useRef } from "react";
+import { keysStore } from "./store";
+import type { Key } from "./types";
+import { enforceKeyOptions } from "./util";
+
+export const useShortcut = (
+  key: Key,
+  handler: () => void,
+  scope: string = "global",
+) => {
+  const keyOptions = enforceKeyOptions(key);
+  const keyName = keyOptions.name;
+  const ref = useRef(handler);
+  ref.current = handler;
+
+  useEffect(() => {
+    keysStore.register(keyName, ref, scope);
+    return () => {
+      keysStore.deregister(keyName, scope);
+    };
+  }, []);
+};
--- a/packages/ui/lib/shortcuts/index.ts
+++ b/packages/ui/lib/shortcuts/index.ts
@@ -0,0 +1,4 @@
+export * from "./Debug";
+export * from "./Provider";
+export * from "./hooks";
+export * from "./types";
--- a/packages/ui/lib/shortcuts/store.ts
+++ b/packages/ui/lib/shortcuts/store.ts
@@ -0,0 +1,58 @@
+import { type RefObject } from "react";
+
+export type ScopeKeys = Map<string, RefObject<() => void>>;
+
+// outer reactive container
+const scopes = new Map<string, ScopeKeys>();
+
+// stable snapshot for subscribers
+let snapshot: [string, ScopeKeys][] = [];
+
+const listeners = new Set<() => void>();
+
+function emit() {
+  // replace identity so subscribers re-render
+  snapshot = Array.from(scopes.entries());
+  for (const fn of listeners) fn();
+}
+
+export const keysStore = {
+  subscribe(fn: () => void) {
+    listeners.add(fn);
+    return () => listeners.delete(fn);
+  },
+
+  getSnapshot() {
+    return snapshot;
+  },
+
+  register(key: string, ref: RefObject<() => void>, scope: string) {
+    const prev = scopes.get(scope);
+    const next = new Map(prev); // <-- important: new identity
+    next.set(key, ref);
+
+    scopes.set(scope, next); // <-- outer identity also changes
+    emit();
+  },
+
+  deregister(key: string, scope: string) {
+    const prev = scopes.get(scope);
+    if (!prev) return;
+
+    const next = new Map(prev);
+    next.delete(key);
+
+    if (next.size === 0) {
+      scopes.delete(scope);
+    } else {
+      scopes.set(scope, next);
+    }
+    emit();
+  },
+
+  getHandler(key: string) {
+    // last scope wins — clarify this logic as needed
+    const last = Array.from(scopes.values()).at(-1);
+    return last?.get(key)?.current;
+  },
+};
--- a/packages/ui/lib/shortcuts/types.ts
+++ b/packages/ui/lib/shortcuts/types.ts
@@ -0,0 +1,52 @@
+export type KeyName =
+  | "0"
+  | "1"
+  | "2"
+  | "3"
+  | "4"
+  | "5"
+  | "6"
+  | "7"
+  | "8"
+  | "9"
+  | "a"
+  | "b"
+  | "c"
+  | "d"
+  | "e"
+  | "f"
+  | "g"
+  | "h"
+  | "i"
+  | "j"
+  | "k"
+  | "l"
+  | "m"
+  | "n"
+  | "o"
+  | "p"
+  | "q"
+  | "r"
+  | "s"
+  | "t"
+  | "u"
+  | "v"
+  | "w"
+  | "x"
+  | "y"
+  | "z"
+  | ":"
+  | "up"
+  | "down"
+  | "left"
+  | "right"
+  | "return"
+  | "escape";
+
+export type Key = KeyName | KeyOptions;
+
+export interface KeyOptions {
+  name: KeyName;
+  ctrl?: boolean;
+  shift?: boolean;
+}
--- a/packages/ui/lib/shortcuts/util.ts
+++ b/packages/ui/lib/shortcuts/util.ts
@@ -0,0 +1,9 @@
+import type { Key, KeyOptions } from "./types";
+
+export function enforceKeyOptions(key: Key): KeyOptions {
+  return typeof key == "string"
+    ? {
+        name: key,
+      }
+    : key;
+}
--- a/packages/ui/src/budget.tsx
+++ b/packages/ui/src/budget.tsx
@@ -0,0 +1,160 @@
+import { use, useRef, useState } from "react";
+import { View, Text, TextInput } from "react-native";
+import { RouterContext } from ".";
+import {
+  queries,
+  type Category,
+  type Mutators,
+  type Schema,
+} from "@money/shared";
+import { useQuery, useZero } from "@rocicorp/zero/react";
+import * as Table from "../components/Table";
+import { Button } from "../components/Button";
+import { RenameCategoryDialog } from "./budget/RenameCategoryDialog";
+import {
+  UpdateCategoryAmountDialog,
+  type CategoryWithComputed,
+  type Updating,
+} from "./budget/UpdateCategoryAmountDialog";
+
+const COLUMNS: Table.Column[] = [
+  { name: "label", label: "Name" },
+  { name: "week", label: "Week" },
+  { name: "month", label: "Month" },
+  { name: "year", label: "Year" },
+  { name: "order", label: "Order" },
+];
+
+export function Budget() {
+  const { auth } = use(RouterContext);
+  const [budgets] = useQuery(queries.getBudgets(auth));
+  const [renaming, setRenaming] = useState<Category>();
+  const [editCategoryAmount, setEditCategoryAmount] = useState<Updating>();
+
+  const z = useZero<Schema, Mutators>();
+
+  const newBudget = () => {
+    const id = new Date().getTime().toString();
+    const categoryId = new Date().getTime().toString();
+    z.mutate.budget.create({
+      id,
+      categoryId,
+    });
+  };
+
+  if (budgets.length == 0)
+    return (
+      <View
+        style={{
+          justifyContent: "center",
+          alignItems: "center",
+          flex: 1,
+          gap: 10,
+        }}
+      >
+        <Text style={{ fontFamily: "mono" }}>
+          No budgets, please create a new budget
+        </Text>
+        <Button onPress={newBudget} shortcut="n">
+          New budget
+        </Button>
+      </View>
+    );
+
+  const budget = budgets[0]!;
+
+  const data = budget.categories.slice().map((category) => {
+    const { amount } = category;
+    const week = amount / 4;
+    const month = amount;
+    const year = amount * 12;
+
+    return {
+      ...category,
+      ...{
+        week,
+        month,
+        year,
+      },
+    };
+  });
+
+  const newCategory = ({ index }: { index: number }) => {
+    const id = new Date().getTime().toString();
+    z.mutate.budget.createCategory({
+      id,
+      budgetId: budget.id,
+      order: index,
+    });
+  };
+
+  const deleteCategory = ({ selected }: { selected: { id: string }[] }) => {
+    for (const { id } of selected) {
+      z.mutate.budget.deleteCategory({ id });
+    }
+  };
+
+  const renameCategory = ({ selected }: { selected: Category[] }) => {
+    for (const category of selected) {
+      setRenaming(category);
+    }
+  };
+
+  const onEditCategoryYearly = ({
+    selected,
+  }: { selected: CategoryWithComputed[] }) => {
+    for (const category of selected) {
+      setEditCategoryAmount({ category, every: "year" });
+    }
+  };
+
+  const onEditCategoryMonthly = ({
+    selected,
+  }: { selected: CategoryWithComputed[] }) => {
+    for (const category of selected) {
+      setEditCategoryAmount({ category, every: "month" });
+    }
+  };
+
+  const onEditCategoryWeekly = ({
+    selected,
+  }: { selected: CategoryWithComputed[] }) => {
+    for (const category of selected) {
+      setEditCategoryAmount({ category, every: "week" });
+    }
+  };
+
+  return (
+    <>
+      <RenameCategoryDialog renaming={renaming} setRenaming={setRenaming} />
+      <UpdateCategoryAmountDialog
+        updating={editCategoryAmount}
+        setUpdating={setEditCategoryAmount}
+      />
+
+      <View style={{ alignItems: "flex-start" }}>
+        <Text style={{ fontFamily: "mono", textAlign: "left" }}>
+          Selected Budget: {budget.label}
+        </Text>
+      </View>
+      <Table.Provider
+        data={data}
+        columns={COLUMNS}
+        shortcuts={[
+          { key: "i", handler: newCategory },
+          { key: "d", handler: deleteCategory },
+          { key: "r", handler: renameCategory },
+          { key: "y", handler: onEditCategoryYearly },
+          { key: "m", handler: onEditCategoryMonthly },
+          { key: "w", handler: onEditCategoryWeekly },
+        ]}
+      >
+        <View style={{ flex: 1 }}>
+          <View style={{ flexShrink: 0 }}>
+            <Table.Body />
+          </View>
+        </View>
+      </Table.Provider>
+    </>
+  );
+}
--- a/packages/ui/src/budget/RenameCategoryDialog.tsx
+++ b/packages/ui/src/budget/RenameCategoryDialog.tsx
@@ -0,0 +1,77 @@
+import { useRef, useState } from "react";
+import * as Dialog from "../../components/Dialog";
+import { View, Text, TextInput } from "react-native";
+import { type Category, type Mutators, type Schema } from "@money/shared";
+import { useZero } from "@rocicorp/zero/react";
+
+interface RenameCategoryDialogProps {
+  renaming: Category | undefined;
+  setRenaming: (v: Category | undefined) => void;
+}
+export function RenameCategoryDialog({
+  renaming,
+  setRenaming,
+}: RenameCategoryDialogProps) {
+  const refText = useRef("");
+  const [renamingText, setRenamingText] = useState("");
+
+  const z = useZero<Schema, Mutators>();
+
+  return (
+    <Dialog.Provider
+      visible={renaming != undefined}
+      close={() => setRenaming(undefined)}
+    >
+      <Dialog.Content>
+        <View style={{ width: 400 }}>
+          <View
+            style={{
+              borderBottomWidth: 1,
+              paddingTop: 12,
+              paddingLeft: 12,
+              paddingRight: 12,
+            }}
+          >
+            <TextInput
+              style={{
+                fontFamily: "mono",
+                // @ts-ignore
+                outline: "none",
+              }}
+              autoFocus
+              selectTextOnFocus
+              defaultValue={renaming?.label}
+              onChangeText={(t) => {
+                refText.current = t;
+                setRenamingText(t);
+              }}
+              onKeyPress={(e) => {
+                if (!renaming) return;
+                if (e.nativeEvent.key == "Enter") {
+                  if (refText.current.trim() == "")
+                    return setRenaming(undefined);
+                  z.mutate.budget.updateCategory({
+                    id: renaming.id,
+                    label: refText.current,
+                  });
+                  setRenaming(undefined);
+                } else if (e.nativeEvent.key == "Escape") {
+                  setRenaming(undefined);
+                }
+              }}
+            />
+          </View>
+
+          <View
+            style={{ paddingLeft: 12, paddingRight: 12, paddingBottom: 12 }}
+          >
+            <Text style={{ fontFamily: "mono" }}>
+              → Rename category to: {renamingText || renaming?.label}
+            </Text>
+            <Text style={{ fontFamily: "mono" }}>→ Cancel</Text>
+          </View>
+        </View>
+      </Dialog.Content>
+    </Dialog.Provider>
+  );
+}
--- a/packages/ui/src/budget/UpdateCategoryAmountDialog.tsx
+++ b/packages/ui/src/budget/UpdateCategoryAmountDialog.tsx
@@ -0,0 +1,107 @@
+import { useRef, useState } from "react";
+import * as Dialog from "../../components/Dialog";
+import { View, Text, TextInput } from "react-native";
+import { type Category, type Mutators, type Schema } from "@money/shared";
+import { useZero } from "@rocicorp/zero/react";
+
+export type Updating = {
+  category: CategoryWithComputed;
+  every: Category["every"];
+};
+
+export type CategoryWithComputed = Category & {
+  month: number;
+  year: number;
+};
+
+interface UpdateCategoryAmountDialogProps {
+  updating: Updating | undefined;
+  setUpdating: (v: Updating | undefined) => void;
+}
+export function UpdateCategoryAmountDialog({
+  updating,
+  setUpdating,
+}: UpdateCategoryAmountDialogProps) {
+  const category = updating?.category;
+  const every = updating?.every;
+
+  const refText = useRef("");
+  const [amountText, setAmountText] = useState("");
+
+  const z = useZero<Schema, Mutators>();
+
+  return (
+    <Dialog.Provider
+      visible={category != undefined}
+      close={() => setUpdating(undefined)}
+    >
+      <Dialog.Content>
+        <View style={{ width: 400 }}>
+          <View
+            style={{
+              borderBottomWidth: 1,
+              paddingTop: 12,
+              paddingLeft: 12,
+              paddingRight: 12,
+            }}
+          >
+            <TextInput
+              style={{
+                fontFamily: "mono",
+                // @ts-ignore
+                outline: "none",
+              }}
+              autoFocus
+              selectTextOnFocus
+              defaultValue={category?.month.toString()}
+              onChangeText={(t) => {
+                refText.current = t;
+                setAmountText(t);
+              }}
+              onKeyPress={(e) => {
+                if (!category) return;
+                if (e.nativeEvent.key == "Enter") {
+                  if (refText.current.trim() == "")
+                    return setUpdating(undefined);
+
+                  try {
+                    const parsed = parseFloat(refText.current);
+
+                    const amount = (function () {
+                      switch (every) {
+                        case "year":
+                          return parsed / 12;
+                        case "month":
+                          return parsed;
+                        case "week":
+                          return parsed * 4;
+                      }
+                    })();
+
+                    z.mutate.budget.updateCategory({
+                      id: category.id,
+                      amount,
+                      every,
+                    });
+                    setUpdating(undefined);
+                  } catch (e) {}
+                } else if (e.nativeEvent.key == "Escape") {
+                  setUpdating(undefined);
+                }
+              }}
+            />
+          </View>
+
+          <View
+            style={{ paddingLeft: 12, paddingRight: 12, paddingBottom: 12 }}
+          >
+            <Text style={{ fontFamily: "mono" }}>
+              → Update monthly amount to: {amountText || category?.month}
+            </Text>
+            <Text style={{ fontFamily: "mono" }}>→ Cancel</Text>
+          </View>
+        </View>
+      </Dialog.Content>
+    </Dialog.Provider>
+  );
+}
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -1,24 +1,37 @@
-import { createContext, use } from "react";
+import { createContext, use, type ReactNode } from "react";
 import { Transactions } from "./transactions";
-import { View, Text } from "react-native";
+import { View } from "react-native";
 import { Settings } from "./settings";
-import { useKeyboard } from "./useKeyboard";
 import type { AuthData } from "@money/shared/auth";
+import { Budget } from "./budget";
+import {
+  ShortcutProvider,
+  ShortcutDebug,
+  useShortcut,
+  type KeyName,
+} from "../lib/shortcuts";

 const PAGES = {
  "/": {
    screen: <Transactions />,
    key: "1",
  },
+  "/budget": {
+    screen: <Budget />,
+    key: "2",
+  },
  "/settings": {
    screen: <Settings />,
-    key: "2",
+    key: "3",
    children: {
      "/accounts": {},
      "/family": {},
    },
  },
-};
+} satisfies Record<
+  string,
+  { screen: ReactNode; key: KeyName; children?: Record<string, unknown> }
+>;

 type Join<A extends string, B extends string> = `${A}${B}` extends `${infer X}`
  ? X
@@ -59,7 +72,10 @@ type AppProps = {
 export function App({ auth, route, setRoute }: AppProps) {
  return (
    <RouterContext.Provider value={{ auth, route, setRoute }}>
-      <Main />
+      <ShortcutProvider>
+        <ShortcutDebug />
+        <Main />
+      </ShortcutProvider>
    </RouterContext.Provider>
  );
 }
@@ -67,17 +83,9 @@ export function App({ auth, route, setRoute }: AppProps) {
 function Main() {
  const { route, setRoute } = use(RouterContext);

-  useKeyboard((key) => {
-    const screen = Object.entries(PAGES).find(
-      ([, screen]) => screen.key == key.name,
-    );
-
-    if (!screen) return;
-
-    const [route] = screen as [Route, never];
-
-    setRoute(route);
-  });
+  for (const [route, page] of Object.entries(PAGES)) {
+    useShortcut(page.key, () => setRoute(route as Route));
+  }

  const match =
    route in PAGES
--- a/packages/ui/src/settings.tsx
+++ b/packages/ui/src/settings.tsx
@@ -4,8 +4,7 @@ import { RouterContext, type Route } from ".";
 import { General } from "./settings/general";
 import { Accounts } from "./settings/accounts";
 import { Family } from "./settings/family";
-import { useKeyboard } from "./useKeyboard";
-import { Modal } from "react-native-opentui";
+import { useShortcut } from "../lib/shortcuts";

 type SettingsRoute = Extract<Route, `/settings${string}`>;

@@ -32,28 +31,24 @@ type Tab = keyof typeof TABS;
 export function Settings() {
  const { route, setRoute } = use(RouterContext);

-  useKeyboard(
-    (key) => {
-      if (key.name == "h") {
-        const currentIdx = Object.entries(TABS).findIndex(
-          ([tabRoute, _]) => tabRoute == route,
-        );
-        const routes = Object.keys(TABS) as SettingsRoute[];
-        const last = routes[currentIdx - 1];
-        if (!last) return;
-        setRoute(last);
-      } else if (key.name == "l") {
-        const currentIdx = Object.entries(TABS).findIndex(
-          ([tabRoute, _]) => tabRoute == route,
-        );
-        const routes = Object.keys(TABS) as SettingsRoute[];
-        const next = routes[currentIdx + 1];
-        if (!next) return;
-        setRoute(next);
-      }
-    },
-    [route],
-  );
+  useShortcut("h", () => {
+    const currentIdx = Object.entries(TABS).findIndex(
+      ([tabRoute, _]) => tabRoute == route,
+    );
+    const routes = Object.keys(TABS) as SettingsRoute[];
+    const last = routes[currentIdx - 1];
+    if (!last) return;
+    setRoute(last);
+  });
+  useShortcut("l", () => {
+    const currentIdx = Object.entries(TABS).findIndex(
+      ([tabRoute, _]) => tabRoute == route,
+    );
+    const routes = Object.keys(TABS) as SettingsRoute[];
+    const next = routes[currentIdx + 1];
+    if (!next) return;
+    setRoute(next);
+  });

  return (
    <View style={{ flexDirection: "row" }}>
--- a/packages/ui/src/settings/accounts.tsx
+++ b/packages/ui/src/settings/accounts.tsx
@@ -3,7 +3,6 @@ import { queries, type Mutators, type Schema } from "@money/shared";
 import { use, useEffect, useState } from "react";
 import { RouterContext } from "..";
 import { View, Text, Linking } from "react-native";
-import { useKeyboard } from "../useKeyboard";
 import { Button } from "../../components/Button";
 import * as Table from "../../components/Table";
 import * as Dialog from "../../components/Dialog";
--- a/packages/ui/src/transactions.tsx
+++ b/packages/ui/src/transactions.tsx
@@ -40,13 +40,9 @@ export function Transactions() {
    <Table.Provider
      data={items}
      columns={COLUMNS}
-      onKey={(key) => {
-        if (key.name == "r" && key.shift) {
-          z.mutate.link.updateTransactions();
-        }
-      }}
+      shortcuts={[{ key: "r", handler: () => z.mutate.link.sync() }]}
    >
-      <View style={{ flex: 1 }}>
+      <View style={{ padding: 10, flex: 1 }}>
        <View style={{ flexShrink: 0 }}>
          <Table.Body />
        </View>
@@ -59,18 +55,16 @@ export function Transactions() {
 }

 function Selected() {
-  const { data, idx, selectedFrom } = use(Table.Context);
+  const { data, selectedIdx } = use(Table.Context);

-  if (selectedFrom == undefined)
+  if (selectedIdx.size == 0)
    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 selected = data.filter((_, i) => selectedIdx.has(i)) as Transaction[];
  const count = selected.length;
  const sum = selected.reduce((prev, curr) => prev + curr.amount, 0);

--- a/packages/ui/src/useKeyboard.ts
+++ b/packages/ui/src/useKeyboard.ts
@@ -1,8 +0,0 @@
-import { useKeyboard as useOpentuiKeyboard } from "@opentui/react";
-
-export function useKeyboard(
-  handler: Parameters<typeof useOpentuiKeyboard>[0],
-  _deps: any[] = [],
-) {
-  return useOpentuiKeyboard(handler);
-}
--- a/packages/ui/src/useKeyboard.web.ts
+++ b/packages/ui/src/useKeyboard.web.ts
@@ -1,47 +0,0 @@
-import { useEffect } from "react";
-import type { KeyboardEvent } from "react";
-import type { KeyEvent } from "@opentui/core";
-
-function convertName(keyName: string): string {
-  const result = keyName.toLowerCase();
-  if (result == "arrowdown") return "down";
-  if (result == "arrowup") return "up";
-  return result;
-}
-
-export function useKeyboard(
-  handler: (key: KeyEvent) => void,
-  deps: any[] = [],
-) {
-  useEffect(() => {
-    const handlerWeb = (event: KeyboardEvent) => {
-      // @ts-ignore
-      handler({
-        name: convertName(event.key),
-        ctrl: event.ctrlKey,
-        meta: event.metaKey,
-        shift: event.shiftKey,
-        option: event.metaKey,
-        sequence: "",
-        number: false,
-        raw: "",
-        eventType: "press",
-        source: "raw",
-        code: event.code,
-        super: false,
-        hyper: false,
-        capsLock: false,
-        numLock: false,
-        baseCode: event.keyCode,
-        preventDefault: () => event.preventDefault(),
-      });
-    };
-
-    // @ts-ignore
-    window.addEventListener("keydown", handlerWeb);
-    return () => {
-      // @ts-ignore
-      window.removeEventListener("keydown", handlerWeb);
-    };
-  }, deps);
-}
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -1,10 +1,7 @@
 {
  "compilerOptions": {
-    "paths": {
-      "@/*": ["./*"]
-    },
    // Environment setup & latest features
-    "lib": ["ESNext"],
+    "lib": ["ESNext", "DOM"],
    "target": "ESNext",
    "module": "ESNext",
    "moduleDetection": "force",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,4 +0,0 @@
-nodeLinker: hoisted
-packages:
-  - 'apps/*'
-  - 'packages/*'
--- a/process-compose.yaml
+++ b/process-compose.yaml
@@ -26,16 +26,16 @@ processes:
      period_seconds: 1

  tailscale_machine_name:
-    command: "pnpm tsx ./scripts/set-machine-name.ts"
+    command: "bun tsx ./scripts/set-machine-name.ts"

  expo:
-    command: "pnpm --filter=@money/expo start"
+    command: "bun --filter=@money/expo start"
    depends_on:
      tailscale_machine_name:
        condition: process_completed_successfully

  api:
-    command: "pnpm --filter=@money/api dev"
+    command: "bun --filter=@money/api dev"

  migrate:
    command: |
@@ -51,13 +51,13 @@ processes:
      db:
        condition: process_healthy
  zero:
-    command: npx zero-cache-dev -p packages/shared/src/schema.ts
+    command: bunx zero-cache-dev -p packages/shared/src/schema.ts
    depends_on:
      migrate:
        condition: process_completed_successfully

  studio:
-    command: npx drizzle-kit studio
+    command: bunx drizzle-kit studio
    working_dir: ./packages/shared
    depends_on:
      db:
Author	SHA1	Message	Date
Max Koon	b93c2e7e95	refactor: move to bun	2025-12-26 13:53:42 -05:00
Max Koon	105b0c514f	feat: add plaid sync	2025-12-15 12:53:35 -05:00
Max Koon	c6dd174376	feat: add scoped shortcuts	2025-12-12 18:44:18 -05:00
Max Koon	27f6e627d4	feat: budget crud actions	2025-12-06 23:02:28 -05:00
Max Koon	76f2a43bd0	refactor: better shortcut hook	2025-12-05 17:05:23 -05:00