feat(albums): show grouping tags on album detail page (#1872)

* feat(albums): show grouping tags on album detail page

---------

Co-authored-by: Romain VIGNERES <romain.vigneres@texa.fr>

src/i18n/locales/ca.json

@@ -301,6 +301,7 @@
         "forward": "endavant",
         "manage": "gestiona",
         "mbid": "ID de MusicBrainz",
+        "grouping": "agrupament",
         "noResultsFromQuery": "la petició no ha produït resultats",
         "path": "ruta",
         "playerMustBePaused": "cal pausar el reproductor",

src/i18n/locales/de.json

@@ -124,6 +124,7 @@
         "preview": "Vorschau",
         "reload": "Neu Laden",
         "mbid": "MusicBrainz ID",
+        "grouping": "gruppierung",
         "close": "schließen",
         "share": "Teilen",
         "translation": "Übersetzung",

src/i18n/locales/en.json

@@ -109,6 +109,7 @@
         "minimize": "minimize",
         "modified": "modified",
         "mbid": "MusicBrainz ID",
+        "grouping": "grouping",
         "mood": "mood",
         "name": "name",
         "no": "no",

src/i18n/locales/fr.json

@@ -183,6 +183,7 @@
         "albumPeak": "crête de l'album",
         "close": "fermer",
         "mbid": "Identifiant MusicBrainz",
+        "grouping": "regroupement",
         "preview": "aperçu",
         "share": "partager",
         "reload": "recharger",

src/i18n/locales/it.json

@@ -128,6 +128,7 @@
         "close": "chiudi",
         "codec": "codec",
         "mbid": "MusicBrainz ID",
+        "grouping": "raggruppamento",
         "preview": "anteprima",
         "reload": "aggiorna",
         "share": "condividi",

src/i18n/locales/nl.json

@@ -134,6 +134,7 @@
         "bitDepth": "bitdiepte",
         "codec": "codec",
         "mbid": "MusicBrainz ID",
+        "grouping": "groepering",
         "share": "deel",
         "explicit": "expliciet",
         "sampleRate": "sample rate",

src/i18n/locales/pt-BR.json

@@ -84,6 +84,7 @@
         "size": "tamanho",
         "note": "observação",
         "mbid": "ID no MusicBrainz",
+        "grouping": "agrupamento",
         "reload": "recarregar",
         "codec": "codec",
         "preview": "pré-visualizar",

src/i18n/locales/pt.json

@@ -72,6 +72,7 @@
         "forceRestartRequired": "reinicie para aplicar as alterações… feche a notificação para reiniciar",
         "forward": "para frente",
         "gap": "intervalo",
+        "grouping": "agrupamento",
         "home": "início",
         "increase": "incrementar",
         "left": "esquerda",

src/i18n/locales/ru.json

@@ -126,6 +126,7 @@
         "note": "заметка",
         "none": "нет",
         "mbid": "MusicBrainz ID",
+        "grouping": "группировка",
         "reload": "перезагрузить",
         "preview": "просмотр",
         "codec": "кодек",

src/i18n/locales/uk.json

@@ -98,6 +98,7 @@
         "forceRestartRequired": "перезапустіть, щоб застосувати зміни… закрийте повідомлення, щоб перезапустити",
         "forward": "уперед",
         "gap": "прогалина",
+        "grouping": "групування",
         "home": "додому",
         "increase": "збільшити",
         "left": "ліво",

src/renderer/features/albums/components/album-detail-content.tsx

@@ -94,6 +94,7 @@ interface AlbumMetadataTagsProps {
 }
 
 const MOOD_TAG = 'mood';
+const GROUPING_TAG = 'grouping';
 const RELEASE_COUNTRY_TAG = 'releasecountry';
 const RELEASE_STATUS_TAG = 'releasestatus';
 
@@ -155,6 +156,30 @@ const AlbumMetadataTags = ({ album }: AlbumMetadataTagsProps) => {
         }));
     }, [album]);
 
+    const groupingItems = useMemo(() => {
+        if (!album) return [];
+
+        return (
+            album.tags?.[GROUPING_TAG]?.map((tag) => {
+                if (album._serverType !== ServerType.NAVIDROME) {
+                    return { id: tag, label: tag, url: null };
+                }
+
+                const searchParams = new URLSearchParams();
+                const paramsWithCustom = setJsonSearchParam(
+                    searchParams,
+                    FILTER_KEYS.ALBUM._CUSTOM,
+                    { grouping: [tag] },
+                );
+                return {
+                    id: tag,
+                    label: tag,
+                    url: `${AppRoute.LIBRARY_ALBUMS}?${paramsWithCustom.toString()}`,
+                };
+            }) ?? []
+        );
+    }, [album]);
+
     const recordLabels = useMemo(() => {
         if (!album?.recordLabels || album.recordLabels.length === 0) return [];
 
@@ -221,6 +246,29 @@ const AlbumMetadataTags = ({ album }: AlbumMetadataTagsProps) => {
                 items={moodTagItems}
                 title={t('common.mood', { postProcess: 'sentenceCase' })}
             />
+
+            {groupingItems.length > 0 && (
+                <Stack align="center" className={styles.metadataPillGroup} gap="xs">
+                    <Text fw={600} isNoSelect size="sm" tt="uppercase">
+                        {t('common.grouping', { postProcess: 'sentenceCase' })}
+                    </Text>
+                    <div className={styles['pill-group-wrapper']}>
+                        <Pill.Group>
+                            {groupingItems.map((item) =>
+                                item.url ? (
+                                    <PillLink key={`grouping-${item.id}`} size="md" to={item.url}>
+                                        {item.label}
+                                    </PillLink>
+                                ) : (
+                                    <Pill key={`grouping-${item.id}`} size="md">
+                                        {item.label}
+                                    </Pill>
+                                ),
+                            )}
+                        </Pill.Group>
+                    </div>
+                </Stack>
+            )}
         </>
     );
 };