jamdesk 1.0.0

package/vendored/components/navigation/LanguageSelector.tsx

@@ -0,0 +1,249 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { useRouter, usePathname } from 'next/navigation';
+import type { ResolvedLanguage } from '@/lib/navigation-resolver';
+import type { LanguageCode } from '@/lib/docs-types';
+import {
+  transformLanguagePath,
+  saveLanguagePreference,
+  getLanguagePreference,
+} from '@/lib/language-utils';
+import { useLinkPrefix } from '@/lib/link-prefix-context';
+
+interface LanguageSelectorProps {
+  /** Available languages from resolved navigation */
+  languages: ResolvedLanguage[];
+  /** Whether to show compact mode (flag only, used in header) */
+  compact?: boolean;
+  /** Dropdown direction: 'up' for sidebar, 'down' for header */
+  position?: 'up' | 'down';
+  /** Default language code for path transformation */
+  defaultLanguage?: LanguageCode;
+}
+
+export function LanguageSelector({
+  languages,
+  compact = false,
+  position = 'down',
+  defaultLanguage = 'en',
+}: LanguageSelectorProps) {
+  const router = useRouter();
+  const linkPrefix = useLinkPrefix();
+  const pathname = usePathname();
+  const [isOpen, setIsOpen] = useState(false);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const listRef = useRef<HTMLUListElement>(null);
+
+  // Find current language
+  const currentLanguage = languages.find((l) => l.isActive) || languages[0];
+
+  // Find actual default language from config
+  const actualDefault = languages.find((l) => l.isDefault)?.code || defaultLanguage;
+
+  // Check localStorage preference on mount and redirect if needed
+  useEffect(() => {
+    const savedPref = getLanguagePreference();
+    if (savedPref && currentLanguage && savedPref !== currentLanguage.code) {
+      // Only redirect if on default language URL (no explicit language in path)
+      const hasLangInPath = languages.some(
+        (l) => pathname?.includes(`/${l.code}/`) || pathname?.endsWith(`/${l.code}`)
+      );
+      if (!hasLangInPath) {
+        const basePath = transformLanguagePath(
+          pathname || '/docs',
+          actualDefault,
+          savedPref,
+          actualDefault
+        );
+        router.replace(`${linkPrefix}${basePath}`);
+      }
+    }
+  }, []); // Only run once on mount
+
+  // Handle click outside to close
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleClickOutside = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [isOpen]);
+
+  // Handle keyboard navigation
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      switch (e.key) {
+        case 'Escape':
+          setIsOpen(false);
+          buttonRef.current?.focus();
+          break;
+        case 'ArrowDown':
+          e.preventDefault();
+          if (!isOpen) {
+            setIsOpen(true);
+            setFocusedIndex(0);
+          } else {
+            setFocusedIndex((prev) => (prev + 1) % languages.length);
+          }
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          if (isOpen) {
+            setFocusedIndex((prev) => (prev - 1 + languages.length) % languages.length);
+          }
+          break;
+        case 'Enter':
+        case ' ':
+          e.preventDefault();
+          if (!isOpen) {
+            setIsOpen(true);
+            setFocusedIndex(languages.findIndex((l) => l.isActive));
+          } else if (focusedIndex >= 0) {
+            handleSelectLanguage(languages[focusedIndex]);
+          }
+          break;
+        case 'Tab':
+          if (isOpen) {
+            setIsOpen(false);
+          }
+          break;
+      }
+    },
+    [isOpen, focusedIndex, languages]
+  );
+
+  // Focus the item when focusedIndex changes
+  useEffect(() => {
+    if (isOpen && focusedIndex >= 0 && listRef.current) {
+      const items = listRef.current.querySelectorAll('[role="option"]');
+      (items[focusedIndex] as HTMLElement)?.focus();
+    }
+  }, [isOpen, focusedIndex]);
+
+  // Handle language selection
+  const handleSelectLanguage = (lang: ResolvedLanguage) => {
+    if (lang.code === currentLanguage?.code) {
+      setIsOpen(false);
+      return;
+    }
+
+    // Save preference to localStorage
+    saveLanguagePreference(lang.code);
+
+    // Transform path and navigate
+    const basePath = transformLanguagePath(
+      pathname || '/docs',
+      currentLanguage?.code || actualDefault,
+      lang.code,
+      actualDefault
+    );
+
+    setIsOpen(false);
+    router.push(`${linkPrefix}${basePath}`);
+  };
+
+  // Don't render if no languages or only one language
+  if (!languages || languages.length <= 1) {
+    return null;
+  }
+
+  return (
+    <div ref={containerRef} className="relative" onKeyDown={handleKeyDown}>
+      {/* Trigger button */}
+      <button
+        ref={buttonRef}
+        onClick={() => setIsOpen(!isOpen)}
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
+        aria-label={`Select language, current: ${currentLanguage?.displayName}`}
+        className={`
+          flex items-center gap-2 rounded-lg transition-colors
+          text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]
+          hover:bg-[var(--color-bg-tertiary)]
+          ${compact ? 'px-2 py-1.5' : 'px-3 py-2 w-full'}
+        `}
+      >
+        <span className="text-base" role="img" aria-label={currentLanguage?.displayName}>
+          {currentLanguage?.flag}
+        </span>
+        {!compact && (
+          <>
+            <span className="flex-1 text-left text-sm font-medium truncate">
+              {currentLanguage?.displayName}
+            </span>
+            <i
+              className={`fa-solid fa-chevron-${position === 'up' ? 'up' : 'down'} h-3 w-3 transition-transform ${
+                isOpen ? (position === 'up' ? 'rotate-180' : 'rotate-180') : ''
+              }`}
+              aria-hidden="true"
+            />
+          </>
+        )}
+        {compact && (
+          <i
+            className={`fa-solid fa-chevron-down h-3 w-3 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+            aria-hidden="true"
+          />
+        )}
+      </button>
+
+      {/* Dropdown menu */}
+      {isOpen && (
+        <ul
+          ref={listRef}
+          role="listbox"
+          aria-label="Select language"
+          className={`
+            absolute z-50 min-w-[180px] py-1
+            bg-[var(--color-bg-primary)] border border-[var(--color-border)]
+            rounded-lg
+            transition-all duration-150 ease-out
+            ${position === 'up' ? 'bottom-full mb-1' : 'top-full mt-1'}
+            ${compact ? 'right-0' : 'left-0 right-0'}
+          `}
+          style={{ boxShadow: 'var(--shadow-lg)' }}
+        >
+          {languages.map((lang, index) => (
+            <li key={lang.code}>
+              <button
+                role="option"
+                aria-selected={lang.isActive}
+                tabIndex={focusedIndex === index ? 0 : -1}
+                onClick={() => handleSelectLanguage(lang)}
+                onMouseEnter={() => setFocusedIndex(index)}
+                className={`
+                  w-full flex items-center gap-3 px-3 py-2 text-sm
+                  transition-colors outline-none
+                  ${
+                    lang.isActive
+                      ? 'bg-[var(--color-accent-light)] text-[var(--color-accent-text)]'
+                      : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-secondary)] hover:text-[var(--color-text-primary)]'
+                  }
+                  ${focusedIndex === index ? 'bg-[var(--color-bg-secondary)]' : ''}
+                `}
+              >
+                <span className="text-base" role="img" aria-hidden="true">
+                  {lang.flag}
+                </span>
+                <span className="flex-1 text-left" dir={lang.isRTL ? 'rtl' : 'ltr'}>
+                  {lang.displayName}
+                </span>
+                {lang.isActive && (
+                  <i className="fa-solid fa-check h-4 w-4 text-[var(--color-accent)]" aria-hidden="true" />
+                )}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

package/vendored/components/navigation/PageNavigation.tsx

@@ -0,0 +1,174 @@
+'use client';
+
+import { useMemo } from 'react';
+import Link from 'next/link';
+import type { DocsConfig, NavigationPage, GroupConfig } from '@/lib/docs-types';
+import { normalizeNavPage } from '@/lib/docs-types';
+import { useLinkPrefix } from '@/lib/link-prefix-context';
+
+interface PageNavigationProps {
+  currentSlug: string;
+  config: DocsConfig;
+  isWideMode?: boolean;
+}
+
+/**
+ * Extract all pages from navigation structure
+ */
+function extractAllPages(config: DocsConfig): { path: string; title: string }[] {
+  const allPages: { path: string; title: string }[] = [];
+  const nav = config.navigation;
+  
+  // Helper to extract pages from a group (including nested groups)
+  function extractFromGroup(group: GroupConfig) {
+    if (group.pages) {
+      for (const item of group.pages) {
+        if (typeof item === 'string' || 'page' in item) {
+          // It's a page
+          const { path, title } = normalizeNavPage(item as NavigationPage);
+          allPages.push({ path, title });
+        } else if ('group' in item) {
+          // It's a nested group
+          extractFromGroup(item);
+        }
+      }
+    }
+  }
+  
+  // Extract from anchors
+  if (nav.anchors) {
+    for (const anchor of nav.anchors) {
+      if (anchor.groups) {
+        for (const group of anchor.groups) {
+          extractFromGroup(group);
+        }
+      }
+      if (anchor.pages) {
+        for (const item of anchor.pages) {
+          if (typeof item === 'string' || 'page' in item) {
+            const { path, title } = normalizeNavPage(item as NavigationPage);
+            allPages.push({ path, title });
+          } else if ('group' in item) {
+            extractFromGroup(item);
+          }
+        }
+      }
+    }
+  }
+  
+  // Extract from tabs
+  if (nav.tabs) {
+    for (const tab of nav.tabs) {
+      if (tab.groups) {
+        for (const group of tab.groups) {
+          extractFromGroup(group);
+        }
+      }
+      if (tab.pages) {
+        for (const item of tab.pages) {
+          if (typeof item === 'string' || 'page' in item) {
+            const { path, title } = normalizeNavPage(item as NavigationPage);
+            allPages.push({ path, title });
+          } else if ('group' in item) {
+            extractFromGroup(item);
+          }
+        }
+      }
+    }
+  }
+  
+  // Extract from top-level groups
+  if (nav.groups) {
+    for (const group of nav.groups) {
+      extractFromGroup(group);
+    }
+  }
+  
+  // Extract from top-level pages
+  if (nav.pages) {
+    for (const item of nav.pages) {
+      if (typeof item === 'string' || 'page' in item) {
+        const { path, title } = normalizeNavPage(item as NavigationPage);
+        allPages.push({ path, title });
+      } else if ('group' in item) {
+        extractFromGroup(item);
+      }
+    }
+  }
+  
+  return allPages;
+}
+
+export function PageNavigation({ currentSlug, config, isWideMode }: PageNavigationProps) {
+  // Flatten all pages from navigation into a single array (memoized to avoid tree traversal on re-renders)
+  const allPages = useMemo(() => extractAllPages(config), [config]);
+  const linkPrefix = useLinkPrefix();
+
+  // Find current page index
+  const currentIndex = allPages.findIndex(p => p.path === currentSlug);
+
+  if (currentIndex === -1) {
+    return null;
+  }
+
+  const prevPage = currentIndex > 0 ? allPages[currentIndex - 1] : null;
+  const nextPage = currentIndex < allPages.length - 1 ? allPages[currentIndex + 1] : null;
+
+  if (!prevPage && !nextPage) {
+    return null;
+  }
+
+  // Scroll to top when navigating to ensure the page gradient shows properly.
+  // Without this, Next.js client-side navigation preserves scroll position,
+  // which keeps the 'scrolled' class on body and hides the gradient.
+  const handleNavClick = () => {
+    const contentScroll = document.getElementById('content-scroll-container');
+    if (contentScroll) {
+      contentScroll.scrollTo({ top: 0, behavior: 'instant' });
+    } else {
+      window.scrollTo({ top: 0, behavior: 'instant' });
+    }
+  };
+
+  return (
+    <nav className="flex items-center justify-between gap-4 mt-12" style={isWideMode ? undefined : { maxWidth: '776px' }}>
+      {/* Previous */}
+      {prevPage ? (
+        <Link
+          href={`${linkPrefix}/${prevPage.path}`}
+          onClick={handleNavClick}
+          className="group flex-1 min-w-0 flex items-center gap-3 p-4 rounded-xl border border-[var(--color-border)] hover:border-[var(--color-accent)] hover:bg-[var(--color-bg-secondary)] no-underline"
+        >
+          <i className="fa-solid fa-chevron-left h-5 w-5 text-[var(--color-text-muted)] group-hover:text-[var(--color-accent)]" aria-hidden="true" />
+          <div className="min-w-0">
+            <div className="text-xs text-[var(--color-text-muted)] group-hover:text-[var(--color-accent)] mb-0.5">Previous</div>
+            <div className="text-sm font-medium text-[var(--color-text-primary)] truncate group-hover:text-[var(--color-accent)]">
+              {prevPage.title}
+            </div>
+          </div>
+        </Link>
+      ) : (
+        <div className="flex-1" />
+      )}
+
+      {/* Next */}
+      {nextPage ? (
+        <Link
+          href={`${linkPrefix}/${nextPage.path}`}
+          onClick={handleNavClick}
+          className="group flex-1 min-w-0 flex items-center justify-end gap-3 p-4 rounded-xl border border-[var(--color-border)] hover:border-[var(--color-accent)] hover:bg-[var(--color-bg-secondary)] text-right no-underline"
+        >
+          <div className="min-w-0">
+            <div className="text-xs text-[var(--color-text-muted)] group-hover:text-[var(--color-accent)] mb-0.5">Next</div>
+            <div className="text-sm font-medium text-[var(--color-text-primary)] truncate group-hover:text-[var(--color-accent)]">
+              {nextPage.title}
+            </div>
+          </div>
+          <i className="fa-solid fa-chevron-right h-5 w-5 text-[var(--color-text-muted)] group-hover:text-[var(--color-accent)]" aria-hidden="true" />
+        </Link>
+      ) : (
+        <div className="flex-1" />
+      )}
+    </nav>
+  );
+}