fix(components/sidebar): disable top albums for new users

app/components/sidebar/sidebar-section-item.tsx

@@ -3,11 +3,14 @@ import type { IconType } from 'react-icons'
 
 import { Button } from '../ui/button'
 
+import { cn } from '@app/utils/cn'
+
 namespace SidebarSectionItem {
   export type Props = Readonly<{
     label: string
     href: string
     icon?: IconType
+    isDisabled?: boolean
     pathname?: string
   }>
 }
@@ -16,6 +19,7 @@ function SidebarSectionItem({
   label,
   href,
   icon: Icon,
+  isDisabled,
   pathname,
 }: SidebarSectionItem.Props) {
   const isActive = pathname === href.split('?')[0]
@@ -24,9 +28,18 @@ function SidebarSectionItem({
     <Button
       variant={isActive ? 'secondary' : 'ghost'}
       asChild
-      className="text-md w-full justify-start"
+      className={cn(
+        'text-md w-full justify-start',
+        isDisabled && 'cursor-default opacity-50'
+      )}
+      disabled={isDisabled}
     >
-      <Link href={href} className="flex gap-2" prefetch>
+      <Link
+        href={isDisabled ? '' : href}
+        className="flex gap-2"
+        prefetch
+        aria-disabled={isDisabled}
+      >
         {Icon && <Icon />}
         {label}
       </Link>

app/components/sidebar/sidebar.spec.tsx

@@ -5,6 +5,11 @@ import type { Mock } from 'vitest'
 import { Sidebar } from './sidebar'
 
 vi.mock('next/navigation')
+vi.mock('@app/api/hooks', () => ({
+  useUserQuery: vi.fn().mockReturnValue({
+    data: { createdAt: new Date() },
+  }),
+}))
 
 describe('Sidebar', () => {
   beforeEach(() => {

app/components/sidebar/sidebar.tsx

@@ -13,20 +13,23 @@ import {
 
 import { SidebarSectionItem } from './sidebar-section-item'
 
+import { useUserQuery } from '@app/api/hooks'
 import {
   STATS_MEASUREMENT,
   STATS_PROVIDER,
   TIME_RANGE,
   VIEW,
 } from '@app/profile/constants'
-import { StatsProvider } from '@app/profile/enums'
+import { RigtchTimeRange, StatsProvider } from '@app/profile/enums'
+import { isTimeRangeDisabled } from '@app/profile/utils/helpers'
 import { validateStatsProvider } from '@app/profile/utils/validators'
 import type { ParamsWithId } from '@app/types'
 
 export function Sidebar() {
   const pathname = usePathname()
   const searchParams = useSearchParams()
   const { id: userId } = useParams<ParamsWithId>()
+  const { data: user } = useUserQuery()
 
   const view = searchParams.get(VIEW)
   const statsProvider = searchParams.get(STATS_PROVIDER)
@@ -108,6 +111,10 @@ export function Sidebar() {
               label="Top Albums"
               pathname={pathname}
               icon={LuDisc3}
+              isDisabled={
+                user?.createdAt &&
+                isTimeRangeDisabled(RigtchTimeRange.WEEK, user.createdAt)
+              }
             />
 
             <SidebarSectionItem