redesign feature carousel to be more compact

src/renderer/components/feature-carousel/feature-carousel.module.css

@@ -1,29 +1,29 @@
 .carousel-container {
     position: relative;
     width: 100%;
-    margin-bottom: var(--theme-spacing-xl);
+    margin-bottom: var(--theme-spacing-md);
     container-type: inline-size;
     overflow: hidden;
-    border-radius: var(--theme-radius-lg);
+    border-radius: var(--theme-radius-md);
 }
 
 .carousel {
     position: relative;
     display: grid;
     grid-template-columns: repeat(var(--items-per-row, 1), 1fr);
-    gap: var(--theme-spacing-md);
+    gap: var(--theme-spacing-sm);
     width: 100%;
-    min-height: 400px;
+    min-height: 280px;
-    padding: 0 var(--theme-spacing-xl);
+    padding: 0 var(--theme-spacing-md);
     overflow: hidden;
 }
 
 .carousel-item {
     position: relative;
     width: 100%;
-    min-height: 440px;
+    min-height: 280px;
     overflow: hidden;
-    border-radius: var(--theme-radius-lg);
+    border-radius: var(--theme-radius-md);
     isolation: isolate;
 }
 
@@ -44,13 +44,13 @@
     z-index: 10;
     display: flex;
     flex-direction: column;
-    gap: var(--theme-spacing-md);
+    gap: var(--theme-spacing-xs);
     align-items: center;
     justify-content: flex-start;
     width: 100%;
     height: 100%;
-    min-height: 440px;
+    min-height: 280px;
-    padding: var(--theme-spacing-xl);
+    padding: var(--theme-spacing-md);
 }
 
 .title-section {
@@ -59,9 +59,9 @@
     align-items: flex-start;
     justify-content: center;
     width: 100%;
-    height: 60px;
+    height: 40px;
-    min-height: 60px;
+    min-height: 40px;
-    max-height: 60px;
+    max-height: 40px;
     text-align: left;
 }
 
@@ -72,9 +72,9 @@
     align-items: center;
     justify-content: center;
     width: 100%;
-    height: 250px;
+    height: 160px;
-    min-height: 250px;
+    min-height: 160px;
-    max-height: 250px;
+    max-height: 160px;
 }
 
 .play-button-overlay {
@@ -100,9 +100,9 @@
     align-items: center;
     justify-content: center;
     width: 100%;
-    height: 100px;
+    height: 60px;
-    min-height: 100px;
+    min-height: 60px;
-    max-height: 100px;
+    max-height: 60px;
     text-align: center;
 }
 
@@ -122,10 +122,10 @@
 .album-image-container {
     position: relative;
     width: 100%;
-    max-width: 180px;
+    max-width: 120px;
     overflow: hidden;
-    border-radius: var(--theme-radius-lg);
+    border-radius: var(--theme-radius-md);
-    filter: drop-shadow(0 10px 30px rgb(0 0 0 / 50%)) drop-shadow(0 4px 12px rgb(0 0 0 / 40%));
+    filter: drop-shadow(0 6px 20px rgb(0 0 0 / 50%)) drop-shadow(0 2px 8px rgb(0 0 0 / 40%));
     transition: filter 0.3s ease;
 }
 
@@ -139,7 +139,7 @@
     pointer-events: none;
     content: '';
     background-color: rgb(0 0 0 / 0%);
-    border-radius: var(--theme-radius-lg);
+    border-radius: var(--theme-radius-md);
     transition: background-color 0.3s ease;
 }
 
@@ -151,7 +151,7 @@
     width: 100%;
     height: auto;
     object-fit: cover;
-    border-radius: var(--theme-radius-lg);
+    border-radius: var(--theme-radius-md);
 }
 
 .carousel-item:hover .album-image-container,
@@ -171,14 +171,14 @@
 }
 
 .title {
-    margin-bottom: var(--theme-spacing-xs);
+    margin-bottom: 0;
     color: white;
-    text-shadow: 0 0 10px rgb(0 0 0 / 50%);
+    text-shadow: 0 0 8px rgb(0 0 0 / 50%);
 }
 
 .artist {
     color: white;
-    text-shadow: 0 0 10px rgb(0 0 0 / 50%);
+    text-shadow: 0 0 8px rgb(0 0 0 / 50%);
 }
 
 .nav-arrow-left,
