feat(fix): safari issues, optimization, react issues, visual bugs

[NodeByteLTD]

Summary by CodeRabbit

Release Notes

• Performance

  • Improved data-fetching efficiency through concurrent request handling across multiple pages
  • Optimized sorting operations using non-mutating array methods

• New Features

  • Added pagination component for changelog navigation
  • Added statistics display showing total releases and repository information
  • New hero statistics section with visual indicators

• Improvements

  • Enhanced responsive image sizing for better display on all devices
  • Improved accessibility with reduced-motion support and keyboard navigation enhancements
  • Refined list item reconciliation with stable, content-based keys
  • Better form button semantics and form interaction handling

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
website	Ready	Preview, Comment	Jun 9, 2026 3:50pm

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 6643138a-d63e-456a-b05b-3cf826649d6f

📥 Commits

Reviewing files that changed from the base of the PR and between 51164f1 and c71feaa.

📒 Files selected for processing (68)

• app/api/github/releases/route.ts
• app/games/opengraph-image.tsx
• app/games/page.tsx
• app/games/twitter-image.tsx
• app/kb/[category]/[article]/page.tsx
• app/kb/[category]/page.tsx
• app/kb/page.tsx
• app/maintenance/page.tsx
• app/opengraph-image.tsx
• app/page.tsx
• app/twitter-image.tsx
• app/vps/opengraph-image.tsx
• app/vps/twitter-image.tsx
• package.json
• packages/changelog/components/changelog-card.tsx
• packages/changelog/components/changelog-list.tsx
• packages/changelog/components/changelog-pagination.tsx
• packages/changelog/components/changelog-search.tsx
• packages/changelog/components/changelog-stats.tsx
• packages/changelog/hooks/use-changelog.ts
• packages/core/hooks/use-currency.tsx
• packages/core/hooks/use-locale.tsx
• packages/core/hooks/use-mobile.ts
• packages/core/products/server.ts
• packages/kb/components/kb-article-card.tsx
• packages/kb/components/kb-article.tsx
• packages/kb/components/kb-breadcrumb.tsx
• packages/kb/components/kb-category-card.tsx
• packages/kb/components/kb-search.tsx
• packages/kb/components/kb-sidebar.tsx
• packages/kb/lib/kb.ts
• packages/ui/components/Layouts/About/about-page.tsx
• packages/ui/components/Layouts/Contact/contact.tsx
• packages/ui/components/Layouts/Games/game-faq.tsx
• packages/ui/components/Layouts/Games/game-features.tsx
• packages/ui/components/Layouts/Games/game-hero.tsx
• packages/ui/components/Layouts/Games/game-pricing.tsx
• packages/ui/components/Layouts/Home/about.tsx
• packages/ui/components/Layouts/Home/faq.tsx
• packages/ui/components/Layouts/Home/features.tsx
• packages/ui/components/Layouts/Home/hero-graphic.tsx
• packages/ui/components/Layouts/Home/hero-stats.tsx
• packages/ui/components/Layouts/Home/hero.tsx
• packages/ui/components/Layouts/Home/services.tsx
• packages/ui/components/Layouts/Nodes/nodes-client.tsx
• packages/ui/components/Layouts/VPS/vps-hub.tsx
• packages/ui/components/Layouts/VPS/vps-pricing.tsx
• packages/ui/components/Static/footer.tsx
• packages/ui/components/Static/navigation.tsx
• packages/ui/components/scroll-to-hash.tsx
• packages/ui/components/ui/alert-dialog.tsx
• packages/ui/components/ui/badge.tsx
• packages/ui/components/ui/button-group.tsx
• packages/ui/components/ui/button-variants.ts
• packages/ui/components/ui/button.tsx
• packages/ui/components/ui/calendar.tsx
• packages/ui/components/ui/carousel.tsx
• packages/ui/components/ui/chart.tsx
• packages/ui/components/ui/field.tsx
• packages/ui/components/ui/input-group.tsx
• packages/ui/components/ui/language-selector.tsx
• packages/ui/components/ui/navigation-menu.tsx
• packages/ui/components/ui/pagination.tsx
• packages/ui/components/ui/sidebar.tsx
• packages/ui/components/ui/slider.tsx
• packages/ui/components/ui/toggle-group.tsx
• packages/ui/components/ui/toggle-variants.ts
• packages/ui/components/ui/toggle.tsx

---

📝 Walkthrough

Walkthrough

This PR modernizes the codebase through parallel data fetching, SSR-safe hooks, performance optimization with non-mutating array methods, improved React key stability, extracted UI component variants, and better accessibility. It removes Edge runtime declarations, converts pages to async server components, and refactors major components including changelog, hero stats, and navigation.

Changes

Modernization & Performance

