fix(web): recursively unnest class arrays (#29755)

web/src/lib/components/assets/thumbnail/Thumbnail.svelte

@@ -247,7 +247,7 @@
     >
       <ImageThumbnail
         class={['absolute group-focus-visible:rounded-lg', { 'rounded-xl': selected }, imageClass]}
-        brokenAssetClass={['z-1 absolute group-focus-visible:rounded-lg', { 'rounded-xl': selected }, brokenAssetClass]}
+        brokenAssetClass={['z-1 absolute group-focus-visible:rounded-lg', selected && 'rounded-2xl', brokenAssetClass]}
         url={getAssetMediaUrl({ id: asset.id, size: AssetMediaSize.Thumbnail, cacheKey: asset.thumbhash })}
         altText={$getAltText(asset)}
         widthStyle="{width}px"

web/src/lib/index.spec.ts

@@ -12,6 +12,10 @@ describe('cleanClass', () => {
   it('should unnest arrays', () => {
     expect(cleanClass('class1', ['class2', 'class3'])).toBe('class1 class2 class3');
   });
+
+  it('should unnest doubly nested arrays', () => {
+    expect(cleanClass('class1', [['class2a', 'class2b'], 'class3'])).toBe('class1 class2a class2b class3');
+  });
 });
 
 describe('isDefined', () => {

web/src/lib/index.ts

@@ -3,8 +3,7 @@ import { twMerge } from 'tailwind-merge';
 
 export const cleanClass = (...classNames: unknown[]) => {
   return twMerge(
-    classNames
-      .flatMap((className) => (Array.isArray(className) ? className : [className]))
+    flattenClass(classNames)
       .filter((className) => {
         if (!className || typeof className === 'boolean') {
           return false;
@@ -16,6 +15,9 @@ export const cleanClass = (...classNames: unknown[]) => {
   );
 };
 
+const flattenClass = (classNames: unknown[]): unknown[] =>
+  classNames.flatMap((className) => (Array.isArray(className) ? flattenClass(className) : [className]));
+
 export const isDefined = <T>(value: T): value is NonNullable<T> => value !== null && value !== undefined;
 
 export const getHeatmapRange = () => {