fix(Popup): theme settings hidden in SEQTA + animations fixes

src/svelte-interface/components/MotionDiv.svelte

@@ -17,31 +17,38 @@
   const playAnimation = (keyframe: any) => {
     if (divElement && keyframe) {
       let animationOptions = transition;
+      let finalKeyframe = { ...keyframe };
+
+      if (finalKeyframe.height === 'auto') {
+        divElement.style.visibility = 'hidden';
+        divElement.style.height = 'auto';
+        const height = divElement.offsetHeight;
+        divElement.style.height = divElement.style.height || '0px';
+        divElement.style.visibility = '';
+        
+        finalKeyframe.height = `${height}px`;
+      }
 
-      // 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);
+      const animation = motionAnimate(divElement, finalKeyframe, 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) {
+      Object.assign(divElement.style, initial);
+      await playAnimation(animate || {});
+    } else if (animate) {
       await playAnimation(animate);
     }
 
-    // Dispatch animation end event
     dispatch('animationend');
   });
   
@@ -53,7 +60,6 @@
     dispatch('animationend');
   });
 
-  // Handle unmounting with the `exit` animation
   onDestroy(async () => {
     if (exit) {
       await playAnimation(exit);

src/svelte-interface/pages/settings/shortcuts.svelte

@@ -63,8 +63,6 @@
   const deleteCustomShortcut = (index: number) => {
     settingsState.customshortcuts = settingsState.customshortcuts.filter((_, i) => i !== index);
   };
-
-  const springTransition = { type: 'spring', damping: 20 };
 </script>
 
 {#snippet Shortcuts([index, Shortcut]: [string, { name: string, enabled: boolean }]) }
@@ -81,16 +79,16 @@
     <div>
       <MotionDiv
         initial={{ opacity: 0, height: 0 }}
-        animate={isFormVisible ? { opacity: 1, height: "auto" } : { opacity: 0, height: 0 }}
+        animate={isFormVisible ? { opacity: 1, height: 'auto' } : { opacity: 0, height: 0 }}
         exit={{ opacity: 0, height: 0 }}
-        transition={springTransition}
+        transition={{ duration: 0.3 }}
       >
         {#if isFormVisible}
           <div class="flex flex-col items-center">
             <MotionDiv
               initial={{ opacity: 0, y: -10 }}
               animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: 0.1, duration: 0.4 }}
+              transition={{ delay: 0.1, duration: 0.5 }}
               class="w-full"
             >
               <input
@@ -103,7 +101,7 @@
             <MotionDiv
               initial={{ opacity: 0, y: -10 }}
               animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: 0.2, duration: 0.4 }}
+              transition={{ delay: 0.2, duration: 0.5 }}
               class="w-full"
             >
               <input
@@ -118,31 +116,18 @@
       </MotionDiv>
 
       <MotionDiv
-        animate={isFormVisible ? { y: 0 } : { y: 0 }}
-        transition={springTransition}
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3 }}
       >
         <button
           class="w-full px-4 py-2 mb-4 text-[13px] dark:text-white transition rounded-xl bg-zinc-200 dark:bg-zinc-700/50"
           onclick={isFormVisible ? addNewCustomShortcut : toggleForm}
         >
           {#if isFormVisible}
-            <MotionDiv
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.7 }}
-            >
             Add
-            </MotionDiv>
           {:else}
-            <MotionDiv
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.3 }}
-            >
             Add Custom Shortcut
-            </MotionDiv>
           {/if}
         </button>
       </MotionDiv>