i did something, i forgot what, but it's something

src-tauri/Cargo.lock

···
 ]
 
 [[package]]
+name = "fsevent-sys"
+version = "4.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "76ee7a02da4d231650c7cea31349b889be2f45ddb3ef3032d2ec8185f6313fd2"
+dependencies = [
+ "libc",
+]
+
+[[package]]
 name = "futf"
 version = "0.1.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
···
 ]
 
 [[package]]
+name = "inotify"
+version = "0.9.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f8069d3ec154eb856955c1c0fbffefbf5f3c40a104ec912d4797314c1801abff"
+dependencies = [
+ "bitflags 1.3.2",
+ "inotify-sys",
+ "libc",
+]
+
+[[package]]
+name = "inotify-sys"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e05c02b5e89bff3b946cedeca278abc628fe811e604f027c45a8aa3cf793d0eb"
+dependencies = [
+ "libc",
+]
+
+[[package]]
 name = "instant"
 version = "0.1.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
···
 ]
 
 [[package]]
+name = "kqueue"
+version = "1.0.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7447f1ca1b7b563588a205fe93dea8df60fd981423a768bc1c0ded35ed147d0c"
+dependencies = [
+ "kqueue-sys",
+ "libc",
+]
+
+[[package]]
+name = "kqueue-sys"
+version = "1.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ed9625ffda8729b85e45cf04090035ac368927b8cebc34898e7c120f52e4838b"
+dependencies = [
+ "bitflags 1.3.2",
+ "libc",
+]
+
+[[package]]
 name = "kuchikiki"
 version = "0.8.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
···
 checksum = "8f3d0b296e374a4e6f3c7b0a1f5a51d748a0d34c85e7dc48fc3fa9a87657fe09"
 dependencies = [
  "libc",
+ "log",
  "wasi 0.11.0+wasi-snapshot-preview1",
  "windows-sys 0.48.0",
 ]
···
 version = "0.1.14"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "72ef4a56884ca558e5ddb05a1d1e7e1bfd9a68d9ed024c21704cc98872dae1bb"
+
+[[package]]
+name = "notify"
+version = "6.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6205bd8bb1e454ad2e27422015fb5e4f2bcc7e08fa8f27058670d208324a4d2d"
+dependencies = [
+ "bitflags 2.4.2",
+ "crossbeam-channel",
+ "filetime",
+ "fsevent-sys",
+ "inotify",
+ "kqueue",
+ "libc",
+ "log",
+ "mio",
+ "walkdir",
+ "windows-sys 0.48.0",
+]
 
 [[package]]
 name = "nu-ansi-term"
···
 version = "0.0.0"
 dependencies = [
  "dirs",
+ "notify",
  "open 5.0.1",
  "regex",
  "serde",

src-tauri/Cargo.toml

···
 open = "5"
 tauri-plugin-deep-link = "0.1.2"
 dirs = "5.0.1"
+notify = "6.1.1"
 regex = "1.10.3"
 
 [features]

src-tauri/src/main.rs

···
 mod pngmeta;
 
 use tauri::{ CustomMenuItem, Manager, SystemTray, SystemTrayEvent, SystemTrayMenu, SystemTrayMenuItem, WindowEvent, http::ResponseBuilder };
+use core::time;
 use std::{ fs, io::Read, path, thread };
 use regex::Regex;
 use pngmeta::PNGImage;
+use notify::{ EventKind, RecursiveMode, Watcher };
 
 #[derive(Clone, serde::Serialize)]
 struct PhotoLoadResponse{
···
   open::that("https://id.phazed.xyz?oauth=79959294626406").unwrap();
 }
 
+// Scans all files under the "Pictures/VRChat" path
+// then sends the list of photos to the frontend
 #[tauri::command]
 fn load_photos(window: tauri::Window) {
   thread::spawn(move || {
···
             let re1 = Regex::new(r"(?m)VRChat_[0-9]{4}-[0-9]{2}-[0-9]{2}_[0-9]{2}-[0-9]{2}-[0-9]{2}.[0-9]{3}_[0-9]{4}x[0-9]{4}.png").unwrap();
             let re2 = Regex::new(
               r"(?m)/VRChat_[0-9]{4}-[0-9]{2}-[0-9]{2}_[0-9]{2}-[0-9]{2}-[0-9]{2}.[0-9]{3}_[0-9]{4}x[0-9]{4}_wrld_[a-z0-9]{8}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{12}.png/gm").unwrap();
-  
+
             if
               re1.is_match(p.file_name().to_str().unwrap()) ||
               re2.is_match(p.file_name().to_str().unwrap())
             {
               let path = fname.to_path_buf().clone();
               let path = path.strip_prefix(dirs::home_dir().unwrap().join("Pictures\\VRChat")).unwrap().to_path_buf();
-  
+
               photos.push(path);
             }
           }
···
   });
 }
 
