From 334b82bfb4261169817b8764373145cac8f2f7d8 Mon Sep 17 00:00:00 2001
From: Cody Seibert <webdevcody@gmail.com>
Date: Thu, 18 Dec 2025 23:48:35 -0500
Subject: [PATCH] Changes from category

---
 .../components/ui/category-autocomplete.tsx   | 10 ++++++++--
 .../tests/utils/components/autocomplete.ts    | 19 +++++++++++++++++++
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/apps/app/src/components/ui/category-autocomplete.tsx b/apps/app/src/components/ui/category-autocomplete.tsx
index 125a15b7..03781808 100644
--- a/apps/app/src/components/ui/category-autocomplete.tsx
+++ b/apps/app/src/components/ui/category-autocomplete.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import * as React from "react";
+import { Tag } from "lucide-react";
 import { Autocomplete } from "@/components/ui/autocomplete";
 
 interface CategoryAutocompleteProps {
@@ -10,6 +10,7 @@ interface CategoryAutocompleteProps {
   placeholder?: string;
   className?: string;
   disabled?: boolean;
+  error?: boolean;
   "data-testid"?: string;
 }
 
@@ -20,6 +21,7 @@ export function CategoryAutocomplete({
   placeholder = "Select or type a category...",
   className,
   disabled = false,
+  error = false,
   "data-testid": testId,
 }: CategoryAutocompleteProps) {
   return (
@@ -28,10 +30,14 @@ export function CategoryAutocomplete({
       onChange={onChange}
       options={suggestions}
       placeholder={placeholder}
-      searchPlaceholder="Search category..."
+      searchPlaceholder="Search or type new category..."
       emptyMessage="No category found."
       className={className}
       disabled={disabled}
+      error={error}
+      icon={Tag}
+      allowCreate
+      createLabel={(v) => `Create "${v}"`}
       data-testid={testId}
       itemTestIdPrefix="category-option"
     />
diff --git a/apps/app/tests/utils/components/autocomplete.ts b/apps/app/tests/utils/components/autocomplete.ts
index 4850cf24..f9015b6d 100644
--- a/apps/app/tests/utils/components/autocomplete.ts
+++ b/apps/app/tests/utils/components/autocomplete.ts
@@ -57,3 +57,22 @@ export async function getCategoryOption(
     .replace(/\s+/g, "-")}`;
   return page.locator(`[data-testid="${optionTestId}"]`);
 }
+
+/**
+ * Click the "Create new" option for a category that doesn't exist
+ */
+export async function clickCreateNewCategoryOption(
+  page: Page
+): Promise<void> {
+  const option = page.locator('[data-testid="category-option-create-new"]');
+  await option.click();
+}
+
+/**
+ * Get the "Create new" option element for categories
+ */
+export async function getCreateNewCategoryOption(
+  page: Page
+): Promise<Locator> {
+  return page.locator('[data-testid="category-option-create-new"]');
+}