Merge branch 'ui' into develop

src-ui/app/_index_css/root.css

@@ -42,4 +42,9 @@ svg {
 
 p {
     white-space: pre-wrap;
+}
+img {
+    user-select: none;
+    -webkit-user-drag: none;
+    -webkit-user-select: none;
 }

src-ui/app/config_page/setting_section/setting_box/_components/compute_device/ComputeDevice.jsx

@@ -0,0 +1,27 @@
+import styles from "./ComputeDevice.module.scss";
+import { DropdownMenu } from "../dropdown_menu/DropdownMenu";
+import { ActionButton } from "../action_button/ActionButton";
+import HelpSvg from "@images/help.svg?react";
+import { useStore_OpenedQuickSetting } from "@store"
+
+export const ComputeDevice = (props) => {
+    const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
+
+    const onClickFunction = () => {
+        updateOpenedQuickSetting("update_software");
+    };
+
+    return (
+        <div className={styles.container}>
+            <DropdownMenu
+                {...props}
+                is_disabled={true}
+            />
+            <ActionButton
+                {...props}
+                IconComponent={HelpSvg}
+                onclickFunction={onClickFunction}
+            />
+        </div>
+    );
+};

src-ui/app/config_page/setting_section/setting_box/_components/compute_device/ComputeDevice.module.scss

@@ -0,0 +1,6 @@
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 2rem;
+}

src-ui/app/config_page/setting_section/setting_box/_components/index.js

@@ -1,4 +1,5 @@
 export { ActionButton } from "./action_button/ActionButton";
