feat: some styling and command execution

Author: keiner5212

src-tauri/src/main.rs

@@ -22,10 +22,13 @@ fn logger(message: String, js_function: String) {
         }
     }
 }
+
 #[allow(non_snake_case)]
 #[tauri::command]
-fn executeEcho(){
-    match run_command_with_logging("echo", &["hello"], logger) {
+fn executeCommand(command: String, args: Vec<String>) {
+    // convert from Vec<String> to Vec<&str> (required by run_command_with_logging)
+    let parsed_args: Vec<&str> = args.iter().map(|s| s.as_str()).collect();
+    match run_command_with_logging(command.as_str(), parsed_args.as_slice(), logger) {
         Ok(_) => println!("Command executed successfully"),
         Err(e) => println!("Failed to execute command: {}", e),
     }
@@ -36,25 +39,36 @@ fn main() {
     // creating a menu for the system tray, with a quit option (add more options later if needed)
     let quit = CustomMenuItem::new("quit".to_string(), "Quit").accelerator("Cmd+Q");
 
+    // creating the system tray menu with the quit option
     let system_tray_menu = SystemTrayMenu::new().add_item(quit);
+
+    // title of the system tray
+    let tray_title = "Hello Node";
+
+    // creating the tauri application
     tauri::Builder::default()
         .setup(|app| {
+            //saving the main window in a mutex to use it later globally
             let main_window = app.get_window("main").unwrap();
             *MAIN_WINDOW.lock().unwrap() = Some(main_window);
             Ok(())
         })
+        // setting the system tray menu plugin
         .plugin(tauri_plugin_autostart::init(
             MacosLauncher::LaunchAgent,
             Some(vec![]),
         ))
+        // hide to tray when the main window is closed
         .on_window_event(|event| match event.event() {
             tauri::WindowEvent::CloseRequested { api, .. } => {
                 event.window().hide().unwrap();
                 api.prevent_close();
             }
             _ => {}
         })
-        .system_tray(SystemTray::new().with_menu(system_tray_menu))
+        // setting the system tray
+        .system_tray(SystemTray::new().with_tooltip(tray_title).with_menu(system_tray_menu))
+        // opening the main window when the system tray is clicked
         .on_system_tray_event(|app, event| match event {
             SystemTrayEvent::LeftClick {
                 position: _,
@@ -70,6 +84,7 @@ fn main() {
                     window.set_focus().unwrap();
                 }
             }
+            // handling the quit option
             SystemTrayEvent::MenuItemClick { id, .. } => match id.as_str() {
                 "quit" => {
                     std::process::exit(0);
@@ -78,7 +93,8 @@ fn main() {
             },
             _ => {}
         })
-        .invoke_handler(tauri::generate_handler![executeEcho])
+        // tauri commands (to use in the frontend)
+        .invoke_handler(tauri::generate_handler![executeCommand])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }

src-tauri/src/system_utils/executor.rs

@@ -11,7 +11,10 @@ pub fn run_command_with_logging(
     args: &[&str],
     logger: Logger,
 ) -> std::io::Result<()> {
-    println!("executing {} {}", command, args.join(" "));
+    let alert = format!("executing {} {}", command, args.join(" "));
+
+    println!("{}", alert);
+    logger(alert.to_string(), "FunctionOutputLogger".to_string());
 
     let shell = if cfg!(windows) { "cmd" } else { "sh" };
 
@@ -54,7 +57,6 @@ pub fn run_command_with_logging(
     });
 
     for line in rx {
-        println!("{}", line);
         logger(line, "FunctionOutputLogger".to_string());
     }
 

src/App.css

@@ -13,3 +13,37 @@
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
 }
+
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+  width: 100vw;
+  height: 100vh;
+}
+
+#logs{
+  background-color: transparent;
+  color: white;
+  border: none;
+  width: 80vw;
+  overflow-y: auto;
+  resize: none;
+  height: 200px;
+
+  &::-webkit-scrollbar {
+    background: transparent;
+    width: 10px;
+  }
+  &::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 5px #1e284b79;
+    border-radius: 10px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #3a4b8a;
+    border-radius: 10px;
+  }
+  
+}

src/App.tsx

@@ -1,45 +1,92 @@
 import { useEffect, useState } from "react";
-import { invoke } from "@tauri-apps/api/tauri";
 import { enable, isEnabled, disable } from "tauri-plugin-autostart-api";
 import "./App.css";
+import "./assets/styles/wave.css";
+import "./assets/styles/card.css";
+import { ExecuteCommand } from "./utils/CommandUtils";
 
 function App() {
-	const [enabled, setEnabled] = useState(false);
+	const [enabledAutostart, setEnabledAutostart] = useState(false);
+	const [logs, setLogs] = useState("");
+	const executableurl =
+		"https://github.com/Hello-Storage/hello-ipfs-user-node/releases/download/0.0.1/ipfs-user-node-windows-0.0.1.exe";
 
 	async function greet() {
-		await invoke("executeEcho");
+		await ExecuteCommand("echo", ["Hello there from hello.app!"]);
 	}
 
 	useEffect(() => {
+		window.FunctionOutputLogger = function (msg: string) {
+			// update logs
+			setLogs(logs + msg + "\n");
+			// scroll to bottom
+			const textarea = document.getElementById("logs");
+			if (textarea) {
+				textarea.scrollTop = textarea.scrollHeight + 100;
+			}
+		};
+	}, [logs]);
+
+	useEffect(() => {
+		greet();
+
+		// check if hello node is installed (from localstorage)
+		let helloNodeInstalled = localStorage.getItem("hello-node-installed");
+		if (!helloNodeInstalled) {
+			// install hello node
+			ExecuteCommand("curl", ["-O", "-L", executableurl]).then(() => {
+				// update localstorage
+				localStorage.setItem("hello-node-installed", "true");
+			});
+			setLogs(logs + "Hello Node installed\n");
+		} else {
+			setLogs(logs + "Hello Node already installed\n");
+		}
+
+		// detect if autostart is enabled
 		isEnabled().then((e) => {
 			if (e) {
-				setEnabled(true);
+				setEnabledAutostart(true);
 			}
 		});
+		//
 	}, []);
 
 	async function switchAutostart() {
 		if (await isEnabled()) {
 			await disable();
-			setEnabled(false);
+			setEnabledAutostart(false);
 			alert("Autostart disabled");
 		} else {
 			await enable();
-			setEnabled(true);
+			setEnabledAutostart(true);
 			alert("Autostart enabled");
 		}
 	}
 
-	window.FunctionOutputLogger = function (msg: string) {
-		console.log(msg);
-	};
-
 	return (
 		<div className="container">
+			<section className="wave-background">
+				<div className="air air1"></div>
+				<div className="air air2"></div>
+				<div className="air air3"></div>
+				<div className="air air4"></div>
+			</section>
+
+			<div className="bgblue">
+				<div className="card">
+					<textarea
+						name="logs"
+						id="logs"
+						value={logs}
+						disabled
+					></textarea>
+				</div>
+			</div>
+
 			<button onClick={switchAutostart}>
-				{enabled ? "Disable autostart" : "Enable autostart"}
+				{enabledAutostart ? "Disable autostart" : "Enable autostart"}
 			</button>
-			<button onClick={greet}>test</button>
 		</div>
 	);
 }

src/assets/img/wave.png

@@ -0,0 +1,14 @@
+.bgblue {
+    background: linear-gradient(135deg, #fffffff5, #1e284b79, #ffffff98);
+    padding: 1px;
+    border-radius: 1.2rem;
+    box-shadow: 0px 1rem 1.5rem -0.9rem #000000e1;
+}
+
+.card {
+    font-size: 1rem;
+    color: #bec4cf;
+    background: linear-gradient(135deg, #3586ffc0 0%, #1e284b79 50%, #3586ffc0 100%);
+    padding: 1.5rem;
+    border-radius: 1.2rem;
+}

src/assets/styles/card.css

@@ -0,0 +1,69 @@
+.wave-background {
+  position: relative;
+  width: 100%;
+  height: 30vh;
+  background: linear-gradient(135deg, #3586ffc0 0%, #1e284b79 50%, #3586ffc0 100%);
+  overflow: hidden;
+}
+
+.wave-background .air {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100px;
+  background: url(../img/wave.png);
+  background-size: 1000px 100px
+}
+
+.wave-background .air.air1 {
+  animation: wave 30s linear infinite;
+  z-index: 1000;
+  opacity: 1;
+  animation-delay: 0s;
+  bottom: 0;
+}
+
+.wave-background .air.air2 {
+  animation: wave2 15s linear infinite;
+  z-index: 999;
+  opacity: 0.5;
+  animation-delay: -5s;
+  bottom: 10px;
+}
+
+.wave-background .air.air3 {
+  animation: wave 30s linear infinite;
+  z-index: 998;
+  opacity: 0.2;
+  animation-delay: -2s;
+  bottom: 15px;
+}
+
+.wave-background .air.air4 {
+  animation: wave2 5s linear infinite;
+  z-index: 997;
+  opacity: 0.7;
+  animation-delay: -5s;
+  bottom: 20px;
+}
+
+@keyframes wave {
+  0% {
+    background-position-x: 0px;
+  }
+
+  100% {
+    background-position-x: 1000px;
+  }
+}
+
+@keyframes wave2 {
+  0% {
+    background-position-x: 0px;
+  }
+
+  100% {
+    background-position-x: -1000px;
+  }
+}

src/assets/styles/wave.css

@@ -0,0 +1,8 @@
+import { invoke } from "@tauri-apps/api/tauri";
+
+export async function ExecuteCommand(command: string, args: string[]) {
+    await invoke("executeCommand", {
+        command: command,
+        args: args
+    });
+}