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

@@ -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;

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}%`,