From 445afd13208a13f65db7ef064f0a048e3955449f Mon Sep 17 00:00:00 2001
From: ThaUnknown <6506529+ThaUnknown@users.noreply.github.com>
Date: Thu, 20 Mar 2025 21:36:50 +0100
Subject: [PATCH] feat: animation settings

---
 src/lib/components/Backplate.svelte            |  8 +++++---
 src/lib/components/ui/sidebar/sidebar.svelte   |  2 +-
 src/lib/modules/settings/defaults.ts           |  1 +
 src/routes/app/home/+page.svelte               |  2 +-
 src/routes/app/settings/interface/+page.svelte | 11 +++++++++++
 5 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/Backplate.svelte b/src/lib/components/Backplate.svelte
index a1fa701..8d75852 100644
--- a/src/lib/components/Backplate.svelte
+++ b/src/lib/components/Backplate.svelte
@@ -1,5 +1,6 @@
 <script lang='ts'>
   import { page } from '$app/stores'
+  import { settings } from '$lib/modules/settings'
   import { sleep } from '$lib/utils'
 
   let plate: HTMLDivElement
@@ -50,6 +51,7 @@
   })
 
   function checkIdleState (idleState: 'active' | 'idle', lockedState: 'unlocked' | 'locked', activityState: 'active' | 'inactive', visibilityState: DocumentVisibilityState) {
+    if ($settings.idleAnimation === 'off') return reset()
     // don't waste resources
     if (lockedState === 'locked' || visibilityState === 'hidden') return reset()
     if (idleState === 'active' && activityState === 'active') return reset()
@@ -74,14 +76,14 @@
     <div class='flex flex-row w-full font-molot font-bold -rotate-12' style:padding-left='{(4 - i) * 600 - 1000}px'>
       {#each Array.from({ length: 3 }) as _, i (i)}
         <div class='animate-marquee mt-32 leading-[0.8]'>
-          <div class='text-[24rem] bg-striped !bg-clip-text text-transparent animate-marquee-bg tracking-wide'>
+          <div class='text-[24rem] bg-striped !bg-clip-text text-transparent tracking-wide' class:animate-marquee-bg={$settings.idleAnimation === 'fancy'}>
             HAYASE.06&nbsp;
           </div>
           <div class='flex pl-1'>
-            <div class='bg-striped-muted rounded py-2 px-3 mt-1 mb-[2.5px] mr-2 ml-1 text-black animate-marquee-bg flex items-center leading-[0.9]'>
+            <div class='bg-striped-muted rounded py-2 px-3 mt-1 mb-[2.5px] mr-2 ml-1 text-black flex items-center leading-[0.9]' class:animate-marquee-bg={$settings.idleAnimation === 'fancy'}>
               TORRENTING<br />MADE<br />SIMPLE
             </div>
-            <div class='text-[5.44rem] bg-striped-muted !bg-clip-text text-transparent animate-marquee-bg tracking-wider'>
+            <div class='text-[5.44rem] bg-striped-muted !bg-clip-text text-transparent tracking-wider' class:animate-marquee-bg={$settings.idleAnimation === 'fancy'}>
               MAGNET://SIMPLICITY TOPS EVERYTHING
             </div>
           </div>
diff --git a/src/lib/components/ui/sidebar/sidebar.svelte b/src/lib/components/ui/sidebar/sidebar.svelte
index 14d7776..53762c8 100644
--- a/src/lib/components/ui/sidebar/sidebar.svelte
+++ b/src/lib/components/ui/sidebar/sidebar.svelte
@@ -7,7 +7,7 @@
 </script>
 
 {#if $isMobile}
-  <div class='shrink-0 z-50 bg-black absolute right-4 bottom-4 w-14 h-[52px] flex rounded-md items-end justify-end overflow-clip transition-[width,height]' class:w-[152px]={open} class:h-[140px]={open}>
+  <div class='shrink-0 z-50 bg-black absolute right-4 bottom-4 w-14 h-[52px] flex rounded-md items-end justify-end overflow-clip transition-[width,height]' class:!w-[152px]={open} class:!h-[140px]={open}>
     <div class='p-2 grid grid-cols-3 gap-2 shrink-0'>
       <slot />
       <Button variant='ghost' class='px-2 w-full relative' on:click={() => { open = !open }}>
diff --git a/src/lib/modules/settings/defaults.ts b/src/lib/modules/settings/defaults.ts
index 6995c42..8a49851 100644
--- a/src/lib/modules/settings/defaults.ts
+++ b/src/lib/modules/settings/defaults.ts
@@ -31,6 +31,7 @@ export default {
   showDetailsInRPC: true,
   torrentPath: '',
   angle: 'default' as 'default' | 'd3d11'| 'd3d9' | 'warp' | 'gl' | 'gles' | 'swiftshader' | 'vulkan' | 'metal',
+  idleAnimation: 'fancy' as 'fancy' | 'fast' | 'off',
   enableExternal: false,
   playerPath: '',
   playerSeek: 2,
diff --git a/src/routes/app/home/+page.svelte b/src/routes/app/home/+page.svelte
index 75e4731..24bc36f 100644
--- a/src/routes/app/home/+page.svelte
+++ b/src/routes/app/home/+page.svelte
@@ -82,7 +82,7 @@
       <div class='font-semibold text-lg leading-none' use:click={() => search(variables)}>{title}</div>
       <div class='ml-auto text-xs' use:click={() => search(variables)}>View More</div>
     </div>
-    <div class='flex overflow-x-scroll select:-ml-14 select:pl-14 -mt-40 pt-40 relative group pointer-events-none' use:dragScroll>
+    <div class='flex overflow-x-scroll select:-ml-14 select:pl-14 -mt-40 pt-40 -mb-5 pb-5 relative group pointer-events-none' use:dragScroll>
       <QueryCard {query} />
     </div>
   {/each}
diff --git a/src/routes/app/settings/interface/+page.svelte b/src/routes/app/settings/interface/+page.svelte
index 7925eb3..4500741 100644
--- a/src/routes/app/settings/interface/+page.svelte
+++ b/src/routes/app/settings/interface/+page.svelte
@@ -36,6 +36,12 @@
     metal: 'Metal'
   }
 
+  const idle = {
+    off: 'Off',
+    fast: 'Fast',
+    fancy: 'Fancy'
+  }
+
   function changeAngle (value: string) {
     native.setAngle(value)
   }
@@ -58,5 +64,10 @@
     <SettingCard title='ANGLE Backend' description="What ANGLE backend to use for rendering. DON'T CHANGE WITHOUT REASON! On some Windows machines D3D9 might help with flicker. Changing this setting to something your device doesn't support might prevent Miru from opening which will require a full reinstall. While Vulkan is an available option it might not be fully supported on Linux.">
       <SingleCombo bind:value={$settings.angle} items={angle} class='w-40 shrink-0 border-input border' onSelected={changeAngle} />
     </SettingCard>
+
+    <div class='font-weight-bold text-xl font-bold'>UI Settings</div>
+    <SettingCard title='Idle Animation' description='Idle 3d animation settings. Fast turns off some heavy details. Fancy can cause performance issues on very low end devices.'>
+      <SingleCombo bind:value={$settings.idleAnimation} items={idle} class='w-40 shrink-0 border-input border' onSelected={changeAngle} />
+    </SettingCard>
   {/if}
 </div>