use clearer separator character

src/renderer/api/utils.ts

@@ -47,3 +47,5 @@ export const hasFeature = (server: ServerListItem | null, feature: ServerFeature
 
     return server.features[feature] ?? false;
 };
+
+export const SEPARATOR_STRING = ' · ';

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 && (
+                        {index > 0 && <Separator />}
-                            <Text
-                                $secondary
-                                size="md"
-                                style={{ display: 'inline-block' }}
-                            >
-                                ,
-                            </Text>
-                        )}{' '}
                         {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 && (
+                        {index > 0 && <Separator />}
-                            <Text
-                                $secondary
-                                size="md"
-                                style={{ display: 'inline-block' }}
-                            >
-                                ,
-                            </Text>
-                        )}{' '}
                         {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 && (
+                        {index > 0 && <Separator />}
-                            <Text
-                                $secondary
-                                size="md"
-                                style={{ display: 'inline-block' }}
-                            >
-                                ,
-                            </Text>
-                        )}{' '}
                         <Text
                             $link
                             $secondary

src/renderer/features/item-details/components/item-details-modal.tsx

@@ -10,6 +10,7 @@ import { replaceURLWithHTMLLinks } from '/@/renderer/utils/linkify';
 import { Rating, Spoiler } from '/@/renderer/components';
 import { sanitize } from '/@/renderer/utils/sanitize';
 import { SongPath } from '/@/renderer/features/item-details/components/song-path';
+import { SEPARATOR_STRING } from '/@/renderer/api/utils';
 
 export type ItemDetailsModalProps = {
     item: Album | AlbumArtist | Song;
@@ -43,7 +44,7 @@ const handleRow = <T extends AnyLibraryItem>(t: TFunction, item: T, rule: ItemDe
 };
 
 const formatArtists = (item: Album | Song) =>
-    item.albumArtists?.map((artist) => artist.name).join(' · ');
+    item.albumArtists?.map((artist) => artist.name).join(SEPARATOR_STRING);
 
 const formatComment = (item: Album | Song) =>
     item.comment ? <Spoiler maxHeight={50}>{replaceURLWithHTMLLinks(item.comment)}</Spoiler> : null;
@@ -51,7 +52,7 @@ const formatComment = (item: Album | Song) =>
 const formatDate = (key: string | null) => (key ? dayjs(key).fromNow() : '');
 
 const formatGenre = (item: Album | AlbumArtist | Song) =>
-    item.genres?.map((genre) => genre.name).join(' · ');
+    item.genres?.map((genre) => genre.name).join(SEPARATOR_STRING);
 
 const formatRating = (item: Album | AlbumArtist | Song) =>
     item.userRating !== null ? (
@@ -162,7 +163,7 @@ const SongPropertyMapping: ItemDetailRow<Song>[] = [
     {
         key: 'artists',
         label: 'entity.artist_other',
-        render: (song) => song.artists.map((artist) => artist.name).join(' · '),
+        render: (song) => song.artists.map((artist) => artist.name).join(SEPARATOR_STRING),
     },
     { key: 'album', label: 'entity.album_one' },
     { key: 'discNumber', label: 'common.disc' },

src/renderer/features/player/components/left-controls.tsx

@@ -20,6 +20,7 @@ import { fadeIn } from '/@/renderer/styles';
 import { LibraryItem } from '/@/renderer/api/types';
 import { SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
 import { useHandleGeneralContextMenu } from '/@/renderer/features/context-menu/hooks/use-handle-context-menu';
+import { Separator } from '/@/renderer/components/separator';
 
 const ImageWrapper = styled.div`
     position: relative;
@@ -236,16 +237,7 @@ export const LeftControls = () => {
                     <LineItem $secondary>
                         {artists?.map((artist, index) => (
                             <React.Fragment key={`bar-${artist.id}`}>
-                                {index > 0 && (
+                                {index > 0 && <Separator />}
-                                    <Text
-                                        $link
-                                        $secondary
-                                        size="md"
-                                        style={{ display: 'inline-block' }}
-                                    >
-                                        ,
-                                    </Text>
-                                )}{' '}
                                 <Text
                                     $link
                                     component={Link}