Merge pull request #26 from shm11C3/feature/toggle-decoration

Feature/toggle-decoration

.vscode/settings.json

@@ -22,7 +22,7 @@
     "editor.formatOnSave": true,
     "editor.inlayHints.enabled": "off"
   },
-  "cSpell.words": ["consts", "directx", "nvapi", "tauri"],
+  "cSpell.words": ["consts", "directx", "fullscreen", "nvapi", "tauri"],
   "tailwindCSS.experimental.classRegex": [
     "tv\\(([^)(]*(?:\\([^)(]*(?:\\([^)(]*(?:\\([^)(]*\\)[^)(]*)*\\)[^)(]*)*\\)[^)(]*)*)\\)"
   ]

src-tauri/src/commands/mod.rs

@@ -1,3 +1,4 @@
 pub mod background_image;
 pub mod config;
 pub mod hardware;
+pub mod ui;

src-tauri/src/commands/ui.rs

@@ -0,0 +1,19 @@
+use tauri::App;
+use tauri::Manager;
+use tauri_plugin_store::StoreExt;
+
+#[warn(unused_must_use)]
+pub fn init(app: &mut App) {
+  let store = app.store("store.json").unwrap();
+
+  // 設定値をロードしてウィンドウの初期状態を設定
+  if let Some(is_decorated) = store.get("window_decorated").and_then(|v| v.as_bool()) {
+    let window = app.get_webview_window("main").unwrap();
+    set_decoration(window, is_decorated);
+  }
+}
+
+#[tauri::command]
+pub fn set_decoration(window: tauri::WebviewWindow, is_decorated: bool) {
+  let _ = window.set_fullscreen(!is_decorated);
+}

src-tauri/src/lib.rs

@@ -11,6 +11,7 @@ mod utils;
 use commands::background_image;
 use commands::config;
 use commands::hardware;
+use commands::ui;
 use tauri::Manager;
 use tauri::Wry;
 
@@ -56,6 +57,9 @@ pub fn run() {
       // ロガーの初期化
       utils::logger::init(path_resolver.app_log_dir().unwrap());
 
+      // UIの初期化
+      commands::ui::init(app);
+
       Ok(())
     })
     .plugin(tauri_plugin_store::Builder::new().build())
@@ -92,6 +96,7 @@ pub fn run() {
       background_image::get_background_images,
       background_image::save_background_image,
       background_image::delete_background_image,
+      ui::set_decoration,
     ])
     .run(tauri::generate_context!())
     .expect("error while running tauri application");

src/App.tsx

@@ -16,6 +16,7 @@ import SideMenu from "./template/SideMenu";
 import type { SelectedDisplayType } from "./types/ui";
 import "@/lib/i18n";
 import { useTranslation } from "react-i18next";
+import { useKeydown } from "./hooks/useInputListener";
 
 const onError = (error: Error, info: ErrorInfo) => {
   console.error("error.message", error.message);
@@ -67,6 +68,8 @@ const Page = () => {
     initBackgroundImage();
   }, [loadSettings, initBackgroundImage]);
 
+  useKeydown();
+
   const displayTargets: Record<SelectedDisplayType, JSX.Element> = {
     dashboard: (
       <ScreenTemplate>

src/hooks/useInputListener.ts

@@ -0,0 +1,27 @@
+import { toggleDecoration } from "@/services/uiService";
+import { useEffect } from "react";
+import { useTauriStore } from "./useTauriStore";
+
+export const useKeydown = () => {
+  const [isDecorated, setDecorated] = useTauriStore("window_decorated", false);
+
+  useEffect(() => {
+    const handleDecoration = async () => {
+      try {
+        await toggleDecoration(!isDecorated);
+        await setDecorated(!isDecorated);
+      } catch (e) {
+        console.error("Failed to toggle window decoration:", e);
+      }
+    };
+
+    const handleKeyDown = async (event: KeyboardEvent) => {
+      if (event.key === "F11") handleDecoration();
+    };
+
+    window.addEventListener("keydown", handleKeyDown, { passive: true });
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isDecorated, setDecorated]);
+};

src/services/uiService.ts

@@ -0,0 +1,5 @@
+import { invoke } from "@tauri-apps/api/core";
+
+export const toggleDecoration = async (isDecorated: boolean): Promise<void> => {
+  return await invoke("set_decoration", { isDecorated });
+};