From 1e1d3657a208c8691986cf5b0a28926415f0ee50 Mon Sep 17 00:00:00 2001
From: Bruno Bernardino <me@brunobernardino.com>
Date: Wed, 26 Mar 2025 15:55:04 +0000
Subject: [PATCH] Improve UX of expenses

Enter on expense description will submit, and auto-complete suggestions will start from closer to longer matches.
---
 components/expenses/ExpenseModal.tsx | 11 +++++++++++
 lib/data/expenses.ts                 |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/components/expenses/ExpenseModal.tsx b/components/expenses/ExpenseModal.tsx
index b16878a..4c275b6 100644
--- a/components/expenses/ExpenseModal.tsx
+++ b/components/expenses/ExpenseModal.tsx
@@ -137,6 +137,17 @@ export default function ExpenseModal(
                 newExpenseDescription.value = event.currentTarget.value;
                 fetchSuggestions(event.currentTarget.value);
               }}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  onClickSave(
+                    formatInputToNumber(newExpenseCost.value),
+                    newExpenseDescription.value,
+                    newExpenseBudget.value,
+                    newExpenseDate.value,
+                    newExpenseIsRecurring.value,
+                  );
+                }
+              }}
               onFocus={() => {
                 if (suggestions.value.length > 0) {
                   showSuggestions.value = true;
diff --git a/lib/data/expenses.ts b/lib/data/expenses.ts
index ddf6f64..3e9b984 100644
--- a/lib/data/expenses.ts
+++ b/lib/data/expenses.ts
@@ -124,7 +124,7 @@ export async function getExpenseByName(userId: string, name: string) {
 
 export async function getExpenseSuggestions(userId: string, name: string) {
   const expenses = await db.query<Pick<Expense, 'description'>>(
-    sql`SELECT DISTINCT "description" FROM "bewcloud_expenses" WHERE "user_id" = $1 AND LOWER("description") ILIKE LOWER($2) ORDER BY "description" ASC`,
+    sql`SELECT "description" FROM "bewcloud_expenses" WHERE "user_id" = $1 AND LOWER("description") ILIKE LOWER($2) GROUP BY "description" ORDER BY LENGTH("description") ASC, "description" ASC`,
     [
       userId,
       `%${name}%`,