add close button to expanded list item

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

@@ -3,8 +3,8 @@ import { Suspense } from 'react';
 import styles from './expanded-list-item.module.css';
 
 import {
-    ItemListStateItem,
     ItemListStateActions,
+    ItemListStateItem,
 } from '/@/renderer/components/item-list/helpers/item-list-state';
 import { ExpandedAlbumListItem } from '/@/renderer/features/albums/components/expanded-album-list-item';
 import { Spinner } from '/@/shared/components/spinner/spinner';
@@ -27,7 +27,11 @@ export const ExpandedListItem = ({ internalState, itemType }: ExpandedListItemPr
         <div className={styles.container}>
             <div className={styles.inner}>
                 <Suspense fallback={<Spinner container />}>
-                    <SelectedItem item={currentItem} itemType={itemType} />
+                    <SelectedItem
+                        internalState={internalState}
+                        item={currentItem as ItemListStateItem}
+                        itemType={itemType}
+                    />
                 </Suspense>
             </div>
         </div>
@@ -35,14 +39,15 @@ export const ExpandedListItem = ({ internalState, itemType }: ExpandedListItemPr
 };
 
 interface SelectedItemProps {
+    internalState: ItemListStateActions;
     item: ItemListStateItem;
     itemType: LibraryItem;
 }
 
-const SelectedItem = ({ item, itemType }: SelectedItemProps) => {
+const SelectedItem = ({ internalState, item, itemType }: SelectedItemProps) => {
     switch (itemType) {
         case LibraryItem.ALBUM:
-            return <ExpandedAlbumListItem item={item} />;
+            return <ExpandedAlbumListItem internalState={internalState} item={item} />;
         default:
             return null;
     }

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

@@ -31,6 +31,20 @@
     gap: var(--theme-spacing-xs);
 }
 
+.header-title {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.close-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 10;
+}
+
 .content {
     display: flex;
     flex-direction: column;
@@ -45,6 +59,7 @@
 .item-title {
     z-index: 10;
     display: -webkit-box;
+    padding-right: var(--theme-spacing-xl);
     overflow: hidden;
     -webkit-line-clamp: 2;
     line-clamp: 2;
@@ -116,15 +131,15 @@
     min-height: 0;
 
     @container (min-width: 640px) {
-        width: 50%;
+        width: 60%;
     }
 
     @container (min-width: 768px) {
-        width: 40%;
+        width: 50%;
     }
 
     @container (min-width: 1200px) {
-        width: 30%;
+        width: 40%;
     }
 }
 
@@ -136,7 +151,7 @@
 .track-row {
     position: relative;
     display: grid;
-    grid-template-columns: 55px 1fr 50px;
+    grid-template-columns: 55px 1fr 55px;
     gap: var(--theme-spacing-sm);
     align-items: center;
     padding: var(--theme-spacing-xs) var(--theme-spacing-sm);

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

@@ -18,6 +18,7 @@ import { ItemListItem } from '/@/renderer/components/item-list/types';
 import { albumQueries } from '/@/renderer/features/albums/api/album-api';
 import { useFastAverageColor } from '/@/renderer/hooks';
 import { useDragDrop } from '/@/renderer/hooks/use-drag-drop';
+import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 import { Group } from '/@/shared/components/group/group';
 import { ScrollArea } from '/@/shared/components/scroll-area/scroll-area';
 import { Separator } from '/@/shared/components/separator/separator';
@@ -40,6 +41,7 @@ interface AlbumTracksTableProps {
 }
 
 interface ExpandedAlbumListItemProps {
+    internalState?: ItemListStateActions;
     item: ItemListStateItem;
 }
 
@@ -163,7 +165,7 @@ const AlbumTracksTable = ({ isDark, serverId, songs }: AlbumTracksTableProps) =>
     );
 };
 
-export const ExpandedAlbumListItem = ({ item }: ExpandedAlbumListItemProps) => {
+export const ExpandedAlbumListItem = ({ internalState, item }: ExpandedAlbumListItemProps) => {
     const { data, isLoading } = useSuspenseQuery(
         albumQueries.detail({
             query: { id: item.id },
@@ -201,13 +203,37 @@ export const ExpandedAlbumListItem = ({ item }: ExpandedAlbumListItemProps) => {
                 <div className={styles.expanded}>
                     <div className={styles.content}>
                         <div className={styles.header}>
-                            <TextTitle
-                                className={clsx(styles.itemTitle, { [styles.dark]: color.isDark })}
-                                fw={700}
-                                order={4}
-                            >
-                                {data?.name}
-                            </TextTitle>
+                            <div className={styles.headerTitle}>
+                                <TextTitle
+                                    className={clsx(styles.itemTitle, {
+                                        [styles.dark]: color.isDark,
+                                    })}
+                                    fw={700}
+                                    order={4}
+                                >
+                                    {data?.name}
+                                </TextTitle>
+                                {internalState && (
+                                    <ActionIcon
+                                        className={clsx(styles.closeButton, {
+                                            [styles.dark]: color.isDark,
+                                        })}
+                                        icon="x"
+                                        iconProps={{
+                                            size: 'xl',
+                                        }}
+                                        onClick={() => {
+                                            const rowId = internalState.extractRowId(item);
+                                            if (rowId) {
+                                                internalState.clearExpanded();
+                                            }
+                                        }}
+                                        radius="50%"
+                                        size="sm"
+                                        variant="subtle"
+                                    />
+                                )}
+                            </div>
                             <Group
                                 className={clsx(styles.itemSubtitle, {
                                     [styles.dark]: color.isDark,