[Update] Plugins: Add homepage link button.

src-ui/app/_index_css/variables.css

@@ -19,6 +19,7 @@
     --primary_600_color_44: #36877744;
 
     --sent_400_color: #6197b4;
+    --sent_300_color: #6197b4;
     --received_300_color: #a861b4;
     --error_bc_color: #bb4448;
     --error_bc_active_color: #9c3938;
@@ -66,3 +67,4 @@
 
     --font_family: "Yu Gothic UI";
 }
+/* https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors */

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

@@ -1,9 +1,10 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { usePlugins } from "@logics_configs";
 import styles from "./Plugins.module.scss";
 import { PluginsControlComponent } from "../../_components/plugins_control_component/PluginsControlComponent";
 import { useNotificationStatus } from "@logics_common";
+import ExternalLink from "@images/external_link.svg?react";
 
 export const Plugins = () => {
     const {
@@ -87,6 +88,7 @@ const PluginDownloadContainer = () => {
                     title: target_info.title,
                     desc: target_info.desc || null,
                 };
+                const homepage_link = plugin.latest_plugin_info?.homepage_link;
 
                 return (
                     <div key={plugin.plugin_id} className={styles.plugin_wrapper}>
@@ -98,6 +100,8 @@ const PluginDownloadContainer = () => {
                                 {target_locale.desc}
                             </p>
                             {/* <p className={styles.plugin_id}>{plugin.plugin_id}</p> */}
+                            {homepage_link && <HomepageLinkButton homepage_link={homepage_link}/>
+                            }
                         </div>
                         <div className={styles.plugin_info_wrapper}>
                             {plugin.is_error ? (
@@ -117,3 +121,54 @@ const PluginDownloadContainer = () => {
         </div>
     );
 };
+
+const HomepageLinkButton = ({ homepage_link, speed = 40 /* px/s */ }) => {
+    const containerRef = useRef(null);
+    const textRef = useRef(null);
+    const [inlineStyle, setInlineStyle] = useState({});
+
+    const handleMouseEnter = useCallback(() => {
+        const container = containerRef.current;
+        const text = textRef.current;
+        if (!container || !text) return;
+        const overflow = text.scrollWidth - container.clientWidth;
+        if (overflow > 0) {
+            const duration = overflow / speed;
+            setInlineStyle({
+                transform: `translateX(-${overflow}px)`,
+                transition: `transform ${duration}s linear`,
+            });
+        }
+    }, [speed]);
+
+    const handleMouseLeave = useCallback(() => {
+        setInlineStyle({
+            transform: 'translateX(0)',
+            transition: 'transform 0.3s ease-out',
+        });
+    }, []);
+
+    return (
+        <div className={styles.open_homepage_button_wrapper}>
+            <a
+                className={styles.open_homepage_button}
+                href={homepage_link}
+                target="_blank"
+                rel="noreferrer"
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+            >
+                <div className={styles.text_container} ref={containerRef}>
+                    <p
+                    className={styles.open_homepage_text}
+                    ref={textRef}
+                    style={inlineStyle}
+                    >
+                    {homepage_link}
+                    </p>
+                </div>
+                <ExternalLink className={styles.external_link_svg} />
+            </a>
+        </div>
+    );
+};

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

@@ -56,3 +56,44 @@
 //     white-space: nowrap;
 //     text-overflow: ellipsis;
 // }
+
+.open_homepage_button_wrapper {
+    width: 100%;
+}
+
+.open_homepage_button {
+    padding: 0.6rem 0;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    cursor: pointer;
+    text-decoration: none;
+    &:hover .external_link_svg {
+        color: var(--dark_200_color);
+    }
+    &:hover .open_homepage_text {
+        border-bottom: 0.1rem solid var(--dark_500_color);
+    }
+}
+
+.text_container {
+    position: relative;
+    overflow: hidden;
+    flex: 1; /* テキスト部分をアイコンまで伸ばす */
+}
+
+.open_homepage_text {
+    margin: 0; /* pタグのデフォルトマージン除去 */
+    font-size: 1.4rem;
+    color: var(--sent_400_color);
+    white-space: nowrap;
+    display: inline-block;
+    transform: translateX(0);
+    border-bottom: 0.1rem solid var(--sent_400_color);
+}
+
+.external_link_svg {
+    flex-shrink: 0;
+    width: 1.6rem;
+    color: var(--dark_500_color);
+}

src-ui/logics/configs/plugins/usePlugins.js

@@ -227,7 +227,10 @@ export const usePlugins = () => {
                 plugins_data.map(async (plugin_data) => {
                     try {
                         const plugin_info = await asyncFetchPluginInfo(plugin_data.url);
-                        return plugin_info;
+                        return {
+                            ...plugin_info,
+                            homepage_link: plugin_data.homepage_link,
+                        };
                     } catch (error) {
                         console.error("Error fetching plugin info for URL: ", plugin_data.url, error);
                         return {
@@ -235,7 +238,8 @@ export const usePlugins = () => {
                             plugin_id: plugin_data.plugin_id || plugin_data.title,
                             is_error: true,
                             error_message: error.message,
-                            url: plugin_data.url
+                            url: plugin_data.url,
+                            homepage_link: plugin_data.homepage_link,
                         };
                     }
                 })