add placeholder expanded list item

src/renderer/components/item-list/expanded-list-item.module.css

@@ -0,0 +1,12 @@
+.container {
+    width: 100%;
+    height: 100%;
+    padding: var(--theme-spacing-lg);
+}
+
+.inner {
+    width: 100%;
+    height: 100%;
+    background-color: var(--theme-colors-surface);
+    border-radius: var(--theme-radius-md);
+}

src/renderer/components/item-list/expanded-list-item.tsx

@@ -0,0 +1,44 @@
+import styles from './expanded-list-item.module.css';
+
+import {
+    ItemListItem,
+    ItemListStateActions,
+} from '/@/renderer/components/item-list/helpers/item-list-state';
+import { ExpandedAlbumListItem } from '/@/renderer/features/albums/components/expanded-album-list-item';
+import { LibraryItem } from '/@/shared/types/domain-types';
+
+interface ExpandedListItemProps {
+    internalState: ItemListStateActions;
+    itemType: LibraryItem;
+}
+
+export const ExpandedListItem = ({ internalState, itemType }: ExpandedListItemProps) => {
+    const expandedItems = internalState.getExpanded();
+    const currentItem = expandedItems[0];
+
+    if (!currentItem) {
+        return null;
+    }
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.inner}>
+                <SelectedItem item={currentItem} itemType={itemType} />
+            </div>
+        </div>
+    );
+};
+
+interface SelectedItemProps {
+    item: ItemListItem;
+    itemType: LibraryItem;
+}
+
+const SelectedItem = ({ item, itemType }: SelectedItemProps) => {
+    switch (itemType) {
+        case LibraryItem.ALBUM:
+            return <ExpandedAlbumListItem item={item} />;
+        default:
+            return null;
+    }
+};

src/renderer/components/item-list/item-grid/item-grid.tsx

@@ -24,6 +24,7 @@ import { ItemListItem, ItemListStateActions, useItemListState } from '../helpers
 import styles from './item-grid.module.css';
 
 import { ItemCard } from '/@/renderer/components/item-card/item-card';
+import { ExpandedListItem } from '/@/renderer/components/item-list/expanded-list-item';
 import { LibraryItem } from '/@/shared/types/domain-types';
 
 const gridComponents: GridComponents<any> = {
@@ -223,7 +224,7 @@ export const ItemGrid = ({
                         initial="hidden"
                         variants={expandedAnimationVariants}
                     >
-                        Hello World
+                        <ExpandedListItem internalState={internalState} itemType={itemType} />
                     </motion.div>
                 )}
             </AnimatePresence>

src/renderer/features/albums/components/expanded-album-list-item.module.css

@@ -0,0 +1,14 @@
+.container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-color: var(--theme-colors-surface);
+    border-radius: var(--theme-radius-md);
+}
+
+.loading {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    padding: var(--theme-spacing-sm);
+}

src/renderer/features/albums/components/expanded-album-list-item.tsx

@@ -0,0 +1,77 @@
+import { useQuery } from '@tanstack/react-query';
+import { motion } from 'motion/react';
+import { useEffect, useRef, useTransition } from 'react';
+
+import styles from './expanded-album-list-item.module.css';
+
+import { ItemListItem } from '/@/renderer/components/item-list/helpers/item-list-state';
+import { albumQueries } from '/@/renderer/features/albums/api/album-api';
+import { useFastAverageColor } from '/@/renderer/hooks';
+import { Spinner } from '/@/shared/components/spinner/spinner';
+
+interface ExpandedAlbumListItemProps {
+    item: ItemListItem;
+    previousItem?: ItemListItem | null;
+}
+
+export const ExpandedAlbumListItem = ({ item, previousItem }: ExpandedAlbumListItemProps) => {
+    const [, startTransition] = useTransition();
+    const previousDataRef = useRef<any>(null);
+
+    const { data, isLoading } = useQuery(
+        albumQueries.detail({
+            options: {},
+            query: { id: item.id },
+            serverId: item.serverId,
+        }),
+    );
+
+    // Store the previous data when we have new data
+    useEffect(() => {
+        if (data && !isLoading) {
+            previousDataRef.current = data;
+        }
+    }, [data, isLoading]);
+
+    // Use current data if available, otherwise use previous data for smooth transition
+    const displayData = data || previousDataRef.current;
+    const isDataTransitioning = isLoading && previousDataRef.current;
+
+    const color = useFastAverageColor({
+        id: item.id,
+        src: displayData?.imageUrl,
+        srcLoaded: !isDataTransitioning,
+    });
+
+    // Start transition when item changes
+    useEffect(() => {
+        if (previousItem && previousItem.id !== item.id) {
+            startTransition(() => {});
+        }
+    }, [item.id, previousItem, startTransition]);
+
+    return (
+        <motion.div
+            animate={{
+                backgroundColor: color.background,
+                opacity: isDataTransitioning ? 0.8 : 1,
+            }}
+            className={styles.container}
+            exit={{ opacity: 0 }}
+            initial={{ backgroundColor: color.background, opacity: 0 }}
+            transition={{
+                duration: 0.4,
+                ease: 'easeInOut',
+            }}
+        >
+            {isDataTransitioning && (
+                <div className={styles.loading}>
+                    <Spinner />
+                </div>
+            )}
+            <div style={{ padding: '1rem' }}>
+                ExpandedAlbumListItem - {displayData?.name || 'Loading...'}
+            </div>
+        </motion.div>
+    );
+};