Merge pull request #15 from shm11C3/feature_settings

設定画面の追加

package.json

@@ -10,7 +10,7 @@
     "test": "vitest",
     "tauri": "tauri",
     "lint": "biome lint ./src && biome check ./src && biome format --write ./src",
-    "format": "biome format --write ./src && biome check ./src",
+    "format": "biome format --write ./src && biome check ./src --write",
     "lint:ci": "biome ci ./src"
   },
   "devDependencies": {
@@ -28,10 +28,13 @@
     "vitest": "^2.0.5"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.9.0",
     "@phosphor-icons/react": "^2.1.7",
+    "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
     "@tauri-apps/api": "^1",
@@ -43,8 +46,10 @@
     "react": "^18.3.1",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.0",
     "tailwind-merge": "^2.5.2",
     "tailwind-variants": "^0.2.1",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.23.8"
   }
 }

src-tauri/src/commands/config.rs

@@ -19,6 +19,7 @@ pub struct Settings {
   language: String,
   theme: String,
   display_targets: Vec<hardware::HardwareType>,
+  graphSize: String,
 }
 
 impl Default for Settings {
@@ -31,6 +32,7 @@ impl Default for Settings {
         hardware::HardwareType::Memory,
         hardware::HardwareType::GPU,
       ],
+      graphSize: "xl".to_string(),
     }
   }
 }
@@ -133,6 +135,11 @@ impl Settings {
     self.display_targets = new_targets;
     self.write_file()
   }
+
+  pub fn set_graph_size(&mut self, new_size: String) -> Result<(), String> {
+    self.graphSize = new_size;
+    self.write_file()
+  }
 }
 
 #[derive(Debug)]
@@ -179,7 +186,6 @@ pub mod commands {
   }
 
   #[tauri::command]
-
   pub async fn set_language(
     window: Window,
     state: tauri::State<'_, AppState>,
@@ -225,4 +231,19 @@ pub mod commands {
     }
     Ok(())
   }
+
+  #[tauri::command]
+  pub async fn set_graph_size(
+    window: Window,
+    state: tauri::State<'_, AppState>,
+    new_size: String,
+  ) -> Result<(), String> {
+    let mut settings = state.settings.lock().unwrap();
+
+    if let Err(e) = settings.set_graph_size(new_size) {
+      emit_error(&window)?;
+      return Err(e);
+    }
+    Ok(())
+  }
 }

src-tauri/src/main.rs

@@ -66,10 +66,11 @@ fn main() {
       hardware::get_cpu_usage_history,
       hardware::get_memory_usage_history,
       hardware::get_gpu_usage_history,
+      config::commands::get_settings,
       config::commands::set_language,
       config::commands::set_theme,
       config::commands::set_display_targets,
-      config::commands::get_settings
+      config::commands::set_graph_size,
     ])
     .on_menu_event(|event| {
       window_menu_service::handle_menu_event(event);

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "hardware-monitor",
-    "version": "0.1.0"
+    "version": "0.1.1"
   },
   "tauri": {
     "allowlist": {

src/App.tsx

@@ -7,11 +7,12 @@ import {
   useErrorModalListener,
   useSettingsModalListener,
 } from "@/hooks/useTauriEventListener";
-import SettingsSheet from "@/template/SettingsSheet";
 import { useAtom } from "jotai";
 import { selectedMenuAtom } from "./atom/ui";
 import { useSettingsAtom } from "./atom/useSettingsAtom";
 import { useDarkMode } from "./hooks/useDarkMode";
+import ScreenTemplate from "./template/ScreenTemplate";
+import Settings from "./template/Settings";
 import SideMenu from "./template/SideMenu";
 import type { SelectedMenuType } from "./types/ui";
 
@@ -35,16 +36,23 @@ const Page = () => {
   }, [settings?.theme, toggle]);
 
   const displayTargets: Record<SelectedMenuType, JSX.Element> = {
-    dashboard: <Dashboard />,
+    dashboard: (
+      <ScreenTemplate>
+        <Dashboard />
+      </ScreenTemplate>
+    ),
     usage: <ChartTemplate />,
-    settings: <div>TODO</div>,
+    settings: (
+      <ScreenTemplate title="Settings">
+        <Settings />
+      </ScreenTemplate>
+    ),
   };
 
   return (
     <div className="bg-slate-200 dark:bg-gray-900 text-gray-900 dark:text-white min-h-screen">
       <SideMenu />
       {displayTargets[selectedMenu]}
-      <SettingsSheet />
     </div>
   );
 };

src/atom/useSettingsAtom.ts

@@ -1,6 +1,8 @@
 import {
   getSettings,
   setDisplayTargets,
+  setGraphSize,
+  setLanguage,
   setTheme,
 } from "@/services/settingService";
 import type { ChartDataType } from "@/types/hardwareDataType";
@@ -11,9 +13,19 @@ const settingsAtom = atom<Settings>({
   language: "en",
   theme: "light",
   display_targets: [],
+  graphSize: "xl",
 });
 
 export const useSettingsAtom = () => {
+  const mapSettingUpdater: {
+    [K in keyof Settings]: (value: Settings[K]) => Promise<void>;
+  } = {
+    theme: setTheme,
+    display_targets: setDisplayTargets,
+    graphSize: setGraphSize,
+    language: setLanguage,
+  };
+
   const [settings, setSettings] = useAtom(settingsAtom);
 
   useEffect(() => {
@@ -24,6 +36,18 @@ export const useSettingsAtom = () => {
     loadSettings();
   }, [setSettings]);
 
+  const updateSettingAtom = async <K extends keyof Settings>(
+    key: K,
+    value: Settings[K],
+  ) => {
+    try {
+      await mapSettingUpdater[key](value);
+      setSettings((prev) => ({ ...prev, [key]: value }));
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
   const toggleDisplayTarget = async (target: ChartDataType) => {
     const newTargets = settings.display_targets.includes(target)
       ? settings.display_targets.filter((t) => t !== target)
@@ -38,14 +62,9 @@ export const useSettingsAtom = () => {
     }
   };
 
-  const toggleTheme = async (theme: "light" | "dark") => {
-    try {
-      await setTheme(theme);
-      setSettings((prev) => ({ ...prev, theme }));
-    } catch (e) {
-      console.error(e);
-    }
+  return {
+    settings,
+    toggleDisplayTarget,
+    updateSettingAtom,
   };
-
-  return { settings, toggleDisplayTarget, toggleTheme };
 };