From 0c6829616c60df57df53169f212d016b38f07b91 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Wed, 26 Mar 2025 21:46:43 +0900
Subject: [PATCH] [Update/bugfix] Plugins: Fix plugins position. Switchable
 rendering MessageContainer and Plugins.

---
 src-ui/app/main_page/main_section/MainSection.jsx  | 14 ++++++++++----
 .../main_page/main_section/MainSection.module.scss |  2 +-
 src-ui/app/main_page/main_section/PluginHost.jsx   | 11 ++++-------
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src-ui/app/main_page/main_section/MainSection.jsx b/src-ui/app/main_page/main_section/MainSection.jsx
index 2dec160c..d6b1f298 100644
--- a/src-ui/app/main_page/main_section/MainSection.jsx
+++ b/src-ui/app/main_page/main_section/MainSection.jsx
@@ -2,7 +2,7 @@ import { useTranslation } from "react-i18next";
 import styles from "./MainSection.module.scss";
 
 import { TopBar } from "./top_bar/TopBar";
-// import { MessageContainer } from "./message_container/MessageContainer";
+import { MessageContainer } from "./message_container/MessageContainer";
 import { LanguageSelector } from "./language_selector/LanguageSelector";
 
 import { useStore_IsOpenedLanguageSelector } from "@store";
@@ -12,14 +12,20 @@ import { SubtitleSystemContainer } from "./subtitle_system_container/SubtitleSys
 
 import { PluginHost } from "./PluginHost";
 
+import { usePlugins } from "@logics_configs";
+
 export const MainSection = () => {
+    const { currentPluginsData } = usePlugins();
+
+    const render_plugins = currentPluginsData.data.filter((plugin) => plugin.is_enabled && plugin.location === "main_section");
 
     return (
         <div className={styles.container}>
             <TopBar />
-            {/* <SubtitleSystemContainer /> */}
-            <PluginHost />
-            {/* <MessageContainer /> */}
+            {render_plugins.length
+                ? <PluginHost render_components={render_plugins}/>
+                : <MessageContainer />
+            }
             <HandleLanguageSelector />
         </div>
     );
diff --git a/src-ui/app/main_page/main_section/MainSection.module.scss b/src-ui/app/main_page/main_section/MainSection.module.scss
index 29a7907a..0f592a3a 100644
--- a/src-ui/app/main_page/main_section/MainSection.module.scss
+++ b/src-ui/app/main_page/main_section/MainSection.module.scss
@@ -4,7 +4,7 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    // justify-content: space-between;
 }
 
 .language_selector_container {
diff --git a/src-ui/app/main_page/main_section/PluginHost.jsx b/src-ui/app/main_page/main_section/PluginHost.jsx
index 5c01328c..071ac934 100644
--- a/src-ui/app/main_page/main_section/PluginHost.jsx
+++ b/src-ui/app/main_page/main_section/PluginHost.jsx
@@ -1,17 +1,14 @@
 import React from "react";
-import { usePlugins } from "@logics_configs";
 
-export const PluginHost = () => {
-    const { currentPluginsData } = usePlugins();
+export const PluginHost = ({render_components}) => {
 
     return (
-        <div>
-            {currentPluginsData.data
-                .filter((plugin) => plugin.is_enabled && plugin.location === "main_section")
+        <>
+            {render_components
                 .map((plugin, index) => {
                     const PluginComponent = plugin.component;
                     return PluginComponent ? <PluginComponent key={index} /> : null;
                 })}
-        </div>
+        </>
     );
 };
\ No newline at end of file