chore(react/note_icon): add back filter by category

apps/client/src/widgets/note_icon.tsx

@@ -6,6 +6,7 @@ import { useCallback, useEffect, useState } from "preact/hooks";
 import server from "../services/server";
 import type { Category, Icon } from "./icon_list";
 import FormTextBox from "./react/FormTextBox";
+import FormSelect from "./react/FormSelect";
 
 interface IconToCountCache {
     iconClassToCountMap: Record<string, number>;
@@ -13,6 +14,7 @@ interface IconToCountCache {
 
 interface IconData {
     iconToCount: Record<string, number>;
+    categories: Category[];
     icons: Icon[];
 }
 
@@ -49,7 +51,7 @@ export default function NoteIcon() {
 
 function NoteIconList() {
     const [ search, setSearch ] = useState<string>();
-    const [ categoryId, setCategoryId ] = useState<number>();
+    const [ categoryId, setCategoryId ] = useState<string>("0");
     const [ iconData, setIconData ] = useState<IconData>();
 
     useEffect(() => {
@@ -62,7 +64,7 @@ function NoteIconList() {
             let icons: Icon[] = fullIconData.icons;
             if (search || categoryId) {
                 icons = icons.filter((icon) => {
-                    if (categoryId && icon.category_id !== categoryId) {
+                    if (categoryId !== "0" && String(icon.category_id) !== categoryId) {
                         return false;
                     }
 
@@ -78,7 +80,8 @@ function NoteIconList() {
 
             setIconData({
                 iconToCount,
-                icons
+                icons,
+                categories: fullIconData.categories
             })
         }
 
@@ -88,7 +91,13 @@ function NoteIconList() {
     return (
         <>
             <div class="filter-row">
-                <span>{t("note_icon.category")}</span> <select name="icon-category" class="form-select"></select>
+                <span>{t("note_icon.category")}</span>
+                <FormSelect
+                    name="icon-category"
+                    values={fullIconData?.categories ?? []}
+                    currentValue={categoryId} onChange={setCategoryId}
+                    keyProperty="id" titleProperty="name"
+                />
 
                 <span>{t("note_icon.search")}</span>
                 <FormTextBox

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

@@ -20,6 +20,7 @@ interface ValueConfig<T, Q> {
 
 interface FormSelectProps<T, Q> extends ValueConfig<T, Q> {
     id?: string;
+    name?: string;
     onChange: OnChangeListener;
     style?: CSSProperties;
 }
@@ -27,9 +28,9 @@ interface FormSelectProps<T, Q> extends ValueConfig<T, Q> {
 /**
  * Combobox component that takes in any object array as data. Each item of the array is rendered as an item, and the key and values are obtained by looking into the object by a specified key.
  */
-export default function FormSelect<T>({ id, onChange, style, ...restProps }: FormSelectProps<T, T>) {
+export default function FormSelect<T>({ name, id, onChange, style, ...restProps }: FormSelectProps<T, T>) {
     return (
-        <FormSelectBody id={id} onChange={onChange} style={style}>
+        <FormSelectBody name={name} id={id} onChange={onChange} style={style}>
             <FormSelectGroup {...restProps} />
         </FormSelectBody>
     );
@@ -38,9 +39,9 @@ export default function FormSelect<T>({ id, onChange, style, ...restProps }: For
 /**
  * Similar to {@link FormSelect}, but the top-level elements are actually groups.
  */
-export function FormSelectWithGroups<T>({ id, values, keyProperty, titleProperty, currentValue, onChange }: FormSelectProps<T, FormSelectGroup<T>>) {
+export function FormSelectWithGroups<T>({ name, id, values, keyProperty, titleProperty, currentValue, onChange }: FormSelectProps<T, FormSelectGroup<T>>) {
     return (
-        <FormSelectBody id={id} onChange={onChange}>
+        <FormSelectBody name={name} id={id} onChange={onChange}>
             {values.map(({ title, items }) => {
                 return (
                     <optgroup label={title}>
@@ -52,7 +53,7 @@ export function FormSelectWithGroups<T>({ id, values, keyProperty, titleProperty
     )
 }
 
-function FormSelectBody({ id, children, onChange, style }: { id?: string, children: ComponentChildren, onChange: OnChangeListener, style?: CSSProperties }) {
+function FormSelectBody({ id, name, children, onChange, style }: { id?: string, name?: string, children: ComponentChildren, onChange: OnChangeListener, style?: CSSProperties }) {
     return (
         <select
             id={id}