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>