fix(blocks): make navigation context aware

Author: yyyyaaa

apps/blocks/src/components/site/site-sidebar.tsx

@@ -165,6 +165,9 @@ export function SiteSidebar({ open, onNavigate, className }: SiteSidebarProps) {
           onToggle={() => setFoundationsOpen((v) => !v)}
         >
           <div className="flex flex-col gap-0.5">
+            <NavLink href="/" active={pathname === '/'} onNavigate={onNavigate}>
+              Overview
+            </NavLink>
             <NavLink href="/blocks" active={pathname === '/blocks'} onNavigate={onNavigate}>
               Setup
             </NavLink>
@@ -175,9 +178,6 @@ export function SiteSidebar({ open, onNavigate, className }: SiteSidebarProps) {
             >
               Styling
             </NavLink>
-            <NavLink href="/" active={pathname === '/'} onNavigate={onNavigate}>
-              Overview
-            </NavLink>
           </div>
         </NavSection>
 
@@ -204,10 +204,9 @@ export function SiteSidebar({ open, onNavigate, className }: SiteSidebarProps) {
         </div>
       </nav>
 
-      <div className="flex items-center gap-2 border-t border-sidebar-border px-4 py-3 text-[11.5px] text-muted-foreground">
-        <span className="inline-block size-[7px] rounded-full bg-success" aria-hidden />
-        {BASE_PRIMITIVES.length} base primitives · @constructive
-      </div>
+      <footer className="px-4 pb-4 pt-2 text-[11.5px] text-muted-foreground">
+        Built by <span className="font-medium text-sidebar-foreground">Constructive</span>
+      </footer>
     </aside>
   );
 }

apps/blocks/src/components/site/site-topbar.test.tsx

@@ -0,0 +1,68 @@
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+vi.mock('next/navigation', () => ({
+  usePathname: vi.fn(() => '/'),
+}));
+
+vi.mock('@/components/site/theme-toggle', () => ({
+  ThemeToggle: () => <button type="button">Theme</button>,
+}));
+
+import { usePathname } from 'next/navigation';
+
+import { SiteTopbar } from './site-topbar';
+
+const mockUsePathname = vi.mocked(usePathname);
+let writeText: ReturnType<typeof vi.fn>;
+
+beforeEach(() => {
+  mockUsePathname.mockReturnValue('/');
+  writeText = vi.fn().mockResolvedValue(undefined);
+  Object.defineProperty(navigator, 'clipboard', {
+    configurable: true,
+    value: { writeText },
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+describe('SiteTopbar install command', () => {
+  it('copies the exact registry item for the current component reference', async () => {
+    mockUsePathname.mockReturnValue('/blocks/ui/breadcrumb');
+    render(<SiteTopbar />);
+
+    const copyButton = screen.getByRole('button', { name: 'Copy Breadcrumb install command' });
+    expect(copyButton).toHaveTextContent('shadcn add @constructive/breadcrumb');
+
+    fireEvent.click(copyButton);
+
+    await waitFor(() => {
+      expect(writeText).toHaveBeenCalledWith('pnpm dlx shadcn@4.13.1 add @constructive/breadcrumb');
+      expect(copyButton).toHaveAccessibleName('Breadcrumb install command copied');
+    });
+  });
+
+  it('normalizes trailing slashes before resolving the registry item', () => {
+    mockUsePathname.mockReturnValue('/blocks/ui/dialog/');
+    render(<SiteTopbar />);
+
+    expect(screen.getByRole('button', { name: 'Copy Dialog install command' })).toHaveTextContent(
+      'shadcn add @constructive/dialog',
+    );
+  });
+
+  it.each(['/', '/blocks', '/blocks/styling', '/blocks/ui/not-a-registry-item'])(
+    'hides the install command on %s',
+    (pathname) => {
+      mockUsePathname.mockReturnValue(pathname);
+      render(<SiteTopbar />);
+
+      expect(screen.queryByRole('button', { name: /install command/i })).not.toBeInTheDocument();
+      expect(screen.queryByText(/shadcn add @constructive\//)).not.toBeInTheDocument();
+    },
+  );
+});

apps/blocks/src/components/site/site-topbar.tsx

@@ -8,7 +8,7 @@ import { Check, Menu, Terminal } from 'lucide-react';
 import { Button } from '@constructive-io/ui/button';
 
 import { ThemeToggle } from '@/components/site/theme-toggle';
-import { getBasePrimitive } from '@/lib/base-primitives';
+import { getBasePrimitive, registryInstall } from '@/lib/base-primitives';
 
 function normalizePath(path: string) {
   if (path.length > 1 && path.endsWith('/')) return path.slice(0, -1);
@@ -27,7 +27,20 @@ function crumbFor(path: string): string {
   return 'Registry';
 }
 
-const CLI = 'pnpm dlx shadcn@4.13.1 add @constructive/button';
+function installActionFor(path: string) {
+  const normalizedPath = normalizePath(path);
+  if (!normalizedPath.startsWith('/blocks/ui/')) return null;
+
+  const name = normalizedPath.slice('/blocks/ui/'.length);
+  const primitive = getBasePrimitive(name);
+  if (!primitive) return null;
+
+  return {
+    command: registryInstall(primitive),
+    label: `shadcn add @constructive/${primitive.name}`,
+    title: primitive.title,
+  };
+}
 
 type SiteTopbarProps = {
   onMenuClick?: () => void;
@@ -36,15 +49,22 @@ type SiteTopbarProps = {
 export function SiteTopbar({ onMenuClick }: SiteTopbarProps) {
   const pathname = usePathname() ?? '';
   const crumb = crumbFor(pathname);
-  const [copied, setCopied] = useState(false);
+  const installAction = installActionFor(pathname);
+  const [copiedCommand, setCopiedCommand] = useState<string | null>(null);
+  const copied = installAction?.command === copiedCommand;
 
   async function copyCli() {
+    if (!installAction) return;
+
+    const { command } = installAction;
     try {
-      await navigator.clipboard.writeText(CLI);
-      setCopied(true);
-      window.setTimeout(() => setCopied(false), 1600);
+      await navigator.clipboard.writeText(command);
+      setCopiedCommand(command);
+      window.setTimeout(() => {
+        setCopiedCommand((current) => (current === command ? null : current));
+      }, 1600);
     } catch {
-      setCopied(false);
+      setCopiedCommand((current) => (current === command ? null : current));
     }
   }
 
@@ -59,7 +79,7 @@ export function SiteTopbar({ onMenuClick }: SiteTopbarProps) {
           aria-label="Open navigation"
           onClick={onMenuClick}
         >
-          <Menu className="size-4" />
+          <Menu aria-hidden />
         </Button>
 
         <nav
@@ -80,20 +100,28 @@ export function SiteTopbar({ onMenuClick }: SiteTopbarProps) {
 
         <ThemeToggle />
 
-        <Button
-          type="button"
-          variant="secondary"
-          size="sm"
-          className="hidden sm:inline-flex"
-          onClick={copyCli}
-        >
-          {copied ? (
-            <Check className="size-3.5 text-emerald-500" />
-          ) : (
-            <Terminal className="size-3.5" />
-          )}
-          <span className="font-mono text-xs">{copied ? 'Copied' : 'npx shadcn add'}</span>
-        </Button>
+        {installAction ? (
+          <Button
+            type="button"
+            variant="secondary"
+            size="sm"
+            className="hidden sm:inline-flex"
+            onClick={copyCli}
+            aria-label={
+              copied
+                ? `${installAction.title} install command copied`
+                : `Copy ${installAction.title} install command`
+            }
+            title={installAction.command}
+          >
+            {copied ? (
+              <Check data-icon="inline-start" className="text-emerald-500" />
+            ) : (
+              <Terminal data-icon="inline-start" />
+            )}
+            <span className="font-mono text-xs">{copied ? 'Copied' : installAction.label}</span>
+          </Button>
+        ) : null}
 
         <Button asChild size="sm">
           <Link href="/blocks">Setup</Link>