From 92156b29cbcc496af705982bdf18dd558e765acb Mon Sep 17 00:00:00 2001
From: Sebastien Castiel <sebastien@castiel.me>
Date: Wed, 17 Jan 2024 12:07:03 -0500
Subject: Use combobox for category selector

---
 src/components/expense-form.tsx | 36 +++++-------------------------------
 1 file changed, 5 insertions(+), 31 deletions(-)

(limited to 'src/components/expense-form.tsx')

diff --git a/src/components/expense-form.tsx b/src/components/expense-form.tsx
index cfc749a..dfaaaa0 100644
--- a/src/components/expense-form.tsx
+++ b/src/components/expense-form.tsx
@@ -1,6 +1,6 @@
 'use client'
-import { CategoryIcon } from '@/app/groups/[groupId]/expenses/category-icon'
 import { AsyncButton } from '@/components/async-button'
+import { CategorySelector } from '@/components/category-selector'
 import { SubmitButton } from '@/components/submit-button'
 import { Button } from '@/components/ui/button'
 import {
@@ -29,9 +29,7 @@ import { Input } from '@/components/ui/input'
 import {
   Select,
   SelectContent,
-  SelectGroup,
   SelectItem,
-  SelectLabel,
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
@@ -227,35 +225,11 @@ export function ExpenseForm({
               render={({ field }) => (
                 <FormItem className="order-3 sm:order-2">
                   <FormLabel>Category</FormLabel>
-                  <Select
+                  <CategorySelector
+                    categories={categories}
+                    defaultValue={field.value}
                     onValueChange={field.onChange}
-                    defaultValue={field.value.toString()}
-                  >
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select a category" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {Object.keys(categoriesByGroup).map((group) => (
-                        <SelectGroup key={group}>
-                          <SelectLabel className="-ml-6">{group}</SelectLabel>
-                          {categoriesByGroup[group].map((category) => (
-                            <SelectItem
-                              key={category.id.toString()}
-                              value={category.id.toString()}
-                            >
-                              <div className="flex items-center gap-3">
-                                <CategoryIcon
-                                  category={category}
-                                  className="w-4 h-4"
-                                />
-                                {category.name}
-                              </div>
-                            </SelectItem>
-                          ))}
-                        </SelectGroup>
-                      ))}
-                    </SelectContent>
-                  </Select>
+                  />
                   <FormDescription>
                     Select the expense category.
                   </FormDescription>
-- 
cgit v1.3