feat(items-list): add new card view

app/components/items/cards/item-card.tsx

@@ -1,10 +1,11 @@
 'use client'
 
-import { ItemImage, ItemName, ItemArtists } from '../misc'
+import { ItemArtists, ItemImage, ItemName } from '../misc'
 
-import { Card } from '@app/components/ui/card'
-import { SpotifyLink } from '@app/components/common'
 import type { AlbumEntity, ArtistEntity, TrackEntity } from '@app/api/types'
+import { SpotifyLink } from '@app/components/common'
+import { Card } from '@app/components/ui/card'
+import { cn } from '@app/utils/cn'
 
 interface ItemCardAlbum
   extends Pick<AlbumEntity, 'images' | 'albumType' | 'releaseDate'> {
@@ -43,30 +44,38 @@
   album,
 }: ItemCard.Props) {
   return (
-    <Card className="flex flex-col gap-3 rounded-lg bg-neutral-800 p-4">
+    <Card className="flex w-full flex-col gap-3 rounded-lg bg-neutral-800 p-4">
       <ItemImage images={images ?? album} alt={name} size={200} />
 
-      <div>
+      <div
+        className={cn(!album && !artists && 'flex flex-row justify-between')}
+      >
         <ItemName
           name={name}
           href={`/${artists ? (album ? 'track' : 'album') : 'artist'}/${id}`}
           className="!max-w-[200px]"
         />
 
-        <div className="flex flex-row justify-between">
-          {albumType ? (
-            <div>
-              {new Date(releaseDate).getFullYear()} &bull;&nbsp;
-              <span className="capitalize">{albumType}</span>
-            </div>
-          ) : album ? (
-            <ItemArtists artists={artists} />
-          ) : (
-            <div />
-          )}
+        {(album ?? albumType) ? (
+          <div className="flex flex-row justify-between">
+            {albumType && (
+              <div>
+                {new Date(releaseDate).getFullYear()} &bull;&nbsp;
+                <span className="capitalize">{albumType}</span>
+              </div>
+            )}
+
+            {album && (
+              <div className="flex max-w-[150px] justify-start">
+                <ItemArtists artists={artists} />
+              </div>
+            )}
 
+            {(album ?? artists) && <SpotifyLink href={href} />}
+          </div>
+        ) : (
           <SpotifyLink href={href} />
-        </div>
+        )}
       </div>
     </Card>
   )

app/components/items/list/items-list.skeleton.tsx

@@ -25,7 +25,7 @@ function ItemsListSkeleton({
 }: ItemsListSkeleton.Props) {
   return (
     <div className="flex flex-col gap-8">
-      {view === View.CARD && (
+      {view === View.TOP && (
         <>
           <div className="mt-16 flex w-full flex-col items-center justify-center gap-4 self-center pt-4 md:flex-row md:items-start lg:mt-24">
             <div className="flex h-full flex-col-reverse justify-center gap-4 md:w-2/3 md:flex-row">
@@ -87,6 +87,21 @@ function ItemsListSkeleton({
             ))}
         </div>
       )}
+
+      {view === View.CARD && (
+        <div className="flex flex-col md:flex-row gap-4">
+          {Array.from({ length: 10 })
+            .fill(0)
+            .map((_, index) => (
+              <ItemsListElementSkeleton
+                key={index}
+                withArtists={withArtists}
+                withPlayedAt={withPlayedAt}
+                withPlaysOrPlayTime={withProgress}
+              />
+            ))}
+        </div>
+      )}
     </div>
   )
 }

app/components/items/list/items-list.spec.tsx

@@ -73,6 +73,7 @@ describe('ItemsList', () => {
   test('should match snapshot with playTime', () => {
     const view = render(
       <ItemsList
+        isRounded
         items={tracksMock.map(track => ({
           ...track,
           playTime: 1000 * 60 * 60 * 2,
@@ -88,6 +89,7 @@ describe('ItemsList', () => {
     const view = render(
       <ItemsList
         isTop
+        isRounded
         items={tracksMock.map(track => ({
           ...track,
           playTime: 1000 * 60 * 60 * 2,

app/components/items/list/items-list.stories.tsx

@@ -141,7 +141,7 @@ export const Skeleton: ItemsListStory = {
 }
 
 export const SkeletonWithTop: ItemsListStory = {
-  render: () => <ItemsListSkeleton view={View.CARD} />,
+  render: () => <ItemsListSkeleton view={View.TOP} />,
 }
 
 export const SkeletonWithArtists: ItemsListStory = {

app/components/items/list/items-list.tsx

@@ -2,7 +2,7 @@
 
 import type { HtmlHTMLAttributes } from 'react'
 
-import { ItemTopCard } from '../cards'
+import { ItemCard, ItemTopCard } from '../cards'
 import { formatItems } from '../helpers'
 import type { ItemPosition } from '../misc'
 
@@ -32,6 +32,7 @@ namespace ItemsList {
         | TrackEntity[]
         | RigtchStatsResponse<ArtistEntity | TrackEntity | AlbumEntity>
       isTop?: boolean
+      isCard?: boolean
       positionSize?: ItemPosition.Props['size']
       positionClassName?: string
       lastItemSeparator?: boolean
@@ -44,6 +45,7 @@ namespace ItemsList {
 function ItemsList({
   items,
   isTop,
+  isCard,
   positionSize,
   className,
   positionClassName,
@@ -59,7 +61,7 @@ function ItemsList({
   if (isTop) sortedItems.splice(0, 2, sortedItems[1], sortedItems[0])
 
   return (
-    <div className={cn('flex flex-col gap-8', className)}>
+    <div className={cn('align-center flex flex-col gap-8', className)}>
       {isTop && (
         <>
           <div className="mt-16 hidden w-full flex-col items-center justify-center gap-4 self-center pt-4 md:flex md:flex-row md:items-start lg:mt-24">
@@ -90,22 +92,32 @@ function ItemsList({
         </>
       )}
 
-      <div className="flex flex-col">
+      <div
+        className={cn(
+          isCard
+            ? 'grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-4'
+            : 'flex flex-col'
+        )}
+      >
         {sortedItems.slice(isTop ? 3 : 0).map((item, index, items) => (
           <div key={index}>
-            {/* @ts-expect-error: conditional types are already handled */}
-            <ItemsListElement
-              {...item}
-              genresDisplayLength={genresDisplayLength}
-              positionSize={positionSize}
-              positionClassName={positionClassName}
-              className={cn(
-                isRounded && index === 0 && 'rounded-t-lg',
-                isRounded && index === items.length - 1 && 'rounded-bl-lg'
-              )}
-            />
+            {isCard ? (
+              <ItemCard {...item} />
+            ) : (
+              /* @ts-expect-error: conditional types are already handled */
+              <ItemsListElement
+                {...item}
+                genresDisplayLength={genresDisplayLength}
+                positionSize={positionSize}
+                positionClassName={positionClassName}
+                className={cn(
+                  isRounded && index === 0 && 'rounded-t-lg',
+                  isRounded && index === items.length - 1 && 'rounded-bl-lg'
+                )}
+              />
+            )}
 
-            {items.length === index + 1 ? (
+            {isCard ? null : items.length === index + 1 ? (
               lastItemSeparator ? (
                 <Separator />
               ) : null

app/components/items/misc/item-artists.tsx

@@ -1,8 +1,8 @@
 'use client'
 
+import type { ArtistEntity } from '@app/api/types'
 import { LinkButton } from '@app/components/common/buttons'
 import { cn } from '@app/utils/cn'
-import type { ArtistEntity } from '@app/api/types'
 
 namespace ItemArtists {
   export type Props = Readonly<
@@ -14,7 +14,7 @@ namespace ItemArtists {
 
 function ItemArtists({ artists, className }: ItemArtists.Props) {
   return (
-    <>
+    <span className="truncate">
       {artists.map(({ name, id }, index) => (
         <span key={name}>
           <LinkButton
@@ -30,7 +30,7 @@ function ItemArtists({ artists, className }: ItemArtists.Props) {
           {index !== artists.length - 1 && <span>, </span>}
         </span>
       ))}
-    </>
+    </span>
   )
 }
 

app/components/items/misc/relative-time.tsx

@@ -18,7 +18,7 @@ function RelativeTime({ value, options, className }: RelativeTime.Props) {
       className={cn('whitespace-nowrap text-primary-foreground/80', className)}
       suppressHydrationWarning
     >
-      {DateTime.fromISO(value, options).toRelative()}
+      {DateTime.fromISO(value, options).setLocale('en').toRelative()}
     </p>
   )
 }

app/profile/components/common/selects/select-view.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
-import { LuLayers, LuList } from 'react-icons/lu'
+import { LuLayers, LuList, LuStar } from 'react-icons/lu'
 
 import type { ProfileSelectProps } from './props'
 
@@ -19,15 +19,20 @@ import { formatSearchParams } from '@app/utils/formatters'
 export function SelectView({ initialValue }: ProfileSelectProps<View>) {
   const viewOptions = [
     {
-      icon: <LuLayers />,
-      value: View.CARD,
-      label: 'Card',
+      icon: <LuStar />,
+      value: View.TOP,
+      label: 'Top',
     },
     {
       icon: <LuList />,
       value: View.LIST,
       label: 'List',
     },
+    {
+      icon: <LuLayers />,
+      value: View.CARD,
+      label: 'Card',
+    },
   ]
 
   const pathname = usePathname()

app/profile/enums/view.ts

@@ -1,4 +1,5 @@
 export enum View {
   LIST = 'list',
+  TOP = 'TOP',
   CARD = 'card',
 }

app/profile/sections/items-section.tsx

@@ -1,6 +1,5 @@
 import { NoDataAlert } from '../components/common'
 
-import { DefaultSection } from '@app/sections'
 import type {
   AlbumEntity,
   ArtistEntity,
@@ -9,6 +8,7 @@ import type {
 } from '@app/api/types'
 import { ItemsList } from '@app/components/items/list'
 import { View } from '@app/profile/enums'
+import { DefaultSection } from '@app/sections'
 
 namespace ItemsSection {
   export type Props = Readonly<
@@ -31,7 +31,11 @@ function ItemsSection({
   return (
     <DefaultSection {...props}>
       {items.length > 0 && (
-        <ItemsList items={items} isTop={view === View.CARD} />
+        <ItemsList
+          items={items}
+          isTop={view === View.TOP}
+          isCard={view === View.CARD}
+        />
       )}
 
       {items.length === 0 && <NoDataAlert />}

app/sections/default-section.tsx

@@ -19,7 +19,7 @@ function DefaultSection({
   ...props
 }: DefaultSection.Props) {
   return (
-    <section className="flex flex-col gap-4">
+    <section className="flex flex-col gap-6">
       <header className="flex items-center justify-between">
         <h2 className="text-4xl">{title}</h2>
 

tailwind.config.ts

@@ -1,6 +1,6 @@
 import { type Config } from 'tailwindcss'
-import plugin from 'tailwindcss/plugin'
 import TailwindCSSAnimate from 'tailwindcss-animate'
+import plugin from 'tailwindcss/plugin'
 
 export default {
   darkMode: ['class'],