+// Reads the PNG file and loads the image metadata from it
+// then sends the metadata to the frontend, returns width, height, colour depth and so on... more info "pngmeta.rs"
 #[tauri::command]
 fn load_photo_meta( photo: &str, window: tauri::Window ){
   let photo = photo.to_string();
···
   });
 }
 
+// Delete a photo when the users confirms the prompt in the ui
+#[tauri::command]
+fn delete_photo( path: &str ){
+  let p = dirs::home_dir().unwrap().join("Pictures\\VRChat").join(path);
+  fs::remove_file(p).unwrap();
+}
+
 fn main() {
   std::env::set_var("WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS", "--ignore-gpu-blacklist");
 
   tauri_plugin_deep_link::prepare("uk.phaz.vrcpm");
 
+  // Setup the tray icon and menu buttons
   let quit = CustomMenuItem::new("quit".to_string(), "Quit");
   let hide = CustomMenuItem::new("hide".to_string(), "Hide / Show");
 
···
 
   let tray = SystemTray::new().with_menu(tray_menu);
 
+  // Listen for file updates, store each update in an mpsc channel and send to the frontend
+  let (sender, receiver) = std::sync::mpsc::channel();
+  let mut watcher = notify::recommended_watcher(move | res: Result<notify::Event, notify::Error> | {
+    match res {
+       Ok(event) => {
+        match event.kind{
+          EventKind::Remove(_) => {
+            let path = event.paths.first().unwrap();
+
+            let re1 = Regex::new(r"(?m)VRChat_[0-9]{4}-[0-9]{2}-[0-9]{2}_[0-9]{2}-[0-9]{2}-[0-9]{2}.[0-9]{3}_[0-9]{4}x[0-9]{4}.png").unwrap();
+            let re2 = Regex::new(r"(?m)/VRChat_[0-9]{4}-[0-9]{2}-[0-9]{2}_[0-9]{2}-[0-9]{2}-[0-9]{2}.[0-9]{3}_[0-9]{4}x[0-9]{4}_wrld_[a-z0-9]{8}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{12}.png/gm").unwrap();
+
+            if
+              re1.is_match(path.to_str().unwrap()) ||
+              re2.is_match(path.to_str().unwrap())
+            {
+              sender.send((2, path.clone().strip_prefix(dirs::home_dir().unwrap().join("Pictures\\VRChat")).unwrap().to_path_buf())).unwrap();
+            }
+          },
+          EventKind::Create(_) => {
+            let path = event.paths.first().unwrap();
+
+            let re1 = Regex::new(r"(?m)VRChat_[0-9]{4}-[0-9]{2}-[0-9]{2}_[0-9]{2}-[0-9]{2}-[0-9]{2}.[0-9]{3}_[0-9]{4}x[0-9]{4}.png").unwrap();
+            let re2 = Regex::new(r"(?m)/VRChat_[0-9]{4}-[0-9]{2}-[0-9]{2}_[0-9]{2}-[0-9]{2}-[0-9]{2}.[0-9]{3}_[0-9]{4}x[0-9]{4}_wrld_[a-z0-9]{8}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{12}.png/gm").unwrap();
+
+            if
+              re1.is_match(path.to_str().unwrap()) ||
+              re2.is_match(path.to_str().unwrap())
+            {
+              sender.send((1, path.clone().strip_prefix(dirs::home_dir().unwrap().join("Pictures\\VRChat")).unwrap().to_path_buf())).unwrap();
+            }
+          },
+          _ => {}
+        }
+      },
+      Err(e) => println!("watch error: {:?}", e),
+    }
+  }).unwrap();
+
+  watcher.watch(&dirs::home_dir().unwrap().join("Pictures\\VRChat"), RecursiveMode::Recursive).unwrap();
+
   tauri::Builder::default()
     .system_tray(tray)
     .on_system_tray_event(|app, event| match event {
···
       _ => {}
     })
     .register_uri_scheme_protocol("photo", | _app, request | {
+      // Loads the requested image file, sends data back to the user
       let uri = request.uri();
 
       if request.method() != "GET" {
         return ResponseBuilder::new()
         .status(404)
+        .header("Access-Control-Allow-Origin", "*")
         .body(Vec::new());
       }
 
···
 
           ResponseBuilder::new()
             .status(200)
+            .header("Access-Control-Allow-Origin", "*")
             .body(buffer)
         },
         Err(_) => {
           ResponseBuilder::new()
             .status(404)
+            .header("Access-Control-Allow-Origin", "*")
             .body("File Not Found".into())
         }
       }
···
     .setup(|app| {
       let handle = app.handle();
 
+      // Register "deep link" for authentication via vrcpm://
       tauri_plugin_deep_link::register(
         "vrcpm",
         move | request | {
···
         }
       ).unwrap();
 
+      // I hate this approach but i have no clue how else to do this...
+      // reads the mpsc channel and sends the events to the frontend
+      let window = app.get_window("main").unwrap();
+      thread::spawn(move || {
+        thread::sleep(time::Duration::from_millis(100));
+
+        for event in receiver {
+          match event.0 {
+            1 => {
+              window.emit("photo_create", event.1).unwrap();
+            },
+            2 => {
+              window.emit("photo_remove", event.1).unwrap();
+            },
+            _ => {}
+          }
+        }
+      });
+
       Ok(())
     })
-    .invoke_handler(tauri::generate_handler![start_user_auth, load_photos, close_splashscreen, load_photo_meta])
+    .invoke_handler(tauri::generate_handler![start_user_auth, load_photos, close_splashscreen, load_photo_meta, delete_photo])
     .run(tauri::generate_context!())
     .expect("error while running tauri application");
 }

