[Refactor] Move to src-ui/views and src-ui/logics structure.

src-ui/views/app/others/window_title_bar/WindowTitleBar.jsx

@@ -0,0 +1,33 @@
+import { useWindow } from "@logics_common";
+// import clsx from "clsx";
+import styles from "./WindowTitleBar.module.scss";
+import XMarkSvg from "@images/cancel.svg?react";
+import SquareSvg from "@images/square.svg?react";
+import LineSvg from "@images/line.svg?react";
+import VrctSvg from "@images/vrct.svg?react";
+
+export const WindowTitleBar = () => {
+    const { asyncCloseApp, asyncToggleMaximizeApp, asyncMinimizeApp} = useWindow();
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.wrapper} data-tauri-drag-region>
+                <div className={styles.title_wrapper}>
+                    <VrctSvg className={styles.title_svg}/>
+                </div>
+
+                <div className={styles.window_control_wrapper}>
+                    <div className={styles.minimize_button} onClick={asyncMinimizeApp}>
+                        <LineSvg className={styles.line_svg}/>
+                    </div>
+                    <div className={styles.maximize_button} onClick={asyncToggleMaximizeApp}>
+                        <SquareSvg className={styles.square_svg}/>
+                    </div>
+                    <div className={styles.close_button} onClick={asyncCloseApp}>
+                        <XMarkSvg className={styles.x_mark_svg}/>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};

src-ui/views/app/others/window_title_bar/WindowTitleBar.module.scss

@@ -0,0 +1,84 @@
+.container {
+    width: 100%;
+    background-color: var(--dark_900_color);
+    flex-shrink: 0;
+    display: flex;
+}
+
+.wrapper {
+    flex-shrink: 0;
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    height: var(--title_bar_height);
+    margin-top: 0.4rem;
+}
+
+.title_wrapper {
+    padding-left: 1rem;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.title_svg {
+    color: var(--dark_800_color);
+    width: 4rem;
+    height: 100%;
+
+}
+
+.window_control_wrapper {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.minimize_button, .maximize_button, .close_button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 2.8rem;
+    margin-bottom: 0.4rem;
+
+    cursor: pointer;
+    &:hover {
+        .x_mark_svg, .square_svg, .line_svg  {
+            color: var(--dark_100_color);
+        }
+    }
+}
+.minimize_button, .maximize_button {
+    &:hover {
+        background-color: var(--dark_800_color);
+    }
+    &:active {
+        background-color: var(--dark_950_color);
+    }
+}
+.close_button {
+    &:hover {
+        background-color: var(--error_bc_color);
+    }
+    &:active {
+        background-color: var(--error_bc_active_color);
+    }
+}
+
+.x_mark_svg, .square_svg, .line_svg {
+    color: var(--dark_450_color);
+    height: 100%;
+}
+.x_mark_svg {
+    width: 1.8rem;
+}
+.square_svg {
+    width: 1.2rem;
+}
+.line_svg {
+    padding-top: 0.1rem;
+    width: 1.8rem;
+}