refactor(components): extract mega menu components and update i18n usage

ericyangpan · claude · ericyangpan · commit 51259b851728 · 2025-11-30T20:51:30.000+08:00
Extract mega menu components to dedicated files and update all components to use the new namespaced i18n structure. Changes: - Extract mega menu components: - Move RankingMegaMenu from src/components/ → src/components/controls/ - Move StackMegaMenu from src/components/ → src/components/controls/ - Update all components to use new namespaced i18n translations - Update Header and Footer with new i18n structure - Update control components (Breadcrumb, LanguageSwitcher, SearchDialog, SearchInput, ThemeSwitcher) - Update navigation components (StackTabs) - Maintain minimalist design system throughout 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,7 +1,9 @@
-import { getTranslations } from 'next-intl/server'
+'use client'
+
+import { useTranslations } from 'next-intl'
+import LanguageSwitcher from '@/components/controls/LanguageSwitcher'
+import ThemeSwitcher from '@/components/controls/ThemeSwitcher'
 import { Link } from '@/i18n/navigation'
-import LanguageSwitcher from './controls/LanguageSwitcher'
-import ThemeSwitcher from './controls/ThemeSwitcher'
 
 // Footer link list component to reduce code duplication
 interface FooterLinkListProps {
@@ -32,11 +34,11 @@ function FooterLinkList({ title, links }: FooterLinkListProps) {
   )
 }
 