src/Components/App.tsx

···
   let [ currentPhotoView, setCurrentPhotoView ] = createSignal<any>(null);
   let [ photoNavChoice, setPhotoNavChoice ] = createSignal<string>('');
 
+  let [ confirmationBoxText, setConfirmationBoxText ] = createSignal<string>('');
+  let confirmationBoxCallback = () => {}
+
+  let setConfirmationBox = ( text: string, cb: () => void ) => {
+    setConfirmationBoxText(text);
+    confirmationBoxCallback = cb;
+  }
+
   if(localStorage.getItem('token')){
     fetch<any>('https://photos.phazed.xyz/api/v1/account', {
       method: 'GET',
···
   let loadingBlackout: HTMLElement;
   let loadingShown = false;
 
+  let confirmationBox: HTMLElement;
+
+  createEffect(() => {
+    if(confirmationBoxText() !== ''){
+      confirmationBox.style.display = 'block';
+
+      setTimeout(() => {
+        confirmationBox.style.opacity = '1';
+      }, 1);
+    } else{
+      confirmationBox.style.opacity = '0';
+
+      setTimeout(() => {
+        confirmationBox.style.display = 'none';
+      }, 250);
+    }
+  })
+
   createEffect(() => {
     let type = loadingType();
 
···
   return (
     <div class="container">
       <NavBar setLoadingType={setLoadingType} loggedIn={loggedIn} />
-      <PhotoList setCurrentPhotoView={setCurrentPhotoView} photoNavChoice={photoNavChoice} setPhotoNavChoice={setPhotoNavChoice} />
-      <PhotoViewer setPhotoNavChoice={setPhotoNavChoice} currentPhotoView={currentPhotoView} setCurrentPhotoView={setCurrentPhotoView} />
+      <PhotoList setCurrentPhotoView={setCurrentPhotoView} currentPhotoView={currentPhotoView} photoNavChoice={photoNavChoice} setPhotoNavChoice={setPhotoNavChoice} setConfirmationBox={setConfirmationBox} />
+      <PhotoViewer setPhotoNavChoice={setPhotoNavChoice} currentPhotoView={currentPhotoView} setCurrentPhotoView={setCurrentPhotoView} setConfirmationBox={setConfirmationBox} />
+
+      <div class="copy-notif">Image Copied!</div>
 
       <div class="loading" ref={( el ) => loadingBlackout = el}>
         <Switch>
···
             <p>Loading App...</p>
           </Match>
         </Switch>
+      </div>
+
+      <div class="confirmation-box" ref={( el ) => confirmationBox = el}>
+        <div class="confirmation-box-container">
+          { confirmationBoxText() }<br /><br />
+
+          <div class="button-danger" onClick={() => { confirmationBoxCallback(); setConfirmationBoxText('') }}>Confirm</div>
+          <div class="button" onClick={() => setConfirmationBoxText('') }>Deny</div>
+        </div>
       </div>
     </div>
   );

src/Components/PhotoList.tsx

···
 import { createEffect, onMount } from "solid-js";
 import { invoke } from '@tauri-apps/api/tauri';
-import { listen } from '@tauri-apps/api/event'
+import { listen } from '@tauri-apps/api/event';
 
 import anime from "animejs";
 
···
 
 class PhotoListProps{
   setCurrentPhotoView!: ( view: any ) => any;
+  currentPhotoView!: () => any;
   photoNavChoice!: () => string;
   setPhotoNavChoice!: ( view: any ) => any;
+  setConfirmationBox!: ( text: string, cb: () => void ) => void;
 }
 
 let PhotoList = ( props: PhotoListProps ) => {
···
   let scroll: number = 0;
   let targetScroll: number = 0;
 
+  let quitRender: boolean = false;
+
   class PhotoMetadata{
     width!: number;
     height!: number;
···
     path: string;
     loaded: boolean = false;
     loading: boolean = false;
+    metaLoaded: boolean = false;
     image?: HTMLCanvasElement;
     imageEl?: HTMLImageElement;
     width?: number;
···
     }
 
     loadImage(){
-      if(this.loading || this.loaded || imagesLoading >= MAX_IMAGE_LOAD)return;
+      if(this.loading || this.loaded || !this.metaLoaded || imagesLoading >= MAX_IMAGE_LOAD)return;
       this.loading = true;
 
       imagesLoading++;
···
       this.image = document.createElement('canvas');
 
       this.imageEl = document.createElement('img');
+      this.imageEl.crossOrigin = 'anonymous';
       this.imageEl.src = 'https://photo.localhost/' + this.path;
 
       this.imageEl.onload = () => {
···
   })
 
   let render = () => {
-    requestAnimationFrame(render);
+    if(!quitRender)
+      requestAnimationFrame(render);
+    else
+      return quitRender = false;
 
     if(!ctx)return;
     ctx.clearRect(0, 0, photoContainer.width, photoContainer.height);
···
     amountLoaded++;
 
     photoMetaDataLoadingBar.style.width = (amountLoaded / photos.length) * 100 + '%';
+    photo.metaLoaded = true;
 
     if(amountLoaded / photos.length === 1){
       render();
···
           photoMetaDataLoadingContainer.style.display = 'none';
         }
       })
+
+      anime({
+        targets: '.reload-photos',
+        opacity: 1,
+        duration: 150,
+        easing: 'easeInOutQuad'
+      })
     }
   })
 
+  listen('photo_create', ( event: any ) => {
+    console.log(event);
+
+    let photo = new Photo(event.payload);
+    photos.splice(0, 0, photo);
+  })
+
+  listen('photo_remove', ( event: any ) => {
+    photos = photos.filter(x => x.path !== event.payload);
+
+    if(event.payload === props.currentPhotoView().path){
+      currentPhotoIndex = -1;
+      props.setCurrentPhotoView(null);
+    }
+  })
+
+  let reloadPhotos = () => {
+    photoTreeLoadingContainer.style.opacity = '1';
+    photoTreeLoadingContainer.style.height = '100%';
+    photoTreeLoadingContainer.style.display = 'flex';
+
+    photoMetaDataLoadingContainer.style.opacity = '1';
+    photoMetaDataLoadingContainer.style.height = '100%';
+    photoMetaDataLoadingContainer.style.display = 'flex';
+
+    photoMetaDataLoadingBar.style.width = '0%';
+    quitRender = true;
+
+    amountLoaded = 0;
+    scroll = 0;
+    photos = [];
+
+    anime({
+      targets: '.reload-photos',
+      opacity: 0,
+      duration: 150,
+      easing: 'easeInOutQuad'
+    })
+
+    invoke('load_photos');
+  }
+
   let loadPhotos = async () => {
     invoke('load_photos')
 
···
 
       if(targetScroll < 0)
         targetScroll = 0;
-    })
+    });
 
     photoContainer.width = window.innerWidth;
     photoContainer.height = window.innerHeight;
