[Update/bugfix] Config Window: WordFilter. Add toggle button that can open and close the word filter list. And Add the text that the word filter list's length.

fix the error, input_value undefined but do split function.

src-ui/store.js

@@ -138,6 +138,7 @@ export const { atomInstance: Atom_ReceivedMessageFormatWithT, useHook: useReceiv
     is_message_first: true,
 }, "ReceivedMessageFormatWithT");
 
+export const { atomInstance: Atom_IsOpenedWordFilterList, useHook: useIsOpenedWordFilterList } = createAtomWithHook(false, "IsOpenedWordFilterList");
 export const { atomInstance: Atom_WordFilterList, useHook: useWordFilterList } = createAtomWithHook(word_filter_list, "WordFilterList");
 
 

src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.jsx

@@ -13,7 +13,7 @@ import { RadioButton } from "./radio_button/RadioButton";
 import { OpenWebpage_DeeplAuthKey, DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey";
 import { MessageFormat } from "./message_format/MessageFormat";
 import { ActionButton } from "./action_button/ActionButton";
-import { WordFilter } from "./word_filter/WordFilter";
+import { WordFilter, WordFilterListToggleComponent } from "./word_filter/WordFilter";
 
 export const useSettingBox = () => {
     const { updateIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
@@ -129,12 +129,14 @@ export const useSettingBox = () => {
 
     const WordFilterContainer = (props) => {
         return (
-            <div className={styles.threshold_container}>
+            <div className={styles.word_filter_container}>
-                <div className={styles.threshold_switch_section}>
+                <div className={styles.word_filter_switch_section}>
+                    <div className={styles.word_filter_label_wrapper}>
                         <LabelComponent label={props.label} desc={props.desc}/>
-                    {/* <ActionButton {...props}/> */}
                     </div>
-                <div className={styles.threshold_section}>
+                    <WordFilterListToggleComponent/>
+                </div>
+                <div className={styles.word_filter_section}>
                     <WordFilter {...props}/>
                 </div>
             </div>

src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.module.scss

@@ -52,3 +52,26 @@
 .message_format_section {
     width: 100%;
 }
+
+
+.word_filter_container {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    gap: 2rem;
+    background-color: var(--dark_888_color);
+    padding: 2rem;
+}
+
+.word_filter_switch_section {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.word_filter_label_wrapper {
+    max-width: 34rem;
+}

src-ui/windows/config_window/setting_section/setting_box/components/word_filter/WordFilter.jsx

@@ -1,16 +1,18 @@
 import styles from "./WordFilter.module.scss";
 import { _Entry } from "../_atoms/_entry/_Entry";
 import { useState } from "react";
-import { useWordFilterList } from "@store";
+import { useWordFilterList, useIsOpenedWordFilterList } from "@store";
 export const WordFilter = () => {
     const [input_value, setInputValue] = useState();
     const { currentWordFilterList, updateWordFilterList } = useWordFilterList();
+    const { currentIsOpenedWordFilterList, updateIsOpenedWordFilterList } = useIsOpenedWordFilterList();
 
     const onChangeEntry = (e) => {
         setInputValue(e.target.value);
     };
 
     const addWords = () => {
+        if (input_value === undefined) return;
         const input_value_array = input_value.split(",");
 
         let updated_list = [...currentWordFilterList];
@@ -32,6 +34,7 @@ export const WordFilter = () => {
         }
 
         updateWordFilterList(updated_list);
+        updateIsOpenedWordFilterList(true);
     };
 
 
@@ -54,6 +57,7 @@ export const WordFilter = () => {
 
     return (
         <div className={styles.container}>
+            { currentIsOpenedWordFilterList &&
             <div className={styles.list_section_wrapper}>
                 {
                     currentWordFilterList.map((item, index) => {
@@ -61,6 +65,7 @@ export const WordFilter = () => {
                     })
                 }
             </div>
+            }
             <div className={styles.entry_section_wrapper}>
                 <_Entry width="30rem" onChange={onChangeEntry}/>
                 <button className={styles.add_button} onClick={addWords}>Add</button>
@@ -101,3 +106,34 @@ const WordFilterItem = (props) => {
         </div>
     );
 };
+
+import { useTranslation } from "react-i18next";
+
+import ArrowLeftSvg from "@images/arrow_left.svg?react";
+export const WordFilterListToggleComponent = (props) => {
+    const { t } = useTranslation();
+    const { currentIsOpenedWordFilterList, updateIsOpenedWordFilterList } = useIsOpenedWordFilterList();
+    const { currentWordFilterList } = useWordFilterList();
+
+
+    const svg_class_names = clsx(styles["arrow_left_svg"], {
+        [styles.to_down]: !currentIsOpenedWordFilterList,
+        [styles.to_up]: currentIsOpenedWordFilterList
+    });
+
+    const OnclickFunction = () => {
+        updateIsOpenedWordFilterList(!currentIsOpenedWordFilterList);
+    };
+
+    const word_filter_list_length = currentWordFilterList.filter(item => item.is_redoable === false).length;
+
+
+    return (
+        <div className={styles.toggle_button_container}>
+            <p className={styles.words_count_text}>{t("config_window.mic_word_filter.count_desc", {count: word_filter_list_length} )}</p>
+            <button className={styles.toggle_button_wrapper} onClick={OnclickFunction}>
+                <ArrowLeftSvg className={svg_class_names}/>
+            </button>
+        </div>
+    );
+};

src-ui/windows/config_window/setting_section/setting_box/components/word_filter/WordFilter.module.scss

@@ -89,3 +89,37 @@
         background-color: var(--primary_700_color);
     }
 }
+
+
+
+.toggle_button_container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 2rem;
+}
+
+.words_count_text {
+    font-size: 1.6rem;
+}
+
+.toggle_button_wrapper {
+    padding: 1.6rem;
+    border-radius: 0.4rem;
+    &:hover {
+        background-color: var(--dark_825_color);
+    }
+    &:active {
+        background-color: var(--dark_900_color);
+    }
+}
+
+.arrow_left_svg {
+    width: 2.4rem;
+    &.to_down {
+        transform: rotate(-90deg);
+    }
+    &.to_up {
+        transform: rotate(90deg);
+    }
+}