feat(MediaRoulette): Add CommandPalette-like fade in/out

1 files changed, 74 insertions, 3 deletions

diff --git a/src/lib/List/MediaRoulette.svelte b/src/lib/List/MediaRoulette.svelte
index e5b7ccba..d4323476 100644
--- a/src/lib/List/MediaRoulette.svelte
+++ b/src/lib/List/MediaRoulette.svelte
@@ -15,6 +15,7 @@
   let displayIndex = 0;
   let spinTimeout: ReturnType<typeof setTimeout> | null = null;
   let showResult = false;
+  let isClosing = false;
 
   const startRoulette = () => {
     if (media.length === 0 || isSpinning) return;
@@ -57,6 +58,8 @@
   };
 
   const handleClose = () => {
+    if (isClosing) return;
+
     if (spinTimeout) {
       clearTimeout(spinTimeout);
 
@@ -65,8 +68,9 @@
 
     isSpinning = false;
     showResult = false;
+    isClosing = true;
 
-    onClose();
+    setTimeout(() => onClose(), 200);
   };
 
   $: currentMedia = media[displayIndex];
@@ -79,7 +83,7 @@
 <svelte:window onkeydown={(e) => e.key === 'Escape' && handleClose()} />
 
 <div
-  class="roulette-overlay"
+  class="roulette-overlay {isClosing ? 'fade-out' : 'fade-in'}"
   role="dialog"
   aria-modal="true"
   tabindex="-1"
@@ -88,7 +92,7 @@
     /* */
   }}
 >
-  <div class="roulette-container card">
+  <div class="roulette-container card {isClosing ? 'fade-out' : 'fade-in'}">
     <button class="close-button" onclick={handleClose} aria-label="Close roulette">&times;</button>
 
     <h3 class="roulette-title">
@@ -163,12 +167,79 @@
     z-index: 100;
     backdrop-filter: blur(3px);
     -webkit-backdrop-filter: blur(3px);
+    opacity: 0;
+  }
+
+  .roulette-overlay.fade-in {
+    animation: overlayFadeIn 0.15s ease-in-out forwards;
+  }
+
+  .roulette-overlay.fade-out {
+    animation: overlayFadeOut 0.2s ease-in-out forwards;
+  }
+
+  @keyframes overlayFadeIn {
+    from {
+      opacity: 0;
+      backdrop-filter: blur(0px);
+    }
+
+    to {
+      opacity: 1;
+      backdrop-filter: blur(3px);
+    }
+  }
+
+  @keyframes overlayFadeOut {
+    from {
+      opacity: 1;
+      backdrop-filter: blur(3px);
+    }
+
+    to {
+      opacity: 0;
+      backdrop-filter: blur(0px);
+    }
   }
 
   .roulette-container {
     max-width: 400px;
     width: 90%;
     position: relative;
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+
+  .roulette-container.fade-in {
+    animation: containerFadeIn 0.2s ease-in-out forwards;
+  }
+
+  .roulette-container.fade-out {
+    animation: containerFadeOut 0.2s ease-in-out forwards;
+  }
+
+  @keyframes containerFadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes containerFadeOut {
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
   }
 
   .close-button {