From ce6155fe47c9fc7e8fada3dfe046e5db946b7dbb Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Fri, 12 Dec 2025 00:54:29 -0800
Subject: [PATCH] more feature carousel optimizations

- decrease title size
- only show first artist
---
 .../feature-carousel/feature-carousel.tsx      | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/renderer/components/feature-carousel/feature-carousel.tsx b/src/renderer/components/feature-carousel/feature-carousel.tsx
index 72a4f86eb..8e72af3d6 100644
--- a/src/renderer/components/feature-carousel/feature-carousel.tsx
+++ b/src/renderer/components/feature-carousel/feature-carousel.tsx
@@ -17,7 +17,6 @@ import { Badge } from '/@/shared/components/badge/badge';
 import { Group } from '/@/shared/components/group/group';
 import { Image } from '/@/shared/components/image/image';
 import { Stack } from '/@/shared/components/stack/stack';
-import { TextTitle } from '/@/shared/components/text-title/text-title';
 import { Text } from '/@/shared/components/text/text';
 import { Album, LibraryItem } from '/@/shared/types/domain-types';
 import { Play } from '/@/shared/types/types';
@@ -105,9 +104,9 @@ const CarouselItem = ({ album }: CarouselItemProps) => {
             >
                 <div className={styles.content}>
                     <div className={styles.titleSection}>
-                        <TextTitle className={styles.title} fw={700} lineClamp={2} order={4}>
+                        <Text className={styles.title} fw={700} lineClamp={2} size="lg" ta="center">
                             {album.name}
-                        </TextTitle>
+                        </Text>
                     </div>
 
                     <div className={styles.imageSection}>
@@ -123,16 +122,11 @@ const CarouselItem = ({ album }: CarouselItemProps) => {
 
                     <div className={styles.metadataSection}>
                         <Stack gap="sm">
-                            {album.albumArtists.slice(0, 1).map((artist) => (
-                                <Text
-                                    className={styles.artist}
-                                    fw={500}
-                                    key={`artist-${artist.id}`}
-                                    size="md"
-                                >
-                                    {artist.name}
+                            {album.albumArtists?.[0] && (
+                                <Text className={styles.artist} fw={500} size="md">
+                                    {album.albumArtists[0].name}
                                 </Text>
-                            ))}
+                            )}
                             <Group gap="xs" justify="center" wrap="wrap">
                                 {album.genres?.slice(0, 2).map((genre) => (
                                     <Badge