finish textinput component and fix deleting

public/assets/icons/arrow-right-solid-full.svg

···
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#ffffff" d="M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z"/></svg>

public/assets/icons/trash-can-solid-full.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#ffffff" d="M232.7 69.9C237.1 56.8 249.3 48 263.1 48L377 48C390.8 48 403 56.8 407.4 69.9L416 96L512 96C529.7 96 544 110.3 544 128C544 145.7 529.7 160 512 160L128 160C110.3 160 96 145.7 96 128C96 110.3 110.3 96 128 96L224 96L232.7 69.9zM128 208L512 208L512 512C512 547.3 483.3 576 448 576L192 576C156.7 576 128 547.3 128 512L128 208zM216 272C202.7 272 192 282.7 192 296L192 488C192 501.3 202.7 512 216 512C229.3 512 240 501.3 240 488L240 296C240 282.7 229.3 272 216 272zM320 272C306.7 272 296 282.7 296 296L296 488C296 501.3 306.7 512 320 512C333.3 512 344 501.3 344 488L344 296C344 282.7 333.3 272 320 272zM424 272C410.7 272 400 282.7 400 296L400 488C400 501.3 410.7 512 424 512C437.3 512 448 501.3 448 488L448 296C448 282.7 437.3 272 424 272z"/></svg>

src-tauri/src/frontend_calls/get_addresses.rs

···
+use std::sync::Mutex;
+
+use tauri::State;
+
+#[tauri::command]
+pub fn get_addresses( addresses: State<&Mutex<Vec<String>>> ) -> Vec<String> {
+  let addresses = addresses.lock().unwrap();
+  addresses.clone()
+}

src-tauri/src/frontend_calls/mod.rs

···
+pub mod get_addresses;

src-tauri/src/lib.rs

···
-use std::fs;
+use std::{fs, sync::Mutex};
 
 use sqlx::{ migrate::MigrateDatabase, Sqlite, SqlitePool };
+use frontend_calls::*;
 
 use crate::{ setup::setup, utils::config::Config };
 
+mod frontend_calls;
 mod setup;
 mod utils;
 mod osc;
···
   let pool = SqlitePool::connect(db_file.to_str().unwrap()).await.unwrap();
   let conf = Config::new(conf_file);
 
+  static ADDRESSES: Mutex<Vec<String>> = Mutex::new(Vec::new());
+
   tauri::Builder::default()
     .plugin(tauri_plugin_opener::init())
-    .invoke_handler(tauri::generate_handler![])
+    .invoke_handler(tauri::generate_handler![
+      get_addresses::get_addresses
+    ])
     .manage(pool)
     .manage(conf)
+    .manage(&ADDRESSES)
     .setup(| app | {
-      setup(app);
+      setup(app, &ADDRESSES);
 
       Ok(())
     })

src-tauri/src/setup.rs

···
-use std::sync;
+use std::sync::{self, Mutex};
 
 use tauri::{ App, Emitter, Manager };
 
-use crate::osc;
+use crate::{ osc };
 
-pub fn setup( app: &mut App ){
+pub fn setup( app: &mut App, addresses: &'static Mutex<Vec<String>> ){
   let window = app.get_webview_window("main").unwrap();
 
   let ( sender, receiver ) = sync::mpsc::channel();
···
     loop {
       let message = receiver.recv().unwrap();
 
+      window.emit("osc-message", &message).unwrap();
 
+      let addr = message.address.clone();
+      dbg!(&addr);
 
-      window.emit("osc-message", message).unwrap();
+      let mut addresses = addresses.lock().unwrap();
+      if !addresses.contains(&addr){ addresses.push(addr); }
     }
   });
 }

src-tauri/src/utils/config.rs

···
     }
 
     Config {
-      store: Mutex::new(hashmap)
+      store: Mutex::new(hashmap),
     }
   }
 

src/App.css

