[Update] Plugins: Adjust designs.

Add localizations.

locales/en.yml

@@ -244,7 +244,19 @@ config_page:
             label: "Open Config File"
         switch_compute_device:
             label: "Switch VRCT To CPU/GPU Version"
-        section_label_plugins: Plugins
+        section_label_plugins: Plugins # Exception, It'll be moved later.
+
+    plugins:
+        downloaded_version: "Downloaded version: {{downloaded_version}}"
+        latest_version: "Latest version: {{latest_version}}"
+        available_after_updating: "Available after updating to the latest version"
+        unavailable_downloaded: "Currently unavailable due to incompatibility with the VRCT version in use"
+        no_latest_info: "Unable to retrieve the latest information"
+        using_latest_version: "Using the latest version"
+        available_latest_version: "Latest version available"
+        unavailable_latest_version: "Latest version currently unavailable"
+        available_in_latest_vrct_version: "Available in the latest VRCT version"
+        unavailable_not_downloaded: "Currently unavailable"
 
 plugin_notifications:
     downloading: Downloading the plugin.

locales/ja.yml

@@ -244,4 +244,30 @@ config_page:
             label: "設定ファイルを開く"
         switch_compute_device:
             label: "VRCT CPU/GPUバージョンの切り替え"
-        section_label_plugins: プラグイン
+        section_label_plugins: プラグイン # Exception, It'll be moved later.
+
+    plugins:
+        downloaded_version: "ダウンロード済バージョン: {{downloaded_version}}"
+        latest_version: "最新バージョン: {{latest_version}}"
+        available_after_updating: 最新版にアップデート後 利用可能
+        unavailable_downloaded: 現在利用不可 使用中VRCTバージョンとの互換性なし
+        no_latest_info: 最新情報が取得できません
+        using_latest_version: 最新版を使用中
+        available_latest_version: 最新版を利用可能
+        unavailable_latest_version: 最新版は現在利用不可
+        available_in_latest_vrct_version: VRCT最新版で利用可能
+        unavailable_not_downloaded: 現在利用不可
+
+plugin_notifications:
+    downloading: プラグインをダウンロード中。
+    downloaded_success: プラグインのダウンロードが完了しました。
+    downloaded_error: プラグインのダウンロードに失敗しました。
+
+    updating: プラグインをアップデート中。
+    updated_success: プラグインのアップデートが完了しました。
+    updated_error: プラグインのアップデートに失敗しました。
+
+    disabled_out_of_support: 現在のバージョンとの互換性がありません。プラグインを無効にしました。
+
+    is_enabled: プラグインを有効にしました。
+    is_disabled: プラグインを無効にしました。

src-ui/app/config_page/setting_section/setting_box/_components/plugins_control_component/PluginsControlComponent.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import { SwitchBox } from "../index";
 import { _DownloadButton } from "../_atoms/_download_button/_DownloadButton";
 import styles from "./PluginsControlComponent.module.scss";
