Update table component

src/renderer/components/virtual-table/cells/album-artist-cell.tsx

@@ -31,7 +31,6 @@ export const AlbumArtistCell = ({ value, data }: ICellRendererParams) => {
           <React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
             {index > 0 && (
               <Text
-                $link
                 $secondary
                 size="sm"
                 style={{ display: 'inline-block' }}

src/renderer/components/virtual-table/cells/artist-cell.tsx

@@ -31,7 +31,6 @@ export const ArtistCell = ({ value, data }: ICellRendererParams) => {
           <React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
             {index > 0 && (
               <Text
-                $link
                 $secondary
                 size="sm"
                 style={{ display: 'inline-block' }}

src/renderer/components/virtual-table/cells/combined-title-cell.tsx

@@ -11,6 +11,7 @@ import { Text } from '/@/renderer/components/text';
 import { AppRoute } from '/@/renderer/router/routes';
 import { ServerType } from '/@/renderer/types';
 import { Skeleton } from '/@/renderer/components/skeleton';
+import { CELL_VARIANTS } from '/@/renderer/components/virtual-table/cells/generic-cell';
 
 const CellContainer = styled(motion.div)<{ height: number }>`
   display: grid;

src/renderer/components/virtual-table/cells/generic-cell.tsx

@@ -1,12 +1,20 @@
 import type { ICellRendererParams } from '@ag-grid-community/core';
+import { motion, Variants } from 'framer-motion';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { Skeleton } from '/@/renderer/components/skeleton';
 import { Text } from '/@/renderer/components/text';
 
-export const CellContainer = styled.div<{
-  position?: 'left' | 'center' | 'right';
-}>`
+export const CELL_VARIANTS: Variants = {
+  animate: {
+    opacity: 1,
+  },
+  initial: {
+    opacity: 0,
+  },
+};
+
+export const CellContainer = styled(motion.div)<{ position?: 'left' | 'center' | 'right' }>`
   display: flex;
   align-items: center;
   justify-content: ${(props) =>

src/renderer/components/virtual-table/cells/genre-cell.tsx

@@ -17,7 +17,6 @@ export const GenreCell = ({ value, data }: ICellRendererParams) => {
           <React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
             {index > 0 && (
               <Text
-                $link
                 $secondary
                 size="sm"
                 style={{ display: 'inline-block' }}