From 3fa290a2570ec5d6537e5f7da8c2aae1754c462b Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 21 Aug 2025 14:57:54 +0300
Subject: [PATCH] chore(react/note_icon): add back filter by category

---
 apps/client/src/widgets/note_icon.tsx        | 17 +++++++++++++----
 apps/client/src/widgets/react/FormSelect.tsx | 11 ++++++-----
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/apps/client/src/widgets/note_icon.tsx b/apps/client/src/widgets/note_icon.tsx
index c37064355..48b37e0ba 100644
--- a/apps/client/src/widgets/note_icon.tsx
+++ b/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
diff --git a/apps/client/src/widgets/react/FormSelect.tsx b/apps/client/src/widgets/react/FormSelect.tsx
index e4c9aa761..3f11c3f98 100644
--- a/apps/client/src/widgets/react/FormSelect.tsx
+++ b/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}