Layer / File(s)	Summary
Runtime Edge configuration removal app/games/opengraph-image.tsx, app/games/twitter-image.tsx, app/opengraph-image.tsx, app/twitter-image.tsx, app/vps/opengraph-image.tsx, app/vps/twitter-image.tsx	Remove explicit runtime = 'edge' declarations from OpenGraph and Twitter image routes, allowing default runtime selection.
Parallel data fetching with Promise.all app/api/github/releases/route.ts, app/kb/[category]/[article]/page.tsx, app/kb/[category]/page.tsx, app/kb/page.tsx, packages/kb/lib/kb.ts	Update API routes and pages to fetch multiple concurrent dependencies (token/repos, translations, categories, articles) instead of sequential awaits using Promise.all.
Array sorting optimization with toSorted() app/kb/[category]/[article]/page.tsx, packages/kb/components/kb-article-card.tsx, packages/kb/components/kb-category-card.tsx, packages/kb/components/kb-sidebar.tsx	Replace array copy + sort pattern with non-mutating toSorted() API across Knowledge Base components.
React list key stabilization app/games/page.tsx, packages/ui/components/Layouts/About/about-page.tsx, packages/ui/components/Layouts/Contact/contact.tsx, packages/ui/components/Layouts/Games/game-faq.tsx, packages/ui/components/Layouts/Games/game-features.tsx, packages/ui/components/Layouts/Home/about.tsx, packages/ui/components/Layouts/Home/faq.tsx, packages/ui/components/Layouts/Home/features.tsx, packages/ui/components/Layouts/Home/services.tsx, packages/ui/components/Layouts/Nodes/nodes-client.tsx, packages/kb/components/kb-breadcrumb.tsx	Update React list item keys from array indices to stable identifiers (title, question, string value, label) for better reconciliation across renders.
SSR-safe hook refactoring with useSyncExternalStore packages/core/hooks/use-currency.tsx, packages/core/hooks/use-locale.tsx, packages/core/hooks/use-mobile.ts, packages/ui/components/Layouts/Nodes/nodes-client.tsx	Refactor hooks to use useSyncExternalStore for SSR safety, add localStorage initialization helpers (getInitialCurrency, getInitialLocale), cache rate building, and replace hydration detection patterns.
Changelog list & pagination component extraction packages/changelog/components/changelog-list.tsx, packages/changelog/components/changelog-pagination.tsx, packages/changelog/components/changelog-stats.tsx, packages/changelog/hooks/use-changelog.ts, packages/changelog/components/changelog-card.tsx, packages/changelog/components/changelog-search.tsx	Refactor ChangelogList to extract ChangelogPagination and ChangelogStats components, split deep-linking effects, update release type detection in use-changelog hook, and add explicit button types.
Knowledge Base search component extraction packages/kb/components/kb-search.tsx	Extract SearchContent component with explicit props, remove useMemo filtering, and pass translations object parameter for improved UI string handling.
Server component & metadata adoption app/maintenance/page.tsx, app/page.tsx	Convert maintenance page from client to async server component with metadata, add metadata exports to home page with title and description.
Hero stats component extraction and static data packages/ui/components/Layouts/Home/hero-stats.tsx, packages/ui/components/Layouts/Home/hero.tsx	Extract HeroStats component, convert animated stats to static data with icon identifiers, remove client-side animation logic and hooks from Hero.
Hero graphic canvas optimization and intersection observer packages/ui/components/Layouts/Home/hero-graphic.tsx	Optimize globe animation with precomputed dot grid, DPR-aware throttling, reduced-motion support, and IntersectionObserver for viewport-based pausing.
Button and toggle variants extracted to separate modules packages/ui/components/ui/button-variants.ts, packages/ui/components/ui/toggle-variants.ts, packages/ui/components/ui/button.tsx, packages/ui/components/ui/toggle.tsx, packages/ui/components/ui/alert-dialog.tsx, packages/ui/components/ui/badge.tsx, packages/ui/components/ui/button-group.tsx, packages/ui/components/ui/calendar.tsx, packages/ui/components/ui/toggle-group.tsx	Extract buttonVariants and toggleVariants to dedicated files using class-variance-authority, update imports across components, and narrow exports to components only.
UI component accessibility and optimization refinements packages/ui/components/ui/carousel.tsx, packages/ui/components/ui/chart.tsx, packages/ui/components/ui/field.tsx, packages/ui/components/ui/input-group.tsx, packages/ui/components/ui/language-selector.tsx, packages/ui/components/ui/pagination.tsx, packages/ui/components/ui/sidebar.tsx, packages/ui/components/ui/slider.tsx	Add type="button" attributes for correct button semantics, remove useMemo usage, add keyboard event handlers, improve accessibility with aria-label and role, and refactor state management with refs and inline assignment.
Navigation, footer, and sidebar improvements packages/ui/components/Static/navigation.tsx, packages/ui/components/Static/footer.tsx, packages/ui/components/ui/sidebar.tsx, packages/ui/components/scroll-to-hash.tsx	Remove useMemo from navigation data structures, add accessibility attributes to mobile menu overlay, refactor footer image loading with Next.js Image and status indicator error handling, update sidebar state management and skeleton width generation, improve scroll-to-hash cleanup.
Image sizing, carousel refactoring, and other optimizations packages/ui/components/Layouts/Games/game-hero.tsx, packages/ui/components/Layouts/Games/game-pricing.tsx, packages/core/products/server.ts, packages/ui/components/ui/carousel.tsx, packages/ui/components/ui/navigation-menu.tsx, package.json	Add responsive sizes attributes to Game images, refactor carousel event handling to use refs instead of callbacks, extract product override helper, remove export re-exports, and add translate:dry and doctor scripts to package.json.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• NodeByteHosting/website#101: Both PRs modify app/api/github/releases/route.ts's GET handler to change how the API selects/configures the GitHub repositories/tokens before fetching/sorting releases.

Suggested reviewers

• CodeMeAPixel

Poem

🐰 Whiskers twitch with delight,
Promises dance in parallel light,
Keys align, hooks are safe,
Memoization leaves nary a trace,
This codebase now hops with such grace! 🌟

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch development

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}