Fix suggested artists popup list formatting (#14399)

## Summary
- Fixed the Suggested Artists popup so featured names no longer render
with a leading comma.
- Filtered blank/whitespace artist names out of the displayed
featured-name list.
- Kept the remaining-artist count formatted as `, and N others`.

## Verification
- `npx eslint --no-cache --ext=js,jsx,ts,tsx
src/components/artist-recommendations/ArtistRecommendations.tsx` from
`packages/web`
- `npm run typecheck -w @audius/web`

<div><a
href="https://cursor.com/agents/bc-0e858a92-93b8-56b6-ba01-b62512376b12"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://cursor.com/assets/images/open-in-web-dark.png"><source
media="(prefers-color-scheme: light)"
srcset="https://cursor.com/assets/images/open-in-web-light.png"><img
alt="Open in Web" width="114" height="28"
src="https://cursor.com/assets/images/open-in-web-dark.png"></picture></a>&nbsp;<a
href="https://cursor.com/automations/c63aa103-66df-4558-b31d-675358e5c6a1"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://cursor.com/assets/images/view-automation-dark.png"><source
media="(prefers-color-scheme: light)"
srcset="https://cursor.com/assets/images/view-automation-light.png"><img
alt="View Automation" width="141" height="28"
src="https://cursor.com/assets/images/view-automation-dark.png"></picture></a>&nbsp;</div>

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Ray Jacobson <raymondjacobson@users.noreply.github.com>

Author: 3 people

packages/web/src/components/artist-recommendations/ArtistRecommendations.tsx

@@ -1,4 +1,11 @@
-import { forwardRef, ReactNode, useCallback, useEffect, useState } from 'react'
+import {
+  Fragment,
+  forwardRef,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useState
+} from 'react'
 
 import { useRelatedArtistsUsers } from '@audius/common/api'
 import { Name, FollowSource, SquareSizes, ID } from '@audius/common/models'
@@ -33,7 +40,10 @@ const messages = {
   follow: 'Follow All',
   unfollow: 'Unfollow All',
   following: 'Following All',
-  featuring: 'Featuring'
+  featuring: 'Featuring',
+  and: 'and',
+  other: 'other',
+  others: 'others'
 }
 const ArtistProfilePictureWrapper = ({
   userId,
@@ -136,6 +146,12 @@ export const ArtistRecommendations = forwardRef<
   )
 
   const isLoading = !suggestedArtists || suggestedArtists.length === 0
+  const featuredArtists = suggestedArtists
+    .filter((artist) => artist.name.trim().length > 0)
+    .slice(0, 3)
+  const remainingArtistCount = suggestedArtists.length - featuredArtists.length
+  const remainingArtistLabel =
+    remainingArtistCount === 1 ? messages.other : messages.others
 
   const renderMainContent = () => {
     if (isLoading) return <LoadingSpinner className={styles.spinner} />
@@ -157,25 +173,26 @@ export const ArtistRecommendations = forwardRef<
             </div>
           ))}
         </div>
-        <div className={cn(styles.contentItem, itemClassName)}>
-          {`${messages.featuring} `}
-          {suggestedArtists
-            .slice(0, 3)
-            .map<ReactNode>((a, i) => (
-              <ArtistPopoverWrapper
-                key={a.user_id}
-                userId={a.user_id}
-                handle={a.handle}
-                name={a.name}
-                onArtistNameClicked={onArtistNameClicked}
-                closeParent={onClose}
-              />
-            ))
-            .reduce((prev, curr) => [prev, ', ', curr], '')}
-          {suggestedArtists.length > 3
-            ? `, and ${suggestedArtists.length - 3} others.`
-            : ''}
-        </div>
+        {featuredArtists.length === 0 ? null : (
+          <div className={cn(styles.contentItem, itemClassName)}>
+            {`${messages.featuring} `}
+            {featuredArtists.map((artist, index) => (
+              <Fragment key={artist.user_id}>
+                {index === 0 ? null : ', '}
+                <ArtistPopoverWrapper
+                  userId={artist.user_id}
+                  handle={artist.handle}
+                  name={artist.name.trim()}
+                  onArtistNameClicked={onArtistNameClicked}
+                  closeParent={onClose}
+                />
+              </Fragment>
+            ))}
+            {remainingArtistCount > 0
+              ? `, ${messages.and} ${remainingArtistCount} ${remainingArtistLabel}`
+              : ''}
+          </div>
+        )}
       </>
     )
   }