feat: animation settings

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>

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 }}>

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,

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}

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>