···
           <div class="loading-bar"><div class="loading-bar-inner" ref={( el ) => photoMetaDataLoadingBar = el}></div></div>
         </div>
       </div>
+
+      <div class="reload-photos" onClick={() => props.setConfirmationBox("Are you sure you want to reload all photos? This can cause the application to slow down while it is loading...", reloadPhotos)}><i class="fa-solid fa-arrows-rotate"></i></div>
 
       <canvas class="photo-container" ref={( el ) => photoContainer = el}></canvas>
     </div>

src/Components/PhotoViewer.tsx

···
 import { createEffect, onMount } from "solid-js";
+import { invoke } from '@tauri-apps/api/tauri';
 import anime from 'animejs';
 
 class PhotoViewerProps{
   currentPhotoView!: () => any;
   setCurrentPhotoView!: ( view: any ) => any;
   setPhotoNavChoice!: ( view: any ) => any;
+  setConfirmationBox!: ( text: string, cb: () => void ) => void;
 }
 
 let PhotoViewer = ( props: PhotoViewerProps ) => {
···
           targets: '.navbar',
           top: '-50px'
         })
-  
+
+        anime.set('.prev-button', { left: '-50px', top: '50%' });
+        anime.set('.next-button', { right: '-50px', top: '50%' });
+
+        anime({ targets: '.prev-button', left: '0', easing: 'easeInOutQuad', duration: 100 });
+        anime({ targets: '.next-button', right: '0', easing: 'easeInOutQuad', duration: 100 });
+
         window.CloseAllPopups.forEach(p => p());
       } else if(!photo && isOpen){
         anime({
···
         })
   
         window.CloseAllPopups.forEach(p => p());
+
+        anime({ targets: '.prev-button', top: '75%', easing: 'easeInOutQuad', duration: 100 });
+        anime({ targets: '.next-button', top: '75%', easing: 'easeInOutQuad', duration: 100 });
       }
   
       isOpen = photo != null;
