add initial item detail list design

2026-06-16 16:34:24 +02:00 · 2025-09-29 17:35:03 -07:00
parent ed4e0a2cf3
commit bbafa6cf40
4 changed files with 533 additions and 0 deletions
@@ -0,0 +1,84 @@
+.container {
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: var(--theme-spacing-sm);
+    width: 100%;
+    height: 100%;
+    padding: var(--theme-spacing-sm);
+    container-type: inline-size;
+    background: var(--theme-colors-surface);
+    border-radius: var(--theme-radius-md);
+
+    @container (min-width: 500px) {
+        grid-template-columns: minmax(0, 1fr);
+    }
+}
+
+.image-container {
+    position: relative;
+    display: none;
+    height: 100%;
+    min-height: 0;
+    aspect-ratio: 1/1;
+
+    &::before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        content: '';
+        background-color: rgb(0 0 0);
+        opacity: 0;
+        transition: all 0.2s ease-in-out;
+    }
+
+    &:hover {
+        &::before {
+            opacity: 0.6;
+        }
+    }
+
+    @container (min-width: 500px) {
+        display: block;
+    }
+}
+
+.image {
+    aspect-ratio: 1/1;
+}
+
+.metadata-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--theme-spacing-sm);
+    width: 100%;
+    height: 100%;
+    padding: var(--theme-spacing-xs) 0;
+    overflow: hidden;
+}
+
+.metadata-container .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-weight: 600;
+    line-height: 1.2;
+}
+
+.metadata-container .header .title {
+    max-width: 70%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.metadata-container .content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--theme-spacing-xs);
+}
+
+.metadata-container .content .tags {
+}
@@ -0,0 +1,146 @@
+import { AnimatePresence } from 'motion/react';
+import { MouseEvent, useMemo, useState } from 'react';
+import { Link } from 'react-router-dom';
+
+import styles from './item-detail.module.css';
+
+import { ItemCardControls } from '/@/renderer/components/item-card/item-card-controls';
+import { useFastAverageColor } from '/@/renderer/hooks';
+import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
+import { Badge } from '/@/shared/components/badge/badge';
+import { Divider } from '/@/shared/components/divider/divider';
+import { Group } from '/@/shared/components/group/group';
+import { Image } from '/@/shared/components/image/image';
+import { Rating } from '/@/shared/components/rating/rating';
+import { Text } from '/@/shared/components/text/text';
+import {
+    Album,
+    AlbumArtist,
+    Artist,
+    LibraryItem,
+    Playlist,
+    Song,
+} from '/@/shared/types/domain-types';
+import { stringToColor } from '/@/shared/utils/string-to-color';
+
+interface ItemDetailProps {
+    data: Album | AlbumArtist | Artist | Playlist | Song | undefined;
+    itemHeight: number;
+    itemType: LibraryItem;
+    onClick?: (e: MouseEvent<HTMLDivElement>, item: unknown, itemType: LibraryItem) => void;
+    withControls?: boolean;
+}
+
+export const ItemDetail = ({ data, itemType, onClick, withControls }: ItemDetailProps) => {
+    const imageUrl = getImageUrl(data);
+
+    const [showControls, setShowControls] = useState(false);
+
+    const { background } = useFastAverageColor({
+        algorithm: 'simple',
+        src: imageUrl,
+        srcLoaded: false,
+    });
+
+    // const tags = [...(data?.genres ?? [])];
+
+    const tags = useMemo(() => {
+        if (!data) {
+            return [];
+        }
+
+        const items: {
+            color?: string;
+            id: string;
+            isLight?: boolean;
+            itemType: LibraryItem;
+            name: string;
+        }[] = [];
+
+        if ('albumArtists' in data && Array.isArray(data.albumArtists)) {
+            data.albumArtists?.forEach((tag: { id: string; name: string }) => {
+                items.push({ id: tag.id, itemType: LibraryItem.ALBUM_ARTIST, name: tag.name });
+            });
+        }
+
+        if ('genres' in data && Array.isArray(data.genres)) {
+            data.genres?.forEach((tag: { id: string; itemType: LibraryItem; name: string }) => {
+                const { color, isLight } = stringToColor(tag.name);
+                items.push({ ...tag, color, isLight });
+            });
+        }
+
+        // if ('tags' in data && typeof data.tags === 'object') {
+        //     console.log('data.tags :>> ', data.tags);
+        //     Object.entries(data.tags).forEach(([key, value]) => {
+        //         items.push({ id: key, itemType: LibraryItem.TAG, name: value });
+        //     });
+        // }
+
+        return items;
+    }, [data]);
+
+    return (
+        <div
+            className={styles.container}
+            onClick={(e) => onClick?.(e, data, itemType)}
+            style={{ backgroundColor: background }}
+        >
+            <div
+                className={styles.imageContainer}
+                onMouseEnter={() => withControls && setShowControls(true)}
+                onMouseLeave={() => withControls && setShowControls(false)}
+            >
+                <Image alt={data?.name} src={imageUrl} />
+                <AnimatePresence>
+                    {withControls && showControls && <ItemCardControls type="compact" />}
+                </AnimatePresence>
+            </div>
+            <div className={styles.metadataContainer}>
+                <div className={styles.header}>
+                    <Text className={styles.title} component={Link} isLink size="lg" weight={500}>
+                        {data?.name}
+                    </Text>
+                    <Group>
+                        {data && 'userRating' in data && (
+                            <Rating size="xs" value={data?.userRating ?? 0} />
+                        )}
+                        {data && 'userFavorite' in data && (
+                            <ActionIcon
+                                icon="favorite"
+                                iconProps={{
+                                    fill: data?.userFavorite ? 'primary' : 'default',
+                                }}
+                                size="xs"
+                            />
+                        )}
+                    </Group>
+                </div>
+                <Divider />
+                <div className={styles.content}>
+                    <Group className={styles.tags} gap="xs">
+                        {tags.map((tag) => (
+                            <Badge
+                                key={tag.id}
+                                style={{
+                                    backgroundColor: tag.color,
+                                    color: tag.isLight ? 'black' : 'white',
+                                }}
+                            >
+                                {tag.name}
+                            </Badge>
+                        ))}
+                    </Group>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+const getImageUrl = (data: Album | AlbumArtist | Artist | Playlist | Song | undefined) => {
+    if (data && 'imageUrl' in data) {
+        return data.imageUrl || undefined;
+    }
+
+    return undefined;
+};