chore: rework titlebar buttons

src-tauri/Cargo.lock

@@ -1011,6 +1011,7 @@ version = "3.1.2"
 dependencies = [
  "base64 0.22.1",
  "discord-rich-presence",
+ "futures-util",
  "hardware-id",
  "md5",
  "once_cell",

src-tauri/Cargo.toml

@@ -32,15 +32,16 @@ reqwest = { version = "0.13.1", features = ["json", "stream", "query"] }
 md5 = "0.8.0"
 tokio = { version = "1.48.0", features = ["full"] }
 open = "5.3.3"
-windows-sys = "0.61.2"
 discord-rich-presence = "1.0.0"
 once_cell = "1.21.3"
+futures-util = "0.3"
 
 [target.'cfg(windows)'.dependencies]
 winreg = "0.55.0"
 winapi = { version = "0.3", features = ["winuser", "wincrypt", "memoryapi", "winbase", "dpapi"] }
 base64 = "0.22.1"
 widestring = "1.2.1"
+windows-sys = "0.61.2"
 
 [target.'cfg(not(any(target_os = "android", target_os = "ios")))'.dependencies]
 tauri-plugin-single-instance = "2.3.6"

src-tauri/src/presence.rs

@@ -2,6 +2,7 @@ use discord_rich_presence::{
     DiscordIpc, DiscordIpcClient,
     activity::{Activity, Assets, Button, Timestamps},
 };
+use futures_util::future::BoxFuture;
 use once_cell::sync::Lazy;
 use std::sync::Mutex as StdMutex;
 use std::time::{SystemTime, UNIX_EPOCH};
@@ -24,6 +25,7 @@ enum PresenceCommand {
     Disconnect(oneshot::Sender<()>),
     UpdateData(PresenceData),
     IsConnected(oneshot::Sender<bool>),
+    Tick,
 }
 
 struct PresenceActor {
@@ -58,7 +60,7 @@ impl PresenceActor {
     }
 
     async fn run(&mut self) {
-        let mut update_interval = interval(Duration::from_millis(2500));
+        let mut update_interval = interval(Duration::from_secs(5));
 
         loop {
             tokio::select! {
@@ -74,18 +76,22 @@ impl PresenceActor {
                         PresenceCommand::IsConnected(responder) => {
                             let _ = responder.send(self.client.is_some());
                         }
-                    }
+                        PresenceCommand::Tick => {
-                }
-                _ = update_interval.tick() => {
                             if self.client.is_some() {
                                 self.handle_update().await;
                             }
                         }
                     }
                 }
+                _ = update_interval.tick() => {
+                    let _ = PRESENCE_TX.send(PresenceCommand::Tick).await;
+                }
+            }
+        }
     }
 
-    async fn handle_connect(&mut self, responder: oneshot::Sender<bool>) {
+    fn handle_connect(&mut self, responder: oneshot::Sender<bool>) -> BoxFuture<'_, ()> {
+        Box::pin(async move {
         if self.client.is_some() {
             let _ = responder.send(true);
             return;
@@ -101,11 +107,21 @@ impl PresenceActor {
                 let _ = responder.send(true);
             }
             Err(e) => {
-                eprintln!("Failed to create Discord client: {:?}", e);
+                eprintln!("Failed to connect to Discord: {:?}. Retrying in 5s...", e);
+                let tx = PRESENCE_TX.clone();
+                tokio::spawn(async move {
+                    tokio::time::sleep(Duration::from_secs(5)).await;
+                    let (resp_tx, _) = oneshot::channel();
+                    let _ = tx.send(PresenceCommand::Connect(resp_tx)).await;
+                });
+                
+                if !responder.is_closed() {
                     let _ = responder.send(false);
                 }
             }
         }
+        })
+    }
 
     async fn handle_disconnect(&mut self, responder: oneshot::Sender<()>) {
         if let Some(mut client) = self.client.take() {
@@ -143,12 +159,14 @@ impl PresenceActor {
                     Button::new("Join EZPPFarm", "https://ez-pp.farm/discord"),
                 ]);
 
-            if let Err(e) = client.set_activity(activity).map_err(|e| e.to_string()) {
+            if let Err(e) = client.set_activity(activity) {
                 eprintln!("Failed to set activity, disconnecting: {:?}", e);
-                if let Some(mut client) = self.client.take() {
+                self.client = None;
-                    let _ = client.clear_activity();
+
-                    let _ = client.close();
+                let (tx, _) = oneshot::channel();
-                }
+                self.handle_connect(tx).await;
+            } else {
+                println!("Actor: Presence updated successfully.");
             }
         }
     }

src/lib/components/ui/animated-bg/AnimatedBg.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import Logo from '$assets/logo.png';
+  import { reduceAnimations } from '@/userSettings';
+  import { fade } from 'svelte/transition';
 
   //TODO: maybe dynamic background images fetched from ezpp?
 
@@ -37,15 +39,15 @@
   <div
     class="relative h-full w-full from-0% to-90% bg-gradient-to-b from-transparent to-black z-50"
   ></div>