···
 
       <div class="prev-button" onClick={() => props.setPhotoNavChoice('prev')}><i class="fa-solid fa-arrow-left"></i></div>
       <div class="next-button" onClick={() => props.setPhotoNavChoice('next')}><i class="fa-solid fa-arrow-right"></i></div>
+
+      <div class="control-buttons">
+        <div class="viewer-button"
+          onMouseOver={( el ) => anime({ targets: el.currentTarget, width: '40px', height: '40px', 'margin-left': '15px', 'margin-right': '15px', 'margin-top': '-10px' })}
+          onMouseLeave={( el ) => anime({ targets: el.currentTarget, width: '30px', height: '30px', 'margin-left': '20px', 'margin-right': '20px', 'margin-top': '0px' })}
+          onClick={() => {
+            let canvas = document.createElement('canvas');
+            let ctx = canvas.getContext('2d')!;
+
+            canvas.width = props.currentPhotoView().width;
+            canvas.height = props.currentPhotoView().height;
+
+            ctx.drawImage(props.currentPhotoView().imageEl, 0, 0);
+
+            canvas.toBlob(( blob ) => {
+              navigator.clipboard.write([
+                new ClipboardItem({
+                  'image/png': blob!
+                })
+              ]);
+        
+              canvas.remove();
+
+              anime.set('.copy-notif', { translateX: '-50%', translateY: '-100px' });
+              anime({
+                targets: '.copy-notif',
+                opacity: 1,
+                translateY: '0px'
+              });
+
+              setTimeout(() => {
+                anime({
+                  targets: '.copy-notif',
+                  opacity: 0,
+                  translateY: '-100px'
+                });
+              }, 2000);
+            });
+          }}
+        >
+          <i class="fa-solid fa-copy"></i>
+        </div>
+        <div class="viewer-button"
+          onMouseOver={( el ) => anime({ targets: el.currentTarget, width: '40px', height: '40px', 'margin-left': '15px', 'margin-right': '15px', 'margin-top': '-10px' })}
+          onMouseLeave={( el ) => anime({ targets: el.currentTarget, width: '30px', height: '30px', 'margin-left': '20px', 'margin-right': '20px', 'margin-top': '0px' })}
+        >
+          <i class="fa-solid fa-info"></i>
+        </div>
+        <div class="viewer-button"
+          onMouseOver={( el ) => anime({ targets: el.currentTarget, width: '40px', height: '40px', 'margin-left': '15px', 'margin-right': '15px', 'margin-top': '-10px' })}
+          onMouseLeave={( el ) => anime({ targets: el.currentTarget, width: '30px', height: '30px', 'margin-left': '20px', 'margin-right': '20px', 'margin-top': '0px' })}
+        >
+          <i class="fa-solid fa-users"></i>
+        </div>
+        <div class="viewer-button"
+          onMouseOver={( el ) => anime({ targets: el.currentTarget, width: '40px', height: '40px', 'margin-left': '15px', 'margin-right': '15px', 'margin-top': '-10px' })}
+          onMouseLeave={( el ) => anime({ targets: el.currentTarget, width: '30px', height: '30px', 'margin-left': '20px', 'margin-right': '20px', 'margin-top': '0px' })}
+        >
+          <i class="fa-solid fa-file"></i>
+        </div>
+        <div class="viewer-button"
+          onMouseOver={( el ) => anime({ targets: el.currentTarget, width: '40px', height: '40px', 'margin-left': '15px', 'margin-right': '15px', 'margin-top': '-10px' })}
+          onMouseLeave={( el ) => anime({ targets: el.currentTarget, width: '30px', height: '30px', 'margin-left': '20px', 'margin-right': '20px', 'margin-top': '0px' })}
+          onClick={() => props.setConfirmationBox("Are you sure you want to delete this photo?", () => { invoke("delete_photo", { path: props.currentPhotoView().path }); })}
+        >
+          <i class="fa-solid fa-trash"></i>
+        </div>
+      </div>
     </div>
   )
 }