···
 
 * {
   box-sizing: border-box;
+  -webkit-user-select: none;
 }
 
 body{
···
 h1, h2, h3, h4, h5, h6, p{
   margin: 0;
   font-weight: 500;
+}
+
+span{
+  -webkit-user-select: auto;
 }
 
 div[app-carousel]{
···
   display: flex;
 }
 
-div[app-col] > div{
+div[app-col-50]{
+  display: flex;
+}
+
+div[app-col-50] > div{
   width: 50%;
+}
+
+div[app-icon]{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 30px;
+  height: 30px;
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: pointer;
+  transition: 0.1s;
+}
+
+div[app-icon]:hover{
+  opacity: 0.75;
 }

src/App.tsx

···
 import "./App.css";
 
-import { createEffect, createSignal, onCleanup, onMount } from "solid-js";
-import { listen } from "@tauri-apps/api/event";
+import { createEffect, createSignal } from "solid-js";
 
 import { Sidebar } from "./Components/Sidebar";
 import { Actions } from "./Components/Actions";
···
 let App = () => {
   let [ page, setPage ] = createSignal(0);
   let carousel!: HTMLDivElement;
-
-  onMount(async () => {
-
-  });
 
   createEffect(() => {
     let pagenum = page();

src/Components/Actions.css

···
+div[app-trigger-el]{
+  padding: 10px;
+  background: #272e44;
+  margin: 10px;
+  border-radius: 5px;
+}
+
+div[app-trigger-action]{
+  padding: 5px;
+  margin: 5px;
+  border-radius: 5px;
+  background: #1c2030;
+}

src/Components/Actions.tsx

···
+import { Accessor, createSignal, For, Setter } from 'solid-js';
 import './Actions.css';
+import { TriggerEl } from './TriggerEl';
+
+export interface Trigger{
+  address: string,
+  actions: Accessor<any>,
+  setActions: Setter<any>
+}
 
 export let Actions = () => {
+  let [ triggers, setTriggers ] = createSignal<Trigger[]>([], { equals: false });
+
   return (
     <div app-page>
       <div app-col>
-        <div><h1>Actions</h1></div>
-        <div app-button style={{ width: 'fit-content', "margin-left": '50%' }}>+</div>
+        <div style={{ width: '100%' }}><h1>Actions</h1></div>
+        <div app-button style={{ width: 'fit-content', "margin-left": '50%' }} onClick={() => {
+          let trig = triggers();
+          let [ actions, setActions ] = createSignal([], { equals: false });
+
+          trig.push({ address: '', actions, setActions });
+          setTriggers(trig);
+        }}>+</div>
       </div>
 
-      <div>
+      <For each={triggers()}>
+        { ( item ) => <TriggerEl
+          trigger={item}
+          onDelete={() => {
+            let trig = triggers();
+            trig = trig.filter(x => x !== item);
 
-      </div>
+            setTriggers(trig);
+          }} /> }
+      </For>
     </div>
   )
 }

src/Components/Debug.tsx

···
         el.style.boxShadow = '#00ccff 0 0 10px';
         debugContainer.insertBefore(el, debugContainer.firstChild);
 
-        el.innerHTML = `<div>${ ev.payload.address }</div><div>${ formatValuesForDebug(ev.payload.values) }</div>`;
+        el.innerHTML = `<div><span>${ ev.payload.address }</span></div><div>${ formatValuesForDebug(ev.payload.values) }</div>`;
         setTimeout(() => { el.style.boxShadow = '#00ccff 0 0 0px'; })
       } else{
-        el = <div app-debug-el app-col><div>{ ev.payload.address }</div><div>{ formatValuesForDebug(ev.payload.values) }</div></div> as Node;
+        el = <div app-debug-el app-col-50><div><span>{ ev.payload.address }</span></div><div>{ formatValuesForDebug(ev.payload.values) }</div></div> as Node;
 
         el.style.boxShadow = '#00ccff 0 0 10px';
         debugContainer.insertBefore(el, debugContainer.firstChild);

src/Components/TextInput.css

···
+input[type="text"]{
+  outline: none;
+  background: none;
+  border: none;
+  border-bottom: 2px solid #525252;
+  font-size: 15px;
+  font-family: Rubik, 'Courier New';
+  color: #fff;
+  width: 400px;
+}
+
+div[input-dropdown]{
+  position: absolute;
+  width: fit-content;
+
+  margin-top: 5px;
+  padding: 10px;
+  float: left;
+  border-radius: 5px;
+
+  background: #525252;
+  z-index: 50;
+}
+
+div[input-dropdown] > div{
+  transition: 0.25s;
+}
+
+div[input-dropdown] > div:hover{
+  color: #aaa;
+}
+
+.suggestion-selected{
+  color: #aaa;
+}

src/Components/TextInput.tsx

···
+import './TextInput.css';
+
+import { createSignal, For, Show } from "solid-js"
+
+export interface TextInputProps{
+  placeholder: string,
+  value?: string,
+  requestSuggestions?: ( text: string ) => Promise<string[]>
+}
+
+export let TextInput = ( props: TextInputProps ) => {
+  let [ suggestionsOpen, setSuggestionsOpen ] = createSignal(false);
+  let [ suggestions, setSuggestions ] = createSignal<string[]>([])
+
+  let input!: HTMLInputElement;
+
+  let suggestionsContainer!: HTMLDivElement;
+  let suggestionsIndex = 0;
+
+  let onInput = async () => {
+    let s = null;
+
+    if(props.requestSuggestions){
+      s = await props.requestSuggestions(input.value);
+
+      if(s != suggestions()){
+        setSuggestions(s);
+
+        setSuggestionsOpen(s !== null && s.length > 0 && input.value.length > 0);
+        changeSelection(() => { suggestionsIndex = 0; });
+      }
+    }
+  }
+
+  let onKeyUp = ( ev: KeyboardEvent ) => {
+    switch(ev.key){
+      case 'ArrowDown':
+        changeSelection(() => {
+          suggestionsIndex++;
+          if(suggestionsIndex >= suggestionsContainer.children.length)suggestionsIndex = suggestionsContainer.children.length - 1;
+        });
+        break;
+      case 'ArrowUp':
+        changeSelection(() => {
+          suggestionsIndex--;
+          if(suggestionsIndex < 0)suggestionsIndex = 0;
+        });
+        break;
+      case 'Enter':
+        let currentDiv = suggestionsContainer.children[suggestionsIndex];
+        if(currentDiv)input.value = currentDiv.innerHTML;
+
+        setSuggestionsOpen(false);
+        break;
+    }
+  }
+
+  let changeSelection = ( cb: () => void )  => {
+    for(let child of suggestionsContainer.children)
+      child.classList.remove('suggestion-selected');
+
+    cb();
+
+    let currentDiv = suggestionsContainer.children[suggestionsIndex];
+    if(currentDiv)currentDiv.classList.add('suggestion-selected');
+  }
+
+  return (
+    <>
+      <div style={{ width: '100%' }}>
+        <input
+          style={{ width: '100%' }}
+          type="text"
+          placeholder={ props.placeholder }
+          value={ props.value || "" }
+          onInput={onInput}
+          onKeyUp={onKeyUp}
+          ref={input} />
+
+        <Show when={suggestionsOpen()}>
+          <div input-dropdown ref={suggestionsContainer}>
+            <For each={suggestions()}>
+              { item => <div onClick={( el ) => {
+                let thisEl = el.target;
+
+                input.value = thisEl.innerHTML;
+                setSuggestionsOpen(false);
+              }}>{ item }</div> }
+            </For>
+          </div>
+        </Show>
+      </div>
+    </>
+  )
+}

src/Components/TriggerEl.tsx

···
+import { For } from "solid-js"
+import { Trigger } from "./Actions"
+import { TextInput } from "./TextInput"
+import { invoke } from "@tauri-apps/api/core"
+
+export interface TriggerElProps{
+  trigger: Trigger,
+
+  onDelete: () => void
+}
+
+export let TriggerEl = ( { trigger, onDelete }: TriggerElProps ) => {
+  let suggestOSCAddresses = async ( text: string ): Promise<string[]> => {
+    let addresses = await invoke<string[]>('get_addresses');
+    return addresses.filter(x => x.toLowerCase().includes(text.toLowerCase()));
+  }
+
+  return (
+    <div app-trigger-el>
+      <div app-col>
+        OSC Address:
+        <div style={{ width: '400px', display: 'inline-block', "margin-left": '10px' }}>
+          <TextInput placeholder="/avatar/parameters/MyValue" value={ trigger.address } requestSuggestions={suggestOSCAddresses} />
+        </div>
+        <div app-icon style={{ 'margin-left': 'calc(100% - 545px)' }} onClick={onDelete}>
+          <img src="/assets/icons/trash-can-solid-full.svg" width="18" />
+        </div>
+      </div>
+
+      <br />
+      <For each={trigger.actions()}>
+        { item => <div app-trigger-action app-col>
+          <div style={{ width: 'calc(100% - 40px)', height: '30px', display: 'flex', "justify-content": 'center', 'align-items': 'center' }}>
+            <TextInput placeholder="Search Actions..." />
+          </div>
+          <div app-icon style={{ width: '40px' }} onClick={() => {
+            let actions = trigger.actions();
+            actions = actions.filter(( x: any ) => x !== item);
+
+            trigger.setActions(actions);
+          }}>
+            <img src="/assets/icons/trash-can-solid-full.svg" width="18" />
+          </div>
+        </div> }
+      </For>
+
+      <br />
+      <div app-button onClick={() => {
+        let actions = trigger.actions();
+        actions.push({});
+
+        trigger.setActions(actions);
+      }}>Add Action +</div>
+    </div>
+  )
+}