feat: add scoped shortcuts

packages/ui/src/budget.tsx

@@ -10,7 +10,12 @@ import {
 import { useQuery, useZero } from "@rocicorp/zero/react";
 import * as Table from "../components/Table";
 import { Button } from "../components/Button";
-import * as Dialog from "../components/Dialog";
+import { RenameCategoryDialog } from "./budget/RenameCategoryDialog";
+import {
+  UpdateCategoryAmountDialog,
+  type CategoryWithComputed,
+  type Updating,
+} from "./budget/UpdateCategoryAmountDialog";
 
 const COLUMNS: Table.Column[] = [
   { name: "label", label: "Name" },
@@ -24,9 +29,9 @@ 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 refText = useRef("");
 
   const newBudget = () => {
     const id = new Date().getTime().toString();
@@ -60,8 +65,8 @@ export function Budget() {
 
   const data = budget.categories.slice().map((category) => {
     const { amount } = category;
-    const week = amount;
-    const month = amount * 4;
+    const week = amount / 4;
+    const month = amount;
     const year = amount * 12;
 
     return {
@@ -79,7 +84,7 @@ export function Budget() {
     z.mutate.budget.createCategory({
       id,
       budgetId: budget.id,
-      order: index - 1,
+      order: index,
     });
   };
 
@@ -95,38 +100,37 @@ export function Budget() {
     }
   };
 
+  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 (
     <>
-      <Dialog.Provider
-        visible={renaming != undefined}
-        close={() => setRenaming(undefined)}
-      >
-        <Dialog.Content>
-          <Text style={{ fontFamily: "mono" }}>Edit Category</Text>
-
-          <TextInput
-            style={{ fontFamily: "mono" }}
-            autoFocus
-            selectTextOnFocus
-            defaultValue={renaming?.label}
-            onChangeText={(t) => {
-              refText.current = t;
-            }}
-            onKeyPress={(e) => {
-              if (!renaming) return;
-              if (e.nativeEvent.key == "Enter") {
-                z.mutate.budget.updateCategory({
-                  id: renaming.id,
-                  label: refText.current,
-                });
-                setRenaming(undefined);
-              } else if (e.nativeEvent.key == "Escape") {
-                setRenaming(undefined);
-              }
-            }}
-          />
-        </Dialog.Content>
-      </Dialog.Provider>
+      <RenameCategoryDialog renaming={renaming} setRenaming={setRenaming} />
+      <UpdateCategoryAmountDialog
+        updating={editCategoryAmount}
+        setUpdating={setEditCategoryAmount}
+      />
 
       <View style={{ alignItems: "flex-start" }}>
         <Text style={{ fontFamily: "mono", textAlign: "left" }}>
@@ -140,6 +144,9 @@ export function Budget() {
           { 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 }}>

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>
+  );
+}

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>
+  );
+}

packages/ui/src/index.tsx

@@ -39,14 +39,14 @@ type Join<A extends string, B extends string> = `${A}${B}` extends `${infer X}`
 
 type ChildRoutes<Parent extends string, Children> = {
   [K in keyof Children & string]: K extends `/${string}`
-  ? Join<Parent, K>
-  : never;
+    ? Join<Parent, K>
+    : never;
 }[keyof Children & string];
 
 type Routes<T> = {
   [K in keyof T & string]:
-  | K
-  | (T[K] extends { children: infer C } ? ChildRoutes<K, C> : never);
+    | K
+    | (T[K] extends { children: infer C } ? ChildRoutes<K, C> : never);
 }[keyof T & string];
 
 export type Route = Routes<typeof PAGES>;
@@ -60,7 +60,7 @@ interface RouterContextType {
 export const RouterContext = createContext<RouterContextType>({
   auth: null,
   route: "/",
-  setRoute: () => { },
+  setRoute: () => {},
 });
 
 type AppProps = {
@@ -91,8 +91,8 @@ function Main() {
     route in PAGES
       ? (route as keyof typeof PAGES)
       : (Object.keys(PAGES)
-        .sort((a, b) => b.length - a.length)
-        .find((p) => route.startsWith(p)) as keyof typeof PAGES);
+          .sort((a, b) => b.length - a.length)
+          .find((p) => route.startsWith(p)) as keyof typeof PAGES);
 
   return (
     <View style={{ backgroundColor: "white", flex: 1 }}>

packages/ui/src/transactions.tsx

@@ -40,13 +40,11 @@ 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.updateTransactions() },
+      ]}
     >
-      <View style={{ flex: 1 }}>
+      <View style={{ padding: 10, flex: 1 }}>
         <View style={{ flexShrink: 0 }}>
           <Table.Body />
         </View>
@@ -59,18 +57,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);