feat(web): Show alternative values for release labels

- Extract release labels into their own component
- Support displaying release labels inline (for alternative values)
- Remove special list item padding for inline lists (also affects footer)

Author: kellnerd

server/components/Release.tsx

@@ -1,9 +1,9 @@
 import { setupAlternativeValues } from './AlternativeValues.tsx';
 import { ArtistCredit } from './ArtistCredit.tsx';
 import { CoverImage } from './CoverImage.tsx';
-import { LinkedEntity } from './LinkedEntity.tsx';
 import { MessageBox } from './MessageBox.tsx';
 import { ProviderList } from './ProviderList.tsx';
+import { ReleaseLabels } from './ReleaseLabels.tsx';
 import { TextWithLineBreaks } from './TextWithLineBreaks.tsx';
 import { Tracklist } from './Tracklist.tsx';
 import RegionList from '@/server/islands/RegionList.tsx';
@@ -59,14 +59,15 @@ export function Release({ release, releaseMap }: { release: HarmonyRelease; rele
 					<tr>
 						<th>Labels</th>
 						<td>
-							<ul>
-								{labels?.map((label) => (
-									<li>
-										<LinkedEntity entity={label} entityType='label' displayName={label.name ?? '[unknown]'} />{' '}
-										{label.catalogNumber}
-									</li>
-								))}
-							</ul>
+							<ReleaseLabels labels={labels} />
+							<AlternativeValues
+								property={(release) => release.labels}
+								display={(labels) => <ReleaseLabels labels={labels} inline />}
+								identifier={(labels) =>
+									labels.map(
+										({ name, catalogNumber }) => [name, catalogNumber].join('\t'),
+									).join('\n')}
+							/>
 						</td>
 					</tr>
 				)}

server/components/ReleaseLabels.tsx

@@ -0,0 +1,19 @@
+import type { Label } from '@/harmonizer/types.ts';
+import { classList } from '@/utils/jsx.ts';
+import { LinkedEntity } from './LinkedEntity.tsx';
+
+export function ReleaseLabels({ labels, inline }: {
+	labels: Label[];
+	inline?: boolean;
+}) {
+	return (
+		<ul class={classList('release-labels', inline && 'inline')}>
+			{labels.map((label) => (
+				<li>
+					<LinkedEntity entity={label} entityType='label' displayName={label.name ?? '[unknown]'} />{' '}
+					{label.catalogNumber}
+				</li>
+			))}
+		</ul>
+	);
+}

server/static/harmony.css

@@ -91,6 +91,10 @@ h1 + p.subtitle {
 	text-align: center;
 }
 
+ul.inline {
+	display: inline-block;
+	padding-inline: 0;
+}
 ul.inline > li {
 	display: inline;
 }

utils/jsx.ts

@@ -0,0 +1,4 @@
+/** Joins the given CSS classes, omitting all falsy values. */
+export function classList(...classes: Array<string | false | undefined>): string {
+	return classes.filter(Boolean).join(' ');
+}