chore(react/dialogs): add back badges for choose note type

apps/client/src/widgets/dialogs/note_type_chooser.tsx

@@ -10,6 +10,7 @@ import note_types from "../../services/note_types";
 import { MenuCommandItem, MenuItem } from "../../menus/context_menu";
 import { TreeCommandNames } from "../../menus/tree_context_menu";
 import { Suggestion } from "../../services/note_autocomplete";
+import Badge from "../react/Badge";
 
 export interface ChooseNoteTypeResponse {
     success: boolean;
@@ -88,7 +89,8 @@ function NoteTypeChooserDialogComponent({ callback }: NoteTypeChooserDialogProps
             <FormGroup label={t("note_type_chooser.modal_body")}>
                 <FormList onSelect={onNoteTypeSelected}>
                     {noteTypes.map((_item) => {
-                        if (_item.title === "----") {                            
+                        if (_item.title === "----") {     
+                            return;                       
                         }
 
                         const item = _item as MenuCommandItem<TreeCommandNames>;
@@ -98,8 +100,10 @@ function NoteTypeChooserDialogComponent({ callback }: NoteTypeChooserDialogProps
                         } else {
                             return <FormListItem
                                 value={[ item.type, item.templateNoteId ].join(",") }
-                                icon={item.uiIcon}
+                                icon={item.uiIcon}>
-                                text={item.title} />;                            
+                                    {item.title}
+                                    {item.badges && item.badges.map((badge) => <Badge {...badge} />)}
+                                </FormListItem>;                            
                         }
                     })}
                 </FormList>

apps/client/src/widgets/react/Badge.tsx

@@ -0,0 +1,8 @@
+interface BadgeProps {
+    className?: string;
+    title: string;
+}
+
+export default function Badge({ title, className }: BadgeProps) {
+    return <span class={`badge ${className ?? ""}`}>{title}</span>
+}

apps/client/src/widgets/react/FormList.tsx

@@ -22,16 +22,16 @@ export default function FormList({ children, onSelect }: FormListOpts) {
 }
 
 interface FormListItemOpts {
-    text: string;
+    children: ComponentChildren;
     icon?: string;
     value?: string;
 }
 
-export function FormListItem({ text, icon, value }: FormListItemOpts) {
+export function FormListItem({ children, icon, value }: FormListItemOpts) {
     return (
         <a class="dropdown-item" data-value={value}>
             <Icon icon={icon} />&nbsp;
-            {text}
+            {children}
         </a>
     );
 }