[Update] Config Window: Add ActionButton component.

src-ui/assets/folder_open.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill-rule="evenodd" clip-rule="evenodd"><path d="M0 2h8l3 3h10v4h3l-4 13h-20v-20zm22.646 8h-17.907l-3.385 11h17.907l3.385-11zm-2.646-1v-3h-9.414l-3-3h-6.586v15.75l3-9.75h16z"/></svg>

src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx

@@ -1,4 +1,5 @@
 import { useTranslation } from "react-i18next";
+import FolderOpenSvg from "@images/folder_open.svg?react";
 
 import { useSettingBox } from "../components/useSettingBox";
 import { useSelectedMicDeviceStatus, useMicDeviceListStatus } from "@store";
@@ -16,6 +17,7 @@ export const Appearance = () => {
         RadioButtonContainer,
         DeeplAuthKeyContainer,
         MessageFormatContainer,
+        ActionButtonContainer,
     } = useSettingBox();
 
     const selectFunction = (selected_data) => {
@@ -56,6 +58,8 @@ export const Appearance = () => {
 
             <MessageFormatContainer label={t(`config_window.send_message_format_with_t.label`)} desc={t(`config_window.send_message_format_with_t.desc`)} id="received_with_t"/>
 
+            <ActionButtonContainer label={t(`config_window.open_config_filepath.label`)} IconComponent={FolderOpenSvg} OnclickFunction={()=>{}}/>
+
         </>
     );
 };

src-ui/windows/config_window/setting_section/setting_box/components/action_button/ActionButton.jsx

@@ -0,0 +1,11 @@
+import styles from "./ActionButton.module.scss";
+
+export const ActionButton = ({IconComponent, OnclickFunction}) => {
+    return (
+        <div className={styles.container}>
+            <button className={styles.button_wrapper} onClick={OnclickFunction}>
+                <IconComponent className={styles.button_svg}/>
+            </button>
+        </div>
+    );
+};

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

@@ -0,0 +1,14 @@
+.button_wrapper {
+    padding: 1.6rem;
+    border-radius: 0.4rem;
+    &:hover {
+        background-color: var(--dark_825_color);
+    }
+    &:active {
+        background-color: var(--dark_900_color);
+    }
+}
+
+.button_svg {
+    width: 2.4rem;
+}

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

@@ -12,6 +12,7 @@ import { ThresholdComponent } from "./threshold_component/ThresholdComponent";
 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";
 
 export const useSettingBox = () => {
     const { updateIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
@@ -114,6 +115,17 @@ export const useSettingBox = () => {
         );
     };
 
+
+    const ActionButtonContainer = (props) => {
+        return (
+            <div className={styles.container}>
+                <LabelComponent label={props.label} desc={props.desc} />
+                <ActionButton {...props}/>
+            </div>
+        );
+    };
+
+
     return {
         DropdownMenuContainer,
         SliderContainer,
@@ -124,5 +136,6 @@ export const useSettingBox = () => {
         RadioButtonContainer,
         DeeplAuthKeyContainer,
         MessageFormatContainer,
+        ActionButtonContainer,
     };
 };