Merge pull request #5 from davidchalifoux/main

v0.0.3

package.json

@@ -16,12 +16,17 @@
     "@tabler/icons-react": "^2.47.0",
     "@tanstack/react-query": "^5.20.2",
     "@tauri-apps/api": "^1.5.3",
+    "chroma-js": "^2.4.2",
+    "mantine-form-zod-resolver": "^1.1.0",
+    "nanoid": "^5.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "zod": "^3.22.4",
     "zustand": "^4.5.0"
   },
   "devDependencies": {
     "@tauri-apps/cli": "^1.5.9",
+    "@types/chroma-js": "^2.4.4",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.2.1",

src-tauri/Cargo.toml

@@ -13,7 +13,7 @@ edition = "2021"
 tauri-build = { version = "1.5", features = [] }
 
 [dependencies]
-tauri = { version = "1.5", features = [
+tauri = { version = "1.5", features = [ "window-set-skip-taskbar",
     "updater",
     "window-start-dragging",
     "window-minimize",

src-tauri/src/main.rs

@@ -2,7 +2,9 @@
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
 use mdns_sd::{ServiceDaemon, ServiceEvent};
-use tauri::{Manager, SystemTray, SystemTrayEvent, SystemTrayMenu};
+use tauri::{
+    CustomMenuItem, Manager, SystemTray, SystemTrayEvent, SystemTrayMenu, SystemTrayMenuItem,
+};
 
 #[derive(Clone, Debug, serde::Serialize)]
 struct ElgatoService {
@@ -64,7 +66,13 @@ fn scan() -> Vec<ElgatoService> {
 }
 
 fn main() {
-    let tray_menu = SystemTrayMenu::new();
+    let quit = CustomMenuItem::new("quit".to_string(), "Quit");
+    let hide = CustomMenuItem::new("hide".to_string(), "Hide");
+
+    let tray_menu = SystemTrayMenu::new()
+        .add_item(hide)
+        .add_native_item(SystemTrayMenuItem::Separator)
+        .add_item(quit);
     let system_tray = SystemTray::new().with_menu(tray_menu);
 
     tauri::Builder::default()
@@ -73,19 +81,39 @@ fn main() {
             SystemTrayEvent::LeftClick { .. } => {
                 let window = app.get_window("main").unwrap();
 
-                let is_visible = window.is_visible().unwrap_or_default();
+                let item_handle = app.tray_handle().get_item("hide");
+
                 let is_focused = window.is_focused().unwrap_or_default();
 
-                if is_visible && is_focused {
-                    println!("Hiding window");
-                    window.hide().unwrap();
-                } else if is_visible {
-                    println!("Focusing window");
+                if !is_focused {
                     window.set_focus().unwrap();
+                    item_handle.set_title("Hide").unwrap();
                 } else {
-                    println!("Showing window");
-                    window.show().unwrap();
-                    window.set_focus().unwrap();
+                    window.hide().unwrap();
+                    item_handle.set_title("Show").unwrap();
+                }
+            }
+            SystemTrayEvent::MenuItemClick { id, .. } => {
+                // get a handle to the clicked menu item
+                // note that `tray_handle` can be called anywhere,
+                // just get an `AppHandle` instance with `app.handle()` on the setup hook
+                // and move it to another function or thread
+                let item_handle = app.tray_handle().get_item(&id);
+                match id.as_str() {
+                    "hide" => {
+                        let window = app.get_window("main").unwrap();
+
+                        let is_focused = window.is_focused().unwrap_or_default();
+                        if !is_focused {
+                            window.set_focus().unwrap();
+                            item_handle.set_title("Hide").unwrap();
+                        } else {
+                            window.hide().unwrap();
+                            item_handle.set_title("Show").unwrap();
+                        }
+                    }
+                    "quit" => app.exit(0),
+                    _ => {}
                 }
             }
             _ => {}
@@ -100,6 +128,21 @@ fn main() {
 
             Ok(())
         })
+        .on_window_event(|event| match event.event() {
+            tauri::WindowEvent::CloseRequested { api, .. } => {
+                event.window().hide().unwrap();
+                api.prevent_close();
+            }
+            tauri::WindowEvent::Focused(focused) => {
+                let is_focused = focused.clone();
+
+                // hide window whenever it loses focus
+                if !is_focused {
+                    event.window().hide().unwrap();
+                }
+            }
+            _ => {}
+        })
         .invoke_handler(tauri::generate_handler![scan])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");

src-tauri/tauri.conf.json

@@ -7,7 +7,7 @@
   },
   "package": {
     "productName": "Keylight Commander",
-    "version": "0.0.1"
+    "version": "0.0.3"
   },
   "tauri": {
     "updater": {
@@ -38,12 +38,14 @@
         "minimize": true,
         "unmaximize": true,
         "unminimize": true,
-        "startDragging": true
+        "startDragging": true,
+        "setSkipTaskbar": true
       }
     },
     "systemTray": {
       "iconPath": "icons/icon.png",
-      "iconAsTemplate": true
+      "iconAsTemplate": true,
+      "menuOnLeftClick": false
     },
     "bundle": {
       "active": true,
@@ -71,9 +73,11 @@
 
         "fullscreen": false,
 
+        "skipTaskbar": true,
+
         "resizable": true,
         "closable": true,
-        "minimizable": true,
+        "minimizable": false,
         "maximizable": true,
         "decorations": true
       }

src/App.tsx

@@ -9,14 +9,21 @@ import {
   Text,
   Tooltip,
 } from "@mantine/core";
-import { IconPower, IconScanEye, IconSettings } from "@tabler/icons-react";
+import {
+  IconPlus,
+  IconPower,
+  IconScanEye,
+  IconSettings,
+} from "@tabler/icons-react";
 import { KeylightListItem } from "./components/KeylightListItem";
 import { ElgatoServiceResponse } from "./lib/types";
 import { useCallback, useMemo, useState } from "react";
 import { useKeylights } from "./lib/hooks/useKeylights";
 import { useServiceStore } from "./lib/hooks/useServiceStore";
 import { SettingsModal } from "./components/SettingsModal";
 import { useDisclosure } from "@mantine/hooks";
+import { ManualAddModal } from "./components/ManualAddModal";
+import { nanoid } from "nanoid";
 
 function App() {
   const serviceStore = useServiceStore();
@@ -25,6 +32,8 @@ function App() {
 
   const [isSettingsOpen, { open: openSettings, close: closeSettings }] =
     useDisclosure(false);
+  const [isManualAddOpen, { open: openManualAdd, close: closeManualAdd }] =
+    useDisclosure(false);
 
   const [globalBrightness, setGlobalBrightness] = useState<number | null>(null);
   const [globalTemperature, setGlobalTemperature] = useState<number | null>(
@@ -47,16 +56,11 @@ function App() {
   function scanServices() {
     invoke<ElgatoServiceResponse[]>("scan").then((res): void => {
       res.forEach((service) => {
-        const previousService = serviceStore.getService(service.mac_address);
-
-        if (previousService) {
-          serviceStore.addService({ ...service, name: previousService.name });
-        } else {
-          serviceStore.addService({
-            ...service,
-            name: service.full_name.split(".")[0],
-          });
-        }
+        serviceStore.addService({
+          ...service,
+          id: nanoid(),
+          name: service.full_name.split(".")[0],
+        });
       });
     });
   }
@@ -80,6 +84,7 @@ function App() {
   return (
     <div>
       <SettingsModal isOpen={isSettingsOpen} onClose={closeSettings} />
+      <ManualAddModal isOpen={isManualAddOpen} onClose={closeManualAdd} />
 
       <Box bg={"dark.6"} h={"2.5rem"} px={"md"} w={"100%"}>
         <SimpleGrid cols={2} h={"100%"}>
@@ -103,6 +108,16 @@ function App() {
               </ActionIcon>
             </Tooltip>
 
+            <Tooltip label={"Manually add light"} openDelay={500}>
+              <ActionIcon
+                variant="subtle"
+                color="gray"
+                onClick={() => openManualAdd()}
+              >
+                <IconPlus style={{ width: "70%", height: "70%" }} />
+              </ActionIcon>
+            </Tooltip>
+
             <Tooltip label={"Settings"} openDelay={500}>
               <ActionIcon
                 variant="subtle"
@@ -133,8 +148,8 @@ function App() {
 
       {serviceStore.getServices().map((service) => (
         <KeylightListItem
-          key={service.mac_address}
-          macAddress={service.mac_address}
+          key={service.id}
+          itemId={service.id}
           globalBrightness={globalBrightness}
           setGlobalBrightness={setGlobalBrightness}
           globalTemperature={globalTemperature}

src/components/KeylightEditModal.tsx

@@ -6,15 +6,15 @@ import { sleep } from "../lib/sleep";
 
 type Props = {
   setIsQuerySyncDisabled: (value: boolean) => void;
-  macAddress: string;
+  itemId: string;
   isOpen: boolean;
   onClose: () => void;
 };
 
 export const KeylightEditModal: React.FC<Props> = (props) => {
   const serviceStore = useServiceStore();
 
-  const service = serviceStore.getService(props.macAddress)!;
+  const service = serviceStore.getServiceById(props.itemId)!;
 
   const keylight = useKeylight({
     ipAddress: service.ip_v4,
@@ -68,10 +68,7 @@ export const KeylightEditModal: React.FC<Props> = (props) => {
           label="Name"
           defaultValue={service.name}
           onChange={(event) => {
-            serviceStore.setName(
-              service.mac_address,
-              event.currentTarget.value
-            );
+            serviceStore.setName(props.itemId, event.currentTarget.value);
           }}
         />
 
@@ -111,7 +108,7 @@ export const KeylightEditModal: React.FC<Props> = (props) => {
             <Button
               variant="default"
               onClick={() => {
-                serviceStore.deleteService(service.mac_address);
+                serviceStore.deleteService(props.itemId);
               }}
             >
               Remove