fix(router): disambiguate library landing links

Author: KevinVandy

src/components/LibraryLayout.tsx

@@ -38,6 +38,7 @@ import { Card } from './Card'
 import { PartnersRail, RightRail } from './RightRail'
 import { trackEvent, useTrackedImpression } from '~/utils/analytics'
 import {
+  getLibraryTabLinkOptions,
   getMenuGroupInitialOpenState,
   isChartsCatalogTarget,
 } from './library-layout-navigation'
@@ -1183,23 +1184,19 @@ export function LibraryLayout({
                   return null
                 }
 
-                const linkParams =
-                  !target.to.startsWith('/') ||
-                  target.to.includes('/$libraryId')
-                    ? ({ libraryId, version } as never)
-                    : undefined
+                const linkOptions = getLibraryTabLinkOptions({
+                  libraryId,
+                  version,
+                  to: target.to,
+                })
                 const isActive = tab.id === activeTabId
 
                 return (
                   <li key={tab.id}>
                     <Link
-                      from={
-                        isChartsCatalogTarget(target.to)
-                          ? undefined
-                          : '/$libraryId/$version/docs'
-                      }
-                      to={target.to}
-                      params={linkParams}
+                      from={linkOptions.from as never}
+                      to={linkOptions.to as never}
+                      params={linkOptions.params as never}
                       onClick={closeMobileMenu}
                       preload={
                         isChartsCatalogTarget(target.to) ? false : 'intent'
@@ -1374,21 +1371,18 @@ export function LibraryLayout({
                 return null
               }
 
-              const linkParams =
-                !target.to.startsWith('/') || target.to.includes('/$libraryId')
-                  ? ({ libraryId, version } as never)
-                  : undefined
+              const linkOptions = getLibraryTabLinkOptions({
+                libraryId,
+                version,
+                to: target.to,
+              })
 
               return (
                 <Link
                   key={tab.id}
-                  from={
-                    isChartsCatalogTarget(target.to)
-                      ? undefined
-                      : '/$libraryId/$version/docs'
-                  }
-                  to={target.to}
-                  params={linkParams}
+                  from={linkOptions.from as never}
+                  to={linkOptions.to as never}
+                  params={linkOptions.params as never}
                   preload={isChartsCatalogTarget(target.to) ? false : 'intent'}
                   activeOptions={{
                     exact: true,

src/components/library-layout-navigation.ts

@@ -4,6 +4,30 @@ export function isChartsCatalogTarget(to: string) {
   return to === '/charts/catalog' || to.startsWith('/charts/catalog/')
 }
 
+export function getLibraryTabLinkOptions({
+  libraryId,
+  version,
+  to,
+}: {
+  libraryId: string
+  version: string
+  to: string
+}) {
+  const isHomeTarget = to === '..'
+
+  return {
+    from:
+      isHomeTarget || isChartsCatalogTarget(to)
+        ? undefined
+        : '/$libraryId/$version/docs',
+    to: isHomeTarget ? `/${libraryId}/${version}` : to,
+    params:
+      !isHomeTarget && (!to.startsWith('/') || to.includes('/$libraryId'))
+        ? { libraryId, version }
+        : undefined,
+  }
+}
+
 function normalizeMenuPath(path: string) {
   return path.replace(/\/+$/, '')
 }

tests/charts-sidebar-navigation.test.ts

@@ -1,5 +1,6 @@
 import assert from 'node:assert/strict'
 import {
+  getLibraryTabLinkOptions,
   getMenuGroupInitialOpenState,
   isChartsCatalogTarget,
 } from '../src/components/library-layout-navigation'
@@ -9,6 +10,34 @@ assert.equal(isChartsCatalogTarget('/charts/catalog/charts/01-line'), true)
 assert.equal(isChartsCatalogTarget('/charts/catalog/collections/shadcn'), true)
 assert.equal(isChartsCatalogTarget('/charts/catalogue'), false)
 
+assert.deepEqual(
+  getLibraryTabLinkOptions({
+    libraryId: 'table',
+    version: 'latest',
+    to: '..',
+  }),
+  {
+    from: undefined,
+    to: '/table/latest',
+    params: undefined,
+  },
+  'a landing-page Home tab uses its concrete route instead of the generic library route',
+)
+
+assert.deepEqual(
+  getLibraryTabLinkOptions({
+    libraryId: 'table',
+    version: 'v8',
+    to: 'guide/intro',
+  }),
+  {
+    from: '/$libraryId/$version/docs',
+    to: 'guide/intro',
+    params: { libraryId: 'table', version: 'v8' },
+  },
+  'relative docs tabs retain their generic docs-route context',
+)
+
 const groups = [
   {
     label: 'Individual Charts',