@@ -214,11 +214,111 @@
 
 @container (min-width: $mantine-breakpoint-xs) {
     .carousel-item {
-        min-height: 480px;
+        min-height: 300px;
     }
 
     .content {
-        min-height: 480px;
+        min-height: 300px;
+    }
+
+    .title-section {
+        height: 45px;
+        min-height: 45px;
+        max-height: 45px;
+    }
+
+    .image-section {
+        height: 180px;
+        min-height: 180px;
+        max-height: 180px;
+    }
+
+    .metadata-section {
+        height: 65px;
+        min-height: 65px;
+        max-height: 65px;
+    }
+
+    .album-image-container {
+        max-width: 140px;
+    }
+}
+
+@container (min-width: $mantine-breakpoint-sm) {
+    .carousel {
+        gap: var(--theme-spacing-md);
+    }
+
+    .carousel-item {
+        min-height: 320px;
+    }
+
+    .content {
+        min-height: 320px;
+    }
+
+    .title-section {
+        height: 50px;
+        min-height: 50px;
+        max-height: 50px;
+    }
+
+    .image-section {
+        height: 200px;
+        min-height: 200px;
+        max-height: 200px;
+    }
+
+    .metadata-section {
+        height: 70px;
+        min-height: 70px;
+        max-height: 70px;
+    }
+
+    .album-image-container {
+        max-width: 160px;
+    }
+}
+
+@container (min-width: $mantine-breakpoint-md) {
+    .carousel-item {
+        min-height: 340px;
+    }
+
+    .content {
+        min-height: 340px;
+    }
+
+    .title-section {
+        height: 55px;
+        min-height: 55px;
+        max-height: 55px;
+    }
+
+    .image-section {
+        height: 220px;
+        min-height: 220px;
+        max-height: 220px;
+    }
+
+    .metadata-section {
+        height: 75px;
+        min-height: 75px;
+        max-height: 75px;
+    }
+
+    .album-image-container {
+        max-width: 180px;
+    }
+}
+
+@container (min-width: $mantine-breakpoint-xl) {
+    .carousel-item {
+        min-height: 360px;
+    }
+
+    .content {
+        min-height: 360px;
     }
 
     .title-section {
@@ -228,9 +328,9 @@
     }
 
     .image-section {
-        height: 300px;
+        height: 240px;
-        min-height: 300px;
+        min-height: 240px;
-        max-height: 300px;
+        max-height: 240px;
     }
 
     .metadata-section {
@@ -239,107 +339,7 @@
         max-height: 80px;
     }
 
-    .album-image-container {
-        max-width: 160px;
-    }
-}
-
-@container (min-width: $mantine-breakpoint-sm) {
-    .carousel {
-        gap: var(--theme-spacing-lg);
-    }
-
-    .carousel-item {
-        min-height: 500px;
-    }
-
-    .content {
-        min-height: 500px;
-    }
-
-    .title-section {
-        height: 70px;
-        min-height: 70px;
-        max-height: 70px;
-    }
-
-    .image-section {
-        height: 280px;
-        min-height: 280px;
-        max-height: 280px;
-    }
-
-    .metadata-section {
-        height: 110px;
-        min-height: 110px;
-        max-height: 110px;
-    }
-
     .album-image-container {
         max-width: 200px;
     }
 }