+import { useTranslation } from "react-i18next";
 
 export const PluginsControlComponent = ({
     variable_state,
@@ -9,6 +10,8 @@ export const PluginsControlComponent = ({
     toggleFunction,
     downloadStartFunction,
 }) => {
+    const { t } = useTranslation();
+
     const option = {
         id: plugin_status.plugin_id,
         is_pending: plugin_status.is_pending,
@@ -19,6 +22,16 @@ export const PluginsControlComponent = ({
         progress: null,
     };
 
+    const downloaded_version = plugin_status.downloaded_plugin_info?.plugin_version;
+    const latest_version = plugin_status.latest_plugin_info?.plugin_version;
+
+    const downloaded_version_label = t("config_page.plugins.downloaded_version",
+        { downloaded_version: downloaded_version }
+    );
+    const latest_version_label = t("config_page.plugins.latest_version",
+        { latest_version: latest_version }
+    );
+
     if (plugin_status.is_downloaded) {
         return (
             <DownloadedPluginControl
@@ -26,6 +39,8 @@ export const PluginsControlComponent = ({
                 plugin_status={plugin_status}
                 toggleFunction={toggleFunction}
                 downloadStartFunction={downloadStartFunction}
+                downloaded_version_label={downloaded_version_label}
+                latest_version_label={latest_version_label}
             />
         );
     } else {
@@ -34,6 +49,8 @@ export const PluginsControlComponent = ({
                 option={option}
                 plugin_status={plugin_status}
                 downloadStartFunction={downloadStartFunction}
+                downloaded_version_label={downloaded_version_label}
+                latest_version_label={latest_version_label}
             />
         );
     }
@@ -45,49 +62,51 @@ const DownloadedPluginControl = ({
     plugin_status,
     toggleFunction,
     downloadStartFunction,
+    downloaded_version_label,
+    latest_version_label,
 }) => {
+    const { t } = useTranslation();
+
     const togglePlugin = () => {
         toggleFunction(plugin_status.plugin_id);
     };
 
-    const latest_version = plugin_status.latest_plugin_info?.plugin_version;
-
-
     if (!plugin_status.downloaded_plugin_info.is_plugin_supported) {
         if (plugin_status.is_latest_version_available) {
             return (
                 <div className={styles.container}>
-                    <p>最新のバージョン: {latest_version}</p>
-                    <p>最新版にアップデート後 利用可能</p>
+                    <p>{downloaded_version_label}</p>
+                    <p>{latest_version_label}</p>
+                    <p>{t("config_page.plugins.available_after_updating")}</p>
                     <_DownloadButton option={option} downloadStartFunction={downloadStartFunction} />
                 </div>
             );
         }
         return (
             <div className={styles.container}>
-                <p>現在利用不可 使用中VRCTバージョンとの互換性なし</p>
+                <p>{t("config_page.plugins.unavailable_downloaded")}</p>
             </div>
         );
     } else if (plugin_status.is_outdated) {
         return (
             <div className={styles.container}>
-                <p>最新情報が取得できません</p>
+                <p>{t("config_page.plugins.no_latest_info")}</p>
                 <SwitchBox variable={option} toggleFunction={togglePlugin} />
             </div>
         );
     } else if (plugin_status.is_latest_version_already) {
         return (
             <div className={styles.container}>
-                <p>最新のバージョン: {latest_version}</p>
-                <p>最新版を使用中</p>
+                <p>{latest_version_label}</p>
+                <p>{t("config_page.plugins.using_latest_version")}</p>
                 <SwitchBox variable={option} toggleFunction={togglePlugin} />
             </div>
         );
     } else if (plugin_status.is_latest_version_available) {
         return (
             <div className={styles.container}>
-                <p>最新のバージョン: {latest_version}</p>
-                <p>最新版を利用可能</p>
+                <p>{latest_version_label}</p>
+                <p>{t("config_page.plugins.available_latest_version")}</p>
                 <_DownloadButton option={option} downloadStartFunction={downloadStartFunction} />
                 <SwitchBox variable={option} toggleFunction={togglePlugin} />
             </div>
@@ -95,7 +114,7 @@ const DownloadedPluginControl = ({
     } else {
         return (
             <div className={styles.container}>
-                <p>最新版は現在利用不可</p>
+                <p>{t("config_page.plugins.available_latest_version")}</p>
                 <SwitchBox variable={option} toggleFunction={togglePlugin} />
             </div>
         );
@@ -103,28 +122,34 @@ const DownloadedPluginControl = ({
 };
 
 
-const NotDownloadedPluginControl = ({ option, plugin_status, downloadStartFunction }) => {
-    const latest_version = plugin_status.latest_plugin_info?.plugin_version;
+const NotDownloadedPluginControl = ({
+    option,
+    plugin_status,
+    downloadStartFunction,
+    downloaded_version_label,
+    latest_version_label,
+}) => {
+    const { t } = useTranslation();
 
     if (plugin_status.is_latest_version_available) {
         return (
             <div className={styles.container}>
-                <p>最新バージョン: {latest_version}</p>
+                <p>{latest_version_label}</p>
                 <_DownloadButton option={option} downloadStartFunction={downloadStartFunction} />
             </div>
         );
     } else if (plugin_status.latest_plugin_info?.is_plugin_supported_latest_vrct) {
         return (
             <div className={styles.container}>
-                <p>最新のバージョン: {latest_version}</p>
-                <p>VRCT最新版で利用可能</p>
+                <p>{latest_version_label}</p>
+                <p>{t("config_page.plugins.available_in_latest_vrct_version")}</p>
             </div>
         );
     } else {
         return (
             <div className={styles.container}>
-                <p>最新バージョン: {latest_version}</p>
-                <p>現在利用不可</p>
+                <p>{latest_version_label}</p>
+                <p>{t("config_page.plugins.unavailable_not_downloaded")}</p>
             </div>
         );
     }

src-ui/app/config_page/setting_section/setting_box/_components/switch_box/SwitchBox.module.scss

@@ -1,7 +1,6 @@
 @import "@scss_mixins";
 
 .switchbox_container {
-    width: 100%;
     display: flex;
     justify-content: end;
     align-items: center;

src-ui/app/config_page/setting_section/setting_box/advanced_settings/plugins/Plugins.jsx

@@ -61,14 +61,18 @@ const PluginDownloadContainer = () => {
 
     const variable_state = currentSavedPluginsStatus.state;
 
+    const filtered_plugins_data = currentPluginsData.data.filter(plugin => !plugin.is_outdated)
+
     // plugin_id で ABC 順にソート
-    const sorted_plugins_data = [...currentPluginsData.data].sort((a, b) =>
+    const sorted_plugins_data = filtered_plugins_data.sort((a, b) =>
         a.plugin_id.localeCompare(b.plugin_id)
     );
 
     // Duplicate
     const is_failed_to_fetch = currentFetchedPluginsInfo.state === "error";
     const is_fetching = currentFetchedPluginsInfo.state === "pending";
+    console.log(sorted_plugins_data);
+
 
     return (
         <div className={styles.plugins_list_container}>
@@ -88,32 +92,27 @@ const PluginDownloadContainer = () => {
 
                 return (
                     <div key={plugin.plugin_id} className={styles.plugin_wrapper}>
-                        <p className={styles.title}>
-                            {target_locale.title}
-                        </p>
-                        <p className={styles.plugin_id}>{plugin.plugin_id}</p>
-                        <p className={styles.desc}>
-                            {target_locale.desc}
-                        </p>
-                        {plugin.is_error ? (
-                            <p style={{ color: "red" }}>Error: {plugin.error_message}</p>
-                        ) : (
-                            <div className={styles.plugin_info_wrapper}>
-                                <div className={styles.plugin_info}>
-                                    <p>
-                                        {plugin.is_downloaded
-                                            ? `現在のバージョン: ${plugin.downloaded_plugin_info?.plugin_version}`
-                                            : null}
-                                    </p>
-                                </div>
+                        <div className={styles.labels_wrapper}>
+                            <p className={styles.title}>
+                                {target_locale.title}
+                            </p>
+                            <p className={styles.desc}>
+                                {target_locale.desc}
+                            </p>
+                            {/* <p className={styles.plugin_id}>{plugin.plugin_id}</p> */}
+                        </div>
+                        <div className={styles.plugin_info_wrapper}>
+                            {plugin.is_error ? (
+                                <p style={{ color: "red" }}>Error: {plugin.error_message}</p>
+                            ) : (
                                 <PluginsControlComponent
                                     variable_state={variable_state}
                                     toggleFunction={toggleFunction}
                                     downloadStartFunction={downloadStartFunction}
                                     plugin_status={plugin}
                                 />
-                            </div>
-                        )}
+                            )}
+                        </div>
                     </div>
                 );
             })}

src-ui/app/config_page/setting_section/setting_box/advanced_settings/plugins/Plugins.module.scss

@@ -13,30 +13,45 @@
 .plugin_wrapper {
     width: 100%;
     display: flex;
-    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
     padding: 2rem;
     &:not(:last-child) {
         border-bottom: 0.1rem solid var(--dark_750_color);
     }
 }
 
+.labels_wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    max-width: 50%;
+}
+
 .plugin_info_wrapper {
     display: flex;
-    width: 100%;
-    justify-content: space-between;
+    justify-content: end;
     align-items: center;
 }
 
 .title {
     font-size: 1.6rem;
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
-
-.plugin_id {
-    font-size: 1rem;
+.desc {
+    font-size: 1.4rem;
+    width: 100%;
+    overflow: hidden;
+    color: var(--dark_500_color);
 }
-
-.download_button {
-    background-color: var(--dark_750_color);
-    padding: 0.4rem 0.6rem;
-    font-size: 1.2rem;
-}
+// .plugin_id {
+//     font-size: 1rem;
+//     color: var(--dark_600_color);
+//     width: 100%;
+//     overflow: hidden;
+//     white-space: nowrap;
+//     text-overflow: ellipsis;
+// }