docs: pretty chrome extension entry

packages/website/src/pages/docs/Layout.tsx

@@ -1,7 +1,10 @@
 import { ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
+import { siGooglechrome } from 'simple-icons'
 import { Link, useLocation } from 'wouter'
 
+import { SparklesText } from '@/components/ui/sparkles-text'
+
 interface DocsLayoutProps {
 	children: ReactNode
 }
@@ -76,6 +79,7 @@ export default function DocsLayout({ children }: DocsLayoutProps) {
 									<ul className="space-y-2" role="list">
 										{section.items.map((item) => {
 											const isActive = location === item.path
+											const isChromeExtension = item.path === '/features/chrome-extension'
 											return (
 												<li key={item.path}>
 													<Link
@@ -86,8 +90,26 @@ export default function DocsLayout({ children }: DocsLayoutProps) {
 																: 'text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800'
 														}`}
 														aria-current={isActive ? 'page' : undefined}
+													>
+														{isChromeExtension ? (
+															<span className="flex items-center gap-1.5">
+																<svg
+																	className="w-3.5 h-3.5 shrink-0"
+																	viewBox="0 0 24 24"
+																	aria-hidden="true"
+																>
+																	<path d={siGooglechrome.path} fill="currentColor" />
+																</svg>
+																<SparklesText
+																	className="text-[length:inherit] font-[inherit]"
+																	sparklesCount={3}
 																>
 																	{item.title}
+																</SparklesText>
+															</span>
+														) : (
+															item.title
+														)}
 													</Link>
 												</li>
 											)