[Update] Add Window Title bar.

[bugfix] Note: I think this is tauri's bug. When I try to resize the window and hovered dragable area, I could see resize cursor but it work as a dragging the window behavior that should't be.
Updated npm packages but still not work so I  managed it as adding margin-top by referring Discord title bar.

src-ui/app/App.jsx

@@ -2,6 +2,7 @@ import { getCurrent } from "@tauri-apps/api/window";
 import { useEffect, useRef } from "react";
 import { useStartPython } from "@logics/useStartPython";
 // import { useConfig } from "@logics/useConfig";
+import { WindowTitleBar } from "./window_title_bar/WindowTitleBar";
 import { MainPage } from "./main_page/MainPage";
 import { ConfigPage } from "./config_page/ConfigPage";
 import styles from "./App.module.scss";
@@ -12,10 +13,14 @@ export const App = () => {
             <StartPythonFacadeComponent />
             <UiLanguageController />
             <ConfigPageCloseTrigger />
-            <ConfigPage />
-            <MainPage />
             <UiSizeController />
             <FontFamilyController />
+
+            <WindowTitleBar />
+            <div className={styles.pages_wrapper}>
+                <ConfigPage />
+                <MainPage />
+            </div>
         </div>
     );
 };
@@ -84,7 +89,6 @@ const StartPythonFacadeComponent = () => {
 
 
     useEffect(() => {
-        main_page.setDecorations(true);
         if (!hasRunRef.current) {
             asyncStartPython().then((result) => {
                 getUiLanguage();

src-ui/app/App.module.scss

@@ -1,6 +1,16 @@
 .container {
+    // position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+
+.pages_wrapper {
     position: relative;
     width: 100%;
-    height: 100vh;
+    height: 100%;
     overflow: hidden;
 }

src-ui/app/config_page/topbar/Topbar.module.scss

@@ -1,15 +1,18 @@
 .container {
     width: 100%;
     height: 0%;
-    transition: transform 0.5s ease;
+    transition: top 0.5s ease;
+    position: absolute;
+    top: 0;
+    left: 0;
 }
 
 .show_config.container {
-    transform: translateY(0vh);
+    top: 0;
 }
 
 .show_main.container {
-    transform: translateY(100vh);
+    top: 100%;
 }
 
 

src-ui/app/main_page/MainPage.module.scss

@@ -13,7 +13,7 @@
 }
 
 .show_main.main_page {
-    transform: translateY(0);
+    transform: translateY(0%);
 }
 
 

src-ui/app/window_title_bar/WindowTitleBar.jsx

@@ -0,0 +1,50 @@
+// 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";
+
+import { appWindow } from "@tauri-apps/api/window";
+
+export const WindowTitleBar = () => {
+
+    const minimize = () => {
+        appWindow.minimize();
+    };
+
+    const maximize = async () => {
+        const maximizeState = await appWindow.isMaximized();
+        if (!maximizeState) {
+            appWindow.maximize();
+        } else {
+            appWindow.unmaximize();
+        }
+    };
+
+    const close = () => {
+        appWindow.close();
+    };
+
+    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={minimize}>
+                        <LineSvg className={styles.line_svg}/>
+                    </div>
+                    <div className={styles.maximize_button} onClick={maximize}>
+                        <SquareSvg className={styles.square_svg}/>
+                    </div>
+                    <div className={styles.close_button} onClick={close}>
+                        <XMarkSvg className={styles.x_mark_svg}/>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};

src-ui/app/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: 2rem;
+    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: #bb4448;
+    }
+    &:active {
+        background-color: #9c3938;
+    }
+}
+
+.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;
+}