-
-@container (min-width: $mantine-breakpoint-md) {
-    .carousel-item {
-        min-height: 550px;
-    }
-
-    .content {
-        min-height: 550px;
-    }
-
-    .title-section {
-        height: 80px;
-        min-height: 80px;
-        max-height: 80px;
-    }
-
-    .image-section {
-        height: 320px;
-        min-height: 320px;
-        max-height: 320px;
-    }
-
-    .metadata-section {
-        height: 120px;
-        min-height: 120px;
-        max-height: 120px;
-    }
-
-    .album-image-container {
-        max-width: 220px;
-    }
-}
-
-@container (min-width: $mantine-breakpoint-xl) {
-    .carousel-item {
-        min-height: 600px;
-    }
-
-    .content {
-        min-height: 600px;
-    }
-
-    .title-section {
-        height: 90px;
-        min-height: 90px;
-        max-height: 90px;
-    }
-
-    .image-section {
-        height: 360px;
-        min-height: 360px;
-        max-height: 360px;
-    }
-
-    .metadata-section {
-        height: 130px;
-        min-height: 130px;
-        max-height: 130px;
-    }
-
-    .album-image-container {
-        max-width: 240px;
-    }
-}

src/renderer/components/feature-carousel/feature-carousel.tsx

@@ -23,25 +23,9 @@ import { Album, LibraryItem } from '/@/shared/types/domain-types';
 import { Play } from '/@/shared/types/types';
 
 const containerVariants = {
-    animate: (custom: { isNext: boolean }) => ({
+    animate: {},
-        transition: {
+    exit: {},
-            delayChildren: 0.1,
+    initial: {},
-            staggerChildren: 0.3,
-            staggerDirection: custom.isNext ? 1 : -1,
-        },
-    }),
-    exit: (custom: { isNext: boolean }) => ({
-        transition: {
-            staggerChildren: 0.3,
-            staggerDirection: custom.isNext ? 1 : -1,
-        },
-    }),
-    initial: (custom: { isNext: boolean }) => ({
-        transition: {
-            staggerChildren: 0.3,
-            staggerDirection: custom.isNext ? -1 : 1,
-        },
-    }),
 };
 
 const itemVariants = {
@@ -49,23 +33,22 @@ const itemVariants = {
         opacity: 1,
         scale: 1,
         transition: {
-            duration: 0.4,
+            duration: 0.2,
             ease: 'easeOut' as const,
         },
         y: 0,
     },
     exit: {
         opacity: 0,
-        scale: 0.8,
         transition: {
             duration: 0.3,
             ease: 'easeIn' as const,
         },
-        y: -20,
+        y: 0,
     },
     initial: {
         opacity: 0,
-        y: 20,
+        y: 0,
     },
 };
 
@@ -122,7 +105,7 @@ const CarouselItem = ({ album }: CarouselItemProps) => {
             >
                 <div className={styles.content}>
                     <div className={styles.titleSection}>
-                        <TextTitle className={styles.title} fw={800} lineClamp={2} order={3}>
+                        <TextTitle className={styles.title} fw={700} lineClamp={2} order={4}>
                             {album.name}
                         </TextTitle>
                     </div>
@@ -143,25 +126,25 @@ const CarouselItem = ({ album }: CarouselItemProps) => {
                             {album.albumArtists.slice(0, 1).map((artist) => (
                                 <Text
                                     className={styles.artist}
-                                    fw={600}
+                                    fw={500}
                                     key={`artist-${artist.id}`}
-                                    size="xl"
+                                    size="md"
                                 >
                                     {artist.name}
                                 </Text>
                             ))}
-                            <Group gap="sm" justify="center" wrap="wrap">
+                            <Group gap="xs" justify="center" wrap="wrap">
                                 {album.genres?.slice(0, 2).map((genre) => (
                                     <Badge
                                         key={`genre-${genre.id}`}
-                                        size="lg"
+                                        size="sm"
                                         variant="transparent"
                                     >
                                         {genre.name}
                                     </Badge>
                                 ))}
                                 {album.releaseYear && (
-                                    <Badge size="lg" variant="transparent">
+                                    <Badge size="sm" variant="transparent">
                                         {album.releaseYear}
                                     </Badge>
                                 )}
@@ -245,7 +228,6 @@ export const FeatureCarousel = ({ data, onNearEnd }: FeatureCarouselProps) => {
                 <motion.div
                     animate="animate"
                     className={styles.carousel}
-                    custom={directionRef.current}
                     exit="exit"
                     initial="initial"
                     key={`carousel-${startIndex}`}