From 441339f4cb3243b44443457f7269f0078e30d2ce Mon Sep 17 00:00:00 2001
From: Iqro-dev <igor.sokolowski.code@gmail.com>
Date: Fri, 9 Aug 2024 16:29:46 +0200
Subject: [PATCH] feat(items-list): add new card view

---
 app/components/items/cards/item-card.tsx      | 31 ++++++++++++-------
 .../items/list/items-list.skeleton.tsx        | 17 +++++++++-
 .../items/list/items-list.stories.tsx         |  2 +-
 app/components/items/list/items-list.tsx      | 31 +++++++++++++------
 app/components/items/misc/item-artists.tsx    |  6 ++--
 .../components/common/selects/select-view.tsx | 17 ++++++----
 app/profile/enums/view.ts                     |  1 +
 app/profile/sections/items-section.tsx        |  8 +++--
 8 files changed, 80 insertions(+), 33 deletions(-)

diff --git a/app/components/items/cards/item-card.tsx b/app/components/items/cards/item-card.tsx
index 9ac25e69..bb785501 100644
--- a/app/components/items/cards/item-card.tsx
+++ b/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'> {
@@ -46,27 +47,35 @@ function ItemCard({
     <Card className="p-4 bg-neutral-800 rounded-lg flex flex-col gap-3">
       <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">
-          <div>
+        {album ?? albumType ? (
+          <div className="flex flex-row justify-between">
             {albumType && (
-              <>
+              <div>
                 {new Date(releaseDate).getFullYear()} &bull;&nbsp;
                 <span className="capitalize">{albumType}</span>
-              </>
+              </div>
             )}
-          </div>
 
-          {album && <ItemArtists artists={artists} />}
+            {album && (
+              <div className="max-w-[150px] flex justify-start">
+                <ItemArtists artists={artists} />
+              </div>
+            )}
 
+            {(album ?? artists) && <SpotifyLink href={href} />}
+          </div>
+        ) : (
           <SpotifyLink href={href} />
-        </div>
+        )}
       </div>
     </Card>
   )
diff --git a/app/components/items/list/items-list.skeleton.tsx b/app/components/items/list/items-list.skeleton.tsx
index 32be45a6..c763b459 100644
--- a/app/components/items/list/items-list.skeleton.tsx
+++ b/app/components/items/list/items-list.skeleton.tsx
@@ -24,7 +24,7 @@ function ItemsListSkeleton({
 }: ItemsListSkeleton.Props) {
   return (
     <div className="flex flex-col gap-8">
-      {view === View.CARD && (
+      {view === View.TOP && (
         <>
           <div className="flex flex-col md:flex-row self-center items-center md:items-start justify-center gap-4 pt-4 mt-16 lg:mt-24 w-full">
             <div className="flex flex-col-reverse md:flex-row justify-center gap-4 md:w-2/3 h-full">
@@ -84,6 +84,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>
   )
 }
diff --git a/app/components/items/list/items-list.stories.tsx b/app/components/items/list/items-list.stories.tsx
index 846199d0..f8fa1c81 100644
--- a/app/components/items/list/items-list.stories.tsx
+++ b/app/components/items/list/items-list.stories.tsx
@@ -120,7 +120,7 @@ export const Skeleton: ItemsListStory = {
 }
 
 export const SkeletonWithTop: ItemsListStory = {
-  render: () => <ItemsListSkeleton view={View.CARD} />,
+  render: () => <ItemsListSkeleton view={View.TOP} />,
 }
 
 export const SkeletonWithArtists: ItemsListStory = {
diff --git a/app/components/items/list/items-list.tsx b/app/components/items/list/items-list.tsx
index f797ad19..7bb91c55 100644
--- a/app/components/items/list/items-list.tsx
+++ b/app/components/items/list/items-list.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { ItemTopCard } from '../cards'
+import { ItemCard, ItemTopCard } from '../cards'
 import type { ItemPosition } from '../misc'
 
 import { ItemsListElement } from './items-list-element'
@@ -20,6 +20,7 @@ import {
   CarouselPrevious,
 } from '@app/components/ui/carousel'
 import { Separator } from '@app/components/ui/separator'
+import { cn } from '@app/utils/cn'
 
 namespace ItemsList {
   export interface Props {
@@ -28,6 +29,7 @@ namespace ItemsList {
       | TrackEntity[]
       | RigtchStatsResponse<ArtistEntity | TrackEntity | AlbumEntity>
     isTop?: boolean
+    isCard?: boolean
     positionSize?: ItemPosition.Props['size']
     positionClassName?: string
     lastItemSeparator?: boolean
@@ -37,6 +39,7 @@ namespace ItemsList {
 function ItemsList({
   items,
   isTop,
+  isCard,
   positionSize,
   positionClassName,
   lastItemSeparator = false,
@@ -112,17 +115,27 @@ function ItemsList({
         </>
       )}
 
-      <div className="flex flex-col">
+      <div
+        className={cn(
+          isCard
+            ? 'flex flex-wrap justify-center gap-4 w-full'
+            : '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}
-              positionSize={positionSize}
-              positionClassName={positionClassName}
-            />
+            {isCard ? (
+              <ItemCard {...item} />
+            ) : (
+              /* @ts-expect-error: conditional types are already handled */
+              <ItemsListElement
+                {...item}
+                positionSize={positionSize}
+                positionClassName={positionClassName}
+              />
+            )}
 
-            {items.length === index + 1 ? (
+            {isCard ? null : items.length === index + 1 ? (
               lastItemSeparator ? (
                 <Separator />
               ) : null
diff --git a/app/components/items/misc/item-artists.tsx b/app/components/items/misc/item-artists.tsx
index da4d6cbe..13e425c6 100644
--- a/app/components/items/misc/item-artists.tsx
+++ b/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 interface Props extends Pick<LinkButton.Props, 'className'> {
@@ -12,7 +12,7 @@ namespace ItemArtists {
 
 function ItemArtists({ artists, className }: ItemArtists.Props) {
   return (
-    <>
+    <span className="truncate">
       {artists.map(({ name, id }, index) => (
         <span key={name}>
           <LinkButton
@@ -28,7 +28,7 @@ function ItemArtists({ artists, className }: ItemArtists.Props) {
           {index !== artists.length - 1 && <span>, </span>}
         </span>
       ))}
-    </>
+    </span>
   )
 }
 
diff --git a/app/profile/components/common/selects/select-view.tsx b/app/profile/components/common/selects/select-view.tsx
index f944b364..427d645e 100644
--- a/app/profile/components/common/selects/select-view.tsx
+++ b/app/profile/components/common/selects/select-view.tsx
@@ -1,33 +1,38 @@
 'use client'
 
-import { LuLayers, LuList } from 'react-icons/lu'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+import { LuLayers, LuList, LuStar } from 'react-icons/lu'
 
 import type { ProfileSelectProps } from './props'
 
+import { TooltipInfo } from '@app/components/common'
 import {
   Select,
+  SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectContent,
   SelectValue,
 } from '@app/components/ui/select'
 import { View } from '@app/profile/enums'
 import { formatSearchParams } from '@app/utils/formatters'
-import { TooltipInfo } from '@app/components/common'
 
 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()
diff --git a/app/profile/enums/view.ts b/app/profile/enums/view.ts
index 26b6e304..dc2245ca 100644
--- a/app/profile/enums/view.ts
+++ b/app/profile/enums/view.ts
@@ -1,4 +1,5 @@
 export enum View {
   LIST = 'list',
+  TOP = 'TOP',
   CARD = 'card',
 }
diff --git a/app/profile/sections/items-section.tsx b/app/profile/sections/items-section.tsx
index ec3ceba5..58bb93cc 100644
--- a/app/profile/sections/items-section.tsx
+++ b/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 = DefaultSection.Props & {
@@ -29,7 +29,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 />}