redesign featured genres

src/renderer/features/home/components/featured-genres.tsx

@@ -1,20 +1,24 @@
-import { useSuspenseQuery } from '@tanstack/react-query';
+import { useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
 import { shuffle } from 'lodash';
-import { useMemo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath, Link } from 'react-router';
 
 import styles from './featured-genres.module.css';
 
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
 import { genresQueries } from '/@/renderer/features/genres/api/genres-api';
-import { BackgroundOverlay } from '/@/renderer/features/shared/components/library-background-overlay';
+import { useIsPlayerFetching, usePlayer } from '/@/renderer/features/player/context/player-context';
+import { PlayButton } from '/@/renderer/features/shared/components/play-button';
 import { useContainerQuery } from '/@/renderer/hooks';
 import { AppRoute } from '/@/renderer/router/routes';
-import { useCurrentServer } from '/@/renderer/store';
+import { useCurrentServer, useCurrentServerId } from '/@/renderer/store';
 import { Button } from '/@/shared/components/button/button';
 import { Group } from '/@/shared/components/group/group';
 import { TextTitle } from '/@/shared/components/text-title/text-title';
-import { Genre, GenreListSort, SortOrder } from '/@/shared/types/domain-types';
+import { Genre, GenreListSort, Played, SortOrder } from '/@/shared/types/domain-types';
+import { Play } from '/@/shared/types/types';
 import { stringToColor } from '/@/shared/utils/string-to-color';
 
 function getGenresToShow(breakpoints: {
@@ -127,22 +131,77 @@ export const FeaturedGenres = () => {
                             {t('action.viewMore', { postProcess: 'sentenceCase' })}
                         </Button>
                     </Group>
-                    <Group className={styles.group} gap="sm" wrap="wrap">
+                    <div className={styles.grid}>
                         {genresWithColors.map((genre) => (
-                            <div className={styles.genreContainer} key={genre.id}>
-                                <BackgroundOverlay backgroundColor={genre.color} height="100%" />
-                                <Link
-                                    className={styles.genreLink}
-                                    state={{ item: genre }}
-                                    to={genre.path}
-                                >
-                                    {genre.name}
-                                </Link>
-                            </div>
+                            <GenreItem genre={genre} key={genre.id} />
                         ))}
-                    </Group>
+                    </div>
                 </>
             )}
         </div>
     );
 };
+
+const GenrePlayButton = ({ genre }: { genre: Genre }) => {
+    const queryClient = useQueryClient();
+    const isPlayerFetching = useIsPlayerFetching();
+    const player = usePlayer();
+    const serverId = useCurrentServerId();
+
+    const handlePlay = useCallback(
+        async (genre: Genre) => {
+            if (!serverId) return;
+
+            const data = await queryClient.fetchQuery({
+                gcTime: 0,
+                queryFn: () => {
+                    return api.controller.getRandomSongList({
+                        apiClientProps: { serverId },
+                        query: {
+                            genre: genre.id,
+                            limit: 100,
+                            played: Played.All,
+                        },
+                    });
+                },
+                queryKey: queryKeys.player.fetch(),
+                staleTime: 0,
+            });
+
+            player.addToQueueByData(data?.items || [], Play.NOW);
+        },
+        [player, queryClient, serverId],
+    );
+
+    return (
+        <span className={styles.playButtonWrapper}>
+            <PlayButton
+                fill={true}
+                isSecondary
+                loading={isPlayerFetching}
+                onClick={() => handlePlay(genre)}
+            />
+        </span>
+    );
+};
+
+const GenreItem = memo(({ genre }: { genre: Genre & { color: string; path: string } }) => {
+    return (
+        <div
+            className={styles.genreContainer}
+            key={genre.id}
+            style={
+                {
+                    '--genre-color': genre.color,
+                } as React.CSSProperties
+            }
+        >
+            <Link className={styles.genreLink} state={{ item: genre }} to={genre.path}>
+                <span className={styles.genreName}>{genre.name}</span>
+                <GenrePlayButton genre={genre} />
+            </Link>
+        </div>
+    );
+});
+
+GenreItem.displayName = 'GenreItem';