From ec69cc22f90b2e217ae489cd51e6d4b013632a5a Mon Sep 17 00:00:00 2001
From: Kendall Garner <17521368+kgarner7@users.noreply.github.com>
Date: Sun, 14 Apr 2024 21:58:25 -0700
Subject: [PATCH] use clearer separator character

---
 src/renderer/api/utils.ts                         |  2 ++
 src/renderer/components/separator/index.tsx       | 15 +++++++++++++++
 .../virtual-table/cells/album-artist-cell.tsx     | 11 ++---------
 .../virtual-table/cells/artist-cell.tsx           | 11 ++---------
 .../virtual-table/cells/combined-title-cell.tsx   |  3 ++-
 .../components/virtual-table/cells/genre-cell.tsx | 11 ++---------
 .../components/item-details-modal.tsx             |  7 ++++---
 .../features/player/components/left-controls.tsx  | 12 ++----------
 8 files changed, 31 insertions(+), 41 deletions(-)
 create mode 100644 src/renderer/components/separator/index.tsx

diff --git a/src/renderer/api/utils.ts b/src/renderer/api/utils.ts
index 8f10c869d..c7ef7b58a 100644
--- a/src/renderer/api/utils.ts
+++ b/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 = ' · ';
diff --git a/src/renderer/components/separator/index.tsx b/src/renderer/components/separator/index.tsx
new file mode 100644
index 000000000..d1800fe52
--- /dev/null
+++ b/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>
+    );
+};
diff --git a/src/renderer/components/virtual-table/cells/album-artist-cell.tsx b/src/renderer/components/virtual-table/cells/album-artist-cell.tsx
index 62b0e1a05..ea9a49f06 100644
--- a/src/renderer/components/virtual-table/cells/album-artist-cell.tsx
+++ b/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
diff --git a/src/renderer/components/virtual-table/cells/artist-cell.tsx b/src/renderer/components/virtual-table/cells/artist-cell.tsx
index 876382370..82a3e6ff6 100644
--- a/src/renderer/components/virtual-table/cells/artist-cell.tsx
+++ b/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
diff --git a/src/renderer/components/virtual-table/cells/combined-title-cell.tsx b/src/renderer/components/virtual-table/cells/combined-title-cell.tsx
index 1eb0b2033..cd7d74a1a 100644
--- a/src/renderer/components/virtual-table/cells/combined-title-cell.tsx
+++ b/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
diff --git a/src/renderer/components/virtual-table/cells/genre-cell.tsx b/src/renderer/components/virtual-table/cells/genre-cell.tsx
index 4fe7f5f2e..9e24ab5e8 100644
--- a/src/renderer/components/virtual-table/cells/genre-cell.tsx
+++ b/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
diff --git a/src/renderer/features/item-details/components/item-details-modal.tsx b/src/renderer/features/item-details/components/item-details-modal.tsx
index 6bc05386e..9d2cdcd36 100644
--- a/src/renderer/features/item-details/components/item-details-modal.tsx
+++ b/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' },
diff --git a/src/renderer/features/player/components/left-controls.tsx b/src/renderer/features/player/components/left-controls.tsx
index 928f005e1..70076b285 100644
--- a/src/renderer/features/player/components/left-controls.tsx
+++ b/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 && (
-                                    <Text
-                                        $link
-                                        $secondary
-                                        size="md"
-                                        style={{ display: 'inline-block' }}
-                                    >
-                                        ,
-                                    </Text>
-                                )}{' '}
+                                {index > 0 && <Separator />}
                                 <Text
                                     $link
                                     component={Link}