update title columns to use links

src/renderer/components/item-list/helpers/get-title-path.ts

@@ -0,0 +1,19 @@
+import { generatePath } from 'react-router';
+
+import { AppRoute } from '/@/renderer/router/routes';
+import { LibraryItem } from '/@/shared/types/domain-types';
+
+export const getTitlePath = (itemType: LibraryItem, id: string) => {
+    switch (itemType) {
+        case LibraryItem.ALBUM:
+            return generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, { albumId: id });
+        case LibraryItem.ALBUM_ARTIST:
+            return generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, { albumArtistId: id });
+        case LibraryItem.ARTIST:
+            return generatePath(AppRoute.LIBRARY_ARTISTS_DETAIL, { artistId: id });
+        case LibraryItem.GENRE:
+            return generatePath(AppRoute.LIBRARY_GENRES, { genreId: id });
+        default:
+            return null;
+    }
+};

src/renderer/components/item-list/item-table-list/columns/image-column.module.css

@@ -1,3 +1,4 @@
 .skeleton {
+    width: initial;
     aspect-ratio: 1 / 1;
 }

src/renderer/components/item-list/item-table-list/columns/name-column.tsx

@@ -1,21 +0,0 @@
-import {
-    ItemTableListInnerColumn,
-    TableColumnTextContainer,
-} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
-import { Skeleton } from '/@/shared/components/skeleton/skeleton';
-
-export const NameColumn = (props: ItemTableListInnerColumn) => {
-    const row: string | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
-        props.columns[props.columnIndex].id
-    ];
-
-    if (typeof row === 'string') {
-        return <TableColumnTextContainer {...props}>{row}</TableColumnTextContainer>;
-    }
-
-    return (
-        <TableColumnTextContainer {...props}>
-            <Skeleton />
-        </TableColumnTextContainer>
-    );
-};

src/renderer/components/item-list/item-table-list/columns/title-column.module.css

@@ -0,0 +1,14 @@
+.name-container {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+.name-container.compact {
+    -webkit-line-clamp: 1;
+}
+
+.name-container.large {
+    -webkit-line-clamp: 3;
+}

src/renderer/components/item-list/item-table-list/columns/title-column.tsx

@@ -0,0 +1,52 @@
+import clsx from 'clsx';
+import { Link } from 'react-router-dom';
+
+import styles from './title-column.module.css';
+
+import { getTitlePath } from '/@/renderer/components/item-list/helpers/get-title-path';
+import {
+    ItemTableListInnerColumn,
+    TableColumnContainer,
+    TableColumnTextContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { Skeleton } from '/@/shared/components/skeleton/skeleton';
+import { Text } from '/@/shared/components/text/text';
+
+export const TitleColumn = (props: ItemTableListInnerColumn) => {
+    const row: string | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (typeof row === 'string') {
+        const path = getTitlePath(props.itemType, (props.data[props.rowIndex] as any).id as string);
+
+        const titleLinkProps = path
+            ? {
+                  component: Link,
+                  isLink: true,
+                  to: path,
+              }
+            : {};
+
+        return (
+            <TableColumnContainer {...props}>
+                <Text
+                    className={clsx({
+                        [styles.compact]: props.size === 'compact',
+                        [styles.large]: props.size === 'large',
+                        [styles.nameContainer]: true,
+                    })}
+                    {...titleLinkProps}
+                >
+                    {row}
+                </Text>
+            </TableColumnContainer>
+        );
+    }
+
+    return (
+        <TableColumnTextContainer {...props}>
+            <Skeleton />
+        </TableColumnTextContainer>
+    );
+};

src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx

@@ -3,6 +3,7 @@ import { generatePath, Link } from 'react-router-dom';
 
 import styles from './title-combined-column.module.css';
 
+import { getTitlePath } from '/@/renderer/components/item-list/helpers/get-title-path';
 import {
     ItemTableListInnerColumn,
     TableColumnContainer,
@@ -31,6 +32,15 @@ export const TitleCombinedColumn = (props: ItemTableListInnerColumn) => {
 
     if (row && 'name' in row && 'imageUrl' in row && 'artists' in row) {
         const rowHeight = props.getRowHeight(props.rowIndex, props);
+        const path = getTitlePath(props.itemType, (props.data[props.rowIndex] as any).id as string);
+
+        const titleLinkProps = path
+            ? {
+                  component: Link,
+                  isLink: true,
+                  to: path,
+              }
+            : {};
 
         return (
             <TableColumnContainer
@@ -40,7 +50,7 @@ export const TitleCombinedColumn = (props: ItemTableListInnerColumn) => {
             >
                 <Image containerClassName={styles.image} src={row.imageUrl as string} />
                 <div className={styles['text-container']}>
-                    <Text className={styles.title} isNoSelect>
+                    <Text className={styles.title} isNoSelect {...titleLinkProps}>
                         {row.name as string}
                     </Text>
                     <div className={styles.artists}>

src/renderer/components/item-list/item-table-list/item-table-list-column.tsx

@@ -26,6 +26,7 @@ import { RatingColumn } from '/@/renderer/components/item-list/item-table-list/c
 import { RowIndexColumn } from '/@/renderer/components/item-list/item-table-list/columns/row-index-column';
 import { SizeColumn } from '/@/renderer/components/item-list/item-table-list/columns/size-column';
 import { TextColumn } from '/@/renderer/components/item-list/item-table-list/columns/text-column';
+import { TitleColumn } from '/@/renderer/components/item-list/item-table-list/columns/title-column';
 import { TitleCombinedColumn } from '/@/renderer/components/item-list/item-table-list/columns/title-combined-column';
 import { TableItemProps } from '/@/renderer/components/item-list/item-table-list/item-table-list';
 import { ItemControls } from '/@/renderer/components/item-list/types';
@@ -128,6 +129,9 @@ export const ItemTableListColumn = (props: ItemTableListColumn) => {
         case TableColumn.SIZE:
             return <SizeColumn {...props} controls={controls} type={type} />;
 
+        case TableColumn.TITLE:
+            return <TitleColumn {...props} controls={controls} type={type} />;
+
         case TableColumn.TITLE_COMBINED:
             return <TitleCombinedColumn {...props} controls={controls} type={type} />;