feat(docs): add subtle chart-specific icons to wiki sidebar

docs-app/components/WikiNavIcon.tsx

@@ -0,0 +1,39 @@
+// Sidebar icon names follow wiki slugs, not display titles (which can vary by version).
+const ICONS: Record<string, string> = {
+  '': 'overview',
+  'bar-chart': 'bar',
+  'heatmap-chart': 'heatmap',
+  'histogram-chart': 'histogram',
+  'line-chart': 'line',
+  'pie-chart': 'pie',
+  'radar-chart': 'radar',
+  'ring-gauge-chart': 'ring-gauge',
+  'scatter-chart': 'scatter',
+  'segmented-ring-gauge-chart': 'segmented-ring',
+  'stacked-area-chart': 'stacked-area',
+  'stacked-bar-chart': 'stacked-bar',
+  customization: 'customization',
+  gradients: 'gradients',
+  migration: 'migration',
+  screenshots: 'screenshots',
+};
+
+export function WikiNavIcon({ slug, active }: { slug: string; active: boolean }) {
+  const icon = ICONS[slug] ?? 'document';
+
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      viewBox="0 0 24 24"
+      className={`h-[18px] w-[18px] shrink-0 ${active ? 'text-[var(--color-primary)]' : 'text-[var(--text-muted)]'}`}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.7"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <use href={`/wiki-nav-icons.svg#${icon}`} />
+    </svg>
+  );
+}

docs-app/components/WikiSidebar.tsx

@@ -3,6 +3,7 @@
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useRef } from 'react';
+import { WikiNavIcon } from './WikiNavIcon';
 import type { NavItem } from '@/lib/types';
 import { useScrollActiveIntoView } from '@/lib/use-scroll-active-into-view';
 import { cn, stickySidebar } from '@/lib/utils';
@@ -44,7 +45,10 @@ export function WikiSidebar({ navigation }: WikiSidebarProps) {
               )}
               aria-current={isActive(item.path) ? 'page' : undefined}
             >
-              {item.title}
+              <span className="flex min-w-0 items-center gap-2.5">
+                <WikiNavIcon slug={item.slug} active={isActive(item.path)} />
+                <span className="min-w-0">{item.title}</span>
+              </span>
               {item.badgeCount ? (
                 <span className="rounded-full bg-[var(--color-warning)] px-1.5 py-0.5 text-[10px] font-semibold leading-none text-[var(--bg-primary)]">
                   {item.badgeCount}