From 33882817445eed1c9bed0ffa6b02d1bf1b27649e Mon Sep 17 00:00:00 2001
From: sethburkart123 <seth.burkart@hills.adventist.edu.au>
Date: Fri, 13 Sep 2024 17:36:31 +1000
Subject: [PATCH] fix(browser): fixed settings interface in firefox #166

---
 package.json                                  |  1 -
 src/svelte-interface/components/Button.svelte |  4 +-
 .../components/MotionDiv.svelte               | 68 +++++++++++++++++++
 .../components/TabbedContainer.svelte         | 10 ++-
 .../pages/settings/general.svelte             |  8 +--
 .../pages/settings/shortcuts.svelte           |  3 +-
 6 files changed, 79 insertions(+), 15 deletions(-)
 create mode 100644 src/svelte-interface/components/MotionDiv.svelte

diff --git a/package.json b/package.json
index b79c3f93..78f04086 100644
--- a/package.json
+++ b/package.json
@@ -95,7 +95,6 @@
     "sortablejs": "^1.15.2",
     "svelte": "^5.0.0-next.243",
     "svelte-hash-router": "^1.0.1",
-    "svelte-motion": "^0.12.2",
     "swiper": "latest",
     "tailwindcss": "^3.4.10",
     "ts-loader": "^9.5.1",
diff --git a/src/svelte-interface/components/Button.svelte b/src/svelte-interface/components/Button.svelte
index 22362c6d..97f07499 100644
--- a/src/svelte-interface/components/Button.svelte
+++ b/src/svelte-interface/components/Button.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  let { onClick, text, ...props } = $props<{ onClick: () => void, text: string, [key: string]: any }>();
+  let { onClick, text } = $props<{ onClick: () => void, text: string, [key: string]: any }>();
 </script>
 
-<button onclick={onClick} class='px-4 py-1 text-[0.75rem] dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white rounded-md' {...props}>
+<button onclick={onClick} class='px-4 py-1 text-[0.75rem] dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white rounded-md'>
   {text}
 </button>
\ No newline at end of file
diff --git a/src/svelte-interface/components/MotionDiv.svelte b/src/svelte-interface/components/MotionDiv.svelte
new file mode 100644
index 00000000..e8d4794b
--- /dev/null
+++ b/src/svelte-interface/components/MotionDiv.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+  import { animate as motionAnimate, spring } from 'motion';
+
+  let { initial, animate, exit, transition, children, class: className } = $props<{ 
+    initial?: any, 
+    animate?: any, 
+    exit?: any, 
+    transition?: any, 
+    children?: any, 
+    class?: string 
+  }>();
+
+  let divElement: HTMLElement;
+  const dispatch = createEventDispatcher();
+
+  const playAnimation = (keyframe: any) => {
+    if (divElement && keyframe) {
+      let animationOptions = transition;
+
+      // If transition is not defined or is of type 'spring', use spring animations
+      if (!transition || transition.type === 'spring') {
+        animationOptions = {
+          easing: spring(transition || { stiffness: 250, damping: 25 }),
+        };
+      }
+
+      const animation = motionAnimate(divElement, keyframe, animationOptions);
+      return animation.finished;
+    }
+    return Promise.resolve();
+  };
+
+  onMount(async () => {
+    // Apply initial state if provided
+    if (initial) {
+      await playAnimation(initial);
+    }
+    // Then animate to the `animate` state
+    if (animate) {
+      await playAnimation(animate);
+    }
+
+    // Dispatch animation end event
+    dispatch('animationend');
+  });
+  
+  $effect(() => {
+    if (animate) {
+      playAnimation(animate);
+    }
+
+    dispatch('animationend');
+  });
+
+  // Handle unmounting with the `exit` animation
+  onDestroy(async () => {
+    if (exit) {
+      await playAnimation(exit);
+    }
+  });
+</script>
+
+<div class={className} bind:this={divElement} style="will-change: transform, opacity;">
+  {#if children}
+    {@render children()}
+  {/if}
+</div>
diff --git a/src/svelte-interface/components/TabbedContainer.svelte b/src/svelte-interface/components/TabbedContainer.svelte
index ca25dc5c..7dcc7e8a 100644
--- a/src/svelte-interface/components/TabbedContainer.svelte
+++ b/src/svelte-interface/components/TabbedContainer.svelte
@@ -1,11 +1,9 @@
 <script lang="ts">
-  // @ts-expect-error umm idk
-  import { MotionDiv } from 'svelte-motion';
+  import MotionDiv from './MotionDiv.svelte';
   import './TabbedContainer.css';
-  import type { Component } from 'svelte'
   import { onMount } from 'svelte';
 
-  let { tabs } = $props<{ tabs: { title: string, Content: Component }[] }>();
+  let { tabs } = $props<{ tabs: { title: string, Content: any }[] }>();
   let activeTab = $state(0);
   let hoveredTab = $state<number | null>(null);
   let containerRef: HTMLElement | null = null;
@@ -72,11 +70,11 @@
       animate={{ x: `${-activeTab * 100}%` }}
       transition={springTransition}
     >
-      <div class="flex">
+      <div class="flex h-screen">
         {#each tabs as { Content }, index}
           <div class="absolute w-full transition-opacity duration-300 overflow-y-scroll {activeTab === index ? 'opacity-100' : 'opacity-0'}"
             style="left: {index * 100}%;">
-            <Content />
+            {@render Content()}
           </div>
         {/each}
       </div>
diff --git a/src/svelte-interface/pages/settings/general.svelte b/src/svelte-interface/pages/settings/general.svelte
index 33804f76..72781435 100644
--- a/src/svelte-interface/pages/settings/general.svelte
+++ b/src/svelte-interface/pages/settings/general.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import Switch from "../../components/Switch.svelte"
   import Button from "../../components/Button.svelte"
-  //import PickerSwatch from "../../components/PickerSwatch.svelte"
+  import PickerSwatch from "../../components/PickerSwatch.svelte"
   import Slider from "../../components/Slider.svelte"
 
   import browser from "webextension-polyfill"
@@ -17,7 +17,7 @@
     <p class="text-xs">{description}</p>
   </div>
   <div>
-    <Component {...props} />
+     <Component {...props} />
   </div>
 </div>
 {/snippet}
@@ -100,7 +100,7 @@
         onChange: (isOn: boolean) => settingsState.onoff = isOn
       }
     }
-  ] as setting}
-    {@render Setting(setting)}
+  ] as option}
+    {@render Setting(option)}
   {/each}
 </div>
\ No newline at end of file
diff --git a/src/svelte-interface/pages/settings/shortcuts.svelte b/src/svelte-interface/pages/settings/shortcuts.svelte
index 0544871e..b3a828e0 100644
--- a/src/svelte-interface/pages/settings/shortcuts.svelte
+++ b/src/svelte-interface/pages/settings/shortcuts.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  // @ts-expect-error umm idk
-  import { MotionDiv } from 'svelte-motion';
+  import MotionDiv from '@/svelte-interface/components/MotionDiv.svelte';
   import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
   import Switch from "@/svelte-interface/components/Switch.svelte"