refactor(components): update UI components

Update all components to support new manifest structure, improve type safety, and enhance functionality for product displays, navigation, controls, and sidebars.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: ericyangpan

src/components/Footer.tsx

@@ -35,42 +35,40 @@ function FooterLinkList({ title, links }: FooterLinkListProps) {
 }
 
 export default function Footer() {
-  const tFooter = useTranslations('components.footer')
-  const tPlatforms = useTranslations('shared.platforms')
-  const tStacks = useTranslations('shared.categories.plural')
-  const tTerms = useTranslations('shared.terms')
+  const tComponents = useTranslations('components')
+  const tShared = useTranslations('shared')
 
   // Define link arrays (static hrefs, only labels depend on translations)
   const resourceLinks = [
-    { href: '/ides', label: tStacks('ides') },
-    { href: '/clis', label: tStacks('clis') },
-    { href: '/extensions', label: tStacks('extensions') },
-    { href: '/models', label: tStacks('models') },
-    { href: '/model-providers', label: tStacks('modelProviders') },
-    { href: '/vendors', label: tStacks('vendors') },
+    { href: '/ides', label: tShared('categories.plural.ides') },
+    { href: '/clis', label: tShared('categories.plural.clis') },
+    { href: '/extensions', label: tShared('categories.plural.extensions') },
+    { href: '/models', label: tShared('categories.plural.models') },
+    { href: '/model-providers', label: tShared('categories.plural.modelProviders') },
+    { href: '/vendors', label: tShared('categories.plural.vendors') },
   ]
 
   const documentationLinks = [
-    { href: '/docs', label: tTerms('docs') },
-    { href: '/articles', label: tTerms('articles') },
-    { href: '/curated-collections', label: tTerms('curatedCollections') },
-    { href: '/#faq', label: tTerms('faq') },
+    { href: '/docs', label: tShared('terms.docs') },
+    { href: '/articles', label: tShared('terms.articles') },
+    { href: '/curated-collections', label: tShared('terms.curatedCollections') },
+    { href: '/#faq', label: tShared('terms.faq') },
   ]
 
   const communityLinks = [
     {
       href: 'https://github.com/aicodingstack/aicodingstack.io',
-      label: tPlatforms('github'),
+      label: tShared('platforms.github'),
       isExternal: true,
     },
     {
       href: 'https://aicodingstack.io/discord',
-      label: tPlatforms('discord'),
+      label: tShared('platforms.discord'),
       isExternal: true,
     },
     {
       href: 'https://x.com/aicodingstack',
-      label: tPlatforms('twitter'),
+      label: tShared('platforms.twitter'),
       isExternal: false,
     },
   ]
@@ -79,24 +77,26 @@ export default function Footer() {
     <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">{tTerms('aiCodingStack')}</span>
+          <span className="text-sm font-semibold tracking-tight">
+            {tShared('terms.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>
+            {tComponents('footer.tagline')}
+            <span className="block mt-[var(--spacing-sm)]">{tComponents('footer.openSource')}</span>
           </p>
           <div className="flex gap-[var(--spacing-xs)]">
             <ThemeSwitcher />
             <LanguageSwitcher />
           </div>
         </div>
 
-        <FooterLinkList title={tTerms('resources')} links={resourceLinks} />
-        <FooterLinkList title={tTerms('documentation')} links={documentationLinks} />
-        <FooterLinkList title={tTerms('community')} links={communityLinks} />
+        <FooterLinkList title={tShared('terms.resources')} links={resourceLinks} />
+        <FooterLinkList title={tShared('terms.documentation')} links={documentationLinks} />
+        <FooterLinkList title={tShared('terms.community')} links={communityLinks} />
       </div>
 
       <div className="py-[var(--spacing-md)] text-center text-xs text-[var(--color-text-muted)]">
-        {tFooter('copyright')}
+        {tComponents('footer.copyright')}
       </div>
     </footer>
   )

src/components/Header.tsx

@@ -32,7 +32,7 @@ function Header() {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [activeMegaMenu, setActiveMegaMenu] = useState<'aiCodingStack' | 'ranking' | null>(null)
   const [isSearchDialogOpen, setIsSearchDialogOpen] = useState(false)
-  const t = useTranslations('components.header')
+  const tComponents = useTranslations('components')
 
   // Menu items configuration - memoized to avoid recreation on each render
   const menuItems = useMemo<MenuItem[]>(
@@ -107,7 +107,7 @@ function Header() {
               aria-expanded={isActive}
               aria-haspopup="true"
             >
-              {t(item.translationKey as never)}
+              {tComponents(`header.${item.translationKey}`)}
             </Link>
             {item.megaMenuType === 'aiCodingStack' && (
               <StackMegaMenu isOpen={isActive} onClose={handleMegaMenuClose} />
@@ -123,17 +123,17 @@ function Header() {
         <li key={item.href}>
           {item.isExternal ? (
             <a href={item.href} target="_blank" rel="noopener" className={DESKTOP_LINK_CLASSES}>
-              → {t(item.translationKey as never)}
+              → {tComponents(`header.${item.translationKey}`)}
             </a>
           ) : (
             <Link href={item.href} className={DESKTOP_LINK_CLASSES}>
-              {t(item.translationKey as never)}
+              {tComponents(`header.${item.translationKey}`)}
             </Link>
           )}
         </li>
       )
     },
-    [activeMegaMenu, handleMegaMenuOpen, handleMegaMenuClose, t]
+    [activeMegaMenu, handleMegaMenuOpen, handleMegaMenuClose, tComponents]
   )
 
   // Render mobile menu item
@@ -142,22 +142,22 @@ function Header() {
       <li key={item.href}>
         {item.isExternal ? (
           <a href={item.href} target="_blank" rel="noopener" className={MOBILE_LINK_CLASSES}>
-            → {t(item.translationKey as never)}
+            → {tComponents(`header.${item.translationKey}`)}
           </a>
         ) : (
           <Link href={item.href} className={MOBILE_LINK_CLASSES} onClick={handleMenuClose}>
-            {t(item.translationKey as never)}
+            {tComponents(`header.${item.translationKey}`)}
           </Link>
         )}
       </li>
     ),
-    [handleMenuClose, t]
+    [handleMenuClose, tComponents]
   )
 
   // Memoized menu button label
   const menuButtonLabel = useMemo(
-    () => (isMenuOpen ? t('closeMenu') : t('openMenu')),
-    [isMenuOpen, t]
+    () => (isMenuOpen ? tComponents('header.closeMenu') : tComponents('header.openMenu')),
+    [isMenuOpen, tComponents]
   )
 
   return (
@@ -206,7 +206,7 @@ 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">{t('searchPlaceholder')}</span>
+              <span className="flex-1 text-left">{tComponents('header.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>
@@ -221,7 +221,7 @@ function Header() {
               type="button"
               onClick={() => setIsSearchDialogOpen(true)}
               className="p-[var(--spacing-xs)] hover:bg-[var(--color-hover)] transition-colors"
-              aria-label={t('search')}
+              aria-label={tComponents('header.search')}
             >
               <svg
                 className="w-5 h-5"
@@ -244,7 +244,7 @@ function Header() {
               type="button"
               onClick={handleMenuToggle}
               className="p-[var(--spacing-xs)] hover:bg-[var(--color-hover)] transition-colors"
-              aria-label={t('toggleMenu')}
+              aria-label={tComponents('header.toggleMenu')}
             >
               <svg
                 className="w-6 h-6"

src/components/controls/CopyButton.tsx

@@ -1,8 +1,10 @@
 'use client'
 
+import { useTranslations } from 'next-intl'
 import { useState } from 'react'
 
 export default function CopyButton({ text }: { text: string }) {
+  const tComponents = useTranslations('components')
   const [copied, setCopied] = useState(false)
 
   const handleCopy = async () => {
@@ -24,8 +26,12 @@ export default function CopyButton({ text }: { text: string }) {
             ? 'text-green-600'
             : 'text-[var(--color-text-muted)] hover:text-[var(--color-text)]'
         }`}
-        title={copied ? 'Copied!' : 'Copy to clipboard'}
-        aria-label={copied ? 'Copied!' : 'Copy to clipboard'}
+        title={
+          copied ? tComponents('copyButton.copied') : tComponents('copyButton.copyToClipboard')
+        }
+        aria-label={
+          copied ? tComponents('copyButton.copied') : tComponents('copyButton.copyToClipboard')
+        }
       >
         {copied ? (
           <svg
@@ -39,7 +45,7 @@ export default function CopyButton({ text }: { text: string }) {
             strokeLinejoin="round"
             role="img"
           >
-            <title>Copied</title>
+            <title>{tComponents('copyButton.copied')}</title>
             <polyline points="20 6 9 17 4 12"></polyline>
           </svg>
         ) : (
@@ -54,7 +60,7 @@ export default function CopyButton({ text }: { text: string }) {
             strokeLinejoin="round"
             role="img"
           >
-            <title>Copy to clipboard</title>
+            <title>{tComponents('copyButton.copyToClipboard')}</title>
             <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
             <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
           </svg>

src/components/controls/FilterSortBar.tsx

@@ -28,18 +28,19 @@ export default function FilterSortBar({
   searchQuery = '',
   onSearchChange,
 }: FilterSortBarProps) {
-  const t = useTranslations('components.filterSortBar')
+  const tComponents = useTranslations('components')
   const [isSortOpen, setIsSortOpen] = useState(false)
   const sortRef = useRef<HTMLDivElement>(null)
 
   const sortOptions = [
-    { value: 'default', label: t('sortDefault') },
-    { value: 'name-asc', label: t('sortNameAsc') },
-    { value: 'name-desc', label: t('sortNameDesc') },
+    { value: 'default', label: tComponents('filterSortBar.sortDefault') },
+    { value: 'name-asc', label: tComponents('filterSortBar.sortNameAsc') },
+    { value: 'name-desc', label: tComponents('filterSortBar.sortNameDesc') },
   ]
 
   const currentSortLabel =
-    sortOptions.find(opt => opt.value === sortOrder)?.label || t('sortDefault')
+    sortOptions.find(opt => opt.value === sortOrder)?.label ||
+    tComponents('filterSortBar.sortDefault')
 
   // Close dropdown when clicking outside
   useEffect(() => {
@@ -90,15 +91,17 @@ export default function FilterSortBar({
               type="text"
               value={searchQuery}
               onChange={e => onSearchChange(e.target.value)}
-              placeholder={t('search')}
+              placeholder={tComponents('filterSortBar.search')}
               className="flex-1 px-[var(--spacing-sm)] py-1 text-sm border border-[var(--color-border)] bg-[var(--color-background)] text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] focus:outline-none focus:border-[var(--color-border-strong)] transition-colors"
             />
           </div>
         )}
 
         {/* Sort Custom Dropdown */}
         <div className="flex items-center gap-[var(--spacing-xs)]">
-          <span className="text-xs text-[var(--color-text-muted)]">{t('sort')}</span>
+          <span className="text-xs text-[var(--color-text-muted)]">
+            {tComponents('filterSortBar.sort')}
+          </span>
           <div className="relative" ref={sortRef}>
             <button
               type="button"
@@ -135,7 +138,9 @@ export default function FilterSortBar({
 
         {/* License Filter Buttons */}
         <div className="flex items-center gap-[var(--spacing-xs)]">
-          <span className="text-xs text-[var(--color-text-muted)]">{t('license')}</span>
+          <span className="text-xs text-[var(--color-text-muted)]">
+            {tComponents('filterSortBar.license')}
+          </span>
           <button
             type="button"
             onClick={() => toggleLicense('open-source')}
@@ -145,7 +150,7 @@ export default function FilterSortBar({
                 : 'border-[var(--color-border)] bg-[var(--color-background)] text-[var(--color-text-secondary)] hover:border-[var(--color-border-strong)]'
             }`}
           >
-            {t('openSource')}
+            {tComponents('filterSortBar.openSource')}
           </button>
           <button
             type="button"
@@ -156,14 +161,14 @@ export default function FilterSortBar({
                 : 'border-[var(--color-border)] bg-[var(--color-background)] text-[var(--color-text-secondary)] hover:border-[var(--color-border-strong)]'
             }`}
           >
-            {t('proprietary')}
+            {tComponents('filterSortBar.proprietary')}
           </button>
         </div>
 
         {/* Platform Filter Buttons */}
         <div className="flex items-center gap-[var(--spacing-xs)]">
           <span className="text-xs text-[var(--color-text-muted)]">
-            {platformLabel || t('platform')}
+            {platformLabel || tComponents('filterSortBar.platform')}
           </span>
           {availablePlatforms.map(platform => (
             <button
@@ -188,7 +193,7 @@ export default function FilterSortBar({
             onClick={clearFilters}
             className="ml-auto px-[var(--spacing-sm)] py-1 text-sm text-[var(--color-text-muted)] hover:text-[var(--color-text)] transition-colors"
           >
-            {t('clearFilters')}
+            {tComponents('filterSortBar.clearFilters')}
           </button>
         )}
       </div>

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('components.footer')
+  const tComponents = useTranslations('components')
   const [isOpen, setIsOpen] = useState(false)
   const dropdownRef = useRef<HTMLDivElement>(null)
 
@@ -120,16 +120,16 @@ export default function LanguageSwitcher() {
         type="button"
         onClick={() => setIsOpen(!isOpen)}
         className="footer-control-button"
-        title={t('selectLanguage')}
-        aria-label={t('selectLanguage')}
+        title={tComponents('footer.selectLanguage')}
+        aria-label={tComponents('footer.selectLanguage')}
         aria-expanded={isOpen}
       >
         <Languages className="footer-control-icon" />
         {localeNames[locale]}
       </button>
 
       {isOpen && (
-        <div className="absolute bottom-full left-0 mb-1 min-w-[120px] bg-[var(--color-bg)] border border-[var(--color-border)] shadow-lg">
+        <div className="absolute bottom-full left-0 mb-1 min-w-[160px] bg-[var(--color-bg)] border border-[var(--color-border)] shadow-lg">
           {locales.map(loc => (
             <button
               type="button"

src/components/controls/ThemeSwitcher.tsx

@@ -10,15 +10,15 @@ import { useTheme } from '../ThemeProvider'
  */
 export default function ThemeSwitcher() {
   const { theme, toggleTheme } = useTheme()
-  const t = useTranslations('components.footer')
+  const tComponents = useTranslations('components')
 
   return (
     <button
       type="button"
       onClick={toggleTheme}
       className="footer-control-button"
-      title={t('toggleTheme')}
-      aria-label={t('toggleTheme')}
+      title={tComponents('footer.toggleTheme')}
+      aria-label={tComponents('footer.toggleTheme')}
     >
       {theme === 'light' ? (
         <Moon className="footer-control-icon" />

src/components/navigation/BackToNavigation.tsx

@@ -24,7 +24,7 @@ interface BackToNavigationProps {
  * <BackToNavigation href="/ides" title="All IDEs" />
  */
 export function BackToNavigation({ href, title }: BackToNavigationProps) {
-  const t = useTranslations('components.backToNavigation')
+  const tComponents = useTranslations('components')
 
   return (
     <section className="pt-[var(--spacing-lg)]">
@@ -34,10 +34,12 @@ export function BackToNavigation({ href, title }: BackToNavigationProps) {
           className="border border-[var(--color-border)] p-[var(--spacing-md)] hover:border-[var(--color-border-strong)] transition-all hover:-translate-y-0.5 flex flex-col gap-1 text-center"
         >
           <span className="text-xs text-[var(--color-text-muted)] uppercase tracking-wider font-medium">
-            ← {t('backTo')}
+            ← {tComponents('backToNavigation.backTo')}
           </span>
           <span className="text-lg font-semibold tracking-tight">{title}</span>
-          <span className="text-xs text-[var(--color-text-muted)]">[{t('indexLabel')}]</span>
+          <span className="text-xs text-[var(--color-text-muted)]">
+            [{tComponents('backToNavigation.indexLabel')}]
+          </span>
         </Link>
       </div>
     </section>