refined infinite article grid and added article filtering

src/components/category/category-select.tsx

@@ -1,33 +1,24 @@
 "use client";
 import { api } from "@/trpc/react";
 import React from "react";
-import { Combobox } from "../combobox";
+import { Combobox, ComboboxProps } from "../combobox";
+import { Icons } from "../icons";
 
-function CategorySelect({
-  initialValue,
-  onSelect,
-}: {
-  initialValue?: string;
-  onSelect: (category?: string) => void;
-}) {
+function CategorySelect(props: Partial<ComboboxProps>) {
   const { data: categories } = api.category.getAll.useQuery();
   return (
-    <div>
-      <Combobox
-        data={
-          categories?.map(({ name, id }) => ({ label: name!, value: id! })) ??
-          []
-        }
-        initialValue={initialValue}
-        onSelect={onSelect}
-        className="w-full"
-        messageUi={{
-          select: "Kategorie auswählen...",
-          placeholder: "Kategorie suchen...",
-          empty: "Keine Kategorien gefunden",
-        }}
-      />
-    </div>
+    <Combobox
+      {...(props as ComboboxProps)}
+      messageUi={{
+        select: "Kategorie auswählen...",
+        selectIcon: Icons.category,
+        placeholder: "Kategorie suchen...",
+        empty: "Keine Kategorien gefunden",
+      }}
+      data={
+        categories?.map(({ name, id }) => ({ label: name!, value: id! })) ?? []
+      }
+    />
   );
 }
 

src/components/category/create-category-dialog.tsx

@@ -30,7 +30,7 @@ const formSchema = categorySchema.pick({
   name: true,
 });
 
-function CreateCategoryDialog() {
+function CreateCategoryDialog({ cb }: { cb?: () => void }) {
   const [open, setOpen] = React.useState<boolean>(false);
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -42,6 +42,7 @@ function CreateCategoryDialog() {
   // 2. Define a submit handler.
   async function onSubmit(values: z.infer<typeof formSchema>) {
     setOpen(false);
+    cb?.();
     await createCategory(values);
   }
   return (