-export default async function Footer() {
-  const tFooter = await getTranslations('footer')
-  const tCommunity = await getTranslations('community')
-  const tStacks = await getTranslations('stacks')
-  const tHeader = await getTranslations('header')
+export default function Footer() {
+  const tFooter = useTranslations('components.footer')
+  const tPlatforms = useTranslations('shared.platforms')
+  const tStacks = useTranslations('shared.stacks')
+  const tCommon = useTranslations('shared.common')
 
   // Define link arrays (static hrefs, only labels depend on translations)
   const resourceLinks = [
@@ -49,58 +51,52 @@ export default async function Footer() {
   ]
 
   const documentationLinks = [
-    { href: '/docs', label: tFooter('docs') },
-    { href: '/articles', label: tFooter('articles') },
-    { href: '/curated-collections', label: tFooter('curatedCollections') },
-    { href: '/#faq', label: tFooter('faq') },
+    { href: '/docs', label: tCommon('docs') },
+    { href: '/articles', label: tCommon('articles') },
+    { href: '/curated-collections', label: tCommon('curatedCollections') },
+    { href: '/#faq', label: tCommon('faq') },
   ]
 
   const communityLinks = [
     {
       href: 'https://github.com/aicodingstack/aicodingstack.io',
-      label: tCommunity('github'),
+      label: tPlatforms('github'),
       isExternal: true,
     },
     {
       href: 'https://aicodingstack.io/discord',
-      label: tCommunity('discord'),
+      label: tPlatforms('discord'),
       isExternal: true,
     },
     {
       href: 'https://x.com/aicodingstack',
-      label: tCommunity('twitter'),
+      label: tPlatforms('twitter'),
       isExternal: false,
     },
   ]
 
   return (
-    <footer className="bg-[var(--color-bg)] border-t border-[var(--color-border)] py-[var(--spacing-xl)] pb-[var(--spacing-md)]">
-      <div className="max-w-8xl mx-auto px-[var(--spacing-md)]">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-9 gap-[var(--spacing-lg)] mb-[var(--spacing-lg)]">
-          <div className="flex flex-col gap-[var(--spacing-sm)] lg:col-span-3">
-            <span className="text-sm font-semibold tracking-tight">{tHeader('aiCodingStack')}</span>
-            <p className="text-sm pb-[var(--spacing-sm)] leading-[1.8] text-[var(--color-text-secondary)] font-light">
-              {tFooter('tagline')}
-              <span className="block mt-[var(--spacing-sm)]">{tFooter('openSource')}</span>
-            </p>
-            <div className="flex gap-[var(--spacing-xs)]">
-              <ThemeSwitcher />
-              <LanguageSwitcher />
-            </div>
+    <footer className="bg-[var(--color-bg)] max-w-8xl mx-auto px-[var(--spacing-md)] mt-[var(--spacing-lg)]">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-9 gap-[var(--spacing-lg)] py-[var(--spacing-lg)] border-y border-[var(--color-border)]">
+        <div className="flex flex-col gap-[var(--spacing-sm)] lg:col-span-3">
+          <span className="text-sm font-semibold tracking-tight">{tCommon('aiCodingStack')}</span>
+          <p className="text-sm pb-[var(--spacing-sm)] leading-[1.8] text-[var(--color-text-secondary)] font-light">
+            {tFooter('tagline')}
+            <span className="block mt-[var(--spacing-sm)]">{tFooter('openSource')}</span>
+          </p>
+          <div className="flex gap-[var(--spacing-xs)]">
+            <ThemeSwitcher />
+            <LanguageSwitcher />
           </div>
-
-          <FooterLinkList title={tFooter('resources')} links={resourceLinks} />
-          <FooterLinkList title={tFooter('documentation')} links={documentationLinks} />
-          <FooterLinkList title={tFooter('community')} links={communityLinks} />
         </div>
 
-        <div className="border-t border-[var(--color-border)] pt-[var(--spacing-md)]">
-          <div className="text-center">
-            <div className="text-xs leading-tight text-[var(--color-text-muted)]">
-              {tFooter('copyright')}
-            </div>
-          </div>
-        </div>
+        <FooterLinkList title={tCommon('resources')} links={resourceLinks} />
+        <FooterLinkList title={tCommon('documentation')} links={documentationLinks} />
+        <FooterLinkList title={tCommon('community')} links={communityLinks} />
+      </div>
+
+      <div className="py-[var(--spacing-md)] text-center text-xs text-[var(--color-text-muted)]">
+        {tFooter('copyright')}
       </div>
     </footer>
   )
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,19 +1,20 @@
 'use client'
 
+import { Command } from 'lucide-react'
 import Image from 'next/image'
 import { useParams } from 'next/navigation'
 import { useTranslations } from 'next-intl'
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { RankingMegaMenu } from '@/components/controls/RankingMegaMenu'
+import SearchDialog from '@/components/controls/SearchDialog'
+import { StackMegaMenu } from '@/components/controls/StackMegaMenu'
 import { Link } from '@/i18n/navigation'
-import SearchDialog from './controls/SearchDialog'
-import { RankingMegaMenu } from './RankingMegaMenu'
-import { StackMegaMenu } from './StackMegaMenu'
 
 // Menu item configuration type
 interface MenuItem {
   href: string
   translationKey: string
-  namespace?: 'header' | 'community'
+  namespace?: 'header' | 'common'
   isExternal?: boolean
   hasMegaMenu?: boolean
   megaMenuType?: 'aiCodingStack' | 'ranking'
@@ -31,8 +32,7 @@ function Header() {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [activeMegaMenu, setActiveMegaMenu] = useState<'aiCodingStack' | 'ranking' | null>(null)
   const [isSearchDialogOpen, setIsSearchDialogOpen] = useState(false)
-  const tHeader = useTranslations('header')
-  const tCommunity = useTranslations('community')
+  const t = useTranslations('components.header')
 
   // Menu items configuration - memoized to avoid recreation on each render
   const menuItems = useMemo<MenuItem[]>(
@@ -89,16 +89,6 @@ function Header() {
     return () => document.removeEventListener('keydown', handleKeyDown)
   }, [])
 
-  // Get translation text helper - memoized
-  const getMenuText = useCallback(
-    (item: MenuItem) => {
-      const t = item.namespace === 'community' ? tCommunity : tHeader
-      const text = t(item.translationKey as never)
-      return item.isExternal ? `→ ${text}` : text
-    },
-    [tHeader, tCommunity]
-  )
-
   // Render desktop menu item
   const renderDesktopMenuItem = useCallback(
     (item: MenuItem) => {
@@ -117,7 +107,7 @@ function Header() {
               aria-expanded={isActive}
               aria-haspopup="true"
             >
-              {getMenuText(item)}
+              {t(item.translationKey as never)}
             </Link>
             {item.megaMenuType === 'aiCodingStack' && (
               <StackMegaMenu isOpen={isActive} onClose={handleMegaMenuClose} />
@@ -133,17 +123,17 @@ function Header() {
         <li key={item.href}>
           {item.isExternal ? (
             <a href={item.href} target="_blank" rel="noopener" className={DESKTOP_LINK_CLASSES}>
-              {getMenuText(item)}
+              → {t(item.translationKey as never)}
             </a>
           ) : (
             <Link href={item.href} className={DESKTOP_LINK_CLASSES}>
-              {getMenuText(item)}
+              {t(item.translationKey as never)}
             </Link>
           )}
         </li>
       )
     },
-    [activeMegaMenu, handleMegaMenuOpen, handleMegaMenuClose, getMenuText]
+    [activeMegaMenu, handleMegaMenuOpen, handleMegaMenuClose, t]
   )
 
   // Render mobile menu item
@@ -152,22 +142,22 @@ function Header() {
       <li key={item.href}>
         {item.isExternal ? (
           <a href={item.href} target="_blank" rel="noopener" className={MOBILE_LINK_CLASSES}>
-            {getMenuText(item)}
+            → {t(item.translationKey as never)}
           </a>
         ) : (
           <Link href={item.href} className={MOBILE_LINK_CLASSES} onClick={handleMenuClose}>
-            {getMenuText(item)}
+            {t(item.translationKey as never)}
           </Link>
         )}
       </li>
     ),
-    [handleMenuClose, getMenuText]
+    [handleMenuClose, t]
   )
 
   // Memoized menu button label
   const menuButtonLabel = useMemo(
-    () => (isMenuOpen ? tHeader('closeMenu') : tHeader('openMenu')),
-    [isMenuOpen, tHeader]
+    () => (isMenuOpen ? t('closeMenu') : t('openMenu')),
+    [isMenuOpen, t]
   )
 
   return (
@@ -216,8 +206,11 @@ function Header() {
                   d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                 />
               </svg>
-              <span className="flex-1 text-left">{tHeader('searchPlaceholder')}</span>
-              <kbd className="px-1.5 py-0.5 text-xs border border-[var(--color-border)]">⌘K</kbd>
+              <span className="flex-1 text-left">{t('searchPlaceholder')}</span>
+              <kbd className="flex items-center gap-1 px-1.5 py-0.5 text-xs border border-[var(--color-border)]">
+                <Command className="w-3 h-3" />
+                <span>K</span>
+              </kbd>
             </button>
           </div>
 
@@ -228,7 +221,7 @@ function Header() {
               type="button"
               onClick={() => setIsSearchDialogOpen(true)}
               className="p-[var(--spacing-xs)] hover:bg-[var(--color-hover)] transition-colors"
-              aria-label={tHeader('search')}
+              aria-label={t('search')}
             >
               <svg
                 className="w-5 h-5"
@@ -251,7 +244,7 @@ function Header() {
               type="button"
               onClick={handleMenuToggle}
               className="p-[var(--spacing-xs)] hover:bg-[var(--color-hover)] transition-colors"
-              aria-label={tHeader('toggleMenu')}
+              aria-label={t('toggleMenu')}
             >
               <svg
                 className="w-6 h-6"
diff --git a/src/components/controls/Breadcrumb.tsx b/src/components/controls/Breadcrumb.tsx
@@ -1,3 +1,6 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
 import { JsonLd } from '@/components/JsonLd'
 import { Link } from '@/i18n/navigation'
 import { SITE_CONFIG } from '@/lib/metadata/config'
@@ -14,6 +17,23 @@ export interface BreadcrumbItem {
  * - Sticky behavior is enabled when scrolling using CSS position: sticky.
  */
 export function Breadcrumb({ items }: { items: BreadcrumbItem[] }) {
+  const sectionRef = useRef<HTMLElement>(null)
+
+  // Dynamically adjust sticky position based on header height
+  useEffect(() => {
+    const updateStickyPosition = () => {
+      const header = document.querySelector('header')
+      if (header && sectionRef.current) {
+        const headerHeight = header.offsetHeight
+        sectionRef.current.style.top = `${headerHeight}px`
+      }
+    }
+
+    updateStickyPosition()
+    window.addEventListener('resize', updateStickyPosition)
+    return () => window.removeEventListener('resize', updateStickyPosition)
+  }, [])
+
   // Normalize href to ensure it starts with '/' (unless it's already an absolute URL)
   const normalizeHref = (href: string): string => {
     // If it's already an absolute URL or starts with '/', return as is
@@ -52,7 +72,8 @@ export function Breadcrumb({ items }: { items: BreadcrumbItem[] }) {
     <>
       <JsonLd data={breadcrumbListSchema} />
       <section
-        className="sticky top-[4rem] z-40 py-[var(--spacing-sm)] bg-[var(--color-hover)] border-b border-[var(--color-border)] shadow-sm"
+        ref={sectionRef}
+        className="sticky z-40 py-[var(--spacing-sm)] bg-[var(--color-hover)] border-b border-[var(--color-border)] shadow-sm"
         data-breadcrumb
       >
         <div className="max-w-8xl mx-auto px-[var(--spacing-md)]">
diff --git a/src/components/controls/LanguageSwitcher.tsx b/src/components/controls/LanguageSwitcher.tsx
@@ -58,7 +58,7 @@ export default function LanguageSwitcher() {
   const locale = useLocale() as Locale
   const router = useRouter()
   const pathname = usePathname()
-  const t = useTranslations('footer')
+  const t = useTranslations('components.footer')
   const [isOpen, setIsOpen] = useState(false)
   const dropdownRef = useRef<HTMLDivElement>(null)
 
diff --git a/src/components/controls/RankingMegaMenu.tsx b/src/components/controls/RankingMegaMenu.tsx
@@ -17,7 +17,7 @@ export const RankingMegaMenu = memo(function RankingMegaMenu({
   isOpen,
   onClose,
 }: RankingMegaMenuProps) {
-  const tNav = useTranslations('header')
+  const tNav = useTranslations('components.header')
 
   if (!isOpen) return null
 
diff --git a/src/components/controls/SearchDialog.tsx b/src/components/controls/SearchDialog.tsx
@@ -102,7 +102,7 @@ export default function SearchDialog({ isOpen, onClose, locale }: SearchDialogPr
             <Command.Input
               value={query}
               onValueChange={setQuery}
-              placeholder={t('header.searchPlaceholder')}
+              placeholder={t('components.header.searchPlaceholder')}
               className="flex-1 bg-transparent text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] focus:outline-none text-base"
               autoFocus
             />
@@ -117,7 +117,7 @@ export default function SearchDialog({ isOpen, onClose, locale }: SearchDialogPr
             <Command.Empty className="py-12 text-center">
               {query.trim() === '' ? (
                 <div className="text-[var(--color-text-muted)] text-sm">
-                  {t('search.placeholder')}
+                  {t('components.search.placeholder')}
                 </div>
               ) : (
                 <div className="text-center">
@@ -136,7 +136,7 @@ export default function SearchDialog({ isOpen, onClose, locale }: SearchDialogPr
                     />
                   </svg>
                   <p className="text-sm text-[var(--color-text-muted)]">
-                    {t('search.noResultsFor', { query })}
+                    {t('components.search.noResultsFor', { query })}
                   </p>
                 </div>
               )}
@@ -164,7 +164,7 @@ export default function SearchDialog({ isOpen, onClose, locale }: SearchDialogPr
                       <div className="flex-shrink-0">
                         <span className="inline-block px-2 py-0.5 text-xs border border-[var(--color-border)] text-[var(--color-text-muted)]">
                           {t(
-                            `stacks.${result.category === 'providers' ? 'modelProviders' : result.category}`
+                            `shared.stacks.${result.category === 'providers' ? 'modelProviders' : result.category}`
                           )}
                         </span>
                       </div>
@@ -199,13 +199,13 @@ export default function SearchDialog({ isOpen, onClose, locale }: SearchDialogPr
                 <kbd className="px-1.5 py-0.5 border border-[var(--color-border)] bg-[var(--color-bg)]">
                   ↓
                 </kbd>
-                <span>{t('search.navigate')}</span>
+                <span>{t('components.search.navigate')}</span>
               </div>
               <div className="flex items-center gap-1.5">
                 <kbd className="px-1.5 py-0.5 border border-[var(--color-border)] bg-[var(--color-bg)]">
                   ↵
                 </kbd>
-                <span>{t('search.select')}</span>
+                <span>{t('components.search.select')}</span>
               </div>
             </div>
           )}
diff --git a/src/components/controls/SearchInput.tsx b/src/components/controls/SearchInput.tsx
@@ -27,7 +27,7 @@ export default function SearchInput({
   const dropdownRef = useRef<HTMLDivElement>(null)
   const debounceTimerRef = useRef<NodeJS.Timeout | null>(null)
 
-  const placeholderText = placeholder || t('header.searchPlaceholder')
+  const placeholderText = placeholder || t('components.header.searchPlaceholder')
 
   // Debounce search suggestions
   useEffect(() => {
diff --git a/src/components/controls/StackMegaMenu.tsx b/src/components/controls/StackMegaMenu.tsx
@@ -81,8 +81,8 @@ const MenuColumn = memo(function MenuColumn({
 })
 
 export const StackMegaMenu = memo(function StackMegaMenu({ isOpen, onClose }: StackMegaMenuProps) {
-  const tStacks = useTranslations('stacks')
-  const tNav = useTranslations('header')
+  const tStacks = useTranslations('shared.stacks')
+  const tNav = useTranslations('components.header')
 
   // Memoize menu sections to avoid recreating on every render
   const menuSections = useMemo(
diff --git a/src/components/controls/ThemeSwitcher.tsx b/src/components/controls/ThemeSwitcher.tsx
diff --git a/src/components/navigation/StackTabs.tsx b/src/components/navigation/StackTabs.tsx