-  {#each streaks as s}
+  {#each streaks as s, index (index)}
     <div
-      class="streak drop-shadow-lg"
+      class="streak drop-shadow-lg transition-opacity duration-1000"
       style="
         width:{s.width}px;
         height:{s.height}px;
         left:{s.x}%;
         top:{s.y}%;
-        opacity:{s.opacity};
+        opacity:{$reduceAnimations ? 0 : s.opacity};
         animation-duration:{s.duration}s;
         animation-delay:-{s.delay}s;
       "

src/lib/components/ui/titlebar/titlebar.svelte

@@ -8,6 +8,7 @@
   import { onMount } from 'svelte';
   import { launcherVersion } from '@/global';
   import Badge from '../badge/badge.svelte';
+  import { reduceAnimations } from '@/userSettings';
 
   onMount(() => {
     const appWindow = getCurrentWindow();
@@ -20,22 +21,39 @@
 </script>
 
 <div data-tauri-drag-region class="titlebar z-[100]">
-  <div class="titlebar-button rounded transition-colors duration-75" id="titlebar-minimize">
+  <div class="relative flex items-center justify-center p-1 group" id="titlebar-minimize">
-    <Minimize size={14} />
+    <div
+      class="absolute inset-0 bg-background rounded
+           scale-50 opacity-0
+          group-hover:opacity-100
+           group-hover:scale-100
+           {$reduceAnimations ? '' : 'transition-all duration-200 ease-out'} 
+           origin-center"
+    ></div>
+
+    <Minimize class="z-10 pointer-events-none" size={14} />
   </div>
-  <div class="titlebar-button close rounded transition-colors duration-75" id="titlebar-close">
+  <div class="relative flex items-center justify-center p-1 group" id="titlebar-close">
-    <Close size={14} />
+    <div
+      class="absolute inset-0 bg-red-500 rounded
+           scale-50 opacity-0
+            group-hover:opacity-100
+           group-hover:scale-100
+           {$reduceAnimations ? '' : 'transition-all duration-200 ease-out'} 
+           origin-center"
+    ></div>
+
+    <Close class="z-10 pointer-events-none" size={14} />
   </div>
 </div>
 
 <style lang="scss">
   .titlebar {
     height: 35px;
-    /* background: #040612; */
     user-select: none;
     display: flex;
     justify-content: flex-end;
-    gap: 10px;
+    gap: 5px;
     align-items: center;
     position: fixed;
     top: 0;
@@ -45,19 +63,4 @@
     padding-right: 5px;
     pointer-events: auto;
   }
-  .titlebar-button {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    width: 25px;
-    height: 25px;
-    user-select: none;
-    -webkit-user-select: none;
-  }
-  .titlebar-button:hover {
-    &.close {
-      background: #c22e2e;
-    }
-    background: #2d3049;
-  }
 </style>

src/screens/Launch.svelte

@@ -948,8 +948,13 @@
     {#if selectedView === 'home'}
       <div
         class="flex flex-col-reverse h-full"
-        in:fly={{ duration: 400, delay: 400, y: 5, opacity: 0 }}
+        in:fly={{
-        out:fly={{ duration: 400, y: -5, opacity: 0 }}
+          duration: $reduceAnimations ? 0 : 400,
+          delay: $reduceAnimations ? 0 : 400,
+          y: 5,
+          opacity: 0,
+        }}
+        out:fly={{ duration: $reduceAnimations ? 0 : 400, y: -5, opacity: 0 }}
       >
         <div class="relative z-10 px-8 py-4 flex items-center justify-between">
           <div class="flex items-center gap-4">
@@ -1070,8 +1075,8 @@
         {#if $currentUserInfo}
           <div
             class="m-1 w-72 h-48 bg-black/40 backdrop-blur-sm rounded-md border border-black/40 flex flex-col items-center p-3"
-            in:fly={{ duration: 400, y: 5, opacity: 0 }}
+            in:fly={{ duration: $reduceAnimations ? 0 : 400, y: 5, opacity: 0 }}
-            out:fly={{ duration: 400, y: -5, opacity: 0 }}
+            out:fly={{ duration: $reduceAnimations ? 0 : 400, y: -5, opacity: 0 }}
           >
             <Select.Root
               type="single"
@@ -1223,8 +1228,13 @@
     {:else if selectedView === 'settings'}
       <div
         class="h-[100vh] w-full flex flex-col items-center justify-center"
-        in:fly={{ duration: 400, delay: 400, y: 5, opacity: 0 }}
+        in:fly={{
-        out:fly={{ duration: 400, y: -5, opacity: 0 }}
+          duration: $reduceAnimations ? 0 : 400,
+          delay: $reduceAnimations ? 0 : 400,
+          y: 5,
+          opacity: 0,
+        }}
+        out:fly={{ duration: $reduceAnimations ? 0 : 400, y: -5, opacity: 0 }}
       >
         <div class="p-8 w-full">
           <div class="bg-black/40 backdrop-blur-sm py-8 px-6 rounded-lg">
@@ -1425,8 +1435,13 @@
     {:else if selectedView === 'login'}
       <div
         class="h-[100vh] w-full flex flex-col items-center justify-center"
-        in:fly={{ duration: 400, delay: 400, y: 5, opacity: 0 }}
+        in:fly={{
-        out:fly={{ duration: 400, y: -5, opacity: 0 }}
+          duration: $reduceAnimations ? 0 : 400,
+          delay: $reduceAnimations ? 0 : 400,
+          y: 5,
+          opacity: 0,
+        }}
+        out:fly={{ duration: $reduceAnimations ? 0 : 400, y: -5, opacity: 0 }}
       >
         <div class="p-8 px-52 w-full">
           <form onsubmit={performLogin} class="bg-black/40 backdrop-blur-sm rounded-lg p-8">