+export { ComputeDevice } from "./compute_device/ComputeDevice";
 export { DeeplAuthKey, OpenWebpage_DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey";
 export { DropdownMenu } from "./dropdown_menu/DropdownMenu";
 export { Entry } from "./entry/Entry";

src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx

@@ -12,6 +12,7 @@ import {
     OpenWebpage_DeeplAuthKey,
     DeeplAuthKey,
     ActionButton,
+    ComputeDevice,
     WordFilter,
     WordFilterListToggleComponent,
     DownloadModels,
@@ -99,6 +100,10 @@ export const ActionButtonContainer = (props) => (
     <CommonContainer Component={ActionButton} {...props} add_break_point={false}/>
 );
 
+export const ComputeDeviceContainer = (props) => (
+    <CommonContainer Component={ComputeDevice} {...props} />
+);
+
 export const WordFilterContainer = (props) => (
     <div className={styles.word_filter_container}>
         <div className={styles.word_filter_switch_section}>

src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx

@@ -96,6 +96,7 @@ const OpenConfigFolderContainer = () => {
     );
 };
 
+// Duplicate
 import { useStore_OpenedQuickSetting } from "@store";
 const OpenSwitchComputeDeviceModalContainer = () => {
     const { t } = useTranslation();

src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx

@@ -26,6 +26,7 @@ import {
     DownloadModelsContainer,
     RadioButtonContainer,
     DropdownMenuContainer,
+    ComputeDeviceContainer,
 } from "../_templates/Templates";
 
 import {
@@ -326,6 +327,9 @@ const WhisperWeightType_Box = () => {
     );
 };
 
+
+// Duplicate
+import { useComputeMode } from "@logics_common";
 const WhisperComputeDevice_Box = () => {
     const { t } = useTranslation();
     const { currentSelectedWhisperComputeDevice, setSelectedWhisperComputeDevice } = useSelectedWhisperComputeDevice();
@@ -341,6 +345,19 @@ const WhisperComputeDevice_Box = () => {
     const target_index = findKeyByDeviceValue(currentSelectableWhisperComputeDeviceList.data, currentSelectedWhisperComputeDevice.data);
 
 
+    const { currentComputeMode } = useComputeMode();
+    if (currentComputeMode.data === "cpu") {
+        return (
+            <ComputeDeviceContainer
+                label={t("config_page.transcription.whisper_compute_device.label")}
+                selected_id={target_index}
+                list={list_for_ui}
+                selectFunction={selectFunction}
+                state={currentSelectedWhisperComputeDevice.state}
+            />
+        )
+    }
+
     return (
         <DropdownMenuContainer
             dropdown_id="whisper_compute_device"

src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx

@@ -15,6 +15,7 @@ import {
     DownloadModelsContainer,
     DeeplAuthKeyContainer,
     DropdownMenuContainer,
+    ComputeDeviceContainer,
 } from "../_templates/Templates";
 
 export const Translation = () => {
@@ -70,6 +71,8 @@ const CTranslate2WeightType_Box = () => {
     );
 };
 
+// Duplicate
+import { useComputeMode } from "@logics_common";
 const CTranslation2ComputeDevice_Box = () => {
     const { t } = useTranslation();
     const { currentSelectedCTranslate2ComputeDevice, setSelectedCTranslate2ComputeDevice } = useSelectedCTranslate2ComputeDevice();
@@ -84,6 +87,20 @@ const CTranslation2ComputeDevice_Box = () => {
 
     const target_index = findKeyByDeviceValue(currentSelectableCTranslate2ComputeDeviceList.data, currentSelectedCTranslate2ComputeDevice.data);
 
+
+    const { currentComputeMode } = useComputeMode();
+    if (currentComputeMode.data === "cpu") {
+        return (
+            <ComputeDeviceContainer
+                label={t("config_page.translation.ctranslate2_compute_device.label")}
+                selected_id={target_index}
+                list={list_for_ui}
+                selectFunction={selectFunction}
+                state={currentSelectedCTranslate2ComputeDevice.state}
+            />
+        )
+    }
+
     return (
         <DropdownMenuContainer
             dropdown_id="ctranslate2_compute_device"

src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx

@@ -15,10 +15,10 @@ export const RightSideComponents = () => {
             <OpenOverlayQuickSetting />
             <SoftwareUpdateAvailableButton />
             <a
-            className={styles.help_and_info_button}
+                className={styles.help_and_info_button}
-            href="https://mzsoftware.notion.site/VRCT-Documents-be79b7a165f64442ad8f326d86c22246"
+                href="https://docs.google.com/spreadsheets/d/1_L5i-1U6PB1dnaPPTE_5uKMfqOpkLziPyRkiMLi4mqU/edit?usp=sharing"
-            target="_blank"
+                target="_blank"
-            rel="noreferrer"
+                rel="noreferrer"
             >
                 <HelpSvg className={styles.help_svg} />
             </a>

src-ui/app/splash_component/SplashComponent.jsx

@@ -5,6 +5,7 @@ import { DownloadModelsContainer } from "./download_models_container/DownloadMod
 import MegaphoneSvg from "@images/megaphone.svg?react";
 import XMarkSvg from "@images/cancel.svg?react";
 import { appWindow } from "@tauri-apps/api/window";
+import clsx from "clsx";
 
 export const SplashComponent = () => {
     return (
@@ -17,33 +18,57 @@ export const SplashComponent = () => {
     );
 };
 
-const AnnouncementsContainer = () => {
+const SHOW_MEGAPHONE_TIME = 1000;
-    const labels = ["VRCT Real-Time Announcements", "VRCTからのお知らせ"];
-    const [currentLabelIndex, setCurrentLabelIndex] = useState(0);
 
+const AnnouncementsContainer = () => {
+    const labels = ["Check the Latest Status", "最新の状況を確認"];
+    const [is_shown, setIsShown] = useState(0);
+    const [currentLabelIndex, setCurrentLabelIndex] = useState(0);
+    const [is_labels_active, setIsLabelsActive] = useState(false);
 
     useEffect(() => {
-        const labelInterval = setInterval(() => {
+        const showTimeout = setTimeout(() => {
-            setCurrentLabelIndex((prevIndex) => (prevIndex + 1) % labels.length);
+            setIsShown(true);
-        }, 6000);
+        }, SHOW_MEGAPHONE_TIME);
-        return () => clearInterval(labelInterval);
+
-    }, [labels.length]);
+        const labelsTimeout = setTimeout(() => {
+            setIsLabelsActive(true);
+        }, SHOW_MEGAPHONE_TIME + 500);
+
+        let labelInterval;
+        if (is_labels_active) {
+            labelInterval = setInterval(() => {
+                setCurrentLabelIndex((prevIndex) => (prevIndex + 1) % labels.length);
+            }, 4000);
+        }
+
+        return () => {
+            clearTimeout(showTimeout);
+            clearTimeout(labelsTimeout);
+            if (labelInterval) clearInterval(labelInterval);
+        };
+    }, [is_labels_active, labels.length]);
+
 
     return (
         <a
+            className={clsx(styles.announcements_button_wrapper, { [styles.is_shown]: is_shown })}
             href="https://docs.google.com/spreadsheets/d/1_L5i-1U6PB1dnaPPTE_5uKMfqOpkLziPyRkiMLi4mqU/edit?usp=sharing"
             target="_blank"
             rel="noreferrer"
         >
             <button className={styles.announcements_button}>
                 <MegaphoneSvg className={styles.announcements_link_svg} />
-                <p className={styles.announcements_label}>{labels[currentLabelIndex]}</p>
+                <p className={clsx(styles.announcements_label, { [styles.is_labels_active]: is_labels_active })}>
+                    {labels[currentLabelIndex]}
+                </p>
             </button>
         </a>
     );
 };
 
 
+
 const CloseButtonContainer = () => {
     const close = () => {
         appWindow.close();

src-ui/app/splash_component/SplashComponent.module.scss

@@ -5,19 +5,32 @@
     position: relative;
 }
 
-.announcements_button {
+.announcements_button_wrapper {
     position: absolute;
     top: 16px;
     left: 20px;
-    border: 1px solid var(--dark_600_color);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    &.is_shown {
+        opacity: 1;
+    }
+}
+.announcements_button {
+    border: 1px solid var(--dark_700_color);
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 6px;
-    padding: 6px 8px;
+    padding: 4px 8px;
     border-radius: 4px;
     &:hover {
-        background-color: var(--dark_750_color);
+        background-color: var(--dark_825_color);
+        & .announcements_label {
+            color: var(--dark_basic_text_color);
+        }
+        & .announcements_link_svg {
+            color: var(--primary_300_color);
+        }
     }
     &:active {
         background-color: var(--dark_850_color);
@@ -27,6 +40,12 @@
 
 .announcements_label {
     font-size: 12px;
+    color: var(--dark_400_color);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    &.is_labels_active {
+        opacity: 1;
+    }
 }
 .announcements_link_svg {
     width: 20px;