use clearer separator character

src/renderer/components/separator/index.tsx

@@ -0,0 +1,15 @@
+import { SEPARATOR_STRING } from '/@/renderer/api/utils';
+import { Text } from '/@/renderer/components/text';
+
+export const Separator = () => {
+    return (
+        <Text
+            $noSelect
+            $secondary
+            size="md"
+            style={{ display: 'inline-block', padding: '0px 3px' }}
+        >
+            {SEPARATOR_STRING}
+        </Text>
+    );
+};

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

@@ -7,6 +7,7 @@ import { Text } from '/@/renderer/components/text';
 import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
 import { AppRoute } from '/@/renderer/router/routes';
 import { Skeleton } from '/@/renderer/components/skeleton';
+import { Separator } from '/@/renderer/components/separator';
 
 export const AlbumArtistCell = ({ value, data }: ICellRendererParams) => {
     if (value === undefined) {
@@ -29,15 +30,7 @@ export const AlbumArtistCell = ({ value, data }: ICellRendererParams) => {
             >
                 {value?.map((item: Artist | AlbumArtist, index: number) => (
                     <React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
-                        {index > 0 && (
-                            <Text
-                                $secondary
-                                size="md"
-                                style={{ display: 'inline-block' }}
-                            >
-                                ,
-                            </Text>
-                        )}{' '}
+                        {index > 0 && <Separator />}
                         {item.id ? (
                             <Text
                                 $link

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

@@ -7,6 +7,7 @@ import { Text } from '/@/renderer/components/text';
 import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
 import { AppRoute } from '/@/renderer/router/routes';
 import { Skeleton } from '/@/renderer/components/skeleton';
+import { Separator } from '/@/renderer/components/separator';
 
 export const ArtistCell = ({ value, data }: ICellRendererParams) => {
     if (value === undefined) {
@@ -29,15 +30,7 @@ export const ArtistCell = ({ value, data }: ICellRendererParams) => {
             >
                 {value?.map((item: Artist | AlbumArtist, index: number) => (
                     <React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
-                        {index > 0 && (
-                            <Text
-                                $secondary
-                                size="md"
-                                style={{ display: 'inline-block' }}
-                            >
-                                ,
-                            </Text>
-                        )}{' '}
+                        {index > 0 && <Separator />}
                         {item.id ? (
                             <Text
                                 $link

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

@@ -11,6 +11,7 @@ import type { AlbumArtist, Artist } from '/@/renderer/api/types';
 import { Text } from '/@/renderer/components/text';
 import { AppRoute } from '/@/renderer/router/routes';
 import { Skeleton } from '/@/renderer/components/skeleton';
+import { SEPARATOR_STRING } from '/@/renderer/api/utils';
 
 const CellContainer = styled(motion.div)<{ height: number }>`
     display: grid;
@@ -118,7 +119,7 @@ export const CombinedTitleCell = ({ value, rowIndex, node }: ICellRendererParams
                     {artists?.length ? (
                         artists.map((artist: Artist | AlbumArtist, index: number) => (
                             <React.Fragment key={`queue-${rowIndex}-artist-${artist.id}`}>
-                                {index > 0 ? ', ' : null}
+                                {index > 0 ? SEPARATOR_STRING : null}
                                 {artist.id ? (
                                     <Text
                                         $link

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

@@ -5,6 +5,7 @@ import type { AlbumArtist, Artist } from '/@/renderer/api/types';
 import { Text } from '/@/renderer/components/text';
 import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
 import { AppRoute } from '/@/renderer/router/routes';
+import { Separator } from '/@/renderer/components/separator';
 
 export const GenreCell = ({ value, data }: ICellRendererParams) => {
     return (
@@ -16,15 +17,7 @@ export const GenreCell = ({ value, data }: ICellRendererParams) => {
             >
                 {value?.map((item: Artist | AlbumArtist, index: number) => (
                     <React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
-                        {index > 0 && (
-                            <Text
-                                $secondary
-                                size="md"
-                                style={{ display: 'inline-block' }}
-                            >
-                                ,
-                            </Text>
-                        )}{' '}
+                        {index > 0 && <Separator />}
                         <Text
                             $link
                             $secondary