Window Customization using invoke instead of api in front end

[Leocrydis]

Hello i am new to tarui and looking at the documentation i see that you can create custom window menu.
i tried using the menu through rust and didnt have great success so i opted to do a custom front ened menu. i saw that there is commands to hide the window so when the user hits the "X" it then invokes and hides the window instead of doing whats below.
Is there a reason why i shouldnt like security concerns?

edit: i also dont know rust that well

import { getCurrentWindow } from '@tauri-apps/api/window';

// when using `"withGlobalTauri": true`, you may use
// const { getCurrentWindow } = window.__TAURI__.window;

const appWindow = getCurrentWindow();

document
  .getElementById('titlebar-minimize')
  ?.addEventListener('click', () => appWindow.minimize());
document
  .getElementById('titlebar-maximize')
  ?.addEventListener('click', () => appWindow.toggleMaximize());
document
  .getElementById('titlebar-close')
  ?.addEventListener('click', () => appWindow.close());

this is what i did

<script setup>
const handleWindowControls = async (action) => {
 if (action === 'close') {
   await invoke('handle_window_close');
 } else {
   await invoke('window', { action });
 }
};
</script>
<template>
 <div class="flex flex-col h-screen">
   <div class="titlebar">
     <div class="titlebar-menu">
       <Menu v-for="(items, title) in menuItems" :key="title" as="div" class="relative inline-block text-left">
         <MenuButton class="menu-item">
           {{ title }}
         </MenuButton>

         <transition
           enter-active-class="transition duration-100 ease-out"
           enter-from-class="transform scale-95 opacity-0"
           enter-to-class="transform scale-100 opacity-100"
           leave-active-class="transition duration-75 ease-in"
           leave-from-class="transform scale-100 opacity-100"
           leave-to-class="transform scale-95 opacity-0"
         >
           <MenuItems class="absolute left-0 mt-1 w-56 origin-top-left divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none">
             <div class="px-1 py-1">
               <MenuItem v-for="item in items" :key="item" v-slot="{ active }">
                 <button
                   :class="[
                     active ? 'bg-violet-500 text-white' : 'text-gray-900',
                     'group flex w-full items-center rounded-md px-2 py-2 text-sm',
                   ]"
                 >
                   {{ item }}
                 </button>
               </MenuItem>
             </div>
           </MenuItems>
         </transition>
       </Menu>
     </div>

     <div class="window-controls">
       <button class="minimize" @click="handleWindowControls('minimize')">
         <MinusIcon class="h-4 w-4" />
       </button>
       <button class="maximize" @click="handleWindowControls('maximize')">
         <WindowIcon class="h-4 w-4" />
       </button>
       <button class="close" @click="handleWindowControls('close')">
         <XMarkIcon class="h-4 w-4" />
       </button>
     </div>
   </div>
   <main class="flex-1 flex justify-center items-center">
     <router-view />
   </main>
 </div>
</template>

// Prevents additional console window on Windows in release, DO NOT REMOVE!!
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

use tauri::{Manager, WebviewWindow};
use tauri::{
    menu::{Menu, MenuItem},
    tray::{TrayIconBuilder, TrayIconEvent},
};
use tauri::Runtime;

#[tauri::command]
async fn handle_window_close<R: Runtime>(window: tauri::Window<R>) -> Result<(), String> {
    window.hide().map_err(|e| e.to_string())?;
    Ok(())
}

#[tokio::main]
async fn main() {
    let client = fsf_processing_dashboard_lib::initialize_mongodb()
        .await
        .expect("Failed to initialize MongoDB");

    tauri::Builder::default()
    .manage(client.clone()) // Manage the client in Tauri's state
    .invoke_handler(tauri::generate_handler![handle_window_close])
    .setup(move|app| {
        // Create a clone for the quit handler
        let client_for_quit: mongodb::Client = client.clone();

        let splashscreen_window: WebviewWindow = app.get_webview_window("splashscreen").unwrap();
        let main_window: WebviewWindow = app.get_webview_window("main").unwrap();

        // Create separate system tray menu
        let tray_open = MenuItem::with_id(app, "tray_open", "Open", true, None::<&str>)?;
        let tray_quit = MenuItem::with_id(app, "tray_quit", "Exit", true, None::<&str>)?;
        let tray_menu = Menu::with_items(app, &[&tray_open, &tray_quit])?;

        // Create the system tray
        let _tray = TrayIconBuilder::new()
            .icon(app.default_window_icon().unwrap().clone())
            .menu(&tray_menu)
            .on_menu_event(move|app, event| {
                let client_clone = client_for_quit.clone();
                match event.id().0.as_str() {
                    "tray_open" => {
                        let main_window = app.get_webview_window("main").unwrap();
                        main_window.show().unwrap();
                        main_window.set_focus().unwrap();
                    }
                    "tray_quit" => {
                        let app_handle = app.clone();
                        tauri::async_runtime::spawn(async move {
                            fsf_processing_dashboard_lib::shutdown_mongodb(client_clone).await;
                            app_handle.exit(0);
                        });
                    }
                    _ => {}
                }
            })
            .build(app)?;

        let _app_handle = app.handle();

        tauri::async_runtime::spawn(async move {
            println!("Initializing...");
            std::thread::sleep(std::time::Duration::from_secs(2));
            println!("Done initializing.");
        
            splashscreen_window.close().unwrap();
            main_window.show().unwrap();
        });

        Ok(())
    })
    .on_tray_icon_event(|app, event| {
        if let TrayIconEvent::DoubleClick { .. } = event {
            let main_window = app.get_webview_window("main").unwrap();
            main_window.show().unwrap();
            main_window.set_focus().unwrap();
        }
    })
    .run(tauri::generate_context!())
    .expect("failed to run tauri application");
}

[FabianLars]

Is there a reason why i shouldnt like security concerns?

not really, no.