add genre image card placeholder

src/renderer/components/item-card/item-card-controls.tsx

@@ -19,6 +19,7 @@ import {
     Album,
     AlbumArtist,
     Artist,
+    Genre,
     LibraryItem,
     Playlist,
     ServerType,
@@ -30,7 +31,7 @@ interface ItemCardControlsProps {
     controls?: ItemControls;
     enableExpansion?: boolean;
     internalState?: ItemListStateActions;
-    item: Album | AlbumArtist | Artist | Playlist | Song | undefined;
+    item: Album | AlbumArtist | Artist | Genre | Playlist | Song | undefined;
     itemType: LibraryItem;
     showRating: boolean;
     type?: 'compact' | 'default' | 'poster';
@@ -60,7 +61,7 @@ const containerProps = {
 const createPlayHandler =
     (
         controls: ItemControls | undefined,
-        item: Album | AlbumArtist | Artist | Playlist | Song | undefined,
+        item: Album | AlbumArtist | Artist | Genre | Playlist | Song | undefined,
         internalState: ItemListStateActions | undefined,
         itemType: LibraryItem,
         playType: Play,
@@ -108,7 +109,7 @@ const createPlayHandler =
 const createFavoriteHandler =
     (
         controls: ItemControls | undefined,
-        item: Album | AlbumArtist | Artist | Playlist | Song | undefined,
+        item: Album | AlbumArtist | Artist | Genre | Playlist | Song | undefined,
         internalState: ItemListStateActions | undefined,
         itemType: LibraryItem,
     ) =>
@@ -133,7 +134,7 @@ const createFavoriteHandler =
 const createRatingChangeHandler =
     (
         controls: ItemControls | undefined,
-        item: Album | AlbumArtist | Artist | Playlist | Song | undefined,
+        item: Album | AlbumArtist | Artist | Genre | Playlist | Song | undefined,
         internalState: ItemListStateActions | undefined,
         itemType: LibraryItem,
     ) =>
@@ -165,7 +166,7 @@ const moreDoubleClickHandler = (e: MouseEvent<HTMLButtonElement>) => {
 const createMoreHandler =
     (
         controls: ItemControls | undefined,
-        item: Album | AlbumArtist | Artist | Playlist | Song | undefined,
+        item: Album | AlbumArtist | Artist | Genre | Playlist | Song | undefined,
         internalState: ItemListStateActions | undefined,
         itemType: LibraryItem,
     ) =>
@@ -183,7 +184,7 @@ const createMoreHandler =
 const createExpandHandler =
     (
         controls: ItemControls | undefined,
-        item: Album | AlbumArtist | Artist | Playlist | Song | undefined,
+        item: Album | AlbumArtist | Artist | Genre | Playlist | Song | undefined,
         internalState: ItemListStateActions | undefined,
         itemType: LibraryItem,
     ) =>

src/renderer/components/item-card/item-card.module.css

@@ -113,6 +113,18 @@
     border-radius: 50%;
 }
 
+.genre-placeholder {
+    box-sizing: border-box;
+}
+
+.genre-placeholder-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: 600;
+    line-height: 1.2;
+    white-space: nowrap;
+}
+
 .detail-container {
     display: flex;
     flex-direction: column;

src/renderer/components/item-card/item-card.tsx

@@ -38,22 +38,26 @@ import {
     Album,
     AlbumArtist,
     Artist,
+    Genre,
     LibraryItem,
     Playlist,
     Song,
 } from '/@/shared/types/domain-types';
 import { DragOperation, DragTarget } from '/@/shared/types/drag-and-drop';
+import { stringToColor } from '/@/shared/utils/string-to-color';
 
 export type DataRow = {
     align?: 'center' | 'end' | 'start';
-    format: (data: Album | AlbumArtist | Artist | Playlist | Song) => null | ReactNode | string;
+    format: (
+        data: Album | AlbumArtist | Artist | Genre | Playlist | Song,
+    ) => null | ReactNode | string;
     id: string;
     isMuted?: boolean;
 };
 
 export interface ItemCardProps {
     controls?: ItemControls;
-    data: Album | AlbumArtist | Artist | Playlist | Song | undefined;
+    data: Album | AlbumArtist | Artist | Genre | Playlist | Song | undefined;
     enableDrag?: boolean;
     enableExpansion?: boolean;
     enableMultiSelect?: boolean;
@@ -341,16 +345,28 @@ const CompactItemCard = ({
 
         const imageContainerContent = (
             <>
-                <ItemImage
+                {itemType === LibraryItem.GENRE &&
-                    className={clsx(styles.image, {
+                data &&
-                        [styles.isRound]: isRound,
+                'name' in data &&
-                    })}
+                typeof (data as Genre).name === 'string' ? (
-                    enableDebounce={false}
+                    <GenreImagePlaceholder
-                    id={data?.imageId}
+                        className={clsx(styles.image, styles.genrePlaceholder, {
-                    itemType={itemType}
+                            [styles.isRound]: isRound,
-                    src={(data as Album | AlbumArtist | Playlist | Song)?.imageUrl}
+                        })}
-                    type="itemCard"
+                        name={(data as Genre).name}
-                />
+                    />
+                ) : (
+                    <ItemImage
+                        className={clsx(styles.image, {
+                            [styles.isRound]: isRound,
+                        })}
+                        enableDebounce={false}
+                        id={data?.imageId}
+                        itemType={itemType}
+                        src={(data as Album | AlbumArtist | Playlist | Song)?.imageUrl}
+                        type="itemCard"
+                    />
+                )}
                 {isFavorite && <div className={styles.favoriteBadge} />}
                 {hasRating && <div className={styles.ratingBadge}>{userRating}</div>}
                 <AnimatePresence>
@@ -565,14 +581,26 @@ const DefaultItemCard = ({
 
         const imageContainerContent = (
             <>
-                <ItemImage
+                {itemType === LibraryItem.GENRE &&
-                    className={clsx(styles.image, { [styles.isRound]: isRound })}
+                data &&
-                    enableDebounce={false}
+                'name' in data &&
-                    id={data?.imageId}
+                typeof (data as Genre).name === 'string' ? (
-                    itemType={itemType}
+                    <GenreImagePlaceholder
-                    src={(data as Album | AlbumArtist | Playlist | Song)?.imageUrl}
+                        className={clsx(styles.image, styles.genrePlaceholder, {
-                    type="itemCard"
+                            [styles.isRound]: isRound,
-                />
+                        })}
+                        name={(data as Genre).name}
+                    />
+                ) : (
+                    <ItemImage
+                        className={clsx(styles.image, { [styles.isRound]: isRound })}
+                        enableDebounce={false}
+                        id={data?.imageId}
+                        itemType={itemType}
+                        src={(data as Album | AlbumArtist | Playlist | Song)?.imageUrl}
+                        type="itemCard"
+                    />
+                )}
                 {isFavorite && <div className={styles.favoriteBadge} />}
                 {hasRating && <div className={styles.ratingBadge}>{userRating}</div>}
                 <AnimatePresence>
@@ -850,14 +878,26 @@ const PosterItemCard = ({
 
         const imageContainerContent = (
             <>
-                <ItemImage
+                {itemType === LibraryItem.GENRE &&
-                    className={clsx(styles.image, { [styles.isRound]: isRound })}
+                data &&
-                    enableDebounce={false}
+                'name' in data &&
-                    id={(data as { imageId: string })?.imageId}
+                typeof (data as Genre).name === 'string' ? (
-                    itemType={itemType}
+                    <GenreImagePlaceholder
-                    src={(data as { imageUrl: string })?.imageUrl}
+                        className={clsx(styles.image, styles.genrePlaceholder, {
-                    type="itemCard"
+                            [styles.isRound]: isRound,
-                />
+                        })}
+                        name={(data as Genre).name}
+                    />
+                ) : (
+                    <ItemImage
+                        className={clsx(styles.image, { [styles.isRound]: isRound })}
+                        enableDebounce={false}
+                        id={(data as { imageId: string })?.imageId}
+                        itemType={itemType}
+                        src={(data as { imageUrl: string })?.imageUrl}
+                        type="itemCard"
+                    />
+                )}
                 {isFavorite && <div className={styles.favoriteBadge} />}
                 {hasRating && <div className={styles.ratingBadge}>{userRating}</div>}
                 <AnimatePresence>
@@ -999,6 +1039,17 @@ export const getDataRows = (type?: 'compact' | 'default' | 'poster'): DataRow[]
                                             {data.name}
                                         </Link>
                                     );
+                                case LibraryItem.GENRE:
+                                    return (
+                                        <Link
+                                            state={{ item: data }}
+                                            to={generatePath(AppRoute.LIBRARY_GENRES_DETAIL, {
+                                                genreId: data.id,
+                                            })}
+                                        >
+                                            {data.name}
+                                        </Link>
+                                    );
                                 case LibraryItem.PLAYLIST:
                                     return (
                                         <Link
@@ -1227,7 +1278,7 @@ export const getDataRowsCount = () => {
     return getDataRows().length;
 };
 
-const getImageUrl = (data: Album | AlbumArtist | Artist | Playlist | Song | undefined) => {
+const getImageUrl = (data: Album | AlbumArtist | Artist | Genre | Playlist | Song | undefined) => {
     if (data && 'imageUrl' in data) {
         return data.imageUrl || undefined;
     }
@@ -1235,8 +1286,30 @@ const getImageUrl = (data: Album | AlbumArtist | Artist | Playlist | Song | unde
     return undefined;
 };
 
+const GenreImagePlaceholder = ({ className, name }: { className?: string; name: string }) => {
+    const { color, isLight } = useMemo(() => stringToColor(name), [name]);
+    return (
+        <div
+            className={className}
+            style={{
+                alignItems: 'center',
+                backgroundColor: color,
+                color: isLight ? '#000' : '#fff',
+                display: 'flex',
+                height: '100%',
+                justifyContent: 'center',
+                padding: 'var(--theme-spacing-sm)',
+                textAlign: 'center',
+                width: '100%',
+            }}
+        >
+            <span className={styles.genrePlaceholderText}>{name}</span>
+        </div>
+    );
+};
+
 const getItemNavigationPath = (
-    data: Album | AlbumArtist | Artist | Playlist | Song | undefined,
+    data: Album | AlbumArtist | Artist | Genre | Playlist | Song | undefined,
     itemType: LibraryItem,
 ): null | string => {
     if (!data || !('id' in data) || !data.id) {
@@ -1255,7 +1328,7 @@ const ItemCardRow = memo(
         row,
         type,
     }: {
-        data: Album | AlbumArtist | Artist | Playlist | Song | undefined;
+        data: Album | AlbumArtist | Artist | Genre | Playlist | Song | undefined;
         index: number;
         row: DataRow;
         type?: 'compact' | 'default' | 'poster';

src/renderer/components/item-list/helpers/get-dragged-items.ts

@@ -2,7 +2,15 @@ import {
     ItemListStateActions,
     ItemListStateItemWithRequiredProperties,
 } from '/@/renderer/components/item-list/helpers/item-list-state';
-import { Album, AlbumArtist, Artist, Folder, Playlist, Song } from '/@/shared/types/domain-types';
+import {
+    Album,
+    AlbumArtist,
+    Artist,
+    Folder,
+    Genre,
+    Playlist,
+    Song,
+} from '/@/shared/types/domain-types';
 
 /**
  * Type guard to assert that an item has the required properties for dragging
@@ -34,7 +42,7 @@ const hasRequiredDragProperties = (
  * @returns Array of items that should be dragged (with original values, asserting id, itemType, and _serverId)
  */
 export const getDraggedItems = (
-    data: Album | AlbumArtist | Artist | Folder | Playlist | Song | undefined,
+    data: Album | AlbumArtist | Artist | Folder | Genre | Playlist | Song | undefined,
     internalState?: ItemListStateActions,
     updateSelection: boolean = true,
 ): ItemListStateItemWithRequiredProperties[] => {

src/renderer/components/item-list/helpers/use-grid-rows.ts

@@ -26,6 +26,10 @@ const getDefaultRowsForItemType = (
             return [rowMap.get('name')].filter(
                 (row): row is NonNullable<typeof row> => row !== undefined,
             );
+        case LibraryItem.GENRE:
+            return [rowMap.get('name')].filter(
+                (row): row is NonNullable<typeof row> => row !== undefined,
+            );
         case LibraryItem.PLAYLIST:
             return [rowMap.get('name')].filter(
                 (row): row is NonNullable<typeof row> => row !== undefined,
@@ -53,6 +57,7 @@ const getRowIdFromTableColumn = (tableColumn: TableColumn): null | string => {
         [TableColumn.CHANNELS]: null,
         [TableColumn.CODEC]: null,
         [TableColumn.COMMENT]: null,
+        [TableColumn.COMPOSER]: null,
         [TableColumn.DATE_ADDED]: 'createdAt',
         [TableColumn.DISC_NUMBER]: null,
         [TableColumn.DURATION]: 'duration',

src/renderer/components/item-list/types.ts

@@ -4,6 +4,7 @@ import {
     AlbumArtist,
     Artist,
     Folder,
+    Genre,
     LibraryItem,
     Playlist,
     Song,
@@ -78,7 +79,15 @@ export interface ItemListHandle {
     scrollToOffset: (offset: number, options?: { behavior?: 'auto' | 'smooth' }) => void;
 }
 
-export type ItemListItem = Album | AlbumArtist | Artist | Folder | Playlist | Song | undefined;
+export type ItemListItem =
+    | Album
+    | AlbumArtist
+    | Artist
+    | Folder
+    | Genre
+    | Playlist
+    | Song
+    | undefined;
 
 export interface ItemListTableComponentProps<TQuery> extends ItemListComponentProps<TQuery> {
     autoFitColumns?: boolean;