feat(catalog): order deprecated products last

Author: ericyangpan

src/components/product/ComparisonTable.tsx

@@ -1,7 +1,9 @@
 'use client'
 
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { DeprecatedBadge } from '@/components/controls/DeprecatedBadge'
 import { Link } from '@/i18n/navigation'
+import { sortDeprecatedLast } from '@/lib/deprecated'
 
 export interface ComparisonColumn {
   key: string
@@ -41,6 +43,7 @@ export default function ComparisonTable({
   const [scrollLeft, setScrollLeft] = useState<number>(0)
   const [calculatedOffset, setCalculatedOffset] = useState<number>(0)
   const columnWidthsMeasured = useRef(false)
+  const sortedItems = useMemo(() => sortDeprecatedLast(items), [items])
 
   useEffect(() => {
     // Calculate sticky offset based on header and breadcrumb heights
@@ -231,20 +234,23 @@ export default function ComparisonTable({
               </tr>
             </thead>
             <tbody>
-              {items.map((item, index) => (
+              {sortedItems.map((item, index) => (
                 <tr
                   key={item[itemIdKey] as string}
                   className={`border-b border-[var(--color-border)] hover:bg-[var(--color-hover)] transition-colors ${
                     index % 2 === 0 ? 'bg-[var(--color-bg)]' : 'bg-[var(--color-hover)]'
                   }`}
                 >
                   <td className="sticky left-0 z-10 bg-inherit px-[var(--spacing-md)] py-[var(--spacing-sm)] font-medium border-r border-[var(--color-border)] whitespace-nowrap">
-                    <Link
-                      href={`${itemLinkPrefix}/${item[itemIdKey] as string}`}
-                      className="text-[var(--color-text)] hover:text-[var(--color-text-secondary)] hover:underline transition-colors"
-                    >
-                      {item[itemNameKey] as string}
-                    </Link>
+                    <div className="inline-flex items-center gap-[var(--spacing-xs)]">
+                      <Link
+                        href={`${itemLinkPrefix}/${item[itemIdKey] as string}`}
+                        className="text-[var(--color-text)] hover:text-[var(--color-text-secondary)] hover:underline transition-colors"
+                      >
+                        {item[itemNameKey] as string}
+                      </Link>
+                      {item.deprecated === true && <DeprecatedBadge />}
+                    </div>
                   </td>
                   {columns.map(column => (
                     <td

src/lib/deprecated.ts

@@ -0,0 +1,15 @@
+type Deprecatable = {
+  deprecated?: boolean
+}
+
+export function sortDeprecatedLast<T extends Deprecatable>(items: readonly T[]): T[] {
+  return items
+    .map((item, index) => ({ item, index }))
+    .sort((a, b) => {
+      const deprecatedOrder =
+        Number(a.item.deprecated === true) - Number(b.item.deprecated === true)
+
+      return deprecatedOrder || a.index - b.index
+    })
+    .map(({ item }) => item)
+}

tests/deprecated-order.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest'
+import { sortDeprecatedLast } from '@/lib/deprecated'
+
+describe('deprecated product ordering', () => {
+  it('pins deprecated products after active products', () => {
+    const items = [
+      { id: 'deprecated-a', deprecated: true },
+      { id: 'active-a' },
+      { id: 'deprecated-b', deprecated: true },
+      { id: 'active-b', deprecated: false },
+    ]
+
+    expect(sortDeprecatedLast(items).map(item => item.id)).toEqual([
+      'active-a',
+      'active-b',
+      'deprecated-a',
+      'deprecated-b',
+    ])
+  })
+
+  it('preserves the existing order within each lifecycle group', () => {
+    const items = [
+      { id: 'active-b' },
+      { id: 'active-a' },
+      { id: 'deprecated-b', deprecated: true },
+      { id: 'deprecated-a', deprecated: true },
+    ]
+
+    expect(sortDeprecatedLast(items).map(item => item.id)).toEqual([
+      'active-b',
+      'active-a',
+      'deprecated-b',
+      'deprecated-a',
+    ])
+  })
+
+  it('does not mutate the input array', () => {
+    const items = [{ id: 'deprecated', deprecated: true }, { id: 'active' }]
+
+    sortDeprecatedLast(items)
+
+    expect(items.map(item => item.id)).toEqual(['deprecated', 'active'])
+  })
+})