src/styles.css

···
   user-select: none;
   cursor: pointer;
   z-index: 7;
+  box-shadow: #0008 0 0 10px;
 }
 
 .viewer-close{
···
 
 .next-button:hover{
   background: rgba(255, 255, 255, 0.349);
+}
+
+.reload-photos{
+  position: fixed;
+  top: 70px;
+  right: 20px;
+  color: white;
+  user-select: none;
+  cursor: pointer;
+  opacity: 0;
+}
+
+.confirmation-box{
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 15;
+  background: #0005;
+  transition: 0.25s;
+  backdrop-filter: blur(10px);
+}
+
+.confirmation-box-container{
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  text-align: center;
+  background: #9995;
+  padding: 10px;
+  width: 60%;
+  border-radius: 10px;
+  box-shadow: #000 0 0 10px;
+  font-size: 18px;
+  backdrop-filter: blur(10px);
+}
+
+.button-danger{
+  display: inline-block;
+  backdrop-filter: blur(10px);
+  padding: 10px;
+  background: rgba(255, 0, 0, 0.333);
+  box-shadow: #0005 inset 0 0 10px;
+  border-radius: 50px;
+  margin: 0 10px;
+  cursor: pointer;
+  user-select: none;
+  width: 200px;
+  transition: 0.25s;
+}
+
+.button{
+  display: inline-block;
+  padding: 10px;
+  backdrop-filter: blur(10px);
+  background: #9995;
+  box-shadow: #0005 inset 0 0 10px;
+  border-radius: 50px;
+  margin: 0 10px;
+  cursor: pointer;
+  user-select: none;
+  width: 200px;
+  transition: 0.25s;
+}
+
+.button:hover{
+  box-shadow: #000a inset 0 0 10px;
+}
+
+.button-danger:hover{
+  box-shadow: #000a inset 0 0 10px;
+}
+
+.control-buttons{
+  position: fixed;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+}
+
+.control-buttons div{
+  margin: 0 20px;
+}
+
+.copy-notif{
+  position: fixed;
+  top: 40px;
+  left: 50%;
+  color: white;
+  transform: translateX(-50%) translateY(-100px);
+  background: #8885;
+  padding: 10px 40px;
+  backdrop-filter: blur(10px);
+  border-radius: 50px;
+  box-shadow: #000 0 0 10px;
+  z-index: 12;
+  opacity: 0;
+  pointer-events: none;
 }

vite.config.ts

···
     port: 1420,
     strictPort: true,
     watch: {
-      // 3. tell vite to ignore watching `src-tauri`
-      ignored: ["**/src-tauri/**"],
-    },
+      ignored: [ 'src-tauri/**' ]
+    }
   },
 }));